/* ─────────────────────────────────────────────────────────────
   Tokens de marca de Elo (dirección «Escala», 9-nov-2026).
   Cambiar la marca = cambiar este fichero (y el SVG del logo en index.html).
   ───────────────────────────────────────────────────────────── */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-v2.woff2') format('woff2');font-weight:400 800;font-stretch:100% 112%;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/plex-sans-v2.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  /* Color */
  --elo-marino:#0A0D18;      /* texto y fondos tech */
  --elo-noche:#121829;       /* paneles sobre marino */
  --elo-linea-oscura:#262E44;
  --elo-naranja:#FF5A12;     /* marca, botones, el resultado */
  --elo-naranja-hover:#FF7633;
  --elo-naranja-texto:#C2410C; /* texto naranja sobre blanco (5,2:1) */
  --elo-blanco:#FFFFFF;
  --elo-niebla:#F3F4F7;      /* bloques sobre blanco */
  --elo-linea:#E2E5EB;
  --elo-gris:#4F5664;        /* texto secundario sobre blanco (7,4:1) */
  --elo-acero:#A3ABBD;       /* texto secundario sobre marino (8,2:1) */
  --elo-verde:#2DD4A0;       /* crecimiento: ingresos, ahorro, «en marcha» (verde de BP Finanzas), sobre marino */
  --elo-verde-texto:#0E7A5C; /* el mismo verde para texto sobre blanco (5,4:1) */
  --elo-verde-suave:#E6F7F1; /* fondo de lo que crece */
  --elo-ambar:#FFB400;       /* lo que hace una persona */

  /* Letra */
  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --peso-titular:800;
  --ancho-titular:112%;      /* Archivo ensanchada: el toque «tech» de los titulares */
  --tracking-titular:-0.03em;

  /* Escala tipográfica (fluida) */
  --t-hero:clamp(2.6rem,1.4rem + 5.2vw,5.4rem);
  --t-h2:clamp(2rem,1.3rem + 2.6vw,3.4rem);
  --t-h3:clamp(1.25rem,1.1rem + .5vw,1.55rem);
  --t-lead:clamp(1.08rem,1rem + .35vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:.875rem;

  /* Forma y ritmo */
  --radio:8px;
  --radio-grande:16px;
  --hueco:clamp(1rem,.8rem + 1vw,1.5rem);
  --seccion:clamp(4.5rem,3rem + 6vw,8.5rem);
  --ancho:1200px;
  --sombra:0 24px 60px rgba(10,13,24,.14);
}
/* Elo · landing v2 (9-nov, noche). Consultora tecnológica de referencia.
   Idea: la web se demuestra a sí misma. Portada marina con trabajo REAL en marcos de navegador y de móvil;
   después, prueba con historia (cronología), galería de lo construido, cómo funciona, ofertas, equipo con caras.
   Naranja = acción y marca. Verde = lo que crece. Movimiento: un solo momento al cargar y respuestas a lo que hace el usuario. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--elo-blanco);color:var(--elo-marino);font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,blockquote,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--elo-naranja);outline-offset:3px;border-radius:4px}
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.saltar{position:absolute;left:-9999px;top:0;background:var(--elo-naranja);color:var(--elo-marino);padding:.6rem 1rem;z-index:100;font-weight:600}
.saltar:focus{left:12px;top:12px}
[data-pendiente]{display:none}
.borrador [data-pendiente]{display:block}

/* ── Logo y tipografía */
.logo{height:24px;width:calc(24px * 2.66);color:currentColor;flex:none}
.logo--grande{height:56px;width:calc(56px * 2.66);--logo-acc:var(--elo-naranja)}
.logo--pie{height:22px;width:calc(22px * 2.66)}
.titular,.h2,.h3,.caso-h__datos b,.metricas dd,.cobro__frase{font-family:var(--f-display);font-stretch:var(--ancho-titular);font-weight:var(--peso-titular);letter-spacing:var(--tracking-titular)}
.titular{font-size:clamp(2.6rem,1.1rem + 4.2vw,4.6rem);line-height:.98;text-wrap:balance}
.titular span{display:block}
.titular__verde{color:var(--elo-verde)}
.h2{font-size:var(--t-h2);line-height:1.04;text-wrap:balance;max-width:22ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.h3{font-size:var(--t-h3);font-weight:750;letter-spacing:-.02em;line-height:1.15}
.entradilla{font-size:var(--t-lead);color:var(--elo-acero);max-width:58ch;margin:1.4rem 0 2rem;line-height:1.55}
.entradilla--clara{color:var(--elo-gris)}

/* ── Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;padding:.8rem 1.4rem;border-radius:var(--radio);font-weight:600;font-size:1rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .16s var(--ease-out),border-color .16s,transform .16s var(--ease-out)}
.boton:active{transform:scale(.97)}
.boton--naranja{background:var(--elo-naranja);color:var(--elo-marino)}
.boton--naranja:hover{background:var(--elo-naranja-hover)}
.boton--contorno{background:transparent;color:var(--elo-blanco);border-color:rgba(255,255,255,.3)}
.boton--contorno:hover{border-color:var(--elo-blanco)}
.boton--peq{min-height:40px;padding:.45rem 1rem;font-size:.92rem}
.ico{width:18px;height:18px}
.botones{display:flex;flex-wrap:wrap;gap:12px}

/* ── Cabecera */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(10,13,24,.88);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);color:var(--elo-blanco);border-bottom:1px solid var(--elo-linea-oscura)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
.cabecera__logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--elo-blanco)}
.cabecera__desc{font-family:var(--f-display);font-weight:600;font-size:.82rem;color:var(--elo-acero);border-left:1px solid var(--elo-linea-oscura);padding-left:.7rem}
.nav ul{display:flex;gap:clamp(1rem,2.4vw,2rem)}
.nav a{text-decoration:none;color:var(--elo-acero);font-size:.95rem;padding:.4rem 0}
.nav a:hover{color:var(--elo-blanco)}

