/* ==========================================================
   MeinKlasse · site.css
   Hoja única del sitio. Parte del CSS original (reference/original/inline.css)
   y corrige lo que señala reference/dossier-meinklasse.html.
   Orden: tokens → base → cabecera → tipografía → botones → secciones →
   componentes nuevos (agenda, formatos, calendario, galería, lightbox).
   Puntos de quiebre: 1200 · 960 · 560 (+ max-height 900 px para el hero).
   ========================================================== */

:root {
  /* Paleta */
  --waldschwarz: #0D1612;
  --britischgrun: #1D3D2A;
  --britischgrun-soft: #26503a;
  --altgold: #A8833A;
  --altgold-bright: #C9A050;   /* oro para texto sobre verde */
  --pergament: #EBE4D3;
  --pergament-warm: #e0d9c5;
  --zinn: #B8B5A8;
  --bronze: #5C3A1F;           /* texto atenuado sobre pergamino */
  --error: #E39A88;

  /* Roles de color según el fondo. Las secciones claras y verdes los redefinen. */
  --ink: var(--pergament);
  --ink-muted: var(--zinn);
  --accent: var(--altgold);
  --line: rgba(235, 228, 211, 0.15);
  --line-gold: rgba(168, 131, 58, 0.25);
  --st-open: var(--altgold-bright);

  /* Tipografía */
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;

  /* Escala de tamaños: 12 · 13 · 15 · 17 · 20 · 28 · 44 · display fluido (limitado por alto de pantalla) */
  --fs-1: 0.75rem;
  --fs-2: 0.8125rem;
  --fs-3: 0.9375rem;
  --fs-4: 1.0625rem;
  --fs-5: 1.25rem;
  --fs-6: 1.75rem;
  --fs-7: 2.75rem;
  --fs-8: min(clamp(5rem, 17vw, 18rem), 26vh);
  /* Tres fórmulas de título, no treinta y cinco */
  --fs-display: clamp(3rem, 8vw, 7rem);
  --fs-h2: clamp(2.5rem, 5.5vw, 4.75rem);
  --fs-h3: clamp(2rem, 4vw, 3.25rem);

  /* Tracking */
  --tr-tight: -0.03em;
  --tr-caps: 0.15em;
  --tr-label: 0.12em;

  /* Espaciado (base 8 px) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;
  --gutter: 2rem;
  --container: 1360px;
  --nav-h: 82px;

  /* Recetas fotográficas: solo estas dos */
  --grade-archive: saturate(0.8) contrast(1.05);
  --grade-cinematic: saturate(0.55) contrast(1.15) brightness(0.6);
}
@media (max-width: 960px) {
  :root { --gutter: 1.5rem; --nav-h: 68px; }
}
@media (max-width: 560px) {
  :root { --gutter: 1rem; }
}

/* Secciones claras (pergamino): tinta oscura, acento bronce */
.calendar, .contacto, .event-dates, .evento-fechas, .inscripcion-section, .section-light {
  --ink: var(--waldschwarz);
  --ink-muted: var(--bronze);
  --accent: var(--bronze);
  --line: rgba(13, 22, 18, 0.15);
  --line-gold: rgba(92, 58, 31, 0.3);
  --st-open: var(--britischgrun);
}
/* Secciones verdes: el oro sube de brillo para llegar a AA */
.sponsors, .feature, .event-about, .evento-ritual, .archiv-future, .event-cta, .evento-cta, .section-green {
  --accent: var(--altgold-bright);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-synthesis: none; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--waldschwarz);
  color: var(--pergament);
  font-weight: 300;
  line-height: 1.6;
  font-size: var(--fs-4);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
dl, dt, dd, figure { margin: 0; }
[hidden] { display: none !important; }

/* Foco visible en oro en todo el sitio (bronce sobre pergamino) */
:focus-visible { outline: 2px solid var(--altgold); outline-offset: 3px; }
.calendar :focus-visible, .contacto :focus-visible, .event-dates :focus-visible,
.evento-fechas :focus-visible, .inscripcion-section :focus-visible, .section-light :focus-visible { outline-color: var(--bronze); }

/* Enlace para saltar al contenido: fuera de pantalla hasta recibir foco */
.skip-link {
  position: absolute;
  top: -100px; left: var(--s-2);
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--altgold);
  color: var(--waldschwarz);
  font-family: var(--display);
  font-size: var(--fs-2);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}
.skip-link:focus { top: var(--s-2); outline-color: var(--pergament); }

/* Cursiva real: Barlow Condensed Italic. Nunca Oswald inclinada por el navegador. */
.ital, .italic, i, em {
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
}
.ital, .italic { letter-spacing: 0; }

/* Rótulo con guion, para .mono de rótulo cuando haga falta (el guion lo pone el CSS) */
.label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
}
.label::before { content: '— '; }

/* Film grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========== NAV (cabecera fija: 82 px, 68 px en móvil) ========== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: rgba(13, 22, 18, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(168, 131, 58, 0.15);
  display: grid;
  /* el menú nunca se comprime; el rótulo izquierdo cede (y se corta con elipsis) */
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: var(--s-4);
}

.nav-left {
  grid-column: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
}

/* El logo es un <a> */
.nav-logo {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  text-align: center;
  color: var(--pergament);
  text-decoration: none;
  letter-spacing: 0.05em;
}

.nav-logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav-logo-mk {
  display: inline-block;
  width: 34px; height: 34px;
  position: relative;
}
.nav-logo-mk svg { width: 100%; height: 100%; }

/* El menú es <nav class="nav-menu"><ul>…</ul></nav> */
.nav-menu { grid-column: 3; justify-self: end; }
.nav-menu ul {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 2rem);
  list-style: none;
  margin: 0; padding: 0;
}

.nav-menu a {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--fs-2);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zinn);
  position: relative;
  padding: 0.5rem 0;
  white-space: nowrap;
  transition: color 0.3s;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 0;
  height: 1px;
  background: var(--altgold);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-menu a:hover,
.nav-menu a:focus-visible,
.nav-menu a.active,
.nav-menu a[aria-current="page"] { color: var(--pergament); }
.nav-menu a:hover::after,
.nav-menu a:focus-visible::after,
.nav-menu a.active::after,
.nav-menu a[aria-current="page"]::after { width: 100%; left: 0; }
/* Página actual: subrayado completo en oro */
.nav-menu a.active::after,
.nav-menu a[aria-current="page"]::after { background: var(--altgold-bright); }

/* Botón hamburguesa: <button> de 44×44, visible solo bajo 960 px */
.nav-toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
  z-index: 101;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 11px; right: 11px;
  height: 1px;
  background: var(--pergament);
  transition: transform 0.3s, opacity 0.2s, top 0.3s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 50%; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

@media (max-width: 1200px) {
  .nav-left { display: none; }
}
@media (max-width: 960px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-logo { grid-column: 1; justify-self: start; }
  .nav-toggle { display: block; grid-column: 2; }
  .nav-menu { display: none; }
  /* Menú abierto: overlay a pantalla completa, como el original */
  .nav-menu.open, .nav-menu[data-open] {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--waldschwarz);
    padding: calc(var(--nav-h) + var(--s-3)) var(--gutter) var(--s-4);
    z-index: 99;
    overflow-y: auto;
  }
  .nav-menu.open ul, .nav-menu[data-open] ul { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .nav-menu.open a, .nav-menu[data-open] a { font-size: 1.5rem; letter-spacing: 0.15em; color: var(--pergament); padding: 0.25rem 0; }
  .nav-menu.open a.active, .nav-menu.open a[aria-current="page"],
  .nav-menu[data-open] a.active, .nav-menu[data-open] a[aria-current="page"] { color: var(--altgold-bright); }
}
@media (max-width: 560px) {
  .nav-logo-mark { font-size: var(--fs-3); gap: 0.5rem; }
  .nav-logo-mk { width: 28px; height: 28px; }
  .nav-menu.open a, .nav-menu[data-open] a { font-size: 1.25rem; }
}

/* ========== CONTAINER Y SECCIONES ========== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--s-7) 0; position: relative; }
.section-compact { padding: var(--s-5) 0; }
.section-header { margin-bottom: var(--s-6); max-width: 60ch; }
.section-header.center, .section-header--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.center .eyebrow, .section-header--center .eyebrow { justify-content: center; }
.section-header .lede { margin-top: var(--s-3); }
.section-header.center .lede, .section-header--center .lede { margin-left: auto; margin-right: auto; }

/* ========== COMMON TYPE ========== */
/* Rótulo: un solo guion, lo pone ::before. Variante cerrada: .eyebrow--closed (guion también al final). */
.eyebrow {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--s-3);
}
.eyebrow::before { content: '—'; color: var(--accent); }
.eyebrow--closed::after { content: '—'; color: var(--accent); }
.eyebrow .pulse {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.h-mega {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}

.h-display {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.h-section {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.h-article {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-6);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* Cursiva dorada dentro de un título */
.h-mega .ital, .h-display .ital, .h-section .ital, .h-article .ital,
.h-mega .italic, .h-display .italic,
h1 .ital, h2 .ital, h3 .ital {
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: 0;
  color: var(--accent);
}

.accent { color: var(--accent); }

.lede {
  font-size: var(--fs-5);
  max-width: 52ch;
  color: var(--ink-muted);
  line-height: 1.6;
}

.mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-2);
  letter-spacing: var(--tr-label);
  color: var(--ink-muted);
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 44px;
  padding: 0.9rem 1.8rem;
  font-family: var(--display);
  font-size: var(--fs-2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
  cursor: pointer;
}

.btn-gold {
  background: var(--altgold);
  color: var(--waldschwarz);
}
.btn-gold:hover, .btn-gold:focus-visible {
  background: var(--altgold-bright);
  transform: translateY(-1px);
}

/* Fantasma: borde al 60 % como mínimo */
.btn-ghost {
  background: transparent;
  border-color: rgba(235, 228, 211, 0.6);
  color: var(--pergament);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--altgold-bright);
  color: var(--altgold-bright);
}
/* Fantasma sobre pergamino */
.calendar .btn-ghost, .contacto .btn-ghost, .event-dates .btn-ghost, .evento-fechas .btn-ghost,
.inscripcion-section .btn-ghost, .section-light .btn-ghost {
  border-color: rgba(13, 22, 18, 0.6);
  color: var(--waldschwarz);
}
.calendar .btn-ghost:hover, .contacto .btn-ghost:hover, .event-dates .btn-ghost:hover, .evento-fechas .btn-ghost:hover,
.inscripcion-section .btn-ghost:hover, .section-light .btn-ghost:hover,
.calendar .btn-ghost:focus-visible, .contacto .btn-ghost:focus-visible, .section-light .btn-ghost:focus-visible {
  border-color: var(--bronze);
  color: var(--bronze);
}

.btn-arrow::after {
  content: '→';
  font-family: var(--body);
  font-weight: 400;
}

/* Botón de WhatsApp: colores de marca; el ícono es el único reconocimiento. Nada de verde de la app. */
.btn-whatsapp {
  background: var(--pergament);
  color: var(--waldschwarz);
  border-color: var(--pergament);
}
.btn-whatsapp .ico-wa, .btn-whatsapp svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--altgold);
  fill: currentColor;
}
.btn-whatsapp:hover, .btn-whatsapp:focus-visible {
  background: var(--waldschwarz);
  color: var(--pergament);
  border-color: var(--pergament);
}
/* Sobre pergamino se invierte: oscuro con texto claro */
.calendar .btn-whatsapp, .contacto .btn-whatsapp, .event-dates .btn-whatsapp, .evento-fechas .btn-whatsapp,
.inscripcion-section .btn-whatsapp, .section-light .btn-whatsapp {
  background: var(--waldschwarz);
  color: var(--pergament);
  border-color: var(--waldschwarz);
}
.calendar .btn-whatsapp:hover, .contacto .btn-whatsapp:hover, .event-dates .btn-whatsapp:hover, .evento-fechas .btn-whatsapp:hover,
.inscripcion-section .btn-whatsapp:hover, .section-light .btn-whatsapp:hover,
.contacto .btn-whatsapp:focus-visible, .section-light .btn-whatsapp:focus-visible {
  background: var(--pergament);
  color: var(--waldschwarz);
  border-color: var(--waldschwarz);
}

/* Botón chico (filtros, "ver más") */
.btn-small { min-height: 36px; padding: 0.5rem 1rem; letter-spacing: var(--tr-caps); }

/* ========== HERO (magazine cover) ========== */
.hero {
  min-height: 100vh;
  padding: 7rem var(--gutter) 3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 40%, rgba(168, 131, 58, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--waldschwarz) 0%, #0f1a15 100%);
}

/* Subtle grid lines for magazine feel */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 131, 58, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 131, 58, 0.04) 1px, transparent 1px);
  background-size: 100px 100px;
  pointer-events: none;
}

.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero-topline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(168, 131, 58, 0.2);
  margin-bottom: 3rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
}
.hero-topline > *:last-child { text-align: right; }
.hero-topline .accent { color: var(--altgold); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5rem;
  align-items: end;
}

.hero-left .hero-kicker {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 2rem;
  opacity: 0; animation: up 1s 0.2s forwards;
}

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(4.5rem, 13vw, 14rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  opacity: 0; animation: up 1.2s 0.4s forwards;
}
.hero-title span {
  font-weight: 500;
  color: var(--altgold);
  font-family: var(--body); font-style: italic;
  display: block;
  font-size: 0.74em;
  letter-spacing: -0.02em;
}

