/* Landing híbrida (16-sep-2026): el sistema claro y corporativo de antes —webflow.css + custom.css,
   hero con video, dispositivos de #casos y #dia— con el contenido Meta-first de la fase D.
   Todo lo nuevo vive bajo `.lp` para que no toque el resto de la web (conectores y legales
   siguen solo con custom.css). Tipografías y colores del sistema anterior: Neue Machina en
   títulos, Neue Haas en texto, JetBrains Mono para datos; azul #315fef, crema #f3f1ea. */

/* ---------- hero: palabra que rota y su sello «Próximamente» ---------- */
.b2b-hero-grid.is-copy-only { grid-template-columns: minmax(0, 1fr); }
.b2b-hero-grid.is-copy-only .b2b-hero-copy { max-width: 46rem; }
/* La palabra que rota reserva el ancho de la más larga (`data-longest`): el titular
   no cambia de ancho ni salta de alto —ni se va a una línea más— al rotar. */
.b2b-hero-title .b2b-hero-type { position: relative; display: block; width: max-content; max-width: 100%; }
/* La reserva es la palabra más larga (`data-longest`, traducida en cada idioma)
   ocupando su bloque DE VERDAD: ancho y alto, con los mismos saltos de línea.
   Reservar solo el ancho bastaba en castellano e inglés, pero en portugués
   «comprador de mídia» ocupa dos renglones en móvil y el titular crecía 74 px
   justo al enseñarla. La palabra visible va encima, fuera del flujo. */
.b2b-hero-title .b2b-hero-type::before { content: attr(data-longest); display: block; visibility: hidden; pointer-events: none; }
/* El relevo es un fundido, no un tecleo: en pantalla hay siempre una palabra
   entera. Escribirla letra a letra dejaba el renglón vacío o a medias («Tu me
   de Meta Ads, en WhatsApp») durante buena parte del ciclo. */
/* El relevo se TIENE que ver: un fundido a secas pasaba desapercibido —la
   palabra cambiaba y nadie se enteraba de que el titular dice tres cosas—. Sale
   hacia arriba y la siguiente entra desde abajo, que es el gesto que lee el ojo
   como «esto se está turnando». */
.b2b-hero-title #hero-typed {
  position: absolute; inset: 0;
  transition: opacity .28s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
}
.b2b-hero-title #hero-typed.is-changing { opacity: 0; transform: translateY(-.34em); }
/* La ENTRADA va por animación, no por transición entre clases. Con clases hacían
   falta dos frames pintados en el orden justo y el navegador no los daba: la
   palabra nueva terminaba el gesto de la anterior —bajando desde arriba— en vez
   de empezar el suyo. Una animación se reinicia y corre entera, mire el
   navegador cuando mire. */
@keyframes lp-entra-palabra {
  from { opacity: 0; transform: translateY(.42em); }
  to { opacity: 1; transform: none; }
}
.b2b-hero-title #hero-typed.is-entrando { animation: lp-entra-palabra .44s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .b2b-hero-title #hero-typed.is-entrando { animation: none; } }
@media (prefers-reduced-motion: reduce) { .b2b-hero-title #hero-typed { transition: none; } }
/* Carrusel de palabras (16-sep): JS crea `.b2b-hero-reel` con una pieza por
   palabra y mueve cada una con transform (posición + escala) y opacidad. La
   palabra de `#hero-typed` queda como respaldo sin JS y se oculta cuando hay reel. */
.b2b-hero-title .b2b-hero-type.has-reel > #hero-typed { visibility: hidden; }
.b2b-hero-title .b2b-hero-type > .b2b-hero-reel { position: absolute; inset: 0; display: block; pointer-events: none; }
.b2b-hero-title .b2b-hero-type > .b2b-hero-reel > span {
  position: absolute; left: 0; top: 0; display: block; white-space: nowrap; color: var(--b2b-blue, #315fef);
  transform-origin: 0 0; will-change: transform, opacity;
  transition: transform .75s cubic-bezier(.65, 0, .25, 1), opacity .6s ease;
}
/* La grande que se encoge se desvanece antes: a mitad del giro no se encima con la que crece. */
.b2b-hero-title .b2b-hero-reel > span.is-shrinking { transition: transform .75s cubic-bezier(.65, 0, .25, 1), opacity .22s ease; }
.b2b-hero-title .b2b-hero-reel > span.is-leaving { transition: transform .38s cubic-bezier(.5, 0, .75, 0), opacity .3s ease; }
.b2b-hero-title .b2b-hero-reel > span.is-jump,
.b2b-hero-title .b2b-hero-reel.is-instant > span { transition: none; }
@media (prefers-reduced-motion: reduce) { .b2b-hero-title .b2b-hero-reel > span { transition: none; } }
/* El sello «Próximamente» del titular se quitó el 16-sep: el estado de cada
   agente lo cuenta la sección del equipo, no la portada. */
.b2b-button svg { width: 1.15rem; height: 1.15rem; flex: none; }
@media (max-width: 767px) {
  /* Dos botones en una fila no caben con «Pruébalo gratis en WhatsApp»: van apilados. */
  .b2b-hero-actions { grid-template-columns: 1fr; }
  .b2b-button { white-space: normal; text-align: center; }
  .b2b-hero-note span { white-space: normal; }
  /* El hero ya no ocupa la pantalla entera con la tarjeta pegada abajo.
     `justify-content: flex-end` sobre un hero de 100 % dejaba 245 px (29 % de
     un 390×844) de vídeo SIN texto encima, y encima enseñaba el techo de la
     oficina. Ahora la franja de vídeo es fija —lo que se quiere ver— y la
     tarjeta empieza justo después, así que el alto lo manda el contenido y no
     el tamaño de la pantalla. */
  .b2b-hero { min-height: 0; }
  .b2b-hero-padding { justify-content: flex-start; padding-top: calc(var(--nav-height, 4.5rem) + 8.5rem); padding-bottom: 0; }
  /* La caja del vídeo mide la FRANJA, no el hero entero, y ahí está la clave:
     el vídeo de móvil es 720×1280 y en una caja de 390×731 encajaba por altura
     —lo que sobraba era el ancho—, así que `object-position` vertical no movía
     nada y la tira siempre caía en el techo y las tuberías. Acotada la caja,
     sobra alto y el encuadre sí elige: al 35 % se ve a la persona con el
     teléfono (al 20 % se le corta la cabeza; del 50 % en adelante, solo torso,
     suelo y sillas). */
  .b2b-hero-media { height: 15rem; bottom: auto; }
  .b2b-hero-media video { object-position: 50% 35%; }
}

/* ---------- hero corto con franja de clientes (16-sep) ----------
   Referencia: 11x.ai. El hero ocupa la primera pantalla: titular grande abajo a
   la izquierda, una frase, dos botones y, pegada a la base, la franja de
   empresas que confían. Sin panel a la derecha: el vídeo respira. */
.b2b-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.b2b-hero-padding { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--nav-height, 5rem) + 2rem); padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.b2b-hero-grid.is-short { grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr); align-items: end; gap: clamp(2rem, 5vw, 5rem); }
.b2b-hero-grid.is-short .b2b-hero-visual { width: min(100%, 26rem); margin: 0 0 0 auto; padding-bottom: 0; }
/* Por debajo de 992 px el panel se iría debajo del texto y empujaría la franja
   fuera de la pantalla: el hero corto se queda solo con el texto. */