/* ── Portada */
.portada{background:radial-gradient(1200px 600px at 85% 20%,rgba(255,90,18,.12),transparent 60%),var(--elo-marino);color:var(--elo-blanco);padding:clamp(3rem,7vw,6rem) 0 0;position:relative;overflow:hidden;isolation:isolate}
.portada__fondo{position:absolute;left:0;right:0;bottom:0;height:70%;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;z-index:-1;padding:0 4vw;opacity:.55}
.portada__fondo span{display:block;border-radius:8px 8px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);border:1px solid rgba(255,255,255,.05);border-bottom:0}
.portada__fondo span:nth-child(1){height:22%}.portada__fondo span:nth-child(2){height:44%}.portada__fondo span:nth-child(3){height:66%}
.portada__fondo span:nth-child(4){height:88%;background:linear-gradient(180deg,rgba(255,90,18,.16),transparent);border-color:rgba(255,90,18,.2)}
.js .portada__fondo span{transform-origin:bottom;animation:crece 1.2s var(--ease-out) both}
.js .portada__fondo span:nth-child(2){animation-delay:.1s}.js .portada__fondo span:nth-child(3){animation-delay:.2s}.js .portada__fondo span:nth-child(4){animation-delay:.3s}
@keyframes crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.portada__rejilla{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sello{display:inline-flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--elo-acero);border:1px solid var(--elo-linea-oscura);border-radius:999px;padding:.35rem .85rem .35rem .7rem;margin-bottom:1.6rem;background:rgba(18,24,41,.6)}
.punto-vivo{position:relative;width:8px;height:8px;border-radius:50%;background:var(--elo-verde)}
.punto-vivo::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--elo-verde);animation:latido 2.4s var(--ease-out) infinite}
@keyframes latido{from{transform:scale(1);opacity:.6}to{transform:scale(3);opacity:0}}
.js .titular span{animation:sube-t .7s var(--ease-out) both}
@keyframes sube-t{from{transform:translateY(14px)}to{transform:none}}
.js .titular span:nth-child(2){animation-delay:.08s}.js .titular span:nth-child(3){animation-delay:.16s}
@keyframes entra-l{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Marcos de navegador y de móvil */
.navegador{border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.navegador__barra{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#E9ECF1;color:#4F5664;font-size:.75rem}
.navegador__barra i{width:9px;height:9px;border-radius:50%;background:#C9CED8}
.navegador__barra span{margin-left:10px;background:#fff;border-radius:6px;padding:2px 10px;flex:1;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navegador img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.movil{border-radius:28px;overflow:hidden;border:6px solid #1A2034;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.movil img{width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top}
.escaparate{position:relative;padding-bottom:3rem;--px:0;--py:0}
.escaparate__nav{transform:translate3d(calc(var(--px) * -8px),calc(var(--py) * -6px),0) rotate(-1.2deg);transition:transform .4s var(--ease-out)}
.escaparate__movil{position:absolute;right:-2%;bottom:0;width:30%;transform:translate3d(calc(var(--px) * 14px),calc(var(--py) * 10px),0) rotate(3deg);transition:transform .4s var(--ease-out)}
.escaparate__nota{margin-top:1.2rem;font-size:.88rem;color:var(--elo-acero);max-width:60%}
.escaparate__nota b{color:var(--elo-blanco);font-weight:600}
.js .escaparate{animation:entra-l 1s .2s var(--ease-out) both}
.confian{display:flex;align-items:center;gap:1.5rem 2.5rem;flex-wrap:wrap;padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:2.2rem;border-top:1px solid var(--elo-linea-oscura);margin-top:clamp(2.5rem,5vw,4rem)}
.confian p{font-size:.88rem;color:var(--elo-acero)}
.confian ul{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem}
.confian li{font-family:var(--f-display);font-stretch:var(--ancho-titular);font-weight:700;font-size:1.15rem;color:#D6DAE3;letter-spacing:-.01em}

/* ── Secciones */
.seccion{padding:var(--seccion) 0}
.seccion--niebla{background:var(--elo-niebla)}
.seccion--oscura{background:var(--elo-marino);color:var(--elo-blanco)}
.seccion--video{background:linear-gradient(180deg,var(--elo-marino) 0,var(--elo-marino) 32%,var(--elo-blanco) 32%)}
.seccion--video .h2{color:var(--elo-blanco)}
.seccion--video .entradilla{color:var(--elo-acero)}
.cabeza-fila{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}

/* ── Vídeo */
.video{display:grid;gap:1rem}
.video__texto{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.video__texto .h2{margin-bottom:0}
.video__texto .entradilla{margin:0}
.video__marco{border-radius:var(--radio-grande);overflow:hidden;box-shadow:0 40px 100px rgba(10,13,24,.3);background:var(--elo-marino);aspect-ratio:16/9}
.video__v{width:100%;height:100%;object-fit:cover}

/* ── Palancas */
.palancas{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.palancas__titulo{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--elo-gris);margin-bottom:.8rem}
.palancas__col{display:grid;gap:10px}
.palanca{text-align:left;display:grid;gap:.35rem;padding:1.15rem 1.3rem;border:1.5px solid var(--elo-linea);border-radius:var(--radio-grande);background:var(--elo-blanco);cursor:pointer;transition:border-color .16s,background-color .16s}
.palanca:hover{border-color:var(--elo-marino)}
.palanca[aria-pressed="true"]{border-color:var(--elo-marino);background:var(--elo-marino);color:var(--elo-blanco)}
.palanca__nombre{font-family:var(--f-display);font-stretch:var(--ancho-titular);font-weight:750;font-size:1.25rem;letter-spacing:-.02em}
.palanca__texto{color:var(--elo-gris);font-size:.98rem}
.palanca[aria-pressed="true"] .palanca__texto{color:var(--elo-acero)}
.palancas__col--logros{position:sticky;top:96px}
.logro-g{display:grid;gap:.2rem;padding:1.1rem 1.3rem;border-radius:var(--radio-grande);background:var(--elo-niebla);border:1.5px solid transparent;transition:background-color .2s,border-color .2s,opacity .2s}
.logro-g b{font-family:var(--f-display);font-stretch:var(--ancho-titular);font-size:1.2rem;letter-spacing:-.02em}
.logro-g span{color:var(--elo-gris);font-size:.95rem}
.palancas[data-activa] .logro-g{opacity:.38}
.palancas[data-activa] .logro-g.on{opacity:1;background:var(--elo-verde-suave);border-color:var(--elo-verde)}
.palancas[data-activa] .logro-g.on b{color:var(--elo-verde-texto)}

/* ── Caso Brunesmar */
.caso-h__sector{font-family:var(--f-display);font-weight:700;color:var(--elo-naranja);margin-bottom:1rem}
.caso-h .h2{max-width:24ch}
.caso-h__rejilla{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.crono{position:relative;display:grid;gap:1.6rem;padding-left:28px}
.crono::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--elo-linea-oscura),var(--elo-naranja))}
.crono li{position:relative;display:grid;gap:.15rem}
.crono li::before{content:"";position:absolute;left:-28px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--elo-marino);border:2px solid var(--elo-acero)}
.crono li.crono__fin::before{background:var(--elo-naranja);border-color:var(--elo-naranja);box-shadow:0 0 0 6px rgba(255,90,18,.18)}
.crono time{font-size:.85rem;color:var(--elo-naranja);font-weight:600}
.crono b{font-family:var(--f-display);font-size:1.2rem;letter-spacing:-.01em}
.crono span{color:var(--elo-acero);font-size:.97rem}
.caso-h__visual{display:grid;gap:1.4rem}
.caso-h__datos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.caso-h__datos div{background:var(--elo-noche);border:1px solid var(--elo-linea-oscura);border-radius:var(--radio-grande);padding:1rem 1.1rem;display:grid;gap:.25rem}
.caso-h__datos b{font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);color:var(--elo-verde);line-height:1;white-space:nowrap}
.caso-h__datos span{font-size:.86rem;color:var(--elo-acero)}
.caso-h__fuente{font-size:.86rem;color:var(--elo-acero)}
.caso-h__fuente a{color:var(--elo-blanco)}
.resena{margin-top:2.5rem;border:1.5px dashed var(--elo-naranja);border-radius:var(--radio-grande);padding:1.5rem;max-width:760px}
.resena p{font-family:var(--f-display);font-size:1.35rem;font-weight:700}
.resena footer{color:var(--elo-acero);margin-top:.5rem}

/* ── Carrusel de proyectos */
.carrusel__mandos{display:flex;gap:8px;margin-bottom:clamp(2rem,4vw,3.2rem)}
.carrusel__mandos button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--elo-linea);background:var(--elo-blanco);display:grid;place-items:center;cursor:pointer;transition:border-color .16s,transform .16s var(--ease-out)}
.carrusel__mandos button:hover{border-color:var(--elo-marino)}
.carrusel__mandos button:active{transform:scale(.94)}
.carrusel__mandos svg{width:20px;height:20px}
.carrusel{--margen:max(16px,calc((100vw - var(--ancho)) / 2 + 32px));display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,520px);gap:clamp(16px,2.4vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--margen) 1.5rem;scroll-padding-inline:var(--margen);scrollbar-width:thin;overscroll-behavior-x:contain}
.proyecto{scroll-snap-align:start;display:grid;gap:.7rem;align-content:start}
.proyecto .navegador{border-color:var(--elo-linea);box-shadow:0 20px 50px rgba(10,13,24,.12);margin-bottom:.5rem;transition:transform .3s var(--ease-out)}
.proyecto:hover .navegador{transform:translateY(-4px)}
.proyecto__cliente{font-family:var(--f-display);font-weight:700;color:var(--elo-naranja-texto);font-size:.92rem}
.proyecto p{color:var(--elo-gris)}
.pilas{display:flex;flex-wrap:wrap;gap:6px}
.pilas li{font-size:.8rem;font-weight:500;padding:.25rem .65rem;border-radius:999px;background:var(--elo-niebla);color:var(--elo-marino)}
.pilas--oscuras li{background:var(--elo-noche);color:var(--elo-acero);border:1px solid var(--elo-linea-oscura)}

