/* ===== AQPE — Landing codeada desde Figma (Gina) — MÉTODO PIXEL-PERFECT =====
   Lienzo fijo de 1920px con cada elemento en su coordenada EXACTA del Figma (px).
   Todo el escenario se escala como una sola pieza con transform:scale → cero reflujo,
   nada se mueve. Elementos REALES: textos editables, <a> con href, <img>/<video> en slots. */

:root{
  --navy:#071428;
  --green:#37bc2f;
  --white:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--navy);
  color:var(--white);
  font-family:'Quicksand',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:none}
a{text-decoration:none;color:inherit}

/* escenario escalado — stage fuera de flujo para que la altura la mande el wrap
   (evita el hueco superior en navegadores móviles) */
.stage-wrap{position:relative;width:100%;max-width:1920px;margin:0 auto;overflow:hidden}
.stage{position:absolute;top:0;left:0;width:1920px;transform-origin:top left}

/* secciones = bloques de 1920px de ancho apilados; hijos en px absolutos */
.sec{position:relative;width:1920px;overflow:hidden}
.sec .a{position:absolute}

/* fuentes */
.q{font-family:'Quicksand',sans-serif}
.b{font-family:'Barlow',sans-serif}

/* botón reutilizable */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:var(--navy);font-family:'Quicksand',sans-serif;font-weight:700;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
a[href]:hover{filter:brightness(1.06)}

/* slot editable para imagen/video (estilo claro, como los placeholders del Figma) */
.slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:#eef1ec;
  border:2px dashed rgba(55,188,47,.7);
  color:#6b7280;font-family:'Quicksand',sans-serif;font-weight:600;
  border-radius:18px;overflow:hidden;
}
.slot small{opacity:.85;font-size:.82em;margin-top:.3em}
.slot img,.slot video{width:100%;height:100%;object-fit:cover}

/* la hamburguesa no aplica en modo pixel-perfect (el nav completo se escala).
   En móvil (≤820px) mobile.css la re-activa. */
@media (min-width:821px){
  .nav-toggle{display:none!important}
}

/* wrappers de agrupación para móvil: en desktop son cajas full-bleed
   transparentes (inset:0) — los hijos conservan sus % exactos del lienzo.
   pointer-events se re-activa por hijo para no bloquear clicks. */
.m-grp{position:absolute;inset:0;pointer-events:none}
.m-grp a,.m-grp button,.m-grp input,.m-grp [data-slot]{pointer-events:auto}

/* ===== Menú superior con submenús (Eventos / Academia) ===== */
/* el header debe pintar por ENCIMA del hero para que los submenús no queden
   tapados por la sección siguiente (secciones hermanas → gana la posterior) */
#menu{z-index:100;overflow:visible}
.navitem{position:relative;display:flex;align-items:center;height:100%;cursor:pointer}
.navitem .pill{display:flex;align-items:center;gap:8px;background:var(--green);color:var(--navy);border-radius:18px;padding:8px 18px}
.navitem .navlbl{display:flex;align-items:center;gap:8px;color:#fff}
.caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--navy);transition:transform .18s}
.caret-w{border-top-color:#fff}
.navitem:hover .caret{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:0;margin-top:6px;background:var(--navy);border:1px solid var(--green);border-radius:12px;padding:8px 0;min-width:190px;display:none;flex-direction:column;z-index:60;box-shadow:0 10px 28px rgba(0,0,0,.45)}
.navitem:hover .dd{display:flex}
.dd a{color:#fff;padding:9px 20px;white-space:nowrap;font-weight:600;font-size:20px}
.dd a:hover{background:rgba(55,188,47,.18);color:var(--green)}

/* ===== Flip-cards de "¿Quiénes somos?" (frente título / reverso descripción) ===== */
.qflip{perspective:1200px;cursor:pointer}
.qflip-inner{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.qflip:hover .qflip-inner,.qflip:focus-within .qflip-inner{transform:rotateY(180deg)}
.qflip-front,.qflip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16.3px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.qflip-front .qf-photo,.qflip-front .qf-ov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qflip-front .qf-icon{width:auto;height:30%;object-fit:contain;margin-bottom:10px;position:relative;z-index:1}
.qflip-front .qf-icon-mult{mix-blend-mode:multiply}
.qflip-front .qf-title{position:relative;z-index:1;font-family:'Quicksand',sans-serif;font-weight:700;font-size:27px;color:#fff;text-shadow:0 2.5px 3px rgba(0,0,0,.35)}
.qflip-back{transform:rotateY(180deg);background:linear-gradient(155deg,#0a2e57 0%,#071428 100%);padding:22px 24px}
.qflip-back p{font-family:'Quicksand',sans-serif;color:#fff;font-weight:500;font-size:19px;line-height:1.32}

/* ===== FAQ acordeón (6 tarjetas, clic despliega la respuesta) ===== */
.faqx{background:#fff;border-radius:30.7px;box-shadow:0 1.3px 1.9px rgba(0,0,0,.1),0 1.3px 1.3px rgba(0,0,0,.1);overflow:hidden;z-index:1}
.faqx.open{z-index:30;box-shadow:0 22px 46px rgba(0,0,0,.18)}
.faqx-head{width:100%;min-height:150px;display:flex;align-items:center;gap:14px;padding:22px 26px;background:none;border:0;cursor:pointer;text-align:left;font-family:'Quicksand',sans-serif}
.faqx-leaf{width:30px;height:30px;flex:none;object-fit:contain}
.faqx-q{flex:1;font-weight:700;font-size:24px;line-height:1.24;color:#071428}
.faqx-chev{width:46px;height:46px;flex:none;background:#f1f4f0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.faqx-chev img{width:52%;height:52%;object-fit:contain}
.faqx.open .faqx-chev{transform:rotate(180deg)}
.faqx-a{max-height:0;overflow:hidden;transition:max-height .38s ease}
.faqx.open .faqx-a{max-height:420px}
.faqx-a p{padding:0 30px 26px 70px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:20px;line-height:1.36;color:#3a4658}