/* ============================================================================
   /web — la oferta de la página web (Vitrina)

   Lo carga solo web.html, después de styles.css (tokens, base, riel, cinta,
   tecla, chip). No carga landing.css ni landing-motion.css a propósito: son
   62 KB crudos para un layout que esta página no usa, y esta página vende
   justamente que una página abra rápido en el celular.

   El gate la audita con las mismas reglas de color que las demás hojas
   (HOJAS_CON_TOKENS en tests/gate.mjs). Los colores propios viven abajo en
   :root, cada uno con su razón.

   Dirección (críticas 10 y 11 de seo/investigacion, 2026-09-27):
   - Un solo pico de luz: las pantallas del abanico que se encienden. Los
     botones son saffron plano, sin brillo; el único que late es el de la
     portada.
   - Dos voces: mayúsculas solo para VITRINA, el precio y los botones. Los H2
     van en oración y más chicos que el H1.
   - Un solo momento de color: la oferta en una franja saffron.
   - Un solo objeto: la etiqueta colgada (precio, regalos, garantías).
   - La animación no esconde lo que vende: el texto de precio, reloj,
     garantías y regalos se ve desde el primer cuadro.

   El movimiento: CSS y un IntersectionObserver (web.js), nada atado al scroll
   en el hilo principal. Con movimiento reducido o sin JS la página queda
   completa y quieta.
   ========================================================================= */

:root {
  /* Los colores del medidor de PageSpeed (verde de 90 a 100, naranja de 50 a
     89). No son de la marca y no se usan para nada más: la comparación de
     velocidad reproduce el medidor que el dueño va a ver si la mide él, y ese
     medidor habla en estos dos colores. */
  --psi-verde: #0CCE6B;
  --psi-naranja: #FFA400;

  /* Los de WhatsApp en modo oscuro, solo para la demo del link: su único
     trabajo es decir "así se ve en WhatsApp", y con los colores de la marca
     no se parecía (crítica 11). La hora y el link van un poco más claros que
     los de la app para pasar AA sobre la burbuja verde (5:1 y 4.8:1). */
  --wa-fondo: #0B141A;
  --wa-burbuja: #005C4B;
  --wa-tarjeta: #025144;
  --wa-texto: #E9EDEF;
  --wa-meta: #C2D6D2;
  --wa-link: #8ED2F2;
  --wa-leido: #53BDEB;
  --wa-dia: #182229;
  --wa-dia-texto: #8FA0A9;

  /* Los teléfonos sin bisel: un filo de luz arriba, un borde apenas y una
     sola sombra que cae al piso. La pantalla apagada es negro con reflejo. */
  --tel-luz: rgba(255, 255, 255, 0.24);
  --tel-borde: rgba(255, 255, 255, 0.08);
  --tel-reflejo: rgba(255, 255, 255, 0.09);
  --tel-sombra: rgba(0, 0, 0, 0.85);

  /* Sobre la franja saffron de la oferta: texto secundario y la etiqueta de
     cada garantía, sacados del negro para que el contraste no dependa de un
     gris (7:1 el texto suave). */
  --sobre-saffron-suave: color-mix(in srgb, var(--negro) 82%, var(--saffron));
  --sobre-saffron-etiqueta: color-mix(in srgb, var(--negro) 9%, var(--saffron));

  /* Los rótulos de esta página van a 12px, no a los 11 de --t-placa: el
     comprador los lee en un celular, a veces con la luz del sol encima. */
  --t-rotulo: 0.75rem;

  /* El abanico se abre y frena suave, sin pasarse ni rebotar. */
  --ease-abanico: cubic-bezier(0.16, 1, 0.3, 1);

  --web-ancho: 76rem;
  --web-margen: clamp(1rem, 0.4rem + 3vw, 4rem);
}

.web { background: var(--negro); }

/* Registradas para que interpolen: el tachado del precio que se dibuja, el
   anillo de PageSpeed que se llena, el listón del regalo y la vía de los
   pasos. Sin @property una animación salta de un valor al otro. */
@property --tachado { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --v { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --liston { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --via { syntax: '<number>'; inherits: true; initial-value: 1; }

/* Dos voces. styles.css pone todos los titulares en mayúsculas; acá van en
   oración, más apretados, donde Space Grotesk luce sus formas. Las mayúsculas
   quedan para VITRINA, el precio y los botones. */
.web h1,
.web h2,
.web h3 { text-transform: none; letter-spacing: -0.035em; }

/* ============================================================================
   La tecla de WhatsApp: el botón grande de toda la página
   ========================================================================= */

/* Saffron plano. El brillo alrededor era la firma de plantilla, y en todos
   los botones ya no señalaba ninguno. */
.web .tecla,
.web .tecla:hover { box-shadow: none; }

.tecla--wa {
  gap: calc(var(--u) * 1.5);
  min-height: calc(var(--u) * 8);
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  letter-spacing: 0.03em;
}
/* El logo de WhatsApp de verdad (el <symbol> de web.html), en el color del
   texto del botón. */
.tecla__glifo { flex: none; width: 1.15em; height: 1.15em; }

.tecla--enorme {
  width: 100%;
  min-height: calc(var(--u) * 10);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}

/* El pulso: una ola que sale del botón de la portada cada tanto, para que el
   ojo lo encuentre sin leer. Uno solo en la página, y con escala pareja: la
   de 1.08 × 1.35 deformaba el borde. */
@media (prefers-reduced-motion: no-preference) {
  .tecla--wa { position: relative; }
  .portada__teclas .tecla--wa::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 2px solid var(--saffron);
    border-radius: inherit;
    opacity: 0;
    animation: tecla-ola 3.2s var(--ease) 2s infinite;
    pointer-events: none;
  }
}
@keyframes tecla-ola {
  0% { opacity: 0.7; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1.07); }
}

/* El mismo botón después de cada bloque. */
.llamado {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--u) * 9);
}

/* En /web el botón del agente va de contorno: el único saffron sólido del
   riel y de la pantalla es "Quiero mi página". */
.web .riel__cta-boton {
  background: transparent;
  color: var(--saffron);
  box-shadow: none;
}
.web .riel__cta-boton:hover { background: var(--hud-superficie); box-shadow: none; }

/* Un reloj a la vez: mientras la cuenta grande de la tarjeta de precio está
   en pantalla, la del riel se apaga (web.js pone la clase). */
.cuenta-a-la-vista .cinta__cuenta { visibility: hidden; }

/* ============================================================================
   1. La portada
   ========================================================================= */

.portada {
  position: relative;
  overflow: hidden;
  padding: calc(var(--u) * 5) var(--web-margen) calc(var(--u) * 10);
  background: var(--negro);
}

/* La única luz de la página: el halo de las pantallas encendidas. Nace
   cuando se prende el teléfono del centro. */