/* ── Proceso (tablero) */
.proceso{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.tablero{background:var(--elo-marino);color:var(--elo-blanco);border-radius:var(--radio-grande);padding:clamp(14px,2.2vw,22px);box-shadow:0 30px 80px rgba(10,13,24,.25)}
.tablero__pestanas{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--elo-noche);border:1px solid var(--elo-linea-oscura);border-radius:10px;padding:4px;margin-bottom:16px}
.tablero__pestanas button{border:0;background:transparent;color:var(--elo-acero);font-weight:600;padding:.6rem .5rem;border-radius:7px;cursor:pointer;min-height:44px}
.tablero__pestanas button[aria-selected="true"]{background:var(--elo-blanco);color:var(--elo-marino)}
.flujo{display:grid;gap:7px;counter-reset:f}
.flujo li{counter-increment:f;display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:.8rem .95rem;border:1px solid var(--elo-linea-oscura);border-radius:var(--radio);background:var(--elo-noche);transition:border-color .3s,transform .3s var(--ease-out)}
.flujo li::before{content:counter(f);font-family:var(--f-display);font-weight:700;color:var(--elo-acero);font-size:.9rem}
.flujo li span{font-weight:500;font-size:.98rem}
.flujo li em{font-style:normal;font-size:.78rem;color:var(--elo-acero)}
.flujo li[data-quien="persona"] em{color:var(--elo-ambar)}
.flujo li.activo{border-color:var(--elo-naranja);transform:translateX(4px)}
.logro{margin-top:8px;padding:.9rem 1rem;border-radius:var(--radio);background:rgba(45,212,160,.1);border:1px solid rgba(45,212,160,.35);color:var(--elo-verde);font-weight:600;display:flex;gap:.6rem;align-items:center}
.logro::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--elo-verde);flex:none}

