/* =========================================================================
   Uplift! The CRO Agency
   Tipografia: Sequel Sans (corte Display) en todo el texto.
   El logotipo conserva Figtree Black, que es como lo fija el manual de marca.
   ========================================================================= */

/* Los ficheros declaran pesos internos incorrectos (400 a 430); el peso real
   se fija aqui para que el navegador no los confunda entre si. */
@font-face{font-family:"Sequel Sans";src:url("fonts/sequel-sans-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Sequel Sans";src:url("fonts/sequel-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sequel Sans";src:url("fonts/sequel-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Sequel Sans";src:url("fonts/sequel-sans-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* Paleta del manual */
  --tinta:#0B2430;
  --celeste:#29A3DE;
  --bruma:#9FD8F0;
  --vapor:#E6F3FA;
  --hueso:#F2EDE4;
  --niebla:#6B8390;
  --papel:#FAF7F1;
  --linea:rgba(11,36,48,.14);
  /* Texto secundario. Niebla da 3,5:1 sobre hueso y no llega al minimo para
     texto pequeno; estos dos tonos son niebla y tinta oscurecidos. */
  --texto:#28454F;
  --etiqueta:#516A76;

  --sans:"Sequel Sans","Helvetica Neue",Arial,sans-serif;
  --mono:var(--sans);
  --logo:"Figtree","Helvetica Neue",Arial,sans-serif;

  /* Movimiento: cada duracion tiene un trabajo, no una para todo */
  --e-out:cubic-bezier(.16,1,.3,1);          /* entradas: frena al llegar */
  --e-io:cubic-bezier(.65,0,.35,1);          /* barridos: arranca y frena */
  --t-hover:180ms;
  --t-estado:420ms;
  --t-entrada:900ms;
  --t-marca:720ms;
}

*{box-sizing:border-box}
/* overflow-x:clip y no hidden: recorta cualquier desborde lateral transitorio de
   las animaciones sin convertir la raiz en contenedor de scroll, asi que la
   cabecera sticky sigue funcionando. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;interpolate-size:allow-keywords;overflow-x:clip}

body{
  margin:0;background:var(--hueso);color:var(--tinta);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.55;letter-spacing:.004em;
  font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--celeste);color:var(--tinta)}

.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,3.4vw,56px)}
a{color:inherit}
:focus-visible{outline:2px solid var(--celeste);outline-offset:3px;border-radius:2px}
strong,b{font-weight:500}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--tinta);color:var(--hueso);padding:12px 18px;z-index:100}
.skip-link:focus{left:16px;top:16px}

/* ---------- tipografia ---------- */
.eyebrow,.t-lab{
  font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-feature-settings:"case" 1;color:var(--etiqueta);display:block;
}
h1,h2,h3{font-family:var(--sans);margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4.3vw,56px);font-weight:900;line-height:1.02;letter-spacing:-.035em}
h3{font-size:19px;font-weight:700;letter-spacing:-.012em;line-height:1.25;margin:0 0 8px}
p{margin:0 0 14px;max-width:62ch;text-wrap:pretty}
.lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.5;color:var(--texto);max-width:52ch}
.fine{font-size:15.5px;line-height:1.55;color:var(--texto);margin:0}
.t-m{font-family:var(--sans);font-weight:500;font-size:13px;font-variant-numeric:tabular-nums}

section{padding:clamp(72px,9vw,128px) 0;border-top:1px solid var(--linea)}
.sec-head{margin-bottom:clamp(36px,4.4vw,60px)}
.sec-head h2{max-width:20ch}
.sec-head .lead{margin:18px 0 0}
.sec-head.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 56px;align-items:end}
.sec-head.split .lead{margin:0 0 .35em}
.sec-head.split .eyebrow{margin-bottom:16px}
@media(max-width:900px){.sec-head.split{grid-template-columns:1fr}.sec-head.split .lead{margin:0}}

/* ---------- logotipo ---------- */
.lock{
  font-family:var(--logo);font-weight:900;letter-spacing:-.04em;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:baseline;text-decoration:none;color:var(--tinta);font-size:38px;
  transform-origin:left center;transition:transform var(--t-estado) var(--e-out);
}
@media(max-width:520px){.lock{font-size:30px}}
.bang{height:.812em;width:.434em;vertical-align:-.056em;margin-left:.09em;display:inline-block}

/* ---------- el bloque, dispositivo grafico ----------
   Sin JavaScript se ve ya marcado. Con JavaScript se dibuja como un rotulador
   al entrar en pantalla: solo se resalta lo que se ha medido. */
.blk{
  position:relative;z-index:0;display:inline-block;
  padding:.02em .18em .06em;margin:0 -.04em;border-radius:.07em;color:var(--hueso);
}
.blk::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--celeste);
  transform-origin:left center;
}
/* A cuerpo de parrafo el texto dentro del bloque va en tinta (manual, contraste). */
.blk.sm{color:var(--tinta);font-weight:700}
.js-reveal .blk{color:var(--tinta);transition:color .25s ease calc(var(--md,0ms) + var(--t-marca) * .45)}
.js-reveal .blk::before{transform:scaleX(0);transition:transform var(--t-marca) var(--e-io) var(--md,0ms)}
.js-reveal .blk.is-marked{color:var(--hueso)}
.js-reveal .blk.sm.is-marked{color:var(--tinta)}
.js-reveal .blk.is-marked::before{transform:scaleX(1)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.5rem;border-radius:3px;font-family:var(--sans);font-weight:700;font-size:.95rem;
  letter-spacing:-.005em;text-decoration:none;border:1px solid transparent;cursor:pointer;min-height:46px;
  transition:background-color var(--t-hover) ease,color var(--t-hover) ease,border-color var(--t-hover) ease,transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) ease;
}
.btn:active{transform:scale(.98)}
.btn .arr{width:15px;height:15px;flex:none;transition:transform var(--t-estado) var(--e-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--tinta);color:var(--hueso);border-color:var(--tinta)}
.btn-primary:hover{background:#12344A;border-color:#12344A;box-shadow:0 8px 22px -12px rgba(11,36,48,.55)}
.btn-ghost{background:transparent;color:var(--tinta);border-color:rgba(11,36,48,.35)}
.btn-ghost:hover{border-color:var(--tinta);background:rgba(11,36,48,.04)}
.btn-small{padding:.6rem 1rem;font-size:.85rem;min-height:40px}
.btn-large{padding:1.05rem 2.1rem;font-size:1.02rem}

/* Celeste en el CTA de cabecera, con texto en tinta: 6,0:1 (hueso daria 2,5:1). */
.site-header .btn-primary{background:var(--celeste);color:var(--tinta);border-color:var(--celeste)}
.site-header .btn-primary:hover{background:#1E92CC;border-color:#1E92CC;box-shadow:0 8px 20px -12px rgba(41,163,222,.8)}

/* ---------- cabecera ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(242,237,228,.86);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;transition:border-color var(--t-estado) ease,background-color var(--t-estado) ease;
}
.site-header.is-scrolled{border-bottom-color:var(--linea);background:rgba(242,237,228,.94)}
.site-header.is-scrolled .lock{transform:scale(.84)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;transition:padding var(--t-estado) var(--e-out)}
.site-header.is-scrolled .header-inner{padding-top:10px;padding-bottom:10px}
.main-nav{display:flex;gap:30px;font-weight:500;font-size:14px;letter-spacing:-.005em}
.main-nav a{
  text-decoration:none;padding:6px 0;
  background:linear-gradient(var(--celeste),var(--celeste)) no-repeat 0 100%/0 2px;
  transition:background-size var(--t-estado) var(--e-out);
}
.main-nav a:hover{background-size:100% 2px}
@media(max-width:820px){.main-nav{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,112px);border-top:0;
  /* Trama estatica de reserva: es lo que se ve sin WebGL o con ahorro de datos. */
  background:radial-gradient(rgba(11,36,48,.11) 1.3px,transparent 1.6px) 0 0/16px 16px,var(--hueso);
}
/* Mapa de calor animado (fondo.js). Aparece con un fundido tras el primer fotograma. */
.hero-fondo{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;opacity:0;transition:opacity .45s ease}
.hero-fondo.is-on{opacity:1}
/* En movil el canvas no se usa (fondo.js no arranca): fuera del arbol de render. */
@media(hover:none),(max-width:820px){.hero-fondo{display:none}}
/* La trama se funde con la franja de abajo en lugar de cortarse en seco. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(242,237,228,0),var(--hueso))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,5vw,80px);align-items:center}
.thesis{font-size:clamp(36px,5.4vw,84px);font-weight:900;letter-spacing:-.045em;line-height:.96;margin:22px 0 0}
/* Cada linea del titular sube desde detras de una mascara. El padding deja
   sitio a los descendentes y al bloque para que la mascara no los recorte. */
.thesis .ln{display:block;overflow:hidden;padding:.04em 0 .24em;margin-bottom:-.22em}
.thesis .ln:last-child{margin-top:.1em}
.thesis .ln>span{display:block}
.hero .lead{margin-top:28px;font-size:clamp(17.5px,1.45vw,20px);max-width:44ch}
.hero-cta{margin-top:34px}
.cta-micro{margin:12px 0 0;font-size:14px;font-weight:500;color:var(--etiqueta)}
/* Copia del titular en celeste, encima del original (fondo.js). Una mascara radial
   con borde suave la recorta alrededor del cursor: solo cambian de color las letras
   que quedan debajo, sin ningun disco ni fondo. */
.hero-copy{position:relative}
.thesis-inv{
  position:absolute;margin:0;z-index:1;pointer-events:none;color:var(--celeste);text-wrap:balance;
  --mx:0px;--my:0px;--r:0px;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,#000 calc(var(--r) * .45),transparent var(--r));
  mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,#000 calc(var(--r) * .45),transparent var(--r));
}
/* El bloque se invierte: tinta con letras celeste. */
.thesis-inv .blk{color:var(--celeste) !important}
.thesis-inv .blk::before{background:var(--tinta);transform:none !important}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}

