/* Nemikan — sitio público.
 *
 * Los tokens son los mismos de `src/ui/theme.css` en la app, copiados a mano:
 * son dos proyectos y dos despliegues, y una landing que importa el CSS de la
 * app se rompe el día que la app cambia una clase. Lo que sí se respeta es la
 * regla que gobierna la tipografía allá: **nada baja de 12.5 px**, porque esto
 * lo va a leer un docente de pie y con lentes de leer.
 */

:root {
  --acento: #7d5bc0;
  --acento-2: #9575d6;
  --acento-100: #f5f1fd;
  --acento-200: #e8dffb;
  --acento-300: #d4c3f5;
  --acento-700: #65449f;
  --acento-800: #4a2f78;
  --acento-tinta: #fff;

  /* El morado fijo: el marco de los teléfonos y el bloque de privacidad.
     Literal y no un peldaño de la rampa a propósito — la rampa se invierte de
     noche y el 900 pasa a ser casi blanco, así que un marco pedido a la rampa
     saldría lavanda claro y el bloque, blanco sobre blanco. Es la misma regla
     que en la app protege a la barra lateral y al globo de las notas. */
  --morado-fijo: #2f1c4f;
  --morado-fijo-tinta: rgba(255, 255, 255, 0.82);

  --fondo: #faf8fe;
  --superficie: #ffffff;
  --lienzo: #f3eff9;
  --tinta: #241c33;
  --tinta-2: rgba(36, 28, 51, 0.72);
  --tinta-3: rgba(36, 28, 51, 0.62);
  --filo: rgba(36, 28, 51, 0.1);

  --verde: #2e7d52;
  --ambar: #e8a317;
  --rojo: #c8372d;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  --sombra-sm: 0 1px 3px rgba(47, 28, 79, 0.07), 0 1px 2px rgba(47, 28, 79, 0.05);
  --sombra-md: 0 6px 20px rgba(47, 28, 79, 0.1);
  --sombra-lg: 0 18px 48px rgba(47, 28, 79, 0.16);

  --titular: 'Barlow Condensed', system-ui, sans-serif;
  --texto: 'Barlow', system-ui, sans-serif;

  --ancho: 1120px;
}

/* De noche se redefinen los mismos tokens y nada más, igual que en la app: la
   rampa del acento se lee del revés —quien pide 100 pide un fondo suave y quien
   pide 800 pide una tinta fuerte—, así que los extremos se intercambian. El
   semáforo no se toca: verde, ámbar y rojo son el dato. */
@media (prefers-color-scheme: dark) {
  :root {
    --acento: #a98ae0;
    --acento-2: #8a6bcc;
    --acento-100: #33245a;
    --acento-200: #3d2c68;
    --acento-300: #55407f;
    --acento-700: #c3aaee;
    --acento-800: #d9c8f6;
    --acento-tinta: #1a1226;

    --fondo: #17111f;
    --superficie: #201830;
    --lienzo: #1c1528;
    --tinta: #f2ecfa;
    --tinta-2: rgba(242, 236, 250, 0.78);
    --tinta-3: rgba(242, 236, 250, 0.62);
    --filo: rgba(242, 236, 250, 0.14);

    --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 17px/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--titular);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(42px, 7vw, 76px); }
h2 { font-size: clamp(30px, 4.4vw, 46px); }
h3 { font-size: clamp(21px, 2.4vw, 27px); }

p { margin: 0; }

a { color: var(--acento-800); }

/* `height: auto` es obligatorio y no cosmético: los `width`/`height` del HTML
   —que están para reservar el hueco y que la página no salte al cargar— fijan
   también la altura, así que sin esto una captura de 786 × 1704 se pinta a 280
   de ancho y 1704 de alto. */
img { max-width: 100%; height: auto; display: block; }

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 17px/1 var(--titular);
  letter-spacing: 0.01em;
  padding: 15px 26px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primario {
  background: var(--acento);
  color: var(--acento-tinta);
  box-shadow: var(--sombra-md);
}

.btn-primario:hover { background: var(--acento-2); }

.btn-fantasma {
  background: transparent;
  border-color: var(--filo);
  color: var(--tinta);
}

.btn-fantasma:hover { background: var(--acento-100); }

/* El botón grande de la portada y el del cierre. Es lo único que esta página
   tiene que conseguir, así que se le da el tamaño que le corresponde: 21 px de
   titular y una sombra que lo despega del lienzo. */