.hero-tag {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: 1.37rem;
  letter-spacing: 0.02em;
  color: var(--pergament);
  margin-top: 2rem;
  max-width: 40ch;
  opacity: 0; animation: up 1.2s 0.7s forwards;
}

.hero-right {
  opacity: 0; animation: up 1.2s 0.9s forwards;
}

.hero-meta-block {
  border-left: 1px solid rgba(168, 131, 58, 0.3);
  padding-left: 2rem;
}

.hero-meta-label {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 1rem;
}

.hero-meta-body {
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(235, 228, 211, 0.8);
  margin-bottom: 2rem;
}

.hero-contents-list {
  list-style: none;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-2);
  letter-spacing: 0.08em;
}
.hero-contents-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(184, 181, 168, 0.2);
  color: var(--zinn);
  cursor: pointer;
  transition: color 0.2s;
}
.hero-contents-list li:hover { color: var(--altgold); }
.hero-contents-list li span:first-child::before {
  content: attr(data-num) '  ';
  color: var(--altgold);
}

.hero-bottom {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(168, 131, 58, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  opacity: 0; animation: up 1.2s 1.1s forwards;
}

.hero-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@keyframes up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== FEATURE ARTICLE (editorial) ========== */
.feature {
  background: var(--britischgrun);
  color: var(--pergament);
  position: relative;
}

.feature-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.feature-img {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, rgba(13, 22, 18, 0.3) 0%, rgba(92, 58, 31, 0.3) 100%), #0a1310;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  filter: var(--grade-archive);
}
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-img::after {
  content: 'MK—001';
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--altgold);
  background: rgba(13, 22, 18, 0.7);
  padding: 0.4rem 0.8rem;
  backdrop-filter: blur(4px);
}

.feature-body p {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: 1.26rem;
  line-height: 1.55;
  margin-top: 2rem;
  color: rgba(235, 228, 211, 0.85);
}
.feature-body p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 5rem;
  font-weight: 600;
  font-style: normal;
  float: left;
  line-height: 0.9;
  margin: 0.2rem 0.8rem 0 0;
  color: var(--altgold);
}

.feature-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(168, 131, 58, 0.3);
}

.feature-meta-item .mono { color: var(--altgold); }
.feature-meta-item strong {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
  margin-top: 0.4rem;
}

/* ==========================================
   CALENDARIO Y AGENDA (sección pergamino)
   Markup: sección .calendar (SPEC) + listas .agenda-* que genera build.ps1
   ========================================== */
.calendar {
  background: var(--pergament);
  color: var(--waldschwarz);
}
.calendar .eyebrow, .calendar .eyebrow::before { color: var(--bronze); }
.calendar .lede { color: var(--bronze); }

/* Cabecera del calendario mensual: ‹ Mes MMXXVI › + información del filtro */
.calendar-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas: "prev month next" "info info info";
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--waldschwarz);
}
.calendar-header h2, .cal-month {
  grid-area: month;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-align: center;
}
.calendar-header h2 span, .cal-month .ital {
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: 0;
  color: var(--bronze);
}
.cal-nav {
  grid-area: prev;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(13, 22, 18, 0.3);
  border-radius: 0;
  background: transparent;
  color: var(--waldschwarz);
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.cal-nav:last-of-type { grid-area: next; }
.cal-nav:hover, .cal-nav:focus-visible { background: var(--waldschwarz); color: var(--pergament); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-info {
  grid-area: info;
  margin: 0;
  min-height: 1.5em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--s-2);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bronze);
}
/* Botón "ver todas" que crea el JS dentro de la cabecera */
#cal-clear, .cal-clear {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--waldschwarz);
  background: transparent;
  border: 1px solid rgba(13, 22, 18, 0.4);
  border-radius: 0;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#cal-clear:hover, #cal-clear:focus-visible, .cal-clear:hover { background: var(--waldschwarz); color: var(--pergament); }
.calendar-header-right { grid-area: info; font-family: var(--mono); font-weight: 400; font-size: var(--fs-1); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--bronze); }

/* Grilla mensual: 7 columnas; los días son <button class="cal-day"> */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: var(--s-3);
}
.cal-weekday {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bronze);
  text-align: center;
  padding: var(--s-2) 0 0.75rem;
  border-bottom: 1px solid rgba(13, 22, 18, 0.15);
}
.cal-day {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0.25rem;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--waldschwarz);
  background: transparent;
  border: 1px solid rgba(13, 22, 18, 0.08);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cal-day:hover, .cal-day:focus-visible { border-color: var(--waldschwarz); }
.cal-day.empty {
  border-color: transparent;
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.cal-day.outside, .cal-day.outside-year { color: rgba(13, 22, 18, 0.3); }
.cal-day.today {
  background: rgba(168, 131, 58, 0.14);
  border: 2px solid var(--altgold);
}
.cal-day.has-event {
  background: var(--waldschwarz);
  color: var(--pergament);
  border-color: var(--waldschwarz);
}
.cal-day.has-event::after, .cal-day-dot {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--altgold);
}
.cal-day.has-event:hover, .cal-day.has-event:focus-visible,
.cal-day[aria-pressed="true"], .cal-day.selected {
  background: var(--altgold);
  border-color: var(--altgold);
  color: var(--waldschwarz);
}
.cal-day.has-event:hover::after, .cal-day.has-event:focus-visible::after,
.cal-day[aria-pressed="true"]::after, .cal-day.selected::after,
.cal-day[aria-pressed="true"] .cal-day-dot, .cal-day.selected .cal-day-dot { background: var(--waldschwarz); }

/* Leyenda */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px solid rgba(13, 22, 18, 0.1);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bronze);
}
.cal-leg, .cal-legend-item { display: inline-flex; align-items: center; gap: 0.6rem; }
.cal-leg::before, .cal-legend-marker {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid var(--waldschwarz);
  flex-shrink: 0;
}
.cal-leg-event::before, .cal-legend-marker.event { background: var(--waldschwarz); }
.cal-leg-today::before, .cal-legend-marker.today { background: rgba(168, 131, 58, 0.14); border: 2px solid var(--altgold); }
.cal-leg-selected::before, .cal-legend-marker.selected { background: var(--altgold); border-color: var(--altgold); }

@media (max-width: 960px) {
  .calendar-header { margin-bottom: var(--s-4); }
  .cal-day { font-size: var(--fs-3); min-height: 40px; }
  .cal-weekday { padding: 0.75rem 0 0.5rem; }
  .cal-grid { gap: 2px; }
  .cal-legend { gap: var(--s-2) var(--s-3); }
}

/* ---------- Agenda: grupos y filas de ediciones ---------- */
.agenda-group {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-2);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.agenda-list > .agenda-group:first-child { margin-top: 0; }
.agenda-group .mono { font: inherit; letter-spacing: inherit; color: inherit; }
.agenda-count {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-5);
  letter-spacing: 0;
  color: var(--accent);
}

.agenda-rows { list-style: none; margin: 0; padding: 0; }
.agenda-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 4.5rem minmax(0, 1fr) auto auto 2.5rem;
  gap: var(--s-4);
  align-items: center;
  margin: 0 calc(-1 * var(--s-2));
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}
.agenda-row:hover, .agenda-row:focus-within { background: rgba(168, 131, 58, 0.08); }

.agenda-num {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--ink-muted);
}
.agenda-date {
  font-family: var(--display);
  text-align: center;
  line-height: 1;
}
.agenda-date b {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.agenda-date span {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.agenda-main { min-width: 0; }
.agenda-title {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  transition: color 0.2s;
}
.agenda-title:hover, .agenda-title:focus-visible, .agenda-row:hover .agenda-title { color: var(--accent); }
.agenda-sub {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-3);
  color: var(--ink-muted);
}
.agenda-place {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
}

/* Estado: pastilla con borde */
.agenda-status {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.4rem 0.7rem;
  border: 1px solid currentColor;
  white-space: nowrap;
  color: var(--ink);
}
.agenda-status.status-open, .status-open { color: var(--st-open); }
.agenda-status.status-soon, .status-soon { color: var(--ink-muted); }
.agenda-status.status-full, .status-full { color: var(--ink); background: rgba(168, 131, 58, 0.12); }
.agenda-status.status-done, .status-done { color: var(--ink-muted); border-style: dashed; opacity: 0.85; }
.agenda-status.status-off, .status-off { color: var(--ink-muted); text-decoration: line-through; }
.agenda-row.status-off .agenda-title { color: var(--ink-muted); text-decoration: line-through; }
.status-invite { color: var(--accent); border-color: var(--accent); background: rgba(168, 131, 58, 0.1); }
.status-waitlist { color: var(--ink-muted); }

/* La flecha es un enlace que cubre toda la fila */
.agenda-arrow {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink-muted);
  text-align: right;
  transition: color 0.2s;
}
.agenda-arrow::after { content: ''; position: absolute; inset: 0; }
.agenda-arrow span { display: inline-block; transition: transform 0.2s; }
.agenda-row:hover .agenda-arrow, .agenda-row:focus-within .agenda-arrow { color: var(--accent); }
.agenda-row:hover .agenda-arrow span, .agenda-row:focus-within .agenda-arrow span { transform: translateX(6px); }

/* Versión compacta (portada): sin número ni lugar */
.agenda-compact .agenda-row {
  grid-template-columns: 4.5rem minmax(0, 1fr) auto 2.5rem;
  padding: var(--s-3) var(--s-2);
}
.agenda-compact .agenda-num, .agenda-compact .agenda-place { display: none; }
.agenda-compact .agenda-title { font-size: 1.25rem; }
.agenda-compact .agenda-date b { font-size: 1.9rem; }

.agenda-empty {
  padding: var(--s-3) 0;
  font-size: var(--fs-4);
  color: var(--ink-muted);
}
.agenda-empty a, .formato-proxima a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 960px) {
  .agenda-row, .agenda-compact .agenda-row {
    grid-template-columns: 4rem minmax(0, 1fr) auto 2rem;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-2);
  }
  .agenda-num { display: none; }
  .agenda-date { grid-column: 1; grid-row: 1 / 3; text-align: left; align-self: start; }
  .agenda-main { grid-column: 2 / 4; grid-row: 1; }
  .agenda-place { grid-column: 2; grid-row: 2; text-align: left; }
  .agenda-status { grid-column: 3; grid-row: 2; justify-self: end; }
  .agenda-compact .agenda-status { grid-column: 2 / 4; justify-self: start; }
  .agenda-arrow { grid-column: 4; grid-row: 1 / 3; }
  .agenda-date b, .agenda-compact .agenda-date b { font-size: 1.9rem; }
  .agenda-title, .agenda-compact .agenda-title { font-size: 1.2rem; line-height: 1.05; }
}
@media (max-width: 560px) {
  .agenda-row, .agenda-compact .agenda-row { gap: 0.6rem var(--s-2); }
  .agenda-date b, .agenda-compact .agenda-date b { font-size: 1.6rem; }
  .agenda-place, .agenda-status { grid-column: 2 / 4; justify-self: start; }
  .agenda-status { grid-row: 3; }
}

/* ==========================================
   FORMATOS: rejilla editorial de tarjetas-enlace (4 · 2 · 1 columnas)
   ========================================== */
.event-grid, .events-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-6);
  border-top: 1px solid var(--line-gold);
  border-left: 1px solid var(--line-gold);
}

/* La tarjeta es un <a> */
.event-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 2.5rem var(--gutter);
  border-right: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
  color: inherit;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: background 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}
/* Sin huérfanas: la séptima tarjeta ocupa el hueco que queda */
.event-card:last-child:nth-child(4n+3) { grid-column: span 2; }
.event-card:hover, .event-card:focus-visible {
  background: rgba(168, 131, 58, 0.06);
  transform: translateY(-8px);
  border-color: var(--altgold);
  box-shadow: 0 20px 60px -20px rgba(168, 131, 58, 0.25);
}
.event-card:focus-visible { outline-offset: -3px; }

@media (max-width: 1200px) {
  .event-grid, .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-card:last-child:nth-child(4n+3) { grid-column: auto; }
  .event-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .event-grid, .events-grid { grid-template-columns: 1fr; margin-top: var(--s-5); }
  .event-card { min-height: 0; padding: var(--s-4) var(--gutter); }
  .event-card:last-child:nth-child(odd) { grid-column: auto; }
  .event-card-num { margin-bottom: 1.25rem; }
  .event-card-title { font-size: 1.55rem; line-height: 1; }
  .event-card-de { margin-bottom: var(--s-2); }
  .event-card-desc { margin-bottom: var(--s-3); }
  .event-card-footer { padding-top: var(--s-2); }
}

.event-card-num {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--altgold);
  margin-bottom: 2rem;
}

.event-card-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
  letter-spacing: -0.005em;
  color: var(--pergament);
}

.event-card-de {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-3);
  color: var(--altgold);
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

.event-card-desc {
  font-size: 1rem;
  color: rgba(235, 228, 211, 0.65);
  line-height: 1.55;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.event-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(184, 181, 168, 0.25);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
}
.event-card-footer .arrow {
  display: inline-block;
  font-family: var(--body);
  color: var(--altgold);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.event-card:hover .arrow, .event-card:focus-visible .arrow { transform: translateX(8px); color: var(--altgold-bright); }

/* ========== NOSOTROS ========== */
.nosotros {
  background: var(--waldschwarz);
  position: relative;
}

.nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
  align-items: start;
}