/* ── Ofertas y cobro */
.ofertas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hueco);align-items:stretch}
.oferta{border:1.5px solid var(--elo-linea);border-radius:var(--radio-grande);padding:clamp(20px,2.4vw,28px);display:grid;gap:.9rem;align-content:start}
.oferta--entrada{grid-column:1/-1;background:var(--elo-marino);color:var(--elo-blanco);border-color:var(--elo-marino);grid-template-columns:auto 1fr auto;column-gap:2rem;align-items:center}
.oferta--entrada .oferta__etq{grid-column:1/-1}
.oferta--entrada p{color:var(--elo-acero)}
.oferta__etq{font-family:var(--f-display);font-weight:700;color:var(--elo-naranja)!important}
.oferta__lista{display:grid;gap:.55rem}
.oferta__lista li{padding-left:1.4rem;position:relative;color:var(--elo-gris)}
.oferta__lista li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:2px;background:var(--elo-verde)}
.cobro{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;border-top:1.5px solid var(--elo-marino);padding-top:clamp(1.5rem,3vw,2.2rem)}
.cobro__frase{font-size:clamp(1.7rem,1.2rem + 2vw,2.8rem);line-height:1.05}
.modelos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.modelo{padding:1.1rem 1.2rem;border-radius:var(--radio-grande);border:1.5px solid var(--elo-linea);display:grid;gap:.25rem;align-content:start}
.modelo dt{font-family:var(--f-display);font-stretch:var(--ancho-titular);font-weight:750;font-size:1.1rem}
.modelo dd{color:var(--elo-gris);font-size:.95rem}
.modelo--destacado{background:var(--elo-marino);color:var(--elo-blanco);border-color:var(--elo-marino);box-shadow:inset 0 -5px 0 var(--elo-naranja)}
.modelo--destacado dd{color:var(--elo-acero)}

