/* ============================================================
   SHAMMA — COMPONENTES
   ============================================================ */

/* ============ PRELOADER ============ */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--noir);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease-out), visibility .8s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { text-align: center; width: min(300px, 70vw); }
.preloader__mark {
  width: 88px; height: 88px; margin: 0 auto 1.8rem;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line-strong);
  animation: markPulse 2.4s var(--ease-out) infinite;
}
@keyframes markPulse {
  0%,100% { box-shadow: 0 0 40px rgba(168,85,247,.25); transform: scale(1); }
  50%     { box-shadow: 0 0 80px rgba(217,164,65,.40); transform: scale(1.04); }
}
.preloader__word {
  font-family: var(--font-label);
  font-size: .62rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 1.1rem;
}
.preloader__bar { height: 2px; width: 100%; background: var(--line); overflow: hidden; border-radius: 2px; }
.preloader__fill { height: 100%; width: 0%; background: var(--grad-gold); transition: width .3s linear; }

/* ============ CURSOR ============ */
.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .3s; }
.cursor.is-ready { opacity: 1; }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; border-radius: 50%; }
.cursor-dot  { width: 5px; height: 5px; margin: -2.5px; background: var(--gold-lit); }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px;
  border: 1px solid rgba(240,206,134,.55);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), background-color .35s, border-color .35s;
}
.cursor.is-interactive .cursor-ring {
  width: 62px; height: 62px; margin: -31px;
  background: rgba(168,85,247,.14); border-color: var(--violet-lit);
}
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-cursor] { cursor: none; }
}
@media (hover: none) { .cursor { display: none; } }

/* ============ BARRA DE PROGRESO DE SCROLL ============ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-brand); z-index: 900; will-change: transform;
}

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  border-bottom: 1px solid transparent;
  transition: transform .5s var(--ease-out), background-color .5s var(--ease-out),
              backdrop-filter .5s, border-color .5s, padding .5s var(--ease-out);
}
.nav.is-stuck {
  background: rgba(8,6,12,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
  padding-block: .8rem;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner {
  width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav__logo { display: flex; align-items: center; gap: .75rem; }
/* Aquí vivía un disco de 42 px con borde, de cuando el nav llevaba el logo
   redondo al lado de la caligrafía. Se quedó peleando con el escudo nuevo:
   le recortaba el <img> a 42x42 y le pintaba un círculo alrededor. Fuera. */
/* .crest (el escudo oficial de la cabecera) vive en emblem.css */
.nav__logo-sub {
  font-family: var(--font-label); font-size: .55rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-mute);
}
.nav__links { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav__link {
  font-size: .82rem; letter-spacing: .06em; color: var(--ink-soft);
  position: relative; padding-block: .35rem; transition: color .35s;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover { color: var(--cream); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__toggle { display: none; }

/* ============ BOTONES ============ */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .7rem; padding: 1.05rem 2.1rem; border-radius: 100px;
  font-family: var(--font-label); font-size: .76rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  overflow: hidden; isolation: isolate; will-change: transform;
  transition: transform .4s var(--ease-out), color .4s, box-shadow .5s;
}
.btn > span, .btn > svg { position: relative; z-index: 2; }
.btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translateX(5px); }

/* Relleno que sube desde abajo */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  transform: translateY(101%); border-radius: inherit;
  transition: transform .55s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }

.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 34px rgba(109,59,196,.34); }
.btn--primary::before { background: var(--grad-gold); }
.btn--primary:hover { color: var(--noir); box-shadow: 0 14px 46px rgba(217,164,65,.42); }

.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--ghost::before { background: var(--cream); }
.btn--ghost:hover { color: var(--noir); border-color: var(--cream); }

.btn--gold { background: var(--grad-gold); color: var(--noir); box-shadow: 0 8px 30px rgba(217,164,65,.32); }
.btn--gold::before { background: var(--grad-brand); }
.btn--gold:hover { color: #fff; }

.btn--sm { padding: .8rem 1.5rem; font-size: .68rem; }

/* Botón de usuario de Instagram: el logo va a color, no hereda el del botón */
.btn--ig { padding-left: 1.05rem; }
.btn__ig {
  position: relative; z-index: 2;
  width: 20px; height: 20px; flex: none;
  transition: transform .45s var(--ease-soft);
}
.btn--ig:hover .btn__ig { transform: scale(1.12) rotate(-6deg); }
.btn--full { width: 100%; }

/* ============ HERO ============ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-top: clamp(7rem, 14vh, 10rem); padding-bottom: clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
.hero__canvas canvas { width: 100%; height: 100%; display: block; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, transparent, rgba(8,6,12,.75) 100%),
    linear-gradient(180deg, rgba(8,6,12,.72) 0%, transparent 28%, transparent 62%, var(--noir) 100%);
}
.hero__grid {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.08fr .92fr; } }

.hero__verse {
  font-family: var(--font-label); font-size: .62rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.6rem; display: block;
}
.hero__title { margin-bottom: 1.6rem; }
.hero__sub { max-width: 46ch; margin-bottom: 2.6rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__meta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.4rem);
  padding-top: 1.8rem; border-top: 1px solid var(--line);
}
.hero__meta-item { display: flex; flex-direction: column; gap: .2rem; }
.hero__meta-k {
  font-family: var(--font-label); font-size: .58rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-mute);
}
.hero__meta-v { font-family: var(--font-display); font-size: 1.6rem; color: var(--cream); }

/* Pila de fotos del hero */
.hero__stack { position: relative; height: clamp(400px, 52vw, 620px); }
.hero__ph {
  position: absolute; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  border: 1px solid var(--glass-brd);
  will-change: transform;
}
.hero__ph img { width: 100%; height: 100%; object-fit: cover; }
.hero__ph::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(168,85,247,.16), transparent 45%, rgba(8,6,12,.5));
}
.hero__ph--a { width: 56%; aspect-ratio: 9/14; top: 0; right: 3%; z-index: 3; }
.hero__ph--b { width: 43%; aspect-ratio: 9/13; bottom: 0; left: 0; z-index: 4; }
.hero__ph--c { width: 32%; aspect-ratio: 4/5; top: 30%; left: 38%; z-index: 2; opacity: .85; }