.nosotros-left {
  position: sticky;
  top: 8rem;
}

.nosotros-body p {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: rgba(235, 228, 211, 0.8);
}
.nosotros-body p:first-of-type {
  font-family: var(--body); font-style: italic; font-weight: 400;
  font-size: 1.47rem;
  color: var(--pergament);
}
.nosotros-body p strong {
  color: var(--altgold);
  font-weight: 500;
}

.values-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(168, 131, 58, 0.2);
}

.value-item .mono { color: var(--altgold); }
.value-item-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 0.6rem 0 0.5rem;
  letter-spacing: 0.005em;
}
.value-item-desc {
  font-size: var(--fs-3);
  color: rgba(235, 228, 211, 0.65);
  line-height: 1.55;
}

/* ========== SPONSORS ========== */
.sponsors {
  background: var(--britischgrun);
  color: var(--pergament);
}

.sponsors-header {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 4rem;
}
.sponsors-header .eyebrow { justify-content: center; }
.sponsors-header p {
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: 1.26rem;
  margin-top: 1.5rem;
  color: rgba(235, 228, 211, 0.8);
}

.sponsor-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid rgba(168, 131, 58, 0.3);
}

.sponsor-tier {
  padding: 3rem var(--gutter);
  border-right: 1px solid rgba(168, 131, 58, 0.3);
  border-top: 1px solid rgba(168, 131, 58, 0.3);
  border-bottom: 1px solid rgba(168, 131, 58, 0.3);
  position: relative;
}

.sponsor-tier.featured {
  background: var(--waldschwarz);
  transform: scale(1.02);
  z-index: 2;
}

.sponsor-tier-label {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 2rem;
}

.sponsor-tier-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.sponsor-tier-de {
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--altgold);
  margin-bottom: 2rem;
}

.sponsor-tier-features {
  list-style: none;
  margin-bottom: 2rem;
}
.sponsor-tier-features li {
  padding: 0.8rem 0;
  border-bottom: 1px dashed rgba(184, 181, 168, 0.25);
  font-size: var(--fs-3);
  color: rgba(235, 228, 211, 0.75);
  display: flex;
  gap: 0.8rem;
}
.sponsor-tier-features li::before {
  content: '—';
  color: var(--altgold);
}

/* ========== CONTACTO ========== */
.contacto {
  background: var(--pergament);
  color: var(--waldschwarz);
}
.contacto .eyebrow { color: var(--bronze); }
.contacto .eyebrow::before { color: var(--bronze); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 6rem;
  align-items: start;
}

.contact-info h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin-bottom: 2rem;
}
.contact-info h2 span {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--bronze);
}

.contact-info-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(13, 22, 18, 0.15);
}
.contact-info-item .mono { color: var(--bronze); }
.contact-info-item strong {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  margin: 0.5rem 0 0.3rem;
  letter-spacing: 0.005em;
}
.contact-info-item span {
  font-size: var(--fs-3);
  color: var(--bronze);
}

/* Form */
.contact-form {
  background: var(--waldschwarz);
  padding: 3rem;
  color: var(--pergament);
  position: relative;
}
.contact-form::before {
  content: 'MK';
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-family: var(--display);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  color: var(--altgold);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.form-field { margin-bottom: 1.2rem; }

.form-field label {
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 0.5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(235, 228, 211, 0.25);
  color: var(--pergament);
  font-family: var(--body);
  font-size: 1.05rem;
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-bottom-color: var(--altgold);
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--altgold);
  outline-offset: 2px;
}
.form-field [aria-invalid="true"] { border-bottom-color: var(--error); }
.form-field label .opt {
  font-family: var(--body);
  font-size: var(--fs-3);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zinn);
}
.form-field textarea { resize: vertical; min-height: 80px; }
.form-field select { cursor: pointer; }
.form-field select option { background: var(--waldschwarz); color: var(--pergament); }

.form-submit {
  width: 100%;
  margin-top: 1.5rem;
}
.contact-form .btn[type="submit"] { margin-top: var(--s-2); }

/* Mensaje de error de validación (el JS lo rellena y quita el hidden) */
.form-error {
  margin: 0 0 var(--s-3);
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--error);
  background: rgba(227, 154, 136, 0.08);
  color: var(--error);
  font-size: var(--fs-4);
  line-height: 1.5;
}
.form-error a { text-decoration: underline; }

/* "Consulta sobre: …" (lo muestra el JS según ?motivo= y ?ref=) */
.consulta-contexto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin: 0 0 var(--s-3);
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--altgold);
  background: rgba(168, 131, 58, 0.1);
  font-size: var(--fs-4);
}
.consulta-contexto .mono { color: var(--altgold-bright); font-size: var(--fs-1); text-transform: uppercase; }
.consulta-contexto .mono::before { content: '— '; }
.consulta-contexto b { font-family: var(--display); font-weight: 500; letter-spacing: 0.02em; color: var(--pergament); }

/* Gracias tras enviar */
.form-gracias {
  padding: var(--s-5);
  border: 1px solid var(--altgold);
  background: var(--waldschwarz);
  color: var(--pergament);
}
.form-gracias .eyebrow { color: var(--altgold-bright); }
.form-gracias h2, .form-gracias h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}
.form-gracias p { font-size: var(--fs-4); color: rgba(235, 228, 211, 0.8); max-width: 50ch; }
.form-gracias p + p { margin-top: var(--s-2); }
.form-gracias .page-actions { margin-top: var(--s-3); }

/* Honeypot: nunca visible */
.hp, .hp[hidden] { display: none !important; }

/* ========== FOOTER (markup en src/partials/footer.html) ========== */
.footer {
  background: var(--waldschwarz);
  padding: var(--s-6) 0 var(--s-4);
  border-top: 1px solid rgba(168, 131, 58, 0.2);
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-5);
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}
.footer-top { display: contents; }

.footer-logo, .footer-brand-mega {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  margin-bottom: var(--s-3);
}
.footer-logo .ital, .footer-brand-mega span {
  display: block;
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: 0;
  color: var(--altgold);
}

.footer-tag, .footer-tagline {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-4);
  color: rgba(235, 228, 211, 0.7);
  max-width: 36ch;
  line-height: 1.5;
}

.footer-col { min-width: 0; }
.footer-h, .footer-col h4 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin: 0 0 var(--s-3);
}
.footer-h::before, .footer-col h4::before { content: '— '; }

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col ul a {
  font-size: var(--fs-3);
  color: var(--zinn);
  transition: color 0.2s;
}
.footer-col ul a:hover, .footer-col ul a:focus-visible { color: var(--pergament); }

.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter) 0;
  border-top: 1px solid rgba(168, 131, 58, 0.2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
}

@media (max-width: 1200px) {
  .footer-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
}
@media (max-width: 560px) {
  .footer { padding: var(--s-5) 0 var(--s-3); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--s-4); padding-bottom: var(--s-4); }
  .footer-logo, .footer-brand-mega { font-size: clamp(2.5rem, 13vw, 4rem); margin-bottom: var(--s-2); }
  .footer-col ul li { margin-bottom: 0.5rem; }
  .footer-bottom { flex-direction: column; gap: 0.75rem; }
}

/* ========== PAGE HEADERS ========== */
.page-header {
  padding: calc(var(--nav-h) + var(--s-7)) var(--gutter) var(--s-6);
  background: linear-gradient(180deg, var(--waldschwarz) 0%, #0f1a15 100%);
  border-bottom: 1px solid rgba(168, 131, 58, 0.2);
}
.page-header-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.page-header h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  margin-bottom: var(--s-3);
}
.page-header h1 span, .page-header h1 .ital {
  display: block;
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: 0;
  color: var(--altgold);
}
.page-header .lede { color: rgba(235, 228, 211, 0.75); }

/* Fila de botones al pie de un bloque */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
@media (max-width: 560px) {
  .page-actions { flex-direction: column; align-items: stretch; }
  .page-actions .btn { width: 100%; }
}

/* ========== RESPONSIVE (secciones heredadas) ========== */
@media (max-width: 960px) {
  .hero-topline { grid-template-columns: 1fr; gap: 0.5rem; text-align: left; }
  .hero-topline > *:last-child { text-align: left; }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-meta-block { border-left: none; border-top: 1px solid rgba(168, 131, 58, 0.3); padding-left: 0; padding-top: 2rem; }
  .hero-bottom { flex-direction: column; align-items: flex-start; }

  .feature-inner { grid-template-columns: 1fr; gap: 3rem; }
  .feature-img { aspect-ratio: 4/3; }

  .nosotros-grid { grid-template-columns: 1fr; gap: 3rem; }
  .nosotros-left { position: static; }
  .values-row { grid-template-columns: 1fr; gap: 2rem; }

  .sponsor-tiers { grid-template-columns: 1fr; border-left: none; }
  .sponsor-tier { border-right: none; border-left: 1px solid rgba(168, 131, 58, 0.3); }
  .sponsor-tier.featured { transform: none; }

  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .contact-form { padding: 2rem var(--gutter); }
  .form-row { grid-template-columns: 1fr; }

  .section { padding: var(--s-6) 0; }
  .section-compact { padding: var(--s-5) 0; }
  .section-header { margin-bottom: var(--s-5); }
}

@media (max-width: 560px) {
  /* Base móvil: menos densidad, más aire */
  body { font-size: 1rem; }
  .section { padding: var(--s-5) 0; }
  .section-compact { padding: var(--s-4) 0; }

  /* Tipografía móvil: bajamos tamaños que escalan feo en pantallas chicas */
  .h-display { font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1; }
  .h-section { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.05; }
  .h-mega { font-size: clamp(2.5rem, 12vw, 3.8rem); line-height: 0.95; }
  .h-card { font-size: 1.35rem; }
  .h-article { font-size: 1.4rem; }
  .lede { font-size: var(--fs-4); }

  .btn { padding: 0.9rem 1.3rem; letter-spacing: var(--tr-caps); }
  .eyebrow { margin-bottom: var(--s-2); }

  /* Manifiesto */
  .intro-split { padding: 3.5rem var(--gutter); }
  .intro-split-inner { gap: var(--s-4); }
  .intro-split-left h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .intro-split-right p { font-size: 1.05rem; margin-bottom: 1.2rem; }
  .intro-split-right p:first-child { font-size: 1.15rem; }

  /* Nosotros / valores */
  .nosotros-grid { gap: var(--s-4); }
  .nosotros-body p { font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.25rem; }
  .nosotros-body p:first-of-type { font-size: 1.15rem; }
  .values-row { margin-top: var(--s-5); padding-top: var(--s-4); gap: var(--s-4); }
  .value-item-title { font-size: 1.2rem; margin: 0.5rem 0 0.4rem; }

  /* Artículo destacado */
  .feature-inner { gap: var(--s-4); }
  .feature-body p { font-size: 1.05rem; margin-top: 1.25rem; }
  .feature-body p:first-of-type::first-letter { font-size: 3.5rem; margin: 0.1rem 0.6rem 0 0; }
  .feature-meta { grid-template-columns: 1fr; gap: 1.25rem; margin-top: var(--s-4); padding-top: var(--s-3); }
  .feature-meta-item strong { font-size: 1rem; }

  /* Cabeceras de página */
  .page-header { padding: calc(var(--nav-h) + var(--s-5)) var(--gutter) var(--s-5); }
  .page-header h1 { font-size: clamp(2.8rem, 12vw, 4.5rem); line-height: 0.9; margin-bottom: var(--s-2); }

  /* Marcas */
  .sponsors-header { margin-bottom: var(--s-5); }
  .sponsors-header p { font-size: 1.05rem; }
  .sponsor-tier { padding: var(--s-4) var(--gutter); }
  .sponsor-tier-name { font-size: 2.2rem; }
  .sponsor-tier-de { margin-bottom: var(--s-3); }
  .sponsor-tier-features { margin-bottom: var(--s-3); }
  .sponsor-tier-features li { padding: 0.6rem 0; }

  /* Contacto */
  .contact-grid { gap: var(--s-5); }
  .contact-info h2 { font-size: clamp(2.2rem, 10vw, 3rem); margin-bottom: var(--s-3); }
  .contact-info-item { padding: 1.2rem 0; }
  .contact-info-item strong { font-size: 1.2rem; margin: 0.4rem 0 0.25rem; }
  .contact-form { padding: 1.75rem var(--gutter); }
  .contact-form::before { top: 1rem; right: 1rem; }
  .form-field input, .form-field select, .form-field textarea { padding: 0.75rem 0; font-size: 1rem; }
  .form-submit { margin-top: 1.2rem; }

  .masonry { column-count: 1; }
}

/* ==========================================
   LANDING HERO (cinematográfico, full-bleed)
   El padding-top reserva cabecera + tira superior: el título nunca se solapa.
   ========================================== */
.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) 3.5rem;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(168, 131, 58, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #1a2822 0%, var(--waldschwarz) 100%);
}
.landing-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: var(--grade-cinematic);
}
.landing-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(168, 131, 58, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, rgba(13, 22, 18, 0.35) 0%, rgba(13, 22, 18, 0.25) 30%, rgba(13, 22, 18, 0.8) 75%, var(--waldschwarz) 100%);
}

