/* =============================================================================
   MNTgetTest / wwwroot / css / portada.css                                 (p750)
   PORTADA PÚBLICA (P1): inicio sin sesión, «Nuestro compromiso» y «Probar».
   Limpia y ligera: se ve igual en el móvil (menú en una fila que se desplaza).
   ============================================================================= */
body.portada { background:#fff; color:#1f2937; font-size:17px; line-height:1.6; }
.por-ancho { max-width:1100px; margin:0 auto; padding:0 1.25rem; }
.por-cabecera { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.96); border-bottom:1px solid #e5e7eb; }
.por-barra { display:flex; align-items:center; gap:1rem; min-height:4rem; }
.por-marca { display:flex; align-items:center; gap:.5rem; color:#111827; text-decoration:none; font-size:1.25rem; }
.por-marca:hover { color:#111827; text-decoration:none; }
.por-menu { display:flex; gap:1.1rem; margin-left:auto; overflow-x:auto; white-space:nowrap; }
.por-menu a { color:#374151; text-decoration:none; font-size:.95rem; }
.por-menu a:hover { color:#4f46e5; }
.por-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.1rem; border-radius:999px;
           font-weight:600; text-decoration:none; border:1px solid transparent; cursor:pointer; font-size:1rem; }
.por-btn:hover { text-decoration:none; }
.por-btn-probar { background:#4f46e5; color:#fff; }
.por-btn-probar:hover { background:#4338ca; color:#fff; }
.por-btn-sec { background:#fff; color:#4f46e5; border-color:#c7d2fe; }
.por-btn-sec:hover { background:#eef2ff; color:#3730a3; }
.por-heroe { padding:4.5rem 0 3.5rem; background:linear-gradient(180deg,#eef2ff 0%,#fff 100%); text-align:center; }
.por-heroe h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:800; line-height:1.15; margin-bottom:1rem; }
.por-heroe h1 em { font-style:normal; color:#4f46e5; }
/* p760 — el titular en dos líneas fijas (cada una, un bloque) y el antetítulo. */
.por-heroe h1 .por-linea { display:block; }
.por-antetitulo { text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; font-weight:700;
                  color:#4f46e5; margin-bottom:.8rem; }
.por-sub { color:#4b5563; max-width:46rem; margin:0 auto 1.2rem; }
.por-acciones { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.por-seccion { padding:3.5rem 0; }
.por-seccion h2 { font-size:1.9rem; font-weight:800; margin-bottom:1.5rem; text-align:center; }
.por-gris { background:#f9fafb; }
.por-pasos { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; }   /* p761: 3 por fila con 6 tarjetas */
/* p761 — «Lo que dice la investigación». */
.por-ciencia { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.2rem; }
.por-dato { border:1px solid #e5e7eb; border-radius:14px; padding:1.3rem; background:#fff; }
.por-cifra { font-size:2.2rem; font-weight:800; color:#4f46e5; margin:0 0 .4rem; }
.por-dato p { color:#374151; }
.por-ref { font-size:.85rem; color:#6b7280 !important; margin:0; }
.por-pasos li { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1.3rem; }
.por-pasos h3 { font-size:1.1rem; font-weight:700; margin:.4rem 0; }
.por-pasos p { color:#4b5563; margin:0; font-size:.97rem; }
.por-ico { font-size:1.8rem; }
.por-rejilla { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.2rem; }
.por-tarjeta { display:flex; gap:1rem; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1.2rem; }
.por-tarjeta-ico { flex:0 0 3.4rem; height:3.4rem; border-radius:12px; display:flex; align-items:center; justify-content:center;
                   font-weight:800; color:#fff; font-size:1.1rem; background:hsl(var(--tono,240),60%,52%); }
.por-tarjeta h3 { font-size:1.1rem; font-weight:700; margin:0 0 .3rem; }
.por-tarjeta p { margin:0 0 .5rem; color:#4b5563; font-size:.95rem; }
.por-datos { display:flex; flex-wrap:wrap; gap:.3rem .9rem; font-size:.88rem !important; }
.por-tarjeta-acc { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem !important; }
.por-tarjeta-acc .por-btn { padding:.4rem .9rem; font-size:.92rem; }
.por-probar, .por-texto { max-width:48rem; }
.por-probar p, .por-texto p { margin-bottom:1rem; }
.por-texto h1, .por-probar h1 { font-size:2rem; font-weight:800; margin-bottom:1.2rem; }
.por-destacado { background:#eef2ff; border-left:4px solid #4f46e5; padding:1rem 1.2rem; border-radius:8px; }
.por-aviso { background:#fef2f2; border:1px solid #fecaca; padding:.7rem 1rem; border-radius:8px; color:#991b1b; }
.por-pie { border-top:1px solid #e5e7eb; padding:1.4rem 0; font-size:.88rem; color:#6b7280; }
.por-pie-fila { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem; }
.por-pie a { color:#4b5563; }
@media (max-width: 720px) {
    /* p820 — en el móvil, UNA fila: logo · «▶ Probar» · ☰. El menú, en su ventana
       emergente (antes iba en una segunda fila que se desplazaba de lado). */
    .por-barra { flex-wrap:nowrap; gap:.6rem; min-height:3.5rem; padding:.4rem 0; }
    .por-menu { display:none; }
    .por-cabecera .por-btn-probar { margin-left:auto; padding:.45rem .9rem; white-space:nowrap; }
    .por-heroe { padding:3rem 0 2.5rem; }
}
/* p766 — la idea clave y lo que es siempre gratis. */
.por-clave { background:#4f46e5; color:#fff; padding:2.2rem 0; text-align:center; }
.por-clave-frase { font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.5; max-width:52rem; margin:0 auto 1rem; }
.por-gratis { margin:0 auto; max-width:52rem; background:rgba(255,255,255,.14); border-radius:999px; padding:.55rem 1.2rem; display:inline-block; }
.por-insignia { display:inline-block; font-size:.72rem; font-weight:700; vertical-align:middle; margin-left:.35rem;
                background:#dcfce7; color:#166534; border-radius:999px; padding:.1rem .55rem; white-space:nowrap; }
/* p767 — la ampliación: una frase, algo más pequeña. */
.por-clave-mas { font-size:1rem; opacity:.92; max-width:46rem; margin:0 auto 1.1rem; }
/* p768 — el «casi» de «Nuestro compromiso»: cursiva, color de marca y un guiño. */
.por-casi { font-style:italic; font-weight:700; color:#4f46e5; cursor:help;
            text-decoration:underline dotted #a5b4fc; text-underline-offset:3px; }
/* p769 — la línea de «siempre gratis» es más larga: caja redondeada en vez de píldora. */
.por-gratis { border-radius:14px; line-height:1.55; }
/* p770 — el símbolo del conjunto vacío, un poco más fino que el texto. */
.por-vacio { font-weight:400; margin-right:.1em; }
/* p771–p777 — AL SALTAR DESDE EL MENÚ, EL TÍTULO QUEDA JUSTO BAJO LA CABECERA.
   UNA SOLA RESERVA: scroll-padding (en el que se desplaza) y scroll-margin (en
   el destino) SE SUMAN; en el p772 estaban los dos y el título quedaba muy
   abajo. Se deja solo scroll-margin en cada destino, que funciona sea html o
   body el que se desplaza. Cálculo: cabecera ≈ 5,5rem; cada sección tiene
   3,5rem de margen interior sobre el título → 3rem de reserva deja el título a
   ≈ 1rem de la cabecera. En el móvil la cabecera ocupa dos filas → 5rem. */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
/* p851 — la reserva es la ALTURA REAL DE LA CABECERA (--alto-cabecera, la mide
   js/portada-menu.js al cargar y al cambiar el tamaño). Antes, 5rem en el móvil, de
   cuando la cabecera tenía dos filas: desde el p820 tiene una y asomaba una franja
   de la sección anterior (propietario, 02/10). Sin guion, los valores de siempre. */
body.portada [id] { scroll-margin-top:var(--alto-cabecera, 3rem); }
@media (max-width: 720px) { body.portada [id] { scroll-margin-top:var(--alto-cabecera, 5rem); } }
/* p773 — CABECERA OPACA. Con rgba(255,255,255,.96) se transparentaba el texto
   de la franja azul al pasar por debajo, y el logo se veía apagado. */
.por-cabecera { background:#fff; box-shadow:0 1px 6px rgba(15,23,42,.08); }
/* p774 — el guiño y la nota del asterisco. */
.por-clave-mas { margin-bottom:.5rem; }
.por-clave-guino { font-size:1.05rem; font-weight:700; font-style:italic; margin:0 auto .3rem; }
.por-asterisco { color:#fde68a; text-decoration:none; margin-left:.1em; }
.por-clave-nota { font-size:.82rem; opacity:.8; margin:0 auto 1.1rem; }
/* p778 — ALINEACIÓN DEL TEXTO (convenciones v09 §8.5): párrafos justificados
   con partición de palabras; textos breves bajo un título centrado, centrados. */
.por-sub { text-align:center; }
.por-probar, .por-texto { margin-left:auto; margin-right:auto; }
.por-probar p:not(.por-sub), .por-texto p, .por-pasos p, .por-dato p:not(.por-cifra):not(.por-ref),
.por-tarjeta-cuerpo p:not(.por-datos):not(.por-tarjeta-acc) { text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.por-pie-fila { flex-direction:column; align-items:center; text-align:center; }
/* p781 — el código visible, como etiqueta pequeña sobre el título de la tarjeta. */
.por-codigo { font-size:.78rem !important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#4f46e5 !important; margin:0 0 .15rem !important; }
/* p787 — EXÁMENES QUE ENTRAN POR LOS OJOS: filtros por familia (solo CSS),
   tarjetas con cabecera de color por familia, icono grande y datos en etiquetas. */
.por-radio { position:absolute; opacity:0; pointer-events:none; }
.por-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:0 0 1.6rem; }
.por-chips label { cursor:pointer; padding:.4rem 1rem; border-radius:999px; border:1px solid #c7d2fe; background:#fff;
                   color:#3730a3; font-weight:600; font-size:.92rem; transition:background .15s, color .15s; }
.por-chips label:hover { background:#eef2ff; }
#fam-todas:checked ~ .por-chips label[for="fam-todas"] { background:#4f46e5; color:#fff; border-color:#4f46e5; }
.por-radio:focus-visible ~ .por-chips label { outline-offset:2px; }
.por-rejilla2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.3rem; }
.por-t2 { display:flex; flex-direction:column; background:#fff; border-radius:18px; overflow:hidden;
          border:1px solid #e5e7eb; box-shadow:0 1px 3px rgba(15,23,42,.06);
          transition:transform .18s ease, box-shadow .18s ease; }
.por-t2:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(15,23,42,.12); }
.por-t2-destacado { border:2px solid hsl(var(--tono,240),70%,60%); }
.por-t2-cabeza { position:relative; min-height:7.2rem; padding:1rem 1.1rem;
                 background:linear-gradient(135deg, hsl(var(--tono,240),72%,52%) 0%, hsl(calc(var(--tono,240) + 40),78%,62%) 100%);
                 color:#fff; display:flex; flex-direction:column; justify-content:flex-end; }
.por-t2-ico { position:absolute; right:.9rem; top:.6rem; font-size:3.4rem; line-height:1;
              filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
.por-t2-fam { font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.95; }
.por-t2-insignias { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.45rem; }
.por-t2-ins { font-size:.72rem; font-weight:700; background:rgba(255,255,255,.22); border-radius:999px; padding:.12rem .55rem; }
.por-t2-gratis { background:#dcfce7; color:#166534; }
.por-t2-cuerpo { padding:1.1rem 1.15rem 1.2rem; display:flex; flex-direction:column; flex:1 1 auto; }
.por-t2-cuerpo h3 { font-size:1.12rem; font-weight:800; line-height:1.3; margin:0 0 .45rem; color:#111827; }
.por-t2-desc { color:#4b5563; font-size:.93rem; margin:0 0 .6rem; text-align:justify; hyphens:auto; }
.por-t2-datos { list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.por-t2-datos li { font-size:.82rem; background:#f1f5f9; color:#334155; border-radius:999px; padding:.18rem .65rem; }
.por-t2-acc { margin-top:auto; display:flex; gap:.5rem; flex-wrap:wrap; }
.por-t2-acc .por-btn { padding:.42rem .95rem; font-size:.92rem; }
@media (prefers-reduced-motion: reduce) { .por-t2, .por-t2:hover { transition:none; transform:none; } }
/* p787 — página «Alerta PISA 2025» y su aviso en la portada. */
.por-heroe-pisa { background:linear-gradient(180deg,#fff7ed 0%,#fff 100%); }
.por-heroe-pisa .por-antetitulo { color:#c2410c; }
.por-heroe-pisa h1 em { color:#c2410c; }
.por-tabla-envoltorio { overflow-x:auto; margin:0 0 1rem; }
.por-tabla { width:100%; border-collapse:collapse; font-size:1rem; background:#fff; }
.por-tabla th, .por-tabla td { padding:.6rem .8rem; border-bottom:1px solid #e5e7eb; text-align:center; }
.por-tabla th { background:#f8fafc; font-weight:700; }
.por-tabla td:first-child, .por-tabla th:first-child { text-align:left; }
.por-baja { color:#b91c1c; font-weight:700; }
.por-fuentes { padding-left:1.2rem; }
.por-fuentes li { margin-bottom:.5rem; text-align:left; }
.por-nota-fuentes { font-size:.85rem; color:#6b7280; text-align:center !important; }
.por-aviso-pisa { background:#fff7ed; border-top:1px solid #fed7aa; border-bottom:1px solid #fed7aa; padding:1rem 0; text-align:center; }
.por-aviso-pisa a { color:#9a3412; text-decoration:none; }
.por-aviso-pisa a:hover { text-decoration:underline; }
/* p795 — PISA: cabecera compacta (la tabla se ve al cargar) y el gráfico. */
.por-heroe-compacto { padding:2rem 0 1.2rem; }
.por-heroe-compacto h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.6rem; }
.por-heroe-compacto .por-sub { margin-bottom:.4rem; }
.por-seccion-pegada { padding-top:1.2rem; }
.por-grafico { margin:1rem 0 1.2rem; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.6rem; }
.por-grafico svg { width:100%; height:auto; display:block; }
.g-rejilla { stroke:#eef2f7; stroke-width:1; }
.g-eje { font-size:12px; fill:#64748b; font-family:inherit; }
.g-ley { stroke:#b45309; stroke-width:1.5; stroke-dasharray:4 4; }
.g-ley-txt { font-size:12px; font-weight:700; fill:#b45309; font-family:inherit; }
.g-lectura, .g-mates, .g-ciencias { fill:none; stroke-width:3; stroke-linejoin:round; }
.g-lectura { stroke:#4f46e5; } .g-lectura-p { fill:#4f46e5; }
.g-mates { stroke:#dc2626; } .g-mates-p { fill:#dc2626; }
.g-ciencias { stroke:#059669; } .g-ciencias-p { fill:#059669; }
.por-grafico figcaption { display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:center; font-size:.88rem; padding-top:.4rem; }
.g-ley-lectura { color:#4f46e5; } .g-ley-mates { color:#dc2626; } .g-ley-ciencias { color:#059669; } .g-ley-leyes { color:#b45309; }
/* p798 — PISA: nota del hueco 1990–2000, ley de cada promoción y leyenda de bandas. */
.g-nota { font-size:12px; fill:#94a3b8; font-style:italic; font-family:inherit; }
.g-promo { font-size:10.5px; font-weight:700; font-family:inherit; }
.g-bandas { color:#475569; }
.g-banda { color:var(--c); font-weight:700; margin-left:.35rem; }
.por-fila-promo td { font-weight:700; font-size:.85rem; }
/* p799 — la línea de PISA 2029 en la portada: discreta, «como quien no quiere la cosa». */
.por-pisa2029 { font-size:.98rem; color:#9a3412; max-width:46rem; margin:.2rem auto .2rem; text-align:center; }
.por-pisa2029 a { color:#c2410c; font-weight:600; }
.por-asterisco-pisa { text-decoration:none; margin-left:.05em; }
.por-pisa2029-nota { font-size:.8rem; color:#6b7280; max-width:46rem; margin:0 auto 1.2rem; text-align:center; }
/* p798fix01 — rótulo de cada tramo de promoción, dentro de su banda; leyenda en una línea. */
.g-tramo { font-size:11.5px; font-weight:800; font-family:inherit; letter-spacing:.02em; }
.g-ley-fondo { color:#64748b; }
.por-grafico figcaption { gap:.3rem 1.1rem; }
/* p800 — formulario de «Avísame» y boletín; tarjetas de «Próximamente». */
.por-form { display:flex; flex-direction:column; gap:.6rem; max-width:34rem; }
.por-form input[type=email] { padding:.6rem .8rem; border:1px solid #cbd5e1; border-radius:10px; font-size:1rem; }
.por-check { display:flex; gap:.5rem; align-items:flex-start; font-size:.88rem; color:#475569; text-align:justify; }
.por-check input { margin-top:.25rem; flex:0 0 auto; }
.por-trampa { position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
/* p829 — los anuncios, con el MISMO aspecto que las materias (antes, apagados y con
   borde discontinuo): solo los distingue la insignia «⏳ Próximamente». */
.por-t2-proximo { }
.por-t2-prox { background:rgba(255,255,255,.28); }
/* p799fix01 — LAS NOTAS DE LOS ASTERISCOS (#nota-pisa2029, #nota-colaboradores)
   quedaban tapadas por la cabecera fija: la reserva de 3rem del p777 está
   pensada para las SECCIONES (que tienen 3,5rem de margen interior sobre el
   título); un PÁRRAFO de destino necesita el alto de la cabecera y algo más. */
body.portada p[id], body.portada li[id] { scroll-margin-top:calc(var(--alto-cabecera, 3rem) + 4rem); }
@media (max-width: 720px) { body.portada p[id], body.portada li[id] { scroll-margin-top:calc(var(--alto-cabecera, 5rem) + 4.5rem); } }
/* p799fix02 — LAS NOTAS DE LOS ASTERISCOS, EN VENTANA EMERGENTE (atributo
   popover de HTML: se abre con un toque o un clic —también en el móvil, sin
   ratón— y se cierra tocando fuera, con Escape o con «✖ Cerrar»; sin JS).
   En un navegador sin popover, la nota se ve en su sitio. */
.por-asterisco-btn { background:none; border:0; padding:0 .1em; margin:0; cursor:pointer; font:inherit; font-weight:800;
                     color:inherit; line-height:1; vertical-align:super; font-size:.85em; }
.por-asterisco-btn:hover, .por-asterisco-btn:focus-visible { text-decoration:underline; outline:none; }
.por-clave .por-asterisco-btn { color:#fde68a; }
.por-pisa2029 .por-asterisco-btn { color:#c2410c; }
.por-popover { max-width:min(32rem, calc(100vw - 2rem)); padding:1.1rem 1.2rem .9rem; border:1px solid #e5e7eb; border-radius:14px;
               background:#fff; color:#1f2937; box-shadow:0 18px 40px rgba(15,23,42,.25); text-align:left; font-size:.98rem; line-height:1.5; }
.por-popover p { margin:0 0 .7rem; text-align:left !important; }
.por-popover::backdrop { background:rgba(15,23,42,.25); }
.por-popover-cerrar { display:block; margin-left:auto; border:1px solid #c7d2fe; background:#fff; color:#3730a3; border-radius:999px;
                      padding:.3rem .9rem; font-weight:600; cursor:pointer; }
@supports not selector(:popover-open) {
    /* Navegadores sin popover: la nota, en su sitio y discreta; sin botón de cerrar. */
    .por-popover { position:static; box-shadow:none; border:0; background:transparent; color:inherit; padding:0; font-size:.82rem; opacity:.85; margin:0 auto; text-align:center; }
    .por-popover-cerrar { display:none; }
}
/* p768fix01 — el «casi» es ahora un BOTÓN que abre su guiño (popover): mismo
   aspecto que antes (cursiva, color de marca, subrayado punteado), sin el
   aspecto de botón. */
button.por-casi { background:none; border:0; padding:0; margin:0; font:inherit; font-style:italic; font-weight:700;
                  color:#4f46e5; cursor:pointer; text-decoration:underline dotted #a5b4fc; text-underline-offset:3px; }
button.por-casi:hover, button.por-casi:focus-visible { text-decoration-style:solid; outline:none; }
/* p798fix02 — LA TABLA DE LA SERIE DE PISA, SIN DESPLAZAMIENTO: letra más
   pequeña, celdas ajustadas, la transición de ley se parte tras la flecha
   («LOMCE→» / «LOMLOE») y la primera columna admite dos líneas. */
.por-tabla-serie { font-size:.86rem; table-layout:auto; }
.por-tabla-serie th, .por-tabla-serie td { padding:.4rem .3rem; }
.por-tabla-serie td:first-child, .por-tabla-serie th:first-child { padding-left:.5rem; min-width:6.5rem; }
.por-tabla-serie .por-fila-promo td { font-size:.7rem; line-height:1.25; word-break:normal; overflow-wrap:normal; }
.por-tabla-serie .por-fila-promo td:first-child { font-size:.78rem; }
.por-aprox { display:block; font-weight:400; color:#64748b; }
/* p803 — leyes de ORGANIZACIÓN (LODE, LOPEG): raya gris punteada. */
.g-ley-org { stroke:#94a3b8; stroke-width:1.2; stroke-dasharray:2 4; }
.g-ley-org-txt { font-size:11px; font-weight:700; fill:#94a3b8; font-family:inherit; }
.g-ley-org-l { color:#94a3b8; }

/* p810 — DOCUMENTOS LEGALES (/aviso-legal, /privacidad, /cookies, /condiciones).
   Título centrado con su antetítulo y su pie centrados; el texto, justificado
   con partición de palabras (convenciones §8.5). Las tablas, con su propio
   desplazamiento en el móvil. */
.legal { max-width: 860px; }
.legal h1 { text-align:center; margin-bottom:1.2rem; }
.legal-ante, .legal-centro, .legal-otros { text-align:center; }
.legal-ante { color:#64748b; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; margin-bottom:.3rem; }
.legal-cuerpo { text-align:justify; hyphens:auto; line-height:1.65; }
.legal-cuerpo h2 { font-size:1.2rem; margin:1.8rem 0 .7rem; text-align:left; }
.legal-cuerpo ul, .legal-cuerpo ol { padding-left:1.4rem; }
.legal-cuerpo li { margin-bottom:.35rem; }
.legal-cuerpo table { display:block; overflow-x:auto; border-collapse:collapse; font-size:.9rem; margin:.8rem 0 1.2rem; text-align:left; hyphens:manual; }
.legal-cuerpo th, .legal-cuerpo td { border:1px solid #e2e8f0; padding:.45rem .6rem; vertical-align:top; }
.legal-cuerpo th { background:#f1f5f9; }
.legal-cuerpo code { font-size:.85em; }
.legal-falta { background:#fef3c7; color:#92400e; padding:0 .2rem; border-radius:3px; }
.legal-aviso { text-align:center; background:#fff7ed; border:1px solid #fdba74; border-radius:8px; padding:.5rem .8rem; }
.legal-otros { margin-top:2rem; font-size:.9rem; color:#64748b; }

/* p816 — APRENDER IDIOMAS (/idiomas): tarjetas del método y tabla comparativa.
   Párrafos justificados con partición de palabras (§8.5); la tabla, con su propio
   desplazamiento horizontal en el móvil y la primera columna fija. */
.idi h2 { text-align:center; }
.idi-just { text-align:justify; hyphens:auto; }
.idi-centro { justify-content:center; text-align:center; }
.idi-leyenda { text-align:center; color:#64748b; font-size:.88rem; }
.idi-rejilla { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin-top:1rem; }
.idi-tarjeta { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:1rem 1.1rem; }
.idi-tarjeta h3 { font-size:1.05rem; margin:0 0 .4rem; }
.idi-tarjeta p { margin:0; text-align:justify; hyphens:auto; line-height:1.55; }
.idi-tabla { overflow-x:auto; margin-top:.6rem; }
.idi-tabla table { border-collapse:collapse; min-width:760px; width:100%; background:#fff; font-size:.9rem; }
.idi-tabla th, .idi-tabla td { border:1px solid #e2e8f0; padding:.5rem .6rem; vertical-align:top; text-align:center; }
.idi-tabla tbody th { text-align:left; font-weight:500; position:sticky; left:0; background:#fff; min-width:14rem; }
.idi-tabla thead th { background:#f1f5f9; }
.idi-tabla .idi-gt { background:#eef2ff; font-weight:600; }
.idi-tabla tr.idi-otros th, .idi-tabla tr.idi-otros td:not(.idi-gt) { background:#fffbeb; }
.idi-tabla tr.idi-corte th, .idi-tabla tr.idi-corte td { border-top:2px solid #f59e0b; }

/* p817 — TRANSPARENCIA (/transparencia): cifras, barras por mes y tablas. */
.tra h2, .tra-h3 { text-align:center; }
.tra-h3 { font-size:1.05rem; margin:1.6rem 0 .6rem; }
.tra-just { text-align:justify; hyphens:auto; }
.tra-centro { justify-content:center; text-align:center; }
.tra-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:.8rem; margin-top:1rem; }
.tra-kpi { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:.9rem; text-align:center; }
.tra-kpi b { display:block; font-size:1.7rem; color:#1e293b; }
.tra-kpi span { color:#64748b; font-size:.88rem; }
.tra-total { background:#eef2ff; border-color:#c7d2fe; }
.tra-gris b { color:#64748b; }
.tra-barras { display:grid; grid-template-columns:repeat(12, 1fr); gap:.35rem; align-items:end; height:180px; padding:0 .2rem; }
.tra-barra { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
.tra-col { display:block; width:100%; max-width:42px; background:#818cf8; border-radius:4px 4px 0 0; min-height:2px; }
.tra-valor { font-size:.75rem; color:#475569; margin-bottom:.15rem; }
.tra-mes { font-size:.72rem; color:#64748b; margin-top:.25rem; white-space:nowrap; }
.tra-dos { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width: 760px) { .tra-dos { grid-template-columns:1fr; } }
.tra-tabla { width:100%; border-collapse:collapse; background:#fff; }
.tra-tabla th, .tra-tabla td { border-bottom:1px solid #e2e8f0; padding:.4rem .6rem; text-align:left; font-weight:400; }
.tra-tabla td { text-align:right; font-weight:600; white-space:nowrap; }
.tra-nota { color:#64748b; font-size:.85rem; text-align:justify; hyphens:auto; margin-top:1.2rem; }

/* p818 — hitos de /transparencia: una línea de tiempo vertical. */
.tra-hitos { list-style:none; padding:0; margin:1rem auto 0; max-width:640px; border-left:3px solid #c7d2fe; }
.tra-hitos li { display:flex; gap:.7rem; align-items:flex-start; padding:.4rem 0 .9rem .8rem; margin-left:-.95rem; }
.tra-hito-ico { font-size:1.1rem; background:#fff; line-height:1.4; }
.tra-hito-fecha { display:block; color:#64748b; font-size:.82rem; }
.tra-hitos li p { margin:.2rem 0 0; color:#475569; text-align:justify; hyphens:auto; }
.tra-hitos li.previsto strong { color:#4f46e5; }

/* p820 — «▶ Probar» y el menú del móvil (☰ + ventana emergente con el atributo
   popover: se cierra tocando fuera o con Escape; al elegir, js/portada-menu.js). */
.por-probar-corto { display:none; }
.por-hamburguesa { display:none; border:1px solid #e2e8f0; background:#fff; border-radius:10px; width:2.6rem; height:2.6rem;
                   font-size:1.35rem; line-height:1; color:#1e293b; cursor:pointer; flex:0 0 auto; }
.por-hamburguesa:hover, .por-hamburguesa:focus-visible { background:#eef2ff; border-color:#a5b4fc; }
/* p850 — sin popover: posición fija propia; «hidden» lo oculta. */
.por-menu-movil { position:fixed; z-index:1050; margin:0; top:4rem; right:.6rem; left:auto;
                  width:min(18rem, calc(100vw - 1.2rem)); max-height:calc(100vh - 5rem); overflow-y:auto;
                  border:1px solid #e2e8f0; border-radius:14px; padding:.6rem; background:#fff;
                  box-shadow:0 18px 40px rgba(15,23,42,.18); display:flex; flex-direction:column; }
.por-menu-movil[hidden] { display:none !important; }
.por-menu-movil a { display:block; color:#1e293b; text-decoration:none; font-size:1.05rem; padding:.75rem .8rem; border-radius:10px; }   /* p820fix01 — block: una opción por línea siempre */
.por-menu-movil a:hover, .por-menu-movil a:focus-visible { background:#eef2ff; color:#4f46e5; }
/* p820fix01 — en el ordenador, el menú del móvil NO EXISTE aunque se hubiera
   abierto con la ventana estrecha (al ensancharla se quedaba abierto y mal
   maquetado; el guion además lo cierra). */
@media (min-width: 721px) { .por-menu-movil { display:none !important; } }
.por-menu-cerrar { display:block; margin-left:auto; align-self:flex-end; border:0; background:none; font-size:1.1rem; color:#64748b; cursor:pointer; padding:.2rem .5rem; }
@media (max-width: 720px) {
    .por-probar-largo { display:none; }
    .por-probar-corto { display:inline; }
    .por-hamburguesa { display:inline-flex; align-items:center; justify-content:center; }
    .por-marca span { font-size:1.15rem; }
}

/* p821 — LA SERIE DE PISA POR AÑOS: si no cabe, empieza desplazada al final
   (js/portada-tablas.js) y la primera columna (Lectura, Matemáticas…) queda fija
   al deslizar, para que los números no se queden sin nombre. */
.por-tabla-serie th:first-child, .por-tabla-serie td:first-child {
    position:sticky; left:0; z-index:1; background:#fff; box-shadow:4px 0 6px -4px rgba(15,23,42,.18);
}
.por-tabla-serie thead th:first-child { background:#f8fafc; }

/* p824 — /idiomas: nota bajo la tabla de apps (fecha, marcas, corrige). */
.idi-nota { color:#64748b; font-size:.85rem; text-align:justify; hyphens:auto; margin-top:.8rem; }
#apps .idi-tabla table { min-width:900px; }

/* p825 — /idiomas: aviso sobre Duolingo for Schools. */
.idi-aviso { background:#fff7ed; border:1px solid #fdba74; border-radius:12px; padding:1rem 1.1rem; margin:1rem 0; }
.idi-aviso h3 { font-size:1.05rem; margin:0 0 .4rem; text-align:center; }
.idi-aviso p { margin:0; }

/* p826 — /idiomas: «Solo en GetTest» y la marca «pronto». */
.idi-pronto { display:inline-block; font-size:.72rem; font-weight:700; color:#4f46e5; background:#eef2ff;
              border:1px solid #c7d2fe; border-radius:999px; padding:0 .45rem; vertical-align:middle; margin:0 .15rem; }
.idi-h3 { text-align:center; font-size:1.1rem; margin:1.8rem 0 .6rem; }
.idi-lista { max-width:760px; margin:0 auto; padding-left:1.2rem; }
.idi-lista li { margin-bottom:.45rem; text-align:justify; hyphens:auto; line-height:1.55; }

/* p827fix01 — distintivo «🏢 Solo empresas» en la tarjeta de la portada. */
.por-t2-empresas { background:rgba(15,23,42,.55); color:#fff; }

/* p843 — cómo se accede a lo que no es gratuito, bajo los botones de la tarjeta. */
.por-t2-pago { margin:.5rem 0 0; font-size:.85rem; line-height:1.4; }
.por-t2-pago a { font-weight:600; text-decoration:none; }
.por-t2-pago a:hover { text-decoration:underline; }
.por-t2-pago span { color:#64748b; font-size:.8rem; }