/* =========================================================
   VERSIÓN SITIO WEB (tablets y laptops)
   Se carga solo con 760 px de ancho y 500 px de alto o más (ver <link media> en index.html).
   En celular (vertical u horizontal) no se aplica: la invitación queda intacta.
   Idea: página a pantalla completa, portada de orilla a orilla, contenido en
   dos columnas anchas y todo más grande (zoom 1.22) para leer cómodo.
   ========================================================= */
:root { --page-max: none; --side: min(46vw, 740px); }

body {
  padding: 0;
  background:
    linear-gradient(rgba(251, 248, 242, .7), rgba(251, 248, 242, .7)),
    url("../img/fondo-orquideas.jpg") center / cover fixed,
    #fbf8f2;
}

/* Rejilla: bordes | columna izq | columna der | bordes */
.page {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0 0 40px;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns:
    [full-start] minmax(40px, 1fr)
    [c1] minmax(0, var(--side)) [mid] minmax(0, var(--side)) [c2]
    minmax(40px, 1fr) [full-end];
}
.page::before { display: none; }
.page > * { grid-column: c1 / c2; min-width: 0; }
.page > :not(.hero):not(.names) { zoom: 1.22; }

/* Franja a todo lo ancho con contenido centrado */
.stay {
  grid-column: full-start / full-end !important;
  padding-left: max(40px, calc(50% - var(--side)));
  padding-right: max(40px, calc(50% - var(--side)));
}

/* ---------- 1) PORTADA a pantalla completa (cita y monograma como en el celular) ---------- */
.hero {
  grid-column: full-start / full-end;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
}
.hero picture { display: contents; }
.hero__img { transform: none; object-position: 50% 80%; }
.hero__quote { top: 14%; width: min(80%, 900px); font-size: 28px; }
.hero__monogram { width: 240px; max-width: none; top: 36%; }

/* Nombres debajo de la portada, como en el celular, pero grandes */
.names { padding-top: 60px; }
.names__title { font-size: clamp(80px, 7.5vw, 120px); }

/* ---------- 2) Intro, orquídeas y padres (más grandes) ---------- */
.intro { padding-top: 10px; font-size: 21px; line-height: 1.7; max-width: 760px; justify-self: center; }
.orchids img { max-width: 320px; }
.parents__title { font-size: 40px; }
.parents__list { flex-direction: row; justify-content: center; align-items: center; gap: 56px; }
.parents__name { font-size: 24px; }
.parents__label { font-size: 13px; }
.parents__divider { width: 1px; height: 90px; }

/* ---------- 3) Fecha y, abajo, cuenta regresiva grande a todo lo ancho ---------- */
.date { margin-top: 0; padding-top: 10px; zoom: 1.9 !important; }
.parents { padding-bottom: 0; }
/* Cuenta regresiva: tarjeta blanca con esquinas y sombra, como en el celular, pero grande */
.countdown {
  margin: 50px 0 0;
  padding: 48px 40px 52px;
}
.countdown__sub { font-size: 20px; margin-bottom: 26px; }
.countdown__grid { justify-content: center; gap: 0 3vw; }
.countdown__num { font-size: clamp(64px, 7vw, 110px); font-weight: 400; }
.countdown__sep { font-size: clamp(48px, 5vw, 80px); color: var(--gold); }
.countdown__label { font-size: 15px; letter-spacing: .3em; color: var(--gold-deep); }

/* ---------- 4) Nuestra historia: texto centrado y abajo mosaico de 6 fotos a todo lo ancho ---------- */
.story {
  max-width: 900px;
  justify-self: center;
  margin-top: 80px;
  text-align: center;
  font-size: 18px;
}
.story p { font-size: 24px; line-height: 1.6; max-width: 40ch; margin-left: auto; margin-right: auto; }
.story__forever { text-align: center; font-size: 72px !important; margin-top: 6px; }
.gallery { margin: 30px 0 0; }
/* Mosaico 4 columnas x 2 filas:
   [ a13 alta ][ a62 ][ a89 ][ a35 ]
   [ a13 alta ][   a113 ancha  ][ a71 ] */
