/* Marca compartida con vivienda: tinta, coral y grises fríos. Solo esta copia. */
:root{--tinta:#12122d;--tinta-2:#4a4963;--tinta-3:#8e8ca3;--filete:#dcdce4;--fondo:#f6f6f8;--blanco:#fff;--coral:#ff4848;--coral-ilustracion:#e56c68;--suave:#f1f1f5;--barra:64px}
html{background:var(--fondo);scroll-behavior:auto;overflow-anchor:none}   /* al abrir un tema, la página no se mueve sola */
body{font-family:Inter,Arial,sans-serif}
header.barra{padding:0 24px;background:var(--fondo);border-bottom:1px solid var(--filete);grid-template-columns:1fr auto 1fr}
header.barra img{height:23px}
header.barra .ceja{font:400 11px/1.4 Inter,Arial,sans-serif;letter-spacing:.13em}
header.barra .derecha{gap:18px}
.aviso{background:none;color:var(--tinta-2);padding:0;font:400 10px/1.4 Inter,Arial,sans-serif;letter-spacing:.08em}
.boton{font:500 11px/1 Outfit,Arial,sans-serif;letter-spacing:.18em;border-radius:8px;padding:0 15px}
.boton.lleno{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.pieza{grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:0;padding:0}
.hueco{top:var(--barra);height:calc(100svh - var(--barra));margin:0}
.lamina{border:0;border-radius:0;background:var(--fondo)}
.texto{position:relative;padding:0 36px 25vh 42px;min-width:0}
.fases{position:sticky;top:var(--barra);z-index:8;display:flex;gap:0;background:var(--fondo);border-bottom:1px solid var(--filete);padding:0}
.fases button{display:flex;align-items:center;gap:7px;flex:1;justify-content:center;font:500 11px/1.4 Outfit,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:24px 4px 22px;margin-bottom:-1px;border:0;background:transparent;color:var(--tinta-2);cursor:pointer}
.fases button span{font:400 10px/1.4 'IBM Plex Mono',monospace;color:var(--tinta-3)}
.fases button[aria-pressed=true]{color:var(--tinta)}
.fases button[aria-pressed=true] span{color:var(--tinta)}
.fases button:hover{color:var(--coral)}
.paso{padding:100px 0 70px;min-height:100svh}
.paso:first-of-type{padding-top:40px;min-height:110svh}
.ceja{font:500 10px/1.5 Outfit,Arial,sans-serif;letter-spacing:.22em;color:var(--tinta-2)}
h1.pregunta{font:400 clamp(44px,4.5vw,76px)/1 'Bebas Neue',Arial,sans-serif;letter-spacing:.01em;margin-top:22px;max-width:9em;text-wrap:balance}
h2,.parte b{font:400 clamp(38px,3.4vw,54px)/1.02 'Bebas Neue',Arial,sans-serif;letter-spacing:.01em;text-wrap:balance}
.entrada{font:400 15px/1.7 Inter,Arial,sans-serif;margin-top:24px;color:var(--tinta-2)}
.paso:first-of-type .entrada{font-size:15px;line-height:1.7;margin-top:26px}
.paso p.cuerpo{font-size:12px;line-height:1.65;color:var(--tinta-3);margin-top:18px}
.cifras{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:36px}
.cifras b{font:400 31px/1.1 Inter,Arial,sans-serif;letter-spacing:-.06em}
.cifras span{font-size:9px;letter-spacing:.06em}
.cifras.con-lineas{border-bottom:0;padding-top:18px}
.firma{font-size:10px;margin-top:18px}
.ayuda{display:none}
.esquina{top:24px;font:500 10px/1.4 Outfit,Arial,sans-serif;letter-spacing:.18em;color:var(--tinta-3);padding:0}
.esquina.izq{left:30px}.esquina.der{right:30px}
.indice{display:none}
.progreso{height:2px;background:transparent}
.progreso i{background:var(--coral)}
.mandos{left:30px;right:30px;bottom:24px;gap:10px}
.mandos button{font:400 11px/1.4 Inter,Arial,sans-serif;height:36px;border-radius:8px;padding:0 13px;background:#fff;border:1px solid var(--filete);letter-spacing:.08em}
.mandos kbd{font-size:9px;margin-left:7px;color:var(--tinta-3)}
.estado{background:none;border:0;padding:0;font-size:9px;color:var(--tinta-3);letter-spacing:0;max-width:45%}
.pista{display:none}
.parte{border-color:var(--filete);padding-bottom:24px}
.parte span{font-size:10px;margin-bottom:14px}
.parte i{margin-top:18px;font-size:13px}
.num,.ceja-pregunta{font-size:10px;margin-bottom:12px}
.medidas-tema{margin-top:30px}
.medidas-tema b{font-size:14px;font-weight:500}
.medidas-tema span{font-size:13px;line-height:1.65}
.medidas-tema li::before{display:flex;align-items:center;justify-content:center;background:var(--coral);color:var(--blanco);border:0;font:700 11px/1 'IBM Plex Mono',monospace}
.conmutador{max-width:100%;border-radius:0}
.conmutador button{height:auto;min-height:42px;white-space:normal;padding:8px 10px;font-size:11px}
.ficha div{grid-template-columns:1fr 1.4fr;gap:10px}
.ficha dt{font-size:10px}.ficha dd{font-size:12px}
.acta{grid-template-columns:1fr;border:0;border-top:1px solid var(--tinta);padding:24px 0;gap:28px}
.acta li{font-size:13px}.acta li b{font-family:Inter,Arial,sans-serif;font-size:15px}
.boceto{border:0;border-left:2px solid var(--filete);background:none;font-size:10px;line-height:1.5}
button:focus-visible,a:focus-visible{outline:2px solid var(--coral);outline-offset:5px}
@media(min-width:1600px){.texto{padding-left:64px;padding-right:64px}.paso:first-of-type{padding-top:56px}.entrada,.paso:first-of-type .entrada{font-size:17px}.esquina.izq,.mandos{left:42px}.esquina.der,.mandos{right:42px}}
@media(max-width:1000px) and (min-width:860px){.pieza{grid-template-columns:minmax(0,56fr) minmax(0,44fr)}.texto{padding-left:26px;padding-right:26px}header.barra .aviso{display:none}.estado{display:none}}
@media(max-width:859px){
 :root{--barra:58px}
 header.barra{padding:0 18px;grid-template-columns:auto 1fr}
 header.barra img{height:17px}
 header.barra>.ceja{display:none}
 header.barra .derecha{gap:10px}
 header.barra .aviso{display:block;max-width:90px;font-size:8px;white-space:normal;text-align:right}
 header.barra .boton{display:none}
 .pieza{display:block}
 .hueco{top:58px;height:46svh;z-index:6}
 .lamina{border-bottom:1px solid var(--filete)}
 .texto{padding:0 22px 15svh}
 .fases{top:calc(58px + 46svh);padding:0;z-index:7}
 .fases button{font-size:11px;min-height:28px;padding:16px 4px 14px}
 .paso,.paso:first-of-type{min-height:80svh;padding:36px 0 60px}
 h1.pregunta{font-size:42px;max-width:10em;margin-top:16px}
 h2,.parte b{font-size:38px}
 .entrada,.paso:first-of-type .entrada{font-size:14px}
 .esquina{top:15px;font-size:8px}.esquina.izq{left:18px}.esquina.der{right:18px;display:block}
 .mandos{bottom:14px;left:18px;right:18px}.mandos button{height:32px;font-size:11px}.estado{display:none}
 .cifras{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.pista i::after{animation:none}}

/* Identidad de colección: misma jerarquía de cabecera que vivienda. */
header.barra .titulo-marca{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;white-space:nowrap}
header.barra .titulo-marca .ceja{font:500 9.5px/1.35 Outfit,Arial,sans-serif;letter-spacing:.3em;color:var(--tinta-3)}
header.barra .titulo-marca b{font:400 21px/1 'Bebas Neue',Arial,sans-serif;letter-spacing:.02em;color:var(--tinta)}
.ceja-pregunta,.num{font-family:Outfit,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.fases button[aria-pressed=true]{box-shadow:inset 0 -2px var(--tinta)}
.mandos button{font-family:Outfit,Arial,sans-serif}
@media(max-width:859px){header.barra .titulo-marca{align-items:flex-end;justify-self:end}header.barra .titulo-marca .ceja{font-size:8px;letter-spacing:.16em}header.barra .titulo-marca b{font-size:18px}header.barra .derecha{display:none}}
@media(max-width:859px){header.barra .titulo-marca{min-width:0;white-space:normal;text-align:right}header.barra .titulo-marca b{max-width:min(270px,49vw);line-height:1;text-wrap:balance}}
@media(max-width:859px){header.barra .titulo-marca{gap:3px}header.barra .titulo-marca .ceja{width:auto;white-space:nowrap}}
@media(max-width:420px){header.barra .titulo-marca b{font-size:16px}}

/* Anotaciones de scroll: síntesis editorial y llamada al detalle del aula. */
/* Origen de la investigación: selección de países, sin ranking no validado. */
.paises-origen{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:20px 0 24px}
.paises-origen span{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #DCDCE4;font:400 14px Inter,sans-serif;color:#4A4963}
.paises-origen i{font:400 10px Outfit,sans-serif;font-style:normal;color:#C5615E}

/* Portada: el estudio en sus tres pasos, los mismos del índice de fases. */
.relato{list-style:none;margin:22px 0 0;padding:0;max-width:40em}
.relato li{padding:12px 0;border-top:1px solid var(--filete);font:400 14px/1.6 Inter,Arial,sans-serif;color:var(--tinta-2)}
.relato span{display:block;margin-bottom:3px;font:500 10px/1.4 Outfit,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#C5615E}

/* Las recomendaciones en acordeón: cerrado, el tema y cuántas medidas; abierto, las medidas con su descripción.
   Aire debajo para que los últimos temas se lean con la sala aún en su escena. */
.paso[data-estado="recomiendan"]{padding-bottom:45svh}
@media(max-width:859px){.paso[data-estado="recomiendan"]{padding-bottom:35svh}}
.acordeon{margin-top:28px;max-width:40em;border-bottom:1px solid var(--filete)}
.tema-acordeon{border-top:1px solid var(--filete)}
.tema-acordeon h3{margin:0;font:inherit}
/* la cabecera de cada tema, y solo ella: dentro del panel de la fase 2 hay otros botones, barras y cifras */
.tema-acordeon>h3>button{display:grid;grid-template-columns:30px minmax(0,1fr) auto 14px;align-items:center;gap:10px;width:100%;padding:14px 0;border:0;background:transparent;color:var(--tinta);text-align:left;cursor:pointer}
.tema-acordeon>h3 .n{font:400 10px/1 'IBM Plex Mono',monospace;color:#C5615E}
.tema-acordeon>h3 .nombre{font:500 14.5px/1.35 Inter,Arial,sans-serif}
.tema-acordeon>h3 .cuantas{font:400 10px/1 'IBM Plex Mono',monospace;letter-spacing:.04em;color:var(--tinta-3)}
.tema-acordeon>h3 i{position:relative;width:14px;height:14px}
.tema-acordeon>h3 i::before,.tema-acordeon>h3 i::after{content:'';position:absolute;left:1px;right:1px;top:6.5px;height:1px;background:var(--tinta-2);transition:transform .2s}
.tema-acordeon>h3 i::after{transform:rotate(90deg)}
.tema-acordeon>h3>button[aria-expanded=true] i::after{transform:rotate(0)}
.tema-acordeon>h3>button:hover .nombre{color:var(--coral)}
.tema-acordeon>h3>button[aria-expanded=true] i::before,.tema-acordeon>h3>button[aria-expanded=true] i::after{background:var(--tinta)}
.tema-acordeon>h3>button:hover i::before,.tema-acordeon>h3>button:hover i::after{background:var(--coral)}
.tema-acordeon>h3>button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.tema-acordeon>.panel{padding:0 0 18px 40px;animation:abre-tema .25s ease-out}
.tema-acordeon .explica{margin:0;font:400 13px/1.55 Inter,Arial,sans-serif;color:var(--tinta-3)}
.tema-acordeon .medidas-tema{margin-top:12px}
@keyframes abre-tema{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tema-acordeon>.panel{animation:none}.tema-acordeon>h3 i::before,.tema-acordeon>h3 i::after{transition:none}}
@media(max-width:859px){.tema-acordeon>.panel{padding-left:0}.tema-acordeon>h3>button{grid-template-columns:26px minmax(0,1fr) auto 14px;gap:8px}}

/* Fase 2: la valoración de las 22 medidas, en dos pestañas (perfiles y voto) y por temas en acordeón, como la fase 1.
   Cada fila es la de las cifras de educacion_29n: el nombre, la cifra y su barra de 0 a 10 con el rango central.
   Todo va dentro de .valoracion: .barra, .fila y .n se llaman igual que otras piezas de la página. */
.paso[data-estado="aulas"]{padding-bottom:45svh}
@media(max-width:859px){.paso[data-estado="aulas"]{padding-bottom:35svh}}
.valoracion{--columnas:7.6em 2.3em minmax(0,1fr);max-width:40em}
.valoracion .pestanas{display:flex;margin:0;border-bottom:1px solid var(--filete)}
.valoracion .pestanas button{flex:1;padding:12px 6px 11px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;font:500 11px/1.3 Outfit,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);cursor:pointer}
.valoracion .pestanas button:hover{color:var(--coral)}
.valoracion .pestanas button[aria-selected=true]{color:var(--tinta);border-bottom-color:var(--tinta)}
.valoracion .pestanas button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.valoracion .pregunta-bloque{margin:22px 0 0;font:500 13px/1.45 Inter,Arial,sans-serif;color:var(--tinta)}
.valoracion .pregunta-bloque span{display:block;margin-top:3px;font-weight:400;color:var(--tinta-2)}
.valoracion .leyenda{margin-top:12px}
.valoracion .leyenda[hidden],.valoracion .nota-cifras[hidden]{display:none}
.valoracion .leyenda .punto{position:static;align-self:center;margin:0;width:9px;height:9px;z-index:auto}   /* .hueco es también el contenedor de la lámina */
.valoracion .leyenda .rango-ley{width:18px;height:6px;border-radius:1px;background:var(--tinta-3);opacity:.45}
.valoracion .leyenda .trazo{width:16px;height:2px;background:var(--coral)}
.valoracion .leyenda .trazo.gris{background:var(--tinta-3)}
.valoracion .acordeon{margin-top:22px;max-width:none}
.valoracion .tema-acordeon>.panel{padding:0 0 22px}
.valoracion .panel[data-voto]{--columnas:10.4em 2.3em minmax(0,1fr)}
.valoracion .nota-divide{margin:8px 0 0;font:500 11.5px/1.4 Inter,sans-serif;color:#C62828}
.texto .valoracion>.leyenda+.extracto{margin-top:14px}
/* la nota de que la pestaña de voto es un extracto, con forma de aviso */
.valoracion .extracto{padding:11px 14px 12px;background:#ececf1;border-left:2px solid var(--tinta-3);border-radius:2px;font:400 12px/1.55 Inter,sans-serif;color:var(--tinta-2)}
.valoracion .extracto b{display:block;margin-bottom:4px;font:500 9.5px/1.3 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.valoracion .medida{position:relative;margin-top:22px}
.valoracion .panel>.medida:first-child{margin-top:6px}
.valoracion .medida .titulo{margin:0;font:500 14.5px/1.3 Inter,sans-serif}
.valoracion .sin-corte{white-space:nowrap}
/* la información de la medida: un botón junto al título y su descripción encima de las barras */
.valoracion .info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:7px;vertical-align:1px;padding:0;border:1px solid var(--tinta-3);border-radius:50%;background:transparent;color:var(--tinta-2);font:italic 500 10px/1 Georgia,serif;cursor:pointer}
.valoracion .info::after{content:'';position:absolute;inset:-9px}   /* más superficie para el dedo */
.valoracion .info:hover,.valoracion .info:focus-visible,.valoracion .info[aria-expanded=true]{border-color:var(--coral);color:var(--coral);outline:none}
.valoracion .descripcion{position:absolute;left:0;right:0;z-index:5;display:none;margin:6px 0 0;padding:10px 12px;background:var(--blanco);border:1px solid var(--filete);border-left:2px solid var(--coral);border-radius:3px;box-shadow:0 6px 18px rgba(18,18,45,.08);font:400 13px/1.5 Inter,sans-serif;color:var(--tinta-2)}
.valoracion .titulo:has(.info[aria-expanded=true])+.descripcion,.valoracion .titulo:has(.info:focus-visible)+.descripcion{display:block}
@media(hover:hover){.valoracion .titulo:has(.info:hover)+.descripcion{display:block}}
.valoracion .fila{display:grid;grid-template-columns:var(--columnas);gap:0 10px;align-items:center;margin-top:8px}
.valoracion .fila.con-dif{margin-top:20px}
.valoracion .fila .quien{font:400 12px/1.25 Inter,sans-serif;color:var(--tinta-2)}
.valoracion .fila .n{font:400 22px/1 'Bebas Neue',sans-serif;color:var(--tinta);text-align:right}
.valoracion .barra{position:relative;height:10px;border-bottom:1px solid var(--filete);border-right:1px solid var(--filete);background:linear-gradient(to right,var(--filete) 0 1px,transparent 1px) 0 0/10% 100%,#ececf1}
.valoracion .barra .rango{position:absolute;top:2px;bottom:2px;background:var(--tinta-3);opacity:.45;border-radius:1px}
.valoracion .barra .punto{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;box-sizing:border-box;z-index:2}
.valoracion .barra .gap{position:absolute;top:50%;height:2px;margin-top:-1px;background:var(--coral);z-index:1}
.valoracion .barra .gap.gris{background:var(--tinta-3)}
.valoracion .barra .guia{position:absolute;top:-16px;bottom:5px;border-left:1px dashed var(--tinta-3)}
/* la cifra de la diferencia, pegada a la guía y del lado de la diferencia: no la cruza aunque la diferencia sea pequeña */
.valoracion .barra .dif{position:absolute;top:-17px;margin-left:5px;font:600 11.5px/1 Inter,sans-serif;color:#C62828;white-space:nowrap}
.valoracion .barra .dif.izq{margin-left:-5px;transform:translateX(-100%)}
.valoracion .barra .dif.gris{font-weight:500;color:var(--tinta-3)}
@media(max-width:420px){.valoracion{--columnas:6.8em 2.1em minmax(0,1fr)}.valoracion .panel[data-voto]{--columnas:7.6em 2.1em minmax(0,1fr)}.valoracion .fila .quien{font-size:11.5px}}

/* Espaciado por bloques: la cabecera (ceja, título y texto) es un bloque, y los datos con sus notas, otro. Sin línea
   entre el título y el texto. Cada elemento lleva solo el margen de arriba: .paso es flex y los márgenes no se juntan. */
.texto{--ceja:12px;--cerca:16px;--bloques:40px}
@media(max-width:859px){.texto{--bloques:32px}.texto .paso:first-of-type{padding-top:24px}}
.texto .paso>*{margin-bottom:0}
.texto .parte{margin:0;padding:0;border:0}
.texto .parte span,.texto .paso>.ceja-pregunta{margin:0}
.texto .parte b,.texto .paso>.ceja+h1.pregunta,.texto .paso>.ceja-pregunta+h2{margin-top:var(--ceja)}
.texto .paso>h1.pregunta:first-child{margin-top:0}
h1.pregunta .sin-corte{white-space:nowrap}   /* el título se parte por el sentido: «en PISA,» y «a examen en España», enteros */
.texto .paso>:is(.parte,h1,h2)+.entrada,.texto .paso>.entrada+.relato{margin-top:var(--cerca)}
.texto .paso>:is(.entrada,h2,.parte)+:is(.bloque,.ficha,.acordeon,.acciones),.texto .paso>.relato+.cifras{margin-top:var(--bloques)}
.texto .paso>:is(.ficha,.bloque)+.bloque{margin-top:32px}
.texto .poblaciones>.ficha{margin-top:10px}
.texto .paso>.cifras~.firma,.texto .bloque>.nota-cifras,.texto .paso>.bloque+.nota-cifras{margin-top:var(--cerca)}
.texto .bloque>.pregunta-bloque+.paises-origen{margin:10px 0 0}
.texto .bloque>.acta:first-child{margin-top:0}

/* Fase 3: las conclusiones en dos preguntas, con las filas de cifras de la fase 2 (.valoracion) */
.paso[data-estado="electoral"]{padding-bottom:45svh}
@media(max-width:859px){.paso[data-estado="electoral"]{padding-bottom:35svh}}
.conclusiones{--columnas:10.4em 2.3em minmax(0,1fr)}
.texto .conclusiones>.leyenda{margin-top:0}
.conclusiones .pregunta{margin-top:40px;padding-top:22px;border-top:1px solid var(--filete)}
.conclusiones .cuenta{display:block;margin-bottom:8px;font:500 10px/1.3 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#C5615E}
.conclusiones .pregunta h3{margin:0;font:600 17px/1.3 Inter,sans-serif}
.conclusiones .sub{margin:6px 0 0;font:400 12.5px/1.5 Inter,sans-serif;color:var(--tinta-3)}
.conclusiones .ver{margin-top:20px;padding:0 0 2px;border:0;border-bottom:1px solid var(--tinta);background:transparent;font:500 11px/1.4 Outfit,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);cursor:pointer}
.conclusiones .ver:hover{color:var(--coral);border-color:var(--coral)}
@media(max-width:420px){.conclusiones{--columnas:7.6em 2.1em minmax(0,1fr)}}