/* ══════════════════════════════════════════════════════════════════════════════════════════
   PORTADA DE BEEPTV SOBRE LA PLANTILLA CANVAS
   ------------------------------------------------------------------------------------------
   Esta hoja es la ÚNICA capa de marca que se pone encima de `canvas/style.css`. Nació en S157 al
   montar las dos primeras secciones y desde S163 viste la portada COMPLETA, que es `index.html`.
   Aquí viven los cimientos (colores, tipografía, ritmo de sección, botones) que comparten las diez
   secciones.

   ⚠️ `styles.css` NO desapareció: lo siguen usando `loop.html`, `tap.html`,
   `aviso-de-privacidad.html` y `terminos.html`. Ninguna página carga las dos hojas a la vez, que
   es la regla que importa.

   Regla de la migración (arquitecto, S152): NUNCA cargar `styles.css` y `canvas/style.css` en el
   mismo documento. Esta hoja sustituye a la vieja, no la acompaña.

   Mundo: la portada es BeepTV madre, o sea FONDO CLARO con los azules de su logotipo
   (DISENO-SITIO-PUBLICO.md, apartado 2). Oscuro es Loop; verde claro es Tap.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --navy: #2f5f9e;
  --azul: #5c9adb;

  --fondo: #f6f8fc;
  --superficie: #ffffff;
  --borde: #dde5f0;
  --tinta: #0f2340;
  --tenue: #566880;
  --acento: var(--navy);

  /* El azul del escalón destacado de Planes. NO es `--navy`: ese tiene 54% de saturación y se
     leía como un azul corporativo casi igual al navy de "Negocio completo" (solo 2.44 de
     separación). Este tiene 89% y llama desde lejos. El blanco encima da 5.90, que además deja
     sitio para la escala de tonos apagados de dentro de la tarjeta. */
  --azul-vivo: #0d5bdd;

  /* Los otros dos mundos (apartado 2 del documento de diseño). En esta página SOLO se usan dentro
     de la sección 3, donde cada producto se presenta con el color que le toca. Fuera de ahí la
     portada es la marca madre y no se asoma ni el lima de Loop ni el verde de Tap. */
  --loop-fondo: #0B1628;
  --loop-lima: #B7F000;
  --loop-tenue: #b9c4d4;
  --loop-borde: #24344f;
  --tap-fondo: #eaf7f0;
  --tap-acento: #1d9e75;
  /* El verde de marca de Tap (#1d9e75) sobre su propio fondo claro da 3.07 de contraste, y para
     texto normal hace falta 4.5. Este es el mismo verde oscurecido, SOLO para texto; la marca no
     cambia. Con él sube a 4.81. Medido, no supuesto. */
  --tap-acento-texto: #157a5a;
  --tap-tinta: #0d2b20;
  --tap-tenue: #4d6b5f;
  --tap-borde: #d8e9e0;

  /* Canvas lee estas para sus propios componentes: se apuntan a las de Beep. */
  --cnvs-themecolor: var(--navy);
  --cnvs-body-bg: var(--fondo);
  --cnvs-contrast-900: var(--tinta);
  --cnvs-contrast-600: var(--tenue);
  --cnvs-body-font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cnvs-heading-font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3 {
  font-family: Poppins, system-ui, sans-serif;
  color: var(--tinta);
  letter-spacing: -0.025em;
  text-transform: none;
}

/* ── Cimientos compartidos ────────────────────────────────────────────────────────────────
   El ritmo de espaciado de la sección de giros, sacado a una clase para que las diez secciones
   respiren igual. Si una sección nueva no usa esto, se nota: rompe la cadencia de la página. */
.seccion { padding: clamp(48px, 7vw, 96px) 0; }
.seccion .encabezado { max-width: 40ch; margin-bottom: clamp(26px, 3.4vw, 40px); }
/* LA ESCALA DEL TITULAR DE SECCIÓN, EN UN SOLO LUGAR. Estaba escrita cuatro veces (encabezado,
   cruce, cierre y banda) con los mismos números copiados; cuatro sitios donde tocar para cambiar
   uno. Ahora la manda `.seccion h2` y cada sección solo pone lo suyo (la medida, o el tamaño más
   chico de la banda de color). Consolidado en S159 sin mover un pixel: se midieron los nueve
   titulares antes y después. */
.seccion h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 600; line-height: 1.1;
  letter-spacing: -0.025em; margin: 0;
}
.seccion .encabezado .sub { margin: 14px 0 0; color: var(--tenue); font-size: 1.02rem; max-width: 62ch; }

/* Los botones son PÍLDORAS, igual que los chips de los giros: es lo que hace que las secciones
   se vean de la misma familia sin repetir el mismo bloque de color. */
