/* =========================================================
   AutoSeller — Sistema visual
   Basado en el manual de identidad (piv_autoseller.pdf)
   Primario  Turquesa      #69D1C9
   Base      Azul Conexión #0B0B3B
   Apoyo     Mint green    #08A385
   Apoyo     Steel blue    #4F7EB8
   Neutros   Blanco #FFFFFF · Negro #0E0E0E
   Tipografía: Helvetica Neue (Archivo como sustituto web)
   ========================================================= */

:root{
  --turq:#69D1C9;
  --turq-d:#3FBDB2;
  --mint:#08A385;
  --navy:#0B0B3B;
  --navy-2:#15154F;
  --steel:#4F7EB8;
  --ink:#0E0E0E;
  --white:#fff;

  --soft:#F4F5F7;
  --line:#E3E5EA;
  --line-d:rgba(255,255,255,.13);
  --muted:#5E6472;
  --muted-d:#9AA3B8;

  --grad:linear-gradient(96deg,#0B0B3B 0%,#0B6E77 52%,#69D1C9 100%);
  --grad-soft:linear-gradient(135deg,#69D1C9 0%,#08A385 45%,#0B0B3B 100%);

  --font:"Helvetica Neue","Archivo",Helvetica,Arial,sans-serif;

  --wrap:1280px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,10vw,140px);

  --r-sm:10px;
  --r:18px;
  --r-lg:26px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--white);
  color:var(--ink);
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block;height:auto}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--turq);color:var(--navy)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* Utilidades. Existen para que el HTML no necesite atributos style="…": con
   estilos en el marcado haría falta abrir la CSP con style-src 'unsafe-inline'. */
.u-center{text-align:center}
.u-pt0{padding-top:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--turq);outline-offset:3px;border-radius:4px}

/* ---------- TIPOGRAFÍA ---------- */
.h-display{
  font-size:clamp(2.6rem,7.4vw,6.1rem);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:800;
  text-wrap:balance;
}
.h-display .l{display:block;overflow:hidden}
.h-display em{font-style:normal;font-weight:300;color:var(--muted)}
.sec--dark .h-display em{color:var(--turq)}

.h2{
  font-size:clamp(1.9rem,4.1vw,3.4rem);
  line-height:1.03;
  letter-spacing:-.032em;
  font-weight:800;
  text-wrap:balance;
}
.h2 em{font-style:normal;font-weight:300;color:var(--mint)}
.sec--dark .h2 em,.cta .h2 em{color:var(--turq)}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:22px;
}
.eyebrow i{font-style:normal;font-weight:800;color:var(--turq-d)}
.sec--dark .eyebrow,.cta .eyebrow{color:var(--muted-d)}
.sec--dark .eyebrow i{color:var(--turq)}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--turq-d);
  box-shadow:0 0 0 4px rgba(105,209,201,.22);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(105,209,201,.22)}50%{box-shadow:0 0 0 7px rgba(105,209,201,0)}}

.lead{
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;
  color:var(--muted);max-width:46ch;font-weight:400;
  margin-top:clamp(22px,2.8vw,32px);
}
.body{color:var(--muted-d);margin-bottom:1.1em;max-width:52ch}
.sec:not(.sec--dark) .body{color:var(--muted)}

/* ---------- BOTONES ---------- */
.btn{
  --bh:56px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--bh);padding:0 30px;
  border-radius:var(--r-pill);
  font-weight:700;font-size:.94rem;letter-spacing:-.01em;
  background:var(--turq);color:var(--navy);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s;
  position:relative;overflow:hidden;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(11,11,59,.35)}
.btn:active{transform:translateY(0)}
.btn--sm{--bh:44px;padding:0 22px;font-size:.86rem}
.btn--lg{--bh:62px;padding:0 36px;font-size:1rem}
.btn--block{display:flex;width:100%}

