/* Por qué así — estilos del sitio. Misma paleta que las lecciones (plantilla.html),
   y como ellas sigue el modo claro u oscuro del sistema. */
:root {
  --fondo:#f4f6f9; --panel:#ffffff; --tinta:#1b2430; --tenue:#5f6b7a; --borde:#dfe4ea;
  --acento:#2563eb; --acento-tinta:#ffffff; --vx:#0d9488; --vy:#ea580c;
  --suave:color-mix(in srgb, var(--acento) 8%, var(--panel));
  --ancho:1120px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo:#0f141b; --panel:#171e28; --tinta:#e8edf3; --tenue:#98a4b3; --borde:#28323f;
          --acento:#6aa5ff; --acento-tinta:#0b1220; --vx:#3ecfc0; --vy:#ff9a57; }
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body { margin:0; background:var(--fondo); color:var(--tinta); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
       font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased }
img, svg { max-width:100% }
a { color:var(--acento); text-underline-offset:3px }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline:2px solid var(--acento); outline-offset:3px; border-radius:6px }
.ancho { max-width:var(--ancho); margin:0 auto; padding:0 20px }
.salto { position:absolute; left:-9999px }
.salto:focus { left:12px; top:12px; background:var(--panel); padding:8px 12px; border-radius:8px; z-index:10 }

/* Cabecera */
.cab { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--borde) }
.cab .ancho { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:76px }
.marca { display:inline-flex; align-items:center; gap:10px; font-weight:750; font-size:27px; letter-spacing:-.03em; color:var(--tinta); text-decoration:none; white-space:nowrap }
.marca svg { width:44px; height:44px; flex:none }
.cab nav { display:flex; align-items:center; gap:4px }
.cab nav a { color:var(--tenue); text-decoration:none; font-size:15px; font-weight:500; padding:8px 10px; border-radius:8px }
.cab nav a:hover, .cab nav a[aria-current] { color:var(--tinta) }
.cab nav a[aria-current] { background:var(--panel); box-shadow:inset 0 0 0 1px var(--borde) }
@media (max-width:860px) { .cab nav a.opc { display:none } }
@media (max-width:520px) { .cab .ancho { min-height:64px; gap:8px; padding:0 14px } .marca { font-size:21px; gap:8px } .marca svg { width:34px; height:34px } .cab nav { gap:0 } .cab nav a { padding:8px 6px; font-size:14px } }
/* En pantallas estrechas el menú no cabe junto a la marca: baja a una segunda fila y se desplaza de lado dentro de
   ella (antes ensanchaba toda la página). El borde derecho se difumina para indicar que sigue. */
@media (max-width:700px) {
  .cab .ancho { flex-wrap:wrap; row-gap:0; padding-top:8px }
  .cab .ancho { min-height:0 }
  .cab nav { width:100%; overflow-x:auto; scrollbar-width:none; white-space:nowrap; margin:0 -6px; padding:2px 0 8px;
    -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent) }
  .cab nav::-webkit-scrollbar { display:none }
  .cab nav a { flex:none }
}

/* Tipografía */
h1, h2, h3 { letter-spacing:-.02em; line-height:1.15; text-wrap:balance; margin:0 }
h1 { font-size:clamp(32px, 5.4vw, 52px); font-weight:700 }
h2 { font-size:clamp(24px, 3.4vw, 32px); font-weight:650 }
h3 { font-size:19px; font-weight:650; line-height:1.3 }
p { margin:0 0 1em; text-wrap:pretty }
.entrada { font-size:clamp(18px, 2.2vw, 21px); color:var(--tenue); max-width:58ch }
.rotulo { font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--tenue); margin:0 0 10px }
.tenue { color:var(--tenue) }

/* Botones */
.boton { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:16px; font-weight:600; padding:12px 20px; border-radius:999px;
         border:1px solid var(--acento); background:var(--acento); color:var(--acento-tinta); text-decoration:none; cursor:pointer }
.boton:hover { filter:brightness(1.08) }
.boton.sec { background:transparent; color:var(--acento); border-color:var(--borde) }
.boton.sec:hover { border-color:var(--acento); filter:none }
.botones { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }

/* Secciones */
section { padding:64px 0 }
section + section { border-top:1px solid var(--borde) }
.cabsec { max-width:62ch; margin-bottom:32px }
.cabsec p { color:var(--tenue); margin:12px 0 0 }
@media (max-width:640px) { section { padding:44px 0 } }

