/* =====================================================
   VARIABLES — PALETA OLIVO & TERRACOTA
===================================================== */

:root{
  --bg:#f6f4ee;               /* fondo crema cálido */
  --ink:#2f3a2f;              /* verde olivo oscuro */

  --olive:#6b7d5b;            /* verde olivo */
  --olive-dark:#4f5f43;       /* olivo profundo */

  --terracotta:#d39a3a;       /* amarillo terracota */
  --terracotta-soft:#e6c67a;  /* terracota claro */

  --white:#fffdf8;
  --card:#ffffff;
}

/* =====================================================
   RESET & BASE
===================================================== */

*{ box-sizing:border-box }

html, body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
}

body{
  font-family:Inter, system-ui, sans-serif;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  position:relative;
  overflow-x:hidden;
}

/* =====================================================
   HERO
===================================================== */

.hero{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.2rem;
  text-align:center;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      rgba(237,240,146,.25),
      rgba(237,240,146,.70)
    );
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-image:url("img/backg.png");
}

@media (max-width:768px){
  .hero::before{
    background-image:
      linear-gradient(
        rgba(237,240,146,.25),
        rgba(237,240,146,.70)
      ),
      url("img/backg-m.png");
  }
}


.hero-content{
  position:relative;
  z-index:1;
  max-width:420px;
}

.hero-logo{
  width:240px;
  margin-bottom:1.2rem;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

.badge{
  display:inline-block;
  background:var(--terracotta);
  color:#fff;
  padding:.35rem .9rem;
  border-radius:999px;
  font-size:.8rem;
  margin-bottom:1rem;
}

h1{
  font-family:"Playfair Display", serif;
  font-size:2.4rem;
  color:#fff;
  margin:.3rem 0;
}

.date{
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--terracotta-soft);
}


/* =====================================================
   HERO FOTO CIRCULAR
===================================================== */

.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
}

/* Marco circular */
.hero-photo-wrapper{
  width:160px;
  height:160px;
  margin:0 auto 1.5rem;
  padding:3px;
  border-radius:50%;
  background:var(--olive);
  box-shadow:
    0 15px 40px rgba(0,0,0,.15),
    0 5px 15px rgba(0,0,0,.08);
  animation:floatSoft 6s ease-in-out infinite;
}

/* Imagen */
.hero-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 10%;
  border-radius:50%;
  transition:filter .6s ease, transform .6s ease;
}

/* Ajuste monograma */
.hero-logo{
  width:240px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

/* Desktop */
@media(min-width:768px){
  .hero-photo-wrapper{
    width:170px;
    height:170px;
  }

  .hero-logo{
    width:270px;
  }
}



/* =====================================================
   LAYOUT
===================================================== */

.container{
  font-family: Italianno, sans-serif;
  font-size: 2rem;
  max-width:420px;
  margin:auto;
  padding:1.5rem 1rem;
}

/* =====================================================
   LOVE MESSAGE — MANUSCRITA ELEGANTE
===================================================== */

.love-message{
  padding:3.5rem 0;
  text-align:center;
}

.love-message p{
  font-family:"Italianno", cursive;
  font-style:italic;
  font-weight:500;
  font-size:1.7rem;
  line-height:1;
  max-width:700px;
  margin:auto;
  color:var(--olive-dark);
  letter-spacing:.02em;
  position:relative;
}

/* Comillas decorativas sutiles */
.love-message p::before,
.love-message p::after{
  font-family:"Playfair Display", serif;
  font-size:3rem;
  color:var(--terracotta-soft);
  opacity:.25;
  position:absolute;
}

.love-message p::before{
  content:"“";
  left:-25px;
  top:-25px;
}

.love-message p::after{
  content:"”";
  right:-25px;
  bottom:-25px;
}

/* Desktop */
@media(min-width:768px){
  .love-message{
    padding:4rem 0;
  }

  .love-message p{
    font-size:2.5rem;
  }
}



/* =====================================================
   MUSIC PLAYER
===================================================== */

.player-card{
  background:var(--card);
  border-radius:22px;
  padding:1.3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  box-shadow:0 18px 40px rgba(107,125,91,.25);
}

.icon-btn{
  background:none;
  border:none;
  font-size:1.2rem;
  cursor:pointer;
  opacity:.6;
  color:var(--olive-dark);
}

.icon-btn:active{ opacity:1 }

.play-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--olive-dark);
  color:#fff;
  border:none;
  font-size:1.4rem;
  cursor:pointer;
}