.btn-grande {
  font-size: clamp(19px, 2.2vw, 23px);
  padding: 20px 40px;
  box-shadow: var(--sombra-lg);
}

/* ── Barra ────────────────────────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filo);
}

.barra-fila {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--tinta);
  font: 600 24px/1 var(--titular);
  margin-right: auto;
}

.marca img {
  width: 36px;
  height: 36px;
  border-radius: 22%;
  box-shadow: var(--sombra-sm);
}

.barra-nav {
  display: flex;
  gap: 22px;
  font-size: 15.5px;
}

.barra-nav a {
  color: var(--tinta-2);
  text-decoration: none;
}

.barra-nav a:hover { color: var(--acento-800); }

@media (max-width: 780px) {
  .barra-nav { display: none; }
}

/* ── Portada ──────────────────────────────────────────────────────────────── */

.portada {
  padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px);
  /* Los dos teléfonos van girados y desplazados, y en una pantalla angosta eso
     asoma unos treinta píxeles por la derecha: la página entera se podía
     deslizar de lado, que es el defecto que más barato sale evitar y peor se ve
     en un teléfono. */
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% -10%, var(--acento-200), transparent 70%),
    radial-gradient(700px 380px at 92% 0%, var(--acento-100), transparent 70%);
}

.portada-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

/* `minmax(0, 1fr)` y no `1fr` en todas las de una columna: el mínimo de una
   pista `1fr` es `auto`, o sea el ancho del contenido, así que un párrafo largo
   ensancha la pista y se sale del margen en vez de partirse. */
@media (max-width: 940px) {
  .portada-rejilla { grid-template-columns: minmax(0, 1fr); }
}

.portada h1 { margin-bottom: 18px; }

.portada-promesa {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--tinta-2);
  max-width: 30em;
  margin-bottom: 28px;
}

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.portada-nota {
  margin-top: 16px;
  font-size: 14px;
  color: var(--tinta-3);
}

.sello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--acento-100);
  color: var(--acento-800);
  border: 1px solid var(--acento-300);
  border-radius: 999px;
  padding: 7px 15px;
  font: 500 12.5px/1 var(--texto);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Los dos teléfonos de la portada. El de atrás va girado y un poco más chico:
   son dos pantallas de la misma app, no dos productos. */
.telefonos {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  min-height: 460px;
}

.telefono {
  border-radius: 30px;
  overflow: hidden;
  border: 5px solid var(--morado-fijo);
  background: var(--morado-fijo);
  box-shadow: var(--sombra-lg);
  width: 260px;
  /* `flex: 0 0 auto` con `min-width: 0`: sin lo segundo, el mínimo automático
     de un elemento flexible es el ancho intrínseco de su contenido —y el
     contenido es un PNG de 786 px—, así que la fila se estiraba a más del doble
     y empujaba la columna del texto media pantalla hacia abajo. */
  flex: 0 0 auto;
  min-width: 0;
}

.telefono img { border-radius: 25px; width: 100%; height: auto; }

.telefono-atras {
  transform: rotate(-6deg) translate(28px, -18px);
  width: 226px;
  opacity: 0.97;
  z-index: 0;
}

.telefono-frente {
  transform: rotate(3deg) translate(-14px, 10px);
  z-index: 1;
}

@media (max-width: 940px) {
  .telefonos { min-height: 0; margin-top: 12px; }
  .telefono { width: 216px; }
  .telefono-frente { transform: rotate(3deg) translate(-8px, 6px); }
  .telefono-atras { width: 186px; transform: rotate(-6deg) translate(16px, -12px); }
}

/* En un teléfono de 393 px los dos aparatos juntos no caben enteros. Se
   encogen en vez de dejar que `overflow: hidden` les corte un borde a cada
   uno: media captura asomando por el filo parece un error de maquetación. */
@media (max-width: 520px) {
  .telefono { width: 178px; }
  .telefono-atras { width: 154px; }
}

/* ── Promesas ─────────────────────────────────────────────────────────────── */

.promesas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: clamp(36px, 6vw, 60px) 0;
}

@media (max-width: 860px) {
  .promesas { grid-template-columns: minmax(0, 1fr); }
}

.promesa {
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--sombra-sm);
}

.promesa h3 { margin-bottom: 8px; }

.promesa p { color: var(--tinta-2); font-size: 16px; }

.promesa-icono {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--acento-100);
  color: var(--acento-800);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

