/* ============================================================
   PROPUESTA MC-2 — landing "Más clientes" · scrollytelling del recorrido
   BASE EXACTA del home aprobado (final.css). Se retiran los bloques de
   secciones que esta landing no usa (slideshow del hero, licencias,
   marcas) y se agregan al final: hero foto única + promesas en renglones,
   funnel bowtie pineado, grid de datos, casos solo y título del proceso.
   ============================================================ */

: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 */
.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)}

/* ---------- 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° (base) · MC: foto única + renglones
   ============================================================ */
.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-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}

/* ============================================================
   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}

/* ============================================================
   6 · CASOS — título display A + slider dossier (base)
   - 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
   ============================================================ */
.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 (contraste medido sobre fotos claras) */
.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 (global base)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .orbit,.orbit-item-inner{animation:none}
  .cslider-track{transition:none}
  *{transition-duration:.01ms !important}
}

/* ============================================================
   RESPONSIVE (base)
   ============================================================ */
@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}
}

@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}

  .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}

  .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 (base intacta)
   ============================================================ */
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 ---------- */
.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}
}

/* ############################################################
   ############  INJERTOS MC-2 (solo esta propuesta)  #########
   ############################################################ */

/* ============================================================
   MC · HERO — descriptor + foto única con Ken Burns sutil
   + promesas en renglones que se encienden secuencialmente
   ============================================================ */
.hero-eyebrow{
  font:500 13px/1 "Satoshi",sans-serif;letter-spacing:2px;
  text-transform:uppercase;color:var(--w70);margin-bottom:20px;
}
.hero-promesas--lista{
  flex-direction:column;align-items:flex-start;gap:12px;margin:30px 0 38px;
}
.hero-promesas--lista .promesa{opacity:.22;animation:promesaOn .7s var(--ease-in) forwards}
.hero-promesas--lista .promesa:nth-child(1){animation-delay:.45s}
.hero-promesas--lista .promesa:nth-child(2){animation-delay:.85s}
.hero-promesas--lista .promesa:nth-child(3){animation-delay:1.25s}
.hero-promesas--lista .promesa:nth-child(4){animation-delay:1.65s}
@keyframes promesaOn{to{opacity:1}}