.gallery__track {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 14px;
  overflow: visible;
  padding: 0;
}
.gallery__track::before, .gallery__track::after { display: none; }
.gallery__item {
  aspect-ratio: auto;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(40, 30, 15, .18);
  cursor: zoom-in;
}
.gallery__item img { object-position: 50% 30%; transition: transform .4s ease; }
.gallery__item:hover img { transform: scale(1.03); }
.gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery__item:nth-child(3) { grid-column: 3; grid-row: 1; }
.gallery__item:nth-child(4) { grid-column: 4; grid-row: 1; }
.gallery__item:nth-child(5) { grid-column: 4; grid-row: 2; }
.gallery__item:nth-child(6) { grid-column: 2 / span 2; grid-row: 2; }
#gallery-dots { display: none; }

/* ---------- 5) Ceremonia y recepción: tarjetas como en el celular, más grandes ---------- */
.page > :nth-child(10), .page > :nth-child(17) { grid-column: c1 / mid; }
.page > :nth-child(11), .page > :nth-child(18) { grid-column: mid / c2; }
.page > .venue:not(.gifts) {
  margin: 90px 14px 0;
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page > .venue:not(.gifts) .btn { margin-top: auto; }
.venue .venue__icon { width: 60px; height: 60px; }
.venue .venue__title { font-size: 26px; }
.venue .venue__time { font-size: 38px; }
.venue .venue__place { font-size: 17px; }
.venue .venue__address { font-size: 15px; margin-bottom: 18px; }

/* ---------- 6) Hospedaje: franja, carrusel de 4 ---------- */
.stay { margin-top: 30px; padding-top: 0; padding-bottom: 0; }   /* sin franja blanca: mismo fondo que el resto, como en el celular */
/* El carrusel recorta lo que se sale de su caja; con este margen interno la sombra de las tarjetas
   ya no se corta en línea recta (eso formaba el "cuadro" alrededor de los hoteles) */
.stay__track { padding: 14px 18px 34px !important; margin: -14px -18px 0; scroll-padding-left: 18px; }
.stay__track::before, .stay__track::after { display: none; }
/* 3 tarjetas grandes a la vista y la orilla de la siguiente asomándose: invita a usar las flechas */
.stay__card { flex: 0 0 31%; scroll-snap-align: start; padding: 34px 24px 30px; }
.stay__card .venue__icon { width: 56px; height: 40px; }
.stay__name { font-size: 22px; }
.stay__card .gifts__event { font-size: 13px; margin: 6px 0 20px; }

/* ---------- 7) Itinerario vertical (como en el celular) ---------- */
.timeline { margin-top: 0; padding-top: 0; zoom: 1.45 !important; }   /* vertical, como en el celular, más grande */

/* ---------- 8) Vestimenta: dos fotos juntas, código abajo ---------- */
.dress { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin-top: 70px; }
.dress > * { grid-column: 1 / -1; }
.dress .dress__photo, .dress .rsvp__photo {
  grid-column: auto; grid-row: 1;
  width: 100%; max-width: none; height: 600px; aspect-ratio: auto;
  margin: 0 0 28px; border-radius: 6px;
}

/* ---------- 9) Regalos: franja ---------- */
.gifts-intro { margin-top: 60px; }
.page > .gifts { margin: 20px 20px 40px; display: flex; flex-direction: column; align-items: center; }
.page > .gifts .btn { margin-top: auto; }

/* ---------- 10) Confirmación centrada ---------- */
.rsvp > * { max-width: 860px; margin-left: auto; margin-right: auto; }
/* Confirmación: título como las demás secciones y tarjeta más grande y cómoda */
.rsvp .stay__title { font-size: 64px; }
.rsvp__deadline { font-size: 15px; }
.rsvp__card { padding: 40px 48px 44px; }
.rsvp__guest { font-size: 24px; }
.rsvp__seats { font-size: 14px; }
.rsvp__opt span { font-size: 18px; padding: 15px 10px; }
.rsvp__field label { font-size: 17px; margin-bottom: 8px; }
.rsvp__opt-label { font-size: 14px; }
.rsvp__field input, .rsvp__field select, .rsvp__field textarea { font-size: 18px; padding: 14px 16px; }
.rsvp__submit { font-size: 19px; padding: 16px; }

/* ---------- 11) Cierre como en el celular ---------- */
.closing { max-width: 640px; justify-self: center; margin-top: 40px; }

/* Visor y flechas (igual que antes) */
.lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(20,16,10,.88); }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 88vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: zoom-out; }
.lightbox__btn { position: absolute; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--btn); font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__close { top: 20px; right: 24px; font-size: 24px; }
.lightbox__count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--font-classic); letter-spacing: .2em; color: #fff; }
.stay__frame { position: relative; }
.stay__arrow { position: absolute; top: calc(50% - 6px); transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--btn); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(60,45,20,.3); }
.stay__arrow[hidden] { display: none; }
.stay__arrow--prev { left: -20px; }
.stay__arrow--next { right: -20px; }
/* El sobre: más grande en pantallas grandes; crece según la altura de la pantalla para que siempre quepa completo */
/* Sin "zoom": Safari lo aplica mal a elementos con translate (el sello quedaba desfasado).
   Se escala con tamaños reales multiplicados por --ez */