@media (max-width: 991px) {
  .b2b-hero-grid.is-short { grid-template-columns: minmax(0, 1fr); }
  .b2b-hero-grid.is-short .b2b-hero-visual { display: none; }
}
.b2b-hero-grid.is-short .b2b-hero-copy { max-width: 44rem; }
.b2b-hero-grid.is-short .b2b-hero-title { max-width: none; font-size: clamp(3rem, 5.4vw, 5.6rem); line-height: .94; }
.b2b-hero-grid.is-short .b2b-hero-lede { max-width: 32rem; margin-top: 1.25rem; font-size: clamp(1rem, 1.2vw, 1.15rem); color: #3f423f; }
.b2b-hero-grid.is-short .b2b-hero-actions { margin-top: 1.75rem; }
/* El velo cubre la columna del texto y sube desde abajo para que la franja
   se lea; el panel de la derecha flota sobre el vídeo con su propio fondo. */
.b2b-hero-glow {
  background:
    linear-gradient(90deg, rgba(248, 247, 243, .92) 0%, rgba(248, 247, 243, .78) 34%, rgba(248, 247, 243, .3) 58%, rgba(248, 247, 243, 0) 78%),
    linear-gradient(180deg, transparent 55%, rgba(248, 247, 243, .55) 100%);
}

/* La respuesta de Comando como burbuja entrante de WhatsApp (modo oscuro, igual
   que la pregunta): es lo que el operador recibe de verdad, no una tarjeta. */
.b2b-hero-grid.is-short .power-context { width: 82%; }
.b2b-hero-grid.is-short .power-context p { font-size: .88rem; }
.power-reply {
  position: relative; width: 94%; margin-top: .7rem; padding: .8rem .95rem 1.5rem;
  color: #e9edef; background: #202c33; border-radius: .25rem 1rem 1rem 1rem;
  box-shadow: 0 18px 44px rgba(9, 20, 30, .3);
  font-family: "Neuehaasunicaw 1 G", Inter, sans-serif; font-size: .92rem; line-height: 1.42;
  animation: pw-in .55s ease-out .45s both;
}
.power-reply p { margin: 0; text-wrap: pretty; }
.power-reply p + p { margin-top: .15rem; }
.power-reply p:last-of-type { margin-top: .75rem; }
.power-reply b { font-weight: 650; color: #fff; }
.power-reply time { position: absolute; right: .7rem; bottom: .35rem; font-size: .62rem; color: rgba(233, 237, 239, .58); }
@media (prefers-reduced-motion: reduce) { .power-reply { animation: none; } }

.hero-trust {
  position: relative; z-index: 2;
  padding: 1.35rem 0 1.6rem;
  border-top: 1px solid rgba(21, 21, 21, .1);
  background: rgba(248, 247, 243, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hero-trust-label { margin: 0 0 1rem; font: 500 .72rem/1 "Jetbrainsmono Variable", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #5f625f; }
.hero-trust-track {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Dos filas iguales que se desplazan -100%: el bucle no tiene costura. El relleno
   final de cada fila es IGUAL al hueco entre logos (`--trust-gap`): con la mitad,
   en la unión entre una vuelta y la siguiente dos logos quedaban más juntos.
   Velocidad: ~42 px/s en escritorio y ~33 px/s en móvil (30 % más que antes). */
.hero-trust-row {
  --trust-gap: clamp(3.25rem, 6.5vw, 5.85rem);
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--trust-gap);
  margin: 0; padding: 0 var(--trust-gap) 0 0; list-style: none;
  animation: hero-trust-scroll 62s linear infinite;
}
/* Los logos van en un solo tono: la franja dice «hay empresas detrás», no
   compite con el titular. `brightness(0)` los deja en negro sea cual sea su
   color y la opacidad los baja a gris. Ripley es la excepción: su logo ES la
   caja negra con rayas, y en negro plano quedaba un bloque; va en grises.
   Cada SVG está recortado a su tinta real y la altura de cada uno se calculó
   para que todos ocupen la misma área visible (alto² × proporción × √densidad
   constante): un logotipo ancho y fino pide menos alto que uno compacto. */
.hero-trust-row li { --h: 1.6rem; display: flex; align-items: center; gap: .5rem; height: 2.75rem; white-space: nowrap; opacity: .6; }
.hero-trust-row img { display: block; height: var(--h); width: auto; filter: brightness(0); }
.hero-trust-row li span { font: 500 .95rem/1 "Neuehaasunicaw 1 G", Inter, sans-serif; color: #151515; letter-spacing: -.01em; }
.hero-trust-row .is-domestika { --h: 1.45rem; }
.hero-trust-row .is-aws { --h: 2.6rem; }
.hero-trust-row .is-remax { --h: 1.3rem; }
.hero-trust-row .is-claro { --h: 2.05rem; }
.hero-trust-row .is-nestle { --h: 1.62rem; }
.hero-trust-row .is-falabella { --h: 2.2rem; }
.hero-trust-row .is-ripley { --h: 1.85rem; }
.hero-trust-row .is-ibm { --h: 2.0rem; }
.hero-trust-row .is-popeyes { --h: 1.38rem; }
.hero-trust-row .is-marriott { --h: 2.15rem; }
.hero-trust-row .is-planetfitness { --h: 2.4rem; }
.hero-trust-row .is-alamo { --h: 1.85rem; }
.hero-trust-row .is-miniso { --h: 2.6rem; }
.hero-trust-row .is-wallstreetenglish { --h: 2.45rem; }
/* Alamo y Miniso son letras blancas sobre caja de color, como Ripley: en grises. */
.hero-trust-row :is(.is-ripley, .is-alamo, .is-miniso) img { filter: grayscale(1) contrast(1.1); }
/* El azul de Alamo queda muy claro en grises: más oscuro y con contraste. */
.hero-trust-row .is-alamo img { filter: grayscale(1) brightness(.62) contrast(1.6); }
@keyframes hero-trust-scroll { to { transform: translateX(-100%); } }
.hero-trust:hover .hero-trust-row { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-trust-row { animation: none; } }

@media (max-width: 767px) {
  .b2b-hero { min-height: 0; }
  /* Móvil (16-sep): el hero llena el alto del teléfono. El vídeo deja de ser
     absoluto y pasa a ser una franja FLEXIBLE en el flujo (menú · vídeo · tarjeta ·
     logos): crece para ocupar lo que sobra, con un mínimo de 18rem para que no
     pierda protagonismo en teléfonos bajos y un máximo de 36rem; el hero entero
     no pasa de 58rem en pantallas muy altas.
     Encuadre: el vídeo es 720×1280, así que a lo ancho de la franja mide
     177,78cqw de alto. Las cabezas están al 30 % de ese alto; se colocan 1,5rem
     bajo el borde de la franja, sin dejar nunca hueco abajo (el `max`). */
  .b2b-hero { min-height: min(100vh, 58rem); min-height: min(100svh, 58rem); }
  .b2b-hero-media {
    position: relative; inset: auto; flex: 1 1 auto; height: auto;
    min-height: 18rem; max-height: 36rem; margin-top: var(--nav-height, 4rem);
    container-type: size;
  }
  .b2b-hero-media video { height: 100%; object-position: 50% 30%; object-position: 50% max(calc(1.5rem - .3 * 177.78cqw), calc(100cqh - 177.78cqw)); }
  .b2b-hero-glow { display: none; }
  .b2b-hero-padding { flex: none; padding-top: 0; padding-bottom: 0; margin-top: -1.5rem; }
  .b2b-hero-grid.is-short .b2b-hero-copy { padding: 1.25rem 1.25rem 1.15rem; }
  .b2b-hero-grid.is-short .b2b-hero-title { font-size: clamp(2.3rem, 10.4vw, 2.9rem); }
  .b2b-hero-grid.is-short .b2b-hero-lede { margin-top: .85rem; }
  .b2b-hero-grid.is-short .b2b-hero-actions { margin-top: 1.2rem; }
  /* En móvil la franja sigue a la hoja del texto, del mismo crema. */
  .hero-trust { padding: 1rem 0 1.25rem; background: rgba(243, 241, 234, .96); border-top-color: rgba(21, 21, 21, .08); }
  .hero-trust-label { margin-bottom: .75rem; font-size: .64rem; }
  .hero-trust-row { --trust-gap: 2.6rem; animation-duration: 47s; }
  .hero-trust-row li { height: 2.1rem; }
  .hero-trust-row img { height: calc(var(--h) * .72); }
  .hero-trust-row li span { font-size: .78rem; }
}

/* ---------- base de las secciones nuevas ---------- */
.lp {
  --lp-ink: #151515; --lp-muted: #5f625f; --lp-soft: #8a8c88; --lp-blue: #315fef; --lp-line: #dedbd2;
  --lp-cream: #f3f1ea; --lp-paper: #fbfaf6;
  --wa-bg: #0b141a; --wa-in: #202c33; --wa-out: #005c4b; --wa-green: #00a884;
  --ok: #127a52; --soon: #5f625f;
  --d-ok: #3fbf84; --d-warn: #e9b949; --d-bad: #f06a64; --d-soon: #b8b5ad;
  /* Grafito (17-sep): las superficies oscuras son neutros cálidos, primos de la
     tinta #151515 y del crema #f3f1ea. Nada de azul-lavanda ni de halos: el único
     acento es el azul de marca, sólido, y sólo marca acción o «esto lo hace Comando».
     --g-*: fondos · --gl-*: líneas (crema translúcido) · --gt-*: texto. */
  --g-950: #0c0c0b; --g-900: #1c1c1a; --g-850: #262624; --g-800: #2a2a27; --g-700: #4a4944; --g-600: #a3a097;
  --gl-grid: rgba(243, 241, 234, .05); --gl-1: rgba(243, 241, 234, .22); --gl-2: rgba(243, 241, 234, .34); --gl-3: rgba(243, 241, 234, .50);
  --gt-1: #fbfaf6; --gt-2: #e2dfd7; --gt-3: #b9b6ae;
  --accent: #315fef;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Los carriles arrancan donde arranca el texto: el mismo margen que .padding-global
     (1.88rem; 1.25rem en móvil) y el tope de .container-large (90rem). */
  --gutter: 1.88rem;
  --rail-pad: max(var(--gutter), calc((100vw - 90rem) / 2));
  position: relative; z-index: 3;
  color: var(--lp-ink);
  font-family: "Neuehaasunicaw 1 G", Inter, system-ui, sans-serif;
  font-size: 1.0625rem; line-height: 1.55;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp p { margin: 0; }
.lp q { quotes: "«" "»"; }
.lp svg { max-width: 100%; }
.lp-section { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; overflow: hidden; scroll-margin-top: calc(var(--nav-height, 5rem) + .5rem); }
.lp-cream {
  background-color: var(--lp-cream);
  background-image: linear-gradient(rgba(21, 21, 21, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 21, 21, .045) 1px, transparent 1px);
  background-size: 40px 40px;
}
.lp-paper { background: var(--lp-paper); }
.lp-dark {
  color: #fff;
  background-color: var(--g-950);
  background-image:
    linear-gradient(var(--gl-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--gl-grid) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
}
.lp h2, .lp h3 { margin: 0; color: inherit; text-wrap: balance; }
.lp h2 { font-family: "Neuehaasunicaw 1 G", Inter, sans-serif; font-weight: 500; font-size: clamp(2.1rem, 3.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.025em; }
.lp h3 { font-family: Neuemachina, "Space Grotesk", Inter, sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.lp-head { text-align: center; max-width: 50rem; margin: 0 auto 3rem; }
.lp-head.is-left { text-align: left; margin: 0; }
.lp-eyebrow { display: inline-block; margin-bottom: 1rem; font: 500 .72rem/1 "Jetbrainsmono Variable", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); }
.lp-dark .lp-eyebrow { color: var(--gt-3); }
.lp-sub { margin-top: 1rem !important; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.45; color: var(--lp-blue); text-wrap: pretty; }
.lp-dark .lp-sub { color: var(--gt-2); }
.lp-lede { margin-top: 1rem !important; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--lp-muted); text-wrap: pretty; }

/* ---------- sellos ---------- */
.lp .badge { display: inline-flex; align-items: center; gap: .45rem; font: 500 .7rem/1 "Jetbrainsmono Variable", ui-monospace, monospace; letter-spacing: .04em; padding: .42rem .65rem; border-radius: 999px; white-space: nowrap; }
.lp .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lp .badge.ok { color: var(--ok); background: rgba(18, 122, 82, .08); border: 1px solid rgba(18, 122, 82, .25); }
.lp .badge.soon { color: var(--soon); background: rgba(21, 21, 21, .04); border: 1px dashed rgba(21, 21, 21, .28); }
.lp .badge.soon::before { background: transparent; border: 1.5px dashed currentColor; }
.lp-dark .badge.soon { color: var(--gt-2); background: rgba(243, 241, 234, .05); border-color: var(--gl-2); }

/* ---------- chat de WhatsApp en miniatura ---------- */
.lp .mini-chat { background: var(--wa-bg) radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 14px 14px; border-radius: 1rem; padding: .9rem .65rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; border: 1px solid #1c2a31; }
.lp .msg { display: flex; }
.lp .msg.me { justify-content: flex-end; }
.lp .bubble { max-width: 92%; padding: .5rem .65rem 1.15rem; border-radius: .75rem; font: 400 .86rem/1.4 "Neuehaasunicaw 1 G", Inter, sans-serif; color: #e9edef; position: relative; text-wrap: pretty; }
.lp .bubble b { font-weight: 600; }
.lp .me .bubble { background: var(--wa-out); border-top-right-radius: 3px; }
.lp .bot .bubble { background: var(--wa-in); border-top-left-radius: 3px; }
.lp .bubble time { position: absolute; right: .5rem; bottom: .25rem; font-size: .62rem; color: rgba(233, 237, 239, .6); }
.lp .bubble.confirm { display: flex; flex-direction: column; gap: .5rem; }
.lp .bubble.confirm span { align-self: flex-start; font: 600 .68rem/1 "Jetbrainsmono Variable", monospace; letter-spacing: .05em; color: #53bdeb; border: 1px solid rgba(83, 189, 235, .4); border-radius: .5rem; padding: .38rem .5rem; }

/* ---------- equipo de agentes ---------- */
.lp-agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.lp-agent { background: #fff; border: 1px solid var(--lp-line); border-radius: 1.4rem; padding: 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; box-shadow: 0 24px 50px -40px rgba(21, 21, 21, .35); }
.lp-agent.is-soon { background: repeating-linear-gradient(135deg, #fbfaf7 0 14px, #f5f3ee 14px 28px); border-style: dashed; border-color: #d6d2c8; box-shadow: none; }
.lp-agent-meta { display: flex; flex-direction: column; min-width: 0; }
.lp-agent-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.lp-agent-icon { width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center; background: rgba(49, 95, 239, .1); color: var(--lp-blue); flex: none; }
.lp-agent.is-soon .lp-agent-icon { background: rgba(21, 21, 21, .06); color: var(--soon); }
.lp-agent-icon svg { width: 1.75rem; height: 1.75rem; }
.lp-agent h3 { font-size: 1.75rem; margin: 1rem 0 .5rem; }
.lp-agent p { color: var(--lp-muted); }
.lp-agent .foot { margin-top: auto; padding-top: 1rem; font: 500 .74rem/1.45 "Jetbrainsmono Variable", monospace; color: var(--lp-soft); }
/* Atribución, la premium, en claro (16-sep). Nada de degradados, halos ni
   bordes de colores: se distingue por sobriedad editorial. Papel cálido, borde
   fino en tinta, ícono en bloque negro, sello en mono con filete y el chat con
   los colores reales de WhatsApp en modo claro. */
.lp-agent.is-premium {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  color: var(--lp-ink);
  background: #fffdf8;
  border: 1px solid #151515;
  box-shadow: 0 1px 0 rgba(21, 21, 21, .06), 0 28px 60px -44px rgba(21, 21, 21, .45);
}
.lp-agent.is-premium h3 { font-size: clamp(2rem, 3.2vw, 2.75rem); margin-top: 1.25rem; }
.lp-agent.is-premium p { color: #4d4f4c; font-size: 1.1rem; max-width: 30rem; }
.lp-agent.is-premium .lp-agent-icon { background: #151515; color: #fff; }
.lp-premium-tag {
  display: inline-flex; align-items: center; padding: .42rem .6rem; border-radius: .3rem;
  font: 600 .66rem/1 "Jetbrainsmono Variable", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: #151515; background: transparent; border: 1px solid #151515;
}
/* WhatsApp en modo claro en las CUATRO tarjetas del equipo: fondo beige,
   saliente verde claro, entrante blanca, como se ve en el teléfono. */
.lp-agent .mini-chat { background: #efeae2; border: 1px solid #e3ddd3; box-shadow: none; }
.lp-agent .bubble { color: #111b21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.lp-agent .me .bubble { background: #d9fdd3; }
.lp-agent .bot .bubble { background: #fff; }
.lp-agent .bubble b { color: #111b21; }
.lp-agent .bubble time { color: #667781; }
.lp-agent .bubble.confirm span { color: #027eb5; border-color: rgba(2, 126, 181, .35); }
.lp-agent.is-premium .mini-chat { padding: 1.2rem .9rem; }
.lp-agent.is-premium .bubble { font-size: .95rem; }
.lp-agent.is-premium .foot.lp-flow { display: flex; align-items: center; gap: .7rem; color: #151515; letter-spacing: .06em; text-transform: uppercase; }
.lp-flow-side { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .65rem; border: 1px solid #d6d1c6; border-radius: .3rem; background: #fff; }
.lp-flow-side img { width: 1rem; height: 1rem; filter: brightness(0); opacity: .85; }
.lp-flow-side img + img { margin-left: -.1rem; }
.lp-flow-arrow { width: 2rem; height: 1px; position: relative; background: #151515; }
.lp-flow-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid #151515; border-right: 1px solid #151515; transform: rotate(45deg); }
@media (max-width: 767px) {
  .lp-agent.is-premium p { font-size: 1rem; }
  .lp-agent.is-premium .foot.lp-flow { gap: .5rem; font-size: .68rem; }
  .lp-flow-arrow { width: 1.4rem; }
}

/* Los tres agentes van en una fila de tres (la tarjeta de Atribución pasó a ser la animación de #atribucion), con
   el chat debajo del texto: en dos columnas quedaba un hueco junto a la tercera. */
@media (min-width: 992px) {
  .lp-agents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-agents .lp-agent { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .lp-agents .lp-agent .foot { padding-top: .75rem; }
  .lp-agents .lp-agent .mini-chat { margin-top: auto; }
}
@media (max-width: 991px) {
  .lp-agent.is-premium { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .lp-agent.is-premium p { font-size: 1rem; }
  .lp-agent.is-premium .foot.lp-flow { gap: .5rem; font-size: .68rem; }
  .lp-flow-arrow { width: 1.4rem; }
}

.lp-soon-note { margin-top: 2.25rem !important; text-align: center; color: var(--lp-muted); }
.lp-soon-note .badge { margin-left: .5rem; vertical-align: middle; }

/* ---------- carriles con botones (métricas) ---------- */
.lp-slider-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; }
.lp .slider-btns { display: flex; gap: .5rem; flex: none; }
.lp .slider-btns button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background .2s; }
.lp .slider-btns button:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }
.lp .slider-btns button:disabled { opacity: .35; cursor: default; }
.lp .slider-btns svg { width: 1.1rem; height: 1.1rem; }
.lp .rail { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad); padding: 0 var(--rail-pad) 1.5rem; scrollbar-width: none; }
.lp .rail::-webkit-scrollbar { display: none; }
.lp .rail:focus-visible { outline: 2px solid var(--gt-1); outline-offset: -2px; }

/* ---------- métricas con semáforo ---------- */
/* Un color, un significado: el nombre del KPI va en neutro (qué se mide) y el
   estado sale una sola vez, junto al número, con luces + palabra (cómo va).
   Así el estado no depende solo del color y la fila no parece un arcoíris. */
#metricas .lp-lede { color: var(--gt-2); max-width: 40rem; }
.lp .metric { scroll-snap-align: start; flex: 0 0 18.75rem; background: linear-gradient(180deg, #262624, #1e1e1c); border: 1px solid var(--gl-2); border-radius: 1.25rem; padding: 1.4rem; display: flex; flex-direction: column; min-height: 22rem; box-shadow: 0 1px 0 rgba(243, 241, 234, .05) inset, 0 18px 40px -24px rgba(0, 0, 0, .8); }
.lp .metric-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; min-height: 2.1rem; }
.lp .metric-name { display: inline-flex; align-items: center; padding: .42rem .7rem; border-radius: .5rem; font: 600 .86rem/1.15 "Jetbrainsmono Variable", monospace; letter-spacing: .05em; color: var(--gt-1); text-transform: uppercase; white-space: nowrap; background: rgba(243, 241, 234, .05); border: 1px solid var(--gl-2); }
.lp .metric-value { font: 600 3rem/1 Neuemachina, "Space Grotesk", sans-serif; letter-spacing: -.04em; color: var(--gt-1); margin: 1.3rem 0 .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp .metric-value small { font: 500 .9rem/1 "Jetbrainsmono Variable", monospace; color: var(--gt-3); margin-left: .35rem; letter-spacing: 0; }
.lp .metric-value small.pre { margin: 0 .3rem 0 0; }
.lp .metric-state { --tone: var(--gt-2); align-self: flex-start; display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .7rem .3rem .5rem; border-radius: 999px; font: 600 .8rem/1 "Jetbrainsmono Variable", monospace; letter-spacing: .03em; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); }
.lp .metric-state.is-ok { --tone: var(--d-ok); } .lp .metric-state.is-warn { --tone: var(--d-warn); } .lp .metric-state.is-bad { --tone: var(--d-bad); }
.lp .metric-viz { margin: auto 0 1.1rem; padding-top: 1.4rem; }
.lp .metric-viz svg { display: block; width: 100%; height: 56px; overflow: visible; }
/* Pistas vacías de los gráficos: el #262626 del HTML se perdía sobre la tarjeta. */
.lp .metric-viz [fill="#262626"] { fill: var(--g-700); }
.lp .viz-cap { margin-top: .55rem !important; font: 500 .8rem/1.4 "Jetbrainsmono Variable", monospace; color: var(--gt-2); }
.lp .viz-cap .ok { color: var(--d-ok); } .lp .viz-cap .warn { color: var(--d-warn); } .lp .viz-cap .bad { color: var(--d-bad); } .lp .viz-cap .blue { color: var(--gt-1); }
.lp .metric .desc { color: var(--gt-2); font-size: .95rem; }
.lp .lights { display: flex; gap: 6px; }
.lp .light { width: 12px; height: 12px; border-radius: 50%; background: var(--g-700); box-shadow: inset 0 0 0 1px rgba(243, 241, 234, .08); transition: background .5s var(--ease), box-shadow .5s var(--ease); }
/* En la pastilla de estado las luces apagadas son aros (se distinguen de la encendida por forma, no solo por color). */
.lp .metric-state .lights { gap: 4px; }
.lp .metric-state .light { width: 10px; height: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--g-600); }
.lp .light.bad, .lp .metric-state .light.bad { background: var(--d-bad); box-shadow: 0 0 0 3px rgba(240, 106, 100, .16); }
.lp .light.warn, .lp .metric-state .light.warn { background: var(--d-warn); box-shadow: 0 0 0 3px rgba(233, 185, 73, .16); }
.lp .light.ok, .lp .metric-state .light.ok { background: var(--d-ok); box-shadow: 0 0 0 3px rgba(63, 191, 132, .16); }
html:not(.js) .lp .light[data-to="bad"] { background: var(--d-bad); box-shadow: none; }
html:not(.js) .lp .light[data-to="warn"] { background: var(--d-warn); box-shadow: none; }
html:not(.js) .lp .light[data-to="ok"] { background: var(--d-ok); box-shadow: none; }
html:not(.js) .lp .slider-btns { display: none; }
.lp .metric.is-soon { border-style: dashed; border-color: var(--gl-2); background: rgba(243, 241, 234, .02); }
.lp .metric.is-soon .metric-name { border-color: var(--gl-1); background: rgba(243, 241, 234, .03); }
.lp .metric.is-soon .metric-value { color: var(--g-600); }
.lp .metrics-foot { margin-top: 1rem !important; font: 500 .76rem/1.45 "Jetbrainsmono Variable", monospace; color: var(--gt-3); }

/* ---------- precios ---------- */
.lp .pricing-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.lp .trial-line { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--lp-ink); }
.lp .trial-line svg { width: 18px; height: 18px; color: #0b7a61; flex: none; }
.lp .billing { display: inline-flex; padding: 4px; border-radius: 999px; background: #ecEAE3; border: 1px solid var(--lp-line); }
.lp .billing button { font: 600 .9rem/1 "Neuehaasunicaw 1 G", Inter, sans-serif; border: 0; background: transparent; color: var(--lp-muted); padding: .62rem 1rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; transition: background .2s, color .2s; }
.lp .billing button[aria-pressed="true"] { background: #fff; color: var(--lp-ink); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .18); }
.lp .billing button span { font: 500 .66rem/1 "Jetbrainsmono Variable", monospace; letter-spacing: .03em; color: #0b7a61; background: rgba(0, 168, 132, .12); padding: .28rem .42rem; border-radius: 999px; }
.lp .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 2.4rem; }
.lp .plan { background: #fff; border: 1px solid var(--lp-line); border-radius: 1.25rem; padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.lp .plan.star { background: #151515; color: #fff; border-color: #151515; box-shadow: 0 30px 60px -30px rgba(21, 21, 21, .55); transform: translateY(-10px); }
.lp .plan-tag { position: absolute; top: -11px; right: 18px; background: var(--lp-blue); color: #fff; font: 500 .68rem/1 "Jetbrainsmono Variable", monospace; letter-spacing: .06em; padding: 6px 9px; border-radius: 999px; text-transform: uppercase; }
.lp .plan-name { font-size: 1.1rem; }
.lp .plan-result { font: 600 1.3rem/1.2 Neuemachina, "Space Grotesk", sans-serif; letter-spacing: -.02em; min-height: 3.2rem; text-wrap: balance; }
.lp .plan-price { font: 600 2.7rem/1 Neuemachina, "Space Grotesk", sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.lp .plan-price small { font: 500 .85rem/1 "Jetbrainsmono Variable", monospace; color: var(--lp-muted); letter-spacing: 0; margin-left: .25rem; }
.lp .plan.star .plan-price small, .lp .plan.star .plan-year { color: #a3a3a3; }
.lp .plan-year { margin-top: -.6rem !important; min-height: 1.1rem; font: 500 .76rem/1.4 "Jetbrainsmono Variable", monospace; color: var(--lp-muted); }
.lp .plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .93rem; }
.lp .plan li { display: grid; grid-template-columns: 18px 1fr; gap: .5rem; align-items: start; }
.lp .plan li svg { width: 16px; height: 16px; margin-top: 3px; color: #127a52; }
.lp .plan.star li svg { color: var(--d-ok); }
.lp .plan li.soon { color: var(--lp-muted); }
.lp .plan.star li.soon { color: #a3a3a3; }
.lp .plan li.soon svg { color: var(--soon); }
.lp .plan.star li.soon svg { color: var(--d-soon); }
.lp .plan li .badge { margin-top: .35rem; font-size: .62rem; padding: .32rem .5rem; }
.lp .plan.star li .badge.soon { color: var(--d-soon); background: rgba(245, 244, 239, .06); border-color: rgba(245, 244, 239, .3); border-style: dashed; }
.lp .plan-limits { margin-top: auto !important; padding-top: .9rem; border-top: 1px solid var(--lp-line); font: 500 .76rem/1.7 "Jetbrainsmono Variable", monospace; color: var(--lp-muted); }
.lp .plan.star .plan-limits { border-color: #2a2a2a; color: #a3a3a3; }
.lp .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.1rem; padding: .8rem 1.2rem; border-radius: 999px; font: 650 .95rem/1.1 "Neuehaasunicaw 1 G", Inter, sans-serif; text-decoration: none; border: 1px solid transparent; cursor: pointer; text-align: center; transition: transform .2s ease, background .2s ease, color .2s ease; }
.lp .btn:hover { transform: translateY(-2px); }
.lp .plan .btn { width: 100%; }
.lp .btn-dark { background: #151515; color: #fff; }
.lp .btn-dark:hover { background: var(--lp-blue); }
.lp .plan.star .btn-dark { background: #fff; color: #151515; }
.lp .plan.star .btn-dark:hover { background: var(--lp-blue); color: #fff; }
.lp .pricing-extras { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.5rem; margin-top: 1.75rem; font-size: .95rem; color: var(--lp-muted); text-align: center; }
.lp .pricing-extras a, .lp .pricing-crm-link a { color: var(--lp-ink); font-weight: 650; }
.lp .pricing-crm-link { margin-top: 2rem !important; text-align: center; color: var(--lp-muted); }
.lp .plans-noscript { margin-top: 2rem; font-size: 1.1rem; text-align: center; }

/* ---------- módulo CRM y calculadora ---------- */
.lp-crm { padding-top: 0; }
/* Dos columnas solo si hay dos celdas. Al irse la calculadora quedaba una sola
   y el texto se apelotonaba en la mitad izquierda con medio ancho en blanco:
   la rejilla seguía reservando sitio para algo que ya no existe. */
.lp-crm-grid:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.lp-crm-grid > :only-child { max-width: 46rem; }
.lp-crm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; border-top: 1px solid var(--lp-line); padding-top: clamp(4rem, 8vw, 6rem); }
.lp-crm-list { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-direction: column; gap: .8rem; }
.lp-crm-list li { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; color: #3c3a35; }
.lp-crm-list svg { width: 18px; height: 18px; margin-top: 4px; color: #127a52; }
.lp-crm-list q { font-style: normal; color: var(--lp-ink); font-weight: 600; }
.lp-crm-list li.soon svg { color: var(--soon); }
/* El precio del módulo, donde el visitante lo busca. Con peso propio para que
   no se lea como una nota al pie, pero sin cifra: lo que importa es de qué
   depende y que es ADICIONAL al plan de anuncios. */
.lp-crm-precio { margin-top: 1.8rem !important; font-weight: 650; color: var(--lp-ink); }
.lp-crm-links { margin-top: 1rem !important; font-weight: 650; }
.lp-crm-links a { color: var(--lp-ink); }
.lp .calc { background: #fff; border: 1px solid var(--lp-line); border-radius: 1.4rem; padding: 1.6rem; box-shadow: 0 24px 50px -32px rgba(0, 0, 0, .3); }
.lp .calc h3 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.lp .field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.lp .field label { font: 500 .72rem/1 "Jetbrainsmono Variable", monospace; letter-spacing: .06em; color: var(--lp-muted); text-transform: uppercase; margin: 0; }
.lp .field select, .lp .field input[type=range] { width: 100%; }
.lp .field select { appearance: none; -webkit-appearance: none; height: auto; background: #f7f6f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23111' stroke-width='1.6'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid var(--lp-line); border-radius: .75rem; padding: .8rem 1rem; font: 500 1rem/1.2 "Neuehaasunicaw 1 G", Inter, sans-serif; color: var(--lp-ink); }
.lp .field input[type=range] { accent-color: #151515; }
/* La espera, que es lo único que cambia al elegir CRM: el precio es el mismo
   con los tres. Va debajo del precio y con el mismo peso visual que él. */
.lp .calc-wait { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-size: .92rem; color: var(--lp-muted); }
.lp .calc-wait strong { font: 600 1.25rem/1 "Jetbrainsmono Variable", ui-monospace, monospace; color: var(--lp-ink); }
.lp .calc-out { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--lp-line); }
.lp .calc-out .plan-price { font-size: 2.5rem; }
.lp .calc-note { font-size: .82rem; color: var(--lp-muted); margin-top: .8rem !important; }

/* ---------- preguntas frecuentes ---------- */
.lp-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); }
.lp details { border-bottom: 1px solid var(--lp-line); }
.lp details:first-of-type { border-top: 1px solid var(--lp-line); }
.lp summary { list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font: 600 1.1rem/1.35 Neuemachina, "Space Grotesk", sans-serif; letter-spacing: -.01em; }
.lp summary::-webkit-details-marker { display: none; }
.lp summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border-right: 1.6px solid #777; border-bottom: 1.6px solid #777; transform: rotate(45deg); transition: transform .3s var(--ease); }
.lp details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp details p { padding: 0 0 1.3rem; color: var(--lp-muted); max-width: 60ch; }

/* ---------- cierre ---------- */
.lp-final { text-align: center; }
.lp-final h2 { max-width: 18ch; margin: 0 auto; font-size: clamp(2.3rem, 4.6vw, 4rem); }
.lp-final .b2b-hero-actions { justify-content: center; margin-top: 2rem; }
.lp-final .b2b-button.is-primary { background: #fff; color: #151515; border-color: #fff; }
.lp-final .b2b-button.is-primary:hover { background: var(--lp-blue); color: #fff; border-color: var(--lp-blue); }
.lp .trust { margin-top: 2.75rem !important; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: center; font: 500 .82rem/1.4 "Jetbrainsmono Variable", monospace; color: #b9bbb9; }
.lp .trust span { display: inline-flex; align-items: center; gap: .5rem; }
.lp .trust svg { width: 16px; height: 16px; color: var(--d-ok); flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .lp-agents { grid-template-columns: minmax(0, 1fr); }
  .lp .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .plan.star { transform: none; }
  .lp-crm-grid, .lp-faq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .lp { --gutter: 1.25rem; font-size: 1rem; }
  .lp-head { margin-bottom: 2.25rem; }
  .lp-slider-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  /* Agentes: carrusel con toque, una tarjeta y el borde de la siguiente. */
  .lp-agents { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .85rem; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 1rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .lp-agents::-webkit-scrollbar { display: none; }
  .lp-agent { flex: 0 0 86%; grid-template-columns: minmax(0, 1fr); scroll-snap-align: start; padding: 1.3rem; gap: 1.1rem; }
  .lp-agent h3 { font-size: 1.55rem; }
  .lp .metric { flex-basis: 82%; min-height: 0; }
  .lp .plans { grid-template-columns: minmax(0, 1fr); }
  .lp .pricing-bar { flex-direction: column; align-items: flex-start; }
  .lp .calc { padding: 1.25rem; }
  .lp .trust { flex-direction: column; align-items: center; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; }
}

/* Casos de Meta: en móvil el subtítulo azul («Pregúntale y te lo cuenta con el dato
   delante.») sobra bajo el titular y retrasa el teléfono (16-sep, pedido de Sergio). */
@media (max-width: 767px) { .section_metaads .uc-subtitle { display: none; } }

/* Tablets en vertical (768–991 px): el hero llena la pantalla pero no pasa de
   62rem en las muy altas, para que la franja de logos no quede lejos del texto. */
@media (min-width: 768px) and (max-width: 991px) {
  .b2b-hero { min-height: min(100vh, 62rem); min-height: min(100svh, 62rem); }
}

/* Precios: en móvil se oculta la línea «Empiezas gratis, sin tarjeta» (16-sep). */
@media (max-width: 767px) {
  .lp .trial-line { display: none; }
  /* El selector Mensual/Anual va centrado en móvil. */
  .lp .pricing-bar { align-items: center; }
}

/* Precios (16-sep): las tarjetas claras con el papel cálido de la tarjeta premium
   de Atribución en vez de blanco; la capacidad que suma cada plan, en negrita. */
.lp .plan:not(.star) { background: #fffdf8; }
.lp .plan li.is-new span { font-weight: 650; }

/* Tu equipo (16-sep): las tres tarjetas normales toman el papel cálido y el ícono
   en bloque negro de la de Atribución; esa sigue distinguiéndose por su borde en
   tinta y el sello Premium. */
.lp-agent:not(.is-premium) { background: #fffdf8; }
.lp-agent:not(.is-premium) .lp-agent-icon { background: #151515; color: #fff; }
/* El límite del Media Buyer en Starter va debajo, en pequeño y sin negrita. */
.lp .plan li .plan-note { display: block; margin-top: .15rem; font: 500 .74rem/1.3 "Jetbrainsmono Variable", ui-monospace, monospace; color: var(--lp-muted); }
/* «?» junto a Métricas & KPIs: cada cuánto se sincroniza Meta. Se abre con hover o foco (tocar en móvil). */
.lp .plan-tip { position: relative; display: inline-block; margin-left: .4rem; vertical-align: 1px; }
.lp .plan-tip button { width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: var(--lp-muted); font: 600 .66rem/1 "Jetbrainsmono Variable", monospace; cursor: help; display: inline-grid; place-items: center; }
.lp .plan-tip button::after { content: ""; position: absolute; inset: -12px; }
.lp .plan-tip button:hover, .lp .plan-tip button:focus-visible { color: var(--lp-blue); }
.lp .plan-tip button:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
.lp .plan-tip-text { position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; width: max-content; max-width: 14rem; padding: .5rem .65rem; border-radius: .5rem; background: #161616; color: #fff; font: 500 .74rem/1.4 "Jetbrainsmono Variable", monospace; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.lp .plan-tip:hover .plan-tip-text, .lp .plan-tip:focus-within .plan-tip-text { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.lp .plan.star .plan-tip button { color: #a3a3a3; }
.lp .plan.star .plan-tip-text { background: #fff; color: #161616; }
@media (prefers-reduced-motion: reduce) { .lp .plan-tip-text { transition: none; } }

/* ---------- atribución (17-sep): animación 2D en cuatro pasos (js/atribucion.js) ---------- */
.lp .attr { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
/* La caja oscura envuelve la animación y su leyenda al pie. */
.lp .attr-box { border-radius: 1.5rem; overflow: hidden; color: #fff;
  background-color: var(--g-950);
  background-image: linear-gradient(var(--gl-grid) 1px, transparent 1px), linear-gradient(90deg, var(--gl-grid) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px; box-shadow: 0 40px 80px -50px rgba(21, 21, 21, .55); }
.lp .attr-stage { position: relative; width: 100%; aspect-ratio: 1000 / 500; }
.lp .attr-legend { margin: 0 !important; padding: 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2vw, 1.4rem); font-size: .82rem; line-height: 1.45; color: var(--gt-3); text-wrap: pretty; }
.lp .attr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lp .attr-card, .lp .attr-hub, .lp .attr-chip { position: absolute; box-sizing: border-box; }
.lp .attr-card { background: var(--g-850); border: 1px solid var(--gl-1); border-radius: 1rem; padding: clamp(.6rem, 1.4vw, 1rem); display: flex; flex-direction: column; gap: .6rem; transition: border-color .5s, box-shadow .5s; }
.lp .attr-card-top { display: flex; align-items: center; gap: .4rem; margin: 0 !important; font: 600 clamp(.66rem, 1vw, .8rem)/1 "Jetbrainsmono Variable", monospace; letter-spacing: .04em; text-transform: uppercase; color: #e4e5e4; }
.lp .attr-card-top img { width: 1.1em; height: 1.1em; }
.lp .attr-ad { flex: 1; display: flex; flex-direction: column; gap: .4rem; min-height: 0; }
.lp .attr-ad-img { flex: 1; min-height: 0; border-radius: .6rem; background: linear-gradient(160deg, #3a66f0, #2448c8); display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: .5rem; padding: .6rem .7rem; }
/* «Meta Ads» va dentro del anuncio: en tinta clara sobre el azul, con el logo en blanco. */
.lp .attr-ad-img .attr-card-top { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.lp .attr-ad-img .attr-card-top img { filter: brightness(0) invert(1); }
.lp .attr-ad-lines { display: flex; flex-direction: column; gap: .35rem; }
.lp .attr-ad-line { height: .45rem; border-radius: 99px; background: rgba(255, 255, 255, .55); }
.lp .attr-ad-line.is-short { width: 60%; background: rgba(255, 255, 255, .35); }
.lp .attr-goal { position: relative; margin: 0 !important; min-height: 2.6em; font: 500 clamp(.8rem, 1.15vw, .95rem)/1.3 "Neuehaasunicaw 1 G", Inter, sans-serif; color: #e4e5e4; }
.lp .attr-goal span { position: absolute; inset: 0; transition: opacity .5s; }
.lp .attr-goal-b { opacity: 0; color: var(--d-ok); }
.lp .attr.meta-learned .attr-goal-a { opacity: 0; }
.lp .attr.meta-learned .attr-goal-b { opacity: 1; }
.lp .attr.meta-learned .attr-meta { border-color: rgba(63, 191, 132, .7); box-shadow: 0 0 0 4px rgba(63, 191, 132, .12); }
.lp .attr-count { margin: 0 !important; display: flex; align-items: baseline; gap: .35rem; font: 500 clamp(.66rem, 1vw, .8rem)/1 "Jetbrainsmono Variable", monospace; color: #c2c5c2; }
.lp .attr-count b { font: 600 clamp(1.6rem, 3.2vw, 2.6rem)/1 Neuemachina, "Space Grotesk", sans-serif; letter-spacing: -.03em; color: var(--d-ok); font-variant-numeric: tabular-nums; }
.lp .attr-count small { color: #8a8d8a; font-size: 1em; }
/* El logo de Comando va encima del SVG (z-index) para que las rutas pasen por detrás. */
.lp .attr-hub { z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--g-950); border: 1px solid var(--gl-2); box-shadow: 0 0 0 6px var(--g-950), 0 10px 30px -10px rgba(0, 0, 0, .9); transition: box-shadow .25s, transform .25s, border-color .25s; }
.lp .attr-hub-logo { font-size: clamp(1rem, 1.8vw, 1.45rem); white-space: nowrap; }
.lp .attr-hub-logo .cmd-o { animation: none; }
.lp .attr-hub.is-hot { box-shadow: 0 0 0 6px var(--g-950), 0 0 0 8px rgba(63, 191, 132, .45); transform: scale(1.05); border-color: var(--d-ok); }
.lp .attr-chip { display: flex; align-items: center; justify-content: center; margin: 0 !important; border-radius: 999px; font: 600 clamp(.58rem, .9vw, .74rem)/1 "Jetbrainsmono Variable", monospace; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.lp .attr-chip-lead { background: var(--g-800); color: var(--gt-1); border: 1px solid var(--gl-2); }
.lp .attr-chip-sale { background: rgba(62, 207, 142, .16); color: var(--d-ok); border: 1px solid rgba(62, 207, 142, .55); }
.lp .attr.show-lead .attr-chip-lead, .lp .attr.show-sale .attr-chip-sale { opacity: 1; transform: none; }
.lp .attr-path { fill: none; stroke: var(--gl-3); stroke-width: 2; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; }
.lp .attr-path.is-back { stroke: rgba(62, 207, 142, .25); transition: stroke .4s; }
.lp .attr.is-back .attr-path.is-back { stroke: rgba(62, 207, 142, .75); }
.lp .attr-slot { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .26); stroke-width: 1; stroke-dasharray: 3 3; }
.lp .attr-dot { fill: var(--g-600); }
.lp .attr-tick { fill: none; stroke: var(--g-950); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lp .attr-ring { fill: none; stroke: var(--d-ok); stroke-width: 2; opacity: 0; }
.lp .attr-person.is-sale .attr-dot { fill: var(--d-ok); }
.lp .attr-person.is-sale .attr-tick { opacity: 1; }
.lp .attr-signal { fill: var(--d-ok); }
.lp .attr.is-fading .attr-count b { opacity: .5; transition: opacity .4s; }

.lp .attr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; counter-reset: none; }
.lp .attr-step { position: relative; padding: .85rem 1rem 1rem; border-radius: 1rem; border: 1px solid transparent; transition: background .3s, border-color .3s; }
.lp .attr-step button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .7rem; width: 100%; cursor: pointer; font: 600 1.05rem/1.25 Neuemachina, "Space Grotesk", sans-serif; letter-spacing: -.01em; color: var(--lp-muted); }
.lp .attr-step button:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 4px; border-radius: .4rem; }
.lp .attr-step-n { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--lp-line); font: 600 .78rem/1 "Jetbrainsmono Variable", monospace; color: var(--lp-muted); background: #fff; transition: background .3s, color .3s, border-color .3s; }
.lp .attr-step p { display: none; margin: .45rem 0 0 2.4rem !important; color: var(--lp-muted); font-size: .95rem; line-height: 1.45; text-wrap: pretty; }
.lp .attr-bar { display: none; margin: .75rem 0 0 2.4rem; height: 3px; border-radius: 99px; background: var(--lp-line); overflow: hidden; }
.lp .attr-bar i { display: block; height: 100%; background: var(--lp-blue); transform: scaleX(0); transform-origin: left; }
.lp .attr-step.is-active { background: #fff; border-color: var(--lp-line); box-shadow: 0 18px 40px -32px rgba(21, 21, 21, .45); }
.lp .attr-step.is-active button { color: var(--lp-ink); }
.lp .attr-step.is-active .attr-step-n { background: var(--lp-blue); border-color: var(--lp-blue); color: #fff; }
.lp .attr-step.is-done .attr-step-n { background: rgba(18, 122, 82, .1); border-color: rgba(18, 122, 82, .35); color: #127a52; }
.lp .attr-step.is-active p, .lp .attr-step.is-active .attr-bar { display: block; }
.lp .attr.is-reduced .attr-bar { visibility: hidden; }
.lp .attr-caption { display: none; }
.lp .attr-note { margin: 0 !important; font: 500 .74rem/1.4 "Jetbrainsmono Variable", monospace; color: var(--lp-soft); }

/* Sin JS no hay animación: quedan los cuatro pasos con su texto. */
html:not(.js) .lp .attr-stage, html:not(.js) .lp .attr-caption { display: none !important; }
html:not(.js) .lp .attr-step-t { display: inline !important; }
html:not(.js) .lp .attr { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .lp .attr-step p { display: block; }

@media (max-width: 991px) {
  .lp .attr { grid-template-columns: minmax(0, 1fr); }
}
/* Móvil: el escenario va en vertical (lo decide el JS con la misma consulta) y la
   lista enseña solo el paso activo con su texto. */
@media (max-width: 767px) {
  .lp .attr-stage { aspect-ratio: 360 / 500; }
  .lp .attr-box { max-width: 26rem; margin: 0 auto; border-radius: 1.25rem; }
  .lp .attr-legend { font-size: .76rem; }
  .lp .attr.is-tall .attr-card { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .lp .attr.is-tall .attr-ad { flex: 0 0 44%; align-self: stretch; }
  .lp .attr.is-tall .attr-ad-img { padding: .45rem .55rem; }
  .lp .attr.is-tall .attr-ad-line { height: .3rem; }
  .lp .attr.is-tall .attr-ad-lines { gap: .25rem; }
  .lp .attr.is-tall .attr-goal { flex: 1; align-self: stretch; margin-left: .75rem !important; font-size: .95rem; font-weight: 600; min-height: 2.6em; }
  .lp .attr.is-tall .attr-goal span { display: flex; align-items: center; justify-content: center; text-align: center; text-wrap: balance; }
  .lp .attr.is-tall .attr-crm { align-content: flex-start; }
  .lp .attr.is-tall .attr-crm .attr-card-top { flex: 1; }
  .lp .attr.is-tall .attr-count b { font-size: 1.6rem; }
  .lp .attr.is-tall .attr-card { padding: .6rem .75rem; gap: .35rem; }
  /* Móvil: los pasos y su texto van encima de la animación. */
  .lp .attr-side { order: -1; }
  .lp .attr-caption { margin-bottom: .25rem; }
  .lp .attr-steps { flex-direction: row; gap: .5rem; }
  .lp .attr-step { padding: 0; border: 0; background: none !important; box-shadow: none !important; }
  .lp .attr-step button { gap: 0; }
  .lp .attr-step-t, .lp .attr-step.is-active p, .lp .attr-step.is-active .attr-bar { display: none; }
  .lp .attr-step-n { width: 2.75rem; height: 2.75rem; font-size: .9rem; }
  .lp .attr-caption { display: block; margin-top: .75rem; padding: 1rem; border-radius: 1rem; background: #fff; border: 1px solid var(--lp-line); }
  .lp .attr-caption-t { margin: 0 !important; font: 600 1.1rem/1.25 Neuemachina, "Space Grotesk", sans-serif; color: var(--lp-ink); }
  .lp .attr-caption-p { margin: .4rem 0 0 !important; color: var(--lp-muted); font-size: .95rem; line-height: 1.45; min-height: 2.9em; }
  .lp .attr-caption .attr-bar { display: block; margin: .75rem 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp .attr-card, .lp .attr-hub, .lp .attr-chip, .lp .attr-goal span, .lp .attr-path.is-back { transition: none; }
}

/* Atribución va dentro de «Tu equipo»: mismo fondo, sin costura entre las dos. */
/* Atribución es el cuarto agente: la misma tarjeta que Analista, Estratega y Media Buyer,
   a todo el ancho y pegada a ellos (mismo hueco que entre tarjetas). */
.lp-subsection { margin-top: 1.25rem; scroll-margin-top: calc(var(--nav-height, 5rem) + .5rem); background: #fffdf8; border: 1px solid var(--lp-line); border-radius: 1.4rem; padding: clamp(1.3rem, 2.4vw, 1.6rem); box-shadow: 0 24px 50px -40px rgba(21, 21, 21, .35); }
.lp .attr-head { text-align: left; max-width: none; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.lp .attr-agent { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.lp .attr-agent .lp-agent-icon { background: #151515; color: #fff; }
.lp .attr-agent h3 { margin: 0; font-size: 1.75rem; }
.lp .attr-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.lp .attr-head .lp-lede { max-width: 44rem; }
@media (max-width: 767px) { .lp .attr-agent h3 { font-size: 1.55rem; } }
/* «Agente de Atribución» destacado: sello en tinta con su icono, como los iconos de los agentes. */
.lp-eyebrow.is-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: 999px; background: #151515; color: #fff; font-size: .85rem; letter-spacing: .12em; box-shadow: 0 14px 30px -18px rgba(21, 21, 21, .6); margin-bottom: 1.75rem !important; }
.lp-eyebrow.is-badge svg { width: 1.35rem; height: 1.35rem; color: var(--gt-2); }
/* Tarjetas de agentes: el icono y el nombre en la misma línea. */
.lp-agent-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: center; }
.lp-agent-meta > :not(.lp-agent-top):not(h3) { grid-column: 1 / -1; }
.lp-agent-meta > h3 { margin: 0 !important; }
.lp-agent-meta > h3 + p { margin-top: 1rem !important; }

/* ---------- hero de escritorio (17-sep): tarjeta blanca + vídeo vertical ----------
   A la izquierda el copy en una tarjeta clara; a la derecha el vídeo de móvil en su
   marco, con las burbujas de WhatsApp montadas sobre su borde. Desde 768 px (tableta incluida); por debajo
   sigue el hero anterior (vídeo de fondo). */
.hero-video { display: none; }
@media (min-width: 768px) {
  .b2b-hero {
    background-color: #f3f1ea;
    background-image: linear-gradient(rgba(21, 21, 21, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 21, 21, .045) 1px, transparent 1px);
    background-size: 40px 40px; background-position: center top;
  }
  .b2b-hero-media, .b2b-hero-glow { display: none; }
  /* La franja de logos entra en la primera pantalla: el vídeo toma el alto que queda
     (pantalla − menú − márgenes − franja ≈ 12 rem), entre 20 y 48 rem. Si la pantalla
     es más baja que eso, la franja queda debajo y no pasa nada.
     El alto del menú va fijo (3,2 rem ≈ 50 px) y no con --nav-height: main.js lo
     escribe al cargar y el vídeo daba un salto de tamaño unos segundos después. */
  .b2b-hero { --hero-media-h: clamp(20rem, calc(100svh - 3.2rem - 12rem), 48rem); }
  .b2b-hero-padding { justify-content: center; padding-top: calc(3.2rem + 1rem); padding-bottom: 1rem; }
  .b2b-hero-grid.is-short { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  /* Sin tarjeta (17-sep, tarde): una caja clara al lado del marco del vídeo eran dos
     rectángulos compitiendo. El copy va directo sobre la cuadrícula, más grande. */
  .b2b-hero-grid.is-short .b2b-hero-copy { max-width: none; padding: 0; }
  .b2b-hero-grid.is-short .b2b-hero-title { white-space: nowrap; }
  .b2b-hero-grid.is-short .b2b-hero-title { font-size: clamp(3.4rem, 5.6vw, 6rem); }
  .b2b-hero-grid.is-short .b2b-hero-lede { max-width: 30rem; font-size: clamp(1.05rem, 1.3vw, 1.25rem); }
  .b2b-hero-grid.is-short .b2b-hero-visual { position: relative; width: 100%; margin: 0; padding: 0; display: flex; justify-content: flex-end; align-items: flex-end; }
  .hero-video {
    display: block; position: relative; flex: none; width: min(60%, calc(var(--hero-media-h) * 10 / 16)); aspect-ratio: 10 / 16;
    border-radius: 1.75rem; overflow: hidden; background: #d9d6cc url("../assets/img/hero-poster-tres-v6.jpg") center 30% / cover no-repeat;
    box-shadow: 0 50px 90px -50px rgba(21, 21, 21, .6);
  }
  .hero-video video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 30%; filter: saturate(1.05) contrast(1.04); }
  /* Las burbujas, más chicas y pegadas a la base: tapaban media persona. */
  /* Las burbujas van a la izquierda del vídeo y solo montan su borde (3 rem). */
  .b2b-hero-grid.is-short .power-panel { position: relative; order: -1; flex: 0 1 21rem; min-width: 0; margin: 0 -3rem 2.5rem 0; z-index: 3; }
  .b2b-hero-grid.is-short .power-context p { font-size: .82rem; }
  .b2b-hero-grid.is-short .power-reply { font-size: .82rem; padding: .7rem .85rem 1.35rem; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) { .hero-video video { display: none; } }

/* Móvil: el texto del paso activo va dentro de la tarjeta de Meta, a la derecha del
   anuncio azul, en lugar de la tarjeta blanca de abajo y del objetivo de Meta. */
.lp .attr-meta-step { display: none; }
@media (max-width: 767px) {
  .lp .attr.is-tall .attr-caption, .lp .attr.is-tall .attr-goal { display: none; }
  .lp .attr.is-tall .attr-ad { flex: 0 0 34%; align-self: center; }
  .lp .attr.is-tall .attr-ad-img { flex: none; height: 5.75rem; }
  .lp .attr.is-tall .attr-ad-img .attr-card-top { white-space: nowrap; font-size: .62rem; }
  .lp .attr.is-tall .attr-meta-step { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; align-self: stretch; margin-left: .75rem; }
  .lp .attr-meta-step-t { margin: 0 !important; font: 600 .95rem/1.2 Neuemachina, "Space Grotesk", sans-serif; color: var(--gt-1); }
  .lp .attr-meta-step-p { margin: .35rem 0 0 !important; font-size: .76rem; line-height: 1.35; color: var(--gt-2); }
}

/* Móvil: el fondo del hero ya no es otra foto (asomaba junto a la tarjeta, 17-sep).
   Crema liso, y la franja del vídeo lleva detrás el fotograma de las tres personas. */
@media (max-width: 767px) {
  .b2b-hero { background: #f3f1ea; }
  .b2b-hero-media { background: #d9d6cc url("../assets/img/hero-poster-tres-v6.jpg") 50% 35% / cover no-repeat; }
}
/* Sin el objetivo de Meta debajo del anuncio (17-sep): el anuncio ocupa la tarjeta. */
.lp .attr-goal { display: none; }

/* Pasos dentro de la caja (solo móvil): números unidos por una línea, en grafito
   con el azul de marca en el que va. Los de la columna quedan para lector de
   pantalla y teclado (fuera de la vista, no `display: none`). */
.lp .attr-stepper { display: none; }
@media (max-width: 767px) {
  .lp .attr-stepper { display: flex; position: relative; align-items: center; justify-content: space-between; gap: 0; padding: 1.1rem clamp(1.6rem, 9vw, 2.75rem) .3rem; }
  .lp .attr-stepper::before, .lp .attr-stepper::after { content: ""; position: absolute; left: clamp(2.6rem, 12vw, 3.9rem); right: clamp(2.6rem, 12vw, 3.9rem); top: calc(1.1rem + 1.1rem); height: 2px; border-radius: 2px; }
  .lp .attr-stepper::before { background: var(--gl-1); }
  .lp .attr-stepper::after { right: auto; width: calc((100% - clamp(5.2rem, 24vw, 7.8rem) - 2.2rem) * var(--attr-done, 0)); background: var(--accent, #315fef); transition: width .4s var(--ease); }
  .lp .attr-dotstep { all: unset; position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; box-sizing: border-box; background: var(--g-900); border: 1.5px solid var(--gl-2); color: var(--gt-3); font: 600 .85rem/1 "Jetbrainsmono Variable", monospace; cursor: pointer; transition: background .3s, border-color .3s, color .3s, transform .3s; }
  .lp .attr-dotstep svg { display: none; width: 1.1rem; height: 1.1rem; }
  .lp .attr-dotstep.is-done { border-color: var(--accent, #315fef); color: var(--accent, #315fef); }
  .lp .attr-dotstep.is-done span { display: none; }
  .lp .attr-dotstep.is-done svg { display: block; }
  .lp .attr-dotstep.is-active { background: var(--accent, #315fef); border-color: var(--accent, #315fef); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 4px rgba(49, 95, 239, .22); }
  /* La lista de la columna: accesible pero fuera de la vista. */
  .lp .attr.is-tall .attr-steps { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lp .attr.is-tall .attr-side { order: 0; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .lp .attr-dotstep, .lp .attr-stepper::after { transition: none; }
}
/* Precio de lanzamiento: el sello y el precio de después, bajo el precio. */
.lp .plan-launch { display: block; margin-top: .35rem; font: 500 .74rem/1.5 "Jetbrainsmono Variable", monospace; color: var(--lp-muted); }
.lp .plan-launch b { display: inline-block; margin-right: .4rem; padding: .18rem .45rem; border-radius: .35rem; background: rgba(49, 95, 239, .1); color: var(--lp-blue); font-weight: 600; }
.lp .plan.star .plan-launch { color: #a3a3a3; }
.lp .plan.star .plan-launch b { background: rgba(157, 180, 255, .16); color: #b9c8ff; }
.lp .plan-year:has(.plan-launch) { min-height: 0; }
/* Propuesta (/propuesta, 18-sep): listas de las dos rutas y los dos modelos de cobro. */
.lp .lp-route-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; color: var(--lp-muted); font-size: .95rem; }
.lp .lp-route-list li { position: relative; padding-left: 1.1rem; text-wrap: pretty; }
.lp .lp-route-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--lp-blue); }
.lp .lp-models { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--lp-line); display: grid; gap: .85rem; max-width: 52rem; }
.lp .lp-models p { margin: 0 !important; color: var(--lp-muted); text-wrap: pretty; }
.lp .lp-models b { color: var(--lp-ink); }
.lp .lp-models-note { font: 500 .8rem/1.5 "Jetbrainsmono Variable", monospace; color: var(--lp-soft); }