:root{
  /* ==============================
     FLORENCIA & RUBEN
     PALETA OLIVA + CREMA + CHAMPAGNE
  ============================== */

  --cream:#FAF7EF;
  --paper:#FFFDF9;
  --sand:#EDE6D5;

  --olive:#7B8361;
  --olive-dark:#4E593A;
  --olive-deep:#3E482E;
  --olive-soft:#E4E8D7;
  --olive-soft-2:#EEF1E5;

  --champagne:#C9A66B;
  --champagne-soft:#E8D8B9;

  --brown:#3F4335;
  --muted:#737666;
  --line:#D8D3BF;

  --white:#FFFFFF;

  --shadow:0 16px 42px rgba(67,75,47,.14);
  --shadow-soft:0 8px 25px rgba(67,75,47,.10);

  --radius:26px;

  /* compatibilidad */
  --gold:var(--olive);
  --gold-dark:var(--olive-dark);
}

/* ==============================
   GENERAL
============================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:Montserrat,Arial,sans-serif;
  line-height:1.65;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

::selection{
  background:var(--olive);
  color:#fff;
}

/* ==============================
   MENÚ SUPERIOR
============================== */

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  height:68px;
  padding:0 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  color:#fff;

  background:
    linear-gradient(
      to bottom,
      rgba(52,61,37,.72),
      rgba(52,61,37,.30),
      transparent
    );
}

.brand{
  font-family:Parisienne,cursive;
  font-size:30px;
  color:#fff;
}

.menu-btn{
  border:0;
  background:transparent;
  color:#fff;
  font-size:27px;
  cursor:pointer;
}

.menu{
  position:fixed;
  right:18px;
  top:58px;

  display:none;
  flex-direction:column;
  gap:4px;

  background:rgba(255,253,249,.98);
  color:var(--brown);

  padding:14px;
  border:1px solid rgba(123,131,97,.18);
  border-radius:18px;

  box-shadow:var(--shadow);

  min-width:220px;
}

.menu.open{
  display:flex;
}

.menu a{
  padding:11px 14px;
  border-radius:12px;
}

.menu a:hover{
  background:var(--olive-soft);
  color:var(--olive-dark);
}

/* ==============================
   PORTADA
============================== */

.hero{
  min-height:100svh;
  position:relative;

  display:grid;
  place-items:center;

  overflow:hidden;
}

.hero-photo{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center center;
}

.hero-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(54,61,39,.14),
      rgba(47,51,34,.38) 48%,
      rgba(39,43,29,.68)
    );
}

.hero-content{
  position:relative;
  z-index:2;

  text-align:center;
  color:#fff;

  padding:90px 20px 120px;

  text-shadow:0 3px 20px rgba(0,0,0,.30);
}

.hero h1{
  font-family:Parisienne,cursive;
  font-weight:400;

  font-size:clamp(58px,15vw,126px);
  line-height:.92;

  margin:10px 0;

  color:#fff;
}

.hero h1 span{
  font-family:'Cormorant Garamond',serif;
  font-size:.62em;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.24em;

  font-size:12px;
  font-weight:600;
}

.eyebrow.dark{
  color:var(--olive-dark);
}

.date{
  font-family:'Cormorant Garamond',serif;

  font-size:28px;
  letter-spacing:.18em;
}

/* ==============================
   CONTADOR
============================== */

.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:8px;

  width:min(520px,92vw);

  margin:28px auto 0;
  padding:15px;

  border-top:1px solid rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.6);
}

.countdown strong{
  display:block;

  font:600 29px
  'Cormorant Garamond',serif;
}

.countdown span{
  display:block;

  font-size:9px;

  text-transform:uppercase;
  letter-spacing:.12em;
}

.scroll-down{
  position:absolute;
  z-index:3;

  bottom:28px;
  left:50%;

  transform:translateX(-50%);

  width:44px;
  height:44px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:var(--paper);
  color:var(--olive-dark);

  box-shadow:var(--shadow);

  font-size:25px;
}

/* ==============================
   SECCIONES GENERALES
============================== */

.section{
  padding:82px 20px;
  max-width:1120px;
  margin:auto;
}

.intro{
  text-align:center;
  max-width:780px;
}

.ornament{
  color:var(--champagne);
  font-size:30px;
}

.intro blockquote{
  font:
    italic 600
    clamp(27px,5vw,42px)
    'Cormorant Garamond',serif;

  margin:8px 0;

  color:var(--olive-dark);
}

.verse{
  color:var(--olive-dark);

  font-size:13px;

  text-transform:uppercase;
  letter-spacing:.15em;
}

.section-heading{
  text-align:center;
  margin-bottom:28px;
}

.section-heading h2{
  font:
    400
    clamp(44px,9vw,72px)
    Parisienne,cursive;

  color:var(--olive-dark);

  margin:0;
  line-height:1;
}

