@charset "UTF-8";
:root {
  --bg: #050505;
  --bg-raised: #0c0c0d;
  --panel: rgba(18, 18, 20, 0.72);
  --panel-strong: rgba(24, 24, 27, 0.92);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f7f7f8;
  --muted: #a7a7ad;
  --soft: #d4d4d8;
  --red: #d7172f;
  --red-dark: #8d101e;
  /* Rojo apagado para rótulos pequeños sobre fondo oscuro: el rojo de marca a 0,72rem
     y con mucho espaciado vibra y cuesta leerlo. Se usaba sin estar definida, así que
     las etiquetas del buscador salían del color que hubiera heredado. */
  --red-soft: #e8677a;
  --green: #43d17a;
  --amber: #f3b343;
  --max: 1240px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
  --shadow-soft: 0 18px 54px rgba(0, 0, 0, 0.34);
  /* Espaciado unificado entre secciones del portal */
  --section-gap: clamp(32px, 5vw, 56px);
  --section-gap-tight: clamp(24px, 4vw, 36px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(215, 23, 47, 0.075), transparent 420px),
    linear-gradient(180deg, #050505 0%, #080808 46%, #050505 100%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, black, transparent 72%);
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(215, 23, 47, 0.72);
  outline-offset: 4px;
}

img,
svg {
  display: block;
}

[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--text);
  color: #050505;
  transform: translateY(-140%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: min(100% - 48px, var(--max));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid transparent;
  background: rgba(5, 5, 5, 0.74);
  backdrop-filter: blur(18px);
  transition: border-color 180ms ease, background 180ms ease;
}

.site-header[data-elevated="true"] {
  border-color: var(--line);
  background: rgba(5, 5, 5, 0.9);
}

.site-breadcrumbs {
  padding-top: 24px;
  padding-bottom: 16px;
  color: var(--muted);
  font-size: 0.84rem;
}

.site-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-breadcrumbs li {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.site-breadcrumbs li:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.28);
  content: "/";
}

.site-breadcrumbs a {
  color: rgba(255, 255, 255, 0.7);
}

.site-breadcrumbs a:hover {
  color: var(--text);
}

.site-breadcrumbs span {
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.46);
}

.header-shell {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.48));
}

.primary-nav,
.mobile-nav,
.site-footer nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.primary-nav {
  flex: 1 1 auto;
  justify-content: center;
}

.mega-item {
  position: static;
}

.mega-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  font-weight: 700;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mega-trigger span {
  color: var(--muted);
  font-size: 0.85em;
}

.mega-trigger:hover,
.mega-trigger:focus-visible,
.mega-trigger[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.085);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.28);
}

.mega-panel {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  z-index: 70;
  padding: 30px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 26% 42%, rgba(215, 23, 47, 0.34), transparent 34%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.84) 46%, rgba(5, 5, 5, 0.94)),
    rgba(10, 10, 11, 0.82);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(26px) saturate(1.24);
}

.mega-panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(215, 23, 47, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 44%);
}

.mega-panel[hidden] {
  display: none !important;
}

.mega-grid {
  display: grid;
  gap: 34px;
  align-items: start;
}

.mega-grid-guide {
  grid-template-columns: minmax(320px, 0.9fr) minmax(220px, 0.42fr) minmax(220px, 0.42fr);
}

.mega-grid-cities,
.mega-grid-brotherhoods {
  grid-template-columns: minmax(330px, 0.9fr) repeat(4, minmax(150px, 0.42fr));
}

.mega-grid-heritage,
.mega-grid-tools {
  grid-template-columns: minmax(340px, 0.9fr) minmax(220px, 0.42fr) minmax(220px, 0.42fr);
}

.mega-feature {
  min-height: 250px;
  padding-right: 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.mega-feature h2 {
  max-width: 520px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 0.96;
}

.mega-feature p:not(.eyebrow) {
  max-width: 520px;
  margin: 22px 0 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.62;
}

.mega-feature .primary-link {
  margin-top: 28px;
  box-shadow: 0 18px 40px rgba(215, 23, 47, 0.18);
}

.mega-column {
  display: grid;
  align-content: start;
  gap: 15px;
}

.mega-column .eyebrow {
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(215, 23, 47, 0.28);
}

.mega-column a {
  display: grid;
  gap: 3px;
  color: var(--text);
  line-height: 1.08;
}

.mega-column a strong {
  font-size: 1.02rem;
  font-weight: 850;
}

.mega-column a span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.26;
}

.mega-column a:hover strong {
  color: #ff9cab;
}

.mega-red-link {
  display: inline-flex !important;
  width: fit-content;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #d71931, #b90f24);
  color: #fff !important;
  font-weight: 850;
  box-shadow: 0 18px 38px rgba(215, 23, 47, 0.24);
}

.mobile-nav a,
.site-footer a {
  color: var(--muted);
  font-size: 0.95rem;
  transition: color 140ms ease;
}

.mobile-nav a:hover,
.site-footer a:hover {
  color: var(--text);
}

.icon-button {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.mobile-nav {
  padding: 0 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(18px);
}

/* ── El menú móvil, con su segundo nivel ─────────────────────────────────────────
   Antes eran cinco enlaces sueltos, uno por sección de primer nivel: dentro de
   «Patrimonio y Ocio» estaban los fotógrafos, dentro de «Guía de Pasión» el
   glosario, y no había forma de llegar a ninguno de los dos desde el móvil sin
   pasar antes por la sección padre.
   Cada fila principal se queda como estaba —un enlace que lleva directo a la
   sección— y suma un botón de flecha al lado que despliega su segundo nivel,
   con los mismos enlaces que ya tenía el menú de escritorio. Solo una sección
   abierta a la vez: desplegar la siguiente cierra la anterior, para que no haya
   que bajar media pantalla para ver el resto de secciones. */
/* La fila entera es el interruptor —no solo la flecha—, porque es donde la gente
   pulsa cuando espera que se despliegue algo: probado y corregido el 20 de agosto
   de 2026, la flecha sola dejaba a quien pulsaba el texto («Patrimonio y Ocio»)
   navegando a la página en vez de ver el segundo nivel. */
.mobile-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease;
}

.mobile-nav__item:hover,
.mobile-nav__item[aria-expanded="true"] {
  color: var(--text);
}

.mobile-nav__chevron {
  flex: 0 0 auto;
  display: inline-block;
  color: var(--muted);
  font-size: 1.1rem;
  transition: transform 160ms ease-out;
}

.mobile-nav__item[aria-expanded="true"] .mobile-nav__chevron {
  transform: rotate(180deg);
}

.mobile-nav__sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 2px 0 10px 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 4px;
}

/* Los enlaces van más retranqueados que su encabezado, para que se vea de un
   vistazo qué es el título del grupo y qué son sus enlaces —antes estaban al
   mismo margen y no se distinguían—. El encabezado se queda donde estaba. */
.mobile-nav__sub a {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-size: 0.88rem;
}

/* El enlace a la cuenta. En escritorio existe (.header-account-link) pero se
   esconde por debajo de 900px sin que nada lo sustituya: en el móvil no había
   NINGUNA forma de llegar a «Acceder». Va el primero de todos, antes de las
   cinco secciones, porque entrar en la cuenta no es tema de ninguna de ellas
   en concreto. */
.mobile-nav__account {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-bottom: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text) !important;
  font-weight: 800;
}

/* Los botones de acción dentro de cada segundo nivel («Ver todas las
   hermandades», «Explorar la guía»…): en escritorio son botones de verdad
   (.primary-link, .mega-red-link) y en el móvil habían quedado como una línea
   de texto más, indistinguible de un enlace cualquiera. Mismo rojo y misma
   forma de píldora que ya usa el resto del portal para una acción así. */
.mobile-nav__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin: 2px 0 10px;
  padding: 0 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, #d71931, #b90f24);
  color: #fff !important;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 12px 26px rgba(215, 23, 47, 0.24);
}

/* «Registrar Cofradía»: vivía suelto al final del menú entero, fuera de
   cualquier sección, y no tenía mucho que ver con desplegar «Ciudades» o
   «Utilidades». Se mueve dentro de «Hermandades» —que es de donde es— y en
   ámbar, para que no se confunda con los botones rojos de «ver todo» de al
   lado: uno navega a un listado, este abre un formulario. */
.mobile-nav__cta--amber {
  margin-top: 14px;
  background: var(--amber);
  color: #1a1200 !important;
  box-shadow: 0 12px 26px rgba(243, 179, 67, 0.28);
}


/* Encabezado de grupo dentro del segundo nivel («Andalucía», «Recursos»…). En rojo
   apagado (--red-soft) y no el rojo de marca a secas: ya se aprendió con las
   etiquetas del buscador que el rojo vivo a este tamaño y con este espaciado vibra
   y cuesta leerlo, así que se reutiliza el mismo tono pensado para esto. Antes iba
   en el mismo gris apagado que los enlaces y no se notaba que era un título. */
.mobile-nav__group {
  margin: 10px 0 2px;
  color: var(--red-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mobile-nav__sub .mobile-nav__group:first-child {
  margin-top: 2px;
}


.hero {
  position: relative;
  min-height: calc(100svh - 116px);
  overflow: visible;
  display: grid;
  align-items: center;
  border-bottom: none;
  background: #050505;
  z-index: 5;
}

.home-hero {
  min-height: calc(100svh - 34px);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-vignette {
  background:
    linear-gradient(180deg, transparent 0%, #050505 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
  gap: 64px;
  padding-block: 96px 68px;
  align-items: center;
}

.home-hero .hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr);
  min-height: calc(100svh - 76px);
}

.hero-copy {
  max-width: 760px;
}

.cinematic-copy {
  transform: translate3d(0, calc(var(--hero-drift, 0) * 1px), 0);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
  word-break: normal;
}

h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(3.4rem, 10vw, 7.8rem);
  line-height: 0.92;
  letter-spacing: 0;
}

h2 {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0;
}

h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.hero-lead {
  max-width: 620px;
  margin: 30px 0 0;
  color: var(--soft);
  font-size: clamp(1.08rem, 2vw, 1.34rem);
  line-height: 1.58;
}

.search-panel {
  display: grid;
  grid-template-columns: auto 24px minmax(0, 1fr) auto auto;
  grid-template-areas: "select icon input clear submit";
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  margin-top: 0;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: var(--shadow);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.search-panel:focus-within {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.search-panel svg {
  grid-area: icon;
  width: 22px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.search-panel input {
  grid-area: input;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
}

.search-panel input::placeholder {
  color: #86868d;
}

.search-panel button,
.chip {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--text);
  color: #050505;
  font-weight: 750;
  cursor: pointer;
}

.search-panel button {
  padding: 0 18px;
}

/* Botón «Buscar», con el mismo rojo que el resto de botones principales del
   portal en vez del blanco genérico que llevaba. */
.search-panel button[type="submit"] {
  grid-area: submit;
  background: var(--red);
  color: #fff !important;
  border: none;
}

.search-panel button[type="submit"]:hover {
  background: #ef263f;
}

.search-status {
  margin: 14px 0 0;
  color: var(--muted);
}

.mission-board,
.data-panel,
.weather-card,
.video-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.mission-board {
  padding: 28px;
}

.mission-top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--soft);
  font-weight: 700;
}

.pulse {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(67, 209, 122, 0.44);
  animation: pulse 1.8s infinite;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
}

.metric-grid div {
  min-height: 112px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
}

.metric-grid dt {
  color: var(--muted);
  font-size: 0.82rem;
}

.metric-grid dd {
  margin: 10px 0 0;
  font-size: clamp(1.32rem, 2.4vw, 1.7rem);
  font-weight: 800;
  line-height: 1.08;
}

.signal-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.signal-list p,
.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--soft);
}

.signal-list span,
.check-list span {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--red);
}

.countdown-section {
  border-bottom: 1px solid var(--line);
  background: #050505;
}

.countdown-intro {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-bottom: 42px;
  text-align: center;
}

.countdown-intro p {
  margin: 0;
}

.countdown-intro p:last-child {
  color: var(--soft);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.countdown-card {
  position: relative;
  width: min(100%, 1120px);
  margin-inline: auto;
  padding: clamp(32px, 6vw, 72px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04)),
    #151516;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
}

.countdown-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.13) 42%, transparent 64%);
  opacity: 0.55;
  transform: translateX(-120%);
  animation: sheen 6.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.countdown-card::after {
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: calc(var(--radius-xl) - 1px);
  content: "";
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.countdown-card > * {
  position: relative;
  z-index: 1;
}

.hero-countdown {
  align-self: center;
  padding: clamp(28px, 4.5vw, 46px);
  transform:
    perspective(900px)
    rotateX(calc(var(--tilt-y, 0) * -1deg))
    rotateY(calc(var(--tilt-x, 0) * 1deg))
    translate3d(0, calc(var(--hero-drift, 0) * -0.55px), 0);
  transform-style: preserve-3d;
}

.hero-countdown .countdown-intro {
  margin-bottom: 24px;
}

.hero-countdown .countdown-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 18px;
  margin-top: 36px;
}

.hero-countdown .countdown-grid div + div::before {
  display: none;
}

.hero-countdown .countdown-grid strong {
  font-size: clamp(3.3rem, 6.4vw, 6.7rem);
}

.hero-countdown .countdown-copy {
  max-width: 420px;
}

.countdown-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: #ff7f91;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.countdown-kicker::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 22px rgba(215, 23, 47, 0.72);
  content: "";
}

.countdown-copy {
  margin: 16px auto 0;
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 34px);
  margin-top: clamp(34px, 6vw, 64px);
}

.countdown-grid div {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.countdown-grid div + div::before {
  position: absolute;
  left: calc(clamp(14px, 3vw, 34px) / -2);
  top: 20%;
  color: rgba(255, 255, 255, 0.16);
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700;
  content: ":";
}

.countdown-grid strong {
  color: var(--text);
  font-size: clamp(3.4rem, 9vw, 8.8rem);
  line-height: 0.86;
  letter-spacing: 0;
}

.countdown-grid div:last-child strong {
  color: #ff3349;
  text-shadow: 0 0 32px rgba(255, 51, 73, 0.34);
}

.countdown-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.portal-stats {
  position: relative;
  z-index: 2;
  margin-top: 24px;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--line);
  box-shadow: var(--shadow-soft);
}

.stats-strip div {
  min-height: 132px;
  padding: 28px;
  background: rgba(15, 15, 16, 0.92);
}

.stats-strip strong {
  display: block;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1;
}

.stats-strip span {
  display: block;
  margin-top: 12px;
  color: var(--muted);
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.58fr);
  gap: 44px;
  align-items: end;
  max-width: none;
}

.split-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.62;
}

.feature-tiles,
.premium-grid,
.resource-grid,
.guide-grid {
  display: grid;
  gap: 18px;
}

.feature-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-tile,
.premium-card,
.spotlight-card,
.resource-card,
.guide-card,
.cta-panel,
.video-stage {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  box-shadow: var(--shadow-soft);
  transition: transform 260ms ease, border-color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}

.feature-tile,
.premium-card,
.spotlight-card,
.resource-card,
.guide-card {
  min-height: 240px;
  padding: 28px;
}

.feature-tile-large {
  min-height: 310px;
}

.magnetic-card {
  transform:
    perspective(900px)
    rotateX(calc(var(--tilt-y, 0) * -1deg))
    rotateY(calc(var(--tilt-x, 0) * 1deg))
    translateY(calc(var(--lift, 0) * 1px));
}

.is-clickable-card {
  cursor: pointer;
}

.magnetic-card:hover,
.feature-tile:hover,
.premium-card:hover,
.spotlight-card:hover,
.resource-card:hover,
.guide-card:hover,
.cta-panel:hover,
.video-stage:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045));
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.46);
}

.tile-icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 28px;
  place-items: center;
  border: 1px solid rgba(215, 23, 47, 0.34);
  border-radius: 50%;
  color: #ff9cab;
  background: rgba(215, 23, 47, 0.12);
}

.title-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
}

.title-lockup > div {
  min-width: 0;
}

.title-icon,
.tile-image {
  flex: 0 0 auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #090909;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.title-icon {
  width: clamp(76px, 8vw, 112px);
  border-radius: 24px;
}

.title-icon-large {
  width: clamp(88px, 10vw, 136px);
  border-radius: 30px;
}

.tile-image {
  width: min(280px, 100%);
  height: auto;
  margin: 0 0 32px;
  border-radius: 28px;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.feature-tile-large .tile-image,
.spotlight-card-main .tile-image {
  width: min(280px, 100%);
  border-radius: 32px;
}

.resource-card .tile-image,
.guide-card .tile-image {
  width: min(280px, 100%);
  height: auto;
  border-radius: 30px;
}

.video-meta .tile-image {
  width: 84px;
  height: 84px;
  margin-bottom: 20px;
}

.feature-tile:hover .tile-image,
.premium-card:hover .tile-image,
.spotlight-card:hover .tile-image,
.resource-card:hover .tile-image,
.guide-card:hover .tile-image,
.video-stage:hover .tile-image {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.54),
    0 0 38px rgba(215, 23, 47, 0.12);
  transform: translateY(-4px) scale(1.02);
}

.feature-tile h3,
.premium-card h3,
.spotlight-card h3,
.resource-card h3,
.guide-card h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.feature-tile p,
.premium-card p,
.spotlight-card p,
.resource-card p,
.guide-card p,
.video-meta p,
.cta-panel p {
  color: var(--muted);
  line-height: 1.62;
}

.feature-tile a,
.spotlight-card a,
.video-meta a,
.guide-card a,
.action-row a {
  color: #ff9cab;
  font-weight: 850;
}

.city-cloud {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.city-cloud a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 104px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.city-cloud a::before,
.city-cloud a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transition: opacity 220ms ease, transform 320ms ease;
}

.city-cloud a::before {
  background: var(--city-image) center / cover;
}

.city-cloud a::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.78)),
    radial-gradient(circle at 82% 16%, rgba(215, 23, 47, 0.3), transparent 42%);
}

.city-cloud a.has-image {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.city-cloud a.has-image::before,
.city-cloud a.has-image::after {
  opacity: 1;
}

.city-cloud a:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 23, 47, 0.44);
  background: rgba(215, 23, 47, 0.1);
}

.city-cloud a.has-image:hover::before {
  transform: scale(1.04);
}

.city-cloud strong,
.city-cloud span {
  display: block;
}

.city-cloud strong {
  font-size: 1.02rem;
  font-weight: 750;
  color: #ffffff;
  margin-bottom: 2px;
}

.city-cloud .city-province {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0;
}

.city-cloud .city-community {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 1px;
  opacity: 0.55;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
}

.primary-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--red);
  color: white !important;
}

.premium-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* La franja de «Rutas de Semana Santa» tiene 4 fichas, no 3 como el resto de
   .premium-grid del portal (Patrimonio, etc.): a esta sola se le da la 4ª columna,
   para no dejarle un hueco vacío a la derecha a las que solo tienen 3. */
#interes .premium-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.spotlight-card-main {
  min-height: 320px;
}

.craft-grid {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  align-items: stretch;
}

.craft-grid .spotlight-card-main {
  grid-row: span 2;
  min-height: calc(440px + 18px);
}

.craft-grid .spotlight-card:not(.spotlight-card-main) {
  min-height: 220px;
}

.directory-preview {
  margin-top: 34px;
}

.media-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 34px;
  align-items: start;
}

.media-layout__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.media-layout__left .section-heading {
  margin-bottom: 0;
}

.media-layout__right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Bloque de Momentos destacados en Portada */
.home-momentos {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.home-momentos__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.home-momentos__header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.home-momentos__header a {
  font-size: 0.84rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.home-momentos__header a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.home-momentos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-momento-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-momento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.home-momento-card__media {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

.home-momento-card__media iframe,
.home-momento-card__media > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4;
}

.home-momento-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
  display: block;
}

.home-momento-card:hover .home-momento-card__media img {
  transform: scale(1.05);
}

.home-momento-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 2;
  pointer-events: none;
}

.home-momento-card:hover .home-momento-card__play {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--accent);
  border-color: var(--accent);
}

.home-momento-card__play svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  margin-left: 2px;
}

.home-momento-card__badge-type {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(220, 20, 60, 0.9);
  color: #fff;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.home-momento-card__badge-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 2px 5px;
  font-size: 0.62rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 4px;
  z-index: 2;
}

.home-momento-card__meta {
  padding: 8px 9px 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.home-momento-card__title {
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-momento-card__channel {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Escenario de Vídeo Destacado en Portada */
.video-stage {
  padding: 24px;
}

.video-stage .video-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin-top: 0;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.video-frame__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
  display: block;
}

.video-stage:hover .video-frame__thumb {
  transform: scale(1.03);
}

.video-frame__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

.video-frame__badge--type {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(220, 20, 60, 0.9);
  color: #fff;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.video-frame__badge--duration {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 4px;
  z-index: 2;
}

.video-stage .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.video-stage:hover .play-button {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
  border-color: var(--accent);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  z-index: 4;
}

.video-meta {
  padding: 22px 4px 4px;
}

.video-meta .video-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 6px;
}

.video-meta h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--text);
}

.video-meta p {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.4;
}

.video-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.video-meta .btn-ver-videos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.92rem;
  transition: opacity 0.2s ease;
}

.video-meta .btn-ver-videos:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mini-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.mini-grid article:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.mini-grid article a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mini-grid article:hover h3 a {
  color: var(--accent);
}

.mini-grid p {
  color: var(--muted);
}

/* Disposición de Patrimonio y cultura cofrade */
.heritage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 390px);
  gap: 56px;
  align-items: center;
}

.heritage-layout .section-heading {
  margin-bottom: 0;
  max-width: 660px;
}

.heritage-layout .section-heading p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.62;
}

.heritage-layout .premium-card {
  width: 100%;
  max-width: 390px;
  justify-self: end;
}

.resource-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-card {
  min-height: 190px;
}

.guide-card a {
  display: inline-flex;
  margin-top: 20px;
}

.cta-section {
  padding-top: 40px;
}

.cta-panel {
  padding: clamp(34px, 6vw, 70px);
  background:
    linear-gradient(135deg, rgba(215, 23, 47, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
}

.cta-panel h2 {
  max-width: 900px;
}

.cta-panel p {
  max-width: 760px;
}

.section {
  padding-block: 116px;
}

.section-tight {
  padding-top: 96px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 42px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.chip {
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--soft);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.chip:hover,
.chip.is-active {
  border-color: rgba(215, 23, 47, 0.62);
  background: rgba(215, 23, 47, 0.16);
  color: var(--text);
}

.chip:hover {
  transform: translateY(-1px);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.entity-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  height: clamp(240px, 22vw, 280px);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  box-shadow: var(--shadow-soft);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.entity-card--photo {
  min-height: 240px;
  justify-content: flex-end;
  padding: 28px;
  background: rgba(255, 255, 255, 0.04);
}

.entity-card--photo::before,
.entity-card--photo::after {
  content: "";
  position: absolute;
  inset: 0;
}

.entity-card--photo::before {
  z-index: -2;
  background: var(--entity-image) center / cover;
  opacity: 0;
  transform: scale(1.01);
  transition: transform 360ms ease, opacity 220ms ease;
}

.entity-card--photo::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.82)),
    radial-gradient(circle at 82% 12%, rgba(215, 23, 47, 0.28), transparent 42%);
}

.entity-card--photo.has-image::before {
  opacity: 1;
}

.entity-card--photo:hover::before {
  transform: scale(1.045);
}

.entity-card--photo h3 {
  max-width: 12ch;
}

.entity-card--photo small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.78);
}

.entity-media {
  min-width: 0;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
}

.entity-copy {
  min-width: 0;
  display: block;
  width: 100%;
  text-align: left;
}

.entity-copy h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.1;
  max-width: 13ch;
}

.entity-copy small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.28;
}

.entity-thumb {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 20px;
  background: #f6f6f6;
  color: #080808;
  font-size: 1.55rem;
  font-weight: 950;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

.entity-thumb--image {
  padding: 8px;
}

.entity-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.entity-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.04));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

.entity-card[hidden] {
  display: none;
}

.card-kicker {
  width: fit-content;
  margin-bottom: 22px;
  padding: 6px 11px;
  border: 1px solid rgba(215, 23, 47, 0.42);
  border-radius: 999px;
  color: #ff9cab;
  font-size: 0.78rem;
  font-weight: 800;
}

.entity-card .card-kicker,
.entity-card p,
.entity-card dl {
  display: none;
}

.entity-card p,
.city-main p,
.video-card p,
.weather-card p {
  color: var(--muted);
}

.entity-card p {
  margin-top: 16px;
  line-height: 1.62;
}

.entity-card dl {
  display: grid;
  gap: 14px;
  margin: 34px 0 0;
}

.entity-card dl div {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.entity-card dt {
  color: var(--muted);
}

.entity-card dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  text-align: right;
  overflow-wrap: break-word;
}

.city-preview {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
}

.city-layout,
.split-grid,
.feature-grid,
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 48px;
  align-items: start;
}

.city-main {
  max-width: 760px;
}

.timeline {
  display: grid;
  gap: 18px;
  margin-top: 44px;
}

.timeline article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
}

.timeline time {
  color: #ff8d9d;
  font-weight: 800;
}

.timeline p {
  margin: 7px 0 0;
}

.data-panel {
  padding: 30px;
}

.data-panel h2,
.weather-card h2,
.video-card h2 {
  font-size: clamp(1.85rem, 3.1vw, 3.2rem);
  line-height: 1.04;
}

.detail-side h2 {
  font-size: clamp(2rem, 3vw, 2.9rem);
}

.check-list {
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 26px 0 0;
  list-style: none;
}

.split-grid {
  align-items: center;
}

.alert-stack {
  display: grid;
  gap: 18px;
}

.alert-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-strong);
}

.alert-level {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.alert-level.high {
  background: rgba(215, 23, 47, 0.18);
  color: #ff9cab;
}

.alert-level.medium {
  background: rgba(243, 179, 67, 0.16);
  color: #ffd99a;
}

.alert-level.low {
  background: rgba(67, 209, 122, 0.16);
  color: #9af2bd;
}

.alert-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

.feature-band {
  border-block: 1px solid var(--line);
  background: #080808;
}

.weather-card,
.video-card {
  min-height: 430px;
  padding: 34px;
  overflow: hidden;
}

.weather-now {
  display: grid;
  gap: 8px;
  margin: 28px 0;
}

.weather-now strong {
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 0.9;
}

.weather-now span {
  color: var(--muted);
}

.weather-page {
  max-width: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 50% 8%, rgba(215, 23, 47, 0.18), transparent 34rem),
    linear-gradient(180deg, #090909 0%, #050505 100%);
}

.weather-hero {
  padding: clamp(52px, 7vw, 92px) 0 clamp(72px, 9vw, 120px);
}

.weather-shell {
  width: min(100% - 48px, 980px);
  max-width: 980px;
  display: grid;
  gap: 24px;
  min-width: 0;
}

.weather-shell > *,
.weather-current-card > *,
.weather-risk-card > *,
.weather-panel > *,
.weather-key-card > *,
.weather-alerts-card > *,
.weather-radar-card > *,
.weather-source-card > * {
  min-width: 0;
}

.weather-hero__intro {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.weather-hero__intro h1 {
  max-width: 760px;
  margin: 10px auto 0;
  font-size: clamp(2.75rem, 6.2vw, 5.8rem);
  line-height: 0.92;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.weather-hero__intro p:not(.eyebrow) {
  max-width: 660px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.45;
}

.weather-search {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: min(100%, 860px);
  margin: 22px auto 0;
  padding: 0 18px;
  min-height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.weather-search span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.45rem;
}

.weather-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 1.1rem;
}

.weather-search input::placeholder {
  color: rgba(255, 255, 255, 0.56);
}

.weather-search input::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}

/* Solo el botón de limpiar (hijo directo). Sin el ">", esta regla alcanzaba
   también a los botones de sugerencia, que van dentro del formulario. */
.weather-search > button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.1);
  font: inherit;
  cursor: pointer;
}

.weather-suggestions {
  position: absolute;
  z-index: 20;
  inset: calc(100% + 10px) 0 auto 0;
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(22, 22, 24, 0.96);
  box-shadow: var(--shadow);
}

.weather-suggestions button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: auto;
  padding: 14px 16px;
  border-radius: 14px;
  color: #fff;
  background: transparent;
  text-align: left;
}

.weather-suggestions button:hover,
.weather-suggestions button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.weather-suggestions small {
  color: var(--muted);
}

.weather-summary-text,
.weather-current-card,
.weather-risk-card,
.weather-panel,
.weather-key-card,
.weather-alerts-card,
.weather-radar-card,
.weather-history-card,
.weather-source-card {
  border: 1px solid var(--line);
  border-radius: clamp(24px, 3vw, 34px);
  background: #0b0b0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.weather-summary-text {
  margin: 0;
  padding: clamp(20px, 3vw, 30px);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.weather-current-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4.6vw, 44px);
  isolation: isolate;
}

.weather-current-card::before {
  display: none;
}

.weather-current-card::after {
  display: none;
}

.weather-current-card[data-mood="day"]::before {
  background: none;
}

.weather-current-card[data-mood="day"]::after {
  background: none;
}

.weather-current-card[data-mood="night"]::before {
  background: none;
}