.btn--grad{background:var(--grad);color:#fff;background-size:160% 100%;background-position:0% 0%}
.btn--grad:hover{background-position:100% 0%;box-shadow:0 16px 40px -12px rgba(8,163,133,.5)}

.btn--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{background:var(--navy);color:#fff;box-shadow:none}
.sec--dark .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px var(--line-d)}
.sec--dark .btn--ghost:hover{background:#fff;color:var(--navy)}

.btn--wa{background:var(--turq);color:var(--navy)}
.btn__wa{width:20px;height:20px;fill:currentColor;flex:none}
.btn__arrow{transition:transform .35s var(--ease);display:inline-block}
.btn:hover .btn__arrow{transform:translateX(5px)}

.iconbtn{
  width:46px;height:46px;flex:none;
  border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--line);
  color:var(--navy);font-size:1.05rem;
  transition:.3s var(--ease);
}
.iconbtn:hover{background:var(--navy);color:#fff;box-shadow:none;transform:translateY(-2px)}

.link{
  color:var(--mint);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  transition:color .2s;
}
.link:hover{color:var(--navy)}

/* ---------- NAV ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s;
}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--pad);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav.is-stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav__logo{display:block;flex:none}
.nav__logo-img{height:26px;width:auto}

.nav__links{display:flex;gap:34px}
.nav__links a{
  font-size:.9rem;font-weight:500;color:var(--navy);
  position:relative;padding:6px 0;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--turq-d);transition:width .35s var(--ease);
}
.nav__links a:hover::after{width:100%}

.nav__act{display:flex;align-items:center;gap:14px}

.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:.35s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.drawer{
  background:#fff;border-top:1px solid var(--line);
  padding:20px var(--pad) 32px;
}
.drawer__links{display:flex;flex-direction:column;margin-bottom:20px}
.drawer__links a{
  display:flex;align-items:center;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--navy);
}
.drawer__links i{font-style:normal;font-size:.7rem;font-weight:800;color:var(--turq-d);letter-spacing:.12em}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(28px,5vw,60px));
  overflow:hidden;
  /* Fondo gris muy suave, para que el robot blanco no flote en el vacío. */
  background:
    radial-gradient(70% 90% at 78% 40%,#FFFFFF 0%,rgba(255,255,255,0) 60%),
    linear-gradient(155deg,#F2F3F6 0%,#FAFAFB 46%,#EDEFF3 100%);
}
.hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(20px,2.5vw,40px);align-items:end;
}
.hero__copy{padding-block:clamp(10px,3vw,40px) clamp(40px,6vw,80px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

.hero__stats{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);
  margin-top:clamp(36px,5vw,60px);
  padding-top:26px;border-top:1px solid var(--line);
}
.hero__stats b{
  display:block;font-size:clamp(1.35rem,2.2vw,1.85rem);
  font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1.1;
}
.hero__stats span{font-size:.82rem;color:var(--muted)}

/* El robot se apoya en el borde inferior del hero y sangra por la derecha:
   queda recortado por el `overflow:hidden` del hero, como en la referencia. */
.hero__art{
  position:relative;
  display:flex;justify-content:flex-end;align-items:flex-end;
  align-self:end;
  /* Sangra hasta el borde real de la ventana: el padding del contenedor
     MÁS el margen que queda fuera del .wrap centrado en pantallas anchas.
     Sin esa segunda parte, queda un hueco a la derecha del robot. */
  margin-right:calc(-1 * (var(--pad) + max(0px,(100vw - var(--wrap)) / 2)));
}
.hero__art picture{
  display:block;flex:none;max-width:none;
  /* Tamaño propio del robot, independiente de cuánto sangre el contenedor. */
  width:clamp(430px,48vw,760px);
  margin-right:-3%;   /* la mano queda apenas cortada por el borde */
}
.hero__art img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(-16px 26px 40px rgba(11,11,59,.13));
}

/* marquee */
.marquee{
  position:relative;z-index:1;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--white);
  overflow:hidden;padding:16px 0;
}
.marquee__t{display:flex;align-items:center;gap:28px;width:max-content;animation:slide 75s linear infinite}
.marquee:hover .marquee__t{animation-play-state:paused}
.marquee__t span{
  font-size:.8rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--navy);white-space:nowrap;
}
.marquee__t i{width:6px;height:6px;border-radius:50%;background:var(--turq);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- SECCIONES ---------- */
.sec{padding-block:var(--sec-y);position:relative}
.sec--soft{background:var(--soft)}
.sec--rule{border-top:1px solid var(--line)}
.sec--dark{background:var(--navy);color:#fff}
.sec--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 82% 8%,rgba(8,163,133,.30),transparent 62%),
             radial-gradient(50% 40% at 6% 96%,rgba(105,209,201,.16),transparent 65%);
}
.sec--dark>*{position:relative;z-index:1}

.sec__head{max-width:62ch;margin-bottom:clamp(40px,6vw,72px)}
.sec__sub{margin-top:22px;color:var(--muted);font-size:1.02rem;max-width:56ch}
.sec--dark .sec__sub{color:var(--muted-d)}
.sec--dark .sec__sub b{color:#fff}

/* ---------- VIDEO ---------- */
.video{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);
  background:var(--grad);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
  isolation:isolate;
}
.video::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:radial-gradient(58% 58% at 50% 50%,rgba(11,11,59,.34),rgba(11,11,59,.12) 70%);
  pointer-events:none;
  transition:opacity .6s var(--ease);
}

/* ---- Portada del video: el frame de inicio traído de YouTube ----
   Queda POR ENCIMA del iframe (z-index 2 > 1) para tapar el destello
   negro mientras YouTube bufferea; se desvanece recién cuando el video
   arranca de verdad (clase is-ready puesta desde el JS). */
