/* ==========================================================================
   GUÍAS Y TEMAS · estilo nuevo (fase 2, área 1 de docs/estilo-nuevo.md §6)
   Lo carga App::renderItem en todas las páginas de contenido salvo la portada, porque las piezas
   editoriales de aquí (firma, preguntas, fuentes, compartir, fichas de autor, avisos, paginación,
   boletín) también salen en comparativas, calculadoras, páginas y el analizador.
     1. Piezas editoriales compartidas (partials del área)
     2. Guía / artículo (templates/paginas/articulo.php)      → .guia
     3. Contenido de la guía: texto, cajas, tablas, fuentes, bloques y calculadora insertada
     4. Tema / categoría (templates/paginas/categoria.php)   → .tema
     5. Móvil fino e impresión
   Solo variables nuevas de base.css (§2). Nada de --verde-*, --crema, --ocre.
   Las cajas que vienen dentro del texto (.caja--clave, --dato, --ejemplo, --espana, --riesgo) se pintan aquí
   con un selector más concreto (.guia …): su CSS viejo sigue en antiguo/compartido.css, que no se toca.
   ========================================================================== */

/* ---------- 1. Piezas editoriales compartidas ---------- */

/* Avatar con iniciales (autores sin foto) */
.avatar--iniciales { display: inline-grid; place-items: center; color: var(--morado); font: 800 1rem/1 var(--f); letter-spacing: 0; }

/* Firma («Escrito por · Actualizado · min · En España · Cómo trabajamos»): partials/firma.php */
.autoria { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1.4rem; font-size: var(--t-sm); color: var(--tinta-2); }
.autoria__persona { display: inline-flex; align-items: center; gap: .65rem; margin: 0; }
.autoria__persona > span { display: grid; line-height: 1.25; }
.autoria .avatar { width: 40px; height: 40px; box-shadow: 0 0 0 3px #fff, 0 6px 16px -6px rgb(42 10 94 / .5); }
.autoria__rol { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.autoria__nombre { display: inline-block; padding-block: 13px; margin-block: -13px; font-weight: 800; color: var(--tinta); text-decoration: none; }
.autoria__nombre:hover { color: var(--morado); text-decoration: underline; }
.autoria__datos { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); font-weight: 600; }
.autoria__datos li { display: inline-flex; align-items: center; gap: .35em; }
.autoria__datos .icono { color: var(--icono); }
.autoria__como { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-weight: 700; color: var(--morado); text-decoration: none; }
.autoria__como:hover { text-decoration: underline; }
.autoria__como .icono { color: var(--icono); }

/* Fichas de autor al final: partials/fichas-autor.php */
.fichas-firma { display: grid; gap: var(--e-4); margin-block: var(--e-7); }
@media (min-width: 48rem) { .fichas-firma:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; } }
.ficha-firma { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: start; padding: var(--e-5); border-radius: var(--r-3); background: var(--lila-50); border: 1px solid var(--borde); }
.ficha-firma .avatar { width: 64px; height: 64px; box-shadow: 0 0 0 4px #fff, var(--s-1); font-size: 1.1rem; }
.ficha-firma__rol { margin: 0; }
.ficha-firma__nombre { margin: 0 0 .15rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.ficha-firma__nombre a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--tinta); text-decoration: none; }
.ficha-firma__nombre a:hover { color: var(--morado); }
.ficha-firma__cargo { margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--tinta-2); }
.ficha-firma__bio { margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--tinta-2); }
.ficha-firma__ir { min-height: 44px; font-size: var(--t-sm); }

