/* ============================================
   María, Madre de Todos — estilos
   ============================================ */

:root {
  /* Paleta base (independiente del tema) */
  --navy-950: #0b0e17;
  --navy-900: #0f1421;
  --navy-800: #161d2e;
  --navy-700: #202a41;
  --gold-300: #e6cd94;
  --gold-400: #d4af6a;
  --gold-500: #c19a4e;
  --gold-700: #8f6b1e;
  --ivory-100: #f7f2e8;
  --ivory-200: #ece4d3;
  --ink-muted: #b9bdc9;
  --slate-muted: #565d6d;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", Arial, sans-serif;

  /* Crece con el ancho de pantalla en monitores grandes en vez de
     quedar fijo: se mantiene ~1180px en notebooks/monitores normales
     y llega hasta 1400px en pantallas anchas (24"+). */
  --container-w: clamp(1180px, 82vw, 1400px);

  /* ---- Tema: claro (default) — toda la web clara, con bandas
     apenas más oscuras por sección para dar ritmo visual ---- */
  --surface-bg: var(--ivory-100);
  --surface-alt-bg: var(--ivory-200);
  --text-primary: var(--navy-900);
  --text-muted: var(--slate-muted);
  --accent: var(--gold-700);
  --accent-contrast: var(--ivory-100);

  --card-bg: #ffffff;
  --card-border: #e3d9c4;
  --card-divider: #ece4d3;

  --input-bg: #ffffff;
  --input-border: #d8cfba;
  --input-text: var(--navy-900);
  --input-label: var(--navy-700);

  --copy-btn-border: var(--navy-700);
  --copy-btn-text: var(--navy-900);
  --copy-btn-hover-bg: var(--navy-900);
  --copy-btn-hover-text: var(--ivory-100);

  --hero-bg: radial-gradient(ellipse at 50% 20%, rgba(143,107,30,.10), transparent 55%),
             linear-gradient(160deg, #faf6ec 0%, #f3ebd9 55%, #ece0c6 100%);
  --hero-dot: var(--gold-500);

  --nav-text: var(--navy-900);
  --nav-panel-bg: #ffffff;
  --hamburger-bar: var(--navy-900);
  --header-scrolled-bg: rgba(247,242,232,.92);

  --hairline: rgba(15,20,33,.08);
  --footer-bg: var(--ivory-200);
  --footer-text: var(--navy-900);

  --placeholder-bg: linear-gradient(145deg, #f1e7d2, #e6d7b8);
  --placeholder-text: var(--gold-700);
}

[data-theme="dark"] {
  /* ---- Tema: oscuro — toda la web oscura, con bandas apenas
     más profundas por sección ---- */
  --surface-bg: var(--navy-900);
  --surface-alt-bg: #080a11;
  --text-primary: var(--ivory-100);
  --text-muted: var(--ink-muted);
  --accent: var(--gold-300);
  --accent-contrast: var(--navy-950);

  --card-bg: var(--navy-800);
  --card-border: rgba(212,175,106,.18);
  --card-divider: rgba(212,175,106,.12);

  --input-bg: var(--navy-700);
  --input-border: rgba(212,175,106,.25);
  --input-text: var(--ivory-100);
  --input-label: var(--ivory-200);

  --copy-btn-border: var(--gold-400);
  --copy-btn-text: var(--ivory-100);
  --copy-btn-hover-bg: var(--gold-400);
  --copy-btn-hover-text: var(--navy-950);

  --hero-bg: radial-gradient(ellipse at 50% 20%, rgba(212,175,106,.10), transparent 55%),
             linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  --hero-dot: var(--gold-300);

  --nav-text: var(--ivory-200);
  --nav-panel-bg: var(--navy-950);
  --hamburger-bar: var(--ivory-100);
  --header-scrolled-bg: rgba(11,14,23,.92);

  --hairline: rgba(255,255,255,.08);
  --footer-bg: #080a11;
  --footer-text: var(--ivory-200);

  --placeholder-bg: linear-gradient(145deg, var(--navy-800), var(--navy-700));
  --placeholder-text: var(--gold-400);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--surface-bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: all .25s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
  font-weight: 500;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  opacity: .85;
}
.btn-ghost:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.btn-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.badge-episode {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
  font-weight: 500;
}
.story-panel-content .badge-episode {
  margin-bottom: 4px;
}

.pending-note {
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 10px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: var(--header-scrolled-bg);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nav-text);
}
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.brand-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: .02em;
}
.brand-text em { font-style: italic; color: var(--accent); font-size: .85em; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-link {
  color: var(--nav-text);
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
  transition: color .2s ease;
}
.nav-link:hover { color: var(--accent); }
.nav-link--bold { font-weight: 600; }
.nav-cta {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 8px 18px;
  border-radius: 999px;
}
.nav-cta:hover { background: var(--accent); color: var(--accent-contrast); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--hamburger-bar);
  display: block;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: transparent;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--text-primary);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: var(--hero-bg);
  z-index: 0;
  transition: background .3s ease;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 20% 30%, var(--hero-dot) 0, transparent 60%),
                     radial-gradient(1px 1px at 70% 15%, var(--hero-dot) 0, transparent 60%),
                     radial-gradient(1.5px 1.5px at 85% 60%, var(--hero-dot) 0, transparent 60%),
                     radial-gradient(1px 1px at 40% 75%, var(--hero-dot) 0, transparent 60%),
                     radial-gradient(1px 1px at 10% 65%, var(--hero-dot) 0, transparent 60%);
  opacity: .5;
}