.btn-beep {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1rem; font-weight: 500; text-decoration: none;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-beep:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.btn-beep:active { transform: scale(0.98); }
.btn-principal { background: var(--acento); color: #fff; }
.btn-fantasma { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
@media (hover: hover) and (pointer: fine) {
  .btn-principal:hover { background: var(--tinta); color: #fff; }
  .btn-fantasma:hover { border-color: #c3d3e8; }
}

/* ══ EL FOCO DEL TECLADO, QUE LA PLANTILLA APAGA ═════════════════════════════════════════
   Canvas trae `:active, :focus { outline: none !important }`: una regla GLOBAL con `!important`
   que apaga el contorno de foco en todo el documento. Por eso todas las reglas `:focus-visible`
   que hay más abajo estaban escritas desde S157 y **no pintaban nada** — no es cuestión de
   especificidad: un `!important` de la plantilla gana a cualquier regla normal nuestra, esté donde
   esté. Se descubrió recorriendo la página con el tabulador, no leyendo el CSS.

   ⚠️ EL `!important` DE AQUÍ NO SOBRA. Es la única forma de ganarle a la de la plantilla. Quien lo
   quite por "limpieza" deja la página sin foco visible y sin que nada avise: el verificador no lo
   caza. Quien navega con teclado deja de saber dónde está parado. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--azul) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}
/* Sobre los bloques oscuros el azul no se despega: ahí el contorno va en blanco. */
.plan-destacado a:focus-visible,
.banda a:focus-visible,
.planes-completo a:focus-visible {
  outline-color: #fff !important;
}

/* El salto al contenido, para quien navega con teclado. */
.saltar {
  position: fixed; left: 12px; top: -60px; z-index: 50;
  background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none;
  transition: top .18s ease;
}
.saltar:focus { top: 12px; color: #fff; }

/* ── Barra de arriba ──────────────────────────────────────────────────────────────────── */
.barra { background: var(--fondo); border-bottom: 1px solid var(--borde); }
.barra > .container { display: flex; align-items: center; gap: 20px; height: 68px; }
.barra .logo { display: flex; align-items: center; flex-shrink: 0; }
.barra .logo img { height: 30px; width: auto; }
.barra nav { margin-left: auto; }
.barra ul { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.barra ul a {
  display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none;
  color: var(--tenue); font-size: 0.92rem; font-weight: 500;
}
@media (hover: hover) and (pointer: fine) { .barra ul a:hover { color: var(--tinta); } }
.barra .entrar { background: var(--acento); color: #fff; }
@media (hover: hover) and (pointer: fine) { .barra .entrar:hover { background: var(--tinta); color: #fff; } }
.barra ul a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (max-width: 767.98px) {
  .barra > .container { height: 62px; gap: 12px; }
  .barra .solo-ancho { display: none; }
  .barra ul a { padding: 8px 12px; font-size: 0.88rem; }
}

/* ══ SECCIÓN 1 · PORTADA ═════════════════════════════════════════════════════════════════
   RITMO: PESADA. El peso lo pone LA FOTO, no una banda de color: es la única imagen del sitio
   donde se ven las dos mitades del producto a la vez (pantallas encendidas arriba, tableta de
   calificación en el mostrador).

   ⚠️ LA FOTO NO SE ESTIRA A PANTALLA COMPLETA. Mide 16:9. Un fondo a sangre en un teléfono de
   390 px de ancho recorta a proporción 0.46, o sea deja ver cerca del 26% del ancho original: se
   perdían las pantallas o la tableta, que son justo lo que la foto tiene que demostrar. Por eso el
   hueco es 16:9 SIEMPRE, con el texto encima, igual que los huecos de la sección de giros. */
.portada { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); }
.portada h1 {
  font-size: clamp(2.05rem, 5.1vw, 3.5rem); font-weight: 600; line-height: 1.06;
  letter-spacing: -0.03em; margin: 0; max-width: 17ch;
}
.portada h1 .segundo { display: block; color: var(--acento); }
.portada .lead {
  margin: clamp(18px, 2.2vw, 26px) 0 0; color: var(--tenue);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.55; max-width: 56ch;
}
.portada .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.2vw, 36px); }

.foto-portada {
  margin: clamp(36px, 4.5vw, 64px) 0 0;
  border-radius: 16px; overflow: hidden; background: var(--superficie);
  box-shadow: 0 30px 64px -34px rgba(15, 35, 64, .5);
}
/* El `height: auto` NO es decorativo: sin él manda el atributo `height` del <img> (1350 px) y el
   marco sale vertical en vez de 16:9. Trampa de Canvas verificada en pantalla en S153. */
.foto-portada img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

@media (max-width: 575.98px) {
  /* En 360 px dos botones lado a lado quedan en 168 px cada uno y la etiqueta larga se parte en
     dos renglones. Apilados se leen de corrido y el pulgar los alcanza igual. */
  .portada .botones { flex-direction: column; align-items: stretch; }
  .portada .botones .btn-beep { width: 100%; }
}

/* ══ SECCIÓN 2 · TE INCOMODA ═════════════════════════════════════════════════════════════
   RITMO: LIGERA. Va entre una portada PESADA y una sección 3 MEDIA, así que es TEXTO Y NADA MÁS:
   sin fotos, sin tarjetas, sin banda de color. Lo único que la sostiene es la tipografía y el aire.
   En S151 esta misma sección era una banda oscura a todo lo ancho; pesaba tanto como la portada y
   la página entera sonaba a un solo volumen. */
/* El titular de esta sección es largo (36 caracteres). Con la medida de 40ch que comparten las
   demás secciones, en 1366 caía en TRES renglones y el tercero era una sola palabra suelta. La
   medida se fija aquí en `ch` sobre el propio titular, así crece cuando crece la letra y se queda
   en dos renglones a cualquier ancho. La medida compartida no se toca: la sección de giros ya está
   aprobada con la suya y no es cosa de moverla. */
.incomoda .encabezado { max-width: none; }
.incomoda .encabezado h2 { max-width: 19ch; }

.incomoda .supuestos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}
.incomoda .supuestos li {
  padding: clamp(20px, 2.4vw, 26px) 0;
  border-top: 1px solid var(--borde);
}
.incomoda .supuestos li b {
  display: block; font-weight: 600; font-size: clamp(1.06rem, 1.6vw, 1.22rem);
  line-height: 1.3; color: var(--tinta); letter-spacing: -0.015em;
}
.incomoda .supuestos li p {
  margin: 8px 0 0; color: var(--tenue); font-size: 1rem; line-height: 1.5; max-width: 46ch;
}
/* De dos en dos a partir de tableta: cuatro renglones seguidos alargan la sección y la vuelven
   pesada, que es justo lo contrario de lo que esta sección tiene que hacer. */
@media (min-width: 768px) {
  .incomoda .supuestos { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); }
}
.incomoda .remate {
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem); font-weight: 500; line-height: 1.4;
  color: var(--tinta); letter-spacing: -0.015em; max-width: 34ch;
}
/* La segunda mitad del remate baja el tono: es el alivio, no el golpe. */
.incomoda .remate span { display: block; color: var(--tenue); font-weight: 400; }

/* ══ SECCIÓN 3 · TE ALIVIA ═══════════════════════════════════════════════════════════════
   RITMO: MEDIA. Tarjetas, que es lo que pesa a medias entre el texto pelón de la 2 y las fotos de
   la 5. Tres tarjetas y se acabó: la sección NO se carga de texto.

   ⚠️ NO SON UN MENÚ DE TRES OPCIONES. BeepTV se vende completo; estas son sus partes. Por eso el
   subtítulo lo dice con todas sus letras antes de que se vean las tarjetas, y por eso las tres
   caben en un solo golpe de vista: quien las lee como escalera de precios elige una, y se pierde
   el anclaje alto (apartado 4 del documento).

   ⚠️ AUDIENCIA NO ES UN PRODUCTO QUE SE PUEDA COMPRAR HOY. Requiere cámara por pantalla, no está
   decidido quién la paga y falta el trabajo legal. Por eso su tarjeta NO es un enlace (no lleva a
   ninguna página), lleva el borde PUNTEADO —la señal visual de "esto todavía no es una puerta"— y
   cierra con la nota de que se cotiza aparte. Y la frase "sin guardar rostros ni identificar a
   nadie" va SIEMPRE con ella: es la primera objeción que van a hacer, y va en negritas para que se
   lea aunque la persona solo barra la página con la vista. */
.maneras {
  display: grid; gap: 16px;
  margin-top: clamp(30px, 4vw, 44px);
}
/* Tres en renglón solo cuando de verdad caben. A 880 px cada tarjeta queda en unos 270 px, que es
   lo mínimo para que el párrafo no se parta en confeti. Abajo de eso van apiladas. */
@media (min-width: 880px) { .maneras { grid-template-columns: repeat(3, 1fr); } }

.manera {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 30px);
  border: 1px solid var(--borde); border-radius: 16px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.manera-marca {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.75;
}
.manera h3 {
  margin: 12px 0 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; color: inherit;
}
/* La medida tope importa cuando las tarjetas van APILADAS (abajo de 880 px): sin ella el párrafo
   se estira de borde a borde en una tableta y la tarjeta se ve flaca y vacía. En tres columnas la
   tarjeta mide bastante menos de 46ch, así que ahí no cambia nada. */
.manera p { margin: 10px 0 0; font-size: 0.99rem; line-height: 1.5; max-width: 46ch; }
/* `margin-top: auto` pega el pie al fondo de la tarjeta: las tres cierran a la misma altura
   aunque sus párrafos midan distinto. */
.manera .ir {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 22px; font-weight: 600; font-size: 0.95rem;
}
.manera .ir svg { width: 17px; height: 17px; transition: transform .18s ease; }
/* Sin opacidad: al 72% esta nota daba 3.15 de contraste sobre blanco y es texto chico (13 px).
   Con el gris tenue completo sube a 5.69 y se sigue viendo secundaria, que era el objetivo. */
.manera .nota { margin-top: auto; padding-top: 22px; font-size: 0.84rem; color: var(--tenue); }
@media (hover: hover) and (pointer: fine) {
  a.manera:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -28px rgba(15, 35, 64, .45); }
  a.manera:hover .ir svg { transform: translateX(4px); }
}
a.manera:active { transform: scale(0.995); }
a.manera:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* Cada tarjeta, el mundo que le toca. */
.manera-loop { background: var(--loop-fondo); border-color: var(--loop-borde); color: #fff; }
.manera-loop p { color: var(--loop-tenue); }
.manera-loop .ir { color: var(--loop-lima); }

.manera-tap { background: var(--tap-fondo); border-color: var(--tap-borde); color: var(--tap-tinta); }
.manera-tap p { color: var(--tap-tenue); }
.manera-tap .ir { color: var(--tap-acento-texto); }

/* Borde punteado a propósito: Audiencia es una capacidad, no una puerta. */
.manera-audiencia {
  background: var(--superficie); color: var(--tinta);
  border-color: var(--borde); border-style: dashed;
}
.manera-audiencia p { color: var(--tenue); }
.manera-audiencia p b { color: var(--tinta); font-weight: 600; }

/* ══ SECCIÓN 4 · TE SORPRENDE ════════════════════════════════════════════════════════════
   RITMO: MEDIA. Un solo panel con una sola idea. No lleva foto ni lista: lo que pesa es la frase.

   ⚠️ AQUÍ NO SE PROMETE QUE LA PANTALLA REACCIONE SOLA A UNA CALIFICACIÓN. Eso NO existe.
   ⚠️ Y TAMPOCO se promete un reporte que cruce los dos. Verificado contra el código en S158: hoy
   son TRES reportes separados (`survey/report` de Tap, `playback/summary` de Loop y `ads/report`
   de anunciantes) y ninguno cruza. Lo que SÍ existe es el panel compartido: la pantalla de Inicio
   (`backend/src/routes/home.js`) trae Loop y Tap en la misma vista. Por eso la frase termina en
   "en el mismo panel" y ahí se calla. */
.sorprende .panel-cruce {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
  padding: clamp(30px, 4.4vw, 56px) clamp(24px, 4vw, 48px);
  text-align: center;
  box-shadow: 0 18px 40px -30px rgba(15, 35, 64, .4);
}
/* Los dos nombres, en píldora, como los chips de los giros. Es la sección del CRUCE: verlos
   juntos antes de leer la frase dice de qué va sin gastar una línea de texto. */
.cruce-marcas {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.cruce-marcas .marca {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px; border: 1px solid transparent;
}
.cruce-marcas .marca-loop { background: var(--loop-fondo); color: #fff; }
.cruce-marcas .marca-tap { background: var(--tap-fondo); color: var(--tap-acento-texto); border-color: var(--tap-borde); }
.cruce-marcas .mas { color: var(--tenue); font-weight: 500; font-size: 1.05rem; }

.sorprende h2 { margin: 0 auto; max-width: 20ch; }
.sorprende .parrafo-grande {
  margin: clamp(22px, 3vw, 32px) auto 0; max-width: 46ch;
  font-size: clamp(1.08rem, 2vw, 1.4rem); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.45; color: var(--tenue); text-wrap: pretty;
}
/* La última frase es el remate y va EN SU PROPIO RENGLÓN, igual que el remate de la sección 2.
   Pegada al final del párrafo arrancaba a media línea, detrás de un "distintos.", y el golpe se
   perdía. Es la frase que sostiene toda la sección: tiene que quedar sola. */
.sorprende .parrafo-grande b {
  display: block; margin-top: .7em;
  color: var(--tinta); font-weight: 600;
}

/* ══ SECCIÓN 6 · TE TIENTA ═══════════════════════════════════════════════════════════════
   RITMO: banda de color CORTA. Viene después de los giros, que son pesados de fotografía, así que
   el color entra como corte, no como otro bloque largo.

   ⚠️ ES UNA TENTACIÓN, NO UNA EXPLICACIÓN. Tres o cuatro líneas y un enlace a Loop, donde el tema
   sí se desarrolla. Si esta sección crece, se come a la página de Loop y deja de tentar.
   La banda usa el azul de la marca madre, NO el oscuro de Loop: el mundo de Loop solo se asoma en
   la sección 3 y en las píldoras del cruce. */
/* LA BANDA DE COLOR, COMPARTIDA. La usan la sección 6 (retail media) y la sección 9 ("Negocio
   completo"). Se definió una sola vez a propósito: en S159 el revisor ya había señalado que el
   patrón de píldora estaba copiado cuatro veces, y no tiene sentido repetir el error con la banda. */
.banda {
  background: var(--tinta); color: #fff;
  border-radius: 20px;
  padding: clamp(30px, 4.4vw, 54px) clamp(24px, 4vw, 52px);
}
/* La banda es el único titular que se aparta de la escala, a propósito: dentro de un bloque de
   color el mismo tamaño pesa más, así que baja un punto. */
.banda h2 {
  color: #fff; margin: 0; max-width: 18ch;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.12;
}
.banda p {
  margin: clamp(16px, 2vw, 22px) 0 0; max-width: 58ch;
  color: #c3cede; font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.55;
}
.banda .btn-beep { margin-top: clamp(22px, 2.6vw, 30px); }
/* Sobre fondo oscuro el botón se invierte: blanco lleno. El navy sobre tinta no se despega. */
.banda .btn-principal { background: #fff; color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .banda .btn-principal:hover { background: var(--azul); color: #fff; }
}

/* ══ SECCIÓN 7 · TE DA CONFIANZA ═════════════════════════════════════════════════════════
   RITMO: MEDIA. Cuatro tarjetas sobrias.

   ⚠️ CERO PRUEBA SOCIAL INVENTADA (regla fija del documento, apartado 12): ni número de clientes,
   ni logotipos, ni reseñas, ni testimonios. Los cuatro puntos son HECHOS COMPROBABLES antes de
   firmar: dónde se factura, en qué idioma, con quién se habla y de quién es el equipo. */
.confianza .puntos {
  display: grid; gap: 16px;
  margin-top: clamp(30px, 4vw, 44px);
}
@media (min-width: 640px) { .confianza .puntos { grid-template-columns: repeat(2, 1fr); } }
.confianza .punto {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
  padding: clamp(22px, 2.4vw, 28px);
}
.confianza .punto h3 {
  margin: 0; font-size: clamp(1.08rem, 1.7vw, 1.24rem); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.015em;
}
.confianza .punto p { margin: 8px 0 0; color: var(--tenue); font-size: 0.99rem; line-height: 1.5; }

/* ══ SECCIÓN 8 · CÓMO FUNCIONA ═══════════════════════════════════════════════════════════
   RITMO: LIGERA. Chiquita y hasta abajo, A PROPÓSITO (apartado 6 del documento): quien llega aquí
   ya se convenció; esto solo le quita el miedo a instalarlo. Sin tarjeta, sin color, sin foto. */
.pasos { display: grid; gap: clamp(24px, 3vw, 36px); margin-top: clamp(30px, 4vw, 44px); padding: 0; list-style: none; }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li { display: block; }
.pasos .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--acento); color: #fff; font-size: 0.92rem; font-weight: 600;
}
.pasos b { display: block; margin-top: 14px; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.pasos p { margin: 8px 0 0; color: var(--tenue); font-size: 0.97rem; line-height: 1.5; }

/* ══ SECCIÓN 9 · PLANES ══════════════════════════════════════════════════════════════════
   MONTADA CON UN BLOQUE DE CANVAS, NO CON DISEÑO PROPIO. Ricardo rechazó la primera versión
   (tres cajas blancas sobre fondo blanco, sin jerarquía) y eligió, de los 16 bloques de precios
   que trae la plantilla, el de la TARJETA RELLENA (`block-content-pricing-3.html`), con el
   contenido estructurado como el de la ficha completa (`block-content-pricing-11.html`):
   una línea de "para quién es" y una lista de TODO lo que incluye.

   De Canvas se usan sus propias clases —`pricing-box`, `pricing-simple`, `pricing-features`,
   `iconlist`, `rounded-5`, `line`— y aquí solo se le ponen los colores de la marca y se arregla
   un fallo del bloque. Lo que NO se hizo fue rediseñarlo.

   ⚠️ LOS DOS BLOQUES OSCUROS NO SE PISAN (decisión de Ricardo, 18-sep): el escalón destacado va
   en el AZUL VIVO del logotipo y "Negocio completo" en el NAVY OSCURO. Además de distinguirse,
   queda jerarquizado: el escalón que queremos que miren primero es el más vivo; el "todo" es
   más serio.

   ⚠️ PRO TIENE QUE VERSE LA MÁS LLENA. Cada escalón muestra TODO lo que incluye, no solo lo que
   añade: lo heredado va en tono apagado y lo propio del escalón en tinta llena. Así el ojo lee
   "pagas más, recibes más", que era justo lo que fallaba. */

.planes-escalera { margin-top: clamp(30px, 4vw, 44px); }

/* La tarjeta, sobre el bloque de Canvas. Es flex en columna para que el BOTÓN quede anclado abajo
   (`margin-top: auto` en `.plan-accion`): así el hueco que sobra en los escalones con menos
   viñetas cae ENTRE la lista y el botón, y no como medio palmo de blanco al final de la tarjeta.
   Era el problema de Esencial, que con 2 viñetas medía lo mismo que Pro con 5. */
.plan-caja {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 20px;
}
.plan-caja h3 {
  margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; color: inherit;
}
/* "Precio por definir" va DEBAJO del nombre, donde iría el precio de verdad. A la derecha del
   nombre se leía como nota al margen y no como el precio del plan. */
.plan-precio { margin-top: 6px; font-size: 1.02rem; font-weight: 500; color: var(--tenue); }
/* El subrayado corto y grueso es del bloque de Canvas: da peso sin subir el tamaño. */
.plan-raya { width: 38px; height: 3px; border-radius: 2px; background: var(--acento); margin-top: 16px; }
.plan-para { margin: 18px 0 0; color: var(--tenue); font-size: 0.97rem; line-height: 1.5; }

.plan-caja .pricing-features { margin-top: clamp(20px, 2.4vw, 26px); background: none; border: 0; padding: 0; }
.plan-caja .pricing-features .titulo-incluye {
  margin: 0 0 12px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tenue);
}

/* ── EL FALLO DE LA PALOMITA, ARREGLADO ───────────────────────────────────────────────────
   Canvas define `.iconlist li { display:flex; flex-wrap:wrap }` y le da `flex:1 0 0%` a los
   HIJOS del `li`. El texto que va suelto detrás del icono NO es un elemento, así que no recibe
   esa regla: con una viñeta larga el texto envuelve y **la palomita se queda sola en su
   renglón**. Se ve en la demo del propio Canvas.
   El arreglo son dos cosas: el texto va dentro de un `<span>` (así sí le toca el `flex: 1 0 0%`
   de Canvas) y el `li` no envuelve. Probado con la viñeta más larga que tenemos. */
.plan-caja .iconlist li,
.planes-completo .iconlist li {
  flex-wrap: nowrap; align-items: start; line-height: 1.45;
}
.plan-caja .iconlist li i,
.planes-completo .iconlist li i { margin-top: .25em; }

.plan-caja .iconlist { --cnvs-iconlist-size: 0.97rem; --cnvs-iconlist-margin: 0.7rem; }
.plan-caja .iconlist li { color: var(--tinta); }
.plan-caja .iconlist li i { color: var(--acento); }
/* Lo HEREDADO del escalón anterior en tono apagado, lo PROPIO en tinta llena. Los tonos están
   MEDIDOS: la palomita no es adorno, marca que ese escalón sí lo incluye, así que pasa el 3.0
   que se le pide a un icono con significado. */
.plan-caja .iconlist li.heredado { color: var(--tenue); }          /* 5.40 */
.plan-caja .iconlist li.heredado i { color: #7d8da3; }              /* 3.21 */

/* El pie de la tarjeta: pegado abajo, con aire por encima. */
.plan-accion { margin-top: auto; padding-top: clamp(24px, 3vw, 32px); }
.plan-accion .btn-beep { width: 100%; }

/* ── El escalón destacado: RELLENO en el azul vivo ────────────────────────────────────────
   Es la razón por la que se eligió este bloque de Canvas. Un destacado que solo es borde se
   desinfla al apilarse en el teléfono; uno relleno sigue mandando.
   Todos los tonos de aquí abajo están medidos SOBRE `--azul-vivo`, no heredados del azul
   anterior: al cambiar el fondo, los que había dejaron de pasar. */
.plan-destacado {
  background: var(--azul-vivo);
  box-shadow: 0 26px 56px -30px rgba(13, 91, 221, .55);
}
.plan-destacado, .plan-destacado h3 { color: #fff; }
.plan-destacado .plan-raya { background: #fff; }
.plan-destacado .plan-precio,
.plan-destacado .plan-para,
.plan-destacado .pricing-features .titulo-incluye { color: #dbe7f6; }   /* 4.71 */
.plan-destacado .iconlist li { color: #fff; }                           /* 5.90 */
.plan-destacado .iconlist li i { color: #fff; }
.plan-destacado .iconlist li.heredado { color: #dbe7f6; }               /* 4.71 */
.plan-destacado .iconlist li.heredado i { color: #a8c2e2; }             /* 3.23 */
/* El botón del destacado: blanco sólido con el texto del azul vivo. Se hace SOBRESCRIBIENDO
   `.btn-principal` por contexto, que es el camino que ya usan la banda de la sección 6 y el bloque
   de "Negocio completo". Se intentó con una clase nueva (`btn-blanco`) y el arquitecto lo rechazó
   con razón: era una quinta declaración suelta del mismo patrón de píldora, justo la deuda que ya
   está registrada como SITIO-PILDORA-COMPARTIDA. Un solo camino para cada cosa. */
.plan-destacado .btn-principal { background: #fff; color: var(--azul-vivo); }  /* 5.90 */
@media (hover: hover) and (pointer: fine) {
  .plan-destacado .btn-principal:hover { background: var(--tinta); color: #fff; }
}
/* La etiqueta que dice por qué está destacado. `align-self` NO es decorativo: la tarjeta es flex
   en columna y sin él la píldora sale como una barra de lado a lado. */
.plan-etiqueta {
  display: inline-block; align-self: flex-start; margin-bottom: 14px;
  padding: 5px 12px; border-radius: 999px;
  background: #fff; color: var(--azul-vivo);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

/* La línea que explica por qué no hay precios, justo debajo de los tres. */
/* La línea que explica por qué no hay precios. Es TEXTO y nada más: el botón que tenía se quitó
   porque los cuatro bloques que la rodean ya llevan el suyo. */
.planes-cotiza {
  margin: clamp(26px, 3.2vw, 36px) 0 0;
  max-width: 52ch; color: var(--tenue); font-size: 1rem; line-height: 1.55;
}

/* ── "NEGOCIO COMPLETO" con el molde ancho de Canvas ──────────────────────────────────────
   Es el bloque `pricing-extended` de la plantilla (la fila ancha con la lista a la izquierda en
   dos columnas y el precio con su botón a la derecha). Molde mucho mejor que la tarjeta suelta
   que tenía antes: al ser ancho y de otra forma, se lee como EL TODO y no como un escalón más
   con el que compararse por precio (apartado 7 del documento). */
.planes-completo {
  margin-top: clamp(28px, 3.4vw, 44px);
  border-radius: 20px; overflow: hidden;
  background: var(--tinta); color: #fff;
}
.planes-completo .pricing-desc { padding: clamp(28px, 3.4vw, 44px); }
.planes-completo .pricing-title h3 {
  margin: 0; color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em;
}
.planes-completo .pricing-meta-desc { margin: 12px 0 0; color: #c3cede; font-size: 1rem; line-height: 1.5; }
.planes-completo .pricing-features { margin-top: 22px; background: none; border: 0; padding: 0; }
.planes-completo .iconlist li { color: #dbe3ee; font-size: 0.99rem; }
.planes-completo .iconlist li i { color: #fff; }

/* El brazo derecho: fondo un punto más claro para que se lea como su propia zona, igual que en
   el bloque original de Canvas. */
.planes-completo .pricing-action-area {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 8px; padding: clamp(28px, 3.4vw, 44px);
  background: rgba(255, 255, 255, .06);
}
.planes-completo .pricing-meta {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb0c8;
}
.planes-completo .pricing-price { font-size: 1.2rem; font-weight: 600; color: #fff; }
.planes-completo .pricing-action { margin-top: 12px; }
/* Sobre fondo oscuro el botón se invierte, igual que en la banda de la sección 6. */
.planes-completo .btn-principal { background: #fff; color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .planes-completo .btn-principal:hover { background: var(--azul); color: #fff; }
}

@media (max-width: 575.98px) {
  .planes-completo .pricing-action .btn-beep { width: 100%; }
}

/* ══ SECCIÓN 10 · PREGUNTAS Y CIERRE ═════════════════════════════════════════════════════
   RITMO: LIGERA (las preguntas) y luego el cierre, que es lo único que pide una acción. */
.preguntas { margin-top: clamp(26px, 3.4vw, 38px); border-top: 1px solid var(--borde); }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary {
  cursor: pointer; list-style: none;
  padding: clamp(16px, 2vw, 20px) 40px clamp(16px, 2vw, 20px) 0;
  font-size: clamp(1rem, 1.5vw, 1.08rem); font-weight: 500; letter-spacing: -0.01em;
  position: relative;
}
.preguntas summary::-webkit-details-marker { display: none; }
/* La cruz se hace con dos trazos y gira a "menos" al abrir: sin imagen y sin fuente de iconos. */
.preguntas summary::after,
.preguntas summary::before {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 14px; height: 2px; border-radius: 2px; background: var(--tenue);
  transition: transform .2s ease;
}
.preguntas summary::before { transform: translateY(-50%); }
.preguntas summary::after { transform: translateY(-50%) rotate(90deg); }
.preguntas details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.preguntas summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.preguntas details p {
  margin: 0 0 clamp(18px, 2.2vw, 22px); padding-right: 40px;
  color: var(--tenue); font-size: 1rem; line-height: 1.6; max-width: 72ch;
}
.preguntas details p a { color: var(--acento); }

.cierre { text-align: center; }
.cierre h2 { margin: 0 auto; max-width: 18ch; }
.cierre .sub { margin: 16px auto 0; max-width: 54ch; color: var(--tenue); font-size: 1.02rem; line-height: 1.55; }
.cierre .botones {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(26px, 3.2vw, 36px);
}
@media (max-width: 575.98px) {
  .cierre .botones { flex-direction: column; align-items: stretch; }
  .cierre .botones .btn-beep { width: 100%; }
}

/* ── El pie ──────────────────────────────────────────────────────────────────────────────
   Aquí viven el aviso de privacidad, los términos y los datos fiscales, que es lo que pide el
   apartado 6 para el cierre de la portada. */
.pie { border-top: 1px solid var(--borde); padding: clamp(28px, 3.4vw, 40px) 0; }
.pie > .container { display: grid; gap: 18px; }
@media (min-width: 768px) { .pie > .container { grid-template-columns: 1fr auto; align-items: start; } }
.pie .bloque { display: grid; gap: 6px; font-size: 0.88rem; color: var(--tenue); line-height: 1.6; }
@media (min-width: 768px) { .pie .enlaces { text-align: right; } }
.pie a { color: var(--tenue); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: var(--tinta); text-decoration: underline; } }
.pie a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   SECCIÓN 5 · LOS 10 GIROS
   Se muda aquí TAL CUAL desde `giros.html` (S153, aprobada). No se retocó ni un valor: lo único
   que cambió es dónde vive. El banco de pruebas de una sola sección ya cumplió su encargo.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══ FORMATO (S153): CHIPS + UN SOLO PANEL ═══════════════════════════
   Antes eran 8 tarjetas con párrafo: unas 400 palabras de golpe (muro de texto) y la
   foto encogida a 261 px en escritorio, más chica que los 366 px que mide en
   celular. Esta sección es PESADA DE FOTOGRAFÍA, no de texto (regla de ritmo,
   DISENO-SITIO-PUBLICO apartado 6). Los 10 paneles están en el HTML desde el inicio y se
   ocultan con CSS, no se construyen al vuelo: Google los lee todos.
   S153: de 8 giros a 10 (se agregaron aeropuertos y espectaculares, solo aquí y en
   Loop; Tap se queda con 8 a propósito).                                       */
.giros-seccion { overflow: hidden; }

/* Los nombres de los giros, siempre visibles. Son botones reales: teclado y lector
   de pantalla los recorren.

   S153 · ETIQUETA CORTA EN EL CHIP, NOMBRE COMPLETO EN EL PANEL. Con 10 giros de
   nombre largo, en 390 px solo se veían chip y medio: para reconocer su giro el
   visitante tenía que arrastrar seis veces o esperar 54 segundos a la rotación, y
   el RECONOCIMIENTO INMEDIATO era la razón de elegir este formato sobre un banner.
   Con la etiqueta corta caben los 10 a la vista, se acabó el arrastre horizontal
   (se acomodan en renglones a cualquier ancho) y de paso se quita la redundancia de
   leer el mismo nombre dos veces con la foto en medio. El nombre completo sigue
   existiendo en el `aria-label` (lectores de pantalla) y en el título del panel. */
.giros-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(22px, 2.6vw, 30px);
}
.giros-chips .chip {
  appearance: none; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tenue); font: inherit; font-size: 0.9rem; font-weight: 500;
  padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.giros-chips .chip:hover { color: var(--tinta); border-color: #c3d3e8; }
.giros-chips .chip[aria-selected="true"] {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
.giros-chips .chip:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* En escritorio los 10 chips pedían 1183 px y solo hay 1116: sobraban 67 px y el décimo se
   caía solo a un segundo renglón, que se ve peor que dos renglones parejos. Quitarle 5 px de
   respiro a cada lado libera 100 px y los 10 entran en UN renglón. Solo aquí: en celular los
   renglones ya quedaban parejos y no hay por qué apretarlos. */
@media (min-width: 1200px) {
  .giros-chips .chip { padding-left: 11px; padding-right: 11px; }
}

/* El escenario: los 10 paneles ocupan la MISMA celda de rejilla. Así el alto lo manda
   el panel más largo y el cambio no brinca. El que no toca queda invisible, sin
   posibilidad de recibir foco ni clic, pero presente en el documento. */
.giros-escenario { display: grid; touch-action: pan-y; }
.giro-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(24px, 3.2vw, 44px);
  align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease;
}
.giro-panel.activo { opacity: 1; visibility: visible; pointer-events: auto; }

/* EL ENCUADRE (regla de la dirección, S152). El hueco es SIEMPRE 16:9, a cualquier
   ancho, también en celular a ancho completo. Como las fotos también son 16:9,
   `cover` no llega a recortar nada: la foto se reduce, no se corta. */
.giro-foto {
  border-radius: 16px; overflow: hidden; background: var(--superficie);
  box-shadow: 0 18px 40px -28px rgba(15, 35, 64, .45);
}
/* El `height: auto` NO es decorativo: sin él, la hoja de Canvas deja mandar al atributo
   `height` del <img> (1350 px) y el marco sale vertical en vez de 16:9. Verificado en
   pantalla en S153. */
.giro-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.giro-texto h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.15;
  margin: 0 0 18px; text-transform: none; letter-spacing: -0.02em;
}
/* La viñeta se arma con rejilla (punto y texto), sin posicionamiento fuera de flujo: es más
   simple de leer y no depende de calcular a mano dónde cae el punto. */
.giro-texto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.giro-texto li {
  display: grid; grid-template-columns: 8px 1fr; gap: 18px; align-items: start;
  color: var(--tenue); font-size: 1rem; line-height: 1.5;
}
.giro-texto li::before {
  content: ""; width: 8px; height: 8px; margin-top: .52em;
  border-radius: 50%; background: var(--acento);
}

/* Barra de avance: en cuál de los 10 va. Se llena sola mientras rota; cuando está
   detenida se queda llena, marcando el que se está viendo. */
.giros-progreso { display: flex; gap: 6px; margin-top: clamp(24px, 3vw, 34px); }
.giros-progreso .seg { flex: 1; height: 3px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.giros-progreso .seg i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--acento); }
.giros-progreso .seg.activo i { width: 100%; }
.giros-rotativo.rotando .giros-progreso .seg.activo i { animation: giro-avance 6000ms linear forwards; }
@keyframes giro-avance { from { width: 0 } to { width: 100% } }

/* ── Celular y tableta ───────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Los chips YA NO SE ARRASTRAN (S153): se acomodan en renglones y se ven los 10
     completos, sin scroll horizontal. Un chip escondido fuera de la pantalla no
     cumple la promesa de la sección, que es reconocerse de un vistazo. */
  /* La foto arriba, el texto abajo. */
  .giro-panel { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 575.98px) {
  .giro-texto li { font-size: 0.97rem; }
}

/* ── Menos movimiento ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .giro-panel { transition: none; }
  .giros-rotativo.rotando .giros-progreso .seg.activo i { animation: none; width: 100%; }
  .btn-beep, .barra ul a, .saltar { transition: none; }
}


/* ══ S173 · PLANES: pestañas, vista previa y botón latente ═══════════════════════════════════ */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: clamp(22px, 3vw, 30px); padding: 5px; border-radius: 999px; background: #eef2f7; width: fit-content; max-width: 100%; }
.pestanas [role="tab"] { border: 0; background: transparent; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--tenue); cursor: pointer; white-space: nowrap; }
.pestanas [role="tab"] small { font-weight: 500; color: inherit; opacity: .7; margin-left: 4px; }
.pestanas [role="tab"][aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(11, 26, 48, .12); }
@media (max-width: 575.98px) { .pestanas { width: 100%; } .pestanas [role="tab"] { flex: 1 1 auto; text-align: center; padding: 9px 8px; font-size: 0.86rem; } .pestanas [role="tab"] small { display: none; } }
[role="tabpanel"][hidden] { display: none !important; }
/* El botón de contratar SOLO existe en el estado "con botón" del interruptor. Las tarjetas ya no llevan WhatsApp. */
.plan-accion.contratar { display: none; margin-top: auto; padding-top: 22px; }
body.planes-con-boton .plan-accion.contratar { display: block; }
/* Escalón que aún no existe (Tap Pro): punteado, apagado, sin botón. */
.plan-caja.plan-pronto { border: 1.5px dashed #b9c3d0 !important; background: #f7f9fc !important; opacity: .9; }
.plan-caja.plan-pronto .plan-etiqueta { background: #fff4e5; color: #a86b00; }
.plan-caja.plan-pronto .plan-precio { font-size: 0.92rem; }
/* Franja de vista previa (solo con sesión de maestra). */
.previa-franja { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 auto 22px; max-width: 1140px; padding: 12px 18px; border-radius: 12px; background: #fff4e5; color: #6b4300; border: 1px dashed #d9a441; font-size: 0.92rem; }
.previa-franja strong { color: #a86b00; text-transform: uppercase; letter-spacing: .05em; font-size: 0.8rem; }