/* Articulado · portada pública (fase 9).
   Lo memorable sigue siendo una sola cosa: tu libro y la app juntos sobre el papel, con la ley al lado
   de cada pregunta. En la apertura, la app es de verdad: una pregunta que se responde sin registrarse
   (el reto del día) y se corrige con la frase del BOE, con el libro en papel asomando detrás.
   El resto, tranquilo: titulares grandes en Instrument Sans, hojas blancas redondeadas y una banda crema
   para la calculadora. Un único movimiento orquestado: el manifiesto que se revela con el scroll.
   Las opciones, el veredicto y la ficha de la ley usan las clases del test (css/test.css). */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.portada { --p-gris: #8c8579; display: block; }
.portada [id] { scroll-margin-top: 96px; }
.p-ancho { max-width: 1136px; margin: 0 auto; }
.p-seccion { padding-top: clamp(72px, 10vw, 136px); }
.p-entradilla { max-width: 52ch; margin-top: var(--esp-4); color: var(--texto); font-size: var(--tam-l); line-height: 1.5; }
.portada .titular-display { max-width: 18ch; }
.p-solo-estrecho { display: none; }

/* ── Apertura: qué es, cifras reales, la prueba y una pregunta de verdad ── */
.p-inicio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: start;
  gap: var(--esp-8) clamp(32px, 5vw, 72px); max-width: 1136px; margin: 0 auto; padding-top: clamp(24px, 4vw, 56px);
}
.p-inicio__texto { padding-top: clamp(0px, 2vw, 28px); }
.p-inicio__titular {
  max-width: 13ch; font: 700 clamp(2.5rem, 1.25rem + 4.2vw, 4.25rem)/.98 var(--letra-display); letter-spacing: var(--tracking-display);
  color: var(--tinta); text-wrap: balance;
}
.p-inicio__entradilla { max-width: 46ch; margin-top: var(--esp-5); color: var(--texto); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.5; }
.p-inicio__datos { max-width: 46ch; margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: var(--tam-l); line-height: 1.45; }
.p-inicio__datos .cifra { color: var(--tinta); font: 700 1.35em/1 var(--letra-cond); letter-spacing: -.01em; }
.p-inicio__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-6); }
.p-inicio__nota { max-width: 52ch; margin-top: var(--esp-4); color: var(--tenue); font-size: var(--tam-m); line-height: 1.5; }
.p-inicio__nota a { color: var(--marino); font-weight: 600; }

.p-inicio__demo { position: relative; }
/* El libro en papel asomando detrás de la pregunta: la misma cubierta tipográfica de la app. */
.p-libro-fondo {
  position: absolute; z-index: 0; left: -104px; top: 36px; width: 210px; aspect-ratio: 3 / 4.1; rotate: -8deg;
  display: flex; flex-direction: column; justify-content: space-between; padding: 20px 20px 22px;
  border-radius: 6px 14px 14px 6px; background: var(--navy); color: #fff;
  box-shadow: inset 8px 0 0 rgb(255 255 255 / .07), var(--sombra-flotante);
}
.p-libro-fondo span { color: var(--marino-claro); font: 600 32px/1 var(--letra-serif); }
.p-libro-fondo b { min-height: 1em; font: 700 46px/1 var(--letra-cond); letter-spacing: -.01em; }
.p-libro-fondo::before { content: ''; position: absolute; left: 20px; right: 20px; top: 52%; height: 1px; background: rgb(159 184 220 / .4); }