/* Botón de pausa del video: discreto, abajo a la derecha */
.video-controls {
  position: absolute;
  right: var(--gutter);
  bottom: 0.75rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  background: rgba(13, 22, 18, 0.55);
  border: 1px solid rgba(235, 228, 211, 0.5);
  border-radius: 0;
  color: var(--pergament);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.video-controls .mono { font: inherit; letter-spacing: inherit; color: inherit; }
.video-controls::before {
  content: '';
  width: 8px; height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.video-controls[aria-pressed="true"]::before {
  width: 0; height: 0;
  border: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.video-controls:hover, .video-controls:focus-visible { background: rgba(13, 22, 18, 0.85); border-color: var(--pergament); }
.landing-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(168, 131, 58, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 131, 58, 0.05) 1px, transparent 1px);
  background-size: 120px 120px;
}

/* Tira superior (ticker): debajo de la cabecera, dentro del padding del hero */
.landing-topstrip {
  position: absolute;
  top: calc(var(--nav-h) + var(--s-3)); left: 0; right: 0;
  z-index: 3;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-4);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
  opacity: 0; animation: up 1s 0.1s forwards;
}
.landing-topstrip > *:last-child { text-align: right; }
.landing-topstrip .accent { color: var(--altgold); }
.landing-topstrip .pulse {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--altgold);
  border-radius: 50%;
  margin-right: 0.6rem;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(168, 131, 58, 0.6); }
  50% { opacity: 0.5; box-shadow: 0 0 0 8px rgba(168, 131, 58, 0); }
}

/* Main content */
.landing-content {
  position: relative;
  z-index: 3;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}

/* Kicker: legible (15 px) */
.landing-kicker {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-3);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--altgold-bright);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  opacity: 0; animation: up 1.2s 0.3s forwards;
}
.landing-kicker::before {
  content: '';
  display: inline-block;
  width: 40px; height: 1px;
  background: var(--altgold);
}

/* Título: fluido por ancho y limitado por alto de pantalla */
.landing-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-8); /* min(clamp(5rem, 17vw, 18rem), 26vh) */
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  opacity: 0; animation: up 1.4s 0.5s forwards;
  margin-bottom: 0.1em;
}
.landing-title .italic, .landing-title .ital {
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  color: var(--altgold);
  display: block;
  font-size: 0.71em;
  letter-spacing: -0.025em;
  line-height: 0.9;
}

.landing-tag {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  color: var(--pergament);
  max-width: 48ch;
  margin-top: var(--s-4);
  line-height: 1.4;
  opacity: 0; animation: up 1.2s 0.8s forwards;
}

.landing-actions {
  margin-top: var(--s-5);
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  opacity: 0; animation: up 1.2s 1s forwards;
}

/* Barra inferior con datos */
.landing-bottom {
  position: relative;
  z-index: 3;
  max-width: var(--container);
  margin: var(--s-6) auto 0;
  width: 100%;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(168, 131, 58, 0.25);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  opacity: 0; animation: up 1.2s 1.2s forwards;
}
.landing-stat .mono {
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold-bright);
  display: block;
  margin-bottom: 0.5rem;
}
.landing-stat .mono::before { content: '— '; }
.landing-stat-value {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--pergament);
  letter-spacing: 0.01em;
}

/* Scroll indicator */
.landing-scroll {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--zinn);
  text-transform: uppercase;
  opacity: 0; animation: up 1.2s 1.5s forwards;
  pointer-events: none;
}
.landing-scroll::after {
  content: '';
  display: block;
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--altgold), transparent);
  margin: 0.8rem auto 0;
}

/* Pantallas bajas (1366×768, 1280×720): menos aire interno para que el hero entre */
@media (max-height: 900px) {
  .landing { padding-top: calc(var(--nav-h) + 3.5rem); padding-bottom: 3rem; }
  .landing-kicker { margin-bottom: var(--s-2); }
  .landing-tag { margin-top: var(--s-3); }
  .landing-actions { margin-top: var(--s-4); }
  .landing-bottom { margin-top: var(--s-3); padding-top: var(--s-2); }
  .landing-scroll { display: none; }
}
@media (max-width: 960px) {
  .landing { padding-top: calc(var(--nav-h) + 7rem); padding-bottom: 3rem; }
  .landing-topstrip { grid-template-columns: 1fr; gap: 0.4rem; }
  .landing-topstrip > *:last-child { text-align: left; }
  .landing-bottom { grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); }
  .landing-scroll { display: none; }
  .video-controls { bottom: 0.5rem; }
  .intro-split-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro-split { padding: 4.5rem var(--gutter); }
  .intro-split-num { display: none; }
  .marquee-content, .marquee-inner { font-size: var(--fs-3); gap: 2.5rem; }
}
@media (max-width: 560px) {
  .landing { padding-bottom: 3.25rem; }
  .landing-kicker { margin-bottom: var(--s-2); gap: 0.5rem; }
  .landing-kicker::before { width: 20px; }
  .landing-title { font-size: clamp(3.8rem, 20vw, 5.5rem); line-height: 0.85; margin-bottom: 0; }
  .landing-title .italic, .landing-title .ital { font-size: 0.74em; }
  .landing-tag { font-size: var(--fs-4); margin-top: var(--s-3); line-height: 1.45; max-width: 100%; }
  .landing-actions { margin-top: 1.75rem; flex-direction: column; align-items: stretch; width: 100%; gap: 0.75rem; }
  .landing-actions .btn { width: 100%; padding: 1rem 1.2rem; }
  .landing-bottom { margin-top: var(--s-5); padding-top: var(--s-3); gap: 1.25rem var(--s-2); }
  .landing-stat-value { font-size: var(--fs-3); }
  .marquee-strip { padding: var(--s-2) 0; }
  .marquee-content, .marquee-inner { font-size: var(--fs-2); gap: var(--s-4); letter-spacing: var(--tr-caps); }
}

/* Marquesina de formatos (con botón de pausa y fundido en los bordes) */
.marquee-strip {
  position: relative;
  background: var(--waldschwarz);
  border-top: 1px solid rgba(168, 131, 58, 0.2);
  border-bottom: 1px solid rgba(168, 131, 58, 0.2);
  padding: var(--s-3) 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-strip::before,
.marquee-strip::after {
  content: '';
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.marquee-strip::before { left: 0; background: linear-gradient(90deg, var(--waldschwarz) 0%, transparent 100%); }
.marquee-strip::after { right: 0; background: linear-gradient(-90deg, var(--waldschwarz) 0%, transparent 100%); }
.marquee-track { overflow: hidden; }
.marquee-content, .marquee-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  animation: marquee 40s linear infinite;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--zinn);
}
.marquee-inner span { display: inline-flex; align-items: center; gap: var(--s-6); }
.marquee-content .dot, .marquee-inner .dot { color: var(--altgold); font-size: 0.5em; }
.marquee-strip[data-paused] .marquee-content,
.marquee-strip[data-paused] .marquee-inner { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-pause {
  position: absolute;
  left: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px; height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 22, 18, 0.8);
  border: 1px solid rgba(235, 228, 211, 0.45);
  border-radius: 0;
  color: var(--pergament);
  transition: border-color 0.2s, background 0.2s;
}
.marquee-pause::before {
  content: '';
  width: 8px; height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.marquee-pause[aria-pressed="true"]::before {
  width: 0; height: 0;
  margin-left: 2px;
  border: 0;
  border-left: 9px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.marquee-pause:hover, .marquee-pause:focus-visible { border-color: var(--altgold-bright); background: var(--waldschwarz); }

/* Manifiesto (split) */
.intro-split {
  background: var(--waldschwarz);
  padding: var(--s-8) var(--gutter);
  position: relative;
}
.intro-split-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-7);
  align-items: start;
}
/* Numeral de capítulo (el "01" suelto del original, ahora con intención) */
.intro-split-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.8;
  letter-spacing: var(--tr-tight);
  color: rgba(168, 131, 58, 0.35);
}
.intro-split-text h2 { margin-bottom: var(--s-3); }
.intro-split-text p {
  font-size: var(--fs-5);
  line-height: 1.6;
  margin-bottom: var(--s-3);
  color: rgba(235, 228, 211, 0.8);
  max-width: 60ch;
}
.intro-split-text .btn { margin-top: var(--s-2); }
.intro-split-left .mono { color: var(--altgold); margin-bottom: 1.5rem; display: block; }
.intro-split-left h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.intro-split-left h2 span {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
  display: block;
}
.intro-split-right p {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(235, 228, 211, 0.8);
}
.intro-split-right p:first-child {
  font-family: var(--body); font-style: italic; font-weight: 400;
  font-size: 1.47rem;
  color: var(--pergament);
}
.intro-split-right p strong {
  font-weight: 500;
  color: var(--altgold);
}

/* ==========================================
   EVENT DETAIL PAGES (8 formatos)
   ========================================== */
.event-hero {
  padding: 10rem var(--gutter) 4rem;
  background: var(--waldschwarz);
  border-bottom: 1px solid rgba(168, 131, 58, 0.2);
  position: relative;
}
.event-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
}
.event-number {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.event-number::before {
  content: '';
  width: 40px; height: 1px;
  background: var(--altgold);
}
.event-hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.event-hero-de {
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: 1.89rem;
  color: var(--altgold);
  letter-spacing: 0.01em;
  margin-bottom: 2rem;
}
.event-hero-lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: rgba(235, 228, 211, 0.8);
  max-width: 50ch;
}
.event-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 2rem;
  border: 1px solid rgba(168, 131, 58, 0.25);
  background: rgba(0, 0, 0, 0.25);
}
.event-hero-stat .mono {
  color: var(--altgold);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  display: block;
  margin-bottom: 0.6rem;
}
.event-hero-stat-value {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--pergament);
  letter-spacing: 0.005em;
  line-height: 1.05;
}

.event-gallery {
  padding: 5rem var(--gutter);
  background: var(--waldschwarz);
}
.event-gallery-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 320px 320px;
  gap: 1rem;
}
.event-gallery-inner > div {
  background-size: cover;
  background-position: center;
  filter: var(--grade-archive);
  position: relative;
  overflow: hidden;
}
.event-gallery-main {
  grid-row: 1 / 3;
}
.event-gallery-caption {
  position: absolute;
  bottom: 1rem; left: 1rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  background: rgba(13, 22, 18, 0.8);
  padding: 0.4rem 0.7rem;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.event-about {
  padding: 6rem var(--gutter);
  background: var(--britischgrun);
}
.event-about-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}
.event-about-left {
  position: sticky;
  top: 7rem;
}
.event-about-body p {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: 1.31rem;
  line-height: 1.6;
  color: rgba(235, 228, 211, 0.85);
  margin-bottom: 1.75rem;
}
.event-about-body p:first-child {
  font-size: 1.5rem;
  color: var(--pergament);
}
.event-about-body strong {
  color: var(--altgold);
  font-weight: 500;
  font-style: normal;
}

.event-ritual {
  padding: 6rem var(--gutter);
  background: var(--waldschwarz);
}
.event-ritual-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.event-ritual-header {
  margin-bottom: 4rem;
  max-width: 60ch;
}
.ritual-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(168, 131, 58, 0.25);
  border-left: 1px solid rgba(168, 131, 58, 0.25);
}
.ritual-step {
  padding: 2.5rem 1.75rem;
  border-right: 1px solid rgba(168, 131, 58, 0.25);
  border-bottom: 1px solid rgba(168, 131, 58, 0.25);
  min-height: 200px;
}
.ritual-step-num {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--altgold);
  margin-bottom: 1.5rem;
  display: block;
}
.ritual-step-time {
  font-family: var(--mono); font-weight: 400;
  font-size: 1.1rem;
  color: var(--pergament);
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}
.ritual-step-desc {
  font-size: var(--fs-3);
  color: rgba(235, 228, 211, 0.65);
  line-height: 1.5;
}

.event-dates {
  padding: 5rem var(--gutter);
  background: var(--pergament);
  color: var(--waldschwarz);
}
.event-dates-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.event-dates .eyebrow { color: var(--bronze); }
.event-dates .eyebrow::before { color: var(--bronze); }
.event-dates h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
.event-dates h2 span {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--bronze);
}

.event-cta {
  padding: 6rem var(--gutter);
  background: linear-gradient(180deg, var(--waldschwarz), var(--britischgrun));
  text-align: center;
}
.event-cta-inner {
  max-width: 60ch;
  margin: 0 auto;
}
.event-cta h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 1.5rem 0 1.5rem;
}
.event-cta h2 span {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
  display: block;
}
.event-cta p {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: 1.26rem;
  color: rgba(235, 228, 211, 0.75);
  margin-bottom: 2.5rem;
  line-height: 1.55;
}

.event-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
  margin-bottom: 3rem;
  cursor: pointer;
  transition: color 0.2s;
  background: none;
  border: none;
  padding: 0;
}
.event-back:hover { color: var(--altgold); }
.event-back::before { content: '←'; font-family: var(--body); }

@media (max-width: 960px) {
  .event-hero { padding: 8rem var(--gutter) 3rem; }
  .event-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .event-hero-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem; }
  .event-hero-stat-value { font-size: 1.2rem; }
  .event-hero-de { font-size: 1.4rem; margin-bottom: 1.5rem; }
  .event-hero-lede { font-size: 1.05rem; }
  .event-gallery { padding: 3rem var(--gutter); }
  .event-gallery-inner {
    grid-template-columns: 1fr;
    grid-template-rows: 260px 180px 180px;
  }
  .event-gallery-main { grid-row: 1; }
  .event-about { padding: 4rem var(--gutter); }
  .event-about-inner { grid-template-columns: 1fr; gap: 2rem; }
  .event-about-left { position: static; }
  .event-about-body p { font-size: 1.1rem; }
  .event-about-body p:first-child { font-size: 1.2rem; }
  .event-ritual { padding: 4rem var(--gutter); }
  .ritual-steps { grid-template-columns: 1fr 1fr; }
  .ritual-step { padding: 1.75rem 1.25rem; min-height: auto; }
  .event-dates { padding: 3.5rem var(--gutter); }
  .event-cta { padding: 4rem var(--gutter); }
  .event-back { margin-bottom: 2rem; }
}