.lead{
  max-width:760px;

  margin:0 auto 40px;

  text-align:center;

  color:var(--muted);
}

/* ==============================
   HISTORIA
============================== */

#historia{
  background:var(--cream);
}

.timeline{
  display:grid;
  gap:52px;

  max-width:900px;
  margin:auto;
}

.moment{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:34px;

  align-items:center;
}

.moment.reverse img{
  order:2;
}

.moment img{
  width:100%;

  aspect-ratio:4/5;

  object-fit:cover;
  object-position:center center;

  border-radius:var(--radius);

  border:1px solid rgba(123,131,97,.14);

  box-shadow:var(--shadow);
}

.moment span{
  color:var(--champagne);

  letter-spacing:.22em;

  font-size:12px;
  font-weight:600;
}

.moment h3{
  font:
    600
    35px
    'Cormorant Garamond',serif;

  margin:5px 0 4px;

  color:var(--olive-dark);
}

.moment p{
  color:var(--muted);
}

/* ==============================
   EL GRAN DÍA
============================== */

.event{
  max-width:100%;

  background:
    linear-gradient(
      180deg,
      #E9ECDF,
      #DFE4D2
    );

  border-top:1px solid rgba(78,89,58,.10);
  border-bottom:1px solid rgba(78,89,58,.10);
}

.event>*{
  max-width:1120px;

  margin-left:auto;
  margin-right:auto;
}

.event-card{
  background:
    linear-gradient(
      135deg,
      #FFFDF9,
      #F1F3E9
    );

  border:1px solid #C9CFB6;

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  padding:28px;

  display:grid;
  grid-template-columns:170px 1fr;

  gap:28px;

  align-items:center;
}

.date-block{
  text-align:center;

  border-right:1px solid #C9CFB6;
}

.date-block strong{
  display:block;

  font:
    600
    86px/1
    'Cormorant Garamond',serif;

  color:var(--olive-dark);
}

.date-block span{
  text-transform:uppercase;

  letter-spacing:.14em;

  font-size:12px;

  color:var(--brown);
}

.event-info p{
  margin:7px 0;
}

/* ==============================
   BOTONES
============================== */

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  border:0;

  border-radius:999px;

  padding:14px 22px;

  margin-top:12px;

  background:
    linear-gradient(
      135deg,
      var(--olive-dark),
      var(--olive-deep)
    );

  color:#fff;

  text-transform:uppercase;

  letter-spacing:.08em;

  font-size:11px;
  font-weight:600;

  cursor:pointer;

  box-shadow:
    0 10px 24px
    rgba(78,89,58,.22);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 14px 30px
    rgba(78,89,58,.28);
}

.btn.secondary{
  background:transparent;

  color:var(--olive-dark);

  border:1px solid var(--olive-dark);

  box-shadow:none;
}

/* ==============================
   EVENT FEATURES
============================== */

.event-features{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;

  margin-top:28px;
}

.event-features>div{
  padding:22px;

  text-align:center;

  border-radius:20px;

  background:rgba(255,255,255,.34);
}

.event-features span{
  color:var(--champagne);

  font-size:28px;
}

.event-features h3{
  font:
    600
    25px
    'Cormorant Garamond',serif;

  margin:4px;

  color:var(--olive-dark);
}

.event-features p{
  font-size:13px;

  color:var(--muted);
}

/* ==============================
   GALERÍA
============================== */

.gallery{
  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:12px;
}

.gallery img{
  width:100%;

  height:330px;

  object-fit:cover;
  object-position:center center;

  border-radius:18px;

  border:1px solid rgba(123,131,97,.14);

  box-shadow:var(--shadow-soft);
}

.gallery img:nth-child(2n){
  margin-top:26px;
}

/* ==============================
   NUESTRO SUEÑO
============================== */

#sueno{
  background:
    linear-gradient(
      180deg,
      #F7F3E9,
      #EFE9D9
    );
}

.dream-photo-wrap{
  position:relative;

  border-radius:var(--radius);

  overflow:hidden;

  box-shadow:var(--shadow);
}

.dream-photo-wrap img{
  width:100%;

  height:min(58vw,590px);

  object-fit:cover;
  object-position:center center;
}

.dream-photo-wrap:after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(54,62,37,.72),
      rgba(54,62,37,.12) 62%
    );
}

.dream-photo-text{
  position:absolute;

  z-index:2;

  left:28px;
  bottom:26px;

  color:#fff;

  font:
    500
    clamp(25px,5vw,45px)
    'Cormorant Garamond',serif;
}

.dream-copy{
  max-width:760px;

  text-align:center;

  margin:36px auto;

  color:var(--brown);
}