/* ── La pregunta de muestra (reto del día) ───────────────────────── */
.p-demo { --t-opcion: 16px; --t-linea: 1.4; --t-cita: 16px; --t-linea-cita: 1.65; position: relative; z-index: 1; }
.p-demo__hoja {
  padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--linea-suave); border-radius: var(--radio-xl);
  background: var(--superficie); box-shadow: var(--sombra-flotante); transition: border-color var(--duracion) var(--curva);
}
.p-demo__hoja.es-acierto { border-color: var(--ok-borde); }
.p-demo__hoja.es-fallo { border-color: var(--mal-borde); }
.p-demo__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: var(--esp-4); margin-bottom: var(--esp-4); border-bottom: 1px solid var(--linea-suave); }
.p-demo__titulo { color: var(--tinta); font: 600 var(--tam-xl)/1.2 var(--letra-serif); letter-spacing: -.01em; }
.p-demo__sub { color: var(--tenue); font-size: var(--tam-s); }
.p-demo__cargando { display: flex; align-items: center; justify-content: center; gap: var(--esp-3); min-height: 320px; color: var(--tenue); }
.p-demo__leyes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.p-demo__ley {
  min-width: 44px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--linea); border-radius: var(--radio-pildora);
  background: var(--superficie); color: var(--texto); font: 700 var(--tam-m)/1 var(--letra-cond); letter-spacing: .01em; cursor: pointer;
  transition: background-color var(--duracion) var(--curva), border-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.p-demo__ley:hover { border-color: var(--linea-fuerte); }
.p-demo__ley[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); color: #fff; }
.p-demo__ref { color: var(--tenue); font-size: var(--tam-s); font-weight: 600; }
.p-demo__enunciado { margin: 6px 0 var(--esp-4); color: var(--tinta); font: 600 clamp(1.125rem, 1.05rem + .3vw, 1.25rem)/1.35 var(--letra); letter-spacing: -.01em; text-wrap: pretty; }
.p-demo__opciones { display: grid; gap: var(--esp-2); }
.p-demo .opcion { min-height: 52px; gap: 12px; padding: 9px 14px 9px 9px; }
.p-demo__veredicto { display: grid; gap: var(--esp-2); margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--linea-suave); }
.p-demo__veredicto .veredicto strong { font-size: 20px; }
.p-demo__recuento { color: var(--texto); font-size: var(--tam-m); line-height: 1.45; }
.p-demo__recuento .cifra { color: var(--tinta); }
.p-demo__error { margin-top: var(--esp-4); }
.p-demo__despues:empty { display: none; }
.p-demo__nota { margin: var(--esp-3) var(--esp-2) 0; color: var(--ambar-tinta); font-size: var(--tam-s); }
.p-demo__fundamento { margin-top: var(--esp-3); }
.p-demo__siguiente { margin: var(--esp-5) var(--esp-2) 0; }
.p-demo__siguiente > p { color: var(--texto); font-size: var(--tam-m); line-height: 1.5; }
.p-demo__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }
.p-demo--ejemplo { display: grid; justify-items: center; }
.p-demo__movil .movil { rotate: 2deg; }
.p-demo__pie { margin-top: var(--esp-4); font-weight: 600; }
.p-demo__pie a { display: inline-flex; align-items: center; min-height: 44px; color: var(--marino); }