@media (max-width: 560px) {
  .event-hero-stats { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem; }
  .event-hero-stat-value { font-size: 1rem; }
  .event-hero-stat .mono { font-size: var(--fs-1); letter-spacing: var(--tr-label); }
  .ritual-steps { grid-template-columns: 1fr; }
  .event-dates h2 { margin-bottom: 2rem; }
}

/* ==========================================
   PÁGINAS INDIVIDUALES DE EVENTOS
   ========================================== */

/* Hero compacto de evento */
.evento-hero {
  padding: 10rem var(--gutter) 5rem;
  background: linear-gradient(180deg, var(--waldschwarz) 0%, #0f1a15 100%);
  position: relative;
  border-bottom: 1px solid rgba(168, 131, 58, 0.2);
}
.evento-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: end;
}
.evento-hero-left .evento-num {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 1.5rem;
}
.evento-hero-left h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.evento-hero-left .evento-de {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: 1.58rem;
  color: var(--altgold);
  letter-spacing: 0.01em;
}
.evento-hero-right p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(235, 228, 211, 0.75);
  max-width: 42ch;
}

/* Galería de fotos */
.evento-gallery {
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  margin-top: -3rem;
  position: relative;
  z-index: 2;
}
.evento-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 1rem;
}
.evento-gallery-grid > div {
  background-size: cover;
  background-position: center;
  position: relative;
  filter: var(--grade-archive);
  transition: filter 0.4s;
}
.evento-gallery-grid > div:hover { filter: none; }
.evento-gallery-grid > div:nth-child(1) { grid-row: 1 / 3; }

/* Cuerpo editorial del evento */
.evento-body {
  padding: 6rem var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.evento-body-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5rem;
  align-items: start;
}
.evento-body-left {
  position: sticky;
  top: 8rem;
}
.evento-body-left h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.evento-body-left h2 span {
  font-weight: 400;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
  display: block;
}
.evento-body-right p {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  color: rgba(235, 228, 211, 0.8);
}
.evento-body-right p:first-child {
  font-family: var(--body); font-style: italic; font-weight: 400;
  font-size: 1.42rem;
  color: var(--pergament);
}
.evento-body-right p strong {
  font-weight: 500;
  color: var(--altgold);
}

/* Ritual — paso a paso mono */
.evento-ritual {
  background: var(--britischgrun);
  padding: 6rem var(--gutter);
}
.evento-ritual-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.evento-ritual h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 3rem;
}
.evento-ritual h3 span { color: var(--altgold); font-family: var(--body); font-style: italic; font-size: 1.05em; font-weight: 500; }
.ritual-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-left: 1px solid rgba(168, 131, 58, 0.25);
}
.ritual-step {
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(168, 131, 58, 0.25);
  border-top: 1px solid rgba(168, 131, 58, 0.25);
  border-bottom: 1px solid rgba(168, 131, 58, 0.25);
}
.ritual-step-num {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--altgold);
  margin-bottom: 1rem;
  display: block;
}
.ritual-step-time {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--pergament);
  margin-bottom: 0.5rem;
}
.ritual-step-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}
.ritual-step-desc {
  font-size: var(--fs-3);
  color: rgba(235, 228, 211, 0.7);
  line-height: 1.5;
}

/* Datos técnicos */
.evento-datos {
  padding: 6rem var(--gutter);
  background: var(--waldschwarz);
}
.evento-datos-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.datos-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(168, 131, 58, 0.25);
}
.datos-header h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-h3);
  text-transform: uppercase;
}
.datos-header h3 span { color: var(--altgold); font-family: var(--body); font-style: italic; font-size: 1.05em; font-weight: 500; }
.datos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.dato-item .mono {
  color: var(--altgold);
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
}
.dato-value {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.dato-sub {
  font-size: var(--fs-3);
  color: rgba(235, 228, 211, 0.55);
  line-height: 1.4;
}

/* Próximas fechas */
.evento-fechas {
  background: var(--pergament);
  color: var(--waldschwarz);
  padding: 6rem var(--gutter);
}
.evento-fechas .eyebrow { color: var(--bronze); }
.evento-fechas .eyebrow::before { color: var(--bronze); }
.evento-fechas h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin-bottom: 3rem;
}
.evento-fechas h3 span { color: var(--bronze); font-family: var(--body); font-style: italic; font-size: 1.05em; font-weight: 500; }

/* CTA final del evento */
.evento-cta {
  background: linear-gradient(180deg, var(--waldschwarz), var(--britischgrun));
  padding: 6rem var(--gutter);
  text-align: center;
}
.evento-cta h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 1rem 0 2rem;
}
.evento-cta h3 span {
  font-weight: 500; font-family: var(--body); font-style: italic; font-size: 1.05em; color: var(--altgold); display: block;
}
.evento-cta .lede {
  margin: 0 auto 2.5rem;
  font-family: var(--body);
  font-style: italic; font-weight: 400;
  font-size: 1.37rem;
}

/* Botón volver */
.back-nav {
  padding: 1.5rem 2rem 0;
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.back-link {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
  cursor: pointer;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.back-link:hover { color: var(--altgold); }

/* Responsive eventos individuales */
@media (max-width: 960px) {
  .evento-hero { padding: 8rem var(--gutter) 3rem; }
  .evento-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .evento-gallery { padding: 0 var(--gutter); margin-top: -1.5rem; }
  .evento-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 0.75rem;
  }
  .evento-gallery-grid > div:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 3; }
  .evento-body { padding: 4rem var(--gutter); }
  .evento-body-grid { grid-template-columns: 1fr; gap: 2rem; }
  .evento-body-left { position: static; }
  .evento-body-right p { font-size: 1.05rem; }
  .evento-ritual { padding: 4rem var(--gutter); }
  .ritual-steps { grid-template-columns: 1fr; border-left: none; }
  .ritual-step { border-right: 1px solid rgba(168, 131, 58, 0.25); border-left: 1px solid rgba(168, 131, 58, 0.25); }
  .evento-datos { padding: 4rem var(--gutter); }
  .datos-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .datos-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .evento-fechas { padding: 4rem var(--gutter); }
  .evento-cta { padding: 4rem var(--gutter); }
  .back-nav { padding: 1rem 1.5rem 0; }
}

/* ==========================================
   CALENDARIO VISUAL INTERACTIVO
   ========================================== */
.cal-interactive {
  background: var(--pergament);
  color: var(--waldschwarz);
  padding: 5rem var(--gutter);
  border-bottom: 1px solid rgba(13, 22, 18, 0.1);
}
.cal-interactive-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.cal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(13, 22, 18, 0.15);
}
.cal-month-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.cal-nav-btn {
  width: 44px; height: 44px;
  border: 1px solid rgba(13, 22, 18, 0.25);
  background: transparent;
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--waldschwarz);
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.cal-nav-btn:hover {
  background: var(--waldschwarz);
  color: var(--pergament);
  border-color: var(--waldschwarz);
}
.cal-nav-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.cal-nav-btn:disabled:hover {
  background: transparent;
  color: var(--waldschwarz);
  border-color: rgba(13, 22, 18, 0.25);
}
.cal-month-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  min-width: 280px;
  text-align: center;
}
.cal-month-label span {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--bronze);
  display: inline-block;
  margin-left: 0.75rem;
}
.cal-topbar-right {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bronze);
  text-align: right;
  line-height: 1.8;
}

/* Grid del calendario */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 2rem;
}
.cal-weekday {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bronze);
  text-align: center;
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid rgba(13, 22, 18, 0.15);
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--waldschwarz);
  position: relative;
  border: 1px solid rgba(13, 22, 18, 0.08);
  transition: all 0.2s;
  cursor: default;
  min-height: 60px;
}
.cal-day.empty {
  border-color: transparent;
  color: transparent;
  cursor: default;
}
.cal-day.outside-year {
  color: rgba(13, 22, 18, 0.15);
  background: transparent;
}
.cal-day.today {
  background: rgba(168, 131, 58, 0.12);
  border-color: var(--altgold);
  border-width: 2px;
}
.cal-day.has-event {
  cursor: pointer;
  background: var(--waldschwarz);
  color: var(--pergament);
  border-color: var(--waldschwarz);
}
.cal-day.has-event:hover {
  background: var(--altgold);
  border-color: var(--altgold);
  color: var(--waldschwarz);
  transform: scale(1.05);
}
.cal-day.has-event.selected {
  background: var(--altgold);
  border-color: var(--altgold);
  color: var(--waldschwarz);
}
.cal-day-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--altgold);
  margin-top: 3px;
}
.cal-day.has-event .cal-day-dot { background: var(--altgold); }
.cal-day.has-event:hover .cal-day-dot,
.cal-day.has-event.selected .cal-day-dot { background: var(--waldschwarz); }

/* Leyenda */
.cal-legend {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bronze);
  padding-top: 1rem;
  border-top: 1px solid rgba(13, 22, 18, 0.1);
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cal-legend-marker {
  width: 16px; height: 16px;
  border: 1px solid;
}
.cal-legend-marker.event {
  background: var(--waldschwarz);
  border-color: var(--waldschwarz);
}
.cal-legend-marker.today {
  background: rgba(168, 131, 58, 0.12);
  border-color: var(--altgold);
  border-width: 2px;
}
.cal-legend-marker.selected {
  background: var(--altgold);
  border-color: var(--altgold);
}

/* Responsive calendario */
@media (max-width: 960px) {
  .cal-interactive { padding: 3rem var(--gutter); }
  .cal-topbar { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .cal-month-nav { width: 100%; justify-content: space-between; gap: 1rem; }
  .cal-month-label { min-width: 0; font-size: 1.6rem; flex: 1; }
  .cal-topbar-right { text-align: left; }
  .cal-day {
    font-size: var(--fs-3);
    padding: 0.25rem;
    min-height: 42px;
  }
  .cal-weekday { font-size: var(--fs-1); padding: 0.75rem 0 0.5rem; letter-spacing: var(--tr-label); }
  .cal-day-dot { width: 4px; height: 4px; }
  .cal-legend { gap: 1.25rem; font-size: var(--fs-1); }
  .cal-grid { gap: 2px; }
}

/* ==========================================
   FEATURED EVENT (destacado en home)
   ========================================== */
.featured-event {
  background:
    linear-gradient(180deg, var(--waldschwarz) 0%, #0f1a15 100%);
  padding: 6rem var(--gutter);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(168, 131, 58, 0.15);
  border-bottom: 1px solid rgba(168, 131, 58, 0.15);
}
.featured-event::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 50%, rgba(168, 131, 58, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(29, 61, 42, 0.4) 0%, transparent 50%);
  pointer-events: none;
}
.featured-event-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.featured-event-img {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  filter: var(--grade-archive);
  position: relative;
  border: 1px solid rgba(168, 131, 58, 0.2);
}
.featured-event-img::after {
  content: 'NÄCHSTE AUSFAHRT';
  position: absolute;
  top: 1.5rem; left: 1.5rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--altgold);
  background: rgba(13, 22, 18, 0.85);
  padding: 0.5rem 0.85rem;
  backdrop-filter: blur(4px);
}
.featured-event-img::before {
  content: '31 · MAY';
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--pergament);
  background: var(--altgold);
  padding: 0.6rem 1.2rem;
  color: var(--waldschwarz);
}

.featured-event-body .eyebrow {
  margin-bottom: 1.5rem;
}
.featured-event-body .eyebrow .pulse {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--altgold);
  border-radius: 50%;
  margin-right: 0.6rem;
  animation: pulse 2s ease-in-out infinite;
}
.featured-event-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.featured-event-title span {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
  display: block;
}
.featured-event-tagline {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: 1.31rem;
  color: rgba(235, 228, 211, 0.8);
  line-height: 1.55;
  max-width: 42ch;
  margin-bottom: 2.5rem;
}
.featured-event-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(168, 131, 58, 0.25);
  border-bottom: 1px solid rgba(168, 131, 58, 0.25);
  margin-bottom: 2rem;
}
.featured-event-stat .mono {
  display: block;
  color: var(--altgold);
  margin-bottom: 0.5rem;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
}
.featured-event-stat-value {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--pergament);
  letter-spacing: 0.005em;
  line-height: 1.1;
}
.featured-event-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Mobile featured */
@media (max-width: 960px) {
  .featured-event { padding: 3.5rem var(--gutter); }
  .featured-event-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .featured-event-img { aspect-ratio: 4/3; }
  .featured-event-img::after { font-size: var(--fs-1); padding: 0.4rem 0.7rem; }
  .featured-event-img::before { font-size: 1.2rem; padding: 0.5rem 0.95rem; }
  .featured-event-tagline { font-size: 1.05rem; margin-bottom: 1.75rem; }
  .featured-event-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem 0;
    margin-bottom: 1.5rem;
  }
  .featured-event-stat-value { font-size: 1.05rem; }
  .featured-event-actions { flex-direction: column; }
  .featured-event-actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================
   ARCHIV — Historial de eventos
   ========================================== */