/* Portada: cabecera principal */
.heroe { padding:56px 0 64px }
.heroe .ancho { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center }
.heroe h1 em { font-style:normal; color:var(--acento) }
.heroe .entrada { margin-top:18px }
.nota-heroe { margin-top:18px; font-size:14px; color:var(--tenue) }
@media (max-width:900px) { .heroe { padding:36px 0 44px } .heroe .ancho { grid-template-columns:minmax(0,1fr); gap:32px } }

/* Maqueta de la lección en la portada */
.heroe .ancho > * { min-width:0 }
.maqueta { background:var(--panel); border:1px solid var(--borde); border-radius:16px; padding:14px; box-shadow:0 20px 50px -30px rgba(15,25,45,.35) }
.maqueta .pest { display:flex; gap:6px; margin-bottom:10px; overflow:hidden }
.maqueta .pest span { font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--borde); color:var(--tenue); white-space:nowrap }
.maqueta .pest span.actual { background:var(--acento); border-color:var(--acento); color:var(--acento-tinta); font-weight:600 }
.maqueta .preg { font-size:16px; font-weight:650; margin:0 0 6px }
.maqueta svg { display:block; width:100%; height:auto }
.maqueta svg text { font-family:inherit; font-size:13px; fill:var(--tenue) }
.maqueta .eje { stroke:var(--tenue); stroke-width:1.5 }
.maqueta .tray { stroke:var(--tenue); stroke-width:1.5; stroke-dasharray:5 6; fill:none }
.maqueta .balon { fill:var(--acento) }
.maqueta .vx { stroke:var(--vx); fill:var(--vx) } .maqueta .vy { stroke:var(--vy); fill:var(--vy) }
.maqueta .tvx { fill:var(--vx); font-weight:600 } .maqueta .tvy { fill:var(--vy); font-weight:600 }
.maqueta .movil { offset-path:path('M70 200 Q 240 -90 410 200'); offset-rotate:0deg; animation:vuelo 5s cubic-bezier(.4,.1,.6,.9) infinite }
@keyframes vuelo { 0% { offset-distance:0% } 80%, 100% { offset-distance:100% } }
@media (prefers-reduced-motion: reduce) { .maqueta .movil { animation:none; offset-distance:38% } html { scroll-behavior:auto } }
.dialogo { border-top:1px solid var(--borde); margin-top:10px; padding-top:12px; display:grid; gap:10px; font-size:14.5px; line-height:1.45 }
.dialogo div { display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start }
.dialogo i { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:700; color:#fff; background:var(--vy) }
.dialogo div + div i { background:var(--acento); color:var(--acento-tinta) }
.dialogo b { font-weight:650 }

/* Rejillas y tarjetas */
.tres { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px }
.dos { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px }
@media (max-width:900px) { .tres { grid-template-columns:minmax(0,1fr) } }
@media (max-width:700px) { .dos { grid-template-columns:minmax(0,1fr) } }
.caja { background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:22px }
.caja h3 { margin-bottom:8px }
.caja p:last-child { margin-bottom:0 }
.caja p { color:var(--tenue); font-size:16px }
.icono { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--suave); color:var(--acento); margin-bottom:14px }
.icono svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

.pasos { counter-reset:paso; list-style:none; padding:0; margin:0; display:grid; gap:14px }
.pasos li { counter-increment:paso; display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start }
.pasos li::before { content:counter(paso); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:15px; background:var(--suave); color:var(--acento) }
.pasos b { display:block; font-weight:650 }
.pasos span { color:var(--tenue); font-size:16px }

/* Tarjeta de lección */
.lecciones { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:18px }
.leccion { position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:20px; transition:border-color .15s, transform .15s }
.leccion:has(a):hover { border-color:var(--acento); transform:translateY(-2px) }
.leccion .etq { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px }
.etq span { font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--suave); color:var(--acento) }
.etq span.gris { background:transparent; color:var(--tenue); box-shadow:inset 0 0 0 1px var(--borde) }
.etq span.libre { background:color-mix(in srgb, var(--vx) 14%, var(--panel)); color:var(--vx) }
.leccion h3 a { color:inherit; text-decoration:none }
.leccion h3 a::after { content:''; position:absolute; inset:0; border-radius:14px }
.leccion p { color:var(--tenue); font-size:15px; margin:8px 0 14px; flex:1 }
.leccion .pie { font-size:13px; color:var(--tenue); display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--borde); padding-top:12px }
.leccion .pie b { color:var(--acento); font-weight:600 }
.leccion.prep { border-style:dashed; background:transparent }

