/* ============================================================================
   comandoSTROKE — sitio.css
   Estilos de la web. Toda la paleta y la tipografía vienen de tokens.css:
   aquí no debe aparecer NINGÚN color en crudo, solo variables de rol.
   ========================================================================== */

/* ---------- Estructura general ------------------------------------------- */
.contenedor      { max-width: var(--ancho-contenido); margin: 0 auto; padding-inline: var(--e-4); }
.contenedor-ancho{ max-width: var(--ancho-maximo);    margin: 0 auto; padding-inline: var(--e-4); }
.contenedor-texto{ max-width: var(--ancho-texto);     margin: 0 auto; padding-inline: var(--e-4); }

section.seccion { padding-block: var(--e-8); }
section.seccion + section.seccion { border-top: 1px solid var(--borde); }

.seccion-cabecera { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--e-4); flex-wrap:wrap; margin-bottom:var(--e-5); }
.eyebrow { font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--enlace); margin:0 0 var(--e-2); }
.regla { height:4px; width:64px; background:var(--acento); border-radius:2px; margin:var(--e-3) 0 0; }

/* ---------- Cabecera y navegación ---------------------------------------- */
/* N2 — barra clara. El azul deja de ser fondo permanente y pasa a ser señal:
   se reserva para la marca, los enlaces y los bloques que de verdad importan.
   La franja del pie sigue siendo azul, y ahí la marca va en blanco: por eso los
   colores de .marca-nav se sobrescriben aquí dentro y no en la regla base. */
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde);
            position: sticky; top: 0; z-index: 50; }
.cabecera .barra { display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); min-height:64px; }
.cabecera .marca-nav { color: var(--marca); }
.cabecera .marca-nav .m1 { opacity:.75; }

/* Marca denominativa en texto, no imagen: nítida a cualquier tamaño, se adapta
   al modo oscuro sola y no añade una descarga. El logo ilustrado va en el hero. */
.marca-nav { font-family:var(--fuente-titulo); font-size:1.15rem; letter-spacing:-.02em; color:var(--texto-invertido); text-decoration:none; display:inline-flex; align-items:center; }
.marca-nav img { margin-right:9px; }
.marca-nav .m1 { font-weight:500; opacity:.9; }
.marca-nav .m2 { font-weight:700; }
.marca-nav img { height:26px; width:auto; margin-right:9px; }

.nav-principal ul { list-style:none; display:flex; gap:var(--e-5); margin:0; padding:0; }
.nav-principal a { color:var(--texto-suave); text-decoration:none; font-weight:600; font-size:var(--t-pequeno); padding:20px 0; display:block; border-bottom:2px solid transparent; transition:var(--transicion); }
.nav-principal a:hover, .nav-principal a[aria-current="page"] { color:var(--enlace); border-bottom-color:var(--acento); }

.acciones-cabecera { display:flex; align-items:center; gap:var(--e-2); }
.btn-tema, .btn-menu { background:transparent; border:1px solid var(--borde-fuerte); color:var(--texto-suave); width:40px; height:40px; border-radius:var(--radio-pill); cursor:pointer; display:grid; place-items:center; transition:var(--transicion); }
.btn-tema:hover, .btn-menu:hover { background:var(--acento-tenue); border-color:var(--acento); color:var(--enlace); }
.btn-menu { display:none; }

@media (max-width: 720px) {
  .btn-menu { display:grid; }
  .nav-principal { display:none; width:100%; }
  .nav-principal.abierto { display:block; }
  .cabecera .barra { flex-wrap:wrap; padding-bottom:var(--e-2); }
  .nav-principal ul { flex-direction:column; gap:0; }
  .nav-principal a { padding:12px 0; border-bottom:1px solid var(--borde); }
}

/* ---------- Hero (A3) ------------------------------------------------------ */
/* Titular que explica, no logo. Quien llega desde una búsqueda entiende qué es
   esto sin descifrar una imagen — y Google lee el h1, no el logo. El logo
   ilustrado vive ahora en «Sobre mí» y en el pie. */
