/* ============================================================
   VERSIÓN FINAL — base Propuesta B ("Denso y veloz" · biograph fiel)
   + injertos de A: nav pill glass stone · licencias counter+órbita ·
   marcas marquee chips blancas · títulos display PP Eiko (proceso, casos)
   + ajustes v2: hero slideshow Ken Burns · casos dos columnas slider ·
   sin pre-títulos · survey heading nuevo
   ============================================================ */

:root{
  /* Flow */
  --crema:#F9F8F5;
  --verde:#00E861;
  --verde-ink:#0F2C24;

  /* tintas (rol biograph #27272c / #686873) */
  --ink:#27272c;
  --ink-2:#68706c;

  /* oscuros (rol #111214 / #09090a, sesgados a verde profundo) */
  --dark:#111514;
  --dark-cta:#090B0A;
  --grad-hero:linear-gradient(315deg,#16382B 0%,#040605 100%);

  /* alphas del sistema */
  --w70:rgba(255,255,255,.7);
  --w20:rgba(255,255,255,.2);
  --w15:rgba(255,255,255,.15);
  --line-light:rgba(0,0,0,.1);

  /* radios */
  --r-btn:8px; --r-card:16px; --r-pill:600px;

  /* curvas firma */
  --ease-in:cubic-bezier(.12,.23,.5,1);
  --ease-out:cubic-bezier(.5,0,.88,.77);
  --spring:cubic-bezier(.22,1,.36,1);
  --t-hover:.3s; --t-move:.6s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

body{
  font:400 16px/1.5 "Satoshi",system-ui,sans-serif;
  color:var(--ink);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
::selection{background:var(--verde);color:var(--verde-ink)}

.container{max-width:1512px;margin:0 auto;padding:0 60px}

/* ---------- tipografía ---------- */
.h1{
  font:400 68px/.95 "Satoshi",sans-serif;
  letter-spacing:-1.36px;
}
.h2{
  font:400 52px/1 "Satoshi",sans-serif;
  letter-spacing:-.52px;
}
.lead{font:400 18px/1.5 "Satoshi",sans-serif}
.eiko{font:500 1em/1.1 "PP Eiko",serif}
/* rol display de A (para injertos: título de marcas) */
.h-md{font:500 clamp(24px,2.31vw,40px)/1.1 "PP Eiko",serif;color:var(--ink)}

/* header de sección centrado (patrón biograph, sin eyebrow) */
.sect{padding:150px 0}
.sect-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;margin-bottom:50px}
.sect-head .h2{max-width:900px}
.sect-head .lead{max-width:640px;color:var(--ink-2)}

/* ---------- botones (alpha .9 → 1, ~250ms, sin transform) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:41px;padding:7px 16px;border-radius:var(--r-btn);
  font:500 14px/21px "Satoshi",sans-serif;white-space:nowrap;
  transition:background-color var(--t-hover) var(--ease-out);
}
.btn:hover{transition-timing-function:var(--ease-in)}
.btn--verde{background:rgba(0,232,97,.9);color:var(--verde-ink)}
.btn--verde:hover{background:rgba(0,232,97,1)}
.btn--light{background:rgba(255,255,255,.9);color:var(--ink)}
.btn--light:hover{background:rgba(255,255,255,1)}
.btn--dark{background:rgba(39,39,44,.9);color:#fff}
.btn--dark:hover{background:rgba(39,39,44,1)}

/* ============================================================
   NAV (de A) — pill blanca deslizante + backplate glass stone
   ============================================================ */
.nav{
  position:fixed;left:50%;top:16px;transform:translateX(-50%);
  display:flex;align-items:center;height:44px;z-index:50;
}
.nav-glass{
  position:absolute;inset:-6px;pointer-events:none;
  background:rgba(227,221,207,.4);
  -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-card);
}
.nav-slider{
  position:absolute;top:0;left:0;width:0;height:44px;
  background:#fff;border-radius:12px;pointer-events:none;opacity:0;
}
.nav-logo{
  position:relative;z-index:1;display:flex;align-items:center;
  height:44px;padding:0 16px;background:#fff;border-radius:12px;margin-right:4px;
}
.nav-logo img{height:20px;width:92px;flex:none;object-fit:contain}
.nav-item{
  position:relative;z-index:1;display:flex;align-items:center;
  height:44px;padding:0 14px;font:500 14px/1 "Satoshi",sans-serif;
  white-space:nowrap;border-radius:12px;color:#fff;
  transition:color .3s var(--ease-in);cursor:pointer;
}
.nav--ink .nav-item{color:var(--ink)}
.nav-item.is-hot{color:var(--ink)}
.nav-cta{position:relative;z-index:1;margin-left:4px;height:44px;border-radius:12px}
/* hover CSS de respaldo cuando no hay pill GSAP (reduced motion) */
.reduced .nav-item:hover{background:#fff;color:var(--ink)}

/* arrows glass (blur real permitido: viven sobre foto) */
.arrow{
  width:41px;height:41px;border-radius:var(--r-pill);flex:0 0 41px;
  background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;color:#fff;font-size:16px;
  transition:background-color var(--t-hover) var(--ease-out);
}
.arrow:hover{background:rgba(255,255,255,.32);transition-timing-function:var(--ease-in)}

/* ---------- glass nivel 2: fill + hairline interior (sin blur) ---------- */
.chip-stat{
  position:absolute;display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:16px;color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow:inset 1px 1px 1px 0 rgba(255,255,255,.09);
}
.chip-stat b{font:500 20px/1 "Satoshi";display:block}
.chip-stat small{font-size:13px;color:var(--w70);display:block;margin-top:4px}
.chip-stat .div{width:1px;height:34px;background:var(--w15)}

.chip-title{
  position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);
  padding:10px 16px;border-radius:12px;color:#fff;
  font:500 15px/1.35 "Satoshi";
  background:rgba(255,255,255,.12);
  box-shadow:inset 1px 1px 1px 0 rgba(255,255,255,.09);
}

/* ============================================================
   1 · HERO — oscuro, gradiente 315°, slideshow Ken Burns (12 fotos)
   ============================================================ */
.hero{background:var(--grad-hero);color:#fff;overflow:hidden}
.hero .container{
  min-height:900px;padding-top:144px;padding-bottom:90px;
  display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center;
}
.hero-copy .h1{margin-bottom:24px}
.hero-copy .lead{color:var(--w70);max-width:400px}
.hero-promesas{display:flex;align-items:center;gap:28px;margin:34px 0 40px}
.hero-promesas .div{width:1px;height:45px;background:var(--w15);flex:0 0 1px}
.hero-promesas .eiko{font-size:31px;letter-spacing:-.2px}

.hero-media{position:relative}
.hero-card{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:858/703;background:rgba(255,255,255,.02);
}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;transition:opacity .35s ease}
.hero-slide.is-prev{opacity:1;z-index:1;transition:none}
.hero-slide.is-active{opacity:1;z-index:2}
.hero-slide img{width:100%;height:100%;object-fit:cover;will-change:transform}
/* Ken Burns sutil alternado (~7s por foto + crossfade 1.2s, escala máx 1.08) */
.hero-slide.is-active .kb-zoom,.hero-slide.is-prev .kb-zoom{animation:kbZoom 1.9s linear both}
.hero-slide.is-active .kb-left,.hero-slide.is-prev .kb-left{animation:kbLeft 1.9s linear both}
.hero-slide.is-active .kb-right,.hero-slide.is-prev .kb-right{animation:kbRight 1.9s linear both}
@keyframes kbZoom{from{transform:scale(1.26)}to{transform:scale(1)}}
@keyframes kbLeft{from{transform:scale(1.2) translateX(5.4%)}to{transform:scale(1.2) translateX(-5.4%)}}
@keyframes kbRight{from{transform:scale(1.2) translateX(-5.4%)}to{transform:scale(1.2) translateX(5.4%)}}
.hero-card::before{ /* scrim top medido (§5.3): legibilidad del chip */
  content:"";position:absolute;inset:0 0 auto 0;height:180px;z-index:3;
  background:linear-gradient(#000,transparent);opacity:.6;pointer-events:none;
}
.hero-card .chip-stat{z-index:4}

/* ============================================================
   2 · OFERTA — crema, macro-cards foto + chip glass + zoom 1.04
   ============================================================ */
.oferta{background:var(--crema)}
.oferta-block + .oferta-block{margin-top:130px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards--4{grid-template-columns:repeat(4,1fr)}

.photocard{
  position:relative;border-radius:var(--r-card);overflow:hidden;display:block;
  aspect-ratio:4/5;background:#e8e6e0;
}
.cards--4 .photocard{aspect-ratio:3/4}
.photocard img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-move) var(--spring);
}
.photocard:hover img{transform:scale(1.04)}
.photocard::after{ /* scrim inferior p/ legibilidad del chip (patrón §5.3 adaptado) */
  content:"";position:absolute;inset:55% 0 0 0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
}
.photocard .chip-title{z-index:2}
.photocard .card-arrow{
  position:absolute;top:14px;right:16px;z-index:2;color:#fff;font-size:20px;
  opacity:0;transition:opacity var(--t-hover) var(--ease-out);
}
.photocard:hover .card-arrow{opacity:1;transition-timing-function:var(--ease-in)}

.oferta-cta{display:flex;justify-content:center;margin-top:70px}

/* ============================================================
   3 · CÓMO TRABAJAMOS — blanco, tabs 0.3s + foto doble
   ============================================================ */
.como{background:#fff}
.como-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:70px;align-items:start}

.tabs{display:flex;flex-direction:column;border-top:1px dashed var(--line-light)}
.tab{
  display:flex;align-items:center;gap:18px;text-align:left;width:100%;
  padding:20px 14px;border-bottom:1px dashed var(--line-light);border-radius:0;
  transition:background-color var(--t-hover) var(--ease-out),opacity var(--t-hover) var(--ease-out);
  opacity:.45;
}
.tab:hover{transition-timing-function:var(--ease-in);opacity:.8}
.tab.is-active{opacity:1;background:rgba(39,39,44,.04);border-radius:8px}
.tab-num{font:500 13px/1 "Satoshi";color:var(--ink-2);width:34px}
.tab-name{font:400 24px/1.2 "Satoshi";letter-spacing:-.24px}

.panels{margin-top:34px;min-height:250px}
.panel{display:none}
.panel.is-active{display:block}
.panel .st{opacity:0;transition:opacity .45s linear;transition-delay:calc(var(--i)*.1s)}
.panel.in .st{opacity:1}
.panel p{color:var(--ink-2);max-width:460px;margin-bottom:26px}
.specs{list-style:none;margin-bottom:30px;max-width:460px}
.specs li{
  display:flex;justify-content:space-between;gap:24px;
  padding:12px 0;border-bottom:1px dashed var(--line-light);font-size:14px;
}
.specs li span:first-child{color:var(--ink-2)}
.specs li span:last-child{text-align:right}

.como-media{position:relative}
.como-card{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:858/703;background:#e8e6e0;
}
.como-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--spring)}
.como-img.is-active{opacity:1}
.como-banda{ /* banda "Nº1 | nombre" del card activo (patrón pillars, 503px máx) */
  position:absolute;inset:12px auto auto 12px;z-index:2;height:64px;
  max-width:min(503px,calc(100% - 24px));
  display:flex;align-items:center;gap:16px;padding:0 22px 0 18px;
  border-radius:8px;color:#fff;background:rgba(0,0,0,.4);
  box-shadow:inset 1px 1px 1px 0 rgba(255,255,255,.09);
}
.como-banda .num{font:500 15px/1 "Satoshi";padding-right:16px;
  border-right:1px solid rgba(255,255,255,.25)}
