/* =========================================================
   Nelsy Díaz — Estilos finales (2025)
   Organización:
   0) Variables / Reset / Utilidades
   1) Header & Navbar
   2) Carrusel (hero) con relleno borroso + Controles
   3) Caption bajo el carrusel (no tapa imágenes)
   4) Secciones / Tipografía
   5) Noticias
   6) Galería + Lightbox
   7) Formularios / Botones
   8) Footer (iconos pro)
   9) Responsivo / Motion
   ========================================================= */

/* =========================
   0) Variables / Reset / Utils
   ========================= */
:root{
  /* Paleta base */
  --azul:#003366;
  --azul-osc:#002244;
  --rojo:#C8102E;
  --dorado:#F4B400;
  --blanco:#fff;
  --gris:#222;
  --beige:#fdf7e4;

  --text:#222;
  --muted:#444;
  --radius:12px;

  /* Bandera Colombia */
  --col-yellow:#FCD116; /* Amarillo */
  --col-blue:#003893;   /* Azul */
  --col-red:#CE1126;    /* Rojo */

  /* Marcas redes (hover) */
  --brand-fb:#1877F2;
  --brand-ig:#E4405F;
  --brand-yt:#FF0000;
  --brand-tt:#000000;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--text);
  background:var(--blanco);
  line-height:1.6;
}
.container{ width:min(1100px, 92vw); margin-inline:auto; }
.mt-2{ margin-top:1rem; }
.mt-3{ margin-top:1.5rem; }

/* Accesibilidad: Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:10px; top:10px; width:auto; height:auto; background:var(--dorado);
  color:#000; padding:.5rem .75rem; border-radius:8px; z-index:9999;
}

/* =========================
   1) Header & Navbar
   ========================= */
header{
  background:var(--azul);
  position:sticky; top:0; left:0; width:100%; z-index:1000;
  box-shadow:0 2px 5px rgba(0,0,0,.2);
}
/* Cinta tricolor bajo el header */
header::after{
  content:""; display:block; height:6px;
  background: linear-gradient(to right,
    var(--col-yellow) 0 33.33%,
    var(--col-blue)   33.33% 66.66%,
    var(--col-red)    66.66% 100%
  );
}

/* Navbar más alta (tamaño medio) */
.navbar{
  display:flex; align-items:center; gap:1.25rem;
  padding:1.2rem 0;
}

/* Logo 84x84 */
.logo{
  display:grid; place-items:center; width:84px; height:84px;
  border-radius:50%; overflow:hidden; background:var(--blanco);
}
.logo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Links centrados + tipografía ligeramente mayor */
.nav-links{
  list-style:none; display:flex; gap:2.2rem;
  margin-left:auto; margin-right:auto;
}
.nav-links a{
  text-decoration:none; color:var(--blanco); font-weight:700; position:relative;
  padding:.25rem 0;
  font-size:1.05rem;
}
.nav-links a:hover{ color:var(--dorado); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:3px;
  background:var(--dorado); border-radius:2px;
}

/* Modal del logo */
#modal-logo{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.9);
  z-index:1200; text-align:center;
}
#modal-logo img{
  max-width:80%; margin-top:80px; border-radius:var(--radius);
  box-shadow:0 0 20px rgba(255,255,255,.3);
}
#cerrar-logo{
  position:absolute; top:20px; right:40px; color:#fff;
  font-size:40px; cursor:pointer;
}

/* =========================
   2) Carrusel (hero) + Controles
   ========================= */
.carrusel{
  position:relative; width:100%;
  height:min(66vh, 680px);
  min-height:380px;
  overflow:hidden; background:#0b1120; z-index:0;
}
.slides{ position:relative; width:100%; height:100%; z-index:0; }

/* Slide como FIGURE con relleno borroso y tinte */
.slide{
  position:absolute; inset:0; margin:0; overflow:hidden;
  opacity:0; transition:opacity .8s ease; z-index:0;
}
.slide.active{ opacity:1; }

/* Capa borrosa: usa la variable --bg puesta inline en el HTML */
.slide::before{
  content:""; position:absolute; inset:-6%;
  background: center / cover no-repeat var(--bg);
  filter: blur(18px) brightness(.80);
  transform: scale(1.1);
  z-index:0;
}

/* Tinte por defecto (oscuro), personalizable con clases .tint-* */
.slide{ --tint: rgba(0,0,0,.45); }
.slide::after{
  content:""; position:absolute; inset:-6%;
  background: var(--tint);
  z-index:1; /* encima del blur, debajo de la imagen */
}

/* Imagen principal SIN RECORTE (contain) centrada */
.slide > img{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  z-index:2;
}

/* Controles */
.controles{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:space-between; padding:0 12px; pointer-events:none;
}
.prev,.next{
  pointer-events:auto; background-color:rgba(0,0,0,.5); color:#fff;
  font-size:2.2rem; cursor:pointer; padding:.35rem .6rem;
  border-radius:10px; user-select:none; line-height:1;
}
.prev:hover,.next:hover{ background-color:rgba(0,0,0,.7); }

/* Tintes Colombia (aplícalos en cada figure.slide) */
.tint-yellow{ --tint: color-mix(in srgb, var(--col-yellow) 45%, transparent); }
.tint-blue  { --tint: color-mix(in srgb, var(--col-blue)   45%, transparent); }
.tint-red   { --tint: color-mix(in srgb, var(--col-red)    45%, transparent); }