.hero { background:var(--fondo); border-bottom:1px solid var(--borde); padding-block:var(--e-7) var(--e-6); }
.hero .interior { display:grid; grid-template-columns:1.25fr .75fr; gap:var(--e-6); align-items:center; }
.hero .titular { font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-h1);
                 line-height:var(--interlineado-titulo); margin:0 0 var(--e-3); max-width:20ch; }
.hero .titular em { font-style:normal; color:var(--enlace); }
.hero p.lede { font-size:var(--t-lede); color:var(--texto); max-width:58ch; }
.hero .acciones { display:flex; gap:var(--e-3); flex-wrap:wrap; margin-top:var(--e-5); }
.hero .rambo { justify-self:center; }
.hero .rambo img { max-height:290px; width:auto; }
@media (max-width: 860px) {
  .hero .interior { grid-template-columns:1fr; }
  .hero .rambo { display:none; }   /* en móvil el personaje roba espacio al mensaje */
}

/* Logo ilustrado, donde toque. Dos versiones: la tinta azul de «comando»
   desaparece sobre fondo oscuro, así que en modo oscuro se sirve la aclarada. */
img.logo { max-width:min(430px,100%); height:auto; display:block; }
img.logo-oscuro { display:none; }
:root[data-theme="dark"] img.logo-claro  { display:none; }
:root[data-theme="dark"] img.logo-oscuro { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.logo-claro  { display:none; }
  :root:not([data-theme="light"]) img.logo-oscuro { display:block; }
}

/* ---------- Botones ------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--fuente-titulo); font-weight:600; font-size:var(--t-pequeno);
       padding:12px 22px; min-height:44px; border-radius:var(--radio-pill); border:2px solid transparent; cursor:pointer; text-decoration:none; transition:var(--transicion); }
.btn-primario   { background:var(--marca); color:var(--texto-invertido); }
.btn-primario:hover { background:var(--acento); color:var(--marca-blanco); }
.btn-secundario { background:transparent; color:var(--enlace); border-color:var(--borde-fuerte); }
.btn-secundario:hover { border-color:var(--acento); background:var(--acento-tenue); color:var(--enlace); }
.btn-fantasma   { background:transparent; color:var(--texto-suave); padding-inline:8px; }
.btn-fantasma:hover { color:var(--enlace); }

/* ---------- Buscador y filtros (solo con JS) ------------------------------ */
.filtros { margin-bottom:var(--e-5); }
.buscador { position:relative; margin-bottom:var(--e-3); }
.buscador input { width:100%; font-family:var(--fuente-cuerpo); font-size:var(--t-cuerpo); color:var(--texto);
  background:var(--superficie); border:1px solid var(--borde-fuerte); border-radius:var(--radio-pill); padding:13px 20px; min-height:48px; }
.buscador input::placeholder { color:var(--texto-suave); }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
/* Los filtros van por grupos. Dentro de un grupo los chips SUMAN (Hemorragia o
   Trombectomía); entre grupos se CRUZAN (…y además que sea una Guía). Es la
   combinación que la gente espera y la única que no deja la lista vacía al
   marcar dos temas a la vez. */
.grupo-chips + .grupo-chips { margin-top:var(--e-3); }
.et-filtro { font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-micro);
             letter-spacing:.07em; text-transform:uppercase; color:var(--texto-suave); margin:0 0 8px; }
.chip { font-family:var(--fuente-titulo); font-weight:600; font-size:var(--t-micro); padding:8px 14px; min-height:36px; border-radius:var(--radio-pill);
        background:transparent; border:1px solid var(--borde-fuerte); color:var(--texto-suave); cursor:pointer; transition:var(--transicion); }
.chip:hover { border-color:var(--acento); color:var(--enlace); }
.chip[aria-pressed="true"] { background:var(--marca); border-color:var(--marca); color:var(--texto-invertido); }
.sin-resultados { color:var(--texto-suave); font-style:italic; }

/* ---------- Lista densa (B3) ---------------------------------------------- */
/* Con una entrada por semana son ~50 al año. La rejilla de tarjetas obliga a
   leer en zigzag y se come varias pantallas; la lista baja en línea recta y la
   fecha en columna fija deja localizar «lo de la semana pasada» de un vistazo. */
