:root{
  --paper:#fbf6ee;
  --paper-soft:#f6f0e5;
  --cream:#f3eadb;
  --sage:#dbe8d4;
  --sage-soft:#edf4e8;
  --sage-deep:#7f9b74;
  --forest:#4f6b4f;
  --line:#cfd8c7;
  --ink:#354235;
  --clay:#6f8c68;
}
html{scroll-behavior:smooth;}
body{
  background-color:var(--paper);
  background-image:none;
  color:var(--ink);
}
.site-header{
  background:rgba(251,246,238,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(127,155,116,.18);
}
.header-inner{max-width:1240px;padding:16px 28px;}
.brand,.nav a{color:var(--forest)!important;}
.nav{
  gap:24px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.hero{
  min-height:100svh!important;
  min-height:100dvh!important;
  background-position:center center!important;
  background-size:cover!important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(49,66,49,.50) 0%,rgba(49,66,49,.14) 52%,rgba(49,66,49,.26) 100%);
}
.hero::after{
  background:linear-gradient(0deg,rgba(49,66,49,.18),transparent 62%)!important;
}
.hero-content{
  z-index:2;
  max-width:min(560px,42vw);
  margin-left:clamp(32px,8vw,110px);
  padding:120px 0 120px;
  text-align:left;
}
.hero .eyebrow,.hero-date,.hero h1{position:relative;z-index:2;}
.hero h1{
  font-size:clamp(5rem,8.2vw,8.6rem)!important;
  letter-spacing:-.06em;
}
.hero-date{font-size:.9rem;letter-spacing:.22em;}
.scroll-note{z-index:2;bottom:32px;}
.welcome{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-soft) 100%)!important;}
.welcome-grid{
  grid-template-columns:minmax(360px,1.08fr) minmax(320px,.92fr)!important;
  gap:clamp(42px,5vw,84px)!important;
  align-items:center;
}
.welcome-photo {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 34px 34px 110px 34px;
  box-shadow: 0 22px 70px rgba(79,107,79,.16);
}
.welcome-copy{
  max-width:520px;
  padding-right:12px;
}
.welcome-carousel{min-width:0;}
.welcome-carousel-stage.welcome-photo{
  position:relative;
  overflow:hidden;
  filter:none;
  isolation:isolate;
  touch-action:pan-y;
}
.welcome-carousel-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  object-fit:contain;
  object-position:center;
  filter:saturate(.82);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.welcome-carousel-image.is-active{opacity:1;}