/* Empty state cuando aún no hay eventos pasados */
.archiv-empty {
  padding: 5rem var(--gutter) 7rem;
  background: var(--waldschwarz);
  position: relative;
  overflow: hidden;
}
.archiv-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(168, 131, 58, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(29, 61, 42, 0.4) 0%, transparent 60%);
  pointer-events: none;
}
.archiv-empty-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.archiv-empty-stamp {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--altgold);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 3rem;
  position: relative;
}
.archiv-empty-stamp::before,
.archiv-empty-stamp::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: var(--altgold);
  opacity: 0.4;
}
.archiv-empty-stamp::before { right: calc(100% + 1.5rem); }
.archiv-empty-stamp::after { left: calc(100% + 1.5rem); }

.archiv-empty-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.archiv-empty-title span {
  display: block;
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
}
.archiv-empty-quote {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: rgba(235, 228, 211, 0.75);
  max-width: 50ch;
  margin: 0 auto 3rem;
  line-height: 1.55;
}
.archiv-countdown {
  display: inline-block;
  margin: 1.5rem auto 3rem;
  padding: 2rem 3rem;
  border: 1px solid rgba(168, 131, 58, 0.3);
  background: rgba(13, 22, 18, 0.5);
  backdrop-filter: blur(4px);
}
.archiv-countdown .mono {
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--altgold);
  margin-bottom: 0.75rem;
  display: block;
}
.archiv-countdown-event {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.archiv-countdown-event .accent { color: var(--altgold); font-family: var(--body); font-style: italic; font-size: 1.05em; font-weight: 500; }
.archiv-countdown-date {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--zinn);
  text-transform: uppercase;
}
.archiv-empty-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Línea de tiempo decorativa de futuras ediciones */
.archiv-future {
  background: var(--britischgrun);
  padding: 5rem var(--gutter);
  border-top: 1px solid rgba(168, 131, 58, 0.15);
}
.archiv-future-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.archiv-future-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 3rem;
  border-left: 1px solid rgba(168, 131, 58, 0.2);
}
.archiv-future-item {
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(168, 131, 58, 0.2);
  border-top: 1px solid rgba(168, 131, 58, 0.2);
  border-bottom: 1px solid rgba(168, 131, 58, 0.2);
  position: relative;
  opacity: 0.5;
}
.archiv-future-item.active { opacity: 1; }
.archiv-future-item .mono {
  color: var(--altgold);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  margin-bottom: 1rem;
  display: block;
}
.archiv-future-item-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.archiv-future-item-status {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--zinn);
  text-transform: uppercase;
}
.archiv-future-item.active .archiv-future-item-status {
  color: var(--altgold);
}

/* Galería masonry — preparada para cuando haya fotos */
.archiv-gallery {
  padding: 5rem var(--gutter);
  background: var(--waldschwarz);
}
.archiv-gallery-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.masonry {
  column-count: 3;
  column-gap: 1rem;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #0f1a15;
}
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  filter: var(--grade-archive);
  transition: filter 0.4s, transform 0.6s;
}
.masonry-item:hover img {
  filter: none;
  transform: scale(1.03);
}
.masonry-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13, 22, 18, 0.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.masonry-item:hover .masonry-item-overlay { opacity: 1; }
.masonry-item-overlay .mono {
  color: var(--altgold);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  margin-bottom: 0.4rem;
}
.masonry-item-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--pergament);
  letter-spacing: 0.005em;
  line-height: 1.1;
}

/* Mobile archivo */
@media (max-width: 960px) {
  .archiv-empty { padding: 3rem var(--gutter) 4.5rem; }
  .archiv-empty-stamp { font-size: var(--fs-1); padding: 0.5rem 1.2rem; margin-bottom: 2rem; }
  .archiv-empty-stamp::before,
  .archiv-empty-stamp::after { width: 30px; }
  .archiv-empty-quote { margin-bottom: 2rem; }
  .archiv-countdown { padding: 1.5rem 1.75rem; margin: 1rem auto 2rem; }
  .archiv-countdown-event { font-size: 1.15rem; }
  .archiv-empty-actions { flex-direction: column; }
  .archiv-empty-actions .btn { width: 100%; justify-content: center; text-align: center; }

  .archiv-future { padding: 3rem var(--gutter); }
  .archiv-future-grid { grid-template-columns: 1fr 1fr; border-left: none; }
  .archiv-future-item { border-left: 1px solid rgba(168, 131, 58, 0.2); padding: 1.5rem 1rem; }

  .archiv-gallery { padding: 3rem var(--gutter); }
  .masonry { column-count: 2; column-gap: 0.6rem; }
  .masonry-item { margin-bottom: 0.6rem; }
  .masonry-item-overlay { opacity: 1; padding: 1rem; }
  .masonry-item-title { font-size: var(--fs-3); }
}
@media (max-width: 480px) {
  .masonry { column-count: 1; }
}

/* ==========================================
   ANIMATIONS PREMIUM - MeinKlasse
   ========================================== */

/* === Ken Burns DESACTIVADO - se mantiene el video del hero === */

/* === Grano cinematográfico sobre toda la imagen === */
.landing-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === Cursor mágico DESACTIVADO para estética cinematográfica === */
.cursor-dot, .cursor-ring { display: none !important; }

/* === Reveal on scroll === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* Variantes con delay para stagger */
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
.reveal[data-delay="500"] { transition-delay: 500ms; }
.reveal[data-delay="600"] { transition-delay: 600ms; }

/* Variantes de dirección */
.reveal-left { transform: translateX(-50px); }
.reveal-left.in { transform: translateX(0); }
.reveal-right { transform: translateX(50px); }
.reveal-right.in { transform: translateX(0); }
.reveal-scale { transform: scale(0.95); }
.reveal-scale.in { transform: scale(1); }

/* === Título con animación letra por letra === */
.landing-title {
  opacity: 1;
}
.title-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.title-letter.in {
  opacity: 1;
  transform: translateY(0);
}

/* === Botones magnéticos con efecto fill === */
.btn-magnetic {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-magnetic::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background: var(--altgold);
  transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-magnetic:hover::before {
  height: 100%;
}
.btn-gold.btn-magnetic::before { background: var(--pergament); }
.btn-gold.btn-magnetic:hover { color: var(--waldschwarz); }
.btn-ghost.btn-magnetic::before { background: var(--pergament); }
.btn-ghost.btn-magnetic:hover { color: var(--waldschwarz); border-color: var(--pergament); }

/* === Línea decorativa que se dibuja === */
.draw-line {
  position: relative;
  display: inline-block;
}
.draw-line::after {
  content: '';
  position: absolute;
  left: 0; bottom: -8px;
  width: 0;
  height: 1px;
  background: var(--altgold);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.draw-line.in::after { width: 100%; }

/* === Counter animation === */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* === Card hover premium === */
.event-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s,
              box-shadow 0.4s;
  will-change: transform;
}
.event-card:hover {
  transform: translateY(-8px);
  border-color: var(--altgold) !important;
  box-shadow: 0 20px 60px -20px rgba(168, 131, 58, 0.25);
}
.event-card .arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.event-card:hover .arrow {
  transform: translateX(8px);
  color: var(--altgold);
}

/* === Featured event hover === */
.featured-event-img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.featured-event:hover .featured-event-img {
  transform: scale(1.03);
}

/* === Page transition === */
.page {
  animation: pageEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Marquee con efecto fade en bordes === */
.marquee-strip {
  position: relative;
}
.marquee-strip::before,
.marquee-strip::after {
  content: '';
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.marquee-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--britischgrun) 0%, transparent 100%);
}
.marquee-strip::after {
  right: 0;
  background: linear-gradient(-90deg, var(--britischgrun) 0%, transparent 100%);
}

/* === Parallax containers === */
.parallax {
  will-change: transform;
}

/* === Pulse animation enhanced === */
@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.4; }
}
.pulse {
  animation: pulseRing 2s ease-in-out infinite;
}

/* === Image reveal === */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--waldschwarz);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 1.4s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;
}
.img-reveal.in::after {
  transform: scaleX(0);
}
.img-reveal img,
.img-reveal > div {
  transform: scale(1.1);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.img-reveal.in img,
.img-reveal.in > div {
  transform: scale(1);
}

/* === Scroll progress bar === */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--altgold);
  z-index: 999;
  width: 0%;
  transition: width 0.1s linear;
}

/* === Smooth scroll === */
html {
  scroll-behavior: smooth;
}

/* === Hover en links === */
.nav-menu a {
  position: relative;
  transition: color 0.3s;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--altgold);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-menu a:hover::after {
  width: 100%;
  left: 0;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .landing-image { animation: none; }
  .reveal, .title-letter, .draw-line::after, .img-reveal::after, .img-reveal img, .img-reveal > div {
    transition: none;
    opacity: 1;
    transform: none;
    width: 100%;
  }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ==========================================
   PORSCHE-STYLE CINEMATIC REWORK
   Home + Página Ritual-001
   ========================================== */

/* === Hero refinado === */
.hero-cinematic {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--waldschwarz);
}
.hero-cinematic-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: var(--grade-cinematic);
  animation: heroKenBurns 50s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  0% { transform: scale(1.0); }
  100% { transform: scale(1.08); }
}
.hero-cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,22,18,0.78) 0%, rgba(13,22,18,0.42) 18%, transparent 38%, rgba(13,22,18,0.34) 58%, rgba(13,22,18,0.9) 100%),
    linear-gradient(90deg, rgba(13,22,18,0.5) 0%, transparent 50%);
  z-index: 1;
}
.hero-cinematic-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-cinematic-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem 4rem 5rem;
  max-width: var(--container);
  margin: 0 auto;
}
.hero-cinematic-meta {
  position: absolute;
  top: 7rem;
  left: 4rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: rgba(219, 216, 205, 0.92);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 280px;
  line-height: 1.4;
}
.hero-cinematic-meta .accent { color: var(--altgold); }
.hero-cinematic-meta-divider {
  width: 32px;
  height: 1px;
  background: var(--altgold);
  margin: 0.4rem 0;
  opacity: 0.5;
}
.hero-cinematic-eyebrow {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 2rem;
}
.hero-cinematic-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--pergament);
  margin-bottom: 2rem;
  max-width: 14ch;
}
.hero-cinematic-title .ital {
  display: block;
  font-weight: 500;
  font-family: var(--body); font-style: italic;
  font-size: 0.44em;
  color: var(--altgold);
  margin-top: 0.6em;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: none;
}
.hero-cinematic-tag {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: rgba(235, 228, 211, 0.75);
  max-width: 50ch;
  line-height: 1.4;
  margin-bottom: 3rem;
}
.hero-cinematic-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hero-cinematic-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0.7;
}
.hero-cinematic-scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, var(--altgold), transparent);
  animation: scrollLine 2.5s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.3; transform: scaleY(0.5); }
}

/* === Capítulo full-bleed (estilo Porsche) === */
.chapter {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--waldschwarz);
  overflow: hidden;
  padding: 8rem var(--gutter);
}
.chapter-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: var(--grade-cinematic);
  z-index: 0;
}
.chapter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,22,18,0.7) 0%, rgba(13,22,18,0.4) 50%, rgba(13,22,18,0.85) 100%);
  z-index: 1;
}
.chapter-content {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
.chapter-num {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 2rem;
  display: block;
}
.chapter-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--pergament);
  margin-bottom: 2rem;
  max-width: 20ch;
}
.chapter-title .ital {
  display: block;
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
}
.chapter-text {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  color: rgba(235, 228, 211, 0.85);
  line-height: 1.5;
  max-width: 50ch;
  margin-bottom: 3rem;
}

/* === Galería editorial estilo Porsche === */
.editorial-gallery {
  background: var(--waldschwarz);
  padding: 10rem 0;
  position: relative;
}
.editorial-gallery-header {
  max-width: var(--container);
  margin: 0 auto 6rem;
  padding: 0 var(--gutter);
  text-align: center;
}
.editorial-gallery-header .mono {
  color: var(--altgold);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  display: block;
  margin-bottom: 1.5rem;
}
.editorial-gallery-header h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--pergament);
}
.editorial-gallery-header h2 .ital {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
}
.editorial-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.gal-item {
  overflow: hidden;
  position: relative;
  background: #0a1310;
  cursor: pointer;
}
.gal-item-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: var(--grade-archive);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s;
  will-change: transform;
}
.gal-item:hover .gal-item-img {
  transform: scale(1.05);
  filter: none;
}
.gal-item-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--pergament);
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}
.gal-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13,22,18,0.85) 100%);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 1;
}
.gal-item:hover::after { opacity: 1; }
.gal-item:hover .gal-item-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Layouts asimétricos del grid */
.gal-feature { grid-column: span 8; aspect-ratio: 16/9; }
.gal-tall { grid-column: span 4; grid-row: span 2; aspect-ratio: 3/4; }
.gal-wide { grid-column: span 8; aspect-ratio: 16/9; }
.gal-square { grid-column: span 4; aspect-ratio: 4/5; }
.gal-half { grid-column: span 6; aspect-ratio: 16/10; }
.gal-third { grid-column: span 4; aspect-ratio: 4/3; }