/* ── Escalera */
.escalera{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hueco)}
.escalon{display:grid;grid-template-rows:150px auto auto 1fr;gap:.5rem}
.escalon__barra{align-self:end;height:calc(var(--alto) * 36px);background:var(--elo-marino);border-radius:6px;transform-origin:bottom;margin-bottom:.4rem}
.escalon--resultado .escalon__barra{background:var(--elo-naranja)}
.escalon__n{font-family:var(--f-display);font-weight:700;color:var(--elo-gris)}
.escalon p{color:var(--elo-gris)}
.js .escalera:not(.visible) .escalon__barra{transform:scaleY(.06)}
.js .escalon__barra{transition:transform .8s var(--ease-out)}
.js .escalon:nth-child(2) .escalon__barra{transition-delay:.1s}.js .escalon:nth-child(3) .escalon__barra{transition-delay:.2s}.js .escalon:nth-child(4) .escalon__barra{transition-delay:.3s}

/* ── Diagnóstico */
.diag{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid var(--elo-linea);background:var(--elo-blanco);border-radius:999px;padding:.6rem 1rem;cursor:pointer;font-size:.95rem;min-height:44px;transition:background-color .15s,border-color .15s,transform .15s var(--ease-out)}
.chip:hover{border-color:var(--elo-marino)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--elo-marino);border-color:var(--elo-marino);color:var(--elo-blanco)}
.diag__resultado{background:var(--elo-niebla);border-radius:var(--radio-grande);padding:clamp(20px,3vw,32px);min-height:340px;display:grid;gap:1rem;align-content:start;position:sticky;top:96px}
.diag__vacio{display:grid;place-items:center;text-align:center;gap:1rem;min-height:270px;color:var(--elo-gris)}
.diag__lista{display:grid;gap:12px}
.tarea{border-radius:var(--radio);background:var(--elo-blanco);padding:1rem 1.1rem;display:grid;gap:.45rem;animation:entra .25s var(--ease-out) both}
.tarea h3{font-family:var(--f-display);font-size:1.05rem;letter-spacing:-.01em}
.tarea p{font-size:.93rem;color:var(--elo-gris);display:grid;grid-template-columns:92px 1fr;gap:.6rem}
.tarea p b{font-family:var(--f-display);font-weight:700;font-size:.85rem}
.tarea p:first-of-type b{color:var(--elo-verde-texto)}
.tarea p:last-of-type b{color:var(--elo-naranja-texto)}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Esta web la hemos hecho nosotros */
.nosotros-web__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.metricas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metricas div{background:var(--elo-noche);border:1px solid var(--elo-linea-oscura);border-radius:var(--radio-grande);padding:1.2rem 1.3rem;display:grid;gap:.3rem}
.metricas dt{color:var(--elo-acero);font-size:.9rem}
.metricas dd{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);color:var(--elo-verde);line-height:1;font-variant-numeric:tabular-nums}

