/* Componentes comunes de los sitios IDEAS. Requiere tokens.css antes.
   Gramática: retícula de 12 columnas, alineación a la izquierda, filetes de 1 px en vez de sombras,
   la cápsula solo en botones y etiquetas, la curva de avance una o dos veces por página. */

/* ---------- Estructura ---------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
:root { --margen: clamp(1rem, 4vw, 2rem); }

.reticula {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e-4);
}
@media (max-width: 52rem) {
  .reticula { grid-template-columns: minmax(0, 1fr); }
  .reticula > * { grid-column: 1 / -1 !important; min-width: 0; }
}

/* Solo para lectores de pantalla */
.oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar {
  position: absolute; left: var(--e-2); top: -4rem; z-index: 40;
  background: var(--fondo); color: var(--texto); padding: var(--e-1) var(--e-2); border-radius: var(--radio);
}
.saltar:focus { top: var(--e-2); }

.seccion { padding-block: var(--e-seccion); }
.seccion--superficie { background: var(--superficie); }
.seccion--pegada { padding-top: 0; }
/* Dos secciones seguidas con el mismo fondo comparten un solo espacio */
.seccion:not(.seccion--superficie) + .seccion:not(.seccion--superficie) { padding-top: 0; }
.seccion:last-child:not(.seccion--superficie) { padding-bottom: var(--e-8); }
.seccion-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2);
  border-bottom: 1px solid var(--linea); padding-bottom: var(--e-2); margin-bottom: var(--e-4);
}
.seccion-titulo h2 { margin: 0; font-size: var(--t-h3); }
.seccion-titulo a { font-weight: 500; font-size: var(--t-pequeno); text-decoration: none; }
.seccion-titulo a:hover { text-decoration: underline; }

/* ---------- Cabecera ---------- */
/* Encabezado fijo: fondo sólido (sin transparencias ni desenfoque) y por encima del contenido */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--linea); background: var(--fondo);
  transition: transform 0.25s ease;
}
/* En móvil se oculta al bajar y vuelve al subir (encabezado.js) */
@media (max-width: 52rem) { .cabecera.oculta { transform: translateY(-100%); } }
/* Que los anclas (#contenido, títulos del artículo) no queden tapados por el encabezado */
html { scroll-padding-top: calc(4.75rem + var(--e-2)); }
.cabecera .contenedor {
  display: flex; align-items: center; gap: var(--e-4);
  min-height: 4.75rem;
}
.cabecera .marca-inicio { display: inline-flex; padding-block: var(--e-2); margin-right: auto; }
.logo { display: inline-flex; }
.logo img { height: auto; max-width: 100%; }

.navegacion { display: flex; align-items: center; gap: var(--e-3); }
.navegacion a {
  color: var(--texto); font-weight: 500; font-size: 0.9375rem; text-decoration: none;
  padding-block: 0.4rem; border-bottom: 2px solid transparent;
}
.navegacion a:hover { border-bottom-color: var(--linea); }
.navegacion a[aria-current="page"], .navegacion a.active { border-bottom-color: var(--marca); }

.apariencia { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio-capsula); padding: 2px; }
.apariencia button {
  font: 400 0.75rem/1 var(--fuente); letter-spacing: 0.02em; color: var(--texto-2);
  background: none; border: 0; border-radius: var(--radio-capsula); padding: 0.45em 0.8em; cursor: pointer;
}
.apariencia button:hover { color: var(--texto); }
:root:not([data-apariencia]) .apariencia [data-modo="auto"],
:root[data-apariencia="claro"] .apariencia [data-modo="claro"],
:root[data-apariencia="oscuro"] .apariencia [data-modo="oscuro"] { background: var(--superficie); color: var(--texto); font-weight: 600; }

