/* =========================================================
   CARA PUBLICA: portada, temario, unidades, test y legales
   Lo que ve quien llega sin cuenta y lo que lee el buscador.  Todo va con
   prefijo `pt-` (y `pb-` en publico.css) para no pisar ninguna pieza de la
   aplicacion, que comparte index.html con la portada.

   La idea: una academia, no un folleto.  Papel blanco y gris muy claro para
   leer; azul para todo lo que se puede pulsar; azul marino para la
   navegacion y los bloques que destacan; verde solo para lo correcto y el
   avance; ambar solo para avisar.  Una sola familia tipografica, Manrope,
   en todas sus pesos: cabe en una descarga y se lee bien en el movil.

   Los estilos de elemento van dentro de :where(), que no pesa nada: asi una
   clase siempre gana a `h2` o a `p`.  Antes `.pt h2{margin:0}` pesaba mas
   que cualquier clase suelta y dejaba los titulos sin margen.
   ========================================================= */

:root{
  --pt-fondo:#F4F6FA;
  --pt-sup:#FFFFFF;
  --pt-sup-2:#F8FAFD;
  --pt-sup-3:#EEF2F8;
  --pt-linea:#E1E6EF;
  --pt-linea-2:#CBD4E2;

  --pt-tinta:#0F1A2E;
  --pt-tinta-2:#45516A;
  --pt-tinta-3:#5F6B82;

  --pt-azul:#1B4B91;          /* acciones y enlaces; el mismo de la aplicacion */
  --pt-azul-int:#153B73;
  --pt-azul-2:#E8EFFB;
  --pt-azul-3:#C9D9F3;
  --pt-marino:#0B1D38;        /* navegacion y bloques destacados */
  --pt-marino-2:#132A4D;
  --pt-luz:#F1F5FB;
  --pt-luz-2:#B5C3D9;

  --pt-sobre:#FFFFFF;
  --pt-ok:#13704D;  --pt-ok-2:#E2F3EA;
  --pt-mal:#A3312A; --pt-mal-2:#FBE9E6;
  --pt-ambar:#9A5B00; --pt-ambar-2:#FFF4DE; --pt-ambar-vivo:#F0A43A;

  --pt-sombra-1:0 1px 2px rgba(15,26,46,.05);
  --pt-sombra-2:0 1px 2px rgba(15,26,46,.05), 0 8px 24px -14px rgba(15,26,46,.22);
  --pt-sombra-3:0 2px 6px rgba(15,26,46,.07), 0 24px 48px -24px rgba(15,26,46,.32);

  --pt-r-s:8px; --pt-r:12px; --pt-r-l:16px; --pt-r-xl:22px;
  --pt-ui:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --pt-ancho:1200px;
  --pt-lado:clamp(16px,4vw,40px);
  --pt-cab-alto:68px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pt-fondo:#0B111C; --pt-sup:#121A27; --pt-sup-2:#151E2C; --pt-sup-3:#1B2636;
    --pt-linea:#26313F; --pt-linea-2:#33404F;
    --pt-tinta:#EAEFF6; --pt-tinta-2:#B3BDCC; --pt-tinta-3:#8E99AA;
    --pt-azul:#8DB4EE; --pt-azul-int:#A9C7F3; --pt-azul-2:#17253C; --pt-azul-3:#24395A;
    --pt-marino:#0E1A2D; --pt-marino-2:#16243B;
    --pt-ok:#6CC79C; --pt-ok-2:#10281F; --pt-mal:#E8907F; --pt-mal-2:#2B1613;
    --pt-ambar:#F0B25E; --pt-ambar-2:#2C2213; --pt-sobre:#0B111C;
    --pt-sombra-1:0 1px 2px rgba(0,0,0,.4);
    --pt-sombra-2:0 1px 3px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --pt-sombra-3:0 2px 6px rgba(0,0,0,.55), 0 22px 48px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --pt-fondo:#0B111C; --pt-sup:#121A27; --pt-sup-2:#151E2C; --pt-sup-3:#1B2636;
  --pt-linea:#26313F; --pt-linea-2:#33404F;
  --pt-tinta:#EAEFF6; --pt-tinta-2:#B3BDCC; --pt-tinta-3:#8E99AA;
  --pt-azul:#8DB4EE; --pt-azul-int:#A9C7F3; --pt-azul-2:#17253C; --pt-azul-3:#24395A;
  --pt-marino:#0E1A2D; --pt-marino-2:#16243B;
  --pt-ok:#6CC79C; --pt-ok-2:#10281F; --pt-mal:#E8907F; --pt-mal-2:#2B1613;
  --pt-ambar:#F0B25E; --pt-ambar-2:#2C2213; --pt-sobre:#0B111C;
  --pt-sombra-1:0 1px 2px rgba(0,0,0,.4);
  --pt-sombra-2:0 1px 3px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --pt-sombra-3:0 2px 6px rgba(0,0,0,.55), 0 22px 48px -20px rgba(0,0,0,.85);
}

/* ---- quien ve que ----
   La pagina lleva dentro la aplicacion y la portada.  Un guion en la
   cabecera marca `data-portada` antes de pintar nada si no hay sesion
   guardada, asi que quien ya tiene cuenta nunca ve la portada parpadear. */