.video__poster{
  position:absolute;inset:0;z-index:2;overflow:hidden;
  transition:opacity .6s var(--ease);
}
.video__thumb{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

.video__btn{
  position:relative;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  transition:opacity .5s var(--ease);
}
.video__play{
  width:clamp(74px,9vw,104px);aspect-ratio:1;border-radius:50%;
  background:#fff;display:grid;place-items:center;
  box-shadow:0 20px 50px -14px rgba(0,0,0,.5);
  transition:transform .45s var(--ease);
}
.video__play svg{width:38%;fill:var(--navy);margin-left:8%}
.video__btn:hover .video__play{transform:scale(1.08)}
.video__play::before{
  content:"";position:absolute;width:clamp(74px,9vw,104px);aspect-ratio:1;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.6);
  animation:ring 2.6s var(--ease) infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.video__label{
  font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
/* Cuando el video ya está reproduciéndose, la portada, el botón y la
   viñeta se funden y dejan pasar el clic al reproductor. */
.video.is-ready .video__poster,
.video.is-ready .video__btn,
.video.is-ready::after{opacity:0;pointer-events:none}

/* ---------- MURO DE TESTIMONIOS ---------- */
.wall{
  display:flex;flex-direction:column;gap:20px;
  margin-bottom:clamp(36px,5vw,58px);
  /* Desvanece los bordes para que las tarjetas no se corten de golpe. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.wall__row{overflow:hidden}
.wall__track{
  display:flex;gap:20px;width:max-content;padding:4px 0;
  animation:wall 52s linear infinite;
}
.wall__row--rev .wall__track{animation-direction:reverse}
/* Se frena al pasar el mouse, para poder leer con calma. */
.wall:hover .wall__track{animation-play-state:paused}
@keyframes wall{to{transform:translateX(-50%)}}

.tcard{
  flex:0 0 min(400px,80vw);
  background:var(--soft);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);
  display:flex;flex-direction:column;gap:18px;
  min-height:300px;
  border:1px solid transparent;
  transition:.4s var(--ease);
  position:relative;overflow:hidden;
}
.tcard::before{
  content:"”";
  position:absolute;top:-34px;right:14px;
  font-size:9rem;line-height:1;font-weight:800;
  color:var(--turq);opacity:.16;pointer-events:none;
}
.tcard:hover{border-color:var(--turq);transform:translateY(-4px);background:#fff;box-shadow:0 24px 50px -30px rgba(11,11,59,.35)}

.tcard__stars{color:var(--turq-d);font-size:.9rem;letter-spacing:.16em}
.tcard__q{
  font-size:1.06rem;line-height:1.5;letter-spacing:-.012em;
  font-weight:500;color:var(--navy);flex:1;
}
.tcard footer{
  display:flex;align-items:center;gap:13px;
  padding-top:20px;border-top:1px solid var(--line);
}
.tcard__av{
  flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--grad-soft);color:#fff;
  display:grid;place-items:center;
  font-size:.8rem;font-weight:800;letter-spacing:.02em;
}
.tcard__id{display:flex;flex-direction:column;gap:1px;min-width:0}
.tcard__id b{font-size:.94rem;font-weight:700;color:var(--navy)}
.tcard__id em{font-style:normal;font-size:.8rem;color:var(--muted)}

/* ---------- COMPARATIVA ---------- */
.vs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(14px,2vw,28px);
  margin-bottom:clamp(44px,6vw,72px);
}
.vs__head{
  padding:20px 26px;border-radius:var(--r) var(--r) 0 0;
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;min-height:74px;
}
.vs__head--a{background:var(--soft);color:var(--muted)}
.vs__head--b{background:var(--navy);color:#fff}
.vs__head--b img{height:22px;width:auto}

.vs__row{display:contents}
.vs__a,.vs__b{
  display:flex;gap:14px;align-items:flex-start;
  padding:22px 26px;font-size:.95rem;line-height:1.45;
  border-bottom:1px solid var(--line);
}
.vs__a{background:var(--soft);color:var(--muted)}
.vs__b{background:var(--navy);color:#fff;border-bottom-color:rgba(255,255,255,.09)}
.vs__row:last-child .vs__a{border-radius:0 0 var(--r) var(--r)}
.vs__row:last-child .vs__b{border-radius:0 0 var(--r) var(--r)}

.mk{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:.66rem;font-weight:800;margin-top:1px;
}
.mk--x{background:#E5E7EC;color:#8A91A1}
.mk--v{background:var(--turq);color:var(--navy)}

/* ---------- CHATBOT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.split__art{display:flex;justify-content:center}

/* Aire entre el título y el texto que le sigue. */
.split__copy .h2{margin-bottom:clamp(26px,3.4vw,40px)}
.split__copy .body{margin-bottom:1.35em}
.split__copy .body:last-child{margin-bottom:0}

/* ---- Teléfono: flujo de chatbot de WhatsApp ---- */
.wa{
  --wa-bg:#EFE7DE;      /* fondo de WhatsApp */
  --wa-in:#FFFFFF;      /* burbuja del bot   */
  --wa-out:#D9FDD3;     /* burbuja del cliente */
  position:relative;
  width:100%;max-width:360px;aspect-ratio:9/18.5;
  display:flex;flex-direction:column;
  background:var(--wa-bg);
  border-radius:34px;overflow:hidden;
  border:8px solid #0A0A0A;
  box-shadow:0 50px 100px -35px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);
}

.wa__bar{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:12px 14px;background:#F7F5F3;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.wa__back{color:#8B9199;font-size:1.3rem;line-height:1;flex:none}
.wa__pic{width:30px;height:30px;border-radius:50%;background:var(--grad-soft);flex:none}
.wa__who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.wa__who b{font-size:.7rem;font-weight:700;color:#111;letter-spacing:-.01em}
.wa__who i{font-style:normal;font-size:.62rem;color:#8B9199}

.wa__body{
  flex:1;overflow:hidden;
  padding:12px 10px;
  display:flex;flex-direction:column;gap:7px;
  scroll-behavior:smooth;
}
.wa__day{
  align-self:center;background:#fff;color:#7C838C;
  padding:3px 11px;border-radius:7px;font-size:.58rem;font-weight:600;
  box-shadow:0 1px 1px rgba(0,0,0,.08);flex:none;
}

/* Burbujas */
.wa__msg{
  max-width:85%;padding:6px 9px 5px;border-radius:9px;
  font-size:.68rem;line-height:1.35;color:#111B21;
  box-shadow:0 1px 1px rgba(0,0,0,.1);
  position:relative;flex:none;
  animation:waPop .32s var(--ease) both;
}
@keyframes waPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.wa__msg--in{background:var(--wa-in);align-self:flex-start;border-top-left-radius:2px}
.wa__msg--out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:2px}
.wa__time{
  display:block;text-align:right;
  font-size:.5rem;color:#8B9199;margin-top:2px;
}
.wa__msg--out .wa__time::after{content:" ✓✓";color:#53BDEB}

/* Cita del mensaje del bot dentro de la respuesta del cliente */
.wa__quote{
  background:rgba(0,0,0,.05);border-left:3px solid var(--mint);
  border-radius:5px;padding:4px 7px;margin-bottom:3px;
  font-size:.58rem;line-height:1.3;
}
.wa__quote b{display:block;color:var(--mint);font-size:.55rem;margin-bottom:1px}
.wa__quote span{color:#5A6169;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Pie del mensaje: la lista interactiva de WhatsApp */
.wa__list{
  margin-top:5px;padding-top:5px;border-top:1px solid rgba(0,0,0,.09);
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:.63rem;font-weight:600;color:#0B7A6E;
}

/* Indicador de "escribiendo" */
.wa__typing{
  align-self:flex-start;background:var(--wa-in);
  padding:9px 11px;border-radius:9px;border-top-left-radius:2px;
  display:flex;gap:3px;box-shadow:0 1px 1px rgba(0,0,0,.1);flex:none;
  animation:waPop .3s var(--ease) both;
}
.wa__typing i{width:5px;height:5px;border-radius:50%;background:#9AA1A9;animation:blink 1.3s infinite}
.wa__typing i:nth-child(2){animation-delay:.18s}
.wa__typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* Hoja inferior con las opciones */
.wa__sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:#fff;border-radius:14px 14px 0 0;
  padding:12px 0 10px;
  box-shadow:0 -12px 40px rgba(0,0,0,.28);
  transform:translateY(102%);
  transition:transform .45s var(--ease);
}
.wa.is-sheet .wa__sheet{transform:translateY(0)}
.wa__sheet-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px 10px;border-bottom:1px solid #ECEFF1;
}
.wa__sheet-h b{font-size:.7rem;font-weight:600;color:#111}
.wa__sheet-x{color:#9AA1A9;font-size:.7rem}
.wa__sheet-s{padding:9px 14px 4px;font-size:.62rem;color:#7C838C}
.wa__opts{list-style:none}
.wa__opts li{
  padding:11px 14px;font-size:.7rem;color:#111;
  border-bottom:1px solid #F2F4F5;
  display:flex;align-items:center;gap:7px;
  transition:background .2s;
}
.wa__opts li::before{
  content:"";width:11px;height:11px;border-radius:3px;
  background:var(--mint);flex:none;opacity:.85;
}
/* La opción que el "cliente" toca */
.wa__opts li.is-tap{background:#E8F6F4}
.wa__sheet-f{padding:9px 14px 0;font-size:.55rem;color:#A8AEB5;text-align:center}

.wa__foot{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:8px 11px;background:#F7F5F3;
  border-top:1px solid rgba(0,0,0,.07);
}
.wa__plus{color:#8B9199;font-size:1rem;flex:none}
.wa__field{flex:1;height:26px;border-radius:13px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.07)}
.wa__mic{font-size:.75rem;flex:none;filter:grayscale(1);opacity:.55}

/* ---------- KANBAN ---------- */
.kanban{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-bottom:clamp(44px,6vw,72px);
}
.kan{background:var(--soft);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px}
.kan h3{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;
}
.kan h3 b{
  background:#fff;color:var(--navy);border-radius:var(--r-pill);
  padding:2px 9px;font-size:.72rem;letter-spacing:0;
}
.kan--win{background:var(--navy)}
.kan--win h3{color:var(--turq)}
.kan--win h3 b{background:var(--turq);color:var(--navy)}

.kan__c{
  background:#fff;border-radius:var(--r-sm);padding:13px;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:1px 11px;align-items:center;
  box-shadow:0 2px 8px -4px rgba(11,11,59,.14);
  transition:.35s var(--ease);
}
.kan__c:hover{transform:translateX(3px);box-shadow:0 6px 18px -8px rgba(11,11,59,.28)}
.kan__c .av{grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--grad-soft)}
.kan__c i{font-style:normal;font-size:.85rem;font-weight:700;color:var(--navy)}
.kan__c em{font-style:normal;font-size:.75rem;color:var(--muted)}

/* ---------- GRID LIST ---------- */
.grid-list{margin-bottom:clamp(40px,5vw,64px)}
.grid-list__t{
  font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:24px;
}
.grid-list ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:0 clamp(20px,3vw,44px)}
.grid-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:17px 0;border-bottom:1px solid var(--line);
  font-size:.98rem;font-weight:500;color:var(--navy);
}
.grid-list li::before{
  content:"✓";flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--turq);color:var(--navy);
  display:grid;place-items:center;font-size:.64rem;font-weight:800;margin-top:2px;
}

/* ---------- ANTES / DESPUÉS: los dos lados, fila por fila ---------- */
.shift{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px clamp(10px,1.6vw,22px);
  align-items:stretch;
}
.shift__heads{display:contents}
.shift__h{
  font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  padding:0 clamp(16px,2vw,26px) 6px;
}
.shift__h--a{color:var(--muted)}
.shift__h--b{color:var(--mint)}

.shift__row{display:contents}

.shift__a,.shift__b{
  display:flex;align-items:center;gap:13px;
  padding:clamp(16px,2vw,22px) clamp(16px,2vw,26px);
  border-radius:var(--r);
  font-size:clamp(.95rem,1.35vw,1.1rem);font-weight:500;letter-spacing:-.015em;
  transition:background .55s var(--ease),color .55s var(--ease),
             transform .55s var(--ease),box-shadow .55s var(--ease);
}
.shift .mk{margin-top:0}
.shift__t{position:relative}

/* Lado SIN: apagado */
.shift__a{background:var(--soft);color:#8A91A1}
/* La línea que tacha el problema, se dibuja sola. */
.shift__t::after{
  content:"";position:absolute;left:0;top:52%;height:1.5px;width:0;
  background:currentColor;opacity:.65;
  transition:width .5s var(--ease);
}

/* Lado CON: encendido */
.shift__b{
  background:var(--navy);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* En sección oscura las tarjetas navy se fundirían con el fondo:
   el encabezado "Sin" se aclara y la tarjeta CON en reposo se eleva
   sobre una superficie levemente más clara con borde. */
.sec--dark .shift__h--a{color:var(--muted-d)}
.sec--dark .shift__b{
  background:#15154F;
  box-shadow:inset 0 0 0 1px var(--line-d);
}

/* Flecha que conecta el par */
.shift__arrow{
  display:grid;place-items:center;
  width:clamp(30px,3.4vw,46px);
  position:relative;
}
.shift__arrow i{
  width:8px;height:8px;border-radius:50%;
  background:#D3D7DF;
  transition:background .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}

/* ---- Fila activa: la transformación ---- */
.shift__row.is-on .shift__a{background:#ECEEF2;color:#A4AAB6}
.shift__row.is-on .shift__a .shift__t::after{width:100%}
.shift__row.is-on .shift__a .mk{background:#D8DBE2;color:#A4AAB6}

.shift__row.is-on .shift__b{
  background:var(--grad);
  transform:translateX(6px);
  box-shadow:0 18px 40px -18px rgba(8,163,133,.75);
}
.shift__row.is-on .shift__b .mk{background:#fff;color:var(--mint)}

.shift__row.is-on .shift__arrow i{
  background:var(--turq);
  transform:scale(1.5);
  box-shadow:0 0 0 6px rgba(105,209,201,.2);
}
/* Estela que viaja de un lado al otro */
.shift__row.is-on .shift__arrow::after{
  content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--turq));
  transform-origin:left;
  animation:shiftGo .75s var(--ease) both;
}
@keyframes shiftGo{from{transform:scaleX(0);opacity:0}60%{opacity:1}to{transform:scaleX(1);opacity:0}}

/* ---------- INSTALACIÓN: tarjeta interactiva ---------- */
.inst{
  display:grid;grid-template-columns:1fr;
  gap:clamp(24px,3vw,44px);align-items:start;
  max-width:820px;
}
.inst__steps{display:flex;flex-direction:column;gap:8px}

.istep{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  text-align:left;padding:18px 20px;
  border-radius:var(--r);
  background:transparent;
  transition:background .4s var(--ease);
  overflow:hidden;
}
.istep:hover{background:rgba(11,11,59,.04)}
.istep[aria-selected="true"]{background:#fff;box-shadow:0 14px 34px -20px rgba(11,11,59,.4)}

.istep__n{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;
  color:#B6BCC8;padding-top:3px;
  transition:color .4s var(--ease);
}
.istep[aria-selected="true"] .istep__n{color:var(--turq-d)}

.istep__c{display:flex;flex-direction:column;gap:5px;min-width:0}
.istep__c b{
  font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--navy);
}
/* Todas las descripciones con el mismo gris legible (5.4:1). Atenuar las
   inactivas daba 2.35:1 y no pasaba AA: el paso activo ya se distingue por
   la tarjeta blanca, el número turquesa y la barra lateral. */
.istep__c em{
  font-style:normal;font-size:.9rem;line-height:1.5;
  color:var(--muted);
}

/* Barra de progreso del paso activo */
.istep__bar{
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--line);
  border-radius:3px;overflow:hidden;
}
.istep__bar i{
  display:block;width:100%;height:0;background:var(--grad-soft);
  transition:height .5s var(--ease);
}
.istep[aria-selected="true"] .istep__bar i{height:100%}

.inst__steps .btn{margin-top:16px}

/* ---------- PLANES ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,28px);align-items:start}
.plan{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-d);border-radius:var(--r-lg);
  padding:clamp(28px,3.2vw,44px);
  display:flex;flex-direction:column;gap:28px;position:relative;
  transition:.45s var(--ease);
}
.plan:hover{border-color:rgba(105,209,201,.4)}
.plan h3{font-size:1.45rem;font-weight:800;letter-spacing:-.025em;margin-bottom:10px}
.plan header p{color:var(--muted-d);font-size:.94rem;max-width:40ch}
.plan__price{margin-top:26px;padding-top:24px;border-top:1px solid var(--line-d);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.plan__price b{font-size:clamp(2.2rem,3.6vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.plan__price span{font-size:.84rem;color:var(--muted-d)}

.plan--pro{
  background:linear-gradient(170deg,rgba(8,163,133,.16),rgba(11,11,59,0) 55%);
  border-color:rgba(105,209,201,.35);
  box-shadow:0 40px 90px -50px rgba(8,163,133,.7);
}
.plan--pro .plan__price b{color:var(--turq)}
.plan__tag{
  position:absolute;top:-13px;left:clamp(28px,3.2vw,44px);
  background:var(--turq);color:var(--navy);
  padding:5px 15px;border-radius:var(--r-pill);
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}

.plan__list{list-style:none;display:flex;flex-direction:column;flex:1}
/* `display:block` (y no flex): así la etiqueta «ILIMITADO» fluye pegada al
   final del texto. Con flex quedaba como ítem hermano, flotando arriba a la
   derecha y separada de la frase a la que pertenece. */
.plan__list li{
  position:relative;padding:12px 0 12px 29px;
  border-bottom:1px solid var(--line-d);
  font-size:.92rem;line-height:1.5;color:#DDE2EC;
}
.plan__list li::before{
  content:"✓";position:absolute;left:0;top:15px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--muted-d);
  display:grid;place-items:center;font-size:.58rem;font-weight:800;
}
.plan__list li i{
  font-style:normal;color:var(--muted-d);font-size:.84rem;
  white-space:nowrap;   /* la etiqueta nunca se parte en dos líneas */
}
.plan__list--pro li::before{background:var(--turq);color:var(--navy)}
.plan__list--pro li i{
  color:var(--turq);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.72rem;
}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:26px 46px 26px 0;position:relative;
  font-size:clamp(1.02rem,1.7vw,1.28rem);font-weight:600;letter-spacing:-.02em;
  color:var(--navy);transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mint)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:13px;height:13px;
  border-right:2px solid var(--turq-d);border-bottom:2px solid var(--turq-d);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq__a{padding:0 8% 30px 0;color:var(--muted);animation:fadeUp .45s var(--ease)}
.faq__a p+p{margin-top:1em}
.faq__a a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
@keyframes fadeUp{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- CTA FINAL ---------- */
.cta{
  background:var(--navy);color:#fff;
  padding-block:clamp(80px,11vw,150px);
  position:relative;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(65% 80% at 50% 120%,rgba(8,163,133,.5),transparent 62%);
}
.cta__in{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__mono{width:64px;margin-bottom:34px;opacity:.9}
.cta p{color:var(--muted-d);margin-top:18px;font-size:1.08rem}
.cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px}

/* ---------- FOOTER ---------- */
.foot{
  background:var(--ink);color:#fff;
  padding-block:clamp(56px,7vw,88px);
  position:relative;overflow:hidden;
}
/* Filo superior con el gradiente de marca */
.foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad);
}
.foot .wrap{position:relative;z-index:1}

/* Monograma como marca de agua */
.foot__mark{
  position:absolute;right:-4%;bottom:-22%;
  width:min(38%,380px);opacity:.035;
  pointer-events:none;z-index:0;
}

.foot__top{
  display:grid;grid-template-columns:1.4fr .8fr .8fr;
  gap:clamp(32px,4vw,64px);align-items:start;
  padding-bottom:clamp(36px,4.5vw,56px);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.foot__logo img{height:32px;width:auto}
.foot__tag{
  font-size:clamp(1.45rem,2.6vw,2.1rem);
  font-weight:300;line-height:1.15;letter-spacing:-.035em;
}
.foot__tag em{font-style:normal;font-weight:800;color:var(--turq)}

/* Redes: ícono con borde sutil que al pasar el mouse toma el gradiente. */
.foot__social{display:flex;gap:12px}
.foot__soc{
  width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;color:#A7ADBC;
  box-shadow:inset 0 0 0 1px var(--line-d);
  transition:color .28s var(--ease),background .28s var(--ease),
             box-shadow .28s var(--ease),transform .28s var(--ease);
}
.foot__soc svg{
  width:21px;height:21px;
  fill:currentColor;
}
.foot__soc:hover{
  color:#fff;background:var(--grad);
  box-shadow:0 12px 26px -12px rgba(8,163,133,.7);
  transform:translateY(-2px);
}

.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.foot__h{
  font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turq);margin-bottom:5px;
}
.foot__col a,.foot__lnk{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.93rem;color:#A7ADBC;
  transition:color .28s var(--ease),transform .28s var(--ease);
  text-align:left;
}
.foot__col a:hover,.foot__lnk:hover{color:var(--turq);transform:translateX(4px)}

/* Punto de "en línea" al lado de WhatsApp */
.foot__dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--turq);
  box-shadow:0 0 0 3px rgba(105,209,201,.22);
  animation:pulse 2.6s var(--ease) infinite;
}

.foot__legal{padding-top:34px;max-width:80ch}
.foot__legal-t{
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turq);margin-bottom:16px;
}
.foot__legal p{font-size:.8rem;line-height:1.65;color:#787E8D}
.foot__legal p+p{margin-top:10px}
.foot__legal a{color:#A7ADBC;text-decoration:underline;text-underline-offset:2px}

/* =========================================================
   PÁGINAS LEGALES (terminos.html · privacidad.html)
   ========================================================= */
.legal{padding-top:calc(var(--nav-h) + clamp(40px,6vw,80px));padding-bottom:var(--sec-y)}
.legal__wrap{max-width:820px;margin-inline:auto;padding-inline:var(--pad)}

.legal h1{
  font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;margin-bottom:16px;
}
.legal__date{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:clamp(28px,3.4vw,44px);
  border-bottom:1px solid var(--line);margin-bottom:clamp(28px,3.4vw,44px);
}
.legal h2{
  font-size:clamp(1.15rem,2vw,1.45rem);font-weight:700;letter-spacing:-.025em;
  color:var(--navy);margin:clamp(34px,4vw,50px) 0 14px;
  display:flex;gap:12px;align-items:baseline;
}
.legal h2 span{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;
  color:var(--turq-d);flex:none;
}
.legal p{color:var(--muted);margin-bottom:1em;line-height:1.7}
.legal ul{list-style:none;margin:0 0 1.2em}
.legal li{
  color:var(--muted);line-height:1.7;padding-left:22px;position:relative;margin-bottom:8px;
}
.legal li::before{
  content:"";position:absolute;left:0;top:11px;
  width:7px;height:7px;border-radius:50%;background:var(--turq);
}
.legal a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--navy);font-weight:700}

/* Nombres técnicos (as_consent, utm_source, dominios) dentro del texto legal. */
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--soft);color:var(--navy);
  padding:1px 6px;border-radius:5px;border:1px solid var(--line);
}

/* Botón que se lee como enlace: reabre el aviso de consentimiento. */
.legal__link{
  color:var(--mint);text-decoration:underline;text-underline-offset:3px;
  font:inherit;font-weight:700;cursor:pointer;
  background:none;border:0;padding:0;
}
.legal__link:hover{color:var(--navy)}

/* Marcador de dato pendiente */
.legal mark{
  background:rgba(105,209,201,.22);color:var(--navy);
  padding:1px 7px;border-radius:5px;font-weight:700;font-size:.92em;
}

.legal__back{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(40px,5vw,64px);
  font-size:.9rem;font-weight:700;color:var(--navy);
  transition:gap .3s var(--ease);
}
.legal__back:hover{gap:14px}

/* ---------- ROBOT FLOTANTE (WhatsApp) ---------- */
.bot{
  position:fixed;z-index:90;
  right:clamp(10px,2vw,26px);
  bottom:clamp(10px,2.4vw,30px);
  width:clamp(104px,13vw,168px);
  display:block;
  filter:drop-shadow(0 18px 26px rgba(11,11,59,.28));
  /* Oculto por defecto: el JS lo muestra cuando el robot del hero se va. */
  opacity:0;visibility:hidden;
  transform:translateY(26px) scale(.86);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
.bot.is-on{opacity:1;visibility:visible;transform:none}
/* Con un modal abierto se retira: si no, flota por encima del formulario. */
.bot.is-hidden{opacity:0;visibility:hidden;transform:translateY(20px) scale(.9)}
.bot img{width:100%;height:auto;display:block}

/* Flota apenas, para que se note que está vivo. */
.bot.is-on img{animation:botFloat 4.5s ease-in-out infinite}
@keyframes botFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.bot:hover{transform:scale(1.06) translateY(-3px)}
.bot:active{transform:scale(.98)}

/* Halo turquesa que late detrás */
.bot::before{
  content:"";position:absolute;inset:14% 6% 4% 6%;z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(105,209,201,.45),transparent 68%);
  filter:blur(16px);
  animation:botGlow 3.2s var(--ease) infinite;
}
@keyframes botGlow{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:.9;transform:scale(1.05)}}