.hero-card--foto .hero-foto{
  width:100%;height:100%;object-fit:cover;will-change:transform;
  animation:kbOne 28s ease-in-out infinite alternate;
}
@keyframes kbOne{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ============================================================
   MC · FUNNEL — bowtie en papel/tinta, narrativa pineada
   Estado por defecto (sin JS / reduced motion) = versión final
   estática con los cuatro textos apilados. El modo .funnel--live
   lo activa el JS solo en desktop con motion permitido.
   ============================================================ */
.funnel{background:var(--crema)}
.funnel-stage{padding:150px 0 130px}
.funnel-canvas{max-width:1100px;margin:0 auto}
.funnel-svg{width:100%;height:auto;display:block}

/* dibujo: tinta sobre papel, verde solo en el bracket */
.fseg path{fill:rgba(39,39,44,.055);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.fseg text{
  font:500 13.5px "Satoshi",sans-serif;fill:var(--ink);
  text-anchor:middle;dominant-baseline:middle;letter-spacing:.2px;
}
.fnode circle{fill:rgba(39,39,44,.055);stroke:var(--ink);stroke-width:1.3}
.fnode text{
  font:500 14.5px "Satoshi",sans-serif;fill:var(--ink);
  text-anchor:middle;dominant-baseline:middle;
}
.floop{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.75}
.floop-tip{fill:var(--ink);opacity:.75}
.fbracket{fill:none;stroke:var(--verde);stroke-width:3}

/* estado estático final: lo de fuera atenuado, bracket encendido */
.fseg--fuera{opacity:.3}

/* captions */
.funnel-caps{
  max-width:820px;margin:44px auto 0;text-align:center;
  display:flex;flex-direction:column;gap:30px;
}
.fcap{display:flex;flex-direction:column;align-items:center;gap:24px}
.fcap-txt{
  font:500 clamp(24px,2.5vw,36px)/1.2 "PP Eiko",serif;
  letter-spacing:-.3px;color:var(--ink);max-width:19em;
}
.fcap--remate .fcap-txt{font-size:clamp(21px,2vw,28px);max-width:30em}

/* dato ancla (CAC) — card papel con hairline */
.fdato{
  display:flex;align-items:center;gap:28px;text-align:left;
  background:#fff;border:1px solid rgba(18,12,8,.07);border-radius:var(--r-card);
  padding:24px 30px;max-width:640px;
}
.fdato-big{
  font:500 clamp(44px,4vw,60px)/1 "PP Eiko",serif;
  letter-spacing:-1px;color:var(--ink);white-space:nowrap;
}
.fdato-frase{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.fdato-fuente{
  margin-top:10px;font:500 10.5px/1 "Satoshi",sans-serif;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-2);
}

/* modo live (pin + scrub): captions se apilan en el mismo lugar */
.funnel--live .funnel-stage{
  min-height:100svh;padding:96px 0 40px;
  display:flex;align-items:center;
}
.funnel--live .funnel-stage > .container{width:100%}
.funnel--live .funnel-caps{position:relative;min-height:270px;gap:0}
.funnel--live .fcap{position:absolute;left:0;right:0;top:0}

/* versión móvil: secuencia vertical sin pin (funnel de barras) */
.funnel-movil{display:none}
.fm-intro{
  font:500 clamp(24px,6vw,30px)/1.2 "PP Eiko",serif;
  letter-spacing:-.3px;color:var(--ink);text-align:center;
  max-width:17em;margin:0 auto;
}
.fm-graf{margin:36px auto 0;max-width:430px}
.fm-bar{
  position:relative;margin:0 auto;border:1px solid rgba(39,39,44,.5);
  background:rgba(39,39,44,.05);border-radius:8px;
  padding:11px 0;text-align:center;
  font:500 14px/1 "Satoshi",sans-serif;color:var(--ink);
}
.fm-bar + .fm-bar{margin-top:8px}
.fm-fuera .fm-bar{opacity:.35}
.fm-nota{
  text-align:center;font-size:13px;line-height:1.45;color:var(--ink-2);
  margin:12px auto 22px;max-width:30ch;
}
.fm-dentro{position:relative;padding-left:14px;margin-left:-14px}
.fm-dentro::before{ /* bracket verde vertical: cubre Convertir → Ser embajador */
  content:"";position:absolute;left:0;top:44px;bottom:0;width:2px;background:var(--verde);
}
.fm-thesis{
  font:500 17px/1.3 "PP Eiko",serif;color:var(--ink);
  text-align:center;margin-bottom:14px;
}
.fm-node{
  width:66%;margin:8px auto;border:1px solid var(--ink);border-radius:var(--r-pill);
  padding:12px 0;text-align:center;font:500 13px/1 "Satoshi",sans-serif;color:var(--ink);
}
.fm-remate{
  font:500 clamp(19px,5vw,23px)/1.35 "PP Eiko",serif;letter-spacing:-.2px;
  color:var(--ink);text-align:center;max-width:24em;margin:44px auto 0;
}
.funnel-movil .fdato{margin:30px auto 0}

@media (max-width:1023px){
  .funnel-stage{display:none}
  .funnel-movil{display:block;padding:90px 0}
}
@media (max-width:520px){
  .fdato{flex-direction:column;align-items:flex-start;gap:14px;padding:22px}
}

/* ============================================================
   MC · DATA — grid 2×3 de datos duros en papel
   número gigante PP Eiko (counter) + frase + fuente en versalitas;
   hover con el lenguaje del home (marca verde + nudge, como .fila)
   ============================================================ */
.datos{background:var(--crema)}
.datos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dato{
  position:relative;display:flex;flex-direction:column;gap:16px;
  background:#fff;border:1px solid rgba(18,12,8,.07);border-radius:var(--r-card);
  padding:36px 32px 30px;overflow:hidden;
}
.dato::before{ /* marca verde del lenguaje del home (fila activa) */
  content:"";position:absolute;left:0;top:44px;width:2px;height:0;
  background:var(--verde);transition:height var(--t-hover) var(--ease-out);
}
.dato:hover::before{height:34px;transition-timing-function:var(--ease-in)}
.dato-big{
  font:500 clamp(54px,4.6vw,72px)/1 "PP Eiko",serif;
  letter-spacing:-1.5px;color:var(--ink);
  transition:transform var(--t-hover) var(--ease-out);
}
.dato:hover .dato-big{transform:translateX(10px);transition-timing-function:var(--ease-in)}
.dato-suf{font-size:.62em}
.dato-pre{font-size:.62em;letter-spacing:-.5px}
.dato-frase{color:var(--ink-2);font-size:15.5px;line-height:1.5;flex:1;max-width:44ch}
.dato-fuente{
  font:500 11px/1.5 "Satoshi",sans-serif;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ink-2);
}
@media (max-width:1180px){
  .datos-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .datos-grid{grid-template-columns:1fr;gap:14px}
  .dato{padding:28px 22px 24px}
}

/* ============================================================
   MC · CASOS SOLO — un slider dossier centrado (5 casos)
   ============================================================ */
.casos2--solo{min-height:0;display:block;padding:150px 0}
.casos2--solo .container{
  display:block;max-width:1160px;padding:0 60px;
}
.casos2--solo .casos2-title{
  font-size:clamp(34px,3.3vw,50px);margin-bottom:44px;
}
@media (min-width:1024px){
  .casos2--solo .cslider{height:clamp(520px,72vh,680px)}
}
@media (max-width:1023px){
  .casos2--solo{padding:90px 0}
  .casos2--solo .casos2-title{margin-bottom:32px}
}
@media (max-width:480px){
  .casos2--solo .container{padding:0 16px}
}

/* ============================================================
   MC · PROCESO — gancho largo, display más contenido
   ============================================================ */
.proceso-title--mc{
  font-size:clamp(30px,3vw,52px);line-height:1.1;max-width:15em;
}

/* ============================================================
   MC · REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero-card--foto .hero-foto{animation:none}
  .hero-promesas--lista .promesa{animation:none;opacity:1}
  .orbit,.orbit-item-inner{animation:none}
}


/* ---------- hero con video de fondo (tratamiento medido de la CX) ---------- */
.hero--video{position:relative;height:100svh;min-height:540px;max-height:1100px;display:flex;align-items:center;overflow:hidden;background:#0c120f}
.hero--video .hero-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,14,12,.95) 0%,rgba(10,14,12,.44) 58%,rgba(10,14,12,.26) 100%),
             linear-gradient(to top,rgba(10,14,12,.80) 0%,rgba(10,14,12,0) 32%)}
