/* La fotografía y el arco son capas independientes para personalizar el retrato. */
.hero{min-height:820px;align-items:center;grid-template-columns:1fr 1.05fr}
.hero .hero-photo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:820px;overflow:visible;background:radial-gradient(ellipse at 52% 53%,#e4e8d999,transparent 68%);padding:18px 20px 30px}
.hero .hero-photo::after{content:none}
.ceremony-frame{position:relative;width:min(100%,480px);aspect-ratio:2 / 3;isolation:isolate;flex:none}
.hero .hero-photo .framed-couple{position:absolute;inset:14% 14% 7% 16%;width:70%;height:79%;object-fit:cover;object-position:50% 45%;z-index:1;filter:saturate(.78) contrast(.97);border:1px solid #bba782;box-shadow:0 14px 35px #343f3415}
.hero .hero-photo .floral-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}
.hero .hero-photo .photo-caption{position:static;display:block;color:#7a806c;font-size:10px;letter-spacing:1.8px;text-align:center;margin:10px 15px 0;line-height:1.6}
.hero .hero-number{left:42%;font-size:80px;bottom:-15px;z-index:3;color:#c3c9b3}
/* En escritorio, texto y arco comparten un lienzo compacto y centrado. */
@media(min-width:801px){
 .hero{max-width:1120px;margin-inline:auto;padding-inline:20px;grid-template-columns:1fr 1.05fr;column-gap:10px;min-height:790px}
 .hero .hero-copy{padding:55px 0 55px 20px}
 .hero h1{font-size:clamp(80px,7.6vw,110px);letter-spacing:-2.5px}
 .hero .hero-photo{height:790px;padding:18px 0 30px}
 .hero .hero-number{left:40%;bottom:0;font-size:65px}
}
@media(max-width:800px){.hero .hero-photo{height:690px;padding:10px 8px 25px}.hero .hero-copy{padding-left:10%;padding-right:4%}.hero .hero-number{font-size:65px;left:39%}.hero .hero-photo .photo-caption{font-size:9px;letter-spacing:1px}}
@media(max-width:550px){.hero{grid-template-columns:1fr}.hero .hero-copy{padding:50px 7% 20px}.hero .hero-photo{height:auto;min-height:0;padding:0 15px 35px}.ceremony-frame{width:min(100%,440px)}.hero .hero-photo .photo-caption{font-size:10px;margin-top:8px}.hero .hero-number{left:auto;right:22px;bottom:-23px;font-size:70px}}

/* Las columnas y el retrato pueden encogerse sin desbordar la pantalla. */
.hero > *{min-width:0}
.hero .hero-photo{margin:0}
@media(min-width:551px) and (max-width:800px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
 .hero h1{font-size:clamp(48px,7.6vw,64px);letter-spacing:-1.5px}
 .hero .hero-photo{height:auto;min-height:540px}
}
@media(max-width:550px){
 .hero h1{font-size:clamp(42px,15vw,80px);letter-spacing:-.025em;line-height:1.02}
 .hero h1 i{margin-left:.08em}
 .hero .hero-copy>.eyebrow{font-size:clamp(10px,2.8vw,12px);letter-spacing:1.3px}
 .hero .hero-photo{width:100%}
 .hero-bottom .text-link{max-width:100%;gap:12px}
 .countdown{gap:clamp(3px,1vw,6px)}
 .countdown>div{min-width:0;flex:1;max-width:65px}
 .countdown strong{font-size:clamp(36px,11vw,55px)}
 .album-polaroid{width:min(100%,270px)}
 .rsvp>*{min-width:0}
 .button{max-width:100%;white-space:normal;text-align:center}
}