.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-family: var(--font-label); font-size: .55rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ''; position: absolute; top: -46px; left: 0; width: 1px; height: 46px;
  background: var(--gold-lit); animation: scrollDrop 2s var(--ease-out) infinite;
}
@keyframes scrollDrop { 0% { top: -46px; } 60%,100% { top: 46px; } }

/* ============ BARRA PRÓXIMO SERVICIO ============ */
.nextbar {
  position: relative; z-index: 5;
  background: var(--grad-brand);
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
}
.nextbar__inner {
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem;
}
.nextbar__label {
  font-family: var(--font-label); font-size: .6rem; letter-spacing: .32em;
  text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .3rem;
}
.nextbar__title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); color: #fff; }
.countdown { display: flex; gap: clamp(.8rem, 2vw, 1.8rem); }
.countdown__unit { text-align: center; min-width: 56px; }
.countdown__num {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.countdown__lbl {
  font-family: var(--font-label); font-size: .52rem; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: .35rem;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  display: inline-block; margin-right: .5rem;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: livePulse 1.8s infinite;
}
@keyframes livePulse {
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ============ SECCIÓN CABECERA ============ */
.sec-head { max-width: 760px; margin-bottom: clamp(3rem, 6vw, 5rem); position: relative; z-index: 2; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 1.4rem; }
.sec-head h2 { margin-bottom: 1.4rem; }

/* ============ VERSÍCULO DESTACADO ============ */
.verse { position: relative; text-align: center; max-width: 980px; margin-inline: auto; z-index: 2; }
.verse__mark {
  font-family: var(--font-display); font-size: clamp(6rem, 16vw, 14rem);
  line-height: .6; color: var(--violet-lit); opacity: .16; display: block; margin-bottom: -.05em;
}
.verse__quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.9rem, 4.6vw, 3.9rem); line-height: 1.18;
  color: var(--cream); margin-bottom: 1.8rem;
}
.verse__ref {
  font-family: var(--font-label); font-size: .68rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
}

/* ============ TITULAR DE IMPACTO — NUESTRO ADN ============ */
/* Anton es la única voz condensada y pesada del sitio: se reserva para este
   titular, que es el que tiene que golpear. */
/* OJO: aquí no se puede usar `background-clip: text` con degradado. El
   splitter envuelve cada palabra en su propio <span>, y el recorte solo
   aplica al texto del elemento padre — el resultado sería un titular
   invisible. Color sólido, y el acento va en la última palabra. */
.adn-title {
  font-family: var(--font-impact);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  /* Las líneas del splitter llevan overflow:hidden. Con un interlineado
     cerrado, la tilde de «Transformación» queda cortada, así que se le
     deja aire suficiente para que la Ó respire. */
  line-height: 1.06;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 0 42px rgba(168,85,247,.28);
}
/* El splitter agrupa por líneas, así que `.sp-word:last-child` a secas
   pintaría la última palabra DE CADA LÍNEA. Hay que bajar primero a la
   última línea. */
.adn-title .sp-line:last-of-type .sp-word:last-child {
  color: var(--gold-lit);
  text-shadow: 0 0 34px rgba(217,164,65,.45);
}

/* ============ IGLESIAS HIJAS ============ */
.sedes {
  display: grid; gap: clamp(.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
  position: relative; z-index: 2;
}
@media (min-width: 820px) { .sedes { grid-template-columns: repeat(4, 1fr); } }

.sede {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--glass), rgba(255,255,255,.012));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .55s var(--ease-out), border-color .5s, box-shadow .5s;
}
.sede::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 90% at 50% 100%, rgba(217,164,65,.20), transparent 65%);
  transition: opacity .5s;
}
.sede:hover { transform: translateY(-6px); border-color: rgba(240,206,134,.4); box-shadow: 0 22px 50px rgba(0,0,0,.42); }
.sede:hover::before { opacity: 1; }
.sede__n {
  display: block; font-family: var(--font-label);
  font-size: .62rem; letter-spacing: .3em; color: var(--gold);
  margin-bottom: 1.1rem;
}
.sede__city {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05; color: var(--cream); margin-bottom: .35rem;
}
.sede__dept {
  font-family: var(--font-label); font-size: .6rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute);
}