.js-reveal .thesis .ln>span{transform:translateY(108%);transition:transform 1s var(--e-out)}
.js-reveal .thesis .ln:nth-child(2)>span{transition-delay:80ms}
.js-reveal .thesis .ln:nth-child(3)>span{transition-delay:160ms}
.js-reveal .thesis .ln:nth-child(4)>span{transition-delay:240ms}
.js-reveal .hero.is-in .thesis .ln>span{transform:none}
.js-reveal .hero-in{opacity:0;transform:translateY(14px);transition:opacity .8s var(--e-out) var(--hd,0ms),transform .8s var(--e-out) var(--hd,0ms)}
.js-reveal .hero.is-in .hero-in{opacity:1;transform:none}

/* ---------- el test de ejemplo ---------- */
.lectura{
  margin:0;background:var(--papel);border:1px solid var(--linea);border-radius:6px;
  padding:clamp(20px,2.2vw,30px);
  box-shadow:0 1px 0 rgba(11,36,48,.04),0 28px 60px -34px rgba(11,36,48,.45);
  font-variant-numeric:tabular-nums;
}
.lec-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lec-estado{
  display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:12.5px;
  padding:4px 10px 4px 8px;border-radius:99px;background:var(--hueso);border:1px solid var(--linea);
}
.lec-punto{width:7px;height:7px;border-radius:50%;background:var(--tinta)}
.lectura.is-corriendo .lec-punto{background:var(--celeste);animation:latido 1s ease-in-out 3}
@keyframes latido{50%{box-shadow:0 0 0 5px rgba(41,163,222,.22)}}
.lec-titulo{font-weight:900;font-size:clamp(20px,1.8vw,25px);letter-spacing:-.025em;line-height:1.12;margin:18px 0 4px}
.lec-meta{font-size:14px;color:var(--etiqueta);margin:0}

