/* qorganica.css — hoja de estilos común de qorganica.es / qorganica.com
   Sustituye a coffeegrinder + wireframe-theme + main.css en las páginas nuevas.
   Sin dependencias externas: no carga fuentes ni scripts de terceros. */

:root {
  --tinta: #1d2a2e;
  --tinta-suave: #4b5b60;
  --fondo: #f6f4ef;
  --papel: #ffffff;
  --linea: #dcd7cc;
  --verde: #0f6465;        /* el verde azulado de la web original */
  --verde-claro: #e3efee;
  --granate: #8f1836;      /* el granate del bloque destacado original */
  --granate-claro: #f6e7eb;
  --foco: #e0a100;
  --radio: 10px;
  --ancho: 68rem;
  --texto: 42rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e8ecea;
    --tinta-suave: #a9b7b4;
    --fondo: #141a1b;
    --papel: #1d2526;
    --linea: #33403f;
    --verde: #5cc2c0;
    --verde-claro: #1b3232;
    --granate: #e8869d;
    --granate-claro: #3a2128;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--verde); text-underline-offset: 0.18em; }
a:hover { color: var(--granate); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

.saltar {
  position: absolute; left: -999px; top: 0;
  background: var(--papel); padding: .5rem 1rem; z-index: 10;
}
.saltar:focus { left: 1rem; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cabecera .envoltura {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem;
  padding-top: .6rem; padding-bottom: .6rem;
}
.marca {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--tinta);
  font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  margin-right: auto;
}
.marca img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.marca small { display: block; font-family: var(--sans); font-weight: 400; font-size: .78rem; color: var(--tinta-suave); }
.cabecera nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem 1rem; flex-wrap: wrap; }
@media (max-width: 40rem) { .cabecera nav { width: 100%; } }
.cabecera nav a { text-decoration: none; font-weight: 600; font-size: .95rem; }
.idioma {
  border: 1px solid var(--linea); border-radius: 999px;
  padding: .2rem .75rem; text-decoration: none; font-size: .85rem; white-space: nowrap;
}

/* ---------- Migas de pan ---------- */
.migas { font-size: .85rem; color: var(--tinta-suave); margin: 1.25rem 0 0; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.migas li + li::before { content: "›"; margin-right: .25rem; }

/* ---------- Unidad ---------- */
.titulo-unidad {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.15; margin: .5rem 0 1rem; color: var(--granate);
  text-wrap: balance;
}
.etiqueta { display: block; font-family: var(--sans); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); font-weight: 700; }

.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.acciones a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: var(--papel); border: 1px solid var(--linea);
  text-decoration: none; font-weight: 600; font-size: .92rem;
}
.acciones a:hover { border-color: var(--verde); color: var(--verde); }
.acciones a[aria-current="page"] { background: var(--verde); border-color: var(--verde); color: var(--papel); }