.hero--video .hero-inner{position:relative;z-index:2;width:100%}
.hero--video .hero-copy{max-width:640px;color:#fff}
.hero--video .hero-eyebrow{color:rgba(255,255,255,.72)}
.hero--video .h1{color:#fff;font-size:clamp(28px,5vh,46px)}
.hero--video .promesa{color:#fff;font-size:clamp(19px,3.2vh,28px);line-height:1.25}
.hero--video .hero-promesas--lista{margin:clamp(12px,2vh,22px) 0 clamp(16px,2.6vh,28px)}
@media (max-width:640px){
  .hero--video{min-height:100svh}
  .hero-scrim{background:linear-gradient(rgba(10,14,12,.86),rgba(10,14,12,.72)),linear-gradient(to top,rgba(10,14,12,.85),transparent 40%)}
}
@media (prefers-reduced-motion:reduce){.hero--video .hero-bgv{display:none}.hero--video{background:#0c120f center/cover no-repeat;background-image:url("https://cdn.prod.website-files.com/6a637c70ec156136c2e6b6e2/6a6a39b6385e636fb1694c9b_cx3-hero-poster.jpg")}}

/* ==== cue de scroll del funnel (solo desktop con motion) ==== */
.fcue{position:absolute;left:50%;bottom:clamp(18px,3.2vh,34px);transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
.funnel--live .fcue{display:flex}
.fcue-mouse{width:22px;height:34px;border:1.5px solid rgba(15,23,19,.38);border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.fcue-dot{width:3px;height:7px;border-radius:2px;background:#0f1713;opacity:.55;animation:fcueDrift 1.6s cubic-bezier(.45,0,.55,1) infinite}
.fcue-label{font:500 10px/1 "Satoshi",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(15,23,19,.45)}
@keyframes fcueDrift{0%{transform:translateY(0);opacity:0}18%{opacity:.55}62%{transform:translateY(12px);opacity:.55}100%{transform:translateY(14px);opacity:0}}
@media (prefers-reduced-motion:reduce){.fcue{display:none!important}}

/* ==== datos v3 · tres ideas (elegida 10-ago) ==== */
.datos-lead{font:400 17px/1.55 "Satoshi",sans-serif;color:var(--ink-2);max-width:52ch;margin:18px auto 0;text-align:center}
.dacts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.dact{background:#fff;border-radius:20px;padding:34px 30px 30px;box-shadow:0 24px 60px -48px rgba(15,23,19,.35);display:flex;flex-direction:column}
.dact-n{font:500 12px/1 "Satoshi",sans-serif;letter-spacing:.16em;color:rgba(15,23,19,.4);margin-bottom:22px}
.dact-claim{font:500 clamp(22px,1.9vw,28px)/1.18 "PP Eiko",serif;color:var(--ink);margin:0 0 16px}
.dact-body{font:400 15px/1.6 "Satoshi",sans-serif;color:var(--ink-2);margin:0 0 22px;flex:1}
.dact-src{font:500 10.5px/1.5 "Satoshi",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(15,23,19,.45);margin:0}
@media(max-width:900px){.dacts{grid-template-columns:1fr}}

/* ==== 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}