.envelope { --ez: 1.45; }
@media (min-height: 800px) { .envelope { --ez: 1.75; } }
@media (min-height: 950px) { .envelope { --ez: 2; } }
.envelope .env { width: min(calc(360px * var(--ez)), 88vw); }
.envelope__names { font-size: calc(52px * var(--ez)); }
.envelope__date { font-size: calc(13px * var(--ez)); }
.envelope__place { font-size: calc(11px * var(--ez)); margin: calc(4px * var(--ez)) 0 calc(26px * var(--ez)); }
.envelope__hint { font-size: calc(12px * var(--ez)); margin-top: calc(28px * var(--ez)); }
.env__card-text { font-size: calc(26px * var(--ez)); margin-top: calc(6px * var(--ez)); }

/* Celular horizontal (pantalla muy bajita): portada un poco más alta que la pantalla
   y cita/monograma más chicos para que no se encimen */
@media (max-height: 520px) {
  .hero { min-height: 640px; }
  .hero__quote { font-size: 20px; top: 9%; }
  .hero__monogram { width: 160px; top: 34%; }
}

/* Botón de música: a la derecha (la regla del celular lo calculaba con el ancho
   de la columna, que aquí ya no existe, y lo mandaba a la izquierda) y un poco más grande */
.music { right: 28px; bottom: 28px; width: 50px; height: 50px; }
.music svg { width: 22px; height: 22px; }

/* ---------- Ajustes de tamaño (revisión en laptop) ---------- */
/* Código de vestimenta más grande */
.dress .stay__title { font-size: 64px; }
.dress__type { font-size: 18px; }
.dress__figures { width: 100%; max-width: 460px; }
.dress__note { font-size: 19px; max-width: 40ch; }

/* Regalos: pegado a las orquídeas y con texto más grande */
.page > :nth-child(15) { padding-bottom: 0; }
.gifts-intro { margin-top: 0; padding-top: 0; }
.gifts-intro .stay__title { font-size: 64px; }
.gifts-intro__quote { font-size: 28px; max-width: 40ch; }
.gifts-intro__text { font-size: 20px; max-width: 46ch; }

/* Cierre: foto más grande, recortada a la altura de las manos */
.closing { max-width: 780px; }
.closing__photo { max-width: none; width: 100%; aspect-ratio: 1066 / 1290; }
.closing__photo img { object-position: 50% 0%; }
.closing__phrase { font-size: 20px; }
.closing__sign { font-size: 76px; }
/* En el mosaico de laptop la a113 va en la celda ancha: se ve completa, centrada */
.gallery__item img[src$="a113.jpg"] { object-position: 50% 45%; }
/* Hospedaje: título y texto en proporción con las demás secciones (mismo tamaño que Código de vestimenta y Regalos) */
.stay .stay__title { font-size: 64px; }
.stay__intro { font-size: 20px; max-width: 46ch; line-height: 1.6; margin-bottom: 24px; }
/* Itinerario: el título igual de grande que Hospedaje (Hospedaje: 64px × zoom 1.22 ≈ 78px; Itinerario va con zoom 1.45, así que 54px × 1.45 ≈ 78px) */
.timeline .stay__title { font-size: 54px; margin-top: 20px; }
/* Cierre: monograma y fecha más grandes (≈ 1.5×) */
.closing__mono { width: 150px; margin-bottom: 24px; }
.closing__date { font-size: 20px; padding: 11px 6px 11px calc(6px + .3em); }