.como-banda .name{font-size:16px}
.como-chip{
  position:absolute;left:-26px;bottom:-30px;z-index:3;
  width:180px;height:180px;border-radius:var(--r-pill);overflow:hidden;
}
.como-chip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--spring)}
.como-chip img.is-active{opacity:1}

/* ============================================================
   4 · LICENCIAS (de A) — counter + órbita elíptica, texto fijo
   ============================================================ */
.info{background:var(--crema);padding:150px 24px}
.info-stage{position:relative;max-width:1760px;margin:0 auto}
.info--live .info-stage{height:100svh}
.info-center{position:relative;z-index:2;text-align:center;max-width:860px;margin:0 auto;pointer-events:none}
.info--live .info-center{position:absolute;inset:0;max-width:none;display:grid;place-items:center}
.info-inner{max-width:760px;margin:0 auto}
.counter{font:500 clamp(64px,8.5vw,130px)/0.95 "PP Eiko",serif;letter-spacing:-1px;color:var(--ink)}
.counter-label{font:500 20px/1.15 "Satoshi";margin-top:12px}
.info-copy{margin:26px auto 0;max-width:620px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.info-stats{
  margin-top:24px;font:500 11px/1.6 "Satoshi";
  letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-2);
}
.cred-field{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;
  justify-content:center;gap:16px;margin-top:72px;
}
.cred-chip{
  width:160px;border-radius:var(--r-card);overflow:hidden;
  background:#fff;border:1px solid rgba(18,12,8,.07);
}
.cred-chip img{width:100%;height:auto}
/* — órbita (activada por JS en desktop) — */
.info--live .cred-field{position:absolute;inset:0;margin:0;display:block}
.info--live .cred-chip{position:absolute;top:50%;left:50%;will-change:transform}
.info--live .cred-chip img{will-change:transform}
.info--live .cred-chip:nth-of-type(1){width:200px}
.info--live .cred-chip:nth-of-type(2){width:164px}
.info--live .cred-chip:nth-of-type(3){width:220px}
.info--live .cred-chip:nth-of-type(4){width:176px}
.info--live .cred-chip:nth-of-type(5){width:208px}
.info--live .cred-chip:nth-of-type(6){width:168px}
.info--live .cred-chip:nth-of-type(7){width:216px}
.info--live .cred-chip:nth-of-type(8){width:192px}
.info--live .cred-chip:nth-of-type(9){width:200px}