.play-btn:hover{
  background:var(--olive);
}

audio{ display:none }

/* =====================================================
   LOCATION SECTION (IMAGEN + DÍA/NOCHE + MAPA)
===================================================== */

.location-section{
  padding:3.5rem 1rem;
}

.location-card{
  max-width:950px;
  margin:auto;
  background:var(--white);
  border-radius:30px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 22px 45px rgba(107,125,91,.25);
}

/* =====================================================
   LOCATION CARD REVERSE — COMPLETO
===================================================== */

/* Base móvil */
.location-card.reverse{
  flex-direction:column;
  margin-top:3rem; /* separación entre cards */
}

/* Info en móvil */
.location-card.reverse .location-info{
  order:1;
  padding:2.4rem 1.8rem 2rem;
  text-align:center;
}

/* Imagen en móvil */
.location-card.reverse .location-image{
  order:2;
  height:240px;
}

/* =====================
   DESKTOP
===================== */

@media(min-width:768px){

  .location-card.reverse{
    flex-direction:row;
  }

  .location-card.reverse .location-info{
    order:1;
    width:50%;
    text-align:left;
    padding:3.2rem;
  }

  .location-card.reverse .location-image{
    order:2;
    width:50%;
    height:auto;
  }
}


/* IMAGEN */
.location-image{
  position:relative;
  height:260px;
  overflow:hidden;
}

.location-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity 1.8s ease, transform 14s ease;
}

/* Overlay cálido */
.location-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(107,125,91,.15),
    rgba(107,125,91,.15)
  );
  pointer-events:none;
}

/* Día / Noche */
.location-image .day{
  animation:dayNight 16s infinite;
}

.location-image .night{
  animation:nightDay 16s infinite;
}

@keyframes dayNight{
  0%,45%{opacity:1}
  55%,100%{opacity:0}
}

@keyframes nightDay{
  0%,45%{opacity:0}
  55%,100%{opacity:1}
}

/* Zoom automático */
.location-image img{
  animation:zoomSlow 20s ease-in-out infinite alternate;
}

@keyframes zoomSlow{
  from{ transform:scale(1) }
  to{ transform:scale(1.12) }
}

/* INFO */
.location-info{
  padding:2.4rem 2rem 2.6rem;
  text-align:center;
}

.location-info h2{
  font-family:"Playfair Display", serif;
  font-size:2rem;
  margin:0 0 1.2rem;
}

.location-info h3{
  font-family:"Playfair Display", serif;
  font-weight: lighter;
  margin:.2rem 0 .8rem;
  font-weight:500;
}

.place{
  font-family: "Italianno", serif;
  font-size: 1.5rem;
  line-height:1.6;
  margin-bottom:1.6rem;
}

.map-btn{
  display:inline-block;
  padding:.75rem 1.6rem;
  border-radius:999px;
  background:var(--olive-dark);
  color:#fff;
  text-decoration:none;
  font-size:.85rem;
}

.map-btn:hover{
  background:var(--olive);
}

/* MAP */
.map-embed{
  max-width:950px;
  margin:2.5rem auto 0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 35px rgba(107,125,91,.25);
}

.map-embed iframe{
  width:100%;
  height:320px;
  border:0;
}

/* =====================================================
   ITINERARY HERO (IMAGEN + TIMELINE)
===================================================== */

.itinerary-hero{
  position:relative;
  padding:4rem 0 5rem;
  background:
    linear-gradient(
      rgba(47,58,47,.65),
      rgba(47,58,47,.65)
    ),
    url("https://images.unsplash.com/photo-1519741497674-611481863552?q=80&w=1600&auto=format&fit=crop")
    center/cover no-repeat;
  color:#fff;
}

.itinerary-hero h2{
  font-family:"Playfair Display", serif;
  text-align:center;
  font-size:2.2rem;
  margin-bottom:3rem;
}

.itinerary-timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2.2rem;
  max-width:420px;
  margin:auto;
}

.itinerary-timeline::before{
  content:"";
  position:absolute;
  left:18px;
  top:0;
  bottom:0;
  width:2px;
  background:var(--terracotta-soft);
}

.event{
  position:relative;
  padding-left:3rem;
}