/* Figuras a los costados del Hero. Se ocultan en pantallas angostas para no
   tapar el texto. */
.hero-side-figure {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
@media (min-width: 1200px) {
  .hero-side-figure { display: block; }
}

/* Derecha: foto fija (recorte elegido a mano; la virgen mira hacia la
   izquierda, o sea hacia el centro/texto), a todo el alto del Hero y
   pegada al borde. Dos versiones superpuestas (mármol/piedra debajo, a
   color encima) para el hover de abajo — por eso pointer-events vuelve a
   "auto" acá (la clase base .hero-side-figure lo pone en "none" para no
   tapar nada del resto del hero), si no el :hover nunca dispararía. */
.hero-side-figure--right {
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(220px, 24vw, 380px);
  mask-image: linear-gradient(to left, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 80%, transparent 100%);
  pointer-events: auto;
}
.hero-side-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% top;
  filter: drop-shadow(0 20px 30px rgba(15,20,33,.32));
}
/* La de color se desvanece encima al pasar el mouse; la de mármol se ve
   siempre debajo, así que no hace falta animarla también — la transición
   de la de color sola ya da el efecto de cross-fade. */
.hero-side-img--color {
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-side-figure--right:hover .hero-side-img--color {
  opacity: 1;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding-top: 90px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: 42px;
}
.hero-intro {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 42px;
}
.hero-intro strong {
  font-weight: 600;
  color: var(--text-primary);
}
.hero h1 {
  font-size: clamp(1.45rem, 2.7vw, 1.8rem);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 40px;
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 56px;
}
/* Aparición secuencial del texto del hero, solo en la primera visita
   (marcada por html.hero-animate desde el script inline del head). */
html.hero-animate .hero-inner .eyebrow,
html.hero-animate .hero-inner .hero-intro,
html.hero-animate .hero-inner h1,
html.hero-animate .hero-inner .hero-sub {
  opacity: 0;
  animation: hero-reveal .5s ease forwards;
}
html.hero-animate .hero-inner .eyebrow { animation-delay: 0s; }
html.hero-animate .hero-inner .hero-intro { animation-delay: .12s; }
html.hero-animate .hero-inner h1 { animation-delay: .24s; }
html.hero-animate .hero-inner .hero-sub { animation-delay: .36s; }

@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.scroll-cue span {
  display: block;
  width: 1px; height: 50px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

/* ---------- Sections ---------- */
.section {
  padding: 110px 0;
  background: var(--surface-bg);
  color: var(--text-primary);
  transition: background-color .3s ease, color .3s ease;
}
.section--dark {
  background: var(--surface-alt-bg);
  color: var(--text-primary);
  transition: background-color .3s ease, color .3s ease;
}

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--accent);
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  max-width: 700px;
}
.section-lead {
  max-width: 640px;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 50px;
}
/* Menos aire antes de la grilla acá específicamente (no en .section-lead
   general, que otras secciones siguen usando tal cual) — parte del mismo
   ajuste de arriba para que "Ver detalle" entre en un monitor Full HD sin
   scrollear. */