/* ============================================================
   5 · MARCAS (de A) — marquee 48 en chips blancas, 82/104/92s
   ============================================================ */
.brands{background:var(--crema);padding:140px 0 100px;overflow:hidden}
.brands > .h-md{text-align:center;margin:0 auto 64px;max-width:720px;padding:0 24px}
.marquee{overflow:hidden;margin-bottom:12px}
.marquee-track{display:flex;width:max-content;animation:mq 90s linear infinite}
.marquee[data-dir="rtl"] .marquee-track{animation-direction:reverse}
.marquee:nth-of-type(1) .marquee-track{animation-duration:82s}
.marquee:nth-of-type(2) .marquee-track{animation-duration:104s}
.marquee:nth-of-type(3) .marquee-track{animation-duration:92s}
@keyframes mq{to{transform:translateX(-50%)}}
.brand-chip{
  display:flex;align-items:center;justify-content:center;
  height:80px;padding:0 36px;margin-right:12px;
  background:#fff;border-radius:12px;flex:none;
}
.brand-chip img{
  height:34px;width:auto;max-width:130px;object-fit:contain;
  filter:grayscale(1);opacity:.8;
  transition:filter .15s var(--ease-in),opacity .15s var(--ease-in);
}
.brand-chip:hover img{filter:grayscale(0);opacity:1}

