/* ══════════════════════════════════════════════════════════════════════════
   pibiMemo · componentes con interacción
   ──────────────────────────────────────────────────────────────────────────
   Cuatro piezas que no son adorno. Cada una enseña algo que el texto solo
   afirma, y por eso están construidas y no dibujadas:

   1. El interrogatorio  — qué se siente preguntarle al archivo, con la cita
                           delante. Es la promesa entera del producto.
   2. El telar           — cuánto tarda una voz en volverse un perfil.
   3. El árbol           — que la respuesta trae el porqué, no solo el qué.
   4. La contradicción   — que un archivo honesto no promedia lo que cambió.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. El interrogatorio ────────────────────────────────────────────────── */

.interrogatorio {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 980px) {
  .interrogatorio { grid-template-columns: 1fr; }
}

.consola {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 21rem;
}

.consola__cabeza {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--linea);
  background: var(--tinta-3);
}
.consola__punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 0 rgba(240,163,60,0.55);
  animation: latir 2.4s ease-out infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(240,163,60,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(240,163,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,163,60,0); }
}
.consola__titulo {
  font-family: var(--font-mono); font-size: var(--t-1);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hueso-tenue);
}

.consola__hilo {
  flex: 1;
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: 1rem;
  overflow-y: auto;
  max-height: 30rem;
}

.turno { display: flex; flex-direction: column; gap: 0.4rem; max-width: 90%; }
.turno--tuyo { align-self: flex-end; align-items: flex-end; }
.turno--suyo { align-self: flex-start; }

.turno__quien {
  font-family: var(--font-mono); font-size: var(--t-1);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hueso-tenue);
}
.turno__dicho {
  font-size: var(--t-3); line-height: 1.62;
  padding: 0.8rem 1.05rem;
  border-radius: 13px;
}
/* La no-respuesta se ve distinta a propósito: si el «no lo dije» se pintara
   con el mismo ámbar que una respuesta con fuente, sería una respuesta más. */
.turno--nada { align-self: flex-start; }
.turno--nada .turno__dicho {
  background: var(--tinta-3);
  border: 1px dashed var(--linea-fuerte);
  border-bottom-left-radius: 4px;
  color: var(--hueso-medio);
  font-style: italic;
}
.cita--vacia {
  border-style: solid;
  border-color: var(--linea-fuerte);
  color: var(--hueso-tenue);
}
.cita--vacia svg { color: var(--hueso-tenue); }
.cita--vacia b { color: var(--hueso-medio); }

.turno--tuyo .turno__dicho {
  background: var(--tinta-3);
  border: 1px solid var(--linea);
  border-bottom-right-radius: 4px;
}
.turno--suyo .turno__dicho {
  background: rgba(240,163,60,0.09);
  border: 1px solid rgba(240,163,60,0.22);
  border-bottom-left-radius: 4px;
  color: var(--hueso);
}

/* La cita: sin esto la demo sería un chatbot cualquiera. Con esto se ve que
   cada frase sale de un material fechado que el dueño grabó. */
.cita {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: 0.15rem;
  padding: 0.6rem 0.8rem;
  background: var(--tinta);
  border: 1px dashed rgba(240,163,60,0.3);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--hueso-tenue);
  line-height: 1.55;
}
/* Medidas explícitas para que ninguna regla de contenedor pueda estirarlo */
.cita svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--ambar); opacity: 0.8; margin-top: 1px; }
.cita b { color: var(--ambar); font-weight: 400; }

.escribiendo { display: inline-flex; gap: 4px; padding: 0.3rem 0; }
.escribiendo i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ambar); opacity: 0.5;
  animation: puntear 1.25s ease-in-out infinite;
}
.escribiendo i:nth-child(2) { animation-delay: 0.16s; }
.escribiendo i:nth-child(3) { animation-delay: 0.32s; }
@keyframes puntear {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-4px); }
}