.lec-variantes{margin:22px 0 0;display:grid;gap:12px}
.lec-var{display:grid;grid-template-columns:26px 94px 1fr 64px;gap:12px;align-items:center}
.lec-letra{
  width:26px;height:26px;display:grid;place-items:center;border-radius:4px;font-weight:700;font-size:13px;
  border:1px solid var(--linea);background:var(--hueso);
}
.es-b .lec-letra{background:var(--tinta);border-color:var(--tinta);color:var(--hueso)}
.lec-nombre{font-weight:500;font-size:14px}
.lec-barra{height:10px;border-radius:99px;background:var(--vapor);overflow:hidden}
.lec-barra>span{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:rgba(11,36,48,.32)}
.es-b .lec-barra>span{background:var(--celeste)}
.lec-valor{text-align:right;font-weight:500;font-size:14.5px;white-space:nowrap}
.lec-valor .blk{margin-right:-.18em}

.lec-datos{margin:22px 0 0;padding:16px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lec-datos dt{font-size:12.5px;color:var(--etiqueta);font-weight:500}
.lec-datos dd{margin:2px 0 0;font-weight:900;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}

.lec-log{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.lec-log li{display:grid;grid-template-columns:58px 1fr;gap:10px;font-size:14px;line-height:1.4}
.lec-log span{font-weight:500;color:var(--etiqueta)}
.lec-log li:last-child{font-weight:500}
.js-reveal .lectura .lec-log li{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.js-reveal .lectura .lec-log li.is-on{opacity:1;transform:none}
.lec-nota{margin-top:16px;font-size:12px;color:var(--etiqueta)}

@media(max-width:480px){
  .lec-var{grid-template-columns:24px 1fr 56px;grid-template-areas:"l n v" "b b b";row-gap:6px}
  .lec-letra{grid-area:l}.lec-nombre{grid-area:n}.lec-barra{grid-area:b}.lec-valor{grid-area:v}
  .lec-datos{grid-template-columns:1fr}
}

/* ---------- franja de datos ---------- */
.proof-strip{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:18px 0}
.proof-inner{
  display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;justify-content:center;
  font-weight:500;font-size:13.5px;color:var(--texto);text-align:center;
}
.proof-inner>span+span::before{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--celeste);
  vertical-align:middle;margin:-2px 30px 0 -30px;position:relative;left:-2px;
}
@media(max-width:700px){.proof-inner>span+span::before{display:none}}

/* ---------- el problema: frases del cliente ---------- */
.problema-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.problema-head{position:sticky;top:120px}
.problema-head h2{max-width:14ch}
.problema-head .lead{margin-top:22px}
.problema-voces>.eyebrow{margin-bottom:10px}
.voces{list-style:none;margin:0;padding:0}
.voces li{
  font-weight:500;font-size:clamp(21px,2.1vw,30px);line-height:1.22;letter-spacing:-.02em;
  padding:24px 0;border-bottom:1px solid var(--linea);text-indent:-.42em;
}
.voces li::before{content:"\00ab";color:var(--celeste)}
.voces li::after{content:"\00bb";color:var(--celeste)}
.js-reveal .voces li[data-reveal]{transform:translateX(22px)}
/* Mas especifica que la regla general de revelado: sin ella la frase se
   quedaba desplazada 22px para siempre. */
.js-reveal .voces li[data-reveal].is-visible{transform:none}
@media(max-width:900px){
  .problema-grid{grid-template-columns:1fr}
  .problema-head{position:static}
  .voces li{text-indent:0}
  /* En movil entran desde abajo: desde la derecha desbordarian el ancho. */
  .js-reveal .voces li[data-reveal]{transform:translateY(16px)}
}

/* ---------- el sistema: tres pasos ---------- */
#sistema{background:var(--papel)}
.pilares{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,52px)}
.pilar{position:relative;padding-top:26px}
/* El filete superior se traza de izquierda a derecha al aparecer. */
.pilar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tinta);transform-origin:left center}
.js-reveal .pilar[data-reveal]::before{transform:scaleX(0);transition:transform 1s var(--e-io) calc(var(--d,0ms) + 150ms)}
.js-reveal .pilar.is-visible::before{transform:scaleX(1)}
.pilar-n{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:18px;
  background:var(--tinta);color:var(--hueso);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;
}
.pilar h3{font-size:clamp(22px,2vw,28px);font-weight:900;letter-spacing:-.03em;line-height:1.08;margin-bottom:10px}
@media(max-width:900px){.pilares{grid-template-columns:1fr}}