.dot{
  position:absolute;
  left:10px;
  top:.3rem;
  width:16px;
  height:16px;
  background:var(--olive);
  border-radius:50%;
}

.time{
  display:block;
  font-weight:600;
  font-size:.9rem;
  margin-bottom:.2rem;
  color:var(--terracotta-soft);
}

.event p{
  margin:0;
  font-size:1rem;
}

/* =====================================================
   FOOTER ELEGANTE CON IMAGEN SUAVE
===================================================== */

.main-footer{
  position:relative;
  padding:2rem 1rem; 
  min-height:500px;  
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}


/* Imagen decorativa */
.footer-bg{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
  z-index:0;
}

.footer-bg img{
  width:60%;
  max-width:80%;
}

/* Contenido encima */
.footer-content{
  position:relative;
  z-index:1;
}

.footer-content p{
  font-family:"Playfair Display", serif;
  font-size:1rem;
  letter-spacing:.1em;
  color:var(--olive-dark);
}


/* =====================================================
   DESKTOP
===================================================== */

@media(min-width:768px){

  h1{ font-size:3rem }

  .hero-logo{ width:270px }

  .container{ max-width:600px }

  .location-card{
    flex-direction:row;
  }

  .location-image{
    width:50%;
    height:auto;
  }

  .location-info{
    width:50%;
    text-align:left;
    padding:3.2rem 3.2rem;
  }

  .map-embed iframe{
    height:380px;
  }

  .itinerary-timeline{
    max-width:700px;
  }

  .itinerary-timeline::before{
    left:50%;
    transform:translateX(-50%);
  }

  .event{
    width:50%;
    padding:0 3rem;
  }

  .event:nth-child(odd){
    align-self:flex-start;
    text-align:right;
  }

  .event:nth-child(even){
    align-self:flex-end;
    text-align:left;
  }

  .event:nth-child(odd) .dot{
    left:auto;
    right:-8px;
  }

  .event:nth-child(even) .dot{
    left:-8px;
  }
}

/* =====================================================
   GALLERY
===================================================== */

.gallery-section{
  padding:3.5rem 0;
}

.gallery-section h2{
  font-family:"Playfair Display", serif;
  font-size:2rem;
  text-align:center;
  margin-bottom:2rem;
}

/* GRID */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.8rem;
}

.gallery-grid img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:16px;
  cursor:pointer;
  transition:transform .35s ease, box-shadow .35s ease;
}

.gallery-grid img:hover{
  transform:scale(1.03);
  box-shadow:0 12px 30px rgba(107,125,91,.35);
}

/* =====================================================
   MODAL
===================================================== */