.preguntas {
  display: flex; flex-direction: column; gap: 0.6rem;
  position: sticky; top: 5.5rem;
}
.preguntas__titulo {
  font-family: var(--font-mono); font-size: var(--t-1);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hueso-tenue);
  margin-bottom: 0.2rem;
}
.pregunta {
  text-align: left;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: 11px;
  color: var(--hueso-medio);
  font-family: var(--font-cuerpo);
  font-size: var(--t-3); line-height: 1.5;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion),
              background var(--transicion), transform var(--transicion);
}
.pregunta:hover:not(:disabled) {
  border-color: rgba(240,163,60,0.45);
  color: var(--hueso);
  transform: translateX(-3px);
}
.pregunta:disabled { opacity: 0.34; cursor: default; }
.pregunta--usada { opacity: 0.34; cursor: default; }

/* ── 2. El telar ─────────────────────────────────────────────────────────── */

.telar {
  position: relative;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tinta-2);
  overflow: hidden;
}
.telar canvas { width: 100%; height: 100%; display: block; }

.telar__marcador {
  position: absolute; left: 1.2rem; top: 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--t-1);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hueso-tenue);
}
.telar__cifra {
  display: block;
  font-size: 2.1rem; line-height: 1.1;
  color: var(--ambar);
  letter-spacing: -0.02em;
  margin-top: 0.2rem;
}

.telar__pasos {
  position: absolute; right: 1.2rem; bottom: 1.2rem; left: 1.2rem;
  display: flex; gap: 0.4rem; justify-content: flex-end;
}
.telar__paso {
  font-family: var(--font-mono); font-size: var(--t-1);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hueso-tenue);
  border: 1px solid var(--linea);
  background: rgba(7,11,18,0.6);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  transition: color var(--transicion), border-color var(--transicion);
}
.telar__paso.activo { color: var(--ambar); border-color: rgba(240,163,60,0.45); }

/* ── 3. El árbol de decisiones ───────────────────────────────────────────── */

.arbol { width: 100%; }
/* Hijo directo, no descendiente: `.arbol svg` también alcanzaba al icono de
   13 px de la cita que se inyecta en `.arbol__lectura`, y lo estiraba al ancho
   entero de la sección. Un icono de documento de 1100 px de ancho. */
.arbol > svg { width: 100%; height: auto; overflow: visible; }

.arbol__rama {
  fill: none;
  stroke: var(--borde-control);
  stroke-width: 1.5;
  transition: stroke 300ms ease, stroke-width 300ms ease;
}
.arbol__rama.encendida { stroke: var(--ambar); stroke-width: 2.5; }

.arbol__nodo { cursor: pointer; }
.arbol__nodo circle {
  fill: var(--tinta-2);
  stroke: var(--borde-control);
  stroke-width: 1.5;
  transition: fill 300ms ease, stroke 300ms ease, r 300ms ease;
}
.arbol__nodo:hover circle { stroke: var(--hueso-tenue); }
.arbol__nodo.encendido circle { fill: var(--ambar); stroke: var(--ambar); }
.arbol__nodo text {
  font-family: var(--font-cuerpo);
  font-size: 12px; font-weight: 500;
  fill: var(--hueso-medio);
  transition: fill 300ms ease;
  pointer-events: none;
}
.arbol__nodo.encendido text { fill: var(--hueso); }

.arbol__lectura {
  margin-top: 1.5rem;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.4rem 1.6rem;
  min-height: 8.5rem;
}
.arbol__lectura h4 { margin-bottom: 0.5rem; color: var(--ambar); }
.arbol__lectura p { font-size: var(--t-3); color: var(--hueso-medio); margin-bottom: 0.75rem; }
.arbol__lectura .cita { display: inline-flex; }

/* ── 4. La contradicción ─────────────────────────────────────────────────── */