/* Menú móvil: <details> nativo, sin JavaScript */
.menu-movil { display: none; }
.menu-movil summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: 0.9375rem;
  padding: 0.55em 1.1em; border: 1px solid var(--linea); border-radius: var(--radio-capsula);
}
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil[open] summary { background: var(--superficie); }
.menu-movil .panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--fondo); border-bottom: 1px solid var(--linea);
  padding: var(--e-3) var(--margen) var(--e-4);
  display: grid; gap: var(--e-2);
  max-height: calc(100dvh - 4.75rem); overflow-y: auto;
}
.menu-movil .panel a { color: var(--texto); font-weight: 500; font-size: 1.125rem; text-decoration: none; padding-block: 0.35rem; }
@media (max-width: 52rem) {
  .cabecera .navegacion, .cabecera > .contenedor > .apariencia { display: none; }
  .menu-movil { display: block; }
}

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
.portada .reticula { position: relative; z-index: 1; align-items: end; }
.portada-texto { grid-column: 1 / span 8; }
.portada-texto .etiqueta { margin-bottom: var(--e-3); }
.portada h1 {
  font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: var(--e-3);
  max-width: 14ch;
}
.portada h1 .sufijo { color: var(--acento); }
.portada-bajada { font-size: var(--t-h3); font-weight: 300; line-height: 1.45; color: var(--texto-2); max-width: 34rem; margin: 0; }
.portada-isotipo { grid-column: 10 / span 3; justify-self: end; }
.portada-isotipo img { display: block; width: auto; height: clamp(12rem, 8rem + 14vw, 22rem); }
.portada .curva-avance {
  position: absolute; z-index: 0; left: -2%; bottom: 8%; width: 82%; height: 78%;
  opacity: 0.55;
}
.portada .curva-avance { animation: aparecer 0.9s ease 0.15s both; }
.portada-texto > * { animation: entrar 0.6s cubic-bezier(.2,.7,.2,1) both; }
.portada-texto > :nth-child(2) { animation-delay: 60ms; }
.portada-texto > :nth-child(3) { animation-delay: 120ms; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(0.6rem); } }
@media (max-width: 52rem) {
  .portada-isotipo { display: none; }
  .portada .curva-avance { width: 120%; height: 60%; bottom: 0; opacity: 0.35; }
}

/* ---------- Destacado + lo más reciente ---------- */
.destacado { grid-column: 1 / span 7; }
.destacado .etiqueta { margin-bottom: var(--e-2); }
.destacado h2 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.03em; margin-bottom: var(--e-3); }
.destacado h2 a { color: inherit; text-decoration: none; }
.destacado h2 a:hover { text-decoration: underline; text-decoration-color: var(--marca); text-decoration-thickness: 2px; }
.destacado .resumen { font-size: 1.1875rem; color: var(--texto-2); }
.destacado .leer { display: inline-flex; margin-top: var(--e-2); }

.recientes { grid-column: 9 / span 4; }
.recientes h2 { font-size: var(--t-etiqueta); font-weight: 400; letter-spacing: 0.3em; text-transform: lowercase; color: var(--texto-2); margin-bottom: var(--e-2); }
.numerada { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numerada li {
  counter-increment: n; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--e-2);
  padding-block: var(--e-3); border-top: 1px solid var(--linea);
}
.numerada li::before {
  content: counter(n, decimal-leading-zero); font-weight: 300; font-size: 1.5rem; line-height: 1.1;
  color: var(--acento); font-variant-numeric: tabular-nums;
}
.numerada a { color: var(--texto); font-weight: 600; text-decoration: none; line-height: 1.35; }
.numerada a:hover { text-decoration: underline; text-decoration-color: var(--marca); }
.numerada .fecha { display: block; margin-top: 0.35rem; font-size: var(--t-pequeno); color: var(--texto-2); }
@media (max-width: 52rem) { .recientes { margin-top: var(--e-6); } }

/* ---------- Listados ---------- */
.listado { list-style: none; margin: 0; padding: 0; }
.listado > li {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) 10rem; gap: var(--e-4);
  padding-block: var(--e-4); border-top: 1px solid var(--linea);
}
.listado > li:last-child { border-bottom: 1px solid var(--linea); }
.seccion-titulo + .listado > li:first-child { border-top: 0; padding-top: 0; }
.listado time, .listado .tema { font-size: var(--t-pequeno); color: var(--texto-2); padding-top: 0.3rem; }
.listado .tema { text-align: right; }
.listado .tema a { color: inherit; text-decoration: none; }
.listado .tema a:hover { color: var(--acento); }
.listado h3 { margin: 0 0 var(--e-1); }
.listado h3 a { color: var(--texto); text-decoration: none; }
.listado h3 a:hover { text-decoration: underline; text-decoration-color: var(--marca); text-decoration-thickness: 2px; }
.listado p { margin: 0; color: var(--texto-2); }
@media (max-width: 52rem) {
  .listado > li { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
  .listado .tema { text-align: left; order: -1; padding: 0; }
  .listado time { order: 3; padding: 0; }
}

.compacta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
.compacta li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-2); padding-block: var(--e-2); border-top: 1px solid var(--linea); }
.compacta time { font-size: var(--t-pequeno); color: var(--texto-2); padding-top: 0.15rem; }
.compacta a { color: var(--texto); font-weight: 500; text-decoration: none; }
.compacta a:hover { color: var(--acento); }
@media (max-width: 52rem) { .compacta { grid-template-columns: minmax(0, 1fr); } }