/* Catálogo */
.pagcab { padding:44px 0 28px }
.pagcab p { margin-top:12px }
.migas { font-size:14px; color:var(--tenue); margin-bottom:14px }
.migas a { color:var(--tenue) }
.filtros { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:0 0 8px; padding:16px; background:var(--panel); border:1px solid var(--borde); border-radius:14px }
.filtros label { display:grid; gap:4px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); flex:1; min-width:150px }
.filtros select { font:inherit; font-size:16px; padding:9px 10px; border-radius:8px; border:1px solid var(--borde); background:var(--fondo); color:var(--tinta); width:100% }
.filtros output { font-size:14px; color:var(--tenue); flex-basis:100% }
.grupo { padding:28px 0 8px }
.grupo > h2 { font-size:24px }
.grupo .conv { color:var(--tenue); font-size:15px; margin:4px 0 0 }
/* Índice de materias (listado en inglés): salta al bloque de cada una */
.materias { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px }
.materias a { font-size:14px; font-weight:550; padding:7px 12px; border-radius:999px; text-decoration:none; color:var(--tinta);
  background:var(--panel); border:1px solid var(--borde) }
.materias a:hover { border-color:var(--acento); color:var(--acento) }
.materias a span { color:var(--tenue); font-weight:400; margin-left:2px }
[data-bloque][id] { scroll-margin-top:96px }
.grupo h3.asig { font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--tenue); margin:24px 0 12px }
.fuente { font-size:14px; color:var(--tenue); margin:18px 0 0; padding-left:12px; border-left:3px solid var(--borde) }
[hidden] { display:none !important }

/* Página de lección */
.lec-cab h1 { font-size:clamp(28px, 4.4vw, 40px) }
.lec-cab .entrada { margin-top:10px; font-size:18px }
.lec-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.visor { margin:8px 0 12px }
.visor iframe { display:block; width:100%; height:900px; border:0; background:transparent; color-scheme:light } /* igual que el documento de la lección: si difieren, el navegador pinta el marco opaco en modo oscuro */
.visor-pie { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; font-size:14px; color:var(--tenue); margin-bottom:36px }
@media (max-width:640px) { .visor { margin-left:-8px; margin-right:-8px } }
.enunciado { font-size:16px }
.enunciado p { color:var(--tinta) }
.enunciado cite { display:block; font-style:normal; font-size:14px; color:var(--tenue); border-top:1px solid var(--borde); margin-top:14px; padding-top:12px }
.indice { list-style:none; counter-reset:c; padding:0; margin:0; display:grid; gap:10px }
.indice li { counter-increment:c; display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:baseline; font-size:16px }
.indice li::before { content:counter(c); font-size:13px; font-weight:700; color:var(--acento) }
.indice time { font-size:13px; color:var(--tenue); font-variant-numeric:tabular-nums }
.katex { font-size:1.05em }
.katex-display { overflow-x:auto; overflow-y:hidden; margin:.6em 0 }

/* Llamada final y pie */
.llamada { text-align:center }
.llamada .caja { padding:40px 24px; background:var(--suave) }
.llamada p { max-width:56ch; margin:12px auto 0; color:var(--tenue) }
.llamada .botones { justify-content:center }
.pendiente { display:inline-block; font-size:14px; padding:8px 12px; border-radius:8px; border:1px dashed var(--vy); color:var(--vy) }
footer { border-top:1px solid var(--borde); padding:36px 0 48px; font-size:14px; color:var(--tenue) }
footer .ancho { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:28px }
footer h4 { font-size:12px; text-transform:uppercase; letter-spacing:.12em; margin:0 0 10px; color:var(--tinta) }
footer ul { list-style:none; padding:0; margin:0; display:grid; gap:6px }
footer a { color:var(--tenue) }
footer p { margin:0 0 .7em; max-width:52ch }
@media (max-width:760px) { footer .ancho { grid-template-columns:minmax(0,1fr) } }

/* Páginas legales */
.prosa { max-width:72ch; padding-bottom:56px }
.prosa h2 { font-size:22px; margin:34px 0 10px }
.prosa ul { padding-left:1.2em }
.prosa li { margin-bottom:.4em }
.borrador { border:1px dashed var(--vy); background:color-mix(in srgb, var(--vy) 9%, var(--panel)); color:var(--tinta); border-radius:12px; padding:14px 16px; font-size:15px; margin:0 0 24px }
.borrador b { color:var(--vy) }
mark { background:color-mix(in srgb, var(--vy) 22%, transparent); color:inherit; padding:0 3px; border-radius:3px }