.contradiccion {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.1rem;
  align-items: stretch;
}
@media (max-width: 780px) {
  .contradiccion { grid-template-columns: 1fr; }
  .contradiccion__bisagra { transform: rotate(90deg); justify-self: center; }
}

.dicho {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.dicho__fecha {
  font-family: var(--font-mono); font-size: var(--t-1);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ambar);
}
.dicho__texto {
  font-family: var(--font-titular);
  font-size: var(--t-5); font-weight: 500;
  line-height: 1.4; letter-spacing: -0.01em;
  margin: 0; color: var(--hueso);
}
.dicho__pie { font-size: var(--t-2); color: var(--hueso-tenue); margin: 0; }

.contradiccion__bisagra {
  display: grid; place-items: center;
  color: var(--hueso-tenue);
  font-family: var(--font-mono); font-size: var(--t-1);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-inline: 0.5rem;
}

/* ── El spot ─────────────────────────────────────────────────────────────── */

.spot {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: #000;
  aspect-ratio: 16 / 9;
}
.spot video { width: 100%; height: 100%; object-fit: cover; }

.spot__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(7,11,18,0.42);
  border: 0; cursor: pointer;
  transition: opacity 300ms ease, background 300ms ease;
}
.spot__play:hover { background: rgba(7,11,18,0.28); }
.spot__play.oculto { opacity: 0; pointer-events: none; }
.spot__play span {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(240,163,60,0.94);
  color: #241503;
  display: grid; place-items: center;
  box-shadow: 0 10px 44px rgba(0,0,0,0.5);
  transition: transform var(--transicion);
}
.spot__play:hover span { transform: scale(1.07); }

/* ── Tabla de planes ─────────────────────────────────────────────────────── */

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.plan {
  display: flex; flex-direction: column;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.8rem;
}
.plan--destacado {
  background: var(--tinta-3);
  border-color: rgba(240,163,60,0.4);
}
.plan__nombre {
  font-family: var(--font-mono); font-size: var(--t-1);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ambar); margin-bottom: 1rem;
}
.plan__precio {
  font-family: var(--font-titular);
  font-size: 2.6rem; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 0.3rem;
}
.plan__precio small {
  font-size: var(--t-3); font-weight: 400;
  color: var(--hueso-tenue); letter-spacing: 0;
}
.plan__pitch {
  font-size: var(--t-3); color: var(--hueso-medio);
  margin-bottom: 1.4rem; padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--linea);
}
.plan ul { list-style: none; margin: 0 0 1.6rem; padding: 0; flex: 1; }
.plan li {
  position: relative;
  padding-left: 1.5rem; margin-bottom: 0.7rem;
  font-size: var(--t-3); color: var(--hueso-medio);
}
.plan li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ambar); opacity: 0.75;
}
.plan li.no { color: var(--hueso-tenue); }
.plan li.no::before { background: var(--hueso-tenue); opacity: 0.35; }

/* ── Acordeón de preguntas ───────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__boton {
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  color: var(--hueso);
  font-family: var(--font-titular);
  font-size: var(--t-4); font-weight: 600;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  transition: color var(--transicion);
}
.faq__boton:hover { color: var(--ambar); }
.faq__boton::after {
  content: ''; position: absolute; right: 0.35rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transicion);
}
.faq__boton[aria-expanded="true"]::after { transform: translateY(-25%) rotate(-135deg); }
.faq__cuerpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 340ms cubic-bezier(0.22,0.61,0.36,1);
}
.faq__cuerpo.abierto { grid-template-rows: 1fr; }
/* Con la fila a 0fr el contenido no se ve, pero sus enlaces seguían siendo
   tabulables: el acordeón cerrado añadía paradas de foco invisibles. */
.faq__cuerpo > div { overflow: hidden; visibility: hidden; }
.faq__cuerpo.abierto > div { visibility: visible; }
.faq__cuerpo p {
  font-size: var(--t-3); color: var(--hueso-medio);
  max-width: var(--lectura);
  padding-bottom: 1.5rem;
}