/* ── Móvil de muestra (HTML/CSS) ─────────────────────────────────── */
.movil {
  --m-ancho: 300px; width: var(--m-ancho); flex: none; padding: 9px; border-radius: 50px;
  background: #202228; box-shadow: inset 0 0 0 1.5px #3a3d45, 0 30px 60px rgb(52 40 20 / .18), 0 6px 16px rgb(52 40 20 / .12);
}
.movil__pantalla {
  position: relative; display: flex; flex-direction: column; height: calc(var(--m-ancho) * 2.05); overflow: hidden;
  border-radius: 41px; background: var(--papel); color: var(--texto); font-size: 12px; line-height: 1.35;
}
.movil__estado { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 0 22px; color: var(--tinta); font-weight: 650; font-size: 13px; }
.movil__isla { width: 86px; height: 25px; border-radius: 99px; background: #202228; }
.movil__iconos { display: flex; justify-content: flex-end; gap: 3px; }
.movil__iconos svg.icono { width: 14px; height: 14px; }
.movil__contenido { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; padding: 4px 14px 0; overflow: hidden; }
.movil__pestanas {
  display: grid; grid-template-columns: repeat(5, 1fr); margin: 6px 10px 12px; padding: 5px; border-radius: 22px;
  background: #fff; box-shadow: 0 4px 14px rgb(52 40 20 / .1); border: 1px solid var(--linea-suave);
}
.movil__pestanas span { display: grid; justify-items: center; gap: 1px; padding: 4px 0; border-radius: 16px; color: var(--tenue); font-size: 9.5px; font-weight: 600; }
.movil__pestanas svg.icono { width: 16px; height: 16px; }
.movil__pestanas .es-activa { background: var(--marino-suave); color: var(--marino); }

/* Test corregido */
.m-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--tenue); font-weight: 600; }
.m-atras { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--linea-suave); color: var(--tinta); }
.m-atras svg.icono, .m-cuenta svg.icono { width: 14px; height: 14px; }
.m-cuenta { display: inline-flex; align-items: center; gap: 2px; color: var(--ok-tinta); font-weight: 700; }
.m-barra { display: block; height: 5px; border-radius: 3px; background: var(--linea-suave); overflow: hidden; }
.m-barra > span { display: block; width: 60%; height: 100%; border-radius: inherit; background: var(--marino); }
.m-enunciado { margin-top: 2px; color: var(--tinta); font-size: 14px; font-weight: 650; line-height: 1.35; }
.m-opciones { list-style: none; display: grid; gap: 6px; }
.m-opcion {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; min-height: 36px; padding: 5px 9px 5px 6px;
  border: 1px solid var(--linea); border-radius: 12px; background: #fff; color: var(--texto); font-size: 12.5px; font-weight: 550;
}
.m-opcion b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linea); color: var(--tinta-2); font-size: 11.5px; }
.m-opcion svg.icono { width: 15px; height: 15px; }
.m-opcion.es-buena { border-color: var(--ok-borde); background: var(--ok-suave); color: var(--ok-tinta); font-weight: 700; }
.m-opcion.es-buena b { border-color: var(--ok); background: var(--ok); color: #fff; }
.m-opcion.es-fallo { border-color: var(--mal-borde); background: var(--mal-suave); color: var(--mal-tinta); }
.m-opcion.es-fallo b { border-color: var(--mal); background: var(--mal); color: #fff; }
.m-cita { padding: 10px 12px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--linea-suave); box-shadow: var(--sombra); }
.m-cita__ref { display: flex; align-items: center; justify-content: space-between; color: var(--marino); font-size: 11.5px; }
.m-cita__ref svg.icono { width: 13px; height: 13px; }
.m-cita__texto { margin-top: 5px; color: var(--tinta-2); font: 400 13px/1.5 var(--letra-ley); }
.m-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 99px;
  background: var(--marino); color: #fff; font-size: 12.5px; font-weight: 650;
}
.m-boton svg.icono { width: 13px; height: 13px; }

/* «Hoy» */
.m-titulo { color: var(--tinta); font: 600 30px/1 var(--letra-serif); letter-spacing: -.015em; margin-top: 4px; }
.m-fecha { margin-top: -4px; color: var(--tenue); font-size: 11.5px; }
.m-fecha::first-letter { text-transform: uppercase; }
.m-pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-examen, .m-llegas { display: grid; align-content: start; gap: 3px; padding: 10px 11px 11px; border-radius: 16px; }
.m-examen { background: var(--navy); color: var(--navy-texto); }
.m-llegas { background: var(--ok-suave); color: var(--ok-tinta); border: 1px solid var(--ok-borde); }
.m-examen small, .m-llegas small { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; }
.m-examen small svg.icono, .m-llegas small svg.icono { width: 12px; height: 12px; }
.m-examen b { color: #fff; font: 600 34px/1 var(--letra-serif); letter-spacing: -.02em; }
.m-examen b i { font: 500 12px/1 var(--letra); letter-spacing: 0; font-style: normal; color: var(--navy-texto); }
.m-llegas b { color: var(--ok-tinta); font: 600 19px/1.1 var(--letra-serif); }
.m-examen span, .m-llegas span { font-size: 10.5px; line-height: 1.3; }
.m-hoy, .m-semana { display: grid; gap: 6px; padding: 11px 12px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--linea-suave); box-shadow: var(--sombra); }
.m-hoy__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: var(--tinta); font-size: 13px; font-weight: 700; }
.m-hoy__titulo small { display: inline-flex; align-items: center; gap: 4px; color: var(--tenue); font-size: 10px; font-weight: 550; }
.m-hoy p:not(.m-hoy__titulo) { color: var(--texto); font-size: 11.5px; }
.m-hoy .m-boton { justify-self: start; }
.m-guion { display: inline-block; width: 12px; border-top: 1.5px dashed var(--tinta-2); }
.m-semana__barras { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 74px; padding-bottom: 14px; }
.m-semana__linea { position: absolute; left: 0; right: 0; bottom: calc(14px + (100% - 14px) * var(--linea-alto, 40) / 100); border-top: 1.5px dashed var(--tinta-2); }
.m-semana__barra { position: relative; display: grid; align-items: end; height: 100%; }
.m-semana__barra i { display: block; height: var(--alto, 0%); min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--marino); }
.m-semana__barra small { position: absolute; left: 0; right: 0; bottom: -14px; color: var(--tenue); font-size: 9.5px; text-align: center; }