/* ==============================
   REGALO / FUTURO HOGAR
============================== */

.gift-card{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:20px;

  background:
    linear-gradient(
      135deg,
      #FFFDF9,
      #F0F2E8
    );

  border:1px solid #C9CFB6;

  border-radius:var(--radius);

  padding:26px;

  box-shadow:var(--shadow);
}

.gift-icon{
  font-size:38px;

  color:var(--champagne);
}

.small-label{
  text-transform:uppercase;

  letter-spacing:.15em;

  font-size:10px;

  color:var(--olive-dark);

  margin:0;
}

.gift-card h3{
  font:
    600
    30px
    'Cormorant Garamond',serif;

  margin:2px 0;

  color:var(--olive-dark);
}

.muted{
  color:var(--muted);

  font-size:13px;
}

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

.rsvp{
  max-width:860px;
}

.rsvp-form{
  background:
    linear-gradient(
      145deg,
      #FFFDF9,
      #F4F5EE
    );

  border:1px solid #C9CFB6;

  box-shadow:var(--shadow);

  border-radius:var(--radius);

  padding:28px;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:18px;
}

.rsvp-form label{
  display:grid;

  gap:7px;

  font-size:12px;

  text-transform:uppercase;

  letter-spacing:.09em;

  color:var(--olive-dark);
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea{
  width:100%;

  border:1px solid #CDD1BE;

  border-radius:12px;

  background:#fff;

  padding:13px 14px;

  font:
    400
    15px
    Montserrat,sans-serif;

  color:var(--brown);

  outline:none;
}

.rsvp-form textarea,
.rsvp-form .btn,
.form-note{
  grid-column:1/-1;
}

.form-note{
  text-align:center;

  color:var(--muted);

  font-size:12px;
}

.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus{
  border-color:var(--olive-dark);

  box-shadow:
    0 0 0 3px
    rgba(123,131,97,.10);
}

/* ==============================
   CIERRE
============================== */

.final-banner{
  height:76svh;

  min-height:540px;

  position:relative;

  display:grid;
  place-items:center;

  overflow:hidden;
}

.final-banner img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center center;
}

.final-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(49,58,34,.82),
      rgba(49,58,34,.08)
    );
}

.final-content{
  position:relative;

  color:#fff;

  text-align:center;

  padding:30px;
}

.final-content h2{
  font:
    400
    clamp(66px,14vw,120px)
    Parisienne,cursive;

  margin:0;
}

.final-content p{
  letter-spacing:.12em;
}

/* ==============================
   BOTÓN FLOTANTE
============================== */

.floating-rsvp{
  position:fixed;

  z-index:40;

  bottom:18px;
  left:50%;

  transform:translateX(-50%);

  background:
    linear-gradient(
      135deg,
      var(--olive-dark),
      var(--olive-deep)
    );

  color:#fff;

  border-radius:999px;

  padding:13px 22px;

  font-size:11px;

  text-transform:uppercase;

  letter-spacing:.08em;

  box-shadow:
    0 12px 30px
    rgba(61,71,43,.30);

  white-space:nowrap;
}

/* ==============================
   TOAST
============================== */

.toast{
  position:fixed;

  z-index:70;

  left:50%;
  bottom:80px;

  transform:
    translateX(-50%)
    translateY(20px);

  opacity:0;

  pointer-events:none;

  background:var(--olive-deep);

  color:#fff;

  padding:12px 18px;

  border-radius:999px;

  transition:.25s;
}

.toast.show{
  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);
}

/* ==============================
   ANIMACIONES
============================== */

.reveal{
  opacity:0;

  transform:translateY(18px);

  transition:
    opacity .75s ease,
    transform .75s ease;
}

.reveal.visible{
  opacity:1;

  transform:none;
}

/* ==============================
   COMPUTADORA
============================== */

@media (min-width:900px){

  .menu-btn{
    display:none;
  }

  .menu{
    position:static;

    display:flex;

    flex-direction:row;

    background:transparent;

    color:#fff;

    box-shadow:none;

    border:0;

    padding:0;

    min-width:0;
  }

  .menu a:hover{
    background:rgba(255,255,255,.12);

    color:#fff;
  }

  .floating-rsvp{
    display:none;
  }
}

/* ==============================
   CELULAR
============================== */