.portada::before {
  content: '';
  position: absolute;
  right: -8%;
  top: 6%;
  width: 62%;
  height: 90%;
  background: radial-gradient(closest-side, var(--hud-superficie-viva), transparent);
  filter: blur(20px);
  pointer-events: none;
}

.portada__interior {
  position: relative;
  max-width: var(--web-ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 6);
  align-items: center;
}

/* min-width 0: sin eso un hijo de grilla no se encoge por debajo de su
   palabra más larga y empuja la columna. */
.portada__texto,
.obra__texto,
.incluye__texto { min-width: 0; }

/* El rótulo vive adentro del h1, para que el titular diga la búsqueda
   (páginas web, Cancún), y se tiene que ver igual que cuando era un <p> antes
   del h1. Su caja le devuelve la línea de texto de cuerpo en la que estaba
   sentado el chip (inline-flex): sin ella el chip queda como ítem del flex del
   h1, 5 px más arriba y a todo el ancho. En el celular la caja es `contents`,
   porque ahí el chip ya era un ítem de flex (ver Responsive). */
.portada__rotulo-caja {
  display: block;
  font: 400 var(--t-cuerpo)/1.6 var(--fuente-cuerpo);
  letter-spacing: normal;
}
.portada__rotulo { margin-bottom: calc(var(--u) * 3); }

.portada__titular {
  display: flex;
  flex-direction: column;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.portada__linea { display: block; }
/* "VITRINA" es la palabra que se lleva la página: el concepto de Axel, dicho
   al tamaño de un letrero, y la única del titular en mayúsculas. */
.portada__titular em {
  display: block;
  margin-top: calc(var(--u) * 0.5);
  color: var(--saffron);
  font-style: normal;
  font-size: clamp(4.1rem, 0.9rem + 14vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
/* En la compu va arriba a la derecha, debajo de la barra de la dirección: abajo
   tapaba el titular de la captura. */
.marco--pantalla > .idioma { top: calc(var(--u) * 6); left: auto; right: calc(var(--u) * 1.5); }

.portada__bajada {
  margin-top: calc(var(--u) * 3);
  max-width: 44ch;
  color: var(--tinta-suave);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.portada__teclas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1.5) calc(var(--u) * 3);
  margin-top: calc(var(--u) * 4);
}
.portada__nota { color: var(--tinta-suave); font-size: var(--t-menor); }

/* --- La etiqueta del precio ------------------------------------------------ */

.etiqueta {
  position: relative;
  display: inline-grid;
  gap: calc(var(--u) * 0.75);
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 4.5);
  border: 1px solid var(--hud-borde-fuerte);
  border-radius: var(--radio);
  background: var(--hud-superficie);
  /* La muesca de una etiqueta de precio colgada: un corte en la esquina y el
     ojal. Es la forma del objeto que la palabra "vitrina" pone en la cabeza,
     y la misma que llevan los regalos y las garantías. */
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
}
.etiqueta::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 2px solid var(--saffron);
  border-radius: 50%;
}
.etiqueta__nombre {
  color: var(--saffron);
  font: 700 var(--t-rotulo)/1 var(--fuente-titulo);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.etiqueta__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 calc(var(--u) * 1.25);
  font-family: var(--fuente-titulo);
  font-weight: 700;
}
.etiqueta__antes {
  color: var(--tinta-suave);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  text-decoration: none;
  background: linear-gradient(var(--saffron), var(--saffron)) no-repeat 0 56% / var(--tachado) 3px;
}
.etiqueta__desde { color: var(--tinta-suave); font-size: var(--t-menor); letter-spacing: 0.02em; }
.etiqueta__ahora,
.precio__ahora { flex-basis: 100%; white-space: nowrap; }
.etiqueta__monto { font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.etiqueta__moneda { font-size: var(--t-menor); letter-spacing: 0.12em; }
.etiqueta__promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 0.5) var(--u);
  color: var(--tinta);
  font-size: var(--t-menor);
}
.etiqueta__descuento {
  padding: 3px 8px;
  border-radius: var(--radio);
  background: var(--saffron);
  color: var(--negro);
  font: 700 var(--t-rotulo)/1.3 var(--fuente-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- El abanico: tres teléfonos con tres sitios reales -------------------- */

/* El protagonista de la portada: el del centro mide unos 300 px en una
   laptop (crítica 11), y el de la derecha se sale de su columna. --tel sale
   del ancho del abanico (cqi, así nunca pisa la bajada) y del alto de la
   ventana, para que el teléfono entero quepa en una pantalla baja. */
.abanico {
  --tel: min(52cqi, 19rem, calc((100svh - 10rem) / 2.25));
  position: relative;
  container-type: inline-size;
  align-self: stretch;
  min-height: 31rem;
}
.abanico__tel {
  --x: -50%;
  --y: -50%;
  --r: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--tel) * 0.84);
  aspect-ratio: 480 / 1039;
  overflow: hidden;
  /* Un teléfono tiene esquinas redondas: la excepción al radio de 2px del
     sistema es la forma del objeto, igual que en .marco--telefono. */
  border-radius: 1.5rem;
  background: var(--negro-lienzo);
  box-shadow: 0 50px 60px -30px var(--tel-sombra);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
}
.abanico__tel img { width: 100%; height: 100%; object-fit: cover; }
/* El filo de luz, encima de la captura. */
.abanico__tel::after,
.marco--telefono::after,
.maqueta__tel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--tel-luz), inset 0 0 0 1px var(--tel-borde);
  pointer-events: none;
}
/* La pantalla apagada: negro con un reflejo en diagonal. Quieta está
   transparente, así que sin animación (o sin CSS de movimiento) las tres
   pantallas se ven encendidas. */
.abanico__tel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(118deg, transparent 36%, var(--tel-reflejo) 48%, transparent 60%),
    var(--negro-lienzo);
  opacity: 0;
  pointer-events: none;
}
.abanico__tel--1 { --x: -122%; --y: -44%; --r: -7deg; }
.abanico__tel--3 { --x: 22%; --y: -44%; --r: 7deg; }
.abanico__tel--2 { z-index: 1; width: var(--tel); }

/* La vitrina que prende la luz: los teléfonos se abren en abanico y sus
   pantallas se encienden en secuencia, primero el del centro, como las luces
   de un local al abrir. El halo nace detrás del recién encendido, y el precio
   viejo se tacha delante del visitante. Todo con transform y opacity, en el
   compositor; el titular (el LCP) se pinta desde el primer cuadro. Si el
   abanico carga fuera de la pantalla, web.js lo pausa (.abanico--espera)
   hasta que se ve. */