/* ── Funciones ────────────────────────────────────────────────────────────── */

.seccion {
  padding-top: clamp(44px, 7vw, 84px);
  padding-bottom: clamp(44px, 7vw, 84px);
}

.seccion-titulo {
  max-width: 34ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.seccion-titulo p {
  color: var(--tinta-2);
  font-size: 18px;
  margin-top: 12px;
}

.funcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 66px);
  align-items: center;
  padding: clamp(30px, 5vw, 54px) 0;
  border-top: 1px solid var(--filo);
}

.funcion:first-of-type { border-top: 0; }

/* En pantalla angosta la imagen va siempre debajo del texto, aunque el orden
   del documento la ponga antes: leer primero y mirar después. */
@media (max-width: 900px) {
  .funcion { grid-template-columns: minmax(0, 1fr); }
  .funcion-arte { order: 2; }
  .funcion-texto { order: 1; }
}

.funcion-texto h3 { margin-bottom: 12px; }

.funcion-texto p {
  color: var(--tinta-2);
  font-size: 17px;
}

.funcion-texto p + p { margin-top: 12px; }

.etiqueta {
  display: block;
  font: 500 12.5px/1 var(--texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento-800);
  margin-bottom: 12px;
}

.lista {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.lista li {
  position: relative;
  padding-left: 26px;
  color: var(--tinta-2);
  font-size: 16px;
}

.lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
}

/* El marco de las capturas. La de teléfono va estrecha y centrada; la de
   escritorio, a todo el ancho de su columna. */
.arte {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--filo);
  box-shadow: var(--sombra-md);
  background: var(--superficie);
}

.arte-telefono {
  max-width: 290px;
  margin: 0 auto;
  border-radius: 28px;
  border: 5px solid var(--morado-fijo);
  background: var(--morado-fijo);
}

.arte-telefono img { border-radius: 23px; }

.arte-hoja {
  max-width: 430px;
  margin: 0 auto;
  background: #fff;
  padding: 10px;
}

.pie-arte {
  text-align: center;
  color: var(--tinta-3);
  font-size: 13.5px;
  margin-top: 12px;
}

/* ── Privacidad ───────────────────────────────────────────────────────────── */

.privacidad {
  background: var(--morado-fijo);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

@media (max-width: 860px) {
  .privacidad { grid-template-columns: minmax(0, 1fr); }
}

.privacidad h2 { color: #fff; }

.privacidad p {
  color: var(--morado-fijo-tinta);
  margin-top: 14px;
  font-size: 17px;
}

.privacidad .lista li { color: var(--morado-fijo-tinta); }

.privacidad .lista li::before { background: #d4c3f5; }

/* ── El nombre ────────────────────────────────────────────────────────────── */

.terminos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 3vw, 26px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 40px);
}

@media (max-width: 640px) {
  .terminos { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .terminos-union { transform: rotate(90deg); }
}

.termino {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: clamp(22px, 3vw, 30px);
  text-align: center;
}

.termino-origen {
  display: inline-block;
  font: 500 12.5px/1 var(--texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-800);
  background: var(--acento-100);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.termino-palabra {
  font: 600 clamp(30px, 4vw, 40px)/1 var(--titular);
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin-bottom: 8px;
}

.termino-significado { color: var(--tinta-2); font-size: 16px; }

.terminos-union { font: 600 26px/1 var(--titular); color: var(--tinta-3); }

.significado-texto { max-width: 68ch; }

.significado-texto p { color: var(--tinta-2); font-size: 17px; }

.significado-texto p + p { margin-top: 14px; }

.significado-texto strong { color: var(--tinta); }

.significado-texto a { text-decoration-color: var(--acento-300); }

/* ── Planes ───────────────────────────────────────────────────────────────── */

.planes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 780px) {
  .planes { grid-template-columns: minmax(0, 1fr); }
}

.plan {
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
}

.plan-destacado {
  border-color: var(--acento-300);
  box-shadow: var(--sombra-md);
}

.plan h3 { margin-bottom: 6px; }

.plan-precio {
  font: 600 46px/1 var(--titular);
  margin: 14px 0 4px;
}

.plan-antes {
  color: var(--tinta-3);
  text-decoration: line-through;
  font-size: 17px;
  margin-left: 8px;
  font-family: var(--texto);
  font-weight: 400;
}

.plan-cada { color: var(--tinta-3); font-size: 15px; }

.plan .lista { margin-top: 20px; margin-bottom: 24px; }

.plan .btn { margin-top: auto; }

/* ── Cierre ───────────────────────────────────────────────────────────────── */

.cierre {
  text-align: center;
  padding: clamp(56px, 9vw, 110px) 0;
  background:
    radial-gradient(800px 400px at 50% 0%, var(--acento-200), transparent 70%);
}

.cierre h2 { margin-bottom: 16px; }

.cierre p {
  color: var(--tinta-2);
  font-size: 19px;
  max-width: 44ch;
  margin: 0 auto 30px;
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--filo);
  padding: 34px 0;
  color: var(--tinta-3);
  font-size: 15px;
}

.pie-nota {
  font-size: 13px;
  color: var(--tinta-3);
  max-width: 62ch;
  margin-bottom: 20px;
}

.pie-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: center;
}

