/* =========================================================
   Cholul.com.mx · hoja de estilos del tema (prototipo v0.1)
   Concepto: revista de pueblo. Portada en verde selva,
   retícula de 12 columnas, la albarrada como separador.
   Sin fuentes externas ni frameworks. JS mínimo: solo el botón de modo noche.
   ========================================================= */

:root {
  /* Color (plan de lanzamiento) */
  --selva: #2F5D3A;        /* principal */
  --selva-hondo: #1E3D27;  /* bloques oscuros */
  --ocre: #C08A3E;         /* acento: botones, sellos */
  --ocre-texto: #8A5A1C;   /* ocre legible sobre hueso (AA) */
  --hueso: #FFFFFF;        /* fondo blanco (pedido de Luis) */
  --arena: #F6F3EC;        /* superficies: blanco cálido */
  --tinta: #1F1F1F;        /* texto */
  --tinta-suave: #55574F;  /* texto secundario */
  --linea: #E6E1D6;        /* filetes */
  --sobre-oscuro: #F6F1E6; /* texto sobre verde */
  --sobre-oscuro-suave: #C9D6C6;
  --foco: #C08A3E;

  /* Tipografía del sistema (sin descargas) */
  --f-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;
  --f-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --f-dato: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica (1.25) */
  --t-xs: .78rem; --t-s: .875rem; --t-m: 1rem; --t-l: 1.2rem;
  --t-xl: 1.5rem; --t-2xl: 1.95rem; --t-3xl: 2.6rem; --t-4xl: clamp(2.3rem, 5.2vw, 3.6rem);

  /* Espacio y forma */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4.5rem;
  --radio: 6px;
  --ancho: 1200px;
  --lectura: 68ch;
}

:root.noche { /* Modo noche: solo cuando la persona lo elige con el botón */
  --selva: #8DBF95; --selva-hondo: #18271B; --ocre: #D9A55A; --ocre-texto: #E0B06B;
  --hueso: #111612; --arena: #1A211C; --tinta: #ECE6DA; --tinta-suave: #A9AE9F;
  --linea: #2C362E; --sobre-oscuro: #F1EBDF; --sobre-oscuro-suave: #B7C6B3; --foco: #E0B06B;
  color-scheme: dark;
}
:root:not(.noche) { color-scheme: light; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hueso); color: var(--tinta);
  font: 400 var(--t-m)/1.6 var(--f-texto);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--selva); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -.2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--ocre); color: #1F1F1F; padding: var(--e2) var(--e4); z-index: 50; }
.saltar:focus { left: max(16px, env(safe-area-inset-left, 0px)); }

.wrap {
  max-width: calc(var(--ancho) + 2 * 24px); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }

/* ---------- Piezas pequeñas ---------- */
.ceja { font: 600 var(--t-xs)/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-texto); }
.ceja--clara { color: var(--ocre); }
.meta { font-size: var(--t-xs); color: var(--tinta-suave); display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); align-items: center; }
.meta .ico { width: 1.05em; height: 1.05em; }
.sello { display: inline-flex; align-items: center; gap: .35em; font: 600 var(--t-xs)/1 var(--f-texto); letter-spacing: .04em; padding: .38em .6em; border-radius: 99px; background: var(--arena); color: var(--tinta-suave); border: 1px solid var(--linea); }
.sello--ocre { background: color-mix(in srgb, var(--ocre) 18%, transparent); color: var(--ocre-texto); border-color: color-mix(in srgb, var(--ocre) 40%, transparent); }

.btn { display: inline-flex; align-items: center; gap: .5em; font: 600 var(--t-s)/1 var(--f-texto); padding: .85em 1.15em; border-radius: var(--radio); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn--ocre { background: var(--ocre); color: #1F1F1F; }
.btn--ocre:hover { background: color-mix(in srgb, var(--ocre) 85%, #fff); }
.btn--borde { border-color: currentColor; color: inherit; }
.btn--selva { background: var(--selva); color: var(--hueso); }
.flecha { text-decoration: none; font-weight: 600; font-size: var(--t-s); display: inline-flex; align-items: center; gap: .35em; }
.flecha:hover { text-decoration: underline; }

/* Ilustraciones provisionales (en WP: <img> WebP con srcset) */
.foto { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--arena); aspect-ratio: 16 / 10; max-width: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption, .credito { font-size: var(--t-xs); color: var(--tinta-suave); }

/* Albarrada: separador con piedras (detalle propio de Cholul) */
.albarrada { height: 18px; background: url("../img/albarrada.svg") repeat-x left center / auto 18px; opacity: .9; }

/* ---------- Barra superior ---------- */
.barra { background: var(--selva-hondo); color: var(--sobre-oscuro-suave); font-size: var(--t-xs); }
.barra .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding-block: .5rem; flex-wrap: wrap; }
.barra strong { color: var(--sobre-oscuro); font-weight: 600; }
.idioma { display: inline-flex; align-items: center; gap: .4em; color: var(--sobre-oscuro); }
.idioma select { font: inherit; color: var(--sobre-oscuro); background: transparent; border: 1px solid color-mix(in srgb, var(--sobre-oscuro) 35%, transparent); border-radius: 4px; padding: .15em .3em; }
.idioma select option { color: #1F1F1F; }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--hueso); border-bottom: 1px solid var(--linea); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--hueso); }
.cabecera .wrap { display: flex; align-items: center; gap: var(--e5); padding-block: .8rem; }
.logo { display: flex; flex-direction: column; text-decoration: none; color: var(--tinta); line-height: 1; margin-right: auto; }
.logo b { font: 700 1.75rem/1 var(--f-display); letter-spacing: -.02em; color: var(--selva); }
.logo b i { font-style: normal; color: var(--ocre-texto); font-size: .55em; vertical-align: .55em; margin-left: 1px; }
.logo span { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); margin-top: .35rem; }
.menu { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e1); }
.menu a { display: block; padding: .5rem .65rem; text-decoration: none; color: var(--tinta); font-size: var(--t-s); font-weight: 500; border-radius: 4px; }
.menu a:hover { background: var(--arena); }
.menu a[aria-current="page"] { color: var(--selva); box-shadow: inset 0 -2px 0 var(--ocre); border-radius: 0; }
.acciones { display: flex; align-items: center; gap: var(--e2); }
.icono-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--tinta); text-decoration: none; }
.icono-btn:hover { background: var(--arena); }
.acciones .btn { display: none; }