/* ---------- cronologia ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative;--p:0}
.timeline::before,.timeline::after{content:"";position:absolute;left:7px;top:10px;width:2px;border-radius:2px}
.timeline::before{bottom:10px;background:var(--linea)}
/* El tramo recorrido se llena en celeste segun avanza el scroll. */
.timeline::after{height:calc((100% - 20px) * var(--p));background:var(--celeste)}
.timeline li{position:relative;display:grid;grid-template-columns:170px 1fr;gap:32px;padding:0 0 clamp(36px,4vw,52px) 40px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;z-index:1;
  background:var(--hueso);border:2px solid rgba(11,36,48,.3);box-sizing:content-box;
  transition:background-color var(--t-estado) ease,border-color var(--t-estado) ease,transform var(--t-estado) var(--e-out);
}
.timeline li.is-reached::before{background:var(--celeste);border-color:var(--celeste);transform:scale(1.12)}
.tl-mark{font-weight:900;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1.1;color:var(--tinta)}
.tl-body h3{margin:0;font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:-.02em;padding-top:2px}
.tl-body .fine{max-width:60ch}
@media(max-width:700px){
  .timeline li{grid-template-columns:1fr;gap:8px;padding-left:34px}
}

/* ---------- CTA intermedio ---------- */
.cta-inline{
  display:flex;align-items:center;justify-content:space-between;gap:20px 36px;flex-wrap:wrap;
  margin-top:clamp(48px,6vw,80px);padding:28px 0;border-top:1px solid var(--tinta);border-bottom:1px solid var(--linea);
}
.cta-inline p{margin:0;max-width:30ch;font-weight:900;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em;line-height:1.12}
.cta-inline .btn{flex:none}
@media(max-width:560px){.cta-inline .btn{width:100%}}