.weather-current-card[data-mood="cloud"],
.weather-current-card[data-mood="night-cloud"] {
  background: #0b0b0c;
}

.weather-current-card[data-mood="cloud"]::before,
.weather-current-card[data-mood="night-cloud"]::before {
  background: none;
}

.weather-current-card[data-mood="rain"]::before {
  background: none;
}

.weather-current-card[data-mood="storm"]::before {
  background: none;
}

.weather-current-card[data-mood="wind"]::before {
  background: none;
}

.weather-current-card > * {
  position: relative;
  z-index: 1;
}

.weather-card-top,
.weather-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
}

.weather-card-top h2,
.weather-panel-heading h2,
.weather-source-card h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
}

.weather-card-top p {
  margin: 7px 0 0;
  color: var(--muted);
}

.weather-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(67, 209, 122, 0.3);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(67, 209, 122, 0.13);
  font-weight: 800;
  white-space: nowrap;
  max-width: 100%;
}

.weather-risk-badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #43d17a;
  box-shadow: 0 0 18px rgba(67, 209, 122, 0.9);
}

/* ── Color por nivel de riesgo ───────────────────────────────────────────────────
   Las tres pastillas («Riesgo alto/bajo» arriba, el recuadro grande de «Riesgo
   cofrade» y el «Alto/Medio/Bajo» de cada franja en «Momentos clave») estaban SIEMPRE
   en verde: el JS ya ponía data-level="alto|medio|bajo" en el badge de arriba, pero
   nada en el CSS lo leía, y las otras dos pastillas ni siquiera llevaban el atributo.
   Bajo se queda como estaba (es el verde de toda la vida, y es el valor por defecto);
   aquí solo hacen falta los otros dos.

   Cada regla duplica la que ya existía para el mismo elemento, cambiando solo el
   color: cuando había una versión "básica" y otra "de esta página" (.weather-page)
   para el mismo selector, las dos se tocan, porque la de .weather-page es la que
   gana por especificidad y es la que de verdad se ve. */

.weather-risk-badge[data-level="alto"],
.weather-page .weather-risk-badge[data-level="alto"] {
  border-color: rgba(215, 23, 47, 0.4);
  background: rgba(215, 23, 47, 0.15);
  color: #ffd9df;
}

.weather-risk-badge[data-level="medio"],
.weather-page .weather-risk-badge[data-level="medio"] {
  border-color: rgba(243, 179, 67, 0.4);
  background: rgba(243, 179, 67, 0.15);
  color: #ffedcf;
}

.weather-risk-badge[data-level="alto"] i {
  background: var(--red);
  box-shadow: 0 0 18px rgba(215, 23, 47, 0.9);
}

.weather-risk-badge[data-level="medio"] i {
  background: var(--amber);
  box-shadow: 0 0 18px rgba(243, 179, 67, 0.9);
}

.risk-content > strong[data-level="alto"],
.weather-page .risk-content > strong[data-level="alto"] {
  border-color: rgba(215, 23, 47, 0.4);
  background: rgba(215, 23, 47, 0.12);
  color: #ffd9df;
}

.risk-content > strong[data-level="medio"],
.weather-page .risk-content > strong[data-level="medio"] {
  border-color: rgba(243, 179, 67, 0.4);
  background: rgba(243, 179, 67, 0.12);
  color: #ffedcf;
}

.key-moments b[data-level="alto"],
.weather-page .key-moments b[data-level="alto"] {
  background: rgba(215, 23, 47, 0.16);
  color: #ffc9d1;
}

.key-moments b[data-level="medio"],
.weather-page .key-moments b[data-level="medio"] {
  background: rgba(243, 179, 67, 0.16);
  color: #ffdfa3;
}


.weather-now-layout {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 1.2fr);
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
  margin: 34px auto 20px;
  min-width: 0;
}

.weather-line-icon {
  display: inline-grid;
  place-items: center;
  color: #fff;
  line-height: 0;
}

.weather-line-icon img,
.weather-line-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.weather-line-icon--asset img {
  filter: brightness(0) invert(1);
}

.weather-line-icon--main {
  justify-self: center;
  width: clamp(110px, 16vw, 172px);
  aspect-ratio: 1;
  color: #fff;
}

.weather-line-icon.mini-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  color: #fff;
}

.weather-temperature {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.weather-temperature strong {
  font-size: clamp(4.5rem, 11vw, 8.2rem);
  font-weight: 500;
  line-height: 0.9;
}

.weather-temperature span {
  font-size: clamp(1.25rem, 2.5vw, 1.85rem);
  font-weight: 900;
}

.weather-temperature small {
  color: var(--muted);
  font-size: 1rem;
}

.weather-metrics,
.risk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 0;
  min-width: 0;
}

.weather-metrics div,
.risk-grid div,
.hourly-item,
.daily-list div,
.key-moments div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: #101011;
}

.weather-metrics div,
.risk-grid div {
  min-width: 0;
  padding: 18px;
  text-align: center;
}

.weather-metrics dt,
.risk-grid dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.weather-metrics dd,
.risk-grid dd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.wind-direction {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transform: rotate(var(--wind-rotation, 0deg));
}

.wind-direction::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 9px;
  height: 14px;
  transform: translateX(-50%);
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
  opacity: 0.88;
}

.wind-direction--calm::before {
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  clip-path: none;
}

.weather-risk-card,
.weather-panel,
.weather-key-card,
.weather-alerts-card,
.weather-radar-card,
.weather-history-card,
.weather-source-card {
  padding: clamp(24px, 3.6vw, 34px);
}

.weather-panel-heading span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.risk-content {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
}

.risk-content > strong {
  display: grid;
  place-items: center;
  min-height: 104px;
  border: 1px solid rgba(67, 209, 122, 0.34);
  border-radius: 26px;
  color: #dfffea;
  background: #101011;
  font-size: 1.25rem;
}

.risk-content h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.risk-content p,
.weather-alerts-card p,
.weather-source-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.weather-alert-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.weather-alert-list li {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(215, 23, 47, 0.28);
  border-radius: 16px;
  background: #101011;
}

.weather-alert-list strong {
  color: #fff;
}

.weather-alert-list small,
.weather-alert-list em {
  color: var(--muted);
  font-style: normal;
}

.risk-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hourly-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 0 8px;
  margin-top: 22px;
  scroll-snap-type: x proximity;
  max-width: 100%;
}

.hourly-item {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 156px;
  padding: 18px 14px;
  scroll-snap-align: start;
}

.hourly-item time,
.daily-list small {
  color: var(--muted);
  font-weight: 800;
}

.hourly-item strong {
  font-size: 1.55rem;
}

.hourly-item span {
  color: #5bd0ff;
  font-weight: 900;
}

.hourly-item small,
.daily-list small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hourly-item .wind-direction,
.daily-list .wind-direction {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.mini-icon {
  width: 34px;
  height: 34px;
}

.key-moments,
.daily-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.key-moments div,
.daily-list div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) 54px minmax(90px, auto) 96px;
  gap: 10px;
  align-items: center;
  padding: 18px;
  min-width: 0;
}

.key-moments div {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 14px;
}

.key-moments b {
  justify-self: end;
  padding: 7px 12px;
  border-radius: 999px;
  color: #dfffea;
  background: rgba(67, 209, 122, 0.18);
}

.daily-list span {
  color: #5bd0ff;
  font-weight: 900;
}

.daily-list strong:last-child {
  font-size: 1.18rem;
  justify-self: end;
}

.weather-detail-item {
  position: relative;
  min-width: 0;
  min-height: 190px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.11), transparent 5.8rem),
    rgba(255, 255, 255, 0.055);
}

.weather-detail-item i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-style: normal;
  font-size: 1.28rem;
}

.weather-detail-item em {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 92px;
  height: 46px;
  opacity: 0.74;
  pointer-events: none;
}

.weather-detail-item span {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weather-detail-item strong {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.weather-detail-item small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.22;
  font-weight: 800;
}

.weather-detail-item--uv em,
.weather-detail-item--average em {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #43d17a, #ffd35a, #ff7a2d, #d7172f, #b85cff);
}

.weather-detail-item--wind em {
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background:
    conic-gradient(from 90deg, transparent 0 28%, rgba(255, 255, 255, 0.32) 28% 31%, transparent 31%),
    radial-gradient(circle, rgba(91, 208, 255, 0.2), transparent 62%);
}

.weather-detail-item--sunset em {
  height: 54px;
  border-radius: 999px 999px 0 0;
  border-top: 3px solid rgba(255, 211, 90, 0.9);
  background: radial-gradient(circle at 50% 92%, rgba(255, 211, 90, 0.75) 0 8px, transparent 9px);
}

.weather-detail-item--humidity em,
.weather-detail-item--visibility em {
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(91, 208, 255, 0.52) 0 4px, transparent 4px 13px),
    linear-gradient(180deg, transparent, rgba(91, 208, 255, 0.16));
}

.weather-detail-item--pressure em {
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.13);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 62%);
}

.weather-detail-item--air em {
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(91, 208, 255, 0.68) 0 5px, transparent 6px),
    repeating-conic-gradient(rgba(91, 208, 255, 0.35) 0 8deg, transparent 8deg 18deg);
}

.weather-history-card p {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.weather-history-meta,
.weather-history-reading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.weather-history-reading {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.weather-history-meta article,
.weather-history-reading article,
.weather-history-years article {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #101011;
}

.weather-history-cofrade {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid rgba(215, 23, 47, 0.22);
  border-radius: 18px;
  background: #101011;
}

.weather-history-years {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.weather-history-meta strong,
.weather-history-meta span,
.weather-history-reading strong,
.weather-history-reading span,
.weather-history-cofrade span,
.weather-history-years strong,
.weather-history-years span,
.weather-history-card small {
  display: block;
}

.weather-history-meta strong,
.weather-history-reading strong,
.weather-history-years strong {
  color: #fff;
}

.weather-history-meta span,
.weather-history-reading span,
.weather-history-cofrade span,
.weather-history-years span,
.weather-history-card small {
  margin-top: 6px;
  color: var(--muted);
}

.weather-history-meta span,
.weather-history-reading span,
.weather-history-cofrade span {
  margin-top: 0;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weather-history-reading strong {
  margin-top: 8px;
  line-height: 1.22;
}

.weather-history-cofrade p {
  margin: 8px 0 0;
  max-width: none;
  color: rgba(255, 255, 255, 0.84);
}

.radar-sweep {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 52%;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(67, 209, 122, 0.85), transparent);
}

.radar-point {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5bd0ff;
  box-shadow: 0 0 24px rgba(91, 208, 255, 0.8);
}

.radar-point--north { left: 38%; top: 22%; }
.radar-point--center { left: 54%; top: 44%; background: #43d17a; }
.radar-point--south { left: 46%; top: 63%; background: #ffd35a; }

.weather-source-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
}

.weather-source-card strong {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 760px) {
  .weather-shell {
    width: min(100% - 28px, 980px);
  }

  .weather-hero {
    padding-top: 38px;
  }

  .weather-search {
    min-height: 58px;
    border-radius: 18px;
  }

  .radar-map {
    min-height: 280px;
  }

  .weather-now-layout,
  .risk-content,
  .weather-source-card {
    grid-template-columns: 1fr;
  }

  .weather-card-top,
  .weather-panel-heading {
    align-items: flex-start;
    gap: 12px;
  }

  .weather-risk-badge {
    font-size: 0.82rem;
  }

  .weather-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .risk-grid,
  .weather-detail-grid,
  .weather-history-meta,
  .weather-history-reading,
  .weather-history-years {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .key-moments div,
  .daily-list div {
    grid-template-columns: 1fr auto;
  }

  .key-moments b,
  .daily-list strong:last-child {
    justify-self: start;
  }

  .radar-map {
    min-height: 300px;
  }

  .weather-map-pill {
    left: 14px;
    right: 14px;
    max-width: none;
  }

  .weather-map-pill--temp {
    top: 14px;
  }

  .weather-map-pill--wind {
    bottom: 14px;
  }
}

@media (max-width: 520px) {
  .weather-shell {
    width: min(100% - 20px, 980px);
  }

  .weather-card-top,
  .weather-panel-heading {
    flex-direction: column;
  }

  .hourly-slider {
    grid-auto-columns: 104px;
  }

  .weather-history-meta,
  .weather-history-reading,
  .weather-history-years {
    grid-template-columns: 1fr;
  }

  .weather-metrics div,
  .weather-detail-card,
  .weather-detail-item {
    padding: 15px;
  }

  .weather-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weather-detail-card {
    min-height: 168px;
  }

  .detail-main strong {
    font-size: clamp(1.45rem, 8vw, 2.05rem);
  }

  .detail-compass {
    width: 96px;
    height: 96px;
  }

  .pressure-gauge {
    width: 96px;
    height: 82px;
    margin: 0 auto;
  }

  .pressure-gauge-value {
    font-size: 1.45rem;
  }

  .pressure-gauge-needle {
    top: 44px;
    left: 44px;
    height: 60px;
  }

  .pressure-gauge-center {
    top: 48px;
  }

  .weather-detail-item {
    min-height: 158px;
  }
}

.rain-chart {
  display: grid;
  height: 130px;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}

.rain-chart span {
  min-height: 8px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, #ffffff, var(--red));
  transform-origin: bottom;
}

.video-frame {
  display: grid;
  min-height: 220px;
  margin-top: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(215, 23, 47, 0.28), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 18px),
    #101010;
}

.play-button {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 160ms ease, background 160ms ease;
}

.play-button:hover {
  transform: scale(1.04);
  background: rgba(215, 23, 47, 0.34);
}

.play-button svg {
  width: 32px;
  fill: currentColor;
}

.admin-table {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.admin-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 18px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.admin-row:last-child {
  border-bottom: 0;
}

.admin-head {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 0;
  color: var(--muted);
  background:
    radial-gradient(circle at 12% 18%, rgba(215, 23, 47, 0.11), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 36%),
    #030303;
}

.detail-hero {
  position: relative;
  overflow: hidden;
  padding-block: 126px 86px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.98), rgba(5, 5, 5, 0.76)),
    linear-gradient(135deg, rgba(215, 23, 47, 0.16), transparent 42%),
    #060606;
}

.detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.58fr);
  gap: 58px;
  align-items: end;
}

.detail-title-lockup {
  align-items: flex-start;
  margin-bottom: 28px;
}

.detail-title-lockup + .hero-lead {
  margin-top: 0;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
  gap: 54px;
  align-items: start;
}

.detail-list {
  display: grid;
  gap: 22px;
}

.detail-list.compact {
  margin-top: 34px;
}

.detail-item {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
  gap: 32px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.047);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.detail-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.065);
}

.detail-item p {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.62;
}

.detail-item dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin: 0;
}

.detail-item dt {
  color: var(--muted);
  font-size: 0.84rem;
}

.detail-item dd {
  margin: 6px 0 0;
  color: var(--soft);
  line-height: 1.38;
}

/* ── /videos.html ─────────────────────────────────────────────────────────────
   Estilo Apple: materiales translúcidos para la chrome flotante (chips, tarjeta de
   directo), tipografía con tracking/leading por tamaño (§15 de apple-design), y
   movimiento discreto —solo transform/opacity, respetando prefers-reduced-motion—
   en vez de saltos bruscos. Nada de iframes de YouTube cargados de antemano: cada
   miniatura es una «fachada» que se convierte en reproductor solo al pulsarla, que es
   lo que de verdad protege el LCP y el INP en una página con decenas de vídeos. */

.videos-hero .hero-grid {
  align-items: center;
}

.video-hero-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.video-hero-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #090909;
  cursor: pointer;
}

.video-hero-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-hero-card__media iframe,
.video-hero-card__media > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4;
}

.video-hero-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(215, 23, 47, 0.92);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.video-hero-card__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: videoLivePulse 1.8s ease-in-out infinite;
}

.video-hero-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.video-hero-card__play svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.video-hero-card__media:hover .video-hero-card__play,
.video-hero-card__media:focus-visible .video-hero-card__play {
  transform: scale(1.08);
}

.video-hero-card__meta {
  padding: 22px 24px 26px;
}

.video-hero-card__meta h2 {
  font-size: 1.2rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.video-hero-card__meta p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@keyframes videoLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Barra de búsqueda propia de esta página: reutiliza el mismo cristal que .search-panel
   sin arrastrar su rejilla de 5 columnas, que aquí no hace falta. */
.toolbar-search {
  margin-bottom: 16px;
}

.toolbar-search input {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.98rem;
  transition: border-color 160ms ease, background 160ms ease;
}

.toolbar-search input::placeholder {
  color: #86868d;
}

.toolbar-search input:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.09);
}

.directory-status {
  margin: 4px 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ── Vídeos ─────────────────────────────────────────────────────────────── */

.video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.video-grid--directos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-grid--momentos {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1300px) {
  .video-grid--momentos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 1050px) {
  .video-grid--momentos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .video-grid--momentos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .video-grid--momentos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.video-card-item--vertical {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}

.video-card-item--vertical .video-card-item__media {
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  overflow: hidden;
  background: #000;
}

.video-card-item--vertical .video-card-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-card-item--vertical .video-card-item__badge--type {
  display: none !important;
}

.video-card-item--vertical .video-card-item__badge--duration {
  bottom: 8px;
  right: 8px;
  padding: 3px 7px;
  font-size: 0.68rem;
  background: rgba(0, 0, 0, 0.8);
}

.video-card-item--vertical .video-card-item__meta {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.video-card-item--vertical .video-card-item__meta h3 {
  font-size: 0.88rem;
  line-height: 1.28;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-item--vertical .video-card-item__meta > p {
  font-size: 0.76rem;
  margin: 6px 0 0;
  line-height: 1.25;
  color: var(--muted);
}

.video-card-item--vertical .video-card-item__actions {
  margin-top: auto;
  padding-top: 8px;
  gap: 6px;
}

.video-card-item--vertical .like-button {
  padding: 4px 8px;
  font-size: 0.76rem;
}

.video-card-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.047);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms ease, background 220ms ease;
}

.video-card-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.065);
}

.video-card-item__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #090909;
  cursor: pointer;
}

.video-card-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card-item__media iframe,
.video-card-item__media > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4;
}

.video-card-item__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.video-card-item__play svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.video-card-item__media:hover .video-card-item__play,
.video-card-item__media:focus-visible .video-card-item__play {
  transform: scale(1.1);
}

.video-card-item__badge {
  position: absolute;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.video-card-item__badge--type {
  display: none !important;
}

.video-card-item__badge--duration {
  bottom: 10px;
  right: 10px;
  background: rgba(5, 5, 5, 0.82);
  color: var(--text);
}

.video-card-item__badge--live {
  background: #dc2626 !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.75);
}

.video-card-item__badge--live .live-dot {
  width: 7px;
  height: 7px;
  background-color: #ffffff;
  border-radius: 50%;
  animation: pulse-live 1.4s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulse-live {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}

.video-card-item__meta {
  padding: 16px 18px 18px;
}

.video-card-item__meta h3 {
  font-size: 0.98rem;
  line-height: 1.34;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-item__meta > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.video-card-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ghost-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  transition: border-color 160ms ease, background 160ms ease;
}

.ghost-link:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

/* Botón de «me gusta» de un vídeo: mismo tamaño y forma que ghost-link para que la
   fila de acciones quede alineada, pero se marca en rojo cuando está pulsado —igual
   que el resto de acentos del portal— en vez de solo cambiar el texto. */
.like-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 100ms ease;
}

.like-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: fill 160ms ease;
}

.like-button:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

.like-button:active {
  transform: scale(0.96);
}

.like-button.is-active {
  border-color: var(--red, #d7172f);
  color: var(--red, #d7172f);
}

.like-button.is-active svg {
  fill: currentColor;
}

.like-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Los iconos de Reicon se dibujan con «fill», no con «stroke»: la regla genérica de
   arriba (.like-button svg) los deja con un borde grueso alrededor que los emborrona.
   Aquí se pisa para que se pinten como lo que son, siluetas rellenas. */
/* Con «.like-button .like-button__icon» y no solo «.like-button__icon»: la regla
   genérica de arriba es «.like-button svg», que pesa más que una clase suelta y le
   ganaba aunque esté escrita antes — el corazón salía sin relleno y con un trazo
   grueso alrededor. */
.like-button .like-button__icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

/* Corazón vacío mientras no se ha votado, relleno cuando sí. Son dos iconos distintos
   del sprite y se alternan por CSS: con un sprite no se puede rellenar un icono de
   contorno cambiándole el «fill», porque cada trazo trae el suyo propio. */
.like-button__icon--lleno,
.like-button.is-active .like-button__icon--linea {
  display: none;
}

.like-button.is-active .like-button__icon--lleno {
  display: inline-block;
}

/* Seguidores de un CANAL. Deliberadamente distinto del «me gusta» de un vídeo —icono
   de personas, no corazón— porque son dos cosas que no se pueden confundir: una la
   decide el público del canal en YouTube, la otra los visitantes de este portal. */
.channel-card-item__followers {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted, #9aa0a6);
  font-size: 0.82rem;
  font-weight: 600;
}

.channel-card-item__followers-icon {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  .like-button { transition: none; }
  .like-button:active { transform: none; }
}

/* ── Canales ────────────────────────────────────────────────────────────── */

.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.channel-card-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.047);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms ease, background 220ms ease;
}

.channel-card-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.065);
}

.channel-card-item__link {
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--text);
}

.channel-card-item__link img {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #1a1a1c;
}

.channel-card-item__link strong {
  display: block;
  font-size: 1rem;
  line-height: 1.3;
}

.channel-card-item__link:hover strong {
  color: #ff9cab;
}

.channel-card-item__link small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.84rem;
}

.channel-card-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.channel-card-item__tags .tag {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.channel-card-item__tags .tag--live {
  border-color: rgba(215, 23, 47, 0.5);
  background: rgba(215, 23, 47, 0.14);
  color: #ff9cab;
}

/* ── Explicación / colaboración ────────────────────────────────────────── */

.explainer-card {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(215, 23, 47, 0.1), rgba(255, 255, 255, 0.03));
}

.explainer-card h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
}

.explainer-card p {
  max-width: 68ch;
  margin-top: 14px;
  color: var(--soft);
  line-height: 1.62;
}

.explainer-card a {
  color: #ff9cab;
  font-weight: 800;
}

@media (max-width: 980px) {
  .videos-hero .hero-grid {
    grid-template-columns: 1fr;
  }

  .video-grid,
  .video-grid--directos,
  .channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .video-grid,
  .video-grid--directos,
  .channel-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-card-item,
  .channel-card-item,
  .video-card-item__play,
  .video-hero-card__play {
    transition: none;
  }

  .video-hero-card__badge::before {
    animation: none;
  }
}

.detail-side {
  position: sticky;
  top: 92px;
}

.day-list {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.side-note {
  margin: 28px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.day-list .detail-item,
.compact .detail-item {
  grid-template-columns: 1fr;
}

.seat-list {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.seat-card {
  padding-block: 22px;
  border-top: 1px solid var(--line);
}

.seat-card h3 {
  margin-bottom: 12px;
}

.seat-card p {
  margin: 0;
  color: var(--soft);
  line-height: 1.58;
}

.seat-card a {
  display: inline-flex;
  margin-top: 16px;
  color: #ff9cab;
  font-weight: 800;
}

.seat-card span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
}

.map-card {
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr);
}

.map-frame {
  min-height: 320px;
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(215, 23, 47, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.04);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.92) brightness(0.82);
}

.map-frame p {
  display: grid;
  min-height: 320px;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
}

.footer-shell {
  padding-block: 70px 32px;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.9fr);
  gap: clamp(44px, 6vw, 96px);
  padding-bottom: 58px;
}

.footer-brand {
  display: inline-flex;
  width: fit-content;
}

.footer-brand img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.46));
}

.footer-intro h2 {
  max-width: 360px;
  margin: 28px 0 18px;
  color: var(--text);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.08;
}

.footer-intro p {
  max-width: 380px;
  margin: 0;
  color: var(--soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.social-links a {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-weight: 900;
  line-height: 1;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.social-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(215, 23, 47, 0.45);
  background: rgba(215, 23, 47, 0.14);
  color: #fff;
}

.social-links svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

.footer-links {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start !important;
  gap: clamp(28px, 4vw, 58px) !important;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 13px;
}

.footer-column h3,
.partner-area h2,
.accessibility-card h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: 0;
}

.footer-column a {
  color: var(--soft);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.22;
  transition: color 150ms ease, transform 150ms ease;
}

.footer-column a:hover {
  color: #ff9cab;
  transform: translateX(2px);
}

.footer-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  gap: clamp(40px, 8vw, 130px);
  padding-block: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.partner-area {
  min-width: 0;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 294px));
  gap: 16px;
  align-items: stretch;
  margin-top: 18px;
}

.partner-card {
  display: flex;
  min-height: 100px;
  align-items: center;
  justify-content: center;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.035)),
    rgba(16, 16, 18, 0.72);
  color: var(--soft);
  font-size: 1.05rem;
  font-weight: 850;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.partner-card:hover {
  transform: translateY(-3px);
  border-color: rgba(215, 23, 47, 0.42);
  background:
    linear-gradient(180deg, rgba(215, 23, 47, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(20, 20, 22, 0.82);
  color: #fff;
}

.partner-card img {
  display: block;
  width: min(100%, 230px);
  max-height: 76px;
  object-fit: contain;
}

.accessibility-card {
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.026)),
    rgba(17, 17, 19, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.accessibility-card p {
  margin: 0;
  color: var(--soft);
  font-size: 0.94rem;
  line-height: 1.62;
}

.accessibility-card p + p {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
  margin: 0;
  color: #8e8e95;
  font-size: 0.9rem;
}

.directory-hero {
  min-height: auto;
  padding: 150px 0 48px;
}

.directory-hero .directory-filter-panel {
  position: sticky;
  top: 96px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #151515;
}

.directory-filter-panel h2 {
  margin: 0 0 22px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}

.directory-filter-form {
  display: grid;
  gap: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Un desplegable bloqueado tiene que PARECERLO, o se pulsa y no pasa nada. */
.directory-filter-form select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.directory-filter-form input,
.directory-filter-form select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: #141414;
  padding: 0 16px;
  font: inherit;
}

.directory-results {
  padding: 28px;
}

.directory-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

.directory-results-head strong {
  color: var(--red);
}

.directory-results-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

body[data-directory-type] .directory-grid,
body[data-directory-type="brotherhoods"] .directory-grid,
body[data-directory-type="museums"] .directory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.directory-card,
.directory-empty {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
}

.directory-card {
  overflow: hidden;
}

.directory-card a {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  min-height: 132px;
  padding: 22px;
  color: inherit;
}

.directory-card--photo a {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 260px;
  align-items: flex-end;
  padding: 24px;
  overflow: hidden;
}

.directory-card--photo a::before,
.directory-card--photo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.directory-card--photo a::before {
  z-index: -2;
  background: var(--directory-image) center / cover;
  opacity: 0;
  transform: scale(1.01);
  transition: transform 360ms ease, opacity 220ms ease;
}

.directory-card--photo.has-image a::before {
  opacity: 1;
}

.directory-card--photo a::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.84)),
    radial-gradient(circle at 84% 12%, rgba(215, 23, 47, 0.24), transparent 40%);
}

.directory-card--photo a:hover::before {
  transform: scale(1.045);
}

.directory-card__content {
  min-width: 0;
  display: block;
}

.directory-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  max-width: calc(100% - 36px);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.directory-card strong,
.directory-card small,
.directory-card em {
  display: block;
}

.directory-card strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.12;
}

.directory-card--photo strong {
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 2rem);
  letter-spacing: 0;
}

.directory-card--photo small {
  color: rgba(255, 255, 255, 0.78);
}

.directory-card--photo em {
  display: none;
}

.directory-card small {
  margin-top: 7px;
  color: var(--muted);
  font-style: normal;
}

.directory-card em {
  display: none;
  margin-top: 12px;
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.directory-card--media a {
  align-items: start;
}

.directory-card--media strong {
  font-size: 1.08rem;
  line-height: 1.1;
}

.directory-card--media small {
  font-size: 0.86rem;
  line-height: 1.28;
}

.directory-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  overflow: hidden;
}

.directory-thumb--image {
  padding: 0;
  background: #18181b;
}

.directory-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.directory-empty {
  grid-column: 1 / -1;
  padding: 28px;
  color: var(--muted);
}

.directory-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.directory-pagination button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 0 18px;
  font: inherit;
  font-weight: 800;
}

.directory-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.directory-pagination span {
  color: var(--muted);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 620ms ease, transform 620ms ease;
}

#galeria,
#fotografias {
  opacity: 1;
  transform: none;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 14px rgba(67, 209, 122, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(67, 209, 122, 0);
  }
}

@keyframes grow {
  from {
    transform: scaleY(0.18);
  }
}

@keyframes sheen {
  0%, 54% {
    transform: translateX(-120%);
  }
  82%, 100% {
    transform: translateX(120%);
  }
}

@media (max-width: 1120px) {
  .directory-layout {
    grid-template-columns: 1fr;
  }

  .directory-filter-panel {
    position: static;
  }

  .header-shell {
    gap: 12px;
  }

  .brand-logo {
    width: 52px;
    height: 52px;
  }

  .mega-trigger {
    padding-inline: 10px;
    font-size: 0.92rem;
  }

  .mega-grid {
    gap: 24px;
  }

  .mega-grid-cities,
  .mega-grid-brotherhoods {
    grid-template-columns: minmax(280px, 0.82fr) repeat(4, minmax(0, 1fr));
  }

  .mega-feature {
    padding-right: 22px;
  }

  .mega-column a strong {
    font-size: 0.96rem;
  }
}