@media (max-width: 960px) {
  .editorial-gallery { padding: 5rem 0; }
  .editorial-gallery-grid { gap: 0.5rem; padding: 0 1rem; }
  .gal-feature, .gal-wide, .gal-half { grid-column: span 12; aspect-ratio: 16/10; }
  .gal-tall { grid-column: span 12; aspect-ratio: 4/5; grid-row: span 1; }
  .gal-square, .gal-third { grid-column: span 6; }
  .gal-item-caption { opacity: 1; transform: none; font-size: var(--fs-1); }
}

/* === Page-transition cinematográfica === */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--waldschwarz);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.page-transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* === Fix mobile hero === */
@media (max-width: 960px) {
  .hero-cinematic-content {
    padding: 5rem var(--gutter) 4rem;
  }
  .hero-cinematic-meta {
    top: 5rem;
    left: 1.5rem;
    font-size: var(--fs-1);
    letter-spacing: var(--tr-label);
  }
  .hero-cinematic-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .hero-cinematic-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero-cinematic-scroll { display: none; }

  .chapter {
    min-height: auto;
    padding: 5rem var(--gutter);
  }
}

/* ==========================================
   FOLGEN — Página de redes sociales
   ========================================== */
.folgen-section {
  background: var(--waldschwarz);
  padding: 5rem var(--gutter) 8rem;
  position: relative;
}

/* Instagram principal — card destacada */
.folgen-feature {
  max-width: 1200px;
  margin: 0 auto 5rem;
  position: relative;
}
.folgen-feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(168, 131, 58, 0.2);
  background: linear-gradient(135deg, rgba(29, 61, 42, 0.4) 0%, rgba(13, 22, 18, 0.8) 100%);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
  text-decoration: none;
  color: inherit;
}
.folgen-feature-card:hover {
  border-color: var(--altgold);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(168, 131, 58, 0.3);
}
.folgen-feature-img {
  background: var(--britischgrun);
  background-image: url('/img/archiv/ritual-001/full/155.jpg');
  background-size: cover;
  background-position: center;
  filter: var(--grade-archive);
  min-height: 360px;
  position: relative;
  transition: filter 0.6s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.folgen-feature-card:hover .folgen-feature-img {
  filter: none;
  transform: scale(1.05);
}
.folgen-feature-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(13,22,18,0.7) 100%);
}
.folgen-feature-icon {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: var(--waldschwarz);
  border: 1px solid var(--altgold);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.3s;
}
.folgen-feature-card:hover .folgen-feature-icon {
  background: var(--altgold);
}
.folgen-feature-icon svg {
  width: 26px;
  height: 26px;
  color: var(--altgold);
  transition: color 0.3s;
}
.folgen-feature-card:hover .folgen-feature-icon svg {
  color: var(--waldschwarz);
}
.folgen-feature-body {
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.folgen-feature-meta {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 1.5rem;
}
.folgen-feature-handle {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: 0.005em;
  color: var(--pergament);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.folgen-feature-name {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: 1.26rem;
  color: rgba(235, 228, 211, 0.75);
  margin-bottom: 2rem;
}
.folgen-feature-desc {
  font-family: var(--display);
  font-weight: 300;
  color: rgba(235, 228, 211, 0.65);
  line-height: 1.55;
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 38ch;
}
.folgen-feature-arrow {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: gap 0.3s;
}
.folgen-feature-card:hover .folgen-feature-arrow {
  gap: 1.2rem;
}

/* Sección fundadores */
.folgen-founders-header {
  max-width: 1200px;
  margin: 0 auto 3rem;
  text-align: center;
}
.folgen-founders-header .mono {
  display: block;
  color: var(--altgold);
  margin-bottom: 1.5rem;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
}
.folgen-founders-header h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--pergament);
}
.folgen-founders-header h2 .ital {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
}
.folgen-founders-header p {
  max-width: 50ch;
  margin: 1.5rem auto 0;
  color: rgba(235, 228, 211, 0.7);
  font-family: var(--body);
  font-style: italic; font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.55;
}

.folgen-founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.folgen-founder-card {
  border: 1px solid rgba(168, 131, 58, 0.2);
  background: rgba(29, 61, 42, 0.15);
  padding: 2.5rem var(--gutter);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: border-color 0.4s, background 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
  cursor: pointer;
  position: relative;
}
.folgen-founder-card:hover {
  border-color: var(--altgold);
  background: rgba(29, 61, 42, 0.3);
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -20px rgba(168, 131, 58, 0.25);
}

.folgen-founder-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(168, 131, 58, 0.15);
}
.folgen-founder-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--altgold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.folgen-founder-card:hover .folgen-founder-icon {
  background: var(--altgold);
}
.folgen-founder-icon svg {
  width: 14px;
  height: 14px;
  color: var(--altgold);
  transition: color 0.3s;
}
.folgen-founder-card:hover .folgen-founder-icon svg {
  color: var(--waldschwarz);
}
.folgen-founder-num {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
}

.folgen-founder-handle {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.005em;
  color: var(--pergament);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.folgen-founder-role {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
}
.folgen-founder-link {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s;
}
.folgen-founder-card:hover .folgen-founder-link {
  gap: 1rem;
}

/* Sección outro */
.folgen-outro {
  max-width: 800px;
  margin: 6rem auto 0;
  text-align: center;
  padding-top: 4rem;
  border-top: 1px solid rgba(168, 131, 58, 0.15);
}
.folgen-outro p {
  font-family: var(--body);
  font-style: italic; font-weight: 400;
  font-size: 1.16rem;
  color: rgba(235, 228, 211, 0.6);
  line-height: 1.55;
  max-width: 45ch;
  margin: 0 auto;
}
.folgen-outro .mono {
  display: block;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--altgold);
  margin-bottom: 1.5rem;
}

/* Mobile */
@media (max-width: 960px) {
  .folgen-section { padding: 3rem var(--gutter) 5rem; }
  .folgen-feature-card { grid-template-columns: 1fr; }
  .folgen-feature-img { min-height: 240px; }
  .folgen-feature-body { padding: 2.5rem var(--gutter); }
  .folgen-founders-grid { grid-template-columns: 1fr; gap: 1rem; }
  .folgen-founder-card { padding: 2rem var(--gutter); }
  .folgen-outro { margin-top: 4rem; padding-top: 3rem; }
}

/* ==========================================
   FORMULARIO INSCRIPCIÓN — Ritual 001
   ========================================== */
.inscripcion-section {
  background: var(--pergament);
  color: var(--waldschwarz);
  padding: 8rem var(--gutter);
  position: relative;
}
.inscripcion-inner {
  max-width: 900px;
  margin: 0 auto;
}
.inscripcion-header {
  text-align: center;
  margin-bottom: 4rem;
}
.inscripcion-header .mono {
  display: block;
  color: var(--bronze);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  margin-bottom: 1.5rem;
}
.inscripcion-header h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--waldschwarz);
  margin-bottom: 1rem;
}
.inscripcion-header h2 .ital {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--bronze);
}
.inscripcion-header p {
  font-family: var(--body);
  font-style: italic; font-weight: 400;
  font-size: 1.21rem;
  color: var(--bronze);
  max-width: 50ch;
  margin: 1rem auto 0;
  line-height: 1.5;
}

/* Opciones: WhatsApp vs Form */
.inscripcion-channels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 4rem;
}
.inscripcion-channel-wa {
  text-align: right;
  padding: 2rem 0;
}
.inscripcion-channel-form {
  text-align: left;
  padding: 2rem 0;
}
.inscripcion-divider {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--bronze);
  border-left: 1px solid rgba(92, 58, 31, 0.25);
  border-right: 1px solid rgba(92, 58, 31, 0.25);
  padding: 0 2.5rem;
  height: 80px;
  display: flex;
  align-items: center;
}
.inscripcion-channel-label {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1rem;
}
.inscripcion-channel-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--waldschwarz);
  margin-bottom: 1rem;
  line-height: 1;
}
.inscripcion-channel-desc {
  font-size: var(--fs-3);
  color: var(--bronze);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  max-width: 30ch;
}
.inscripcion-channel-wa .inscripcion-channel-desc { margin-left: auto; }

/* Botón verde whatsapp adaptado para fondo claro */
.btn-wa-light {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  background: var(--pergament);
  color: var(--waldschwarz);
  border: 1px solid var(--pergament);
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.btn-wa-light:hover {
  background: var(--waldschwarz);
  color: var(--pergament);
  border-color: var(--waldschwarz);
  transform: translateY(-2px);
}
.btn-wa-light svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

.btn-form-light {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  background: var(--waldschwarz);
  color: var(--pergament);
  border: 1px solid var(--waldschwarz);
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.btn-form-light:hover {
  background: var(--altgold);
  border-color: var(--altgold);
  color: var(--waldschwarz);
  transform: translateY(-2px);
}

/* Formulario embebido */
.inscripcion-form {
  background: var(--waldschwarz);
  color: var(--pergament);
  padding: 4rem 3rem;
  border-top: 2px solid var(--altgold);
  max-width: 800px;
  margin: 0 auto;
  display: none;
}
.inscripcion-form.active {
  display: block;
  animation: formSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes formSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.inscripcion-form-header {
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(168, 131, 58, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.inscripcion-form-title {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
}
.inscripcion-form-close {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: var(--zinn);
  cursor: pointer;
  transition: color 0.3s;
}
.inscripcion-form-close:hover { color: var(--altgold); }

.insc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.insc-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}
.insc-field label {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 0.6rem;
}
.insc-field input,
.insc-field select,
.insc-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(168, 131, 58, 0.3);
  padding: 0.6rem 0;
  color: var(--pergament);
  font-family: var(--body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s;
}
.insc-field input:focus,
.insc-field select:focus,
.insc-field textarea:focus {
  border-color: var(--altgold);
}
.insc-field input::placeholder,
.insc-field textarea::placeholder {
  color: rgba(184, 181, 168, 0.4);
  font-style: italic;
}
.insc-field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--body);
}
.insc-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A8833A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  cursor: pointer;
}
.insc-field select option {
  background: var(--waldschwarz);
  color: var(--pergament);
}

.insc-info {
  font-size: var(--fs-2);
  color: rgba(184, 181, 168, 0.55);
  font-family: var(--body); font-style: italic; font-weight: 400;
  margin-top: 0.4rem;
}

.insc-submit {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.insc-disclaimer {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  color: rgba(184, 181, 168, 0.5);
  text-transform: uppercase;
  max-width: 40ch;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 720px) {
  .inscripcion-section { padding: 4rem 1.25rem; }
  .inscripcion-channels {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .inscripcion-channel-wa,
  .inscripcion-channel-form { text-align: center; padding: 1rem 0; }
  .inscripcion-channel-wa .inscripcion-channel-desc,
  .inscripcion-channel-form .inscripcion-channel-desc { margin: 0 auto 1.5rem; }
  .inscripcion-divider {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(92, 58, 31, 0.25);
    border-bottom: 1px solid rgba(92, 58, 31, 0.25);
    padding: 0.8rem 0;
    height: auto;
    justify-content: center;
  }
  .inscripcion-form { padding: 2.5rem var(--gutter); }
  .insc-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================
   GALERÍA RITUAL 001 — Fotos del evento finalizado
   ========================================== */
.gallery-r001 {
  background: var(--waldschwarz);
  padding: 5rem var(--gutter) 7rem;
}
.gallery-r001-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.gallery-r001-header {
  text-align: center;
  margin-bottom: 4rem;
}
.gallery-r001-header .mono {
  display: block;
  color: var(--altgold);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  margin-bottom: 1.5rem;
}
.gallery-r001-header h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--pergament);
}
.gallery-r001-header h2 .ital {
  font-weight: 500;
  font-family: var(--body); font-style: italic; font-size: 1.05em;
  color: var(--altgold);
}
.gallery-r001-header p {
  font-family: var(--body);
  font-style: italic; font-weight: 400;
  font-size: 1.1rem;
  color: rgba(235, 228, 211, 0.7);
  max-width: 50ch;
  margin: 1.5rem auto 0;
  line-height: 1.5;
}

/* Masonry de fotos */
.gallery-r001-grid {
  column-count: 4;
  column-gap: 0.75rem;
}
.gallery-r001-item {
  break-inside: avoid;
  margin-bottom: 0.75rem;
  position: relative;
  overflow: hidden;
  background: #0a1310;
  display: block;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-r001-item img {
  width: 100%;
  height: auto;
  display: block;
  filter: var(--grade-archive);
  transition: filter 0.6s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(135deg, #1a2620 0%, #0d1612 100%);
  min-height: 200px;
}
.gallery-r001-item:hover img {
  filter: none;
  transform: scale(1.04);
}
.gallery-r001-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.3s;
  pointer-events: none;
}
.gallery-r001-item:hover::after {
  border-color: var(--altgold);
}

/* Botón cargar más */
.gallery-r001-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.gallery-r001-count {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--zinn);
}
.gallery-r001-count .accent { color: var(--altgold); }
.btn-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.5rem;
  background: transparent;
  border: 1px solid var(--altgold);
  color: var(--altgold);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-2);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.btn-loadmore:hover {
  background: var(--altgold);
  color: var(--waldschwarz);
  transform: translateY(-2px);
}
.btn-loadmore.hidden { display: none; }

.gallery-r001-drive {
  margin-top: 1rem;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: rgba(235, 228, 211, 0.4);
  text-decoration: none;
  transition: color 0.3s;
}
.gallery-r001-drive:hover { color: var(--altgold); }

/* ==========================================
   CINTILLO "EDICIÓN FINALIZADA"
   ========================================== */
.finalizado-banner {
  background: var(--waldschwarz);
  border-top: 1px solid var(--altgold);
  border-bottom: 1px solid var(--altgold);
  padding: 2rem var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.finalizado-banner::before,
.finalizado-banner::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 1px;
  background: var(--altgold);
}
.finalizado-banner::before { left: max(2rem, calc(50% - 280px)); }
.finalizado-banner::after { right: max(2rem, calc(50% - 280px)); }
.finalizado-banner-title {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  margin-bottom: 0.5rem;
}
.finalizado-banner-sub {
  font-family: var(--body);
  font-style: italic; font-weight: 400;
  font-size: 1.05rem;
  color: rgba(235, 228, 211, 0.65);
}

/* Mobile */
@media (max-width: 1200px) {
  .gallery-r001-grid { column-count: 3; }
}
@media (max-width: 768px) {
  .gallery-r001 { padding: 3rem 1.25rem 4rem; }
  .gallery-r001-grid { column-count: 2; column-gap: 0.4rem; }
  .gallery-r001-item { margin-bottom: 0.4rem; }
  .finalizado-banner { padding: 1.25rem 1rem; }
  .finalizado-banner::before,
  .finalizado-banner::after { display: none; }
  .finalizado-banner-title { font-size: var(--fs-1); letter-spacing: var(--tr-label); }
  .finalizado-banner-sub { font-size: var(--fs-3); }
}

/* ==========================================
   LIGHTBOX — Visor de fotos en alta resolución
   ========================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(13, 22, 18, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lightbox-img-wrap {
  position: relative;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox.active .lightbox-img-wrap {
  animation: lightboxIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lightboxIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.lightbox-img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(168, 131, 58, 0.2);
}

/* Loader mientras carga la imagen en alta */
.lightbox-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  z-index: 1;
  pointer-events: none;
}
.lightbox-loader-spinner {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(168, 131, 58, 0.2);
  border-top-color: var(--altgold);
  border-radius: 50%;
  animation: lightboxSpin 0.9s linear infinite;
}
@keyframes lightboxSpin {
  to { transform: rotate(360deg); }
}
.lightbox-loader-text {
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
}
.lightbox-img-wrap.loaded .lightbox-loader { display: none; }