/* Menú móvil sin JS */
.menu-movil > summary { list-style: none; cursor: pointer; }
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil[open] > summary .abrir, .menu-movil:not([open]) > summary .cerrar { display: none; }
.menu-movil nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--hueso); border-bottom: 1px solid var(--linea); box-shadow: 0 12px 24px -12px rgb(0 0 0 / .25); }
.menu-movil ul { list-style: none; margin: 0; padding: var(--e2) max(16px, env(safe-area-inset-right, 0px)) var(--e4) max(16px, env(safe-area-inset-left, 0px)); display: grid; }
.menu-movil li a { display: flex; justify-content: space-between; padding: .8rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-weight: 500; }
.menu-movil small { color: var(--tinta-suave); font-weight: 400; }

@media (min-width: 1040px) {
  .menu { display: block; }
  .menu-movil { display: none; }
  .acciones .btn { display: inline-flex; }
}

/* ---------- Encabezados de sección ---------- */
.bloque { padding-block: var(--e7); }
.bloque--arena { background: var(--arena); }
.cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e3) var(--e5); margin-bottom: var(--e5); }
.cabeza h2 { font-size: var(--t-2xl); }
.cabeza p { color: var(--tinta-suave); max-width: 52ch; margin-top: .35rem; font-size: var(--t-s); }