/* ============ CARDS DE VALORES ============ */
.values { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value-card {
  position: relative; padding: clamp(2rem, 3.4vw, 3rem);
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--glass), rgba(255,255,255,.012));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow: hidden; isolation: isolate;
  transition: border-color .5s, transform .5s var(--ease-out), box-shadow .5s;
}
.value-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(168,85,247,.20), transparent 68%);
  transition: opacity .45s;
}
.value-card:hover { border-color: var(--line-strong); box-shadow: 0 26px 60px rgba(0,0,0,.45); }
.value-card:hover::before { opacity: 1; }
.value-card__num {
  font-family: var(--font-label); font-size: 20px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem; display: block;
}
.value-card__icon { width: 40px; height: 40px; margin-bottom: 1.5rem; stroke: var(--lila); fill: none; stroke-width: 1.1; }
.value-card h3 { font-size: 1.9rem; margin-bottom: .9rem; }
.value-card p { font-size: .95rem; }

/* ============ CARRUSEL (base) ============ */
.carousel { position: relative; }
.carousel__viewport {
  overflow: hidden; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.carousel__viewport.is-dragging { cursor: grabbing; }
.carousel__track { display: flex; gap: clamp(1rem, 2vw, 1.6rem); will-change: transform; }
.carousel__track > * { user-select: none; -webkit-user-drag: none; }
.carousel__nav { display: flex; align-items: center; gap: .7rem; }
.carousel__btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink);
  display: grid; place-items: center;
  transition: background .4s var(--ease-out), color .4s, border-color .4s, transform .4s var(--ease-out), opacity .3s;
}
.carousel__btn svg { width: 17px; height: 17px; }
.carousel__btn:hover { background: var(--grad-gold); color: var(--noir); border-color: transparent; transform: scale(1.08); }
.carousel__btn[disabled] { opacity: .25; pointer-events: none; }
.carousel__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.carousel__head .sec-head { margin-bottom: 0; }
.carousel__bar { height: 2px; background: var(--line); margin-top: 2.4rem; border-radius: 2px; overflow: hidden; }
.carousel__bar-fill {
  height: 100%; width: 100%; background: var(--grad-gold);
  border-radius: 2px; transform-origin: 0 50%; transform: scaleX(.2);
  transition: transform .4s var(--ease-out);
}

/* ---- Card de horario ---- */
.slide-time {
  flex: 0 0 clamp(270px, 32vw, 390px);
  position: relative; padding: clamp(1.8rem, 3vw, 2.6rem);
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface), var(--noir-2));
  overflow: hidden; isolation: isolate; min-height: 330px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .55s var(--ease-out), border-color .5s, box-shadow .5s;
}
.slide-time::before {
  content: ''; position: absolute; top: -55%; right: -35%; width: 260px; height: 260px;
  border-radius: 50%; background: var(--violet-lit); filter: blur(80px);
  opacity: .22; transition: opacity .6s, transform .8s var(--ease-out); z-index: -1;
}
.slide-time:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.slide-time:hover::before { opacity: .45; transform: translate(-24px, 24px); }
.slide-time__day {
  font-family: var(--font-label); font-size: 20px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  line-height: 1.15; display: block;
}
.slide-time__hour { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.6rem); line-height: 1; margin-block: .8rem .5rem; }
.slide-time__hour .ampm { font-size: .42em; color: var(--ink-mute); }
/* La tarjeta de Escuela Dominical lleva tres horas en una línea */
.slide-time__hour--multi { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; }
.slide-time__hour--multi .ampm { font-size: .58em; }
.slide-time--wide { flex-basis: clamp(300px, 38vw, 460px); }
.slide-time__name { font-family: var(--font-display); font-size: 1.5rem; color: var(--cream); margin-bottom: .5rem; line-height: 1.12; }
.slide-time__desc { font-size: .88rem; }

/* Teens y Young con una voz propia, acorde a su edad */
.youthful {
  font-family: var(--font-youth);
  font-size: .82em; letter-spacing: .01em;
  background: linear-gradient(100deg, var(--violet-lit), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slide-time--teens .youthful { background: linear-gradient(100deg, #6EE7F9, var(--violet-lit)); -webkit-background-clip: text; background-clip: text; }
.slide-time__tag--teens { border-color: rgba(110,231,249,.45); color: #9FE9F7; }
.slide-time__tag--youth { border-color: rgba(217,70,166,.5); color: #F3A8D6; }
.slide-time__tag {
  align-self: flex-start; margin-top: 1.6rem;
  font-family: var(--font-label); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .42rem .9rem; border-radius: 100px;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
}

/* ---- Card de ministerio ---- */
.slide-min {
  flex: 0 0 clamp(240px, 27vw, 320px);
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3/4; isolation: isolate; border: 1px solid var(--line);
  transition: transform .6s var(--ease-out), box-shadow .6s;
}
.slide-min img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter .6s; }
.slide-min::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,6,12,.12) 0%, rgba(8,6,12,.55) 55%, rgba(8,6,12,.95) 100%);
}
.slide-min:hover { transform: translateY(-10px); box-shadow: 0 34px 70px rgba(0,0,0,.55); }
.slide-min:hover img { transform: scale(1.09); filter: saturate(1.15); }
.slide-min__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.4rem, 2.4vw, 2rem); }
.slide-min__k {
  font-family: var(--font-label); font-size: .56rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-lit); margin-bottom: .6rem; display: block;
}
.slide-min__t { font-family: var(--font-display); font-size: 1.9rem; margin-bottom: 0; }
.slide-min__d {
  font-size: .85rem; color: var(--ink-soft);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease-out), opacity .5s, margin-top .5s;
}
.slide-min:hover .slide-min__d, .slide-min:focus-within .slide-min__d { max-height: 140px; opacity: 1; margin-top: .5rem; }
/* Los ocho ministerios ya tienen foto propia. Hasta aquí llegaban las
   «portadas de marca» tipográficas (.slide-min--brand / .slide-min__art) que
   cubrían a los que aún no tenían imagen real; se retiraron al entrar la foto
   de Shamma Teens. Si algún día vuelve a faltar una, están en el historial. */