/* ── Manifiesto que se revela ─────────────────────────────────────── */
.revela {
  max-width: 24ch; color: var(--tinta); font: 700 var(--tam-display-2)/1.02 var(--letra-display);
  letter-spacing: -.035em; text-wrap: pretty;
}
/* Gris de partida #8c8579: 3,5:1 sobre el papel (AA para texto grande), así nunca queda ilegible. */
.revela.es-revelable .revela__p { color: var(--p-gris); transition: color 260ms var(--curva); }
.revela.es-revelable .revela__p.es-vista { color: var(--tinta); }
.p-manifiesto__remate { max-width: 34ch; margin-top: var(--esp-6); color: var(--marino); font: 650 var(--tam-display-3)/1.15 var(--letra-display); letter-spacing: -.025em; }

/* ── «Hoy» con el móvil ──────────────────────────────────────────── */
.p-hoy__rejilla { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 7vw, 112px); }
.p-hoy__movil { position: relative; display: grid; justify-items: center; padding: 32px; }
.p-hoy__movil::before { content: ''; position: absolute; inset: 0 -8px 8% 12%; border-radius: 40px; background: var(--crema); }
.p-hoy__movil .movil { position: relative; rotate: -2deg; }
.p-puntos { list-style: none; display: grid; margin-top: var(--esp-7); max-width: 48ch; border-top: 1px solid var(--linea); }
.p-puntos li { padding: var(--esp-5) 0; border-bottom: 1px solid var(--linea); }
.p-puntos h3 { color: var(--tinta); font-size: var(--tam-xl); font-weight: 650; letter-spacing: -.01em; }
.p-puntos p { margin-top: var(--esp-1); color: var(--tenue); font-size: var(--tam-base); line-height: 1.5; }