/* ---------- Portada (hero) ---------- */
.portada { padding-block: var(--e5) var(--e6); }
.portada-grid { display: grid; gap: var(--e3); }
.portada-principal { display: grid; border-radius: var(--radio); overflow: hidden; background: var(--selva-hondo); color: var(--sobre-oscuro); }
.portada-texto { padding: var(--e6) var(--e5); display: flex; flex-direction: column; gap: var(--e4); justify-content: center; }
.portada-texto h1 { font-size: var(--t-4xl); font-weight: 600; line-height: 1.02; }
.portada-texto h1 em { font-style: normal; color: var(--ocre); }
.portada-texto p { color: var(--sobre-oscuro-suave); max-width: 44ch; }
.portada-botones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e2); }
.portada-botones .btn--borde { color: var(--sobre-oscuro); }
.garantias { list-style: none; padding: var(--e4) 0 0; margin: var(--e2) 0 0; display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); border-top: 1px solid color-mix(in srgb, var(--sobre-oscuro) 18%, transparent); font-size: var(--t-xs); color: var(--sobre-oscuro-suave); }
.garantias li { display: flex; gap: .5em; align-items: center; }
.garantias .ico { color: var(--ocre); width: 1.3em; height: 1.3em; }
.portada-imagen { position: relative; min-height: 240px; margin: 0; }
.portada-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-imagen figcaption { position: absolute; left: var(--e4); bottom: var(--e4); right: var(--e4); font-size: var(--t-xs); color: #F6F1E6; text-shadow: 0 1px 2px rgb(0 0 0 / .6); }

.portada-lateral { display: grid; gap: var(--e3); }
.tarjeta-sobre { position: relative; display: grid; grid-template-columns: 1fr 42%; min-height: 136px; border-radius: var(--radio); overflow: hidden; background: var(--selva-hondo); color: var(--sobre-oscuro); text-decoration: none; }
.tarjeta-sobre > div { padding: var(--e4); display: flex; flex-direction: column; gap: .35rem; justify-content: center; }
.tarjeta-sobre h3 { font-size: var(--t-l); line-height: 1.15; }
.tarjeta-sobre .flecha { color: var(--ocre); font-size: var(--t-xs); }
.tarjeta-sobre img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-sobre:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

@media (min-width: 760px) {
  .portada-principal { grid-template-columns: 1.05fr 1fr; }
  .portada-texto { padding: var(--e7) var(--e6); }
}
@media (min-width: 1040px) {
  .portada-grid { grid-template-columns: 2.3fr 1fr; }
  .portada-lateral { grid-template-rows: repeat(3, 1fr); }
}

/* ---------- Accesos rápidos ---------- */
.accesos { border-block: 1px solid var(--linea); background: var(--hueso); }
/* Rejilla que se adapta al número de accesos: líneas por celda, sin depender de cuántos haya. */
.accesos ul { list-style: none; margin: 0 -1px -1px 0; padding: 0; clip-path: inset(0 1px 1px 0); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accesos li { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); min-width: 0; }
.accesos a { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: var(--e4) var(--e1); text-decoration: none; color: var(--tinta); font-size: var(--t-xs); font-weight: 600; text-align: center; line-height: 1.25; }
.accesos a:hover { background: var(--arena); color: var(--selva); }
.accesos .ico { width: 26px; height: 26px; color: var(--selva); stroke-width: 1.5; }
@media (min-width: 600px) and (max-width: 999px) { .accesos ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Escritorio: todos en una sola fila, del mismo ancho. */
@media (min-width: 1000px) {
  .accesos ul { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .accesos .ico { width: 24px; height: 24px; }
}

/* ---------- Eventos (tarjetas con fecha) ---------- */
.eventos-fila { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.evento { display: grid; grid-template-columns: auto 1fr; gap: var(--e4); padding: var(--e4); background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--radio); align-items: start; }
.bloque--arena .evento { background: var(--hueso); }
.fecha { width: 64px; text-align: center; border-radius: 4px; overflow: hidden; border: 1px solid var(--linea); background: var(--hueso); font-variant-numeric: tabular-nums; }
.fecha span { display: block; background: var(--selva); color: var(--hueso); font: 700 .66rem/1 var(--f-texto); letter-spacing: .12em; padding: .35rem 0; text-transform: uppercase; }
.fecha b { display: block; font: 600 1.75rem/1.25 var(--f-display); padding: .15rem 0 .1rem; }
.fecha small { display: block; font-size: .66rem; color: var(--tinta-suave); padding-bottom: .3rem; }
.evento h3 { font-size: var(--t-l); line-height: 1.2; margin: .25rem 0 .35rem; }
.evento h3 a { color: inherit; text-decoration: none; }
.evento h3 a:hover { text-decoration: underline; }
.evento p { font-size: var(--t-s); color: var(--tinta-suave); }

/* ---------- Historias (tarjetas editoriales) ---------- */
.historia { display: grid; gap: var(--e3); align-content: start; }
.historia h3 { font-size: var(--t-xl); }
.historia h3 a { color: inherit; text-decoration: none; }
.historia h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.historia p { color: var(--tinta-suave); font-size: var(--t-s); }
.historia--chica h3 { font-size: var(--t-l); }

.destacado { display: grid; gap: var(--e6); }
.destacado-principal { display: grid; gap: var(--e5); }
.destacado-principal h3 { font-size: var(--t-3xl); line-height: 1.05; }
.destacado-principal .entradilla { font-size: var(--t-l); color: var(--tinta-suave); line-height: 1.5; max-width: 46ch; }
.lista-num { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-num li { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--e3); padding-block: var(--e4); border-top: 1px solid var(--linea); }
.lista-num li:first-child { border-top: 0; padding-top: 0; }
.lista-num .n { font: 600 var(--t-2xl)/1 var(--f-display); color: var(--ocre-texto); font-variant-numeric: tabular-nums; }
.lista-num a { color: var(--tinta); text-decoration: none; font: 600 var(--t-l)/1.25 var(--f-display); }
.lista-num a:hover { text-decoration: underline; }
.lista-num .ceja { display: block; margin-bottom: .2rem; }
@media (min-width: 900px) {
  .destacado { grid-template-columns: 1.15fr 1fr .85fr; align-items: start; }
  .destacado-principal { grid-column: 1 / 3; grid-template-columns: 1fr 1.1fr; align-items: center; }
}

/* Recuadro de guía */
.recuadro { background: var(--selva-hondo); color: var(--sobre-oscuro); border-radius: var(--radio); padding: var(--e5); display: grid; gap: var(--e3); align-content: start; }
.recuadro h3 { font-size: var(--t-xl); }
.recuadro p { color: var(--sobre-oscuro-suave); font-size: var(--t-s); }
.recuadro ul { list-style: none; padding: 0; margin: 0; display: grid; }
.recuadro li a { display: flex; justify-content: space-between; gap: var(--e3); padding: .6rem 0; border-top: 1px solid color-mix(in srgb, var(--sobre-oscuro) 15%, transparent); color: var(--sobre-oscuro); text-decoration: none; font-size: var(--t-s); }
.recuadro li a:hover { color: var(--ocre); }

/* ---------- Deportes: fichas de instalaciones ---------- */
.instalaciones { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.instalacion { background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.instalacion .foto { border-radius: 0; aspect-ratio: 16 / 9; }
.instalacion > div { padding: var(--e4); display: grid; gap: .45rem; align-content: start; }
.instalacion h3 { font-size: var(--t-l); }
.instalacion h3 a { color: inherit; text-decoration: none; }
.instalacion p { font-size: var(--t-s); color: var(--tinta-suave); }
.etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }

/* ---------- Noticias enlazadas ---------- */
.noticias { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.noticia { display: grid; gap: var(--e2); padding-block: var(--e4); border-top: 1px solid var(--linea); }
.noticia:last-child { border-bottom: 1px solid var(--linea); }
.noticia h3 { font-size: var(--t-l); line-height: 1.25; }
.noticia h3 a { color: inherit; text-decoration: none; }
.noticia h3 a:hover { text-decoration: underline; }
.noticia p { font-size: var(--t-s); color: var(--tinta-suave); max-width: 80ch; }
.noticia .fuente { font-weight: 600; color: var(--tinta); }
@media (min-width: 760px) {
  .noticia { grid-template-columns: 8.5rem 1fr auto; gap: var(--e5); align-items: baseline; }
  .noticia time { font-variant-numeric: tabular-nums; }
}

/* ---------- Comunidad / micrositios ---------- */
.causas { display: grid; gap: var(--e5); }
.causa { display: grid; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--hueso); }
.causa .foto { border-radius: 0; aspect-ratio: 16/9; }
.causa-cuerpo { padding: var(--e5); display: grid; gap: var(--e3); align-content: center; }
.causa h3 { font-size: var(--t-2xl); }
.franja-grupo { display: flex; gap: .5em; align-items: flex-start; font-size: var(--t-xs); background: var(--arena); border-left: 3px solid var(--ocre); padding: .6rem .8rem; color: var(--tinta-suave); }
.franja-grupo strong { color: var(--tinta); }
@media (min-width: 860px) {
  .causas { grid-template-columns: 1.6fr 1fr; }
  .causa { grid-template-columns: 1fr 1.1fr; }
  .causa .foto { aspect-ratio: auto; height: 100%; }
}
.sumate { border: 1.5px dashed var(--linea); border-radius: var(--radio); padding: var(--e5); display: grid; gap: var(--e3); align-content: center; }
.sumate h3 { font-size: var(--t-xl); }
.sumate p { font-size: var(--t-s); color: var(--tinta-suave); }

/* ---------- Cómo trabajamos (confianza) ---------- */
.confianza { background: var(--selva-hondo); color: var(--sobre-oscuro); }
.confianza .bloque { padding-block: var(--e7); }
.confianza h2 { font-size: var(--t-2xl); }
.confianza-grid { display: grid; gap: var(--e6); }
.principios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.principios li { display: grid; gap: .4rem; align-content: start; }
.principios .ico { width: 28px; height: 28px; color: var(--ocre); }
.principios b { font: 600 var(--t-l)/1.2 var(--f-display); }
.principios span { font-size: var(--t-s); color: var(--sobre-oscuro-suave); }
@media (min-width: 900px) { .confianza-grid { grid-template-columns: 1fr 2.4fr; align-items: start; } }

/* ---------- Pie ---------- */
.pie { background: var(--arena); border-top: 1px solid var(--linea); font-size: var(--t-s); }
.pie-grid { display: grid; gap: var(--e6); padding-block: var(--e7) var(--e6); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pie-marca { display: grid; gap: var(--e3); align-content: start; grid-column: 1 / -1; max-width: 40ch; }
@media (min-width: 900px) { .pie-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } .pie-marca { grid-column: auto; } }
.pie-marca p { color: var(--tinta-suave); }
.pie h4 { font: 600 var(--t-xs)/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: var(--e3); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie a { color: var(--tinta); text-decoration: none; }
.pie a:hover { color: var(--selva); text-decoration: underline; }
.correo { font-family: var(--f-dato); font-size: var(--t-s); user-select: all; }
.aviso-pie { border-top: 1px solid var(--linea); padding-block: var(--e4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3); font-size: var(--t-xs); color: var(--tinta-suave); }
.aviso-pie strong { color: var(--tinta); }

/* ---------- Cabecera de página interior ---------- */
.migas { font-size: var(--t-xs); color: var(--tinta-suave); padding-block: var(--e4) 0; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.migas li + li::before { content: "/"; margin-right: .4em; color: var(--linea); }
.migas a { color: var(--tinta-suave); }
.encabezado { padding-block: var(--e5) var(--e6); display: grid; gap: var(--e4); border-bottom: 1px solid var(--linea); }
.encabezado h1 { font-size: var(--t-4xl); line-height: 1.04; max-width: 20ch; }
.encabezado .entradilla { font-size: var(--t-l); color: var(--tinta-suave); max-width: 60ch; line-height: 1.5; }
.encabezado--verde { background: var(--selva-hondo); color: var(--sobre-oscuro); border: 0; }
.encabezado--verde .entradilla { color: var(--sobre-oscuro-suave); }
.encabezado--verde .migas, .encabezado--verde .migas a { color: var(--sobre-oscuro-suave); }
.encabezado--verde .meta { color: var(--sobre-oscuro-suave); }

/* Índice de anclas */
.indice { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.indice a, .chip { display: inline-flex; align-items: center; gap: .4em; padding: .45rem .8rem; border-radius: 99px; border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-size: var(--t-s); background: var(--hueso); }
.indice a:hover, .chip:hover { border-color: var(--selva); color: var(--selva); }
.chip[aria-pressed="true"] { background: var(--selva); border-color: var(--selva); color: var(--hueso); }

/* Diseño con columna lateral */
.con-lateral { display: grid; gap: var(--e7); padding-block: var(--e6) var(--e7); }
.con-lateral > * { min-width: 0; }
@media (min-width: 980px) { .con-lateral { grid-template-columns: minmax(0, 1fr) 300px; } .lateral { position: sticky; top: 96px; align-self: start; } }
.lateral { display: grid; gap: var(--e5); }
.caja { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e5); display: grid; gap: var(--e3); background: var(--hueso); }
.caja h2, .caja h3 { font-size: var(--t-l); }
.caja p { font-size: var(--t-s); color: var(--tinta-suave); }
.caja--ocre { background: color-mix(in srgb, var(--ocre) 12%, var(--hueso)); border-color: color-mix(in srgb, var(--ocre) 35%, transparent); }
.caja ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; font-size: var(--t-s); }

/* Directorio (fichas con enlace a fuente) */
.grupo { display: grid; gap: var(--e4); padding-top: var(--e6); scroll-margin-top: 90px; }
.grupo:first-child { padding-top: 0; }
.grupo > h2 { font-size: var(--t-2xl); display: flex; align-items: center; gap: .5rem; }
.grupo > h2 .ico { color: var(--selva); width: 28px; height: 28px; }
.grupo > p { color: var(--tinta-suave); max-width: 64ch; }
.fichas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ficha { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4); display: grid; gap: .45rem; align-content: start; background: var(--hueso); }
.ficha h3 { font-size: var(--t-l); }
.ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; font-size: var(--t-s); }
.ficha dt { color: var(--tinta-suave); }
.ficha dd { margin: 0; }
.ficha .pie-ficha { display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; align-items: center; padding-top: .5rem; margin-top: .3rem; border-top: 1px solid var(--linea); font-size: var(--t-xs); color: var(--tinta-suave); }

/* ---------- Artículo (crónica) ---------- */
.articulo-cab { padding-block: var(--e5) var(--e5); display: grid; gap: var(--e4); max-width: 860px; }
.articulo-cab h1 { font-size: var(--t-4xl); line-height: 1.04; }
.articulo-cab .entradilla { font-size: var(--t-l); color: var(--tinta-suave); line-height: 1.5; }
.firma { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); align-items: center; font-size: var(--t-s); padding-block: var(--e3); border-block: 1px solid var(--linea); }
.firma .autor { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.firma .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--selva); color: var(--hueso); display: grid; place-items: center; font: 700 .95rem/1 var(--f-display); }
.firma .meta { font-size: var(--t-s); }
.aviso-ia { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-s); color: var(--tinta-suave); background: var(--arena); padding: .7rem .9rem; border-radius: var(--radio); }
.aviso-ia .ico { color: var(--ocre-texto); margin-top: .15em; }
.figura-grande { margin: 0 0 var(--e5); display: grid; gap: .5rem; }
.figura-grande .foto { aspect-ratio: 21 / 9; }
.prosa { max-width: var(--lectura); font-size: calc(1.075rem * var(--escala, 1)); line-height: 1.72; }
.prosa > * + * { margin-top: 1.15em; }
.prosa h2 { font-size: var(--t-2xl); margin-top: 1.9em; }
.prosa h3 { font-size: var(--t-xl); margin-top: 1.6em; }
.prosa sup a { text-decoration: none; font: 600 .72em var(--f-texto); color: var(--ocre-texto); padding-inline: 1px; }
.prosa blockquote { margin: 1.6em 0; padding: 0 0 0 var(--e5); border-left: 3px solid var(--ocre); font: 600 var(--t-xl)/1.35 var(--f-display); color: var(--selva); }
.prosa blockquote cite { display: block; margin-top: .6rem; font: normal 400 var(--t-s) var(--f-texto); color: var(--tinta-suave); }
.datos { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4) var(--e5); background: var(--hueso); font-size: var(--t-s); }
.datos h2 { font-size: var(--t-l) !important; margin: 0 0 .5rem !important; }
.datos dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; }
.datos dt { font-weight: 600; }
.datos dd { margin: 0; color: var(--tinta-suave); }
.fuentes { max-width: var(--lectura); margin-top: var(--e6); padding-top: var(--e5); border-top: 2px solid var(--tinta); font-size: var(--t-s); }
.fuentes h2 { font-size: var(--t-xl); margin-bottom: var(--e3); }
.fuentes ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.fuentes li::marker { color: var(--ocre-texto); font-weight: 700; }
.fuentes .estado { color: var(--tinta-suave); }
.correcciones { max-width: var(--lectura); margin-top: var(--e5); font-size: var(--t-s); color: var(--tinta-suave); }
.correcciones b { color: var(--tinta); }