/* ---- Card de testimonio ---- */
.slide-quote {
  flex: 0 0 clamp(280px, 40vw, 480px);
  padding: clamp(2rem, 3.4vw, 3rem);
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--glass), rgba(255,255,255,.01));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem;
  transition: border-color .5s, transform .5s var(--ease-out);
}
.slide-quote:hover { border-color: var(--line-strong); transform: translateY(-6px); }
.slide-quote__mark { font-family: var(--font-display); font-size: 4rem; line-height: .5; color: var(--violet-lit); opacity: .4; }
.slide-quote__txt { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.45; color: var(--cream); font-style: italic; }
.slide-quote__who { display: flex; align-items: center; gap: .9rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.slide-quote__av { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.05rem; color: #fff; flex: none; }
.slide-quote__nm { font-size: .92rem; color: var(--cream); }
.slide-quote__rl { font-family: var(--font-label); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }

/* ============ GALERÍA ============ */
.gal-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gal-filter {
  font-family: var(--font-label); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .68rem 1.35rem; border-radius: 100px;
  border: 1px solid var(--line); color: var(--ink-mute);
  transition: color .4s, border-color .4s, background .4s, transform .35s var(--ease-out);
}
/* El hover solo tiene sentido si el chip es un botón de verdad */
button.gal-filter:hover { color: var(--cream); border-color: var(--line-strong); transform: translateY(-2px); }
.gal-filter.is-active { background: var(--grad-gold); color: var(--noir); border-color: transparent; }
span.gal-filter { display: inline-block; }

/* Retícula de 5 columnas con celda cuadrada. Las fotos vienen en dos formatos
   (vertical 3:4 y horizontal 3:2) y el recorte lo hace el CSS con object-fit;
   el archivo se guarda entero, así el lightbox muestra la foto sin cortar. */
.gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.5rem, 1.1vw, .9rem); }
@media (min-width: 620px)  { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .gal-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .gal-grid { grid-template-columns: repeat(5, 1fr); } }

.gal-item {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); isolation: isolate; width: 100%;
  aspect-ratio: 1;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .5s;
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter .6s; }
.gal-item::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,6,12,.9));
  opacity: 0; transition: opacity .45s;
}
.gal-item:hover { border-color: var(--line-strong); }
.gal-item:hover img { transform: scale(1.07); filter: saturate(1.2); }
.gal-item:hover::after { opacity: 1; }
.gal-item.is-out { opacity: 0; transform: scale(.92); pointer-events: none; }
.gal-item.is-hidden { display: none; }
.gal-item__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.1rem; text-align: left;
  transform: translateY(12px); opacity: 0; transition: transform .5s var(--ease-out), opacity .45s;
}
.gal-item:hover .gal-item__cap { transform: none; opacity: 1; }
.gal-item__cat {
  font-family: var(--font-label); font-size: .52rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-lit); display: block; margin-bottom: .25rem;
}
.gal-item__ttl { font-family: var(--font-display); font-size: 1.15rem; color: var(--cream); line-height: 1.15; }
/* Modificadores de celda disponibles si alguna vez se quiere romper la
   retícula cuadrada (hoy no se usa ninguno: las filas de 5 quedan parejas). */
.gal-item--tall { grid-row: span 2; aspect-ratio: 3/4; }
.gal-item--wide { grid-column: span 2; aspect-ratio: 3/2; }
.gal-item--big  { grid-column: span 2; grid-row: span 2; }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(4,3,7,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility .5s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig { max-width: min(1100px, 92vw); transform: scale(.94); transition: transform .6s var(--ease-out); text-align: center; }
.lightbox.is-open .lightbox__fig { transform: none; }
.lightbox__img { max-height: 72vh; width: auto; margin-inline: auto; border-radius: var(--radius); border: 1px solid var(--line-strong); }
.lightbox__cap {
  margin-top: 1.2rem; font-family: var(--font-label); font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute);
  display: flex; flex-direction: column; gap: .45rem;
}
/* Evento al que pertenece la foto, con su fecha */
.lightbox__ev {
  font-size: .62rem; letter-spacing: .18em; color: var(--gold);
  text-transform: none;
}
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink);
  background: rgba(8,6,12,.5);
  transition: background-color .4s, color .4s, transform .4s var(--ease-out);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: var(--cream); color: var(--noir); transform: scale(1.09); }
.lightbox__close { top: 1.6rem; right: 1.6rem; }
.lightbox__prev  { left: clamp(.8rem, 3vw, 2.4rem); top: 50%; margin-top: -26px; }
.lightbox__next  { right: clamp(.8rem, 3vw, 2.4rem); top: 50%; margin-top: -26px; }
.lightbox svg { width: 18px; height: 18px; }

