*{box-sizing:border-box}
:root{--cream:#f0e9df;--ink:#252621;--olive:#5f6652;--paper:#f7f2ea;--line:#b9ad9c}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,sans-serif;overflow-x:hidden}
img{display:block;width:100%}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.progress{position:fixed;top:0;left:0;width:0;height:3px;background:#d8c4a7;z-index:500}
.hero{height:100svh;min-height:720px;position:relative;color:white;overflow:hidden}
.hero-bg{position:absolute;inset:0;height:100%;object-fit:cover;transform:scale(1.05);animation:heroMove 16s ease-in-out infinite alternate}
@keyframes heroMove{to{transform:scale(1.12) translateX(-1.5%)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#22261fbc 0,#22261f5f 40%,#22261f15 68%,#22261f3c)}
nav{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:35px 4vw;border-bottom:1px solid #ffffff35;font-size:11px;letter-spacing:.22em}
.menu-btn{background:none;border:0;color:#fff;cursor:pointer;letter-spacing:.18em}.menu-btn span{margin-left:12px}
.hero-copy{position:absolute;z-index:3;left:5vw;top:50%;transform:translateY(-48%)}
.eyebrow{font-size:10px;letter-spacing:.3em}
.hero h1{font:400 clamp(75px,10.8vw,155px)/.67 "Cormorant Garamond";letter-spacing:-.03em;margin:35px 0}
.hero h1 em{font-size:.58em;color:#dfcfb6;font-weight:400}
.hero-meta{display:flex;gap:35px;font-size:10px;letter-spacing:.18em}
.explore{position:absolute;z-index:3;bottom:5vh;left:5vw;font-size:9px;letter-spacing:.22em}.explore span{display:block;margin-top:13px;font-size:18px}
.menu-panel{position:fixed;z-index:600;right:0;top:0;height:100vh;width:min(430px,100vw);background:#20251f;color:white;padding:100px 55px;transform:translateX(100%);transition:.55s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;gap:25px}
.menu-panel.open{transform:none}.menu-panel button{position:absolute;top:25px;right:30px;background:none;border:0;color:white;font-size:38px}.menu-panel a{font:400 30px "Cormorant Garamond";border-bottom:1px solid #ffffff20;padding-bottom:18px}
.countdown-section{padding:65px 6vw 75px;text-align:center;background:var(--paper);border-bottom:1px solid var(--line)}
.count-label{font:500 13px "Cormorant Garamond";letter-spacing:.24em;margin-bottom:22px}
.countdown{display:flex;justify-content:center;align-items:flex-start;gap:30px}
.countdown div{min-width:120px}.countdown strong{font:400 clamp(52px,7vw,92px) "Cormorant Garamond";display:block;line-height:.9}.countdown span{font-size:8px;letter-spacing:.2em}.countdown i{font:400 54px "Cormorant Garamond";opacity:.5}
.story-intro{padding:110px 6vw 70px;display:flex;justify-content:space-between;gap:60px;align-items:flex-end}
.story-intro span{font:500 15px "Cormorant Garamond";letter-spacing:.18em}.story-intro h2{font:400 clamp(44px,5vw,72px)/.95 "Cormorant Garamond";margin:15px 0 0}.story-intro h2 em{color:#6d735f}.story-intro p{max-width:360px;line-height:1.8;color:#66695e}
.story-scroll{height:380vh;position:relative}.story-sticky{height:100vh;position:sticky;top:0;display:flex;align-items:center;overflow:hidden;background:#e9e0d4}.story-track{display:flex;gap:20px;padding:0 7vw;will-change:transform}
.chapter{width:min(620px,78vw);height:72vh;min-height:560px;flex:none;position:relative;overflow:hidden;background:#f7f2ea}
.intro-card,.final-card{display:flex;flex-direction:column;justify-content:center;padding:55px}.intro-card span,.final-card span{font-size:10px;letter-spacing:.24em}.intro-card h3,.final-card h3{font:400 62px/1 "Cormorant Garamond";margin:18px 0}.intro-card p,.final-card p{line-height:1.7;max-width:350px;color:#66695e}
.image-card img{height:100%;object-fit:cover;transition:1s}.image-card:hover img{transform:scale(1.04)}.chapter-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,#1f221dd9)}
.chapter-copy{position:absolute;left:40px;right:40px;bottom:38px;color:#fff}.chapter-copy b{font:400 74px "Cormorant Garamond";opacity:.65}.chapter-copy span{display:block;font-size:9px;letter-spacing:.22em}.chapter-copy h3{font:400 47px "Cormorant Garamond";margin:10px 0}.chapter-copy p{line-height:1.5;max-width:390px;font-size:13px}
.final-card{background:#59604f;color:white}.final-card p{color:#e4e2d8}
.wedding-day{padding:120px 5vw}.ticket{max-width:1240px;margin:auto;background:var(--paper);display:grid;grid-template-columns:1.35fr .75fr 1fr 1fr auto;align-items:stretch;border:1px solid #c4b8a8;box-shadow:0 25px 60px #6e604628}.ticket>div{padding:42px;border-right:1px dashed #c4b8a8}.ticket-title strong{display:block;font:400 44px/.85 "Cormorant Garamond"}.ticket-title span,.ticket-date span,.ticket-event span{font-size:8px;letter-spacing:.22em}.ticket-title p,.ticket-event p{font-size:11px;line-height:1.6}.ticket-date{text-align:center}.ticket-date strong{display:block;font:400 86px "Cormorant Garamond"}.ticket-date p{font-size:9px;letter-spacing:.16em}.ticket-event strong{display:block;font:400 35px "Cormorant Garamond";margin:16px 0}.directions{display:flex;align-items:center;padding:25px;background:#4d5346;color:white;font-size:9px;letter-spacing:.15em}
.venue-feature{min-height:800px;display:grid;grid-template-columns:.8fr 1.2fr;background:#273027;color:white}.venue-copy{padding:11vw 7vw;align-self:center}.venue-copy span{font-size:9px;letter-spacing:.24em}.venue-copy h2{font:400 clamp(50px,6vw,80px)/.92 "Cormorant Garamond";margin:22px 0}.venue-copy p{line-height:1.8;color:#c9cdc5}.venue-img{overflow:hidden}.venue-img img{height:100%;object-fit:cover;transition:1.2s}.venue-img:hover img{transform:scale(1.04)}
.gallery{padding:100px 5vw;display:grid;grid-template-columns:1.1fr .75fr .75fr 1fr;grid-template-rows:310px 310px;gap:14px;background:#171a17;color:white}.gallery-title{padding:40px;align-self:center}.gallery-title span{font-size:9px;letter-spacing:.25em}.gallery-title h2{font:400 62px/.9 "Cormorant Garamond";margin:15px 0}.gallery-title p{font-size:12px;line-height:1.7;color:#afb4aa}.photo{border:0;padding:0;overflow:hidden;cursor:pointer}.photo img{height:100%;object-fit:cover;transition:.75s}.photo:hover img{transform:scale(1.06)}.p1{grid-row:1/3}.p2{grid-column:3}.p3{grid-column:4}.p4{grid-column:2/4}.p5{grid-column:4}
.details-strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border-bottom:1px solid var(--line)}.details-strip div{padding:55px 6vw;border-right:1px solid var(--line)}.details-strip span{font:400 35px "Cormorant Garamond";color:#9b9387}.details-strip h3{font-size:10px;letter-spacing:.2em}.details-strip p{font-size:12px;line-height:1.7;color:#686a62}
.rsvp{height:850px;position:relative;color:white;display:flex;align-items:center;padding:7vw}.rsvp>img{position:absolute;inset:0;height:100%;object-fit:cover}.rsvp-shade{position:absolute;inset:0;background:linear-gradient(90deg,#151815db,#15181551)}.rsvp-copy{position:relative;z-index:2}.rsvp-copy span{font-size:10px;letter-spacing:.25em}.rsvp-copy h2{font:400 clamp(60px,8vw,115px)/.77 "Cormorant Garamond";margin:24px 0 40px}.rsvp-copy button{background:#eee7dc;border:0;padding:18px 38px;letter-spacing:.16em;font-size:9px;cursor:pointer}
.rsvp-modal{position:fixed;inset:0;z-index:700;background:#171a17db;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.35s}.rsvp-modal.open{opacity:1;visibility:visible}.rsvp-box{position:relative;background:#f3ece2;width:min(560px,92vw);padding:55px;color:#242720}.close-rsvp{position:absolute;right:20px;top:15px;background:none;border:0;font-size:35px;cursor:pointer}.rsvp-box>span{font-size:9px;letter-spacing:.25em}.rsvp-box h2{font:400 53px "Cormorant Garamond";margin:10px 0}.rsvp-box label{display:block;font-size:9px;letter-spacing:.15em;margin-top:18px}.rsvp-box input,.rsvp-box select,.rsvp-box textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #8c8b82;padding:11px 0;outline:none}.rsvp-box textarea{height:65px}.rsvp-box form button{margin-top:25px;width:100%;background:#505747;color:white;border:0;padding:16px;letter-spacing:.14em;font-size:9px}.success{display:none;font:400 26px "Cormorant Garamond";margin-top:20px;text-align:center}.rsvp-box.sent form{display:none}.rsvp-box.sent .success{display:block}
.lightbox{position:fixed;inset:0;z-index:800;background:#111e;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s}.lightbox.open{opacity:1;visibility:visible}.lightbox img{max-width:88vw;max-height:86vh;width:auto}.lightbox button{position:absolute;top:18px;right:25px;color:white;background:none;border:0;font-size:40px}
footer{background:#20251f;color:#ddd6c9;padding:50px 6vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em}
.reveal{opacity:0;transform:translateY(35px);transition:.9s}.reveal.visible{opacity:1;transform:none}
@media(max-width:850px){
  nav{padding:25px}.hero-copy{left:25px}.hero h1{font-size:18vw}.hero-meta{flex-direction:column;gap:8px}.explore{left:25px}
  .countdown{gap:8px}.countdown div{min-width:auto}.countdown i{font-size:35px}.story-intro{padding:80px 24px 45px;display:block}.story-intro p{margin-top:30px}
  .story-scroll{height:320vh}.story-track{padding:0 24px}.chapter{width:84vw;height:68vh}
  .ticket{display:block}.ticket>div{border-right:0;border-bottom:1px dashed #c4b8a8}.directions{justify-content:center}
  .venue-feature{grid-template-columns:1fr}.venue-copy{padding:90px 25px}.venue-img{height:500px}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px;padding:70px 15px}.gallery-title{grid-column:1/3}.photo{grid-column:auto!important;grid-row:auto!important;height:250px}.p1{height:520px}
  .details-strip{grid-template-columns:1fr}.details-strip div{border-right:0;border-bottom:1px solid var(--line)}
  .rsvp{height:700px;padding:25px}.rsvp-copy h2{font-size:16vw}footer{display:block;text-align:center}footer span{display:block;margin-top:10px}
  /* Contenedor de las opciones */
.radio-buttons {
  display: flex;
  gap: 12px;
  margin: 10px 0 20px 0;
}

.btn-option {
  flex: 1;
  cursor: pointer;
}

/* Ocultamos el círculo del radio button original */
.btn-option input[type="radio"] {
  display: none;
}

/* Estilo visual del botón */
.btn-option span {
  display: block;
  text-align: center;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

/* Efecto cuando pasan el mouse por encima */
.btn-option:hover span {
  background-color: #f5f5f5;
}

/* Estilo cuando el usuario selecciona un botón (Activo) */
.btn-option input[type="radio"]:checked + span {
  background-color: #000; /* Puedes cambiarlo por el color de tu boda */
  color: #fff;
  border-color: #000;
}

}