/* Tabla */
.tabla-env { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
table.tbl { border-collapse: collapse; width: 100%; font-size: var(--t-s); min-width: 520px; }
.tbl th, .tbl td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tbl thead th { background: var(--arena); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* Calendario de eventos */
.mes { display: grid; gap: var(--e3); padding-top: var(--e6); }
.mes:first-child { padding-top: 0; }
.mes > h2 { font-size: var(--t-2xl); display: flex; align-items: baseline; gap: .6rem; }
.mes > h2 small { font: 400 var(--t-s) var(--f-texto); color: var(--tinta-suave); }
.evento-largo { display: grid; grid-template-columns: auto 1fr; gap: var(--e4); padding: var(--e4); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hueso); }
.evento-largo h3 { font-size: var(--t-xl); margin: .2rem 0 .4rem; }
.evento-largo p { font-size: var(--t-s); color: var(--tinta-suave); }
.evento-largo .meta { margin-top: .5rem; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Micrositio */
.micro-franja { background: var(--ocre); color: #1F1F1F; font-size: var(--t-s); }
.micro-franja .wrap { display: flex; gap: .6rem; align-items: center; padding-block: .6rem; flex-wrap: wrap; }
.micro-franja a { color: #1F1F1F; font-weight: 600; }
.micro-nav { border-bottom: 1px solid var(--linea); background: var(--hueso); }
.micro-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e1); overflow-x: auto; }
.micro-nav a { display: block; padding: .85rem .8rem; text-decoration: none; color: var(--tinta); font-size: var(--t-s); white-space: nowrap; }
.micro-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--selva); color: var(--selva); font-weight: 600; }
.micro-hero { display: grid; gap: var(--e5); padding-block: var(--e6); }
@media (min-width: 860px) { .micro-hero { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.micro-hero h1 { font-size: var(--t-4xl); line-height: 1.04; }
.avance { display: grid; gap: .4rem; font-size: var(--t-s); }
.avance-barra { height: 10px; border-radius: 99px; background: var(--arena); overflow: hidden; border: 1px solid var(--linea); }
.avance-barra i { display: block; height: 100%; width: var(--v, 30%); background: var(--selva); }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--e3); counter-increment: paso; }
.pasos li::before { content: counter(paso); width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--arena); border: 1px solid var(--linea); font: 600 var(--t-l)/1 var(--f-display); color: var(--selva); }
.pasos li.hecho::before { content: "✓"; background: var(--selva); color: var(--hueso); border-color: var(--selva); }
.pasos b { display: block; }
.pasos span { color: var(--tinta-suave); font-size: var(--t-s); }