.lista { list-style:none; margin:0; padding:0; border-top:1px solid var(--borde); }
.lista li { border-bottom:1px solid var(--borde); display:grid; grid-template-columns:7.5rem 1fr auto;
            gap:var(--e-4); align-items:baseline; padding:var(--e-4) var(--e-2); transition:var(--transicion); }
.lista li:hover { background:var(--superficie); }
.lista .fecha { font-size:var(--t-micro); color:var(--texto-suave); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lista h3 { margin:0 0 4px; font-size:var(--t-cuerpo); }
.lista h3 a { color:var(--texto); text-decoration:none; }
.lista li:hover h3 a { color:var(--enlace); }
.lista p { margin:0; font-size:var(--t-pequeno); color:var(--texto-suave); max-width:70ch; }
.lista .tags { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 760px) {
  .lista li { grid-template-columns:1fr; gap:var(--e-2); }
  .lista .tags { justify-content:flex-start; }
}

/* Entrada destacada: la de la semana, con el peso que merece. Es también el
   sitio de Rambolisis — acompañando al contenido, nunca entre datos clínicos. */
.destacada { display:grid; grid-template-columns:1.45fr .55fr; gap:var(--e-6); align-items:center;
             background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-l);
             padding:var(--e-6); margin-bottom:var(--e-5); }
.destacada .et { font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-micro);
                 letter-spacing:.09em; text-transform:uppercase; color:var(--enlace); margin:0 0 var(--e-2); }
.destacada h3 { font-size:var(--t-h2); margin:0 0 var(--e-3); }
.destacada h3 a { color:var(--texto); text-decoration:none; }
.destacada h3 a:hover { color:var(--enlace); }
.destacada .resumen { font-size:var(--t-cuerpo); color:var(--texto-suave); }
.destacada .tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--e-4); }
.destacada .ilustra { justify-self:center; }
.destacada .ilustra img { max-height:230px; width:auto; }
@media (max-width: 820px) { .destacada { grid-template-columns:1fr; } .destacada .ilustra { display:none; } }

/* ---------- Tags ---------------------------------------------------------- */
.tag { display:inline-block; font-family:var(--fuente-titulo); font-weight:600; font-size:var(--t-micro); padding:5px 12px;
       border-radius:var(--radio-pill); background:var(--acento-tenue); color:var(--enlace); text-decoration:none; }
a.tag:hover { background:var(--acento-suave); color:var(--marca-azul-oscuro); }
.tag.tipo  { background:transparent; border:1px solid var(--borde-fuerte); color:var(--texto-suave); }
.tag.local { background:var(--aviso-fondo); color:var(--aviso-texto); }

/* ---------- Bloque de chuletario ------------------------------------------ */
.chuletario { background:var(--marca); color:var(--texto-invertido); border-radius:var(--radio-l); padding:var(--e-7) var(--e-6); }
.chuletario h2, .chuletario p { color:var(--texto-invertido); }
.chuletario .eyebrow { color:var(--acento-suave); }
:root[data-theme="dark"] .chuletario .eyebrow { color:var(--marca-azul-oscuro); }
.chuletario .opciones { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--e-4); margin-top:var(--e-5); }
.opcion { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); border-radius:var(--radio); padding:var(--e-5); }
:root[data-theme="dark"] .opcion { background:rgba(0,0,0,.16); border-color:rgba(0,0,0,.22); }
.opcion h3 { color:var(--texto-invertido); font-size:var(--t-h3); margin:0 0 var(--e-2); }
.opcion p  { font-size:var(--t-pequeno); opacity:.92; margin:0 0 var(--e-4); }
.chuletario .btn-primario { background:var(--texto-invertido); color:var(--marca); }
.chuletario .btn-primario:hover { background:var(--acento-suave); color:var(--marca-azul-oscuro); }
.chuletario .btn-secundario { color:var(--texto-invertido); border-color:rgba(255,255,255,.45); }
.chuletario .btn-secundario:hover { background:rgba(255,255,255,.14); border-color:var(--texto-invertido); color:var(--texto-invertido); }

/* ---------- Índice de fichas del chuletario -------------------------------- */
.fichas { list-style:none; margin:var(--e-4) 0 0; padding:0; border-top:1px solid var(--borde); }
.fichas li { border-bottom:1px solid var(--borde); display:grid; grid-template-columns:1fr auto auto;
             gap:var(--e-4); align-items:center; padding:var(--e-3) var(--e-2); }