@media (prefers-reduced-motion: no-preference) {
  .abanico__tel--1,
  .abanico__tel--3 { animation: abanico-lado 1.1s var(--ease-abanico) 0.2s both; }
  .abanico__tel--2 { animation: abanico-centro 1s var(--ease) both; }
  .abanico__tel::before { animation: encender 0.8s var(--ease) both; }
  .abanico__tel--2::before { animation-delay: 0.3s; }
  .abanico__tel--1::before { animation-delay: 0.65s; }
  .abanico__tel--3::before { animation-delay: 0.95s; }
  .portada::before { animation: halo 1.4s var(--ease) 0.5s both; }
  .etiqueta__antes { animation: tachar 0.6s var(--ease) 1.1s both; }

  .abanico--espera .abanico__tel,
  .abanico--espera .abanico__tel::before,
  .portada:has(.abanico--espera)::before { animation-play-state: paused; }
}
@keyframes abanico-lado { from { transform: translate(-50%, var(--y)) rotate(0deg) scale(0.92); } }
@keyframes abanico-centro { from { transform: translate(var(--x), calc(var(--y) + 8%)) scale(0.96); } }
/* Parpadea una vez al prender, como un tubo, y queda encendida. */
@keyframes encender {
  0%, 30% { opacity: 1; }
  42% { opacity: 0.3; }
  52% { opacity: 0.75; }
  100% { opacity: 0; }
}
@keyframes halo { from { opacity: 0; } }
@keyframes tachar { from { --tachado: 0%; } }

/* La prueba: el teléfono flota un poco más rápido que la compu al bajar. Es
   CSS con animation-timeline (en el compositor, sin JS por cuadro) y usa
   translate, así no pelea con el transform de la entrada de web-motion.js.
   Poco recorrido: en Splat el teléfono queda justo debajo del nombre. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 621px) {
    .obra__vitrina .marco--telefono {
      animation: telefono-flota linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes telefono-flota { from { translate: 0 16px; } to { translate: 0 -16px; } }

/* ============================================================================
   El esqueleto de cada bloque
   ========================================================================= */

.bloque {
  position: relative;
  padding: var(--unidad) var(--web-margen);
  border-top: 1px solid var(--costura-luz);
}
.bloque__interior { max-width: var(--web-ancho); margin: 0 auto; }
/* En pantallas altas (una tableta parada, un monitor de 1080) el aire crece
   con el alto: con el de siempre, el botón de un bloque corto y el del
   siguiente cabían juntos en la pantalla, y la regla es un solo "Quiero mi
   página" a la vista. */
@media (min-width: 621px) {
  .bloque { padding-block: max(var(--unidad), 14vh); }
  .llamado,
  .pasos { margin-top: max(calc(var(--u) * 9), 12vh); }
}

/* Quedan tres rótulos en la página: el chip de la portada, este (La prueba)
   y la cinta de la tarjeta de precio. */
.bloque__rotulo {
  margin-bottom: calc(var(--u) * 2);
  color: var(--saffron);
  font: 700 var(--t-rotulo)/1 var(--fuente-titulo);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Unos 54 px en una laptop: ningún H2 le gana al titular de la portada, y el
   cierre queda como el segundo pico. */
.bloque__titulo {
  max-width: 20ch;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
  line-height: 1;
  text-wrap: balance;
}
.bloque__bajada {
  margin-top: calc(var(--u) * 2.5);
  max-width: 52ch;
  color: var(--tinta-suave);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
}

/* ============================================================================
   2. La prueba: cada sitio en la compu y en el teléfono

   Escena Global a todo lo ancho, y Splat y Canciones en dos columnas debajo:
   un caso principal y dos secundarios, no tres filas en zigzag. En todos los
   tamaños la misma composición: la captura de la compu entera, y el teléfono
   abajo a la derecha, encimado en el último tercio (debajo del titular de
   cada captura, que en los tres está a la izquierda o arriba del centro). El
   teléfono flota a la derecha y el texto corre a su izquierda.
   ========================================================================= */

.obras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 10) calc(var(--u) * 6);
  margin: calc(var(--u) * 7) 0 0;
  padding: 0;
  list-style: none;
}
.obra { display: flow-root; }
.obra:first-child { grid-column: 1 / -1; }

.marco { position: relative; margin: 0; }
.marco img { display: block; width: 100%; height: auto; }
.marco--pantalla {
  overflow: hidden;
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: var(--negro-lienzo);
  box-shadow: 0 28px 70px var(--costura-sombra);
}
.marco__barra {
  padding: 6px 12px;
  border-bottom: 1px solid var(--costura-luz);
  background: var(--acero-riel);
  color: var(--tinta-suave);
  font: 500 var(--t-rotulo)/1.4 var(--fuente-cuerpo);
  letter-spacing: 0.04em;
}
/* El teléfono, sin bisel: la pantalla con su filo de luz (ver .abanico__tel). */
.marco--telefono {
  overflow: hidden;
  border-radius: 1.3rem;
  background: var(--negro-lienzo);
  box-shadow: 0 40px 50px -24px var(--tel-sombra);
}

.obra__vitrina { position: relative; }
/* margin-top en % se mide contra el ancho: el teléfono sube un quinto del
   ancho sobre la captura, que es su último tercio en los tres sitios. */
.obra__vitrina .marco--telefono {
  float: right;
  z-index: 1;
  width: 26%;
  margin: -20% 5% calc(var(--u) * 2 + 16px) calc(var(--u) * 3);
}
.obra:first-child .obra__vitrina .marco--telefono { width: 17%; margin-top: -14%; }

.obra__texto { padding-top: calc(var(--u) * 3); }
.obra:first-child .obra__texto {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  column-gap: calc(var(--u) * 5);
  align-items: start;
}
.obra:first-child .obra__tipo,
.obra:first-child .obra__nombre { grid-column: 1; }
.obra:first-child .obra__linea { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.obra:first-child .obra__abrir { grid-column: 2; justify-self: start; }

.obra__tipo {
  color: var(--tinta-suave);
  font: 700 var(--t-menor)/1.5 var(--fuente-titulo);
  letter-spacing: 0.01em;
}
.obra__nombre { margin-top: calc(var(--u) * 0.5); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); }
.obra__linea { margin-top: calc(var(--u) * 1.5); color: var(--tinta-suave); max-width: 44ch; }
.obra__abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--u);
  min-height: calc(var(--u) * 5.5);
  margin-top: calc(var(--u) * 2.5);
  padding-inline: calc(var(--u) * 2);
  border: 1px solid var(--hud-borde-fuerte);
  border-radius: var(--radio);
  color: var(--saffron);
  font: 700 var(--t-menor)/1 var(--fuente-titulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.obra__abrir:hover,
.obra__abrir:focus-visible { background: var(--saffron); color: var(--negro); }

/* ============================================================================
   3. Cómo funciona
   ========================================================================= */

.pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 4);
  margin: calc(var(--u) * 9) 0 0;
  padding: 0;
  list-style: none;
}
/* La vía que une los tres: el camino, no tres tarjetas sueltas. */
.pasos::before {
  content: '';
  transform: scaleX(var(--via));
  transform-origin: left center;
  position: absolute;
  left: 2.25rem;
  right: 2.25rem;
  top: 2.25rem;
  height: 2px;
  background: linear-gradient(90deg, var(--saffron), var(--hud-borde) 70%, transparent);
}
.paso { position: relative; }
.paso__num {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 2px solid var(--saffron);
  border-radius: var(--radio);
  background: var(--negro);
  color: var(--saffron);
  font: 700 2rem/1 var(--fuente-titulo);
}
.paso__titulo { margin-top: calc(var(--u) * 3); font-size: var(--t-sub); }
.paso__texto { margin-top: calc(var(--u) * 1.5); color: var(--tinta-suave); max-width: 34ch; }