.gallery-modal{
  position:fixed;
  inset:0;
  background:rgba(47,58,47,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
  z-index:999;
}

.gallery-modal.active{
  opacity:1;
  pointer-events:auto;
}

.modal-img{
  max-width:90%;
  max-height:85vh;
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  animation:fadeZoom .45s ease;
}

/* Close */
.close-modal{
  position:absolute;
  top:24px;
  right:28px;
  font-size:2.4rem;
  color:var(--terracotta-soft);
  cursor:pointer;
}

/* Animación */
@keyframes fadeZoom{
  from{
    opacity:0;
    transform:scale(.9);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* =====================================================
   DESKTOP
===================================================== */

@media(min-width:768px){
  .gallery-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
  }

  .gallery-grid img{
    height:220px;
  }
}

/* =====================================================
   GALERÍA MOSAICO EDITORIAL (SIN EMPALMES)
===================================================== */

.gallery-section{
  padding:3.5rem 0 4.5rem;
}

.gallery-section h2{
  font-family:"Playfair Display", serif;
  font-size:2rem;
  text-align:center;
  margin-bottom:2.5rem;
}

/* GRID BASE */
.gallery-mosaic{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
  grid-auto-flow:dense;
}

/* IMÁGENES */
.gallery-mosaic img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:22px;
  display:block;
  cursor:pointer;
  box-shadow:0 16px 35px rgba(107,125,91,.25);
  transition:
    transform .6s ease,
    box-shadow .6s ease;
}

/* ASPECT RATIOS — mezcla real */
.gallery-mosaic img:nth-child(1){ aspect-ratio:4 / 5; }
.gallery-mosaic img:nth-child(2){ aspect-ratio:3 / 2; }
.gallery-mosaic img:nth-child(3){ aspect-ratio:1 / 1; }
.gallery-mosaic img:nth-child(4){ aspect-ratio:2 / 3; }
.gallery-mosaic img:nth-child(5){ aspect-ratio:5 / 4; }
.gallery-mosaic img:nth-child(6){ aspect-ratio:16 / 9; }
.gallery-mosaic img:nth-child(7){ aspect-ratio:3 / 4; }
.gallery-mosaic img:nth-child(8){ aspect-ratio:4 / 3; }

/* FLOTACIÓN SUTIL (SEGURA) */
.gallery-mosaic img:nth-child(odd){
  transform:translateX(-6px);
}

.gallery-mosaic img:nth-child(even){
  transform:translateX(6px);
}

/* HOVER */
.gallery-mosaic img:hover{
  transform:scale(1.05) translateY(-6px);
  box-shadow:0 26px 50px rgba(107,125,91,.35);
}

/* =====================
   DESKTOP
===================== */

@media(min-width:768px){
  .gallery-mosaic{
    grid-template-columns:repeat(3, 1fr);
    gap:1.3rem;
  }

  /* Variaciones editoriales */
  .gallery-mosaic img:nth-child(1){
    grid-column:span 2;
    aspect-ratio:3 / 2;
  }

  .gallery-mosaic img:nth-child(4){
    grid-row:span 2;
  }

  .gallery-mosaic img:nth-child(6){
    grid-column:span 2;
  }

  .gallery-mosaic img:nth-child(odd){
    transform:translateX(-10px);
  }

  .gallery-mosaic img:nth-child(even){
    transform:translateX(10px);
  }
}

/* =====================================================
   MODAL IMAGE CROSSFADE
===================================================== */

.modal-img{
  opacity:1;
  transition:opacity .35s ease;
}

.modal-img.fade-out{
  opacity:0;
}

/* =====================================================
   SCROLL REVEAL EFFECT
===================================================== */

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* =====================================================
   NUESTROS PADRES — VERSIÓN AMPLIADA
===================================================== */

.parents-section{
  padding:3rem .5rem; /* más aire arriba y abajo */
  text-align:center;
  background:linear-gradient(
    rgba(237,240,146,.15),
    rgba(237,240,146,.05)
  );
}

/* Título más protagonista */
.section-title{
  font-family:"Italianno", serif;
  font-weight:300;              /* más fino visualmente */
  font-size:clamp(1.1rem, 3vw, 1.6rem);
  line-height:1;              /* más aire entre líneas */
  max-width:720px;
  margin:0 auto 3.5rem;
  color:rgba(47,58,47,.75);     /* más suave que olive-dark */
  letter-spacing:.04em;
}


/* Contenedor */
.parents-grid{
  display:flex;
  flex-direction:column;
  gap:5rem; /* más espacio */
  align-items:center;
}

/* Texto más grande */
.parents-side p{
  font-family:"Italianno", serif;
  font-size:1.9rem; /* antes 1.4rem */
  line-height:1.9;
  color:var(--olive-dark);
}

/* Divider más elegante */
.divider{
  width:80px;
  height:2px;
  background:var(--terracotta);
  opacity:.5;
}

@media(min-width:768px){

  .parents-section{
    padding:5rem 1rem;
  }

  .section-title{
    font-size:3.2rem;
  }

  .parents-grid{
    flex-direction:row;
    justify-content:center;
    gap:6rem;
  }

  .parents-side p{
    font-size:2.1rem;
  }

  .divider{
    width:2px;
    height:120px;
  }
}

/* =====================================================
   NOMBRES PADRES — RESPONSIVE PULIDO
===================================================== */

.parent-name{
  font-family:"Italianno", serif;
  font-size:clamp(1.5rem, 4vw, 2.1rem);
  line-height:1.9;
  color:var(--olive-dark);
  white-space:nowrap;          /* evita que se parta */
  overflow:hidden;             /* seguridad */
  text-overflow:ellipsis;      /* por si fuera extremadamente largo */
}


/* =====================================================
   FOTO FAVORITA — FLOATING FRAME
===================================================== */

.favorite-photo-section{
  text-align:center;
}

/* Marco flotante */
.favorite-photo-wrapper{
  position:relative;
  display:inline-block;
  padding:18px;
  border-radius:28px;
  background:var(--white);
  box-shadow:
    0 20px 50px rgba(107,125,91,.25),
    0 5px 15px rgba(0,0,0,.05);
  transition:transform .6s ease, box-shadow .6s ease;
}

/* Imagen */
.favorite-photo-wrapper img{
  display:block;
  max-width:100%;
  width:420px;
  border-radius:20px;
}

/* Efecto flotante constante */
.favorite-photo-wrapper{
  animation:floatSoft 6s ease-in-out infinite;
}

@keyframes floatSoft{
  0%   { transform:translateY(0px); }
  50%  { transform:translateY(-12px); }
  100% { transform:translateY(0px); }
}

/* Hover más elegante */
.favorite-photo-wrapper:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:
    0 30px 70px rgba(107,125,91,.35),
    0 10px 20px rgba(0,0,0,.08);
}