.fichas label { display:flex; align-items:center; gap:var(--e-3); cursor:pointer; font-size:var(--t-pequeno); }
.fichas input { width:18px; height:18px; accent-color:var(--marca); flex:0 0 auto; }
.fichas a { font-family:var(--fuente-titulo); font-weight:600; font-size:var(--t-micro); text-decoration:none;
            border:1px solid var(--borde-fuerte); border-radius:var(--radio-pill); padding:5px 12px; color:var(--enlace); }
.fichas a:hover { border-color:var(--acento); background:var(--acento-tenue); }
@media (max-width:620px) { .fichas li { grid-template-columns:1fr auto; } .fichas .tag { display:none; } }

/* Borrador: entrada anunciada pero todavía sin escribir. Se ve apagada y con el
   título sin subrayar para que nadie pinche esperando encontrar algo. */
.lista li.borrador .fecha, .lista li.borrador p { opacity:.7; }
.lista li.borrador h3 a { color:var(--texto-suave); cursor:default; }
.lista li.borrador h3 a::after { content:" · en preparación"; font-family:var(--fuente-titulo);
  font-size:var(--t-micro); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-suave); }
.lista li.borrador:hover { background:transparent; }
.lista li.borrador:hover h3 a { color:var(--texto-suave); }

/* ---------- Biblioteca ---------------------------------------------------- */
.biblio { list-style:none; margin:0; padding:0; border-top:1px solid var(--borde); }
/* El título ocupa toda la fila y los enlaces se meten debajo, a la derecha.
   Antes el título competía por el ancho con la columna de botones y se partía
   en cuatro líneas: así gana ~200 px y la ficha baja de altura en vez de subir. */
.biblio li { border-bottom:1px solid var(--borde); padding:var(--e-4) 0;
             display:grid; grid-template-columns:1fr auto; gap:var(--e-2) var(--e-4); align-items:start; }
.biblio .cita { grid-column:1 / -1; }
.biblio .valoracion { grid-column:1; align-self:center; }
.biblio .hueco { grid-column:1; }
.biblio .enlaces { grid-column:2; align-self:center; }
/* tokens.css limita todo <p> a --medida (68ch), que es lo correcto para prosa
   pero no para un título: aquí se lee de un vistazo, no se lee línea a línea.
   Sin esto, el título se parte en cuatro renglones aunque tenga sitio de sobra. */
.biblio .cita { margin:0; font-size:var(--t-pequeno); max-width:none; }
.biblio .cita strong { display:block; font-family:var(--fuente-titulo); font-size:var(--t-cuerpo); font-weight:600; margin-bottom:4px; }
/* Título en castellano: ayuda a escanear la lista de un vistazo, pero la cita
   que manda es la original — por eso va en segundo plano y sin negrita. */
.biblio .titulo-es { display:block; color:var(--texto-suave); font-size:var(--t-pequeno); margin-bottom:5px; }
.biblio .fuente { color:var(--texto-suave); font-size:var(--t-micro); }
/* La valoración de Nico. Es lo único de la biblioteca que no es dato bibliográfico,
   así que se marca como voz propia: filete azul a la izquierda. */
.biblio .valoracion { margin:6px 0 0; padding-left:var(--e-3); font-size:var(--t-pequeno);
                      color:var(--texto); border-left:3px solid var(--acento); max-width:82ch; }
.biblio .enlaces { display:flex; gap:var(--e-2); flex-wrap:wrap; }
.biblio .enlaces a { font-size:var(--t-micro); font-family:var(--fuente-titulo); font-weight:600; text-decoration:none;
  border:1px solid var(--borde-fuerte); border-radius:var(--radio-pill); padding:6px 12px; color:var(--enlace); white-space:nowrap; }
.biblio .enlaces a:hover { border-color:var(--acento); background:var(--acento-tenue); }
@media (max-width: 620px) {
  .biblio li { grid-template-columns:1fr; }
  .biblio .cita, .biblio .valoracion, .biblio .enlaces { grid-column:1; }
}

/* ---------- Página de entrada --------------------------------------------- */
.migas { font-size:var(--t-micro); color:var(--texto-suave); padding-block:var(--e-4) 0; }
.migas a { color:var(--texto-suave); }