#historias .section-lead { margin-bottom: 26px; }

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 24px;
}
.team-grid--secondary { margin-top: 34px; }
.team-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.team-photo {
  width: 160px;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
  flex-shrink: 0;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .08em;
}

.team-info h3 { font-size: 1.1rem; margin-bottom: 2px; }
.team-role {
  color: var(--accent);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.team-bio { color: var(--text-muted); font-size: .9rem; }

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---------- Story cards (Historias) ----------
   Fila horizontal de figuras a tamaño fijo: al pasar el mouse sobre una,
   esta se agranda y gana saturación mientras el resto pasa a escala de
   grises (clase .grid-hovering en .story-grid, agregada por script.js).
   Un click abre el detalle (nombre/origen/teaser) en un modal. ---------- */
.story-grid {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(14px, 2.7vw, 29px);
  width: 100%;
  padding: 10px 4px 26px;
}
.story-card {
  /* Tope bajado de 252px a 200px: en un monitor Full HD (1920x1080) el
     eyebrow+título+lead+figura+nombre empujaban el botón "Ver detalle"
     fuera de la vista sin scrollear — pedido puntual del cliente para que
     entre en esa altura. */
  --fig-w: clamp(171px, 19vw, 200px);
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}

.story-figure {
  flex: 0 0 auto;
  width: var(--fig-w);
  aspect-ratio: 4 / 7;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.story-figure img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transform: scale(var(--fig-scale, 1));
  transform-origin: bottom center;
  filter: drop-shadow(0 22px 26px rgba(15,20,33,.28)) saturate(1) grayscale(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
/* Catamarca e Itatí son estatuas "cerradas" (sin aureola exterior), así que
   su recorte ya llena el marco — pero no exactamente al mismo tamaño entre
   sí (Itatí quedaba visiblemente más chica que Catamarca a este --fig-w
   más angosto). Salta y Luján tienen una aureola de rayos que ocupa buena
   parte del canvas alrededor de la figura, así que a recorte parejo se ven
   más chicas todavía. --fig-scale compensa las cuatro (Catamarca queda
   como referencia sin boost) agrandando la imagen manteniendo el recorte
   completo, en vez de volver a exportar los archivos con un recorte más
   ajustado. Estos cuatro números salieron de medir en píxeles el alto
   corona-a-base de cada una en una captura real ya renderizada — no del
   cálculo teórico de encaje de cada canvas — y hay que re-tunearlos del
   mismo modo (contra una captura nueva) si alguno de los cuatro archivos
   se vuelve a recortar/reemplazar. */
.story-card[data-story="itati"] .story-figure img { --fig-scale: 1.06; }
.story-card[data-story="salta"] .story-figure img { --fig-scale: 1.05; }
.story-card[data-story="lujan"] .story-figure img { --fig-scale: 1.12; }
/* --fig-scale grows la imagen más allá de su caja, lo que comería el gap
   de .story-grid y amontonaría estas tarjetas contra sus vecinas si no se
   les devuelve ese espacio de más. Catamarca queda sin margen (es la
   referencia, --fig-scale 1). Los valores son proporcionales al --fig-scale
   de cada una arriba — volver a tunear ambos bloques juntos. */
.story-card[data-story="itati"] { margin-inline: calc(var(--fig-w) * 0.04); }
.story-card[data-story="salta"] { margin-left: calc(var(--fig-w) * 0.025); margin-right: calc(var(--fig-w) * 0.04); }
.story-card[data-story="lujan"] { margin-inline: calc(var(--fig-w) * 0.099); }
.story-card:hover .story-figure img,
.story-card:focus-visible .story-figure img {
  transform: scale(calc(var(--fig-scale, 1) * 1.1));
  filter: drop-shadow(0 26px 30px rgba(15,20,33,.32)) saturate(1.35) grayscale(0);
}
.story-grid.grid-hovering .story-card:not(:hover):not(:focus-visible) .story-figure img {
  filter: drop-shadow(0 22px 26px rgba(15,20,33,.28)) saturate(1) grayscale(.85);
}

/* Nombre y "botón" (en realidad un <span>, ver abajo) debajo de cada
   figura — el click real sigue viviendo en toda la tarjeta (.story-card),
   así que ambos son visuales/afordance, no un segundo control interactivo
   independiente. width: var(--fig-w) en .story-name lo iguala al ancho de
   la figura para que el nombre haga wrap en vez de ensanchar la tarjeta
   (algunos nombres, p.ej. "Nuestra Señora del Valle de Catamarca", no
   entran en una sola línea a este ancho, y eso es esperado). Puesto debajo
   de la figura (no arriba) a propósito: así el --fig-scale de Salta/Luján
   (más arriba) puede desbordar hacia arriba de .story-figure sin pisar
   texto — no hay nada por encima de la figura en esta tarjeta.  */
.story-name {
  width: var(--fig-w);
  margin: 16px 0 8px;
  font-size: 1.05rem;
  text-align: center;
  /* Reserva siempre el alto de 2 líneas (line-height 1.15 heredado de
     h1,h2,h3), tenga el nombre 1 o 2 líneas ("Nuestra Señora de Itatí" vs
     "Nuestra Señora del Valle de Catamarca") — si no, .story-grid's
     align-items:flex-end alinea el FONDO de cada .story-card entera, y
     una tarjeta con nombre de 2 líneas es más alta que una de 1 línea, así
     que empuja su propia figura hacia arriba respecto a las demás (la
     figura, el nombre y el botón dejan de estar a la misma altura entre
     tarjetas). Con el alto fijo acá, las cuatro tarjetas miden lo mismo
     sin importar el nombre, y todo (figura/nombre/botón) queda alineado. */
  min-height: 2.3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-cta {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 9px 22px;
  font-size: .82rem;
}
/* Dorado al pasar el mouse (o foco por teclado) sobre la tarjeta, mismo
   tratamiento que .btn-primary (Donar, el submit de Virgencitas) en vez
   del hover gris genérico de .btn-ghost — refuerza que toda la tarjeta es
   un único click, no que el botón sea un elemento aparte. */
.story-card:hover .story-cta,
.story-card:focus-visible .story-cta {
  opacity: 1;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  border-color: transparent;
  color: var(--navy-950);
}

/* El contenido del detalle vive oculto dentro de la tarjeta y se traslada
   al modal (#story-modal) al hacer click; ver script.js. */
.story-panel-content { display: none; }
.story-modal-body .story-panel-content {
  display: block;
  width: 100%;
}
.story-panel-content h3 { font-size: 1.4rem; margin: 10px 0 4px; }
.story-origin {
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.story-actions .btn { padding: 10px 24px; font-size: .95rem; }
.story-modal-body .badge { font-size: .9rem; padding: 6px 16px; }

.story-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0 6px;
  background: var(--surface-alt-bg);
}
.story-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
}
.story-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.story-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface-alt-bg); }
.play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

/* ---------- Modal de detalle (Historias) ---------- */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.story-modal[hidden] { display: none; }
.story-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11,14,23,.72);
}
.story-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 32px 28px 24px;
  box-shadow: 0 30px 60px rgba(15,20,33,.4);
  animation: story-modal-in .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes story-modal-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}