/* ---------- lo que recibes ---------- */
.recibes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.recibes li{
  position:relative;z-index:0;overflow:hidden;
  padding:22px 20px 24px;border:1px solid var(--linea);border-radius:6px;background:var(--papel);
  display:flex;flex-direction:column;gap:14px;min-height:150px;
}
/* Al pasar por encima, la ficha se ilumina de abajo arriba. */
.recibes li::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--vapor);
  transform:scaleY(0);transform-origin:bottom center;transition:transform var(--t-estado) var(--e-out);
}
.recibes li:hover::before{transform:scaleY(1)}
.recibes h3{margin:auto 0 0;font-size:clamp(19px,1.6vw,23px);font-weight:900;letter-spacing:-.025em;line-height:1.1}
.cuando{font-weight:500;font-size:13px;color:var(--etiqueta)}
@media(max-width:1100px){.recibes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.recibes{grid-template-columns:repeat(2,minmax(0,1fr))}.recibes li{min-height:120px}}

/* ---------- shopify ---------- */
.shopify-mark{width:18px;height:auto;flex:none;display:inline-block}
.shopify-mark.xl{width:84px}
.proof-shopify{display:inline-flex;align-items:center;gap:9px;color:var(--tinta);font-weight:700}
.shopify-section{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.shopify-section h2{max-width:16ch}
.shopify-section .lead{margin-top:20px}
.shopify-side{padding-top:6px}
@media(max-width:640px){.shopify-section{grid-template-columns:1fr;gap:20px}.shopify-mark.xl{width:60px}}

/* ---------- diferencia ---------- */
.voice{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linea);border-radius:6px;overflow:hidden;background:var(--papel)}
.voice>div{padding:clamp(22px,2.6vw,34px)}
.voice .si{border-right:1px solid var(--linea)}
.voice .no{background:rgba(11,36,48,.025)}
.voice ul{list-style:none;margin:16px 0 0;padding:0}
.voice li{position:relative;padding:9px 0 9px 28px;font-size:16px;line-height:1.45;border-top:1px solid var(--linea)}
.voice li:first-child{border-top:0}
.voice .si li{font-weight:500}
.voice .no li{color:var(--etiqueta)}
.voice .si li::before{
  content:"";position:absolute;left:2px;top:.95em;width:11px;height:6px;
  border-left:2px solid var(--celeste);border-bottom:2px solid var(--celeste);transform:rotate(-45deg);
}
.voice .no li::before{content:"";position:absolute;left:2px;top:1.12em;width:11px;height:2px;background:rgba(11,36,48,.28)}
.js-reveal .voice li::before{opacity:0;transition:opacity .35s ease}
.js-reveal .voice.is-visible li::before{opacity:1}
.js-reveal .voice.is-visible li:nth-child(1)::before{transition-delay:.35s}
.js-reveal .voice.is-visible li:nth-child(2)::before{transition-delay:.45s}
.js-reveal .voice.is-visible li:nth-child(3)::before{transition-delay:.55s}
.js-reveal .voice.is-visible li:nth-child(4)::before{transition-delay:.65s}
.js-reveal .voice.is-visible li:nth-child(5)::before{transition-delay:.75s}
@media(max-width:700px){.voice{grid-template-columns:1fr}.voice .si{border-right:0;border-bottom:1px solid var(--linea)}}

.manifesto{
  font-weight:900;font-size:clamp(30px,4.6vw,64px);letter-spacing:-.045em;line-height:1.02;
  margin:clamp(64px,8vw,112px) auto 0;max-width:16ch;text-align:center;
}

/* ---------- listas de comprobacion ---------- */
.check-list{list-style:none;margin:0 0 18px;padding:0;color:var(--tinta);font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.01em;max-width:44ch}
.check-list li{position:relative;padding:16px 0 16px 36px;border-bottom:1px solid var(--linea)}
.check-list li::before{
  content:"";position:absolute;left:0;top:1.05em;width:20px;height:20px;border-radius:50%;background:var(--vapor);
}
.check-list li::after{
  content:"";position:absolute;left:6px;top:calc(1.05em + 6px);width:8px;height:4px;
  border-left:2px solid var(--tinta);border-bottom:2px solid var(--tinta);transform:rotate(-45deg);
}
.js-reveal .check-list li::before{transform:scale(0);transition:transform .45s var(--e-out)}
.js-reveal .check-list li::after{opacity:0;transition:opacity .3s ease}
.js-reveal .check-list.is-visible li::before{transform:none}
.js-reveal .check-list.is-visible li::after{opacity:1}
.js-reveal .check-list.is-visible li:nth-child(2)::before,.js-reveal .check-list.is-visible li:nth-child(2)::after{transition-delay:.1s}
.js-reveal .check-list.is-visible li:nth-child(3)::before,.js-reveal .check-list.is-visible li:nth-child(3)::after{transition-delay:.2s}
.js-reveal .check-list.is-visible li:nth-child(4)::before,.js-reveal .check-list.is-visible li:nth-child(4)::after{transition-delay:.3s}
.js-reveal .check-list.is-visible li:nth-child(5)::before,.js-reveal .check-list.is-visible li:nth-child(5)::after{transition-delay:.4s}

