/* =========================================================
   Bínculo · Búsquedas Inteligentes — landing v3
   Esqueleto de la variante "estructura ChatGPT" + lenguaje
   visual de la variante "100% Claude".
   Reglas duras: Poppins máx 600 · sin cursiva · sin #fafafa ·
   glass sólo sobre gradiente · reduced-motion respetado.
   ========================================================= */
:root{
  --celeste:#eef0fb;
  --azul:#2356c9;
  --azul-h:#1c46a8;
  --navy:#1e294d;
  --tinta:#1b1c2e;
  --cuerpo:#5b6170;
  --sec:#6b7280;
  --blanco:#ffffff;
  --linea:#e2e6f2;
  /* gradiente de marca: sigue siendo el del producto (mockups, textos, barras) */
  --grad:linear-gradient(125deg,#2356c9 0%,#3b6ce1 55%,#5988ff 100%);
  /* G1 · navy con resplandores — el hero */
  --grad-navy:
    radial-gradient(68% 58% at 88% 4%, #aabde8 0%, rgba(170,189,232,0) 56%),
    radial-gradient(58% 54% at 2% 92%, #3059c4 0%, rgba(48,89,196,0) 62%),
    linear-gradient(160deg,#16295e 0%,#111f4a 58%,#172b62 100%);
  /* G2 · claro con acentos en las esquinas — el resto de los bloques */
  --grad-claro:
    radial-gradient(62% 56% at 97% 6%, #b7c7ef 0%, rgba(183,199,239,0) 60%),
    radial-gradient(56% 52% at 1% 94%, #7d99e2 0%, rgba(125,153,226,0) 62%),
    linear-gradient(180deg,#f8faff 0%,#edf0fb 100%);
  --r-block:28px;
  --r-grad:36px;
  --r-belly:80px;
  --shadow:0 24px 60px -28px rgba(30,41,77,.45);
  --shadow-sm:0 12px 30px -14px rgba(30,41,77,.35);
  --maxw:1120px;

  --success:#1b8a5a; --success-soft:#e7f7ee;
  /* rojos = los tokens reales del producto (tokens.css), no una versión lavada */
  --danger:#e05545;         /* --ds-danger */
  --danger-deep:#c0392b;    /* --ds-danger-deep — el ícono y el texto van acá */
  --danger-soft:#fdecec;    /* --ds-danger-soft */
  --danger-border:#f0d2d2;  /* --ds-danger-border */
  --danger-bg:#fdf4f3;      /* fondo del panel del problema */
  --amber:#b4830b;
  --res-fg:#2356c9; --res-bg:#e9eefa;
  --com-fg:#a468b2; --com-bg:#f6f0f7;
  --ter-fg:#b4830b; --ter-bg:#faf1d2;
  --des-fg:#6b4573; --des-bg:#f0ecf1;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:400;
  color:var(--tinta);
  background:var(--celeste);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
.i{width:1em;height:1em;flex:none}
.ic{flex:none}
/* Poppins no pasa de 600: que ningún tag lo pida y el browser lo falsifique */
b,strong{font-weight:600}
/* Poppins no tiene itálica: el browser la falsifica */
i,em{font-style:normal}

/* ---------- interruptor de fase ---------- */
[data-fase="live"] .solo-pre{display:none!important}
[data-fase="pre"]  .solo-live{display:none!important}

/* ---------- tipografía ---------- */
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--tinta)}
h1{font-size:clamp(32px,8.5vw,54px)}
h2{font-size:clamp(26px,6vw,40px)}
h3{font-size:20px;letter-spacing:-.01em}
.lead{font-size:clamp(15px,4vw,17.5px);color:var(--cuerpo);max-width:56ch}
.accent{color:var(--azul);font-weight:600}
/* el ✓ y la ✕ dentro de un párrafo, como íconos y no como caracteres */
.ico{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  vertical-align:-5px;margin:0 1px}
.ico svg{width:12px;height:12px}
.ico--si{background:var(--success-soft);color:var(--success)}
.ico--no{background:var(--danger-soft);color:var(--danger-deep)}

/* texto con el gradiente de marca adentro */
.grad-text{font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--azul)}

/* destacado SIN pill: texto plano azul en mayúsculas + destello ámbar */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul);
  padding:0;border:0;background:none;border-radius:0;
}
.eyebrow--onblue{color:#fff;background:none;border:0;backdrop-filter:none}
.eyebrow .i{width:17px;height:17px;color:#f0a41f}
.eyebrow--onblue .i{color:#ffd166}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:15px;line-height:1;
  padding:15px 26px;border-radius:100px;border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;font-family:inherit;
  background:var(--azul);color:#fff;box-shadow:0 14px 26px -12px rgba(35,86,201,.65);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn .i{width:17px;height:17px}
.btn--sm{padding:12px 22px;font-size:14px}
.btn:hover{background:var(--azul-h);transform:translateY(-1px)}
.btn--light{background:#fff;color:var(--azul);box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.btn--light:hover{background:#f3f6ff}

/* ---------- layout base ---------- */
main{display:block}
.block,.plain{
  width:calc(100% - 32px);
  max-width:var(--maxw);
  margin:16px auto;
  padding:40px 26px;
}
.plain{background:transparent;padding:56px 26px}
.block{border-radius:var(--r-block);box-shadow:var(--shadow)}
.block--white{background:var(--blanco)}
/* la panza mira siempre a la esquina inferior DERECHA (hero, red, cierre).
   El hero va con el navy; los otros dos bloques con el claro. */
.block--grad{
  background:var(--grad-claro);color:var(--navy);
  border-radius:var(--r-grad) var(--r-grad) var(--r-belly) var(--r-grad);
  border:1px solid #dfe4f6;
}
.block--grad h2,.block--grad h3{color:var(--navy)}
.block--grad .lead{color:#4a5573}
.block--grad .eyebrow--onblue{color:var(--azul)}
.block--grad .eyebrow--onblue .i{color:#f0a41f}
/* sobre claro el botón blanco desaparece: vuelve el azul */
.block--grad .btn--light{background:var(--azul);color:#fff;
  box-shadow:0 14px 26px -12px rgba(35,86,201,.6)}
.block--grad .btn--light:hover{background:var(--azul-h)}

/* =========================================================
   HEADER
   ========================================================= */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(238,240,251,.86);
  backdrop-filter:blur(12px);
  padding:14px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{height:30px;width:auto}
.head-nav{display:flex;align-items:center;gap:22px}
.head-link{color:var(--navy);text-decoration:none;font-size:14.5px;font-weight:500}
.head-link:hover{color:var(--azul)}
@media (max-width:620px){ .head-link{display:none} }

/* =========================================================
   1 · HERO  (gradiente, panza abajo-derecha)
   ========================================================= */
.hero{
  width:calc(100% - 32px);max-width:var(--maxw);
  margin:4px auto 16px;
  background:var(--grad-navy);color:#fff;
  border-radius:var(--r-grad) var(--r-grad) var(--r-belly) var(--r-grad);
  box-shadow:var(--shadow);
  padding:40px 26px 34px;
  position:relative;overflow:hidden;
}
.hero__copy h1{color:#fff;margin:4px 0 16px}
.hero__copy h1 .soft{color:rgba(255,255,255,.62)}
.hero__copy .lead{color:rgba(255,255,255,.9);max-width:50ch}
.hero .eyebrow{margin-bottom:16px}
.hero-ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.hero-ctas--pre{flex-direction:column;align-items:flex-start;gap:10px}
.linkplay{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:15px;font-weight:500}
.linkplay__pl{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);
  display:grid;place-items:center;flex:none}
.linkplay__pl .i{width:15px;height:15px;color:#fff}
.linkplay:hover .linkplay__pl{background:rgba(255,255,255,.28)}

.mailform{
  display:flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:6px;
  max-width:420px;width:100%;
}
.mailform input{
  flex:1;min-width:0;border:0;background:transparent;color:#fff;
  font-family:inherit;font-size:15px;padding:0 16px;outline:none;
}
.mailform input::placeholder{color:rgba(255,255,255,.65)}
.mailform__note{font-size:13px;color:rgba(255,255,255,.75);padding-left:4px}

/* ---- fase pre: la píldora que ocupa el lugar del eyebrow ---- */
.pill-prox{display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);border-radius:100px;padding:9px 20px 9px 16px;
  font-size:14.5px;font-weight:500;color:#fff;margin-bottom:18px}
.pill-prox__dot{width:9px;height:9px;border-radius:50%;background:#7ce0b0;flex:none;
  animation:latido 2.4s ease-out infinite}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(124,224,176,.6)}
  70%{box-shadow:0 0 0 9px rgba(124,224,176,0)}
  100%{box-shadow:0 0 0 0 rgba(124,224,176,0)}
}

/* ---- mockup del celu + satélites ----
   --celu manda TODO el mockup: el ancho del celu, el alto de su pantalla y la
   posición de los tres satélites salen de acá. Por eso los satélites van en %
   y no en px: cambiando una sola variable se reescala la composición entera
   sin que ninguno se descoloque. */
.hero__shot{--celu:300px;margin:34px auto 0;max-width:var(--celu);position:relative}
/* los satélites se montan al celu: pegados, no dispersos */
.sat{position:absolute;z-index:6;background:#fff;color:var(--tinta);border-radius:16px;
  box-shadow:0 22px 46px -18px rgba(10,18,38,.62);animation:flota 7s ease-in-out infinite}
.sat--busq{top:2.27%;left:-50%;width:74%;padding:12px 13px;display:flex;align-items:center;gap:10px}
.sat__ic{width:30px;height:30px;border-radius:50%;background:var(--res-fg);color:#fff;
  display:grid;place-items:center;flex:none}
.sat__ic .i{width:15px;height:15px}
.sat--busq div{flex:1;min-width:0}
.sat--busq b{display:block;font-size:12.5px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sat--busq small{display:block;font-size:10.5px;color:var(--sec);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el chip va EN la fila, no encima del texto */
.sat__chip{order:3;display:inline-flex;align-items:center;gap:3px;flex:none;
  background:var(--success-soft);color:var(--success);border-radius:100px;padding:2px 8px;
  font-size:10px;font-weight:600}
.sat__chip .ic{width:9px;height:9px}
/* este va a la DERECHA para que no quede todo apilado a la izquierda */
.sat--aviso{top:39.8%;left:auto;right:-11.3%;display:inline-flex;align-items:center;gap:8px;border-radius:100px;
  padding:10px 15px;font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;
  animation-delay:-2.4s}
.sat--aviso .i{width:15px;height:15px;color:var(--azul)}
/* la card del local: el fondo y la sombra pasan a .sat__card para que las capas
   de la cola puedan asomar por detrás sin que las recorte el overflow */
.sat--prop{top:55.7%;left:-48.7%;width:60%;background:transparent;box-shadow:none;
  animation-delay:-4.1s}
.sat__card{position:relative;display:block;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 22px 46px -18px rgba(10,18,38,.62)}
.sat--prop img{width:100%;height:96px;object-fit:cover;display:block}
/* ---- escala del mockup ----
   El contenido del celu está dibujado para una pantalla de 300x600 y NO reflowea:
   si se achica sólo la caja, el contenido se corta contra la barra de navegación.
   Medido: a 260px de ancho se pasa 93px. Por eso se escala el mockup ENTERO con
   `zoom` —celu, contenido interno y satélites a la vez—, que sí achica la caja de
   layout (a diferencia de transform:scale) y por lo tanto baja el alto del hero.
   Sin soporte de zoom, queda como estaba: no rompe nada, sólo no achica. */
/* teléfonos angostos: abajo de ~382px la columna ya no da los 300px del celu */
@media (max-width:381px){ .hero .hero__shot{zoom:.9} }
/* escritorio: los pasos van por ALTO de ventana, que es donde estaba el problema.
   Van de mayor a menor para que gane el último que aplique. */
@media (min-width:860px) and (max-height:870px){ .hero .hero__shot{zoom:.93} }
@media (min-width:860px) and (max-height:800px){ .hero .hero__shot{zoom:.86} }
@media (min-width:860px) and (max-height:720px){ .hero .hero__shot{zoom:.79} }
@media (min-width:860px) and (max-height:650px){ .hero .hero__shot{zoom:.72} }
.sat__txt{display:block;padding:9px 11px 11px}
.sat__txt b{display:block;font-size:12px}
.sat__txt i{display:block;font-size:13px;font-weight:600;color:var(--azul)}
.sat__txt small{display:block;font-size:10.5px;color:var(--sec)}
/* la cola: dos cards más chicas asomando arriba. Van con translate/scale sueltos
   para no pisar el transform de flota, que anima el satélite entero. */
/* transform-origin arriba: si escalan desde el centro, el borde de arriba baja
   más de lo que sube el translate y la cola queda escondida detrás de la card */
/* el borde es lo que las hace leer: la mitad derecha de la pila cae sobre la
   pantalla blanca del celu y sin borde una card blanca ahí no se ve */
.sat__cola{position:absolute;left:0;top:0;width:100%;height:100%;
  border-radius:16px;transform-origin:top center}
.sat__cola--1{scale:.92;translate:0 -11px;background:#fff;border:1px solid #d6deef;
  box-shadow:0 16px 32px -20px rgba(10,18,38,.55)}
.sat__cola--2{scale:.84;translate:0 -21px;background:var(--celeste);border:1px solid #cdd6ea;
  box-shadow:0 12px 26px -20px rgba(10,18,38,.45)}
.phone{
  width:100%;background:#0b1020;border-radius:44px;padding:9px;
  box-shadow:0 44px 90px -34px rgba(10,18,38,.7),0 8px 24px rgba(0,0,0,.2);
  position:relative;
}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:92px;height:20px;background:#0b1020;border-radius:0 0 12px 12px;z-index:5}
/* el alto sale del ancho del celu: así el mockup mantiene la proporción de un
   teléfono real cuando --celu achica */
.phone__screen{background:var(--celeste);border-radius:36px;overflow:hidden;
  display:flex;flex-direction:column;position:relative;height:calc(var(--celu,300px) * 2)}

.ph-topbar{background:#fff;border-radius:0 0 22px 22px;padding:26px 0 10px;display:grid;place-items:center}
.ph-logo{height:19px;width:auto}
.ph-body{flex:1;padding:10px 10px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden}

.ph-grad{background:var(--grad);border-radius:20px;padding:14px 14px 16px;color:#fff;
  box-shadow:0 14px 26px -14px rgba(35,86,201,.7)}
.ph-grad b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.ph-grad small{display:block;font-size:10.5px;color:rgba(255,255,255,.85);margin:2px 0 11px}
.ph-search{display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px);border-radius:100px;padding:6px 6px 6px 12px}
.ph-search .i{width:14px;height:14px;color:rgba(255,255,255,.9)}
.ph-search__txt{flex:1;min-width:0;font-size:10.5px;color:rgba(255,255,255,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-search__mic{width:24px;height:24px;border-radius:50%;background:#17307a;
  display:grid;place-items:center;flex:none}
.ph-search__mic .i{width:12px;height:12px;color:#fff}

/* el pb deja pasar la nav flotante sin que tape la última fila de cards */
.ph-panel{background:#fff;border-radius:22px 22px 0 0;padding:14px 12px 58px;flex:1}
.ph-panel__t{display:block;font-size:15px;font-weight:600;color:var(--tinta);letter-spacing:-.01em}
.ph-panel__link{display:block;font-size:11px;font-weight:600;color:var(--azul);margin:4px 0 9px}
.ph-cupo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  background:var(--celeste);border-radius:14px;padding:9px 10px}
.ph-cupo__ic{width:26px;height:26px;border-radius:8px;background:#fff;color:var(--azul);
  display:grid;place-items:center;flex:none}
.ph-cupo__ic .i{width:14px;height:14px}
.ph-cupo__t b{display:block;font-size:11px;font-weight:600;color:var(--tinta);line-height:1.2}
.ph-cupo__t small{font-size:9.5px;color:var(--sec)}
.ph-cupo__n{font-size:15px;font-weight:600;color:var(--azul)}
.ph-cupo__n em{font-size:11px;color:var(--sec)}
.ph-cupo__bar{grid-column:1 / -1;height:5px;border-radius:100px;background:#fff;overflow:hidden}
.ph-cupo__bar span{display:block;height:100%;width:80%;background:var(--grad);border-radius:100px}

.ph-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.ph-cat{position:relative;border-radius:14px;padding:10px 10px 11px}
.ph-cat__ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff}
.ph-cat__ic .i{width:15px;height:15px}
.ph-cat__chip{position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:3px;
  background:#fff;border-radius:100px;padding:3px 7px;font-size:9.5px;font-weight:600;color:var(--tinta)}
.ph-cat__chip .ic{width:9px;height:9px;color:var(--success)}
.ph-cat b{display:block;font-size:11.5px;font-weight:600;color:var(--tinta);margin-top:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-cat small{display:block;font-size:10px;color:var(--sec);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-cat--res{background:var(--res-bg)} .ph-cat--res .ph-cat__ic{background:var(--res-fg)}
.ph-cat--com{background:var(--com-bg)} .ph-cat--com .ph-cat__ic{background:var(--com-fg)}
.ph-cat--ter{background:var(--ter-bg)} .ph-cat--ter .ph-cat__ic{background:var(--ter-fg)}
.ph-cat--des{background:var(--des-bg)} .ph-cat--des .ph-cat__ic{background:var(--des-fg)}

.ph-nav{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;align-items:center;gap:22px;background:#293349;border-radius:100px;
  padding:9px 20px;box-shadow:0 12px 24px -10px rgba(0,0,0,.5)}
.ph-nav span{color:rgba(255,255,255,.8);display:grid;place-items:center}
.ph-nav .i{width:18px;height:18px}
.ph-nav__plus{width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff!important}
.ph-nav__bell{position:relative}
.ph-nav__dot{position:absolute;top:-4px;right:-5px;min-width:15px;height:15px;padding:0 4px;
  border-radius:100px;background:var(--danger);color:#fff;font-size:9px;font-weight:600;
  display:grid;place-items:center;line-height:1}

/* =========================================================
   Coreografía del hero: lo que pasa DENTRO de la pantalla llama
   a los satélites de afuera. La activa app.js poniendo [data-coreo];
   sin JS no se activa nada y queda todo visible, como estaba.
   ========================================================= */
[data-coreo] .sat{opacity:0;scale:.88;
  transition:opacity .5s ease, scale .55s cubic-bezier(.2,.9,.3,1)}
[data-coreo] .sat.on{opacity:1;scale:1}
/* sólo se apagan los dos que participan de la escena: Terreno y Emprendimiento
   son búsquedas que ya venían y tienen que seguir mostrando lo suyo */
[data-coreo] .ph-cat__chip[data-coreo-chip]{opacity:0;scale:.4;
  transition:opacity .26s ease, scale .34s cubic-bezier(.2,1.5,.4,1)}
[data-coreo] .ph-cat__chip[data-coreo-chip].on{opacity:1;scale:1}
[data-coreo] .ph-nav__dot{opacity:0;scale:.3;
  transition:opacity .24s ease, scale .34s cubic-bezier(.2,1.5,.4,1)}
[data-coreo] .ph-nav__dot.on{opacity:1;scale:1}
/* el destello de la tarjeta que acaba de recibir coincidencias */
.ph-cat--suma{animation:cat-suma 1s ease}
@keyframes cat-suma{
  0%{box-shadow:0 0 0 0 rgba(35,86,201,0)}
  25%{box-shadow:0 0 0 4px rgba(35,86,201,.3)}
  100%{box-shadow:0 0 0 0 rgba(35,86,201,0)}
}
/* con movimiento reducido no hay escena: se ve el final, quieto */
@media (prefers-reduced-motion:reduce){
  [data-coreo] .sat,[data-coreo] .ph-cat__chip[data-coreo-chip],[data-coreo] .ph-nav__dot{
    opacity:1;scale:1;transition:none}
  .ph-cat--suma{animation:none}
}

/* =========================================================
   2 · APROVECHÁ MEJOR TU TIEMPO (rodillo sincronizado)
   ========================================================= */
.tiempo h2{margin:16px 0 0}
.rodillo{margin-top:34px;display:grid;gap:16px;align-items:stretch}
/* Los paneles llevan un lavado de color abajo para que el glass tenga sobre qué apoyarse
   (el glass sobre plano no se lee). Son paneles, no bandas: el ritmo de gradientes no cambia. */
.rod-col{border-radius:24px;padding:22px 24px;position:relative;overflow:hidden;isolation:isolate}
.rod-col::before{content:"";position:absolute;inset:0;z-index:-1}
.rod-col--prob{border:1px solid var(--danger-border)}
.rod-col--prob::before{background:
  radial-gradient(120% 90% at 12% 8%, #fbdedb 0%, transparent 62%),
  radial-gradient(110% 80% at 92% 96%, #f7cfc9 0%, transparent 58%),
  linear-gradient(150deg,#fdf4f3,#fbeae7)}
.rod-col--sol{border:1px solid #dfe4f6}
.rod-col--sol::before{background:
  radial-gradient(120% 90% at 88% 6%, #dfe6ff 0%, transparent 60%),
  radial-gradient(110% 85% at 6% 96%, #cfd9fb 0%, transparent 58%),
  linear-gradient(150deg,#f6f8ff,#e8edfd)}
.rod-head{margin-bottom:14px}
/* glass: blanco translúcido + blur + borde claro */
.rod-badge{display:inline-flex;font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.75)}
.rod-col--prob .rod-badge{color:var(--danger-deep)}
.rod-col--sol .rod-badge{color:var(--azul)}
/* la máscara difumina arriba y abajo: por eso "asoman" el anterior y el siguiente */
.rod-win{height:186px;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.rod-track{position:absolute;left:0;right:0;top:0;
  transition:transform .75s cubic-bezier(.66,0,.24,1)}
/* cada ítem es una píldora de glass; la activa se enciende, las otras quedan apagadas */
.rod-item{height:62px;display:flex;align-items:center;gap:12px;padding:0 14px 0 10px;
  border-radius:100px;border:1px solid transparent;
  opacity:.34;transform:scale(.97);
  transition:opacity .5s ease,transform .5s ease,background .5s ease,border-color .5s ease,box-shadow .5s ease}
.rod-item.is-on{opacity:1;transform:none;
  background:rgba(255,255,255,.58);backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.8);box-shadow:0 10px 26px -14px rgba(30,41,77,.4)}
.rod-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.5)}
.rod-col--prob .rod-ic{color:var(--danger-deep)}
.rod-col--sol  .rod-ic{color:var(--azul)}
.rod-item.is-on .rod-ic{background:#fff}
.rod-ic .i{width:18px;height:18px}
.rod-item p{font-size:15.5px;color:var(--cuerpo);line-height:1.3}
.rod-col--prob .rod-item.is-on p{color:#7a3327}
.rod-col--sol  .rod-item.is-on p{color:var(--tinta)}
.rod-mid{display:flex;align-items:center;justify-content:center;gap:14px}
.rod-count{font-size:13px;font-weight:600;color:var(--sec);font-variant-numeric:tabular-nums}
.rod-count b{color:var(--azul);font-size:22px}
.rod-rail{flex:1;height:3px;background:var(--linea);border-radius:100px;position:relative;overflow:hidden}
.rod-fill{position:absolute;left:0;top:0;bottom:0;background:var(--grad);border-radius:100px;
  transition:width .75s cubic-bezier(.66,0,.24,1),height .75s cubic-bezier(.66,0,.24,1)}
/* Es un <button>: hay que resetear lo que el navegador le pone de fabrica.
   Lleva hover, active y foco visibles porque ahora promete algo y lo cumple. */
.rod-arrow{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--azul);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);flex:none;
  border:0;padding:0;margin:0;font:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:transform .2s ease,box-shadow .2s ease}
.rod-arrow:hover{transform:translateY(-1px) scale(1.06);box-shadow:var(--shadow)}
.rod-arrow:active{transform:scale(.94)}
.rod-arrow:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.rod-arrow .i{width:19px;height:19px}

/* ---- formularios de mail (fase pre) ----
   .hp es la trampa para bots: fuera de pantalla, no display:none, porque
   algunos bots saltean lo que esta oculto del todo. Nadie la ve ni la tabula. */
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* mientras se manda, el boton no se puede tocar dos veces */
.mailform.is-enviando button{opacity:.6;pointer-events:none}

/* la nota de abajo del campo pasa a ser la respuesta: no mueve nada de lugar */
.mailform__note.is-ok{color:#c9f5dc;font-weight:600}
.mailform__note.is-error{color:var(--danger-soft);font-weight:600}

/* Al anotarse se van el campo y el boton, pero la pildora QUEDA con la
   confirmacion adentro. Si se ocultaba el form entero el bloque se achicaba
   62px y todo el hero pegaba un salto hacia arriba. Los 38px son el alto
   exacto del boton (.btn--sm: 12+14+12), asi la pildora no cambia de tamano. */
.mailform.is-listo input[type=email],
.mailform.is-listo button{display:none}
.mailform__ok{display:none;align-items:center;gap:9px;min-height:38px;padding:0 16px;
  color:#fff;font-weight:600;font-size:15px}
.mailform.is-listo .mailform__ok{display:inline-flex}
.mailform__ok .i{width:19px;height:19px;color:#c9f5dc;flex:none}

/* =========================================================
   3 · CÓMO FUNCIONA (carrusel de 4 pasos animados)
   ========================================================= */
.how h2{margin:16px 0 0}
.how__head{margin-bottom:24px}
/* el contenedor gira sobre su eje y la cara de atrás ya trae el paso siguiente */
.carousel{margin-top:0}
.carousel__win{overflow:visible;perspective:2000px}
.carousel__track{position:relative;transform-style:preserve-3d;will-change:transform;
  transition:transform .95s cubic-bezier(.62,.02,.24,1)}
/* pointer-events:none — si no, la cara girada tapa los dots */
.cara{backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;
  position:absolute;inset:0}
.cara--b{transform:rotateY(180deg)}
.carousel__pool{display:none}
.slide{width:100%;display:flex;flex-direction:column;gap:20px;padding:2px}
/* overflow visible: hay elementos que salen del recuadro a propósito */
.slide__viz{background:var(--celeste);border-radius:20px;padding:20px;
  display:flex;flex-direction:column;justify-content:center;min-height:310px;
  position:relative;overflow:visible}
.slide__txt .step__n{width:36px;height:36px;border-radius:11px;background:var(--celeste);
  color:var(--azul);font-weight:600;font-size:17px;display:grid;place-items:center;margin-bottom:12px}
.slide__txt h3{margin-bottom:8px}
.slide__txt p{font-size:15.5px;color:var(--cuerpo);max-width:46ch}
.carousel__nav{display:flex;align-items:center;gap:16px;margin-top:22px}
.carousel__arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);
  background:#fff;color:var(--azul);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.carousel__arrow .i{width:19px;height:19px}
.carousel__arrow:hover{background:var(--celeste);border-color:#cfd7ee;transform:translateY(-1px)}
.carousel__dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.how__head .carousel__dots{justify-content:flex-start;margin-top:0}
.carousel__dot{width:8px;height:8px;border-radius:100px;background:var(--linea);border:0;padding:0;
  cursor:pointer;transition:width .3s ease,background .3s ease}
.carousel__dot.is-on{background:var(--azul);width:24px}

.viz{display:flex;flex-direction:column;gap:12px}

/* paso 1 · describí */
.viz-grad{background:var(--grad);border-radius:16px;padding:14px;color:#fff}
.viz-grad b{display:block;font-size:15px;margin-bottom:10px}
.viz-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(6px);
  border-radius:100px;padding:9px 14px;min-height:38px}
.viz-search .i{width:15px;height:15px;color:rgba(255,255,255,.9)}
.viz-search__txt{font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden}
.viz-search__caret{width:2px;height:15px;background:#fff;border-radius:2px;opacity:0}
.slide.is-on .viz-search__caret{animation:blink 1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:.9}51%,100%{opacity:0}}
.viz-chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:7px 12px;border-radius:100px;background:#fff;color:var(--azul);
  opacity:0;transform:translateY(6px) scale(.96);transition:opacity .3s ease,transform .3s ease}
.chip .ic{width:11px;height:11px;color:var(--success)}
.viz-chips.is-armed .chip{opacity:1;transform:none}
.viz-chips.is-armed .chip:nth-child(1){transition-delay:.05s}
.viz-chips.is-armed .chip:nth-child(2){transition-delay:.25s}
.viz-chips.is-armed .chip:nth-child(3){transition-delay:.45s}
.viz-chips.is-armed .chip:nth-child(4){transition-delay:.65s}

/* paso 2 · la red sigue buscando — el recurso es el feed que se llena solo */
.viz-head{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 12px}
.viz-card__ic{width:34px;height:34px;border-radius:50%;background:var(--res-bg);color:var(--res-fg);
  display:grid;place-items:center;flex:none}
.viz-card__ic .i{width:17px;height:17px}
.viz-head b{display:block;font-size:13.5px;color:var(--tinta)}
.viz-head small{font-size:11.5px;color:var(--sec)}
.viz-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;
  font-weight:600;color:var(--success);background:var(--success-soft);padding:5px 10px;border-radius:100px}
.viz-live i{width:6px;height:6px;border-radius:50%;background:var(--success);flex:none;
  animation:pulso 1.8s ease-in-out infinite}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(27,138,90,.5)}60%{box-shadow:0 0 0 6px rgba(27,138,90,0)}}
.viz-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.viz-tile{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#dfe4f6;
  opacity:0;transform:translateY(14px) scale(.94);
  transition:opacity .45s ease,transform .45s cubic-bezier(.4,1.5,.5,1)}
.viz-tile img{width:100%;height:100%;object-fit:cover}
.viz-tile span{position:absolute;left:6px;bottom:6px;background:rgba(255,255,255,.94);
  border-radius:100px;padding:2px 8px;font-size:10px;font-weight:600;color:var(--tinta)}
.slide.is-on .viz-tile.is-in{opacity:1;transform:none}
/* estos dos SALEN del recuadro */
.viz-badge{position:absolute;top:-16px;right:-18px;display:inline-flex;align-items:baseline;gap:7px;
  background:#fff;border-radius:100px;padding:10px 18px;font-size:13px;font-weight:600;color:var(--sec);
  box-shadow:0 16px 34px -16px rgba(30,41,77,.55)}
.viz-badge b{font-size:23px;color:var(--azul);font-variant-numeric:tabular-nums;line-height:1}
.viz-toast{position:absolute;left:-14px;bottom:-18px;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--success);background:#fff;padding:10px 15px;border-radius:100px;
  box-shadow:0 16px 34px -16px rgba(30,41,77,.55);
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.viz-toast .ic{width:14px;height:14px}
.slide.is-on .viz-toast{opacity:1;transform:none;transition-delay:2.4s}

/* paso 3 · elegís */
.viz-bar{display:flex;align-items:center;gap:10px;background:var(--azul);color:#fff;
  border-radius:14px 14px 6px 6px;padding:10px 14px}
.viz-bar .i{width:17px;height:17px}
.viz-bar b{display:block;font-size:13px}
.viz-bar small{font-size:11px;color:rgba(255,255,255,.8)}
.viz-tabs{display:flex;gap:6px;align-items:stretch}
.viz-tab{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border-radius:10px;padding:7px 12px;font-size:12px;font-weight:600}
.viz-tab .ic{width:12px;height:12px}
.viz-tab--no{background:var(--danger-soft);color:var(--danger-deep)}
.viz-tab--si{background:var(--success-soft);color:var(--success)}
.viz-tab--mid{flex:1;background:#fff;color:var(--azul);border:1.5px solid var(--azul)}
.viz-tab--mid em{background:var(--azul);color:#fff;border-radius:100px;padding:1px 7px;
  font-size:10.5px;margin-left:4px}
/* la card se mantiene angosta (foto casi 2:1) y se sale del recuadro a la derecha:
   antes ocupaba todo el ancho y la foto quedaba una tira rarísima */
.viz-deck{position:relative;height:292px;margin-top:12px}
.viz-prop{position:absolute;top:0;left:auto;right:-56px;width:min(336px,100%);
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 24px -14px rgba(30,41,77,.5)}
.viz-prop--top{box-shadow:0 26px 54px -22px rgba(30,41,77,.6)}
.viz-prop img{width:100%;height:178px;object-fit:cover;object-position:center 45%}
.viz-prop__b{display:flex;align-items:center;gap:8px;padding:8px 10px}
.viz-prop__t{flex:1;min-width:0}
.viz-prop__t b{display:block;font-size:12px;color:var(--tinta);line-height:1.2}
.viz-prop__price{display:block;font-size:12.5px;font-weight:600;color:var(--azul)}
.viz-prop__t small{display:block;font-size:10px;color:var(--sec);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.viz-vote{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.viz-vote .ic{width:14px;height:14px}
.viz-vote--no{background:var(--danger-soft);color:var(--danger-deep)}
.viz-vote--si{background:var(--success-soft);color:var(--success)}
/* alineada bajo la de arriba: asoma por abajo, no por el costado */
.viz-prop--next{transform:translateY(18px) scale(.95);opacity:.45}
.slide.is-on .viz-prop--top{animation:vuela 4s ease-in-out infinite}
.slide.is-on .viz-prop--next{animation:sube 4s ease-in-out infinite}
.slide.is-on .viz-prop--top .viz-vote--si{animation:latido 4s ease-in-out infinite}
@keyframes vuela{
  0%,44%{transform:none;opacity:1}
  60%{transform:translate(46%,-14%) rotate(8deg);opacity:0}
  61%,100%{transform:none;opacity:1}
}
@keyframes sube{
  0%,46%{transform:translateY(18px) scale(.95);opacity:.45}
  62%,90%{transform:none;opacity:1}
  100%{transform:translateY(18px) scale(.95);opacity:.45}
}
@keyframes latido{
  0%,36%{transform:none;box-shadow:0 0 0 0 rgba(27,138,90,0)}
  46%{transform:scale(1.18);box-shadow:0 0 0 8px rgba(27,138,90,.16)}
  56%,100%{transform:none;box-shadow:0 0 0 0 rgba(27,138,90,0)}
}
/* sale del recuadro por abajo-izquierda cuando la card se va */
.viz-suma{position:absolute;left:-16px;bottom:-16px;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--success);background:#fff;padding:10px 15px;border-radius:100px;
  box-shadow:0 16px 34px -16px rgba(30,41,77,.55);opacity:0;transform:translateY(10px)}
.viz-suma .ic{width:14px;height:14px}
.slide.is-on .viz-suma{animation:asoma 4s ease-in-out infinite}
@keyframes asoma{
  0%,52%{opacity:0;transform:translateY(10px)}
  62%,88%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(10px)}
}

/* paso 4 · compartís — arranca por la portada que ve el cliente */
.viz-portada{position:absolute;inset:20px;z-index:3;display:grid;place-items:center;
  border-radius:16px;background:var(--grad);
  opacity:0;transform:scale(.97);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.viz-portada.is-on{opacity:1;transform:none}
.viz-portada__card{text-align:center;color:#fff;padding:20px}
.viz-portada__av{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  margin:0 auto 14px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);font-size:20px;font-weight:600}
.viz-portada__card b{display:block;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.viz-portada__card small{display:block;font-size:12.5px;color:rgba(255,255,255,.85);margin-top:7px}
.viz-portada__btn{display:inline-block;margin-top:16px;background:#fff;color:var(--azul);
  font-size:13px;font-weight:600;padding:10px 20px;border-radius:100px}
.viz-link{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:600;color:var(--azul);background:#fff;padding:9px 14px;border-radius:100px}
.viz-link .i{width:14px;height:14px}
.viz-votes{list-style:none;display:flex;flex-direction:column;gap:8px}
.viz-votes li{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:8px;
  opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .4s ease}
.slide.is-on .viz-votes li{opacity:1;transform:none}
/* los votos llegan DESPUÉS de que se va la portada */
.slide.is-on .viz-votes li:nth-child(1){transition-delay:2.4s}
.slide.is-on .viz-votes li:nth-child(2){transition-delay:3.2s}
.slide.is-on .viz-votes li:nth-child(3){transition-delay:4s}
.viz-votes img{width:42px;height:42px;border-radius:9px;object-fit:cover;flex:none}
.viz-votes div{flex:1;min-width:0}
.viz-votes b{display:block;font-size:12px;color:var(--tinta)}
.viz-votes small{display:block;font-size:10.5px;color:var(--sec);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.viz-v{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.viz-v .ic{width:12px;height:12px}
.viz-v--si{background:var(--success-soft);color:var(--success)}
.viz-v--no{background:#eef0f4;color:#7a8194}
.viz-livebar{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--success)}
.viz-livebar i{width:8px;height:8px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 3px var(--success-soft);flex:none}

/* =========================================================
   4 · LA EXPERIENCIA DE TODOS
   ========================================================= */
.cliente h2{margin:16px 0 14px}
.cliente__list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:24px}
.cliente__list li{display:flex;gap:12px;align-items:flex-start}
.cliente__ic{width:32px;height:32px;border-radius:10px;background:#fff;color:var(--azul);
  display:grid;place-items:center;flex:none;box-shadow:var(--shadow-sm)}
.cliente__ic .i{width:16px;height:16px}
.cliente__list p{font-size:15.5px;color:var(--cuerpo)}

/* --- constelación: piezas del producto montadas entre sí, sin marco de celular --- */
.const{position:relative;width:100%;max-width:420px;margin:0 auto;padding:46px 0 78px}
.const__card{position:relative;z-index:2;background:#fff;border-radius:26px;padding:22px 22px 20px;
  text-align:center;box-shadow:0 30px 70px -30px rgba(30,41,77,.55);max-width:290px;margin:0 auto}
.const__av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin:0 auto 12px;
  background:var(--grad);color:#fff;font-size:18px;font-weight:600}
.const__card b{display:block;font-size:19px;letter-spacing:-.01em}
.const__card small{display:block;font-size:12px;color:var(--sec);margin-top:2px}
.const__photo{margin:14px 0 12px;border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.const__photo img{width:100%;height:100%;object-fit:cover}
.const__pill{display:inline-block;background:var(--celeste);color:var(--azul);border-radius:100px;
  padding:8px 16px;font-size:12px;font-weight:600}

.const__chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
  background:#fff;border-radius:100px;padding:9px 15px;font-size:12.5px;font-weight:600;
  color:var(--navy);box-shadow:0 14px 30px -14px rgba(30,41,77,.55)}
.const__chip .i{width:15px;height:15px;color:var(--azul)}
.const__chip--link{top:14px;left:-22px}

.const__mini{position:absolute;z-index:3;background:#fff;border-radius:16px;padding:12px 14px;
  box-shadow:0 18px 40px -18px rgba(30,41,77,.55)}
.const__mini b{display:block;font-size:13.5px;color:var(--tinta)}
.const__mini small{display:block;font-size:11px;color:var(--sec)}
.const__mini--voto{top:-4px;right:-36px;padding-left:44px}
.const__badge{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.const__badge .ic{width:13px;height:13px}
.const__badge--si{background:var(--success-soft);color:var(--success)}
.const__mini--conteo{bottom:0;left:-14px;min-width:150px}
.const__mini--conteo b{font-size:19px;color:var(--azul)}
.const__mini--conteo b em{font-size:12.5px;font-weight:500;color:var(--sec)}
.const__bar{display:block;height:5px;border-radius:100px;background:var(--celeste);margin-top:8px;overflow:hidden}
.const__bar i{display:block;height:100%;width:66%;border-radius:100px;background:var(--grad)}

/* monta la foto de la card central, no la píldora de abajo — corrida a la
   derecha para que tape lo menos posible */
.const__prop{position:absolute;z-index:4;top:186px;right:-60px;width:176px;background:#fff;
  border-radius:16px;overflow:hidden;box-shadow:0 24px 54px -22px rgba(30,41,77,.6)}
.const__prop img{width:100%;height:104px;object-fit:cover}
.const__prop__b{padding:9px 11px 12px}
.const__prop__b b{display:block;font-size:12.5px;color:var(--tinta)}
.const__prop__b span{display:block;font-size:13px;font-weight:600;color:var(--azul)}
.const__prop__b small{display:block;font-size:10.5px;color:var(--sec)}
.const__vote{position:absolute;bottom:12px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center}
.const__vote .ic{width:13px;height:13px}
.const__vote--no{right:46px;background:var(--danger-soft);color:var(--danger-deep)}
.const__vote--si{right:12px;background:var(--success-soft);color:var(--success)}

/* flotan apenas, con desfasajes distintos */
.const__chip,.const__mini,.const__prop{animation:flota 7s ease-in-out infinite}
.const__chip--sin{animation-delay:-1.4s}
.const__mini--voto{animation-delay:-2.6s}
.const__mini--conteo{animation-delay:-4.2s}
.const__prop{animation-delay:-3.4s}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.cliente__shot{margin:36px auto 0;max-width:420px}

/* =========================================================
   5 · BANNER DE CIFRAS
   ========================================================= */
.marquee{overflow:hidden;padding:12px 0 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:corre 34s linear infinite}
.marquee__row{display:inline-flex;align-items:center;gap:14px;padding-right:14px;
  font-size:clamp(18px,3.4vw,28px);font-weight:500;letter-spacing:-.01em;
  color:var(--sec);white-space:nowrap;text-transform:uppercase}
.marquee__row b{font-weight:600;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.marquee__row i{color:#c3cadf}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   6 · SUMÁ TUS PROPIEDADES
   ========================================================= */
.red{overflow:hidden}
.red h2{margin:16px 0 14px}
.red__perks{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:20px}
.red__perks li{display:flex;align-items:center;gap:10px;font-size:15px;color:#3d4761}
.red__perks .i{width:18px;height:18px;color:var(--success)}
/* sobre el gradiente claro no va glass: campo blanco sólido con borde */
.urlform{margin-top:24px;display:flex;gap:8px;align-items:center;
  background:#fff;border:1px solid #d8dff2;border-radius:100px;padding:6px;max-width:440px;
  box-shadow:0 10px 24px -16px rgba(30,41,77,.5)}
.urlform input{flex:1;min-width:0;border:0;background:transparent;color:var(--tinta);
  font-family:inherit;font-size:15px;padding:0 16px;outline:none}
.urlform input::placeholder{color:#9aa0b2}
/* mismo estado "listo" que el formulario del hero, pero repintado: .mailform__ok
   esta escrito para texto blanco sobre el navy y aca el campo es blanco solido,
   asi que ese color quedaria invisible. */
.urlform.is-listo input[type=email],
.urlform.is-listo button{display:none}
.urlform.is-listo .mailform__ok{display:inline-flex;color:var(--azul)}
.urlform .mailform__ok .i{color:var(--success)}
.urlform__note{font-size:13px;color:var(--cuerpo);padding-left:18px;margin:10px 0 0}
.urlform__note.is-ok{color:var(--success)}
.urlform__note.is-error{color:#b91c1c}
.red__ej{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--azul);
  text-decoration:none;font-size:14.5px;font-weight:500;border-bottom:1px solid rgba(35,86,201,.4);
  padding-bottom:2px}
.red__ej .i{width:16px;height:16px}
.red__viz{margin-top:30px}
.netcard{background:#fff;border-radius:20px;padding:18px;border:1px solid #e4e9f7;
  box-shadow:0 26px 54px -28px rgba(30,41,77,.5);color:var(--tinta);max-width:360px}
.netcard__h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.netcard__globe{width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;
  display:grid;place-items:center;flex:none}
.netcard__globe .i{width:22px;height:22px}
.netcard__h small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.05em;
  color:var(--sec);text-transform:uppercase;margin-bottom:1px}
.netcard__h b{font-size:14px;color:var(--tinta);line-height:1.15}
.netcard__cats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.cat{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:100px}
.cat--res{color:var(--res-fg);background:var(--res-bg)}
.cat--com{color:var(--com-fg);background:var(--com-bg)}
.cat--ter{color:var(--ter-fg);background:var(--ter-bg)}
.cat--des{color:var(--des-fg);background:var(--des-bg)}
.netcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.netcard__foot .accent{font-size:14px}
/* apagado a proposito: la tarjeta es un dibujo del producto (aria-hidden) y en
   azul se leia igual de apretable que el formulario de al lado, prometiendo una
   accion que la pagina todavia no puede hacer. */
.netcard__add{display:inline-flex;align-items:center;gap:6px;background:#eef0f6;color:#8b91a3;
  border:1px solid var(--linea);
  font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:12px}
.netcard__add .ic{width:14px;height:14px}
.netcard__ok{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--linea);font-size:12px;font-weight:600;color:var(--success)}
.netcard__ok .ic{width:15px;height:15px;flex:none}

/* =========================================================
   7 · YA SUMARON SUS PROPIEDADES
   ========================================================= */
/* sin bloque contenedor: corre solo, como la cinta de los números */
.logos{text-align:center;padding:56px 0 60px}
.logos h2{font-size:clamp(22px,4vw,30px);padding:0 26px}
.logos__marquee{overflow:hidden;margin-top:52px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos__track{display:flex;width:max-content;animation:corre 46s linear infinite}
.logos__row{display:inline-flex;align-items:center;gap:56px;padding-right:56px}
.lg{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font-size:19px;font-weight:600;color:#9aa0b2;letter-spacing:-.01em}
.lg__m{width:30px;height:30px;color:#b4bacb;flex:none}
.lg i{display:block;text-align:left;line-height:1.15}
.lg em{display:block;font-size:9.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:#b4bacb}
.logos__rate{display:inline-flex;align-items:center;gap:9px;margin-top:32px;
  font-size:14.5px;color:var(--cuerpo)}
.logos__rate b{color:var(--azul)}
.logos__pulse{width:9px;height:9px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 4px var(--success-soft);flex:none;display:block}

/* =========================================================
   8 · DUDAS FRECUENTES
   ========================================================= */
/* fuera del scroll: se abre desde el link de arriba */
.faq-panel{position:fixed;inset:0;z-index:90;background:rgba(20,26,48,.5);
  backdrop-filter:blur(6px);display:grid;place-items:end center;padding:0}
.faq-panel[hidden]{display:none}
.faq-panel__in{background:var(--celeste);width:100%;max-width:var(--maxw);
  border-radius:var(--r-block) var(--r-block) 0 0;padding:26px 26px 34px;
  max-height:88vh;overflow-y:auto;animation:sube-panel .32s cubic-bezier(.4,0,.2,1)}
@keyframes sube-panel{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.faq-panel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.faq-panel__head h2{font-size:clamp(22px,4vw,30px)}
.faq-panel__x{width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--navy);
  display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:var(--shadow-sm)}
.faq-panel__x .i{width:19px;height:19px}
.faq__list{margin-top:20px;background:#fff;border-radius:22px;box-shadow:var(--shadow-sm);overflow:hidden}
.faq__list details{border-bottom:1px solid var(--linea)}
.faq__list details:last-child{border-bottom:0}
.faq__list summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:20px 22px;font-weight:500;font-size:16px;color:var(--navy)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::marker{content:""}
.chev{margin-left:auto;width:18px;height:18px;flex:none;position:relative}
.chev::before,.chev::after{content:"";position:absolute;top:8px;width:10px;height:2px;
  background:var(--azul);border-radius:2px;transition:transform .2s ease}
.chev::before{left:1px;transform:rotate(45deg)}
.chev::after{right:1px;transform:rotate(-45deg)}
.faq__list details[open] .chev::before{transform:rotate(-45deg)}
.faq__list details[open] .chev::after{transform:rotate(45deg)}
.faq__list details p{padding:0 22px 20px;color:var(--cuerpo);font-size:15px}
.faq__list .ph{color:var(--sec)}

/* =========================================================
   VER EJEMPLO · mismo panel que Dudas frecuentes, otro contenido
   ========================================================= */
.ej-panel .faq-panel__in{max-width:940px}
.ej{background:#fff;border-radius:22px;box-shadow:var(--shadow-sm);overflow:hidden;margin-top:20px}
.ej__head{padding:20px 22px 0}
.ej__kicker{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--azul)}
.ej__head h3{font-size:21px;margin:6px 0 6px}
.ej__head p{font-size:14.5px;color:var(--cuerpo);max-width:62ch}
.ej__body{padding:18px 22px 22px}

/* los tres momentos */
.momento{display:none}
.momento.on{display:block;animation:momento-entra .42s cubic-bezier(.3,0,.2,1)}
@keyframes momento-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.momento__t{display:flex;align-items:baseline;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.momento__n{font-size:11.5px;font-weight:600;color:var(--azul);letter-spacing:.09em;text-transform:uppercase}
.momento__t b{font-size:16px;font-weight:600}
.momento__t span{font-size:13px;color:var(--cuerpo)}

.pasos{display:flex;align-items:center;gap:12px;margin-top:16px}
.pasos__dots{display:flex;gap:7px}
.pasos__dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#c8cfe4;transition:width .24s ease,background .24s ease}
.pasos__dots button[aria-current="true"]{background:var(--azul);width:24px;border-radius:100px}
.pasos__nav{display:flex;gap:8px}
/* el CTA se va al extremo opuesto: navegación a la izquierda, acción a la derecha */
.ej__cta{margin-left:auto}
@media (max-width:620px){
  .pasos{flex-wrap:wrap}
  .ej__cta{margin-left:0;width:100%;justify-content:center;order:3}
}
.pasos__nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--linea);
  background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center}
.pasos__nav button:hover{background:var(--celeste);color:var(--azul)}
.pasos__nav .i{width:16px;height:16px}

/* momento 1 · la búsqueda de otro comercial */
.pantalla{background:var(--celeste);border-radius:18px;padding:14px;border:1px solid var(--linea)}
.pantalla__bar{display:flex;align-items:center;gap:9px;background:#fff;border-radius:100px;
  padding:9px 14px;font-size:12.5px;color:var(--cuerpo);box-shadow:var(--shadow-sm)}
.pantalla__bar .i{width:15px;height:15px;color:var(--azul);flex:none}
.pantalla__bar em{margin-left:auto;font-size:11px;font-weight:600;color:var(--sec);white-space:nowrap}
.pantalla__quien{font-size:11.5px;color:var(--sec);margin:10px 2px 8px}
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.prop{background:#fff;border-radius:14px;overflow:hidden;position:relative;
  box-shadow:0 8px 20px -14px rgba(30,41,77,.5)}
.prop img{width:100%;height:92px;object-fit:cover;display:block}
.prop__in{padding:9px 11px 12px}
.prop b{display:block;font-size:12px;font-weight:600}
.prop i{display:block;font-size:13.5px;font-weight:600;color:var(--azul);margin-top:1px}
.prop small{display:block;font-size:10.5px;color:var(--sec)}
/* la tuya, destacada: es de lo que habla el bloque */
.prop--mia{outline:2px solid var(--azul);outline-offset:-2px;transform:translateY(-3px);
  box-shadow:0 18px 34px -18px rgba(35,86,201,.65)}
.prop__mia{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;
  background:var(--azul);color:#fff;border-radius:100px;padding:3px 9px;font-size:9.5px;font-weight:600}
.prop__mia .i{width:10px;height:10px}
.prop__pos{position:absolute;top:8px;right:8px;background:#fff;color:var(--tinta);
  border-radius:100px;padding:3px 8px;font-size:9.5px;font-weight:600}

/* momento 2 · el link del cliente final */
.cli{background:var(--grad);border-radius:18px;padding:16px;color:#fff}
.cli__t{font-size:14px;font-weight:600}
.cli__s{font-size:11.5px;color:rgba(255,255,255,.82);margin-bottom:12px}
.cli__list{display:flex;flex-direction:column;gap:8px}
.cli__row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:13px;padding:8px}
.cli__row img{width:52px;height:44px;border-radius:9px;object-fit:cover;flex:none}
.cli__row div{flex:1;min-width:0}
.cli__row b{display:block;font-size:11.5px;color:var(--tinta)}
.cli__row small{display:block;font-size:10px;color:var(--sec)}
/* el voto usa los tokens del producto: ✓ verde, ✕ rojo con tinte suave */
.voto{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.voto .i{width:14px;height:14px}
.voto--si{background:var(--success-soft);color:var(--success)}
.voto--no{background:var(--danger-soft);color:var(--danger-deep)}
/* la tuya tiene que saltar sobre el azul: el borde azul solo no se ve contra el fondo,
   así que va con un halo blanco alrededor */
.cli__row--mia{outline:2px solid var(--azul);outline-offset:-2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.6)}
.cli__mia{font-size:9px;font-weight:600;background:var(--azul);color:#fff;
  border-radius:100px;padding:2px 8px;margin-top:4px;display:inline-block}

/* momento 3 · la consulta */
.chat{background:var(--celeste);border-radius:18px;padding:14px;border:1px solid var(--linea)}
.chat__quien{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.chat__av{width:32px;height:32px;border-radius:50%;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.chat__quien b{display:block;font-size:12.5px}
.chat__quien small{display:block;font-size:10.5px;color:var(--sec)}
.chat__msg{background:#fff;border-radius:14px 14px 14px 4px;padding:11px 13px;font-size:13px;
  color:var(--cuerpo);box-shadow:var(--shadow-sm);max-width:74%}
.chat__adj{display:flex;align-items:center;gap:9px;background:#fff;border-radius:12px;padding:7px;
  margin-top:9px;max-width:74%;box-shadow:var(--shadow-sm)}
.chat__adj img{width:44px;height:36px;border-radius:8px;object-fit:cover}
.chat__adj b{display:block;font-size:11px}
.chat__adj small{display:block;font-size:10px;color:var(--sec)}

@media (max-width:720px){
  .props{grid-template-columns:1fr 1fr}
  .chat__msg,.chat__adj{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .momento.on{animation:none}
}

/* =========================================================
   9 · CIERRE
   ========================================================= */
.close-wrap{width:calc(100% - 32px);max-width:var(--maxw);margin:16px auto}
/* el cierre vuelve al gradiente de ACENTO (el azul del producto): es el clímax */
.close{background:var(--grad);color:#fff;text-align:center;
  border-radius:var(--r-grad) var(--r-grad) var(--r-belly) var(--r-grad);
  box-shadow:var(--shadow);padding:52px 26px}
.close h2{color:#fff;margin-bottom:14px;max-width:20ch;margin-left:auto;margin-right:auto}
.close .lead{color:rgba(255,255,255,.9);margin:0 auto}
.close__perks{list-style:none;display:flex;gap:12px 26px;justify-content:center;flex-wrap:wrap;
  margin:26px 0 28px}
.close__perks li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;
  color:rgba(255,255,255,.94)}
.close__perks .i{width:17px;height:17px;color:#c9f5dc}
.close .mailform{margin:0 auto}
.close .mailform__note{text-align:center;padding:0;margin-top:10px}
.stores{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.store{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);border-radius:14px;padding:9px 18px}
.store svg{width:20px;height:20px}
.store small{display:block;font-size:9.5px;color:rgba(255,255,255,.78)}
.store b{display:block;font-size:14px;margin-top:-1px}
.store:hover{background:rgba(255,255,255,.22)}

/* ---- fase pre: las mismas tiendas, apagadas ---- */
/* el CTA del header en fase pre: la etiqueta cuelga del botón, así que necesita
   sitio arriba para no comerse el borde de la barra */
.cta-prox{position:relative;display:inline-flex;margin-top:9px}
/* El botón bloqueado: glass apagado, candado, sin hover y con el cursor de
   "no se puede". El lleno se leía como "esto ya se puede hacer" y no se puede.
   La etiqueta de arriba es la única sólida: es lo que tiene que saltar. */
.btn--bloq{
  background:rgba(35,86,201,.10);
  color:rgba(35,86,201,.62);
  border:1px solid rgba(35,86,201,.26);
  backdrop-filter:blur(8px);
  box-shadow:none;
  cursor:not-allowed;
}
.btn--bloq:hover{background:rgba(35,86,201,.10);transform:none}
.btn--bloq .i{width:15px;height:15px;opacity:.8}
/* la etiqueta sí va sólida: es lo único que tiene que saltar.
   z-index porque el backdrop-filter del botón crea contexto de apilado y, al
   venir después en el DOM, se pintaba ENCIMA de la etiqueta y la tapaba. */
.cta-prox .store__prox{background:var(--azul);color:#fff;top:-9px;z-index:2}

.stores__label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:26px}
.stores--prox{margin-top:16px}
.stores--prox .store{position:relative;cursor:not-allowed;
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.5)}
.stores--prox .store:hover{background:rgba(255,255,255,.07)}
.stores--prox .store small{color:rgba(255,255,255,.42)}
/* la etiqueta va centrada sobre su badge (no pegada a la izquierda) y con los
   colores de siempre: celeste de fondo, azul de marca el texto */
.store__prox{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--celeste);color:var(--azul);border-radius:100px;padding:2px 10px;
  font-size:9.5px;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  box-shadow:0 6px 14px -8px rgba(10,18,38,.7)}
.brandline{margin-top:26px;font-size:13px;color:rgba(255,255,255,.82);font-weight:500}

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{background:var(--navy);color:#fff;max-width:var(--maxw);margin:16px auto 0;
  width:calc(100% - 32px);border-radius:var(--r-block) var(--r-block) 0 0;padding:40px 28px 26px}
.foot__top{display:grid;gap:32px}
.foot__logo{height:30px;width:auto;filter:brightness(0) invert(1);margin-bottom:16px}
/* la URL de defensa del consumidor es un token larguísimo: si no se parte, desborda */
.foot__datos{font-size:13px;line-height:1.7;color:rgba(255,255,255,.66);margin-bottom:12px;
  overflow-wrap:anywhere}
.foot__datos a{color:rgba(255,255,255,.82);text-decoration:none}
.foot__datos a:hover{color:#fff;text-decoration:underline}
/* quedo una sola columna (Contacto): ver el comentario del pie en index.html */
.foot__cols{display:grid;grid-template-columns:1fr;gap:26px 20px}
.foot__col{display:flex;flex-direction:column;gap:9px}
.foot__col b{font-size:14.5px;margin-bottom:2px}
.foot__col a{color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px}
.foot__col a:hover{color:#fff}
.foot__bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.foot__legal{font-size:12.5px;color:rgba(255,255,255,.5)}
.foot__legales{display:flex;flex-wrap:wrap;gap:20px}
.foot__legales a{color:rgba(255,255,255,.72);text-decoration:none;font-size:13px}
.foot__legales a:hover{color:#fff}
.foot__social{display:flex;gap:10px;margin-left:auto}
.foot__social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;display:grid;place-items:center;transition:background .15s ease}
.foot__social a:hover{background:rgba(255,255,255,.24)}
.foot__social svg{width:18px;height:18px}
/* destinos que todavía no tenemos: se ven, pero no son links y no navegan */
.foot__legales .ph-link{color:rgba(255,255,255,.45);font-size:13px;cursor:default}
.foot__social .ph-link{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.45);display:grid;place-items:center;cursor:default}

/* ---------- WhatsApp flotante ---------- */
.wsp{position:fixed;right:22px;bottom:22px;z-index:80;
  width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);
  transition:transform .15s ease,box-shadow .15s ease}
.wsp svg{width:30px;height:30px}
.wsp:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(37,211,102,.8)}

/* =========================================================
   DESKTOP ( >= 860px )
   ========================================================= */
@media (min-width:860px){
  .block,.plain,.hero,.site-head,.site-foot,.close{padding-left:56px;padding-right:56px}
  .plain{padding-top:76px;padding-bottom:76px}
  .block{padding-top:60px;padding-bottom:60px}
  h1{font-size:clamp(42px,4.2vw,54px)}

  /* hero a dos columnas */
  .hero{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center;
    padding-top:clamp(26px,5vh,58px);padding-bottom:clamp(26px,5vh,58px)}
  .hero__shot{margin:0;justify-self:end;max-width:var(--celu);width:100%}

  /* el título de esta sección entra en UNA línea */
  .tiempo h2{white-space:nowrap;font-size:clamp(28px,3vw,38px)}

  /* rodillo: las dos columnas enfrentadas, el riel vertical en el medio */
  .rodillo{grid-template-columns:1fr auto 1fr;gap:22px}
  .rod-mid{flex-direction:column}
  .rod-rail{width:3px;height:auto;flex:1;min-height:100px}

  /* "cómo funciona": título a la izquierda, carrusel a la derecha.
     Así la sección deja de apilar título + fila y baja mucho de alto. */
  .how{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .how__head{margin-bottom:0}
  /* cuerpo más chico: el título entra en DOS renglones en esta columna */
  .how h2{font-size:clamp(22px,2.2vw,27px)}
  .slide{gap:16px;padding:2px}
  .slide__viz{padding:20px;min-height:230px}
  /* alturas parejas entre los 4 pasos: el carrusel gira, así que el más alto
     se le come el alto a toda la sección */
  .how{padding-top:48px;padding-bottom:48px}
  .viz-tile{aspect-ratio:auto;height:92px}
  .viz-deck{height:198px}
  .viz-prop{width:min(272px,100%)}
  .viz-prop img{height:134px}
  .viz-bar{padding:8px 14px}
  .viz-votes li{padding:6px}
  .viz-votes img{width:38px;height:38px}
  .slide__txt{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start}
  .slide__txt .step__n{grid-row:span 2;margin-bottom:0}
  .slide__txt p{max-width:52ch}

  /* experiencia del cliente · la lista vuelve a la columna izquierda */
  .cliente{display:grid;grid-template-columns:1.02fr .98fr;gap:0 56px;align-items:center}
  .cliente__copy{grid-column:1;grid-row:1}
  .cliente__list{grid-column:1;grid-row:2;margin-top:24px}
  .cliente__shot{grid-column:2;grid-row:1 / span 2;margin:0;justify-self:end}

  /* sumá tus propiedades · el input vuelve a la columna izquierda */
  .red{display:grid;grid-template-columns:1.04fr .96fr;gap:0 48px;align-items:center}
  .red__copy{grid-column:1;grid-row:1}
  /* la que se ubica en la grilla es la caja, no el form: adentro van el
     campo y la nota de respuesta. */
  .urlform-wrap{grid-column:1;grid-row:2;margin-top:24px}
  .urlform{margin-top:0}
  .red__viz{grid-column:2;grid-row:1 / span 2;margin-top:0;display:flex;justify-content:flex-end}

  /* footer: datos a la izquierda, tres columnas de links a la derecha */
  .foot__top{grid-template-columns:1.15fr .85fr;gap:56px}
  .foot__cols{grid-template-columns:1fr;gap:20px;text-align:right}
}

/* =========================================================
   MOBILE ( < 860px )
   Los elementos que se salen del recuadro tienen que salir MENOS:
   a 360/390 el desborde llegaba al documento.
   ========================================================= */
@media (max-width:859px){
  /* --- descargar la pantalla: se sacan las piezas que repiten algo que ya está --- */
  /* el hero pierde sus CTAs: el botón del header queda fijo arriba todo el scroll */
  .hero-ctas{display:none}
  /* en fase pre el pedido de mail ES el hero: se queda, sólo cae el link secundario */
  [data-fase="pre"] .hero-ctas--pre{display:flex}
  [data-fase="pre"] .hero-ctas--pre .linkplay{display:none}
  /* el link "Ver ejemplo" se va: en mobile no hay lugar para el desvío */
  .red__ej{display:none}
  /* en el cierre mandan los botones de tienda, que son los que van a funcionar */
  .close__btn{display:none}
  .stores{margin-top:4px}

  /* --- reordenado: el recurso gráfico primero, el detalle después --- */
  .cliente{display:flex;flex-direction:column}
  .cliente__copy{order:1}
  .cliente__shot{order:2}
  .cliente__list{order:3;margin-top:30px}

  .red{display:flex;flex-direction:column}
  .red__copy{order:1}
  .red__viz{order:2}
  .urlform-wrap{order:3;margin-top:30px}
  .urlform{margin-top:0}

  /* a 390 el celu ocupa casi todo el ancho: tres satélites lo tapaban entero.
     Queda sólo el chip, que monta el borde sin comerse contenido. */
  .sat--busq,.sat--prop{display:none}
  .sat--aviso{right:-4%;top:38.2%}

  /* los campos se apilan: en una sola línea el botón se come el input */
  .urlform,.mailform{flex-direction:column;align-items:stretch;border-radius:22px;padding:8px;gap:8px}
  .urlform input,.mailform input{padding:11px 14px}
  .urlform .btn,.mailform .btn{justify-content:center}
  .const{max-width:300px}
  .const__prop{right:-12px;width:170px}
  .const__mini--voto{right:-6px}
  .const__mini--conteo{right:-4px}
  .const__chip--link{left:-4px}
  .const__mini--conteo{left:-6px}
  .viz-prop{right:-14px}
  .viz-badge{right:-6px;padding:8px 14px}
  .viz-toast{left:-6px}
  .viz-suma{left:-6px}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .marquee__track,.logos__track{animation:none}
  .faq-panel__in{animation:none}
  .const__chip,.const__mini,.const__prop{animation:none}
  .slide.is-on .viz-prop--top,
  .slide.is-on .viz-prop--next,
  .slide.is-on .viz-prop--top .viz-vote--si,
  .slide.is-on .viz-suma,
  .slide.is-on .viz-search__caret,
  .viz-live i{animation:none}
  .chip,.viz-toast,.viz-votes li,.viz-tile{opacity:1;transform:none}
  .rod-track,.carousel__track{transition:none}
  .rod-arrow{transition:none}
  .rod-arrow:hover,.rod-arrow:active{transform:none}
}