.story-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-alt-bg);
  color: var(--text-primary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 900px) {
  .story-grid { gap: 14px; }
  .story-card { --fig-w: clamp(117px, 40vw, 198px); }
  .story-figure { aspect-ratio: 4 / 7; }
}
/* Una sola columna en mobile. Antes de esto, Catamarca+Itatí entraban de a
   dos por fila (ninguna tiene margin-left/right extra) pero Salta y Luján
   no entraban junto a nadie por el margen que les agrega su --fig-scale
   (ver más arriba) — quedaban solas en su propia fila, con lo cual la
   grilla armaba un zigzag "2, 1, 1" con distinto aire entre filas según
   dónde tocara el wrap, y el botón "Ver detalle" de una fila quedaba
   pegado a la imagen de la siguiente. Forzar una columna evita ese wrap
   impredecible; los márgenes de compensación de Salta/Luján (pensados
   para repartir el gap horizontal de una fila) no pintan nada acá, así
   que se anulan. */
@media (max-width: 640px) {
  .story-grid { flex-direction: column; align-items: center; }
  .story-card[data-story="salta"],
  .story-card[data-story="lujan"] { margin: 0; }
}

/* ---------- Two column (Virgencitas) ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.two-col-text p { color: var(--text-muted); }

/* Virgencitas y Testimonios: el eyebrow y el título ocupan toda la fila de
   arriba, así el formulario arranca a la altura del primer párrafo en vez
   del eyebrow (pedido puntual del cliente para estas dos secciones, no el
   default de .two-col — ver nota en Donar/más abajo). */