/* ---------- rejillas y tarjetas ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--papel);border:1px solid var(--linea);border-radius:6px;padding:clamp(22px,2.4vw,32px)}
.card.blue{background:var(--vapor);border-color:transparent}
.card h3{font-size:22px;font-weight:900;letter-spacing:-.025em;margin-bottom:10px}
.card .t-lab{margin-bottom:6px}

/* ---------- revelado al hacer scroll ----------
   Cada tipo de elemento entra a su manera; los titulares salen de una mascara. */
.js-reveal [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--t-entrada) var(--e-out),transform var(--t-entrada) var(--e-out);
  transition-delay:var(--d,0ms);
}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none}
.js-reveal .sec-head[data-reveal],.js-reveal .problema-head[data-reveal]{opacity:1;transform:none}
.js-reveal .sec-head[data-reveal] h2,.js-reveal .problema-head[data-reveal] h2{
  clip-path:inset(0 0 100% 0);transform:translateY(.35em);
  transition:clip-path 1s var(--e-out),transform 1s var(--e-out);
}
.js-reveal .sec-head[data-reveal] :is(.lead,.eyebrow),.js-reveal .problema-head[data-reveal] .lead{
  opacity:0;transform:translateY(12px);transition:opacity .8s var(--e-out) .2s,transform .8s var(--e-out) .2s;
}
.js-reveal .sec-head.is-visible h2,.js-reveal .problema-head.is-visible h2{clip-path:inset(0 0 -.2em 0);transform:none}
.js-reveal .sec-head.is-visible :is(.lead,.eyebrow),.js-reveal .problema-head.is-visible .lead{opacity:1;transform:none}

/* ---------- preguntas, como una conversacion ----------
   La pregunta a la izquierda y la respuesta de Uplift a la derecha. Al entrar en
   pantalla aparece la pregunta, luego el indicador de "escribiendo" y despues la
   respuesta. Sin JavaScript o con movimiento reducido se ve todo de inicio. */
/* Titulo fijo a la izquierda y la conversacion en la columna derecha, como en la
   seccion del problema. */
#preguntas .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
#preguntas .sec-head{position:sticky;top:120px;margin:0}
@media(max-width:900px){#preguntas .wrap{grid-template-columns:1fr}#preguntas .sec-head{position:static}}
.faq-chat{margin:0;display:flex;flex-direction:column;gap:26px}
.par{display:flex;flex-direction:column;gap:10px;margin:0}
.msg{
  margin:0;max-width:min(80%,540px);padding:13px 18px 14px;border-radius:22px;
  font-size:clamp(16px,1.35vw,18px);line-height:1.42;letter-spacing:-.005em;text-wrap:pretty;
}
.msg-q{
  align-self:flex-start;background:var(--papel);border:1px solid var(--linea);border-bottom-left-radius:6px;
  font-weight:500;color:var(--tinta);
}
.msg-a-wrap{position:relative;margin:0;align-self:flex-end;display:flex;align-items:flex-end;gap:10px;max-width:min(88%,600px)}
.msg-a{max-width:none;background:var(--tinta);color:var(--hueso);border-bottom-right-radius:6px;font-weight:300}
.msg-avatar{width:30px;height:30px;flex:none;border-radius:7px}

/* Indicador de escribiendo: ocupa el sitio de la respuesta mientras esta invisible. */
.typing{
  position:absolute;right:40px;bottom:0;display:inline-flex;gap:5px;align-items:center;
  padding:14px 16px;border-radius:22px;border-bottom-right-radius:6px;background:var(--tinta);
  opacity:0;transform-origin:right bottom;pointer-events:none;
}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--bruma);opacity:.5}