/* ============ LIDERAZGO ============ */
.leaders { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .leaders { grid-template-columns: .95fr 1.05fr; } }
.leaders__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--line); }
.leaders__media img { width: 100%; height: 100%; object-fit: cover; }
.leaders__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(168,85,247,.16), transparent 50%, rgba(8,6,12,.55)); }
.leaders__badge {
  position: absolute; z-index: 3; left: 1.4rem; bottom: 1.4rem;
  padding: .8rem 1.3rem; border-radius: 100px;
  background: rgba(8,6,12,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-brd);
  font-family: var(--font-label); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lit);
}
/* Los nombres van en letra corrida y en UN SOLO renglón. El tamaño se ata al
   ancho de su propia columna, no al de la ventana: entre 900 y 1100 px la
   columna se estrecha mucho más rápido que el viewport y con vw se salía.
   El nombre mide unos 12,2 em, así que 7.6cqw deja margen de sobra. */
.leaders__text { container-type: inline-size; }
.leaders__name {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1rem, 3.7vw, 2.3rem);   /* respaldo sin container queries */
  font-size: min(2.9rem, 7.6cqw);
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--cream);
  margin-block: 1.1rem;
}
.leaders__sig { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--lila); margin-top: 2rem; }

/* ============ EVENTOS ============ */
.events { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); grid-template-columns: 1fr; }
@media (min-width: 820px) { .events { grid-template-columns: 1.35fr 1fr; } }
.event {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); isolation: isolate; min-height: 330px;
  display: flex; align-items: flex-end;
  transition: transform .6s var(--ease-out), border-color .5s, box-shadow .6s;
}
.event img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out); }
.event::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,6,12,.28), rgba(8,6,12,.90)); }
.event:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: 0 34px 76px rgba(0,0,0,.55); }
.event:hover img { transform: scale(1.07); }
.event__body { padding: clamp(1.8rem, 3vw, 2.8rem); width: 100%; }
.event__date {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  font-family: var(--font-label); font-size: .58rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--noir); background: var(--grad-gold); padding: .4rem .9rem; border-radius: 100px;
}
.event__t { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-bottom: .6rem; line-height: 1; }
.event__d { font-size: .92rem; max-width: 46ch; }
.event--feat { grid-row: span 2; min-height: 420px; }

/* ============ EDICIONES ANTERIORES ============ */
.past-head { max-width: 620px; margin-top: clamp(3rem, 6vw, 4.5rem); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.past-head .lead { font-size: .95rem; }

/* Cinta que rota sola. La ficha tiene un ancho FIJO: con una rejilla, dos
   ediciones se repartían todo el ancho y los afiches quedaban gigantes.
   El bucle continuo lo arma initRibbon clonando las fichas hasta cubrir
   el doble del ancho visible. */
.past-strip { overflow: hidden; }
.past-strip__track {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.5rem);
  width: max-content;
  will-change: transform;
}
.past-strip .past { flex: 0 0 clamp(190px, 22vw, 264px); }

.past { display: block; }

/* La ficha se adapta al afiche, no al revés: los de Welcu vienen cuadrados y
   el de Instagram viene 3:4. Forzar todo a cuadrado dejaba dos franjas negras
   a los lados del afiche vertical. `--alto` cambia solo esa ficha. */
.past__thumb {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1; isolation: isolate;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .6s var(--ease-out), border-color .5s, box-shadow .6s var(--ease-out);
}
.past__thumb--alto { aspect-ratio: 3 / 4; }

/* ============ INSCRIPCIÓN EN EL HERO ============ */
/* Bloque de conversión encima de la cartelera: es lo primero que se ve del
   lado derecho, sin obligar a bajar. Vidrio sobre el fondo del hero
   para que no compita con el afiche pero se lea sin esfuerzo. */
.inscribe {
  position: relative; z-index: 3;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.4rem);
  padding: clamp(.9rem, 2vw, 1.2rem);
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: rgba(21,14,34,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 48px rgba(8,6,12,.55);
}
.inscribe__qr {
  flex: none; display: block;
  width: clamp(100px, 13vw, 128px);
  border-radius: 10px; overflow: hidden;
  background: var(--cream);          /* el QR necesita su zona clara */
  padding: 6px;
  transition: transform .45s var(--ease-soft), box-shadow .45s;
}
.inscribe__qr img { width: 100%; height: auto; display: block; }
.inscribe__qr:hover { transform: scale(1.05); box-shadow: 0 0 26px rgba(240,206,134,.45); }
.inscribe__body { min-width: 0; }
.inscribe__k {
  font-family: var(--font-label); font-size: .56rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
  display: block;
}
.inscribe__t {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  color: var(--cream); line-height: 1.1; margin-top: .25rem;
}
.inscribe__d { font-size: .78rem; line-height: 1.5; color: var(--ink-soft); margin-top: .35rem; }
.inscribe .btn { margin-top: .8rem; }

@media (max-width: 460px) {
  /* En pantallas muy angostas el QR se apila arriba: al lado dejaría el
     texto en dos palabras por línea. */
  .inscribe { flex-direction: column; align-items: flex-start; }
  .inscribe__qr { width: 96px; }
}

/* contain, no cover: son afiches, y recortarlos se come la fecha o el
   título. Con la ficha a la medida del afiche no sobra nada que rellenar. */
.past__thumb img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease-out);
}

