/* Letras locales del sitio (el sitio no permite cargar letras de otros dominios). */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/outfit-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/outfit-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/outfit-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-normal.woff2') format('woff2'); }

/* Concepto: un asistente de una pregunta por pantalla; el resultado se centra en un anillo luminoso con la pensión mensual
   y se reparte en dos columnas para recorrerse rápido. Marca Ahorra Consciente: tinta, azul y latón del logo.
   Letra grande y controles amplios para adultos mayores. */
:root {
  --bg: #f4f7fd;
  --surface: #ffffff;
  --surface-2: #eaf0fb;
  --ink: #14213d;
  --ink-soft: #3f4c68;
  --line: rgba(20, 33, 61, .16);
  --blue: #1d3f78;
  --glow: #2f6bff;
  --glow-soft: rgba(47, 107, 255, .14);
  --on-glow: #ffffff;
  --on-blue: #ffffff;
  --brass: #7a5316;
  --brass-fill: #c19a55;
  --good: #1d6a3e;
  --good-soft: #e3f4ea;
  --warn: #7d5200;
  --warn-soft: #fff1d6;
  --bad: #a3262f;
  --bad-soft: #fde8ea;
  --shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 14px 40px -18px rgba(29, 63, 120, .35);
  --display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07122b; --surface: #0e1d42; --surface-2: #14264f; --ink: #eef3ff; --ink-soft: #b4c0dd;
    --line: rgba(238, 243, 255, .2); --blue: #9bbcff; --glow: #6f9dff; --glow-soft: rgba(111, 157, 255, .18);
    --on-glow: #07122b; --on-blue: #07122b;
    --brass: #eccb86; --brass-fill: #d9b36a; --good: #7fdca4; --good-soft: rgba(127, 220, 164, .14);
    --warn: #f3c56a; --warn-soft: rgba(243, 197, 106, .14); --bad: #ff9aa2; --bad-soft: rgba(255, 154, 162, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -18px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07122b; --surface: #0e1d42; --surface-2: #14264f; --ink: #eef3ff; --ink-soft: #b4c0dd;
  --line: rgba(238, 243, 255, .2); --blue: #9bbcff; --glow: #6f9dff; --glow-soft: rgba(111, 157, 255, .18);
  --on-glow: #07122b; --on-blue: #07122b;
  --brass: #eccb86; --brass-fill: #d9b36a; --good: #7fdca4; --good-soft: rgba(127, 220, 164, .14);
  --warn: #f3c56a; --warn-soft: rgba(243, 197, 106, .14); --bad: #ff9aa2; --bad-soft: rgba(255, 154, 162, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -18px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 112.5%; }
html[data-letra="1"] { font-size: 125%; }
html[data-letra="2"] { font-size: 137.5%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.55;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 2.5rem; min-height: 100%;
  background-image:
    linear-gradient(var(--glow-soft) 1px, transparent 1px), linear-gradient(90deg, var(--glow-soft) 1px, transparent 1px);
  background-size: 44px 44px; background-position: -1px -1px;
  background-attachment: fixed;
  scrollbar-color: var(--blue) transparent; caret-color: var(--glow);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, transparent 0%, var(--bg) 100%);
}
::selection { background: var(--glow); color: var(--on-glow); }
a { color: var(--blue); text-underline-offset: .22em; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.num, .tab { font-variant-numeric: tabular-nums; }

/* Cabecera */
.cab { max-width: 70rem; margin: 0 auto; padding-block: .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.marca img { width: 2.3rem; height: 2.3rem; display: block; }
.marca span span { color: var(--brass); }
.letra { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-soft); }
.letra button { min-width: 2.75rem; min-height: 2.75rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 700 1rem var(--display); cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.letra button:hover { border-color: var(--glow); }
.letra button:active { transform: scale(.94); }
.demo { max-width: 70rem; margin: 0 auto .5rem; background: var(--warn-soft); color: var(--ink); border-radius: 999px; padding: .4rem 1.1rem; font-size: .82rem; display: block; width: fit-content; }

main { max-width: 70rem; margin: 0 auto; }
.panel { max-width: 44rem; margin: .75rem auto 0; background: var(--surface); border-radius: 2rem; padding: clamp(1.3rem, 4vw, 2.4rem); box-shadow: var(--shadow); border: 1px solid var(--line); animation: entra .45s var(--ease) both; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Progreso */
.prog { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.prog-txt { font-weight: 600; font-size: .9rem; color: var(--ink-soft); white-space: nowrap; }
.prog-barra { flex: 1; height: .5rem; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.prog-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--glow), var(--brass-fill)); border-radius: 99px; transition: width .5s var(--ease); }

/* Preguntas */
.pregunta { font-size: clamp(1.7rem, 4.6vw, 2.4rem); margin-bottom: .6rem; }
.ayuda { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 1.3rem; max-width: 36rem; }
details.mas { margin: -.6rem 0 1.3rem; }
details.mas summary { cursor: pointer; font-weight: 600; color: var(--blue); min-height: 2.75rem; display: flex; align-items: center; }
details.mas p { background: var(--surface-2); padding: .9rem 1.1rem; border-radius: 1rem; margin-top: .4rem; font-size: .95rem; color: var(--ink); }
.opciones { display: grid; gap: .75rem; margin-bottom: 1.3rem; border: 0; padding: 0; min-width: 0; }
.opciones.dos { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.opciones.edades { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt > span { display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-height: 3.75rem; padding: .8rem 1.2rem; border-radius: 1.2rem; border: 2px solid var(--line); background: var(--surface); font-weight: 600; font-size: 1.08rem; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.opt > span small { font-weight: 400; font-size: .88rem; color: var(--ink-soft); }
.opt:hover > span { border-color: var(--glow); }
.opt input:checked + span { border-color: var(--glow); background: var(--glow-soft); box-shadow: 0 0 0 3px var(--glow-soft); }
.opt input:focus-visible + span { outline: 3px solid var(--glow); outline-offset: 3px; }
.opt input:active + span { transform: scale(.985); }
.edades .opt > span { align-items: center; text-align: center; font-family: var(--display); font-size: 1.5rem; }
.edades .opt > span small { font-family: var(--body); }

.campo { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.campo label, .campo .rot { font-weight: 600; }
.campo .nota { font-size: .85rem; color: var(--ink-soft); }
.entrada { display: flex; align-items: stretch; border: 2px solid var(--line); border-radius: 1.2rem; background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.entrada:focus-within { border-color: var(--glow); box-shadow: 0 0 0 3px var(--glow-soft); }
.entrada input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 600 1.7rem var(--display); padding: .7rem 1rem; min-height: 3.75rem; outline: none; font-variant-numeric: tabular-nums; }
.entrada .pre, .entrada .suf { display: flex; align-items: center; padding: 0 1rem; color: var(--ink-soft); font-weight: 600; background: var(--surface-2); }
.entrada button { width: 3.75rem; border: 0; background: var(--surface-2); color: var(--ink); font: 700 1.8rem var(--display); cursor: pointer; transition: background .2s; }
.entrada button:hover { background: var(--glow-soft); }
.entrada button:focus-visible { outline-offset: -3px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 99px; padding: .25rem; gap: .25rem; width: fit-content; max-width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.seg span { display: flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 99px; font-weight: 600; font-size: .95rem; }
.seg input:checked + span { background: var(--blue); color: var(--on-blue); box-shadow: 0 2px 8px -2px var(--glow); }
.seg input:focus-visible + span { outline: 3px solid var(--glow); }
.err { color: var(--bad); font-weight: 600; background: var(--bad-soft); padding: .75rem 1rem; border-radius: 1rem; margin-bottom: 1rem; }
.err:empty { display: none; }
.aviso-ley { background: var(--warn-soft); padding: 1rem 1.2rem; border-radius: 1.2rem; margin-bottom: 1.4rem; }

.acciones { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.6rem; padding: 0 1.8rem; border-radius: 99px; border: 2px solid transparent; font: 600 1.1rem var(--display); cursor: pointer; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.btn.p { background: var(--blue); color: var(--on-blue); box-shadow: 0 10px 24px -10px var(--glow); }
.btn.p:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px var(--glow); }
.btn.s { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.s:hover { border-color: var(--glow); }
.btn.c { min-height: 2.75rem; padding: 0 1.1rem; font-size: .95rem; }
.btn:active { transform: scale(.98); }
.btn svg { width: 1.3rem; height: 1.3rem; }

/* Portada */
.portada h1 { font-size: clamp(2.1rem, 6.4vw, 3.5rem); letter-spacing: -.035em; line-height: 1.02; margin-bottom: 1rem; }
.portada .ayuda { font-size: 1.12rem; max-width: 34rem; }
.recibes { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .6rem; }
.recibes li { display: flex; gap: .8rem; align-items: flex-start; }
.recibes svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .2rem; color: var(--glow); }
.priv { margin-top: 1.2rem; color: var(--ink-soft); font-size: .92rem; }

/* Resultado: compacto, en dos columnas */
.res { display: grid; gap: clamp(1.25rem, 3vw, 2rem); padding-top: .5rem; animation: entra .5s var(--ease) both; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.2rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 2rem; padding: clamp(1.1rem, 3vw, 2rem); box-shadow: var(--shadow); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--ink-soft); font-weight: 500; margin-bottom: .2rem; }
.monto { font-family: var(--display); font-weight: 700; font-size: clamp(2.7rem, 8vw, 4.2rem); letter-spacing: -.04em; line-height: 1; color: var(--blue); }
.monto small { font-size: .32em; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); margin-left: .25em; }
.hero .cuando { font-size: 1.05rem; margin-top: .6rem; max-width: 30rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.chip { background: var(--surface-2); border-radius: 99px; padding: .35rem .9rem; font-weight: 600; font-size: .88rem; }
.chip.ok { background: var(--good-soft); color: var(--good); }
.chip.at { background: var(--warn-soft); color: var(--warn); }
.anillo { position: relative; width: min(100%, 15rem); aspect-ratio: 1; margin: 0 auto; }
.anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anillo .orb { transform-box: fill-box; transform-origin: center; animation: gira 40s linear infinite; }
.anillo .orb.b { animation-duration: 64s; animation-direction: reverse; }
@keyframes gira { to { transform: rotate(360deg); } }
.anillo .prog-arco { transition: stroke-dashoffset 1.3s var(--ease); }
.anillo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .1rem; padding: 2.2rem; }
.anillo-centro b { font-family: var(--display); font-size: clamp(1.7rem, 5vw, 2.3rem); letter-spacing: -.03em; line-height: 1; }
.anillo-centro span { font-size: .78rem; color: var(--ink-soft); line-height: 1.3; }
.salto { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.salto .sep { flex: 1; }

.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; }
@media (max-width: 900px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
.sec h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: .3rem; }
.sec > .ayuda { margin-bottom: .8rem; font-size: .96rem; }
.filas { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fila { display: grid; grid-template-columns: 6.6rem 1fr; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--line); align-items: start; font-size: .96rem; line-height: 1.45; }
@media (max-width: 560px) { .fila { grid-template-columns: 1fr; gap: .35rem; } }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 1.9rem; padding: 0 .8rem; border-radius: 99px; font-weight: 700; font-size: .8rem; width: fit-content; text-align: center; line-height: 1.15; }
.pill.ok { background: var(--good-soft); color: var(--good); }
.pill.at { background: var(--warn-soft); color: var(--warn); }
.pill.no { background: var(--bad-soft); color: var(--bad); }
.pill.ne { background: var(--surface-2); color: var(--ink); }
.nota-datos { font-size: .82rem; color: var(--ink-soft); margin-top: .7rem; }

.barras { display: grid; gap: .4rem; margin-bottom: .9rem; }
.barra { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: .6rem; align-items: center; }
.barra .edad { white-space: nowrap; }
@media (max-width: 560px) { .barra { grid-template-columns: 4.3rem 1fr auto; gap: .5rem; } .barra .valor { min-width: 5.8rem; } .barra .valor small { display: none; } }
.barra .edad { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.barra .pista { height: 1.3rem; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.barra .pista i { display: block; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--blue) 55%, var(--surface-2)); width: 0; transition: width 1s var(--ease); }
.barra.elegida .pista i { background: linear-gradient(90deg, var(--glow), var(--brass-fill)); }
.barra .valor { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 7rem; font-size: .98rem; line-height: 1.2; }
.barra .valor small { display: block; font-weight: 500; color: var(--ink-soft); font-size: .72rem; }
.marcaelegida { font-size: .66rem; font-weight: 700; background: var(--glow); color: var(--on-glow); border-radius: 99px; padding: .1rem .5rem; margin-left: .3rem; vertical-align: middle; }
.destacado { background: var(--surface-2); border-radius: 1.2rem; padding: .8rem 1rem; font-size: .98rem; display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; }
.destacado svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--glow); margin-top: .1rem; }
.destacado.at { background: var(--warn-soft); }
.destacado.at svg { color: var(--warn); }
.veredicto { font-size: 1.12rem; font-weight: 600; margin: .8rem 0 .7rem; line-height: 1.35; }
.veredicto.ok { color: var(--good); } .veredicto.at { color: var(--warn); } .veredicto.no { color: var(--bad); }
.m40grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .m40grid { grid-template-columns: minmax(0, 1fr); } }
.tabla-w { overflow-x: auto; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 29rem; font-variant-numeric: tabular-nums; }
th, td { padding: .6rem .8rem; text-align: right; border-bottom: 1px solid var(--line); font-size: .92rem; }
th { font-weight: 600; color: var(--ink-soft); font-size: .78rem; background: var(--surface-2); }
th:first-child, td:first-child { text-align: left; }
tr:last-child td { border-bottom: 0; }
tr.mejor td { background: var(--glow-soft); font-weight: 700; }
.req { font-size: .86rem; color: var(--ink-soft); margin-top: .6rem; }

/* Simulador */
.sim { background: var(--surface); border: 1px solid var(--line); border-radius: 1.4rem; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.sim h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-bottom: .25rem; }
.sim > .ayuda { font-size: .92rem; margin-bottom: .9rem; }
.sim .campo { margin-bottom: .8rem; }
.sim .entrada input { font-size: 1.35rem; min-height: 3.1rem; }
.sim .entrada button { width: 3.1rem; font-size: 1.5rem; }
.sim .entrada .pre, .sim .entrada .suf { padding: 0 .8rem; }
.sim .atajos { display: flex; gap: .5rem; flex-wrap: wrap; }
.sim-salida { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.sim-salida .veredicto { margin: 0 0 .8rem; font-size: 1.02rem; }
.sim-dl { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; margin: 0; }
.sim-dl dt { font-size: .78rem; color: var(--ink-soft); }
.sim-dl dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sim-dl dd small { display: block; font-family: var(--body); font-weight: 500; font-size: .76rem; color: var(--ink-soft); }

.plan { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .8rem 2rem; counter-reset: p; }
.plan li { counter-increment: p; display: grid; grid-template-columns: 2.3rem 1fr; gap: .8rem; align-items: start; }
.plan li::before { content: counter(p); width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font: 700 1.05rem var(--display); background: var(--blue); color: var(--on-blue); }
.plan b { display: block; font-size: 1rem; margin-bottom: .1rem; line-height: 1.3; }
.plan span { color: var(--ink-soft); font-size: .93rem; line-height: 1.45; display: block; }
details.legal { color: var(--ink-soft); font-size: .9rem; border-top: 1px solid var(--line); padding-top: .5rem; }
details.legal summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 2.75rem; display: flex; align-items: center; font-size: 1rem; }
details.legal div { display: grid; gap: .6rem; max-width: 52rem; padding-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* Estrategia platicada, fechas, periodos y ligas */
.chat { display: grid; gap: .8rem; }
.msg { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .7rem; align-items: start; animation: entra .5s var(--ease) both; animation-delay: calc(var(--n, 0) * 70ms); }
.msg > img { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--surface-2); padding: .32rem; display: block; }
.burbuja { background: var(--surface-2); border-radius: .4rem 1.3rem 1.3rem 1.3rem; padding: .8rem 1.05rem; font-size: .97rem; line-height: 1.5; }
.burbuja .tema { display: block; font-family: var(--display); font-weight: 600; font-size: 1.02rem; margin-bottom: .25rem; }
.burbuja p + p { margin-top: .5rem; }
.fechas { display: grid; grid-template-columns: .8fr 1.5fr 1fr; gap: .6rem; }
@media (max-width: 480px) { .fechas { grid-template-columns: 1fr 1.4fr 1fr; gap: .4rem; } }
.sel { width: 100%; min-height: 3.75rem; border: 2px solid var(--line); border-radius: 1.2rem; background: var(--surface); color: var(--ink); font: 600 1.25rem var(--display); padding: 0 .9rem; cursor: pointer; }
.sel:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }
.texto { width: 100%; min-height: 3.75rem; border: 2px solid var(--line); border-radius: 1.2rem; background: var(--surface); color: var(--ink); font: 600 1.4rem var(--display); padding: 0 1.1rem; }
.texto:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 3px var(--glow-soft); }
.periodos { display: grid; gap: .6rem; margin-bottom: .6rem; }
.prow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; align-items: end; }
@media (max-width: 560px) { .prow { grid-template-columns: 1fr 1fr; } .prow .ps { grid-column: 1 / -1; } }
.prow label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: .2rem; }
.prow input { width: 100%; min-height: 3rem; border: 2px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--ink); font: 600 1rem var(--body); padding: 0 .7rem; }
.prow input:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 3px var(--glow-soft); }
.resumen-p { font-size: .95rem; color: var(--ink-soft); margin-bottom: .8rem; }
.ligas { display: grid; gap: .7rem; }
.liga { display: grid; gap: .15rem; }
.liga .btn { justify-content: space-between; text-align: left; width: 100%; min-height: 3rem; font-size: 1rem; padding: 0 1.1rem; }
.liga span { font-size: .84rem; color: var(--ink-soft); padding: 0 .4rem; }
.aviso-ligas { font-size: .85rem; color: var(--ink-soft); margin-top: .7rem; }
.sim-dl .ancho { grid-column: 1 / -1; }
.chip.nom { background: var(--glow-soft); color: var(--ink); }
.prow { grid-template-columns: 1fr 1fr 1fr; }
.par { display: grid; grid-template-columns: 1.3fr 1fr; gap: .35rem; }
.sel.chico { min-height: 3rem; font-size: 1rem; padding: 0 .5rem; border-radius: 1rem; font-family: var(--body); font-weight: 600; }
@media (max-width: 760px) { .prow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .prow { grid-template-columns: 1fr; } }

/* Acceso y suscripción */
.acceso h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: .6rem; }
.precio { display: flex; align-items: baseline; gap: .6rem; margin: .2rem 0 1.2rem; flex-wrap: wrap; }
.precio b { font: 700 clamp(2.6rem, 9vw, 3.8rem) var(--display); letter-spacing: -.04em; color: var(--blue); line-height: 1; }
.precio span { color: var(--ink-soft); font-weight: 600; }
.acepto { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: .2rem 0 1rem; font-size: .95rem; cursor: pointer; }
.acepto input { width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--blue); }
details.ya { margin: 1.2rem 0 0; }
.pie { max-width: 70rem; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .9rem; color: var(--ink-soft); }
.pie a { color: var(--ink-soft); }