.pie a { color: var(--tinta-2); text-decoration: none; }

.pie a:hover { color: var(--acento-800); }

.pie-derecha { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }

/* ── Saltar al contenido ──────────────────────────────────────────────────── */

/* El primer enlace de la página, invisible hasta que alguien lo enfoca con el
   tabulador. Sin él, quien navega con teclado tiene que pasar por los cinco
   enlaces de la barra en cada visita. No se esconde con `display: none`: eso lo
   sacaría también del orden de foco, que es justo lo que tiene que estar. */
.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--acento);
  color: var(--acento-tinta);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font: 600 15.5px/1 var(--texto);
  text-decoration: none;
}

.salto:focus { left: 0; }

/* ── Antes y después ──────────────────────────────────────────────────────── */

/* Las dos columnas del relato: la lista de papel contra ésta. La de la
   izquierda va apagada a propósito —lienzo en vez de superficie, borde
   punteado, viñeta gris— y la de la derecha, encendida. Es la comparación
   entera: se entiende antes de leer una sola línea. */
.antes-despues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 780px) {
  .antes-despues { grid-template-columns: minmax(0, 1fr); }
}

.comparativa {
  border-radius: var(--r-lg);
  padding: 28px 26px;
}

.comparativa h3 { margin-bottom: 4px; }

.comparativa-antes {
  background: var(--lienzo);
  border: 1px dashed var(--filo);
  color: var(--tinta-3);
}

.comparativa-antes h3 { color: var(--tinta-3); }

.comparativa-despues {
  background: var(--superficie);
  border: 1px solid var(--acento-300);
  box-shadow: var(--sombra-md);
}

/* La viñeta gris es lo que separa las dos columnas de un vistazo: el acento
   está reservado para lo que sí queremos que se mire. */
.lista-antes li::before { background: var(--tinta-3); }

/* ── Los tres pasos ───────────────────────────────────────────────────────── */

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: paso;
}

@media (max-width: 860px) {
  .pasos { grid-template-columns: minmax(0, 1fr); }
}

.paso {
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--sombra-sm);
}

.paso h3 { margin-bottom: 10px; }

.paso p { color: var(--tinta-2); font-size: 16px; }

.paso-numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--acento-100);
  color: var(--acento-800);
  font: 600 22px/1 var(--titular);
  margin-bottom: 16px;
}

/* ── La llamada de en medio ───────────────────────────────────────────────── */

/* Una página larga necesita un botón a media altura: quien se convence en el
   paso tres no debería tener que seguir bajando hasta el cierre para encontrar
   dónde entrar. */
.llamada {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--acento-100);
  border: 1px solid var(--acento-300);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}

.llamada p {
  font: 600 clamp(19px, 2.2vw, 24px)/1.2 var(--titular);
  color: var(--tinta);
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────────── */

/* `<details>` y no un acordeón de JavaScript: la respuesta está en el HTML
   aunque el bloque esté cerrado, así que la lee Google, la lee un modelo y la
   lee un lector de pantalla — y esta página sigue sin necesitar un `build`
   para corregir una coma. */
.preguntas { border-top: 1px solid var(--filo); }

.pregunta { border-bottom: 1px solid var(--filo); }

.pregunta summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font: 600 clamp(18px, 2vw, 21px)/1.3 var(--titular);
  color: var(--tinta);
}

/* Safari pinta su propio triángulo por un pseudoelemento propio; `list-style`
   a secas no lo quita. */
.pregunta summary::-webkit-details-marker { display: none; }

.pregunta summary:hover { color: var(--acento-800); }