/* ── Cifras ──────────────────────────────────────────────────────────────── */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.1rem;
}
.cifra {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tinta-2);
  padding: 1.5rem;
}
.cifra__valor {
  font-family: var(--font-titular);
  font-size: 2.4rem; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--ambar);
  margin-bottom: 0.5rem;
}
.cifra__que { font-size: var(--t-3); color: var(--hueso-medio); margin: 0; }

/* ── Lista de salidas (qué cruza el borde y qué no) ──────────────────────── */

.salidas { width: 100%; }
.salidas > svg { width: 100%; height: auto; }
.salidas__borde { fill: rgba(240,163,60,0.045); stroke: rgba(240,163,60,0.4); stroke-width: 1.5; }
.salidas__zona {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  fill: var(--ambar);
}
.salidas__op   { font-family: var(--font-cuerpo); font-size: 14px; fill: var(--hueso); }
.salidas__nota { font-family: var(--font-cuerpo); font-size: 12px; fill: var(--hueso-tenue); }
.salidas__no   { stroke: rgba(239,68,68,0.65); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.salidas__si   { stroke: rgba(240,163,60,0.7);  stroke-width: 1.5; fill: none; }
.salidas__sello {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── Selector de idioma ──────────────────────────────────────────────────
   El marcado es el mismo `partials/lang_dropdown.html` que usa la aplicación,
   pero su estilo vive en `pibico.css` y estas páginas no cargan esa hoja: la
   cargarían entera, con otra paleta y otro `.boton`, y se llevarían por delante
   el diseño de la web. Así que el marcado se comparte y el estilo se escribe
   aquí, con los tokens de pibiMemo.
   Se apoya en el ritmo de `.menu a`: mismo tamaño, mismo alto de control. */
.pibico-lang-dropdown { position: relative; }

.pibico-lang-btn {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: inherit; font-size: var(--t-3); font-weight: 500;
  color: var(--hueso-medio); background: transparent;
  border: 1px solid transparent; border-radius: 8px;
  padding: 0.4rem 0.6rem; cursor: pointer;
  transition: color var(--transicion), background var(--transicion);
}
.pibico-lang-btn:hover { color: var(--hueso); background: rgba(242,237,228,0.06); }
.pibico-lang-btn:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

.pibico-flag { display: inline-flex; width: 18px; height: 18px; border-radius: 3px; overflow: hidden; }
.pibico-flag svg { width: 100%; height: 100%; display: block; }
.pibico-lang-arrow { font-size: var(--t-1); opacity: 0.7; }

/* Cerrado por defecto. En `pibico.css` el menú se abre con `.open`, y sin esta
   regla el desplegable se quedaría siempre desplegado debajo de la cabecera. */
.pibico-lang-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 9.5rem; padding: 0.25rem;
  background: var(--tinta-2); border: 1px solid var(--linea-fuerte);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  z-index: 60;
}
.pibico-lang-menu.open { display: block; }

.pibico-lang-opt {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.6rem; border-radius: 7px; cursor: pointer;
  font-size: var(--t-3); color: var(--hueso-medio);
  transition: color var(--transicion), background var(--transicion);
}
.pibico-lang-opt:hover { color: var(--hueso); background: rgba(242,237,228,0.06); }
.pibico-lang-opt.selected { color: var(--ambar); }

@media (max-width: 860px) {
  /* Dentro del menú móvil el desplegable no puede colgar en absoluto: se
     saldría de la pantalla. Se comporta como una fila más. */
  .pibico-lang-dropdown { width: 100%; }
  .pibico-lang-menu { position: static; width: 100%; box-shadow: none; }
}

/* ── Una sola altura en la barra ─────────────────────────────────────────
   En la cabecera conviven cuatro controles con paddings pensados para sitios
   distintos: los enlaces del menú (0.5rem), `.boton` —que está dimensionado
   para las llamadas del cuerpo, 0.8rem y con borde— y el selector de idioma.
   Salían a 37.7, 49.3 y 36.5 px: doce píxeles de diferencia entre el botón de
   pedir plaza y el enlace de al lado, que en una barra se ven todos juntos.

   La altura se fija aquí y una sola vez, y deja de depender del padding
   vertical de cada uno. Con `box-sizing: border-box` el borde de los que lo
   llevan entra dentro de la cuenta, así que bordeados y sin borde miden igual.
   El padding horizontal sí se respeta: un botón necesita más aire a los lados
   que un enlace, y eso es jerarquía, no descuadre.

   No se toca `.boton` a secas: fuera de la barra —el héroe, los cierres de
   sección— tiene que seguir siendo grande. Sólo se ajusta dentro de `.menu`. */
.menu { --alto-control: 2.375rem; }   /* 38px, el del enlace redondeado */

/* **Sólo en la barra horizontal.** Aplanar el relleno vertical es lo que hace
   que enlaces y botones midan igual en una fila; dentro del panel desplegable
   es justo lo contrario de lo que hace falta, y era lo que dejaba seis
   renglones de 38 px pegados unos a otros con el texto tocando el filete.
   El panel manda sobre esto en `pibimemo.css`, y por eso este bloque se para
   en el mismo punto en el que aquél empieza.

   Antes no se paraba: la regla iba sin condición y su ajuste para el panel
   entraba a 860 px mientras el panel aparece a 880. Entre esos veinte píxeles
   quedaba un estado que no era ninguno de los dos — apilado y centrado a la
   vez—, que es la clase de descuadre que nadie reproduce porque hay que parar
   la ventana justo ahí. */
@media (min-width: 881px) {
  .menu > a,
  .menu > .boton,
  .menu .pibico-lang-btn {
    min-height: var(--alto-control);
    display: inline-flex; align-items: center; justify-content: center;
    padding-top: 0; padding-bottom: 0;
    line-height: 1;
  }
}

/* El selector es un control, no un enlace, y va entre dos píldoras. Con
   esquinas de 8 px cantaba al lado de «Entrar» y «Pedir plaza». El desplegable
   que cuelga sí conserva su radio: es una superficie, no un control. */
.menu .pibico-lang-btn { border-radius: var(--radio-boton); padding-left: 0.85rem; padding-right: 0.85rem; }

/* Con filete, como «Entrar». Sin él, el selector parecía texto suelto entre
   dos botones y la barra se leía descompensada por la derecha. */
.menu .pibico-lang-btn { border-color: var(--linea-fuerte); }
.menu .pibico-lang-btn:hover { border-color: var(--borde-control); }

/* Mismo radio en toda la barra. Los enlaces del menú traían 8 px y los botones
   999 px: al pasar el ratón salía un rectángulo redondeado justo al lado de dos
   píldoras. Lo que distingue a un enlace de un botón aquí es el relleno y el
   filete, no la forma. */
.menu > a { border-radius: var(--radio-boton); }

/* ── Disponibilidad en tiendas ───────────────────────────────────────────
   Etiquetas, no botones: no llevan a ninguna parte porque todavía no hay a
   dónde. Por eso no usan `.boton` ni su radio ni su altura — parecerse a un
   control que no se puede pulsar es la manera de que alguien lo pulse. */
.tiendas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 1.25rem; font-size: var(--t-2);
}
.tiendas__rotulo { color: var(--hueso-tenue); letter-spacing: 0.01em; }