/* Baño dorado muy tenue que sube desde abajo */
.past__thumb::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 100%, rgba(217,164,65,.26), transparent 62%),
    linear-gradient(180deg, transparent 55%, rgba(8,6,12,.55));
  opacity: 0;
  transition: opacity .55s var(--ease-out);
}

/* Destello que cruza el afiche una sola vez al entrar el mouse */
.past__glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 36%,
    rgba(240,206,134,.18) 46%,
    rgba(255,250,235,.32) 50%,
    rgba(240,206,134,.18) 54%,
    transparent 64%);
  background-size: 260% 260%;
  background-position: 130% 130%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}

.past:hover .past__thumb {
  transform: translateY(-6px);
  border-color: rgba(240,206,134,.55);
  box-shadow:
    0 0 0 1px rgba(240,206,134,.28),
    0 20px 52px rgba(217,164,65,.18),
    0 8px 22px rgba(0,0,0,.45);
}
.past:hover .past__thumb img { transform: scale(1.05); filter: saturate(1.06) brightness(1.04); }
.past:hover .past__thumb::after { opacity: 1; }
.past:hover .past__glow { opacity: 1; animation: pastSheen 1.5s var(--ease-out); }

@keyframes pastSheen {
  from { background-position: 130% 130%; }
  to   { background-position: -30% -30%; }
}

/* Botón «Más+» — vidrio sobre el afiche, se vuelve oro al pasar el mouse.
   Hoy es sólo la pieza visual: no lleva a ninguna parte todavía. Por eso va
   como <span aria-hidden>, no como <button> ni <a>: así queda a la vista pero
   ni el teclado ni un lector de pantalla lo anuncian como un control que no
   hace nada. Cuando se conecte el módulo, pasa a ser <a> y se le quita el
   aria-hidden. */
.past__btn {
  position: absolute; z-index: 3; left: .7rem; bottom: .7rem;
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-label); font-size: .6rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .45rem .85rem; border-radius: 100px;
  color: var(--cream);
  background: rgba(10,7,16,.46);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,.20);
  transition: background .45s var(--ease-out), color .45s, border-color .45s,
              transform .45s var(--ease-out), box-shadow .45s;
}
.past__btn i { font-style: normal; font-size: 1.05em; line-height: 0; }
.past:hover .past__btn {
  background: var(--grad-gold);
  color: var(--noir);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(217,164,65,.4);
}

.past__body { display: block; padding-top: .85rem; }
.past__t {
  display: block;
  font-family: var(--font-display); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.18; color: var(--cream);
  transition: color .4s;
}
.past__date {
  display: block; margin-top: .35rem;
  font-family: var(--font-label); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color .4s;
}
.past:hover .past__date,
.past:focus-visible .past__date { color: var(--gold); }

/* ============ CARTELERA DEL HERO ============ */
/* Mismas fichas que «Ediciones anteriores», pero en plata en vez de oro:
   así se distingue de un vistazo lo que está vigente de lo que ya pasó. */
.hero__events { position: relative; z-index: 2; }

/* --- Baraja: los afiches se apilan desordenados y rotan solos --- */
/* La altura se ata al ancho: como el tamaño de las fichas es un % del ancho,
   una altura fija dejaba un hueco muerto abajo en unos tamaños y recortaba
   en otros. */
.deck {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 300px;
  perspective: 1200px;
}
.deck__card {
  position: absolute;
  top: 0; left: 0;
  width: 58%;
  cursor: pointer;
  transform-origin: 50% 60%;
  transition:
    transform 1.05s var(--ease-out),
    opacity .8s var(--ease-out),
    filter .8s var(--ease-out);
  will-change: transform, opacity;
}

/* Las cuatro posiciones de la baraja. Reproducen la composición
   desordenada que tenía la pila de fotos original. initDeck reparte las
   fichas que haya entre estas posiciones, así que sirve igual con 2, 3 o 4. */
.deck__card[data-pos="0"] {
  transform: translate(18%, 12%) rotate(-2.5deg) scale(1);
  z-index: 4; opacity: 1; filter: none;
}
.deck__card[data-pos="1"] {
  transform: translate(64%, -2%) rotate(4deg) scale(.72);
  z-index: 3; opacity: .88; filter: saturate(.9) brightness(.86);
}
.deck__card[data-pos="2"] {
  transform: translate(40%, 50%) rotate(-6.5deg) scale(.56);
  z-index: 2; opacity: .7; filter: saturate(.8) brightness(.72);
}
.deck__card[data-pos="3"] {
  transform: translate(2%, 30%) rotate(7deg) scale(.46);
  z-index: 1; opacity: .55; filter: saturate(.7) brightness(.62);
}
/* Con solo dos eventos la baraja se reparte en dos posiciones */
.deck[data-total="2"] .deck__card[data-pos="1"] {
  transform: translate(62%, 22%) rotate(4.5deg) scale(.76);
}

/* Solo la del frente muestra su texto: las de atrás son pura estampa */
.deck__card[data-pos="1"] .past__body,
.deck__card[data-pos="3"] .past__body,
.deck__card[data-pos="2"] .past__body { opacity: 0; pointer-events: none; }
.deck__card .past__body { transition: opacity .6s var(--ease-out); }

/* Como las fichas se solapan, el texto de la del frente puede caer encima de
   otro afiche. Una placa oscura detrás lo mantiene legible en cualquier
   posición de la baraja. */