/* Desktop ajuste */
@media(min-width:768px){
  .favorite-photo-wrapper img{
    width:520px;
  }
}

/* =====================================================
   FECHA & COUNTDOWN
===================================================== */

.date-section{
  padding:4rem 1rem;
  text-align:center;
}

/* Fecha elegante */
.wedding-date{
  font-family:"Italianno", serif;
  font-weight:400;
  font-size:clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing:.15em;
  color:var(--olive-dark);
  margin-bottom:3rem;
}

/* Countdown */
.countdown{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.5rem;
}

/* Círculos */
.time-box{
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:
    0 15px 35px rgba(107,125,91,.25),
    0 4px 10px rgba(0,0,0,.05);
  animation:floatSoft 6s ease-in-out infinite;
}

.time-box span{
  font-family:"Playfair Display", serif;
  font-size:1.8rem;
  font-weight:500;
  color:var(--olive-dark);
}

.time-box small{
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--terracotta);
  margin-top:.3rem;
}

@media(max-width:480px){

  .countdown{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    justify-items:center;
    gap:1rem;
  }

  .time-box{
    width:85px;
    height:85px;   /* MISMO valor que width */
  }

  .time-box span{
    font-size:1.4rem;
  }
}


/* =====================================================
   DRESS CODE — MINIMAL
===================================================== */

.dress-code{
  padding:4rem 1rem;
  text-align:center;
}

.dress-heading{
  font-family:"Italianno", serif;
  font-weight:400;
  font-size:clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing:.15em;
  color:var(--olive-dark);
  margin-bottom:3rem;
  text-transform:uppercase;
}

.dress-image img{
  width:85%;
  max-width:100%;
  border-radius:30px;

  border:4px solid rgba(107,125,91,.35); /* olivo suave */
  
  filter:drop-shadow(0 12px 25px rgba(0,0,0,.18));
  opacity:.95;

  transition:
    transform .6s ease,
    opacity .6s ease,
    box-shadow .6s ease;
}



/* Hover elegante */
.dress-image img:hover{
  transform:scale(1.05);
  opacity:1;
}

/* Mobile ajuste */
@media(max-width:480px){
  .dress-image img{
    width:80%px;
  }
}


/* =====================================================
   CLIMA LOCAL
===================================================== */

.weather-section{
  padding:4rem 1rem;
  text-align:center;
  background:linear-gradient(
    rgba(237,240,146,.08),
    rgba(237,240,146,.02)
  );
}

.weather-icon{
  margin-bottom:1.2rem;
}

.weather-icon img{
  width:65px;
  opacity:.85;
}

.weather-title{
  font-family:"Italianno", serif;
  font-weight:400;
  font-size:clamp(1.4rem, 4vw, 2rem);
  margin-bottom:1.5rem;
  color:var(--olive-dark);
  letter-spacing:.06em;
}

.weather-description{
  font-family: Italianno, serif;
  max-width:600px;
  margin:0 auto 3rem;
  font-size:2rem;
  line-height:1.8;
  color:rgba(47,58,47,.75);
}

/* Cajas */
.weather-info{
  display:flex;
  flex-direction:column;
  gap:2rem;
  align-items:center;
}

.weather-box{
  width:150px;
  height:150px;
  border-radius:50%;
  background:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:
    0 15px 35px rgba(107,125,91,.25),
    0 4px 10px rgba(0,0,0,.05);
}

.weather-box span{
  font-family:"Playfair Display", serif;
  font-size:1rem;
  font-weight:500;
  color:var(--olive-dark);
}