.tienda {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px dashed var(--linea-fuerte);   /* de trazos: aún no está */
  border-radius: var(--radio-boton);
  color: var(--hueso-medio);
}
.tienda svg { opacity: 0.75; flex: none; }
.tienda b {
  font-weight: 600; font-size: var(--t-1);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ambar);
}

@media (max-width: 640px) {
  .tiendas { gap: 0.4rem; }
  .tiendas__rotulo { width: 100%; }
}

/* ── Cuota de pibiCash, tabla de consumo y pareja alta/baja ───────────────── */

/* Va pegada al precio a propósito: los pibiCash del mes son parte de lo que
   compras, no una característica. Ver la plantilla pm_precios.html. */
.plan__cuota {
  font-family: var(--font-mono); font-size: var(--t-3);
  letter-spacing: 0.06em; color: var(--ambar);
  margin: 0 0 0.35rem;
}

/* Las tres líneas que van debajo de la cuota, en orden de a quién le importan:
   en qué se traduce la bolsa, a cuánto sale la unidad, y qué cuesta lo mismo
   comprado en la tienda del móvil. Se añadieron sin estilo el 25/08/2026 y se
   pintaban como párrafos sueltos, con el mismo peso que el pitch — que es
   justo lo que no son: son la letra del precio, no una característica. */