.welcome-carousel-control{
  position:absolute;
  z-index:1;
  top:50%;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,250,241,.72);
  border-radius:50%;
  background:rgba(53,66,53,.34);
  color:#fffdf8;
  font:1.25rem/1 var(--serif);
  cursor:pointer;
  opacity:0;
  transform:translateY(-50%);
  transition:opacity .25s ease,background .25s ease,transform .25s ease;
}
.welcome-carousel-control--previous{left:18px;}
.welcome-carousel-control--next{right:18px;}
.welcome-carousel:hover .welcome-carousel-control,
.welcome-carousel:focus-within .welcome-carousel-control{opacity:.9;}
.welcome-carousel-control:hover{background:rgba(53,66,53,.6);}
.welcome-carousel-control:focus-visible{
  opacity:1;
  outline:2px solid #fffdf8;
  outline-offset:3px;
}
.welcome-carousel-count{
  margin:12px 0 0;
  color:var(--forest);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-align:right;
}
@media (hover:none){
  .welcome-carousel-control{opacity:.82;}
}
@media (prefers-reduced-motion:reduce){
  .welcome-carousel-image,.reveal{transition:none!important;}
  .reveal{opacity:1!important;transform:none!important;}
}
.section::before{opacity:.12;}
.countdown,.details,.schedule,#alojamiento,.faq,.gift{
  background-color:var(--flow-base)!important;
  background-image:none!important;
}
.rsvp{
  background-color:var(--paper)!important;
  background-image:linear-gradient(180deg,var(--flow-base) 0%,var(--paper) 28%,var(--paper) 100%)!important;
}
.editorial-divider{
  display:flex;
  align-items:center;
  gap:16px;
  width:min(100% - 40px,420px);
  margin:64px auto 0;
  color:rgba(78,103,77,.62);
}
.editorial-divider::before,.editorial-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:currentColor;
  opacity:.82;
}
.editorial-divider span{
  width:8px;
  height:8px;
  border:1px solid currentColor;
  transform:rotate(45deg);
}
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .82s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.reveal.visible{opacity:1;transform:translateY(0);}
.stay-grid .reveal:nth-child(2){transition-delay:.08s;}
.stay-grid .reveal:nth-child(3){transition-delay:.16s;}
.detail-card,.stay-card,.form-wrap{
  background:rgba(255,251,245,.92)!important;
  border:1px solid rgba(127,155,116,.22)!important;
  box-shadow:0 16px 40px rgba(79,107,79,.08)!important;
}
.icon{
  background:linear-gradient(135deg,#e6efde,#cedec8)!important;
  color:var(--forest)!important;
}
.footer{background:#5a7558!important;color:#f7f3ec!important;}
.footer p{color:#dbe4d8!important;}
@media (min-width: 1025px){
  .site-header{position:sticky;top:0;z-index:50;}
  .container{width:min(1240px,calc(100% - 64px))!important;}
}
@media (max-width: 1100px){
  .hero-content{max-width:min(620px,58vw);margin-left:40px;}
  .welcome-grid{grid-template-columns:1fr!important;}
  .welcome-copy{max-width:680px;padding-right:0;}
}
@media (max-width: 720px){
  .site-header{background:rgba(95,128,95,.96);}
  .brand,.menu,.nav a{color:#fffaf1!important;}
  .hero{min-height:700px;}
  .hero-content{max-width:none;margin:0;padding:118px 22px 112px;text-align:center;}
  .hero h1{font-size:clamp(4rem,19vw,6rem)!important;}
  .scroll-note{bottom:22px;}
  .welcome-photo {
border-radius:28px 28px 82px 28px;}
  .editorial-divider{margin-top:48px;}
  .stay-grid .reveal:nth-child(2),.stay-grid .reveal:nth-child(3){transition-delay:0s;}
}



:root{
  --paper:#fbf6ee;
  --paper-soft:#f6f0e5;
  --cream:#f2e9da;
  --sage:#dbe8d4;
  --sage-soft:#eef4e9;
  --sage-deep:#7d9972;
  --forest:#4e674d;
  --forest-2:#5d795b;
  --line:#ccd6c5;
  --ink:#334134;
  --gold-soft:#d7c2a4;
  --flow-base:#f5f1e8;
}
.site-header{
  position:absolute;
  top:18px;
  left:0;
  right:0;
  height:auto!important;
  background:transparent!important;
  border-bottom:none!important;
  z-index:60;
  pointer-events:none;
}
.header-inner{
  width:min(1220px,calc(100% - 42px))!important;
  margin:auto;
  padding:14px 18px!important;
  border:1px solid rgba(255,250,241,.45);
  background:linear-gradient(180deg,rgba(67,88,66,.58),rgba(67,88,66,.46));
  backdrop-filter:blur(14px);
  box-shadow:0 12px 30px rgba(38,52,38,.14);
  border-radius:999px;
  pointer-events:auto;
}
.brand{
  color:#fff8ef!important;
  font-size:1.45rem!important;
  letter-spacing:.02em;
}
.nav{
  display:flex!important;
  align-items:center;
  gap:10px!important;
  padding:0!important;
  border:none!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
.nav a{
  color:#f9f5ed!important;
  opacity:1!important;
  font-size:.72rem!important;
  letter-spacing:.16em!important;
  padding:10px 14px;
  border-radius:999px;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.nav a:hover{
  background:rgba(255,248,239,.16);
  color:#fffdf8!important;
  transform:translateY(-1px);
}
.menu{
  color:#fff9f1!important;
  border:1px solid rgba(255,250,241,.34)!important;
  background:rgba(255,250,241,.12)!important;
  border-radius:999px!important;
}
.hero{padding-top:120px!important;}
.hero-content{padding-top:150px!important;}
.gift{
  color:var(--ink)!important;
  text-align:left!important;
}
.gift .container{max-width:980px;}
.gift .eyebrow{color:#8f795e!important;text-align:center;}
.gift .title,.gift .lead{text-align:center;color:var(--ink)!important;}
.gift .lead{max-width:640px!important;}
.gift-card{
  margin:34px auto 0;
  background:rgba(255,251,245,.94);
  border:1px solid rgba(125,153,114,.2);
  border-radius:30px;
  box-shadow:0 18px 45px rgba(78,103,77,.10);
  padding:34px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,420px);
  gap:28px;
  align-items:center;
}
.gift-copy{min-width:0;}
.gift-kicker{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--forest-2);
  margin-bottom:14px;
}
.gift-copy h3{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:2rem;
  font-weight:500;
}
.gift-copy p{margin:0;color:#637063;max-width:460px;}
.gift-actions{
  min-width:0;
  width:100%;
  background:linear-gradient(180deg,#fdf9f2 0%,#f4eee2 100%);
  border:1px solid rgba(215,194,164,.55);
  border-radius:24px;
  padding:24px 26px;
  text-align:center;
}
.iban{
  margin:0 0 18px!important;
  font-size:clamp(1.15rem,2.2vw,1.55rem)!important;
  letter-spacing:.08em!important;
  color:var(--forest)!important;
}
.gift-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.gift .btn {
  background: #8da889 !important;
  border-color: #8da889 !important;
  color: #fffdf8 !important;
  box-shadow: none !important;
}

.gift .btn:hover {
  background: #7d9979 !important;
  border-color: #7d9979 !important;
  color: #fffdf8 !important;
}
@media (max-width: 920px){
  .site-header{top:10px;}
  .header-inner{
    width:min(100% - 20px, calc(100% - 20px))!important;
    border-radius:26px;
    padding:12px 14px!important;
  }
  .nav{
    display:none!important;
  }
  .nav.open{
    display:flex!important;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:6px!important;
    padding:14px!important;
    border-radius:22px;
    background:rgba(76,103,75,.96)!important;
    box-shadow:0 16px 30px rgba(38,52,38,.16);
  }
  .nav a{padding:12px 14px;}
  .hero{padding-top:100px!important;}
  .gift-card,.gift-card + .gift-card{grid-template-columns:1fr; padding:26px; border-radius:24px;}
  .gift-actions{min-width:0;width:100%;}
}

.gift-toggle{
  margin:34px auto 0;
  max-width:920px;
}
.gift-toggle summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto;
  padding:15px 24px;
  border-radius:999px;
  border:1px solid rgba(125,153,114,.34);
  background:rgba(255,251,245,.92);
  color:var(--forest);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 10px 28px rgba(78,103,77,.08);
}
.gift-toggle summary::-webkit-details-marker{display:none;}
.gift-toggle summary::after{
  content:"+";
  font-size:1.2rem;
  line-height:1;
  font-weight:400;
}
.gift-toggle[open] summary::after{content:"–";}
.gift-toggle[open] summary{margin-bottom:22px;}
.gift-card{margin-top:0!important;}
.gift-card + .gift-card {
  margin-top: 16px !important;
  grid-template-columns:minmax(0,1fr) minmax(220px,420px);
}

.gift-card + .gift-card .gift-actions {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}
@media (max-width:980px){
  .gift-card,.gift-card + .gift-card{grid-template-columns:1fr;}
  .gift-actions{min-width:0;width:100%;}
}
@media (max-width:920px){
  .gift-toggle summary{width:100%;}
}

@media (max-width:520px){
  .gift-card,.gift-card + .gift-card{padding:20px;gap:20px;}
  .gift-actions{padding:20px 16px;}
  .iban{overflow-wrap:anywhere;word-break:break-word;}
}

.gift .container{display:flex;flex-direction:column;align-items:center;}
.gift-toggle{width:100%;display:flex;flex-direction:column;align-items:center;}
.gift-toggle summary{margin-left:auto!important;margin-right:auto!important;}
.gift-toggle[open]{align-items:center;}
.gift-card{width:min(920px,100%);}

.event-icon{
  overflow:hidden;
}
.event-icon svg{
  display:block!important;
  margin:auto!important;
}
.event-icon svg path,
.event-icon svg circle,
.event-icon svg line,
.event-icon svg polyline{
  vector-effect:non-scaling-stroke;
}
/* Horizontal programme: the generated markup places the icon before the time.
   Keep all three parts in the same flex item instead of assigning grid areas. */
.timeline{
  max-width:1180px!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding-top:44px!important;
}
.timeline::before{
  top:108px!important;
  right:4%;
  bottom:auto!important;
  left:4%!important;
  width:auto!important;
  height:2px!important;
  background:linear-gradient(90deg,rgba(127,155,116,.72),rgba(127,155,116,.45))!important;
  border-radius:50%!important;
  transform:rotate(-.3deg)!important;
}
.event{
  display:flex!important;
  flex:1;
  min-width:0;
  min-height:250px;
  flex-direction:column;
  align-items:center!important;
  gap:0!important;
  padding:0 12px 6px!important;
  text-align:center!important;
}
.event::before{
  display:block!important;
  order:1;
  width:72px!important;
  height:72px!important;
  margin:0 auto;
  background:linear-gradient(180deg,#fffdf8 0%,#f1eadf 100%)!important;
  border:2px solid rgba(127,155,116,.72)!important;
  box-shadow:0 8px 18px rgba(79,107,79,.10)!important;
}
.event-icon{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  width:72px!important;
  height:72px!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  color:var(--forest)!important;
  pointer-events:none;
}
.event-icon svg{width:36px!important;height:36px!important;}
.time{order:2!important;padding-top:26px!important;text-align:center!important;}
.event-body{order:3!important;margin:0!important;padding:0 8px!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.event h3{margin:0 0 4px!important;font-size:1.18rem!important;}
.event p{margin:0!important;max-width:190px!important;font-size:.86rem!important;}

@media (max-width:720px){
  .timeline{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:34px 10px!important;padding-top:26px!important;}
  .timeline::before{display:none!important;}
  .event{min-height:220px;padding:0 2px!important;}
  .event::before{width:58px!important;height:58px!important;}
  .event-icon{top:0!important;width:58px!important;height:58px!important;}
  .event-icon svg{width:30px!important;height:30px!important;}
  .time{padding-top:18px!important;font-size:1.05rem!important;}
  .event p{max-width:150px!important;font-size:.78rem!important;}
}

/* ============================================
   Form Wizard Styles — Multi-step RSVP Form
   ============================================ */

/* Step Indicator */
.step-indicator{
  text-align:center;
  font-size:.82rem;
  color:var(--forest);
  margin-bottom:10px;
  letter-spacing:.04em;
}
.step-current{font-weight:600;}

/* Progress Bar */
.progress-bar{
  height:3px;
  background:rgba(127,155,116,.18);
  border-radius:2px;
  margin-bottom:24px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:14.28%; /* 1/7 */
  background:linear-gradient(90deg,var(--sage-deep),var(--forest));
  border-radius:2px;
  transition:width .35s ease;
}

/* Form Steps */
.form-step{
  display:none;
  border:none;
  padding:0;
  margin:0;
  animation:fadeInStep .3s ease;
}
.form-step.active{
  display:block;
}
@keyframes fadeInStep{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Step Title */
.step-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.4rem,3vw,2rem);
  color:var(--ink);
  margin:0 0 8px;
  line-height:1.2;
}
.step-info{
  font-size:.9rem;
  color:#5f6d5f;
  margin:0 0 20px;
  line-height:1.5;
}

/* Field Styles */
.form-step .field{
  margin-bottom:20px;
}
.form-step label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
  letter-spacing:.03em;
}

/* Text Inputs & Selects */
.form-step input[type="text"],
.form-step input[type="number"],
.form-step select,
.form-step textarea{
  width:100%;
  padding:12px 14px;
  font-size:.95rem;
  font-family:'DM Sans',Arial,sans-serif;
  color:var(--ink);
  background:#fffdf8;
  border:1px solid rgba(127,155,116,.3);
  border-radius:8px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.form-step input:focus,
.form-step select:focus,
.form-step textarea:focus{
  outline:none;
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(79,107,79,.15);
}

/* Radio Group */
.radio-group label:first-child{
  margin-bottom:12px;
}
.radio-options{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.radio-option{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:10px 16px;
  /*border:1px solid rgba(127,155,116,.3);*/
  border-radius:8px;
  transition:border-color .2s ease,background .2s ease;
}
.radio-option:hover{
  border-color:var(--forest);
}
.radio-option input[type="radio"]{
  width:18px;
  height:18px;
  accent-color:var(--forest);
}
.radio-label{
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
}

/* Conditional Fields */
.conditional{
  display:none;
  animation:fadeInField .25s ease;
}
.conditional.visible{
  display:block;
}
@keyframes fadeInField{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Field Error Messages */
.field-error{
  display:block;
  font-size:.78rem;
  color:#b55a4f;
  margin-top:4px;
  min-height:16px;
}

/* Step Navigation */
.step-nav{
  display:flex;
  gap:12px;
  margin-top:28px;
  flex-wrap:wrap;
}
.step-nav .btn{
  flex:1;
  min-width:140px;
}
.prev-step{
  order:1;
}
.next-step,
.submit-btn{
  order:2;
}

/* Confirmation Screen */
.confirmation-screen{
  display:none;
  text-align:center;
  padding:32px 16px;
  animation:fadeInStep .4s ease;
}
.confirmation-screen.visible{
  display:block;
}
.confirmation-icon{
  width:56px;
  height:56px;
  margin:0 auto 18px;
  background:linear-gradient(135deg,var(--sage-deep),var(--forest));
  color:#fffdf8;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  font-weight:700;
}
.confirmation-screen h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.5rem,4vw,2.2rem);
  color:var(--ink);
  margin-bottom:10px;
}
.confirmation-screen p{
  font-size:1rem;
  color:#5f6d5f;
  max-width:420px;
  margin:0 auto 22px;
  line-height:1.55;
}
.hero-content {
  align-self: center;
  padding: 0;
}

.hero .eyebrow {
  font-size: 1.31rem;
  letter-spacing: .22em;
}

.hero h1 {
  font-size: clamp(6.5rem, 11.25vw, 11.75rem) !important;
  line-height: .92;
}

.hero-date {
  font-size: 1.44rem;
  letter-spacing: .2em;
  margin-top: 30px;
}
/* Responsive Adjustments */
@media (max-width:720px){
  .form-step{
    padding:0 8px;
  }
  .radio-options{
    flex-direction:column;
    gap:10px;
  }
  .radio-option{
    width:100%;
    justify-content:flex-start;
  }
  .step-nav{
    flex-direction:column;
  }
  .step-nav .btn{
    min-width:auto;
    width:100%;
  }

}