/* ---------- BANNER DE CONSENTIMIENTO (LGPD) ----------
   Lo inyecta el JS al cargar, sólo si todavía no hay una decisión guardada.
   z-index 150: por encima de la barra de navegación (100) y del robot (90),
   por debajo de los modales (200), que sí son bloqueantes. */
.cookie{
  position:fixed;z-index:150;
  left:var(--pad);right:var(--pad);bottom:clamp(14px,3vw,28px);
  display:flex;justify-content:center;
  pointer-events:none;                /* la franja no tapa el resto de la página */
}
.cookie__in{
  pointer-events:auto;
  width:min(880px,100%);
  display:flex;align-items:center;gap:clamp(14px,3vw,30px);flex-wrap:wrap;
  background:var(--navy-2);color:#fff;
  border:1px solid var(--line-d);border-radius:var(--r);
  padding:clamp(18px,3vw,24px);
  box-shadow:0 26px 64px -22px rgba(0,0,0,.7);
  animation:cookie-in .45s var(--ease) both;
}
@keyframes cookie-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.cookie__txt{flex:1 1 320px;min-width:0}
.cookie__t{font-weight:800;font-size:.95rem;margin-bottom:6px}
.cookie__d{font-size:.84rem;line-height:1.6;color:var(--muted-d)}
.cookie__d a{color:var(--turq);text-decoration:underline;text-underline-offset:2px}