@media (max-width: 980px) {
  .directory-kpis,
  .directory-grid {
    grid-template-columns: 1fr;
  }

  body[data-directory-type] .directory-grid,
  body[data-directory-type="brotherhoods"] .directory-grid,
  body[data-directory-type="museums"] .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .primary-nav {
    display: none;
  }

  .icon-button {
    display: grid;
  }

  /* ── El menú móvil tiene que poder desplazarse él solo ──────────────────────────
     Antes de esto: al abrir el menú, body.mobile-menu-open bloqueaba el scroll de
     toda la página (para que no se viera la portada moviéndose detrás), pero
     .mobile-nav no tenía scroll propio —«overflow-y: visible», sin límite de
     altura—. Con el segundo nivel desplegado el contenido medía más que la
     pantalla, el body no podía moverse, y lo que sobraba por abajo (el «Ver
     todas las hermandades», por ejemplo) quedaba fuera de la pantalla sin
     ninguna forma de llegar a ello. Comprobado antes de tocar nada: con
     «Hermandades» desplegada el menú medía 1147px en una pantalla de 812px.

     Con el menú abierto, .site-header pasa de fijo-arriba (sticky) a ocupar la
     pantalla entera y en columna: la barra (.header-shell) conserva su alto de
     siempre, y .mobile-nav se queda con el resto —flex: 1 1 auto— y su propio
     scroll. Así da igual cuánto crezca el menú en el futuro: nunca puede volver
     a quedarse sin sitio para desplazarse. */
  body.mobile-menu-open .site-header {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
  }

  body.mobile-menu-open .header-shell {
    flex: 0 0 auto;
  }

  body.mobile-menu-open .mobile-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .hero-grid,
  .home-hero .hero-grid,
  .city-layout,
  .split-grid,
  .feature-grid,
  .admin-grid,
  .detail-hero__grid,
  .detail-layout,
  .split-heading,
  .media-layout,
  .heritage-layout {
    grid-template-columns: 1fr;
  }

  .mission-board,
  .hero-countdown {
    max-width: 620px;
  }

  .result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-strip,
  .feature-tiles,
  .spotlight-grid,
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .craft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* La ficha principal sigue ocupando 2 filas también en tablet (2 columnas en vez de
     3): con un número impar de fichas de más (5 en total), una sola columna se quedaba
     coja abajo, con una ficha suelta y un hueco vacío al lado. */
  .craft-grid .spotlight-card-main {
    grid-row: span 2;
  }

  .premium-grid,
  .guide-grid,
  .city-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* El selector con #interes pesa más que .premium-grid a secas (id contra clase), así
     que hay que volver a bajarlo aquí a 2 columnas o se quedaría en 4 aunque no quepan. */
  #interes .premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .heritage-layout {
    gap: 32px;
  }

  .heritage-layout .premium-card {
    max-width: 100%;
    justify-self: stretch;
  }

  .mini-grid {
    grid-column: auto;
  }

  .detail-side {
    position: static;
  }

  .footer-main,
  .footer-secondary {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .directory-hero {
    padding-top: 120px;
  }

  body[data-directory-type] .directory-grid,
  body[data-directory-type="brotherhoods"] .directory-grid,
  body[data-directory-type="museums"] .directory-grid,
  .directory-grid {
    grid-template-columns: 1fr;
  }

  .directory-results-head {
    align-items: start;
    flex-direction: column;
  }

  .directory-card a {
    grid-template-columns: 52px 1fr;
    padding: 18px;
  }

  .directory-card--photo a {
    min-height: 0 !important;
    height: 100% !important;
    padding: 16px;
  }

  .directory-thumb {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .shell {
    width: min(100% - 24px, var(--max));
  }

  .hero {
    min-height: calc(100svh - 120px);
  }

  .hero-grid {
    gap: 34px;
    padding-block: 54px 34px;
  }

  h1 {
    font-size: clamp(3rem, 18vw, 4.6rem);
  }

  .search-panel {
    grid-template-columns: auto 22px minmax(0, 1fr) auto;
    grid-template-areas:
      "select icon input clear"
      "submit submit submit submit";
    row-gap: 10px;
    padding: 14px;
    border-radius: 22px;
  }

  .search-type-select {
    max-width: 108px;
  }

  .search-panel button {
    width: 100%;
  }

  .metric-grid,
  .result-grid,
  .stats-strip,
  .feature-tiles,
  .premium-grid,
  .spotlight-grid,
  .resource-grid,
  .guide-grid,
  .city-cloud,
  .mini-grid {
    grid-template-columns: 1fr;
  }

  #interes .premium-grid {
    grid-template-columns: 1fr;
  }

  .media-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    width: 100%;
    min-width: 0;
  }

  .media-layout__left,
  .media-layout__right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .home-momentos {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .home-momentos__grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 2px 2px 14px;
    margin: 0;
    scrollbar-width: none;
  }

  .home-momentos__grid::-webkit-scrollbar {
    display: none;
  }

  .home-momento-card {
    flex: 0 0 150px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    scroll-snap-align: start;
  }

  .video-stage {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .video-stage .video-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
  }

  .video-meta {
    padding: 16px 4px 0;
  }

  .countdown-card {
    padding: 28px 18px 32px;
  }

  .hero-countdown {
    display: block;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }

  .countdown-grid div + div::before {
    display: none;
  }

  .countdown-grid strong {
    font-size: clamp(3.2rem, 18vw, 5.4rem);
  }

  .mission-board {
    display: none;
  }

  .portal-stats {
    margin-top: 0;
  }

  .stats-strip div {
    min-height: 104px;
    padding: 22px;
  }

  .section {
    padding-block: 78px;
  }

  .section-tight {
    padding-top: 70px;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .title-lockup {
    align-items: flex-start;
  }

  .detail-title-lockup {
    display: grid;
  }

  .title-icon {
    width: 72px;
    border-radius: 20px;
  }

  .title-icon-large {
    width: 96px;
    border-radius: 24px;
  }

  .tile-image,
  .resource-card .tile-image,
  .guide-card .tile-image {
    width: min(280px, 76vw);
    height: auto;
    margin-bottom: 22px;
  }

  .resource-card .tile-image,
  .guide-card .tile-image {
    width: min(280px, 76vw);
  }

  .feature-tile-large .tile-image,
  .spotlight-card-main .tile-image {
    width: min(280px, 76vw);
  }

  .footer-shell {
    padding-block: 54px 28px;
  }

  .footer-main {
    gap: 42px;
    padding-bottom: 42px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 32px !important;
  }

  .footer-secondary {
    gap: 34px;
    padding-block: 36px;
  }

  .partner-grid {
    grid-template-columns: 1fr;
  }

  .accessibility-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .footer-bottom {
    padding-top: 22px;
  }

  .entity-card,
  .data-panel,
  .weather-card,
  .video-card,
  .detail-item {
    border-radius: 22px;
  }

  .entity-card,
  .weather-card,
  .video-card,
  .data-panel,
  .detail-item {
    padding: 22px;
  }

  .detail-hero {
    padding-block: 76px 48px;
  }

  .detail-hero__grid,
  .detail-layout,
  .feature-grid {
    gap: 32px;
  }

  .detail-list {
    gap: 16px;
  }

  .feature-tile,
  .premium-card,
  .spotlight-card,
  .resource-card,
  .guide-card {
    min-height: 0;
  }

  .video-stage .video-frame {
    min-height: 260px;
  }

  .timeline article,
  .admin-row,
  .detail-item,
  .detail-item dl {
    grid-template-columns: 1fr;
  }

  .footer-main,
  .footer-secondary {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .countdown-card::before {
    display: none;
  }

  .magnetic-card,
  .hero-countdown,
  .cinematic-copy {
    transform: none;
  }
}

/* Directorio: Mapa y Filtros Especiales */
.directory-hero {
  min-height: auto;
  padding: 150px 0 0 !important;
  border-bottom: none !important;
}

.directory-hero h1 {
  margin-bottom: 80px !important;
}

.directory-hero p {
  margin-bottom: 80px !important;
}

.directory-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0 !important;
  margin-bottom: 80px !important;
}

.directory-map-section {
  padding: 0 0 80px;
}

.directory-map-container {
  height: 480px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  z-index: 10;
  background-color: #f7f7f7;
}

.btn-clear-filters {
  width: 100%;
  min-height: 52px;
  background-color: #d7172f;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.15s;
  margin-top: 10px;
}

.btn-clear-filters:hover {
  background-color: #b51224;
}

.btn-clear-filters:active {
  transform: scale(0.98);
}

@media (max-width: 768px) {
  .directory-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* City master record ------------------------------------------------------ */
.city-master-hero {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #070707;
}

.city-master-hero::before,
.city-master-hero::after {
  display: none;
}

.city-master-hero__media {
  display: none;
}

.city-master-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px) clamp(30px, 4vw, 50px);
}

.city-master-hero__copy {
  max-width: 100%;
}

.city-header-lockup {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 28px);
  margin-top: 14px;
}

.city-header-image-wrapper {
  flex: 0 0 clamp(96px, 15vw, 136px);
  width: clamp(96px, 15vw, 136px);
  height: clamp(96px, 15vw, 136px);
  border-radius: clamp(18px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #111;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 260ms var(--ease-out, ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .city-header-image-wrapper:hover {
    transform: scale(1.03);
  }
}

.city-header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.city-header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.city-header-text .eyebrow {
  margin: 0;
}

.city-header-text h1 {
  margin: 4px 0 0;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.city-header-text .city-location {
  margin: 8px 0 0;
}

@media (max-width: 480px) {
  .city-header-lockup {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .city-header-image-wrapper {
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
  }
}

.city-master-hero .eyebrow {
  margin-top: 18px;
}

.city-location {
  margin: 14px 0 0;
  color: #f1f1f3;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
}

.city-master-hero .hero-lead {
  max-width: 66ch;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}

.city-recognition {
  display: inline-flex;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 10, 12, 0.58);
  font-size: 0.78rem;
  font-weight: 800;
  backdrop-filter: blur(14px);
}

.city-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.city-hero-meta span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(10, 10, 12, 0.48);
  font-size: 0.8rem;
  backdrop-filter: blur(10px);
}

.city-hero-summary {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(12, 12, 14, 0.74);
  backdrop-filter: blur(22px) saturate(1.05);
}

.city-hero-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: rgba(255, 255, 255, 0.12);
}

.city-hero-summary dl div {
  min-height: 126px;
  padding: 20px;
  background: rgba(16, 16, 18, 0.94);
}

.city-hero-summary dt {
  color: #a7a7ae;
  font-size: 0.78rem;
}

.city-hero-summary dd {
  margin: 10px 0 0;
  color: #f7f7f8;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.city-section-heading {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.city-section-heading h2 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.city-section-heading p {
  max-width: 68ch;
  margin: 0;
  color: #aaaab1;
  line-height: 1.5;
  text-wrap: pretty;
}

.city-data-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

.city-data-item {
  min-height: 128px;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-radius: 14px;
  background: #141416;
  box-shadow: none;
}

.city-data-item span {
  color: #9d9da5;
  font-size: 0.73rem;
  letter-spacing: 0.06em;
}

.city-data-item strong {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.city-overview-section {
  border-block: none !important;
  background: #050505 !important;
}

/* Alternancia de tonos y rayitas finas de borde para las 12 secciones */
#city-overview-section {
  background: #050505 !important;
  border-block: none !important;
}

#city-toc-section {
  background: #0a0a0d !important;
  border-block: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#city-fast-facts {
  background: #050505 !important;
  border-block: none !important;
}

#city-days-section {
  background: #0a0a0d !important;
  border-block: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#city-brotherhoods-section {
  background: #050505 !important;
  border-block: none !important;
}

#city-history-section {
  background: #0a0a0d !important;
  border-block: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#city-museums-section {
  background: #050505 !important;
  border-block: none !important;
}

#city-posters-section {
  background: #0a0a0d !important;
  border-block: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#city-curiosity-section {
  background: #050505 !important;
  border-block: none !important;
}

#city-weather-section {
  background: #0a0a0d !important;
  border-block: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#city-related-section {
  background: #050505 !important;
  border-block: none !important;
}

#city-sources-section {
  background: #0a0a0d !important;
  border-block: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.city-overview-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.48fr) minmax(0, 1fr);
  gap: clamp(34px, 7vw, 100px);
  align-items: start;
}

.city-overview-copy {
  max-width: 76ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
}

.city-rich-text {
  color: #b7b7bd;
  line-height: 1.68;
}

.city-rich-text > :first-child { margin-top: 0; }
.city-rich-text > :last-child { margin-bottom: 0; }
.city-rich-text p { margin: 0 0 1.05em; }

/* Texto largo de las fichas (artesano, museo, fotógrafo, pregonero, hermandad):
   mismo ritmo de párrafo que las fichas de ciudad, para que un texto escrito en
   varios párrafos se lea como tal y no como un bloque corrido. */
.detail-card__body {
  color: #b7b7bd;
  line-height: 1.68;
  white-space: pre-line;
}

.detail-card__body > :first-child { margin-top: 0; }
.detail-card__body > :last-child { margin-bottom: 0; }
.detail-card__body p { margin: 0 0 1.05em; }

.detail-card__body ul,
.detail-card__body ol {
  margin: 0 0 1.05em;
  padding-left: 1.4em;
}

.detail-card__body ul {
  list-style: disc;
}

.detail-card__body ol {
  list-style: decimal;
}

.detail-card__body li { margin-bottom: 0.35em; }

.detail-card__section {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-card__section-title {
  margin: 0 0 0.85rem;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Los datos sueltos de una ficha (fotógrafo, museo, pregonero, artesano, músico).
   Se quedaron sin estilo y salían como una lista de definiciones cruda, con la
   sangría del navegador; el portal presenta este tipo de dato en tarjetas, igual que
   en la ficha de hermandad. */
.detail-card__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
}

.detail-card__specs > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  background: rgba(18, 18, 20, 0.88);
  transition: border-color 180ms ease, background 180ms ease;
}

.detail-card__specs dt {
  color: #9a9aa1;
  font-size: 0.75rem;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-card__specs dd {
  margin: 0;
  color: #f7f7f8;
  /* Un nombre largo de estudio no puede reventar la tarjeta ni salirse a la derecha. */
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.detail-card__specs dd a {
  color: inherit;
  text-decoration: none;
}

.detail-card__specs dd a::after {
  content: " \2197";
  color: #d7172f;
  font-size: 0.72em;
}

.detail-card__specs dd a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.detail-card__specs dd a:focus-visible {
  border-radius: 4px;
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .detail-card__specs > div:hover {
    border-color: rgba(215, 23, 47, 0.42);
    background: rgba(24, 24, 27, 0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-card__specs > div { transition: none; }
}

/* Galería de fotos de una ficha (hermandad o fotógrafo). */
.record-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin-top: 22px;
}

.record-gallery__item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0d0d0f;
}

.record-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.record-gallery__item figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px 12px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
}

.record-gallery__item figcaption a {
  color: inherit;
}

.city-weather-widget {
  margin-top: 0;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 16px;
  background: #0d0d0f;
  box-shadow: none;
}

.city-weather-main {
  grid-template-columns: minmax(180px, 0.48fr) minmax(0, 1fr);
  gap: 24px;
}

.city-weather-info {
  align-items: flex-start;
}

.city-weather-details {
  gap: 8px;
}

.weather-detail-item {
  min-height: 92px;
  justify-content: center;
  border-radius: 10px;
  background: #171719;
}

.city-weather-hourly {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 102px;
  gap: 8px;
  margin-top: 24px;
  padding-block: 20px;
  overflow-x: auto;
  border-block: 1px solid var(--line);
  scrollbar-width: thin;
}

.city-weather-hourly article {
  display: grid;
  min-height: 132px;
  place-items: center;
  gap: 7px;
  padding: 12px 8px;
  border-radius: 10px;
  background: #171719;
  text-align: center;
}

.city-weather-hourly time,
.city-weather-hourly small {
  color: #9d9da5;
  font-size: 0.76rem;
}

.city-weather-hourly img {
  filter: brightness(0) invert(1);
}

.city-weather-days {
  display: grid;
  margin-bottom: 22px;
}

.city-weather-days div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) repeat(3, auto);
  gap: 18px;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid var(--line);
  color: #aaaab1;
}

.city-weather-days strong,
.city-weather-days b {
  color: #f7f7f8;
}

.city-brotherhood-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 1200px) {
  .city-brotherhood-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .city-brotherhood-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .city-brotherhood-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 1200px) and (min-width: 1024px) {
  .city-brotherhood-grid:not(.show-all) .city-brotherhood-card:nth-child(n+13) {
    display: none;
  }
}

.city-brotherhood-card {
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #151517;
  transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), 
              background 200ms cubic-bezier(0.23, 1, 0.32, 1), 
              transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.city-brotherhood-card > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  gap: 14px;
  padding: 20px 16px;
  color: inherit;
}

.city-brotherhood-card > a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}

@media (hover: hover) and (pointer: fine) {
  .city-brotherhood-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  }
}

.city-brotherhood-card:active {
  transform: translateY(-2px) scale(0.97);
  transition: transform 80ms ease-out;
}

@media (max-width: 768px) {
  .city-brotherhood-card {
    aspect-ratio: auto;
    min-height: 110px;
  }
  .city-brotherhood-card > a {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 16px;
    padding: 16px;
  }
  .city-brotherhood-card:active {
    transform: scale(0.97);
  }
}

.city-brotherhood-card .brotherhood-shield-container {
  width: clamp(54px, 6vw, 68px);
  height: clamp(54px, 6vw, 68px);
  margin: 0;
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: none !important;
}

.brotherhood-shield-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.city-brotherhood-card .brotherhood-shield-container b {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--red);
}

.city-brotherhood-card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 4px;
}

@media (max-width: 768px) {
  .city-brotherhood-card__copy {
    align-items: flex-start;
  }
}

.city-brotherhood-card__copy strong {
  color: #f7f7f8;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.city-brotherhood-card__copy small {
  color: #a2a2aa;
  font-size: 0.8rem;
  line-height: 1.35;
}

.city-brotherhood-card__copy em {
  color: #88888f;
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.35;
  margin-top: 2px;
}

/* ==========================================================================
   Jornadas de Pasión & Patrimonio Visitable (Grid layouts and Interactive modal)
   ========================================================================== */

/* Universal primary-link & btn-weather-link red gradient overrides */
.primary-link,
.btn-weather-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 28px !important;
  background: linear-gradient(180deg, #d71931, #b90f24) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(215, 23, 47, 0.2) !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}

.primary-link:hover,
.btn-weather-link:hover {
  background: linear-gradient(180deg, #ef263f, #d71931) !important;
  box-shadow: 0 12px 28px rgba(215, 23, 47, 0.3) !important;
  transform: translateY(-2px) !important;
}

.primary-link:active,
.btn-weather-link:active {
  transform: scale(0.97) !important;
  box-shadow: 0 4px 10px rgba(215, 23, 47, 0.15) !important;
}

.city-weather-narrative {
  margin: 22px 0 18px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e2e8;
  font-size: 1.02rem;
  line-height: 1.68;
}

.city-weather-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.city-weather-aemet-attribution {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #8e8e95;
  font-size: 0.82rem;
  font-weight: 500;
}

.city-weather-aemet-attribution svg {
  flex-shrink: 0;
  color: #a0a0a8;
}

@media (max-width: 640px) {
  .city-weather-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .city-weather-footer .btn-weather-link {
    width: 100%;
  }

  .city-weather-days div {
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    padding-block: 10px;
  }
}

/* Grids for days and museums */
.city-days-grid,
.city-museums-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 1200px) {
  .city-days-grid,
  .city-museums-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .city-days-grid,
  .city-museums-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .city-days-grid,
  .city-museums-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Square Cards styling */
.city-day-card,
.city-museum-card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
  box-sizing: border-box;
}

.city-day-card:hover,
.city-museum-card:hover {
  transform: translateY(-6px);
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(215, 23, 47, 0.4);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.city-day-card:active,
.city-museum-card:active {
  transform: scale(0.96);
}

/* Icon containers */
.day-icon-container,
.museum-icon-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  color: #111115;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 1.3rem;
  font-weight: 850;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.day-icon-container b {
  color: var(--red);
}

/* Custom Cofrade Day Icon Color Variations */

/* 1. Purple / Violet for Jueves Santo, Madrugá, and Viernes Santo */
.day-icon-container.day-icon-purple,
.city-day-card[data-day-type="purple"] .day-icon-container {
  background: #6b21a8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(107, 33, 168, 0.4) !important;
}

.day-icon-container.day-icon-purple b,
.city-day-card[data-day-type="purple"] .day-icon-container b {
  color: #ffffff !important;
}

/* 2. Intense Gold for Domingo de Resurrección */
.day-icon-container.day-icon-gold,
.city-day-card[data-day-type="gold"] .day-icon-container {
  background: linear-gradient(135deg, #facc15, #ca8a04) !important;
  color: #000000 !important;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.4) !important;
}

/* Table of Contents (Tabla de Contenidos) - Apple & Emil Design Engineering Style */
.city-toc-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 24px 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.city-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.city-toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #e4e4e7 !important;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.3;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, border-color 160ms ease;
}

.city-toc-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: #d71931;
  font-feature-settings: "tnum";
}

@media (hover: hover) and (pointer: fine) {
  .city-toc-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(215, 23, 47, 0.4);
    color: #ffffff !important;
    transform: translateY(-2px);
  }
}

.city-toc-link:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

/* Adaptación del Índice de contenidos mejorado para Guía de Pasión y páginas editoriales */
.pagina-texto .city-toc-card {
  margin: 2.2em 0 2.8em;
}

.city-toc-card .city-section-heading {
  margin-bottom: 8px;
}

.city-toc-card .city-section-heading h2,
.pagina-texto .city-toc-card .city-section-heading h2 {
  max-width: 920px;
  margin: 0 !important;
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #ffffff;
}

.city-toc-card .city-section-heading p,
.pagina-texto .city-toc-card .city-section-heading p {
  max-width: 68ch;
  margin: 6px 0 0;
  color: #aaaab1;
  font-size: 0.95rem;
  line-height: 1.5;
}

.day-icon-container.day-icon-gold b,
.city-day-card[data-day-type="gold"] .day-icon-container b {
  color: #000000 !important;
}

.museum-icon-container b {
  color: #111115;
}

/* Card content styles */
.city-day-card__copy,
.city-museum-card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.city-day-card__copy strong,
.city-museum-card__copy strong {
  font-size: 0.98rem;
  font-weight: 650;
  color: #f7f7f8;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.city-day-card__copy small,
.city-museum-card__copy small {
  font-size: 0.8rem;
  color: #a2a2aa;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* Museum visit button styling inside card */
.museum-visit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #d71931, #b90f24);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 8px;
  margin-top: 10px;
  box-shadow: 0 4px 10px rgba(215, 23, 47, 0.2);
  transition: transform 0.2s, background-color 0.2s;
}

.city-museum-card:hover .museum-visit-btn {
  background: linear-gradient(180deg, #ef263f, #d71931);
}

.museum-visit-btn.pending {
  background: rgba(255, 255, 255, 0.05);
  color: #a2a2aa !important;
  box-shadow: none;
  cursor: default;
}

.city-museum-card a,
.city-museum-card .no-link-museum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

/* Modal Window styles */
.city-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.city-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.city-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 5, 5, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.city-modal-content {
  position: relative;
  width: 90%;
  max-width: 580px;
  max-height: 80vh;
  background: #0f0f11;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 30px;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.93) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.city-modal.open .city-modal-content {
  transform: scale(1) translateY(0);
}

.city-modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  padding: 0;
}

.city-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.08);
}

.city-modal-close:active {
  transform: scale(0.95);
}

.city-modal h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}

.modal-day-subtitle {
  color: #a2a2aa;
  font-size: 0.9rem;
  margin: 0 0 24px;
}

.modal-bh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 480px) {
  .modal-bh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.modal-bh-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
  min-width: 0;
}

.modal-bh-card:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(215, 23, 47, 0.3);
  transform: translateY(-2px);
}

.modal-bh-card:active {
  transform: scale(0.98);
}

.modal-bh-shield {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #ffffff;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.modal-bh-shield img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.modal-bh-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modal-bh-info strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-bh-info small {
  font-size: 0.75rem;
  color: #ff8d9d;
  font-weight: 500;
  margin-top: 2px;
}

/* Modern Horizontal Timeline/Timelapse Layout styling */
.city-timeline-wrapper {
  position: relative;
  margin-top: 30px;
  padding: 0 0 20px;
  overflow: hidden;
}

.city-timeline-line {
  position: absolute;
  top: 70px; /* Centered relative to the dots height position */
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(215, 23, 47, 0.4) 15%, rgba(215, 23, 47, 0.4) 85%, rgba(255, 255, 255, 0.02) 100%);
  z-index: 1;
}

.city-timeline-list {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 28px;
  padding: 12px 24px 32px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 23, 47, 0.3) rgba(255, 255, 255, 0.02);
}

.city-timeline-list::-webkit-scrollbar {
  height: 6px;
}

.city-timeline-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 999px;
  margin: 0 24px;
}

.city-timeline-list::-webkit-scrollbar-thumb {
  background: rgba(215, 23, 47, 0.3);
  border-radius: 999px;
}

.city-timeline-list::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/* Timeline item laid out vertically for horizontal scrolling flow */
.city-timeline-item {
  flex: 0 0 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .city-timeline-item {
    flex: 0 0 280px;
  }
}

.city-timeline-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  width: 100%;
}

.city-timeline-time {
  font-family: inherit;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  transition: color 0.2s, font-size 0.2s;
}

/* Extra large red style requested for history timeline years */
.city-timeline-time.history-time-large {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: var(--red) !important;
  text-shadow: 0 4px 12px rgba(215, 23, 47, 0.2);
}

.city-timeline-badge {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
  width: 100%;
}

.city-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 3px solid #050505;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s ease,
              box-shadow 0.25s ease;
  z-index: 3;
}

.city-timeline-item:hover .city-timeline-dot {
  background-color: var(--red);
  transform: scale(1.4);
  box-shadow: 0 0 14px var(--red), 0 0 0 2px rgba(215, 23, 47, 0.4);
}

.city-timeline-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 24px;
  width: 100%;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  box-sizing: border-box;
  text-align: left;
}

.city-timeline-item:hover .city-timeline-card {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(215, 23, 47, 0.3);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.city-timeline-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.35;
}

/* Red primary-link styling support for button */
button.primary-link {
  border: none;
  font: inherit;
  color: #fff;
  padding: 12px 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.city-brotherhood-more {
  grid-column: 1 / -1;
  margin-top: 16px;
  text-align: center;
}

.city-map-intro {
  max-width: none;
  margin-top: 0;
  padding: clamp(28px, 5vw, 54px);
  border-radius: 14px;
  background: #111113;
}

.city-map-intro p {
  max-width: 62ch;
  margin-inline: auto;
}

.feature-band .weather-card,
.feature-band .video-card {
  min-height: 0;
  padding: 26px;
  border-radius: 14px;
  background: #111113;
  box-shadow: none;
}

#city-editorial-section .detail-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.city-editorial-list {
  position: relative;
  display: grid;
  gap: 10px;
  max-height: 640px;
  overflow: hidden;
}

.city-editorial-list:not(.is-expanded)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 88px;
  pointer-events: none;
  background: linear-gradient(transparent, #050505);
}

.city-editorial-list.is-expanded {
  max-height: none;
}

.city-editorial-list.is-expanded::after {
  display: none;
}

.city-editorial-item {
  display: grid;
  grid-template-columns: minmax(54px, 82px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #151517;
}

.city-editorial-item time {
  color: #f0a4ad;
  font-weight: 800;
}

.city-editorial-item h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.city-editorial-item .city-rich-text {
  font-size: 0.92rem;
  line-height: 1.58;
}

.city-editorial-source {
  margin: 12px 0 0;
  color: #8f8f97;
  font-size: 0.78rem;
}

.city-editorial-toggle {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 14px auto 0;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #fff;
  background: #1a1a1d;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.city-editorial-toggle[aria-expanded="true"] b {
  transform: rotate(180deg);
}

.poster-gallery-wrapper {
  margin-top: 0;
}

.poster-gallery-scroll {
  gap: 14px;
  padding: 4px 2px 16px;
  scroll-snap-type: x mandatory;
}

.poster-card {
  flex-basis: clamp(220px, 25vw, 310px);
  border-radius: 14px;
  background: #111113;
  box-shadow: none;
  scroll-snap-align: start;
  transition: border-color 160ms ease, transform 160ms ease;
}

.poster-card:hover {
  transform: translateY(-2px);
}

.poster-img-wrap {
  aspect-ratio: 0.68;
  background: #09090a;
}

.poster-img-wrap img {
  object-fit: contain;
  transition: none;
}

.poster-card:hover .poster-img-wrap img {
  transform: none;
}

.poster-info {
  padding: 13px 14px;
}

.gallery-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  transition: background 140ms ease, transform 100ms ease;
}