/* ============================================================================
   Una sola viñeta en toda la página: la palomita saffron.
   ========================================================================= */

.lista-si,
.regalo__lista,
.precio__lista,
.precio__garantias {
  display: grid;
  gap: calc(var(--u) * 1.5);
  margin: calc(var(--u) * 3) 0 0;
  padding: 0;
  list-style: none;
}
.lista-si li,
.regalo__lista li,
.precio__lista li,
.precio__garantias li { position: relative; padding-left: 1.6em; }
.lista-si li::before,
.regalo__lista li::before,
.precio__lista li::before,
.precio__garantias li::before {
  content: '';
  position: absolute;
  left: 0.2em;
  top: 0.28em;
  width: 0.38em;
  height: 0.7em;
  border: solid var(--saffron);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============================================================================
   4. Qué incluye, y la página real que baja sola
   ========================================================================= */

.incluye {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 6);
  align-items: center;
}
.incluye__llamado { grid-column: 1 / -1; margin-top: calc(var(--u) * 3); }

.lista-si { gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 5); }
.lista-si li { color: var(--tinta-suave); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
.lista-si strong { color: var(--tinta); font-weight: 600; }
/* El guiño va en la voz de los titulares, en saffron: se lee como una frase
   dicha en voz alta, no como una nota al margen. */
.incluye__guino {
  margin-top: calc(var(--u) * 4);
  color: var(--saffron);
  font: 700 var(--t-sub)/1.25 var(--fuente-titulo);
  letter-spacing: -0.01em;
  max-width: 26ch;
}

.maqueta {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--u) * 4);
  align-items: center;
  justify-content: center;
  margin: 0;
}
.maqueta__tel {
  position: relative;
  width: clamp(13rem, 10rem + 8vw, 16.5rem);
  overflow: hidden;
  border-radius: 2rem;
  background: var(--negro-lienzo);
  box-shadow: 0 50px 60px -30px var(--tel-sombra);
}
.maqueta__pantalla { aspect-ratio: 1 / 2; overflow: hidden; }
.maqueta__pagina { display: block; width: 100%; height: auto; }

/* El recorrido: baja y se detiene en cada bloque mientras la leyenda marca
   cuál es. Las paradas son la posición de cada bloque en la captura
   (canciones-movil-recorrido.webp, 360 × 6030), en % de su alto: la portada
   (0), el precio de la portada (6.97), las canciones de muestra (21.56),
   los paquetes (46.43) y las preguntas (87.23). Cinco tramos de 5 s: 3.5 s
   quieto y 1.5 s de viaje. La leyenda usa la misma cuenta con un desfase
   por renglón. */
@media (prefers-reduced-motion: no-preference) {
  .maqueta__pagina { animation: maqueta-recorre 25s cubic-bezier(0.65, 0, 0.35, 1) 0.6s infinite both; }
  .maqueta__leyenda li { animation: leyenda-activa 25s linear 0.6s infinite both; }
  .maqueta__leyenda li:nth-child(2) { animation-delay: -19.4s; }
  .maqueta__leyenda li:nth-child(3) { animation-delay: -14.4s; }
  .maqueta__leyenda li:nth-child(4) { animation-delay: -9.4s; }
  .maqueta__leyenda li:nth-child(5) { animation-delay: -4.4s; }
  .maqueta--fuera .maqueta__pagina,
  .maqueta--fuera .maqueta__leyenda li { animation-play-state: paused; }
}
@keyframes maqueta-recorre {
  0%, 14% { transform: translateY(0); }
  20%, 34% { transform: translateY(-6.97%); }
  40%, 54% { transform: translateY(-21.56%); }
  60%, 74% { transform: translateY(-46.43%); }
  80%, 94% { transform: translateY(-87.23%); }
  100% { transform: translateY(0); }
}
@keyframes leyenda-activa {
  0%, 19.5% { color: var(--saffron); }
  20%, 100% { color: var(--tinta-suave); }
}

.maqueta__leyenda {
  display: grid;
  gap: calc(var(--u) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Cada rótulo señala hacia el teléfono con una raya del color del renglón. */
.maqueta__leyenda li {
  position: relative;
  padding-left: calc(var(--u) * 5);
  color: var(--tinta-suave);
  font: 700 clamp(1rem, 0.95rem + 0.3vw, 1.15rem)/1.3 var(--fuente-titulo);
}
.maqueta__leyenda li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--u) * 3.5);
  height: 2px;
  background: currentColor;
}
.maqueta__leyenda button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.maqueta__leyenda button:hover,
.maqueta__leyenda .is-activo { color: var(--saffron); }
.maqueta__pie {
  grid-column: 1 / -1;
  max-width: 52ch;
  margin: 0 auto;
  color: var(--tinta-suave);
  font-size: var(--t-menor);
  text-align: center;
}

/* ============================================================================
   5. Las bonificaciones: dos regalos

   Un envoltorio sobrio: la cinta es un solo trazo saffron, con un moño de
   verdad (dos lazos, el nudo y las puntas) y una etiqueta de regalo colgada
   del nudo, la misma forma de la etiqueta de precio de la portada. El texto
   se ve desde el primer cuadro; lo que se anima es la cinta, el moño y la
   etiqueta.
   ========================================================================= */

.regalos {
  display: grid;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 7);
}

.regalo {
  --cinta-y: 30px;
  --nudo-x: calc(var(--u) * 4 + 40px);
  position: relative;
  padding: calc(var(--u) * 13) calc(var(--u) * 4) calc(var(--u) * 5);
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: var(--negro);
}
/* La cinta, de lado a lado. */
.regalo::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cinta-y) - 1px);
  height: 2px;
  background: var(--saffron);
  transform: scaleX(var(--liston));
  transform-origin: left center;
}
/* El hilo de la etiqueta, del nudo al ojal. */
.regalo::after {
  content: '';
  position: absolute;
  left: var(--nudo-x);
  top: var(--cinta-y);
  width: 1px;
  height: 34px;
  background: var(--hud-borde-fuerte);
}
.regalo__lazo {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 4);
  top: calc(var(--cinta-y) - 19px);
  width: 80px;
  height: 50px;
  fill: none;
  stroke: var(--saffron);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transform-origin: 50% 37%;
}
.regalo__lazo path:first-child { fill: var(--negro); }
.regalo__lazo circle { fill: var(--saffron); stroke: none; }