.entrada-cabecera { padding-block:var(--e-6) var(--e-5); }
.entrada-cabecera .tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--e-4); }
.entrada-cabecera h1 { margin-bottom:var(--e-3); text-wrap:pretty; }
.entrada-cabecera .lede { font-size:var(--t-lede); color:var(--texto); }
.entrada-cabecera .firma { display:flex; gap:var(--e-3); flex-wrap:wrap; font-size:var(--t-micro); color:var(--texto-suave); border-top:1px solid var(--borde); padding-top:var(--e-3); margin-top:var(--e-4); }

.cuerpo { padding-bottom:var(--e-8); }
.cuerpo h2 { margin-top:var(--e-7); scroll-margin-top:90px; }
.cuerpo h3 { margin-top:var(--e-5); }
.cuerpo ul, .cuerpo ol { max-width:var(--medida); padding-left:1.25rem; }
.cuerpo li { margin-bottom:var(--e-2); }
.cuerpo sup a { text-decoration:none; font-weight:700; }

/* Índice lateral: solo cuando hay sitio de verdad */
.con-indice { display:block; }
@media (min-width: 1100px) {
  .con-indice { display:grid; grid-template-columns:1fr 15rem; gap:var(--e-7); align-items:start;
                max-width:var(--ancho-contenido); margin:0 auto; padding-inline:var(--e-4); }
  .con-indice > .contenedor-texto { padding-inline:0; margin:0; }
  .indice { position:sticky; top:88px; font-size:var(--t-pequeno); }
}
.indice { display:none; }
@media (min-width: 1100px) { .indice { display:block; } }
.indice p.et { font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.06em; color:var(--enlace); margin:0 0 var(--e-3); }
.indice ul { list-style:none; margin:0; padding:0; border-left:2px solid var(--borde); }
.indice a { display:block; padding:7px 0 7px var(--e-3); color:var(--texto-suave); text-decoration:none; margin-left:-2px; border-left:2px solid transparent; }
.indice a:hover, .indice a.activo { color:var(--enlace); border-left-color:var(--acento); }

/* Tablas de contenido clínico */
.tabla-scroll { overflow-x:auto; margin:var(--e-4) 0 var(--e-5); }
table.datos { width:100%; border-collapse:collapse; font-size:var(--t-pequeno); min-width:460px; }
table.datos th, table.datos td { text-align:left; padding:11px 13px; border-bottom:1px solid var(--borde); vertical-align:top; }
table.datos th { font-family:var(--fuente-titulo); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.05em; color:var(--enlace); background:var(--superficie-alt); }
table.datos caption { caption-side:bottom; text-align:left; font-size:var(--t-micro); color:var(--texto-suave); padding-top:var(--e-2); }

/* Tarjetas de estadística */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--e-4); margin:var(--e-5) 0; }
.stat { display:flex; align-items:center; gap:var(--e-4); background:var(--acento-tenue); border-radius:var(--radio); padding:var(--e-4); }
.stat img { height:88px; width:auto; flex:0 0 auto; }
.stat .cifra { font-family:var(--fuente-titulo); font-weight:700; font-size:1.7rem; color:var(--enlace); line-height:1.1; font-variant-numeric:tabular-nums; }
.stat.riesgo .cifra { color:var(--aviso-texto); }
.stat.riesgo { background:var(--aviso-fondo); }
.stat p { font-size:var(--t-pequeno); margin:5px 0 0; color:var(--texto); }

/* Recuadros */
.recuadros { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--e-4); margin:var(--e-5) 0; }
.recuadro { border-radius:var(--radio); padding:var(--e-5); }
.recuadro.azul  { border:2px solid var(--acento); background:var(--superficie); }
.recuadro.ambar { border:2px solid var(--aviso);  background:var(--aviso-fondo); }
.recuadro .et { font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-micro); letter-spacing:.05em; text-transform:uppercase; margin:0 0 var(--e-2); }
.recuadro.azul .et  { color:var(--enlace); }
.recuadro.ambar .et { color:var(--aviso-texto); }
.recuadro p:last-child { margin-bottom:0; font-size:var(--t-pequeno); }
.recuadro ul { margin:0; font-size:var(--t-pequeno); }

