/* ==========================================================
   Secciones comunes (.s-*) · cada diseño define las variables --s-*
   ========================================================== */

:root {
  --s-fondo: #ffffff;
  --s-tinta: #222;
  --s-suave: #666;
  --s-acento: #c9a45c;
  --s-acento-tinta: #fff;            /* texto sobre el acento */
  --s-tarjeta: rgba(255, 255, 255, .7);
  --s-borde: rgba(0, 0, 0, .1);
  --s-radio: 16px;
  --s-sombra: 0 16px 30px -18px rgba(0, 0, 0, .45);
  --s-fuente: system-ui, sans-serif;
  --s-titulo: Georgia, serif;
  --s-titulo-tam: clamp(2.2rem, 9vw, 2.8rem);
  --s-etiqueta: system-ui, sans-serif;
  --s-num: Georgia, serif;
}

.contenido { width: min(100%, 540px); margin: 0 auto; }

.s {
  position: relative;
  padding: 72px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--s-tinta);
  font-family: var(--s-fuente);
}
.s-titulo {
  margin: 0 0 26px;
  font-family: var(--s-titulo);
  font-weight: 400;
  font-size: var(--s-titulo-tam);
  line-height: 1.1;
  color: var(--s-titulo-color, var(--s-tinta));
}

/* Botones */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--s-etiqueta);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, background-color .3s, box-shadow .3s;
}
.s-btn:active { transform: scale(.96); }
.s-btn:focus-visible { outline: 2px solid var(--s-acento); outline-offset: 3px; }
.s-btn--linea { margin-top: 22px; border: 1.5px solid var(--s-acento); color: var(--s-btn-linea-color, var(--s-tinta)); }
.s-btn--mini { min-height: 44px; margin-top: 12px; padding: 0 20px; font-size: .66rem; border: 1.5px solid var(--s-acento); color: var(--s-btn-linea-color, var(--s-tinta)); }
.s-btn--lleno { min-height: 54px; padding: 0 34px; background: var(--s-acento); color: var(--s-acento-tinta); box-shadow: var(--s-sombra); }

/* Cuenta regresiva */
.s-cuenta__cajas { display: flex; justify-content: center; gap: clamp(8px, 3vw, 14px); }
.s-cuenta__caja {
  width: clamp(64px, 18vw, 80px);
  padding: 14px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--s-radio);
  background: var(--s-tarjeta);
  border: 1px solid var(--s-borde);
  box-shadow: var(--s-sombra);
}
.s-cuenta__num { font-family: var(--s-num); font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.1; color: var(--s-num-color, var(--s-tinta)); font-variant-numeric: tabular-nums lining-nums; }
.s-cuenta__num.tic { animation: s-tic .45s ease; }
@keyframes s-tic { from { transform: translateY(-6px); opacity: .3; } }
.s-cuenta__lbl { margin-top: 4px; font-family: var(--s-etiqueta); font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--s-suave); }
.s-cuenta__fin { margin: 0; font-family: var(--s-titulo); font-size: 2rem; color: var(--s-acento); }
.s-cuenta__fecha { margin: 22px 0 0; font-size: 1.05rem; color: var(--s-suave); }

/* Itinerario */
.s-eventos__lista { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 18px; }
.s-evento {
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--s-radio);
  background: var(--s-tarjeta);
  border: 1px solid var(--s-borde);
  box-shadow: var(--s-sombra);
}
.s-evento__icono { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 50%; color: var(--s-acento); border: 1.5px solid var(--s-acento); }
.s-evento__titulo { margin: 0; font-family: var(--s-etiqueta); font-weight: 700; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; }
.s-evento__hora { margin: 6px 0 4px; font-family: var(--s-num); font-size: 1.8rem; line-height: 1.1; color: var(--s-acento); }
.s-evento__lugar { margin: 0; font-weight: 600; font-size: 1.05rem; }
.s-evento__dir { margin: 4px 0 0; max-width: 22em; font-size: .95rem; line-height: 1.45; color: var(--s-suave); }

/* Galería */
.s-galeria__rejilla { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s-galeria__rejilla--3 .s-foto:first-child { grid-column: 1 / -1; }
.s-galeria__rejilla--3 .s-foto:first-child img { aspect-ratio: 16 / 10; }
.s-foto { margin: 0; overflow: hidden; border-radius: var(--s-radio); box-shadow: var(--s-sombra); background: var(--s-borde); }
.s-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s ease; }
.s-foto:hover img { transform: scale(1.04); }

/* Vestimenta */
.s-vestimenta__tipo { margin: 0; font-family: var(--s-titulo); font-size: 1.8rem; color: var(--s-acento); }
.s-paleta { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 8px; padding: 0; }
.s-paleta li { padding: 3px; border-radius: 50%; border: 1px solid var(--s-borde); }
.s-paleta svg { display: block; width: 38px; height: 38px; }
.s-vestimenta__nota { margin: 6px 0 0; max-width: 22em; font-size: 1rem; line-height: 1.6; color: var(--s-suave); }

/* Confirmación */
.s-rsvp__saludo { margin: -10px 0 0; font-family: var(--s-titulo); font-size: 1.4rem; color: var(--s-acento); }
.s-rsvp__texto { margin: 10px 0 26px; max-width: 22em; font-size: 1.05rem; line-height: 1.6; }
.s-rsvp__antes { margin: 18px 0 0; font-size: .92rem; color: var(--s-suave); }

/* Pie */
.s-pie { padding: 40px 24px calc(env(safe-area-inset-bottom) + 60px); text-align: center; color: var(--s-tinta); font-family: var(--s-fuente); }
.s-pie__t { margin: 0; font-family: var(--s-etiqueta); font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--s-suave); }
.s-pie__n { margin: 6px 0 0; font-family: var(--s-titulo); font-size: 2.4rem; line-height: 1.1; }
.s-pie__credito { margin: 22px 0 0; font-size: .82rem; color: var(--s-suave); }
.s-pie__marca { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--s-acento); }

/* Indicador "desliza" común */
.desliza-c {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s .8s;
}
.desliza-c i { width: 2px; height: 26px; border-radius: 1px; background: linear-gradient(currentColor, transparent); animation: s-caer 1.8s ease-in-out infinite; transform-origin: top; }
.listo .desliza-c { opacity: .8; pointer-events: auto; }
@keyframes s-caer { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .desliza-c i { animation: none; }
}