.destacado {
  background: var(--granate); color: #fff;
  border-radius: var(--radio);
  padding: clamp(1.1rem, 3vw, 2rem);
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.45;
  margin: 0 0 2rem;
}
@media (prefers-color-scheme: dark) { .destacado { background: #6f1229; } }
.destacado p, .contenido .destacado p { margin: 0; max-width: none; }

.contenido > section { margin: 0 0 2.5rem; }
.contenido p { max-width: none; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.contenido h2 { font-family: var(--serif); font-size: 1.45rem; line-height: 1.25; margin: 0 0 .5rem; color: var(--verde); }

.bloque {
  display: grid; gap: 1.25rem 2rem; align-items: start;
}
@media (min-width: 48rem) {
  .bloque.dos { grid-template-columns: 1fr 1fr; }
  .bloque.texto-ancho { grid-template-columns: 1.3fr 1fr; }
}

.nota {
  background: var(--verde-claro); border-left: 4px solid var(--verde);
  padding: 1rem 1.25rem; border-radius: 0 var(--radio) var(--radio) 0;
}
.nota p { margin: 0 0 .5rem; }
.nota p:last-child { margin-bottom: 0; }

/* Las figuras van siempre sobre blanco: muchas tienen fondo de color propio */
figure { margin: 0; }
.figura {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .75rem; display: inline-block; max-width: min(100%, 46rem);
}
.figura img { margin: 0 auto; }
figcaption { font-size: .85rem; color: var(--tinta-suave); margin-top: .5rem; }
.figura figcaption { color: #4b5b60; }
.retrato { max-width: 180px; }
.retrato-fila { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }

dfn, .termino { font-style: normal; font-weight: 700; color: var(--granate); }

/* Problemas y soluciones */
.problema { counter-increment: problema; }
.problemas { counter-reset: problema; padding: 0; list-style: none; }
.problema > h2::before { content: counter(problema) ". "; }
.solucion {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1rem 1.25rem; margin-top: 1rem;
}
.solucion h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--verde); }
.descriptores { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .25rem 1rem; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.ver-solucion { margin-top: 1.5rem; }
.boton {
  display: inline-block; background: var(--verde); color: var(--papel);
  padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 700;
}
.boton:hover { background: var(--granate); color: #fff; }

/* Anterior / siguiente */
.paginacion { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: 1.25rem; margin: 3rem 0 0; }
.paginacion a { text-decoration: none; display: block; max-width: 48%; }
.paginacion span { display: block; font-size: .8rem; color: var(--tinta-suave); }
.paginacion .sig { text-align: right; margin-left: auto; }

/* ---------- Pie ---------- */
.pie {
  margin-top: 3rem; padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--linea); background: var(--papel);
  font-size: .88rem; color: var(--tinta-suave);
}
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.pie .logos { display: flex; gap: 1rem; align-items: center; }
.pie .logos img { height: 56px; width: auto; background: #fff; border-radius: 6px; padding: 2px; }

/* ---------- Portada ---------- */
.portada-hero {
  position: relative; color: #fff; overflow: hidden;
  background: #0b2f30;
}
.portada-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55;
}
.portada-hero .envoltura { position: relative; padding-top: clamp(3rem, 10vw, 7rem); padding-bottom: clamp(3rem, 10vw, 7rem); }
.portada-hero h1 { font-family: var(--serif); font-size: clamp(2.2rem, 1.4rem + 4vw, 4.2rem); line-height: 1.05; margin: 0 0 .75rem; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.portada-hero p { margin: 0; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.portada-hero p span { display: block; opacity: .85; font-style: italic; }

.tarjetas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 2.5rem 0; }
.tarjeta {
  display: flex; flex-direction: column; background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  text-decoration: none; color: var(--tinta); transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); color: var(--tinta); }
.tarjeta img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: #fff; }
.tarjeta div { padding: 1rem 1.1rem 1.2rem; }
.tarjeta h2 { font-family: var(--serif); margin: 0; font-size: 1.35rem; color: var(--verde); }
.tarjeta h2 span, .tarjeta p span { display: block; font-size: .85em; color: var(--tinta-suave); font-weight: 400; }
.tarjeta p { margin: .4rem 0 0; font-size: .95rem; }

.en { color: var(--tinta-suave); font-style: italic; }

@media (prefers-reduced-motion: reduce) { .tarjeta { transition: none; } .tarjeta:hover { transform: none; } }

@media print {
  .cabecera nav, .acciones, .paginacion, .pie .logos, .saltar { display: none; }
  body { background: #fff; color: #000; }
  .destacado { background: none; color: #000; border: 2px solid #000; }
}

/* ---------- Mapa del curso (QOT/mapa.js) ---------- */
.mapa-boton {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--verde); color: var(--papel); border-radius: 999px;
  padding: .3rem .85rem; font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap;
}
.mapa-boton:hover { background: var(--granate); color: #fff; }
.mapa-boton svg { width: 1em; height: 1em; }

dialog.mapa-panel {
  margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(30rem, 100%); max-width: 100%;
  border: 0; padding: 0; background: var(--papel); color: var(--tinta);
  box-shadow: -10px 0 30px rgba(0,0,0,.25); display: none; flex-direction: column;
}
dialog.mapa-panel[open] { display: flex; }
dialog.mapa-panel::backdrop { background: rgba(10, 20, 20, .45); }
.mapa-cabecera { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem .4rem; }
.mapa-cabecera h2 { margin: 0; font-family: var(--serif); font-size: 1.35rem; color: var(--granate); }
.mapa-cerrar { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--tinta-suave); padding: .1rem .5rem; border-radius: 6px; }
.mapa-cerrar:hover { background: var(--verde-claro); color: var(--tinta); }
.mapa-herramientas { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .25rem 1rem .75rem; border-bottom: 1px solid var(--linea); }
.mapa-buscar { flex: 1 1 12rem; font: inherit; font-size: .95rem; padding: .45rem .7rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); color: var(--tinta); }
.mapa-imprimir { font-size: .85rem; }
.mapa-cuerpo { overflow-y: auto; padding: .5rem .75rem 2rem; flex: 1; }
.mapa-vacio { color: var(--tinta-suave); padding: 0 .5rem; }

.mapa-temas, .mapa-temas ul { list-style: none; margin: 0; padding: 0; }
.mapa-temas > li { border-bottom: 1px solid var(--linea); }
.mapa-tema > summary {
  cursor: pointer; padding: .6rem .25rem; display: flex; gap: .5rem; align-items: baseline;
  font-family: var(--serif); font-weight: 700; font-size: 1.02rem; list-style: none;
}
.mapa-tema > summary::-webkit-details-marker { display: none; }
.mapa-tema > summary::before { content: "▸"; color: var(--verde); transition: transform .15s; display: inline-block; width: .8em; }
.mapa-tema[open] > summary::before { transform: rotate(90deg); }
.mapa-tema > summary a { text-decoration: none; color: var(--tinta); }
.mapa-tema > summary a:hover { color: var(--granate); text-decoration: underline; }
.mapa-num { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--verde); white-space: nowrap; min-width: 4.2em; }
.mapa-tema.es-actual > summary { color: var(--granate); }
.mapa-tema > ul, .mapa-tema > .mapa-seccion { margin-left: 1.3rem; }
.mapa-tema > ul:last-child { padding-bottom: .6rem; }
.mapa-seccion { margin: .5rem 0 .15rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.mapa-temas ul ul { margin-left: 1.1rem; border-left: 1px dotted var(--linea); padding-left: .2rem; }
.mapa-fila { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; padding: .12rem 0 .12rem 1.45rem; font-size: .93rem; line-height: 1.35; }
.mapa-fila > a:first-of-type { text-decoration: none; color: var(--tinta); }
.mapa-fila > a:first-of-type:hover { color: var(--granate); text-decoration: underline; }
.mapa-plegar, .mapa-hueco { position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.2rem; }
.mapa-plegar { border: 0; background: none; cursor: pointer; padding: 0; color: var(--verde); font-size: .8rem; border-radius: 4px; }
.mapa-plegar::before { content: "▸"; display: inline-block; transition: transform .15s; }
.mapa-plegar[aria-expanded="true"]::before { transform: rotate(90deg); }
.mapa-plegar:hover { background: var(--verde-claro); }
.mapa-ej { font-size: .75rem; color: var(--verde); }
.mapa-nota { font-size: .72rem; color: var(--tinta-suave); font-style: italic; }
.mapa-aqui { background: #fff1a8; color: #3b2f00 !important; border-radius: 4px; padding: 0 .25rem; font-weight: 700; }
@media (prefers-color-scheme: dark) { .mapa-aqui { background: #6b5a00; color: #fff7cc !important; } }
.mapa-marca { font-size: .7rem; font-weight: 700; color: var(--granate); text-transform: uppercase; letter-spacing: .04em; }
.mapa-coincide > .mapa-fila > a:first-of-type { background: var(--verde-claro); border-radius: 4px; }
.mapa-oculto { display: none !important; }

/* Página mapa.html */
.mapa-pagina .mapa-herramientas { padding: 0 0 1rem; border: 0; }
.mapa-pagina .mapa-temas > li { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .6rem; padding: 0 .75rem; }
@media print {
  .no-imprimir, .mapa-plegar, .mapa-ej, .mapa-marca { display: none !important; }
  .mapa-temas ul[hidden] { display: block !important; }
  .mapa-pagina .mapa-temas > li { border: 0; padding: 0; break-inside: avoid-page; }
  .mapa-tema > summary::before { content: ""; }
  .mapa-fila > a { color: #000 !important; }
}

/* ---------- Figura: las ocho D-aldohexosas (T1 Estereoquímica) ---------- */
.hexosas { background: #fff; color: #1d2a2e; border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(.5rem, 2vw, 1rem); max-width: 52rem; }
.hx-rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .hx-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hx-tarjeta { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fbf8ef; border: 1px solid #ece4cf; border-radius: 10px; padding: .6rem .4rem .75rem; line-height: 1.3; }
.hx-fischer { width: 100%; max-width: 9.5rem; height: auto; font: 700 15px/1 Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif; fill: #1d2a2e; }
.hx-trazo line { stroke: #1d2a2e; stroke-width: 1.6; stroke-linecap: round; }
.hx-fischer .hx-sub { font-size: 11px; }
.hx-fischer .hx-num { font-size: 9px; font-weight: 400; fill: #8a9497; }
.hx-oh-r, .hx-r { fill: #0f6465; color: #0f6465; }
.hx-oh-s, .hx-s { fill: #a01c3c; color: #a01c3c; }
.hx-nombre { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; margin-top: .25rem; }
.hx-sc { font-variant: small-caps; text-transform: lowercase; }
.hx-desc { font-weight: 700; letter-spacing: .12em; font-size: 1rem; }
.hx-pf { font-size: .85rem; color: #4b5b60; }
.hx-alfa { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; margin-top: .15rem; white-space: nowrap; }
.hx-supsub { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: .62em; line-height: 1; margin: 0 .1em; }
.hx-supsub sup, .hx-supsub sub { vertical-align: baseline; font-size: 1em; }
.hexosas figcaption { margin-top: .85rem; color: #4b5b60; }
.hexosas figcaption .hx-r, .hexosas figcaption .hx-s { font-weight: 700; }

/* ---------- Páginas convertidas desde RLM ---------- */
.contenido > h2, .contenido > div > h2 { margin-top: 2rem; }
.contenido > p, .contenido > .figura, .contenido > .destacado, .contenido > .galeria, .contenido > .bloque, .contenido > .tarjetas { margin-top: 0; margin-bottom: 1.25rem; }
.contenido .figura { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.contenido .bloque .figura, .contenido .galeria .figura { margin: 0 auto; }
.destacado-titulo { font-weight: 700; font-size: 1.15em; margin-bottom: .4rem !important; }
.destacado strong { color: #ffe9a8; font-weight: 700; }
.destacado .t-rojo, .destacado .t-azul, .destacado .t-morado, .destacado .t-verde { color: #ffe9a8; }
.bloque.cols-2, .bloque.cols-3 { display: grid; gap: 1.25rem 2rem; align-items: center; margin-bottom: 1.5rem; }
@media (min-width: 48rem) {
  .bloque.cols-2 { grid-template-columns: 1fr 1fr; }
  .bloque.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.bloque > div > p:first-child { margin-top: 0; }
.galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: center; margin-bottom: 1.5rem; }
.galeria figcaption, .figura figcaption { text-align: center; }
.figura.video a { position: relative; display: block; text-decoration: none; }
.video-etiqueta { display: block; margin-top: .4rem; text-align: center; font-weight: 700; font-size: .9rem; color: var(--granate); }
.tarjetas-tema { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin: 1rem 0 2rem; }
.tarjetas-tema .tarjeta img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.tarjetas-tema h3 { font-family: var(--serif); font-size: 1.1rem; margin: 0; color: var(--verde); }
.boton-claro { background: var(--verde-claro); color: var(--verde); border: 1px solid var(--verde); }
.boton-claro:hover { background: var(--verde); color: var(--papel); }
.t-rojo { color: #c0182f; } .t-azul { color: #1d44c8; } .t-morado { color: #7b2fb8; } .t-verde { color: #0f6e3a; }
@media (prefers-color-scheme: dark) { .t-rojo { color: #ff8a98; } .t-azul { color: #9db4ff; } .t-morado { color: #d4a9ff; } .t-verde { color: #7fd8a5; } }
.t-sobre { text-decoration: overline; }

/* Dominios en la cabecera */
.marca-dominios { display: block; white-space: nowrap; }
.marca-sep { color: var(--tinta-suave); font-weight: 400; margin: 0 .1em; }
@media (max-width: 26rem) { .marca { font-size: 1.02rem; } }

/* ---------- Índice del tema (columna izquierda; lo rellena mapa.js) ---------- */
.con-indice { max-width: 80rem; display: flex; flex-direction: column; gap: 0 2.25rem; }
.con-indice > main { flex: 1 1 0; min-width: 0; }
.indice-tema:empty { display: none; }
.indice-tema { margin: 1rem 0 0; }
.indice-plegable { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0 .9rem; }
.indice-plegable > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .5rem; padding: .7rem 0; font-weight: 700; color: var(--granate); }
.indice-plegable > summary::-webkit-details-marker { display: none; }
.indice-plegable > summary::before { content: "▸"; color: var(--verde); display: inline-block; width: .8em; transition: transform .15s; }
.indice-plegable[open] > summary::before { transform: rotate(90deg); }
.indice-plegable[open] { padding-bottom: .8rem; }
.indice-titulo { margin: .2rem 0 .4rem; display: flex; flex-direction: column; gap: .1rem; font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
.indice-titulo a { color: var(--tinta); text-decoration: none; }
.indice-titulo a:hover { color: var(--granate); text-decoration: underline; }
.indice-tema ul { list-style: none; margin: 0 0 .3rem; padding: 0; }
.indice-tema ul ul { margin: 0 0 0 .8rem; }
.indice-tema li > a { display: block; padding: .32rem .55rem; border-radius: 6px; color: var(--tinta); text-decoration: none; font-size: .93rem; line-height: 1.3; }
.indice-tema li > a:hover { background: var(--verde-claro); color: var(--verde); }
.indice-tema li > a.indice-aqui { background: var(--verde); color: #fff; font-weight: 700; }
.indice-tema .indice-titulo a.indice-aqui { background: var(--verde); color: #fff; border-radius: 6px; padding: .1rem .4rem; }
.indice-tema li > a.indice-sub { margin: .15rem 0 .15rem .9rem; font-size: .85rem; padding: .2rem .55rem; }
.indice-tema li > a.indice-sub:not(.indice-aqui) { background: none; }
.indice-tema .mapa-seccion { margin: .7rem 0 .2rem; }
@media (prefers-color-scheme: dark) { .indice-tema li > a.indice-aqui, .indice-tema .indice-titulo a.indice-aqui { color: #0e1a1a; } }
@media (min-width: 60rem) {
  .con-indice { flex-direction: row; align-items: flex-start; }
  .indice-tema { flex: 0 0 15.5rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; margin-top: 1.5rem; }
  .indice-plegable > summary { display: none; }
  .indice-plegable { padding-top: .8rem; }
}
@media print { .indice-tema { display: none; } }
body:has(.con-indice) .cabecera .envoltura, body:has(.con-indice) .pie .envoltura { max-width: 80rem; }

/* ---------- Fórmulas y diapositivas redibujadas en HTML (T1) ---------- */
.formula { background: #fff; color: #1d2a2e; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1rem 1.25rem; font-family: Arial, "Helvetica Neue", "Liberation Sans", sans-serif; max-width: 100%; }
.formula .eq { display: block; text-align: center; line-height: 2.4;
  margin: .55rem 0; font-size: 1.15rem; font-weight: 700; max-width: none; }
.formula .eq > * { vertical-align: middle; }
.formula .eq-pk { font-size: 1.7rem; font-style: italic; line-height: 1.6; }
.formula .eq-pk i, .formula .eq-pk sub { font-style: italic; }
.formula .eq-raya { border-top: 2px solid #1d2a2e; padding-top: .7rem; margin-top: .9rem; }
.eq-a { color: #c8102e; } .eq-b { color: #1736c9; }
.formula sup, .formula sub { font-size: .68em; }
.eq-flecha { display: inline-flex; vertical-align: middle; flex-direction: column; align-items: center; line-height: 1; font-weight: 700; padding: 0 .2em; }
.eq-flecha i { font-size: .85em; white-space: nowrap; line-height: 1.2; }
.eq-flecha > span { font-size: 1.5em; line-height: .9; }
.eq-caja { display: inline-flex; vertical-align: middle; margin: 0 .15em; flex-direction: column; align-items: center; border: 2px solid #1d2a2e; line-height: 1.15;
  box-shadow: 3px 3px 0 #1d2a2e; padding: .25em .6em; line-height: 1.15; background: #fff; }
.eq-caja small { font-size: .78em; color: #1d2a2e; }
.eq-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; }
.eq-frac > span { padding: 0 .35em; }
.eq-frac > span:first-child { border-bottom: 2px solid #1d2a2e; }
.formula-lista .eq-especies { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  justify-content: center; font-size: 1.1rem; }
.eq-letra { font-weight: 700; color: #4b5b60; }
.formula-tabla .eq-tabla { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0; border: 1px solid #c9c2b2; }
.formula-tabla .eq-tabla > div { padding: .7rem 1rem; }
.formula-tabla .eq-tabla > div + div { border-left: 1px solid #c9c2b2; }
.formula-tabla h3 { margin: 0 0 .25rem; font-size: 1.1rem; color: #0f6465; }
.formula-tabla p { margin: 0 0 .4rem; }
.eq-quimica { font-size: 1.12rem; }
@media (max-width: 30rem) { .formula-tabla .eq-tabla > div + div { border-left: 0; border-top: 1px solid #c9c2b2; } }
/* diapositivas de reglas (Estructuras de Lewis) */
.diapo { background: #fffbe0; color: #1d2a2e; border: 1px solid #e8d48a; border-radius: var(--radio);
  padding: .9rem 1.1rem 1rem; max-width: 40rem; font-family: Arial, "Helvetica Neue", "Liberation Sans", sans-serif; }
.diapo-tit { margin: 0 0 .7rem; text-align: center; font-family: var(--serif); font-size: 1.45rem; color: #2b3aa8;
  background: #fbd67a; border-radius: 6px; padding: .3rem .5rem; }
.diapo-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 34rem) { .diapo-cols { grid-template-columns: 1fr; } }
.diapo-pasos { margin: 0; padding-left: 1.4rem; font-weight: 700; line-height: 1.35; }
.diapo-pasos li { margin-bottom: .45rem; }
.diapo-pasos li::marker { color: #c8102e; }
.diapo-ej h4 { margin: 0 0 .35rem; color: #c8102e; font-size: 1.1rem; }
.diapo .lw-nunca { color: #c8102e; }
.diapo-lista { margin: 0; padding-left: 1.2rem; font-weight: 700; line-height: 1.35; }
.diapo-lista li { margin-bottom: .4rem; }
.diapo-lista li::marker { color: #c8102e; }
.diapo-rojo { color: #c8102e; } .diapo-azul { color: #2b3aa8; }
.lw-svg { width: 7.5rem; height: auto; display: block; background: #fff; border-radius: 4px; font: 700 19px Arial, sans-serif; fill: #1d2a2e; }
.lw-enl line { stroke: #1a8a3a; stroke-width: 2.4; }
.lw-n { fill: #c8102e; }
.lw-par { stroke: #2b3aa8; stroke-width: 2.6; }

/* pie común de una galería (Quiralidad: alenos, bifenilos, binaftilos) */
.grupo-figuras { margin: 0 0 2.25rem; }
.grupo-figuras > .galeria { margin-bottom: .4rem; }
.grupo-figuras > figcaption { text-align: center; font-weight: 700; letter-spacing: .06em; color: var(--verde); }

/* ---------- Página «en preparación» (ejercicios y soluciones aún no disponibles) ---------- */
.en-preparacion { max-width: 36rem; margin: 1rem auto 2rem; text-align: center; background: var(--papel);
  border: 1px dashed var(--verde); border-radius: var(--radio); padding: 2rem 1.5rem 1.6rem; }
.en-prep-icono { width: 3.2rem; height: 3.2rem; color: var(--verde); display: block; margin: 0 auto .5rem; }
.en-preparacion .en-prep-lema { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--granate); text-align: center; }
.en-preparacion h2 { margin: .25rem 0 .75rem; }
.contenido .en-preparacion p { text-align: center; max-width: none; }
.en-prep-acciones { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.25rem !important; }

/* ---------- Ejercicios de Grupos funcionales (T1) ---------- */
.gf-ej { margin: 0 0 2.5rem; }
.gf-mols { display: grid; grid-auto-flow: row dense; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 1rem; }
.gf-mol { margin: 0; background: #fff; color: #1d2a2e; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .75rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.gf-mol svg.estructura { max-width: 100%; height: auto; }
@media (min-width: 40rem) { .gf-mols { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .gf-ancha { grid-column: span 2; } }
.gf-mol figcaption { margin-top: .4rem; font-size: .9rem; color: #1d2a2e; line-height: 1.35; }
.gf-lista, .gf-formulas { margin: .25rem 0 1rem; padding-left: 1.8rem; }
.gf-lista li, .gf-formulas li { margin-bottom: .35rem; }
.gf-formulas li::marker, .gf-lista li::marker { font-weight: 700; color: var(--verde); }
.gf-formulas-linea { font-size: 1.15rem; font-weight: 700; text-align: center !important; }
.gf-leyenda { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .92rem; }
.gf-color { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; opacity: .6; margin-right: .35rem; vertical-align: -.1rem; }
.gf-relaciona { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .5rem 1.5rem; }
.gf-relaciona h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--verde); }
.gf-grupos6 { text-align: left !important; }
.gf-dl dt { font-weight: 700; color: var(--verde); margin-top: .6rem; }
.gf-dl dd { margin: .15rem 0 0 1.2rem; }
.tabla-scroll { overflow-x: auto; }
.gf-tabla { border-collapse: collapse; width: 100%; min-width: 30rem; background: var(--papel); }
.gf-tabla th, .gf-tabla td { border: 1px solid var(--linea); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.gf-tabla th { background: var(--verde-claro); color: var(--verde); }

.gf-mols-una { grid-template-columns: minmax(0, 22rem) !important; justify-content: center; }
.gf-mols-una .gf-ancha { grid-column: auto; }

/* ---------- Tablas de datos y visores 3D (Tema 2) ---------- */
.tabla-scroll { overflow-x: auto; margin: 1rem 0; }
.tabla-datos { border-collapse: collapse; margin: 0 auto; background: var(--papel); }
.tabla-datos th, .tabla-datos td { border: 1px solid var(--linea); padding: .45rem .9rem; text-align: center; }
.tabla-datos th { background: var(--verde-claro); color: var(--verde); }
.tabla-datos a { font-weight: 600; }
.visor3d-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.visor3d-fig { margin: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: .6rem; padding: .6rem; text-align: center; }
.visor3d { width: 100%; max-width: 260px; aspect-ratio: 1; margin: 0 auto; background: #fff; border-radius: .4rem; }
.visor3d.visor3d-sin::after { content: "3D"; display: grid; place-items: center; height: 100%; color: #999; font-weight: 700; }
.visor3d-fig figcaption { margin-top: .4rem; font-size: .92rem; }
.bloque > div { min-width: 0; }

/* ---------- Ventanas (antiguos popUp) ---------- */
dialog.ventana { width: min(46rem, 94vw); height: min(40rem, 88vh); padding: 0; border: 1px solid var(--linea); border-radius: .8rem; background: var(--papel); box-shadow: 0 1rem 3rem rgba(0,0,0,.3); overflow: hidden; }
dialog.ventana::backdrop { background: rgba(20, 30, 30, .55); }
.ventana-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .6rem .5rem 1rem; background: var(--verde-claro); color: var(--verde); font-weight: 700; }
.ventana-cerrar { border: 0; background: transparent; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .4rem; }
.ventana-marco { display: block; width: 100%; height: calc(100% - 2.6rem); border: 0; background: var(--papel); }
.ventana-pagina { background: var(--papel); }
.ventana-contenido { max-width: 44rem; margin: 0 auto; padding: 1rem 1.2rem 2rem; }
.ventana-contenido .titulo-unidad { font-size: 1.7rem; margin-top: 0; }
.en-ventana .ventana-contenido .titulo-unidad, .en-ventana .ventana-volver { display: none; }
.ventana-volver { margin-top: 1.5rem; }
.contenido .respuesta { font-weight: 600; }

/* ---------- Ejercicios del Tema 2 ---------- */
.enunciado { color: var(--tinta-suave, #555); font-size: .95rem; border-left: 3px solid var(--linea); padding-left: .8rem; margin-bottom: .6rem; }
.enunciado p { margin: .3rem 0; }
.solucion > p:first-child { margin-top: .4rem; }
.contenido p.pie-galeria { text-align: center; font-size: .85rem; color: #4b5b60; margin-top: -.5rem; }
/* Tarjetas de enlace dentro de los temas: título centrado (horizontal y verticalmente) */
.tarjetas-tema .tarjeta > div { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.contenido p.ecuacion { text-align: center; font-size: 1.05rem; margin: .25rem 0 1.25rem; }
.galeria.galeria-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
/* ---------- Correcciones 2 ---------- */
/* tarjetas de los temas: filas centradas (la última fila incompleta queda en el centro) */
.tarjetas-tema { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.tarjetas-tema > .tarjeta { flex: 0 1 calc((100% - 3.75rem) / 4); min-width: min(100%, 12rem); }
@media (max-width: 560px) { .tarjetas-tema > .tarjeta { flex-basis: calc(50% - .625rem); min-width: 0; } }
/* figura enlazada con su título debajo, como el de una tarjeta */
.contenido .figura-enlace { margin-bottom: 2.25rem; }
.figura-enlace figcaption { margin-top: .6rem; text-align: center; }
.figura-enlace figcaption a { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--verde); text-decoration: none; }
.figura-enlace figcaption a:hover { text-decoration: underline; }
.contenido h2.separado { margin-top: 2rem; }
.contenido p.centrado, .contenido p.pie-centro { text-align: center; }
.contenido p.pie-centro { font-size: .95rem; margin-top: .5rem; }
.contenido p.pregunta { text-align: center; color: var(--verde); }
.galeria.galeria-arriba { align-items: start; }
.columna-figura { display: flex; flex-direction: column; align-items: center; }
.tabla-datos td img.celda-fig { display: block; max-width: 150px; width: 100%; height: auto; margin: .9rem auto 0; }
.contenido div.nota ul { margin: .4rem 0 0; }
/* Tema 4: visores 3D e imágenes dentro de las tablas */
.tabla-datos .visor3d-celda { width: 170px; min-width: 150px; max-width: 170px; }
.tabla-datos th img.celda-fig { display: block; margin: .3rem auto; max-width: 100%; height: auto; }

/* Tema 4, correcciones 3 */
.tabla-datos td.celda-texto { font-size: .88em; }
.tarjetas-tema.tarjetas-3 > .tarjeta { flex-basis: calc((100% - 2.5rem) / 3); }
@media (max-width: 560px) { .tarjetas-tema.tarjetas-3 > .tarjeta { flex-basis: calc(50% - .625rem); } }
@media (min-width: 48rem) {
  .bloque.par-alineado { grid-template-rows: auto auto; align-items: start; row-gap: .75rem; }
  .bloque.par-alineado > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: .75rem; }
  .bloque.par-alineado > div > .figura { align-self: center; }
}
.par-texto > h3:first-child { margin-top: 0; }
.tabla-acidez td img.celda-eq { max-width: 330px; margin: .3rem auto; }
.tabla-acidez td, .tabla-acidez th { vertical-align: middle; }
.tabla-acidez td:nth-child(3) { white-space: nowrap; }
/* Tema 5: tabla de pKb de una anilina sustituida (ventanas) */
.tabla-pkb caption { caption-side: top; font-size: .85rem; color: var(--tinta-suave); margin-bottom: .35rem; }
.tabla-pkb tr.fila-resaltada td { background: var(--verde-claro); font-weight: 700; }

/* Tema 5, correcciones 4: figura y texto en la misma fila */
.fila-fig { display: grid; gap: 1.25rem 2rem; align-items: center; margin-bottom: 1.5rem; }
.fila-fig > div { min-width: 0; }
@media (min-width: 48rem) {
  .fila-fig { grid-template-columns: 3fr 2fr; }
  .fila-fig.fig-der { grid-template-columns: 2fr 3fr; }
  .fila-fig.mitad { grid-template-columns: 1fr 1fr; }
  .fila-fig.fig-estrecha { grid-template-columns: 2fr 3fr; }
  .fila-fig.tres { grid-template-columns: 2.4fr 1.6fr 1fr; }
  .contenido .fila-fig:not(.fig-der) > div:first-child > .figura, .fila-fig .col-figs > .figura { margin-left: 0; margin-right: auto; }
  .contenido .fila-fig.fig-der > div:last-child > .figura { margin-left: auto; margin-right: 0; }
}
.fila-fig > div > p:first-child { margin-top: 0; }
.fila-fig > div > p:last-child { margin-bottom: 0; }
.col-figs { display: flex; flex-direction: column; gap: 1rem; }
.col-centro { display: flex; flex-direction: column; align-items: center; }
.col-centro .figura { margin-bottom: .5rem !important; }
.contenido .figura.retrato { max-width: 180px; margin-left: auto; margin-right: auto; }
.contenido .figura.escala { width: 100%; }
.contenido .figura.escala img { width: 100%; height: auto; }
.contenido p.nota.centrado { text-align: center; }
.fila-figs { display: grid; gap: 1rem 1.5rem; align-items: center; margin-bottom: 1rem; }
@media (max-width: 47.99rem) { .fila-figs { grid-template-columns: 1fr !important; } }
.contenido h3.titulo-fig { text-align: center; font-size: 1.05rem; margin: 0 0 .5rem; }
.bloque.alinear-arriba { align-items: start; }
.contenido h3.etapa { margin: 1.75rem 0 .75rem; color: var(--verde); font-family: var(--serif); font-size: 1.2rem; }
.bloque.par-etapa { margin-bottom: .75rem; }

/* Tema 6: tabla de propiedades físicas de alcanos y alquenos */
.tabla-pfis caption { caption-side: top; font-size: .85rem; color: var(--tinta-suave); margin-bottom: .35rem; }
.tabla-pfis td:first-child { text-align: left; }
.tabla-pfis tr.fila-alqueno td { background: var(--verde-claro); }

.tabla-krel { max-width: 24rem; margin-inline: auto; }
.tabla-krel caption { caption-side: top; font-size: .85rem; color: var(--tinta-suave); margin-bottom: .35rem; }
.tabla-krel td:first-child { text-align: left; }

.contenido .figura.retrato-m { max-width: 280px; margin-left: auto; margin-right: auto; }

/* Tabla de nitraciones de bencenos sustituidos (T6): seis columnas juntas sobre negro, como en el original */
.contenido .galeria.tabla-nitracion { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: #000; padding: 0; margin: 0 auto; max-width: 46rem; }
.contenido .galeria.tabla-nitracion + .galeria.tabla-nitracion { margin-top: 0; margin-bottom: 1.5rem; border-top: 4px solid #000; }
.contenido .tabla-nitracion .figura { padding: 0; border: 0; border-radius: 0; background: #000; width: 100%; max-width: none; }
.contenido .tabla-nitracion .figura img { width: 100%; height: auto; display: block; }

/* Series de formas resonantes en una sola fila, dentro de un único recuadro */
.contenido .galeria.galeria-fila { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem; max-width: 46rem; margin-left: auto; margin-right: auto; }
.contenido .galeria-fila .figura { border: 0; padding: 0; border-radius: 0; background: transparent; }
.contenido .galeria-fila .figura img { width: 100%; height: auto; }
.contenido .figura.figura-ancha { width: 100%; max-width: 46rem; }
.contenido .figura.figura-ancha img { width: 100%; height: auto; }
.contenido .tabla-reduccion caption { caption-side: top; font-weight: 600; padding: .4rem .2rem .6rem; color: var(--verde); }
.contenido .tabla-reduccion td:first-child { font-weight: 600; }
.contenido .pie-tabla { font-size: .9em; color: #5b5547; text-align: center; margin-top: .4rem; }
.contenido .gf-tabla-texto { min-width: 0; }
.contenido .figura.figura-natural { max-width: 100%; }
.contenido .figura.retrato-bio { float: right; margin: 0 0 .75rem 1rem; padding: .4rem; }
.contenido .figura.retrato-bio img { width: 220px; height: auto; }
@media (max-width: 30rem) { .contenido .figura.retrato-bio { float: none; margin: 0 auto 1rem; } }
.contenido .videos-par { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.25rem; }
.contenido .videos-par .figura { margin: 0; }
.haworth { display: block; max-width: 100%; height: auto; margin: 0 auto; font: 13px Arial, "Liberation Sans", sans-serif; color: #1d2a2e; }
.haworth .hw-o { fill: #c0392b; }
.contenido .fila-haworth { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1rem 0; }
.contenido .fila-haworth .figura { margin: 0; padding: .5rem; }
.haworth .hw-ax { stroke: #1f6fb2; }
.haworth .hw-eq { stroke: #2e8b57; }
.t-ax { color: #1f6fb2; font-weight: 600; }
.t-eq { color: #2e8b57; font-weight: 600; }
.par-haworth { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.par-haworth .haworth { margin: 0; }
.fila-haworth figcaption { max-width: 34rem; margin-left: auto; margin-right: auto; }
.destacado a, .contenido .destacado a { color: #ffe9a8; text-decoration-color: rgba(255,233,168,.6); }
/* T11: dos figuras que forman un solo esquema, sin separación; tablas figura | pKa | comentario con más sitio para el texto */
.contenido .figura.par-unido { display: flex; justify-content: center; align-items: center; gap: 0; }
.contenido .figura.par-unido img { margin: 0; min-width: 0; flex: 0 1 auto; height: auto; }
@media (min-width: 48rem) { .bloque.cols-3.pka { grid-template-columns: minmax(0, .7fr) minmax(0, .5fr) minmax(0, 2.3fr); gap: 1rem 1.25rem; } }
.enlace-azul { color: #1a3fd6; }
@media (prefers-color-scheme: dark) { .enlace-azul { color: #7ea2ff; } }

/* ---------- Portada del curso (QOT/T00/inicio_exported; la genera build_t00.py) ---------- */
.portada-curso { padding-top: 1.5rem; padding-bottom: 1rem; }
.portada-curso .titulo-unidad .subtitulo { display: block; font-size: .5em; font-weight: 400; font-style: italic; color: var(--tinta-suave); margin-top: .35rem; }
.portada-curso .acciones { margin-bottom: .6rem; }
.portada-curso .acciones-en { margin-bottom: 2rem; }
.portada-curso .acciones-en a { font-style: italic; }
.portada-curso .destacado p + p { margin-top: .8rem; font-style: italic; opacity: .92; }
.portada-curso .contenido h2 { margin-top: 2.25rem; }
.portada-curso .contenido h2 span { display: block; font-size: .7em; font-weight: 400; font-style: italic; color: var(--tinta-suave); }
.tarjeta-bilingue { position: relative; }
.tarjeta-bilingue h3 a { color: inherit; text-decoration: none; }
.tarjeta-bilingue h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.portada-curso .contenido h2.rotulo-seccion { text-align: center; font-size: 1.65rem; margin: 2.5rem 0 1.25rem; }
.portada-curso .contenido h2.rotulo-seccion span { font-size: .6em; }
.portada-curso .tarjeta-bilingue h3, .contenido .tarjetas-tema .tarjeta-bilingue > div > p, .contenido .tarjetas-tema .tarjeta-video > div > p { text-align: center; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
.contenido .tarjeta-bilingue p, .contenido .tarjeta-video p { position: relative; z-index: 1; margin: .35rem 0 0; font-size: .92rem; font-style: italic; text-align: center; -webkit-hyphens: manual; hyphens: manual; }
.tarjeta-bilingue p a { color: var(--tinta-suave); }
.tarjeta-bilingue p a:hover { color: var(--granate); }
.tarjetas-tema .tarjeta-bilingue > div { flex-direction: column; }
.tarjeta-bilingue:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.tarjeta-bilingue h3 a:focus-visible { outline: none; }
.tarjeta-num { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--granate); margin-bottom: .2rem; }
.tarjeta-num span { color: var(--tinta-suave); font-weight: 400; }
.tarjetas-intro { align-items: stretch; }
.tarjetas-intro .tarjeta-bilingue img { flex: 1; min-height: 0; }
.tarjetas-intro > .tarjeta { flex-basis: calc((100% - 2.5rem) / 4); }
.tarjetas-intro > .tarjeta-video { flex-basis: calc((100% - 2.5rem) / 2); }
.tarjeta-video .video-marco { position: relative; display: block; flex: 1; background: #000; }
.tarjetas-tema .tarjeta-video img { aspect-ratio: auto; height: 100%; object-fit: cover; background: #000; }
.tarjeta-video .video-play { position: absolute; left: 50%; top: 50%; width: 4.2rem; height: 3rem; transform: translate(-50%, -50%); background: rgba(196, 0, 0, .9); border-radius: 14px; }
.tarjeta-video .video-play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .7rem 0 .7rem 1.15rem; border-color: transparent transparent transparent #fff; }
.tarjeta-video:hover .video-play { background: #e00000; }
.tarjetas-tema .tarjeta-video > div { flex: 0 0 auto; flex-direction: column; }
.tarjeta-video p { margin: .2rem 0 0; font-style: italic; color: var(--tinta-suave); font-size: .92rem; }
@media (max-width: 760px) {
  .tarjetas-intro > .tarjeta { flex-basis: calc(50% - .625rem); }
  .tarjetas-intro > .tarjeta-video { flex-basis: 100%; order: -1; }
}
/* ---------- Tema 0 (maqueta_t0.py) ---------- */
.bloque.cols-4 { display: grid; gap: 1.25rem 1.5rem; align-items: start; margin-bottom: 1.5rem; }
@media (min-width: 40rem) { .bloque.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .bloque.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.tarjetas-tema .tarjeta > div:has(> p) { flex-direction: column; justify-content: flex-start; }
.tarjetas-tema .tarjeta > div > p { margin: .45rem 0 0; font-size: .9rem; line-height: 1.45; text-align: left; color: var(--tinta-suave); -webkit-hyphens: auto; hyphens: auto; }

/* ---------- Portada y página de cursos (build_portada.py) ---------- */
.titulo-en { display: block; font-size: .5em; font-weight: 400; font-style: italic; color: var(--tinta-suave); margin-top: .2rem; }
.destacado .destacado-en { margin-top: .6rem; opacity: .85; font-style: italic; }
.destacado.centrado, .destacado.centrado p { text-align: center; }
.cursos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin: 2rem 0 1rem; }
.curso {
  display: flex; flex-direction: column; background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.curso:hover, .curso:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.16); color: var(--tinta); }
.curso-portada { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0d1b2a; }
.curso-portada::before {   /* la misma carátula, desenfocada, rellena los márgenes */
  content: ""; position: absolute; inset: -20px; background: var(--caratula) center / cover no-repeat;
  filter: blur(18px) brightness(.7); transform: scale(1.1);
}
.curso-portada img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.curso-texto { flex: 1; display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.15rem 1.2rem; }
.curso-texto p { margin: 0; }
.curso-num { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--verde); }
.curso-num span { color: var(--tinta-suave); font-weight: 400; }
.curso h2 { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; margin: 0; color: var(--granate); }
.curso h2 span, .curso-sub span { display: block; font-size: .8em; font-weight: 400; font-style: italic; color: var(--tinta-suave); }
.curso-sub { font-size: .95rem; }
.curso-estado { margin-top: auto; align-self: flex-start; padding: .2rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--granate-claro); color: var(--granate); }
.curso-estado.listo { background: var(--verde-claro); color: var(--verde); }
.curso-estado span { font-weight: 400; }
.curso-cartel { margin: 0 auto 1.5rem; max-width: 48rem; }
.curso-cartel img { width: 100%; height: auto; border-radius: var(--radio); display: block; }
.en-preparacion h2 .titulo-en { font-size: .65em; }
.en-preparacion .boton { -webkit-hyphens: manual; hyphens: manual; }
/* ---------- Tema 0: tablas de texto de las ventanas (l144) ---------- */
.ventana-contenido .tabla-datos:has(td:nth-child(6)) { min-width: 46rem; font-size: .9rem; }
.ventana-contenido .tabla-datos:has(td:nth-child(6)) td { vertical-align: top; text-align: left; }
.ventana-contenido .tabla-datos:has(td:nth-child(6)) td:nth-child(-n+3) { text-align: center; font-weight: 600; }

/* ---------- Tema 0: correcciones 7 (corr7_t0.py) ---------- */
.destacado .lema-amarillo { text-align: center; color: #ffe9a8; }
.contenido div.nota { margin-bottom: 1.25rem; }
.contenido div.nota > p:last-child { margin-bottom: 0; }
.destacado.centrado, .contenido .destacado.centrado p { text-align: center; }
.bloque.facetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 1.25rem; align-items: stretch; }
.bloque.facetas > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: .75rem; }
@media (max-width: 52rem) { .bloque.facetas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } }
.faceta { background: #1f5f7a; color: #fff; border-radius: var(--radio); padding: 1rem 1.1rem; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.contenido .faceta p { margin: 0; text-align: center; -webkit-hyphens: manual; hyphens: manual; }
.faceta p:first-child { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: #fff3c4; margin-bottom: .3rem; }
.faceta + .figura { margin-top: 0; align-self: start; }
.periodico { margin: 2.5rem 0 1rem; background: #fbf8ef; color: #222; border: 1px solid #d8d0bd; padding: 1.25rem clamp(1rem, 3vw, 2rem) 1.5rem; box-shadow: 0 6px 20px rgba(0,0,0,.08); font-family: Georgia, "Times New Roman", serif; }
.periodico-cabecera { text-align: center; border-top: 4px double #222; border-bottom: 4px double #222; padding: .6rem 0 .5rem; margin-bottom: 1.25rem; }
.contenido .periodico-cabecera h2 { font-family: "Old English Text MT", "UnifrakturMaguntia", Georgia, serif; font-size: clamp(1.6rem, 1rem + 2.6vw, 2.6rem); color: #111; margin: 0; letter-spacing: .02em; }
.periodico-columnas { column-count: 3; column-gap: 1.75rem; column-rule: 1px solid #cfc6b0; }
@media (max-width: 60rem) { .periodico-columnas { column-count: 2; } }
@media (max-width: 38rem) { .periodico-columnas { column-count: 1; } }
.noticia { break-inside: avoid; margin: 0 0 1.25rem; }
.noticia-principal { column-span: all; display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem 1.75rem; border-bottom: 1px solid #222; padding-bottom: 1rem; }
.noticia-principal h3 { grid-column: 1 / -1; font-size: 1.55rem; }
.noticia-principal .figura { grid-column: 2; grid-row: 2 / span 3; }
@media (max-width: 38rem) { .noticia-principal { display: block; } }
.contenido .noticia h3 { font-family: Georgia, "Times New Roman", serif; color: #111; font-size: 1.15rem; line-height: 1.25; margin: 0 0 .5rem; }
.contenido .noticia p { font-size: .95rem; line-height: 1.5; margin: 0 0 .5rem; text-align: justify; }
.noticia .figura { margin: .25rem 0 .6rem; width: auto; }
.noticia .figura img { width: 100%; height: auto; filter: grayscale(15%); }
.anuncio { border: 2px solid #222; padding: .6rem; text-align: center; }
.contenido .anuncio .anuncio-rotulo { text-align: center; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 .4rem; }
.contenido .tarjetas-centradas .tarjeta > div > h3, .contenido .tarjetas-centradas .tarjeta > div > p { text-align: center; -webkit-hyphens: manual; hyphens: manual; }
.geometria-cuadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: .75rem 1.25rem; margin: 1rem 0 1.5rem; }
.geometria-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; justify-items: center; align-items: start; }
.geometria-col .figura, .geometria-col .visor3d-fig { margin: 0; width: 100%; }
.geometria-col .figura img { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto; }
.contenido .geometria-col p { margin: 0; font-size: .95rem; text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.contenido .flash-texto p { text-align: left; }
@media (max-width: 52rem) { .geometria-cuadro { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } }
.mecanismos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "e2 c e1" "centro centro centro" "sn2 . sn1"; gap: 1rem 1.25rem; align-items: center; margin: 1.5rem 0; }
.mec { position: relative; margin: 0; }
.mec img { display: block; width: 100%; height: auto; border-radius: 6px; }
.mec-rotulo { position: absolute; left: .6rem; top: .4rem; color: #fff; font-weight: 700; font-size: 1.25rem; text-shadow: 0 1px 3px #000; }
.mec-e2 { grid-area: e2; } .mec-c { grid-area: c; } .mec-e1 { grid-area: e1; } .mec-sn2 { grid-area: sn2; } .mec-sn1 { grid-area: sn1; }
.mecanismos .mec-centro { grid-area: centro; margin: .5rem auto; max-width: 40rem; }
.mecanismos .mec-centro img { width: 100%; height: auto; }
@media (max-width: 40rem) { .mecanismos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "e2 e1" "c c" "centro centro" "sn2 sn1"; } .mec-c { max-width: 60%; justify-self: center; } }

/* ---------- Animaciones Flash (flash.js) ---------- */
.flash { margin: 0 auto 1.5rem; }
.flash-marco { width: 100%; margin: 0 auto; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; }
.flash-marco ruffle-player { display: block; width: 100%; height: 100%; }
.flash-activo .flash-respaldo { display: none !important; }
.flash:not(.flash-activo) .flash-solo { display: none; }
.flash-lado.flash-activo { display: grid; grid-template-columns: minmax(0, 1fr) min(58%, var(--ancho, 650px)); gap: 1rem 2rem; align-items: center; }
.flash-lado.flash-izq.flash-activo { grid-template-columns: min(58%, var(--ancho, 650px)) minmax(0, 1fr); }
.flash-izq .flash-sitio { order: -1; }
.flash-texto > :first-child { margin-top: 0; }
.flash-texto .figura { margin-left: 0; }
@media (max-width: 48rem) { .flash-lado.flash-activo { display: block; } .flash-lado .flash-sitio { margin-top: 1rem; } }
.prueba-flash { margin: 2rem 0; }

/* ---------- Tema 12 (contenido_t12.py) ---------- */
.contenido .destacado p + p { margin-top: .8em; }
.destacado ol { margin: .6em 0 0; padding-left: 1.6em; }
.destacado ol li { margin: .15em 0; }
.visor3d { background: #000; }   /* fondo negro en todos los visores JSmol (3-11-2026) */
.visor3d-galeria.visor3d-uno { max-width: 18rem; margin-left: auto; margin-right: auto; }
.contenido .figura-y-visor { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; margin: 1.2rem 0 1.25rem; }
.contenido .figura-y-visor > .figura, .contenido .figura-y-visor > .visor3d-galeria { margin: 0; }
.contenido .figura-y-visor > .visor3d-galeria { width: 18rem; max-width: 100%; }
.contenido li > .figura { margin: .9rem auto 1.1rem; }
.tabla-desplazable { overflow-x: auto; margin: 0 0 1.25rem; }
.tabla-aditivos td { vertical-align: middle; }
.tabla-aditivos td:nth-child(2), .tabla-aditivos td:nth-child(3) { text-align: left; }
.tabla-aditivos td.celda-estructura { background: #fff; padding: .4rem .6rem; }
.tabla-aditivos td.celda-estructura img { display: block; margin: 0 auto; max-width: none; }
.visor3d.visor3d-local::after { content: attr(data-aviso); padding: 1rem; text-align: center; font-weight: 400; font-size: .9rem; line-height: 1.4; color: #c9d1d3; border: 1px dashed #555; border-radius: .4rem; box-sizing: border-box; }
.lista-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .6rem 1.5rem; padding-left: 1.4rem; }
/* ---------- fin Tema 12 ---------- */

/* ---------- Tema 0: correcciones 8 (corr8_t0.py) ---------- */
.contenido .destacado p { -webkit-hyphens: manual; hyphens: manual; }
.noticia-principal { grid-template-columns: 1fr auto; align-items: start; }
.noticia-principal .figura { grid-row: 2; margin: 0; }
.noticia-principal .figura img { width: auto; height: 5rem; }
.periodico-columnas .noticia { break-inside: auto; }
.periodico-columnas .noticia h3 { break-after: avoid; break-inside: avoid; }
.periodico-columnas .noticia .figura, .periodico-columnas .anuncio { break-inside: avoid; }
.periodico-columnas .noticia .figura { break-after: avoid; }
.periodico-columnas .noticia p { orphans: 3; widows: 3; }
/* ---------- fin correcciones 8 ---------- */

/* ---------- Tema 0: correcciones 9 (corr9_t0.py) ---------- */
.noticia-nobel { column-span: all; display: grid; grid-template-columns: 1fr minmax(12rem, 17rem); gap: .25rem 1.75rem; align-items: start; border-bottom: 1px solid #222; padding-bottom: 1rem; margin-bottom: 1.25rem; }
.noticia-nobel .noticia-rotulo { grid-column: 1 / -1; margin: 0 !important; font-family: Arial, "Liberation Sans", sans-serif; font-size: .78rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b3132b; }
.contenido .noticia-nobel h3 { grid-column: 1 / -1; font-size: 1.55rem; }
.noticia-nobel .figura { grid-column: 2; grid-row: 3 / span 4; margin: 0; }
.noticia-nobel > p:not(.noticia-rotulo) { grid-column: 1; }
@media (max-width: 38rem) { .noticia-nobel { display: block; } .noticia-nobel .figura { max-width: 17rem; margin: 0 auto .6rem; } }
/* ---------- fin correcciones 9 ---------- */