#portada{display:none}
html[data-portada="1"] #portada{display:block}
html[data-portada="1"] #app{display:none}
html[data-portada="1"] body{background:var(--pt-fondo)}
html:not([data-portada="1"]) #gateVolver{display:none}
/* Con la puerta abierta, la portada queda detras de una capa opaca: se oculta
   tambien para el teclado y el lector de pantalla, que si no la recorrerian.
   visibility no mueve nada, asi que al volver sigue donde estaba. */
html[data-portada="1"] body:has(#gate:not([hidden])) #portada{visibility:hidden}
.gate-legal{margin:14px 0 0;font-size:.75rem;line-height:1.55;color:var(--gris)}
/* enlaces dentro de la frase: el area que se toca crece hacia arriba y abajo
   sin mover el texto, para llegar a los 44 px en el telefono */
.gate-legal a{color:var(--marca);font-weight:600;display:inline-block;padding-block:12px;margin-block:-12px}
.gate-volver{display:inline-flex;align-items:center;margin:-10px 0 16px;padding:0;font-weight:600}

/* con sesion guardada, la cabecera publica ofrece volver al panel en vez de
   entrar: lo marca el guion de la cabecera de cada pagina */
.pt-solo-sesion{display:none!important}
html[data-sesion="1"] .pt-solo-sesion{display:inline-flex!important}
html[data-sesion="1"] .pt-solo-anon{display:none!important}

/* ---- base ---- */
.pt{
  font-family:var(--pt-ui);color:var(--pt-tinta);background:var(--pt-fondo);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.pt *{box-sizing:border-box}
:where(.pt) a{color:var(--pt-azul);text-underline-offset:.18em}
:where(.pt) a:hover{color:var(--pt-azul-int)}
:where(.pt) h1,:where(.pt) h2,:where(.pt) h3,:where(.pt) h4{
  font-family:var(--pt-ui);color:var(--pt-tinta);letter-spacing:-.022em;line-height:1.18;margin:0;text-wrap:balance;
}
:where(.pt) h2{font-weight:800;font-size:clamp(1.65rem,1.2rem + 1.5vw,2.35rem)}
:where(.pt) h3{font-weight:700;font-size:1.125rem}
:where(.pt) p{margin:0}
.pt-envol{width:min(var(--pt-ancho),100%);margin:0 auto;padding-inline:var(--pt-lado)}
.pt-salta{
  position:absolute;left:-9999px;top:8px;z-index:100;background:var(--pt-azul);color:var(--pt-sobre)!important;
  padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none;
}
.pt-salta:focus{left:12px}
.pt :focus-visible{outline:2px solid var(--pt-azul);outline-offset:3px;border-radius:6px}
.pt-num{font-variant-numeric:tabular-nums}
.pt-visual-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- botones ---- */
.pt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 20px;border-radius:10px;border:1px solid transparent;
  font:700 .9375rem/1 var(--pt-ui);letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
  white-space:nowrap;
}
.pt-btn svg{width:18px;height:18px;flex:0 0 auto}
.pt-btn:active{transform:translateY(1px)}
.pt-btn--primario{background:var(--pt-azul);color:#fff!important;box-shadow:0 1px 2px rgba(15,26,46,.12)}
.pt-btn--primario:hover{background:var(--pt-azul-int);color:#fff}
.pt-btn--secundario{background:var(--pt-sup);color:var(--pt-tinta)!important;border-color:var(--pt-linea-2)}
.pt-btn--secundario:hover{border-color:var(--pt-azul);color:var(--pt-azul)!important}
.pt-btn--fantasma{background:transparent;color:var(--pt-azul)!important;padding-inline:12px}
.pt-btn--fantasma:hover{background:var(--pt-azul-2)}
/* sobre azul marino */
.pt-btn--claro{background:#fff;color:var(--pt-marino)!important}
.pt-btn--claro:hover{background:var(--pt-azul-2)}
.pt-btn--borde-claro{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.34)}
.pt-btn--borde-claro:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.pt-btn--chico{min-height:40px;padding:0 15px;font-size:.875rem;border-radius:9px}
.pt-btn--grande{min-height:52px;padding:0 24px;font-size:1rem}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pt-btn--primario{color:#0B111C!important}
  :root:not([data-theme="light"]) .pt-btn--primario:hover{color:#0B111C!important}
}
:root[data-theme="dark"] .pt-btn--primario,:root[data-theme="dark"] .pt-btn--primario:hover{color:#0B111C!important}

/* =========================================================
   CABECERA
   ========================================================= */
.pt-cab{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--pt-sup) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--pt-linea);
}
.pt-cab .pt-envol{display:flex;align-items:center;gap:18px;min-height:var(--pt-cab-alto)}
/* la cabecera aprovecha algo mas de ancho que el contenido: asi cabe el campo de busqueda entero */
@media (min-width:1440px){.pt-cab .pt-envol{width:min(1320px,100%)}.pt-busca--cab{flex:0 0 210px}}
.pt-marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--pt-tinta)!important;min-width:0;flex:0 0 auto}
.pt-marca img{width:36px;height:36px;border-radius:9px;flex:0 0 auto}
.pt-marca b{display:block;font-weight:800;font-size:.9375rem;letter-spacing:-.015em;line-height:1.15}
.pt-marca span span{display:block;font-size:.75rem;font-weight:700;color:var(--pt-tinta-3);letter-spacing:.08em;text-transform:uppercase}
.pt-menu{display:flex;gap:2px;margin-left:6px;flex:0 0 auto}
.pt-menu a{
  display:inline-flex;align-items:center;min-height:40px;
  color:var(--pt-tinta-2);text-decoration:none;font-size:.9rem;font-weight:600;
  padding:0 12px;border-radius:9px;white-space:nowrap;transition:color .15s,background-color .15s;
}
.pt-menu a:hover{color:var(--pt-marino);background:var(--pt-sup-3)}
.pt-menu a[aria-current="page"]{color:var(--pt-marino);background:var(--pt-azul-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pt-menu a:hover,:root:not([data-theme="light"]) .pt-menu a[aria-current="page"]{color:var(--pt-tinta)}}
:root[data-theme="dark"] .pt-menu a:hover,:root[data-theme="dark"] .pt-menu a[aria-current="page"]{color:var(--pt-tinta)}

/* buscador: va al indice del temario, que filtra unidades y epigrafes */
.pt-busca{position:relative;margin-left:auto;flex:0 1 240px;min-width:150px}
.pt-busca input{
  width:100%;min-height:40px;border-radius:10px;border:1px solid var(--pt-linea-2);background:var(--pt-sup-2);
  padding:0 12px 0 36px;font:500 .875rem var(--pt-ui);color:var(--pt-tinta);
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.pt-busca input::placeholder{color:var(--pt-tinta-3)}
.pt-busca input:focus{outline:none;border-color:var(--pt-azul);background:var(--pt-sup);box-shadow:0 0 0 3px var(--pt-azul-2)}
.pt-busca svg{position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--pt-tinta-3);pointer-events:none}
.pt-cab-acc{display:flex;gap:8px;align-items:center;flex:0 0 auto}

/* menu del telefono: un <details>, que se abre y se cierra sin guion y con teclado */
.pt-movil{display:none;position:relative}
.pt-movil summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  border:1px solid var(--pt-linea-2);background:var(--pt-sup);color:var(--pt-tinta);
}
.pt-movil summary::-webkit-details-marker{display:none}
.pt-movil summary svg{width:20px;height:20px}
.pt-movil summary .pt-cierra{display:none}
.pt-movil[open] summary .pt-abre{display:none}
.pt-movil[open] summary .pt-cierra{display:block}
.pt-movil-panel{
  position:absolute;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 2 * var(--pt-lado)));
  background:var(--pt-sup);border:1px solid var(--pt-linea);border-radius:var(--pt-r-l);box-shadow:var(--pt-sombra-3);
  padding:14px;display:flex;flex-direction:column;gap:6px;
}
.pt-movil-panel .pt-busca{margin:0 0 6px;flex:none;width:100%}
.pt-movil-panel .pt-busca input{min-height:44px}
.pt-movil-panel nav{display:flex;flex-direction:column}
.pt-movil-panel nav a{
  display:flex;align-items:center;min-height:46px;padding:0 12px;border-radius:10px;
  color:var(--pt-tinta);text-decoration:none;font-weight:600;
}
.pt-movil-panel nav a:hover,.pt-movil-panel nav a[aria-current="page"]{background:var(--pt-azul-2)}
.pt-movil-panel .pt-movil-acc{display:grid;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--pt-linea)}
.pt-movil-panel .pt-movil-acc .pt-btn{width:100%;min-height:46px}