.encabezado-pagina { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--e-6); }
.encabezado-pagina h1 { margin-bottom: var(--e-2); }
.encabezado-pagina p { color: var(--texto-2); font-size: 1.1875rem; }

.paginacion { display: flex; justify-content: space-between; gap: var(--e-2); padding-block: var(--e-6); }
.paginacion .vacio { visibility: hidden; }
.vacio-mensaje { color: var(--texto-2); padding-block: var(--e-6); }

.buscador { display: flex; gap: var(--e-1); max-width: 34rem; }
.buscador input {
  flex: 1; min-width: 0; font: 400 1rem var(--fuente); color: var(--texto); background: var(--fondo);
  border: 1.5px solid var(--linea); border-radius: var(--radio-capsula); padding: 0.8em 1.2em;
}
.buscador input:focus { outline: none; border-color: var(--marca); }

/* ---------- Artículo ---------- */
.articulo { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--e-8); }
.articulo-cabecera { margin-bottom: var(--e-6); }
.articulo-cabecera .etiqueta a { color: inherit; text-decoration: none; }
.articulo-cabecera .etiqueta a:hover { color: var(--acento); }
.articulo-cabecera h1 { margin-block: var(--e-2) var(--e-3); }
.entradilla { font-size: var(--t-h3); font-weight: 300; line-height: 1.45; color: var(--texto-2); max-width: none; }
.meta { font-size: var(--t-pequeno); color: var(--texto-2); display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; padding-top: var(--e-3); border-top: 1px solid var(--linea); }
.meta a { color: var(--texto); font-weight: 600; text-decoration: none; }
.meta a:hover { color: var(--acento); }
.meta .sep { color: var(--linea); }

.portada-articulo { margin: 0 0 var(--e-6); }
.portada-articulo figcaption { font-size: var(--t-pequeno); color: var(--texto-2); margin-top: 0.7em; }
.portada-articulo img { display: block; width: 100%; height: auto; border-radius: var(--radio); }

/* Columnas del artículo: texto (≈65 caracteres), amplio (+5 rem a cada lado) y completo.
   Cabecera, prosa y pie usan la misma plantilla para que sus bordes coincidan. */
.columnas {
  display: grid;
  /* Los nombres deben terminar en -start/-end para que "grid-column: texto" encuentre el área. */
  grid-template-columns: [completo-start] minmax(0, 1fr) [amplio-start] minmax(0, 5rem) [texto-start] minmax(0, var(--ancho-texto)) [texto-end] minmax(0, 5rem) [amplio-end] minmax(0, 1fr) [completo-end];
}
.columnas > * { grid-column: texto; min-width: 0; }
@media (max-width: 52rem) {
  /* En móvil no hay márgenes "amplios": todo el ancho es para el texto */
  .columnas { grid-template-columns: [completo-start amplio-start texto-start] minmax(0, 1fr) [texto-end amplio-end completo-end]; }
}
.articulo-cabecera > *, .portada-articulo { grid-column: amplio; }
.prosa {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.72;
}
.prosa > * { grid-column: texto; }
.prosa > .ancho-amplio, .prosa > figure.ancho-amplio { grid-column: amplio; }
.prosa > .ancho-completo, .prosa > figure.ancho-completo { grid-column: completo; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1.15em; max-width: none; }
.prosa h2 { font-size: var(--t-h2); margin: 2em 0 0.6em; }
.prosa h3 { font-size: var(--t-h3); margin: 1.8em 0 0.5em; }
.prosa li { margin-bottom: 0.35em; }
.prosa li::marker { color: var(--acento); }
.prosa a { color: var(--acento); text-decoration-thickness: 1px; }
.prosa strong { font-weight: 600; }
.prosa hr { border: 0; height: 1px; background: var(--linea); margin: 2.5em 0; }
.prosa blockquote {
  margin: 1.8em 0; padding: 0.2em 0 0.2em 1.4em; border-left: 3px solid var(--marca);
  font-size: 1.2em; font-weight: 300; line-height: 1.55;
}
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa code { font-size: 0.88em; background: var(--superficie); border-radius: 4px; padding: 0.12em 0.35em; }
.prosa pre {
  background: #0c1d2f; color: #e6edf3; border-radius: var(--radio); padding: 1.1em 1.3em;
  overflow-x: auto; font-size: 0.9rem; line-height: 1.6; margin: 0 0 1.5em;
}
.prosa pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.prosa table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 0.95em; font-variant-numeric: tabular-nums; }
.prosa th { text-align: left; font-weight: 600; border-bottom: 1.5px solid var(--texto); padding: 0.55em 0.75em 0.55em 0; }
.prosa td { border-bottom: 1px solid var(--linea); padding: 0.55em 0.75em 0.55em 0; vertical-align: top; }
.prosa .tabla { overflow-x: auto; }
.prosa figure { margin: 1.5em 0 2em; }
.prosa figure img, .prosa p > img { display: block; width: 100%; height: auto; border-radius: var(--radio); }
.prosa figcaption { font-size: var(--t-pequeno); color: var(--texto-2); margin-top: 0.7em; }
.prosa .math { overflow-x: auto; overflow-y: hidden; }
.prosa div.math { margin: 0.4em 0 1.2em; text-align: center; font-size: 1.08em; }
.prosa div.math .katex-display { margin: 0; }