/* La cruz que gira hasta volverse un menos. Dos trazos y una rotación: sin
   imagen, sin fuente de iconos y sin un byte de JavaScript. */
.pregunta summary::after,
.pregunta summary::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--acento);
  transition: transform 0.2s ease;
}

.pregunta summary::before { transform: translateY(-50%); }
.pregunta summary::after { transform: translateY(-50%) rotate(90deg); }
.pregunta[open] summary::after { transform: translateY(-50%) rotate(0deg); }

.pregunta p {
  color: var(--tinta-2);
  font-size: 16.5px;
  padding-bottom: 22px;
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .pregunta summary::after,
  .pregunta summary::before { transition: none; }
}

/* ── Correcciones de las secciones nuevas ─────────────────────────────────── */

/* Las tres promesas pasaron de `h3` a `h2`: el nivel del encabezado es la
   estructura del documento —lo que leen Google y un lector de pantalla— y no
   podía haber tres `h3` colgando de ninguna `h2`. El tamaño sigue siendo el de
   antes, que es cosa de la presentación y se pide aquí. */
.promesa h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  margin-bottom: 8px;
}

/* 34ch bastaban cuando el titular era la única línea del bloque. Con la
   etiqueta encima y el párrafo debajo, ese ancho dejaba el párrafo en una
   columna de trescientos píxeles: legible, pero con pinta de error. */
.seccion-titulo { max-width: 44ch; }

.seccion-titulo .etiqueta { margin-bottom: 14px; }

/* Sobre el morado fijo el acento no sirve, y `--acento-300` menos que ninguno:
   de noche vale #55407f, o sea morado oscuro sobre morado oscuro — el rótulo
   desaparecía. Va literal, como el bloque que lo contiene y por la misma razón:
   nada que viva sobre una superficie fija puede pedirle color a una rampa que
   se invierte. */
.etiqueta-clara { color: #d4c3f5; }

/* ── Detalles de los planes ───────────────────────────────────────────────── */

/* Fuera del flujo a propósito: en el flujo empujaba hacia abajo el título y el
   precio de Premium, y las dos tarjetas dejaban de alinear sus renglones — que
   es justo lo que se compara de un vistazo en una tabla de planes. */
.plan-destacado { position: relative; }

.plan-sello {
  position: absolute;
  top: 22px;
  right: 26px;
  display: inline-flex;
  background: var(--acento-100);
  color: var(--acento-800);
  border: 1px solid var(--acento-300);
  border-radius: 999px;
  padding: 6px 13px;
  font: 500 12.5px/1 var(--texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-nota {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--tinta-3);
}

/* ── Cierre ───────────────────────────────────────────────────────────────── */

.cierre-nota {
  margin-top: 18px;
  font-size: 14px;
  color: var(--tinta-3);
}

/* ── El salto a un ancla, por debajo de la barra ──────────────────────────── */

/* La barra es `sticky` y mide 68 px, así que un enlace del menú dejaba el
   titular de la sección justo debajo de ella: se saltaba a «Planes» y lo
   primero que se leía era la segunda línea. `scroll-margin-top` es lo único
   que hay que escribir — el navegador lo descuenta al llevar el ancla arriba—
   y no toca el diseño en ningún otro momento. */
main section[id] { scroll-margin-top: 88px; }

/* ── Franja «Ideal para» ──────────────────────────────────────────────────── */

/* Una lista de niveles, no una etiqueta en el titular: la portada no puede
   decir «Primaria» porque Nemikan no es solo para primaria, pero las palabras
   que un buscador quiere leer —primaria, secundaria, preparatoria...— tienen
   que estar en algún sitio. Van aquí, en una franja compacta entre las
   promesas y el relato, en vez de en el sello de la portada: ahí arriba
   etiquetaban el producto entero con un nivel; aquí solo enumeran a quién le
   sirve. */
.niveles-franja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 8px 0 clamp(36px, 6vw, 60px);
  border-top: 1px solid var(--filo);
}

.niveles-intro {
  font: 600 13.5px/1 var(--titular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding-top: 22px;
}

.niveles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
}

.niveles li {
  background: var(--acento-100);
  color: var(--acento-800);
  border: 1px solid var(--acento-300);
  border-radius: 999px;
  padding: 8px 16px;
  font: 500 14.5px/1 var(--texto);
}

@media (max-width: 560px) {
  .niveles-franja { padding-top: 0; }
  .niveles-intro { padding-top: 0; }
}