/* el campo de busqueda solo cabe en pantallas anchas; antes queda la lupa */
.pt-busca-ic{display:none;place-items:center;width:40px;height:40px;margin-left:auto;border-radius:10px;color:var(--pt-tinta-2);flex:0 0 auto}
.pt-busca-ic:hover{background:var(--pt-sup-3);color:var(--pt-marino)}
.pt-busca-ic svg{width:19px;height:19px}
@media (max-width:1439px){.pt-busca--cab{display:none}.pt-busca-ic{display:grid}}
@media (max-width:1100px){
  .pt-menu,.pt-cab-acc .pt-entra,.pt-busca-ic{display:none!important}
  .pt-movil{display:block}
  .pt-cab-acc{margin-left:auto}
}
@media (max-width:520px){
  .pt-marca > span{display:none}
  /* el boton de crear cuenta se queda, mas corto */
  .pt-cab-acc .pt-registro-cab{min-height:44px;padding-inline:12px;white-space:nowrap}
  .pt-cab-acc .pt-largo{display:none}
}
/* la cabecera va fija arriba: un salto a una seccion deja su titulo a la vista */
#portada [id],.pt-legal-pagina [id]{scroll-margin-top:calc(var(--pt-cab-alto) + 16px)}

/* =========================================================
   PORTADA
   ========================================================= */