@media (prefers-reduced-motion: no-preference) {
  .tarjeta-sobre img, .instalacion img, .historia img { transition: transform .5s ease; }
  .tarjeta-sobre:hover img, .instalacion:hover img, .historia:hover img { transform: scale(1.03); }
}
.datos-inst { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; font-size: var(--t-s); }
.datos-inst dt { color: var(--tinta-suave); }
.datos-inst dd { margin: 0; }
.caja label { font-size: var(--t-s); font-weight: 600; margin-bottom: -.4rem; }
@media (min-width: 900px) { .principios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .principios { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Botón modo noche ---------- */
.modo .sol, :root.noche .modo .luna { display: none; }
:root.noche .modo .sol { display: inline; }
.modo { border: 0; background: none; cursor: pointer; }

/* ---------- Blog: listado ---------- */
.categorias { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.categorias .chip small { color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
.blog-destacado { display: grid; gap: var(--e5); padding-block: var(--e6); border-bottom: 1px solid var(--linea); }
.blog-destacado .foto { aspect-ratio: 16 / 10; margin: 0; }
.blog-destacado h2 { font-size: var(--t-3xl); line-height: 1.05; }
.blog-destacado h2 a { color: inherit; text-decoration: none; }
.blog-destacado h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.blog-destacado .entradilla { font-size: var(--t-l); color: var(--tinta-suave); line-height: 1.5; max-width: 48ch; }
@media (min-width: 860px) { .blog-destacado { grid-template-columns: 1.3fr 1fr; align-items: center; gap: var(--e7); } }
.rejilla-entradas { display: grid; gap: var(--e6) var(--e5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.entrada { display: grid; gap: .6rem; align-content: start; }
.entrada .foto { margin: 0 0 .3rem; aspect-ratio: 3 / 2; }
.entrada h3 { font-size: var(--t-xl); line-height: 1.15; }
.entrada h3 a { color: inherit; text-decoration: none; }
.entrada h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.entrada p { font-size: var(--t-s); color: var(--tinta-suave); }
.entrada-aporte { display: inline-flex; align-items: center; gap: .35em; font-size: var(--t-xs); color: var(--ocre-texto); font-weight: 600; }
.paginacion { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; justify-content: center; padding-top: var(--e7); list-style: none; margin: 0; padding-left: 0; }
.paginacion a, .paginacion span { min-width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; padding-inline: .7rem; border-radius: var(--radio); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.paginacion [aria-current] { background: var(--selva); color: var(--hueso); border-color: var(--selva); }
.memoria { background: var(--arena); border-radius: var(--radio); padding: var(--e6) var(--e5); display: grid; gap: var(--e4); margin-block: var(--e7) 0; }
@media (min-width: 860px) { .memoria { grid-template-columns: 1fr auto; align-items: center; padding: var(--e6); } }
.memoria h2 { font-size: var(--t-2xl); }
.memoria p { color: var(--tinta-suave); max-width: 60ch; }

/* ---------- Tipografía de títulos: Bitter (elegida por Luis) ----------
   En el tema se aloja en el sitio: bitter-latin-var.woff2 (~35 KB),
   font-display: swap, precargada. Texto corrido: fuente del sistema. */
:root { --f-display: "Bitter", Georgia, "Noto Serif", serif; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.012em; }
.logo b { font-weight: 700; letter-spacing: -.02em; }

/* ---------- Traductor compacto ---------- */
.idioma-menu { position: relative; }
.idioma-menu > summary { list-style: none; cursor: pointer; width: auto; padding-inline: .55rem; gap: .25rem; display: inline-flex; border-radius: 99px; font: 600 var(--t-xs)/1 var(--f-texto); letter-spacing: .04em; }
.idioma-menu > summary::-webkit-details-marker { display: none; }
.idioma-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: .35rem; min-width: 190px; background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .3); }
.idioma-menu li a { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .6rem; border-radius: 4px; text-decoration: none; color: var(--tinta); font-size: var(--t-s); }
.idioma-menu li a:hover { background: var(--arena); }
.idioma-menu li a[aria-current] { font-weight: 600; color: var(--selva); }
.idioma-menu small { color: var(--tinta-suave); }

/* ---------- Herramientas de lectura: compartir y tamaño ---------- */
.herramientas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e3) var(--e5); }
.compartir, .tamano { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs); color: var(--tinta-suave); }
.compartir > span, .tamano > span { margin-right: .2rem; }
.mini { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--tinta-suave); text-decoration: none; cursor: pointer; font: 700 var(--t-s)/1 var(--f-texto); }
.mini:hover { color: var(--selva); border-color: var(--selva); }
.mini .ico { width: 16px; height: 16px; }
.mini[disabled] { opacity: .4; cursor: default; }
.copiado { font-size: var(--t-xs); color: var(--selva); }
.compartir-final { margin-top: var(--e6); padding-block: var(--e4); border-block: 1px solid var(--linea); max-width: var(--lectura); }

/* ---------- Relacionados (blog + noticias + eventos) ---------- */
.relacionados { display: grid; gap: var(--e6); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rel-col { display: grid; gap: var(--e3); align-content: start; }
.rel-col > h3 { font: 600 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); display: flex; align-items: center; gap: .45rem; padding-bottom: .6rem; border-bottom: 2px solid var(--tinta); }
.rel-col > h3 .ico { color: var(--selva); }
.rel-item { display: grid; grid-template-columns: 76px 1fr; gap: .8rem; align-items: start; padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); }
.rel-item--sin { grid-template-columns: 1fr; }
.rel-item .foto { aspect-ratio: 1; border-radius: 4px; margin: 0; }
.rel-item .fecha { width: 76px; }
.rel-item a { color: var(--tinta); text-decoration: none; font: 700 var(--t-m)/1.25 var(--f-display); }
.rel-item a:hover { text-decoration: underline; }
.rel-item p { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: .25rem; }