.js-reveal .par[data-reveal]{opacity:1;transform:none}
.js-reveal .par .msg-q{
  opacity:0;transform:translateY(12px) scale(.96);transform-origin:left bottom;
  transition:opacity .5s var(--e-out) var(--d,0ms),transform .5s var(--e-out) var(--d,0ms);
}
.js-reveal .par .msg-a,.js-reveal .par .msg-avatar{
  opacity:0;transform:translateY(12px) scale(.96);transform-origin:right bottom;
  transition:opacity .5s var(--e-out) calc(var(--d,0ms) + 1.25s),transform .5s var(--e-out) calc(var(--d,0ms) + 1.25s);
}
.js-reveal .par .msg-avatar{transition-delay:calc(var(--d,0ms) + .35s)}
.js-reveal .par.is-visible .msg-q,
.js-reveal .par.is-visible .msg-a,
.js-reveal .par.is-visible .msg-avatar{opacity:1;transform:none}
.js-reveal .par.is-visible .typing{animation:escribiendo .95s var(--e-out) calc(var(--d,0ms) + .35s) both}
.js-reveal .par.is-visible .typing i{animation:punto .6s ease-in-out calc(var(--d,0ms) + .35s) 2}
.js-reveal .par.is-visible .typing i:nth-child(2){animation-delay:calc(var(--d,0ms) + .47s)}
.js-reveal .par.is-visible .typing i:nth-child(3){animation-delay:calc(var(--d,0ms) + .59s)}
@keyframes escribiendo{
  0%{opacity:0;transform:scale(.85)}
  25%{opacity:1;transform:none}
  88%{opacity:1;transform:none}
  100%{opacity:0;transform:scale(.9)}
}
@keyframes punto{50%{opacity:1;transform:translateY(-3px)}}
@media(max-width:560px){
  .msg{max-width:88%}
  .msg-a-wrap{max-width:94%}
  .msg-avatar{width:26px;height:26px}
  .typing{right:36px}
}
@media (prefers-reduced-motion: reduce){.typing{display:none}}

/* ---------- solicitud ---------- */
.cta-section{background:var(--tinta);color:var(--hueso);border-top:0}
.cta-section .eyebrow{color:var(--bruma)}
.cta-section h2{color:var(--hueso);max-width:18ch;margin:14px auto 0}
.cta-section .lead{color:var(--bruma)}
.cta-inner{text-align:center;max-width:780px;margin:0 auto}
.cta-inner .lead{margin:18px auto 32px}
.cta-section .btn-primary{background:var(--celeste);color:var(--tinta);border-color:var(--celeste)}

/* El formulario va sobre hueso: el embed de Typeform trae su propio tema claro
   y sobre el fondo tinta quedaria ilegible.
   Altura con `height`, nunca con `min-height`: el iframe de Typeform se dimensiona
   al 100% del contenedor, y un porcentaje no resuelve contra min-height, asi que
   el formulario colapsaba a 150px. */
.tf-embed{
  background:var(--hueso);border-radius:6px;overflow:hidden;text-align:left;
  height:clamp(540px, 68vh, 660px);
}
/* El embed `data-tf-live` se monta en modo auto-resize con height:auto, y el
   iframe se queda clavado en 150px. Forzamos la cadena entera a ocupar el alto
   del contenedor. Los !important son para ganar a los estilos que inyecta
   Typeform en tiempo de ejecucion. */