.pt-heroe{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1000px 520px at 90% -10%, var(--pt-azul-2), transparent 65%),
    linear-gradient(180deg,var(--pt-sup) 0%,var(--pt-fondo) 100%);
  border-bottom:1px solid var(--pt-linea);
}
.pt-heroe .pt-envol{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(44px,7vw,92px) clamp(48px,7vw,96px);
}
.pt-antetitulo{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px!important;line-height:1.35;
  font-size:.8125rem;font-weight:700;color:var(--pt-azul);
  background:var(--pt-azul-2);border-radius:999px;padding:6px 12px 6px 8px;
}
.pt-antetitulo i{width:8px;height:8px;border-radius:50%;background:var(--pt-azul);flex:none}
.pt-heroe h1{
  font-weight:800;font-size:clamp(2.2rem,1.3rem + 3.2vw,3.75rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 20px;
}
.pt-heroe h1 span{color:var(--pt-azul)}
.pt-entradilla{font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.62;color:var(--pt-tinta-2);max-width:36em;margin:0 0 30px!important}
.pt-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pt-cuenta-linea{margin:18px 0 0!important;font-size:.9375rem;color:var(--pt-tinta-2)}
.pt-cuenta-linea button,.pt-cuenta-linea a{
  display:inline;font:inherit;font-weight:700;color:var(--pt-azul);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em;
}
.pt-garantia{margin:22px 0 0!important;font-size:.875rem;color:var(--pt-tinta-2);display:flex;gap:8px 18px;flex-wrap:wrap}
.pt-garantia span{display:inline-flex;align-items:center;gap:7px}
.pt-garantia svg{width:16px;height:16px;color:var(--pt-ok)}

/* la escena: una unidad abierta, un test a medias y el avance.  Es dibujo: el
   lector de pantalla la salta y el texto de verdad esta a la izquierda */
.pt-escena{position:relative;min-height:540px}
.pt-tarjeta{
  position:absolute;border-radius:var(--pt-r-l);background:var(--pt-sup);color:var(--pt-tinta);
  border:1px solid var(--pt-linea);box-shadow:var(--pt-sombra-3);
}
.pt-t-cab{display:flex;justify-content:space-between;gap:10px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pt-azul)}
.pt-t-cab span:last-child{color:var(--pt-tinta-3)}
.pt-unidad{width:72%;right:0;top:0;padding:20px 22px 18px}
.pt-unidad h3{font-size:1.05rem;margin:10px 0 12px;line-height:1.25}
.pt-unidad ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pt-unidad li{display:flex;gap:10px;align-items:center;font-size:.8125rem;color:var(--pt-tinta-2);line-height:1.35}
.pt-unidad li i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1.6px solid var(--pt-linea-2)}
.pt-unidad li.hecho i{border-color:var(--pt-ok);background:var(--pt-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.pt-test{width:80%;left:0;top:200px;padding:20px 20px 18px}
.pt-barra-t{height:6px;border-radius:6px;background:var(--pt-sup-3);margin:12px 0 16px;overflow:hidden}
.pt-barra-t i{display:block;height:100%;width:35%;background:var(--pt-azul);border-radius:6px}
.pt-test .pt-q{font-size:1.02rem;line-height:1.38;font-weight:700;margin:0 0 12px!important;letter-spacing:-.01em}
.pt-ops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pt-ops li{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--pt-linea);font-size:.875rem;color:var(--pt-tinta-2);background:var(--pt-sup);
}
.pt-ops li span{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  font-weight:800;font-size:.75rem;background:var(--pt-sup-3);color:var(--pt-tinta-2);
}
.pt-ops li.pt-ok{border-color:var(--pt-ok);background:var(--pt-ok-2);color:var(--pt-tinta);font-weight:700}
.pt-ops li.pt-ok span{background:var(--pt-ok);color:var(--pt-sobre)}
.pt-porque{margin:12px 0 0!important;padding:10px 12px;border-radius:10px;background:var(--pt-sup-2);border:1px solid var(--pt-linea);font-size:.8125rem;color:var(--pt-tinta-2);line-height:1.5}
.pt-avance{
  position:absolute;right:4%;bottom:-8px;width:200px;padding:16px 18px;display:flex;gap:14px;align-items:center;
}
.pt-avance svg{width:54px;height:54px;flex:0 0 auto}
.pt-avance b{display:block;font-size:1.35rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.pt-avance small{display:block;font-size:.75rem;color:var(--pt-tinta-3);margin-top:4px;line-height:1.3}
@media (prefers-reduced-motion:no-preference){
  .pt-heroe .pt-texto > *{animation:pt-sube .6s cubic-bezier(.2,.7,.2,1) both}
  .pt-heroe .pt-texto > *:nth-child(2){animation-delay:.05s}
  .pt-heroe .pt-texto > *:nth-child(3){animation-delay:.1s}
  .pt-heroe .pt-texto > *:nth-child(4){animation-delay:.15s}
  .pt-heroe .pt-texto > *:nth-child(5){animation-delay:.2s}
  .pt-escena .pt-tarjeta{animation:pt-sube .7s cubic-bezier(.2,.7,.2,1) both}
  .pt-escena .pt-test{animation-delay:.12s}
  .pt-escena .pt-avance{animation-delay:.24s}
}
@keyframes pt-sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:920px){
  .pt-heroe .pt-envol{grid-template-columns:1fr}
  .pt-escena{height:auto;min-height:0;max-width:540px;width:100%;margin:0 auto}
  .pt-unidad,.pt-avance{display:none}
  .pt-test{position:relative;top:auto;left:auto;width:100%}
}
@media (max-width:480px){
  /* en el telefono la escena se queda en la tarjeta del test, sin solapes */
  .pt-escena{height:auto;min-height:0}
  .pt-unidad,.pt-avance{display:none}
  .pt-test{position:relative;top:auto;left:auto;width:100%}
  .pt-cta .pt-btn{flex:1 1 100%}
}

/* ---- cifras ---- */
.pt-cifras{background:var(--pt-sup);border-bottom:1px solid var(--pt-linea)}
.pt-cifras ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.pt-cifras li{padding:26px 18px 24px;border-left:1px solid var(--pt-linea)}
.pt-cifras li:first-child{border-left:0;padding-left:0}
.pt-cifras b{display:block;font-weight:800;font-size:clamp(1.55rem,1.1rem + 1.2vw,2.1rem);line-height:1;letter-spacing:-.03em;color:var(--pt-marino);font-variant-numeric:tabular-nums}
.pt-cifras span{display:block;margin-top:8px;font-size:.8125rem;color:var(--pt-tinta-2);line-height:1.35}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pt-cifras b{color:var(--pt-tinta)}}
:root[data-theme="dark"] .pt-cifras b{color:var(--pt-tinta)}
@media (max-width:860px){
  .pt-cifras ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pt-cifras li:nth-child(4){border-left:0;padding-left:0}
  .pt-cifras li:nth-child(n+4){border-top:1px solid var(--pt-linea)}
}
@media (max-width:520px){
  .pt-cifras ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-cifras li{padding:20px 12px}
  .pt-cifras li:nth-child(odd){border-left:0;padding-left:0}
  .pt-cifras li:nth-child(4){border-left:1px solid var(--pt-linea);padding-left:12px}
  .pt-cifras li:nth-child(n+3){border-top:1px solid var(--pt-linea)}
}