.regalo__marbete {
  position: absolute;
  z-index: 1;
  left: calc(var(--nudo-x) - 16px);
  top: calc(var(--cinta-y) + 20px);
  padding: 6px 12px 6px 26px;
  background: var(--off-white);
  color: var(--negro);
  font: 700 var(--t-menor)/1.2 var(--fuente-titulo);
  letter-spacing: 0.01em;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  transform: rotate(-5deg);
  transform-origin: 16px 50%;
}
/* El ojal por donde pasa el hilo. */
.regalo__marbete::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--negro);
}

.regalo__titulo { position: relative; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); max-width: 16ch; }
.regalo__lista li { color: var(--tinta-suave); }

/* La 1, a lo ancho: lo que incluye a la izquierda y la demo de WhatsApp a la
   derecha, para que la caja no mida dos pantallas. */
.regalo--uno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: calc(var(--u) * 5);
  align-items: start;
}
.regalo--uno .regalo__titulo,
.regalo--uno .regalo__lista { grid-column: 1; }
.regalo--uno .chat-demo { grid-column: 2; grid-row: 1 / span 2; }

/* La 2, una franja: el dominio no necesita una caja del alto de la 1. */
.regalo--dos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 1.5) calc(var(--u) * 4);
}
.regalo--dos .regalo__precio { margin-top: 0; }

.regalo__precio {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.5);
  margin-top: calc(var(--u) * 3);
  font-family: var(--fuente-titulo);
  font-weight: 700;
}
.regalo__precio s {
  color: var(--tinta-suave);
  font-size: 1.6rem;
  text-decoration-color: var(--saffron);
  text-decoration-thickness: 3px;
}
.regalo__precio strong {
  color: var(--saffron);
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

/* --- El link en WhatsApp, con y sin preparar ------------------------------ */

.wa {
  display: grid;
  gap: calc(var(--u) * 1.25);
  align-content: start;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 2);
  border-radius: var(--radio);
  background: var(--wa-fondo);
  color: var(--wa-texto);
  font-family: var(--fuente-cuerpo);
}
/* "Sin preparar" y "Con tu Vitrina" van como las pastillas de fecha del chat. */
.wa__dia {
  justify-self: center;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--wa-dia);
  color: var(--wa-dia-texto);
  font-size: var(--t-rotulo);
  font-weight: 600;
  line-height: 1.3;
}
.wa__dia--si { margin-top: var(--u); color: var(--wa-texto); }
.wa__burbuja--rica { padding-top: 5px; }
.wa__burbuja {
  position: relative;
  justify-self: end;
  width: fit-content;
  max-width: min(100%, 21rem);
  padding: 6px 9px 8px;
  border-radius: 8px 0 8px 8px;
  background: var(--wa-burbuja);
  font-size: 0.9375rem;
  line-height: 1.35;
}
/* El piquito de la burbuja que mandaste. */
.wa__burbuja::after {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  border-top: 10px solid var(--wa-burbuja);
  border-right: 8px solid transparent;
}
.wa__link { color: var(--wa-link); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.wa__meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 7px 0 -3px 12px;
  color: var(--wa-meta);
  font-size: 0.6875rem;
  line-height: 1;
}
.wa__palomitas { width: 16px; height: 11px; fill: none; stroke: var(--wa-leido); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wa__tarjeta {
  display: grid;
  margin: 0 -5px 6px -6px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--wa-tarjeta);
}
.wa__img { width: 100%; height: auto; }
.wa__titulo { padding: 7px 10px 0; font-weight: 600; }
.wa__desc {
  display: -webkit-box;
  padding: 2px 10px 0;
  overflow: hidden;
  color: var(--wa-meta);
  font-size: 0.8125rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.wa__dominio { padding: 3px 10px 8px; color: var(--wa-meta); font-size: var(--t-rotulo); }
.chat-demo__nota { justify-self: end; margin-top: var(--u); color: var(--tinta); font-size: var(--t-menor); font-weight: 600; }

/* --- La comparación de velocidad ------------------------------------------ */

/* La prueba de la bonificación 1, en su propia banda: es el momento más
   convincente de la página y adentro del regalo quedaba como un extra. */
.velocidad {
  margin-top: calc(var(--u) * 6);
  padding: calc(var(--u) * 4);
  border: 1px solid var(--costura-luz);
  border-radius: var(--radio);
  background: var(--acero-riel);
}
.velocidad__titulo {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  max-width: 24ch;
}
.velocidad__fecha { margin-top: var(--u); color: var(--tinta-suave); font-size: var(--t-menor); }

.duelo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: calc(var(--u) * 2);
  align-items: stretch;
  margin-top: calc(var(--u) * 3);
}
.duelo__lado {
  padding: calc(var(--u) * 3);
  border: 1px solid var(--costura-luz);
  border-radius: var(--radio);
  background: var(--negro);
}
.duelo__lado--nos { border-color: var(--psi-verde); }
.duelo__quien { font: 700 var(--t-menor)/1.3 var(--fuente-titulo); letter-spacing: 0.01em; }
.duelo__quien span { color: var(--saffron); }
.duelo__vs {
  align-self: center;
  color: var(--saffron);
  font: 700 var(--t-sub)/1 var(--fuente-titulo);
}

.medidores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--u);
  margin: calc(var(--u) * 2.5) 0 0;
  padding: 0;
  list-style: none;
}
/* El medidor de PageSpeed: un anillo que se llena hasta el puntaje. La cifra
   está escrita desde el primer cuadro; lo que se anima es el anillo. */
.medidor { display: grid; justify-items: center; gap: 6px; text-align: center; }
.medidor__cifra {
  --color: var(--psi-verde);
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--negro) 80%, transparent 81%),
    conic-gradient(var(--color) calc(var(--v) * 1%), color-mix(in srgb, var(--color) 18%, transparent) 0);
  color: var(--color);
  font: 700 0.95rem/1 var(--fuente-titulo);
}
.medidor--verde .medidor__cifra { --color: var(--psi-verde); }
.medidor--naranja .medidor__cifra { --color: var(--psi-naranja); }
.medidor__que { color: var(--tinta-suave); font-size: var(--t-rotulo); line-height: 1.2; }

.duelo__hechos {
  display: grid;
  gap: var(--u);
  margin: calc(var(--u) * 2.5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--tinta-suave);
  font-size: var(--t-menor);
}
.duelo__hechos b { color: var(--tinta); font-weight: 600; }
.duelo__lado--ellos .duelo__hechos b { color: var(--psi-naranja); }

/* El recorte de la competencia: solo el código roto, legible. Es lo que el
   pie afirma, y tiene que poder comprobarse con el ojo. */