.weather-box small{
  font-family: "Playfair Display, serif;";
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--terracotta);
  margin-top:.5rem;
  text-align:center;
  padding:0 .5rem;
}

/* Desktop */
@media(min-width:768px){

  .weather-info{
    flex-direction:row;
    justify-content:center;
    gap:3rem;
  }

  .weather-box{
    width:160px;
    height:160px;
  }
}

/* Animación suave de actualización */
.weather-box span{
  transition:opacity .4s ease, transform .4s ease;
}

.weather-box span.update{
  opacity:0;
  transform:translateY(8px);
}

/* =====================================================
   RSVP WHATSAPP
===================================================== */

.rsvp-section{
  padding:2rem 1rem;
  text-align:center;
}

.rsvp-title{
  font-family:"Italianno", serif;
  font-weight:400;
  font-size:clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing:.08em;
  color:var(--olive-dark);
  margin-bottom:1.5rem;
}

.rsvp-text{
  max-width:500px;
  margin:0 auto 3rem;
  font-size:1rem;
  line-height:1.8;
  color:rgba(47,58,47,.75);
}

/* Botón */
.whatsapp-btn{
  font-family: "Playfair Display, serif;";
  font-size: 1rem;
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:1rem 2rem;
  border-radius:999px;
  background:olive;
  color:#fff;
  text-decoration:none;
  font-weight:500;
  letter-spacing:.05em;
  transition:
    transform .4s ease,
    box-shadow .4s ease,
    background .4s ease;
}

.whatsapp-icon{
  font-size:1.2rem;
}

/* Hover elegante */
.whatsapp-btn:hover{
  transform:translateY(-4px);
  box-shadow:olive;
  background:olive-dark;
}

/* Mobile ajuste */
@media(max-width:480px){
  .whatsapp-btn{
    padding:.9rem 1.6rem;
  }
}

/* =====================================================
   NOSOTROS — COMPOSICIÓN DOBLE
===================================================== */

.us-section{
  padding:4rem 1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
}

/* Imagen principal */
.us-image-wrapper{
  position:relative;
  width:100%;
  max-width:1024px;
  aspect-ratio:1024 / 585;
  overflow:hidden;
  border-radius:5px;
  box-shadow:
    0 25px 60px rgba(107,125,91,.25),
    0 8px 20px rgba(0,0,0,.08);
}

/* Imagen */
.us-image-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Overlay */
.us-overlay{
  position:absolute;
  inset:0;
}

/* Texto */
.us-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  font-family:"Italianno", cursive;
  font-size:clamp(2rem, 5vw, 3.5rem);
  line-height:1.2;
  color:olivedrab;
  letter-spacing:.02em;
  padding:1rem;
}

/* Imagen secundaria debajo */
.us-section .favorite-photo-wrapper{
  width:100%;
  max-width:520px;
}

/* Responsive */
@media(max-width:600px){

  .us-section{
    padding:4rem 1rem;
    gap:3rem;
  }

  .us-text{
    font-size:clamp(1.8rem, 7vw, 2.5rem);
  }
}

/* =====================================================
   MESA DE REGALOS
===================================================== */

.gift-section{
  position:relative;
  padding:5rem 1.5rem;
  text-align:center;
  overflow:hidden;
}

/* Imagen fondo con opacidad */
.gift-bg{
  position:absolute;
  inset:0;
  background:url("img/regalo-bg.jpg") center/cover no-repeat;
  z-index:0;
}

/* Contenido */
.gift-content{
  position:relative;
  z-index:1;
  max-width:700px;
  margin:auto;
}

/* Icono grande */
.gift-icon{
  font-size:4rem;
  margin-bottom:1.5rem;
}

/* Texto principal */
 .gift-main{
  font-family:"Italianno", cursive;
  font-size:2.2rem;
  margin-bottom:1.5rem;
  color:var(--olive-dark);
}

/* Datos bancarios */
.gift-bank{
  margin:2rem 0;
  font-size:1rem;
  line-height:1.8;
}

/* Frase final */
.gift-blessing{
  margin-top:2rem;
  font-family:"Italianno", cursive;
  font-size:2rem;
  color:var(--olive-dark);
}

.gift-icon{
  color:var(--olive-dark);
  margin-bottom:1.5rem;
}

.gift-icon svg{
  display:block;
  margin:auto;
}