/* Fondo de estilo científico (portada y cabeceras): mosaico SVG con ecuaciones, tenue y detrás del contenido */
.banda { position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--borde);
  background:
    radial-gradient(55% 90% at 88% 0%, color-mix(in srgb, var(--acento) 15%, transparent), transparent 70%),
    radial-gradient(45% 80% at 0% 100%, color-mix(in srgb, var(--vx) 10%, transparent), transparent 70%),
    var(--fondo) }
.banda > .ancho { position:relative; z-index:1 }
.fondo { position:absolute; inset:0; z-index:0; pointer-events:none }
.fondo text { font-family:'STIX Two Math','Cambria Math','Times New Roman',Georgia,serif; font-style:italic; fill:var(--tinta); fill-opacity:.30 }
.fondo text.fa { fill:var(--acento); fill-opacity:.62 }
.fondo text.fl { font-size:13px; fill-opacity:.42; stroke:none }
.fondo .ft { fill:none; stroke:var(--tinta); stroke-opacity:.34; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round }
.fondo .fh { fill:var(--tinta); fill-opacity:.34; stroke:none }
.fondo .fc { stroke-width:2; stroke-opacity:.6 }
.fondo .ca { stroke:var(--acento) } .fondo .cx { stroke:var(--vx) } .fondo .cy { stroke:var(--vy) }
.fondo .fh.ca { fill:var(--acento); fill-opacity:.6 } .fondo .fh.cx { fill:var(--vx); fill-opacity:.6 } .fondo .fh.cy { fill:var(--vy); fill-opacity:.6 }
.fondo .fp { fill:var(--tinta); fill-opacity:.45; stroke:none } .fondo .fp.ca { fill:var(--acento); fill-opacity:.7 }
.fondo .fr { fill:var(--acento); fill-opacity:.13; stroke:none }
.fondo .fd { stroke-dasharray:5 5 }
/* El motivo sigue, muy atenuado, por el resto de la página: detrás del contenido y sin velo, por eso tan tenue */
main { position:relative; isolation:isolate }
main > * { position:relative; z-index:1 }
main > .fondo-pagina { position:absolute; z-index:0; opacity:.24 }
/* Velo: bajo los bloques de texto el fondo queda casi tapado, para que el motivo no pase por detrás de las letras */
.velo, .banda .pagcab { position:relative }
.velo::before, .banda .pagcab::before { content:''; position:absolute; inset:-6px -14px; z-index:-1; border-radius:18px;
  background:color-mix(in srgb, var(--fondo) 93%, transparent); box-shadow:0 0 22px 18px color-mix(in srgb, var(--fondo) 93%, transparent) }
.banda .pagcab { width:fit-content; max-width:min(100%, 780px); margin:40px 0 38px; padding:0 }
.banda .pagcab .entrada { max-width:64ch }
.heroe.banda { border-bottom:1px solid var(--borde) }
.heroe.banda + section { border-top:0 }