.plan-grid {
  gap: 14px;
  margin-top: 0;
}

.plan-card {
  min-height: 230px;
  padding: 24px;
  border-radius: 14px;
  background: #111113;
  box-shadow: none;
}

.plan-card h3 {
  font-size: 1.22rem;
}

.btn-plan-link {
  min-height: 44px;
  border-radius: 9px;
}

.city-sources-panel {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0e0e10;
}

.city-sources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.city-sources-grid article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #151517;
}

.city-sources-grid h3 {
  margin: 0;
  font-size: 1rem;
}

.city-sources-grid p {
  margin: 8px 0 0;
  color: #a7a7ae;
  line-height: 1.55;
}

.city-related-section {
  border-top: 1px solid var(--line);
}

.city-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.city-related-grid a {
  display: flex;
  min-height: 156px;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  background: #121214;
  transition: border-color 150ms ease, background 150ms ease, transform 100ms ease;
}

.city-related-grid a:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: #171719;
}

.city-related-grid a:active {
  transform: scale(0.985);
}

.city-related-grid small {
  color: #f08b98;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.city-related-grid strong {
  margin-top: auto;
  color: #f7f7f8;
  line-height: 1.2;
}

.city-related-grid span {
  margin-top: 7px;
  color: #9999a1;
  font-size: 0.83rem;
  line-height: 1.4;
}

.city-related-grid__accent {
  border-color: rgba(215, 23, 47, 0.5) !important;
  background: #261013 !important;
}

main:has(.city-master-hero) .reveal {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .city-master-hero__grid,
  .city-overview-layout {
    grid-template-columns: 1fr;
  }

  .city-hero-summary {
    max-width: 680px;
  }

  .city-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #city-editorial-section .detail-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .city-master-hero {
    min-height: auto;
  }

  .city-master-hero__grid {
    padding-block: 58px 34px;
  }

  .city-master-hero h1 {
    font-size: clamp(3.25rem, 17vw, 5rem);
  }

  .city-master-hero.has-image::before {
    opacity: 0.48;
  }

  .city-master-hero::after {
    background: rgba(0, 0, 0, 0.68);
  }

  .city-hero-summary dl,
  .city-data-grid,
  .city-weather-details,
  .city-sources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .city-data-item {
    min-height: 110px;
    padding: 16px;
  }

  .city-weather-main {
    grid-template-columns: 1fr;
  }

  .city-weather-days div {
    grid-template-columns: minmax(90px, 1fr) auto;
    gap: 8px;
    padding-block: 10px;
  }

  .city-weather-days span,
  .city-weather-days small {
    display: none;
  }

  .city-related-grid {
    grid-template-columns: 1fr;
  }

  .city-editorial-item {
    grid-template-columns: 1fr;
  }

  .city-editorial-list {
    max-height: 580px;
  }

  .city-related-grid a {
    min-height: 132px;
  }
}

/* Directorio de ciudades: interfaz compacta, estable y accesible. */
/* ── El diseño de los directorios ───────────────────────────────────────────────────
   Todo esto estaba atado a body[data-directory-type="cities"], así que solo lo tenía la
   página de ciudades: las otras seis se quedaban con los estilos base y salían con otro
   tamaño de letra, otro color de etiqueta, otro radio en los desplegables y el recuento
   a 20px en vez de 36px. Eran 29 diferencias medidas entre ciudades y hermandades.

   Nada de esto era «de ciudades»: es el diseño del directorio. Se suelta para las siete
   páginas. Lo único que sigue atado a ciudades es el mapa, que solo ella tiene. */
body[data-directory-type] .breadcrumbs {
  padding-top: 28px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.875rem;
}

body[data-directory-type] .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-directory-type] .breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.3);
}

body[data-directory-type] .breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

body[data-directory-type] .directory-hero {
  min-height: auto;
  padding: clamp(54px, 8vw, 104px) 0 clamp(46px, 7vw, 84px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-directory-type] .detail-hero-grid {
  align-items: end;
  gap: clamp(36px, 6vw, 88px);
}

body[data-directory-type] .detail-hero-copy h1 {
  max-width: 760px;
  margin: 10px 0 22px;
  font-size: clamp(2.65rem, 6vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

body[data-directory-type] .detail-hero-copy > p:last-child {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.65;
}

body[data-directory-type] .directory-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-directory-type] .directory-kpis article {
  min-width: 0;
  min-height: 124px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

body[data-directory-type] .directory-kpis strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body[data-directory-type] .directory-kpis span {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
  line-height: 1.35;
}

body[data-directory-type] .directory-page {
  padding-block: var(--section-gap-tight) clamp(48px, 6vw, 80px);
}

.directory-map-section + .directory-page,
body[data-directory-type] .directory-map-section + .directory-page {
  padding-top: 0;
}

body[data-directory-type] .directory-layout {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

body[data-directory-type] .directory-filter-panel {
  position: sticky;
  top: 96px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #151515;
}

body[data-directory-type] .directory-filter-panel h2 {
  margin: 0 0 22px;
  font-size: 1.35rem;
}

body[data-directory-type] .directory-filter-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

body[data-directory-type] .directory-filter-form label,
body[data-directory-type] .directory-view-options label {
  display: grid;
  gap: 8px;
}

body[data-directory-type] .directory-filter-form label > span,
body[data-directory-type] .directory-view-options label > span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-directory-type] .directory-filter-form input,
body[data-directory-type] .directory-filter-form select,
body[data-directory-type] .directory-view-options select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 42px 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: #ffffff;
  background-color: #202020;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  box-sizing: border-box;
  cursor: pointer;
}

body[data-directory-type] .directory-filter-form input {
  background-image: none;
  padding: 0 18px;
}

body[data-directory-type] .btn-clear-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 160ms ease, border-color 160ms ease;
}

body[data-directory-type] .btn-clear-filters:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

body[data-directory-type] .btn-clear-filters:disabled {
  opacity: 0.38;
  cursor: default;
}

body[data-directory-type] .directory-results {
  min-width: 0;
}

body[data-directory-type] .directory-results-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body[data-directory-type] .directory-results-head h2 {
  margin: 0 0 6px;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
}

body[data-directory-type] #directory-count-inline {
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

body[data-directory-type] #directory-status {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
}

body[data-directory-type] .directory-view-options {
  display: flex;
  gap: 12px;
  flex: none;
}

body[data-directory-type] .directory-view-options label:first-child {
  width: 150px;
}

body[data-directory-type] .directory-view-options label:last-child {
  width: 92px;
}

body[data-directory-type] .directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-height: 300px;
}

body[data-directory-type] .directory-card--photo {
  position: relative;
  min-width: 0;
  min-height: 190px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: #191919;
}

body[data-directory-type] .directory-card--photo > a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 16px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 100%);
}

body[data-directory-type] .directory-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-directory-type] .directory-card--photo > a::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

body[data-directory-type] .directory-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
  margin-top: auto;
}

body[data-directory-type] .directory-card__content strong {
  position: relative;
  z-index: 2;
  display: block;
  overflow-wrap: anywhere;
  color: #ffffff !important;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.15;
  font-weight: 750;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

body[data-directory-type] .directory-card__content small {
  position: relative;
  z-index: 2;
  display: block;
  color: #ffffff !important;
  font-size: 0.88rem;
  opacity: 0.92;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

body[data-directory-type] .directory-card--photo > a:hover {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 100%);
}

body[data-directory-type] :is(a, button, input, select):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

body[data-directory-type] .directory-pagination {
  margin-top: 30px;
}

body[data-directory-type="cities"] .directory-map-section {
  padding: 0 0 var(--section-gap-tight);
}

/* Sin el botón de «Abrir mapa» esto deja de ser dos columnas enfrentadas y pasa a ser
   un encabezado normal. */
body[data-directory-type="cities"] .directory-map-intro {
  padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
  background: #151515;
}

body[data-directory-type="cities"] .directory-map-intro h2 {
  margin: 5px 0 8px;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
}

body[data-directory-type="cities"] .directory-map-intro p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

/* La altura está fija a propósito y desde el primer momento: el mapa se enciende
   después de pintar la página, y si el hueco no estuviera reservado, todo lo de abajo
   daría un salto al aparecer. Eso es CLS, y Google lo cobra. */
body[data-directory-type="cities"] .directory-map-container {
  height: min(62vh, 560px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0 0 22px 22px;
  background: #151515;
}

body[data-directory-type="cities"] .directory-map-container[hidden] {
  display: none;
}

/* Solo se ve cuando el mapa manda. Explica por qué el listado se ha encogido y ofrece
   la salida en el mismo sitio donde surge la duda. */
.directory-map-filtro {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.directory-map-filtro button {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--red-soft);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.directory-map-filtro button:hover {
  color: var(--text);
}

body[data-directory-type] .directory-noscript {
  padding-block: 24px;
}

@media (max-width: 1040px) {
  body[data-directory-type] .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-directory-type] .breadcrumbs {
    padding-top: 20px;
  }

  body[data-directory-type] .detail-hero-grid,
  body[data-directory-type] .directory-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-directory-type] .directory-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-directory-type] .directory-kpis article {
    min-height: 104px;
  }

  body[data-directory-type] .directory-filter-panel {
    position: static;
    padding: clamp(18px, 4vw, 24px);
  }

  body[data-directory-type] .directory-filter-form {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }

  body[data-directory-type] .directory-filter-form label:first-child,
  body[data-directory-type] .btn-clear-filters {
    grid-column: 1 / -1;
  }

  body[data-directory-type] .directory-results-head {
    align-items: start;
    flex-direction: column;
  }

  body[data-directory-type] .directory-view-options {
    width: 100%;
  }

  body[data-directory-type] .directory-view-options label:first-child,
  body[data-directory-type] .directory-view-options label:last-child {
    width: auto;
    flex: 1;
  }

  body[data-directory-type="cities"] .directory-map-intro {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  body[data-directory-type] .directory-filter-form,
  body[data-directory-type] .directory-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-directory-type] .directory-filter-form label:first-child,
  body[data-directory-type] .btn-clear-filters {
    grid-column: auto;
  }

  body[data-directory-type] .directory-card--photo {
    aspect-ratio: 16 / 11;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-directory-type] .directory-card--photo,
  body[data-directory-type] .directory-card--photo > a {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .city-recognition,
  .city-hero-meta span,
  .city-hero-summary {
    backdrop-filter: none;
    background: #111113;
  }
}

/* Frontend design system refinement: quieter materials, compact hierarchy and physical feedback. */
:root {
  --max: 1280px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.3);
}

body {
  background: #050505;
}

body::before {
  display: none;
}

.site-header {
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(20px) saturate(1.15);
}

.header-shell {
  min-height: 68px;
}

.brand-logo {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.mega-trigger {
  min-height: 38px;
  padding-inline: 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 100ms ease;
}

.mega-trigger:active,
.primary-link:active,
.search-panel button:active,
.chip:active {
  transform: scale(0.97);
}

.mega-panel {
  top: 68px;
  padding-block: 26px 32px;
  background: rgba(12, 12, 14, 0.92);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(28px) saturate(1.08);
  animation: megaPanelIn 170ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mega-panel::before {
  background: linear-gradient(90deg, rgba(215, 23, 47, 0.12), transparent 38%);
}

.mega-feature {
  min-height: 220px;
}

.mega-feature h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  line-height: 1.02;
}

.mega-feature p:not(.eyebrow) {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

.mega-column {
  gap: 12px;
}

.mega-column a strong {
  font-size: 0.94rem;
}

.mega-column a span {
  font-size: 0.82rem;
}

.mega-red-link,
.primary-link {
  border-radius: 9px;
  background: var(--red);
  box-shadow: 0 10px 24px rgba(215, 23, 47, 0.2);
  transition: background 140ms ease, transform 100ms ease, box-shadow 140ms ease;
}

.mega-red-link:hover,
.primary-link:hover {
  background: #ef263f;
  box-shadow: 0 14px 30px rgba(215, 23, 47, 0.26);
}

/* «Registrar cofradía» dentro de Hermandades → Directorio, en ámbar para
   distinguirlo de los botones rojos (mismo tono que el CTA ámbar del móvil),
   con más aire respecto a «Pregoneros» de encima. */
.mega-red-link {
  margin-top: 12px;
  background: var(--amber);
  color: #1a1200 !important;
  box-shadow: 0 12px 26px rgba(243, 179, 67, 0.28);
}

.mega-red-link:hover {
  background: #f5bd5c;
  box-shadow: 0 16px 32px rgba(243, 179, 67, 0.34);
}

.home-hero {
  min-height: clamp(580px, calc(100svh - 128px), 720px);
}

.home-hero .hero-grid {
  min-height: inherit;
  grid-template-columns: minmax(0, 0.94fr) minmax(350px, 0.76fr);
  gap: clamp(34px, 4vw, 54px);
  padding-block: 42px 34px;
}

.home-hero h1 {
  max-width: 700px;
  font-size: clamp(3.7rem, 7.8vw, 6.65rem);
  line-height: 0.94;
}

.hero-lead {
  margin-top: 22px;
  font-size: clamp(1.02rem, 1.55vw, 1.2rem);
  line-height: 1.52;
}

.search-panel {
  min-height: 56px;
  margin-top: 30px;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.search-panel:focus-within {
  transform: none;
}

.search-panel button,
.chip {
  border-radius: 9px;
}

.countdown-card {
  border-radius: 20px;
  background: #171719;
}

.countdown-card::before,
.countdown-card::after {
  display: none;
}

.hero-countdown {
  padding: clamp(24px, 3.2vw, 36px);
}

.hero-countdown .countdown-intro {
  margin-bottom: 18px;
}

.hero-countdown .countdown-grid {
  gap: 18px 14px;
  margin-top: 24px;
}

.hero-countdown .countdown-grid strong {
  font-size: clamp(2.9rem, 4.8vw, 4.8rem);
}

.countdown-copy {
  margin-top: 10px;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
}

.section {
  padding-block: clamp(76px, 8vw, 104px);
}

.section-heading {
  margin-bottom: 34px;
}

.entity-card,
.spotlight-card,
.guide-card,
.mini-grid article,
.plan-card,
.cta-panel {
  border-radius: 16px;
}

.entity-card {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.entity-card:hover {
  transform: translateY(-2px);
}

.reveal {
  transform: translateY(18px);
  transition: opacity 480ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes megaPanelIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (max-width: 980px) {
  .header-shell {
    min-height: 64px;
  }

  .home-hero {
    min-height: auto;
  }

  .home-hero .hero-grid {
    min-height: 0;
    padding-block: 56px;
  }

  .mobile-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .home-hero .hero-grid {
    padding-block: 44px 52px;
  }

  .home-hero h1 {
    font-size: clamp(3.25rem, 16vw, 5rem);
  }

  .search-panel {
    grid-template-columns: auto 20px minmax(0, 1fr) auto;
    grid-template-areas:
      "select icon input clear"
      "submit submit submit submit";
    row-gap: 10px;
    padding: 11px 14px;
  }

  .search-panel button {
    width: 100%;
  }

  .hero-countdown {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel {
    animation: none;
  }
}

@media (max-width: 480px) {
  .directory-kpis {
    grid-template-columns: 1fr !important;
  }
}

/* Public directories and records: shared, compact information architecture. */
.directory-hero {
  padding: clamp(64px, 7vw, 92px) 0 40px !important;
  background: #070707;
}

.directory-hero .detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: end;
}

.directory-hero .detail-hero-grid:has(> :only-child),
body[data-directory-type="artisans"] .directory-hero .detail-hero-grid,
body[data-directory-type="musicians"] .directory-hero .detail-hero-grid,
body[data-directory-type="photographers"] .directory-hero .detail-hero-grid {
  grid-template-columns: 1fr;
}

.directory-hero h1 {
  max-width: 900px;
  margin: 10px 0 0 !important;
  font-size: clamp(2.8rem, 5.5vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.directory-hero .detail-hero-copy > p:not(.eyebrow) {
  max-width: 68ch;
  margin: 22px 0 0 !important;
  color: #b6b6bc;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.directory-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--line);
}

.directory-kpis article {
  min-height: 116px;
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: #121214;
  box-shadow: none;
}

.directory-kpis strong {
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  letter-spacing: -0.025em;
}

.directory-kpis span {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.35;
}

.directory-map-section {
  padding: 24px 0 var(--section-gap-tight);
  background: #070707;
}

.directory-map-container {
  height: min(52vw, 480px);
  min-height: 340px;
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: none;
}

.directory-page {
  padding-block: 48px 96px;
}

.directory-layout {
  grid-template-columns: minmax(228px, 270px) minmax(0, 1fr);
  gap: 20px;
}

.directory-filter-panel,
.directory-results {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #111113;
  box-shadow: none;
}

.directory-filter-panel {
  top: 88px;
  padding: 22px;
}

.directory-filter-panel h2,
.directory-results-head h2 {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
}

.directory-filter-form {
  gap: 14px;
  margin-top: 20px;
}

.directory-filter-form label {
  gap: 7px;
  font-size: 0.9rem;
}

.directory-filter-form span {
  color: #b8b8be;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.directory-filter-form input,
.directory-filter-form select {
  min-height: 44px;
  padding-inline: 13px;
  border-color: #d8d8dc;
  border-radius: 9px;
  background: #f5f5f7;
  font-size: 0.92rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.directory-filter-form input:focus,
.directory-filter-form select:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 23, 47, 0.2);
}

.btn-clear-filters {
  min-height: 42px;
  margin-top: 4px;
  border-radius: 9px;
  font-size: 0.9rem;
  transition: background-color 140ms ease, transform 100ms ease;
}

.directory-results {
  min-width: 0;
  padding: 24px;
}

.directory-results-head {
  align-items: center;
  padding-bottom: 18px;
}

.directory-results-head p {
  margin-top: 6px;
  font-size: 0.9rem;
}

.directory-grid,
body[data-directory-type] .directory-grid,
body[data-directory-type="brotherhoods"] .directory-grid,
body[data-directory-type="museums"] .directory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.directory-card,
.directory-empty {
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: #18181a;
}

.directory-card {
  min-height: 260px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .directory-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.28);
    background: #1c1c1f;
  }
}

.directory-card:active {
  transform: scale(0.985);
}

.directory-card a {
  display: flex;
  min-height: 258px;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 20px;
}

.directory-card a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  border-radius: 13px;
}

.directory-card--photo a {
  min-height: 0 !important;
  height: 100% !important;
  justify-content: flex-end;
  padding: 16px;
}

.directory-card--photo a::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 28%, rgba(0, 0, 0, 0.88) 100%);
}

.directory-card--photo.has-fallback a::after {
  background: linear-gradient(145deg, #222226, #111113);
}

.directory-card--photo a::before {
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease;
}

.directory-card--photo a:hover::before {
  transform: scale(1.025);
}

.directory-card__content {
  margin-top: auto;
}

.directory-card strong,
.directory-card--media strong,
.directory-card--photo strong {
  color: #f7f7f8;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.directory-card small,
.directory-card--media small,
.directory-card--photo small {
  margin-top: 8px;
  color: #aaaab1;
  font-size: 0.86rem;
  line-height: 1.35;
}

.directory-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 14px;
  font-size: 1.55rem;
  overflow: hidden;
}

.directory-thumb--image {
  padding: 0;
  background: #18181b;
}

body[data-directory-type="preachers"] .directory-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.directory-card--preacher {
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
}

.directory-card--preacher a {
  min-height: 0 !important;
  height: 100% !important;
  width: 100%;
  padding: 16px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
}

.directory-card--preacher .directory-thumb {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  flex-shrink: 0;
}

.directory-card__preacher-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1px;
}

.directory-card__first-name {
  font-size: 0.95rem;
  color: #d4d4d8;
  line-height: 1.15;
}

.directory-card__last-name {
  font-size: 1.08rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.directory-card__city {
  font-size: 0.82rem;
  color: #a1a1aa;
  line-height: 1.2;
  margin-top: 2px;
}

.directory-card__province {
  font-size: 0.78rem;
  color: #71717a;
  line-height: 1.2;
}

.directory-card__year {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 4px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.directory-card--loading {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  pointer-events: none;
}

.directory-loading-media,
.directory-loading-copy i {
  display: block;
  border-radius: 9px;
  background: #252528;
  animation: directoryLoading 1.2s ease-in-out infinite alternate;
}

.directory-loading-media {
  width: 76px;
  height: 76px;
}

.directory-loading-copy {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.directory-loading-copy i:first-child {
  width: 72%;
  height: 18px;
}

.directory-loading-copy i:last-child {
  width: 48%;
  height: 12px;
}

@keyframes directoryLoading {
  to { background: #313135; }
}

.directory-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
}

.directory-pagination {
  gap: 18px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.directory-pagination button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 9px;
  background: #202023;
  font-size: 0.88rem;
  transition: background 140ms ease, transform 100ms ease;
}

.directory-pagination button:not(:disabled):hover {
  background: #2b2b2f;
}

.directory-pagination button:not(:disabled):active {
  transform: scale(0.97);
}

.directory-pagination button span[aria-hidden="true"] {
  color: #fff;
  font-size: 1.35rem;
  line-height: 0;
}

/* Public record templates share the same density and content rhythm. */
.detail-hero:not(.directory-hero) {
  padding-block: clamp(64px, 7vw, 92px) 52px;
  background: #070707;
}

.detail-hero:not(.directory-hero) .detail-hero__grid {
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}

/* Cabecera sin la cajita del lado: una sola columna.
   La rejilla reserva dos columnas para el texto y un recuadro. Si se quita el recuadro
   y no se toca la rejilla, el titular se queda encogido en el 60% del ancho con un
   hueco vacío al lado, que se ve peor que la caja que se acaba de quitar. */
.detail-hero:not(.directory-hero) .detail-hero__grid:not(:has(.data-panel)) {
  grid-template-columns: minmax(0, 1fr);
}

.detail-hero:not(.directory-hero) h1 {
  max-width: 850px;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.detail-hero:not(.directory-hero) .hero-lead {
  max-width: 64ch;
  color: #b6b6bc;
  text-wrap: pretty;
}

.detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(28px, 4vw, 52px);
}

.detail-layout:has(> :only-child) {
  grid-template-columns: 1fr;
}

.detail-side {
  top: 88px;
}

.detail-list {
  gap: 14px;
}

.detail-item {
  gap: 26px;
  padding: 24px;
  border-radius: 14px;
  background: #151517;
  box-shadow: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.detail-item:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.22);
  background: #18181b;
}

.detail-item h2,
.detail-item h3,
.data-panel h2,
.entity-card h2 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.detail-item p,
.seat-card p,
.side-note {
  max-width: 72ch;
  line-height: 1.58;
  text-wrap: pretty;
}

.map-frame,
.data-panel,
.entity-card {
  border-radius: 14px;
  box-shadow: none;
}

@media (max-width: 1100px) {
  .directory-grid,
  body[data-directory-type] .directory-grid,
  body[data-directory-type="brotherhoods"] .directory-grid,
  body[data-directory-type="museums"] .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .directory-hero .detail-hero-grid {
    grid-template-columns: 1fr;
  }

  .directory-kpis {
    max-width: 680px;
  }

  .directory-layout,
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .directory-filter-panel,
  .detail-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .directory-hero {
    padding: 44px 0 30px !important;
  }

  .directory-hero h1,
  .detail-hero:not(.directory-hero) h1 {
    font-size: clamp(2.55rem, 13vw, 4.25rem);
  }

  .directory-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .directory-kpis article {
    min-height: 104px;
    padding: 16px;
  }

  .directory-map-container {
    height: 360px;
    min-height: 0;
  }

  .directory-page {
    padding-block: 30px 72px;
  }

  .directory-filter-panel,
  .directory-results {
    padding: 18px;
  }

  .directory-grid,
  body[data-directory-type] .directory-grid,
  body[data-directory-type="brotherhoods"] .directory-grid,
  body[data-directory-type="museums"] .directory-grid {
    grid-template-columns: 1fr;
  }

  .directory-card,
  .directory-card a,
  .directory-card--photo a {
    min-height: 224px;
  }

  .directory-pagination {
    justify-content: space-between;
    gap: 10px;
  }

  .directory-pagination button span:not([aria-hidden="true"]) {
    display: none;
  }

  .directory-pagination button {
    width: 42px;
    justify-content: center;
    padding: 0;
  }

  .directory-pagination > span {
    font-size: 0.84rem;
    text-align: center;
  }

  .detail-hero:not(.directory-hero) {
    padding-block: 44px 36px;
  }

  .detail-item,
  .detail-item dl {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .directory-loading-media,
  .directory-loading-copy i {
    animation: none;
  }
}

/* ==========================================================================
   Ficha de Ciudad (ciudad.php) Styles
   ========================================================================== */

/* Rejilla de Datos Rápidos */
.city-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.city-data-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.city-data-item span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.city-data-item strong {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Widget del Tiempo (Apple Weather style) */
.city-weather-widget {
  background: linear-gradient(135deg, #0b0b0c 0%, #121214 100%);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(24px, 3.6vw, 34px);
  margin-top: 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.city-weather-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 24px;
  margin-bottom: 20px;
}

.city-weather-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#city-weather-temp {
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  color: #fff;
}

#city-weather-condition {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

#city-weather-range {
  color: var(--muted);
  font-size: 0.95rem;
}

.city-weather-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.weather-detail-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weather-detail-item span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.weather-detail-item strong {
  font-size: 1.1rem;
  color: #fff;
}

.city-weather-narrative {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0 0 20px;
}

.btn-weather-link {
  display: inline-flex;
  align-items: center;
  color: #ff8d9d;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  transition: color 0.2s, transform 0.2s;
}

.btn-weather-link:hover {
  color: #ffb1bd;
  transform: translateX(4px);
}

/* Hermandades con Escudo */
.brotherhood-header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.brotherhood-shield-container {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #ffffff;
  border: none !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
  padding: 6px;
  flex-shrink: 0;
}

.brotherhood-shield-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.official-name {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 4px 0 0;
}

/* ==========================================================================
   Ficha maestra de hermandad
   ========================================================================== */

.brotherhood-detail-page {
  --brotherhood-panel: #111113;
  --brotherhood-panel-raised: #171719;
  --brotherhood-border: rgba(255, 255, 255, 0.12);
  background: #050505;
}

.brotherhood-detail-page [hidden] {
  display: none !important;
}

.brotherhood-detail-page .site-breadcrumbs {
  padding-top: 24px;
  padding-bottom: 16px;
}

.brotherhood-master-hero {
  padding-block: clamp(42px, 7vw, 94px) clamp(54px, 7vw, 86px);
  border-bottom: 1px solid var(--brotherhood-border);
  background: #050505;
}

.brotherhood-master-hero__grid {
  display: grid;
  grid-template-columns: clamp(150px, 18vw, 230px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}

.brotherhood-master-shield {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  margin: 0;
  padding: clamp(20px, 3vw, 38px);
  border: 1px solid var(--brotherhood-border);
  border-radius: 8px;
  background: #fff;
}

.brotherhood-master-shield img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brotherhood-master-shield span {
  color: #111;
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 760;
  line-height: 1;
}

.brotherhood-master-copy {
  min-width: 0;
}

.brotherhood-master-copy h1 {
  max-width: 900px;
  margin: 10px 0 18px;
  font-size: clamp(3rem, 6.3vw, 6.2rem);
  line-height: 0.96;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.brotherhood-official-name {
  max-width: 74ch;
  margin: 0 0 16px;
  color: #b6b6bb;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.brotherhood-master-copy .hero-lead {
  max-width: 68ch;
  margin-top: 22px;
  color: #a7a7ad;
  font-size: 1rem;
  line-height: 1.65;
}

.brotherhood-contact-strip,
.brotherhood-social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.brotherhood-contact-strip a,
.brotherhood-social-list a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--brotherhood-border);
  border-radius: 7px;
  background: #171719;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 740;
  text-decoration: none;
}

.brotherhood-contact-strip a:hover,
.brotherhood-social-list a:hover {
  border-color: #d7172f;
  background: #202023;
}

.brotherhood-facts dt {
  color: #909097;
  font-size: 0.78rem;
  font-weight: 680;
}

.brotherhood-section-nav {
  display: none !important;
  position: sticky;
  z-index: 20;
  top: var(--header-height, 72px);
  border-bottom: 1px solid var(--brotherhood-border);
  background: rgba(5, 5, 5, 0.9);
  backdrop-filter: blur(18px) saturate(130%);
}

.brotherhood-section-nav .shell {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}

.brotherhood-section-nav a {
  flex: none;
  padding-block: 16px 14px;
  border-bottom: 2px solid transparent;
  color: #a4a4aa;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.brotherhood-section-nav a:hover,
.brotherhood-section-nav a:focus-visible {
  border-color: #d7172f;
  color: #fff;
}

.brotherhood-section-heading {
  max-width: 820px;
  margin-bottom: clamp(24px, 4vw, 42px);
}

.brotherhood-section-heading h2 {
  margin-top: 9px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}

.brotherhood-section-heading > p:last-child:not(.eyebrow) {
  max-width: 64ch;
  margin: 14px 0 0;
  color: #9e9ea5;
  line-height: 1.6;
}

.brotherhood-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
}

.brotherhood-facts > div {
  display: flex;
  min-width: 0;
  min-height: 124px;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  background: rgba(18, 18, 20, 0.88);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease, box-shadow 220ms ease;
}

.brotherhood-facts dt {
  color: #9a9aa1;
  font-size: 0.75rem;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brotherhood-facts dd {
  margin: 18px 0 0;
  color: #f7f7f8;
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
  font-weight: 760;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.brotherhood-facts dd a {
  color: inherit;
  text-decoration: none;
}

.brotherhood-facts dd a::after {
  content: " \2197";
  color: #d7172f;
  font-size: 0.72em;
}

.brotherhood-facts dd a:focus-visible {
  border-radius: 4px;
  outline: 3px solid #fff;
  outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
  .brotherhood-facts > div:hover {
    transform: translateY(-3px);
    border-color: rgba(215, 23, 47, 0.42);
    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.4);
  }
}

.brotherhood-facts > div:has(a:active) {
  transform: scale(0.985);
}

.brotherhood-procession-list {
  display: grid;
  gap: 18px;
}

.brotherhood-procession {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--brotherhood-border);
  border-radius: 8px;
  background: var(--brotherhood-panel);
}

.brotherhood-procession header {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--brotherhood-border);
}

.brotherhood-procession header > span {
  color: #d7172f;
  font-size: 0.84rem;
  font-weight: 800;
}


.brotherhood-procession h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0;
}

.brotherhood-procession dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0 0;
}

.brotherhood-procession dt {
  color: #898990;
  font-size: 0.78rem;
}

.brotherhood-procession dd {
  margin: 7px 0 0;
  font-weight: 720;
}

.brotherhood-departure {
  margin-top: 28px;
}

.brotherhood-departure h4,
.brotherhood-route h4 {
  margin: 0 0 9px;
  font-size: 0.82rem;
  color: #b2b2b8;
}

.brotherhood-departure p {
  margin: 0;
  color: #d0d0d4;
  line-height: 1.65;
  text-wrap: pretty;
}

.brotherhood-departure a {
  margin-left: 10px;
  color: #fabd00;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brotherhood-route {
  margin-top: 28px;
}

.brotherhood-route h4 {
  margin: 0 0 9px;
  font-size: 0.82rem;
  color: #b2b2b8;
}

.brotherhood-route p,
.brotherhood-viewpoint {
  margin: 0;
  color: #d0d0d4;
  line-height: 1.65;
  text-wrap: pretty;
}

.brotherhood-viewpoint {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid #d7172f;
  background: #19191c;
}

.brotherhood-seats-section,
.brotherhood-heritage-section,
.brotherhood-update-section {
  border-block: 1px solid var(--brotherhood-border);
  background: #09090a;
}

.brotherhood-seats-layout {
  position: relative;
  min-height: clamp(500px, 52vw, 640px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  isolation: isolate;
  background: #dfe9e2;
}

.brotherhood-seats-layout .seat-list {
  position: absolute;
  left: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 900;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: min(390px, calc(100% - 32px));
  margin: 0;
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  .brotherhood-seats-layout .seat-card {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.brotherhood-seats-layout .seat-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 16px 38px rgba(24, 28, 31, 0.12),
    inset 1px 1px 0 rgba(255, 255, 255, 0.72),
    inset -1px -1px 0 rgba(40, 47, 52, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(145%) contrast(104%);
  backdrop-filter: blur(14px) saturate(145%) contrast(104%);
  pointer-events: auto;
}

.brotherhood-seats-layout .seat-card::before {
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.12) 48%, rgba(45, 52, 57, 0.28));
  -webkit-backdrop-filter: blur(3px) contrast(112%);
  backdrop-filter: blur(3px) contrast(112%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
  pointer-events: none;
}

.brotherhood-seats-layout .seat-card:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.brotherhood-seats-layout .seat-card .eyebrow {
  margin: 0 0 9px;
  color: #ff6f82;
}

.brotherhood-seats-layout .seat-card h3 {
  margin: 0;
  color: #17191c;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-shadow: none;
}

.brotherhood-seats-layout .seat-card p:not(.eyebrow) {
  margin-top: 12px;
  color: rgba(23, 25, 28, 0.72);
  font-size: 0.96rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
  text-shadow: none;
}

.brotherhood-seats-layout .map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: #dfe9e2;
}

.brotherhood-seats-layout--without-map {
  min-height: 0;
  background: #111113;
}

.brotherhood-seats-layout--without-map .map-frame {
  display: none;
}

.map-frame .leaflet-tile-pane,
#seat-map .leaflet-tile-pane,
#museum-map .leaflet-tile-pane,
#artisan-map .leaflet-tile-pane {
  filter: saturate(0.82) contrast(0.9) brightness(1.04);
}

.map-frame .leaflet-control-zoom,
#seat-map .leaflet-control-zoom,
#museum-map .leaflet-control-zoom,
#artisan-map .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(25, 29, 32, 0.16);
}

.map-frame .leaflet-control-zoom a,
#seat-map .leaflet-control-zoom a,
#museum-map .leaflet-control-zoom a,
#artisan-map .leaflet-control-zoom a {
  color: #202328;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.map-frame .leaflet-control-attribution,
#seat-map .leaflet-control-attribution,
#museum-map .leaflet-control-attribution,
#artisan-map .leaflet-control-attribution {
  color: #4f565d;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Chincheta del mapa: marcador con forma de pin, sombra y color propio por tipo de sede o museo */
.sse-mapa-marcador {
  display: grid;
  place-items: center;
}
.sse-mapa-marcador span {
  display: block;
  width: 26px;
  height: 26px;
  border: 3px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.sse-mapa-marcador span::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 6px 0 0 6px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
}
.sse-mapa-marcador--canonical span { background: #d7172f; }
.sse-mapa-marcador--social span { background: #fabd00; }
.sse-mapa-marcador--city span { background: #6b7280; }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .brotherhood-seats-layout .seat-card {
    background: rgba(255, 255, 255, 0.9);
  }
}

.map-frame--link {
  display: grid;
  place-items: center;
  padding: 24px;
}

.map-frame--link a {
  color: #fff;
  font-weight: 720;
}

.brotherhood-editorial-grid,
.brotherhood-heritage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}

.brotherhood-timeline,
.brotherhood-notes,
.brotherhood-plain-list,
.brotherhood-music-list {
  display: grid;
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   Cronología horizontal (historia de la hermandad)
   El desplazamiento es scroll nativo con scroll-snap: así el arrastre táctil,
   la inercia, el trackpad y el teclado funcionan sin JavaScript, y el JS solo
   añade las flechas y el contador.
   --------------------------------------------------------------------------- */
.chrono {
  margin-top: 26px;
}

.chrono__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  /* Sin scroll-behavior aquí a propósito: hay entornos donde pedir scroll suave
     deja el carril inmóvil. El JS pide el desplazamiento suave y, si comprueba
     que no se ha movido, lo aplica de golpe. */
  /* El degradado deja intuir que hay más tarjetas hacia los lados. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

.chrono__viewport::-webkit-scrollbar { display: none; }

.chrono__viewport:focus-visible {
  outline: 2px solid #ff7f91;
  outline-offset: 4px;
  border-radius: 18px;
}

.chrono__track {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 4px 4px 22px;
  list-style: none;
}

.chrono__item {
  flex: 0 0 min(390px, 82vw);
  scroll-snap-align: start;
}

.chrono__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 24px;
  border: 1px solid var(--brotherhood-border, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  overflow: hidden;
  transition: border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chrono__card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 127, 145, 0.4);
}

/* Marcador de siglo: número romano grande al fondo de la tarjeta. Tiene que
   leerse entero — recortado se confunde con ruido en vez de indicar la época. */
.chrono__century {
  position: absolute;
  right: 0.12em;
  bottom: -0.12em;
  font-size: clamp(4.6rem, 9vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.062);
  pointer-events: none;
  user-select: none;
}

.chrono__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

/* El año es el ancla visual: se lee antes que nada. */
.chrono__year {
  font-size: clamp(2.6rem, 5.6vw, 3.5rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #ff7f91;
  font-variant-numeric: tabular-nums;
}

.chrono__era {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #86868c;
}

.chrono__body {
  position: relative;
  color: #b4b4ba;
  line-height: 1.62;
}

.chrono__body h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text);
}

/* Curiosidades: sin año, el título es el único ancla visual de la tarjeta, así que
   asume el papel (y el color) que en historia tiene el año. */
.chrono__card:not(:has(.chrono__head)) .chrono__body h3 {
  margin-bottom: 12px;
  font-size: 1.3rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: #ff7f91;
}

.chrono__body > :last-child { margin-bottom: 0; }
.chrono__body p { margin: 0 0 0.9em; }

.chrono__body small {
  display: block;
  margin-top: 12px;
  color: #818188;
  line-height: 1.45;
}

.chrono__body small a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
}