/* ---- secciones ---- */
.pt-seccion{padding-block:clamp(56px,8vw,104px)}
.pt-seccion + .pt-seccion{padding-top:0}
.pt-seccion-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 56px;align-items:end;margin-bottom:36px}
.pt-seccion-cab > p{color:var(--pt-tinta-2);font-size:1.0625rem;line-height:1.65;max-width:38em}
.pt-rotulo{
  font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pt-azul);margin:0 0 12px!important;
}
@media (max-width:820px){.pt-seccion-cab{grid-template-columns:1fr;align-items:start}}

/* ---- tarjetas comunes ---- */
.pt-tarj{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--pt-sup);border:1px solid var(--pt-linea);border-radius:var(--pt-r-l);
  padding:22px 22px 20px;box-shadow:var(--pt-sombra-1);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
a.pt-tarj,.pt-tarj--enlace{text-decoration:none;color:var(--pt-tinta)}
a.pt-tarj:hover,.pt-tarj--enlace:hover{border-color:var(--pt-azul-3);box-shadow:var(--pt-sombra-2);transform:translateY(-2px);color:var(--pt-tinta)}
.pt-tarj h3{font-size:1.0625rem;line-height:1.3}
.pt-tarj p{color:var(--pt-tinta-2);font-size:.9375rem;line-height:1.58}
.pt-ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--pt-azul-2);color:var(--pt-azul);
}
.pt-ic svg{width:22px;height:22px}
.pt-ic--ok{background:var(--pt-ok-2);color:var(--pt-ok)}
.pt-ic--ambar{background:var(--pt-ambar-2);color:var(--pt-ambar)}
.pt-tarj-ir{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;color:var(--pt-azul)}
.pt-tarj-ir svg{width:16px;height:16px;transition:transform .15s}
a.pt-tarj:hover .pt-tarj-ir svg{transform:translateX(3px)}
.pt-etiqueta{
  display:inline-flex;align-self:flex-start;align-items:center;gap:6px;
  font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--pt-sup-3);color:var(--pt-tinta-2);
}
.pt-etiqueta--cuenta{background:var(--pt-azul-2);color:var(--pt-azul)}
.pt-etiqueta--libre{background:var(--pt-ok-2);color:var(--pt-ok)}
button.pt-tarj{font:inherit;text-align:left;cursor:pointer;width:100%}

/* ---- accesos rapidos ---- */
.pt-accesos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pt-accesos .pt-tarj{flex-direction:row;align-items:flex-start;gap:16px}
.pt-accesos .pt-tarj > div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
@media (max-width:980px){.pt-accesos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pt-accesos{grid-template-columns:1fr}}