/* Controles del lightbox */
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid rgba(168, 131, 58, 0.4);
  color: var(--altgold);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
  z-index: 10;
}
.lightbox-close:hover {
  background: var(--altgold);
  color: var(--waldschwarz);
  transform: rotate(90deg);
}
.lightbox-close::before {
  content: '×';
  font-size: 1.8rem;
  font-family: var(--display);
  line-height: 1;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: transparent;
  border: 1px solid rgba(168, 131, 58, 0.4);
  color: var(--altgold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.5rem;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  z-index: 10;
}
.lightbox-nav:hover {
  background: var(--altgold);
  color: var(--waldschwarz);
}
.lightbox-nav.prev { left: 1.5rem; }
.lightbox-nav.next { right: 1.5rem; }
.lightbox-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Contador y meta */
.lightbox-meta {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono); font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--altgold);
  z-index: 10;
  background: rgba(13, 22, 18, 0.5);
  padding: 0.6rem 1.5rem;
  border: 1px solid rgba(168, 131, 58, 0.2);
}
.lightbox-meta .zinn { color: var(--zinn); }

/* Mobile */
@media (max-width: 768px) {
  .lightbox-close {
    top: 1rem; right: 1rem;
    width: 40px; height: 40px;
  }
  .lightbox-nav {
    width: 44px; height: 44px;
  }
  .lightbox-nav.prev { left: 0.75rem; }
  .lightbox-nav.next { right: 0.75rem; }
  .lightbox-meta {
    bottom: 1rem;
    font-size: var(--fs-1);
    letter-spacing: var(--tr-label);
    padding: 0.5rem 1rem;
  }
  .lightbox-img {
    max-height: 75vh;
  }
}

/* Cuando el lightbox está activo, bloquear scroll del body */
body.lightbox-open {
  overflow: hidden;
}

/* ==========================================
   FEATURED EVENT — Slideshow Ken Burns
   ========================================== */
.featured-event-slideshow {
  position: relative;
  overflow: hidden;
}
.featured-event-slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity, transform;
}
.featured-event-slideshow .slide.active {
  opacity: 1;
  animation: featuredKenBurns 8s ease-out forwards;
  z-index: 1;
}
@keyframes featuredKenBurns {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.08);
  }
}
/* La imagen background del featured-event-img queda como fallback si JS falla */
.featured-event-slideshow.has-slides > .featured-event-img-fallback {
  display: none;
}

/* ==========================================================================
   Complementos (orquestador): contratos JS ↔ CSS que faltaban
   ========================================================================== */
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:not(.js) .reveal, html:not(.js) .img-reveal { opacity: 1 !important; transform: none !important; }

/* Lightbox: el JS usa [hidden] + .open (el original usaba .active) */
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox.open .lightbox-img-wrap { animation: lightboxIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.lightbox-img-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
#lightbox-img { display: block; max-width: 90vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border: 1px solid rgba(168, 131, 58, 0.25); background: #0a1310; }
.lightbox-caption { font-family: var(--mono); font-size: var(--fs-1); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--zinn); text-align: center; }
.lightbox-nav:disabled { opacity: 1; cursor: pointer; }
body.lightbox-open { overflow: hidden; }

/* Galería generada por JS: botones con <img> directa */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.gallery-grid.gallery-sample { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } .gallery-grid.gallery-sample { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gallery-grid, .gallery-grid.gallery-sample { grid-template-columns: repeat(2, 1fr); } }
button.gal-item { display: block; width: 100%; padding: 0; border: 0; background: #0a1310; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; color: inherit; font: inherit; }
button.gal-item > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--grade-archive); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s; }
button.gal-item:hover > img, button.gal-item:focus-visible > img { transform: scale(1.04); filter: saturate(1) contrast(1.05); }
button.gal-item:focus-visible { outline: 2px solid var(--altgold); outline-offset: 2px; }
.gal-more { display: block; margin: var(--s-5) auto 0; }

/* Calendario: días sin encuentro (button disabled) */
.cal-day[disabled] { cursor: default; opacity: 0.55; }
.cal-day[disabled]:hover { border-color: transparent; }
#cal-clear, .cal-clear { margin-left: var(--s-3); }
#cal-filter-info { min-height: 1.4em; }

/* Ficha destacada: imagen real en lugar de background */
.featured-event-img > img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.featured-event--pasado .pulse { display: none; }

/* Tira de formatos (portada) */
.formatos-strip { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line-gold); border: 1px solid var(--line-gold); }
.formatos-strip li { background: var(--waldschwarz); }
.formatos-strip a { display: flex; flex-direction: column; gap: var(--s-2); min-height: 100%; padding: var(--s-4) var(--s-3); color: var(--pergament); text-decoration: none; transition: background 0.3s; }
.formatos-strip a:hover, .formatos-strip a:focus-visible { background: var(--britischgrun); }
.formatos-strip .mono { font-size: var(--fs-1); color: var(--altgold-bright); letter-spacing: var(--tr-label); }
.formatos-strip b { font-family: var(--display); font-weight: 500; font-size: var(--fs-5); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
.formatos-strip i { font-family: var(--body); font-style: italic; font-size: var(--fs-3); color: var(--zinn); }
@media (max-width: 1200px) { .formatos-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .formatos-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .formatos-strip { grid-template-columns: 1fr; } }

/* Varios */
.lede-ital { font-family: var(--body); font-style: italic; font-weight: 500; }
.contact-info-wa .btn-whatsapp { margin-top: var(--s-2); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.back-nav { margin: 0 0 var(--s-4); }
.sponsors-outro .eyebrow { display: inline-flex; }

/* Cursiva verdadera para cualquier <em>/<i>/.ital: Barlow Condensed Italic, nunca Oswald sintetizada */
em, i, .ital, .italic, .accent.ital { font-family: var(--body); font-style: italic; }
.hero-cinematic-tag em { font-weight: 500; }
/* Back-link dentro del hero cinematográfico */
.hero-back { position: absolute; top: calc(var(--nav-h, 82px) + var(--s-3)); right: var(--gutter); z-index: 4; margin: 0; }
/* Objetivos táctiles mínimos de 24px en enlaces de texto del pie y la agenda */
.footer-col li a { display: inline-block; padding: 3px 0; }
.agenda-title { display: inline-block; padding: 2px 0; }

/* ==========================================================================
   Hero en móvil: reparto vertical, ticker en una línea y CTA de evento
   ========================================================================== */

/* CTA principal del hero: etiqueta + fecha/título. Una línea en escritorio. */
.btn-evento { gap: 0.45em; }
.btn-evento-label::after { content: '·'; margin-left: 0.45em; }
.btn-evento.btn-arrow::after { margin-left: 0.35em; }

@media (max-width: 960px) {
  /* El ticker pasa a una sola línea: se oculta la leyenda del medio */
  .landing { padding-top: calc(var(--nav-h) + 3rem); }
  .landing-topstrip { grid-template-columns: 1fr auto; gap: var(--s-3); }
  .landing-topstrip > *:last-child { text-align: right; }
  .topstrip-mid { display: none; }
}

@media (max-width: 560px) {
  /* Ticker y kicker en una sola línea cada uno */
  .landing-topstrip > * { white-space: nowrap; }
  .topstrip-tail { display: none; }
  .landing-kicker {
    font-size: var(--fs-2);
    letter-spacing: 0.1em;
    gap: 0.45rem;
    align-items: flex-start;
    flex-wrap: nowrap;
    white-space: normal;
  }
  .landing-kicker::before { width: 14px; flex-shrink: 0; }
  .kicker-tail { display: none; }

  /* CTA de evento en dos líneas, con la flecha fija a la derecha */
  .landing-actions .btn-evento {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 0.25rem;
    padding: 0.85rem 3rem 0.85rem 1.2rem;
    position: relative;
  }
  .btn-evento-label { font-size: var(--fs-1); letter-spacing: var(--tr-label); opacity: 0.75; }
  .btn-evento-label::after { content: none; }
  .btn-evento-main { font-size: var(--fs-3); letter-spacing: 0.1em; line-height: 1.2; }
  .landing-actions .btn-evento.btn-arrow::after {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  /* El botón de pausa vive en la franja libre bajo la barra de datos */
  .video-controls { bottom: 0.4rem; right: var(--gutter); min-height: 32px; padding: 0.3rem 0.7rem; }
}

/* Rótulos de dos líneas: el guion y el punto se alinean con la primera línea */
.eyebrow { align-items: flex-start; }
.eyebrow .pulse { margin-top: calc((1.55em - 8px) / 2); }

/* El botón de pausa de la marquesina no deja ver el texto por detrás */
.marquee-pause { background: var(--waldschwarz); }

/* Enlaces de volver: área táctil de 24px como mínimo */
.back-link { display: inline-block; padding: 0.45rem 0; }

/* Los campos de inscripción anulaban el contorno: se devuelve el foco visible */
.insc-field input:focus-visible,
.insc-field select:focus-visible,
.insc-field textarea:focus-visible {
  outline: 2px solid var(--altgold);
  outline-offset: 3px;
  border-color: var(--altgold);
}

/* Enlaces dentro del bloque "Próxima edición": área táctil cómoda en móvil */
.formato-proxima a { display: inline-block; padding: 0.3rem 0; }

/* Pantallas muy angostas (360 px): el kicker del hero entra en una línea */
@media (max-width: 400px) {
  .landing-kicker { font-size: var(--fs-1); letter-spacing: 0.08em; }
}

/* Línea de tiempo del recorrido (ediciones): tres tramos en escritorio, apilada en móvil */
.ruta-timeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}
@media (max-width: 640px) {
  .ruta-timeline { grid-template-columns: 1fr; gap: 1.5rem; }
  .ruta-timeline > div { text-align: left !important; }
  .ruta-timeline > div[style*="linear-gradient"] { display: none; }
}

/* Hero de edición en móvil: el enlace de volver no se monta sobre la ficha */
@media (max-width: 560px) {
  .hero-back { top: calc(var(--nav-h) + 0.25rem); right: auto; left: var(--gutter); }
  .hero-cinematic-meta { top: calc(var(--nav-h) + 4.25rem); left: var(--gutter); }
}

/* Encabezado del calendario en móvil: flechas y mes en una sola fila */
@media (max-width: 960px) {
  .calendar-header.cal-topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
  }
  .calendar-header.cal-topbar #cal-prev { grid-column: 1; justify-self: start; }
  .calendar-header.cal-topbar .cal-month { grid-column: 2; margin: 0; text-align: center; font-size: clamp(1.05rem, 5.4vw, 1.6rem); line-height: 1.15; }
  .calendar-header.cal-topbar #cal-next { grid-column: 3; justify-self: end; }
  .calendar-header.cal-topbar #cal-filter-info,
  .calendar-header.cal-topbar #cal-clear { grid-column: 1 / -1; justify-self: center; }
}

/* ==========================================================================
   Controles de movimiento (pausar video y marquesina)
   No se muestran: el diseño manda. Siguen en el DOM y aparecen solo cuando
   se llega con el teclado, que es lo que exige poder frenar el movimiento.
   ========================================================================== */
.video-controls:not(:focus-visible),
.marquee-pause:not(:focus-visible) {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border-width: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}