.chrono__body small a:hover { color: #ff7f91; }

.chrono__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.chrono__nav {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--brotherhood-border, rgba(255, 255, 255, 0.12));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.chrono__nav:hover:not(:disabled) {
  background: rgba(255, 127, 145, 0.14);
  border-color: rgba(255, 127, 145, 0.45);
}

.chrono__nav:active:not(:disabled) { transform: scale(0.94); }

.chrono__nav:disabled {
  opacity: 0.32;
  cursor: default;
}

.chrono__progress {
  margin: 0;
  color: #86868c;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Sin animaciones de posición para quien las tenga desactivadas. */
@media (prefers-reduced-motion: reduce) {
  .chrono__card { transition: none; }
  .chrono__card:hover { transform: none; }
  .chrono__viewport { scroll-behavior: auto; }
}

.brotherhood-timeline-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--brotherhood-border);
}

.brotherhood-timeline-item time {
  color: #ff7f91;
  font-size: 1.05rem;
  font-weight: 780;
}

.brotherhood-timeline-item h3,
.brotherhood-note h3,
.brotherhood-plain-list h3,
.brotherhood-music-list h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.35;
}

.brotherhood-timeline-item p,
.brotherhood-note p,
.brotherhood-plain-list p,
.brotherhood-music-list p {
  margin: 0;
  color: #b4b4ba;
  line-height: 1.6;
}

.brotherhood-timeline-item small {
  display: block;
  margin-top: 10px;
  color: #818188;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.brotherhood-note,
.brotherhood-plain-list article,
.brotherhood-music-list article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--brotherhood-border);
  border-radius: 8px;
  background: var(--brotherhood-panel);
}

.brotherhood-note p,
.brotherhood-note small,
.brotherhood-plain-list p,
.brotherhood-music-list p,
.brotherhood-music-list a {
  overflow-wrap: anywhere;
}

.brotherhood-note time {
  display: block;
  margin-bottom: 8px;
  color: #ff7f91;
  font-size: 0.8rem;
  font-weight: 780;
}

.brotherhood-music-list article {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: baseline;
}

.brotherhood-music-list time {
  color: #9d9da4;
  font-variant-numeric: tabular-nums;
}

.brotherhood-music-list a {
  display: inline-flex;
  margin-top: 10px;
  color: #ff8b9c;
  font-size: 0.86rem;
  font-weight: 720;
}

.brotherhood-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.brotherhood-related-grid article {
  border: 1px solid var(--brotherhood-border);
  border-radius: 8px;
  background: var(--brotherhood-panel);
}

.brotherhood-related-grid a {
  display: flex;
  min-height: 82px;
  align-items: center;
  padding: 18px;
  color: #fff;
  font-weight: 720;
  line-height: 1.3;
  text-decoration: none;
}

.brotherhood-related-grid article:hover {
  border-color: rgba(215, 23, 47, 0.8);
}

/* Vestimenta y Túnica (Ficha de Hermandad) */
.brotherhood-robe-card {
  display: flex;
  gap: clamp(20px, 4vw, 36px);
  align-items: flex-start;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--brotherhood-border);
  border-radius: 16px;
  background: rgba(18, 18, 20, 0.88);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.brotherhood-robe-icon {
  display: grid;
  flex: 0 0 clamp(54px, 7vw, 72px);
  width: clamp(54px, 7vw, 72px);
  height: clamp(54px, 7vw, 72px);
  place-items: center;
  border-radius: 14px;
  background: rgba(215, 23, 47, 0.12);
  border: 1px solid rgba(215, 23, 47, 0.28);
  color: #d7172f;
}

.brotherhood-robe-content {
  flex: 1;
  min-width: 0;
}

.brotherhood-robe-content h3 {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: #f7f7f8;
  letter-spacing: -0.01em;
}

.brotherhood-robe-content p {
  margin: 0;
  color: #c4c4cb;
  font-size: clamp(0.98rem, 1.35vw, 1.1rem);
  line-height: 1.65;
}

/* Escudo (Ficha de Hermandad) */
.brotherhood-shield-layout {
  display: grid;
  grid-template-columns: clamp(200px, 25vw, 320px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.brotherhood-shield-showcase {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--brotherhood-border);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.brotherhood-shield-showcase img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.brotherhood-shield-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--brotherhood-border);
  border-radius: 16px;
  background: rgba(18, 18, 20, 0.88);
}

.brotherhood-shield-info h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  color: #f7f7f8;
}

.brotherhood-shield-info p {
  margin: 0;
  color: #c4c4cb;
  font-size: clamp(0.96rem, 1.3vw, 1.08rem);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .brotherhood-robe-card {
    flex-direction: column;
    gap: 18px;
  }
  .brotherhood-shield-layout {
    grid-template-columns: 1fr;
  }
}

.brotherhood-update-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
}

.brotherhood-update-grid h2 {
  margin-top: 8px;
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
  letter-spacing: 0;
}

.brotherhood-update-grid > p {
  margin: 0;
  color: #a7a7ad;
  line-height: 1.6;
}