/* ============================================================
   6 · CASOS — rediseño: título display A + dos columnas slider
   ============================================================ */
/* ============================================================
   CASOS DE ÉXITO — CONCEPTO 2 · FOTO A FULL CON PANEL GLASS
   Lenguaje: propuesta B (biograph fiel)
   - curvas: in [.12,.23,.5,1] / out [.5,0,.88,.77] 0.3s · spring [.22,1,.36,1] 0.6s
   - glass: fill oscuro + hairline interior; blur SOLO donde vive sobre foto
   - la foto es el fondo completo de la card; la info flota en panel inferior
   ============================================================ */
:root{
  --crema:#F9F8F5;
  --verde:#00E861;
  --verde-ink:#0F2C24;
  --ink:#27272c;
  --ink-2:#68706c;
  --w70:rgba(255,255,255,.7);
  --w15:rgba(255,255,255,.15);
  --r-card:16px; --r-pill:600px;
  --ease-in:cubic-bezier(.12,.23,.5,1);
  --ease-out:cubic-bezier(.5,0,.88,.77);
  --spring:cubic-bezier(.22,1,.36,1);
  --t-hover:.3s; --t-move:.6s;
}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
::selection{background:var(--verde);color:var(--verde-ink)}
/* ---------- sección: llena el viewport, dimensiones en vh ---------- */
.casos2{
  min-height:100svh;
  display:flex;flex-direction:column;
  /* el top libra la píldora fija del nav */
  padding:clamp(68px,9vh,92px) 0 clamp(16px,2.8vh,36px);
}
.casos2 .container{
  width:100%;max-width:1760px;margin:0 auto;
  padding:0 clamp(20px,2.6vw,48px);
  display:flex;flex-direction:column;flex:1;min-height:0;
}
.casos2-title{
  font:500 clamp(28px,4.6vh,50px)/1.05 "PP Eiko",serif;
  letter-spacing:-.5px;text-align:center;
  margin-bottom:clamp(12px,2.2vh,26px);
}
.casos2-grid{
  flex:1;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,1.6vw,28px);align-items:stretch;
}
.casos2-col{min-width:0;display:flex;flex-direction:column}
.casos2-colhead{
  font:500 clamp(16px,2.5vh,24px)/1.1 "PP Eiko",serif;
  color:var(--ink);margin-bottom:clamp(6px,1.2vh,12px);
}
/* ---------- card = foto a full ---------- */
.cslider{
  position:relative;flex:1;min-height:0;
  border-radius:var(--r-card);overflow:hidden;background:#101312;
}
.cslider-track{
  display:flex;height:100%;
  transition:transform var(--t-move) var(--spring);
}
.cslide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.cslide-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-move) var(--spring);
}
.cslider:hover .cslide-bg{transform:scale(1.03)}
/* grade medido: top p/ contador y flechas · bottom p/ asiento del panel */
.cslide::before{
  content:"";position:absolute;inset:0 0 auto 0;height:120px;z-index:1;
  background:linear-gradient(#000,transparent);opacity:.5;pointer-events:none;
}
.cslide::after{
  content:"";position:absolute;inset:38% 0 0 0;z-index:1;
  background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.28) 55%,transparent 100%);
  pointer-events:none;
}
/* ---------- panel glass inferior (fill oscuro + hairline; blur: vive sobre foto) ---------- */
.cslide-panel{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  padding:clamp(14px,2.2vh,24px) clamp(16px,1.8vh,24px);
  border-radius:12px;color:#fff;
  background:rgba(10,12,11,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 1px 1px 1px 0 rgba(255,255,255,.09);
  display:flex;flex-direction:column;gap:clamp(7px,1.2vh,12px);
}
.cslide-title{
  font:700 clamp(15px,2.1vh,19px)/1.3 "Satoshi";letter-spacing:-.1px;color:#fff;
}





/* ---------- contador y flechas flotan arriba (patrón biograph) ---------- */
.cslide-count{
  position:absolute;top:12px;left:14px;z-index:3;
  font:500 12px/1 "Satoshi";color:#fff;
  background:rgba(17,18,20,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:7px 11px;border-radius:99px;
  box-shadow:inset 0 .5px 0 .5px rgba(255,255,255,.2);
}
.cslide-count b{font-weight:500}
/* flechas: glass oscuro (como el contador) — las fotos claras
   dejaban tenue el glass blanco de biograph; contraste medido */
.arrow{
  width:41px;height:41px;border-radius:var(--r-pill);
  background:rgba(17,18,20,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 .5px 0 .5px rgba(255,255,255,.2);
  display:grid;place-items:center;color:#fff;font-size:16px;
  transition:background-color var(--t-hover) var(--ease-out);
}
.arrow:hover{background:rgba(17,18,20,.72);transition-timing-function:var(--ease-in)}
.cslider .arrow{position:absolute;top:12px;z-index:3}
.cslider .arrow[data-dir=next]{right:14px}
.cslider .arrow[data-dir=prev]{right:60px}
/* ---------- responsive ---------- */
@media (max-width:1023px){
  .casos2{min-height:0;padding:56px 0 64px}
  .casos2-title{font-size:34px;margin-bottom:32px}
  .casos2-grid{display:flex;flex-direction:column;gap:44px}
  .casos2-colhead{font-size:24px;margin-bottom:12px}
  .cslider{flex:none;height:min(78svh,660px)}
  .cslide-panel{gap:10px;padding:16px 16px 15px}
  .cslide-title{font-size:16.5px}
  
  
  
}
@media (max-width:480px){.casos2{padding:44px 0 52px}
.casos2 .container{padding:0 16px}
.casos2-title{font-size:30px}
.cslider{height:min(82svh,680px)}
.cslide-panel{left:8px;right:8px;bottom:8px}}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cslider-track{transition:none}
  .cslide-bg{transition:none}
  .cslider:hover .cslide-bg{transform:none}
  *{transition-duration:.01ms !important}
}
/* ---------- interior dossier sobre glass (híbrido concepto 2 + 3) ---------- */
.crows{display:flex;flex-direction:column;margin:0}
.crow{display:grid;grid-template-columns:clamp(96px,8.6vw,132px) minmax(0,1fr);gap:clamp(10px,1.4vw,18px);padding:clamp(6px,1.05vh,10px) 0;align-items:baseline}
.crow:first-child{padding-top:2px}
.crow + .crow{border-top:1px dashed rgba(255,255,255,.18)}
.crow dt{font:700 9.5px/1.6 "Satoshi";letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.56)}
.crow dd{margin:0;font-size:clamp(12px,1.62vh,14px);line-height:1.45;color:rgba(255,255,255,.84)}
.crow--dato dd{color:#fff;font-weight:500}
.crow--ficha dd{display:flex;align-items:flex-start;gap:clamp(14px,1.8vw,26px);flex-wrap:wrap}
.spec{display:flex;flex-direction:column;gap:3px}
.spec small{font:700 8.5px/1 "Satoshi";letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.spec b{font:500 clamp(11.5px,1.5vh,13px)/1.3 "Satoshi";color:#fff}
@media (max-width:640px){
  .crow{grid-template-columns:1fr;gap:3px;padding:7px 0}
}


/* ============================================================
   7 · PROCESO — blanco, 3 pasos + rueda orbital (~2.4°/s)
   ============================================================ */
.proceso{background:#fff;overflow:hidden}
.proceso-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.proceso-title{ /* formato tipográfico de A (h-lg display) */
  font:500 clamp(34px,4.05vw,70px)/1.05 "PP Eiko",serif;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:44px;
}
.pasos{border-top:1px dashed var(--line-light)}
.paso{display:flex;gap:28px;padding:34px 4px;border-bottom:1px dashed var(--line-light)}
.paso-num{font:500 40px/1 "PP Eiko",serif;color:var(--ink-2);flex:0 0 44px}
.paso h3{font:400 24px/1.2 "Satoshi";letter-spacing:-.24px;margin-bottom:8px}
.paso p{color:var(--ink-2);font-size:16px;max-width:400px}

.orbit-zone{display:flex;justify-content:center}
.orbit-wrap{position:relative;width:560px;height:560px;flex:0 0 auto;will-change:transform}
.orbit-ring{position:absolute;inset:0;border:1px solid rgba(0,0,0,.08);border-radius:50%}
.orbit{position:absolute;inset:0;animation:spin 150s linear infinite}
.orbit-item{
  position:absolute;top:50%;left:50%;width:62px;height:62px;margin:-31px 0 0 -31px;
  transform:rotate(var(--a)) translateY(-280px) rotate(calc(var(--a)*-1));
}
.orbit-item-inner{
  display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  animation:spin 150s linear infinite reverse; /* mantiene la foto derecha */
}
.orbit-item-inner img{width:100%;height:100%;object-fit:cover}
.orbit-center{
  position:absolute;top:50%;left:50%;width:180px;height:180px;
  margin:-90px 0 0 -90px;border-radius:50%;overflow:hidden;
}
.orbit-center img{width:100%;height:100%;object-fit:cover}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   8 · COTIZACIÓN — oscuro, video full-bleed + form maqueta
   ============================================================ */
.cotiza{position:relative;background:var(--dark-cta);color:#fff;overflow:hidden}
.cotiza-bg{position:absolute;inset:0}
.cotiza-bg video{width:100%;height:100%;object-fit:cover;opacity:.5}
.cotiza-bg::before{ /* scrim top (medido: #000→transparent 180px, .6) */
  content:"";position:absolute;inset:0 0 auto 0;height:180px;
  background:linear-gradient(#000,transparent);opacity:.6;
}
.cotiza-bg::after{ /* scrim left (medido: 90°, #000→transparent) */
  content:"";position:absolute;inset:0 30% 0 0;
  background:linear-gradient(90deg,rgba(0,0,0,.88),transparent);
}
.cotiza .container{position:relative;z-index:2;padding-top:150px;padding-bottom:150px;
  display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start}
.cotiza-copy .h2{color:#fff;max-width:560px;margin-bottom:22px}
.cotiza-copy .lead{color:var(--w70);max-width:420px}

.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1 / -1}
.field label{font-size:13px;color:var(--w70)}
.field input,.field textarea{
  font:400 15px/1.4 "Satoshi",sans-serif;color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;
  box-shadow:inset 0 .5px 0 .5px rgba(255,255,255,.12);
  padding:12px 14px;height:46px;
  transition:border-color var(--t-hover) var(--ease-out),background-color var(--t-hover) var(--ease-out);
}
.field textarea{height:112px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.28);transition-timing-function:var(--ease-in)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:rgba(0,232,97,.7);background:rgba(255,255,255,.09);
}
.form-foot{grid-column:1 / -1;display:flex;align-items:center;gap:18px;margin-top:8px}
.form-note{font-size:12px;color:rgba(255,255,255,.45)}

/* ============================================================
   9 · FOOTER — crema
   ============================================================ */
.footer{background:var(--crema);padding:110px 0 44px}
.footer-close{max-width:760px}
.footer-close .eiko{font-size:40px;line-height:1.15;color:var(--ink)}
.footer-row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:80px;padding-top:28px;border-top:1px solid rgba(0,0,0,.08);
  flex-wrap:wrap;
}
.footer-logo svg{height:17px;width:auto;display:block;color:var(--ink)}
.footer-links{display:flex;gap:4px;flex-wrap:wrap}
.footer-links a{
  font-size:14px;padding:8px 14px;border-radius:8px;
  transition:background-color .25s var(--ease-out);
}
.footer-links a:hover{background:rgba(0,0,0,.04);transition-timing-function:var(--ease-in)}
.footer-tiny{font-size:12px;color:var(--ink-2)}

/* touch: sin estados hover colgados */
@media (hover:none){
  .photocard .card-arrow{display:none}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .orbit,.orbit-item-inner{animation:none}
  .hero-slide img{animation:none !important}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:12px}
  .cslider-track{transition:none}
  .photocard:hover img{transform:none}
  *{transition-duration:.01ms !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1199px){
  .nav-item{display:none}
}
@media (max-width:1180px){
  .h1{font-size:54px;letter-spacing:-1.08px}
  .h2{font-size:42px;letter-spacing:-.42px}
  .hero .container{grid-template-columns:1fr;gap:56px;min-height:0;padding-top:130px}
  .como-grid,.proceso-grid,.cotiza .container{grid-template-columns:1fr;gap:56px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards--4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .container{padding:0 20px}
  .sect{padding:90px 0}
  .sect-head{margin-bottom:40px;text-align:left;align-items:flex-start}
  .h1{font-size:40px;letter-spacing:-.8px}
  .h2{font-size:33px;letter-spacing:-.33px}
  .lead{font-size:16px}

  .nav-logo{padding:0 13px}
  .nav-logo img{width:76px}
  .nav-cta{height:38px;font-size:13px;padding:0 13px}

  .hero .container{padding-top:112px;padding-bottom:70px;gap:48px}
  .hero-promesas{flex-direction:column;align-items:flex-start;gap:18px;margin:28px 0 32px}
  .hero-promesas .div{width:45px;height:1px}
  .hero-promesas .eiko{font-size:25px}
  .hero-card{aspect-ratio:4/5}

  /* oferta: rails nativos en móvil (denso, snap) */
  .cards,.cards--4{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin:0 -20px;padding:0 20px 4px;
  }
  .cards::-webkit-scrollbar{display:none}
  .cards .photocard{flex:0 0 76vw;scroll-snap-align:start}
  .oferta-block + .oferta-block{margin-top:80px}
  .oferta-cta{margin-top:48px}

  .como-grid{gap:44px}
  .tab{padding:16px 10px}
  .tab-name{font-size:19px}
  .como-chip{width:116px;height:116px;left:-8px;bottom:-20px}
  .como-banda{height:54px;gap:12px;padding:0 14px}
  .panels{min-height:0}

  .info{padding:90px 16px}
  .cred-field{margin-top:52px;gap:10px}
  .cred-chip{width:136px}
  .info-stats{letter-spacing:1px}

  .brands{padding:80px 0 60px}
  .brand-chip{height:64px;padding:0 24px}
  .brand-chip img{height:26px;max-width:100px}

  /* casos: las dos columnas se apilan (dos sliders full-width) */
  .casos2-title{margin-bottom:44px}
  .casos2-grid{grid-template-columns:1fr;gap:56px}
  .casos2-colhead{font-size:25px}
  .cslide-body{padding:20px 18px 22px;gap:12px}
  .cslide-title{font-size:18px}
  .cslide-ctx{font-size:14px}

  .proceso-grid{gap:40px}
  .paso{padding:24px 0;gap:18px}
  .paso-num{font-size:30px;flex:0 0 34px}
  .orbit-zone{margin-top:10px}
  .orbit-wrap{width:300px;height:300px}
  .orbit-item{width:40px;height:40px;margin:-20px 0 0 -20px;
    transform:rotate(var(--a)) translateY(-150px) rotate(calc(var(--a)*-1))}
  .orbit-center{width:104px;height:104px;margin:-52px 0 0 -52px}

  .cotiza .container{padding-top:100px;padding-bottom:100px;gap:48px}
  .form{grid-template-columns:1fr}
  .field{grid-column:1 / -1}

  .footer{padding:80px 0 32px}
  .footer-close .eiko{font-size:27px}
  .footer-row{margin-top:56px;flex-direction:column;align-items:flex-start;gap:20px}
}


/* ================= soluciones (concepto 3: índice con stage) ================= */
/* ============================================================
   CONCEPTO 3 — ÍNDICE EDITORIAL CON STAGE
   Lenguaje visual: propuesta B (biograph fiel)
   - pareja de curvas enter [.12,.23,.5,1] / exit [.5,0,.88,.77], 0.3s
   - spring bounce:0 ≈ cubic-bezier(.22,1,.36,1), 0.6s
   - glass nivel 2: fill 12% + hairline interior (sin blur)
   - hairlines dashed, radios 8/16, cero reveals de scroll
   ============================================================ */
:root{
  --crema:#F9F8F5;
  --verde:#00E861;
  --verde-ink:#0F2C24;
  --ink:#27272c;
  --ink-2:#68706c;
  --w70:rgba(255,255,255,.7);
  --line-light:rgba(0,0,0,.1);
  --r-btn:8px; --r-card:16px;
  --ease-in:cubic-bezier(.12,.23,.5,1);
  --ease-out:cubic-bezier(.5,0,.88,.77);
  --spring:cubic-bezier(.22,1,.36,1);
  --t-hover:.3s; --t-move:.6s;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
::selection{background:var(--verde);color:var(--verde-ink)}
/* ---------- sección ---------- */
.soluciones{padding:64px 0 110px}
.bloque + .bloque{margin-top:130px}
.bloque-titulo{margin-bottom:44px;max-width:1240px}
.bloque-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:stretch}
.bloque--espejo .bloque-grid{grid-template-columns:1.05fr 1fr}
.bloque--espejo .indice{order:2}
.bloque--espejo .stage{order:1}
/* ---------- índice: renglones tipográficos ---------- */
.indice{display:flex;flex-direction:column;justify-content:center}
.indice > .fila:first-child{border-top:1px dashed var(--line-light)}
.fila{
  position:relative;display:flex;align-items:baseline;gap:16px;width:100%;
  padding:21px 38px 21px 0;border-bottom:1px dashed var(--line-light);
  opacity:.5;
  transition:opacity var(--t-hover) var(--ease-out);
}
.fila:hover{opacity:.85;transition-timing-function:var(--ease-in)}
.fila.is-active{opacity:1;transition-timing-function:var(--ease-in)}
.fila-num,.fila-titulo{transition:transform var(--t-hover) var(--ease-out)}
.fila.is-active .fila-num,.fila.is-active .fila-titulo{
  transform:translateX(12px);transition-timing-function:var(--ease-in);
}
.fila::before{ /* marca verde de renglón activo (acento racionado) */
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:2px;height:0;background:var(--verde);
  transition:height var(--t-hover) var(--ease-out);
}
.fila.is-active::before{height:22px;transition-timing-function:var(--ease-in)}
.fila-num{flex:0 0 30px;font:500 12px/1 "Satoshi";letter-spacing:1px;color:var(--ink-2)}
.fila-titulo{flex:1;font:400 clamp(19px,1.65vw,25px)/1.22 "Satoshi";letter-spacing:-.24px}
.fila-glifo{
  position:absolute;right:8px;top:50%;translate:0 -50%;
  font-size:18px;line-height:1;color:var(--ink);
  opacity:0;transform:translateX(-8px);
  transition:opacity var(--t-hover) var(--ease-out),transform var(--t-hover) var(--ease-out);
}
.fila-glifo::before{content:"→"}
.fila.is-active .fila-glifo{opacity:1;transform:none;transition-timing-function:var(--ease-in)}
/* ---------- stage ---------- */
.stage{
  position:relative;border-radius:var(--r-card);overflow:hidden;background:#e8e6e0;
  min-height:clamp(360px,34vw,540px);
}
.stage-fig{
  position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease-out);
}
.stage-fig.is-active{opacity:1;transition:opacity .45s var(--spring)}
.stage-media{position:absolute;inset:0;transform:scale(1.05);transition:transform var(--t-move) var(--spring)}
.stage-fig.is-active .stage-media{transform:scale(1)}
.stage-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.stage-scrim{
  position:absolute;inset:40% 0 0 0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.66),transparent);
}
.stage-chip{ /* patrón como-banda de B: fill oscuro translúcido + hairline interior */
  position:absolute;left:16px;right:16px;bottom:16px;
  padding:16px 20px;border-radius:12px;color:#fff;
  background:rgba(0,0,0,.35);
  box-shadow:inset 1px 1px 1px 0 rgba(255,255,255,.09);
  opacity:0;transform:translateY(10px);
  transition:opacity var(--t-hover) var(--ease-out),transform var(--t-hover) var(--ease-out);
}
.stage-fig.is-active .stage-chip{
  opacity:1;transform:none;
  transition:opacity .4s var(--ease-in) .1s,transform .4s var(--ease-in) .1s;
}
.stage-chip-kicker{display:block;font:500 12px/1 "Satoshi";letter-spacing:1px;color:var(--w70);margin-bottom:8px}
.stage-chip-desc{display:block;font:400 15px/1.45 "Satoshi";max-width:56ch}
/* ---------- acordeón inline (touch / <1024) ---------- */
.fila-panel{height:0;overflow:clip;transition:height .5s var(--spring)}
.fila-panel-inner{padding:4px 0 22px}
.fila-foto{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/2;background:#e8e6e0}
.fila-foto img{width:100%;height:100%;object-fit:cover}
.fila-desc{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:60ch}
/* ---------- CTA ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:41px;padding:7px 16px;border-radius:var(--r-btn);
  font:500 14px/21px "Satoshi",sans-serif;white-space:nowrap;
  transition:background-color var(--t-hover) var(--ease-out);
}
.soluciones-cta{display:flex;justify-content:center;margin-top:80px}
/* ---------- responsive ---------- */
@media (max-width:1180px){
  .h2{font-size:42px;letter-spacing:-.42px}
}
@media (max-width:1023px){.soluciones{padding:56px 0 80px}
.bloque + .bloque{margin-top:80px}
.bloque-titulo{margin-bottom:24px}
.bloque-grid{display:block}
.stage{display:none}
.fila{padding:16px 34px 16px 0;opacity:1;align-items:center}
.fila.is-active .fila-num,.fila.is-active .fila-titulo{transform:none}
.fila::before{display:none}
.fila-titulo{font-size:18px}
.fila-glifo{
    right:4px;opacity:1;transform:none;font-size:20px;color:var(--ink-2);
    transition:transform var(--t-hover) var(--ease-out);
  }
.fila-glifo::before{content:"+"}
.fila.is-open .fila-glifo{transform:rotate(45deg);transition-timing-function:var(--ease-in)}
.soluciones-cta{margin-top:52px}}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
  .stage-media,.stage-media img{transform:none !important}
}

/* ---------- hero: video único a cover (dimensión del cuadro intacta) ---------- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-card{background:#101312 center/cover no-repeat}
@media (prefers-reduced-motion:reduce){.hero-card{background-image:url("https://cdn.prod.website-files.com/6a637c70ec156136c2e6b6e2/6a775fb7971285bc60eb9324_flow-landing-poster.jpg")}}

/* ==== neutralizador: clases homónimas del stylesheet del Designer del sitio ==== */
.nav .nav-logo{top:0;left:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.container{width:auto}
.footer .footer-links{margin-left:0}
.footer .footer-logo{width:auto;height:auto}