/* Degradado tricolor opcional */
.tint-flag{
  --tint:
    linear-gradient(180deg,
      color-mix(in srgb, var(--col-yellow) 36%, transparent) 0% 33%,
      color-mix(in srgb, var(--col-blue)   36%, transparent) 33% 66%,
      color-mix(in srgb, var(--col-red)    36%, transparent) 66% 100%
    );
}

/* =========================
   3) Caption bajo el carrusel (no tapa imagen)
   ========================= */
.hero-caption{
  background:
    linear-gradient(90deg,
      var(--col-yellow) 0 33.33%,
      var(--col-blue)   33.33% 66.66%,
      var(--col-red)    66.66% 100%
    );
  position: relative;
}
.hero-caption::before{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.25);
}
.hero-caption__inner{
  position: relative;
  display: grid; gap: .35rem; padding: 16px 0;
  color: #fff; text-align: center;
}
.hero-title{
  color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.35);
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2rem);
  margin: 0;
}
.hero-sub{
  margin: 0; font-weight: 600; opacity: .95;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  font-size: clamp(.95rem, .8rem + .6vw, 1.05rem);
}
@media (min-width: 768px){
  .hero-caption__inner{ padding: 18px 0; }
}

/* =========================
   4) Secciones / Tipografía
   ========================= */
main{ padding:140px 0 40px; } /* aumentado por navbar más alto */
section{ padding:40px 0; }
h1,h2{ color:var(--azul); margin-bottom:10px; }

/* Subrayados tricolor por sección */
h2{
  display:inline-block;
  border-bottom:4px solid var(--col-yellow);
  padding-bottom:6px;
}
section.alt  h2{ border-bottom-color: var(--col-blue); }
section.alt2 h2{ border-bottom-color: var(--col-red); }

/* Fondos alternos sutiles */
section.alt { background:var(--beige); border-block:1px solid #f1d98e; }
section.alt2{ background:#fafafa;  border-block:1px solid #eee; }

/* =========================
   5) Noticias
   ========================= */
#noticias{
  background:var(--beige);
  border:1px solid #f1d98e;
  padding:20px; border-radius:var(--radius);
}
.noticia{ border-bottom:1px solid #ddd; padding:12px 0; }
.noticia:last-child{ border-bottom:none; }
.noticia h3{ color:var(--rojo); }
.noticia time{ color:#666; font-size:.95rem; }

/* =========================
   6) Galería + Lightbox
   ========================= */
.galeria{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px; margin-top:12px;
}
.foto-galeria{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  box-shadow:0 3px 8px rgba(0,0,0,.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.foto-galeria:hover{
  transform:scale(1.03); box-shadow:0 5px 14px rgba(0,0,0,.25);
}

/* Lightbox accesible */
.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.9); z-index:1100;
}
.lightbox.show{ display:grid; }
.lightbox img{ max-width:92vw; max-height:86vh; border-radius:12px; }
.lightbox button{
  position:absolute; top:22px; right:24px; background:rgba(0,0,0,.6);
  color:#fff; border:none; padding:.4rem .6rem; border-radius:8px; cursor:pointer;
}
.lightbox button:hover{ background:rgba(0,0,0,.8); }

/* =========================
   7) Formularios / Botones
   ========================= */
form{
  display:flex; flex-direction:column; gap:.8rem; max-width:560px; margin:0 auto;
  background:#f9f9f9; padding:25px; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.08);
}
label{ font-weight:700; color:var(--azul); }
input, textarea, select{
  padding:10px; border:1px solid #ccc; border-radius:8px; font-size:1rem; width:100%; background:#fff;
}
.estado-envio{ text-align:center; margin-top:10px; font-weight:700; }

/* Botones con degradado Colombia */
button, .button{
  background: linear-gradient(90deg, var(--col-yellow), var(--col-red) 55%, var(--col-blue));
  color:#fff; border:none; padding:12px 16px; border-radius:10px; font-weight:800;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.16); cursor:pointer;
}
button:hover, .button:hover{
  transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.22);
}

/* =========================
   8) Footer (iconos pro)
   ========================= */
footer{
  background:var(--azul); color:#fff; text-align:center;
  padding:26px 10px; margin-top:50px;
}
footer .social-icons{
  display:flex; justify-content:center; align-items:center;
  gap:12px; margin:12px 0 8px;
}
/* Botón circular con esmaltado sutil */
footer .social-icons a{
  --ring: rgba(255,255,255,.22);
  display:inline-grid; place-items:center;
  width:44px; height:44px; border-radius:999px;
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid var(--ring);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 10px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  color:#F4F4F4; /* SVG hereda por currentColor */
  text-decoration:none;
}
footer .social-icons a:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 6px 14px rgba(0,0,0,.35);
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.35);
}
/* SVGs uniformes y limpios */
footer .social-icons a svg{
  width:22px; height:22px; display:block;
  fill:currentColor; /* clave */
}
/* Colores de marca en hover */
footer .social-icons a.facebook:hover  { color: var(--brand-fb); }
footer .social-icons a.instagram:hover { color: var(--brand-ig); }
footer .social-icons a.youtube:hover   { color: var(--brand-yt); }
footer .social-icons a.tiktok:hover    { color: var(--brand-tt); }

footer p{ opacity:.95; margin-top:4px; }

/* =========================
   9) Responsivo / Motion
   ========================= */
@media (max-width: 768px){
  .navbar{ padding:0.9rem 0; }
  .logo{ width:70px; height:70px; }
  .nav-links{ gap:1.2rem; }
  main{ padding:120px 0 36px; }
}
@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important; animation:none !important; scroll-behavior:auto !important;
  }
}