/* Save-the-date "Elegant": crema + rojo, tipografía serif + caligrafía. */
.theme-std-elegant {
  --stde-red: #b3202f;
  --stde-ink: #2f2a27;
  --stde-serif: 'Cormorant Garamond', Georgia, serif;
  --stde-script: 'Pinyon Script', cursive;
}

.theme-std-elegant .stde-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.25rem;
  color: var(--stde-ink);
  background-image: var(--stde-bg, none), linear-gradient(160deg, #efe6d8 0%, #e6d8c4 55%, #ddcdb6 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  /* Contenedor: en desktop las fuentes escalan respecto al ancho de la columna (cqi),
     no del viewport, así la columna se ve igual que un móvil de ese ancho. */
  container-type: inline-size;
}

.theme-std-elegant .stde-hero__inner {
  width: 100%;
  max-width: 620px;
  /* Subir el conjunto (nombres → fecha) para dejar ver más la foto inferior. */
  margin-top: -100px;
}

/* Por encima del ancho de un móvil (≈480px): encuadrar el hero como columna centrada
   (no a pantalla completa) y fijar las fuentes, porque los clamp(...vw...) crecen con el
   viewport y en tablet/desktop descuadran (p.ej. la fecha se parte en dos líneas). */
@media (min-width: 481px) {
  .theme-std-elegant {
    background: #d8c8b2;
  }
  .theme-std-elegant .stde-hero {
    max-width: 430px;
    margin-inline: auto;
    box-shadow: 0 10px 40px rgba(47, 42, 39, 0.25);
  }
  /* En móvil las fuentes usan vw (viewport); en la columna de desktop las pasamos a cqi
     (ancho de la columna) para que queden EXACTAMENTE igual que en móvil, no más grandes. */
  .theme-std-elegant .stde-cap { font-size: clamp(1rem, 3.4cqi, 1.4rem); }
  .theme-std-elegant .stde-script { font-size: clamp(1.7rem, 5cqi, 2.5rem); }
  .theme-std-elegant .stde-name { font-size: clamp(1.8rem, 13cqi, 2.2rem); }
  .theme-std-elegant .stde-amp { font-size: clamp(3.6rem, 16cqi, 6.5rem); }
  .theme-std-elegant .stde-hero__tagline { font-size: clamp(0.9rem, 3cqi, 1.15rem); }
  .theme-std-elegant .stde-hero__date { font-size: clamp(2rem, 14cqi, 2.4rem); white-space: nowrap; }
}

/* SAVE the DATE */
.theme-std-elegant .stde-hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
}
.theme-std-elegant .stde-cap {
  font-family: var(--stde-serif);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-weight: 500;
  font-size: clamp(1rem, 3.4vw, 1.4rem);
  color: var(--stde-ink);
}
.theme-std-elegant .stde-script {
  font-family: var(--stde-script);
  color: var(--stde-red);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  line-height: 1;
}

/* Divisor línea-corazón-línea */
.theme-std-elegant .stde-hl {
  display: block;
  max-width: 240px;
  margin: 1.1rem auto;
}
.theme-std-elegant .stde-hl svg {
  width: 100%;
  height: 12px;
  display: block;
}

/* Nombres + & */
.theme-std-elegant .stde-hero__names {
  margin: 0;
  font-family: var(--stde-serif);
  line-height: 1;
}
.theme-std-elegant .stde-name {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: clamp(1.8rem, 13vw, 2.2rem);
  color: var(--stde-ink);
}
.theme-std-elegant .stde-amp {
  display: block;
  font-family: var(--stde-script);
  color: var(--stde-red);
  font-size: clamp(3.6rem, 16vw, 6.5rem);
  line-height: 0.65;
  margin: 0.25rem 0;
}
.theme-std-elegant .stde-hero__tagline {
  margin: 0.7rem 0 0;
  font-family: var(--stde-serif);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-weight: 500;
  font-size: clamp(0.9rem, 3vw, 1.15rem);
  color: var(--stde-ink);
}

/* Fecha */
.theme-std-elegant .stde-hero__date {
  margin: 0;
  font-family: var(--stde-serif);
  color: var(--stde-red);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: clamp(2rem, 14vw, 2.4rem);
}

/* Splash de intro: "Pulsa aquí" centrado sobre fondo crema */
.theme-std-elegant .splash__tap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font-family: var(--stde-script);
  color: var(--stde-red);
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  animation: stde-tap-pulse 1.8s ease-in-out infinite;
}
@keyframes stde-tap-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

/* Reserva la fecha + ¿Nos acompañas? */
.theme-std-elegant .stde-hero__reserve {
  margin: 0;
  font-family: var(--stde-serif);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 500;
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  color: var(--stde-ink);
}
.theme-std-elegant .stde-hero__ask {
  margin: 0.15rem 0 0;
  font-family: var(--stde-script);
  color: var(--stde-red);
  font-size: clamp(1.9rem, 6vw, 2.7rem);
}