/* ── Calculadora (banda crema a todo lo ancho) ───────────────────── */
.p-banda { margin: clamp(72px, 10vw, 136px) calc(50% - 50vw) 0; padding: clamp(56px, 8vw, 104px) clamp(16px, 3vw, 32px); background: var(--crema); }
.calc {
  margin-top: var(--esp-7); padding: clamp(18px, 3vw, 36px); border: 1px solid var(--crema-2); border-radius: var(--radio-xl);
  background: var(--superficie); box-shadow: var(--sombra-suave);
}
.calc__libros { margin: 0 0 var(--esp-5); padding: 0; border: 0; min-width: 0; }
.calc__libros legend, .calc__campo label { padding: 0; margin-bottom: var(--esp-2); color: var(--tinta); font-size: var(--tam-m); font-weight: 650; }
.calc__chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.calc__chip { position: relative; display: inline-flex; cursor: pointer; }
.calc__chip input { position: absolute; opacity: 0; pointer-events: none; }
.calc__chip > span:first-of-type {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--linea);
  border-radius: var(--radio-pildora); background: var(--superficie); color: var(--texto); font-size: var(--tam-m); font-variant-numeric: tabular-nums;
  transition: var(--mv-c);
}
.calc__chip > span b { color: var(--tinta); font-weight: 700; }
.calc__chip:hover > span:first-of-type { border-color: var(--linea-fuerte); }
.calc__chip input:checked + span { background: var(--marino); border-color: var(--marino); color: #dfe7f3; }
.calc__chip input:checked + span b { color: #fff; }
.calc__chip input:focus-visible + span { outline: 2px solid var(--marino); outline-offset: 2px; }
.calc__campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-5); padding-bottom: var(--esp-6); border-bottom: 1px solid var(--linea-suave); }
.calc__campo { display: grid; align-content: start; min-width: 0; }
.calc__campo small { margin-top: var(--esp-2); color: var(--tenue); font-size: var(--tam-s); line-height: 1.4; }
.pasos-num { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 52px; padding: 3px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pildora); background: var(--superficie); }
.pasos-num:has(input:focus) { border-color: var(--marino); outline: 3px solid var(--marca-anillo); }
.pasos-num button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--crema); color: var(--tinta); cursor: pointer; transition: background-color var(--mv); }
.pasos-num button:hover { background: var(--crema-2); }
.pasos-num button svg.icono { width: 18px; height: 18px; }
.pasos-num input {
  width: 100%; min-width: 0; border: 0; background: transparent; color: var(--tinta); text-align: center;
  font: 700 1.25rem/1 var(--letra); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.pasos-num input:focus { outline: none; }
.pasos-num input::-webkit-outer-spin-button, .pasos-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__fecha { min-height: 52px; border-radius: var(--radio-pildora); padding-inline: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.calc__resultado { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--esp-3) var(--esp-6); padding-top: var(--esp-6); }
.calc__cifra { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--esp-3); color: var(--tinta); font-size: var(--tam-xl); font-weight: 650; }
.calc__cifra b { color: var(--marino); font: 700 clamp(4rem, 2.6rem + 4vw, 6rem)/.9 var(--letra-cond); letter-spacing: -.03em; }
.calc__veredicto { grid-column: 1; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; justify-self: start; padding: 8px 14px; border-radius: var(--radio-l); font-size: var(--tam-m); line-height: 1.4; }
.calc__veredicto svg.icono { width: 18px; height: 18px; }
.calc__veredicto--holgado, .calc__veredicto--llegas { background: var(--ok-suave); color: var(--ok-tinta); }
.calc__veredicto--justo { background: var(--ambar-suave); color: var(--ambar-tinta); }
.calc__veredicto--apretado { background: var(--mal-suave); color: var(--mal-tinta); }
.calc__detalle { grid-column: 1; color: var(--tenue); font-size: var(--tam-m); }
.calc__accion { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.calc__aviso { display: flex; align-items: center; gap: var(--esp-2); color: var(--ambar-tinta); font-weight: 600; }

/* ── Cómo funciona: es una secuencia real, por eso va numerada. Sin cajas: filete y número. ── */
.como { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-7) clamp(24px, 4vw, 56px); margin-top: var(--esp-7); }
.como__paso { display: flex; flex-direction: column; padding-top: var(--esp-5); border-top: 2px solid var(--tinta); }
.como__n { color: var(--marino); font: 700 3.5rem/1 var(--letra-cond); letter-spacing: -.02em; }
.como__paso h3 { margin-top: var(--esp-4); color: var(--tinta); font-size: var(--tam-xl); font-weight: 650; letter-spacing: -.01em; }
.como__paso p { margin-top: var(--esp-2); max-width: 40ch; color: var(--tenue); line-height: 1.5; }
.como__muestra { margin-top: auto; padding: var(--esp-4); border-radius: var(--radio-l); background: var(--crema); }
.como__paso p + .como__muestra { margin-top: var(--esp-5); }
.como__codigo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.como__codigo span { display: grid; place-items: center; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--crema-2); color: var(--tinta); font: 700 1.375rem/1 var(--letra-cond); }
.como__cita, .como__avance { display: grid; gap: var(--esp-2); }
.como__cita small, .como__avance small { color: var(--tenue); font-size: var(--tam-s); }
.como__cita small { color: var(--tinta); font: 700 var(--tam-base)/1.2 var(--letra-cond); }
.como__cita span { color: var(--tinta-2); font: 400 .9375rem/1.6 var(--letra-ley); }
.como__avance .m-barra { height: 8px; background: #fff; }
.como__avance .m-barra > span { width: 64%; }

/* ── Libros ───────────────────────────────────────────────────────── */
.p-libros { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); gap: var(--esp-5); margin-top: var(--esp-7); }
.p-libro {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--esp-4) var(--esp-5);
  padding: var(--esp-5); border: 1px solid var(--linea-suave); border-radius: var(--radio-xl); background: var(--superficie); box-shadow: var(--sombra-suave);
}
.p-libro__cubierta { grid-row: 1 / span 2; text-decoration: none; }
.p-libro__texto { min-width: 0; }
.p-libro__texto h3 { font-size: var(--tam-l); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.p-libro__texto h3 a { display: inline-block; padding-block: 2px; color: var(--tinta); text-decoration: none; }
.p-libro__texto h3 a:hover { color: var(--marino); text-decoration: underline; }
.p-libro__ley { margin-top: 2px; color: var(--tenue); font-size: var(--tam-m); line-height: 1.45; }
.p-libro__datos { margin-top: var(--esp-2); color: var(--texto); font-size: var(--tam-s); }
.p-libro__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-4); }