.plan__equivale,
.plan__unitario {
  font-size: var(--t-2); color: var(--hueso-tenue);
  margin: 0 0 0.3rem; line-height: 1.4;
}
.plan__equivale strong { color: var(--hueso-medio); font-weight: 600; }
.plan__unitario { font-variant-numeric: tabular-nums; }

/* La tienda va separada por una línea: no es otro dato del mismo precio, es
   otro precio. Y va debajo, no al lado, porque el de arriba es el que
   queremos que se lea primero. */
.plan__tienda {
  font-size: var(--t-2); color: var(--hueso-tenue);
  margin: 0.6rem 0 1.1rem; padding-top: 0.6rem;
  border-top: 1px solid var(--linea); line-height: 1.4;
}
.plan__tienda strong { color: var(--hueso-medio); font-variant-numeric: tabular-nums; }

/* Sin precio de tienda, la última de las tres carga con el margen inferior que
   antes ponía `.plan__cuota`. */
.plan__unitario:last-of-type { margin-bottom: 1.1rem; }

/* La tabla puede no caber en un móvil y lo que no puede pasar es que empuje la
   página a lo ancho: se desplaza ella dentro de su caja. */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }

.tabla-consumo {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-3); min-width: 30rem;
}
.tabla-consumo th, .tabla-consumo td {
  text-align: left; padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.tabla-consumo tbody tr:last-child th,
.tabla-consumo tbody tr:last-child td { border-bottom: 0; }
.tabla-consumo thead th {
  font-family: var(--font-mono); font-size: var(--t-2);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hueso-tenue); background: var(--tinta-2);
}
.tabla-consumo tbody th { font-weight: 600; color: var(--hueso); }
.tabla-consumo td { color: var(--hueso-medio); }
/* Las cifras se comparan de un vistazo sólo si están alineadas: cifras de
   ancho fijo y a la derecha. */
.tabla-consumo .num {
  text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--hueso);
}

/* Alta y baja, del mismo tamaño. Que sean dos y no tres es justo lo que hace
   falta para que ninguna de las dos parezca la letra pequeña de la otra. */
.planes--dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* ══════════════════════════════════════════════════════════════════════════
   La comprobación · el hueco hecho número
   ──────────────────────────────────────────────────────────────────────────
   El titular afirma algo que el lector puede verificar en su propio móvil en
   diez segundos, y esta caja es donde lo verifica. Por eso el cero va en ámbar
   y lo demás no: el ámbar es la señal, y aquí la señal es justamente lo que
   falta. Va en banda propia y no dentro del héroe, que mide 100svh y no admite
   un bloque más sin empujar el titular fuera de pantalla.
   ══════════════════════════════════════════════════════════════════════════ */