/* ---------- Directorio ---------- */
.buscador { display: flex; gap: var(--e2); align-items: center; border: 1px solid var(--linea); border-radius: 99px; padding: .2rem .3rem .2rem .9rem; background: var(--hueso); max-width: 520px; }
.buscador .ico { color: var(--tinta-suave); }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--tinta); padding: .55rem .2rem; outline: none; }
.buscador:focus-within { border-color: var(--selva); box-shadow: 0 0 0 3px color-mix(in srgb, var(--selva) 20%, transparent); }
.negocios { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.negocio { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hueso); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.negocio-cab { display: flex; gap: .8rem; align-items: center; padding: var(--e4) var(--e4) 0; }
.inicial { width: 48px; height: 48px; flex: none; border-radius: var(--radio); display: grid; place-items: center; font: 700 1.35rem/1 var(--f-display); color: var(--hueso); background: var(--selva); }
.inicial--ocre { background: var(--ocre); color: #1F1F1F; }
.inicial--tinta { background: var(--tinta); color: var(--hueso); }
.negocio h3 { font-size: var(--t-l); line-height: 1.15; }
.negocio-cuerpo { padding: var(--e3) var(--e4); display: grid; gap: .5rem; align-content: start; font-size: var(--t-s); }
.negocio-cuerpo p { color: var(--tinta-suave); }
.negocio dl { margin: 0; display: grid; grid-template-columns: 1.2rem 1fr; gap: .35rem .5rem; }
.negocio dt .ico { width: 1rem; height: 1rem; color: var(--tinta-suave); margin-top: .2em; }
.negocio dd { margin: 0; }
.pendiente { color: var(--tinta-suave); font-style: italic; }
.negocio-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: .7rem var(--e4); border-top: 1px solid var(--linea); background: var(--arena); font-size: var(--t-xs); color: var(--tinta-suave); }
.negocio-pie a { font-weight: 600; text-decoration: none; display: inline-flex; gap: .3em; align-items: center; }
.sin-resultados { padding: var(--e6); text-align: center; color: var(--tinta-suave); border: 1.5px dashed var(--linea); border-radius: var(--radio); }

/* ---------- Evento (plantilla propia) ---------- */
.ev-cab { display: grid; gap: var(--e5); padding-block: var(--e5) var(--e6); }
@media (min-width: 900px) { .ev-cab { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.ev-cab h1 { font-size: var(--t-4xl); line-height: 1.04; }
.ev-ficha { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hueso); overflow: hidden; }
.ev-ficha dl { margin: 0; display: grid; }
.ev-ficha dl > div { display: grid; grid-template-columns: 1.6rem 1fr; gap: .2rem .7rem; padding: .85rem var(--e4); border-bottom: 1px solid var(--linea); }
.ev-ficha dt { grid-row: span 2; }
.ev-ficha dt .ico { color: var(--selva); width: 1.3rem; height: 1.3rem; }
.ev-ficha .et { font-size: var(--t-xs); color: var(--tinta-suave); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.ev-ficha dd { margin: 0; font-weight: 600; }
.ev-ficha dd small { display: block; font-weight: 400; color: var(--tinta-suave); }
.ev-acciones { display: grid; gap: .6rem; padding: var(--e4); background: var(--arena); }
.ev-acciones .btn { justify-content: center; }
.programa { list-style: none; margin: 0; padding: 0; display: grid; border-left: 2px solid var(--linea); }
.programa li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--e3); padding: .6rem 0 .6rem var(--e4); position: relative; }
.programa li::before { content: ""; position: absolute; left: -6px; top: 1.05rem; width: 10px; height: 10px; border-radius: 50%; background: var(--ocre); }
.programa time { font: 600 var(--t-s)/1.5 var(--f-dato); color: var(--selva); }
.ev-breve { max-width: 720px; display: grid; gap: var(--e5); padding-block: var(--e5) var(--e7); }
.aviso-datos { display: flex; gap: .7rem; align-items: flex-start; padding: var(--e4); border-radius: var(--radio); background: var(--arena); font-size: var(--t-s); color: var(--tinta-suave); }
.aviso-datos .ico { color: var(--ocre-texto); margin-top: .1em; }
.btn--grande { font-size: var(--t-m); padding: 1rem 1.4rem; }
.ev-enlace { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; }
button.chip { font: inherit; font-size: var(--t-s); cursor: pointer; }
.chip small { opacity: .7; }
.encabezado > .wrap { width: 100%; }
@media (min-width: 1000px) { .rejilla-entradas { grid-template-columns: repeat(3, 1fr); } }
/* Cabecera: sin cortes de línea */
.menu a, .btn, .logo span { white-space: nowrap; }
.cabecera .wrap { gap: var(--e3); }
.menu a { padding: .5rem .55rem; }
@media (min-width: 1040px) { .acciones .btn { display: none; } }
@media (min-width: 1440px) { .acciones .btn { display: inline-flex; } }
/* 9 elementos en el menú principal: entre 1040 y 1180 px se usa el menú móvil. */
@media (min-width: 1040px) and (max-width: 1179px) { .menu { display: none; } .menu-movil { display: block; } }

/* ---------- Fuentes (índice de información) ---------- */
.lista-fuentes { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linea); }
.fuente { display: grid; gap: .3rem var(--e4); padding-block: var(--e3); border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.fuente a { font: 700 var(--t-m)/1.3 var(--f-display); color: var(--tinta); text-decoration: none; }
.fuente a:hover { text-decoration: underline; color: var(--selva); }
.fuente p { color: var(--tinta-suave); margin-top: .2rem; }
.fuente-tipo, .fuente-act { font-size: var(--t-xs); color: var(--tinta-suave); }
.fuente .sello { margin-left: .4rem; vertical-align: .1em; }
@media (min-width: 760px) { .fuente { grid-template-columns: minmax(0, 1fr) 10rem 9rem; align-items: baseline; } }
.grupo > h2 .cuenta { font: 600 var(--t-s) var(--f-texto); color: var(--tinta-suave); }
.campo { font: inherit; padding: .6rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hueso); color: var(--tinta); }
@media (max-width: 479px) {
  .acciones { gap: 0; }
  .icono-btn { width: 38px; height: 38px; }
  .idioma-menu > summary { padding-inline: .35rem; }
  .logo b { font-size: 1.5rem; }
  .logo span { font-size: .58rem; letter-spacing: .1em; }
}