/* ---- explorar el temario ---- */
.pt-modulo-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:34px 0 14px}
.pt-modulo-cab:first-child{margin-top:0}
.pt-modulo-cab h3{font-size:1.25rem}
.pt-modulo-cab > span{font-size:.8125rem;font-weight:700;color:var(--pt-tinta-3);font-variant-numeric:tabular-nums}
.pt-cod{font-size:.75rem;font-weight:800;letter-spacing:.04em;color:var(--pt-azul);font-variant-numeric:tabular-nums}
.pt-manuales{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pt-man{padding:20px 20px 16px;gap:4px}
.pt-man header{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.pt-man h4{font-size:1rem;font-weight:700;line-height:1.3}
.pt-man ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--pt-linea)}
.pt-man li{border-bottom:1px solid var(--pt-linea)}
.pt-man li:last-child{border-bottom:0}
.pt-man li a{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:10px 4px;text-decoration:none;color:var(--pt-tinta);font-size:.9rem;line-height:1.4;border-radius:8px;
}
.pt-man li a:hover{background:var(--pt-sup-2);color:var(--pt-azul)}
.pt-man li a b{font-size:.75rem;font-weight:800;color:var(--pt-azul);font-variant-numeric:tabular-nums}
.pt-man li a em{font-style:normal;font-size:.75rem;color:var(--pt-tinta-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pt-man-pie{margin-top:auto;padding-top:12px}
@media (max-width:1020px){.pt-manuales{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pt-manuales{grid-template-columns:1fr}}
.pt-seccion-pie{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---- bloque destacado en azul marino: los tests ---- */
.pt-destacado{
  position:relative;overflow:hidden;background:var(--pt-marino);color:var(--pt-luz);
  border-radius:var(--pt-r-xl);padding:clamp(28px,5vw,56px);
}
.pt-destacado::after{
  content:"";position:absolute;right:-140px;top:-180px;width:520px;height:520px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(141,180,238,.18),transparent 65%);
}
.pt-destacado > *{position:relative}
.pt-destacado h2{color:#fff}
.pt-destacado .pt-rotulo{color:#A9C7F3}
.pt-destacado .pt-seccion-cab > p{color:var(--pt-luz-2)}
.pt-destacado .pt-seccion-cab > p a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.pt-tests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pt-tests .pt-tarj{background:var(--pt-marino-2);border-color:rgba(255,255,255,.1);box-shadow:none;color:var(--pt-luz)}
.pt-tests .pt-tarj h3{color:#fff}
.pt-tests .pt-tarj p,.pt-tests .pt-tarj li{color:var(--pt-luz-2)}
.pt-tests a.pt-tarj:hover,.pt-tests button.pt-tarj:hover{border-color:rgba(169,199,243,.55);transform:translateY(-2px)}
.pt-tests .pt-ic{background:rgba(141,180,238,.14);color:#A9C7F3}
.pt-tests .pt-tarj-ir{color:#fff}
.pt-tests ul{margin:2px 0 0;padding-left:18px;display:grid;gap:3px;font-size:.875rem;line-height:1.5}
.pt-tests .pt-etiqueta{background:rgba(255,255,255,.1);color:#fff}
.pt-tests .pt-etiqueta--libre{background:rgba(108,199,156,.18);color:#9FE0BF}
@media (max-width:980px){.pt-tests{grid-template-columns:1fr}}

/* ---- recursos ---- */
.pt-recursos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pt-recursos .pt-tarj--ancha{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px;align-items:center}
.pt-recursos .pt-tarj--ancha > div:first-child{display:flex;flex-direction:column;gap:10px}
/* los intervalos del repaso espaciado, dibujados */
.pt-intervalos{list-style:none;margin:0;padding:16px 16px 12px;border-radius:var(--pt-r);background:var(--pt-sup-2);border:1px solid var(--pt-linea)}
.pt-intervalos li{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;padding:5px 0}
.pt-intervalos span{font-weight:700;font-size:.75rem;color:var(--pt-tinta-2);font-variant-numeric:tabular-nums}
.pt-intervalos i{display:block;height:9px;border-radius:5px;background:var(--pt-azul)}
.pt-franja{
  margin-top:16px;display:flex;gap:14px 28px;align-items:center;flex-wrap:wrap;
  background:var(--pt-sup);border:1px solid var(--pt-linea);border-radius:var(--pt-r-l);padding:18px 22px;
}
.pt-franja p{flex:1 1 320px;color:var(--pt-tinta-2);font-size:.9375rem;line-height:1.6}
.pt-franja b{color:var(--pt-tinta)}
.pt-franja ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.pt-franja li{font-size:.8125rem;font-weight:700;padding:6px 11px;border-radius:999px;background:var(--pt-sup-3);color:var(--pt-tinta-2)}
@media (max-width:980px){
  .pt-recursos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-recursos .pt-tarj--ancha{grid-column:1/-1}
}
@media (max-width:640px){
  .pt-recursos{grid-template-columns:1fr}
  .pt-recursos .pt-tarj--ancha{grid-template-columns:1fr}
}

/* ---- lo que es y lo que no es ---- */
.pt-claro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--pt-linea);border-radius:var(--pt-r-l);overflow:hidden;background:var(--pt-sup)}
.pt-claro > div{padding:28px 28px 26px}
.pt-claro > div + div{border-left:1px solid var(--pt-linea);background:var(--pt-sup-2)}
.pt-claro h3{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px;font-weight:800}
.pt-claro .pt-si h3{color:var(--pt-ok)}
.pt-claro .pt-no h3{color:var(--pt-ambar)}
.pt-claro ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pt-claro li{position:relative;padding-left:30px;font-size:.9375rem;line-height:1.55;color:var(--pt-tinta-2)}
.pt-claro li b{color:var(--pt-tinta)}
.pt-claro li::before{position:absolute;left:0;top:.18em;width:20px;height:20px;border-radius:50%;font:800 11px/20px var(--pt-ui);text-align:center}
.pt-si li::before{content:"\2713";background:var(--pt-ok);color:var(--pt-sobre)}
.pt-no li::before{content:"!";background:var(--pt-ambar-2);color:var(--pt-ambar);box-shadow:inset 0 0 0 1.5px currentColor}
.pt-claro-pie{margin:14px 2px 0!important;font-size:.875rem;color:var(--pt-tinta-3)}
.pt-claro-pie a{font-weight:700}
@media (max-width:760px){
  .pt-claro{grid-template-columns:1fr}
  .pt-claro > div + div{border-left:0;border-top:1px solid var(--pt-linea)}
  .pt-claro > div{padding:22px 20px}
}

/* ---- preguntas frecuentes ---- */
.pt-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 64px;align-items:start}
.pt-faq > div:first-child p:not(.pt-rotulo){margin-top:14px;color:var(--pt-tinta-2)}
.pt-faq-lista{background:var(--pt-sup);border:1px solid var(--pt-linea);border-radius:var(--pt-r-l);padding:4px 22px}
.pt-faq details{border-bottom:1px solid var(--pt-linea)}
.pt-faq details:last-child{border-bottom:0}
.pt-faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:18px 0;min-height:44px;font-weight:700;font-size:1.0313rem;line-height:1.4;
}
.pt-faq summary::-webkit-details-marker{display:none}
.pt-faq summary::after{
  content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--pt-sup-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4B91' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .2s ease;
}
.pt-faq details[open] summary::after{transform:rotate(45deg)}
.pt-faq details p{margin:0 0 18px!important;padding-right:44px;color:var(--pt-tinta-2);line-height:1.68}
.pt-faq details p a{font-weight:700}
@media (max-width:820px){.pt-faq{grid-template-columns:1fr}.pt-faq details p{padding-right:0}}

/* ---- llamada final ---- */
.pt-final{
  position:relative;overflow:hidden;background:var(--pt-marino);color:var(--pt-luz);
  border-radius:var(--pt-r-xl);padding:clamp(30px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;
  gap:24px;align-items:center;
}
.pt-final::after{
  content:"";position:absolute;right:-120px;bottom:-200px;width:480px;height:480px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(141,180,238,.18),transparent 65%);
}
.pt-final > *{position:relative}
.pt-final h2{color:#fff}
.pt-final p{margin:12px 0 0!important;color:var(--pt-luz-2);max-width:36em}
@media (max-width:760px){.pt-final{grid-template-columns:1fr}}

/* =========================================================
   PIE
   ========================================================= */
.pt-pie{background:var(--pt-marino);color:var(--pt-luz-2);padding-block:52px 30px;margin-top:clamp(56px,8vw,104px)}
.pt-pie-rejilla{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.6fr));gap:32px}
.pt-pie .pt-marca{color:#fff!important;margin-bottom:14px}
.pt-pie .pt-marca span span{color:var(--pt-luz-2)}
.pt-pie p{font-size:.875rem;line-height:1.65;max-width:36em}
.pt-pie h2{margin:0 0 10px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-weight:800}
.pt-pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pt-pie ul a,.pt-pie ul button{
  display:inline-flex;align-items:center;min-height:36px;color:var(--pt-luz-2);text-decoration:none;font-size:.9rem;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left;
}
.pt-pie ul a:hover,.pt-pie ul button:hover{color:#fff;text-decoration:underline}
.pt-pie ul a[aria-current="page"]{color:#fff}
.pt-pie-base{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8125rem;
}
@media (max-width:860px){.pt-pie-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}.pt-pie-rejilla > div:first-child{grid-column:1/-1}}
@media (max-width:520px){.pt-pie-rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .pt-btn--chico{min-height:44px}
  .pt-marca{min-height:44px}
  .pt-pie ul a,.pt-pie ul button{min-height:44px}
  .pt-migas a{display:inline-flex;align-items:center;min-height:44px}
  .pt-legal nav a{padding-block:12px}
}

/* =========================================================
   CABECERA DE PAGINA INTERIOR (legales, temario, unidad, test)
   ========================================================= */
.pt-legal-cab{
  background:
    radial-gradient(900px 380px at 92% -40%, var(--pt-azul-2), transparent 65%),
    var(--pt-sup);
  border-bottom:1px solid var(--pt-linea);padding-block:clamp(28px,4vw,48px) clamp(30px,4vw,44px);
}
.pt-migas{font-size:.8125rem;font-weight:600;color:var(--pt-tinta-3);margin:0 0 16px!important}
.pt-migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.pt-migas li{display:inline-flex;align-items:center;gap:8px}
.pt-migas li + li::before{content:"/";color:var(--pt-linea-2)}
.pt-migas a{color:var(--pt-tinta-2);text-decoration:none;display:inline-block;padding-block:5px}
.pt-migas a:hover{color:var(--pt-azul);text-decoration:underline}
.pt-legal-cab h1{font-weight:800;font-size:clamp(1.95rem,1.4rem + 2vw,2.9rem);letter-spacing:-.03em;line-height:1.08;margin:0 0 14px}
.pt-legal-cab > .pt-envol > p:not(.pt-migas):not(.pb-rotulo):not(.pt-actualizado){color:var(--pt-tinta-2);max-width:46em;font-size:1.0625rem;line-height:1.62}
.pt-actualizado{font-size:.8125rem;font-weight:600;color:var(--pt-tinta-3);margin-top:16px!important}

/* ---- paginas legales ---- */
.pt-legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding-block:44px 0}
.pt-legal nav{position:sticky;top:calc(var(--pt-cab-alto) + 20px);align-self:start}
.pt-legal nav h2{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pt-tinta-3);margin:0 0 10px;font-weight:800}
.pt-legal nav ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--pt-linea)}
.pt-legal nav a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:.875rem;color:var(--pt-tinta-2);text-decoration:none;line-height:1.4}
.pt-legal nav a:hover{color:var(--pt-azul);border-left-color:var(--pt-azul)}
.pt-texto-legal{max-width:740px;min-width:0;background:var(--pt-sup);border:1px solid var(--pt-linea);border-radius:var(--pt-r-l);padding:clamp(22px,4vw,40px)}
.pt-texto-legal h2{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);margin:40px 0 12px;font-weight:800}
.pt-texto-legal h2:first-child{margin-top:0}
.pt-texto-legal h3{font-size:1.0625rem;font-weight:800;margin:26px 0 8px}
.pt-texto-legal p,.pt-texto-legal li{color:var(--pt-tinta-2);line-height:1.72;font-size:1rem}
.pt-texto-legal p{margin:0 0 14px}
.pt-texto-legal ul{margin:0 0 16px;padding-left:22px}
.pt-texto-legal li{margin:0 0 6px}
.pt-texto-legal b,.pt-texto-legal strong{color:var(--pt-tinta)}
.pt-texto-legal a{font-weight:600;overflow-wrap:anywhere}
.pt-faq a,.pt-pie a{overflow-wrap:anywhere}
.pt-texto-legal .pt-nota{
  background:var(--pt-ambar-2);border:1px solid color-mix(in srgb,var(--pt-ambar) 30%,transparent);border-left:4px solid var(--pt-ambar);
  border-radius:var(--pt-r);padding:16px 18px;margin:0 0 22px;
}
.pt-texto-legal .pt-nota p{color:var(--pt-tinta)}
.pt-texto-legal .pt-nota p:last-child{margin:0}
.pt-tabla{width:100%;overflow-x:auto;margin:0 0 18px;border:1px solid var(--pt-linea);border-radius:var(--pt-r)}
.pt-tabla table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:520px}
.pt-tabla th,.pt-tabla td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--pt-linea);line-height:1.5}
.pt-tabla tr:last-child td{border-bottom:0}
.pt-tabla th{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pt-tinta-3);font-weight:800;background:var(--pt-sup-2)}
.pt-tabla td{color:var(--pt-tinta-2)}
.pt-tabla td:first-child{color:var(--pt-tinta);font-weight:600}
@media (max-width:900px){
  .pt-legal{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:28px}
  .pt-legal nav{position:static;background:var(--pt-sup);border:1px solid var(--pt-linea);border-radius:var(--pt-r-l);padding:16px 18px}
}
.pt-legal-pagina .pt-pie{margin-top:72px}

