/* ═══════════════════════════════════════════════════════════════════════════
   cuentas.css — las pantallas de cuenta y Tiza+
   ═══════════════════════════════════════════════════════════════════════════
   Se carga DESPUÉS de style.css y sólo en las páginas que lo usan (cuenta,
   planes, pago, pago-simulado, arrepentimiento, y cualquiera que pinte la
   tarjeta de Plus de acceso.js). No redefine nada del sitio: reusa .paper,
   .container, .btn-primary, .tactil, .aparece y los tokens de la paleta, de la
   escala tipográfica (--t-*) y de los radios (--r-*).

   Prefijos: .cu-* lo común y la cuenta, .pl-* planes, .pg-* la vuelta del
   pago, .ps-* el simulador, .ar-* el arrepentimiento.

   Animaciones, pocas y con trabajo: la entrada escalonada (.aparece, del
   sitio), el tilde que se dibuja, el sacudón del código, la pastilla que se
   desliza y los números que cuentan (ese último es JS). Todas se apagan con
   prefers-reduced-motion al final del archivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El armazón ──────────────────────────────────────────────────────────── */
.cu-wrap{ max-width: 520px; margin: 0 auto; }
.cu-wrap.ancho{ max-width: 880px; }
/* Los links sueltos del texto (sin clase) van en el verde del sitio y no en
   el azul del navegador. */
.cu-wrap a:not([class]), dialog.cu-dialogo a:not([class]){ color: var(--accent-2);
  text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cu-wrap .crumbs a:not(:first-child){ color: var(--muted); }
.cu-wrap .crumbs > a:first-child{ color: var(--ink-soft); text-decoration: none; }   /* el botón de volver, igual que en el resto (style.css) */

.cu-hero{ text-align: center; margin: 6px 0 22px; }
.cu-hero .mascota-wrap{ line-height: 0; }
.cu-hero h1{ font-size: var(--t-xl); line-height: 1.22; margin: 10px 0 8px; }
.cu-hero h1 em{ font-style: italic; color: var(--accent-2); }
.cu-lema{ color: var(--ink-soft); font-size: var(--t-base); line-height: 1.6;
          max-width: 44ch; margin: 0 auto; }
.cu-lema b{ color: var(--ink); font-weight: 600; }

.cu-caja{ padding: 22px 22px 20px; margin-bottom: 16px; }
.cu-caja > :first-child{ margin-top: 0; }
.cu-caja h2{ font-size: var(--t-md); margin: 0 0 6px; }
.cu-caja p{ line-height: 1.6; }

.cu-nota{ color: var(--muted); font-size: var(--t-xs); line-height: 1.55;
          text-align: center; margin: 14px auto 0; max-width: 46ch; }
.cu-nota a{ color: var(--ink-soft); }

/* El sello en versalitas: «Tiza+», «Gratis», «Versión de prueba». */
.cu-sello{
  display: inline-block; font-size: var(--t-2xs); letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--accent-2);
  background: var(--sel); border-radius: var(--r-pill); padding: 3px calc(9px - .12em) 3px 9px;
  line-height: 1.3;
}
.cu-sello.gris{ color: var(--ink); background: var(--paper-2); }
.cu-sello.oro{ color: var(--ink); background: color-mix(in srgb, var(--gold) 26%, var(--paper)); }

