/*=========================================================
  VICTOR & GERALDINA · RESPONSIVE RELEASE V3.0
  Capa final de correcciones para móvil, tablet y escritorio.
=========================================================*/

/* ---------- Base segura ---------- */

html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

main,
section,
footer{
  min-width:0;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

button,
a,
input,
select,
textarea{
  touch-action:manipulation;
}

button,
.button,
.hero-discover,
.rsvp-open-button,
.rsvp-submit,
.gallery-upload-button{
  min-height:46px;
}

:focus-visible{
  outline:2px solid rgba(106,36,52,.72);
  outline-offset:4px;
}

/* Evita que textos o grids creen desplazamiento lateral. */
.story-container,
.countdown-container,
.program-container,
.section-container,
.location-card,
.dress-code-grid,
.gifts-main,
.rsvp-content,
.gallery-grid,
.gallery-upload,
.footer{
  min-width:0;
}

.story-content,
.location-content,
.dress-card,
.gifts-card,
.rsvp-dialog,
.gallery-upload-content{
  min-width:0;
  overflow-wrap:anywhere;
}

/* ---------- Escritorios grandes ---------- */

@media (min-width:1440px){
  .section-container,
  .story-container{
    max-width:1240px;
  }

  .hero-content{
    width:min(86%,840px);
  }

  .story,
  .program,
  .section,
  .countdown-section{
    padding-block:clamp(110px,8vw,150px);
  }
}

/* ---------- Tablet y laptops pequeñas ---------- */

@media (max-width:1024px){
  .section{
    padding-inline:28px;
  }

  .section-container{
    width:min(100%,900px);
  }

  .story{
    min-height:auto;
  }

  .location,
  .dress-code,
  .rsvp{
    min-height:auto;
  }

  .gallery-grid{
    gap:18px;
  }
}

@media (max-width:850px){
  .story{
    padding:88px 28px;
  }

  .story-container{
    grid-template-columns:1fr;
    gap:54px;
  }

  .story-image-wrapper{
    width:min(78vw,430px);
  }

  .story-content{
    max-width:680px;
    margin-inline:auto;
    text-align:center;
  }

  .story-divider{
    margin-inline:auto;
  }

  .location-card{
    gap:48px;
  }

  .location-image-wrapper{
    width:min(100%,680px);
    min-height:clamp(440px,68vw,560px);
    margin-inline:auto;
  }
}

/* ---------- Celulares ---------- */

@media (max-width:700px){
  .section,
  .story,
  .program,
  .countdown-section{
    padding:76px 20px;
  }

  .section-container,
  .story-container,
  .program-container,
  .countdown-container{
    width:100%;
  }

  .section-header{
    margin-bottom:42px;
  }

  .section-title,
  .story-title,
  .program-title,
  .countdown-title,
  .location-name{
    overflow-wrap:normal;
    word-break:normal;
  }

  .section-title{
    font-size:clamp(2.9rem,15vw,4.4rem);
    line-height:.94;
  }

  .section-eyebrow,
  .story-eyebrow,
  .program-eyebrow,
  .countdown-eyebrow,
  .location-kicker{
    font-size:.7rem;
    letter-spacing:.22em;
  }

  /* Intro: estable incluso en teléfonos altos o compactos. */
  .intro__stage{
    width:min(96vw,680px);
    max-height:78svh;
    transform:translateY(-2svh);
  }

  .intro__envelope{
    width:100%;
  }

  .intro__letter{
    width:78%;
  }

  .intro__letter-inner{
    padding:clamp(20px,6vw,36px);
  }

  .intro__names{
    font-size:clamp(2.1rem,12vw,3.8rem);
  }

  .intro__hint{
    bottom:-12%;
    width:100%;
  }

  .intro__hint span{
    font-size:clamp(.88rem,4vw,1.1rem);
    letter-spacing:.22em;
  }

  .intro__hint small{
    max-width:90vw;
    white-space:normal;
    text-align:center;
    line-height:1.5;
    letter-spacing:.2em;
  }

  /* Hero */
  .hero-content{
    width:100%;
    padding-inline:18px;
    padding-top:max(72px,env(safe-area-inset-top));
    padding-bottom:max(132px,calc(18svh + env(safe-area-inset-bottom)));
  }

  .hero-title{
    width:100%;
    font-size:clamp(3.35rem,17vw,5.5rem);
    line-height:.76;
  }

  .hero-name-first{
    margin-left:0;
    align-self:center;
  }

  .hero-name-second{
    margin-right:0;
    align-self:center;
  }

  .hero-date{
    font-size:.76rem;
    letter-spacing:.18em;
  }

  .hero-city{
    max-width:92%;
    font-size:.68rem;
    line-height:1.6;
    letter-spacing:.13em;
  }

  .hero-discover{
    width:min(calc(100% - 36px),330px);
    bottom:max(24px,env(safe-area-inset-bottom));
    white-space:normal;
    line-height:1.5;
    letter-spacing:.18em;
  }

  /* Historia */
  .story-image-wrapper{
    width:min(82vw,380px);
  }

  .story-image-wrapper::before{
    inset:-11px 11px 11px -11px;
  }

  .story-title{
    font-size:clamp(3rem,15vw,4.5rem);
  }

  .story-text{
    font-size:1.02rem;
    line-height:1.75;
  }

  /* Cuenta regresiva */
  .countdown{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 14px;
  }

  .countdown-item{
    min-width:0;
  }

  .countdown-number{
    min-width:0;
    font-size:clamp(3rem,16vw,4.5rem);
  }

  .countdown-label{
    font-size:.66rem;
    letter-spacing:.18em;
  }

  .countdown-message{
    margin-top:40px;
    font-size:.72rem;
    line-height:1.7;
    letter-spacing:.22em;
  }

  /* Programa */
  .program-divider{
    margin-bottom:48px;
  }

  .program-timeline::before{
    left:19.5px;
  }

  .program-item{
    grid-template-columns:40px minmax(0,1fr);
    column-gap:14px;
  }

  .program-time{
    font-size:.86rem;
    letter-spacing:.12em;
  }

  .program-content h3{
    font-size:1.7rem;
    line-height:1.08;
  }

  .program-content p{
    font-size:.98rem;
  }

  /* Lugar */
  .location-card{
    grid-template-columns:1fr;
  }

  .location-image-wrapper{
    min-height:clamp(360px,112vw,480px);
  }

  .location-image-label{
    left:20px;
    right:20px;
    bottom:20px;
    font-size:.68rem;
    line-height:1.5;
    letter-spacing:.2em;
  }

  .location-name{
    font-size:clamp(3rem,15vw,4.2rem);
  }

  .location-address,
  .location-ranch{
    font-size:1rem;
  }

  .location-description{
    font-size:1rem;
    line-height:1.75;
  }

  /* Vestimenta */
  .dress-code-grid{
    gap:20px;
  }

  .dress-card{
    min-height:auto;
    padding:36px 22px;
  }

  .dress-card-title{
    font-size:clamp(2rem,10vw,2.7rem);
  }

  .dress-card-text{
    font-size:1rem;
  }

  .dress-card-wide{
    padding:36px 22px;
  }

  .dress-code-note{
    margin-top:32px;
    padding-inline:4px;
    font-size:1rem;
    letter-spacing:.12em;
  }

  /* Regalos */
  .gifts-card{
    padding-inline:22px;
  }

  /* RSVP */
  .rsvp-introduction{
    font-size:1rem;
    line-height:1.75;
  }

  .rsvp-modal{
    align-items:flex-end;
    padding:0;
  }

  .rsvp-dialog{
    width:100%;
    max-height:92svh;
    padding:48px 20px max(28px,env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;
    overscroll-behavior:contain;
  }

  .rsvp-close{
    top:8px;
    right:10px;
    width:48px;
    height:48px;
  }

  .rsvp-dialog-title{
    padding-inline:34px;
    font-size:clamp(2.7rem,14vw,4rem);
  }

  .form-group input,
  .form-group select,
  .form-group textarea{
    min-height:48px;
    font-size:16px; /* evita zoom automático en iPhone */
  }

  .rsvp-option span{
    min-height:50px;
    display:flex;
    align-items:center;
  }

  /* Galería */
  .gallery-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .gallery-item,
  .gallery-item-large,
  .gallery-item-wide{
    grid-column:auto;
    grid-row:auto;
    min-height:0;
    aspect-ratio:4/5;
  }

  .gallery-upload{
    grid-template-columns:1fr;
    gap:30px;
    padding:34px 22px;
    text-align:center;
  }

  .gallery-qr-link{
    justify-self:center;
  }

  /* Footer */
  .footer{
    padding-inline:20px;
    padding-bottom:max(54px,calc(40px + env(safe-area-inset-bottom)));
  }

  .footer-title{
    font-size:clamp(2.8rem,14vw,4.1rem);
  }

  /* Ilustraciones: visibles sin invadir el texto. */
  .vg-hero-vine{
    width:150px!important;
    opacity:.42!important;
  }

  .vg-hero-vine-left{
    left:-72px!important;
  }

  .vg-hero-vine-right{
    right:-72px!important;
  }

  .vg-location-vine,
  .vg-dress-olive,
  .vg-rsvp-eucalyptus{
    opacity:.36!important;
    pointer-events:none;
  }
}

/* ---------- Teléfonos pequeños ---------- */

@media (max-width:390px){
  .section,
  .story,
  .program,
  .countdown-section{
    padding-inline:16px;
  }

  .hero-title{
    font-size:clamp(3.05rem,16.5vw,4rem);
  }

  .hero-date{
    letter-spacing:.12em;
  }

  .countdown{
    gap:26px 8px;
  }

  .countdown-number{
    font-size:clamp(2.75rem,15vw,3.6rem);
  }

  .program-item{
    column-gap:10px;
  }

  .program-content h3{
    font-size:1.55rem;
  }

  .gallery-upload-button,
  .rsvp-open-button,
  .button{
    width:100%;
  }
}

/* ---------- Pantallas bajas y orientación horizontal ---------- */

@media (max-height:650px) and (orientation:landscape){
  .intro__stage{
    width:min(76vw,760px);
    max-height:74vh;
    transform:translateY(-4vh);
  }

  .intro__hint{
    bottom:-13%;
  }

  .hero-content{
    justify-content:center;
    padding-block:54px 74px;
  }

  .hero-title{
    font-size:clamp(3rem,10vw,5rem);
  }

  .hero-discover{
    bottom:10px;
  }
}

/* ---------- Preferencias del sistema ---------- */

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}

@media (prefers-contrast:more){
  .section-eyebrow,
  .story-eyebrow,
  .program-eyebrow,
  .countdown-eyebrow,
  .location-kicker{
    color:#646971;
  }
}

/*=========================================================
    SOLAPAMIENTO REDONDEADO ENTRE SECCIONES
=========================================================*/

.countdown-section,
.program,
.dress-code,
.gifts,
.rsvp{
    position:relative;
    z-index:2;

    transform:translateY(-70px);
    margin-bottom:-70px;

    border-radius:60px 60px 0 0;

    box-shadow:
        0 -12px 40px rgba(70,55,48,.045);
}

@media (max-width:700px){
  
  .countdown-section,
    .program,
    .dress-code,
    .gifts,
    .rsvp{
        transform:translateY(-48px);
        margin-bottom:-48px;

        border-radius:60px 60px 0 0;
    }

}

.story{
    position:relative;
    z-index:1;
}

.countdown-section{
    z-index:2;
}

.program{
    z-index:3;
}

.location{
    position:relative;
    z-index:4;
}

.dress-code{
    z-index:5;
}

.gifts{
    z-index:6;
}

.rsvp{
    z-index:7;
}