/* ---------- Autores ---------- */
.avatar--grande { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--selva); color: var(--hueso); font: 700 1.6rem/1 var(--f-display); }
.avatar--perfil { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: var(--selva); color: var(--hueso); font: 700 3rem/1 var(--f-display); }
.avatar--ocre { background: var(--ocre); color: #1F1F1F; }
.avatar--tinta { background: var(--tinta); color: var(--hueso); }
.avatar--vacio { background: transparent; color: var(--selva); border: 1.5px dashed var(--selva); }
.caja-autor { display: grid; grid-template-columns: auto 1fr; gap: var(--e4); align-items: start; max-width: var(--lectura); margin-top: var(--e6); padding: var(--e5); border-radius: var(--radio); background: var(--arena); }
.caja-autor h2 { font-size: var(--t-xl); margin: .15rem 0 .4rem; }
.caja-autor h2 a { color: inherit; text-decoration: none; }
.caja-autor h2 a:hover { text-decoration: underline; }
.caja-autor p { font-size: var(--t-s); color: var(--tinta-suave); }
.caja-autor .meta { margin-top: .6rem; }
.perfil { display: grid; gap: var(--e5); align-items: start; }
@media (min-width: 760px) { .perfil { grid-template-columns: auto 1fr; gap: var(--e6); } }
.datos-perfil { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font-size: var(--t-s); color: var(--tinta-suave); }
.datos-perfil b { font: 700 var(--t-xl)/1 var(--f-display); color: var(--tinta); margin-right: .25rem; }
.autores { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tarjeta-autor { display: grid; grid-template-columns: auto 1fr; gap: var(--e4); padding: var(--e5); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hueso); align-items: start; }
.tarjeta-autor h2 { font-size: var(--t-xl); margin: .15rem 0 .4rem; }
.tarjeta-autor h2 a { color: inherit; text-decoration: none; }
.tarjeta-autor h2 a:hover { text-decoration: underline; }
.tarjeta-autor p { font-size: var(--t-s); color: var(--tinta-suave); }
.tarjeta-autor .meta { margin-top: .5rem; }
.tarjeta-autor--sumate { border-style: dashed; }

/* ---------- Lienzo (página libre) ---------- */
.lienzo-hero { background: var(--selva-hondo); color: var(--sobre-oscuro); padding-block: var(--e7); }
.lienzo-hero h1 { font-size: var(--t-4xl); line-height: 1.04; }
.lienzo-hero .entradilla { color: var(--sobre-oscuro-suave); font-size: var(--t-l); line-height: 1.5; }
.lienzo-cols { display: grid; gap: var(--e6); }
@media (min-width: 860px) { .lienzo-cols { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- Guía de estilos del editor (v0.7) ---------- */
.sello--selva { background: var(--selva); color: var(--hueso); border-color: var(--selva); }
.guia { display: grid; gap: var(--e5); }
.guia > h2 { font-size: var(--t-2xl); }
.guia-fila { display: grid; gap: var(--e4); padding-top: var(--e5); border-top: 1px solid var(--linea); }
.guia-demo { max-width: none; min-width: 0; }
.guia-info { display: grid; gap: .4rem; align-content: start; }
.guia-info .sello { justify-self: start; }
.guia-info h3 { font-size: var(--t-l); }
.guia-info p { font-size: var(--t-s); color: var(--tinta-suave); }
@media (min-width: 900px) { .guia-fila { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e7); } }
.guia-lista { display: grid; gap: .5rem; margin: 0; padding-left: 1.1rem; max-width: 62ch; }
.prosa blockquote.cita-destacada { border: 0; padding: var(--e4) 0; text-align: center; font-size: var(--t-2xl); color: var(--selva); border-block: 1px solid var(--linea); }
:root.noche .prosa blockquote.cita-destacada { color: var(--ocre); }

/* ---------- 404 (v0.8) ---------- */
.e404 { padding-block: var(--e7) var(--e8, 5rem); }
.e404-grid { display: grid; gap: var(--e6); align-items: center; }
@media (min-width: 900px) { .e404-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--e7); } }
.e404-texto { display: grid; gap: var(--e4); }
.e404-bomba { margin: 0; font: 700 clamp(3.2rem, 11vw, 6.5rem)/.95 var(--f-display); color: var(--ocre-texto); letter-spacing: -.02em; transform: rotate(-3deg); transform-origin: left; }
.e404-verso { margin: 0; padding-left: var(--e5); border-left: 3px solid var(--ocre); }
.e404-verso p { font: 600 clamp(1.2rem, 3.2vw, 1.6rem)/1.45 var(--f-display); color: var(--selva); margin: 0; }
:root.noche .e404-verso p { color: var(--tinta); }
.e404-nota { color: var(--tinta-suave); max-width: 52ch; }
.e404-buscar .buscador { max-width: 34rem; }
.e404-buscar .btn { padding-block: .55rem; }
.e404-atajos { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: var(--t-s); color: var(--tinta-suave); }
.e404-atajos a { color: var(--selva); font-weight: 600; }
.e404-arte { margin: 0; display: grid; gap: .6rem; aspect-ratio: auto; }
.e404-arte img { border-radius: var(--radio); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.e404-arte figcaption { font-size: var(--t-xs); color: var(--tinta-suave); }

/* ---------- Incrustados ligeros (v0.8) ---------- */
.incrustado { position: relative; border-radius: var(--radio); overflow: hidden; margin: 0; }
.incrustado + .incrustado { margin-top: var(--e4); }
.incrustado--video { aspect-ratio: 16 / 9; background: #111; }
.incrustado--video img { width: 100%; height: 100%; object-fit: cover; opacity: .75; display: block; }
.incrustado-play { position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 0; background: var(--ocre); color: #1F1F1F; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 18px rgb(0 0 0 / .35); }
.incrustado-play .ico { width: 28px; height: 28px; margin-left: 3px; }
.incrustado-play:hover { transform: scale(1.06); }
.incrustado-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .9rem; display: grid; gap: .1rem; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .7)); font-size: var(--t-s); }
.incrustado-pie span { font-size: var(--t-xs); opacity: .85; }
.incrustado--red { display: grid; grid-template-columns: auto 1fr; gap: .6rem var(--e4); align-items: center; padding: var(--e4); border: 1px solid var(--linea); background: var(--hueso); font-size: var(--t-s); }
.incrustado--red > div { display: grid; }
.incrustado--red > div span { color: var(--tinta-suave); font-size: var(--t-xs); }
.incrustado--red .btn { grid-column: 1 / -1; justify-self: start; }
.incrustado-red-ico { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--arena); color: var(--selva); }
.incrustado-ir { grid-column: 1 / -1; font-size: var(--t-xs); }
.incrustado.cargado { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--arena); border: 1px dashed var(--linea); }
.incrustado-demo { padding: var(--e4); text-align: center; font-size: var(--t-s); color: var(--tinta-suave); max-width: 40ch; }
.e404-grid > * { min-width: 0; }
.e404 .portada-botones .btn--borde { color: var(--selva); border-color: var(--linea); background: transparent; }
.e404 .portada-botones .btn--borde:hover { border-color: var(--selva); }
.e404-buscar .buscador .btn { flex: none; }
.incrustado--red .btn { background: transparent; color: var(--selva); border-color: var(--selva); }
.incrustado-red-ico .ico { width: 22px; height: 22px; }
.e404-texto { grid-template-columns: minmax(0, 1fr); }
.e404-buscar .buscador input { width: 100%; }