/* Planes */
.planes { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin-top:8px }
@media (max-width:1040px) { .planes { grid-template-columns:repeat(3, minmax(0,1fr)) } .planes .plan:last-child:nth-child(3n+2) { grid-column:span 2 } }
@media (max-width:640px) { .planes { grid-template-columns:minmax(0,1fr) } .planes.compacto { grid-template-columns:repeat(2, minmax(0,1fr)) } .planes .plan:last-child:nth-child(3n+2) { grid-column:auto } .planes.compacto .plan:last-child:nth-child(odd) { grid-column:span 2 } .plan .res { min-height:0 } }
.plan { position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:22px 20px }
.plan.destacado { border-color:var(--acento); box-shadow:0 0 0 1px var(--acento) }
.plan .cinta { position:absolute; top:-11px; left:18px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px; background:var(--acento); color:var(--acento-tinta) }
.plan .res { color:var(--tenue); font-size:15px; margin:6px 0 14px; min-height:2.9em }
.plan .precio { margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px }
.plan .precio b { font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.plan .precio span { font-size:14px; color:var(--tenue) }
.plan ul { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:8px; font-size:15px; flex:1 }
.plan li { padding-left:22px; position:relative }
.plan li::before { content:''; position:absolute; left:2px; top:.5em; width:10px; height:5px; border-left:2px solid var(--vx); border-bottom:2px solid var(--vx); transform:rotate(-45deg) }
.plan .boton { justify-content:center; padding:10px 14px; font-size:15px }
.planes.compacto .plan { padding:18px }
.planes.compacto .plan .precio { margin:0 }
.planes.compacto .plan .res { min-height:0 }
.aviso-precios { font-size:14px; color:var(--tenue); margin:22px 0 18px; padding:10px 14px; border-left:3px solid var(--vy); background:color-mix(in srgb, var(--vy) 7%, transparent); border-radius:0 8px 8px 0; max-width:80ch }
.lista { padding-left:1.2em; margin:0; display:grid; gap:10px; color:var(--tinta) }

/* Autor */
.autor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:20px 32px; align-items:center }
.autor .titulos { display:flex; flex-wrap:wrap; gap:8px }
.autor .titulos span { font-size:17px; font-weight:650; padding:8px 16px; border-radius:999px; background:var(--suave); color:var(--acento) }
.autor h3 { margin-bottom:6px }
@media (max-width:700px) { .autor { grid-template-columns:minmax(0,1fr) } }

/* Versión universitaria */
.uni .caja { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; padding:28px; border-style:dashed; border-color:var(--acento) }
.uni .caja p:last-child { margin:8px 0 0 }
.uni h2 { font-size:clamp(22px, 3vw, 28px) }

.visor-pie .acciones { display:flex; flex-wrap:wrap; gap:6px 18px }
a.enlace { color:var(--tenue) }
.autor .grados { list-style:none; padding:0; margin:0; display:grid; gap:12px }
.autor .grados li { padding-left:14px; border-left:3px solid var(--acento) }
.autor .grados b { display:block; font-weight:650; font-size:17px; line-height:1.3 }
.autor .grados span { font-size:14px; color:var(--tenue) }
/* En móvil el texto ocupa todo el ancho: el motivo se deja ver entero en una franja libre bajo el texto
   y tapado del todo (velo opaco) detrás de él */
@media (max-width:900px) {
  .fondo { opacity:1 }
  .velo::before, .banda .pagcab::before { background:var(--fondo); box-shadow:0 0 10px 8px var(--fondo) }
  .banda .pagcab { margin:30px 0 104px }
  .heroe .ancho { gap:96px }
}
.autor h3 { font-size:22px; margin-bottom:14px }

/* Precios por petición */
.planes.tres-planes { grid-template-columns:repeat(3, minmax(0,1fr)) }
@media (max-width:900px) { .planes.tres-planes, .planes.tres-planes.compacto { grid-template-columns:minmax(0,1fr) } .planes.tres-planes .plan:last-child { grid-column:auto } }
.plan .cinta.gris { background:var(--panel); color:var(--tenue); box-shadow:inset 0 0 0 1px var(--borde) }
.tarifa { width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px; flex:1 }
.tarifa th { text-align:left; font-weight:500; padding:8px 0; border-top:1px solid var(--borde) }
.tarifa th small { display:block; font-size:13px; font-weight:400; color:var(--tenue) }
.tarifa td { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; padding:8px 0; border-top:1px solid var(--borde); white-space:nowrap; vertical-align:top }
.planes.compacto .tarifa { margin:10px 0 0; font-size:14px }
.tarifa.recargas { margin:6px 0 8px } .tarifa.recargas tr:first-child th { font-size:13px; color:var(--tenue); border-top:0; font-weight:600 } .tarifa.recargas th + th, .tarifa.recargas td { text-align:right; font-weight:500 }

