/* =====================================================================
   RESPONSIVO — se carga al final para ajustar sobre los estilos base.
   Móvil (<600) → tablet (600+) → escritorio (900+)
   ===================================================================== */

/* Los textos sobre fotos escalan con el ancho de su foto (container query units),
   así se ven igual de proporcionados en cualquier tamaño. */
.photo { container-type: inline-size; }
.hero__script   { font-size: 11.8cqw; top: 7cqw; right: 6cqw; left: 6cqw; }
.hero__names    { font-size: 12.3cqw; right: 6cqw; bottom: 5cqw; }
.hero__and      { font-size: 13.4cqw; }
.date__number .script { font-size: 8.2cqw; margin-bottom: 3.4cqw; }
.date__number span:last-child { font-size: 21cqw; }
.date__overlay  { right: 5cqw; left: 5cqw; }
.date__details  { font-size: clamp(11px, 2.9cqw, 16px); }
.closing__text  { font-size: clamp(11px, 3.2cqw, 17px); top: 5cqw; left: 5cqw; }
.music-btn      { width: 17cqw; height: 17cqw; }
.music-btn svg  { width: 70%; height: 70%; }

.hero__title   { font-size: clamp(30px, 8.5vw, 40px); }
.countdown b   { font-size: clamp(28px, 8vw, 40px); }
.countdown__grid div { min-width: clamp(54px, 16vw, 78px); }

/* Móviles muy angostos */
@media (max-width: 360px) {
  :root { --gutter: 20px; }
  .save__title { font-size: 54px; }
  .venue__script { font-size: 46px; }
}

/* ---------- Tablet: una columna, más ancha ---------- */
@media (min-width: 600px) {
  :root { --max-width: 600px; --gutter: 44px; }
  body { font-size: 18px; }
  .field { font-size: 14px; padding: 18px 20px; }
  .field input[type=text], .field select, .field textarea { font-size: 15px; }
  .features li, .save__text { font-size: 14px; }
  .save__title { font-size: 84px; }
  .venue__script { font-size: 68px; }
  .venue__join { font-size: 46px; }
  .venue__name { font-size: 26px; }
  .countdown__title { font-size: 52px; }
  .countdown small { font-size: 11px; }
}

/* ---------- Escritorio: composición en dos columnas ---------- */
@media (min-width: 900px) {
  :root { --max-width: 1120px; --gutter: 56px; }
  body { background: #171616; padding: 40px 24px; }
  .invitation {
    display: grid; grid-template-columns: 1fr 1fr;
    border-radius: 36px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  }
  .invitation > section { padding: 72px var(--gutter); }

  /* Portada: título a la izquierda, foto a la derecha */
  .hero { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr minmax(360px, 460px); gap: 56px; align-items: center; padding-bottom: 72px; }
  .hero__title { text-align: left; font-size: clamp(56px, 6.4vw, 92px); margin: 0; align-self: center; }
  .photo--hero { width: 100%; }

  /* Fecha (izq.) + cuenta regresiva (der.) */
  .date { padding: 0 0 0 24px !important; display: flex; align-items: center; }
  .photo--date { width: 100%; margin: 0; border-radius: var(--radius-photo); }
  .countdown { display: flex; flex-direction: column; justify-content: center; }
  .countdown__title { font-size: 64px; }
  .countdown b { font-size: 48px; }
  .countdown small { font-size: 12px; }

  /* Lugar: textos a la izquierda, foto a la derecha */
  .venue {
    grid-column: 1 / -1; display: grid; column-gap: 64px; align-content: center;
    grid-template-columns: 1fr minmax(360px, 520px);
    grid-template-areas: "head photo" "join photo" "list photo"; grid-template-rows: auto auto 1fr;
  }
  .venue__head { grid-area: head; align-self: end; }
  .photo--venue { grid-area: photo; margin: 0; aspect-ratio: 1 / 1.25; }
  .venue__join { grid-area: join; text-align: left; margin: 24px 0 8px; align-self: end; }
  .features { grid-area: list; align-content: start; }
  .features li { justify-self: start; width: auto; max-width: 34ch; text-align: left; border-right: 0; border-left: 1px solid var(--accent); padding: 0 0 0 14px; }
  .venue__script { font-size: 84px; }
  .venue__name { width: auto; font-size: 32px; }

  /* RSVP (izq.) + Guardar la fecha (der.) */
  .rsvp { background: var(--bg-alt); padding-right: 28px !important; }
  .save { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 28px !important; }
  .save__title { font-size: clamp(72px, 8vw, 110px); }
  .save__text { font-size: 15px; max-width: 36ch; }

  /* Cierre centrado */
  .closing { grid-column: 1 / -1; display: flex; justify-content: center; padding: 56px 24px 0; }
  .photo--closing { width: min(100%, 520px); aspect-ratio: 1 / 1.05; }
}

/* Pantallas grandes */
@media (min-width: 1400px) { :root { --max-width: 1240px; } }