/* Para lectores de pantalla: está, pero no ocupa lugar. */
.cu-oculto{ position: absolute; width: 1px; height: 1px; overflow: hidden;
            clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── Campos ──────────────────────────────────────────────────────────────── */
.cu-lab{ display: block; font-weight: 600; font-size: var(--t-sm); margin: 0 0 8px; }
.cu-lab .cu-opc{ font-weight: 400; color: var(--muted); }
.cu-input{
  width: 100%; font-family: var(--serif); font-size: 16px; /* 16: iOS no hace zoom */
  color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 11px 13px; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.cu-input{ min-height: 96px; resize: vertical; line-height: 1.55; }
.cu-input:focus{ outline: none; border-color: var(--accent);
                 box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.cu-input[aria-invalid="true"]{ border-color: var(--bad); }

.cu-boton{ min-height: 44px; display: inline-flex; align-items: center;
           justify-content: center; gap: 8px; text-decoration: none;
           font-size: var(--t-sm); line-height: 1.2; }
a.btn-primary.cu-boton{ color: var(--sobre-relleno); font-weight: 600; padding: 10px 18px;
                        border-radius: var(--r-sm); }
a.btn-ghost.cu-boton{ font-weight: 600; padding: 10px 18px; border-radius: var(--r-sm); }
.cu-boton.ancho{ width: 100%; }
.cu-boton[disabled], .cu-boton[aria-disabled="true"]{ opacity: .6; cursor: default; }

/* Un botón que es texto: «cambiar mail», «reenviar el código». Sigue siendo un
   <button> de verdad, con su foco. */
.cu-link{
  background: none; border: none; padding: 6px 2px; color: var(--accent-2);
  font-family: var(--serif); font-size: var(--t-sm); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  cursor: pointer;
}
.cu-link:hover{ color: var(--accent); }
.cu-link[disabled]{ color: var(--muted); text-decoration: none; cursor: default; }

.cu-fila-form{ display: flex; gap: 10px; align-items: stretch; margin-top: 14px; flex-wrap: wrap; }
.cu-fila-form .cu-input{ flex: 1 1 220px; }
.cu-fila-form .cu-boton{ flex: 0 0 auto; }

.cu-estado{ min-height: 1.5em; margin: 10px 0 0; font-size: var(--t-sm);
            line-height: 1.5; color: var(--ink-soft); }
.cu-estado:empty{ min-height: 0; margin: 0; }
.cu-estado.mal{ color: var(--bad); }
.cu-estado.bien{ color: var(--good); }

/* ── Entrar: por qué conviene ─────────────────────────────────────────────── */
.cu-porque{ list-style: none; padding: 0; margin: 18px 0 2px; display: grid; gap: 11px; }
.cu-porque li{ display: flex; gap: 12px; align-items: flex-start;
               font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.cu-porque li b{ color: var(--ink); font-weight: 600; }
.cu-porque svg{ flex: none; width: 22px; height: 22px; margin-top: 1px;
                fill: none; stroke: var(--accent); stroke-width: 1.7;
                stroke-linecap: round; stroke-linejoin: round; }

/* ── Crear cuenta / Ya tengo cuenta ───────────────────────────────────────── */
/* Las dos pestañas, con la misma pieza que se desliza de la pastilla de
   planes (.pl-pastilla): un ::before que se traslada, así el texto no salta. */
.cu-modos{
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px; margin: 0 0 20px;
}
.cu-modos::before{
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px); border-radius: var(--r-pill);
  background: var(--paper); box-shadow: 0 1px 2px rgba(38,50,56,.1), 0 2px 8px rgba(38,50,56,.08);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  transition: transform .32s cubic-bezier(.34,1.3,.64,1);
}
.cu-modos[data-lado="1"]::before{ transform: translateX(100%); }
.cu-modos button{
  position: relative; z-index: 1; background: none; border: none; cursor: pointer;
  padding: 9px 10px; border-radius: var(--r-pill); color: var(--ink-soft);
  font-family: var(--serif); font-size: var(--t-sm); font-weight: 600; min-height: 42px;
  transition: color .2s ease;
}
.cu-modos button[aria-selected="true"]{ color: var(--accent-2); }
.cu-modos button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* El formulario: campo, campo, botón. El label de la contraseña comparte fila
   con «¿Te olvidaste?», que es lo primero que se busca cuando no entra. */
#fEntrar .cu-input + .cu-lab-fila{ margin-top: 16px; }
.cu-lab-fila{ display: flex; align-items: baseline; justify-content: space-between;
              gap: 10px; flex-wrap: wrap; }
.cu-lab-fila .cu-lab{ margin-bottom: 8px; }
.cu-olvide{ padding: 0 0 8px; font-size: var(--t-xs); }
.cu-enviar{ margin-top: 16px; }
.cu-estado + .cu-enviar{ margin-top: 12px; }

/* El campo de la contraseña con el ojito adentro. */
.cu-clave{ position: relative; }
.cu-clave .cu-input{ padding-right: 50px; }
.cu-ver{
  position: absolute; top: 0; right: 0; bottom: 0; width: 46px;
  display: grid; place-items: center; background: none; border: none;
  color: var(--ink-soft); cursor: pointer; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.cu-ver:hover{ color: var(--accent-2); }
.cu-ver:focus-visible{ outline: 2px solid var(--accent); outline-offset: -4px; }
.cu-ver svg{ width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
             stroke-linecap: round; stroke-linejoin: round; }
.cu-ver .ojo-no, .cu-ver[aria-pressed="true"] .ojo{ display: none; }
.cu-ver[aria-pressed="true"] .ojo-no{ display: block; }

/* El medidor: tres rayitas que se van llenando. Sin rojo que grite: la que
   todavía no sirve es la primera rayita en --bad, nada más. */
.cu-medidor{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 9px 0 0; }
.cu-medidor[hidden]{ display: none; }
.cu-medidor i{ height: 4px; border-radius: var(--r-pill); background: var(--paper-2);
               transition: background-color .25s ease; }
.cu-medidor[data-nivel="0"] i:first-child{ background: var(--bad); }
.cu-medidor[data-nivel="1"] i:first-child{ background: var(--gold); }
.cu-medidor[data-nivel="2"] i:nth-child(-n+2){ background: var(--accent); }
.cu-medidor[data-nivel="3"] i{ background: var(--good); }
.cu-ayuda{ margin: 7px 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-soft); }
.cu-ayuda b{ color: var(--ink); font-weight: 600; }
.cu-ayuda .cu-link{ font-size: var(--t-xs); padding: 2px 0; }
.cu-input[aria-invalid="true"]:focus{ border-color: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }

/* «Me olvidé»: dos pasos numerados en la misma caja. */
.cu-paso{ display: flex; align-items: center; gap: 9px; margin: 18px 0 0;
          font-weight: 600; font-size: var(--t-sm); }
.cu-paso label{ cursor: default; }
.cu-paso-n{ flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
            background: var(--sel); color: var(--accent-2); font-size: var(--t-2xs); font-weight: 700; }
.cu-paso + .cu-codigo{ margin-top: 12px; }
.cu-nueva{ margin-top: 8px; padding-top: 4px; }
.cu-nueva .cu-paso{ margin-bottom: 10px; }
.cu-nueva.apagada{ opacity: .55; }
.cu-nueva.apagada .cu-medidor{ visibility: hidden; }

/* ── El código: seis casillas ─────────────────────────────────────────────── */
.cu-codigo{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
            max-width: 360px; margin: 18px auto 4px; }
.cu-codigo input{
  width: 100%; aspect-ratio: 5 / 6; min-width: 0; text-align: center;
  font-family: var(--mono); font-size: var(--t-xl); font-weight: 600;
  color: var(--ink); background: var(--bg); caret-color: var(--accent);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); padding: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cu-codigo input:focus{ outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.cu-codigo input.lleno{ background: var(--paper); border-color: var(--accent); }
.cu-codigo.mal input{ border-color: var(--bad); }
.cu-codigo.bien input{ border-color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, var(--paper)); }
.cu-codigo.sacude, .cu-clave.sacude{ animation: cu-sacude .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes cu-sacude{
  10%, 90%{ transform: translateX(-1px); }
  20%, 80%{ transform: translateX(3px); }
  30%, 50%, 70%{ transform: translateX(-6px); }
  40%, 60%{ transform: translateX(6px); }
}
.cu-codigo-pie{ display: flex; justify-content: space-between; align-items: center;
                gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.cu-reenviar-t{ font-variant-numeric: tabular-nums; }

/* El aviso de la página de prueba con el código a la vista. */
.cu-aviso-prueba{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 4px; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1.5px dashed color-mix(in srgb, var(--gold) 70%, var(--border));
  background: color-mix(in srgb, var(--gold) 10%, var(--paper));
  font-size: var(--t-sm); line-height: 1.5;
}
.cu-aviso-prueba p{ margin: 0; flex: 1 1 200px; }
.cu-aviso-prueba code{ font-family: var(--mono); font-weight: 600; font-size: var(--t-base);
                       letter-spacing: .12em; }
.cu-aviso-prueba button{ flex: none; min-height: 40px; }

/* ── El tilde que se dibuja ───────────────────────────────────────────────── */
.cu-tilde{ width: 64px; height: 64px; display: block; margin: 0 auto; }
.cu-tilde circle{ fill: color-mix(in srgb, var(--good) 12%, transparent);
                  stroke: var(--good); stroke-width: 2.4;
                  stroke-dasharray: 164; stroke-dashoffset: 164;
                  animation: cu-traza .55s cubic-bezier(.65,0,.45,1) forwards; }
.cu-tilde path{ fill: none; stroke: var(--good); stroke-width: 3.6;
                stroke-linecap: round; stroke-linejoin: round;
                stroke-dasharray: 44; stroke-dashoffset: 44;
                animation: cu-traza .36s cubic-bezier(.65,0,.45,1) .45s forwards; }
@keyframes cu-traza{ to{ stroke-dashoffset: 0; } }

/* ── Mi cuenta ────────────────────────────────────────────────────────────── */
.cu-saludo{ display: flex; align-items: center; gap: 16px; margin: 4px 0 20px; }
.cu-saludo .mascota-wrap{ line-height: 0; flex: none; }
.cu-saludo-txt{ min-width: 0; flex: 1; }
.cu-saludo h1{ font-size: var(--t-xl); line-height: 1.2; margin: 0 0 3px;
               overflow-wrap: anywhere; }
.cu-mail{ color: var(--muted); font-size: var(--t-sm); overflow-wrap: anywhere; margin: 0; }
.cu-editar-nombre{ margin-top: 2px; }
.cu-nombre-form{ display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.cu-nombre-form .cu-input{ flex: 1 1 100%; padding: 8px 11px; }
.cu-nombre-form button{ min-height: 40px; }

/* La tarjeta del plan. Gratis es papel; Plus lleva el borde de acento y un
   filo verde a la izquierda: se lee de un vistazo sin gritar. */
.cu-plan{ padding: 20px 22px; margin-bottom: 16px; position: relative; overflow: hidden; }
.cu-plan.plus{ border-color: var(--plus-borde);
               background: radial-gradient(120% 140% at 0% 0%, var(--plus-velo) 0%, transparent 58%), var(--paper); }
.cu-plan.plus::before{ content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
                       background: var(--accent); }
.cu-plan-cab{ display: flex; align-items: center; justify-content: space-between;
              gap: 10px; margin-bottom: 8px; }
.cu-plan h2{ font-size: var(--t-lg); margin: 0; }
.cu-plan p{ margin: 0 0 4px; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; }
.cu-plan p b{ color: var(--ink); }
.cu-plan-acc{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Las filas de abajo: sincronización, datos, sesión. */
.cu-lista{ padding: 4px 0; margin-bottom: 16px; }
.cu-item{ display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.cu-item + .cu-item{ border-top: 1px solid var(--border); }
.cu-item svg.cu-ico{ flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent);
                     stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cu-item-txt{ flex: 1; min-width: 0; }
.cu-item-t{ display: block; font-weight: 600; font-size: var(--t-sm); }
.cu-item-d{ display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.45; margin-top: 2px; }
.cu-item .btn-ghost{ flex: none; padding: 8px 14px; min-height: 38px; }
.cu-punto{ display: inline-block; width: 7px; height: 7px; border-radius: 50%;
           background: var(--good); margin-right: 6px; vertical-align: 1px; }
.cu-punto.gris{ background: var(--muted); }

.cu-borrar{ text-align: center; margin: 26px 0 0; }
.cu-borrar .cu-link{ color: var(--muted); font-weight: 400; font-size: var(--t-xs); }
.cu-borrar .cu-link:hover{ color: var(--bad); }

/* ── Los diálogos propios ─────────────────────────────────────────────────── */
dialog.cu-dialogo{
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
  padding: 24px 22px 20px; width: min(420px, calc(100vw - 32px)); max-width: none;
}
dialog.cu-dialogo::backdrop{ background: rgba(20,26,24,.42); backdrop-filter: blur(2px); }
dialog.cu-dialogo[open]{ animation: cu-dialogo-entra .2s cubic-bezier(.2,.8,.3,1); }
@keyframes cu-dialogo-entra{ from{ opacity: 0; transform: translateY(8px) scale(.98); } }
dialog.cu-dialogo h2{ font-size: var(--t-lg); margin: 0 0 8px; }
dialog.cu-dialogo p{ margin: 0 0 12px; line-height: 1.6; color: var(--ink-soft); font-size: var(--t-sm); }
dialog.cu-dialogo p b{ color: var(--ink); }
.cu-dialogo-acc{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.btn-peligro{ background: var(--bad); color: #fff; }
.btn-peligro:hover{ background: color-mix(in srgb, var(--bad) 85%, #000); }
:root[data-theme="dark"] .btn-peligro{ color: #1a1e1d; }

/* ── Planes (/planes) ─────────────────────────────────────────────────────
   En orden de la página: el aviso de «ya tenés», el selector de duración,
   las dos tarjetas, la vista previa (.mq-* son las maquetas), los números,
   la tabla, las preguntas y la barra del celu. */

/* «Tiza+»: el + va en el color de acento, en letra (no relleno). */
.pl-mas{ color: var(--accent-2); font-weight: 700; }

.pl-ya-tiene{
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; margin: 0 0 18px;
  border-radius: var(--r-md); background: var(--sel); color: var(--ink);
  font-size: var(--t-sm); line-height: 1.5;
}
.pl-ya-tiene svg{ flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--accent-2);
                  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pl-ya-tiene a{ color: var(--accent-2); font-weight: 600; }

.pl-hero h1{ max-width: 20ch; margin-left: auto; margin-right: auto; }
.pl-cab{ display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; }

/* El selector de duración: un radiogroup de tres. La pieza clara que marca el
   elegido es un ::before que se traslada con --i (lo pone el JS), así el
   texto no se mueve. Arriba del destacado, la marca «Conviene para cursar»
   (dice para qué conviene, no cuánta gente lo eligió: ese dato no existe). */
.pl-duracion{
  --n: 3; --i: 0;
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  width: min(540px, 100%); margin-top: 20px;
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 4px;
}
.pl-duracion::before{
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--n)); border-radius: var(--r-md);
  background: var(--paper); box-shadow: 0 1px 2px rgba(38,50,56,.1), 0 2px 8px rgba(38,50,56,.08);
  border: 1.5px solid var(--accent);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform .32s cubic-bezier(.34,1.3,.64,1);
}
.pl-duracion button{
  position: relative; z-index: 1; background: none; border: none; cursor: pointer;
  padding: 10px 4px 9px; border-radius: var(--r-md); min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--serif); color: var(--ink-soft);
}
.pl-duracion button:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.pl-dur-n{ font-size: var(--t-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pl-dur-s{ font-size: var(--t-2xs); line-height: 1.2; white-space: nowrap; }
.pl-duracion button[aria-checked="true"]{ color: var(--ink); }
.pl-duracion button[aria-checked="true"] .pl-dur-s{ color: var(--accent-2); font-weight: 700; }
.pl-dur-marca{
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: var(--t-2xs); font-weight: 700; line-height: 1.3;
  letter-spacing: .02em;
  background: var(--relleno-oferta); color: var(--sobre-oferta);
  border-radius: var(--r-pill); padding: 2px 10px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--relleno-oferta) 35%, transparent);
}
/* La marca se come la parte de arriba del botón: el texto del destacado baja
   lo que ella ocupa, así «Cuatrimestre» no queda tapado. */
.pl-duracion button.pl-dur-destacado{ padding-top: 16px; }

.pl-grilla{ display: grid; gap: 16px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 720px){ .pl-grilla{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 719px){ .pl-card.plus{ order: -1; } }

.pl-card{ padding: 22px 22px 20px; display: flex; flex-direction: column; }
/* Tiza+ se despega sin gritar: borde de acento, sombra, y un velo salvia
   arriba que se apaga hacia el papel. */
.pl-card.plus{
  border: 2px solid var(--accent); position: relative; box-shadow: var(--shadow);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sel) 70%, var(--paper)) 0, var(--paper) 170px);
}
.pl-card .cu-sello{ align-self: flex-start; }
.pl-card-cab{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pl-card h2{ font-size: var(--t-lg); margin: 10px 0 2px; }
.pl-ahorra{
  font-size: var(--t-xs); font-weight: 700; line-height: 1.3; white-space: nowrap;
  background: var(--relleno-oferta); color: var(--sobre-oferta);
  border-radius: var(--r-pill); padding: 3px 10px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--relleno-oferta) 30%, transparent);
}
/* Al cambiar de duración el chip da un saltito: se ve que el ahorro cambió. */
.pl-ahorra.salta{ animation: pl-salta .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes pl-salta{ 0%{ transform: scale(.82); } 100%{ transform: scale(1); } }
@media (prefers-reduced-motion: reduce){ .pl-ahorra.salta{ animation: none; } }
.pl-ahorra.apagado{ background: var(--paper-2); color: var(--ink-soft); font-weight: 600; box-shadow: none; }
.pl-precio{ display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.pl-monto{ font-size: calc(var(--t-xl) * 1.45); font-weight: 700; line-height: 1.1;
           font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pl-cada{ color: var(--ink-soft); font-size: var(--t-sm); }
.pl-total{ color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.5; margin: 4px 0 0; min-height: 3em; }
.pl-total b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-total s{ text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }
.pl-norenueva{ display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0;
               font-size: var(--t-sm); line-height: 1.45; color: var(--ink-soft); }
.pl-norenueva b{ color: var(--ink); }
.pl-norenueva svg{ flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--accent-2);
                   stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pl-ancla{ margin: 12px 0 0; padding: 8px 11px; border-radius: var(--r-sm);
           border: 1px dashed var(--border-strong); background: var(--paper);
           font-size: var(--t-xs); line-height: 1.5; color: var(--ink-soft); }
.pl-ancla b{ color: var(--ink); }
.pl-lista-rot{ margin: 18px 0 -6px; font-size: var(--t-sm); font-weight: 600; }
/* Todo con .pl-card adelante: el plan al parcial (style.css) también tiene un
   .pl-lista, y las páginas que cargan los dos CSS se pisaban. */
.pl-card .pl-lista{ margin: 16px 0 18px; }
.pl-card .pl-lista{ list-style: none; padding: 0; display: grid; gap: 9px; }
.pl-card .pl-lista li{ display: flex; gap: 10px; font-size: var(--t-sm); line-height: 1.5; }
.pl-card .pl-lista li::before{
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pl-card.gratis .pl-lista li::before{ background: var(--muted); }
.pl-accion{ margin-top: auto; }
.pl-accion .cu-boton, .pl-final .cu-boton{ width: 100%; }
.pl-comprar{ font-size: var(--t-base); }
/* Debajo de CADA botón de compra: el derecho de arrepentimiento. */
.pl-garantia{ font-size: var(--t-xs); text-align: center; margin: 9px 0 0; line-height: 1.45; }
.pl-garantia a{ color: var(--accent-2); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pl-medio{ font-size: var(--t-xs); color: var(--ink-soft); text-align: center; margin: 5px 0 0; line-height: 1.45; }
.pl-medio.nota{ color: var(--ink); background: var(--sel); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 10px; }

/* «Nuevo»: el mismo rojo de la oferta que «Ahorrás N %» (la dueña: «en todo
   lo que dice NUEVO, que tengan un relleno color rojo como los otros»). Es el
   par medido: blanco sobre --relleno-oferta 4,98:1 en claro, #13231d sobre el
   rosa del oscuro 6,69:1. */
.pl-nuevo{
  display: inline-block; vertical-align: 2px; font-size: var(--t-2xs); font-weight: 700; line-height: 1.3;
  letter-spacing: .06em; text-transform: uppercase; font-family: var(--serif);
  background: var(--relleno-oferta); color: var(--sobre-oferta); border-radius: var(--r-pill);
  padding: 1px calc(7px - .06em) 1px 7px;
}

.pl-seccion-tit{ font-size: var(--t-lg); text-align: center; margin: 46px 0 6px; line-height: 1.3; }
.pl-seccion-sub{ text-align: center; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55;
                 margin: 0 auto 18px; max-width: 52ch; }

/* ── El tutor, de protagonista (arriba de todo en /planes) ─────────────────
   El texto a la izquierda y la maqueta a la derecha; en el celu, uno abajo del
   otro. La maqueta es HTML: el ejercicio, el «15» con la ✕, el botón y el
   globo de Tiza escribiéndose (app-planes.js → animarTutor). */
.pl-tutor{ display: grid; gap: 18px 28px; padding: 22px 24px; margin: 0 0 28px; align-items: center; scroll-margin-top: 80px; }
@media (min-width: 760px){ .pl-tutor{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
.pl-tutor-sellos{ display: flex; align-items: center; gap: 8px; }
.pl-tutor h2{ font-size: var(--t-lg); line-height: 1.25; margin: 10px 0 8px; }
.pl-tutor-txt p{ margin: 0 0 10px; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.6; }
.pl-tutor-txt p b{ color: var(--ink); }
.pl-tutor-cupo{ font-size: var(--t-xs) !important; }
.pl-tutor-otra{ grid-column: 1 / -1; justify-self: end; margin-top: -8px; font-size: var(--t-xs); }
.pl-tutor-otra[hidden]{ display: none; }
@media (min-width: 760px){ .pl-tutor-otra{ grid-column: 2; } }

.pl-tutor-maq{ background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
               padding: 14px; display: grid; gap: 12px; font-size: var(--t-sm); }
.tu-ej{ background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; }
.tu-tema{ font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.tu-enun{ margin: 6px 0 10px; color: var(--ink); line-height: 1.5; }
.tu-paso{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tu-prompt{ color: var(--ink-soft); }
.tu-resp{ display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--bad); border-radius: var(--r-sm);
          padding: 3px 10px; min-width: 80px; background: color-mix(in srgb, var(--bad) 7%, var(--paper));
          font-family: var(--mono); color: var(--ink); }
.tu-x{ margin-left: auto; color: var(--bad); font-weight: 700; font-family: var(--serif); }
/* El botón: en su estado final, apretado (relleno); rebobinado, de contorno. */
.tu-boton{ display: inline-flex; align-items: center; margin-top: 12px; padding: 7px 13px; border-radius: var(--r-pill);
           border: 1px solid var(--relleno-acento); background: var(--relleno-acento); color: var(--sobre-relleno);
           font-weight: 600; font-size: var(--t-xs); transition: background .2s ease, color .2s ease, transform .15s ease; }
.tu-anima:not(.tu-apretado) .tu-boton{ background: var(--paper); color: var(--accent-2); }
.tu-anima.tu-apretado:not(.tu-pensando) .tu-boton{ transform: scale(.96); }
.tu-globo{ display: flex; gap: 10px; align-items: flex-start; transition: opacity .3s ease, transform .3s ease; }
.tu-anima:not(.tu-pensando) .tu-globo{ opacity: 0; transform: translateY(6px); }
.tu-gata{ flex: none; line-height: 0; width: 44px; }
.tu-gata svg{ width: 44px; height: auto; }
.tu-dice{ position: relative; flex: 1; min-width: 0; background: var(--paper); border: 1px solid var(--plus-borde);
          border-radius: var(--r-md); border-top-left-radius: var(--r-xs); padding: 10px 13px; box-shadow: var(--shadow); }
.tu-quien{ display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
           color: var(--accent-2); margin-bottom: 4px; }
.tu-texto{ position: relative; margin: 0; white-space: pre-line; line-height: 1.55; color: var(--ink); }
.tu-tipeado{ position: absolute; inset: 0; }
.tu-anima .tu-fantasma{ visibility: hidden; }
.tu-dice .tu-puntos{ display: none; position: absolute; left: 13px; top: 32px; }
.tu-anima.tu-pensando:not(.tu-escribe) .tu-puntos{ display: inline-flex; }
.tu-anima.tu-escribe:not(.tu-listo) .tu-tipeado::after{
  content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px;
  background: var(--accent); animation: tu-cursor .9s steps(2, start) infinite;
}
@keyframes tu-cursor{ to{ visibility: hidden; } }
@media (max-width: 480px){ .pl-tutor{ padding: 18px 14px; } .pl-tutor-maq{ padding: 10px; } }

/* ── Después del simulacro gratis: la tarjeta de Tiza+ (app-parcial.js) ── */
.pc-venta{ margin: 0 0 16px; }

/* ── Lo que trae Tiza+: las maquetas ─────────────────────────────────────────
   Maquetas en HTML y CSS, no capturas: se ven bien en claro y en oscuro y no
   pesan. Están en su estado FINAL; app-planes.js les pone .pl-anima (el estado
   de partida) y .visto al asomar, así si el JS no corre se ven igual, quietas.
   Todo con transiciones y no con animaciones con retardo (ver «El menú
   animado» en CLAUDE.md: el retardo sin fill-mode parpadea). */
.pl-previa-grilla{ display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .pl-previa-grilla{ grid-template-columns: 1fr 1fr; } }
.pl-maq{ padding: 14px 14px 16px; }
.pl-maq h3{ font-size: var(--t-md); margin: 0 0 4px; line-height: 1.3; }
.pl-maq p{ margin: 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; }
.pl-maq-vis{
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 14px; margin-bottom: 13px; min-height: 158px;
  font-size: var(--t-xs); line-height: 1.4; color: var(--ink); overflow: hidden;
}

/* el parcial con diagnóstico */
.mq-parcial-cab{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mq-reloj{ font-family: var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mq-nota{ margin: 6px 0 8px; line-height: 1; }
.mq-nota-n{ font-size: 34px; font-weight: 700; color: var(--accent-2); display: inline-block; }
.mq-nota-de{ color: var(--ink-soft); font-size: var(--t-sm); }
.mq-diag{ list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mq-diag li{ display: grid; grid-template-columns: 84px 1fr 54px; gap: 8px; align-items: center; }
.mq-diag i{ height: 7px; border-radius: 99px; background: var(--paper-2); position: relative; overflow: hidden; }
.mq-diag i::after{ content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%);
                   border-radius: inherit; background: var(--accent); }
.mq-diag li:last-child i::after{ background: var(--gold); }
.mq-diag em{ font-style: normal; font-weight: 700; text-align: right; }
.mq-diag em.bien{ color: var(--accent-2); }
.mq-diag em.rep{ color: var(--oro-texto); }

/* el plan */
.mq-plan{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mq-plan li{ display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: var(--r-sm); }
.mq-dia{ font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-soft); width: 28px; flex: none; }
.mq-plan li.hecho span:last-child::after{ content: ' ✓'; color: var(--accent-2); font-weight: 700; }
.mq-plan li.hoy{ background: var(--sel); font-weight: 600; }
.mq-plan li.hoy .mq-dia{ color: var(--ink); }
.mq-plan li.hoy em{ margin-left: auto; font-style: normal; font-size: var(--t-2xs); font-weight: 700;
                    background: var(--relleno-acento); color: var(--sobre-relleno);
                    border-radius: var(--r-pill); padding: 1px 8px; }
.mq-plan li.fecha{ border: 1px dashed var(--gold); color: var(--oro-texto); font-weight: 700; }

/* el repaso de errores */
.mq-repaso{ display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.mq-rep-rot{ font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
             background: var(--relleno-acento); color: var(--sobre-relleno); border-radius: var(--r-pill); padding: 2px 9px; }
.mq-repaso b{ font-size: var(--t-base); margin-top: 3px; }
.mq-rep-cuando{ color: var(--ink-soft); }
.mq-rep-vueltas{ display: flex; gap: 7px; margin: 6px 0 2px; }
.mq-rep-vueltas i{ width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--border-strong); }
.mq-rep-vueltas i.mal{ border: 1.5px solid var(--bad); background: color-mix(in srgb, var(--bad) 22%, transparent); }
.mq-rep-vueltas i.bien{ border: 1.5px solid var(--relleno-bien); background: var(--relleno-bien); }
.mq-rep-pie{ color: var(--ink-soft); font-size: var(--t-2xs); }

/* el ejercicio nivel parcial */
.mq-ej-sello{ display: inline-block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
              background: var(--relleno-oro); color: var(--sobre-oro); border-radius: var(--r-pill); padding: 2px 9px; }
.mq-ej-enun{ margin: 8px 0 8px; color: var(--ink); font-size: var(--t-xs) !important; line-height: 1.45 !important; }
.mq-ej-items{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mq-ej-items li{ padding: 5px 8px; border-radius: var(--r-sm); border-left: 2px solid transparent; }
.mq-ej-items li.ok::after{ content: ' ✓'; color: var(--accent-2); font-weight: 700; }
.mq-ej-items li.ahora{ border-left-color: var(--gold); background: var(--paper-2); font-weight: 600; }

/* la entrada */
.pl-anima .mq-diag i::after{ width: 0; }
.pl-anima.visto .mq-diag i::after{ width: calc(var(--v) * 100%); transition: width .9s cubic-bezier(.2,.8,.3,1); }
.pl-anima.visto .mq-diag li:nth-child(2) i::after{ transition-delay: .12s; }
.pl-anima.visto .mq-diag li:nth-child(3) i::after{ transition-delay: .24s; }
.pl-anima .mq-nota-n{ transform: scale(.7); opacity: .25; }
.pl-anima.visto .mq-nota-n{ transform: none; opacity: 1; transition: transform .5s cubic-bezier(.34,1.5,.64,1) .2s, opacity .3s ease .2s; }
.pl-anima .mq-plan li, .pl-anima .mq-ej-items li{ opacity: 0; transform: translateX(-8px); }
.pl-anima.visto .mq-plan li, .pl-anima.visto .mq-ej-items li{ opacity: 1; transform: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.3,1); }
.pl-anima.visto .mq-plan li:nth-child(2), .pl-anima.visto .mq-ej-items li:nth-child(2){ transition-delay: .08s; }
.pl-anima.visto .mq-plan li:nth-child(3), .pl-anima.visto .mq-ej-items li:nth-child(3){ transition-delay: .16s; }
.pl-anima.visto .mq-plan li:nth-child(4){ transition-delay: .24s; }
.pl-anima.visto .mq-plan li:nth-child(5){ transition-delay: .32s; }
.pl-anima .mq-rep-vueltas i{ transform: scale(0); }
.pl-anima.visto .mq-rep-vueltas i{ transform: none; transition: transform .35s cubic-bezier(.34,1.6,.64,1); }
.pl-anima.visto .mq-rep-vueltas i:nth-child(2){ transition-delay: .12s; }
.pl-anima.visto .mq-rep-vueltas i:nth-child(3){ transition-delay: .24s; }
.pl-anima.visto .mq-rep-vueltas i:nth-child(4){ transition-delay: .36s; }

/* ── Lo que ya hay adentro ───────────────────────────────────────────────── */
.pl-numeros-grilla{ display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 14px 0 10px; }
@media (min-width: 640px){ .pl-numeros-grilla{ grid-template-columns: repeat(4, 1fr); } }
.pl-num{ text-align: center; padding: 14px 8px 12px; border-radius: var(--r-md);
         border: 1px solid var(--border); background: var(--paper); }
.pl-num b{ display: block; font-size: calc(var(--t-xl) * 1.1); font-weight: 700; line-height: 1.1;
           color: var(--accent-2); font-variant-numeric: tabular-nums; }
.pl-num span{ display: block; margin-top: 4px; color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.35; }

/* ── Qué incluye cada uno ────────────────────────────────────────────────── */
.pl-tabla-caja{ padding: 0; overflow: hidden; }
.pl-tabla{ width: 100%; border-collapse: collapse; }
.pl-tabla thead th{ font-size: var(--t-sm); font-weight: 700; padding: 13px 8px 11px; text-align: center; }
.pl-tabla thead th:first-child{ text-align: left; }
.pl-tabla .pl-col-plus{ background: color-mix(in srgb, var(--sel) 65%, transparent); }
.pl-tabla tr.pl-grupo th{
  text-align: left; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); padding: 18px 14px 6px; border-top: 1px solid var(--border);
}
.pl-tabla th[scope="row"]{ text-align: left; font-weight: 400; padding: 10px 12px 10px 14px; vertical-align: top; }
.pl-tabla tbody tr:not(.pl-grupo) > *{ border-top: 1px solid var(--border); }
.pl-tabla tbody tr.pl-grupo + tr > *{ border-top: none; }
.pl-f-n{ display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }
.pl-f-d{ display: block; font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.pl-tabla td{ text-align: center; vertical-align: middle; width: 92px; padding: 8px 6px; }
.pl-si{ width: 20px; height: 20px; fill: none; stroke: var(--accent-2); stroke-width: 2.6;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.pl-no{ color: var(--muted); font-size: var(--t-base); }
.pl-parte{ font-size: var(--t-xs); font-weight: 600; line-height: 1.3; display: inline-block; }
.pl-col-plus .pl-parte{ color: var(--accent-2); }
.pl-final{ max-width: 380px; margin: 22px auto 0; text-align: center; }

/* ── La barra del celu ───────────────────────────────────────────────────────
   Fija abajo, sólo en pantallas angostas. La muestra y la esconde
   app-planes.js (no tapa nunca un botón de compra, el selector, el aviso
   legal ni el pie). El env() es el borde de abajo del iPhone. */
.pl-fija{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 22px rgba(38,50,56,.12);
  transition: transform .26s cubic-bezier(.2,.8,.3,1);
}
:root[data-theme="dark"] .pl-fija{ box-shadow: 0 -6px 22px rgba(0,0,0,.45); }
.pl-fija.sale{ transform: translateY(115%); }
.pl-fija[hidden]{ display: none; }
.pl-fija-txt{ min-width: 0; flex: 1; }
.pl-fija-txt b{ display: block; font-size: var(--t-base); font-variant-numeric: tabular-nums; line-height: 1.25; }
.pl-fija-txt span{ display: block; font-size: var(--t-2xs); color: var(--ink-soft); line-height: 1.35; }
.pl-fija .cu-boton{ flex: none; padding: 10px 16px; min-height: 44px; font-size: var(--t-sm); }
@media (min-width: 720px){ .pl-fija{ display: none !important; } }

/* Planes en el celu: la tabla pierde aire para que la columna de lo que
   incluye no quede en dos palabras por renglón. */
@media (max-width: 560px){
  .pl-tabla td{ width: 66px; padding: 8px 3px; }
  .pl-tabla th[scope="row"]{ padding: 10px 6px 10px 12px; }
  .pl-tabla thead th{ padding: 12px 4px 10px; }
  .pl-seccion-tit{ margin-top: 38px; }
  .pl-dur-n{ font-size: var(--t-xs); }
}

.pl-faq{ margin: 34px auto 0; max-width: 640px; }
.pl-faq h2{ font-size: var(--t-lg); margin: 0 0 12px; text-align: center; }
.pl-faq details{ border-bottom: 1px solid var(--border); }
.pl-faq details:first-of-type{ border-top: 1px solid var(--border); }
.pl-faq summary{
  list-style: none; cursor: pointer; padding: 14px 30px 14px 2px; position: relative;
  font-weight: 600; font-size: var(--t-base); line-height: 1.4;
}
.pl-faq summary::-webkit-details-marker{ display: none; }
.pl-faq summary::after{
  content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
  border-right: 1.8px solid var(--ink-soft); border-bottom: 1.8px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.pl-faq details[open] summary::after{ transform: translateY(-30%) rotate(-135deg); }
.pl-faq summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.pl-faq details p{ margin: 0 0 16px; color: var(--ink-soft); line-height: 1.65; font-size: var(--t-sm); padding-right: 12px; }
.pl-faq details[open] p{ animation: aparecer .3s cubic-bezier(.2,.8,.3,1) both; }
.pl-legal{ color: var(--muted); font-size: var(--t-xs); text-align: center; line-height: 1.55;
           margin: 26px auto 0; max-width: 60ch; }
.pl-legal a{ color: var(--ink-soft); }

/* ── La vuelta del pago ───────────────────────────────────────────────────── */
.pg-caja{ text-align: center; padding: 30px 22px 26px; }
.pg-caja .mascota-wrap{ line-height: 0; }
.pg-caja h1{ font-size: var(--t-xl); margin: 14px 0 8px; line-height: 1.22; }
.pg-caja > p{ color: var(--ink-soft); line-height: 1.6; margin: 0 auto 6px; max-width: 42ch; font-size: var(--t-base); }
.pg-acc{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
/* Los tres puntitos, lentos: la espera no tiene que sentirse urgente. */
.pg-puntos{ display: inline-flex; gap: 7px; margin: 16px 0 4px; }
.pg-puntos i{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
              opacity: .25; animation: pg-respira 1.6s ease-in-out infinite; }
.pg-puntos i:nth-child(2){ animation-delay: .22s; }
.pg-puntos i:nth-child(3){ animation-delay: .44s; }
@keyframes pg-respira{ 0%, 100%{ opacity: .22; transform: scale(.85); } 45%{ opacity: 1; transform: scale(1); } }

/* «Lo que se te abrió». La dueña, desde el iPad: «esta pantalla está medio
   buggeada»: además del verde (ver --tv-esquivar-flota en style.css), las
   filas tenían la letra muy chica (14 y 13 px) y la tarjeta se veía apretada.
   Ahora la letra es la del texto (16/14), cada fila respira y, en pantallas
   anchas (el iPad), la tarjeta se abre y las filas van de a dos, con el tutor
   entero arriba: siete filas de 64 px en una columna de 400 eran una lista
   larga en una pantalla que sobraba a los costados. */
.pg-ahora{ text-align: left; margin: 26px auto 0; max-width: 460px; display: grid; gap: 10px; }
.pg-ahora-rot{ font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
               color: var(--ink-soft); font-weight: 700; text-align: center; margin: 0 0 4px; }
.pg-ir{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 66px; border-radius: var(--r-md);
        border: 1px solid var(--border); background: var(--bg); color: var(--ink); text-decoration: none; }
.pg-ir > div{ min-width: 0; }
/* Los textos van con `> div`: con `.pg-ir span` a secas, el círculo de la
   gata del tutor (que también es un span) pasaba a display:block y la gata
   quedaba arriba a la izquierda del círculo, no centrada. */
.pg-ir > div b{ display: block; font-size: var(--t-base); line-height: 1.3; }
.pg-ir > div span{ display: block; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }
.pg-ir::after{ content: '→'; margin-left: auto; color: var(--accent); transition: transform .2s ease; }
@media (hover: hover){ .pg-ir:hover{ border-color: var(--accent); }
                       .pg-ir:hover::after{ transform: translateX(3px); } }
/* La bienvenida al pagar: el sello grande (una sola vez, acá) y «Esto es lo
   que se te abrió», con el tutor primero. */
.pg-bienvenida{ padding-bottom: 26px; }
.pg-bienvenida h1{ font-size: calc(var(--t-xl) * 1.08); }
@media (min-width: 820px){
  .cu-wrap:has(> .pg-bienvenida){ max-width: 760px; }
  .pg-bienvenida{ padding: 38px 40px 34px; }
  .pg-bienvenida .pg-ahora{ max-width: none; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pg-bienvenida .pg-ahora-rot, .pg-bienvenida .pg-ir-tutor{ grid-column: 1 / -1; }
}
.pg-carnet{ display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 16px auto 0;
            padding: 10px 26px 9px; border-radius: var(--r-md); border: 1px solid var(--plus-borde);
            background: radial-gradient(140% 160% at 0% 0%, var(--plus-velo) 0%, transparent 62%), var(--paper);
            box-shadow: var(--shadow); }
.pg-carnet-marca{ font-size: calc(var(--t-xl) * 1.3); font-weight: 700; line-height: 1.1; color: var(--ink); }
.pg-carnet-marca .tp-mas{ margin-left: 1px; }
.pg-carnet-d{ font-size: var(--t-xs); color: var(--ink-soft); }
.pg-ir .tp-tutor-ico{ width: 46px; height: 46px; }
/* El tutor, primero y más grande: es la función estrella. Se abre ahí mismo
   (app-pago.js → tizaAbrirTutor), sin irse de esta pantalla. */
.pg-ir-tutor{ min-height: 76px; border-color: var(--plus-borde); background: radial-gradient(120% 160% at 0% 0%, var(--plus-velo) 0%, transparent 60%), var(--paper); }
.pg-ir-tutor > div b{ font-size: var(--t-md); }

/* «Preguntale a Tiza» en la tarjeta del plan de Mi cuenta. */
.cu-plan-tutor{ display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 12px;
                border-radius: var(--r-sm); border: 1px solid var(--plus-borde); background: var(--paper);
                color: var(--ink); text-decoration: none; }
.cu-plan-tutor:hover{ border-color: var(--accent); }
.cu-plan-tutor-txt{ flex: 1; min-width: 0; display: grid; gap: 1px; }
.cu-plan-tutor-txt b{ font-size: var(--t-sm); }
.cu-plan-tutor-txt span{ font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.4; }
.cu-plan-tutor-ir{ color: var(--accent); }

/* ── El simulador ─────────────────────────────────────────────────────────── */
.ps-cartel{
  text-align: center; padding: 18px 16px; margin: 4px 0 18px; border-radius: var(--r-md);
  border: 2px dashed color-mix(in srgb, var(--gold) 75%, var(--border));
  background: color-mix(in srgb, var(--gold) 9%, var(--paper));
}
.ps-cartel strong{ display: block; font-size: var(--t-xl); line-height: 1.2; }
.ps-cartel span{ display: block; margin-top: 6px; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.5; }
.ps-resumen{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
             padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ps-resumen:first-child{ padding-top: 0; }
.ps-resumen span{ color: var(--ink-soft); font-size: var(--t-sm); }
.ps-resumen b{ font-size: var(--t-md); }
.ps-resumen .ps-total{ font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.ps-ref{ font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); overflow-wrap: anywhere; }
.ps-botones{ display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 560px){ .ps-botones{ grid-template-columns: 1fr 1fr; } }

/* ── Arrepentimiento ──────────────────────────────────────────────────────── */
.ar-codigo{
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 16px auto 6px; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--sel); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.ar-codigo code{ font-family: var(--mono); font-size: calc(var(--t-xl) * 1.2); font-weight: 600;
                 letter-spacing: .08em; color: var(--ink); user-select: all; }
.ar-codigo button{ min-height: 40px; }
.ar-pasos{ counter-reset: ar; list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; text-align: left; }
.ar-pasos li{ counter-increment: ar; display: flex; gap: 12px; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.ar-pasos li::before{
  content: counter(ar); flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper-2); color: var(--accent-2);
  font-weight: 700; font-size: var(--t-xs); margin-top: 1px;
}
.ar-pasos b{ color: var(--ink); }

/* ── La tarjeta «Esto es de Tiza+» (acceso.js → tarjetaPlus) ──────────────
   La que aparece donde algo es de Tiza+: un ejercicio de nivel parcial, el
   segundo ejemplo resuelto, un parcial del segundo en adelante, el plan, Mi
   cuatrimestre, el repaso. Tiene que dar ganas, no dar un portazo: la gata que
   guiña, el sello con el «+» en el acento, una línea de por qué sirve, el
   botón relleno y —casi siempre— una salida amable para seguir con lo gratis.
   El papel lleva un velo del verde de selección desde la esquina, que es lo
   que la separa de una tarjeta más sin gritar. */
.cu-plus{
  display: flex; gap: 20px; align-items: center; padding: 22px 24px;
  /* La misma superficie que .tp-superficie (style.css): un solo tratamiento
     para todo lo de Tiza+. */
  border: 1px solid var(--plus-borde);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--plus-velo) 0%, transparent 58%),
    var(--paper);
  box-shadow: var(--shadow);
  text-align: left;
}
.cu-plus-gata{ flex: none; line-height: 0; }
.cu-plus-txt{ min-width: 0; flex: 1 1 auto; }
.cu-plus-tit{ font-size: var(--t-md); margin: 10px 0 4px; line-height: 1.3; color: var(--ink); }
.cu-plus-p{ margin: 0 0 14px; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; max-width: 52ch; }
.cu-plus-lista{ list-style: none; padding: 0; margin: -4px 0 16px; display: grid; gap: 6px; }
.cu-plus-lista li{ display: flex; gap: 9px; align-items: baseline; font-size: var(--t-sm);
                   line-height: 1.45; color: var(--ink); }
.cu-plus-lista li::before{ content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
                           background: var(--accent); transform: translateY(-2px); }
.cu-plus-acc{ display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cu-plus-acc .cu-link{ padding: 10px 2px; min-height: 44px; }

/* El sello: «Nivel parcial · Tiza+». La letra en tinta y el «+» en el verde
   de texto: sobre --sel da 5,3:1 en claro y 6,4:1 en oscuro. */
.cu-sello-plus{ display: inline-flex; align-items: center; gap: 6px; color: var(--ink);
                letter-spacing: .1em; padding: 4px 10px 4px 8px; }
.cu-sello-plus .tp-mas{ color: var(--accent-2); font-weight: 800; letter-spacing: 0; margin-left: 1px; }
.cu-sello-plus .tp-candado{ width: 12px; height: 12px; }

/* La chica: adentro de otra caja (el segundo ejemplo resuelto, un ejercicio). */
.cu-plus.cu-plus-chica{ padding: 18px 20px; gap: 16px; box-shadow: none; }
.cu-plus-chica .cu-plus-gata svg{ width: 60px; height: auto; }

/* Aparece despacio, subiendo un poco: no salta encima del contenido. */
@keyframes tp-entra{ from{ opacity: 0; transform: translateY(10px) scale(.985); } to{ opacity: 1; transform: none; } }
.tp-aparece{ animation: tp-entra .5s cubic-bezier(.2,.8,.3,1) .08s both; }

@media (max-width: 480px){
  .cu-plus{ flex-direction: column; text-align: center; padding: 22px 18px; gap: 12px; }
  .cu-plus-p{ margin-left: auto; margin-right: auto; }
  .cu-plus-lista{ text-align: left; max-width: 34ch; margin-left: auto; margin-right: auto; }
  .cu-plus-acc{ flex-direction: column; align-items: stretch; gap: 2px; }
  .cu-plus-acc .cu-boton{ width: 100%; }
}

/* ── La vista previa de una pantalla de Tiza+ (acceso.js → vistaPrevia) ────
   La pantalla de verdad, atenuada y borrosa, con la tarjeta encima. Se ve qué
   hay del otro lado, y no queda una pantalla vacía con un candado. La muestra
   se desvanece hacia abajo: es una ventana, no la pantalla entera. */
.tp-previa{ position: relative; isolation: isolate; min-height: 560px; }
.tp-muestra{
  filter: blur(1.8px) saturate(.6); opacity: .55;
  pointer-events: none; user-select: none;
  max-height: 1000px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 94%);
          mask-image: linear-gradient(#000 40%, transparent 94%);
}
.tp-sobre{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
           padding: 44px 0 0; z-index: 1; }
.tp-sobre-tarjeta{ width: 100%; max-width: 560px; position: sticky; top: 84px; }
.tp-etiqueta{
  margin: 0 0 12px; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px dashed var(--border-strong);
  color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.4; text-align: center;
  box-shadow: var(--shadow);
}
@media (max-width: 480px){
  .tp-sobre{ padding-top: 24px; }
  .tp-previa{ min-height: 640px; }
}

/* ── El repaso de errores (repaso.html, app-repaso.js) ──────────────────────
   Prefijo .rp-*. Una cabeza con la regla en una línea, y por materia una lista
   de ejercicios-tarjeta que se tocan enteros. Los dos puntitos son las dos
   veces que tiene que salir bien. */
.rp-cabeza{ display: flex; gap: 18px; align-items: center; justify-content: space-between;
            padding: 22px 24px; margin-bottom: 20px; }
.rp-cabeza-txt{ min-width: 0; }
.rp-tiza{ margin: 0; flex: none; }
.rp-kicker{ margin: 0 0 4px; font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
            font-weight: 700; color: var(--accent-2); }
.rp-tit{ font-size: var(--t-lg); line-height: 1.25; margin: 0 0 8px; }
.rp-regla{ margin: 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; max-width: 56ch; }
.rp-regla b{ color: var(--ink); }
.rp-salieron{ margin: 8px 0 0; color: var(--good); font-size: var(--t-sm); font-weight: 600; }

.rp-grupo{ margin: 0 0 22px; }
.rp-materia{ display: flex; align-items: center; gap: 10px; font-size: var(--t-md); margin: 0 0 10px; }
.rp-ico{ display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
         background: var(--paper-2); border: 1px solid var(--border); font-size: var(--t-sm); }
.rp-cuantos{ font-size: var(--t-xs); color: var(--ink-soft); font-weight: 600; background: var(--paper-2);
             border-radius: var(--r-pill); padding: 1px 9px; }
.rp-lista{ display: grid; gap: 10px; }
.rp-item{ display: flex; align-items: center; gap: 14px; padding: 15px 18px; text-decoration: none;
          color: var(--ink); border-left: 3px solid var(--accent);
          transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.rp-item:hover{ border-color: var(--accent); transform: translateY(-1px); }
.rp-item:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.rp-item.rp-hoy{ border-left-color: var(--border-strong); opacity: .72; }
.rp-item-txt{ min-width: 0; flex: 1 1 auto; display: grid; gap: 3px; }
.rp-tema{ font-size: var(--t-xs); color: var(--ink-soft); }
.rp-ex{ font-weight: 600; font-size: var(--t-base); line-height: 1.35; }
.rp-enun{ font-size: var(--t-sm); color: var(--muted); line-height: 1.45; }
.rp-cuando{ font-size: var(--t-xs); color: var(--ink-soft); margin-top: 3px; }
.rp-repite{ color: var(--bad); font-weight: 600; }
.rp-estado{ display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--ink-soft); }
.rp-puntos{ display: inline-flex; gap: 4px; flex: none; }
.rp-puntos i{ width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); }
.rp-puntos i.lleno{ background: var(--accent); }
.rp-ir{ flex: none; font-size: var(--t-lg); color: var(--accent-2); }
.rp-vacio{ text-align: center; padding: 34px 22px 28px; }
.rp-vacio .rp-regla{ margin: 0 auto 18px; }
.rp-vacio .mascota-wrap{ line-height: 0; margin-bottom: 8px; }
.rp-como{ counter-reset: rp; list-style: none; padding: 0; margin: 0 auto 22px; max-width: 46ch;
          display: grid; gap: 12px; text-align: left; }
.rp-como li{ counter-increment: rp; display: flex; gap: 12px; font-size: var(--t-sm);
             line-height: 1.55; color: var(--ink-soft); }
.rp-como li::before{ content: counter(rp); flex: none; width: 24px; height: 24px; border-radius: 50%;
                     display: grid; place-items: center; background: var(--sel); color: var(--accent-2);
                     font-weight: 700; font-size: var(--t-xs); margin-top: 1px; }
.rp-como b{ color: var(--ink); }
@media (max-width: 560px){
  .rp-cabeza{ padding: 20px 16px; }
  .rp-tiza{ display: none; }
  .rp-item{ padding: 14px 14px; }
}

/* ── La bienvenida (vBienvenida) ─────────────────────────────────────────
   Recién creada la cuenta desde «Empezar»: la gata festeja y se ofrece Tiza+,
   con el tutor de protagonista. Los dos botones son los mismos de la portada
   (.lh-btn, en style.css): «Conseguir Tiza+» relleno, «Seguir gratis» papel,
   del mismo ancho y uno abajo del otro. */
.bv-cab h1 em{ font-style: normal; color: var(--accent); }
.bv-plus{ padding: 22px 22px 18px; margin-bottom: 16px; }
.bv-plus-cab{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bv-opcional{ font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bv-tit{ font-size: var(--t-lg); line-height: 1.25; margin: 12px 0 14px; }
.bv-tutor{ display: flex; align-items: flex-end; gap: 10px; }
.bv-gata{ flex: none; width: 44px; line-height: 0; }
.bv-globo{
  flex: 1; min-width: 0; padding: 10px 13px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--plus-borde);
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
}
.bv-globo b{ font-weight: 600; }
.bv-quien{ display: block; font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .08em;
           text-transform: uppercase; color: var(--accent-2); margin-bottom: 2px; }
.bv-tutor-txt{ margin: 10px 0 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.bv-lista{ list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.bv-lista:empty{ display: none; }
.bv-lista li{ display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; }
.bv-lista svg{ flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--accent);
               stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bv-precio{ margin: 16px 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.bv-precio b{ color: var(--ink); font-weight: 700; font-size: var(--t-base); }
.bv-nw{ white-space: nowrap; }
.bv-botones{ display: grid; gap: 12px; margin: 16px 0 0; }
.bv-legal{ margin: 12px 0 0; font-size: var(--t-xs); color: var(--ink-soft); text-align: center; line-height: 1.5; }
.cu-sin-cuenta{ text-align: center; margin: 14px 0 0; font-size: var(--t-sm); }

/* La llegada desde «Empezar»: la pantalla arranca tapada con el mismo verde
   del círculo de la portada y se destapa en un fundido corto. La clase la
   pone el <script> del <head> de cuenta.html, y sólo sin «reducir
   movimiento». pointer-events:none: nunca tapa un toque. */
html.llega-tinta body::after{
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--relleno-acento);
  animation: llega-tinta .26s ease-out .08s forwards;
}
@keyframes llega-tinta{ to{ opacity: 0; visibility: hidden; } }

/* ── El celular ───────────────────────────────────────────────────────────── */
@media (max-width: 560px){
  .cu-caja{ padding: 20px 16px 18px; }
  .cu-plan{ padding: 18px 16px; }
  .cu-item{ padding: 13px 16px; }
  .pl-card{ padding: 20px 16px 18px; }
  .cu-fila-form .cu-boton{ width: 100%; }
  .cu-codigo{ gap: 6px; }
  .cu-dialogo-acc .cu-boton{ flex: 1 1 auto; }
  .pg-caja{ padding: 26px 16px 22px; }
}

/* ── Sin movimiento ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .cu-codigo.sacude, .cu-clave.sacude, dialog.cu-dialogo[open], .pl-faq details[open] p{ animation: none; }
  .cu-tilde circle, .cu-tilde path{ animation: none; stroke-dashoffset: 0; }
  .pl-duracion::before, .pl-fija, .pl-faq summary::after, .pg-ir::after{ transition: none; }
  .cu-modos::before, .cu-medidor i{ transition: none; }
  .pg-puntos i{ animation: none; opacity: .6; }
  .tp-aparece{ animation: none; }
  .rp-item, .rp-item:hover{ transition: none; transform: none; }
}

/* Las pastillas, centradas de verdad, igual que las de style.css (ver «Las
   pastillas, centradas de verdad» allá): el renglón recortado a la mayúscula
   y el relleno de arriba y de abajo sacado del alto que ya tenían (--alto).
   Va al final para ganarle al `padding` de cada una. */
@supports (text-box: trim-both cap alphabetic){
  .cu-sello:not(.cu-sello-plus), .pl-ahorra, .pl-dur-marca, .pl-nuevo{ text-box: trim-both cap alphabetic;
    padding-top: calc((var(--alto) - 1cap) / 2); padding-bottom: calc((var(--alto) - 1cap) / 2); }
  .cu-sello{ --alto: 1.82em; }
  .pl-ahorra{ --alto: 1.77em; }
  .pl-dur-marca{ --alto: 1.64em; }
  .pl-nuevo{ --alto: 1.5em; }
  /* .cu-sello-plus («Nivel parcial · Tiza+», con el candado) es un
     inline-flex, y un contenedor flex no recorta el renglón: queda con su
     relleno de siempre, que ya mide centrado. */
}

/* ── La casilla de «Leí y acepto» ─────────────────────────────────────────────
   Al crear la cuenta y antes de pagar. Va SIN tildar y con la letra del
   formulario, no en letra chica: el consentimiento tiene que ser expreso
   (Ley 25.326) y la aceptación, informada (Ley 24.240). El cuadrado de 20 px
   se toca bien con el dedo, y toda la etiqueta es tocable. */
.cu-acepto{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:16px; font-size: var(--t-sm); line-height:1.5; color: var(--ink-soft);
  cursor:pointer; text-align:left;
}
.cu-acepto[hidden]{ display:none; }
.cu-acepto input{
  flex:none; width:20px; height:20px; margin:1px 0 0;
  accent-color: var(--accent); cursor:pointer;
}
.cu-acepto a{ color: var(--accent-2); text-decoration:underline; text-underline-offset:2px; }
/* La casilla de novedades: la misma casilla, un poco más cerca de la de los
   términos (son las dos decisiones del registro), y «Opcional.» en gris. */
.cu-acepto-opc{ margin-top:10px; }
.cu-opc{ color: var(--muted); }
/* El mes gratis del lanzamiento arriba del formulario de crear cuenta
   (.regalo-cartel, en style.css). */
.cu-regalo{ max-width: 30rem; margin: -8px auto 16px; }
/* La letra chica del mes gratis en la tarjeta del plan, y el «(vence el 31/10)». */
.cu-plan .cu-plan-nota{ margin-top: 8px; color: var(--muted); font-size: var(--t-xs); }
.cu-plan .cu-plan-nota a{ color: var(--accent-2); }
.cu-plan-vence{ font-size: .62em; font-weight: 400; color: var(--muted); white-space: nowrap; }
/* La leyenda de la AAIP (Res. 14/2018): tiene que estar, se deja chica. */
.cu-aaip{ max-width: 60ch; margin-top:10px; }

/* El paso de «antes de pagar» en /planes: qué se compra, cuánto sale, y la
   casilla. Un solo diálogo para los tres botones de compra. */
.pl-antes-resumen{ margin:0 0 4px; font-size: var(--t-md); color: var(--ink); }
.pl-antes-resumen b{ font-weight:700; }
.pl-antes-detalle{ margin:0; color: var(--ink-soft); font-size: var(--t-sm); }
/* Antes de pagar: quién vende (los términos, sección 1) y el arrepentimiento, a mano. */
.pl-antes-quien{ margin:10px 0 0; font-size: var(--t-xs); color: var(--muted); }
.pl-antes-quien a{ color: var(--accent-2); }