/* ==========================================================================
   Dani y Ger — Wedding site
   Brand: Rosetta Estudio
   ========================================================================== */

/* ---- Fonts ---- */
@font-face{
  font-family:'Freight';
  src:url('../fonts/FreightMicro-Book.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Patrick Hand SC';
  src:url('../fonts/PatrickHandSC-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Meddon';
  src:url('../fonts/meddon.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

/* ---- Custom properties (brand palette) ---- */
:root{
  --cream:#FFF1E9;
  --olive:#988C5D;
  --green:#988C5D;
  --sage:#D6DFDC;
  --pink:#F0C5C1;
  --rose:#ECB7B1;
  --burgundy:#88393C;
  --peach:#F7B98A;
  --ink:#5a5048;
  --white:#ffffff;

  --font-body:'Freight', Georgia, serif;
  --font-hand:'Patrick Hand SC', cursive;
  --font-script:'Meddon', cursive;
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
body, h1, h2, h3, h4, p, figure{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

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

/* Skip link (accessibility) */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background:var(--burgundy);
  color:#fff;
  padding:12px 20px;
  z-index:100;
}
.skip-link:focus{
  left:16px;
  top:16px;
}

/* Visible focus states */
a:focus-visible, label:focus-visible, button:focus-visible{
  outline:2px solid var(--burgundy);
  outline-offset:3px;
}

/* ---- Scroll-reveal (subtle fade + slide up) ---- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease, transform .9s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger > .reveal:nth-child(1){ transition-delay:.05s; }
.reveal-stagger > .reveal:nth-child(2){ transition-delay:.15s; }
.reveal-stagger > .reveal:nth-child(3){ transition-delay:.25s; }
.reveal-stagger > .reveal:nth-child(4){ transition-delay:.35s; }

/* Decorative parallax images (offset applied via JS transform) */
[data-parallax]{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  [data-parallax]{ transform:none !important; }
}

/* ---- Shared layout helpers ---- */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}
.wrap.narrow{ max-width:760px; }
.center{ text-align:center; }

.eyebrow{
  font-family:var(--font-body);
  letter-spacing:4px;
  text-transform:uppercase;
  font-size:13px;
  color:var(--burgundy);
  margin-bottom:16px;
}
.eyebrow--green{ color:var(--green); }

.section-title{
  font-family:var(--font-hand);
  font-weight:400;
  font-size:clamp(2.1rem, 4vw, 3.2rem);
  line-height:1.3;
  color:var(--burgundy);
  margin-bottom:28px;
}

.divider{
  width:60px;
  height:2px;
  background:var(--olive);
  margin:0 0 40px;
}
.divider.center{ margin-left:auto; margin-right:auto; }

/* Divider with a small heart glyph in the middle (decorative accent) */
.divider--heart{
  width:auto;
  height:auto;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:40px;
}
.divider--heart::before,
.divider--heart::after{
  content:"";
  width:44px;
  height:1px;
  background:var(--olive);
}
.divider--heart .heart-glyph{
  width:14px;
  height:14px;
  flex-shrink:0;
}
.divider--heart .ribbon-glyph{
  width:20px;
  height:17px;
}
.divider--rsvp{
  margin-top:20px;
  margin-bottom:0;
}
.divider--rsvp::before,
.divider--rsvp::after{
  background:rgba(255,255,255,.35);
}

.section-head{ margin-bottom:56px; }

.btn{
  display:inline-block;
  padding:16px 44px;
  border-radius:30px;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--peach{ background:var(--peach); color:#3a2018; }
.btn--burgundy{ background:var(--burgundy); color:#fff; }
.btn--rose{ background:var(--rose); color:var(--burgundy); }
.btn--cream{ background:var(--cream); color:var(--green); }

/* ==========================================================================
   Header / Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background:url('../images/hero.jpg') center 45% / cover no-repeat;
  background-attachment:fixed;
  overflow:hidden;
}
@media (max-width:800px), (hover:none) and (pointer:coarse){
  /* background-attachment:fixed is unreliable on mobile browsers; disable there */
  .hero{ background-attachment:scroll; }
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,15,10,.42) 0%, rgba(15,15,10,.12) 32%, rgba(15,15,10,.55) 100%);
}

.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding:18px 24px;
  background:rgba(20,16,13,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .25s ease;
}
.nav__list{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 30px;
}
.nav__list a{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  color:#fff;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav__list a:hover{ border-color:#fff; }

/* Mobile menu toggle (hidden on desktop) */
.nav__toggle-input,
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}
.nav__toggle{
  display:none;
  position:absolute;
  top:50%;
  right:24px;
  transform:translateY(-50%);
  z-index:20;
  flex-direction:column;
  justify-content:space-between;
  width:26px;
  height:18px;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  height:2px;
  width:100%;
  background:#fff;
  transition:transform .25s ease, opacity .2s ease;
}
.nav__toggle-input:checked ~ .nav__toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__toggle-input:checked ~ .nav__toggle span:nth-child(2){ opacity:0; }
.nav__toggle-input:checked ~ .nav__toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.hero__content{
  position:relative;
  z-index:2;
  padding:0 20px;
}
.eyebrow--hero{
  font-family:var(--font-hand);
  color:#fff;
  opacity:.95;
  font-size:clamp(32px, 2.2vw, 48px);
  letter-spacing:2px;
  text-transform:none;
  margin-bottom:18px;
}
.hero__heart{
  display:block;
  width:16px;
  height:16px;
  opacity:.85;
  margin:0 auto;
}
.hero__wordmark{
  width:min(560px, 78vw);
  margin:24px auto;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.25));
}
.hero__date{
  font-size:clamp(24px, 2vw, 32px);
  letter-spacing:6px;
  margin-top:22px;
}
.hero__place{
  font-size:clamp(16px, 1.4vw, 20px);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-top:30px;
  opacity:.9;
}

.scroll-cue{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#fff;
  opacity:.85;
  text-decoration:none;
}

/* ==========================================================================
   Intro pull-quote
   ========================================================================== */
.intro{
  text-align:center;
  padding:90px 24px 70px;
}
.intro p{
  max-width:640px;
  margin:0 auto;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  line-height:1.9;
  font-style:italic;
}

/* ==========================================================================
   Nuestra historia
   ========================================================================== */
.historia{
  position:relative;
  background:var(--sage);
  padding:90px 0 100px;
  overflow:hidden;
}
.historia__watermark{
  position:absolute;
  top:210px;
  left:50%;
  width:min(520px, 65vw);
  transform:translateX(-50%);
  opacity:.06;
  pointer-events:none;
  z-index:0;
}
.historia .wrap{ position:relative; z-index:1; }
.historia__text{
  max-width:760px;
  margin:0 auto;
  text-align: center;
  font-size:clamp(1rem, 1.4vw, 1.1rem);
  line-height:2;
  color: var(--burgundy);
}
.historia__text p{ margin-bottom:24px; }
.historia__text p:last-child{ margin-bottom:0; }

.historia__illustration{
  margin-top:50px;
  text-align:center;
}
.historia__illustration img{
  width:100%;
  max-width:420px;
  margin:0 auto;
}

.detalles__illustration{
  margin-top:60px;
  text-align:center;
}
.detalles__illustration img{
  width:100%;
  max-width:780px;
  margin:0 auto;
}

/* ==========================================================================
   Detalles del evento
   ========================================================================== */
.detalles{
  background:var(--cream);
  padding:100px 0;
  border-top:1px solid var(--rose);
}
.detalles__list{
  max-width:640px;
  margin:60px auto 0;
}
.detalles__row{
  padding:26px 0;
  text-align:center;
  border-bottom:1px solid var(--rose);
}
.detalles__row:last-child{ border-bottom:none; }
.detalles__row h3{
  font-family:var(--font-body);
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:10px;
}
.detalles__row p{ font-size:14.5px; line-height:1.7; }
.detalles__row p a{ color:var(--burgundy); text-decoration:underline; text-underline-offset:2px; }
.detalles__row p a:hover{ color:var(--olive); }

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp{
  background:var(--green);
  color:var(--cream);
  text-align:center;
  padding:110px 24px;
}
.rsvp__title{
  font-family:var(--font-hand);
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  font-weight:400;
  color:var(--cream);
}
.rsvp__text{
  max-width:520px;
  margin:22px auto 34px;
  font-size:16px;
  line-height:1.8;
  opacity:.92;
}
.rsvp__deadline{
  font-size:12.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.75;
  margin-top:24px;
}

/* ==========================================================================
   Nuestro regalo
   ========================================================================== */
.regalo{ padding:100px 0; text-align:center; }
.regalo .lead{
  max-width:560px;
  margin:0 auto 64px;
  font-size:16px;
  line-height:1.9;
}
.gift-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.gift-card{
  border:1px solid var(--rose);
  border-radius:4px;
  padding:30px 20px;
}
.gift-card h4{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:14px;
}
.gift-card p{ font-size:13.5px; line-height:1.8; }

.envelope-note{
  font-size:16px;
  margin-top:52px;
  padding-top:14px;
}
.signature{
  margin-top:46px;
  font-size:15px;
  line-height:1.8;
}
.signature .script{
  display:inline-block;
  margin-top:16px;
 font-family:var(--font-hand);
  color:var(--burgundy);
  font-size:2rem;
}

/* ==========================================================================
   Dónde quedarse
   ========================================================================== */
.hospedaje{
  background:var(--white);
  padding:100px 0;
  border-top:1px solid var(--rose);
}
.zonas{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.zona{
  position:relative;
  height:320px;
  border-radius:4px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  color:#fff;
  background-size:cover;
  background-position:center;
  border-top:3px solid var(--green);
}
.zona::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,6,.8) 0%, rgba(10,8,6,.1) 22%, rgba(10,8,6,.15) 50%, rgba(10,8,6,.9) 100%);
}
.zona__heart{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  width:18px;
  height:18px;
  opacity:.8;
}
.zona--recoleta{ background-color:#5c4c34; background-image:linear-gradient(135deg,#8a7550,#5c4c34); }
.zona--palermo-soho{ background-color:#763f38; background-image:linear-gradient(135deg,#a8695f,#763f38); }
.zona--palermo-hollywood{ background-color:#414b3d; background-image:linear-gradient(135deg,#6f7d6a,#414b3d); }

/* Auto-rotating photo carousel (slide transition) */
.zona__carousel{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.zona__track{
  display:flex;
  height:100%;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
}
.zona__slide{
  flex:0 0 auto;
  height:100%;
  display:block;
  background-size:cover;
  background-position:center;
  cursor:pointer;
}
.zona__carousel--2 .zona__track{ width:200%; animation-name:zonaSlide2; animation-duration:16s; }
.zona__carousel--2 .zona__slide{ width:50%; }
.zona__carousel--3 .zona__track{ width:300%; animation-name:zonaSlide3; animation-duration:24s; }
.zona__carousel--3 .zona__slide{ width:33.3334%; }

@keyframes zonaSlide2{
  0%   { transform:translateX(0%); }
  46%  { transform:translateX(0%); }
  50%  { transform:translateX(-50%); }
  96%  { transform:translateX(-50%); }
  100% { transform:translateX(0%); }
}
@keyframes zonaSlide3{
  0%      { transform:translateX(0%); }
  29.33%  { transform:translateX(0%); }
  33.33%  { transform:translateX(-33.333%); }
  62.67%  { transform:translateX(-33.333%); }
  66.67%  { transform:translateX(-66.667%); }
  96%     { transform:translateX(-66.667%); }
  100%    { transform:translateX(0%); }
}

/* Lightbox (pure CSS, checkbox-driven) */
.zona__lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:300;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.lightbox-toggle:checked + .zona__lightbox{ display:flex; }
.zona__lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,16,13,.92);
  cursor:pointer;
}
.zona__lightbox-inner{
  position:relative;
  z-index:1;
  max-width:min(900px, 92vw);
  max-height:88vh;
}
.zona__lightbox-inner img{
  width:100%;
  max-height:88vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.zona__lightbox-close{
  position:absolute;
  top:-38px;
  right:0;
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  font-family:var(--font-body);
}

.zona__tag{
  position:absolute;
  top:18px;
  left:22px;
  right:52px;
  z-index:2;
  font-size:17px;
  letter-spacing:1px;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.zona__desc{
  position:relative;
  z-index:2;
  font-size:12.5px;
  line-height:1.6;
  opacity:.95;
  margin-bottom:16px;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.zona__links{
  position:relative;
  z-index:2;
  display:flex;
  gap:16px;
}
.zona__links a{
  font-size:12px;
  letter-spacing:.5px;
  text-decoration:underline;
  color:#fff;
}

.guia{ margin-top:64px; }
.guia__title{
  font-family:var(--font-hand);
  font-size:clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight:400;
  color:var(--burgundy);
  margin-bottom:10px;
}
.guia__subtitle{
  max-width:520px;
  margin:0 auto;
  font-size:14px;
  line-height:1.7;
}

/* CSS-only tabs (radio driven, no JS) */
.day-tabs{ position:relative; }
.day-tabs input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.day-tabs__labels{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  border-bottom:1px solid var(--rose);
  margin-bottom:36px;
}
.day-tabs__labels label{
  display:block;
  padding:14px 20px 16px;
  cursor:pointer;
  font-size:13px;
  letter-spacing:1px;
  color:#a98a86;
  text-align:center;
  border-bottom:3px solid transparent;
  margin-bottom:-1px;
  transition:color .2s ease, border-color .2s ease;
}
.day-tabs__labels label .num{
  display:block;
  font-family:var(--font-script);
  font-size:22px;
  color:var(--olive);
  line-height:1.4;
}
.day-tabs__panel{
  display:none;
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.day-tabs__panel h4{
  font-family:var(--font-body);
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:14px;
}
.day-tabs__panel p{ font-size:14.5px; line-height:1.9; }

.day-list{
  text-align:left;
  font-size:14.5px;
  line-height:1.75;
}
.day-list li{
  position:relative;
  padding-left:18px;
  margin-bottom:10px;
}
.day-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--olive);
}
.day-list ul{
  margin:8px 0 0;
}
.day-list ul li::before{
  width:5px;
  height:5px;
  background:var(--rose);
}
.day-list a{
  color:var(--burgundy);
  text-decoration:underline;
  text-underline-offset:2px;
}
.day-list a:hover{ color:var(--olive); }

#day1:checked ~ .day-tabs__labels label[for="day1"],
#day2:checked ~ .day-tabs__labels label[for="day2"],
#day3:checked ~ .day-tabs__labels label[for="day3"],
#day4:checked ~ .day-tabs__labels label[for="day4"],
#day5:checked ~ .day-tabs__labels label[for="day5"]{
  color:var(--burgundy);
  border-bottom-color:var(--burgundy);
}
#day1:checked ~ .day-tabs__labels label[for="day1"] .num,
#day2:checked ~ .day-tabs__labels label[for="day2"] .num,
#day3:checked ~ .day-tabs__labels label[for="day3"] .num,
#day4:checked ~ .day-tabs__labels label[for="day4"] .num,
#day5:checked ~ .day-tabs__labels label[for="day5"] .num{
  color:var(--burgundy);
}
#day1:checked ~ .panel1{ display:block; }
#day2:checked ~ .panel2{ display:block; }
#day3:checked ~ .panel3{ display:block; }
#day4:checked ~ .panel4{ display:block; }
#day5:checked ~ .panel5{ display:block; }

/* Keyboard focus for tab labels (radios are visually hidden but stay focusable) */
.day-tabs input:focus-visible ~ .day-tabs__labels{
  outline:2px solid var(--burgundy);
  outline-offset:4px;
}

/* ==========================================================================
   Recomendaciones (para ellas / para ellos)
   ========================================================================== */
.recomendaciones{
  background:var(--sage);
  padding:90px 0;
}
.reco-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:40px;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.reco-card svg{ margin:0 auto; }
.reco-card h4{
  font-family:var(--font-hand);
  font-size:1.6rem;
  font-weight:400;
  color:var(--burgundy);
  margin:16px 0 14px;
}
.reco-card p{ font-size:14px; line-height:1.7; margin-bottom:10px; }
.reco-card p a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.reco-card p a:hover{ color:var(--olive); }
.reco-card .handle{
  display:inline-block;
  margin-top:2px;
  color:var(--burgundy);
  font-size:12.5px;
  letter-spacing:.5px;
  text-decoration:none;
}
.reco-card .handle:hover{ text-decoration:underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--olive);
  color:var(--cream);
  text-align:center;
  padding:70px 24px 40px;
}
.site-footer__heart{
  display:block;
  width:18px;
  height:18px;
  margin:0 auto 18px;
  opacity:.9;
}
.site-footer__wordmark{
  width:190px;
  margin:0 auto;
}
.site-footer p{
  font-size:12px;
  letter-spacing:2px;
  opacity:.6;
  margin-top:24px;
}

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width:900px){
  .zonas{ grid-template-columns:1fr; }
  .gift-cards{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width:700px){
  .nav{ padding:22px 16px; text-align:right; }
  .nav__toggle{ display:flex; }

  .nav__list{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:center;
    gap:20px;
    margin-top:14px;
    padding:28px 20px 34px;
    background:rgba(20,16,13,.94);
    backdrop-filter:blur(4px);
  }
  .nav__list a{ font-size:13px; }

  .nav__toggle-input:checked ~ .nav__list{ display:flex; }
}

@media (max-width:600px){
  .wrap{ padding:0 20px; }

  .intro{ padding:60px 20px 50px; }

  .historia{ padding:70px 0 70px; }
  .detalles, .regalo, .hospedaje{ padding:70px 0; }
  .recomendaciones{ padding:60px 0; }

  .reco-cards{ grid-template-columns:1fr; gap:44px; }

  .rsvp{ padding:70px 20px; }

  .day-tabs__labels label{ padding:10px 12px 12px; font-size:11.5px; }
  .day-tabs__labels label .num{ font-size:18px; }

  .site-footer{ padding:50px 20px 30px; }
}