.deck__card[data-pos="0"] .past__body {
  position: relative; isolation: isolate;
  padding: .7rem .85rem .55rem;
  margin-top: .35rem;
}
.deck__card[data-pos="0"] .past__body::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(8,6,12,.86), rgba(8,6,12,.66));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(226,234,246,.10);
}

/* El destello y el botón, solo en la del frente */
.deck__card:not([data-pos="0"]) .past__btn { opacity: 0; }
.deck__card:not([data-pos="0"]):hover .past__thumb { transform: none; box-shadow: none; }

@media (max-width: 999px) {
  .deck { aspect-ratio: 20 / 18; }
  .deck__card { width: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .deck__card { transition-duration: 1.6s; }
}

/* --- Tratamiento plata --- */
.past--next .past__thumb { border-color: rgba(214,222,234,.20); }

.past--next .past__glow {
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(206,215,230,.20) 45%,
    rgba(255,255,255,.46) 50%,
    rgba(206,215,230,.20) 55%,
    transparent 66%);
}
.past--next .past__thumb::after {
  background:
    radial-gradient(130% 95% at 50% 100%, rgba(196,206,222,.24), transparent 62%),
    linear-gradient(180deg, transparent 55%, rgba(8,6,12,.58));
}

/* Destellos: tres chispas que titilan al pasar el mouse */
.past--next .past__thumb::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(circle at 24% 28%, rgba(255,255,255,.95) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 71% 19%, rgba(226,234,246,.9) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 48% 74%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 62%, rgba(214,224,240,.8) 0 1.2px, transparent 2.3px);
  opacity: 0;
}
.past--next:hover .past__thumb::before { animation: destellosPlata 2.1s var(--ease-out) infinite; }
@keyframes destellosPlata {
  0%, 100% { opacity: 0;   transform: scale(.96); }
  22%      { opacity: 1;   transform: scale(1); }
  48%      { opacity: .25; transform: scale(1.02); }
  70%      { opacity: .9;  transform: scale(1); }
}

.past--next:hover .past__thumb {
  border-color: rgba(226,234,246,.52);
  box-shadow:
    0 0 0 1px rgba(226,234,246,.26),
    0 20px 52px rgba(168,188,214,.16),
    0 8px 22px rgba(0,0,0,.45);
}
.past--next:hover .past__btn {
  background: linear-gradient(115deg, #9BA6B6 0%, #EEF2F8 50%, #9BA6B6 100%);
  color: var(--noir);
  box-shadow: 0 6px 18px rgba(190,205,225,.34);
}
.past--next:hover .past__date { color: #D6DEEA; }


/* ============ CTA FINAL ============ */
.cta-final { position: relative; text-align: center; overflow: hidden; }
.cta-final__inner { position: relative; z-index: 2; max-width: 880px; margin-inline: auto; }

/* ============ VISITA / CONTACTO ============ */
.visit { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .visit { grid-template-columns: 1fr 1fr; } }

.info-list { border-top: 1px solid var(--line); }
.info-row { display: grid; grid-template-columns: 132px 1fr; gap: 1.5rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line); align-items: start; }
.info-row dt { font-family: var(--font-label); font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); padding-top: .25rem; }
.info-row dd { color: var(--ink-soft); font-size: .96rem; }
.info-row a { border-bottom: 1px solid var(--line-strong); transition: color .35s, border-color .35s; }
.info-row a:hover { color: var(--gold-lit); border-color: var(--gold-lit); }

.field { position: relative; margin-bottom: 1.4rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 1.55rem 1.2rem .65rem;
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-family: var(--font-body); font-size: .95rem;
  transition: border-color .4s, background-color .4s, box-shadow .4s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; -webkit-appearance: none; }
.field select option { background: var(--surface); color: var(--ink); }
.field label {
  position: absolute; left: 1.2rem; top: 1.15rem;
  font-size: .95rem; color: var(--ink-mute); pointer-events: none;
  transition: transform .35s var(--ease-out), color .35s;
  transform-origin: 0 0;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet-lit); background: rgba(168,85,247,.07);
  box-shadow: 0 0 0 4px rgba(168,85,247,.10);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select.has-value + label {
  transform: translateY(-.62rem) scale(.72); color: var(--gold);
}
.field__arrow { position: absolute; right: 1.2rem; top: 1.55rem; width: 12px; pointer-events: none; stroke: var(--ink-mute); fill: none; stroke-width: 1.6; }
.form-note { font-size: .8rem; color: var(--ink-mute); margin-top: 1rem; }
.form-msg { margin-top: 1rem; font-size: .9rem; padding: .9rem 1.1rem; border-radius: 10px; }
.form-msg--ok  { background: rgba(109,59,196,.16); border: 1px solid var(--line-strong); color: var(--lila); }
.form-msg--err { background: rgba(217,70,166,.12); border: 1px solid rgba(217,70,166,.35); color: #f3a8d6; }

.btn-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading .btn-spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mapa a color y legible: antes iba invertido para pegar con el fondo
   oscuro, pero eso hacía ilegibles los nombres de las calles. */
.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong); }
.map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }

/* ============ FOOTER ============ */
.footer { position: relative; padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: 2.5rem; border-top: 1px solid var(--line); overflow: hidden; }
.footer__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer__brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.footer__brand img { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line-strong); }
.footer h4 { font-family: var(--font-label); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; font-weight: 500; }
.footer__links li + li { margin-top: .75rem; }
.footer__links a { color: var(--ink-soft); font-size: .92rem; display: inline-block; transition: color .35s, transform .35s var(--ease-out); }
.footer__links a:hover { color: var(--gold-lit); transform: translateX(5px); }
/* Redes con su color de marca real y a un tamaño que se vea de verdad. */
.socials { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.social {
  display: inline-flex; flex-direction: column; align-items: center; gap: .45rem;
  transition: transform .45s var(--ease-out);
}
.social svg {
  width: 46px; height: 46px; display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
  transition: transform .45s var(--ease-soft), filter .45s var(--ease-out);
}
.social__name {
  font-family: var(--font-label); font-size: .56rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
  transition: color .4s;
}
.social:hover { transform: translateY(-4px); }
.social:hover svg { transform: scale(1.1); }
.social:hover .social__name { color: var(--cream); }
.social--ig:hover svg { filter: drop-shadow(0 6px 20px rgba(214,52,132,.55)); }
.social--fb:hover svg { filter: drop-shadow(0 6px 20px rgba(24,119,242,.55)); }
.social--yt:hover svg { filter: drop-shadow(0 6px 20px rgba(255,0,0,.5)); }
.social--wa:hover svg { filter: drop-shadow(0 6px 20px rgba(37,211,102,.55)); }
.footer__bottom {
  margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 1.8rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .78rem; color: var(--ink-mute);
}
/* .footer__wordmark usa la caligrafía oficial — ver emblem.css */

/* ============ BOTÓN FLOTANTE ============ */
.fab {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 700;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-brand); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 34px rgba(109,59,196,.45);
  transform: scale(0); transition: transform .55s var(--ease-soft), background .45s, color .45s, box-shadow .45s;
}
.fab.is-visible { transform: scale(1); }
/* `display: grid` le gana a [hidden] si no se fuerza */
.fab[hidden] { display: none !important; }
.fab svg { width: 30px; height: 30px; }

/* Botón de silencio: se apila encima del de WhatsApp y es más discreto que él
   —es un control, no una llamada a la acción—. Solo existe mientras suena. */
.fab--audio {
  bottom: calc(clamp(1rem, 2.5vw, 2rem) + 68px);
  width: 46px; height: 46px;
  background: rgba(21,14,34,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  color: var(--gold-lit);
  box-shadow: 0 10px 28px rgba(8,6,12,.55);
}
.fab--audio svg { width: 22px; height: 22px; }
.fab--audio:hover { color: var(--cream); border-color: var(--gold); background: rgba(59,31,107,.85); }
/* aria-pressed="true" = sonando; "false" = silenciado */
.fab--audio .fab__mudo,
.fab--audio[aria-pressed="false"] .fab__son { display: none; }
.fab--audio[aria-pressed="false"] .fab__mudo { display: block; }
.fab--audio[aria-pressed="false"] { color: var(--ink-mute); }

/* WhatsApp con su verde de marca */
.fab--wa {
  background: #25D366; color: #fff;
  box-shadow: 0 12px 34px rgba(37,211,102,.42);
}
.fab--wa.is-visible { animation: waPulse 3.2s var(--ease-out) infinite; }
.fab--wa:hover { background: #1FB855; box-shadow: 0 16px 44px rgba(37,211,102,.62); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 12px 34px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,.45); }
  55%      { box-shadow: 0 12px 34px rgba(37,211,102,.42), 0 0 0 14px rgba(37,211,102,0); }
}

/* ============ MOBILE NAV ============ */
@media (max-width: 900px) {
  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; align-items: flex-end; z-index: 810; position: relative;
  }
  .nav__toggle span {
    display: block; height: 1.5px; background: var(--cream); border-radius: 2px;
    transition: transform .45s var(--ease-out), width .45s var(--ease-out);
  }
  .nav__toggle span:nth-child(1) { width: 26px; }
  .nav__toggle span:nth-child(2) { width: 18px; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { width: 26px; transform: translateY(3.75px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { width: 26px; transform: translateY(-3.75px) rotate(-45deg); }

  .nav__links {
    position: fixed; inset: 0; z-index: 805;
    flex-direction: column; justify-content: center; align-items: center; gap: 1.3rem;
    background: linear-gradient(170deg, var(--noir), var(--surface));
    clip-path: circle(0% at calc(100% - 3rem) 3rem);
    transition: clip-path .8s var(--ease-out);
  }
  .nav__links.is-open { clip-path: circle(150% at calc(100% - 3rem) 3rem); }
  .nav__links li { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
  .nav__links.is-open li { opacity: 1; transform: none; }
  .nav__links.is-open li:nth-child(1) { transition-delay: .16s; }
  .nav__links.is-open li:nth-child(2) { transition-delay: .22s; }
  .nav__links.is-open li:nth-child(3) { transition-delay: .28s; }
  .nav__links.is-open li:nth-child(4) { transition-delay: .34s; }
  .nav__links.is-open li:nth-child(5) { transition-delay: .40s; }
  .nav__links.is-open li:nth-child(6) { transition-delay: .46s; }
  .nav__link { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0; }
  .nav__link::after { display: none; }
}
@media (max-width: 700px) {
  .info-row { grid-template-columns: 1fr; gap: .35rem; }
  .hero__stack { height: 420px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1.4rem; margin-top: 0; }
}