.p-libro__ley-enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--marino); font-size: var(--tam-m); font-weight: 650; text-underline-offset: 3px; }
.p-libro__ley-enlace svg.icono { width: 18px; height: 18px; }
.p-libros__mas { display: flex; flex-wrap: wrap; gap: 0 var(--esp-6); margin-top: var(--esp-5); }
.p-libros__mas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--marino); font-weight: 650; text-underline-offset: 3px; }

/* ── Precio: la oferta, el calendario de cobro con fechas y lo gratis ── */
.precio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--esp-5); margin-top: var(--esp-7); }
.precio__pago, .precio__cobro { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 4vw, 40px); border-radius: var(--radio-xl); }
.precio__pago { background: var(--navy); color: var(--navy-texto); box-shadow: var(--sombra-flotante); }
.precio__cobro { border: 1px solid var(--linea-suave); background: var(--superficie); box-shadow: var(--sombra-suave); }
.precio h3, .precio__gratis h3 { font: 600 var(--tam-2xl)/1.15 var(--letra-serif); letter-spacing: -.01em; color: var(--tinta); }
.precio__pago h3 { color: #fff; }
.precio__lema { margin-top: var(--esp-4); color: #fff; font: 700 clamp(2.5rem, 1.9rem + 3vw, 4rem)/1 var(--letra-cond); letter-spacing: -.02em; }
.precio__despues { margin-top: var(--esp-3); max-width: 32ch; color: #fff; font-size: var(--tam-l); font-weight: 650; line-height: 1.4; }
.precio__nota { margin-top: var(--esp-2); max-width: 40ch; font-size: var(--tam-m); }
.precio__lista { list-style: none; display: grid; gap: var(--esp-3); margin: var(--esp-6) 0 var(--esp-7); }
.precio__lista li { display: flex; align-items: flex-start; gap: var(--esp-3); color: #e6ecf5; }
.precio__lista svg.icono { flex: none; margin-top: 2px; color: #a8d5b8; }
.precio__pago .boton { margin-top: auto; }
.precio__boton { background: #fff; border-color: #fff; color: var(--navy); }
.precio__boton:hover { background: var(--marino-suave); border-color: var(--marino-suave); color: var(--navy); }
.precio__pago :focus-visible { outline-color: #fff; }
/* Calendario: hoy, el correo de aviso y el primer cobro, unidos por una línea. */
.p-calendario { list-style: none; display: grid; width: 100%; margin: var(--esp-6) 0 var(--esp-5); }
.p-calendario li { position: relative; display: grid; gap: 2px; padding: 0 0 var(--esp-6) 32px; }
.p-calendario li:last-child { padding-bottom: 0; }
.p-calendario li::before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border: 2px solid var(--marino); border-radius: 50%; background: var(--superficie); }
.p-calendario li:first-child::before { background: var(--marino); }
.p-calendario li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 22px; bottom: 4px; width: 0; border-left: 2px dotted var(--linea-fuerte); translate: -1px 0; }
.p-calendario b { color: var(--tinta); font-size: var(--tam-l); font-weight: 700; }
.p-calendario span { color: var(--texto); line-height: 1.45; }
.precio__cancelar { display: flex; align-items: flex-start; gap: var(--esp-2); margin-top: auto; padding-top: var(--esp-4); border-top: 1px solid var(--linea-suave); color: var(--tinta-2); line-height: 1.45; }
.precio__cancelar svg.icono { flex: none; margin-top: 1px; color: var(--ok-tinta); }
.precio__condiciones { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--esp-2); color: var(--marino); font-size: var(--tam-m); font-weight: 650; text-underline-offset: 3px; }
.precio__gratis { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--esp-5) var(--esp-7); margin-top: var(--esp-5); padding: clamp(24px, 4vw, 40px); border-radius: var(--radio-xl); background: var(--crema); }
.precio__gratis h3 { grid-column: 1; }
.precio__gratis > .boton { grid-column: 2; grid-row: 1; }
.precio__gratis dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-5); margin: 0; }
.precio__gratis dl > div { padding-top: var(--esp-4); border-top: 1px solid var(--crema-2); }
.precio__gratis dt { color: var(--tinta); font-weight: 650; }
.precio__gratis dd { margin: 2px 0 0; color: var(--tenue); font-size: .9375rem; line-height: 1.5; }

/* ── Preguntas frecuentes ────────────────────────────────────────── */
.p-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--esp-6) var(--esp-9); align-items: start; }
.faq { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 64px; padding: var(--esp-4) 0;
  color: var(--tinta); font-size: var(--tam-l); font-weight: 650; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg.icono { flex: none; color: var(--marino); transition: rotate var(--duracion) var(--curva); }
.faq__item[open] summary svg.icono { rotate: 45deg; }
.faq__item summary:hover { color: var(--marino); }
.faq__item p { max-width: 60ch; padding: 0 0 var(--esp-5); color: var(--texto); line-height: 1.55; }

/* ── Cierre ──────────────────────────────────────────────────────── */
.p-cierre .p-ancho { display: grid; justify-items: start; gap: var(--esp-5); }
.p-cierre .titular-display { max-width: 16ch; }
.p-cierre .p-entradilla { margin-top: 0; }
.p-cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); }