/* ---- respeto por el movimiento reducido ---- */
@media (prefers-reduced-motion:reduce){
  .pt *,.pt *::before,.pt *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media print{
  .pt-cab,.pt-pie,.pt-legal nav{display:none!important}
  .pt-legal-cab{background:#fff;padding:0 0 10mm;border:0}
  .pt-legal-cab h1,.pt-legal-cab p{color:#000}
  .pt-legal{display:block;padding:0}
  .pt-texto-legal{border:0;padding:0}
}

/* ---- la 404 ---- */
.pt-busca--grande{margin:22px 0 0;max-width:520px;flex:none}
.pt-busca--grande input{min-height:50px;font-size:1rem;border-radius:12px;padding-left:42px;background:var(--pt-sup)}
.pt-busca--grande svg{left:14px;width:18px;height:18px}
.pt-accesos--404{margin-top:32px}
.pt-tarj-t{font-size:1.0625rem;font-weight:700;margin:0 0 4px}

/* ---- estados que faltaban ---- */
.pt-btn:disabled,.pt-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.pt-btn:focus-visible{outline:2px solid var(--pt-azul);outline-offset:3px}

/* ---- acabado (29-10-2026) ---- */
/* 2. los modulos de un solo manual comparten fila: cada tarjeta dice su modulo */
.pt-man-mod{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--pt-linea)}
.pt-man-mod h3{font-size:1.0625rem}
.pt-man-mod span{font-size:.8125rem;font-weight:700;color:var(--pt-tinta-3);font-variant-numeric:tabular-nums}
/* 3. icono y etiqueta en la misma fila */
.pt-tarj-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* 4. el escudo, sobre su placa blanca, se distingue en el azul marino */
.pt-pie .pt-marca img{background:#fff;padding:3px;border-radius:10px}