.duelo__captura {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: calc(var(--u) * 3);
  align-items: center;
  margin: calc(var(--u) * 3) 0 0;
}
.duelo__recorte img { background: var(--off-white); }
.duelo__pie { color: var(--tinta-suave); font-size: var(--t-menor); max-width: 36ch; }
.velocidad__nota { margin-top: calc(var(--u) * 3); color: var(--tinta); }
.google { margin: calc(var(--u) * 5) 0 0; }
.google__titulo { font: 700 var(--t-sub)/1.2 var(--fuente-titulo); }
.google__texto { margin-top: var(--u); max-width: 60ch; color: var(--tinta); }
.google__capturas { display: grid; gap: calc(var(--u) * 2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: calc(var(--u) * 2.5); }
.google__capturas img { width: 100%; height: auto; border-radius: 0.6rem; }
.google__pie { margin-top: var(--u); color: var(--tinta-suave); font-size: var(--t-menor); }

/* ============================================================================
   6. La oferta y las garantías

   El único momento de color de la página: una franja saffron a todo lo
   ancho (el logo de la marca va principalmente sobre saffron), con la
   tarjeta de precio en negro encima y las garantías en negro sobre saffron,
   cada una en la forma de la etiqueta colgada.
   ========================================================================= */

.bloque--oferta {
  border-top: 0;
  background: var(--saffron);
  color: var(--negro);
  scroll-margin-top: var(--nav-alto);
}
.oferta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 7);
  align-items: start;
}

.precio {
  position: relative;
  overflow: hidden;
  padding: calc(var(--u) * 7) calc(var(--u) * 4) calc(var(--u) * 4);
  border-radius: var(--radio);
  background: var(--negro);
  color: var(--tinta);
}
.precio__cinta {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-width: none;
  padding: 10px var(--u);
  border-bottom: 1px solid var(--hud-borde);
  background: var(--hud-superficie);
  color: var(--saffron);
  font: 700 var(--t-rotulo)/1 var(--fuente-titulo);
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}
.precio__nombre {
  color: var(--saffron);
  font-size: clamp(2.8rem, 1.8rem + 4vw, 4.8rem);
  letter-spacing: -0.03em;
}
.web .precio__nombre { text-transform: uppercase; }
.precio__que { margin-top: var(--u); color: var(--tinta-suave); }
.precio__cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 calc(var(--u) * 1.5);
  margin-top: calc(var(--u) * 3);
  font-family: var(--fuente-titulo);
  font-weight: 700;
}
.precio__antes {
  color: var(--tinta-suave);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  text-decoration: none;
  background: linear-gradient(var(--saffron), var(--saffron)) no-repeat 0 56% / var(--tachado) 3px;
}
.precio__desde { color: var(--tinta-suave); font-size: var(--t-menor); letter-spacing: 0.02em; }
.precio__monto { font-size: clamp(3.6rem, 2.4rem + 5vw, 6rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; }
.precio__moneda { font-size: var(--t-sub); letter-spacing: 0.08em; }

/* El reloj grande. Sin JS (o antes de que corra) se lee la fecha escrita; con
   JS aparecen las cajas y la fecha pasa al lector de pantalla. */
.cuenta { margin-top: calc(var(--u) * 3); }
.cuenta__fin { color: var(--tinta); font-size: var(--t-menor); }
.cuenta__rotulo,
.cuenta__cajas { display: none; }
.cuenta--viva .cuenta__fin {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.cuenta--viva .cuenta__rotulo {
  display: block;
  color: var(--tinta-suave);
  font: 700 var(--t-menor)/1 var(--fuente-titulo);
}
.cuenta--viva .cuenta__cajas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--u);
  margin-top: var(--u);
}
.cuenta__caja {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: calc(var(--u) * 1.25) 0;
  overflow: hidden;
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: var(--hud-superficie);
}
/* La ficha que cambia baja de arriba: promo.mjs la anima con el.animate(),
   sin forzar un reflow por segundo. */
.cuenta__caja b {
  color: var(--saffron);
  font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1 var(--fuente-titulo);
  font-variant-numeric: tabular-nums;
}
.cuenta__caja small {
  color: var(--tinta-suave);
  font: 700 var(--t-rotulo)/1 var(--fuente-titulo);
  letter-spacing: 0.02em;
}

.precio__lista {
  gap: var(--u);
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--costura-luz);
}
.precio__lista s { color: var(--tinta-suave); }
/* La mensualidad, dicha como un renglón más del precio: la etiqueta chica a
   la izquierda y la cifra en la tipografía de las cifras, sin justificarla. */
.precio__mes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 0.5) calc(var(--u) * 2);
  max-width: none;
  margin: calc(var(--u) * 3) 0;
  padding: calc(var(--u) * 2) 0;
  border-block: 1px solid var(--costura-luz);
}
.precio__mes-que {
  color: var(--tinta-suave);
  font: 700 var(--t-menor)/1.3 var(--fuente-titulo);
}
.precio__mes strong { font: 700 var(--t-sub)/1 var(--fuente-titulo); }

.precio__garantias { gap: var(--u); margin: 0 0 calc(var(--u) * 3); }
.precio__garantias li { font: 700 var(--t-cuerpo)/1.3 var(--fuente-titulo); }

/* La columna de las garantías acompaña a la tarjeta mientras se lee: sin eso
   quedaba un hueco de 375 px abajo a la derecha, justo donde se decide. */
.garantias {
  position: sticky;
  top: calc(var(--nav-alto) + var(--u) * 3);
  display: grid;
  gap: calc(var(--u) * 3);
  color: var(--negro);
}
.garantias__titulo { margin-bottom: var(--u); color: var(--negro); }
/* Cada garantía, una etiqueta colgada impresa sobre el saffron. */
.garantia {
  position: relative;
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 6);
  background: var(--sobre-saffron-etiqueta);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 50%);
}
.garantia::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid var(--negro);
  border-radius: 50%;
}
.garantia__tipo {
  color: var(--sobre-saffron-suave);
  font: 700 var(--t-menor)/1.3 var(--fuente-titulo);
}
.garantia__titulo { margin-top: var(--u); color: var(--negro); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.05; }
.garantia__texto { margin-top: calc(var(--u) * 1.5); color: var(--sobre-saffron-suave); }
/* La condición va escrita a la vista, en letra de condición, no escondida. */
.garantia__condicion {
  margin-top: calc(var(--u) * 1.5);
  color: var(--sobre-saffron-suave);
  font-size: var(--t-menor);
  font-style: italic;
}

/* ============================================================================
   7. Las dudas
   ========================================================================= */

.dudas {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: calc(var(--u) * 7);
  align-items: start;
}
.dudas__cabeza { position: sticky; top: calc(var(--nav-alto) + var(--u) * 3); }