@media (max-width: 1050px) {
  .brotherhood-master-hero__grid {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .brotherhood-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brotherhood-procession dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .brotherhood-master-hero__grid {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }

  .brotherhood-master-copy h1 {
    font-size: clamp(2.45rem, 10vw, 4.2rem);
  }

  .brotherhood-master-shield {
    padding: 14px;
  }

  .brotherhood-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brotherhood-editorial-grid,
  .brotherhood-heritage-grid,
  .brotherhood-update-grid {
    grid-template-columns: 1fr;
  }

  .brotherhood-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brotherhood-update-grid .primary-link {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .brotherhood-seats-layout {
    min-height: 680px;
    border-radius: 20px;
  }

  .brotherhood-seats-layout .seat-list {
    left: 14px;
    bottom: 14px;
    width: calc(100% - 28px);
  }

  .brotherhood-seats-layout .seat-card {
    padding: 19px;
    border-radius: 17px;
  }

  .brotherhood-master-hero__grid {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .brotherhood-master-copy .eyebrow {
    font-size: 0.68rem;
  }

  .brotherhood-master-copy h1 {
    font-size: clamp(2.15rem, 11vw, 3.15rem);
  }

  .brotherhood-official-name {
    grid-column: 1 / -1;
  }

  .brotherhood-facts > div {
    min-height: 96px;
    padding: 16px;
  }

  .brotherhood-facts dd {
    margin-top: 14px;
    font-size: clamp(1.05rem, 5vw, 1.35rem);
  }

  .brotherhood-procession dl,
  .brotherhood-related-grid {
    grid-template-columns: 1fr;
  }

  .brotherhood-procession header {
    align-items: flex-start;
  }

  .brotherhood-viewpoint {
    flex-direction: column;
  }

  .brotherhood-timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brotherhood-facts > div {
    transition: none;
  }
}

/* Mapa de sedes */
.city-map-intro {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  max-width: 640px;
  margin: 30px auto 0;
}

.city-map-intro h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}

.city-map-intro p {
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Galería de Carteles */
.poster-gallery-wrapper {
  position: relative;
  margin-top: 30px;
  display: flex;
  align-items: center;
}

.poster-gallery-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 4px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  width: 100%;
}

.poster-gallery-scroll::-webkit-scrollbar {
  height: 6px;
}

.poster-gallery-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}

.poster-card {
  flex: 0 0 220px;
  background: #0b0b0c;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.poster-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.2);
}

.poster-img-wrap {
  position: relative;
  aspect-ratio: 0.55;
  background: #121214;
  overflow: hidden;
}

.poster-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.poster-card:hover .poster-img-wrap img {
  transform: scale(1.05);
}

.poster-info {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.poster-info h3 {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
  color: var(--muted);
}

.poster-year {
  font-weight: 800;
  color: #ff8d9d;
  font-size: 1.1rem;
}

.gallery-nav-btn {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 18, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(8px);
}

.gallery-nav-btn:hover {
  background: #ff8d9d;
  border-color: #ff8d9d;
}

.gallery-nav-btn.gallery-prev {
  left: -22px;
}

.gallery-nav-btn.gallery-next {
  right: -22px;
}

/* Lightbox de Carteles */
.lightbox-overlay {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 2.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, transform 0.2s;
}

.lightbox-close:hover {
  background: rgba(215, 23, 47, 0.8);
  transform: scale(1.1);
}

/* Flechas para pasar de cartel sin cerrar el visor. */
.lightbox-paso {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.lightbox-paso[hidden] {
  display: none;
}

.lightbox-paso--atras { left: 24px; }
.lightbox-paso--adelante { right: 24px; }

.lightbox-paso:hover,
.lightbox-paso:focus-visible {
  background: rgba(215, 23, 47, 0.8);
}

@media (max-width: 700px) {
  .lightbox-paso {
    width: 42px;
    height: 42px;
    font-size: 1.6rem;
  }
  .lightbox-paso--atras { left: 10px; }
  .lightbox-paso--adelante { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-paso { transition: none; }
}

.lightbox-content {
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox-overlay[aria-hidden="false"] .lightbox-content {
  transform: scale(1);
}

.lightbox-content img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  object-fit: contain;
}

.lightbox-caption {
  margin-top: 18px;
  text-align: center;
}

.lightbox-caption span {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ff8d9d;
}

/* Planificación */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 30px;
}

.plan-card {
  background: #0b0b0c;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.plan-card h3 {
  margin: 0 0 12px;
  font-size: 1.35rem;
}

.plan-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 24px;
  flex-grow: 1;
}

.btn-plan-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.btn-plan-link:hover {
  background: #ff8d9d;
  border-color: #ff8d9d;
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .city-weather-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .city-weather-details {
    grid-template-columns: repeat(3, 1fr);
  }
  .plan-grid {
    grid-template-columns: 1fr;
  }
  .gallery-nav-btn {
    display: none;
  }
}

/* City record final cascade guard. Keep this block last. */
.city-record-page .reveal {
  opacity: 1;
  transform: none;
}

.city-record-page .city-master-hero h1,
.city-record-page .city-section-heading h2 {
  letter-spacing: 0;
}

.city-record-page .city-master-hero h1 {
  font-size: 4.5rem;
}

.city-record-page .city-section-heading h2 {
  font-size: 2.75rem;
}

.city-breadcrumb {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 50%;
  display: flex;
  width: min(var(--max), calc(100% - 44px));
  gap: 9px;
  align-items: center;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.82rem;
}

.city-breadcrumb a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.city-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.city-record-page .city-data-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

.city-record-page .city-data-item {
  min-height: 128px;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-radius: 14px;
  background: #141416;
  box-shadow: none;
}

.city-record-page .city-data-item span {
  color: #9d9da5;
  font-size: 0.73rem;
  letter-spacing: 0.06em;
}

.city-record-page .city-data-item strong {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.2;
}

.city-record-page .city-weather-widget {
  margin-top: 0;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 16px;
  background: #0d0d0f;
  box-shadow: none;
}

.city-record-page .city-weather-main {
  grid-template-columns: minmax(180px, 0.48fr) minmax(0, 1fr);
  gap: 24px;
}

.city-record-page .city-weather-details {
  gap: 8px;
}

.city-record-page .weather-detail-item {
  min-height: 92px;
  justify-content: center;
  border-radius: 10px;
  background: #171719;
}

.city-record-page .poster-gallery-wrapper {
  margin-top: 0;
}

.city-record-page .poster-gallery-scroll {
  gap: 14px;
  padding: 4px 2px 16px;
  scroll-snap-type: x mandatory;
}

.city-record-page .poster-card {
  flex: 0 0 clamp(220px, 25vw, 310px);
  border-radius: 14px;
  background: #111113;
  box-shadow: none;
  scroll-snap-align: start;
  transition: border-color 160ms ease, transform 160ms ease;
}

.city-record-page .poster-card:hover {
  transform: translateY(-2px);
}

.city-record-page .poster-img-wrap {
  aspect-ratio: 0.68;
  background: #09090a;
}

.city-record-page .poster-img-wrap img {
  object-fit: contain;
  transition: none;
}

.city-record-page .poster-card:hover .poster-img-wrap img {
  transform: none;
}

.city-record-page .poster-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.city-record-page .plan-grid {
  gap: 14px;
  margin-top: 0;
}

.city-record-page .plan-card {
  min-height: 230px;
  padding: 24px;
  border-radius: 14px;
  background: #111113;
  box-shadow: none;
}

.city-record-page .btn-plan-link {
  min-height: 44px;
  border-radius: 9px;
}

@media (max-width: 680px) {
  .city-record-page .city-master-hero h1 {
    font-size: 3rem;
  }

  .city-record-page .city-section-heading h2 {
    font-size: 2rem;
  }

  .city-breadcrumb {
    top: 18px;
    width: min(var(--max), calc(100% - 32px));
  }

  .city-record-page .city-data-grid,
  .city-record-page .city-weather-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .city-record-page .city-weather-main {
    grid-template-columns: 1fr;
  }
}

/* Weather page: unified interface */
.weather-page {
  --weather-surface: #111113;
  --weather-surface-raised: #18181b;
  --weather-line: rgba(255, 255, 255, 0.13);
  --weather-muted: #a6a6ad;
  overflow: clip;
  background: #000;
  color: #f7f7f8;
}

.weather-page .weather-hero {
  padding: 0 0 96px;
  background: #000;
}

.weather-page .weather-shell {
  display: grid;
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  margin-inline: auto;
  padding: 0;
  gap: 24px;
}

.weather-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-top: 10px;
  color: #85858c;
  font-size: 0.875rem;
}

.weather-breadcrumb a {
  color: #c9c9ce;
}

.weather-breadcrumb a:hover {
  color: #fff;
}

.weather-page .weather-hero__intro {
  max-width: 760px;
  margin: 44px auto 8px;
  text-align: center;
}

.weather-page .weather-hero__intro h1 {
  max-width: 760px;
  margin: 12px auto 18px;
  color: #fff;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

.weather-page .weather-hero__intro p:not(.eyebrow) {
  max-width: 680px;
  margin-inline: auto;
  color: var(--weather-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.weather-page .weather-search {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 40px;
  align-items: center;
  width: min(760px, 100%);
  min-height: 58px;
  margin-inline: auto;
  padding: 0 10px 0 18px;
  border: 1px solid var(--weather-line);
  border-radius: 14px;
  background: var(--weather-surface-raised);
  box-shadow: none;
}

.weather-page .weather-search:focus-within {
  border-color: rgba(215, 23, 47, 0.9);
  box-shadow: 0 0 0 3px rgba(215, 23, 47, 0.18);
}

.weather-page .weather-search > span {
  color: #c7c7cc;
  font-size: 1.35rem;
}

.weather-page .weather-search input {
  min-width: 0;
  height: 56px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1rem;
}

.weather-page .weather-search > button {
  display: grid;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #2b2b2f;
  color: #e8e8eb;
  font-size: 1.25rem;
}

.weather-page .weather-suggestions {
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 360px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--weather-line);
  border-radius: 14px;
  background: #18181b;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.weather-page .weather-suggestions button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.weather-page .weather-suggestions button strong {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.weather-page .weather-suggestions button small {
  color: var(--muted);
  font-size: 0.82rem;
}

.weather-page .weather-suggestions button:hover,
.weather-page .weather-suggestions button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

/* El desplegable entra con un pequeño fundido y deslizamiento al mostrarse. */
.weather-page .weather-suggestions:not([hidden]) {
  animation: weather-suggestions-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes weather-suggestions-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .weather-page .weather-suggestions:not([hidden]) { animation: none; }
  .weather-page .weather-suggestions button { transition: none; }
}

.weather-page .weather-summary-text,
.weather-page .weather-current-card,
.weather-page .weather-consensus-card,
.weather-page .weather-advanced-metrics-card,
.weather-page .weather-comparison-card,
.weather-page .weather-risk-card,
.weather-page .weather-panel,
.weather-page .weather-key-card,
.weather-page .weather-alerts-card,
.weather-page .weather-history-card,
.weather-page .weather-source-card {
  width: 100%;
  margin: 0;
  border: 1px solid var(--weather-line);
  border-radius: 16px;
  background: var(--weather-surface);
  box-shadow: none;
}

.weather-page .weather-summary-text {
  min-height: 64px;
  padding: 19px 22px;
  color: #dedee2;
  font-size: 1rem;
  line-height: 1.55;
}

.weather-page .weather-current-card {
  position: relative;
  min-height: 440px;
  padding: 32px;
  overflow: hidden;
  background: #0f0f11;
}

.weather-page .weather-current-card::before,
.weather-page .weather-current-card::after {
  content: none;
  display: none;
}

.weather-page .weather-card-top,
.weather-page .weather-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.weather-page .weather-card-top h2 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.weather-page .weather-card-top p {
  margin: 0;
  color: var(--weather-muted);
  font-size: 0.875rem;
}

.weather-page .weather-risk-badge {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #d8fbe4;
  font-size: 0.8125rem;
}

.weather-page .weather-now-layout {
  display: grid;
  grid-template-columns: minmax(160px, 0.75fr) minmax(260px, 1fr);
  align-items: center;
  max-width: 740px;
  margin: 34px auto 30px;
  gap: 38px;
}

.weather-page .weather-line-icon--main {
  display: grid;
  width: 164px;
  height: 164px;
  margin-inline: auto;
  place-items: center;
}

.weather-page .weather-line-icon--main img {
  width: 132px;
  height: 132px;
  object-fit: contain;
}

.weather-page .weather-temperature {
  display: grid;
  justify-items: start;
  text-align: left;
}

.weather-page .weather-temperature strong {
  color: #fff;
  font-size: 6.5rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
}

.weather-page .weather-temperature span {
  margin-top: 15px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
}

.weather-page .weather-temperature small {
  margin-top: 8px;
  color: var(--weather-muted);
  font-size: 0.9375rem;
}

.weather-page .weather-metrics,
.weather-page .risk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--weather-line);
  border-radius: 12px;
  background: var(--weather-line);
}

.weather-page .weather-metrics div,
.weather-page .risk-grid div {
  min-width: 0;
  min-height: 92px;
  padding: 18px 12px;
  border: 0;
  border-radius: 0;
  background: var(--weather-surface-raised);
  text-align: center;
}

.weather-page .weather-metrics dt,
.weather-page .risk-grid dt {
  margin-bottom: 8px;
  color: #8f8f97;
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weather-page .weather-metrics dd,
.weather-page .risk-grid dd {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.weather-page .weather-risk-card,
.weather-page .weather-panel,
.weather-page .weather-key-card,
.weather-page .weather-alerts-card,
.weather-page .weather-history-card {
  padding: 26px;
}

.weather-page .weather-panel-heading {
  margin-bottom: 22px;
}

.weather-page .weather-panel-heading h2,
.weather-page .weather-source-card h2 {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.weather-page .weather-panel-heading > span {
  color: #85858c;
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weather-page .risk-content {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.weather-page .risk-content > strong {
  display: grid;
  width: 104px;
  min-height: 76px;
  place-items: center;
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.1);
  color: #e5fbea;
  font-size: 1.15rem;
}

.weather-page .risk-content h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0;
}

.weather-page .risk-content p,
.weather-page .weather-alerts-card p,
.weather-page .weather-source-card p {
  margin: 0;
  color: var(--weather-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.weather-page .risk-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.weather-page .hourly-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  gap: 0;
  padding: 0 0 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: #46464c transparent;
}

.weather-page .hourly-item {
  display: grid;
  min-height: 178px;
  padding: 14px 10px;
  place-items: center;
  align-content: space-between;
  border: 0;
  border-right: 1px solid var(--weather-line);
  border-radius: 0;
  background: transparent;
  scroll-snap-align: start;
}

.weather-page .hourly-item:last-child {
  border-right: 0;
}

.weather-page .hourly-item .weather-line-icon {
  width: 38px;
  height: 38px;
}

.weather-page .hourly-item .weather-line-icon img {
  width: 34px;
  height: 34px;
}

.weather-page .hourly-item time,
.weather-page .hourly-item small {
  color: #a6a6ad;
  font-size: 0.75rem;
}

.weather-page .hourly-item strong {
  color: #fff;
  font-size: 1.2rem;
}

.weather-page .hourly-item > span {
  color: #69c9ef;
  font-size: 0.8125rem;
  font-weight: 700;
}

.weather-page .hourly-item .hourly-gust-warn {
  color: var(--amber, #f3b343);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.weather-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: 24px;
}

.weather-page .key-moments,
.weather-page .daily-list {
  display: grid;
  gap: 0;
}

.weather-page .key-moments > div,
.weather-page .daily-list > div {
  display: grid;
  align-items: center;
  min-height: 58px;
  padding: 12px 0;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--weather-line);
  border-radius: 0;
  background: transparent;
}

.weather-page .key-moments > div:last-child,
.weather-page .daily-list > div:last-child {
  border-bottom: 0;
}

.weather-page .key-moments > div {
  grid-template-columns: minmax(86px, 1fr) 52px minmax(82px, auto) 58px;
}

.weather-page .daily-list > div {
  grid-template-columns: minmax(100px, 1fr) 48px minmax(120px, auto) 86px;
}

.weather-page .key-moments strong,
.weather-page .daily-list strong {
  color: #fff;
  font-size: 0.9375rem;
}

.weather-page .key-moments small,
.weather-page .key-moments span,
.weather-page .daily-list span,
.weather-page .daily-list small {
  color: var(--weather-muted);
  font-size: 0.8125rem;
}

.weather-page .key-moments b {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: #baf3ca;
  font-size: 0.6875rem;
}

.weather-page .daily-list strong:last-child {
  justify-self: end;
  white-space: nowrap;
}

.weather-page .weather-alert-list {
  display: grid;
  margin: 18px 0 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.weather-page .weather-alert-list li {
  display: grid;
  padding: 16px;
  gap: 4px;
  border: 1px solid rgba(255, 196, 61, 0.24);
  border-radius: 10px;
  background: rgba(255, 196, 61, 0.06);
}

.weather-page .weather-alert-list strong {
  color: #fff;
  font-size: 0.9375rem;
}

.weather-page .weather-alert-list small,
.weather-page .weather-alert-list em {
  color: #b9b9bf;
  font-size: 0.8125rem;
  font-style: normal;
  line-height: 1.45;
}

.weather-page .weather-history-meta,
.weather-page .weather-history-reading,
.weather-page .weather-history-years {
  display: grid;
  gap: 12px;
}

.weather-page .weather-history-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weather-page .weather-history-reading {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.weather-page .weather-history-meta article,
.weather-page .weather-history-reading article,
.weather-page .weather-history-years article,
.weather-page .weather-history-cofrade {
  padding: 16px;
  border: 1px solid var(--weather-line);
  border-radius: 10px;
  background: var(--weather-surface-raised);
}

.weather-page .weather-history-meta span,
.weather-page .weather-history-reading span,
.weather-page .weather-history-years span,
.weather-page .weather-history-cofrade span {
  color: #8f8f97;
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.weather-page .weather-history-meta strong,
.weather-page .weather-history-reading strong,
.weather-page .weather-history-years strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.weather-page .weather-history-cofrade {
  margin-top: 12px;
  border-color: rgba(215, 23, 47, 0.35);
}

.weather-page .weather-history-cofrade p {
  margin: 7px 0 0;
  color: #d4d4d8;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.weather-page .weather-history-years {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.weather-page .weather-source-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 24px 28px;
  gap: 20px;
}

.weather-page .weather-source-card > div {
  flex: 1 1 300px;
  min-width: 0;
}

.weather-page .weather-source-card h2 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.weather-page .weather-source-card p {
  margin: 0;
  color: var(--weather-muted, #8e8e99);
  font-size: 0.875rem;
  line-height: 1.55;
}

.weather-page .weather-source-card > strong {
  display: inline-flex;
  width: auto;
  min-width: auto;
  height: auto;
  min-height: 46px;
  padding: 10px 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 163, 89, 0.4);
  border-radius: 12px;
  background: rgba(212, 163, 89, 0.08);
  color: #f6d89b;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.weather-page .weather-empty-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.1rem 0;
  color: #a9a9ae;
  font-size: 0.94rem;
  line-height: 1.5;
}

.weather-page[data-state="loading"] .weather-current-card,
.weather-page[data-state="loading"] .weather-risk-card,
.weather-page[data-state="loading"] .weather-panel,
.weather-page[data-state="loading"] .weather-key-card {
  opacity: 0.55;
}

.weather-page[data-state="error"] .weather-current-card,
.weather-page[data-state="error"] .weather-risk-card,
.weather-page[data-state="error"] .weather-panel,
.weather-page[data-state="error"] .weather-key-card {
  display: none;
}

@media (max-width: 900px) {
  .weather-secondary-grid {
    grid-template-columns: 1fr;
  }

  .weather-page .weather-history-reading {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .weather-page .weather-hero {
    padding-bottom: 64px;
  }

  .weather-page .weather-shell {
    width: min(100% - 28px, 1180px);
    gap: 18px;
  }

  .weather-breadcrumb {
    min-height: 42px;
    padding-top: 6px;
  }

  .weather-page .weather-hero__intro {
    margin-top: 30px;
  }

  .weather-page .weather-hero__intro h1 {
    font-size: 2.65rem;
    line-height: 1.04;
  }

  .weather-page .weather-hero__intro p:not(.eyebrow) {
    font-size: 0.9375rem;
  }

  .weather-page .weather-search {
    min-height: 54px;
  }

  .weather-page .weather-current-card,
  .weather-page .weather-consensus-card,
  .weather-page .weather-advanced-metrics-card,
  .weather-page .weather-comparison-card,
  .weather-page .weather-risk-card,
  .weather-page .weather-panel,
  .weather-page .weather-key-card,
  .weather-page .weather-alerts-card,
  .weather-page .weather-history-card {
    padding: 20px;
    border-radius: 14px;
  }

  .weather-page .weather-current-card {
    min-height: 0;
  }

  .weather-page .weather-card-top {
    align-items: flex-start;
  }

  .weather-page .weather-card-top h2 {
    font-size: 1.45rem;
  }

  .weather-page .weather-now-layout {
    grid-template-columns: 110px minmax(0, 1fr);
    margin: 30px 0;
    gap: 20px;
  }

  .weather-page .weather-line-icon--main {
    width: 104px;
    height: 104px;
  }

  .weather-page .weather-line-icon--main img {
    width: 92px;
    height: 92px;
  }

  .weather-page .weather-temperature strong {
    font-size: 4.35rem;
  }

  .weather-page .weather-temperature span {
    margin-top: 10px;
    font-size: 1.2rem;
  }

  .weather-page .weather-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weather-page .weather-metrics div,
  .weather-page .risk-grid div {
    min-height: 82px;
  }

  .weather-page .risk-content {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 16px;
  }

  .weather-page .risk-content > strong {
    width: 82px;
    min-height: 68px;
  }

  .weather-page .risk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .weather-page .hourly-slider {
    grid-auto-columns: 102px;
  }

  .weather-page .key-moments > div {
    grid-template-columns: minmax(78px, 1fr) 48px 72px 52px;
  }

  .weather-page .daily-list > div {
    grid-template-columns: minmax(82px, 1fr) 42px minmax(96px, auto) 76px;
  }

  .weather-page .daily-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .weather-page .weather-history-meta,
  .weather-page .weather-history-years {
    grid-template-columns: 1fr;
  }

  .weather-page .weather-source-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
  }

  .weather-page .weather-source-card > strong {
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weather-page *,
  .weather-page *::before,
  .weather-page *::after,
  .reveal,
  .magnetic-card {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transform: none !important;
  }
}

/* Premium Refinements - Apple, Emil & Soft-Skill */
.site-header {
  isolation: isolate;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: rgba(5, 5, 6, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}

.site-header[data-elevated="true"] {
  background: transparent;
}

.site-header[data-elevated="true"]::before {
  background: rgba(5, 5, 6, 0.8);
}

.mega-panel {
  background: rgba(7, 7, 9, 0.82);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(42px) saturate(0.9);
  backdrop-filter: blur(42px) saturate(0.9);
}

.mega-panel::before {
  background: linear-gradient(90deg, rgba(215, 23, 47, 0.075), transparent 44%);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header::before,
  .site-header[data-elevated="true"]::before,
  .mega-panel {
    background: #09090b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.mega-grid-cities {
  grid-template-columns: minmax(330px, 0.9fr) repeat(3, minmax(170px, 0.48fr));
}

.mega-grid-heritage {
  grid-template-columns: minmax(320px, 0.82fr) repeat(3, minmax(190px, 0.4fr));
}

@media (max-width: 680px) {
  .hero-countdown {
    transform: none;
  }
}

.magnetic-card {
  transition: transform 0.5s cubic-bezier(0.15, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.15, 1, 0.3, 1), border-color 0.3s ease;
  will-change: transform;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.magnetic-card:hover {
  border-color: rgba(255, 51, 68, 0.25);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 51, 68, 0.15);
}

.magnetic-card:active {
  transform: scale(0.97) translateY(1px);
}

/* Scroll reveal classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.15, 1, 0.3, 1), transform 0.8s cubic-bezier(0.15, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* WCAG 2.2 accessibility focus indicator ring */
:focus-visible {
  outline: 3px solid #ff3344 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px rgba(255, 51, 68, 0.3) !important;
}

/* Custom premium scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #050505;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff3344;
}

/* Typographic tracking */
.eyebrow {
  letter-spacing: 0.15em;
  font-weight: 700;
  color: #ff3344 !important;
}

/* Debounced search highlight */
.search-highlight {
  background: rgba(255, 51, 68, 0.2);
  border-bottom: 2px solid #ff3344;
  color: #ffffff;
}

/* Stats Board Premium Layout */
.stats-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 0;
  position: relative;
  z-index: 3;
}

.stats-card {
  min-height: 124px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(18, 18, 20, 0.85);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transition: transform 0.5s cubic-bezier(0.15, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.5s cubic-bezier(0.15, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  will-change: transform;
}

.stats-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 51, 68, 0.25);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 51, 68, 0.15);
}

.stats-card:active {
  transform: scale(0.97) translateY(0);
}

.stats-card span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}

.stats-card strong {
  display: block;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-block: 8px 4px;
  color: #ffffff;
}

.stats-card small {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .stats-board {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .stats-board {
    gap: 12px;
    margin-top: 0;
  }

  .stats-card {
    min-height: 104px;
    padding: 16px 18px;
  }
}

/* Search Autocomplete & Select Slider Styles */
.search-panel-wrapper {
  position: relative;
  width: min(100%, 680px);
  margin-top: 44px;
  z-index: 10;
}

.search-type-select {
  grid-area: select;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 10px 28px 10px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  height: 52px;
  outline: none;
  cursor: pointer;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  max-width: 140px;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23a7a7ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px;
}

.search-type-select option {
  background: #121214;
  color: var(--text);
}

.search-clear-btn {
  grid-area: clear;
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  font-size: 1.5rem !important;
  cursor: pointer;
  padding: 0 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  border-radius: 50% !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  outline: none;
}

.search-clear-btn:hover {
  color: #ff3344 !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.search-clear-btn[hidden] {
  display: none !important;
}

#global-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

.search-autocomplete-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(18, 18, 20, 0.98);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
  z-index: 100;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.search-autocomplete-results[hidden] {
  display: none !important;
}

.search-autocomplete-results .autocomplete-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  position: relative;
  min-height: 164px;
}

.search-autocomplete-results .autocomplete-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 51, 68, 0.25);
  transform: translateY(-2px);
}

.search-autocomplete-results .autocomplete-item-thumb {
  width: 100%;
  height: 104px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.8rem;
  color: #ff3344;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.search-autocomplete-results .autocomplete-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-autocomplete-results .autocomplete-item-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.search-autocomplete-results .autocomplete-item-info h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-autocomplete-results .autocomplete-item-info span {
  font-size: 0.74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-autocomplete-results .autocomplete-item-type {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(18, 18, 20, 0.85);
  backdrop-filter: blur(4px);
  color: #ff3344;
  font-weight: 700;
  border: 1px solid rgba(255, 51, 68, 0.2);
  z-index: 2;
}

@keyframes autocompleteFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-autocomplete-results:not([hidden]) {
  animation: autocompleteFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .search-autocomplete-results:not([hidden]) {
    animation: none;
  }
}

@media (max-width: 980px) {
  .search-autocomplete-results {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 16px;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .search-autocomplete-results {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .search-autocomplete-results {
    grid-template-columns: 1fr;
  }
}

/* Sección de Fotografía - Diseño Apaisado Split */
.photography-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .photography-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: stretch;
  }
}

.photography-layout > * {
  min-width: 0;
}

.photography-layout .spotlight-card-main {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.photography-showcase {
  background: var(--card-bg, #121212);
  border: 1px solid var(--border-color, #222);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 350px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.photography-showcase:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Slider de fotos reales (una por ciudad), en lugar del «Próximamente disponible» que
   llevaba antes. Solo con CSS —sin JS—: una a una en bucle, con un fundido cruzado.
   Cada foto lleva dos versiones en el DOM, apaisada (--h) y vertical (--v); solo una de
   las dos familias está en pantalla a la vez, según el media query de más abajo. */
.showcase-slider {
  position: absolute;
  inset: 0;
}

.showcase-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: showcaseFade 20s ease-in-out infinite;
}

.showcase-slide--v {
  display: none;
}

.showcase-slide--1 { animation-delay: 0s; }
.showcase-slide--2 { animation-delay: 5s; }
.showcase-slide--3 { animation-delay: 10s; }
.showcase-slide--4 { animation-delay: 15s; }

@keyframes showcaseFade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

/* Tablet en vertical: la caja apaisada de 350px de alto deja a una foto apaisada
   recortada casi a una tira, o a una vertical con hueco en blanco a los lados. Aquí se
   cambia la forma de la caja a retrato y se enseñan las verticales en su lugar. */
@media (min-width: 640px) and (max-width: 900px) and (orientation: portrait) {
  .photography-showcase {
    aspect-ratio: 3 / 4;
    min-height: 420px;
  }

  .showcase-slide--h {
    display: none;
  }

  .showcase-slide--v {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-slide {
    animation: none;
    opacity: 0;
  }

  .showcase-slide--1 {
    opacity: 1;
  }
}

/* Pregoneros: reproductor destacado, sin dependencias ni carga anticipada del MP4. */
/* Los vídeos de una ficha. Uno solo ocupa el ancho; a partir de dos se reparten en
   columnas y en móvil vuelven a apilarse solos, sin consultas de medios. */
.videos-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}

.preacher-video {
  position: relative;
  isolation: isolate;
  /* El reproductor se mide a sí mismo: los controles se encogen según el hueco que
     ocupa el vídeo, no según lo grande que sea la ventana. Ver más abajo @container. */
  container-type: inline-size;
  overflow: hidden;
  align-self: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #090909;
  box-shadow: var(--shadow-soft);
}

.preacher-video__media,
.preacher-video__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.preacher-video__media {
  display: block;
  object-fit: cover;
  background: #090909;
}

.preacher-video.is-enhanced .preacher-video__media::-webkit-media-controls {
  display: none !important;
}

.preacher-video:not(.is-enhanced) .preacher-video__start,
.preacher-video:not(.is-enhanced) .preacher-video__controls {
  display: none;
}

.preacher-video__shade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.86) 100%);
  transition: opacity 180ms ease;
}

.preacher-video.is-playing .preacher-video__shade {
  opacity: 0.44;
}

.preacher-video__watermark {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  width: clamp(42px, 5vw, 58px);
  height: auto;
  opacity: 0.82;
  pointer-events: none;
}

.preacher-video__heading {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 3vw, 32px);
  bottom: clamp(68px, 8vw, 86px);
  max-width: min(70%, 520px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.preacher-video__heading span {
  display: block;
  margin-bottom: 7px;
  color: #ff9cab;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.preacher-video__heading h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
}

.preacher-video.is-playing .preacher-video__heading {
  opacity: 0;
  transform: translateY(6px);
}

.preacher-video__start,
.preacher-video__control {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  background: rgba(18, 18, 20, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.preacher-video__start:hover,
.preacher-video__control:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(38, 38, 41, 0.9);
}

.preacher-video__start:active,
.preacher-video__control:active {
  transform: scale(0.94);
}

.preacher-video__start {
  position: absolute;
  z-index: 3;
  inset: 50% auto auto 50%;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.preacher-video__start:active {
  transform: translate(-50%, -50%) scale(0.94);
}

.preacher-video__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  color: currentColor;
  pointer-events: none;
}

.preacher-video__start .preacher-video__icon {
  width: 26px;
  height: 26px;
  margin-left: 2px;
}

.preacher-video__icon--pause,
.preacher-video__icon--mute {
  display: none;
}

.preacher-video.is-playing .preacher-video__start {
  opacity: 0;
  visibility: hidden;
}

.preacher-video__controls {
  position: absolute;
  z-index: 4;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 20px);
  left: clamp(12px, 2vw, 22px);
  display: grid;
  grid-template-columns: 38px auto minmax(0, 1fr) auto max-content 38px;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: rgba(12, 12, 14, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.preacher-video.is-controls-hidden {
  cursor: none !important;
}

.preacher-video.is-controls-hidden .preacher-video__controls,
.preacher-video.is-controls-hidden .preacher-video__shade,
.preacher-video.is-controls-hidden .preacher-video__heading {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(4px);
}

.preacher-video__volume-group {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: max-content;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 3px 6px;
  box-sizing: border-box;
}

.preacher-video__vol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  user-select: none;
}

.preacher-video__vol-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.08);
}

.preacher-video__vol-btn:active {
  transform: scale(0.92);
}

.preacher-video__volume {
  width: 55px;
  height: 4px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

.preacher-video__control {
  width: 38px;
  height: 38px;
  padding: 0;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
}

.preacher-video.is-playing .preacher-video__control--toggle .preacher-video__icon--play,
.preacher-video.is-muted .preacher-video__control--mute .preacher-video__icon--volume {
  display: none;
}

.preacher-video.is-playing .preacher-video__control--toggle .preacher-video__icon--pause,
.preacher-video.is-muted .preacher-video__control--mute .preacher-video__icon--mute {
  display: block;
}

.preacher-video__time {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.preacher-video__progress {
  width: 100%;
  height: 4px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

@media (max-width: 560px) {
  .preacher-video__heading {
    left: 12px;
    bottom: 54px;
    max-width: calc(100% - 24px);
  }

  .preacher-video__heading span {
    font-size: 0.64rem;
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }

  .preacher-video__heading h3 {
    font-size: clamp(0.92rem, 3.6vw, 1.1rem);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  }

  .preacher-video__start {
    top: 42%;
    width: 48px;
    height: 48px;
  }

  .preacher-video__controls {
    grid-template-columns: 36px minmax(60px, 1fr) 36px 36px;
    gap: 6px;
    min-height: 40px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 4px 6px;
  }

  .preacher-video__control {
    width: 34px;
    height: 34px;
  }

  .preacher-video__time {
    display: none;
  }
}

/* Lo mismo, pero según lo ancho que sea EL VÍDEO, no la ventana.
   En las hermandades los vídeos van dentro del mosaico, en columnas de unos 300 px,
   y ahí la barra de controles del tamaño de la portada se salía por los lados aunque
   la pantalla fuese enorme. Con esto el reproductor se adapta a su hueco esté donde
   esté: en la portada, en una sección o en una columna del mosaico. */
@container (max-width: 560px) {
  .preacher-video__heading {
    left: 12px;
    bottom: 54px;
    max-width: calc(100% - 24px);
  }

  .preacher-video__heading span {
    font-size: 0.64rem;
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }

  .preacher-video__heading h3 {
    font-size: clamp(0.92rem, 3.2cqi, 1.1rem);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  }

  .preacher-video__start {
    top: 42%;
    width: 48px;
    height: 48px;
  }

  .preacher-video__controls {
    grid-template-columns: 34px minmax(50px, 1fr) 34px 34px;
    gap: 6px;
    min-height: 40px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 4px 6px;
  }

  .preacher-video__control {
    width: 34px;
    height: 34px;
  }

  .preacher-video__time {
    display: none;
  }
}

/* A partir de aquí ya no cabe ni la barra: solo el botón de reproducir en el centro.
   Es una columna de móvil, y con dos controles apelotonados no se acierta a ninguno. */
@container (max-width: 260px) {
  .preacher-video__controls,
  .preacher-video__heading {
    display: none;
  }

  .preacher-video.is-playing .preacher-video__start {
    opacity: 1;
    visibility: visible;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .preacher-video__start,
  .preacher-video__controls {
    background: #151517;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preacher-video__shade,
  .preacher-video__heading,
  .preacher-video__start,
  .preacher-video__control {
    transition: none;
  }
}

.showcase-tag {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(215, 23, 47, 0.2);
  color: #d7172f;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

.showcase-tag--float {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  margin-bottom: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

@media (max-width: 980px) {
  .home-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-countdown {
    width: 100%;
    transform: none !important;
  }
}

/* Brotherhood heritage grids redesign */
.brotherhood-imagery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.brotherhood-imagery-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--brotherhood-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: var(--brotherhood-panel, #12141a);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.brotherhood-imagery-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.brotherhood-imagery-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.brotherhood-imagery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s ease;
}

.brotherhood-imagery-card:hover .brotherhood-imagery-media img {
  transform: scale(1.03);
}

.brotherhood-imagery-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.brotherhood-imagery-body h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-heading, #f0f0f5);
  line-height: 1.3;
}

.brotherhood-imagery-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-muted, #9a9ab0);
}

.brotherhood-imagery-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.brotherhood-imagery-desc {
  margin-top: 4px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--color-text-subtle, #c8c8d8);
  white-space: pre-line;
}





/* ==========================================================================
   Carátulas de música y reproductor

   La carátula es HTML y CSS, no una imagen montada: un cuadrado de color, el
   gráfico de su devoción y tres textos. Lo único que se descarga es el gráfico
   —un WebP de unos 30 KB, compartido y cacheado por todo el portal—, así que una
   ficha con doce marchas no baja doce imágenes: baja las tres o cuatro distintas
   que le tocan.

   Todas las medidas de dentro del cuadrado van en «cqi» —tanto por ciento del
   ancho de la propia carátula—, así que el diseño es idéntico midiendo 74 px en
   el reproductor o 340 px en la rejilla. Un solo diseño, no dos que se separan.
   ========================================================================== */

/* Las tres tipografías, servidas desde aquí y no desde Google: la política de
   seguridad del portal solo admite «font-src 'self'», y además así no se le
   cuenta una visita a nadie por abrir una ficha. Subconjunto latino nada más.
   Con «swap» el texto se ve desde el primer momento con la serif del sistema y
   se recompone al llegar la buena: no bloquean el pintado. */
@font-face {
  font-family: "Cinzel";
  src: url("/assets/fuentes/cinzel-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fuentes/ebgaramond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fuentes/ebgaramond-400-italica.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Cinzel para las capitales espaciadas —es la que más se acerca a la Trajan— y
     EB Garamond para el título y el compositor, que es una Garamond de contraste
     alto con una cursiva que hace las veces de la Caslon. */
  --car-capitales: "Cinzel", ui-serif, Georgia, "Times New Roman", serif;
  --car-serif: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
}

.caratulas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 26px;
}

/* El contenedor de consulta es este, no el lienzo: un elemento no puede medirse a
   sí mismo, y el lienzo necesita el ancho para calcular hasta su propio relleno. */
.caratula {
  position: relative;
  container-type: inline-size;
  min-width: 0;
}

.caratula__lienzo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 7cqi 7cqi 8cqi;
  border-radius: 10px;
  /* El halo de detrás del gráfico y el color de la devoción. El halo es lo que
     evita que el cuadrado parezca un rectángulo de pintura plana. */
  background:
    radial-gradient(68% 52% at 50% 36%, rgb(255 255 255 / 11%), transparent 72%),
    var(--car-fondo, #101f3d);
  color: var(--car-texto, #f4ead2);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--car-linea, #c9a227) 26%, transparent),
    inset 0 0 70px rgb(0 0 0 / 42%),
    0 18px 42px rgb(0 0 0 / 48%);
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* La marca de agua: el mismo gráfico en grande, casi apagado, desbordando por la
   esquina. Es lo que le da fondo a la carátula sin meter otra imagen: reutiliza
   la que el navegador ya se ha bajado. */
.caratula__lienzo::before {
  position: absolute;
  right: -16%;
  bottom: -12%;
  width: 94%;
  height: 94%;
  background: var(--car-grafico) no-repeat center / contain;
  opacity: 0.06;
  filter: grayscale(1) brightness(2.4);
  content: "";
  pointer-events: none;
}

.caratula__cabecera {
  display: flex;
  gap: 4cqi;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}

.caratula__epigrafe,
.caratula__anio {
  color: var(--car-linea, #c9a227);
  font-family: var(--car-capitales);
  font-size: 3cqi;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.caratula__epigrafe {
  letter-spacing: 0.2em;
  /* Sin encoger: el año nunca debe empujar al epígrafe a una segunda línea. */
  min-width: 0;
}

.caratula__anio {
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.caratula__grafico {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 60%;
  max-height: 100%;
  margin: 4cqi 0 3.5cqi;
  object-fit: contain;
  filter: drop-shadow(0 5cqi 4cqi rgb(0 0 0 / 45%));
}

.caratula__pie {
  width: 100%;
  text-align: center;
}

.caratula__titulo {
  margin: 0;
  font-family: var(--car-serif);
  font-size: 8.4cqi;
  font-weight: 500;
  /* Interlineado corto y espaciado negativo: al crecer, las letras se separan
     ópticamente solas y hay que volver a juntarlas. */
  line-height: 1.1;
  letter-spacing: -0.006em;
  text-wrap: balance;
  /* Red de seguridad. El cuerpo se elige en PHP por el número de letras, que
     acierta casi siempre; el recorte está para el «casi». */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.caratula__lienzo--corto .caratula__titulo {
  font-size: 10.4cqi;
}

.caratula__lienzo--largo .caratula__titulo {
  font-size: 6.6cqi;
  line-height: 1.16;
  letter-spacing: 0;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.caratula__lienzo--muy-largo .caratula__titulo {
  font-size: 5.4cqi;
  line-height: 1.22;
  letter-spacing: 0;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.caratula__autor {
  display: -webkit-box;
  margin-top: 2.2cqi;
  overflow: hidden;
  color: color-mix(in srgb, var(--car-linea, #c9a227) 72%, var(--car-texto, #f4ead2));
  font-family: var(--car-serif);
  font-size: 4cqi;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.caratula__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 12px;
}

.caratula__accion {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red-soft);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease;
  position: relative;
  z-index: 2;
}

.caratula__accion--compositor,
.caratula__accion--hermandad {
  color: var(--red-soft, #ff8a99);
}

.caratula__accion--escuchar {
  color: var(--amber, #f3b343);
}

/* Lo que hace pulsable el cuadrado entero: si hay audio se estira el botón de escuchar,
   y si solo hay enlace a hermandad o compositor se estira ese enlace. */
.caratula:not(:has(.caratula__accion--compositor)):not(:has(.caratula__accion--hermandad)) .caratula__accion--escuchar::after,
.caratula:not(:has(.caratula__accion--escuchar)) .caratula__accion--compositor::after,
.caratula:not(:has(.caratula__accion--escuchar)) .caratula__accion--hermandad::after,
.caratula:has(.caratula__accion--compositor):has(.caratula__accion--escuchar) .caratula__accion--escuchar::after,
.caratula:has(.caratula__accion--hermandad):has(.caratula__accion--escuchar) .caratula__accion--escuchar::after {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  content: "";
}

/* Siempre visible, nunca solo al pasar el ratón: en un móvil no hay ratón que
   pasar, y una carátula que no dice que se puede pulsar no se pulsa. */
@media (hover: hover) and (pointer: fine) {
  .caratula:has(.caratula__accion:hover) .caratula__lienzo {
    transform: translateY(-4px);
  }

  .caratula__accion--compositor:hover,
  .caratula__accion--hermandad:hover {
    color: #ff9fae;
  }

  .caratula__accion--escuchar:hover {
    color: #ffe49e;
  }
}

.caratula:has(.caratula__accion:active) .caratula__lienzo {
  transform: scale(0.975);
}

/* En miniatura la carátula se queda en emblema: a 74 px el texto no es texto, es
   ruido. La consulta de contenedor lo resuelve sin una línea de JavaScript. */
@container (max-width: 118px) {
  .caratula__cabecera,
  .caratula__pie {
    display: none;
  }

  .caratula__lienzo {
    justify-content: center;
    padding: 9cqi;
  }

  .caratula__grafico {
    max-width: 74%;
    margin: 0;
  }
}

@media (max-width: 520px) {
  .caratulas-rejilla {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 16px;
  }
}

/* ── El reproductor ─────────────────────────────────────────────────────── */

dialog.reproductor {
  width: min(1120px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

dialog.reproductor::backdrop {
  background: rgba(4, 4, 5, 0.74);
  backdrop-filter: blur(20px) saturate(140%);
}

.reproductor__caja {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* El fondo se tiñe con el color de la marcha que suena: el mismo morado o el
     mismo verde de la carátula, muy rebajado. */
  background:
    linear-gradient(158deg, color-mix(in srgb, var(--car-fondo, #101014) 82%, #000) 0%, #08080a 62%);
  box-shadow: var(--shadow);
}

.reproductor__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease;
}

.reproductor__cerrar svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.reproductor__cerrar:hover {
  background: rgba(0, 0, 0, 0.72);
}

.reproductor__cerrar:active {
  transform: scale(0.92);
}

.reproductor__panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 26px;
}

.reproductor__caratula {
  container-type: inline-size;
}

/* La carátula se clona de la rejilla en cada cambio de marcha, así que el nodo es
   siempre nuevo y esta animación se dispara sola: no hace falta ni una línea de
   JavaScript para encadenarla. El desenfoque es lo que hace que la carátula
   anterior y la nueva se lean como una sola cosa que cambia, y no como dos
   imágenes superpuestas. */
.reproductor__caratula .caratula__lienzo {
  border-radius: 8px;
  animation: caratula-entra 280ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes caratula-entra {
  from {
    opacity: 0;
    transform: scale(0.97);
    filter: blur(5px);
  }
}

.reproductor__rotulo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.reproductor__nombres {
  flex: 1;
  min-width: 0;
}

.reproductor__titulo {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.26;
}

.reproductor__autor {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.reproductor__megusta {
  display: inline-flex;
  flex: none;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease,
    border-color 160ms ease, color 160ms ease;
}

.reproductor__megusta:active {
  transform: scale(0.93);
}

.reproductor__megusta--mio {
  border-color: color-mix(in srgb, var(--red) 55%, transparent);
  background: color-mix(in srgb, var(--red) 16%, transparent);
  color: #ff8b9c;
}

.reproductor__megusta-icono {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Dar un me gusta se hace una vez por marcha, no cien veces al día: aquí sí cabe
   un guiño. El icono se hincha y vuelve, como un latido. */
.reproductor__megusta--latiendo .reproductor__megusta-icono {
  animation: latido 380ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes latido {
  38% {
    transform: scale(1.3);
  }
}

.reproductor__linea {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reproductor__tiempos {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* Las dos barras son <input type="range"> de verdad: teclado, arrastre y lectores
   de pantalla vienen puestos. Lo único que no sabe hacer un range es pintar la
   parte ya recorrida, y eso lo resuelve «--avance», que el JavaScript actualiza. */
.reproductor__barra,
.reproductor__volumen-barra {
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.reproductor__barra::-webkit-slider-runnable-track,
.reproductor__volumen-barra::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--car-linea, #c9a646) var(--avance, 0%),
    rgba(255, 255, 255, 0.2) var(--avance, 0%)
  );
}

.reproductor__barra::-moz-range-track,
.reproductor__volumen-barra::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--car-linea, #c9a646) var(--avance, 0%),
    rgba(255, 255, 255, 0.2) var(--avance, 0%)
  );
}

.reproductor__barra::-webkit-slider-thumb,
.reproductor__volumen-barra::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border: 0;
  border-radius: 50%;
  background: var(--car-texto, #f4efe5);
  -webkit-appearance: none;
  appearance: none;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.reproductor__barra::-moz-range-thumb,
.reproductor__volumen-barra::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--car-texto, #f4efe5);
}

.reproductor__barra:active::-webkit-slider-thumb,
.reproductor__volumen-barra:active::-webkit-slider-thumb {
  transform: scale(1.4);
}

.reproductor__mandos {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.reproductor__mando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform 130ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease;
}

.reproductor__mando svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.reproductor__mando--play {
  width: 60px;
  height: 60px;
}

.reproductor__mando--play svg {
  width: 32px;
  height: 32px;
}

.reproductor__mando:active {
  transform: scale(0.9);
}

.reproductor__mando:disabled {
  opacity: 0.28;
  cursor: default;
}

.reproductor__mando:disabled:active {
  transform: none;
}

.reproductor__volumen {
  display: flex;
  gap: 11px;
  align-items: center;
}

.reproductor__volumen-icono {
  flex: none;
  width: 20px;
  height: 20px;
  fill: var(--muted);
}

.reproductor__volumen-icono--min {
  width: 15px;
  height: 15px;
}

.reproductor__video {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 20px;
  background: #000;
}

/* La API de YouTube sustituye el <div> por su iframe con un tamaño fijo suyo.
   Esto lo devuelve al ancho de la columna sin deformarlo. */
.reproductor__video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
}

.reproductor__aviso {
  margin: 0;
  padding: 0 24px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

dialog.reproductor[open] {
  animation: reproductor-entra 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

dialog.reproductor[open]::backdrop {
  animation: reproductor-fondo 240ms ease-out;
}

@keyframes reproductor-entra {
  from {
    opacity: 0;
    /* Nunca desde scale(0): nada del mundo real aparece de la nada. */
    transform: scale(0.96) translateY(10px);
  }
}

@keyframes reproductor-fondo {
  from {
    opacity: 0;
  }
}

/* ── En vertical ────────────────────────────────────────────────────────────
   Se recoloca todo sin tocar el HTML. «display: contents» disuelve el panel de
   la izquierda y deja sus piezas sueltas dentro de la misma rejilla, y desde ahí
   se ordenan: carátula pequeña y título arriba, el vídeo en medio ocupando lo
   que sobre, y los mandos abajo del todo, donde llega el pulgar. */
@media (max-width: 900px) {
  dialog.reproductor {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
  }

  .reproductor__caja {
    grid-template-areas:
      "caratula rotulo"
      "video    video"
      "linea    linea"
      "mandos   mandos"
      "volumen  volumen";
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    gap: 16px;
    max-height: 100dvh;
    height: 100dvh;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }

  .reproductor__panel {
    display: contents;
  }

  .reproductor__caratula {
    grid-area: caratula;
    align-self: center;
  }

  .reproductor__rotulo {
    grid-area: rotulo;
    align-items: center;
    align-self: center;
    /* Sitio para el aspa de cerrar, que va flotando en la esquina. */
    padding-right: 52px;
  }

  .reproductor__titulo {
    font-size: 1rem;
  }

  .reproductor__linea {
    grid-area: linea;
  }

  .reproductor__mandos {
    grid-area: mandos;
    gap: 26px;
  }

  .reproductor__volumen {
    grid-area: volumen;
  }

  .reproductor__video {
    grid-area: video;
    padding: 0;
    background: transparent;
  }

  .reproductor__video iframe {
    border-radius: 12px;
  }
}

/* Movimiento reducido: se quedan los fundidos, que ayudan a entender qué ha
   cambiado, y se va todo lo que se desplaza o se escala. */
@media (prefers-reduced-motion: reduce) {
  .caratula__lienzo,
  .reproductor__cerrar,
  .reproductor__mando,
  .reproductor__megusta,
  .reproductor__barra::-webkit-slider-thumb,
  .reproductor__volumen-barra::-webkit-slider-thumb {
    transition-property: opacity, background-color, border-color, color;
  }

  .caratula:has(.caratula__accion:hover) .caratula__lienzo,
  .caratula:has(.caratula__accion:active) .caratula__lienzo,
  .reproductor__cerrar:active,
  .reproductor__mando:active,
  .reproductor__megusta:active {
    transform: none;
  }

  dialog.reproductor[open] {
    animation: reproductor-fondo 160ms ease-out;
  }

  .reproductor__caratula .caratula__lienzo,
  .reproductor__megusta--latiendo .reproductor__megusta-icono {
    animation: none;
  }
}

/* ==========================================================================
   Página del tiempo · panel de Detalles (estilo Apple) y mapa interactivo
   ========================================================================== */
.weather-page .weather-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;
  gap: 12px;
}

/* Rejilla uniforme: en escritorio 5 columnas y el viento ocupa 2, de modo que
   con 9 detalles queda una fila de 4 (viento doble) y otra de 5. */
@media (min-width: 640px) {
  .weather-page .weather-details-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 940px) {
  .weather-page .weather-details-grid { grid-template-columns: repeat(5, 1fr); }
}

.weather-page .wx-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;                 /* permite encoger: el texto nunca desborda la caja */
  min-height: 124px;
  padding: 15px 16px;
  border: 1px solid var(--weather-line);
  border-radius: 16px;
  background: var(--weather-surface-raised, #17171a);
  animation: wx-tile-in 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* El viento ocupa dos columnas para alojar la rosa de los vientos. */
.weather-page .wx-tile--wind { grid-column: span 2; }

.weather-page .wx-tile:nth-child(1)  { animation-delay: 0ms; }
.weather-page .wx-tile:nth-child(2)  { animation-delay: 28ms; }
.weather-page .wx-tile:nth-child(3)  { animation-delay: 56ms; }
.weather-page .wx-tile:nth-child(4)  { animation-delay: 84ms; }
.weather-page .wx-tile:nth-child(5)  { animation-delay: 112ms; }
.weather-page .wx-tile:nth-child(6)  { animation-delay: 140ms; }
.weather-page .wx-tile:nth-child(7)  { animation-delay: 168ms; }
.weather-page .wx-tile:nth-child(8)  { animation-delay: 196ms; }
.weather-page .wx-tile:nth-child(9)  { animation-delay: 224ms; }
.weather-page .wx-tile:nth-child(n+10) { animation-delay: 252ms; }

@keyframes wx-tile-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.weather-page .wx-tile__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #86868c;
}

.weather-page .wx-tile__ico {
  flex: none;
  width: 15px;
  height: 15px;
  color: #9a9aa0;
}

.weather-page .wx-tile__value {
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  overflow-wrap: anywhere;       /* corta palabras largas antes que desbordar */
}

.weather-page .wx-tile__value small {
  font-size: 0.9rem;
  font-weight: 600;
  color: #a7a7ad;
}

.weather-page .wx-tile--text .wx-tile__value {
  font-size: 1.15rem;
  line-height: 1.2;
}

.weather-page .wx-tile__note {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #9a9aa0;
}

/* Barra-escala con degradado y punto que se desliza a su posición */
.weather-page .wx-scale {
  position: relative;
  margin: 8px 0 2px;
  height: 5px;
  border-radius: 3px;
}

.weather-page .wx-scale--aqi { background: linear-gradient(90deg, #4caf50, #c9d219, #ff9800, #f44336, #9c27b0); }
.weather-page .wx-scale--uv  { background: linear-gradient(90deg, #4caf50, #ffeb3b, #ff9800, #f44336, #9c27b0); }

.weather-page .wx-scale__dot {
  position: absolute;
  top: 50%;
  left: 2%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  transform: translate(-50%, -50%);
  transition: left 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rosa de los vientos */
.weather-page .wx-wind {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}

.weather-page .wx-wind__data {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.weather-page .wx-wind__data > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.weather-page .wx-wind__data > div:last-child { border-bottom: 0; padding-bottom: 0; }
.weather-page .wx-wind__data dt { font-size: 0.9rem; color: #a7a7ad; }
.weather-page .wx-wind__data dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); }

.weather-page .wx-compass {
  flex: none;
  width: 108px;
  height: 108px;
}

.weather-page .wx-compass__ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.5;
}

.weather-page .wx-compass__card {
  fill: #86868c;
  font-size: 7px;
  font-weight: 700;
  text-anchor: middle;
}

.weather-page .wx-compass__arrow {
  color: #ff7f91;
  stroke: #ff7f91;
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 30px 30px;
  /* La rotación va en la regla base (no en la animación): un var() dentro de
     @keyframes invalida el transform y la flecha se quedaba sin girar. */
  transform: rotate(var(--deg));
  animation: wx-arrow-in 520ms ease-out both;
}

@keyframes wx-arrow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.weather-page .weather-details-note,
.weather-page .weather-radar-note {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: #86868c;
}

/* Mapa interactivo */
.weather-page .weather-radar {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--weather-line);
  border-radius: 16px;
  overflow: hidden;
  background: #0c0c0e;
}

.weather-page .weather-radar iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.weather-page .weather-radar-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--weather-line);
  border-radius: 999px;
  background: #0c0c0e;
}

.weather-page .weather-radar-toggle button {
  min-height: 32px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  /* Apagado a propósito: el contraste con la pastilla activa es lo que indica cuál
     de las dos capas se está viendo en el mapa. */
  color: #8e8e93;
  font: inherit;
  font-size: 0.85rem;
  /* Mismo grosor en los dos: si solo lo engordara el activo, el texto cambiaría de
     ancho al alternar y la pastilla daría un salto. Distingue la pastilla, no la letra. */
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.weather-page .weather-radar-toggle button:hover:not([aria-pressed="true"]) {
  background: rgba(255, 255, 255, 0.06);
  color: #d8d8dc;
}

.weather-page .weather-radar-toggle button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

/* Pastilla activa: se levanta de la pista con un brillo interior (borde superior
   iluminado + halo difuso) y una sombra corta debajo, como los controles
   segmentados de iOS. Así se ve de un vistazo cuál está pulsado. */
.weather-page .weather-radar-toggle button[aria-pressed="true"] {
  background: linear-gradient(180deg, #4c4c52, #34343a);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 12px rgba(255, 255, 255, 0.10),
    0 1px 3px rgba(0, 0, 0, 0.5);
}


/* ===== Selector de capas del mapa ===== */
.weather-page .weather-radar-layers {
  position: relative;   /* ancla del menú desplegable */
}

/* El tercer botón vive dentro del control segmentado y hereda su aspecto: aquí solo
   se le añade el hueco para la flecha. */
.weather-page .weather-radar-toggle .weather-radar-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* El encabezado del panel convierte todos sus <span> en antetítulo (versalitas y
   mucho interletraje). La etiqueta de este botón no lo es: se devuelve a normal. */
.weather-page .weather-panel-heading .weather-radar-more span {
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.weather-page .weather-radar-toggle .weather-radar-more svg {
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}

.weather-page .weather-radar-toggle .weather-radar-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.weather-page .weather-radar-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: min(272px, calc(100vw - 48px));
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(28, 28, 30, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  /* Nace desde la esquina del botón que lo abre, como los menús del sistema. */
  transform-origin: top right;
  animation: weather-radar-menu-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes weather-radar-menu-in {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.weather-page .weather-radar-menu button {
  display: block;
  width: 100%;
  padding: 9px 34px 9px 11px;
  position: relative;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #f2f2f7;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.weather-page .weather-radar-menu button strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

.weather-page .weather-radar-menu button small {
  display: block;
  margin-top: 1px;
  color: #98989f;
  font-size: 0.76rem;
  line-height: 1.35;
}

.weather-page .weather-radar-menu button:hover,
.weather-page .weather-radar-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}

.weather-page .weather-radar-menu button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* La capa puesta se marca con la palomita, no cambiando el fondo: así el resaltado
   sigue siendo el del elemento sobre el que estás. */
.weather-page .weather-radar-menu button[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .weather-page .weather-radar-menu {
    right: auto;
    left: 0;
    width: min(272px, calc(100vw - 40px));
    transform-origin: top left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weather-page .weather-radar-menu { animation: none; }
  .weather-page .weather-radar-toggle .weather-radar-more svg { transition: none; }
  .weather-page .wx-tile,
  .weather-page .wx-compass__arrow { animation: none; }
  .weather-page .wx-compass__arrow { transform: rotate(var(--deg)); }
  .weather-page .wx-scale__dot { transition: none; }
  .weather-page .weather-radar-toggle button { transition: none; }
}


/* ==========================================================================
   Cabecera de portada (hermandades, ciudades, museos y fotógrafos)
   ========================================================================== */
/* ===== Cabecera de portada con zoom por scroll ===== */
/* Con cabecera, el menú se superpone (no ocupa espacio) para que la foto empiece
   pegada al borde superior y el zoom arranque desde el primer scroll. El menú
   aparece junto con el escudo y el título, al terminar de abrirse la foto. */
.has-cover .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease;
}
.has-cover.cover-nav-visible .site-header {
    opacity: 1;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .has-cover .site-header { transition: none; }
}

/* --p: 0 = foto ampliada en el motivo · 1 = foto completa y contenido visible.
   Por defecto 1 (seguro sin JS y bueno para SEO); el JS lo lleva a 0 y lo anima. */
.cover-hero { position: relative; height: 220vh; --p: 1; }
.cover-hero__sticky {
    position: sticky; top: 0; height: 100vh; overflow: hidden; background: #05060a;
}
.cover-hero__media { position: absolute; inset: 0; }
.cover-hero__media img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: var(--fx, 50%) var(--fy, 50%);
    /* Ampliación contenida (máx. 1.32x) para no pixelar por encima de la
       resolución de la foto original. */
    transform: scale(calc(1 + (1 - var(--p)) * 0.32));
    transform-origin: var(--fx, 50%) var(--fy, 50%);
    will-change: transform;
    image-rendering: auto;
}
.cover-hero__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(5,6,10,0.28) 0%, rgba(5,6,10,0) 26%, rgba(5,6,10,0) 42%, rgba(5,6,10,0.55) 72%, rgba(5,6,10,0.92) 100%);
    opacity: calc(0.4 + var(--p) * 0.6);
}
.cover-hero__content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding-bottom: clamp(38px, 7vh, 96px);
    opacity: clamp(0, calc((var(--p) - 0.5) / 0.4), 1);
    transform: translateY(calc((1 - var(--p)) * 26px));
}
.cover-hero__content .shell { display: flex; align-items: center; gap: clamp(16px, 3vw, 26px); flex-wrap: wrap; }
.cover-hero__shield {
    flex: none; width: clamp(72px, 12vw, 104px); height: clamp(72px, 12vw, 104px);
    margin: 0; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2); display: grid; place-items: center;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cover-hero__shield img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.cover-hero__shield span { font-size: 2.2rem; font-weight: 700; color: #fff; }
.cover-hero__text { min-width: 0; }
.cover-hero__text .eyebrow { color: #ff8fa0; margin: 0 0 6px; }
.cover-hero h1 {
    margin: 0; color: #fff; font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.02;
    letter-spacing: -0.03em; text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.cover-hero__official { margin: 8px 0 0; color: rgba(255,255,255,0.82); font-size: 1.02rem; }
.cover-hero__summary { margin: 12px 0 0; max-width: 60ch; color: rgba(255,255,255,0.9); line-height: 1.6; }
.cover-hero__hint {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    display: grid; justify-items: center; gap: 6px; color: rgba(255,255,255,0.82);
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    opacity: calc(1 - var(--p) * 2.2); pointer-events: none;
}
.cover-hero__hint svg { width: 22px; height: 22px; animation: cover-bob 1.8s ease-in-out infinite; }
@keyframes cover-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
    .cover-hero { height: 100vh; }
    .cover-hero__media img { transform: none; }
    .cover-hero__hint svg { animation: none; }
}

/* Enlace a la cuenta en la cabecera, con estilo de botón (antes era una línea
   de texto plano, apenas visible junto al resto de la barra). Con sesión
   iniciada, el JavaScript le cambia el texto por el nombre del usuario. */
.header-account-link {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}

.header-account-link:hover,
.header-account-link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}

@media (max-width: 900px) {
  .header-account-link {
    display: none;
  }
}

/* ── Páginas de solo texto ───────────────────────────────────────────────────────
   Historia, glosario, preguntas frecuentes, quiénes somos. Son las que sostienen la
   autoridad temática del dominio, así que aquí manda la lectura: una sola columna
   estrecha, jerarquía clara y nada que distraiga.

   El ancho está en «ch», no en píxeles: mide caracteres, que es de lo que depende
   que un párrafo se lea de un tirón. Entre 65 y 75 es lo cómodo. */

.pagina-texto {
  color: #d5d8dd;
  font-size: 1.05rem;
  line-height: 1.75;
}

.pagina-texto > * + * {
  margin-top: 1.1em;
}

.pagina-texto h2 {
  max-width: 24ch;
  margin-top: 2.6em;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-wrap: balance;
}

.pagina-texto h2:first-child {
  margin-top: 0;
}

.pagina-texto h3 {
  margin-top: 1.8em;
  font-size: 1.1rem;
  color: #ffffff;
}

.pagina-texto h4 {
  margin-top: 1.5em;
  font-size: 1rem;
  color: #e6e8ec;
}

.pagina-texto ul,
.pagina-texto ol {
  padding-left: 1.3em;
}

.pagina-texto li + li {
  margin-top: 0.5em;
}

.pagina-texto a {
  color: #f2c14e;
  text-underline-offset: 3px;
}

.pagina-texto a:hover {
  color: #ffffff;
}

.pagina-texto strong {
  color: #ffffff;
}

.pagina-texto img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.pagina-texto blockquote {
  margin-left: 0;
  padding-left: 18px;
  border-left: 3px solid rgba(215, 23, 47, 0.7);
  color: #b9bcc3;
  font-style: italic;
}

/* Las tablas de las páginas de historia se salen del ancho de lectura a propósito:
   son datos, no prosa, y comprimirlas a 72ch las haría ilegibles. En pantalla
   estrecha se desplazan dentro de su caja, no arrastran la página entera. */
.pagina-texto table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.pagina-texto th,
.pagina-texto td {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  vertical-align: top;
}

.pagina-texto th {
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}

.pagina-texto tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ── El índice de la página ──────────────────────────────────────────────────────
   Antes era una lista suelta que se confundía con el contenido. Aquí es lo que es:
   navegación. Va en una caja discreta y con los números en su sitio. */

.pagina-indice {
  margin: 2em 0 2.6em;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.pagina-indice > p {
  margin: 0 0 10px;
  color: #9aa0a6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pagina-indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: indice;
}

.pagina-indice li {
  counter-increment: indice;
  margin: 0;
}

.pagina-indice li + li {
  margin-top: 2px;
}

.pagina-indice a {
  display: block;
  padding: 7px 0 7px 30px;
  color: #d5d8dd;
  font-size: 0.97rem;
  text-decoration: none;
  position: relative;
  transition: color 160ms ease, padding-left 160ms ease;
}

.pagina-indice a::before {
  content: counter(indice) ".";
  position: absolute;
  left: 0;
  color: #6d717a;
  font-variant-numeric: tabular-nums;
}

.pagina-indice a:hover,
.pagina-indice a:focus-visible {
  color: #ffffff;
  padding-left: 36px;
}

/* El título de la tabla, que en el sitio viejo era un párrafo suelto encima. */
.pagina-texto caption {
  padding: 0 0 10px;
  color: #9aa0a6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
}

/* Las imágenes del artículo, con su pie. */
.pagina-texto figure {
  margin: 2em 0;
}

.pagina-texto figcaption {
  margin-top: 10px;
  color: #9aa0a6;
  font-size: 0.85rem;
  line-height: 1.5;
}

.table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.referencias-lista {
  margin: 1.5em 0;
  padding-left: 1.5em;
  color: var(--muted, #9aa0a6);
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.referencias-lista li {
  margin-bottom: 0.75em;
}

.referencias-lista li a {
  color: var(--gold-light, #ffd56b);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.referencias-lista li a:hover {
  color: #ffffff;
}

.cortejo-secuencia {
  margin: 2em 0 2.5em;
  padding: 1.5em 1.8em;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent, #d7172f);
  border-radius: 12px;
}

.cortejo-secuencia__titulo {
  margin: 0 0 1em;
  color: #ffffff;
  font-size: 1.05rem;
}

.cortejo-secuencia__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

.cortejo-secuencia__lista li {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  color: var(--muted, #9aa0a6);
  font-size: 0.95rem;
  line-height: 1.5;
}

.cortejo-secuencia__etiqueta {
  color: var(--gold-light, #ffd56b);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Los apartados entran al asomar, como el resto del portal. Solo los encabezados y
   las tablas: animar cada párrafo sería mareante en una página de siete mil
   caracteres. */
@media (prefers-reduced-motion: no-preference) {
  .pagina-texto h2,
  .pagina-texto table,
  .pagina-texto figure {
    animation: pagina-texto-entra linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 26%;
  }
}

@keyframes pagina-texto-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pagina-indice a { transition: none; }
}

/* ── Enlaces relacionados ─────────────────────────────────────────────────────────
   «También puede interesarte» es el enlazado interno del portal, no un adorno: lo que
   da presencia a las páginas que no la tienen por sí solas. Cada tarjeta lleva de qué
   sección es, a dónde va y por qué merece el clic. */

.enlaces-relacionados {
  margin-top: 4em;
  padding-top: 2.4em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.enlaces-relacionados > h2 {
  max-width: none;
  margin: 0 0 1.4em;
}

.enlaces-relacionados__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 14px;
}

.enlaces-relacionados__rejilla a {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.enlaces-relacionados__rejilla a:hover,
.enlaces-relacionados__rejilla a:focus-visible {
  border-color: rgba(215, 23, 47, 0.55);
  background: rgba(215, 23, 47, 0.06);
  transform: translateY(-2px);
}

.enlaces-relacionados__rejilla .eyebrow {
  color: #d7172f;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.enlaces-relacionados__rejilla strong {
  color: #ffffff;
  font-size: 1.02rem;
  line-height: 1.3;
}

.enlaces-relacionados__rejilla span:last-child {
  color: #9aa0a6;
  font-size: 0.87rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .enlaces-relacionados__rejilla a { transition: none; }
  .enlaces-relacionados__rejilla a:hover { transform: none; }
}

/* ── Glosario ────────────────────────────────────────────────────────────────────
   Tres entradas para situarse, el buscador con su barra de letras, y el diccionario.
   Los términos son una lista de definiciones de verdad: <dt> el término, <dd> lo que
   significa. Un lector de pantalla lo anuncia como lo que es. */

.glosario-entradas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.glosario-entrada {
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.glosario-entrada h2 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  line-height: 1.3;
}

.glosario-entrada p {
  margin: 0;
  color: #9aa0a6;
  font-size: 0.93rem;
  line-height: 1.6;
}

/* El buscador se queda arriba al bajar por el diccionario: con 54 términos, tener que
   subir para cambiar de letra sería absurdo. */
.glosario-buscador {
  position: sticky;
  top: 78px;
  z-index: 5;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(12px);
}

.glosario-buscador label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

.glosario-buscador input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: #17171a;
  color: #f2f3f5;
  color-scheme: dark;
  font: inherit;
  font-size: 1rem;
}

.glosario-buscador input::placeholder { color: #6d717a; }

.glosario-buscador input:focus-visible {
  outline: 2px solid #fabd00;
  outline-offset: 2px;
}

.glosario-cuenta {
  margin: 10px 0 12px;
  color: #9aa0a6;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.glosario-letras {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.glosario-letra {
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: #d5d8dd;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.glosario-letra:hover { border-color: rgba(255, 255, 255, 0.32); }

.glosario-letra.is-active {
  border-color: transparent;
  background: #d7172f;
  color: #ffffff;
}

.glosario-letra:focus-visible {
  outline: 2px solid #fabd00;
  outline-offset: 2px;
}

/* ── El diccionario ── */
.glosario-lista { margin-top: 34px; }

.glosario-grupo[hidden] { display: none; }

.glosario-grupo + .glosario-grupo { margin-top: 34px; }

.glosario-grupo > h2 {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(215, 23, 47, 0.45);
  color: #d7172f;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.glosario-grupo dl { margin: 0; }

.glosario-termino {
  display: grid;
  grid-template-columns: minmax(160px, 210px) minmax(0, 1fr);
  gap: 8px 28px;
  padding: 16px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.glosario-termino[hidden] { display: none; }

.glosario-termino dt {
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 700;
}

.glosario-termino dd {
  margin: 0;
  color: #b9bcc3;
  font-size: 0.98rem;
  line-height: 1.65;
}

.glosario-fuente {
  display: block;
  margin-top: 6px;
  color: #6d717a;
  font-size: 0.8rem;
}

.glosario-vacio {
  margin-top: 30px;
  padding: 22px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: #9aa0a6;
  text-align: center;
}

.glosario-vacio[hidden] { display: none; }

/* Los términos entran al asomar, igual que el resto del portal. */
@media (prefers-reduced-motion: no-preference) {
  .glosario-entrada,
  .glosario-grupo {
    animation: glosario-entra linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 24%;
  }
}

@keyframes glosario-entra {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .glosario-termino { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .glosario-buscador { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .glosario-letra { transition: none; }
}

/* ── Quiénes somos ───────────────────────────────────────────────────────────────
   Apartados de tres clases: prosa, grupos en tarjetas y una secuencia numerada. La
   forma la decide lo que hay dentro, no un capricho: lo que es comparable va en
   tarjetas para poder compararlo, y lo que tiene orden va numerado. */

.quienes-bloque + .quienes-bloque {
  margin-top: 3.4em;
  padding-top: 3.4em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.quienes-bloque > h2 {
  margin-top: 0;
}

.quienes-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 16px;
  margin-top: 1.6em;
}

.quienes-tarjeta {
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.quienes-tarjeta h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.3;
}

.quienes-tarjeta p {
  margin: 0;
  color: #9aa0a6;
  font-size: 0.93rem;
  line-height: 1.6;
}

/* La secuencia: el número no es decoración, es el dato. Va grande y a la izquierda,
   con una línea que une un paso con el siguiente. */
.quienes-pasos {
  margin-top: 1.6em;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.quienes-pasos li {
  position: relative;
  counter-increment: paso;
  padding: 0 0 26px 62px;
}

.quienes-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(215, 23, 47, 0.5);
  border-radius: 50%;
  background: rgba(215, 23, 47, 0.1);
  color: #ff6b7d;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* La línea que baja de un paso al siguiente. El último no la lleva: ahí se acaba. */
.quienes-pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 46px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(rgba(215, 23, 47, 0.45), rgba(255, 255, 255, 0.06));
}

.quienes-pasos h3 {
  margin: 8px 0 6px;
  font-size: 1.05rem;
}

.quienes-pasos p {
  margin: 0;
  color: #b9bcc3;
}

@media (prefers-reduced-motion: no-preference) {
  .quienes-bloque {
    animation: quienes-entra linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 24%;
  }
}

@keyframes quienes-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ── Preguntas frecuentes ────────────────────────────────────────────────────────
   Acordeón con <details>: se pliega sin una línea de JavaScript, funciona con el
   teclado por su cuenta y Google indexa igual lo que está plegado. Veinte preguntas
   desplegadas serían una página interminable. */

.faq-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
}

.faq-indice a {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #d5d8dd;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.faq-indice a:hover,
.faq-indice a:focus-visible {
  border-color: rgba(215, 23, 47, 0.6);
  background: rgba(215, 23, 47, 0.08);
  color: #ffffff;
}

.faq-grupo + .faq-grupo { margin-top: 3.4em; }

.faq-grupo > h2 {
  margin: 0 0 6px;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  scroll-margin-top: 90px;      /* que la cabecera fija no lo tape al saltar */
}

.faq-entradilla {
  margin: 0 0 1.4em;
  max-width: 68ch;
  color: #9aa0a6;
  line-height: 1.6;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 2px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* El signo se dibuja aquí para poder girarlo al abrir. Va delante y no detrás: así
   todas las preguntas empiezan alineadas, largas o cortas. */
.faq-item summary::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 7px;
  border-right: 2px solid #d7172f;
  border-bottom: 2px solid #d7172f;
  transform: rotate(-45deg);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-item[open] summary::before {
  transform: rotate(45deg);
}

.faq-item summary:hover { color: #f2c14e; }

.faq-item summary:focus-visible {
  outline: 2px solid #fabd00;
  outline-offset: 2px;
}

.faq-respuesta {
  padding: 0 0 20px 25px;
  max-width: 74ch;
  color: #b9bcc3;
  line-height: 1.7;
}

.faq-respuesta p { margin: 0 0 0.9em; }
.faq-respuesta p:last-child { margin-bottom: 0; }

.faq-respuesta a {
  color: #f2c14e;
  text-underline-offset: 3px;
}

.faq-respuesta a:hover { color: #ffffff; }

/* La aclaración legal: se distingue de la respuesta sin pesar como un aviso. */
.faq-nota {
  margin-top: 1.1em !important;
  padding-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.16);
  color: #8a8e96;
  font-size: 0.88rem;
}

/* La respuesta baja al abrir en vez de aparecer de golpe. */
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-respuesta {
    animation: faq-abre 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .faq-grupo {
    animation: faq-entra linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 24%;
  }
}

@keyframes faq-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes faq-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::before,
  .faq-indice a { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Seguir una ficha
   ═══════════════════════════════════════════════════════════════════════════
   Una línea debajo de la cabecera: la cuenta de seguidores y el botón. Sin
   recuadro y sin ocupar media pantalla, que es lo que hacían las cajas viejas.
   ═══════════════════════════════════════════════════════════════════════════ */
.seguir-tira {
  margin: 0 0 4px;
}

.seguir {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}

.seguir__acciones {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.seguir__cuenta strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;   /* al cambiar el número, el rótulo no se mueve */
}

.seguir__boton {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.seguir__boton:hover,
.seguir__boton:focus-visible {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

/* «Escribir» va al lado de «Seguir» pero no compite con él: seguir es lo que se espera
   que haga la mayoría, escribir es lo que hace uno de cada cien. Mismo tamaño para que
   se pueda pulsar igual, menos peso visual. */
.seguir__boton--suave {
  border-color: var(--line);
  color: var(--muted);
  font-weight: 500;
}

.seguir__boton--suave:hover,
.seguir__boton--suave:focus-visible {
  border-color: var(--line-strong);
  background: none;
  color: var(--text);
}

/* Siguiendo: apagado, no encendido. Lo que hay que ver es el que aún no has
   pulsado; el ya pulsado solo tiene que confirmar, y al pasar por encima
   avisa en rojo de que ahí se deja de seguir. */
.seguir__boton--puesto {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--soft);
}

.seguir__boton--puesto:hover,
.seguir__boton--puesto:focus-visible {
  border-color: var(--red);
  background: none;
  color: var(--red);
}

.seguir__boton[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Para lectores de pantalla: «Seguir a la Hermandad de…», no «Seguir» a secas
   repetido por toda la web. */
.seguir__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .seguir__boton { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   «¿Esta ficha es tuya?»
   ═══════════════════════════════════════════════════════════════════════════
   El mismo aviso que tenía la ficha del fotógrafo, pero en site.css: ahora sale
   en las cinco fichas y solo fotografo.php carga cuenta.css. Con los colores
   del portal, que estas páginas son oscuras.
   ═══════════════════════════════════════════════════════════════════════════ */
.reclamar-tira {
  max-width: 46rem;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.reclamar-tira h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.reclamar-tira p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.6;
}

/* El botón vive en cuenta.css, que estas páginas no cargan. Se define aquí lo
   justo para que se vea como un botón y no como un enlace suelto. */
.reclamar-tira .cuenta-boton {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.reclamar-tira .cuenta-boton:hover,
.reclamar-tira .cuenta-boton:focus-visible {
  background: var(--red-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premios de un fotógrafo
   ═══════════════════════════════════════════════════════════════════════════
   Tres datos por línea: concurso, premio y año. El concurso es lo que se busca
   al leer, así que va primero y en claro; el año a la derecha, en su columna,
   para poder recorrerlos con la vista sin leerlos todos.
   ═══════════════════════════════════════════════════════════════════════════ */
.premios {
  margin: 0;
  padding: 0;
  list-style: none;
}

.premios li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.premios li:last-child {
  border-bottom: 0;
}

.premios__concurso {
  flex: 1 1 12rem;
  font-weight: 600;
}

.premios__premio {
  color: var(--soft);
}

.premios__anio {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Compartir la página
   ═══════════════════════════════════════════════════════════════════════════
   A la derecha de la tira de seguidores, debajo de la cabecera. Comparte la
   ficha entera; compartir una foto suelta se hace dentro del visor, que es
   donde se está mirando esa foto.
   ═══════════════════════════════════════════════════════════════════════════ */
.compartir-pagina {
  display: flex;
  align-items: center;
  gap: 8px;                 /* separados: pegados se falla al pulsar */
  margin-left: auto;        /* a la derecha del todo */
}

.compartir-pagina__rotulo {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compartir-pagina__icono {
  display: grid;
  place-items: center;
  flex: 0 0 44px;           /* 44 de lado: lo mínimo para acertar con el dedo */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  color: var(--soft);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.compartir-pagina__icono svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.compartir-pagina__icono:hover,
.compartir-pagina__icono:focus-visible {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.compartir-pagina__icono.is-copiado {
  border-color: var(--green);
  color: var(--green);
}

/* En la versión móvil (<= 640px), la tira se divide en DOS filas claramente separadas:
   - Fila 1: cuenta de seguidores, botón «Seguir» y botón «Mensajes».
   - Fila 2: botones de compartir (WhatsApp, X, Facebook, Telegram, Copiar, etc.).
   Elimina completamente el desplazamiento o desbordamiento horizontal en móviles. */
@media (max-width: 640px) {
  .seguir {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 0 14px;
  }

  .seguir__acciones {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    width: 100%;
  }

  .seguir__boton {
    padding: 7px 15px;
    font-size: 0.88rem;
  }

  .compartir-pagina__rotulo {
    display: none;
  }

  .compartir-pagina {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-left: 0;
    width: 100%;
    padding-top: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .compartir-pagina::-webkit-scrollbar {
    display: none;
  }

  .compartir-pagina__icono {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .seguir > .compartir-pagina {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compartir-pagina__icono { transition: none; }
}

/* Ficha de canal de vídeo (canal-video.php): cabecera con escudo/miniatura del
   canal y acciones internas — igual que el resto de fichas, sin recuadros. */
.canal-video-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 0.32fr);
  gap: 48px;
  align-items: center;
}

.canal-video-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.canal-video-hero__crest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.canal-video-hero__crest img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

@media (max-width: 780px) {
  .canal-video-hero__grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .canal-video-hero__crest {
    flex-direction: row;
    justify-content: flex-start;
  }
  .canal-video-hero__crest img {
    width: 96px;
    height: 96px;
  }
}

/* ==========================================================================
   CABECERAS MAESTRAS DE CIUDADES Y HERMANDADES (Normalización de Imagen y Escudo)
   ========================================================================== */

/* 1. Cabeceras con fotografía (Ciudades, Pregoneros, Fotógrafos, Músicos, Museos): La foto ocupa el 100% del recuadro sin recortes ni márgenes */
body.city-record-page .cover-hero__shield,
body[data-entity="preachers"] .cover-hero__shield,
body[data-entity="photographers"] .cover-hero__shield,
body[data-entity="musicians"] .cover-hero__shield,
body[data-entity="museums"] .cover-hero__shield,
.city-header-image-wrapper {
  background: transparent !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: clamp(18px, 3vw, 28px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

body.city-record-page .cover-hero__shield img,
body[data-entity="preachers"] .cover-hero__shield img,
body[data-entity="photographers"] .cover-hero__shield img,
body[data-entity="musicians"] .cover-hero__shield img,
body[data-entity="museums"] .cover-hero__shield img,
.city-header-image-wrapper img,
.city-header-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Cabeceras de Hermandades y Museos: El recuadro del escudo está relleno de blanco sólido (#ffffff) */
body.brotherhood-detail-page .cover-hero__shield,
body[data-entity="museums"] .cover-hero__shield,
body[data-entity="artisans"] .cover-hero__shield,
.brotherhood-master-shield {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: clamp(18px, 3vw, 28px) !important;
  overflow: hidden !important;
  padding: 8px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.brotherhood-detail-page .cover-hero__shield img,
body[data-entity="museums"] .cover-hero__shield img,
body[data-entity="artisans"] .cover-hero__shield img,
.brotherhood-master-shield img,
#brotherhood-shield {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   ESTILOS DE TARJETAS DE PREGONES Y CONTROLES DE TIPOGRAFÍA (Pregoneros)
   ========================================================================== */

.sermon-page-shell {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  box-sizing: border-box;
}

#record-detail-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 72px !important;
  width: 100% !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
}

#biografia,
.sermon-card {
  scroll-margin-top: 96px;
}

.sermon-card {
  position: relative;
  background: rgba(18, 18, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 36px 40px;
  margin-bottom: 72px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sermon-card:last-child {
  margin-bottom: 0 !important;
}

.sermon-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.sermon-card__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.sermon-card__title {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 6px 0 12px 0;
}

.sermon-card__meta {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--muted, #a1a1aa);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
}

.sermon-card__meta-sep {
  color: rgba(255, 255, 255, 0.25);
  font-weight: bold;
}

.sermon-font-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 28px;
  margin-bottom: 20px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: auto;
}

.sermon-font-controls__label {
  font-size: 0.82rem;
  color: var(--muted, #a1a1aa);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

.sermon-font-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sermon-font-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

.sermon-font-btn:active {
  transform: scale(0.95);
}

.sermon-font-btn.is-active {
  background: var(--red, #c0262d);
  border-color: var(--red, #c0262d);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(192, 38, 45, 0.4);
}

.sermon-transcript-body {
  font-size: 1.06rem;
  line-height: 1.85;
  color: #d4d4d8;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  transition: font-size 0.2s ease, line-height 0.2s ease;
}

.sermon-transcript-body p {
  margin: 0 0 1.8em 0 !important;
  line-height: 1.85 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  transition: font-size 0.2s ease, line-height 0.2s ease;
}

.sermon-transcript-body p:last-child {
  margin-bottom: 0 !important;
}

.sermon-media-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sermon-photos-section {
  margin-top: 20px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sermon-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.sermon-photo-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #111113;
  margin: 0;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.sermon-photo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.sermon-photo-card img {
  width: 100%;
  height: 155px;
  object-fit: cover;
  display: block;
}

.sermon-photo-card figcaption {
  padding: 8px 12px;
  font-size: 0.78rem;
  color: #a1a1aa;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sermon-videos-container {
  margin-top: 20px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 640px) {
  .sermon-card {
    padding: 20px 20px;
    margin-bottom: 44px;
  }
  .sermon-font-controls {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  .sermon-photos-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }
  .sermon-photo-card img {
    height: 120px;
  }
}

/* ── Banner y Modal de Cookies (Diseño estilo Apple, Minimalista, RGPD / AEPD) ─
   Fondo blanco para contraste sobre el fondo negro de la web, squircle y reicon. */

/* Botón flotante accesible en la esquina inferior izquierda */
.ssee-cookie-trigger {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9980;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 980px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* Ocultar el botón flotante de cookies cuando el visor de fotos o un modal a pantalla completa esté abierto */
body.visor-abierto .ssee-cookie-trigger,
body.visor-abierto .ssee-cookie-banner,
body:has(.visor-foto:not([hidden])) .ssee-cookie-trigger,
body:has(.visor-foto:not([hidden])) .ssee-cookie-banner,
body:has(dialog[open]) .ssee-cookie-trigger {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.95) !important;
}

.ssee-cookie-trigger:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
  background: #f9fafb;
}

.ssee-cookie-trigger:active {
  transform: translateY(0) scale(0.97);
}

.ssee-cookie-trigger svg {
  width: 18px;
  height: 18px;
  color: #dc2626;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .ssee-cookie-trigger {
    bottom: 16px;
    left: 16px;
    height: 36px;
    padding: 0 12px;
    font-size: 0.78rem;
  }
}

/* Banner flotante principal (Capa 1) */
.ssee-cookie-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  max-width: 460px;
  width: calc(100% - 48px);
  background: #ffffff;
  color: #111827;
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 8px 24px -4px rgba(0, 0, 0, 0.35);
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ssee-cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ssee-cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ssee-cookie-banner__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ssee-cookie-banner__icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fef2f2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ssee-cookie-banner__icon-wrap svg {
  width: 22px;
  height: 22px;
}

.ssee-cookie-banner__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ssee-cookie-banner__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4b5563;
}

.ssee-cookie-banner__text a {
  color: #dc2626;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.ssee-cookie-banner__text a:hover {
  color: #991b1b;
}

.ssee-cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.ssee-cookie-banner__actions-config {
  grid-column: span 2;
  margin-top: 2px;
}

/* Botones Apple-style */
.ssee-cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 980px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}

.ssee-cookie-btn:active {
  transform: scale(0.97);
}

.ssee-cookie-btn--primary {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.ssee-cookie-btn--primary:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.ssee-cookie-btn--secondary {
  background: #f3f4f6;
  color: #1f2937;
  border-color: #e5e7eb;
}

.ssee-cookie-btn--secondary:hover {
  background: #e5e7eb;
  color: #111827;
}

.ssee-cookie-btn--ghost {
  width: 100%;
  background: transparent;
  color: #4b5563;
  border-color: #e5e7eb;
  padding: 8px 16px;
}

.ssee-cookie-btn--ghost:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

@media (max-width: 640px) {
  .ssee-cookie-banner {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
    padding: 20px;
  }
  .ssee-cookie-banner__actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ssee-cookie-banner__actions-config {
    grid-column: span 1;
  }
}

/* Panel Modal de Configuración (Capa 2) */
.ssee-cookie-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ssee-cookie-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.ssee-cookie-modal {
  background: #ffffff;
  color: #111827;
  border-radius: 24px;
  max-width: 580px;
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 72px -16px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.ssee-cookie-backdrop.is-open .ssee-cookie-modal {
  transform: scale(1) translateY(0);
}

.ssee-cookie-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}

.ssee-cookie-modal__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ssee-cookie-modal__icon {
  width: 22px;
  height: 22px;
  color: #dc2626;
  flex-shrink: 0;
}

.ssee-cookie-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
}

.ssee-cookie-modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #9ca3af;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}

.ssee-cookie-modal__close:hover {
  color: #111827;
  background: #f3f4f6;
}

.ssee-cookie-modal__close svg {
  width: 24px;
  height: 24px;
}

.ssee-cookie-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.ssee-cookie-modal__intro {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4b5563;
}

/* Categorías de cookies */
.ssee-cookie-cat {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ssee-cookie-cat:hover {
  border-color: #d1d5db;
  background: #fdfdfd;
}

.ssee-cookie-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ssee-cookie-cat__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ssee-cookie-cat__icon {
  width: 20px;
  height: 20px;
  color: #4b5563;
  flex-shrink: 0;
}

.ssee-cookie-cat__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: #111827;
  letter-spacing: -0.01em;
}

.ssee-cookie-cat__badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 980px;
  background: #e5e7eb;
  color: #374151;
}

.ssee-cookie-cat__badge--active {
  background: #dcfce7;
  color: #15803d;
}

.ssee-cookie-cat__desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #4b5563;
}

/* iOS Toggle Switch */
.ssee-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}

.ssee-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ssee-switch__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #d1d5db;
  border-radius: 980px;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ssee-switch__slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ssee-switch input:checked + .ssee-switch__slider {
  background-color: #10b981;
}

.ssee-switch input:checked + .ssee-switch__slider::before {
  transform: translateX(20px);
}

.ssee-switch input:disabled + .ssee-switch__slider {
  background-color: #10b981;
  opacity: 0.7;
  cursor: not-allowed;
}

.ssee-switch input:focus-visible + .ssee-switch__slider {
  outline: 2px solid #111827;
  outline-offset: 2px;
}

/* Acciones del Modal */
.ssee-cookie-modal__footer {
  padding: 18px 24px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: #f9fafb;
}

@media (max-width: 640px) {
  .ssee-cookie-modal {
    max-height: calc(100vh - 20px);
    border-radius: 20px;
  }
  .ssee-cookie-modal__header,
  .ssee-cookie-modal__body,
  .ssee-cookie-modal__footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  .ssee-cookie-modal__footer {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .ssee-cookie-modal__footer .ssee-cookie-btn {
    width: 100%;
  }
}

/* Estilos específicos para páginas legales (Política de Cookies, Aviso Legal, Política de Privacidad, Condiciones de Contratación) */
.politica-cookies h2,
.aviso-legal h2,
.politica-privacidad h2,
.condiciones-contratacion h2 {
  font-size: 1.28rem;
  font-weight: 700;
  margin-top: 2.2em;
  margin-bottom: 0.5em;
  color: #ffffff;
  letter-spacing: -0.015em;
}

.politica-cookies h3,
.aviso-legal h3,
.politica-privacidad h3,
.condiciones-contratacion h3 {
  font-size: 1.05rem;
  font-weight: 650;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
  color: #f3f4f6;
}

.legal-tabla-wrap,
.politica-cookies-tabla-wrap {
  margin: 1.6em 0 2em;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  -webkit-overflow-scrolling: touch;
}

.legal-tabla,
.politica-cookies-tabla {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;
}

.legal-tabla th,
.politica-cookies-tabla th {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.legal-tabla td,
.politica-cookies-tabla td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  vertical-align: top;
}

.legal-tabla tbody tr:last-child td,
.politica-cookies-tabla tbody tr:last-child td {
  border-bottom: none;
}

.legal-tabla tbody tr:hover td,
.politica-cookies-tabla tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.legal-tabla code,
.politica-cookies-tabla code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
  white-space: nowrap;
}

.cookie-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 980px;
  font-size: 0.76rem;
  font-weight: 650;
  white-space: nowrap;
}

.cookie-badge--yes {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.cookie-badge--no {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ── AVISO DE MANTENIMIENTO PROGRAMADO EN PORTADA ───────────────────── */
.hero-maintenance-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 620px;
  margin: 22px 0 0;
  padding: 14px 18px;
  background: rgba(243, 179, 67, 0.12);
  border: 1px solid rgba(243, 179, 67, 0.38);
  border-left: 4px solid #f3b343;
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  animation: heroNoticeFadeIn 300ms ease-out both;
}

.hero-maintenance-notice[hidden] {
  display: none !important;
}

.hero-maintenance-notice__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f3b343;
  margin-top: 1px;
}

.hero-maintenance-notice__content {
  flex: 1;
  min-width: 0;
}

.hero-maintenance-notice__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.hero-maintenance-notice__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(243, 179, 67, 0.22);
  color: #fcd34d;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hero-maintenance-notice__text {
  margin: 0;
  color: #fbf6ec;
  font-size: 0.94rem;
  line-height: 1.5;
  font-weight: 450;
}

@keyframes heroNoticeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Calendario perpetuo ────────────────────────────────────────────────────────── */
.cp { --cp-accent: #d7172f; --cp-gold: #f3b343; --cp-surface: #121214; --cp-surface-2: #17171a; --cp-line: rgba(255,255,255,0.12); }
.cp-hero { padding: clamp(40px, 7vw, 80px) 0 18px; }
.cp-hero__grid { display: grid; gap: 28px; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items: end; }
.cp-hero h1 { margin: 8px 0 14px; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.cp-hero .hero-lead { max-width: 46ch; color: var(--muted); }
.cp-next { padding: 22px 24px; border: 1px solid var(--cp-line); border-radius: var(--radius-lg); background: var(--cp-surface); }
.cp-next:empty { display: none; }
.cp-next__label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-accent); }
.cp-next__title { margin: 6px 0 2px; font-size: 1.5rem; letter-spacing: -0.02em; }
.cp-next__date { margin: 0; color: var(--soft); }
.cp-next__days { margin: 16px 0 0; display: flex; align-items: baseline; gap: 8px; }
.cp-next__days b { font-size: 2.4rem; font-weight: 750; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.cp-next__days span { color: var(--muted); font-size: 0.9rem; }

/* Calculadora */
.cp-calc { padding: clamp(20px, 3.5vw, 36px); border: 1px solid var(--cp-line); border-radius: var(--radius-xl); background: var(--cp-surface); }
.cp-calc__control { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.8vw, 16px); flex-wrap: nowrap; }
.cp-step { min-width: 52px; height: 50px; padding: 0 clamp(10px, 1.4vw, 16px); border: 1px solid var(--cp-line); border-radius: 14px; background: var(--cp-surface-2); color: var(--soft); font: inherit; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; flex-shrink: 0; transition: background-color 140ms ease, transform 120ms ease, border-color 140ms ease; }
.cp-step:hover { background: rgba(255,255,255,0.06); border-color: var(--line-strong); }
.cp-step:active { transform: scale(0.93); }
.cp-yearbox { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 170px; max-width: 240px; flex: 0 1 auto; }
.cp-year { width: 100%; min-width: 0; padding: 2px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: clamp(2.8rem, 4.5vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cp-year::-webkit-outer-spin-button, .cp-year::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-year:focus { outline: none; border-bottom-color: var(--cp-accent); }
.cp-yearbox__hint { min-height: 1.2em; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-accent); white-space: nowrap; }

/* Grid de celebraciones */
.cp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(20px, 3vw, 28px); }
.cp-card { display: flex; flex-direction: column; gap: 3px; padding: 16px; border: 1px solid var(--cp-line); border-radius: 18px; background: var(--cp-surface-2); animation: cp-in 440ms cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--i) * 38ms); }
.cp-card__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.cp-card__date { font-size: 1.55rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.12; }
.cp-card__desc { margin-top: 6px; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.cp-card--jueves { background: #6d0f1c; border-color: #8d101e; color: #fff; }
.cp-card--viernes { background: #d7172f; border-color: #e64256; color: #fff; }
.cp-card--resurrec { background: var(--cp-gold); border-color: #f6c667; color: #1a1205; }
.cp-card--jueves .cp-card__label, .cp-card--viernes .cp-card__label { color: rgba(255,255,255,0.82); }
.cp-card--jueves .cp-card__desc, .cp-card--viernes .cp-card__desc { color: rgba(255,255,255,0.85); }
.cp-card--resurrec .cp-card__label { color: #6b4e12; }
.cp-card--resurrec .cp-card__desc { color: #4a370c; }

/* Resumen */
.cp-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.cp-sum { padding: 16px; border: 1px solid var(--cp-line); border-radius: 18px; background: var(--cp-surface-2); }
.cp-sum__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.cp-sum__value { display: block; margin-top: 4px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }

/* Tablas */
.cp-table-wrap { overflow-x: auto; border: 1px solid var(--cp-line); border-radius: var(--radius-lg); }
.cp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cp-table th, .cp-table td { padding: 14px 16px; text-align: left; vertical-align: top; }
.cp-table thead th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--cp-line); white-space: nowrap; }
.cp-table tbody td { border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--muted); line-height: 1.5; }
.cp-table tbody tr:last-child td { border-bottom: 0; }
.cp-table td:first-child { font-weight: 700; color: var(--text); white-space: nowrap; }
.cp-table--rows tbody tr { cursor: pointer; transition: background-color 130ms ease; }
.cp-table--rows tbody tr:hover { background: rgba(255,255,255,0.04); }
.cp-table--rows tbody td { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--soft); }
.cp-table tr[aria-current="true"] td { background: rgba(215,23,47,0.10); }
.cp-table tr[aria-current="true"] td:first-child { color: var(--text); }

/* Cajas de texto */
.cp-prose { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--cp-line); border-radius: var(--radius-lg); background: var(--cp-surface); }
.cp-prose h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; }
.cp-prose p { margin: 0 0 12px; max-width: 76ch; color: var(--soft); line-height: 1.7; }
.cp-prose p:last-child { margin-bottom: 0; }
.cp-prose .cp-lead { color: var(--muted); }
.cp-prose .cp-table-wrap { margin-top: 20px; }

/* Información contrastada */
.cp-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cp-facts li { position: relative; padding-left: 20px; color: var(--muted); line-height: 1.6; }
.cp-facts li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-accent); }
.cp-facts b { color: var(--text); font-weight: 650; }

/* FAQ */
.cp-faq { display: grid; gap: 10px; }
.cp-faq details { border: 1px solid var(--cp-line); border-radius: 16px; background: var(--cp-surface); overflow: hidden; }
.cp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary .cp-q { flex: 1; }
.cp-faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--cp-gold); transition: transform 220ms ease; }
.cp-faq details[open] summary::after { transform: rotate(45deg); }
.cp-faq p { margin: 0; padding: 0 20px 20px; color: var(--muted); line-height: 1.7; }

@keyframes cp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .cp-cards { grid-template-columns: repeat(2, 1fr); }
  .cp-summary { grid-template-columns: 1fr; }
  .cp-yearbox { min-width: 140px; max-width: 200px; }
  .cp-year { font-size: clamp(2.4rem, 5.2vw, 3.4rem); }
}
@media (max-width: 760px) {
  .cp-hero__grid { grid-template-columns: 1fr; }
  .cp-calc { padding: clamp(16px, 3.5vw, 24px); }
  .cp-calc__control { gap: clamp(6px, 1.8vw, 12px); }
  .cp-step { min-width: 48px; height: 48px; padding: 0 10px; font-size: 0.95rem; border-radius: 12px; }
  .cp-yearbox { min-width: 120px; max-width: 170px; }
  .cp-year { font-size: clamp(2.35rem, 6vw, 3rem); }
}
@media (max-width: 480px) {
  .cp-calc { padding: 18px 12px; }
  .cp-calc__control { gap: clamp(5px, 1.8vw, 10px); }
  .cp-step { min-width: 44px; height: 46px; padding: 0 clamp(6px, 1.5vw, 10px); font-size: 0.95rem; font-weight: 700; border-radius: 12px; }
  .cp-yearbox { min-width: 95px; max-width: 140px; }
  .cp-year { font-size: clamp(2.35rem, 8vw, 2.9rem); padding: 0; }
  .cp-yearbox__hint { font-size: clamp(0.62rem, 1.3vw, 0.72rem); letter-spacing: 0.06em; }
}
@media (max-width: 359px) {
  .cp-calc { padding: 14px 8px; }
  .cp-calc__control { gap: 4px; }
  .cp-step { min-width: 40px; height: 44px; padding: 0 4px; font-size: 0.88rem; border-radius: 10px; }
  .cp-yearbox { min-width: 80px; max-width: 105px; }
  .cp-year { font-size: 2.1rem; }
  .cp-yearbox__hint { font-size: 0.58rem; letter-spacing: 0.04em; }
}
@media (prefers-reduced-motion: reduce) { .cp-card { animation: none; } .cp-step:active { transform: none; } .cp-faq summary::after { transition: none; } }

/* ── Noticias de Hermandades: Masonry Grid Nativo ────────────────────────── */
#noticias .split-heading {
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: 32px;
}
@media (max-width: 980px) {
  #noticias .split-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
#noticias-home-title {
  font-size: clamp(1.85rem, 3.2vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance;
  white-space: normal;
}
.news-masonry-grid {
  column-count: 1;
  column-gap: 24px;
  width: 100%;
  margin-top: clamp(24px, 3.5vw, 40px);
}
@media (min-width: 600px) {
  .news-masonry-grid {
    column-count: 2;
  }
}
@media (min-width: 960px) {
  .news-masonry-grid {
    column-count: 3;
  }
}
@media (min-width: 1300px) {
  .news-masonry-grid {
    column-count: 4;
  }
}
.news-card {
  break-inside: avoid;
  margin-bottom: 24px;
  background: var(--panel-strong, rgba(24, 24, 27, 0.92));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius, 18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, box-shadow 220ms ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.news-card:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 23, 47, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.news-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}
.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.news-card:hover .news-card__img {
  transform: scale(1.03);
}
.news-card__badge-entity {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(12, 12, 13, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--amber, #f3b343);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 6px;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--muted, #a7a7ad);
}
.news-card__city {
  font-weight: 600;
  color: var(--soft, #d4d4d8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.news-card__dot {
  opacity: 0.45;
  font-size: 0.85rem;
}
.news-card__date {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.news-card__title {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.news-card__title a {
  color: var(--text, #f7f7f8);
  text-decoration: none;
  transition: color 150ms ease;
}
.news-card__title a:hover {
  color: var(--amber, #f3b343);
}
.news-card__lead {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--muted, #a7a7ad);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news-card__link {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--amber, #f3b343);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 150ms ease;
}
.news-card__link:hover {
  gap: 7px;
}