:root{
  --azul-oscuro:#0033A0;
  --azul-claro:#00AEEF;
  --gris:#97999B;
  --negro:#000000;
}

*{ box-sizing:border-box; }
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--negro);
}

/* Navbar / Botones */
.navbar-brand{ font-weight:800; color:var(--azul-oscuro) !important; }
.nav-link{ font-weight:600; }
.btn-brand{ background:var(--azul-oscuro); color:#fff; border:none; }
.btn-brand:hover{ background:var(--azul-claro); color:#001b57; }

/* ============ HERO ============ */
/* Base del hero (SIN background-image aquí) */
.hero{
  min-height:90vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  position:relative; overflow:hidden;
}

/* Aire interno para que el CTA no se pegue abajo */
.hero .container{ padding-block:10vh 8vh; }

/* Capas del slideshow (3 imágenes) */
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0;
  animation: heroFade 18s infinite;
  will-change: opacity;
}

/* Hero para páginas internas (ej. Inscripción) */
.hero-page {
  min-height: 60vh; /* ajusta altura */
  background: linear-gradient(135deg, var(--azul-claro), var(--azul-oscuro));
  color: #fff;
  padding: 3rem 1rem;
}


/* Asigna tus imágenes y desfases */
.hero-bg-1{ background-image:url("img/hero-fondo.jpg"); animation-delay: 0s; }
.hero-bg-2{ background-image:url("img/hero-fondo2.jpg"); animation-delay: 6s; }
.hero-bg-3{ background-image:url("img/hero-fondo3.jpg"); animation-delay:12s; }

/* Overlay azul institucional por encima de las fotos */
.hero__overlay{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg, rgba(0,51,160,.85), rgba(0,174,239,.75));
}

/* Contenido por encima de todo */
.hero > .container{ position:relative; z-index:2; }

/* Fade: entra 1s, permanece 4s, sale 1s (≈6s por slide, total 18s) */
@keyframes heroFade{
  0%   { opacity:0; }
  5%   { opacity:1; }
  30%  { opacity:1; }
  35%  { opacity:0; }
  100% { opacity:0; }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none; opacity:1; }
  .hero-bg-2, .hero-bg-3{ display:none; }
}

/* efecto en letras hero */
.hero h1, 
.hero p {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s ease forwards;
}

.hero h1 { animation-delay: 0.6s; }   /* después del logo */
.hero p  { animation-delay: 0.9s; }   /* un poco después */

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Logo del Hero + fade-in */
.hero-logo {
  width: clamp(180px, 28vw, 320px);
  display: block;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
  opacity: 0;
  transform: scale(.95);
  animation: fadeInLogo 1.2s ease-out forwards;
  animation-delay: .2s;
}

@keyframes fadeInLogo{ to{ opacity:1; transform:scale(1); } }

/* Espacio si usas contenedor de botones */
.cta-wrap{ margin-top:.25rem; }