/* Preguntas frecuentes: partials/faq.php (section.faq + piezas .preguntas__*) */
.faq { margin-block: var(--e-8) var(--e-7); max-width: var(--ancho-lectura); }
.faq .preguntas__titulo { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); margin: 0 0 var(--e-5); }
.preguntas__lista { display: grid; gap: .6rem; }
.preguntas__item { border: 1px solid var(--borde); border-radius: var(--r-2); background: #fff; box-shadow: 0 1px 2px rgb(27 11 62 / .04); transition: border-color var(--transicion), box-shadow var(--transicion); }
.preguntas__item:hover { border-color: var(--lila-200); }
.preguntas__item[open] { border-color: var(--lila-200); box-shadow: var(--s-1); }
.preguntas__pregunta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .85rem 1.1rem; font-weight: 800; font-size: var(--t-base); line-height: 1.35; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.preguntas__pregunta::-webkit-details-marker { display: none; }
.preguntas__pregunta:hover { color: var(--morado); }
.preguntas__signo { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--lila-100); transition: background-color var(--transicion), rotate var(--transicion); }
.preguntas__signo::before, .preguntas__signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--morado); translate: -50% -50%; }
.preguntas__signo::after { rotate: 90deg; transition: rotate var(--transicion); }
.preguntas__item[open] .preguntas__signo { background: var(--morado); }
.preguntas__item[open] .preguntas__signo::before, .preguntas__item[open] .preguntas__signo::after { background: #fff; }
.preguntas__item[open] .preguntas__signo::after { rotate: 0deg; }
.preguntas__respuesta { padding: 0 1.1rem 1.1rem; color: var(--tinta-2); font-size: var(--t-base); line-height: 1.65; }
.preguntas__respuesta > :last-child { margin-bottom: 0; }
.preguntas__mas { margin: var(--e-4) 0 0; font-size: var(--t-sm); color: var(--tinta-2); }
.preguntas__mas a { font-weight: 700; }

/* Fuentes: partials/fuentes.php → section.fuentes (y la lista <ol class="fuentes"> que trae el texto, en el §3) */
section.fuentes { margin-block: var(--e-7); padding: var(--e-5); border-radius: var(--r-3); border: 1px solid var(--borde); background: #fff; font-size: var(--t-sm); color: var(--tinta-2); max-width: var(--ancho-lectura); }
section.fuentes .fuentes-lista__titulo { margin: 0 0 var(--e-3); font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); -webkit-text-stroke: 0; }
section.fuentes ol { margin: 0; padding-left: 1.4em; color: inherit; }
section.fuentes li { margin-bottom: var(--e-2); overflow-wrap: anywhere; }
section.fuentes li::marker { color: var(--morado); font-weight: 800; }

/* Compartir: partials/compartir.php (ui.js activa copiar e imprimir) */
.compartir { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.compartir__titulo { width: 100%; margin: 0 0 .2rem; font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); }
.compartir .boton-icono { width: 44px; height: 44px; border: 1px solid var(--borde); border-radius: 50%; background: #fff; color: var(--icono); box-shadow: 0 1px 2px rgb(27 11 62 / .05); }
.compartir .boton-icono:hover { background: var(--lila-50); border-color: var(--lila-200); color: var(--morado); }
.compartir .boton-icono .icono { width: 18px; height: 18px; }
.compartir__estado { width: 100%; min-height: 1.2em; margin: 0; font-size: var(--t-xs); font-weight: 700; color: var(--verde-texto); }

/* Aviso de riesgo (partials/aviso.php → .aviso de base.css, blanco con borde morado; sin ámbar) */
.aviso-riesgo { margin-block: var(--e-6); border: 2px solid var(--morado); background: #fff; }
.aviso-riesgo > .icono { color: var(--morado); }
.aviso-riesgo__titulo { margin: 0 0 .15rem !important; font-weight: 800; }

/* Relacionados: partials/relacionados.php (franja lila + .tarjeta-art) */
.relacionados .rejilla { list-style: none; }
.relacionados__celda { display: flex; }
.relacionados__celda > .tarjeta-art { flex: 1; }

/* Tarjeta (partials/tarjeta.php → .tarjeta-art de base.css): lo que le falta */
.tarjeta-art--sin-foto { border-top: 4px solid var(--lila-200); }
.tarjeta-art__meta { flex-wrap: wrap; gap: .2rem .8rem; }
.tarjeta-art__meta > .avatar { margin-right: -.35rem; }
.tarjeta-art__tipo { display: inline-flex; align-items: center; gap: .3em; }
.tarjeta-art__tipo .icono { color: var(--icono); }
.tarjeta-art--fila { position: relative; }
.tarjeta-art--fila .tarjeta-art__meta { display: none; }
@media (min-width: 42rem) { .tarjeta-art--fila .tarjeta-art__meta { display: flex; } }

/* Paginación: partials/paginacion.php */
.paginacion { margin-top: var(--e-7); }
.paginacion ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.paginacion a, .paginacion span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .8em; border: 1px solid var(--borde); border-radius: var(--r-redondo); background: #fff; color: var(--tinta); font-weight: 800; font-size: var(--t-sm); text-decoration: none; font-variant-numeric: tabular-nums; }
.paginacion a:hover { border-color: var(--lila-200); background: var(--lila-50); color: var(--morado); }
.paginacion [aria-current] { background: var(--morado); border-color: var(--morado); color: #fff; box-shadow: 0 10px 22px -10px rgb(122 18 242 / .8); }
.paginacion .paginacion__hueco { border: 0; background: none; min-width: 1.5rem; box-shadow: none; }

/* Boletín: partials/boletin.php (apagado mientras no exista; config boletin.activo) */
.boletin { display: grid; gap: var(--e-5); align-items: center; padding: clamp(1.6rem, 1rem + 2.4vw, 2.6rem) clamp(1.4rem, .8rem + 3vw, 3rem); border-radius: var(--r-4); background: linear-gradient(100deg, #f5eefe 0%, #eee3fd 55%, #dcc6fb 100%); }
.boletin__icono { display: none; }
.boletin h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); margin: 0 0 var(--e-2); }
.boletin__texto { margin: 0; color: var(--tinta-2); }
.boletin__form { display: grid; gap: var(--e-3); }
.boletin__fila { display: flex; flex-direction: column; gap: var(--e-2); }
.boletin__fila .entrada { font-size: 1rem; }
.boletin__legal { margin: 0; font-size: var(--t-xs); color: var(--tinta-2); }
@media (min-width: 40rem) { .boletin__fila { flex-direction: row; } .boletin__fila .entrada { flex: 1; } }
@media (min-width: 64rem) {
  .boletin { grid-template-columns: auto 1fr minmax(22rem, 1fr); gap: var(--e-6); }
  .boletin__icono { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: #fff; color: var(--morado); box-shadow: var(--s-1); }
  .boletin__icono .icono { width: 2.2rem; height: 2.2rem; }
}

/* ---------- 2. Guía / artículo ---------- */

/* Cabecera lila: migas · tema · titular · entradilla · firma | foto de la guía */
.guia-cabeza { padding-top: clamp(.9rem, .6rem + 1vw, 1.4rem); padding-bottom: clamp(1.8rem, 1rem + 2.6vw, 3rem); }
.guia-cabeza .migas { padding-top: 0; margin-bottom: clamp(.8rem, .5rem + 1vw, 1.4rem); }
.guia-cabeza .migas__item a, .tema-cabeza .migas__item a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.guia-cabeza .migas__item:first-child a, .tema-cabeza .migas__item:first-child a { min-width: 44px; }
.guia-cabeza .migas__item [aria-current], .tema-cabeza .migas__item [aria-current] { max-width: min(42ch, 60vw); }
.guia-cabeza__tema { margin: 0 0 .9rem; }
.guia-cabeza__tema .pastilla { min-height: 44px; padding-inline: 1rem; font-size: 1rem; background: #fff; box-shadow: var(--s-1); }
.guia-cabeza__tema .pastilla:hover { background: var(--lila-100); }
.guia-cabeza__titulo { max-width: 24ch; font-size: clamp(2rem, 1.25rem + 2.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.04em; }
.guia-cabeza .cabeza__entradilla { max-width: 40rem; font-size: clamp(1.06rem, .98rem + .4vw, 1.25rem); }
.guia-cabeza__foto { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-4); box-shadow: var(--s-2), 0 0 0 6px rgb(255 255 255 / .7); }
@media (min-width: 64rem) {
  .guia-cabeza--con-foto .cabeza__rejilla { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .guia-cabeza__foto { rotate: 1.2deg; }
}
@media (max-width: 63.99rem) {
  .guia-cabeza .cabeza__rejilla { gap: var(--e-5); }
  .guia-cabeza__foto { aspect-ratio: 16 / 8; border-radius: var(--r-3); box-shadow: var(--s-1); }
}

/* Rejilla: índice | texto | calculadora */
.guia__rejilla { display: grid; gap: var(--e-6); padding-top: var(--e-6); padding-bottom: var(--seccion); }
.guia__principal { min-width: 0; }
.guia__indice, .guia__lateral { display: none; }
.guia__principal > .aviso-afiliacion:first-child { margin-top: 0; }
.guia__principal > :is(.aviso-afiliacion, .indice-movil, .caja--clave, .aviso-riesgo, .fichas-firma, .guia__nota, .guia__compartir-movil, section.fuentes) { max-width: var(--ancho-lectura); }
@media (min-width: 64rem) {
  .guia__rejilla { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e-7); padding-top: var(--e-7); }
  .guia__rejilla--sin-indice { grid-template-columns: minmax(0, 1fr); }
  .guia__indice { display: block; }
  .guia .indice-movil { display: none; }
  .guia__fijo { position: sticky; top: calc(var(--cabecera-alto) + var(--e-5)); max-height: calc(100vh - var(--cabecera-alto) - 3rem); overflow-y: auto; padding: 0 .3rem var(--e-4) 0; scrollbar-width: thin; }
}
@media (min-width: 80rem) {
  .guia__rejilla { grid-template-columns: 15rem minmax(0, 1fr) 17rem; }
  .guia__rejilla--sin-indice { grid-template-columns: minmax(0, 1fr) 17rem; }
  .guia__lateral { display: block; }
  .guia__lateral .guia__fijo { display: grid; gap: var(--e-5); overflow: visible; max-height: none; padding: 0; }
  .guia__lateral .compartir { padding: 0 .3rem; }
  .guia__compartir-movil { display: none; }
}
.guia .indice-movil { margin-top: 0; }
.guia .indice-movil .indice a { display: flex; align-items: center; min-height: 44px; padding-block: .5em; }

/* Calculadora del lateral: tarjeta morada con icono 3D (versión para fondo oscuro) */
.guia-calc { position: relative; display: grid; gap: .5rem; padding: 1.4rem 1.3rem 1.3rem; border-radius: var(--r-4); color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(16rem 10rem at 100% 0%, rgb(147 54 254 / .55), transparent 70%), radial-gradient(14rem 8rem at 0% 100%, rgb(26 255 224 / .16), transparent 70%), linear-gradient(160deg, var(--cab-1), var(--cab-2) 60%, #4a1890); box-shadow: var(--s-2); }
.guia-calc__icono { --ico: 64px; filter: drop-shadow(0 12px 18px rgb(14 3 40 / .45)); }
.guia-calc__ante { margin: .3rem 0 0; font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--turquesa); }
.guia-calc__titulo { margin: 0; font-weight: 800; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.025em; -webkit-text-stroke: .01em currentColor; }
.guia-calc__texto { margin: 0 0 .5rem; font-size: var(--t-sm); line-height: 1.45; color: rgb(255 255 255 / .84); }

/* Nota «no es asesoramiento» al final */
.guia__nota { margin-top: var(--e-7); }
.guia__nota-titulo { margin: 0 0 .15rem !important; font-weight: 800; }
.guia__compartir-movil { margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--borde); }

/* ---------- 3. Contenido de la guía ---------- */
.guia__cuerpo { margin-top: var(--e-2); font-size: clamp(1.0625rem, 1rem + .25vw, 1.15rem); line-height: 1.72; color: #1d1536; }
.guia__cuerpo > * { max-width: var(--ancho-lectura); }
.guia__cuerpo h2 { position: relative; margin: var(--e-8) 0 var(--e-4); padding-top: 1.1rem; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.1; scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.guia__cuerpo h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 5px; border-radius: 5px; background: var(--turquesa-2); }
.guia__cuerpo h3 { margin: var(--e-6) 0 var(--e-3); font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.guia__cuerpo h4 { font-weight: 800; }
.guia__cuerpo > :first-child, .guia__cuerpo > h2:first-child { margin-top: 0; }
.guia__cuerpo li::marker { color: var(--morado); font-weight: 800; }
.guia__cuerpo strong { font-weight: 750; color: var(--tinta); }
.guia__cuerpo blockquote { margin: var(--e-6) 0; padding: var(--e-4) var(--e-5); border: 0; border-left: 4px solid var(--turquesa-2); border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--lila-50); font: 600 var(--t-lg)/1.5 var(--f); color: var(--tinta); }
.guia__cuerpo figure img { border-radius: var(--r-3); }
.guia__cuerpo code { background: var(--lila-50); border-radius: 6px; padding: .1em .35em; font-size: 1em; }
.guia__cuerpo a:not([class]) { font-weight: 600; }
.guia__cuerpo sup a { text-decoration: none; font-weight: 800; padding: 0 .15em; }
.guia__cuerpo .tabla-scroll, .guia__cuerpo > table { margin: var(--e-6) 0; box-shadow: var(--s-1); }
.guia__cuerpo table { font-size: var(--t-sm); line-height: 1.5; }
.guia__cuerpo img { max-width: 100%; height: auto; }

/* Cajas del texto: base común */
.guia .caja { position: relative; margin: var(--e-6) 0; padding: 1.25rem 1.35rem 1.3rem; border-radius: var(--r-3); background: #fff; border: 1px solid var(--borde); box-shadow: var(--s-1); font-size: var(--t-base); line-height: 1.6; }
.guia .caja > :last-child { margin-bottom: 0; }
.guia .caja__titulo { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); }
.guia .caja__titulo::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 9px; background: var(--lila-100) center / 15px no-repeat; }
.guia .caja__titulo .icono { display: none; }
.guia .caja ul, .guia .caja ol { margin-bottom: .4rem; }
/* Puntos clave: lila con números morados */
.guia .caja--clave { background: var(--lila-50); border-color: var(--lila-100); box-shadow: none; }
.guia .caja--clave .caja__titulo { color: var(--morado); }
.guia .caja--clave .caja__titulo::before { background-color: var(--morado); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E"); }
.guia .caja--clave :is(ol, ul) { list-style: none; padding: 0; margin: 0; counter-reset: clave; display: grid; gap: .7rem; }
.guia .caja--clave li { position: relative; padding-left: 2.3rem; margin: 0; counter-increment: clave; }
.guia .caja--clave li::before { content: counter(clave); position: absolute; left: 0; top: .05em; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #fff; color: var(--morado); box-shadow: inset 0 0 0 2px var(--lila-200); font: 800 1rem/1.55rem var(--f); text-align: center; }
/* Dato: cifra o idea destacada con barra morada */
.guia .caja--dato { border-left: 5px solid var(--morado-vivo); border-radius: 6px var(--r-3) var(--r-3) 6px; }
.guia .caja--dato .caja__titulo::before { background-color: var(--lila-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a12f2' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 20V10M12 20V4M19 20v-7'/%3E%3C/svg%3E"); }
.guia .caja--dato .caja__cifra { margin: 0; font: 800 var(--t-cifra)/1 var(--f); letter-spacing: -.04em; color: var(--morado); }
.guia .caja--dato .caja__fuente { font-size: var(--t-xs); color: var(--tinta-2); }
/* Ejemplo con números: lila suave con borde lila (Joan, 04-11: las cajas, con los colores de la marca) */
.guia .caja--ejemplo { background: linear-gradient(180deg, var(--lila-50), #fff 70%); border-color: var(--lila-200); box-shadow: none; }
.guia .caja--ejemplo .caja__titulo { color: var(--etiqueta); }
.guia .caja--ejemplo .caja__titulo::before { background-color: var(--lila-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a12f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 7h6M9 11h.01M12 11h.01M15 11h.01M9 15h.01M12 15h.01M15 15h.01'/%3E%3C/svg%3E"); }
/* En España: banda de la bandera */
.guia .caja--espana { border-left: 5px solid #c8102e; border-radius: 6px var(--r-3) var(--r-3) 6px; }
.guia .caja--espana .caja__titulo { color: var(--tinta); }
.guia .caja--espana .caja__titulo::before { width: 26px; height: 18px; border-radius: 4px; background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); box-shadow: 0 0 0 1px rgb(0 0 0 / .06); }
/* Riesgo / «Ojo»: blanca con borde morado y el «!» en un círculo morado (sin ámbar: se distingue por icono y borde) */
.guia .caja--riesgo { background: #fff; border: 2px solid var(--morado); box-shadow: 0 10px 26px -18px rgb(122 18 242 / .7); }
.guia .caja--riesgo .caja__titulo { color: var(--morado); }
.guia .caja--riesgo .caja__titulo::before { border-radius: 50%; background-color: var(--morado); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
.guia .caja--riesgo p { font-size: inherit; }
/* Nota / información */
.guia .caja--nota { background: var(--lila-50); border-color: var(--borde); box-shadow: none; }
.guia .caja--nota .caja__titulo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a12f2' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E"); }

/* Fuentes numeradas dentro del texto: <ol class="fuentes"> con <li id="fuente-N"> */
.guia__cuerpo ol.fuentes { padding: var(--e-5) var(--e-5) var(--e-4) calc(var(--e-5) + 1.4em); border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-2); }
.guia__cuerpo ol.fuentes li { margin-bottom: var(--e-2); overflow-wrap: anywhere; scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.guia__cuerpo ol.fuentes li:target { background: var(--lila-100); border-radius: 6px; }

/* Bloques interactivos y calculadoras insertadas: a todo el ancho del texto y SIEMPRE dentro de su contenedor */
.guia__cuerpo > .bloque, .guia__cuerpo > .calc, .guia__cuerpo > .ica, .guia__cuerpo > div:has(> .calc) { max-width: none; }
.guia__cuerpo .bloque, .guia__cuerpo .calc { min-width: 0; overflow-wrap: anywhere; }
.guia__cuerpo > .bloque { margin-block: var(--e-7); }
.guia__cuerpo .calc { contain: inline-size; max-width: 100%; margin-block: var(--e-7); }
@media (min-width: 80rem) { .guia__cuerpo .bloque--ancho { margin-right: 0; } }

/* ---------- 4. Tema / categoría ---------- */

/* Cabecera de tema: .cabeza--tema (morada) + fondo de su tono + icono 3D grande */
.tema-cabeza { padding-top: clamp(.9rem, .6rem + 1vw, 1.4rem); padding-bottom: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); }
.tema-cabeza--con-solapa { padding-bottom: clamp(5.2rem, 3.6rem + 4vw, 7rem); }
.tema-cabeza .migas { padding-top: 0; margin-bottom: clamp(.6rem, .3rem + 1vw, 1.1rem); }
.tema-cabeza .migas__lista, .tema-cabeza .migas__item a { color: rgb(255 255 255 / .78); }
.tema-cabeza .migas__item a:hover, .tema-cabeza .migas__item [aria-current] { color: #fff; }
.tema-cabeza__ante { color: var(--turquesa); }
.tema-cabeza__ante a { color: inherit; text-decoration: none; }
.tema-cabeza__ante a:hover { text-decoration: underline; }
.tema-cabeza .cabeza__titulo { max-width: 16ch; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem); }
.tema-cabeza__pagina { display: inline !important; font-size: max(.42em, 1rem); font-weight: 700; letter-spacing: 0; color: inherit !important; text-shadow: none !important; opacity: .75; }
.tema-cabeza .cabeza__entradilla { max-width: 38rem; }
.tema-cifras b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tema-cabeza__lado { display: flex; justify-content: flex-end; align-items: center; }
.tema-cabeza__icono { transform: rotate(-4deg); }   /* tamaño: --cabeza-ico de base.css; en el móvil, arriba a la derecha con el texto alrededor */
@media (min-width: 64rem) { .tema-cabeza__rejilla { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); } }
@media (prefers-reduced-motion: no-preference) {
  .tema-cabeza__icono { animation: tema-flota 7s ease-in-out infinite alternate; }
  @keyframes tema-flota { from { translate: 0 0; } to { translate: 0 -10px; } }
}
/* Tonos claros (lila, lavanda, menta, crema): texto oscuro sobre su fondo */
.tema-cabeza--clara { color: var(--tinta); background: var(--cabeza-fondo) center / cover no-repeat, var(--lila-50); }
.tema-cabeza--clara::before { background-image: radial-gradient(rgb(58 17 98 / .07) 1px, transparent 1.3px); }
.tema-cabeza--clara .cabeza__entradilla { color: var(--tinta-2); }
.tema-cabeza--clara .cabeza__titulo span { color: var(--morado); text-shadow: none; }
.tema-cabeza--clara .cabeza__sellos { color: var(--tinta-2); }
.tema-cabeza--clara .cabeza__sellos .icono { color: var(--icono); }
.tema-cabeza--clara .cabeza__sellos b { color: var(--tinta); }
.tema-cabeza--clara .tema-cabeza__ante { color: var(--etiqueta); }
.tema-cabeza--clara .migas__lista, .tema-cabeza--clara .migas__item a { color: var(--tinta-2); }
.tema-cabeza--clara .migas__item a:hover { color: var(--morado); }
.tema-cabeza--clara .migas__item [aria-current] { color: var(--tinta); }
.tema-cabeza--clara .cabeza__icono { filter: drop-shadow(0 14px 22px rgb(58 17 98 / .14)); }
.tema-cabeza--clara :focus-visible { --foco: var(--morado); }
.tema-cabeza:not(.tema-cabeza--clara) :focus-visible { --foco: var(--turquesa); }

/* Solapa: guía principal · calculadora · comparativa, montadas sobre el borde de la cabecera */
.tema-solapa { margin-bottom: var(--e-5); }
.tema-accesos { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.tema-accesos > li { display: flex; min-width: 0; }
.tema-accesos > li > a { flex: 1; min-width: 0; }
@media (min-width: 48rem) { .tema-accesos { grid-template-columns: 1fr 1fr; } .tema-accesos__pilar { grid-column: 1 / -1; } }
@media (min-width: 72rem) { .tema-accesos { display: flex; } .tema-accesos > li { flex: 0 1 24rem; } .tema-accesos > .tema-accesos__pilar { flex: 1.7 1 0; } }
.tema-pilar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .75rem 1rem .75rem .75rem; border-radius: var(--r-3); background: #fff; border: 1px solid var(--borde); box-shadow: var(--s-barra); color: var(--tinta); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.tema-pilar:hover { transform: translateY(-3px); color: var(--tinta); }
.tema-pilar__foto { width: 96px; aspect-ratio: 1; border-radius: var(--r-2); }
.tema-pilar__cuerpo { display: grid; gap: .2rem; min-width: 0; }
.tema-pilar__cuerpo .antetitulo { margin: 0; }
.tema-pilar__titulo { font-weight: 800; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.2; letter-spacing: -.02em; -webkit-text-stroke: .01em currentColor; text-wrap: balance; }
.tema-pilar:hover .tema-pilar__titulo { color: var(--morado); }
.tema-pilar__meta { display: inline-flex; align-items: center; gap: .35em; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.tema-pilar__meta .icono { color: var(--icono); }
@media (min-width: 64rem) { .tema-pilar__foto { width: 120px; aspect-ratio: 16 / 11; } }
.tema-acceso { box-shadow: var(--s-barra); height: 100%; }
.tema-acceso .antetitulo { display: block; margin: 0 0 .1rem; font-size: 1rem; }
.tema-acceso .tarjeta-herr__nombre { font-size: 1rem; }
.tema-acceso .ico3d { --ico: 48px; }

/* Subtemas: chips con su icono */
.tema-subtemas { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding-block: var(--e-4) var(--e-2); }
.tema-subtemas__titulo { margin: 0; font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); }
.tema-subtemas__lista { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tema-subtemas .chip { min-height: 44px; padding: .35rem .95rem .35rem .45rem; background: #fff; box-shadow: 0 1px 2px rgb(27 11 62 / .05); }
.tema-subtemas .chip:not(:has(.ico3d-pic)) { padding-left: .95rem; }
.tema-subtemas .chip .ico3d { --ico: 26px; }
.tema-subtemas .chip:hover { background: var(--lila-50); }
.tema-subtemas .chip[aria-current] { background: var(--morado); color: #fff; }
@media (max-width: 47.99rem) {
  .tema-subtemas { display: block; }
  .tema-subtemas__titulo { margin-bottom: .5rem; }
  .tema-subtemas__lista { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--margen); margin-inline: calc(-1 * var(--margen)); padding: .2rem var(--margen) .6rem; scrollbar-width: none; }
  .tema-subtemas__lista::-webkit-scrollbar { display: none; }
  .tema-subtemas__lista > li { flex: none; scroll-snap-align: start; }
}

/* Empieza aquí (3 pasos), calculadoras y todas las guías */
.tema-empieza { margin-top: var(--e-6); }
.tema-empieza__lista, .tema-herramientas__lista, .tema-otros__lista { list-style: none; margin: 0; padding: 0; }
.tema-empieza__lista > li { display: flex; min-width: 0; }
.tema-empieza__lista .tarjeta-art { flex: 1; }
.tema-empieza .antetitulo { color: var(--morado); }
.tema-herramientas__lista > li { display: flex; min-width: 0; }
.tema-herramientas__lista .tarjeta-herr { flex: 1; }
.tema-todas .rejilla > * { min-width: 0; }
.tema .vacio { margin-block: var(--e-6); }

/* Texto del tema + preguntas, en franja lila */
.tema-texto__rejilla { display: grid; gap: var(--e-6); align-items: start; }
.tema-texto__cuerpo { font-size: var(--t-lg); }
.tema-texto__cuerpo h2 { margin-top: 0; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); }
.tema-texto .faq { margin: 0; }
@media (min-width: 72rem) { .tema-texto__rejilla:has(> .faq) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); } }

/* Otros temas: icono 3D + nombre */
.tema-otros__lista { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.tema-otro { display: flex; align-items: center; gap: .85rem; min-height: 72px; height: 100%; padding: .7rem 1rem .7rem .8rem; border-radius: var(--r-3); background: #fff; border: 1px solid var(--borde); box-shadow: var(--s-1); color: var(--tinta); font-weight: 800; letter-spacing: -.01em; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.tema-otro:hover { transform: translateY(-3px); box-shadow: var(--s-2); color: var(--morado); }
.tema-otro .ico3d { --ico: 48px; transition: transform .25s ease; }
.tema-otro:hover .ico3d { transform: rotate(-6deg) scale(1.06); }

/* ---------- 5. Móvil fino e impresión ---------- */
@media (max-width: 41.99rem), (hover: none) and (pointer: coarse) { .tarjeta-art__texto { font-size: 1rem; } }
@media (max-width: 41.99rem) {
  .autoria { gap: .5rem 1rem; }
  .autoria__datos { gap: .2rem .9rem; }
  .guia-cabeza__titulo { font-size: clamp(1.85rem, 1.2rem + 3.4vw, 2.4rem); }
  .tema-cabeza .cabeza__titulo { font-size: clamp(2.2rem, 1.4rem + 4vw, 2.8rem); }
  .tema-pilar { grid-template-columns: auto minmax(0, 1fr); }
  .tema-pilar .circulo-flecha { display: none; }
  .tema-pilar__foto { width: 76px; }
  .guia .caja { padding: 1.1rem 1.05rem; }
  .ficha-firma { grid-template-columns: 1fr; }
  .preguntas__pregunta { padding-inline: .95rem; }
}
@media print {
  .guia__indice, .guia__lateral, .guia__compartir-movil, .tema-solapa, .tema-subtemas, .tema-otros, .relacionados, .enl { display: none !important; }
  .guia__rejilla { display: block; padding: 0; }
  .guia-cabeza__foto { rotate: none; box-shadow: none; max-width: 60%; }
  .guia .caja, .preguntas__item { box-shadow: none; break-inside: avoid; }
  .preguntas__respuesta { display: block; }
  .tema-cabeza__icono { animation: none; }
}

/* Tocables de al menos 44 px en el móvil: índice desplegable (también en calculadoras, comparativas y páginas) y enlaces de fuentes */
.indice-movil .indice a { display: flex; align-items: center; min-height: 44px; padding-block: .5em; }
:is(section.fuentes, .guia__cuerpo ol.fuentes) li { margin-bottom: .9rem; }
:is(section.fuentes, .guia__cuerpo ol.fuentes) li > a { display: inline-block; padding-block: 13px; margin-block: -13px; }
/* Tablas solo para lectores de pantalla (bloques animados): una tabla no encoge a 1 px con .sr-only y ensanchaba la página en el móvil */
table.sr-only { display: block !important; max-width: 1px; }
/* Fondos de tema y de guía en el móvil: se ve la parte lisa de la imagen (la cinta y los objetos van a la derecha y quedarían detrás del texto) */
@media (max-width: 47.99rem) { .tema-cabeza, .guia-cabeza { background-position: 0% 50%; } }

/* Repaso móvil final (05-11): el tema madre en la cabecera de un subtema, tocable de 44 px */
.tema-cabeza__ante a { display: inline-flex; align-items: center; min-height: 44px; }