.tf-embed > div,
.tf-embed [data-tf-widget],
.tf-embed .tf-v1-widget{height:100% !important;width:100% !important}
.tf-embed iframe{height:100% !important;width:100% !important;display:block}
.cta-alt{margin:22px 0 0;font-size:15px;color:var(--bruma)}
.cta-alt a{color:var(--hueso);text-underline-offset:3px}
.cta-alt a:hover{color:#fff}

/* ---------- banner de cookies ---------- */
.btn-tinta{background:var(--tinta);color:var(--hueso);border-color:var(--tinta)}
.btn-tinta:hover{background:#123243;border-color:#123243}
/* Texto en tinta sobre celeste: 6.0:1. En hueso seria 2.5:1 y no valdria. */
.btn-celeste{background:var(--celeste);color:var(--tinta);border-color:var(--celeste)}
.btn-celeste:hover{background:#1E92CC;border-color:#1E92CC}

.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:0 clamp(12px,3vw,24px) clamp(12px,3vw,24px);
  display:flex;justify-content:center;pointer-events:none;
}
.cookie-banner[hidden]{display:none}
.cookie-card{
  pointer-events:auto;width:100%;max-width:720px;
  background:var(--hueso);border:1px solid var(--tinta);border-radius:6px;
  box-shadow:0 12px 40px rgba(11,36,48,.18);
  padding:24px 26px;
  /* Con las preferencias abiertas en pantallas bajas la tarjeta puede pasarse
     de alto y dejar los botones fuera de la ventana. */
  max-height:calc(100vh - 2 * clamp(12px,3vw,24px));
  max-height:calc(100dvh - 2 * clamp(12px,3vw,24px));
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(16px);opacity:0;
  transition:transform .45s var(--e-out),opacity .45s var(--e-out);
}
.cookie-banner.is-open .cookie-card{transform:none;opacity:1}

.cookie-text{font-size:15px;line-height:1.55;margin:8px 0 0;max-width:64ch;color:var(--texto)}

/* La lista de categorias scrollea antes que la tarjeta, para que los botones
   de decision sigan a la vista en pantallas bajas. */
.cookie-prefs{margin-top:18px;border-top:1px solid var(--linea);max-height:38vh;overflow-y:auto}
.cookie-opt{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--linea);cursor:pointer}
.cookie-opt:has(input:disabled){cursor:default}
.cookie-opt input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--celeste);cursor:pointer}
.cookie-opt input:disabled{cursor:default;opacity:.55}
.cookie-opt strong{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.cookie-opt em{display:block;font-style:normal;font-size:13.5px;color:var(--etiqueta);margin-top:2px;line-height:1.5}

.cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
/* Rechazar y aceptar comparten tamano y peso: misma prominencia en la primera capa. */
.cookie-actions .btn{flex:1 1 180px;min-width:150px}
.cookie-link{
  background:none;border:0;padding:8px 4px;min-height:44px;
  font-family:var(--sans);font-weight:500;font-size:14px;
  color:var(--tinta);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.cookie-link:hover{color:#12344A}
.cookie-link[hidden]{display:none}

.ico-galleta{width:17px;height:17px;flex:none;color:var(--celeste);vertical-align:-3px}
.ico-galleta.sm{width:14px;height:14px;vertical-align:-2px}
.cookie-titulo{display:inline-flex;align-items:center;gap:7px}

.foot-legal{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:flex-end}
.foot-cookies{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:13px;
  color:var(--etiqueta);text-decoration:underline;text-underline-offset:3px;
}
.foot-cookies:hover{color:var(--tinta)}
.cookie-text a{color:var(--tinta);text-underline-offset:2px}

/* ---------- paginas legales ---------- */
.legal{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px);border-top:0}
.legal-wrap{max-width:820px}
.legal-titulo{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.legal h1{font-size:clamp(32px,4.6vw,54px);font-weight:900;letter-spacing:-.04em;line-height:1.02}
.legal .lead{margin-top:20px}
.legal-fecha{margin-top:10px}
.legal h2{font-size:clamp(22px,2.6vw,30px);margin:48px 0 12px;letter-spacing:-.03em}
.legal h3{font-size:18px;margin:28px 0 8px}
.legal p{font-size:16.5px;line-height:1.65;color:var(--texto)}
.legal a{color:var(--tinta);text-underline-offset:3px}
.legal code{font-family:var(--sans);font-weight:500;font-size:.92em;background:var(--vapor);padding:1px 6px;border-radius:3px}
.legal .check-list{margin-top:12px;font-size:16.5px;font-weight:300;max-width:none}
.legal .cta-inline{margin-top:32px}

/* Contenedor scrollable: sin esto la tabla ancha empuja la pagina entera
   y aparece scroll horizontal en movil. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px;margin:14px 0 8px}
.legal-table th,.legal-table td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.legal-table thead th{
  font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--etiqueta);background:var(--vapor);
}
.legal-table td{color:var(--texto);line-height:1.55}
.legal-aviso{margin-top:44px;background:var(--vapor)}

@media(max-width:520px){
  .cookie-card{padding:20px}
  .cookie-actions .btn{flex:1 1 100%}
}

/* ---------- barra fija con el CTA (solo movil) ----------
   Aparece al dejar atras el hero y se esconde al llegar al formulario o si el
   banner de cookies esta abierto (motion.js). */
.cta-fija{display:none}
@media(max-width:760px){
  .cta-fija{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(242,237,228,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--linea);
    transform:translateY(110%);transition:transform var(--t-estado) var(--e-out);
  }
  .cta-fija.is-on{transform:none}
  .cta-fija .btn{width:100%}
}

/* ---------- pie ---------- */
footer{padding:48px 0 64px;border-top:1px solid var(--linea)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.foot-mail{text-decoration:none;color:var(--texto);font-weight:500}
.foot-mail:hover{color:var(--tinta)}

/* ---------- movimiento reducido ----------
   Estado final inmediato y sin transiciones; nada se anima, nada se esconde. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0ms !important}
  .js-reveal [data-reveal],.js-reveal .hero-in,.js-reveal .thesis .ln>span,
  .js-reveal .sec-head[data-reveal] h2,.js-reveal .problema-head[data-reveal] h2{opacity:1;transform:none;clip-path:none}
}