/* ── Tamaños ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .calc__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .p-inicio { grid-template-columns: minmax(0, 1fr); gap: var(--esp-7); }
  .p-inicio__titular { max-width: 14ch; }
  .p-solo-ancho { display: none; }
  .p-solo-estrecho { display: inline-flex; }
  .p-libro-fondo { display: none; }
  .p-inicio__demo { max-width: 560px; }
  .p-hoy__rejilla { grid-template-columns: minmax(0, 1fr); }
  .p-hoy__movil { order: 2; }
  .como { grid-template-columns: minmax(0, 1fr); }
  .como__muestra { max-width: 420px; }
  .precio { grid-template-columns: minmax(0, 1fr); }
  .precio__gratis dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .precio__gratis dl > div { padding: var(--esp-4) 0; }
  .p-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .calc__resultado { grid-template-columns: minmax(0, 1fr); }
  .calc__accion { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .p-libro { grid-template-columns: auto minmax(0, 1fr); padding: var(--esp-4); gap: var(--esp-3) var(--esp-4); }
  .p-libro .cubierta--grande { width: 72px; }
  .p-libro__acciones { grid-column: 1 / -1; }
  .p-inicio__acciones .boton, .p-cierre__acciones .boton { flex: 1 1 auto; }
  .precio__gratis { grid-template-columns: minmax(0, 1fr); }
  .precio__gratis > .boton { grid-column: 1; grid-row: auto; justify-self: start; }
  .p-demo__hoja { padding: var(--esp-4); }
  .p-demo .opcion { padding: 9px 12px 9px 8px; }
}
@media (max-width: 520px) {
  .movil { --m-ancho: 272px; }
  .p-hoy__movil { padding: 16px 0; }
  .p-hoy__movil::before { inset: 10% -16px 0 -16px; border-radius: 32px; }
}
@media (max-width: 400px) {
  .calc__campos { grid-template-columns: minmax(0, 1fr); }
  .p-demo__hoja { padding: 14px 12px; }
  .p-demo .opcion { gap: 10px; padding: 8px 10px 8px 7px; }
  .movil { --m-ancho: 256px; }
}