/* Recuadro neutro: el lado «lo que ya sabíamos» de una comparación. Sin color
   propio, para que el azul del otro lado signifique «esto es lo nuevo». */
.recuadro.neutro { border:2px solid var(--borde-fuerte); background:var(--superficie-alt); }
.recuadro.neutro .et { color:var(--texto-suave); }

/* Cadena de pasos: un razonamiento en 2-4 eslabones. Las flechas son decorativas
   y van en ::after, así que no las lee el lector de pantalla ni se copian al
   seleccionar el texto; en móvil apuntan hacia abajo. */
.pasos { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--e-5);
         list-style:none; margin:var(--e-5) 0; padding:0; max-width:none; }
.pasos li { position:relative; background:var(--superficie); border:1px solid var(--borde);
            border-radius:var(--radio); padding:var(--e-4); font-size:var(--t-pequeno); margin:0; }
.pasos li .num { display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
                 background:var(--marca); color:var(--texto-invertido); font-family:var(--fuente-titulo);
                 font-weight:700; font-size:var(--t-micro); margin-bottom:var(--e-3); }
.pasos li + li::after { content:"→"; position:absolute; left:calc(var(--e-5) * -1); top:50%;
                        transform:translate(-15%,-50%); color:var(--acento); font-size:1.15rem; }
@media (max-width:660px) {
  .pasos li + li::after { left:50%; top:calc(var(--e-5) * -1); transform:translate(-50%,-15%) rotate(90deg); }
}

.clave { background:var(--marca); color:var(--texto-invertido); border-radius:var(--radio); padding:var(--e-5) var(--e-6); margin:var(--e-6) 0; }
.clave .et { font-family:var(--fuente-titulo); font-weight:700; font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; opacity:.8; margin:0 0 var(--e-2); }
.clave p { margin:0; font-family:var(--fuente-titulo); font-weight:600; font-size:var(--t-h3); max-width:none; color:var(--texto-invertido); }

/* Descarga de ficha */
.descarga { display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap; justify-content:space-between;
            background:var(--superficie); border:2px dashed var(--borde-fuerte); border-radius:var(--radio); padding:var(--e-5); margin:var(--e-6) 0; }
.descarga h3 { margin:0 0 4px; font-size:var(--t-h3); }
.descarga p  { margin:0; font-size:var(--t-pequeno); color:var(--texto-suave); }
.descarga .acciones { display:flex; gap:var(--e-2); flex-wrap:wrap; }

/* Referencias y aviso */
.referencias { font-size:var(--t-pequeno); }
.referencias ol { padding-left:1.4rem; }
.referencias li { margin-bottom:10px; color:var(--texto-suave); }
.referencias li a { word-break:break-word; }

.aviso-legal { background:var(--superficie-alt); border:1px solid var(--borde); border-radius:var(--radio); padding:var(--e-4) var(--e-5); margin:var(--e-6) 0 0; }
.aviso-legal p { font-size:var(--t-micro); color:var(--texto-suave); margin:0; max-width:none; }

/* ---------- Pie ----------------------------------------------------------- */
.pie { background:var(--marca); color:var(--texto-invertido); margin-top:var(--e-8); padding-block:var(--e-7) var(--e-5); }
.pie .interior { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--e-6); }
.pie h3 { color:var(--texto-invertido); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.07em; opacity:.75; margin-bottom:var(--e-3); }
.pie a { color:var(--texto-invertido); opacity:.88; }
.pie a:hover { opacity:1; }
.pie ul { list-style:none; margin:0; padding:0; }
.pie li { margin-bottom:9px; font-size:var(--t-pequeno); }
.pie p { font-size:var(--t-pequeno); color:var(--texto-invertido); opacity:.88; }
.pie .legal { border-top:1px solid rgba(255,255,255,.18); margin-top:var(--e-6); padding-top:var(--e-4); font-size:var(--t-micro); opacity:.8; }
:root[data-theme="dark"] .pie .legal { border-top-color:rgba(0,0,0,.22); }

/* ---------- Utilidades ---------------------------------------------------- */
.solo-js { display:none; }
.js .solo-js { display:block; }
.oculto { display:none !important; }