/* Recarga de saldo (PayPal) */
.recarga { margin-top:18px; max-width:520px }
.recarga h3 { margin-bottom:12px }
.recarga-prueba { font-size:13px; color:var(--vy); border:1px dashed var(--vy); border-radius:8px; padding:6px 10px }
.recarga-campo { display:grid; gap:4px; font-size:13px; font-weight:600; color:var(--tenue) }
.recarga-campo input { font:inherit; font-size:16px; font-weight:400; padding:10px 12px; border-radius:8px; border:1px solid var(--borde); background:var(--fondo); color:var(--tinta) }
.recarga-nota { font-size:13px; color:var(--tenue); margin:6px 0 14px }
.recarga-importes { border:0; padding:0; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:8px }
.recarga-importes legend { font-size:13px; font-weight:600; color:var(--tenue); padding:0; margin-bottom:6px }
.recarga-importes label { cursor:pointer }
.recarga-importes input { position:absolute; opacity:0 }
.recarga-importes span { display:inline-block; padding:10px 18px; border-radius:999px; border:1px solid var(--borde); font-weight:650; font-variant-numeric:tabular-nums }
.recarga-importes input:checked + span { background:var(--acento); border-color:var(--acento); color:var(--acento-tinta) }
.recarga-importes input:focus-visible + span { outline:2px solid var(--acento); outline-offset:3px }
.recarga-acepto { display:flex; gap:8px; align-items:flex-start; font-size:14px; color:var(--tenue); margin-bottom:14px }
.recarga-acepto input { margin-top:4px; accent-color:var(--acento) }
.recarga-botones { min-height:48px; max-width:360px }
.recarga-botones.apagado { opacity:.45; pointer-events:none }
.recarga-mensaje { font-size:15px; margin:10px 0 0 }
.recarga-mensaje.bien { color:var(--vx); font-weight:600 }
.recarga-mensaje.mal { color:var(--vy); font-weight:600 }

/* Consulta de saldo */
.saldo { max-width:640px }
.saldo .saldo-correo { font-size:14px; color:var(--tenue); margin:0 0 2px; overflow-wrap:anywhere }
.saldo .saldo-cifra { font-size:40px; font-weight:750; letter-spacing:-.02em; margin:0 0 10px; font-variant-numeric:tabular-nums }
.saldo .saldo-cifra small { font-size:15px; font-weight:500; color:var(--tenue); letter-spacing:0 }
.saldo-desliza { overflow-x:auto; margin:14px 0 }
.saldo-tabla { width:100%; border-collapse:collapse; font-size:15px }
.saldo-tabla th { text-align:left; font-size:12px; font-weight:650; color:var(--tenue); text-transform:uppercase; letter-spacing:.04em; padding:6px 8px; border-bottom:1px solid var(--borde) }
.saldo-tabla td { padding:9px 8px; border-bottom:1px solid var(--borde); vertical-align:top }
.saldo-tabla th:last-child, .saldo-tabla td.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.saldo-tabla td:first-child { white-space:nowrap; color:var(--tenue) }
.saldo-tabla .mov-recarga td.num { color:var(--vx); font-weight:600 }
.saldo-tabla .mov-pendiente td { color:var(--tenue) }
.saldo-form { display:grid; gap:12px; max-width:380px; margin-top:12px }
.saldo-form .boton { justify-self:start }
.recarga-enlace { font-size:14px; color:var(--tenue); margin:8px 0 0 }
.recarga-ya { margin:14px 0 0 }

/* Asignaturas */
.documentos { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:18px; margin-bottom:18px }
.documento { display:flex; flex-direction:column }
.documento p { flex:0 }
.documento .botones { margin-top:auto; padding-top:14px; display:flex; flex-wrap:wrap; gap:10px }
.pagcab .etq { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px }

/* Mi saldo: material de asignaturas */
.saldo-material { border-top:1px solid var(--borde); margin-top:18px; padding-top:16px }
.saldo-material h3 { margin-bottom:10px }
.saldo-asig { padding:12px 0; border-bottom:1px solid var(--borde) }
.saldo-asig:last-child { border-bottom:0 }
.saldo-acciones { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.saldo-acciones .boton { font-size:14px; padding:8px 14px }
.saldo-confirma { margin-top:10px; padding:12px; border:1px solid var(--borde); border-radius:10px; background:var(--fondo); display:flex; flex-wrap:wrap; gap:8px }
.saldo-confirma p { flex-basis:100%; margin:0 0 4px }
.saldo-confirma .boton { font-size:14px; padding:8px 14px }

/* Nivel de explicación */
.cerebros { display:inline-flex; align-items:center; gap:2px; white-space:nowrap; vertical-align:middle }
.cerebros svg { width:14px; height:14px; flex:none }
h3 .cerebros svg { width:18px; height:18px }
.etq span.cerebros { padding:3px 7px }
.leyenda-cerebros { margin:0 0 14px }


/* Portada: las tres líneas */
.linea { display:flex; flex-direction:column }
.linea p:not(.rotulo) { flex:1 }
.linea .boton { align-self:flex-start; margin-top:14px }
.linea .rotulo { color:var(--acento); margin-bottom:6px }