/* ── Equipo */
.equipo__intro{margin-top:-1.4rem;margin-bottom:2.4rem}
.personas{display:grid;grid-template-columns:1fr 1fr;gap:var(--hueco)}
.persona{display:grid;grid-template-columns:180px 1fr;gap:1.4rem;align-items:start;border:1.5px solid var(--elo-linea);border-radius:var(--radio-grande);padding:1.2rem}
.persona__foto{width:180px;height:240px;object-fit:cover;object-position:top;border-radius:12px;background:var(--elo-niebla)}
.persona__foto--inicial{display:grid;place-items:center;background:var(--elo-marino);color:var(--elo-naranja);font-family:var(--f-display);font-weight:800;font-size:3rem}
.persona__texto{display:grid;gap:.6rem}
.persona__rol{font-family:var(--f-display);font-weight:700;color:var(--elo-naranja-texto);font-size:.95rem}
.persona__texto p:not(.persona__rol){color:var(--elo-gris);font-size:.98rem}
.enlaces{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.3rem}
.enlaces a{font-weight:600;font-size:.92rem;color:var(--elo-marino);text-decoration-color:var(--elo-naranja);text-underline-offset:3px}

/* ── Preguntas */
.preguntas{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.preguntas__lista{display:grid;border-top:1.5px solid var(--elo-marino)}
.preguntas details{border-bottom:1px solid var(--elo-linea);padding:1.1rem 0}
.preguntas summary{cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";color:var(--elo-naranja-texto);font-size:1.4rem;line-height:1;transition:transform .2s var(--ease-out)}
.preguntas details[open] summary::after{transform:rotate(45deg)}
.preguntas details p{color:var(--elo-gris);margin-top:.6rem;max-width:62ch}

/* ── Contacto */
.contacto__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.formulario{background:var(--elo-noche);border:1px solid var(--elo-linea-oscura);border-radius:var(--radio-grande);padding:clamp(20px,3vw,32px);display:grid;gap:.5rem}
.formulario label{font-weight:500;font-size:.95rem;margin-top:.5rem}
.formulario input,.formulario textarea{width:100%;background:var(--elo-marino);border:1.5px solid var(--elo-linea-oscura);border-radius:var(--radio);color:var(--elo-blanco);font:inherit;padding:.75rem .9rem;min-height:48px}
.formulario input:focus,.formulario textarea:focus{border-color:var(--elo-naranja);outline:none}
.formulario .boton{margin-top:1rem}
.formulario__nota{font-size:.85rem;color:var(--elo-acero)}
.formulario__error{color:#FFB08A;font-size:.9rem}

/* ── Pie */
.pie{border-top:1px solid var(--elo-linea);padding:1.8rem 0;color:var(--elo-gris);font-size:.92rem}
.pie__fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
.pie nav{display:flex;gap:1.2rem}

/* ── Aparición suave al hacer scroll (la página se ve completa sin JavaScript) */
.js .revela{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .revela.visto{opacity:1;transform:none}

/* ── Tabletas y móvil */
@media (max-width:980px){
  .portada__rejilla,.diag,.contacto__rejilla,.palancas,.preguntas,.caso-h__rejilla,.proceso,.nosotros-web__rejilla,.cobro{grid-template-columns:1fr}
  .ofertas{grid-template-columns:1fr}
  .oferta--entrada{grid-template-columns:1fr}
  .personas{grid-template-columns:1fr}
  .escalera{grid-template-columns:1fr 1fr}
  .diag__resultado,.palancas__col--logros{position:static}
  .nav,.cabecera__desc{display:none}
  .escaparate{margin-top:1rem}
}
@media (max-width:620px){
  .escalera,.ofertas,.modelos,.caso-h__datos{grid-template-columns:1fr}
  .escalon{grid-template-rows:auto auto auto 1fr}
  .escalon__barra{height:calc(var(--alto) * 12px)}
  .tarea p{grid-template-columns:1fr;gap:.1rem}
  .botones .boton{width:100%}
  .flujo li{grid-template-columns:22px 1fr}
  .flujo li em{grid-column:2}
  .persona{grid-template-columns:1fr}
  .persona__foto{width:100%;height:320px}
  .escaparate__nota{max-width:62%}
  .metricas{grid-template-columns:1fr 1fr}
  .seccion--video{background:linear-gradient(180deg,var(--elo-marino) 0,var(--elo-marino) 45%,var(--elo-blanco) 45%)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .escalera:not(.visible) .escalon__barra{transform:none}
  .js .revela{opacity:1;transform:none}
}
/* v2.1: prueba en cada oferta y «qué pasa después» */
.oferta__prueba{font-size:.88rem;color:var(--elo-verde-texto)!important;font-weight:600;margin-top:.2rem}
.despues{display:grid;gap:12px;counter-reset:d;margin-top:.5rem}
.despues li{counter-increment:d;display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:start}
.despues li::before{content:counter(d);grid-row:1/3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--elo-naranja);color:var(--elo-marino);font-family:var(--f-display);font-weight:800}
.despues b{font-family:var(--f-display);font-size:1.05rem}
.despues span{color:var(--elo-acero);font-size:.95rem}

/* v2.2 (revisión del CTO): zonas pulsables de 24 px como mínimo */
.enlaces a,.caso-h__fuente a,.formulario__nota a{display:inline-flex;align-items:center;min-height:32px;padding:4px 2px}
.video__v::cue{font-family:var(--f-body);background:rgba(10,13,24,.82)}
.tablero__cabeza{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.85rem;color:var(--elo-acero)}
.tablero__pausa{background:transparent;border:1px solid var(--elo-linea-oscura);color:var(--elo-acero);border-radius:999px;padding:.3rem .8rem;min-height:32px;cursor:pointer}
.tablero__pausa:hover{color:var(--elo-blanco);border-color:var(--elo-acero)}
/* Páginas legales */
.legal{max-width:760px;display:grid;gap:1rem}
.legal .h2{margin-bottom:.5rem}
.legal .h3{margin-top:1.2rem;font-size:1.25rem}
.legal p,.legal li{color:var(--elo-gris)}
.legal ul{list-style:disc;padding-left:1.3rem;display:grid;gap:.35rem}
.legal b{color:var(--elo-marino)}
.legal__fecha{font-size:.88rem;margin-top:1rem}