/* overflow-x:CLIP y no hidden: hidden convierte .wwa-root en scroll container y
   anula TODOS los position:sticky descendientes (driver de Culture + imagen de
   historia). clip recorta igual sin crear scroll container. */
.wwa-root{background:#00101f;color:#fff;font-family:'Archivo',system-ui,-apple-system,sans-serif;overflow-x:clip;width:100%;position:relative;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wwa-root *{box-sizing:border-box;margin:0;padding:0}
  
  
  @keyframes kenburns{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.16) translate(-1.5%,-1.5%)}}
  @keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
  @keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
  @keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(28,157,232,.45)}70%{box-shadow:0 0 0 16px rgba(28,157,232,0)}100%{box-shadow:0 0 0 0 rgba(28,157,232,0)}}
  @keyframes introDown{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
  @keyframes navIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fillWhite{from{color:#41566f}to{color:#fff}}
  @keyframes introUp{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
  @keyframes revUp{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
  @keyframes revUpSm{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
  @keyframes revScale{from{opacity:0;translate:0 34px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
  @keyframes revRightIn{from{opacity:0;translate:46px 0}to{opacity:1;translate:0 0}}
  @keyframes revLeftIn{from{opacity:0;translate:-46px 0}to{opacity:1;translate:0 0}}
  @keyframes wordR{from{opacity:0;translate:160px 0}to{opacity:1;translate:0 0}}
  @keyframes wordL{from{opacity:0;translate:-160px 0}to{opacity:1;translate:0 0}}
  @keyframes driftWM{from{transform:translateY(70px)}to{transform:translateY(-70px)}}
  @keyframes mq60{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes visScroll{0%{opacity:0}40%{opacity:1}60%{opacity:1}100%{opacity:0}}
  @keyframes fadeInEl{from{opacity:0}to{opacity:1}}
  #mq60track{animation:mq60 34s linear infinite;animation-play-state:paused}
  #mq60track.run{animation-play-state:running}
  #mq60wrap:hover #mq60track.run{animation-play-state:paused}
  #cultureWords{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  /* Coreografía 28-jul: CULTURE fade-in + sube al borde superior; después las tres
     palabras entran lateralmente hasta el CENTRO y se quedan quietas (JS pilota el
     translate por scroll). Estado inicial fuera de pantalla para evitar flash. */
  #cultureWords [data-word="r0"]{translate:120vw 0}
  #cultureWords [data-word="l1"]{translate:-120vw 0}
  #cultureWords [data-word="r2"]{translate:120vw 0}
  /* mobile: imagen de historia sin sticky (evita solape en columna) */
  @media (max-width:767px){#cultImg{position:static !important;max-height:none !important}#cultText{display:flex !important}}
  /* Revisión 24-jul (Paula): en móvil el driver largo dejaba un vacío enorme
     debajo de las palabras. Se acorta el recorrido y se ajusta la escala. */
  @media (max-width:767px){
    #wordsDriver{height:150vh}
    #cultureWords [data-word]{font-size:clamp(38px,12vw,64px) !important}
    #cultWM{font-size:clamp(56px,19vw,96px) !important}
    .wwa-values-grid{grid-template-columns:1fr !important}
  }
  /* hero: "WHO WE ARE" en una sola línea en móvil (pedido de Paula) */
  @media (max-width:480px){.wwa-hero-h1{font-size:34px !important;letter-spacing:-.03em}}

/* F1 (29-jul) · Culture: recortar el scroll muerto. El driver define cuanto scroll dura la
   coreografia; con 280vh sobraban ~250px de cola en la que ya no pasaba nada ("uno siente
   que se bloqueo", Paula). Se controla desde aqui para no reescribir el embed entero.
   El inline del embedB pone 210vh; esto lo baja a 185vh en escritorio. */
#wordsDriver{ height:185vh !important; }
@media (max-width:767px){ #wordsDriver{ height:120vh !important; } }

/* ── Revisión de Andrés 10-sep-2026 (clip) ──────────────────────────────────────────
   UT-04 · Hero con esquinas inferiores de 32px como `.hero-section` de Deploy 1
   (`border-radius:0 0 32px 32px; overflow:hidden` en la propia sección). El degradado
   inline del embedA oscurecía el borde inferior hasta rgba(0,16,31,.45) —el mismo navy
   del fondo— y el redondeo no se leía: se deja solo el velo superior (legibilidad del
   nav) y el borde inferior queda limpio, sin degradado. `> div:first-of-type` es el
   velo (el <video> no es div). Se hace desde aquí para no reescribir el embedA. */
.wwa-root section[data-screen-label="Hero"]{ border-radius:0 0 32px 32px !important; overflow:hidden !important; }
.wwa-root section[data-screen-label="Hero"] > div:first-of-type{
  background:linear-gradient(180deg,rgba(0,16,31,.28) 0%,rgba(0,16,31,0) 26%) !important;
}

/* UT-30 · Tarjeta del hero alineada con `.hero2-card` de /leadership (el mismo cristal
   que portan Compliance y Our Team): rgba(8,20,38,.34) + blur(15px) + radio 28px, y la
   flecha DENTRO del cristal. Contexto: el wrapper exterior lo gobierna el custom code DE
   PÁGINA de /who-we-are (<style id="flamel-hero-card"> + script del footer, no está en
   este repo): le pone `data-fl-hero-card`, `padding-right:60px !important` e inyecta
   `img.fl-hero-arrow` como hijo del WRAPPER (right:14px), así que la flecha caía en ese
   padding, fuera de la tarjeta ("solo traslúcida", sin pestaña). Aquí se anula ese
   padding y se reserva el sitio de la pestaña dentro de la tarjeta (96px a la derecha,
   igual que `.cmp-hero-card`). El estado plegado (`.fl-hidden`, −100% + 69px) sigue
   enseñando la misma tira de 69px, ahora con cristal y flecha, como en la home.
   Especificidad (0,2,0)/(0,3,0) + !important gana al (0,1,0) + !important del head.
   `> div > div:first-child` = la tarjeta interior (hijo del wrapper; la flecha es <img>). */
.wwa-root [data-fl-hero-card]{ padding-right:0 !important; }
.wwa-root section[data-screen-label="Hero"] > div > div:first-child{
  background:rgba(8,20,38,.34) !important;
  -webkit-backdrop-filter:blur(15px) !important; backdrop-filter:blur(15px) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:28px !important;
  padding:38px 96px 42px 48px !important;
}
@media (max-width:640px){
  .wwa-root section[data-screen-label="Hero"] > div > div:first-child{ border-radius:20px !important; padding:24px 60px 28px 26px !important; }
}

/* UT-03 · Margen inferior de la tarjeta del hero = el de la home (82 px escritorio / 85 px
   móvil), constante a cualquier alto de viewport (medido en la home: 82 a 900, 700 y 1080 de
   alto; 85 a 659 y 850). Los 180/119 medidos no los pone el embed —su wrapper trae
   `bottom:clamp(40px,8vh,80px)` inline— sino el bloque `flamel-hero-card` del custom code de
   SITIO: `[data-fl-hero-card]{position:absolute !important; bottom:20% !important}` (18 % a
   ≤767 px) → 20 % de 900 = 180 y 18 % de 659 = 119. Se le gana por especificidad desde el
   bundle (0,2,0 + !important). El `:has()` es el respaldo por si el atributo no llega a
   ponerse: misma caja, mismo valor. Sólo el eje vertical; `left`/`width` se respetan. */
.wwa-root [data-fl-hero-card],
.wwa-root section[data-screen-label="Hero"] > div:has(> div > .wwa-hero-h1){ bottom:82px !important; }
@media (max-width:767px){
  .wwa-root [data-fl-hero-card],
  .wwa-root section[data-screen-label="Hero"] > div:has(> div > .wwa-hero-h1){ bottom:85px !important; }
}

/* bundle: wwa-styles-v7 (29-jul-2026) · pendiente de subir como v8 (10-sep-2026: UT-04, UT-30, UT-03) */

/* wwa-styles v9 · 12-oct-2026 · UT-34: #wordsDriver móvil 150vh → 120vh */