.two-col--virgencitas,
.two-col--testimonios {
  grid-template-areas:
    "eyebrow eyebrow"
    "title title"
    "text form";
  row-gap: 0;
  column-gap: 60px;
}
.two-col-eyebrow { grid-area: eyebrow; }
.two-col-title { grid-area: title; }
.two-col--virgencitas .two-col-text,
.two-col--testimonios .two-col-text { grid-area: text; }
.two-col--virgencitas .two-col-form,
.two-col--testimonios .two-col-form { grid-area: form; }
@media (max-width: 860px) {
  .two-col--virgencitas,
  .two-col--testimonios {
    grid-template-areas:
      "eyebrow"
      "title"
      "text"
      "form";
  }
  .two-col--virgencitas .two-col-form,
  .two-col--testimonios .two-col-form { margin-top: 40px; }
}
.virgencitas-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.virgencitas-gallery img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 18px;
}
@media (max-width: 480px) {
  .virgencitas-gallery { grid-template-columns: 1fr; }
}
.two-col-form {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 20px 50px rgba(15,20,33,.06);
  transition: background-color .3s ease, border-color .3s ease;
}
.form-row { margin-bottom: 18px; }
.form-row label {
  display: block;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--input-label);
  margin-bottom: 6px;
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: .95rem;
  background: var(--input-bg);
  color: var(--input-text);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--accent);
}
.form-note { margin-top: 14px; font-size: .88rem; color: var(--accent); }

/* Formulario de "enviá tu testimonio" en Testimonios: usa .two-col--testimonios
   (ver arriba, junto a .two-col--virgencitas) — eyebrow/título arriba de
   todo, texto + logo a la izquierda, formulario a la derecha arrancando a
   la altura del primer párrafo. */
.testi-submit-logo { max-width: 360px; margin: 28px auto 0; }
.testi-submit-logo img { width: 100%; height: auto; display: block; }

/* Dentro del formulario, dos sub-columnas: datos de la persona (nombre,
   apellido, ciudad, email) a la izquierda, y la virgen + el testimonio +
   el botón a la derecha — pedido puntual del cliente en vez del listado
   vertical de un solo campo por fila que usa Virgencitas. form-row--grow
   hace crecer el textarea para ocupar el alto que le sobra a esa columna
   (4 campos a la izquierda vs. select+textarea+botón a la derecha), así
   el botón queda a la altura del final de la columna izquierda en vez de
   pegado justo debajo del textarea. */
.testi-form-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.testi-form-col { display: flex; flex-direction: column; }
.testi-form-col .form-row--grow { flex: 1 1 auto; display: flex; flex-direction: column; }
.testi-form-col .form-row--grow textarea { flex: 1 1 auto; resize: vertical; }
@media (max-width: 560px) {
  .testi-form-cols { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- Donar (cuenta) ---------- */
.account-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 12px 34px;
  max-width: 560px;
  box-shadow: 0 20px 50px rgba(15,20,33,.06);
  transition: background-color .3s ease, border-color .3s ease;
}
.account-list { margin: 0; }
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
}
.account-row + .account-row { border-top: 1px solid var(--card-divider); }
.account-row dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: 4px;
}
.account-row dd {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.btn-copy {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--copy-btn-border);
  background: transparent;
  color: var(--copy-btn-text);
  font-family: var(--font-body);
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-copy:hover:not(:disabled) { background: var(--copy-btn-hover-bg); color: var(--copy-btn-hover-text); }
.btn-copy:disabled { opacity: .4; cursor: not-allowed; }
.account-card .pending-note { padding: 14px 0 18px; margin: 0; }
.donar-qr {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 24px 0;
  border-top: 1px solid var(--card-divider);
}
.donar-qr-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-align: center;
}
.donar-qr-img { display: inline-flex; }
.donar-qr img { width: 130px; height: 130px; border-radius: 10px; }
.donar-qr-caption { margin: 0; font-size: .85rem; color: var(--text-muted); }
.donar-qr-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.donar-qr-actions .btn { margin: 0; text-align: center; }
.donar-text { min-width: 0; }
.donar-layout { align-items: start; }
.donar-figure { display: flex; justify-content: center; }
.donar-figure--photo { margin-top: 180px; }
.donar-figure--photo img { width: 100%; max-width: 480px; border-radius: 18px; }