.agente-dudas {
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 2.5);
  border: 1px dashed var(--hud-borde-fuerte);
  border-radius: var(--radio);
}
.agente-dudas__texto { color: var(--tinta-suave); font-size: var(--t-menor); }
.agente-dudas__boton {
  margin-top: calc(var(--u) * 1.5);
  min-height: calc(var(--u) * 5.5);
  padding-inline: calc(var(--u) * 2);
  border: 1px solid var(--hud-borde-fuerte);
  border-radius: var(--radio);
  background: transparent;
  color: var(--saffron);
  font: 700 var(--t-menor)/1 var(--fuente-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.agente-dudas__boton:hover,
.agente-dudas__boton:focus-visible { background: var(--hud-superficie); }

.faq { border-top: 1px solid var(--costura-luz); }
.faq__item { border-bottom: 1px solid var(--costura-luz); }
.faq__pregunta {
  position: relative;
  display: block;
  padding: calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * 3) 0;
  font: 700 clamp(1.1rem, 1rem + 0.5vw, 1.35rem)/1.25 var(--fuente-titulo);
  list-style: none;
  cursor: pointer;
}
.faq__pregunta::-webkit-details-marker { display: none; }
/* El signo de la pregunta es el isotipo. Cerrada, en blanco. Abierta, se
   enciende: la tapa saffron con la S calada, que es la versión principal del
   manual. Gira media vuelta al cambiar; la S tiene simetría de medio giro, así
   que termina derecha. */
.faq__pregunta::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--marca-tapa);
  height: var(--marca-tapa);
  margin-top: calc(var(--marca-tapa) / -2);
  border-radius: var(--radio);
  background: var(--tinta);
  -webkit-mask: var(--isotipo-en-tapa);
  mask: var(--isotipo-en-tapa);
  transition: transform var(--dur-media) var(--ease);
}
.faq__item[open] .faq__pregunta::after {
  background: var(--saffron);
  -webkit-mask: var(--isotipo-en-tapa), linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
  -webkit-mask-composite: xor;
  mask: var(--isotipo-en-tapa), linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
  mask-composite: exclude;
  transform: rotate(180deg);
}
.faq__respuesta { padding-bottom: calc(var(--u) * 3); color: var(--tinta-suave); }

/* ============================================================================
   El cierre
   ========================================================================= */

.cierre-web {
  position: relative;
  overflow: hidden;
  padding: calc(var(--unidad) * 1.3) var(--web-margen);
  border-top: 1px solid var(--hud-borde);
  background: var(--negro);
  text-align: center;
}
.cierre-web__interior { display: grid; justify-items: center; max-width: 52rem; margin: 0 auto; }
.cierre-web__titulo { font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height: 0.95; text-wrap: balance; }
.cierre-web__titulo em { display: block; color: var(--saffron); font-style: normal; }
.cierre-web__precio { margin: calc(var(--u) * 3) auto calc(var(--u) * 4); color: var(--tinta-suave); font-size: var(--t-sub); }
.cierre-web__precio strong { color: var(--tinta); font-family: var(--fuente-titulo); font-weight: 700; }
.cierre-web__precio s { text-decoration-color: var(--saffron); }
.cierre-web .tecla--enorme { max-width: 32rem; }
.cierre-web__nota { margin: calc(var(--u) * 4) auto 0; color: var(--tinta); font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); }
.cierre-web__nota b { color: var(--saffron); font-family: var(--fuente-titulo); }

/* ============================================================================
   La barra de abajo en el teléfono
   ========================================================================= */

.barra-wa { display: none; }

@media (max-width: 760px) {
  .barra-wa:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 1.5);
    padding: var(--u) calc(var(--u) * 1.5) calc(var(--u) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hud-borde);
    background: color-mix(in srgb, var(--negro) 96%, transparent);
    transform: translateY(110%);
    transition: transform var(--dur-media) var(--ease);
  }
  .barra-wa.barra-wa--visible { transform: none; }
  .barra-wa__precio { flex: none; font-family: var(--fuente-titulo); font-weight: 700; line-height: 1.1; }
  .barra-wa__precio strong { font-size: 1.35rem; }
  .barra-wa__precio span { color: var(--tinta-suave); font-size: var(--t-rotulo); letter-spacing: 0.04em; }
  .barra-wa__desde { display: block; }
  .barra-wa__tecla { flex: 1; min-height: calc(var(--u) * 6.5); padding: var(--u) calc(var(--u) * 2); font-size: 1.1rem; }
  .web .pie { padding-bottom: calc(var(--u) * 11); }

  /* El riel del celular en /web: "Páginas web" apuntaba a esta misma página.
     Queda el menú, el agente (de contorno) y la cinta, que baja a la oferta. */
  .web .riel__links { display: none; }
  .web .riel__menu { margin-left: auto; }
}

/* ============================================================================
   Responsive
   ========================================================================= */

/* Pantallas bajas (una laptop de 1366x768 o de 1440x900): el letrero baja de tamaño y la
   portada de aire, para que el botón entre sin scrollear. */
@media (max-height: 920px) and (min-width: 621px) {
  .portada { padding-top: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 5); }
  .portada__rotulo { margin-bottom: calc(var(--u) * 2); }
  .portada__titular { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
  .portada__titular em { font-size: clamp(3.6rem, 1rem + 8vw, 6.5rem); }
  .portada__bajada { margin-top: calc(var(--u) * 2); }
  .etiqueta { margin-top: calc(var(--u) * 2.5); padding-block: calc(var(--u) * 1.5); }
  .etiqueta__ahora { flex-basis: auto; }
  .etiqueta__monto { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); }
  .portada__teclas { margin-top: calc(var(--u) * 2.5); }
}

@media (max-width: 900px) {
  .portada { padding-top: calc(var(--u) * 4); padding-bottom: calc(var(--u) * 6); }
  .portada__interior { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 3); }
  .abanico { --tel: min(40cqi, 16rem); width: 100%; max-width: 34rem; min-height: 0; height: calc(var(--tel) * 2.35); margin-inline: auto; }

  .obras { grid-template-columns: minmax(0, 1fr); }
  .obra:first-child .obra__texto { display: block; }
  .obra__vitrina .marco--telefono,
  .obra:first-child .obra__vitrina .marco--telefono { width: 28%; margin-top: -20%; }

  .pasos { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 4); }
  .pasos::before {
    left: 2.25rem;
    right: auto;
    top: 2.25rem;
    bottom: 2.25rem;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--saffron), var(--hud-borde) 70%, transparent);
    transform: scaleY(var(--via));
    transform-origin: center top;
  }
  .paso { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: calc(var(--u) * 2.5); }
  .paso__num { grid-row: span 2; }
  .paso__titulo { margin-top: calc(var(--u) * 0.5); }
  .paso__texto { margin-top: var(--u); }

  .incluye { grid-template-columns: minmax(0, 1fr); }
  .regalos { grid-template-columns: minmax(0, 1fr); }
  .oferta { grid-template-columns: minmax(0, 1fr); }
  .garantias { position: static; }
  .dudas { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 3); }
  .dudas__cabeza { position: static; }
}