/* Los dos botones pesan lo mismo: la LGPD pide que rechazar sea tan fácil
   como aceptar, así que comparten tamaño y jerarquía. */
.cookie__act{display:flex;gap:10px;flex:0 0 auto}
.cookie__btn{white-space:nowrap}
.cookie__btn--no{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--line-d)}
.cookie__btn--no:hover{background:rgba(255,255,255,.1)}
.cookie__btn--yes{background:var(--turq);color:var(--navy)}

/* Mientras se decide, el robot flotante se retira para no pisar el banner. */
body.cookie-open .bot{opacity:0;visibility:hidden;transform:translateY(20px) scale(.9)}

@media (max-width:600px){
  .cookie__act{width:100%}
  .cookie__btn{flex:1 1 0;padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  .cookie__in{animation:none}
}

/* ---------- MODALES ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
/* `display:grid` pisa el atributo hidden — hay que reponerlo explícitamente. */
.modal[hidden]{display:none}
.modal__back{position:absolute;inset:0;background:rgba(11,11,59,.62);backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__box{
  position:relative;z-index:1;
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px);
  box-shadow:0 50px 110px -40px rgba(11,11,59,.6);
  animation:pop .45s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.modal__x{
  position:absolute;top:16px;right:16px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  transition:.25s;
}
.modal__x:hover{background:var(--soft);color:var(--navy)}
.modal__t{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.modal__t em{font-style:normal;font-weight:300;color:var(--mint)}
.modal__s{margin-top:14px;color:var(--muted);font-size:.95rem}

/* ---------- FORMULARIOS ---------- */
.form{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:7px}
.form label>span{font-size:.8rem;font-weight:700;color:var(--navy)}
.form input{
  height:54px;padding:0 18px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:#fff;
  transition:border-color .25s,box-shadow .25s;
  width:100%;
}
.form input::placeholder{color:#AFB5C2}
.form input:focus{outline:0;border-color:var(--turq);box-shadow:0 0 0 4px rgba(105,209,201,.2)}
.form input[aria-invalid="true"]{border-color:#E0574F}
.err{font-style:normal;font-size:.76rem;color:#E0574F;min-height:0;display:none}
.err.show{display:block}

/* Honeypot: fuera de pantalla en vez de display:none, que los bots ya detectan. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* --- Selector de país (intl-tel-input): bandera + DDI en un card aparte --- */
/* El selector de país y el input se muestran como dos cajas separadas,
   con la bandera + el +DDI en su propia cajita a la izquierda. */
.form .iti{display:flex;align-items:stretch;gap:10px;width:100%;--iti-hover-color:transparent}

/* La bandera + el +DDI dejan de estar superpuestos sobre el input y pasan a
   ser un card propio (por defecto la librería los posiciona en absolute). */
.form .iti__country-container{position:static;flex:0 0 auto;padding:0}
.form .iti__selected-country{
  height:54px;
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  background:#fff;
  transition:border-color .25s,box-shadow .25s;
}
.form .iti__selected-country-primary{padding:0 12px 0 16px}
/* El hover usa el mismo realce redondeado que los inputs (borde + anillo),
   en vez del relleno gris rectangular que trae la librería y no respeta el
   redondeo del card (ver --iti-hover-color:transparent arriba). */
.form .iti__selected-country:hover{border-color:var(--turq);box-shadow:0 0 0 4px rgba(105,209,201,.2)}

/* El +DDI va dentro de la caja del campo pero fuera del <input>: es un rótulo,
   no texto editable, así que no se puede borrar. Para cambiarlo hay que elegir
   otra bandera en el selector.
   .ddi-box (creada desde el JS) es la que ahora dibuja el marco del campo, y
   adentro van el rótulo y el input, uno al lado del otro. Nada se mide ni se
   posiciona en absolute: los formularios viven en un modal con [hidden] y ahí
   cualquier medición daría 0. */
.form .ddi-box{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:7px;
  height:54px;padding-left:18px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:#fff;
  transition:border-color .25s,box-shadow .25s;
}
/* El realce de foco y el de error pasan del input a la caja, que es el marco
   que se ve. */
.form .ddi-box:focus-within{border-color:var(--turq);box-shadow:0 0 0 4px rgba(105,209,201,.2)}
.form .ddi-box:has(input[aria-invalid="true"]){border-color:#E0574F}
.form .ddi{color:var(--navy);font-weight:600;flex:none}

/* El input pierde su marco propio (ahora lo pone .ddi-box) y ocupa el resto. */
.form .iti__tel-input{
  flex:1 1 auto;width:100%;min-width:0;
  height:100%;padding:0 18px 0 0 !important;
  border:0;background:transparent;border-radius:0;
}
.form .iti__tel-input:focus,
.form .iti__tel-input:focus-visible{outline:none;box-shadow:none}

/* Desplegable de países (anclado al <body> por dropdownContainer). */
.iti__dropdown-content{border-radius:var(--r-sm);box-shadow:0 24px 60px -20px rgba(11,11,59,.45)}
.iti__search-input{border-radius:var(--r-sm) var(--r-sm) 0 0}
/* El search del desplegable hereda el :focus-visible global (outline con
   offset de 3px), que se ve más grande y desalineado que el campo. Lo
   reemplazamos por un anillo interno, ajustado al borde y a su redondeo. */
.iti__search-input:focus,
.iti__search-input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--turq)}

.form__note{font-size:.76rem;color:var(--muted);line-height:1.55;text-align:center}
.form__note b{color:var(--navy)}
.form__note a{color:var(--mint);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.form__ok{
  background:rgba(8,163,133,.1);color:var(--mint);
  border-radius:var(--r-sm);padding:14px;text-align:center;
  font-size:.9rem;font-weight:600;
}

.qty{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.qty__l{font-size:.8rem;font-weight:700;color:var(--navy)}
.qty__ctrl{display:flex;align-items:center;gap:8px}
.qty__ctrl output{min-width:44px;text-align:center;font-size:1.15rem;font-weight:800;color:var(--navy)}
.total{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-radius:var(--r);background:var(--soft);
}
.total span{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.total b{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
.qty__hint{font-size:.82rem;color:var(--muted)}
.qty__hint a{color:var(--mint);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- REVEAL ---------- */
.r{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
.r.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  /* El texto pasa a ocupar todo el ancho y el robot se ancla abajo a la
     derecha, sangrando por el borde. Nunca queda arriba del título, y se
     achica con la pantalla (34vw). */
  .hero__in{display:block;position:relative}
  .hero__copy{text-align:left;padding-block:16px clamp(30px,6vw,56px)}
  /* Reserva el hueco del robot para que no se monte sobre las cifras. */
  .hero__stats{padding-right:clamp(125px,35vw,330px)}
  .hero__art{
    position:absolute;right:calc(var(--pad) * -1);bottom:0;
    width:clamp(130px,34vw,320px);
    margin:0;justify-content:flex-end;
  }
  .hero__art picture{width:100%;margin-right:0}

  .kanban{grid-template-columns:repeat(2,1fr)}
  /* Footer: la marca arriba, las dos columnas de links abajo lado a lado. */
  .foot__top{grid-template-columns:1fr 1fr;gap:40px 28px}
  .foot__brand{grid-column:1 / -1}
  .foot__mark{width:60%;right:-12%;bottom:-14%}
}

@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav:not(.is-open) .drawer{display:none}
  .nav.is-open{background:#fff;box-shadow:0 1px 0 var(--line)}
  .split{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan--pro{order:-1}
}

/* Antes/después en mobile: cada par se apila (sin → con), con la flecha
   girada 90° entre medio. Los dos lados siguen viéndose juntos. */
@media (max-width:760px){
  .shift{grid-template-columns:1fr;gap:0}

  /* Los títulos pasan a ser una leyenda: al apilar los pares, sin esto
     no se entendería cuál tarjeta es "sin" y cuál es "con". */
  .shift__heads{
    display:flex;align-items:center;justify-content:center;
    gap:10px;margin-bottom:26px;
  }
  .shift__h{padding:0}
  .shift__heads span:not(.shift__h){
    color:var(--turq-d);font-weight:800;font-size:.9rem;line-height:1;
  }
  .shift__heads span:not(.shift__h)::before{content:"→"}

  .shift__row{
    display:grid;grid-template-columns:1fr;
    margin-bottom:20px;
  }
  .shift__arrow{
    width:100%;height:26px;
    justify-self:center;
  }
  .shift__arrow i{transform:none}
  .shift__row.is-on .shift__arrow::after{
    left:50%;right:auto;top:0;bottom:0;
    width:2px;height:100%;
    background:linear-gradient(180deg,transparent,var(--turq));
    transform-origin:top;
    animation-name:shiftGoDown;
  }
  @keyframes shiftGoDown{from{transform:scaleY(0);opacity:0}60%{opacity:1}to{transform:scaleY(1);opacity:0}}
  .shift__row.is-on .shift__b{transform:translateY(3px)}
}

@media (max-width:760px){
  :root{--nav-h:66px}
  .nav__logo-img{height:22px}

  /* comparativa: se apila en dos bloques completos, uno debajo del otro */
  .vs{grid-template-columns:1fr;gap:0}
  .vs__head{min-height:0;padding:18px 20px}
  .vs__head--a{order:1}
  .vs__a{order:2}
  .vs__head--b{order:3;margin-top:36px}
  .vs__b{order:4}
  .vs__a,.vs__b{padding:16px 20px;font-size:.92rem}

  .kanban{grid-template-columns:1fr}
  .grid-list ul{grid-template-columns:1fr}
  .hero__stats{gap:22px 30px}
  .hero__stats li{flex:1 1 40%}
  .cta__btns .btn{width:100%}
  .video__label{font-size:.68rem}
  .modal{padding:0;place-items:end center}
  .modal__box{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh}
}

@media (max-width:480px){
  .btn{--bh:52px;padding:0 24px;font-size:.9rem}
  .btn--lg{--bh:56px;padding:0 26px;font-size:.94rem}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}

  /* Cifras en dos columnas fijas: con flex, "+100 mil" se partía en dos
     líneas al competir por el ancho con el robot. */
  .hero__stats{
    display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;
    padding-right:clamp(104px,30vw,150px);
  }
  .hero__stats li{flex:none}
  .hero__stats b{font-size:1.25rem}
  .hero__art{width:clamp(112px,30vw,160px)}
}

/* El robot flotante tapa los botones de ancho completo en pantallas chicas:
   ahí se achica y se pega más al borde. */
@media (max-width:520px){
  /* No más chico que 100px: abajo de eso el cartel «Hablemos» no se lee. */
  .bot{width:clamp(100px,27vw,132px);right:4px;bottom:6px}
  .bot::before{filter:blur(12px)}
}

/* ---------- ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .r{opacity:1;transform:none}
  /* Sin auto-scroll, el muro pasa a ser deslizable a mano. */
  .wall__row{overflow-x:auto;scrollbar-width:none}
  .wall__row::-webkit-scrollbar{display:none}
  .wall__track{animation:none}
}