/* 086 · IDENTIDAD DE LOS VIDEOS — capa del sitio entero (aprobada por el dueño).
   Se carga la última. Reasigna los alias de color de todas las paletas
   anteriores a la identidad (noche, tinta, acero, bruma, sol, luz, crema)
   y fija la tipografía: script para acentos, serif de alto contraste para
   títulos, versales espaciadas para la interfaz. AA verificado en docs/IDENTIDAD.md. */
@font-face { font-family: 'Fifi Script'; src: url('/assets/fuentes/fifi-script.woff2') format('woff2'), url('/assets/fuentes/MrsSaintDelafield-Regular.ttf') format('truetype'); font-display: swap; }
:root:root {
  --id-noche: #1f2538; --id-tinta: #1e2a44; --id-pizarra: #2a3a58; --id-acero: #3e5a80;
  --id-bruma: #a9bcd6; --id-niebla: #eef2f7; --id-sol: #e58d57; --id-dorado: #d98048;
  --id-luz: #f7c687; --id-crema: #fdfbf7; --id-gris: #4a5568; --id-teja: #9a4a1c;

  --cal: #fdfbf7; --superficie: #eef2f7; --ocre-claro: #f6efe3; --anil: #1f2538;
  --secundario: #4a5568; --secundario-osc: #c5d2e3; --filete-cal: #d9dfe8;
  --almagre: #3e5a80; --almagre-claro: #f7c687; --ocre: #e58d57;
  --talavera: #3e5a80; --maguey: #2a3a58; --zinacantan: #9a4a1c;
  --adobe-claro: #e9eef5; --adobe: #a9bcd6; --secundario-adobe: #4a5568;
  --obsidian-black: #141826; --basalt-gray: #1f2538; --volcanic-ash: #4a5568;
  --chiapas-espresso: #1f2538; --golden-crema: #f7c687; --mist-white: #fdfbf7;
  --pergamino: #eef2f7; --ceniza-oscura: #c5d2e3; --hilo: #3e5a80; --hilo-ui: #7a8699;
  --cereza: #3e5a80; --beige: #eef2f7; --sotobosque: #2a3a58;
  --oro: #3e5a80; --oro-texto: #3e5a80; --sobre-oro: #fdfbf7;
  --hilo-grana: #9a4a1c; --hilo-anil: #3e5a80; --hilo-jade: #2f4a4f;
  --hilo-grana-claro: #f2b48c; --hilo-anil-claro: #a9bcd6; --hilo-jade-claro: #a9c7c3;
  --terracota: #9a4a1c; --maiz: #e58d57;
  --filete: rgba(31,37,56,.16); --filete-oscuro: rgba(253,251,247,.16);
  --font-script: 'Fifi Script', cursive;
  scrollbar-color: #2a3a58 #1f2538;
}
html, body { background: var(--cal); color: var(--anil); }
::selection { background: #f7c687; color: #1f2538; }

/* Títulos: serif de alto contraste, apretada; la cursiva es la firma. */
main h1, main .h1, main h2, main .h2 { font-family: var(--font-heading, 'Cormorant Garamond', serif); font-weight: 400; letter-spacing: -.02em; }
main h1 em, main h2 em, main .h2 em { font-family: var(--font-script); font-style: normal; font-weight: 400; letter-spacing: 0; color: var(--almagre); padding-right: .06em; }
main :is(section, header)[class*="oscuro"] :is(h1, h2) em, .oscuro :is(h1, h2) em { color: #f7c687; }

/* Interfaz: versales espaciadas. */
.m, .ante, .antetitulo, .eyebrow, [class*="ante"] { letter-spacing: .28em; }

/* Barra superior y pie: noche con luz de oro. */
nav.oscuro, header nav.oscuro { background: rgba(31,37,56,.86) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(253,251,247,.08); }
/* 148 · Con el menú abierto, la barra suspende su desenfoque. Un backdrop-filter
   hace de la barra el bloque contenedor de todo lo `fixed` que lleva dentro:
   el panel del menú (position: fixed; inset: 0) quedaba encogido a 36 px dentro
   de la barra en cuanto se bajaba por la portada. Medido en el teléfono del
   dueño y reproducido a 390 px. El panel es opaco y tapa la pantalla: mientras
   está abierto, el desenfoque no se ve. Cerrado, la barra queda igual. */
nav:has(.menu-movil[open]) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
nav.oscuro a { color: #fdfbf7; }
nav.oscuro a[aria-current="page"], nav.oscuro a:hover { color: #f7c687; }
footer:not(.idp-pie) { background: #141826 !important; color: #fdfbf7; }
footer:not(.idp-pie) a { color: #fdfbf7; }
footer:not(.idp-pie) a:hover { color: #f7c687; }

/* Foco visible de la identidad. */
:focus-visible { outline: 2px solid #e58d57; outline-offset: 3px; }

/* ── Cabeceras de página: héroe a sangre con marco de esquinas (regla de la identidad) ── */
body[data-editorial]:not([data-ruta^="/chat"]):not([data-ruta^="/admin"]):not([data-ruta="/entrar"]):not([data-ruta="/cuenta"]) header.cabecera,
body[data-editorial][data-ruta="/sobre"] header[data-escena="entrada"] {
  --hero-img: url(/assets/identidad/hero-noche.webp);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(78svh, 820px); display: grid; align-content: end;
  padding: clamp(120px, 16vh, 200px) clamp(20px, 5vw, 88px) clamp(56px, 8vh, 96px) !important;
  margin: 0 !important; max-width: none !important;
  background: #1f2538 !important; color: #fdfbf7; border-bottom: 0 !important;
}
body[data-ruta^="/lugares"] header.cabecera { --hero-img: url(/assets/identidad/cine-volcan.webp) !important; }
body[data-ruta="/galeria"] header.cabecera { --hero-img: url(/assets/identidad/hero-alba.webp) !important; }
body[data-ruta^="/podcast"] header.cabecera { --hero-img: url(/assets/identidad/hero-dia.webp) !important; }

body[data-ruta="/sobre"] header[data-escena="entrada"] { --hero-img: url(/assets/identidad/carretera-poster.webp) !important; }
body[data-editorial]:not([data-ruta^="/chat"]):not([data-ruta^="/admin"]):not([data-ruta="/entrar"]):not([data-ruta="/cuenta"]) header.cabecera::before,
body[data-editorial][data-ruta="/sobre"] header[data-escena="entrada"]::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(31,37,56,.55) 0%, rgba(31,37,56,.35) 40%, rgba(31,37,56,.88) 100%), var(--hero-img) center 40% / cover no-repeat;
  animation: idv-deriva 26s ease-out both; transform-origin: 50% 30%;
}
/* Marco de esquinas y trazo de luz dorada */
body[data-editorial]:not([data-ruta^="/chat"]):not([data-ruta^="/admin"]):not([data-ruta="/entrar"]):not([data-ruta="/cuenta"]) header.cabecera::after,
body[data-editorial][data-ruta="/sobre"] header[data-escena="entrada"]::after {
  content: ''; position: absolute; inset: clamp(14px, 2vw, 28px); z-index: -1; pointer-events: none;
  background:
    linear-gradient(#f7c687,#f7c687) 0 0/28px 1px, linear-gradient(#f7c687,#f7c687) 0 0/1px 28px,
    linear-gradient(#f7c687,#f7c687) 100% 0/28px 1px, linear-gradient(#f7c687,#f7c687) 100% 0/1px 28px,
    linear-gradient(#f7c687,#f7c687) 0 100%/28px 1px, linear-gradient(#f7c687,#f7c687) 0 100%/1px 28px,
    linear-gradient(#f7c687,#f7c687) 100% 100%/28px 1px, linear-gradient(#f7c687,#f7c687) 100% 100%/1px 28px,
    linear-gradient(90deg, transparent, rgba(247,198,135,.9) 30%, #fff3d6 50%, rgba(247,198,135,.9) 70%, transparent) 50% calc(100% - 22px)/0% 1px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 4px rgba(247,198,135,.7));
  animation: idv-trazo 2.8s cubic-bezier(.25,1,.5,1) .5s forwards;
}
@keyframes idv-trazo { to { background-size: 28px 1px, 1px 28px, 28px 1px, 1px 28px, 28px 1px, 1px 28px, 28px 1px, 1px 28px, 70% 1px; } }
@keyframes idv-deriva { from { transform: scale(1.08); } to { transform: scale(1); } }
body[data-editorial]:not([data-ruta="/entrar"]):not([data-ruta="/cuenta"]) header.cabecera h1, body[data-ruta="/sobre"] header[data-escena="entrada"] h1 {
  color: #fdfbf7 !important; font-size: clamp(56px, 9vw, 156px) !important; line-height: .92 !important; letter-spacing: -.03em !important;
  text-shadow: 0 6px 40px rgba(31,37,56,.55); max-width: 14ch;
}
body[data-editorial] header.cabecera :is(.ante, .antetitulo), body[data-ruta="/sobre"] header[data-escena="entrada"] :is(.ante, .antetitulo) { color: #f7c687 !important; font: 500 11px/1.5 var(--font-ui) !important; letter-spacing: .32em !important; text-transform: uppercase; }
body[data-editorial] header.cabecera p:not(.ante):not(.antetitulo), body[data-ruta="/sobre"] header[data-escena="entrada"] p:not(.ante):not(.antetitulo) { color: #e6ebf3 !important; }
@media (prefers-reduced-motion: reduce) {
  header.cabecera::before, header.cabecera::after, header[data-escena="entrada"]::before, header[data-escena="entrada"]::after { animation: none !important; }
  header.cabecera::after, header[data-escena="entrada"]::after { background-size: 28px 1px, 1px 28px, 28px 1px, 1px 28px, 28px 1px, 1px 28px, 28px 1px, 1px 28px, 70% 1px !important; }
}
@media (max-width: 700px) {
  body[data-editorial] header.cabecera, body[data-ruta="/sobre"] header[data-escena="entrada"] { min-height: 70svh; }
}

/* ── 087 · /lugares y fichas ── */
body[data-ruta^="/lugares"] .barra { background: rgba(253,251,247,.92) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #d9dfe8 !important; }
body[data-ruta^="/lugares"] .filtros :is(a, button) { font: 500 11px/1 var(--font-ui) !important; letter-spacing: .24em !important; text-transform: uppercase; color: #4a5568 !important; }
body[data-ruta^="/lugares"] .filtros :is(a, button):is([aria-current], [aria-pressed="true"], .activo) { color: #1f2538 !important; box-shadow: inset 0 -1px 0 #e58d57; }
body[data-ruta^="/lugares"] .reja .titulo { font-family: var(--font-heading, serif) !important; font-weight: 400 !important; letter-spacing: -.015em; line-height: 1.02 !important; }
body[data-ruta^="/lugares"] .reja .meta, body[data-ruta^="/lugares"] .reja .dist { font: 500 10px/1.5 var(--font-ui) !important; letter-spacing: .26em !important; text-transform: uppercase; color: #3e5a80 !important; }
body[data-ruta^="/lugares"] .reja .numeral { font: italic 300 clamp(28px, 2.4vw, 40px)/1 var(--font-heading, serif) !important; color: #9a4a1c !important; }
body[data-ruta^="/lugares"] .reja .foto { overflow: hidden; }
body[data-ruta^="/lugares"] .reja .foto img { transition: transform 1.4s cubic-bezier(.22,1,.36,1) !important; }
body[data-ruta^="/lugares"] .reja a:hover .foto img { transform: scale(1.05); }
body[data-ruta^="/lugares"] .reja .borde { border-color: #f7c687 !important; }
body[data-ruta^="/lugares"] .reja .flecha { color: #e58d57 !important; }
body[data-ruta^="/lugares"] .banda-mapa { background: #1f2538 !important; color: #fdfbf7 !important; }
body[data-ruta^="/lugares"] .banda-mapa :is(h2, p, a) { color: #fdfbf7 !important; }
body[data-ruta^="/lugares"] .banda-mapa h2 em { color: #f7c687 !important; }

/* ── 088 · /mapa ── */
.mapa-pag .mp-cab { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 clamp(28px, 4vw, 56px) !important; max-width: none !important; min-height: 46svh; display: grid; align-content: end; padding: clamp(110px, 14vh, 160px) clamp(20px, 5vw, 88px) clamp(40px, 6vh, 64px) !important; background: #1f2538; color: #fdfbf7; }
.mapa-pag .mp-cab::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(31,37,56,.5), rgba(31,37,56,.9)); } /* 124 · la foto es ya un <img> (.mp-cab-fondo) */
.mapa-pag .mp-cab::after { content: ''; position: absolute; inset: clamp(14px, 2vw, 28px); z-index: -1; pointer-events: none; background:
  linear-gradient(#f7c687,#f7c687) 0 0/28px 1px, linear-gradient(#f7c687,#f7c687) 0 0/1px 28px, linear-gradient(#f7c687,#f7c687) 100% 0/28px 1px, linear-gradient(#f7c687,#f7c687) 100% 0/1px 28px,
  linear-gradient(#f7c687,#f7c687) 0 100%/28px 1px, linear-gradient(#f7c687,#f7c687) 0 100%/1px 28px, linear-gradient(#f7c687,#f7c687) 100% 100%/28px 1px, linear-gradient(#f7c687,#f7c687) 100% 100%/1px 28px; background-repeat: no-repeat; }
.mapa-pag .mp-cab h1 { color: #fdfbf7 !important; font-size: clamp(52px, 7.4vw, 124px) !important; line-height: .94; max-width: 14ch; }
.mapa-pag .mp-cab h1 em { color: #f7c687 !important; }
.mapa-pag .mp-cab .mp-ante { color: #f7c687 !important; font: 500 11px/1.5 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; }
.mapa-pag .mp-cab .mp-desc { color: #e6ebf3 !important; max-width: 46ch; }
.mapa-pag .mp-nom { font-family: var(--font-heading, serif) !important; font-weight: 400; }
.mapa-pag .mp-lista li { transition: background .4s, box-shadow .4s; }
.mapa-pag .mp-lista li:is(:hover, :focus-within, [aria-current], .activo) { box-shadow: inset 2px 0 0 #e58d57; background: #eef2f7; }
.mapa-pag .mp-marco { outline: 1px solid rgba(247,198,135,.65); outline-offset: 8px; }
.mapa-pag .mp-filtros :is(button, a)[aria-pressed="true"] { background: #1f2538 !important; color: #fdfbf7 !important; border-color: #1f2538 !important; }

/* ── 090 · /galeria: sala oscura, la imagen manda ── */
body[data-ruta="/galeria"] main, body[data-ruta="/galeria"] .envoltorio { background: #1f2538 !important; color: #fdfbf7; }
body[data-ruta="/galeria"] :is(.series, .contactos) :is(h2, h3) { color: #fdfbf7 !important; }
body[data-ruta="/galeria"] :is(.pie-texto, .contacto-pie, .vacio-dice, p) { color: #c5d2e3 !important; }
body[data-ruta="/galeria"] :is(.pie-fecha, .cuenta) { color: #f7c687 !important; letter-spacing: .26em; text-transform: uppercase; font-size: 10px !important; }
body[data-ruta="/galeria"] .marco, body[data-ruta="/galeria"] .contacto-marco { overflow: hidden; outline: 1px solid rgba(253,251,247,.08); }
body[data-ruta="/galeria"] .marco img, body[data-ruta="/galeria"] .contacto-marco img { transition: transform 1.4s cubic-bezier(.22,1,.36,1), filter .8s; }
body[data-ruta="/galeria"] .pieza:hover .marco img, body[data-ruta="/galeria"] .contacto:hover .contacto-marco img { transform: scale(1.05); }
body[data-ruta="/galeria"] .pestanas :is(a, button) { color: #c5d2e3 !important; letter-spacing: .24em; text-transform: uppercase; font-size: 11px !important; }
body[data-ruta="/galeria"] .pestanas :is([aria-current], [aria-selected="true"]) { color: #f7c687 !important; box-shadow: inset 0 -1px 0 #f7c687; }
body[data-ruta="/galeria"] .visor { background: rgba(20,24,38,.96) !important; color: #fdfbf7; }
body[data-ruta="/galeria"] .visor-pie { color: #c5d2e3 !important; }
body[data-ruta="/galeria"] :is(hr, .pie) { border-color: rgba(253,251,247,.14) !important; }

/* ── 091 · /podcast: tarjetas de cine ── */
body[data-ruta^="/podcast"] .editorial-inserto { background: #1f2538 !important; color: #fdfbf7 !important; }
body[data-ruta^="/podcast"] .editorial-inserto :is(h2, h3, p) { color: #fdfbf7 !important; }
body[data-ruta^="/podcast"] .editorial-inserto :is(h2, h3) em { color: #f7c687 !important; }
body[data-ruta^="/podcast"] :is(.episodio, .ep, [class*="episodio"]) img { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }

/* ── 092 · /sobre ── */
body[data-ruta="/sobre"] .banda :is(h2) { font-size: clamp(40px, 5.6vw, 92px) !important; line-height: .98; }
body[data-ruta="/sobre"] .banda:nth-of-type(even) { background: #eef2f7 !important; }
body[data-ruta="/sobre"] :is(input, textarea, select) { background: #fdfbf7 !important; border: 0 !important; border-bottom: 1px solid #4a5568 !important; border-radius: 0 !important; color: #1f2538 !important; font-family: var(--font-heading, serif) !important; font-size: 19px !important; }
body[data-ruta="/sobre"] :is(input, textarea):focus { border-bottom-color: #e58d57 !important; outline: none !important; box-shadow: 0 1px 0 #e58d57; }
body[data-ruta="/sobre"] button[type="submit"] { background: #1f2538 !important; color: #fdfbf7 !important; border-radius: 0 !important; letter-spacing: .28em; text-transform: uppercase; font: 500 11px/1 var(--font-ui) !important; padding: 18px 28px !important; }
body[data-ruta="/sobre"] button[type="submit"]:hover { background: #3e5a80 !important; }

/* ── 093 · /chat y /entrar: misma voz, interfaz limpia ── */
body:is([data-ruta^="/chat"], [data-ruta="/entrar"], [data-ruta="/cuenta"]) { background: #eef2f7; }
body:is([data-ruta^="/chat"], [data-ruta="/entrar"], [data-ruta="/cuenta"]) :is(h1, h2) { font-family: var(--font-heading, serif) !important; font-weight: 400 !important; color: #1f2538; }
body:is([data-ruta^="/chat"], [data-ruta="/entrar"], [data-ruta="/cuenta"]) :is(button[type="submit"], .boton, .boton-primario) { background: #1f2538 !important; color: #fdfbf7 !important; border-color: #1f2538 !important; border-radius: 0 !important; letter-spacing: .22em; text-transform: uppercase; font: 500 11px/1 var(--font-ui) !important; }
body:is([data-ruta^="/chat"], [data-ruta="/entrar"], [data-ruta="/cuenta"]) :is(button[type="submit"], .boton, .boton-primario):hover { background: #3e5a80 !important; }
body:is([data-ruta^="/chat"], [data-ruta="/entrar"], [data-ruta="/cuenta"]) :is(input, textarea) { border-radius: 0 !important; border-color: #9aa6b8 !important; }
body:is([data-ruta^="/chat"], [data-ruta="/entrar"], [data-ruta="/cuenta"]) :is(input, textarea):focus { border-color: #e58d57 !important; outline: 2px solid rgba(229,141,87,.35) !important; }
body[data-ruta^="/chat"] aside, body[data-ruta^="/chat"] [class*="lateral"] { background: #1f2538 !important; color: #fdfbf7 !important; }
body[data-ruta^="/chat"] aside :is(a, p, h1, h2, h3, span) { color: #e6ebf3 !important; } /* 100 · el h1 «Chat» quedaba #1f2538 sobre #1f2538 (1,0:1) */
body[data-ruta^="/chat"] aside :is(a[aria-current], .activa) { color: #f7c687 !important; background: rgba(247,198,135,.08) !important; }

/* ── 094 · /admin: misma tipografía y acento, sin espectáculo ── */
body[data-ruta^="/admin"] main :is(h1, h2) { font-family: var(--font-heading, serif) !important; font-weight: 400 !important; color: #1f2538 !important; text-shadow: none !important; }
body[data-ruta^="/admin"] :is(button[type="submit"], .boton-primario) { background: #1f2538 !important; color: #fdfbf7 !important; border-radius: 2px !important; }
body[data-ruta^="/admin"] a { color: #3e5a80; }

/* ── 095 · /entrar y /cuenta: díptico — la noche a la izquierda, el formulario a la derecha ── */
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cuerpo {
  max-width: none !important; margin: 0 !important; min-height: calc(100svh - 60px); border: 0 !important; position: relative; isolation: isolate;
  padding: clamp(48px, 9vh, 120px) clamp(24px, 6vw, 96px) 60px calc(50% + clamp(24px, 5vw, 80px)) !important; background: #fdfbf7 !important;
}
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cuerpo::before {
  content: 'Fifí de Pueblo'; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; display: grid; place-items: center; z-index: 0;
  font: 400 clamp(56px, 6vw, 104px)/1 'Fifi Script', cursive; color: #fdfbf7; text-shadow: 0 0 22px rgba(247,198,135,.55);
  background: linear-gradient(180deg, rgba(31,37,56,.2), rgba(31,37,56,.65)), url(/assets/identidad/hero-noche.webp) 40% center / cover;
}
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cabecera { background: none !important; color: #1f2538 !important; padding: 0 !important; margin: 0 0 32px !important; border: 0 !important; min-height: 0 !important; display: block !important; }
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cabecera::before, body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cabecera::after { display: none !important; }
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cabecera h1 { color: #1f2538 !important; font-size: clamp(56px, 6vw, 96px) !important; line-height: .95; text-shadow: none !important; }
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cabecera :is(p, .desc) { color: #4a5568 !important; max-width: 40ch; }
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cabecera .ante { color: #3e5a80 !important; }
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cuerpo :is(label span, small, p) { color: #4a5568; }
body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .formulario input { width: 100%; max-width: 420px; color: #1f2538 !important; }
@media (max-width: 800px) {
  body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cuerpo { padding: 300px 22px 48px !important; }
  body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) .cuerpo::before { width: 100%; bottom: auto; height: 260px; font-size: 56px; background-image: linear-gradient(180deg, rgba(31,37,56,.2), rgba(31,37,56,.65)), url(/assets/identidad/hero-noche-movil.webp); }
}
@media (max-width: 900px) { .mapa-pag .mp-marco { outline: 0; } }
html body[data-editorial]:is([data-ruta="/entrar"], [data-ruta="/cuenta"]) main.cuerpo header.cabecera p.desc { color: #4a5568 !important; opacity: 1 !important; }
body[data-ruta="/galeria"] .contacto-pie :is(em, i, span) { color: #e6ebf3 !important; opacity: 1 !important; } body[data-ruta="/galeria"] .contacto-pie i { color: #f7c687 !important; }

/* ── 097 · Ficha de lugar: héroe a sangre (foto de fondo, texto abajo, marco de esquinas) ── */
body[data-ruta^="/lugares/"] header.hero .orfe-polvo { display: none !important; }
body[data-ruta^="/lugares/"] header.hero { position: relative !important; isolation: isolate; overflow: hidden; min-height: min(88svh, 900px) !important; height: auto !important; display: grid !important; align-content: end; padding: clamp(110px, 14vh, 160px) clamp(20px, 5vw, 88px) clamp(48px, 8vh, 88px) !important; margin: 0 !important; background: #1f2538 !important; }
body[data-ruta^="/lugares/"] header.hero .hero-foto { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: -2; aspect-ratio: auto !important; }
body[data-ruta^="/lugares/"] header.hero .hero-foto :is(img, picture, .figura-foto, [data-hueco]) { width: 100% !important; height: 100% !important; object-fit: cover; }
body[data-ruta^="/lugares/"] header.hero .hero-velo { position: absolute !important; inset: 0 !important; height: auto !important; z-index: -1; background: linear-gradient(180deg, rgba(31,37,56,.45) 0%, rgba(31,37,56,.15) 35%, rgba(31,37,56,.88) 100%) !important; display: block !important; }
body[data-ruta^="/lugares/"] header.hero::after { content: ''; position: absolute; inset: clamp(14px, 2vw, 28px); z-index: 0; pointer-events: none; background:
  linear-gradient(#f7c687,#f7c687) 0 0/28px 1px, linear-gradient(#f7c687,#f7c687) 0 0/1px 28px, linear-gradient(#f7c687,#f7c687) 100% 0/28px 1px, linear-gradient(#f7c687,#f7c687) 100% 0/1px 28px,
  linear-gradient(#f7c687,#f7c687) 0 100%/28px 1px, linear-gradient(#f7c687,#f7c687) 0 100%/1px 28px, linear-gradient(#f7c687,#f7c687) 100% 100%/28px 1px, linear-gradient(#f7c687,#f7c687) 100% 100%/1px 28px; background-repeat: no-repeat; }
body[data-ruta^="/lugares/"] header.hero .hero-texto { position: relative !important; z-index: 1; padding: 0 !important; margin: 0 !important; max-width: 1100px; color: #fdfbf7; }
body[data-ruta^="/lugares/"] header.hero h1 { color: #fdfbf7 !important; font-size: clamp(54px, 8.4vw, 148px) !important; line-height: .92 !important; letter-spacing: -.03em; text-shadow: 0 6px 40px rgba(31,37,56,.6); max-width: 13ch; }
body[data-ruta^="/lugares/"] header.hero :is(.miga, .miga a, .atribucion, .creditos, .creditos span) { color: #e6ebf3 !important; }
body[data-ruta^="/lugares/"] header.hero .miga a { color: #f7c687 !important; }
body[data-ruta^="/lugares/"] header.hero .filete-oro { background: #f7c687 !important; }
body[data-ruta^="/lugares/"] header.hero :is(.hero-foto figcaption, .hero-foto [class*="pie"]) { position: absolute; right: clamp(24px, 3vw, 44px); bottom: clamp(24px, 3vw, 40px); left: auto; color: #c5d2e3 !important; font-size: 10px; }
body[data-ruta^="/lugares/"] .cuerpo :is(h2) { font-size: clamp(34px, 3.6vw, 56px) !important; }
@media (max-width: 700px) { body[data-ruta^="/lugares/"] header.hero :is(.hero-foto figcaption, .hero-foto [class*="pie"]) { display: none !important; } }

/* ── 098 · /agenda · «El año de campo» en la identidad ── */
body[data-ruta="/agenda"] .anual-mes { background: #e3e8ef !important; height: 14px !important; }
body[data-ruta="/agenda"] .anual-mes[data-on] { background: linear-gradient(180deg, #f7c687 0 2px, #3e5a80 2px) !important; }
body[data-ruta="/agenda"] .anual-fila:hover .anual-mes[data-on] { background: linear-gradient(180deg, #f7c687 0 2px, #1f2538 2px) !important; }
body[data-ruta="/agenda"] .anual-quien em { font-family: var(--font-heading, serif); font-style: normal; font-size: 19px; color: #1f2538; }
body[data-ruta="/agenda"] .anual-quien i { color: #9a4a1c !important; font: 500 10px/1.4 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; font-style: normal; }
body[data-ruta="/agenda"] .anual-mes em { color: #4a5568 !important; }

/* ═══ 102 · Sitio vivo (docs/IDENTIDAD.md) ═══ */
/* Transiciones de página: documento a documento, sin JS. */
/* (126: la transición de página vive ahora en transiciones.css, «niebla que pasa».) */
/* Divisor: el perfil del Tacaná en hilo dorado, con una chispa que lo recorre. */
.vv-divisor { width: min(1100px, 88vw); height: clamp(46px, 7vw, 92px); margin: clamp(28px, 5vw, 64px) auto; pointer-events: none; }
.vv-divisor svg { width: 100%; height: 100%; overflow: visible; }
.vv-linea, .vv-chispa { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.vv-linea { stroke: #D98048; stroke-width: 1.2; opacity: .8; }
.vv-chispa { stroke: #F7C687; stroke-width: 3; filter: drop-shadow(0 0 4px #F7C687) drop-shadow(0 0 10px rgba(229,141,87,.8)); }
/* Rúbrica a pluma bajo cada título de sección. */
.vv-titulo { position: relative; }
.vv-rubrica { display: block; width: clamp(110px, 14vw, 170px); height: auto; margin-top: .35em; overflow: visible; }
.vv-rubrica path { fill: none; stroke: #D98048; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(247,198,135,.6)); }
[style*="text-align: center"] > .vv-rubrica, .vv-titulo[style*="center"] .vv-rubrica { margin-inline: auto; }
/* De la noche al alba: el velo cálido sube con el scroll (--alba 0→1, vivo.ts). */
html.vv-alba body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: linear-gradient(0deg, rgba(229,141,87,.16), rgba(247,198,135,.05) 40%, transparent 70%), linear-gradient(180deg, rgba(31,37,56,.12), transparent 35%);
  opacity: calc(var(--alba, 0) * .9); mix-blend-mode: soft-light; transition: opacity .3s linear; }
/* Niebla GLSL (sólo escritorio). */
.vv-niebla { position: fixed; inset: 0; width: 100vw !important; height: 100vh !important; z-index: 2147482999; pointer-events: none; mix-blend-mode: screen; opacity: .8; }
/* Trazo fino del héroe (GSAP DrawSVG + MorphSVG); el polvo GPU va encima. */
.idh-trazo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.idh-trazo path { fill: none; stroke: #F7C687; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(247,198,135,.9)) drop-shadow(0 0 10px rgba(229,141,87,.55)); }
.idh-trazo-quieto path { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.vv-alba body::after { transition: none; }
}
/* 102 · En escritorio el botón de sonido baja al centro inferior: arriba chocaba con el sello. */
@media (min-width: 701px) { body[data-ruta="/"] .sonido:not(.sonido-visor) { top: auto !important; bottom: clamp(20px, 4vh, 40px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%); } }
/* 107 · Títulos escritos letra por letra (vivo.ts). Sin JS o con movimiento reducido, el texto queda tal cual. */
.vv-palabra { display: inline-block; white-space: nowrap; }
.vv-letra { display: inline-block; clip-path: inset(-20% 100% -20% 0); filter: blur(3px); color: #F7C687; text-shadow: 0 0 12px rgba(247,198,135,.8); }
.vv-titulo.vv-visto .vv-letra { clip-path: inset(-20% -10% -20% 0); filter: none; color: inherit; text-shadow: none;
  transition: clip-path .5s cubic-bezier(.45,.05,.25,1), filter .5s ease, color 1.1s ease .25s, text-shadow 1.4s ease .2s;
  transition-delay: calc(var(--l) * 38ms), calc(var(--l) * 38ms), calc(var(--l) * 38ms + .25s), calc(var(--l) * 38ms + .2s); }
.vv-titulo .vv-rubrica path { transition-delay: calc(var(--n, 10) * 38ms); }
/* 108 · Rendimiento: lo que está bajo el pliegue no se maqueta en el primer cuadro. */
body[data-ruta="/"] main > section.idp, body[data-ruta="/"] main > section.idp-cierre, body[data-ruta="/"] .idp-pie { content-visibility: auto; contain-intrinsic-size: auto 900px; }
body[data-editorial]:not([data-ruta^="/mapa"]):not([data-ruta^="/admin"]):not([data-ruta^="/chat"]) main section:not(:first-of-type) { content-visibility: auto; contain-intrinsic-size: auto 700px; }
/* 110 · Trazos ocultos hasta que entran a la vista (sin medir al montar). */
.vv-trazos :is(.vv-titulo, .vv-divisor):not(.vv-visto) :is(.vv-linea, .vv-chispa, .vv-rubrica path) { opacity: 0; }

/* ═══ 129 · P4 Menú coreografiado ═══
   Se abre como niebla que sube (máscara de abajo arriba + velo de vapor que
   asciende), las secciones entran numeradas con una revelación de máscara
   escalonada y un hilo dorado subraya la página activa. Sólo azules + oro. */
@media (max-width: 700px) {
	body[data-editorial] nav .menu-movil[open] .menu-panel {
		background: linear-gradient(180deg, #1f2538 0%, #232b45 55%, #2c3d63 100%) !important;
		isolation: isolate; overflow-x: hidden;
	}
	body[data-editorial] nav .menu-movil[open] .menu-panel::before {
		content: ""; position: absolute; inset: -20% -10% 0; z-index: -1; pointer-events: none;
		background: radial-gradient(60% 30% at 30% 100%, rgba(143,169,214,.28), transparent 70%), radial-gradient(50% 26% at 75% 90%, rgba(197,210,227,.18), transparent 70%);
		filter: blur(18px);
	}
	body[data-editorial] nav .menu-movil[open] .menu-panel a {
		position: relative; align-items: baseline; gap: 18px; border-bottom-color: rgba(197,210,227,.16);
	}
	body[data-editorial] nav .menu-movil[open] .menu-panel a span {
		display: inline-block !important; min-width: 2.2em; font: 500 11px/1 var(--font-ui) !important; letter-spacing: .2em; color: #e1ad66; transform: translateY(-.9em);
	}
	body[data-editorial] nav .menu-movil[open] .menu-panel a[aria-current="page"]::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform-origin: left;
		background: linear-gradient(90deg, #e1ad66, #f6e2b8 60%, transparent); box-shadow: 0 0 8px rgba(243,210,154,.7);
	}
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
	body[data-editorial] nav .menu-movil[open] .menu-panel { animation: menu-niebla .62s cubic-bezier(.22,1,.36,1) both; }
	body[data-editorial] nav .menu-movil[open] .menu-panel::before { animation: menu-vapor 1.4s cubic-bezier(.22,1,.36,1) both; }
	body[data-editorial] nav .menu-movil[open] .menu-panel a { animation: menu-linea .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.18s + var(--i, 0) * 70ms); }
	body[data-editorial] nav .menu-movil[open] .menu-panel a:nth-child(1) { --i: 0 } body[data-editorial] nav .menu-movil[open] .menu-panel a:nth-child(2) { --i: 1 }
	body[data-editorial] nav .menu-movil[open] .menu-panel a:nth-child(3) { --i: 2 } body[data-editorial] nav .menu-movil[open] .menu-panel a:nth-child(4) { --i: 3 }
	body[data-editorial] nav .menu-movil[open] .menu-panel a:nth-child(5) { --i: 4 } body[data-editorial] nav .menu-movil[open] .menu-panel a:nth-child(6) { --i: 5 }
	body[data-editorial] nav .menu-movil[open] .menu-panel a:nth-child(7) { --i: 6 } body[data-editorial] nav .menu-movil[open] .menu-panel a:nth-child(8) { --i: 7 }
	body[data-editorial] nav .menu-movil[open] .menu-panel a[aria-current="page"]::after { animation: menu-hilo .9s cubic-bezier(.45,0,.2,1) .7s both; }
}
@keyframes menu-niebla { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes menu-vapor { from { transform: translateY(30%); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-6%); opacity: .9; } }
@keyframes menu-linea { from { clip-path: inset(0 0 100% 0); transform: translateY(.5em); opacity: 0; } to { clip-path: inset(0 0 -20% 0); transform: none; opacity: 1; } }
@keyframes menu-hilo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 130 · P5 «Saltar intro» del hero */
/* Encima de «Descubrir Chiapas» (.idh-bi, bottom clamp(20px,4vh,40px)), no sobre él: a 390 px el centro de uno caía en el otro y un toque para bajar saltaba la intro. */
.idh-saltar { position: absolute; z-index: 6; bottom: calc(clamp(20px, 4vh, 40px) + 50px + env(safe-area-inset-bottom)); left: calc(18px + env(safe-area-inset-left)); min-height: 44px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; opacity: .8; /* 137 · texto discreto abajo a la izquierda */ color: #fdfbf7; font: 500 10px var(--font-ui); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .45s ease, border-color .3s ease; animation: idh-saltar-entra .8s ease 1.6s both; }
.idh-saltar:hover { color: #f7c687; }
.idh-saltar:focus-visible { outline: 2px solid #f7c687; outline-offset: 3px; }
.idh-saltar.fuera { animation: none; opacity: 0; pointer-events: none; }
@keyframes idh-saltar-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .idh-saltar { display: none; } }


/* ═══ 137 · Sistema visual de cabeceras (auditorías visual + creativa, 12 oct) ═══ */
/* Foto propia por sección (cuadros de los videos propios); el volcán queda para la portada. */
body[data-ruta="/lugares"] header.cabecera { --hero-img: url(/assets/identidad/cab-lugares.webp) !important; }
body[data-ruta="/galeria"] header.cabecera { --hero-img: url(/assets/identidad/cab-galeria.webp) !important; }
body[data-ruta^="/agenda"] header.cabecera { --hero-img: url(/assets/identidad/cab-agenda.webp) !important; }
body[data-ruta^="/podcast"] header.cabecera { --hero-img: url(/assets/identidad/cab-podcast.webp) !important; }
body[data-ruta="/sobre"] header[data-escena="entrada"] { --hero-img: url(/assets/identidad/cab-sobre.webp) !important; }
@media (max-width: 700px) {
	body[data-ruta="/lugares"] header.cabecera { --hero-img: url(/assets/identidad/cab-lugares-movil.webp) !important; }
	body[data-ruta="/galeria"] header.cabecera { --hero-img: url(/assets/identidad/cab-galeria-movil.webp) !important; }
	body[data-ruta^="/agenda"] header.cabecera { --hero-img: url(/assets/identidad/cab-agenda-movil.webp) !important; }
	body[data-ruta^="/podcast"] header.cabecera { --hero-img: url(/assets/identidad/cab-podcast-movil.webp) !important; }
	body[data-ruta="/sobre"] header[data-escena="entrada"] { --hero-img: url(/assets/identidad/cab-sobre-movil.webp) !important; }
	body[data-ruta^="/agenda"] header.cabecera { padding-bottom: 72px !important; }
}
/* Velo en degradado (tinta 20 % arriba → 85 % abajo) y paralaje sutil con el scroll. */
body[data-editorial]:not([data-ruta^="/chat"]):not([data-ruta^="/admin"]):not([data-ruta="/entrar"]):not([data-ruta="/cuenta"]) header.cabecera::before,
body[data-editorial][data-ruta="/sobre"] header[data-escena="entrada"]::before {
	background: linear-gradient(180deg, rgba(30,42,68,.2) 0%, rgba(30,42,68,.32) 42%, rgba(30,42,68,.85) 100%), var(--hero-img) center 40% / cover no-repeat !important;
	inset: -4% 0 !important;
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		body[data-editorial]:not([data-ruta="/"]) :is(header.cabecera, header[data-escena="entrada"])::before {
			animation: idv-paralaje linear both !important; animation-timeline: scroll(root) !important; animation-range: 0 100vh !important;
		}
	}
}
@keyframes idv-paralaje { from { transform: translateY(0) scale(1.04); } to { transform: translateY(5%) scale(1.04); } }
/* Sin esquineras ni trazo: el último resto de los «trazos» rechazados. */
body[data-editorial] header.cabecera::after, body[data-ruta="/sobre"] header[data-escena="entrada"]::after, .mapa-pag .mp-cab::after { display: none !important; }
/* Titulares de dos registros: la palabra clave en el script marfil de la portada, el resto en Cormorant Light. */
body[data-editorial]:not([data-ruta="/"]) :is(header.cabecera, header[data-escena="entrada"], .mp-cab) h1 { font-weight: 300 !important; letter-spacing: -.01em !important; }
body[data-editorial]:not([data-ruta="/"]) :is(header.cabecera, header[data-escena="entrada"], .mp-cab) h1 em {
	font-family: "Fifi Script", cursive !important; font-style: normal !important; font-weight: 400 !important; color: #fdfbf7 !important;
	font-size: 1.12em; letter-spacing: 0 !important; line-height: 1; padding-inline-end: .08em;
}
body[data-editorial] header.cabecera h1.h1-firma em { font-size: clamp(64px, 16vw, 150px); }
.mapa-pag .mp-cab h1 em { color: #fdfbf7 !important; }
/* Barra interior transparente sobre la cabecera; sólida al pasar el hero (data-barra-solida, refinos.js). */
@media (prefers-reduced-motion: no-preference) { body[data-editorial]:not([data-ruta="/"]):not([data-ruta^="/chat"]):not([data-ruta^="/admin"]) nav.claro { transition: background-color .35s ease, border-color .35s ease; } }
body[data-editorial]:not([data-ruta="/"]):not([data-ruta^="/chat"]):not([data-ruta^="/admin"]):not([data-ruta="/entrar"]):not([data-ruta="/cuenta"]):has(header.cabecera, header[data-escena="entrada"], .mp-cab) nav.claro:not([data-barra-solida]) {
	background: linear-gradient(180deg, rgba(30,42,68,.78) 0%, rgba(30,42,68,.52) 62%, rgba(30,42,68,0) 100%) no-repeat !important; /* no-repeat: sin él, raya de 1 px en el borde inferior. .6 dejaba el menú a 3,2-4,4:1 en /galeria y /sobre */ border-bottom-color: transparent !important; box-shadow: none !important;
}
body[data-editorial]:not([data-ruta="/"]):not([data-ruta^="/chat"]):not([data-ruta^="/admin"]):not([data-ruta="/entrar"]):not([data-ruta="/cuenta"]) .pagina > :is(header.cabecera, header[data-escena="entrada"]):first-of-type { margin-top: -76px !important; }
/* Mapa: antetítulo en una línea; filtros como píldoras de hilo dorado en versalitas Cormorant. */
.mapa-pag .mp-filtros button { border: 1px solid rgba(182,130,53,.7) !important; background: transparent !important; color: #1f2538 !important; font: 500 15px/1 var(--font-heading, "Cormorant Garamond", serif) !important; font-variant: small-caps; letter-spacing: .06em !important; text-transform: lowercase !important; min-height: 36px; }
.mapa-pag .mp-filtros button[aria-pressed="true"] { background: #1e2a44 !important; color: #fdfbf7 !important; border-color: #b68235 !important; }
/* Relieve dibujado mientras llega el mapa vivo: curvas de nivel tinta sobre marfil alrededor del Tacaná. */
.m3-lienzo { background:
	repeating-radial-gradient(ellipse 34% 26% at 38% 34%, transparent 0 17px, rgba(30,42,68,.16) 17px 18px),
	repeating-radial-gradient(ellipse 24% 18% at 70% 66%, transparent 0 15px, rgba(30,42,68,.1) 15px 16px),
	radial-gradient(60% 50% at 38% 34%, rgba(182,130,53,.10), transparent 70%), #f6f1e7 !important; }
/* «Hora» del camino: un punto dorado sobre el arco noche→alba (127). */
.hora { position: fixed; z-index: 40; top: calc(84px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(30,42,68,.72); color: #f6e2b8; font: 500 10px/1 var(--font-ui); letter-spacing: .2em; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hora svg { width: 34px; height: 17px; overflow: visible; }
.hora .hora-arco { fill: none; stroke: rgba(246,226,184,.45); stroke-width: 1; }
.hora .hora-punto { fill: #f7c687; filter: drop-shadow(0 0 3px rgba(247,198,135,.9)); }
@media print { .hora { display: none; } }

/* 137 · Portada: aire en el lockup móvil (fp ↔ firma 12 px, eyebrow 10 px). Sobre: el hueco de la foto en tinta, no verde. */
@media (max-width: 700px) { body[data-ruta="/"] .idh-logo { gap: 12px !important; } body[data-ruta="/"] .idh-firma { display: block; margin-top: 10px; } }
body[data-ruta="/sobre"] .paspartu { background: #1e2a44 !important; }