@media (max-width: 620px) {
  /* En el celular la portada es una columna: el titular, una tira del
     abanico (el trabajo real, en la primera pantalla), la bajada, el botón y
     la etiqueta de precio, que ya se lee en la cinta. */
  .portada { padding-top: calc(var(--u) * 3); }
  .portada__interior { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .portada__texto,
  .portada__rotulo-caja { display: contents; }
  .portada__rotulo { order: 0; align-self: flex-start; margin-bottom: calc(var(--u) * 2); }
  .portada__titular { order: 1; }
  .abanico { order: 2; }
  .portada__bajada { order: 3; margin-top: calc(var(--u) * 2); }
  .portada__teclas { order: 4; margin-top: calc(var(--u) * 2.5); }
  .etiqueta { order: 5; display: grid; margin-top: calc(var(--u) * 3); }
  .portada__teclas .tecla--wa { width: 100%; }
  .portada__nota { width: 100%; text-align: center; }

  /* La tira: los tres teléfonos asoman sobre el filo de la vitrina, cortados
     abajo como en un aparador. */
  .abanico {
    --tel: 7.4rem;
    align-self: stretch;
    width: auto;
    max-width: none;
    height: 10.5rem;
    margin: calc(var(--u) * 2) calc(var(--web-margen) * -1) 0;
    overflow: hidden;
    border-bottom: 1px solid var(--hud-borde);
  }
  .abanico__tel { top: 1rem; --y: 0%; }
  .abanico__tel--1,
  .abanico__tel--3 { --y: 9%; }
  .abanico__tel { border-radius: 1rem; }

  .obra__vitrina .marco--telefono,
  .obra:first-child .obra__vitrina .marco--telefono { width: 31%; margin: -20% 4% var(--u) calc(var(--u) * 2); }

  .regalo--uno { display: block; }
  .regalo--uno .chat-demo { margin-top: calc(var(--u) * 4); }
  .velocidad { padding: calc(var(--u) * 2.5) calc(var(--u) * 2); }
  .duelo__captura { grid-template-columns: minmax(0, 1fr); }
  /* Cuatro anillos en fila no dejan lugar a "Accesibilidad" a 12px: dos por
     fila, con el nombre al lado del anillo. */
  .medidores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.5) var(--u); }
  .medidor { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--u); text-align: left; }

  .maqueta { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: calc(var(--u) * 3); }
  .maqueta__leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: calc(var(--u) * 1.5) calc(var(--u) * 2); }
  .maqueta__leyenda li { padding-left: calc(var(--u) * 3); font-size: var(--t-menor); }
  .maqueta__leyenda li::before { width: calc(var(--u) * 2); }

  .regalo { padding: calc(var(--u) * 13) calc(var(--u) * 2.5) calc(var(--u) * 4); --nudo-x: calc(var(--u) * 2.5 + 40px); }
  .regalo__lazo { left: calc(var(--u) * 2.5); }

  .wa { padding: calc(var(--u) * 2) calc(var(--u) * 1.5); }

  .duelo { grid-template-columns: minmax(0, 1fr); }
  .duelo__vs { justify-self: center; }
  .duelo__lado { padding: calc(var(--u) * 2); }

  .precio { padding: calc(var(--u) * 7) calc(var(--u) * 2.5) calc(var(--u) * 3); }
  .garantia { padding-left: calc(var(--u) * 5.5); }
  .llamado .tecla--wa { width: 100%; }
  .tecla--enorme { padding-inline: calc(var(--u) * 2); font-size: 1.25rem; white-space: nowrap; }
}

/* ============================================================================
   Las páginas cortas que traen gente de Google a /web (2026-10-03):
   /diseno-web-tulum y /cuanto-cuesta-una-pagina-web-en-cancun. Usan los
   componentes de esta hoja; acá va solo lo que /web no tiene: la obra o la
   tarjeta de la columna derecha de la portada, el enlace a /web y la lista de
   lo que sube el precio.
   ========================================================================= */

.portada__obra { min-width: 0; }
.portada__obra .marco--telefono { margin-bottom: 0; }

.portada__mas {
  margin-top: calc(var(--u) * 2.5);
  font: 700 var(--t-menor)/1.3 var(--fuente-titulo);
  letter-spacing: 0.02em;
}

/* La otra mitad de la respuesta del precio, como una tarjeta junto a él. */
.extras {
  align-self: center;
  padding: calc(var(--u) * 4);
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: var(--hud-superficie);
}
.extras__titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.05; text-wrap: balance; }
.extras__lista {
  display: grid;
  gap: calc(var(--u) * 2);
  margin: calc(var(--u) * 3) 0 0;
  padding: 0;
  list-style: none;
}
.extras__lista li {
  position: relative;
  padding-left: calc(var(--marca) + var(--u) * 1.5);
  color: var(--tinta-suave);
}
/* La viñeta es el isotipo (pedido de Axel, 2026-10-04: fuera las cruces). En
   blanco, que es como el manual lo admite sobre fondo oscuro. */
.extras__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.05em;
  width: var(--marca);
  height: var(--marca);
  background: var(--tinta);
  -webkit-mask: var(--isotipo-justo);
  mask: var(--isotipo-justo);
}
.extras__lista strong { color: var(--tinta); font-weight: 600; }
.extras__nota {
  margin-top: calc(var(--u) * 3);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--costura-luz);
  color: var(--tinta);
}

@media (max-width: 620px) {
  .portada__mas { order: 5; }
  .portada__obra { order: 6; margin-top: calc(var(--u) * 5); }
  .extras { padding: calc(var(--u) * 3) calc(var(--u) * 2.5); }
}

/* El rótulo de idioma sobre cada captura (Tulum: la compu en español y el
   teléfono en inglés). Una placa chica en la esquina, no un sello. */
.marco:has(> .idioma) { position: relative; }
.idioma {
  position: absolute;
  z-index: 2;
  top: calc(var(--u) * 2);
  left: calc(var(--u) * 2);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.25);
  border-radius: var(--radio);
  background: var(--negro);
  color: var(--saffron);
  font: 700 var(--t-rotulo)/1 var(--fuente-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================================
   Las páginas por tipo de negocio y la sección de posicionamiento de /web:
   listas y notas a un ancho que se lee (62 caracteres), no a todo el contenedor.
   ========================================================================= */

.bloque__interior > .lista-si { max-width: 62ch; }
.rubro__nota {
  max-width: 62ch;
  margin-top: calc(var(--u) * 4);
  padding-left: calc(var(--u) * 2);
  border-left: 2px solid var(--saffron);
  color: var(--tinta-suave);
}
.bloque__interior > .obra__abrir { margin-top: calc(var(--u) * 4); }