/* ============ SECCIONES GENERALES ============ */
section{ padding:4rem 0; }
.section-muted{ background:#f8f9fa; }
.cta-mid{ background:linear-gradient(135deg, var(--azul-claro), var(--azul-oscuro)); }

/* ============ FOOTER ============ */
.footer{ background:var(--azul-oscuro); color:#fff; padding:1.5rem 0; }
.footer a{ color:#fff; text-decoration:none; margin-left:1rem; }
.footer a:hover{ text-decoration:underline; }

/* Utilidades */
.shadow-soft{ box-shadow:0 10px 30px rgba(2,6,23,.08); }

/* ============ BREAKPOINTS ============ */
@media (min-width:1200px){ .hero{ min-height:75vh; } }
@media (max-width:480px){
  .hero{ min-height:90vh; }      /* ajustaste a 90vh en móvil */
  .hero .container{ padding-block:8vh 6vh; }
}

/* Reveal on scroll */
.reveal{ 
  opacity:0; 
  transform: translateY(24px); 
  will-change: opacity, transform;
}
.reveal.in{
  opacity:1; 
  transform:none;
  transition: opacity .8s ease, transform .8s ease;
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* Imagen superior de la sección */
.quienes-hero{ margin:0 0 1.5rem; }
.quienes-hero img{
  width:100%; height:auto; display:block;
  object-fit:cover; border-radius:1rem;
}
@media (min-width: 992px){
  .quienes-hero img{ max-height:340px; }
}

/* CTA con gradiente animado de 3 tonos */
.cta-mid{
  background: linear-gradient(135deg, #0033A0, #00AEEF, #97999B);
  background-size: 400% 400%;
  animation: ctaGradient 18s ease infinite;
}

/* Keyframes del gradiente dinámico */
@keyframes ctaGradient {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 50%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

/* CTA título con efecto typing */
.cta-mid h3 {
  overflow: hidden;              
  border-right: .15em solid #fff; /* cursor */
  white-space: nowrap;           
  margin: 0 auto;
  letter-spacing: .05em;
  width: 0;                      
  animation: typing 4s steps(44, end) forwards,
             blink .75s step-end infinite;
}

/* efecto escribir */
@keyframes typing {
  from { width: 0 }
  to   { width: 44ch }   /* mide los caracteres aprox del título */
}

/* parpadeo del cursor */
@keyframes blink {
  from, to { border-color: transparent }
  50%      { border-color: #fff }
}

/* ===== Ajuste para móvil ===== */
@media (max-width: 576px){
  .cta-mid h3{
    font-size: 1.25rem;       /* más chico para que quepa */
    white-space: normal;      /* permite salto de línea */
    display: inline-block;    /* mantiene el cursor al final */
    width: 0;                 /* arranca vacío */
    animation: typingMob 5s steps(44, end) forwards,
               blink .75s step-end infinite;
  }

  @keyframes typingMob {
    from { width: 0 }
    to   { width: 100% }      /* ocupa todo el ancho disponible */
  }
}

/* Botón Hero mejorado */
.btn-brand {
  background: linear-gradient(135deg, #00AEEF, #0033A0); /* de azul claro a azul oscuro */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 8px; /* esquinas redondeadas */
  padding: 0.75rem 2rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* sombra */
  transition: all 0.3s ease;
}

/* Efecto hover */
.btn-brand:hover {
  background: linear-gradient(135deg, #0033A0, #00AEEF); /* invierte el degradado */
  transform: translateY(-2px); /* se eleva un poquito */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
  color: #fff;
}

/* Efecto de clic */
.btn-brand:active {
  transform: translateY(1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.btn-brand {
  /* lo que ya tienes */
  opacity: 0;
  transform: translateY(15px);
  animation: fadeUpBtn 0.8s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes fadeUpBtn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botón especial CTA */
.btn-cta {
  background: linear-gradient(135deg, #ffffff, #f1f1f1);
  color: #0033A0;                /* azul corporativo */
  font-weight: 700;
  border: 2px solid #0033A0;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: inline-block;
}

/* Hover efecto invertido */
.btn-cta:hover {
  background: linear-gradient(135deg, #0033A0, #00AEEF);
  color: #fff;
  border-color: #00AEEF;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

/* Botón CTA de WhatsApp */
.btn-cta-whatsapp {
  background: #25D366;
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.btn-cta-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Espacio entre botones CTA*/

.cta-wrap a {
  margin: 0 6px; /* separa un poco los botones en horizontal */
}

@media (max-width: 768px) {
  .cta-wrap a {
    margin: 6px 0; /* en móviles se apilan y se separan verticalmente */
  }
}

/* ====== MOSAICO ====== */
.mosaic { padding: 3.5rem 0; }
.mosaic-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;        /* 3 columnas */
  grid-template-rows: 260px 260px;            /* 2 filas base */
  grid-gap: 18px;
  grid-template-areas:
    "big t2 t5"
    "big t3 t4";
}

.mosaic-item{
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  min-height: 220px;
  background: #e9ecef;
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: translateZ(0);                    /* acelera animación */
}

/* Layout de cada tile */
.item-1{ grid-area: big; min-height: 100%; }
.item-2{ grid-area: t2; }
.item-3{ grid-area: t3; }
.item-4{ grid-area: t4; }
.item-5{ grid-area: t5; }

/* CORTINA/OVERLAY */
.mosaic-item .overlay{
  position: absolute; inset: 0;
  background: var(--overlay, rgba(0,51,160,.85));
  color: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Estado inicial: cortina visible */
  transform: translateY(0%);
  transition: transform .55s cubic-bezier(.2,.65,.2,1);
}

/* Texto arriba a la izquierda */
.mosaic-item .overlay::before{
  content: attr(data-title);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .95;
}

/* Flecha abajo a la derecha */
.mosaic-item .overlay::after{
  content: "→";
  align-self: flex-end;
  font-size: 2rem;
  line-height: 1;
  opacity: .9;
}

/* HOVER: corre la cortina y aparece la imagen */
.mosaic-item:hover .overlay{
  transform: translateY(-102%);  /* “cortina” hacia arriba */
}

/* Efecto suave a la imagen */
.mosaic-item:hover{
  box-shadow: 0 16px 34px rgba(2,6,23,.20);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 992px){
  .mosaic-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px 220px;
    grid-template-areas:
      "big big"
      "t2  t5"
      "t3  t4";
  }
}
@media (max-width: 576px){
  .mosaic-grid{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 220px);
    grid-template-areas:
      "big"
      "t2"
      "t5"
      "t3"
      "t4";
  }
  .item-1{ min-height: 260px; }
}

/* Mosaico – FIX sencillo para móvil */
@media (max-width: 576px) {
  .mosaic-grid{
    display: grid;
    grid-template-columns: 1fr;           /* una columna */
    grid-template-areas:
      "big"
      "t2"
      "t5"
      "t3"
      "t4";
    gap: 16px;                             /* separación clara */
  }

  .mosaic-item{
    height: 220px;                         /* altura fija para los chicos */
    overflow: hidden;                      /* nada se sale del tile */
    border-radius: 14px;
  }

  .mosaic-item.item-1{
    height: 340px;  
                     /* el grande, más alto */
  }

  /* La cortina no sube de más, evita “desbordes” */
  .mosaic-item:hover .overlay{
    transform: translateY(-100%);
  }
}

.footer {
  background: #0033A0; /* azul institucional */
}
.footer a:hover {
  text-decoration: underline;
  color: #00AEEF;
}

/* Skip-link: oculto fuera de la pantalla, aparece al hacer Tab (focus) */
.skip-link{
  position: fixed;
  left: 1rem;
  top: 1rem;
  transform: translateY(-150%);   /* lo ocultamos hacia arriba */
  background: #0033A0;            /* azul institucional */
  color: #fff;
  padding: .5rem 1rem;
  border-radius: .375rem;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(2,6,23,.25);
  z-index: 10000;                  /* por encima de la navbar */
  transition: transform .18s ease-in-out;
}

/* En foco, lo traemos a la vista */
.skip-link:focus,
.skip-link:focus-visible{
  transform: translateY(0);
}

/* Opcional: foco marcado */
.skip-link:focus-visible{
  outline: 3px solid #00AEEF;
  outline-offset: 2px;
}

/* ===== Inscripción ===== */
#inscripcion { padding: 4rem 0; }

/* Pasos (cards) */
.ins-step { position: relative; }
.ins-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  font-weight:800; color:#fff; background: var(--azul-oscuro);
  box-shadow: 0 8px 20px rgba(2,6,23,.15);
  margin-bottom:.75rem;
}

/* Checklist con check estilizado */
.ins-checklist{
  list-style:none; padding-left:0; margin:0;
}
.ins-checklist li{
  padding-left:2rem; position:relative; margin-bottom:.6rem;
}
.ins-checklist li::before{
  content:"\f00c"; /* fa-check */
  font-family:"Font Awesome 6 Free"; font-weight:900;
  color:#18c36b; position:absolute; left:0; top:.1rem;
}

/* CTA email (match con tu btn-cta principal) */
.btn-cta{
  background: linear-gradient(180deg, #2b76ff, #1b52cf);
  color:#fff; border:none; border-radius:.75rem; padding:.85rem 1.25rem;
  font-weight:800; letter-spacing:.02em; box-shadow:0 8px 24px rgba(15,38,112,.35);
}
.btn-cta:hover{ transform: translateY(-1px); color:#fff; }

/* WhatsApp (ya lo usas en CTA 1; lo replico aquí por si no está) */
.btn-cta-whatsapp{
  background:#25D366; color:#fff; border:none; border-radius:.75rem;
  padding:.85rem 1.25rem; font-weight:800; letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(37,211,102,.35);
}
.btn-cta-whatsapp:hover{ color:#fff; transform: translateY(-1px); }

/* Acordeón: bordes suaves */
#docsAccordion .accordion-button{ font-weight:600; }
#docsAccordion .accordion-item{ border:0; box-shadow: 0 8px 20px rgba(2,6,23,.06); margin-bottom:.75rem; border-radius:.75rem; overflow:hidden; }
#docsAccordion .accordion-button:not(.collapsed){ background: rgba(0,51,160,.06); }

/* Hero gradiente (mismo estilo que otras páginas) */
.hero-page {
  min-height: 38vh;
  background: linear-gradient(180deg, rgba(0,51,160,.95), rgba(0,174,239,.85));
  color: #fff;
}

/* Tarjetas de contacto */
.contact-card .contact-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.25rem;
  color: #fff;
}
.contact-ico-mail { background: #0033A0; }
.contact-ico-wa   { background: #25D366; }
.contact-ico-ig   { background: #C13584; }

.contact-card:hover { transform: translateY(-2px); transition: .2s ease; }

/* Botón WhatsApp consistente */
.btn-cta-wa {
  background: #25D366; color:#fff; border:none;
  box-shadow: 0 8px 20px rgba(37,211,102,.25);
}
.btn-cta-wa:hover { filter: brightness(1.05); color:#fff; }
.btn-cta-wa span { font-weight: 700; }

/* Botón CTA outline blanco */
.btn-cta-outline {
  background: #fff; color:#001b57; border:2px solid #001b57;
  box-shadow: 0 10px 30px rgba(2,6,23,.10);
}
.btn-cta-outline:hover { background:#001b57; color:#fff; }

/* Texto pequeño bajo el formulario */
.form-hint a { color: var(--azul-oscuro); }

/* Separación de botones CTA en móvil */
@media (max-width: 576px) {
  .cta-mid .btn {
    display: block;         /* que ocupen todo el ancho */
    width: 100%;
    margin-bottom: .75rem;  /* separación entre botones */
  }
  .cta-mid .btn:last-child {
    margin-bottom: 0;       /* quitar margen al último */
  }
}

/* ===== Consejo Ejecutivo ===== */

/* Reusa el hero simple con el gradiente del sitio */
.hero-page{
  min-height: 42vh;
  background: linear-gradient(180deg, rgba(0,51,160,.95), rgba(0,174,239,.85));
  color:#fff;
}

/* Card con borde gradiente animado y efecto “lift” */
.doc-card{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: whitesmoke;                /* fallback oscuro */
  box-shadow: 0 8px 28px rgba(2,6,23,.18);
  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease;
  isolation:isolate;                   /* para el ::before */
}
/* Borde gradiente */
.doc-card::before{
  content:"";
  position:absolute; inset:0;
  padding:1px; border-radius: 20px;
  background: linear-gradient(135deg, #0033A0, #00AEEF, #0033A0);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: docBorder 6s linear infinite;
  z-index:-1;
}
@keyframes docBorder{
  0%   { filter:hue-rotate(0deg); }
  100% { filter:hue-rotate(360deg); }
}

/* Media: foto */
.doc-media{
  aspect-ratio: 4/5;                   /* vertical pro */
  background:#0b1020;
  overflow:hidden;
}
.doc-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1);
  transition: transform .6s ease;
  filter: saturate(1.05) contrast(1.02);
}

/* Cuerpo */
.doc-body{
  padding: 1rem 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  backdrop-filter: blur(0px);
}
.doc-role{
  display:inline-block;
  font-size:.85rem;
  font-weight:700;
  color:#00AEEF;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.doc-name{
  font-size: clamp(1rem, .8rem + .6vw, 1.15rem);
  font-weight:800;
  color:#fff;
  margin:.15rem 0 .85rem;
}

/* CTA de la tarjeta (tono marca) */
.btn-doc{
  --btnBg1:#0033A0; --btnBg2:#00AEEF;
  --btnShadow: 0 10px 18px rgba(0, 94, 201, .25);
  font-weight:800;
  letter-spacing:.02em;
  padding:.7rem 1rem;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background: linear-gradient(180deg, var(--btnBg2), var(--btnBg1));
  color:#fff;
  box-shadow: var(--btnShadow);
}
.btn-doc:hover{ color:#fff; filter:brightness(1.05); transform: translateY(-1px); }

/* Hover global */
.doc-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(2,6,23,.26);
}
.doc-card:hover .doc-media img{ transform: scale(1.06); }

/* Modo claro de texto en cards (por si tu body es oscuro) */
.doc-card, .doc-card .doc-body{ color:#fff; }

/* Espaciado en mobile */
@media (max-width:576px){
  .doc-body{ padding: .9rem .9rem 1rem; }
}