@media (max-width:760px){

  .section{
    padding:68px 18px;
  }

  /* PORTADA */

  .hero-photo{
    object-position:center center;
  }

  .hero-content{
    padding:
      90px
      18px
      120px;
  }

  .hero h1{
    font-size:
      clamp(
        54px,
        17vw,
        80px
      );
  }

  .date{
    font-size:23px;
  }

  .countdown{
    gap:0;
  }

  /* HISTORIA */

  .moment,
  .event-card{
    grid-template-columns:1fr;
  }

  .moment.reverse img{
    order:0;
  }

  .moment{
    gap:16px;
  }

  .moment div{
    text-align:center;
  }

  .moment h3{
    font-size:30px;
  }

  .moment img{
    aspect-ratio:4/5;

    object-position:center center;
  }

  /* EVENTO */

  .date-block{
    border-right:0;

    border-bottom:
      1px solid
      #C9CFB6;

    padding-bottom:18px;
  }

  .event-features{
    grid-template-columns:1fr;
  }

  .event-features>div{
    background:rgba(255,255,255,.30);
  }

  /* GALERÍA */

  .gallery{
    grid-template-columns:
      1fr 1fr;

    gap:10px;
  }

  .gallery img{
    height:270px;

    object-position:center center;
  }

  .gallery img:nth-child(2n){
    margin-top:18px;
  }

  /* LOTE */

  .dream-photo-wrap img{
    height:55vh;

    min-height:430px;

    object-position:center center;
  }

  .dream-photo-text{
    left:20px;
    right:20px;

    bottom:22px;
  }

  /* REGALO */

  .gift-card{
    flex-direction:column;

    text-align:center;
  }

  /* RSVP */

  .rsvp-form{
    grid-template-columns:1fr;

    padding:22px 18px;
  }

  .rsvp-form textarea,
  .rsvp-form .btn,
  .form-note{
    grid-column:1;
  }

  /* CIERRE */

  .final-banner{
    height:70svh;
  }

  .final-banner img{
    object-position:center center;
  }

  .topbar{
    height:62px;
  }

  .brand{
    font-size:27px;
  }
}
/* ==========================================
   COLORES DEFINITIVOS DE TEXTOS
   FLORENCIA & RUBEN
========================================== */

/* Texto general: gris cálido */
body{
  color:#74766F;
}

/* Párrafos normales */
p{
  color:#74766F;
}

/* Frase bíblica principal */
.intro blockquote{
  color:#56603F;
}

/* Colosenses 3:14 */
.verse{
  color:#7B8361;
}

/* Títulos principales */
.section-heading h2{
  color:#56603F;
}

/* Títulos de la historia */
.moment h3{
  color:#56603F;
}

/* Textos de la historia */
.moment p{
  color:#777A73;
}

/* Números 01, 02, 03... */
.moment span{
  color:#B99B68;
}

/* Información del evento */
.event-info,
.event-info p{
  color:#74766F;
}

/* Títulos pequeños del evento */
.event-features h3{
  color:#56603F;
}

.event-features p{
  color:#777A73;
}

/* Nuestro sueño */
.dream-copy{
  color:#74766F;
}

/* Tarjeta del regalo */
.gift-card{
  color:#74766F;
}

.gift-card h3{
  color:#56603F;
}

.small-label{
  color:#7B8361;
}

.muted{
  color:#85877F;
}

/* Formularios */
.rsvp-form{
  color:#74766F;
}

.rsvp-form label{
  color:#6F7465;
}

/* Todo texto que esté SOBRE una foto queda blanco */
.hero-content,
.hero-content p,
.hero-content span,
.final-content,
.final-content p,
.dream-photo-text{
  color:#FFFFFF;
}
/* ==========================================
   COLORES DEFINITIVOS DE TEXTOS
   FLORENCIA & RUBEN
========================================== */

/* Texto general: gris cálido */
body{
  color:#74766F;
}

/* Párrafos normales */
p{
  color:#74766F;
}

/* Frase bíblica principal */
.intro blockquote{
  color:#56603F;
}

/* Colosenses 3:14 */
.verse{
  color:#7B8361;
}

/* Títulos principales */
.section-heading h2{
  color:#56603F;
}

/* Títulos de la historia */
.moment h3{
  color:#56603F;
}

/* Textos de la historia */
.moment p{
  color:#777A73;
}

/* Números 01, 02, 03... */
.moment span{
  color:#B99B68;
}

/* Información del evento */
.event-info,
.event-info p{
  color:#74766F;
}

/* Títulos pequeños del evento */
.event-features h3{
  color:#56603F;
}

.event-features p{
  color:#777A73;
}

/* Nuestro sueño */
.dream-copy{
  color:#74766F;
}

/* Tarjeta del regalo */
.gift-card{
  color:#74766F;
}

.gift-card h3{
  color:#56603F;
}

.small-label{
  color:#7B8361;
}

.muted{
  color:#85877F;
}

/* Formularios */
.rsvp-form{
  color:#74766F;
}

.rsvp-form label{
  color:#6F7465;
}

/* Todo texto que esté SOBRE una foto queda blanco */
.hero-content,
.hero-content p,
.hero-content span,
.final-content,
.final-content p,
.dream-photo-text{
  color:#FFFFFF;
}