/* Fuentes auto-alojadas (subset latino) — carga local instantánea, sin FOUT ni reflow ni dependencia de red */
/* ============================================================
   BeFlex V2 - Port vanilla del experimento "Prisma"
   Autocontenido (HTML + CSS + JS). Fuentes: auto-alojadas en fonts/.
   Vídeos e iconos: recursos externos (fiel a localhost:5177).
   Logos de clientes: /logos (auto-alojados).
   ============================================================ */

:root{
  --cream:#DEDBC8;      /* primary - texto/acentos cálidos */
  --ink:#E1E0CC;        /* color base de texto */
  --green:#9CECAD;      /* acento verde BeFlex */
  --card-about:#101010;
  --card-feat:#212121;
  --gray400:#9CA3AF;
  --gray500:#6B7280;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;
  font-family:'Almarai',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif;}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
@media(max-width:1024px){html{scroll-snap-type:none}}
body{background:#000;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{background:none;border:0;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
.serif-it{font-family:'Instrument Serif',serif;font-style:italic}

/* --- Texturas de ruido --- */
.noise-overlay{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:300px 300px}
.bg-noise{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");background-size:300px 300px}

/* ============ HEADER ============ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;padding:16px}
@media(min-width:768px){.site-header{padding:20px 24px}}
.header-grid{margin:0 auto;max-width:1400px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}

/* BeFlex pequeño (izq) y Únete (dcha): solo tras el umbral de scroll */
.hd-logo{justify-self:start;font-size:1.25rem;font-weight:600;letter-spacing:-.03em;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
@media(min-width:768px){.hd-logo{font-size:1.5rem}}
.hd-logo .be{color:#fff;transition:color .35s var(--ease)}.hd-logo .flex{color:var(--green);transition:color .35s var(--ease)}
.hd-join{justify-self:end;display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#9CECAD;color:#000;font-weight:500;padding:6px 6px 6px 16px;font-size:.75rem;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),gap .2s var(--ease)}
@media(min-width:640px){.hd-join{font-size:.875rem}}
.hd-join:hover{gap:10px}
.hd-join .hd-join-ico{display:flex;height:28px;width:28px;align-items:center;justify-content:center;border-radius:999px;background:#000;transition:transform .2s var(--ease)}
@media(min-width:640px){.hd-join .hd-join-ico{height:32px;width:32px}}
.hd-join:hover .hd-join-ico{transform:scale(1.1)}
.hd-join-ico svg{height:14px;width:14px;stroke:var(--ink)}
.hd-join-txt-sm{display:none}
@media(max-width:639px){.hd-join-txt{display:none}.hd-join-txt-sm{display:inline}}

body.swapped .hd-logo,body.swapped .hd-join{opacity:1;transform:none;pointer-events:auto}

/* Sobre la sección clara (recomendaciones): logo y nav en oscuro para legibilidad */
body.on-light .hd-logo .be{color:#185062}
body.on-light .hd-logo .flex{color:#12B24A}
body.on-light .glass-nav{background:linear-gradient(135deg,rgba(24,80,98,.12),rgba(24,80,98,.035));border-color:rgba(24,80,98,.20);box-shadow:0 10px 30px rgba(15,30,38,.12),inset 0 1px 0 rgba(255,255,255,.55)}
body.on-light .glass-nav::before{background:radial-gradient(120% 80% at 20% 0%,rgba(24,80,98,.10),transparent 55%)}
body.on-light .glass-nav-link{color:#0F1E26;text-shadow:none}
body.on-light .glass-nav-link:hover{color:#fff;background:#185062;box-shadow:0 3px 12px rgba(15,30,38,.18);text-shadow:none}

/* --- Barra glass (centro, siempre visible) - aprox. Apple Liquid Glass --- */
.glass-nav{view-transition-name:beflex-nav;position:relative;isolation:isolate;overflow:hidden;justify-self:center;display:flex;align-items:center;gap:4px;border-radius:999px;padding:6px;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 1px rgba(255,255,255,.12),inset 0 0 20px rgba(255,255,255,.05),0 16px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.25)}
.glass-nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.45),transparent 55%);pointer-events:none}
.glass-nav-link{white-space:nowrap;color:rgba(255,255,255,.82);padding:7px 15px;border-radius:999px;font-size:11px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.25);transition:all .22s var(--ease)}
@media(min-width:640px){.glass-nav-link{font-size:.75rem}}
@media(min-width:768px){.glass-nav-link{font-size:.875rem}}
.glass-nav-link:hover{color:#0f3a47;background:rgba(255,255,255,.92);box-shadow:0 3px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.85);text-shadow:none;transform:translateY(-1px)}
.glass-nav-link.is-active{color:#0f3a47;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.85);text-shadow:none;cursor:default}
body.on-light .glass-nav-link.is-active{color:#fff;background:#185062;box-shadow:0 3px 12px rgba(15,30,38,.18);text-shadow:none}
@media(prefers-reduced-transparency:reduce){.glass-nav{background:rgba(20,20,20,.85);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ============ Transición nativa entre páginas: carrusel (View Transitions API) ============
   El navegador anima el cambio de página de forma nativa: sin iframes, sin clones, sin recargas
   visibles. Requiere servir la web por http (servidor local o hosting). Con doble clic (file://)
   o sin soporte del navegador, cae a navegación normal (sin animación, pero sin bugs). */
@view-transition{ navigation: auto; }
@keyframes vt-out-left { to { transform: translateX(-100%); } }
@keyframes vt-in-right { from { transform: translateX(100%); } }
@keyframes vt-out-right { to { transform: translateX(100%); } }
@keyframes vt-in-left { from { transform: translateX(-100%); } }
/* El root (toda la página menos la nav central) se desliza como un carrusel, sin fundido */
:root::view-transition-old(root),
:root::view-transition-new(root){ animation-duration:.6s; animation-timing-function:cubic-bezier(.45,.02,.15,1); animation-fill-mode:both; mix-blend-mode:normal }
/* Avanzar (a una sección a la derecha): la actual sale por la izquierda, la nueva entra por la derecha */
:root:active-view-transition-type(vt-forward)::view-transition-old(root){ animation-name:vt-out-left }
:root:active-view-transition-type(vt-forward)::view-transition-new(root){ animation-name:vt-in-right }
/* Retroceder: al revés */
:root:active-view-transition-type(vt-backward)::view-transition-old(root){ animation-name:vt-out-right }
:root:active-view-transition-type(vt-backward)::view-transition-new(root){ animation-name:vt-in-left }
/* Distancia: saltar varias secciones alarga el recorrido (más duración) */
:root:active-view-transition-type(vt-dist-1)::view-transition-old(root),
:root:active-view-transition-type(vt-dist-1)::view-transition-new(root){ animation-duration:.55s }
:root:active-view-transition-type(vt-dist-2)::view-transition-old(root),
:root:active-view-transition-type(vt-dist-2)::view-transition-new(root){ animation-duration:.72s }
:root:active-view-transition-type(vt-dist-3)::view-transition-old(root),
:root:active-view-transition-type(vt-dist-3)::view-transition-new(root){ animation-duration:.88s }
/* La barra de nav central se queda fija en el centro y solo cambia de estilo (crossfade dark<->claro) */
::view-transition-group(beflex-nav){ animation-duration:.5s; animation-timing-function:cubic-bezier(.45,.02,.15,1) }
::view-transition-old(beflex-nav),::view-transition-new(beflex-nav){ animation-duration:.5s }
@media (prefers-reduced-motion: reduce){
  :root::view-transition-old(root),:root::view-transition-new(root){ animation-name:none!important }
}

/* ============ HERO ============ */
.hero{height:100vh;padding:16px;scroll-snap-align:start}
@media(min-width:768px){.hero{padding:24px}}
.hero-inner{position:relative;height:100%;width:100%;overflow:hidden;border-radius:16px}
@media(min-width:768px){.hero-inner{border-radius:2rem}}
.hero-video{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
.hero-noise{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.hero-grad{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent,rgba(0,0,0,.55))}
.hero-content{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(12,1fr);align-items:end;gap:16px;padding:20px}
@media(min-width:768px){.hero-content{padding:32px}}
@media(min-width:1024px){.hero-content{padding:40px}}
.hero-title-col{grid-column:span 12}
@media(min-width:1024px){.hero-title-col{grid-column:span 8}}
.hero-title{font-weight:500;line-height:.85;letter-spacing:-.07em;font-size:26vw;transform-origin:left bottom;transition:opacity .3s var(--ease)}
@media(min-width:640px){.hero-title{font-size:24vw}}
@media(min-width:768px){.hero-title{font-size:22vw}}
@media(min-width:1024px){.hero-title{font-size:20vw}}
@media(min-width:1280px){.hero-title{font-size:19vw}}
.hero-title .be{color:#fff}.hero-title .flex{color:var(--green)}
.hero-side{grid-column:span 12;display:flex;flex-direction:column;gap:20px;padding-bottom:8px;transition:opacity .3s var(--ease)}
@media(min-width:1024px){.hero-side{grid-column:span 4}}
.hero-phrase{font-size:1.125rem;font-weight:500;line-height:1.15;color:#fff}
@media(min-width:640px){.hero-phrase{font-size:1.25rem}}
@media(min-width:768px){.hero-phrase{font-size:1.5rem}}
.hero-phrase .green{color:var(--green)}
.hero-join{display:inline-flex;width:fit-content;align-items:center;gap:8px;border-radius:999px;background:#9CECAD;color:#000;font-weight:500;padding:6px 6px 6px 24px;transition:gap .2s var(--ease)}
.hero-join:hover{gap:12px}
.hero-join-txt{font-size:.875rem}
@media(min-width:640px){.hero-join-txt{font-size:1rem}}
.hero-join-ico{display:flex;height:36px;width:36px;align-items:center;justify-content:center;border-radius:999px;background:#000;transition:transform .2s var(--ease)}
@media(min-width:640px){.hero-join-ico{height:40px;width:40px}}
.hero-join:hover .hero-join-ico{transform:scale(1.1)}
.hero-join-ico svg{height:16px;width:16px;stroke:var(--ink)}

body.swapped .hero-title{opacity:0}
body.swapped .hero-side{opacity:0;pointer-events:none}

/* ============ CARRUSEL DE CLIENTES ============ */
/* Banda compacta entre hero (1) y Pulse (2). snap-align:end + snap-stop:always:
   1er scroll → ancla mostrando el hero cortado por arriba + la banda de logos abajo;
   2º scroll → salta a la sección 2. */
.client-logos{background:#000;padding:44px 16px;scroll-snap-align:end;scroll-snap-stop:always}
@media(min-width:768px){.client-logos{padding:52px 16px}}
.cl-label{margin-bottom:24px;text-align:center;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--gray500)}
.logo-marquee-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-marquee{display:flex;align-items:center;gap:4.5rem;width:max-content;will-change:transform;animation:marquee-x 50s linear infinite;animation-play-state:paused}
.logo-marquee.run{animation-play-state:running}
.logo-marquee-wrap:hover .logo-marquee.run{animation-play-state:paused}
@keyframes marquee-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.client-logo{white-space:nowrap;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:#fff;opacity:.55;transition:opacity .2s ease}
.client-logo:hover{opacity:1}
.client-logo-img{height:24px;width:auto;max-width:260px;object-fit:contain;filter:brightness(0) invert(1);opacity:.6;transition:opacity .2s ease}
.client-logo-img:hover{opacity:1}
@media(min-width:768px){.client-logo-img{height:28px}}

/* ============ ABOUT (claro) ============ */
.about{background:#F4F6F8;min-height:100vh;display:flex;align-items:center;padding:24px 16px;scroll-snap-align:start}
.about-card{position:relative;margin:0 auto;width:100%;max-width:78rem;border-radius:1.5rem;background:transparent;padding:40px 24px;text-align:center}
@media(min-width:768px){.about-card{border-radius:2rem;padding:52px 40px}}
.about-eyebrow{color:var(--cream);font-size:10px;text-transform:uppercase;letter-spacing:.25em}
@media(min-width:640px){.about-eyebrow{font-size:.75rem}}
.about-head{margin:18px auto 0;max-width:48rem;font-size:1.7rem;line-height:1.04;display:block;color:#0F1E26}
.about-head .serif-it{color:#185062}
@media(min-width:640px){.about-head{font-size:2.05rem}}
@media(min-width:768px){.about-head{font-size:2.5rem}}
@media(min-width:1024px){.about-head{font-size:3rem}}
.about-line{display:flex;flex-wrap:wrap;justify-content:center}
/* Frase 134 empresas: mismo estilo que el titular, más grande */
.about-sub{margin:18px auto 0;max-width:54rem;font-size:1.15rem;line-height:1.32;color:#475863;font-weight:400;display:block}
@media(min-width:768px){.about-sub{font-size:1.5rem}}

/* --- Carrusel de datos BeFlex Pulse (coverflow + autoplay) --- */
.pulse-carousel{position:relative;margin:30px auto 0;max-width:920px}
.pc-stage{position:relative;height:300px}
.pcard{position:absolute;top:0;left:50%;width:340px;height:300px;transform:translateX(-50%) scale(1);
  border-radius:22px;background:#fff;border:1px solid #E5E9ED;
  box-shadow:0 22px 48px rgba(15,30,38,.10);cursor:pointer;will-change:transform,opacity;
  transition:transform .8s var(--ease),opacity .8s var(--ease),box-shadow .8s var(--ease),filter .8s var(--ease)}
.pcard.is-active{opacity:1;z-index:30;cursor:default;box-shadow:0 28px 58px rgba(15,30,38,.14),0 0 0 1px rgba(24,80,98,.14)}
.pcard.is-side{opacity:.5;z-index:20;filter:saturate(.6)}
.pcard.is-hidden{opacity:0;z-index:10;pointer-events:none}
.pcard-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:34px 30px;text-align:center}
.pcard-graphic{height:120px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.pc-bar{width:100%;max-width:230px;height:14px;border-radius:999px;background:rgba(15,30,38,.08);overflow:hidden}
.pc-bar-fill{height:100%;width:0;border-radius:999px;background:#9CECAD;transition:width 1.8s cubic-bezier(.65,0,.35,1)}
.pc-donut{width:120px;height:120px;transform:rotate(-90deg)}
.pc-donut-bg{fill:none;stroke:rgba(15,30,38,.08);stroke-width:3.2}
.pc-donut-fill{fill:none;stroke:#9CECAD;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1)}
.pcard-num{font-size:2.8rem;font-weight:800;letter-spacing:-.03em;color:#0F1E26;line-height:1}
.pcard-num .pc-den{color:rgba(15,30,38,.4);font-weight:700}
.pcard-num .pc-u{font-size:.4em;color:#17A94B;font-weight:700}
.pcard-label{margin-top:14px;font-size:.9rem;line-height:1.45;color:#6B7A82;max-width:250px}
@media(max-width:640px){
  .about{min-height:0;padding:56px 16px}
  .pulse-carousel{max-width:360px}
  .pcard{width:250px;height:290px}
  .pcard-num{font-size:2.3rem}
}

/* ============ FEATURES ============ */
.features{position:relative;min-height:100vh;background:#000;padding:64px 16px}
@media(min-width:768px){.features{padding:96px 16px}}
.features-noise{position:absolute;inset:0;opacity:.15;pointer-events:none}
.features-inner{position:relative;margin:0 auto;max-width:72rem}
.features-head{margin-bottom:40px;text-align:center;font-size:1.25rem;font-weight:400;display:flex;flex-wrap:wrap;justify-content:center}
@media(min-width:640px){.features-head{font-size:1.5rem}}
@media(min-width:768px){.features-head{margin-bottom:56px;font-size:1.875rem}}
@media(min-width:1024px){.features-head{font-size:2.25rem}}
.txt-primary{color:var(--cream)}
.txt-gray{color:var(--gray500)}
.features-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:768px){.features-grid{grid-template-columns:1fr 1fr;gap:4px}}
@media(min-width:1024px){.features-grid{grid-template-columns:repeat(4,1fr);gap:4px;height:480px}}
.fcard{border-radius:16px;opacity:0;transform:scale(.95);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fcard.in{opacity:1;transform:none}
@media(min-width:1024px){
  .fcard{border-radius:0}
  .fcard:first-child{border-radius:16px 0 0 16px}
  .fcard:last-child{border-radius:0 16px 16px 0}
}
/* Card 1 - vídeo */
.fcard-video{position:relative;overflow:hidden}
.fcard-video video{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
.fcard-video .fcard-grad{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}
.fcard-video .fcard-vcontent{position:relative;display:flex;height:100%;min-height:280px;flex-direction:column;justify-content:flex-end;padding:24px}
.fcard-video .fcard-vlabel{font-size:1.125rem;font-weight:500;color:var(--ink)}
/* Cards 2-4 - feature */
.fcard-feat{display:flex;flex-direction:column;justify-content:space-between;background:var(--card-feat);padding:24px}
.fcard-icon{height:40px;width:40px;border-radius:8px;object-fit:cover}
@media(min-width:640px){.fcard-icon{height:48px;width:48px}}
.fcard-title{margin-top:20px;font-size:1.125rem;font-weight:500;color:var(--ink)}
.fcard-title .n{color:var(--gray500)}
.fcard-list{margin-top:16px;display:flex;flex-direction:column;gap:10px;list-style:none}
.fcard-list li{display:flex;align-items:flex-start;gap:8px;font-size:.75rem;color:var(--gray400)}
@media(min-width:640px){.fcard-list li{font-size:.875rem}}
.fcard-list li svg{margin-top:2px;height:16px;width:16px;flex-shrink:0;stroke:var(--cream)}
.fcard-more{margin-top:24px;display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:500;color:var(--cream)}
@media(min-width:640px){.fcard-more{font-size:.875rem}}
.fcard-more svg{height:16px;width:16px;stroke:var(--cream);transform:rotate(-45deg)}

/* ============ 4 DIMENSIONES (overlay expand) ============ */
.dims{background:#000;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:56px 3cm;scroll-snap-align:start}
.dims-head{text-align:center;margin:0 auto;max-width:56rem;font-size:1.7rem;line-height:1.08;color:var(--ink)}
@media(min-width:640px){.dims-head{font-size:2.05rem}}
@media(min-width:768px){.dims-head{font-size:2.5rem}}
@media(min-width:1024px){.dims-head{font-size:2.9rem}}
.dims-row{position:relative;display:flex;gap:12px;width:100%;max-width:none;margin:0 auto;height:58vh;min-height:420px}
.dim-card{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:20px;cursor:pointer;transition:flex-grow .6s cubic-bezier(.65,0,.35,1)}
.dim-bg{position:absolute;inset:0;background:linear-gradient(var(--veil,rgba(8,18,14,.5)),var(--veil,rgba(8,18,14,.5))),var(--img) center/cover no-repeat;transition:transform .6s var(--ease)}
.dim-card:hover .dim-bg{transform:scale(1.05)}
.dim-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000 16%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.12) 76%,transparent 100%)}
/* Overlay total: la activa crece a todo el ancho, las otras se encogen a 0 */
.dims-row:hover .dim-card:not(:hover){flex-grow:0}
.dim-card:hover{flex-grow:1}
.dims-row.has-open .dim-card:not(.is-open){flex-grow:0}
.dim-card.is-open{flex-grow:1}
/* Reposo: número GIGANTE + título en la mitad inferior, siempre visibles */
.dim-base{position:absolute;left:0;top:50%;bottom:0;width:18.5rem;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 30px 30px;text-align:left}
.dim-num{display:block;font-weight:800;letter-spacing:-.04em;color:var(--green);line-height:.86;font-size:clamp(4rem,1.4rem + 6.6vw,7.6rem)}
.dim-title{margin-top:14px;font-weight:600;color:#fff;font-size:clamp(1.7rem,1.3rem + 1.3vw,2.4rem);line-height:1.1;letter-spacing:-.01em;max-width:17rem}
/* Expandido: la info extra aparece SOLO cuando la tarjeta ya está extendida (panel derecho) */
.dim-expanded{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;gap:15px;padding:44px 56px 44px 42%;background:linear-gradient(100deg,transparent 26%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.64) 100%);transition:opacity .3s ease}
.dim-card:hover .dim-expanded,.dim-card.is-open .dim-expanded{opacity:1;pointer-events:auto;transition:opacity .35s ease .5s}
.dim-lead{font-size:1.18rem;line-height:1.5;color:var(--ink);max-width:42ch}
.dim-chips{display:flex;flex-wrap:wrap;gap:9px}
.dim-chips span{font-size:.92rem;padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--ink)}
.dim-insight{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.45rem;line-height:1.35;color:#fff;max-width:42ch}
.dim-stat-block{display:flex;flex-direction:column;gap:14px;padding:20px 22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03)}
.dim-stat{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dim-stat-l{font-size:.82rem;color:var(--gray400);max-width:58%;line-height:1.3}
.dim-stat-v{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.3rem;color:#fff;letter-spacing:-.02em}
.dim-stat-v .ar{font-style:normal;color:var(--gray500);font-size:1rem}
.dim-stat-v .hl{color:var(--green)}
.dim-stat-src{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gray500)}
@media(max-width:900px){
  .dims{min-height:0;padding:56px 16px}
  .dims-row{flex-direction:column;height:auto;gap:10px}
  .dim-card{flex:none;height:132px;transition:height .5s var(--ease)}
  .dim-card.is-open{height:auto;min-height:470px}
  .dim-num{font-size:2.7rem}
  .dim-title{font-size:1.25rem}
  .dim-expanded{padding:24px 22px;justify-content:flex-start;gap:14px}
  .dim-lead{max-width:none}
}

/* ============ ANIMACIÓN pull-up (por palabra) ============ */
[data-pull] .w{display:inline-block;white-space:pre;transform:translateY(20px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
[data-pull].in .w{transform:none;opacity:1}
[data-srt] .srtw{opacity:.2;transition:opacity .1s linear}

/* ============ SECCIÓN 4 · Recomendaciones (fondo NEGRO, carrusel horizontal) ============ */
.recs{--r-ink:#E7E6D9;--r-petro:#9CECAD;--r-muted:#9CA3AF;--r-line:rgba(255,255,255,.09);--r-green:#9CECAD;
  background:#000;color:var(--r-ink);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:104px 0 48px;scroll-snap-align:start}
.recs-inner{width:100%}
.recs-head{max-width:1560px;margin:0 auto 34px;padding:0 3cm;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.recs-title{font-weight:400;line-height:1.07;letter-spacing:-.02em;font-size:clamp(1.9rem,1.1rem + 2.3vw,2.9rem);color:var(--r-ink)}
.recs-title .serif-it{color:var(--r-petro)}
.recs-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:9px;background:var(--r-petro);color:#fff;font-weight:500;font-size:.95rem;padding:9px 10px 9px 22px;border-radius:999px;transition:gap .2s var(--ease),background .2s var(--ease)}
.recs-cta:hover{gap:13px;background:#11323D}
.recs-cta .rc-ico{display:flex;height:30px;width:30px;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,.16)}
.recs-cta .rc-ico svg{height:15px;width:15px;stroke:#fff;stroke-width:2}
/* Carrusel horizontal estático + scroll - gutter de 3 cm persistente a ambos lados */
.recs-track-wrap{max-width:1560px;margin:0 auto;padding:0 3cm;position:relative}
.rec-card-all{flex:0 0 298px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;border:1.5px dashed rgba(255,255,255,.16);border-radius:18px;padding:22px;background:rgba(255,255,255,.02);transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.rec-card-all:hover{border-color:rgba(129,239,167,.55);background:rgba(129,239,167,.05);transform:translateY(-3px)}
.rca-ico{height:64px;width:64px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(10,14,12,.5);color:#9CECAD;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.rec-card-all:hover .rca-ico{background:#9CECAD;color:#08120f;transform:scale(1.06)}
.rca-ico svg{height:22px;width:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rca-txt{font-size:1.06rem;font-weight:600;color:#F1F4F2;letter-spacing:-.01em}
.rca-sub{font-size:.82rem;color:var(--r-muted)}
@media(max-width:768px){.rec-card-all{flex-basis:264px}}
.recs-track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:24px 0 50px;scrollbar-width:thin;scrollbar-color:#C6CDD3 transparent}
.recs-track::-webkit-scrollbar{height:8px}
.recs-track::-webkit-scrollbar-track{background:transparent}
.recs-track::-webkit-scrollbar-thumb{background:#CDD4DA;border-radius:999px}
.rec-card{scroll-snap-align:start;flex:0 0 298px;display:flex;flex-direction:column;background:linear-gradient(160deg,#1c1c1c,#121212);border:1px solid var(--r-line);border-radius:18px;padding:22px;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .3s var(--ease)}
.rec-card.in{opacity:1;transform:none}
.rec-card:nth-child(2){transition-delay:.05s}.rec-card:nth-child(3){transition-delay:.1s}.rec-card:nth-child(4){transition-delay:.15s}.rec-card:nth-child(5){transition-delay:.2s}
.rec-card:hover{box-shadow:0 0 0 1.5px rgba(129,239,167,.6),0 24px 54px rgba(0,0,0,.55)}
.rec-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rec-logo{height:22px;max-width:120px;width:auto;object-fit:contain;object-position:left center}
.rec-logo.rl-word{height:24px;max-width:122px}
.rec-logo.rl-mark{height:30px}
.rec-more{flex-shrink:0;display:flex;height:34px;width:34px;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--r-line);color:var(--r-petro);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.rec-more svg{height:15px;width:15px;stroke:currentColor;stroke-width:2}
.rec-card:hover .rec-more{background:#2FB6A8;border-color:transparent;color:#08120f;transform:translate(1px,-1px)}
.rec-name{margin-top:18px;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--r-ink)}
.rec-meta{margin-top:4px;font-size:.8rem;color:var(--r-muted)}
.rec-div{height:1px;background:var(--r-line);margin:15px 0}
.rec-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rec-stat{text-align:left;padding:11px 12px;border-radius:11px;background:rgba(255,255,255,.045)}
.rec-stat.hl{background:rgba(129,239,167,.1)}
.rec-stat b{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:var(--r-petro);line-height:1}
.rec-stat span{display:block;margin-top:9px;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--r-muted);line-height:1.15}
/* Indicador destacado: barra de progreso (verde) */
.rec-prog{margin-top:9px;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.rec-prog i{display:block;height:100%;width:0;border-radius:999px;background:#9CECAD;transition:width 1s cubic-bezier(.65,0,.35,1)}
.rec-card.in .rec-prog i{width:var(--pct)}
/* Indicador secundario: pie chart / donut (petróleo) */
.rec-pie-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rec-donut{width:36px;height:36px;flex-shrink:0;transform:rotate(-90deg)}
.rec-donut-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:4}
.rec-donut-fill{fill:none;stroke:var(--r-petro);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1)}
.rec-card.in .rec-donut-fill{stroke-dashoffset:calc(100 - var(--pctn))}
.rec-quote{margin-top:15px;flex-grow:1}
.rec-quote p{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.06rem;line-height:1.36;color:#CFCEC2}
.rec-author{margin-top:13px;font-size:.8rem;color:var(--r-muted)}
.rec-author b{color:var(--r-ink);font-weight:700}
@media(max-width:960px){
  .recs{min-height:0;padding:84px 0 40px}
  .recs-head{padding:0 20px;margin-bottom:24px}
  .recs-track{padding:6px 20px 20px}
  .rec-card{flex-basis:264px}
  .rec-card:nth-child(n){transition-delay:0s}
}

/* ============ SECCIÓN 5 · Qué obtienes (fondo claro) ============ */
.gains{--g-ink:#0F1E26;--g-petro:#185062;--g-blue:#1C6E86;--g-muted:#475863;--g-line:#E5E9ED;
  background:#F4F6F8;color:var(--g-ink);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:40px 3cm 24px;scroll-snap-align:start}
.gains-inner{max-width:1400px;margin:0 auto;width:100%;display:grid;grid-template-columns:minmax(300px,.86fr) 1.14fr;gap:clamp(40px,4vw,72px);align-items:center}
.gains-head{max-width:30rem}
.gains-title{font-weight:400;line-height:1.06;letter-spacing:-.02em;font-size:clamp(2.1rem,1.2rem + 2.4vw,3.2rem);color:var(--g-ink)}
.gains-title .serif-it{color:var(--g-petro)}
.gains-lead{margin-top:20px;font-size:1.14rem;line-height:1.55;color:var(--g-muted)}
.gains-lead b{color:var(--g-petro);font-weight:700}
.gains-note{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-size:.9rem;color:var(--g-petro);font-weight:600}
.gains-note svg{height:18px;width:18px;stroke:#12B24A;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;border-radius:18px;padding:16px 18px;
  background:#fff;border:1px solid rgba(var(--c,24,80,98),.32);
  box-shadow:0 1px 2px rgba(15,30,38,.04),0 16px 38px rgba(15,30,38,.06);
  opacity:0;transform:translateY(18px) scale(.975);
  transition:opacity .6s var(--ease) var(--gd,0s),transform .7s var(--ease) var(--gd,0s),box-shadow .3s ease,border-color .3s ease;will-change:transform,opacity}
.gcard.in{opacity:1;transform:none}
.gcard:nth-child(1){--c:24,80,98}
.gcard:nth-child(2){--gd:.13s;--c:23,169,75}
.gcard:nth-child(3){--gd:.26s;--c:14,124,132}
.gcard:nth-child(4){--gd:.39s;--c:52,95,168}
.gcard:hover{border-color:rgba(var(--c,24,80,98),.6);box-shadow:0 1px 2px rgba(15,30,38,.05),0 22px 50px rgba(15,30,38,.11)}
.gcard::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(158deg,rgba(var(--c,24,80,98),.07),transparent 58%);pointer-events:none}
.gcard-head{display:flex;align-items:center;gap:9px}
.gcard-ico{height:32px;width:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(var(--c,24,80,98),.1);border:1px solid rgba(var(--c,24,80,98),.2);color:rgb(var(--c,24,80,98))}
.gcard-ico svg{height:16px;width:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gcard-title{font-size:1.04rem;font-weight:700;letter-spacing:-.01em;color:var(--g-petro)}
.gcard-mid{margin-top:6px;min-height:90px}
.gcard-sub{font-size:.9rem;font-weight:600;line-height:1.28;letter-spacing:-.01em;color:var(--g-ink)}
.gcard-body{margin-top:3px;font-size:.83rem;line-height:1.38;color:var(--g-muted)}
.gcard-list{margin-top:6px;padding-top:0;list-style:none;display:flex;flex-direction:column}
.gcard-list li{display:flex;align-items:flex-start;gap:8px;padding:3px 0;font-size:.8rem;line-height:1.28;color:#34464F;border-top:1px solid var(--g-line)}
.gcard-list li:first-child{border-top:0}
.gcard-list li svg{flex-shrink:0;height:13px;width:13px;margin-top:2px;stroke:#0C7A33;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1080px){
  .gains-inner{grid-template-columns:1fr;gap:34px}
  .gains-head{max-width:44rem}
}
@media(max-width:960px){
  .gains{min-height:0;padding:72px 20px 56px}
}
@media(max-width:640px){
  .ggrid{grid-template-columns:1fr}
  .gains-title{font-size:1.85rem}
}
@media(prefers-reduced-motion:reduce){.gcard{opacity:1;transform:none;transition:none}}

/* ============ FOOTER (fondo claro, pantalla de cierre) ============ */
.site-footer{--f-ink:#0F1E26;--f-petro:#185062;--f-muted:#5A6B73;--f-line:#E5E9ED;
  background:#F4F6F8;color:var(--f-ink);padding:52px 3cm 22px;scroll-snap-align:end;scroll-snap-stop:always}
.footer-main{max-width:1560px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px;padding-bottom:34px;border-bottom:1px solid var(--f-line)}
.f-logo{font-size:.75rem;font-weight:800;letter-spacing:-.03em}
.f-logo .be{color:#185062}.f-logo .flex{color:#12B24A}
.footer-brand p{margin-top:14px;max-width:24rem;font-size:.92rem;line-height:1.55;color:var(--f-muted)}
.footer-powered{margin-top:20px;display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--f-muted)}
.footer-powered .zity{font-weight:800;letter-spacing:-.02em;color:#185062;transition:color .2s var(--ease)}
.footer-powered .zity:hover{color:#11323D;text-decoration:underline}
.footer-col h4{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--f-petro);margin-bottom:14px}
.footer-col a{display:block;font-size:.95rem;color:var(--f-ink);opacity:.78;padding:6px 0;transition:opacity .2s ease,color .2s ease}
.footer-col a:hover{opacity:1;color:var(--f-petro)}
.footer-bottom{max-width:1560px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0 0;flex-wrap:wrap}
.fb-copy{font-size:.82rem;color:var(--f-muted)}
.footer-legal{display:flex;gap:22px}
.footer-legal a{font-size:.82rem;color:var(--f-muted);transition:color .2s ease}
.footer-legal a:hover{color:var(--f-petro)}
@media(max-width:960px){
  .site-footer{padding:48px 20px 20px}
  .footer-main{grid-template-columns:1fr;gap:30px;padding-bottom:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .logo-marquee{animation:none!important}
  [data-pull] .w,[data-srt] .srtw{transform:none!important;opacity:1!important;transition:none!important}
  .pcard,.pc-bar-fill,.pc-donut-fill{transition:none!important}
  .rec-card{opacity:1!important;transform:none!important;transition:none!important}
  .gcard{transition:none!important}
  .rec-prog i,.rec-donut-fill{transition:none!important}
  html{scroll-behavior:auto}
}