.comprobacion {
  max-width: 46rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--tinta-2); overflow: hidden;
}
.comprobacion__titulo {
  font-family: var(--font-mono); font-size: var(--t-2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--hueso-tenue);
  padding: 0.85rem 1.5rem; margin: 0;
  border-bottom: 1px solid var(--linea); background: var(--tinta-3);
}
.cuenta__fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--linea);
}
.cuenta__fila:last-child { border-bottom: 0; }
.cuenta__que { font-size: var(--t-4); color: var(--hueso-medio); max-width: 34ch; }
.cuenta__cifra {
  font-family: var(--font-titular); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--hueso);
}
.cuenta__cifra--cero { color: var(--ambar); }
.comprobacion__pie {
  margin: 0; padding: 1rem 1.5rem; font-size: var(--t-2); color: var(--hueso-tenue);
  background: var(--ambar-vidrio); border-top: 1px solid var(--ambar-linea);
}

/* ── Los pasos: una lista numerada que sí es una secuencia ────────────────── */
.pasos { list-style: none; margin: 2.75rem 0 0; padding: 0; }
.pasos li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  align-items: start; padding: 1.6rem 0; border-top: 1px solid var(--linea);
}
.pasos li:last-child { border-bottom: 1px solid var(--linea); }
.paso__n {
  font-family: var(--font-mono); font-size: var(--t-2);
  color: var(--ambar); letter-spacing: 0.08em; padding-top: 0.35rem;
}
.paso__t {
  font-family: var(--font-titular); font-weight: 600;
  font-size: var(--t-5); letter-spacing: -0.01em; margin: 0;
}
.paso__d { font-size: var(--t-3); color: var(--hueso-medio); margin: 0.5rem 0 0; max-width: 56ch; }

/* ── Las dudas: pregunta y respuesta, con el filete ámbar de lo que se ofrece ── */
.objeciones {
  display: grid; gap: 1.5rem;
  /* Son cuatro: a tres columnas queda una huérfana en la segunda fila y la
     última se mete debajo de la espina. A 26rem caben dos y sale un 2x2. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  margin-top: 2.75rem;
}
.objecion { border-left: 2px solid var(--ambar-linea); padding: 0.25rem 0 0.25rem 1.35rem; }
.objecion h3 { font-size: var(--t-4); font-weight: 600; color: var(--hueso); line-height: 1.4; margin: 0; }
.objecion p { font-size: var(--t-3); color: var(--hueso-medio); margin: 0.6rem 0 0; line-height: 1.65; }

/* ── Las tarjetas de una fila cabecean igual ──────────────────────────────
   Titulares de uno y de dos renglones hacen que los párrafos arranquen a
   alturas distintas dentro de una fila que se lee de izquierda a derecha.

   Se arregla con `subgrid` y no con un `min-height`. Un alto mínimo es un
   número inventado: vale para el ancho en el que se midió y se rompe en
   cuanto un titular pasa a tres renglones, se traduce a un idioma más largo
   o alguien añade una tarjeta. Con subgrid, icono, titular y cuerpo son
   filas de la rejilla de fuera y se igualan solas.

   `row-gap: 0` no sobra: la rejilla lleva `gap: 1.1rem` y las filas de la
   subrejilla lo heredarían, metiendo esa separación entre el icono y el
   titular. Los márgenes de siempre siguen mandando dentro de cada fila.

   El salto depende de lo que tenga la tarjeta dentro, y por eso hay dos
   reglas y no una: las cuatro de Privacidad no llevan icono, así que son dos
   filas. Con `span 3` arrastrarían una fila fantasma que hoy mide cero y
   dejaría de medirlo el día que alguien meta un icono a una sola de ellas.

   Todo dentro de `@supports`: quien no tenga subgrid ve la tarjeta de
   siempre —desalineada, que es como estaba— y no una caja rota. */
@supports (grid-template-rows: subgrid) {
  .rejilla .tarjeta {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;              /* icono, titular, cuerpo */
    row-gap: 0;
  }
  .rejilla .tarjeta:not(:has(> :nth-child(3))) { grid-row: span 2; }
}