/* Bloques con ::: en Markdown (nota, consejo, advertencia) */
.prosa .nota, .prosa .consejo, .prosa .advertencia {
  background: var(--superficie); border-radius: var(--radio); padding: 1.1em 1.3em; margin: 1.5em 0 1.8em;
  border-left: 3px solid var(--marca);
}
.prosa .advertencia { border-left-color: var(--texto); }
.prosa .nota > :last-child, .prosa .consejo > :last-child, .prosa .advertencia > :last-child { margin-bottom: 0; }

/* Dato destacado: :::dato con un número en negrita y su explicación */
.prosa .dato { margin: 1.8em 0; padding-block: 0.6em; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.prosa .dato strong:first-child { display: block; font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--acento); }
.prosa .dato p { margin: 0.3em 0 0; color: var(--texto-2); }

.articulo-pie { margin-top: var(--e-6); }
.capsulas { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 var(--e-4); }
.capsula {
  display: inline-block; font-size: var(--t-pequeno); color: var(--texto); text-decoration: none;
  border: 1px solid var(--linea); border-radius: var(--radio-capsula); padding: 0.35em 0.95em;
}
a.capsula:hover { border-color: var(--marca); }

.autor-ficha { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--e-2); align-items: start; padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.avatar {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie); color: var(--acento); font-weight: 600; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.autor-ficha b { display: block; }
.autor-ficha b a { color: var(--texto); text-decoration: none; }
.autor-ficha span, .autor-ficha p { color: var(--texto-2); font-size: var(--t-pequeno); margin: 0.15rem 0 0; }

/* ---------- Pie (siempre marino) ---------- */
.pie {
  --texto: #f4f7fa; --texto-2: #a9b4bf; --linea: #24405e; --acento: var(--marca-oscuro);
  background: var(--marino); color: var(--texto);
  padding-block: var(--e-8) var(--e-4);
}
:root[data-apariencia="oscuro"] .pie { background: #0c1d2f; border-top: 1px solid var(--linea); }
@media (prefers-color-scheme: dark) { :root:not([data-apariencia="claro"]) .pie { background: #0c1d2f; border-top: 1px solid var(--linea); } }
.pie-principal { grid-column: 1 / span 5; }
.pie-principal img { display: block; height: 2.75rem; width: auto; margin-bottom: var(--e-3); }
.pie-principal p { color: var(--texto-2); max-width: 26rem; }
.pie-enlaces { grid-column: 7 / span 2; }
.pie-familia { grid-column: 9 / span 4; }
.pie h2 { font-size: var(--t-etiqueta); font-weight: 400; letter-spacing: 0.3em; text-transform: lowercase; color: var(--texto-2); margin-bottom: var(--e-2); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pie a { color: var(--texto); text-decoration: none; font-size: 0.9375rem; }
.pie a:hover { color: var(--acento); }
.pie-familia img { display: block; height: 22px; width: auto; }
.pie-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2);
  margin-top: var(--e-6); padding-top: var(--e-3); border-top: 1px solid var(--linea);
  font-size: var(--t-pequeno); color: var(--texto-2);
}
@media (max-width: 52rem) { .pie-enlaces, .pie-familia { margin-top: var(--e-4); } }

/* ---------- 404 ---------- */
.no-encontrado { padding-block: var(--e-seccion); }
.no-encontrado .cifra { font-size: var(--t-display); font-weight: 700; color: var(--acento); line-height: 1; letter-spacing: -0.04em; }

@media print {
  .cabecera, .pie, .apariencia, .menu-movil, .articulo-pie .capsulas { display: none !important; }
  body { background: #fff; color: #000; }
}