/* ---------- Escala tipográfica compacta (v0.9) ----------
   Títulos más ligeros (Bitter 500/600 en vez de 700) y una escala más corta.
   En móvil los títulos y los espacios bajan otro escalón. */
:root {
  --t-l: 1.125rem; --t-xl: 1.3rem; --t-2xl: 1.6rem; --t-3xl: 2rem;
  --t-4xl: clamp(1.7rem, 1.1rem + 2.2vw, 2.55rem);
}
h1, h2 { font-weight: 600; letter-spacing: -.008em; }
h3, h4 { font-weight: 600; letter-spacing: 0; }
h1 { line-height: 1.1 !important; }
.portada-texto h1 { font-weight: 600; line-height: 1.08; }
.prosa h2 { font-size: var(--t-xl); }
.prosa h3 { font-size: var(--t-l); }
.e404-bomba { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); }
@media (max-width: 599px) {
  :root { --t-xl: 1.2rem; --t-2xl: 1.4rem; --t-3xl: 1.65rem; --e7: 2.25rem; }
  .bloque { padding-block: var(--e6); }
  .encabezado { padding-block: var(--e4) var(--e5); gap: var(--e3); }
  .entradilla { font-size: var(--t-m) !important; }
  .portada-texto { padding: var(--e5) var(--e4); gap: var(--e3); }
}
/* Cabecera más compacta */
.cabecera .wrap { padding-block: .6rem; }
.logo b { font-size: 1.5rem; font-weight: 600; }
.logo span { font-size: .6rem; margin-top: .3rem; }
.barra .wrap { padding-block: .35rem; }
@media (max-width: 599px) { .logo b { font-size: 1.35rem; } .barra { font-size: .72rem; } }
/* Pie de foto legible sobre fotos reales (v1.0.1) */
.portada-imagen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(transparent, rgb(0 0 0 / .72)); pointer-events: none; }
.portada-imagen figcaption { z-index: 1; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .8); line-height: 1.45; }
.portada-imagen figcaption a { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
/* Imagen principal del blog a todo lo ancho en móvil (v1.0.2) */
@media (max-width: 599px) {
  .figura-grande { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px))); }
  .figura-grande .foto { aspect-ratio: 4 / 3; border-radius: 0; }
  .figura-grande figcaption { padding-inline: 16px; }
}
/* Portada de la entrada en dos columnas en pantallas anchas (v1.0.3) */
@media (min-width: 1100px) {
  .articulo-portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e7); align-items: center; padding-bottom: var(--e6); }
  .articulo-portada .articulo-cab { max-width: none; }
  .articulo-portada .figura-grande { margin: 0; }
  .articulo-portada .figura-grande .foto { aspect-ratio: 4 / 3; }
}
.cabecera { box-shadow: 0 1px 0 var(--linea), 0 6px 14px -12px rgb(0 0 0 / .35); }

/* Menú de idioma ampliado y aviso de traducción automática */
.idioma-menu ul { max-height: min(75vh, 560px); overflow-y: auto; }
.idioma-menu li.idioma-otro { border-top: 1px solid var(--linea); margin-top: .25rem; padding-top: .25rem; }
.idioma-menu li.idioma-nota { padding: .45rem .6rem .25rem; font-size: var(--t-xs); color: var(--tinta-suave, #5a5a5a); line-height: 1.35; max-width: 220px; }
.aviso-traduccion { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; pointer-events: none; }
.aviso-traduccion[hidden] { display: none; }
.aviso-traduccion p { pointer-events: auto; margin: 0; max-width: 560px; display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; background: var(--hueso); color: var(--tinta); border: 1px solid var(--linea); border-left: 4px solid var(--ocre); border-radius: var(--radio); box-shadow: 0 12px 34px -14px rgb(0 0 0 / .45); font-size: var(--t-s); line-height: 1.45; }
.aviso-traduccion .ico { flex: none; margin-top: .15em; color: var(--ocre); }
.aviso-traduccion a { color: var(--selva); font-weight: 600; }
.aviso-traduccion button { flex: none; margin-left: auto; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 .2rem; }
@media print { .aviso-traduccion { display: none !important; } }