@media (max-width: 860px) {
  .donar-figure--photo { margin-top: 0; }
}

@media (max-width: 560px) {
  .donar-qr { flex-direction: column; align-items: stretch; text-align: center; }
  .donar-qr-code { align-items: center; }
}

/* ---------- Testimonios (carrusel) ---------- */
.testi-carousel {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 700px;
  margin: 32px auto 0;
  padding: 0 4px;
}
/* display:flex de arriba le gana a la regla nativa [hidden]{display:none}
   (un estilo de autor siempre pisa al del navegador, sin importar el
   orden) — sin esto, el atributo hidden del HTML no ocultaba nada. */
.testi-carousel[hidden] { display: none; }
.testi-track {
  position: relative;
  display: flex;
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 0 10px;
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card {
  scroll-snap-align: start;
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 36px 32px;
  text-align: center;
}
.testi-photo {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--placeholder-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.testi-photo img { width: 100%; height: 100%; object-fit: cover; }
.testi-photo--placeholder svg { width: 38px; height: 38px; color: var(--placeholder-text); }
.testi-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.testi-author {
  color: var(--accent);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.testi-pilgrimage { font-size: .85rem; color: var(--text-muted); }
.testi-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s ease;
}
.testi-nav:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 640px) {
  .testi-carousel { max-width: 100%; gap: 12px; padding: 0; }
  .testi-card { padding: 28px 22px; }
  .testi-quote { font-size: 1.08rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 60px 0 24px;
  transition: background-color .3s ease, color .3s ease;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--hairline);
}
.footer-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); }
.footer-logo { width: 40px; height: 40px; border-radius: 50%; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: .85rem; }
.footer-links a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 18px; font-size: .85rem; }
.footer-social a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 22px;
}
.footer-copy {
  font-size: .78rem;
  color: var(--text-muted);
}
.footer-credit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--text-muted);
  opacity: .75;
}
.footer-credit-logo {
  display: block;
  height: 14px;
  width: auto;
}
@media (max-width: 560px) {
  .footer-bottom { justify-content: center; text-align: center; }
}
/* El logo de SAHU es un color oscuro fijo (no un token de tema): en modo
   oscuro, el footer también se pone oscuro, así que se invierte a blanco
   para que no se pierda contra el fondo. */
[data-theme="dark"] .footer-credit-logo { filter: invert(1) brightness(1.6); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive nav ---------- */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--nav-panel-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform .35s ease, background-color .3s ease;
    box-shadow: -20px 0 60px rgba(0,0,0,.15);
  }
  .site-nav.open { transform: translateX(0); }
  .nav-cta { order: 99; }
}

/* ---------- 404 ---------- */
.not-found {
  position: relative;
  min-height: calc(100vh - 240px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.not-found-bg {
  position: absolute; inset: 0;
  background: var(--hero-bg);
  z-index: 0;
  transition: background .3s ease;
}
.not-found-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 20% 30%, var(--hero-dot) 0, transparent 60%),
                     radial-gradient(1px 1px at 70% 15%, var(--hero-dot) 0, transparent 60%),
                     radial-gradient(1.5px 1.5px at 85% 60%, var(--hero-dot) 0, transparent 60%),
                     radial-gradient(1px 1px at 40% 75%, var(--hero-dot) 0, transparent 60%),
                     radial-gradient(1px 1px at 10% 65%, var(--hero-dot) 0, transparent 60%);
  opacity: .5;
}
.not-found .container {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.not-found .section-title { margin: 0 auto 16px; }
.not-found .section-lead { margin: 0 auto 32px; }