/* =========================
   COLORES
========================= */

:root {
  --marfil: #FCFBF9;
  --olivo: #556B2F;
  --dorado: #C5A880;
  --carbon: #2C2C2C;
}


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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {
  color: var(--carbon);
  font-family: "Cormorant Garamond", serif;

  background-color: var(--marfil);
  background-image: url("../assets/ornamentos/background-seccion.webp");

  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;

  background-attachment: scroll;
}

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

.portada {

  min-height: 100svh;

  display: flex;
  flex-direction: column;

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

  padding: 30px 20px;

  

}


/* =========================
   SOBRE
========================= */

.sobre {
  position: relative;

  display: block;

  width: min(720px, 92vw);

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;

  text-decoration: none;

  color: inherit;

  appearance: none;
  -webkit-appearance: none;
}

/* IMAGEN DEL SOBRE */

.sobre-base {

  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;

}


/* =========================
   DATOS DEL INVITADO
========================= */

.datos-invitado {
  position: absolute;
  z-index: 2;

  top: 14%;
  left: 50%;

  transform: translateX(-50%);

  width: 78%;

  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #ffffff;

  pointer-events: none;
}


/* APRECIABLE */

.apreciable {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(12px, 2.5vw, 24px);

  font-weight: 600;

  letter-spacing: .18em;

}


/* NOMBRE DEL INVITADO */

#nombreInvitado {
  font-family: "Allura", cursive;
  font-size: clamp(19px, 3.2vw, 34px);
  font-weight: 400;
  line-height: 1;

  display: block;

  width: 100%;
  max-width: 100%;

  margin: 8px auto;

  text-align: center;
  white-space: nowrap;

  box-sizing: border-box;
}

#nombreInvitado.nombre-largo {
  font-size: clamp(16px, 2.7vw, 29px);
}

#nombreInvitado.nombre-muy-largo {
  font-size: clamp(13px, 2.2vw, 24px);
}
/* PASES */

.pases {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(16px, 2.4vw, 26px);

  font-weight: 600;

  letter-spacing: .14em;

}

.mensaje-ninos {
  margin:
    5px auto 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    .08em;

  text-align:
    center;

  color:
    #ffffff;
}

/* =====================================
   EXCEPCIÓN NIÑOS
===================================== */
.mensaje-excepcion {
  margin:
    3px auto 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    10px;

  font-weight:
    300;

  line-height:
    1;

  letter-spacing:
    .02em;

  text-align:
    center;

  color:
    #ffffff;
}

/* =========================
   SELLO DE LACRE
========================= */

.sello-lacre {

  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 18%;

  transform: translateX(-50%);

  width: 32%;

  max-width: 145px;

  height: auto;

  pointer-events: none;

}


/* =========================
   INDICACIÓN
========================= */

.indicacion-portada {

  margin-top: 18px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 15px;

  font-style: italic;

  color: var(--olivo);

  opacity: .75;

}

/* =========================
   PRESENTACIÓN
========================= */

.presentacion {
  position: relative;

  width: 100%;

  padding: 55px 20px 85px;

  overflow: hidden;

  text-align: center;

  background-image:
    radial-gradient(
      rgba(85, 107, 47, .055) .7px,
      transparent .7px
    ),
    radial-gradient(
      rgba(197, 168, 128, .07) .7px,
      transparent .7px
    );

  background-size:
    5px 5px,
    7px 7px;

  background-position:
    0 0,
    2px 3px;
}


/* CONTENEDOR */

.presentacion-contenido {
  width: min(970px, 100%);
  margin: 0 auto;
}


/* =========================
   MONOGRAMA
========================= */

.monograma {
  display: flex;

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

  gap: 18px;

  margin-bottom: 6px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 64px;

  font-weight: 400;

  line-height: 1;

  color: var(--olivo);
}


.linea-monograma {
  display: block;

  width: 1px;
  height: 74px;

  background: var(--olivo);
}


/* =========================
   NOS CASAMOS
========================= */

.nos-casamos {
  margin: 5px 0 60px;

  font-family:
    "Allura",
    cursive;

  font-size: 72px;

  font-weight: 400;

  line-height: 1;

  color: var(--carbon);
}


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

.galeria-presentacion {
  width: min(760px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1fr 1.12fr 1fr;

  gap: 14px;

  align-items: center;
}


/* TARJETAS */

.foto-novios {
  position: relative;

  width: 100%;
  min-width: 0;

  padding: 10px;

  overflow: hidden;

  background:
    rgba(255,255,255,.88);

  box-shadow:
    0 4px 13px rgba(44,44,44,.08);
}


/* ALTURAS */

.foto-izquierda,
.foto-derecha {
  height: 395px;
}


.foto-centro {
  height: 455px;
}


/* MARCO */

.marco-foto {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border:
    1px solid var(--dorado);

  background:
    var(--marfil);
}


/* SEGUNDO MARCO */

.marco-foto::before {
  content: "";

  position: absolute;

  z-index: 2;

  inset: 7px;

  border:
    1px solid rgba(197,168,128,.75);

  pointer-events: none;
}
/* =========================
   FOTOS REALES
========================= */

.imagen-novios,
.video-presentacion {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;

  object-fit: cover;

  object-position: center;

  border: none;
}


/* EVITAMOS QUE EL VIDEO ROMPA EL GRID */

.video-presentacion {
  min-width: 0;
  background: #000;
}

/* =========================
   BOTÓN PLAY / MÚSICA
========================= */

.btn-play {
  position: absolute;

  z-index: 5;

  left: 50%;
  bottom: -28px;

  transform:
    translateX(-50%);

  width: 58px;
  height: 58px;

  padding: 0;

  display: flex;

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

  border: none;

  background:
    #5f696d;

  color:
    var(--marfil);

  font-family:
    Arial,
    sans-serif;

  font-size: 19px;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 6px 16px rgba(44, 44, 44, .14);

  transition:
    transform .3s ease,
    background .3s ease;
}


.btn-play:hover {
  transform:
    translateX(-50%)
    scale(1.06);

  background:
    var(--olivo);
}


/* =========================
   PLACEHOLDER
   Ya no se utiliza,
   pero lo dejamos por seguridad
========================= */

.icono-imagen {
  font-family:
    serif;

  font-size:
    46px;

  font-style:
    normal;

  font-weight:
    300;

  line-height:
    1;

  color:
    var(--carbon);
}

/* =========================
   NOMBRES
========================= */

.bloque-nombres {

  width: min(720px, 90%);

  margin: 55px auto 0;

}


.fila-nombre {

  display: flex;

  align-items: center;

  gap: 22px;

  width: 100%;

}


.nombre-caligrafico {

  flex: 0 0 auto;

  font-family:
    "Allura",
    cursive;

  font-size: 92px;

  font-weight: 400;

  line-height: .9;

  color: var(--carbon);

}


.linea-nombre {

  flex: 1;

  height: 1px;

  background:
    rgba(44,44,44,.35);

}


/* ANA */

.fila-ana {

  padding-right: 20px;

}


/* & */

.ampersand-novios {

  margin:
    -6px 0 -5px;

  font-family:
    "Allura",
    cursive;

  font-size: 72px;

  line-height: 1;

  color: var(--olivo);

}


/* AARÓN */

.fila-aaron {

  padding-left: 20px;

}

/* =========================
   FECHA DE LA BODA
========================= */

.fecha-evento {

  width: min(650px, 90%);

  margin: 70px auto 0;

  text-align: center;

}
.imagen-fecha {

  display: block;

  width: 98%;

  height: auto;

  margin: 0 auto;

}
/* =========================
   FRASE + ORNAMENTOS
========================= */

.frase-con-ornamentos {

  width: min(980px, 94%);

  margin: 62px auto 0;

  display: grid;

  grid-template-columns: 140px minmax(280px, 520px) 140px;

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

  gap: 20px;

}


.ornamento-frase {

  width: 100%;

  max-width: 120px;

  height: auto;

  justify-self: center;

  opacity: .95;

}


.frase-boda {

  width: 100%;

  margin: 0 auto;

}


.frase-boda p {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(28px, 3.5vw, 40px);

  font-weight: 700;

  line-height: 1.28;

  color: var(--carbon);

  text-align: center;

}


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

.galeria-futura {

  width: min(850px, 92%);

  margin:
    65px auto 0;

}


.placeholder-galeria {

  width: 100%;

  min-height: 420px;

  display: flex;

  flex-direction: column;

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

  gap: 14px;

  border:
    1px solid rgba(197, 168, 128, .7);

  outline:
    1px solid rgba(197, 168, 128, .45);

  outline-offset: -9px;

  background:
    rgba(252, 251, 249, .45);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 22px;

  font-style: italic;

  color:
    rgba(44,44,44,.6);

}


.icono-galeria {

  font-size: 46px;

  font-style: normal;

  color: var(--olivo);

}

/* =========================
   ANIMACIÓN DE RAMITAS
========================= */

.reveal-ramita {
  opacity: 0;

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}


.ornamento-izquierdo.reveal-ramita {
  transform: translateX(-45px);
}


.ornamento-derecho.reveal-ramita {
  transform: translateX(45px);
}


.reveal-ramita.visible {
  opacity: 1;
  transform: translateX(0);
}

/* =========================
   ANIMACIÓN DE NOMBRES
========================= */

.reveal-ana,
.reveal-aaron,
.reveal-ampersand {
  opacity: 0;

  transition:
    opacity 1s ease,
    transform 1s ease;
}


/* ANA ENTRA DESDE LA IZQUIERDA */

.reveal-ana {
  transform: translateX(-70px);
}


/* AARÓN ENTRA DESDE LA DERECHA */

.reveal-aaron {
  transform: translateX(70px);
}


/* & APARECE DESDE ABAJO */

.reveal-ampersand {
  transform: translateY(18px);

  transition-delay: .25s;
}


/* ESTADO VISIBLE */

.reveal-ana.visible,
.reveal-aaron.visible,
.reveal-ampersand.visible {
  opacity: 1;
  transform: translate(0);
}

/* =========================
   ANIMACIÓN DE FOTOS
========================= */

.reveal-foto-izq,
.reveal-foto-centro,
.reveal-foto-der {
  opacity: 0;

  transition:
    opacity 1s ease,
    transform 1s ease;
}


/* IZQUIERDA */

.reveal-foto-izq {
  transform: translateX(-60px);
}


/* CENTRO */

.reveal-foto-centro {
  transform: translateY(45px);

  transition-delay: .15s;
}


/* DERECHA */

.reveal-foto-der {
  transform: translateX(60px);

  transition-delay: .3s;
}


/* VISIBLES */

.reveal-foto-izq.visible,
.reveal-foto-centro.visible,
.reveal-foto-der.visible {
  opacity: 1;
  transform: translate(0);
}

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

.contador-seccion {
  width: 100%;
  padding: 45px 20px 55px;
  text-align: center;
}


.contador-titulo {

  margin-bottom: 25px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(22px, 2.5vw, 32px);

  font-weight: 600;

  letter-spacing: .20em;

  color: var(--carbon);

}


/* CONTENEDOR */

.contador-grid {

  width: min(760px, 92%);

  margin: 0 auto;

  display: grid;

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

  align-items: center;

}


/* CADA DATO */

.contador-item {

  position: relative;

  display: flex;

  flex-direction: column;

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

  padding:
    12px 16px;

}


/* DIVISORES */

.contador-item:not(:last-child)::after {

  content: "";

  position: absolute;

  right: 0;
  top: 18%;

  width: 1px;
  height: 64%;

  background:
    rgba(197, 168, 128, .65);

}


/* NÚMERO */

.contador-numero {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(52px, 7vw, 82px);

  font-weight: 400;

  line-height: 1;

  color: var(--dorado);
}


/* ETIQUETA */

.contador-etiqueta {

  margin-top: 9px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(13px, 1.5vw, 17px);

  font-weight: 600;

  letter-spacing: .12em;

  color: var(--carbon);

}


/* PARA LA BODA */

.contador-cierre {

  margin-top: 26px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(17px, 2vw, 23px);

  font-weight: 600;

  letter-spacing: .18em;

  color: var(--carbon);

}


/* =========================
   ANIMACIÓN CONTADOR
========================= */

.contador-reveal {

  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .8s ease,
    transform .8s ease;

}


.contador-reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}


/* APARICIÓN ESCALONADA */

.contador-reveal:nth-child(1) {
  transition-delay: 0s;
}

.contador-reveal:nth-child(2) {
  transition-delay: .12s;
}

.contador-reveal:nth-child(3) {
  transition-delay: .24s;
}

.contador-reveal:nth-child(4) {
  transition-delay: .36s;
}
/* =========================
   ORNAMENTOS DEL CONTADOR
========================= */

.ornamento-contador-box {

  width: 100%;
  height: 65px;

  display: flex;

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

  overflow: hidden;

}


.ornamento-contador {

  display: block;

  width: min(440px, 55%);

  height: auto;

}


/* ARRIBA */

.ornamento-contador-box.ornamento-contador-superior {

  margin-bottom: 12px;

}


/* ABAJO */

.ornamento-contador-box.ornamento-contador-inferior {

  margin-top: 14px;

}

/* =========================
   ANIMACIÓN ORNAMENTOS CONTADOR
========================= */

.reveal-ornamento-contador-top,
.reveal-ornamento-contador-bottom {
  opacity: 0;

  transition:
    opacity 1s ease,
    transform 1s ease;
}

.reveal-ornamento-contador-top {
  transform: translateY(-18px);
  transition-delay: .08s;
}

.reveal-ornamento-contador-bottom {
  transform: translateY(18px);
  transition-delay: .22s;
}


/* ORNAMENTO SUPERIOR */

.reveal-ornamento-contador-top {
  transform: translateY(-18px);
}


/* ORNAMENTO INFERIOR */

.reveal-ornamento-contador-bottom {
  transform: translateY(18px);
}


/* ESTADO VISIBLE */

.reveal-ornamento-contador-top.visible,
.reveal-ornamento-contador-bottom.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================
   PADRES DE LOS NOVIOS
===================================== */

.padres-seccion {
  position: relative;

  /* FULL WIDTH REAL */
  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  min-height: 460px;

  padding:
    100px 0 120px;

  overflow: hidden;

  background-color:
    var(--olivo);

  background-image:
    url("../assets/fotos/padres-fondo.png");

  background-size:
    cover;

  background-position:
    center 42%;

  background-repeat:
    no-repeat;
}

.padres-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(35, 44, 35, .68);
}

.padres-contenido {
  position: relative;
  z-index: 2;

  width: 100%;
  margin: 0 auto;
  padding: 0 7%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* =====================================
   CADA FAMILIA
===================================== */

.familia {
  width: 100%;
  text-align: center;
}

/* =====================================
   TÍTULOS
===================================== */

.titulo-familia {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.titulo-caligrafico {
  flex-shrink: 0;
  font-family: "Allura", cursive;
  font-size: clamp(37px, 3.2vw, 55px);
  font-weight: 400;
  line-height: 1;
  color: var(--marfil);
}

.linea-titulo {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(252, 251, 249, .65);
}

/* =====================================
   NOMBRES
===================================== */

.nombres-padres {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.nombres-padres p {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(18px, 1.6vw, 25px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .12em;
  color: var(--marfil);
}

.ampersand-padres {
  display: block;
  margin: 4px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  line-height: 1;
  color: var(--dorado);
}

/* =====================================
   ANIMACIÓN
===================================== */

.reveal-padres-izq,
.reveal-padres-der {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.reveal-padres-izq {
  transform: translateX(-35px);
}

.reveal-padres-der {
  transform: translateX(35px);
}

.reveal-padres-izq.visible,
.reveal-padres-der.visible {
  opacity: 1;
  transform: translateX(0);
}
/* =====================================
   MADRINAS Y PADRINOS
===================================== */

.padrinos-seccion {
  position: relative;

  width: 100%;

  padding:
    95px 20px 110px;

  overflow: hidden;

  /* NO ponemos fondo.
     Así utiliza nuestro fondo
     marfil/texturizado general */
}


.padrinos-contenido {
  width: min(1250px, 92%);

  margin: 0 auto;

  text-align: center;
}


/* =====================================
   TÍTULO
===================================== */

.padrinos-titulo {
  margin-bottom: 65px;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(48px, 4vw, 66px);

  font-weight: 400;

  line-height: 1;

  color:
    var(--carbon);
}


/* =====================================
   GRID
===================================== */

.padrinos-grid {
  display: grid;

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

  gap: 35px;
}


/* =====================================
   TARJETITA
===================================== */

.padrino-card {
  position: relative;

  min-height: 180px;

  padding:
    38px 25px 32px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background:
    rgba(252, 251, 249, .72);

  border:
    1px solid rgba(197, 168, 128, .55);

  box-shadow:
    0 10px 30px rgba(44, 44, 44, .04);
}


/* PEQUEÑO DETALLE SUPERIOR */

.detalle-padrino {
  display: block;

  width: 42px;
  height: 1px;

  margin-bottom: 23px;

  background:
    var(--olivo);
}


/* =====================================
   NOMBRES
===================================== */

.padrino-nombres {
  margin-bottom: 20px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(17px, 1.5vw, 22px);

  font-weight: 500;

  line-height: 1.3;

  letter-spacing: .04em;

  color:
    var(--carbon);
}


/* =====================================
   TIPO
===================================== */

.padrino-tipo {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(18px, 1.6vw, 23px);

  font-weight: 600;

  line-height: 1.2;

  color:
    var(--dorado);
}
.padrinos-indicadores {
  display: none;
}
/* =====================================
   UBICACIONES
===================================== */

.ubicaciones-seccion {
  position: relative;

  width: 100%;

  padding:
    120px 20px 135px;

  overflow: hidden;
}


.ubicaciones-contenido {
  position: relative;

  z-index: 2;

  width:
    min(1000px, 90%);

  margin:
    0 auto;
}


/* =====================================
   ORNAMENTOS FLORALES
===================================== */


  .floral-ubicaciones {
  position: absolute;
  z-index: 1;

  height: auto;

  pointer-events: none;
}


.floral-ubicaciones-izq {
  width: 150px;

  top: 18px;
  left: 0;
}


.floral-ubicaciones-der {
  width: 150px;

  right: 0;
  bottom: 12px;
}

/* =====================================
   ENCABEZADO
===================================== */

.ubicaciones-encabezado {
  width:
    min(760px, 90%);

  margin:
    70px auto 55px;
}


.icono-ubicaciones {
  display: block;

  width: 55px;
  height: auto;

  margin-bottom: 7px;
}


.ubicaciones-titulo-fila {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 18px;
}


.ubicaciones-titulo-fila h2 {
  flex-shrink: 0;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(48px, 4.5vw, 66px);

  font-weight: 400;

  line-height: 1;

  color:
    var(--carbon);
}


.linea-ubicaciones {
  display: block;

  flex: 1;

  height: 1px;

  background:
    rgba(44, 44, 44, .55);

  transform-origin:
    left center;
}


/* =====================================
   LISTA DE UBICACIONES
===================================== */

.ubicaciones-lista {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 50px;
}


/* =====================================
   TARJETA
===================================== */

.ubicacion-card {
  position: relative;

  width:
    min(520px, 90%);

  padding:
    28px 28px 30px;

  background:
    rgba(252, 251, 249, .94);

  border:
    1px solid rgba(197, 168, 128, .20);

  box-shadow:
    0 13px 27px rgba(44, 44, 44, .18);
}


/* =====================================
   FOTO
===================================== */

.ubicacion-imagen-wrap {
  width: 100%;

  margin-bottom: 17px;

  padding: 7px;

  background:
    rgba(252, 251, 249, .95);

  box-shadow:
    0 5px 10px rgba(44, 44, 44, .10);
}


.ubicacion-imagen-marco {
  width: 100%;

  padding: 5px;

  border:
    1px solid rgba(197, 168, 128, .85);
}


.ubicacion-imagen {
  display: block;

  width: 100%;

  aspect-ratio:
    2.15 / 1;

  object-fit: cover;

  object-position: center;

  height: auto;
}


/* =====================================
   INFORMACIÓN
===================================== */

.ubicacion-info {
  width: 100%;

  text-align: left;
}


.ubicacion-tipo {
  margin-bottom: 3px;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(37px, 3vw, 48px);

  font-weight: 400;

  line-height: .9;

  color:
    var(--carbon);
}


.ubicacion-lugar {
  margin-bottom: 5px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 20px;

  font-weight: 600;

  line-height: 1.2;

  color:
    var(--carbon);
}


/* HORA + LÍNEA */

.ubicacion-hora-fila {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 6px;
}


.ubicacion-hora {
  flex-shrink: 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 18px;

  font-weight: 600;

  color:
    var(--carbon);
}


.ubicacion-linea {
  display: block;

  flex: 1;

  height: 1px;

  background:
    rgba(44, 44, 44, .40);
}


/* DIRECCIÓN */

.ubicacion-direccion {
  margin-bottom: 13px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 18px;

  font-weight: 400;

  color:
    rgba(44, 44, 44, .82);
}


/* =====================================
   BOTÓN MAPS
===================================== */

.boton-maps {
  display: inline-flex;

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

  min-width: 128px;

  padding:
    8px 18px;

  background:
    var(--carbon);

  border:
    1px solid var(--carbon);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: .08em;

  text-decoration: none;

  color:
    var(--marfil);

  transition:
    background .35s ease,
    color .35s ease,
    transform .35s ease,
    border-color .35s ease;
}


.boton-maps:hover {
  background:
    var(--olivo);

  border-color:
    var(--olivo);

  transform:
    translateY(-2px);
}
/* =====================================
   ANIMACIÓN - ORNAMENTOS
===================================== */

.reveal-floral-izq {
  opacity: 0;

  transform:
    translateX(-90px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}


.reveal-floral-der {
  opacity: 0;

  transform:
    translateX(90px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}


.reveal-floral-izq.visible,
.reveal-floral-der.visible {
  opacity: 1;

  transform:
    translateX(0);
}


/* =====================================
   ANIMACIÓN - ENCABEZADO
===================================== */

.reveal-ubicaciones-titulo {
  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-ubicaciones-titulo.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* LA LÍNEA SE DIBUJA */

.reveal-ubicaciones-titulo
.linea-ubicaciones {
  transform:
    scaleX(0);

  transition:
    transform 1.1s ease .35s;
}


.reveal-ubicaciones-titulo.visible
.linea-ubicaciones {
  transform:
    scaleX(1);
}


/* ICONO */

.reveal-ubicaciones-titulo
.icono-ubicaciones {
  opacity: 0;

  transform:
    translateY(12px) scale(.90);

  transition:
    opacity .8s ease .15s,
    transform .8s ease .15s;
}


.reveal-ubicaciones-titulo.visible
.icono-ubicaciones {
  opacity: 1;

  transform:
    translateY(0) scale(1);
}


/* =====================================
   ANIMACIÓN - TARJETAS
===================================== */

.reveal-ubicacion-card {
  opacity: 0;

  transform:
    translateY(40px) scale(.98);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-ubicacion-card.visible {
  opacity: 1;

  transform:
    translateY(0) scale(1);
}


/* FOTO DENTRO DE LA TARJETA */

.reveal-ubicacion-card
.ubicacion-imagen-wrap {
  opacity: 0;

  transform:
    translateY(15px);

  transition:
    opacity .8s ease .18s,
    transform .8s ease .18s;
}


.reveal-ubicacion-card.visible
.ubicacion-imagen-wrap {
  opacity: 1;

  transform:
    translateY(0);
}


/* INFORMACIÓN */

.reveal-ubicacion-card
.ubicacion-info {
  opacity: 0;

  transform:
    translateY(14px);

  transition:
    opacity .8s ease .32s,
    transform .8s ease .32s;
}


.reveal-ubicacion-card.visible
.ubicacion-info {
  opacity: 1;

  transform:
    translateY(0);
}

/* =====================================
   ITINERARIO
===================================== */

.itinerario-seccion {
  position: relative;

  width: 100%;

  padding:
    105px 20px 115px;

  overflow: hidden;
}


.itinerario-contenido {
  width:
    min(900px, 90%);

  margin:
    0 auto;
}


/* =====================================
   ENCABEZADO
===================================== */

.itinerario-encabezado {
  width:
    min(760px, 92%);

  margin:
    0 auto 65px;
}


.itinerario-titulo-fila {
  display: flex;

  align-items: center;

  gap: 18px;
}


/* LÍNEA IZQUIERDA */

.linea-itinerario {
  flex: 1;

  height: 1px;

  background:
    rgba(44, 44, 44, .55);

  transform-origin:
    right center;
}


/* ICONO + TÍTULO */

.itinerario-titulo-bloque {
  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}


.icono-itinerario {
  display: block;

  width: 50px;
  height: auto;

  margin-bottom: 3px;
}


.itinerario-titulo-bloque h2 {
  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(48px, 4.5vw, 66px);

  font-weight: 400;

  line-height: .95;

  color:
    var(--carbon);
}


/* =====================================
   LISTA
===================================== */

.itinerario-lista {
  width:
    min(720px, 92%);

  margin:
    0 auto;

  display: flex;

  flex-direction: column;

  gap: 45px;
}


/* =====================================
   CADA EVENTO
===================================== */

.itinerario-item {
  width: 100%;

  display: grid;

  grid-template-columns:
    220px 1px 1fr;

  gap: 20px;

  align-items: center;
}


/* =====================================
   ICONO + NOMBRE EVENTO
===================================== */

.itinerario-evento {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 14px;

  text-align: right;
}


.icono-evento {
  display: block;

  width: 52px;
  height: 52px;

  object-fit: contain;

  flex-shrink: 0;
}


.itinerario-evento-nombre {
  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(29px, 2.5vw, 40px);

  font-weight: 400;

  line-height: .95;

  color:
    var(--carbon);
}


/* =====================================
   DIVISOR VERTICAL
===================================== */

.itinerario-divisor {
  display: block;

  width: 1px;
  height: 75px;

  background:
    var(--carbon);
}


/* =====================================
   DATOS
===================================== */

.itinerario-detalle {
  width: 100%;

  text-align: left;
}


.itinerario-lugar {
  margin-bottom: 4px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 18px;

  font-weight: 600;

  line-height: 1.2;

  color:
    var(--carbon);
}


/* HORA + LÍNEA */

.itinerario-hora-fila {
  display: flex;

  align-items: center;

  gap: 5px;

  width: 100%;

  margin-bottom: 5px;
}


.itinerario-hora {
  flex-shrink: 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 16px;

  font-weight: 600;

  color:
    var(--carbon);
}


.itinerario-linea-detalle {
  display: block;

  flex: 1;

  height: 1px;

  background:
    rgba(44, 44, 44, .45);

  transform-origin:
    left center;
}


.itinerario-direccion {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 16px;

  font-weight: 400;

  color:
    rgba(44, 44, 44, .80);
}

/* =====================================
   ANIMACIÓN ENCABEZADO ITINERARIO
===================================== */

.reveal-itinerario-titulo {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-itinerario-titulo.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ICONO */

.reveal-itinerario-titulo
.icono-itinerario {
  opacity: 0;

  transform:
    translateY(12px) scale(.88);

  transition:
    opacity .8s ease .12s,
    transform .8s ease .12s;
}


.reveal-itinerario-titulo.visible
.icono-itinerario {
  opacity: 1;

  transform:
    translateY(0) scale(1);
}


/* LÍNEA PRINCIPAL */

.reveal-itinerario-titulo
.linea-itinerario {
  transform:
    scaleX(0);

  transition:
    transform 1.1s ease .25s;
}


.reveal-itinerario-titulo.visible
.linea-itinerario {
  transform:
    scaleX(1);
}


/* =====================================
   ANIMACIÓN EVENTOS
===================================== */

.reveal-itinerario-item {
  opacity: 0;

  transform:
    translateY(28px);

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


.reveal-itinerario-item.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ICONO DE CADA EVENTO */

.reveal-itinerario-item
.icono-evento {
  opacity: 0;

  transform:
    scale(.75);

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


.reveal-itinerario-item.visible
.icono-evento {
  opacity: 1;

  transform:
    scale(1);
}


/* DIVISOR VERTICAL */

.reveal-itinerario-item
.itinerario-divisor {
  transform:
    scaleY(0);

  transform-origin:
    top center;

  transition:
    transform .75s ease .2s;
}


.reveal-itinerario-item.visible
.itinerario-divisor {
  transform:
    scaleY(1);
}


/* LÍNEA DE HORA */

.reveal-itinerario-item
.itinerario-linea-detalle {
  transform:
    scaleX(0);

  transition:
    transform .9s ease .35s;
}


.reveal-itinerario-item.visible
.itinerario-linea-detalle {
  transform:
    scaleX(1);
}

/* =====================================
   DRESS CODE
===================================== */

.dresscode-seccion {
  position: relative;

  width: 100%;

  padding:
    120px 20px 135px;

  overflow: hidden;
}


.dresscode-contenido {
  position: relative;

  z-index: 2;

  width:
    min(950px, 90%);

  margin:
    0 auto;
}


/* =====================================
   ORNAMENTOS
===================================== */

.floral-dresscode {
  position: absolute;

  z-index: 1;

  height: auto;

  pointer-events: none;
}


.floral-dresscode-izq {
  width: 180px;

  top: 10px;
  left: 0;
}


.floral-dresscode-der {
  width: 180px;

  right: 0;
  bottom: 10px;
}


/* =====================================
   ENCABEZADO
===================================== */

.dresscode-encabezado {
  width:
    min(800px, 90%);

  margin:
    50px auto 70px;
}


/* ICONO ARRIBA DEL TÍTULO */

.icono-dresscode {
  display: block;

  width: 52px;
  height: auto;

  margin:
    0 0 7px 0;
}


/* TÍTULO + LÍNEA */

.dresscode-titulo-fila {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 18px;
}


.dresscode-titulo-fila h2 {
  flex-shrink: 0;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(50px, 4.5vw, 68px);

  font-weight: 400;

  line-height: .9;

  color:
    var(--carbon);
}


.linea-dresscode {
  display: block;

  flex: 1;

  height: 1px;

  background:
    rgba(44, 44, 44, .48);

  transform-origin:
    left center;
}


/* =====================================
   ELLOS / ELLAS
===================================== */

.dresscode-opciones {
  width:
    min(620px, 90%);

  margin:
    0 auto;

  display: grid;

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

  gap:
    90px;

  align-items:
    end;
}


.dresscode-item {
  text-align: center;
}


/* ICONOS */

.dresscode-icono-wrap {
  height: 190px;

  display: flex;

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

  margin-bottom:
    18px;
}


.dresscode-icono-persona {
  display: block;

  max-width: 150px;
  max-height: 185px;

  width: auto;
  height: auto;

  object-fit: contain;
}


/* ELLOS / ELLAS */

.dresscode-item h3 {
  margin-bottom:
    5px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    32px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    .04em;

  color:
    var(--carbon);
}


/* DESCRIPCIÓN */

.dresscode-item p {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    27px;

  font-weight:
    400;

  line-height:
    1.12;

  color:
    var(--carbon);
}


/* =====================================
   PROHIBIDO
===================================== */


.dresscode-restricciones {
  position: relative;

  z-index: 3;

  width:
    min(760px, 88%);

  margin:
    58px auto 0;

  text-align:
    center;
}



.dresscode-prohibido-texto {
  margin:
    0 auto 22px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(24px, 2.2vw, 30px);

  font-weight:
    500;

  line-height:
    1.25;

  color:
    var(--carbon);
}



.dresscode-prohibido-texto strong {
  font-weight:
    700;

  color:
    var(--olivo);
}



/* IMAGEN DE COLORES PROHIBIDOS */

.dresscode-colores-grid {
  width: 100%;

  margin:
    10px auto 0;

  display: grid;

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

  gap:
    5px;

  align-items:
    start;
}


.dresscode-color-item {
  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  text-align: center;
}


.dresscode-color-item img {
  display: block;

  width: 55px;
  height: 55px;

  margin:
    0 auto 6px;

  object-fit:
    contain;
}


.dresscode-color-item span {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1;

  text-align:
    center;

  color:
    var(--carbon);
}
/* =====================================
   ANIMACIONES DRESS CODE
===================================== */

.reveal-dresscode-floral-izq,
.reveal-dresscode-floral-der {
  opacity: 0;

  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}


.reveal-dresscode-floral-izq {
  transform:
    translateX(-30px);
}


.reveal-dresscode-floral-der {
  transform:
    translateX(30px);
}


.reveal-dresscode-floral-izq.visible,
.reveal-dresscode-floral-der.visible {
  opacity: 1;

  transform:
    translateX(0);
}


/* ENCABEZADO */

.reveal-dresscode-titulo {
  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-dresscode-titulo.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ICONO */

.reveal-dresscode-titulo
.icono-dresscode {
  opacity: 0;

  transform:
    translateY(10px) scale(.9);

  transition:
    opacity .8s ease .15s,
    transform .8s ease .15s;
}


.reveal-dresscode-titulo.visible
.icono-dresscode {
  opacity: 1;

  transform:
    translateY(0) scale(1);
}


/* LÍNEA */

.reveal-dresscode-titulo
.linea-dresscode {
  transform:
    scaleX(0);

  transition:
    transform 1.1s ease .3s;
}


.reveal-dresscode-titulo.visible
.linea-dresscode {
  transform:
    scaleX(1);
}


/* ELLOS / ELLAS */

.reveal-dresscode-item {
  opacity: 0;

  transform:
    translateY(28px);

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


.reveal-dresscode-item:nth-child(2) {
  transition-delay:
    .15s;
}


.reveal-dresscode-item.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* RESTRICCIONES */

.reveal-dresscode-restricciones {
  opacity: 0;

  transform:
    translateY(20px);

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


.reveal-dresscode-restricciones.visible {
  opacity: 1;

  transform:
    translateY(0);
}

/* =====================================
   SUGERENCIAS DE REGALO
===================================== */

.regalo-seccion {
  position: relative;

  width: 100%;

  padding:
    95px 20px 125px;

  overflow: hidden;
}


.regalo-contenido {
  position: relative;

  z-index: 2;

  width:
    min(950px, 90%);

  margin:
    0 auto;
}



/* =====================================
   FLORAL IZQUIERDO
===================================== */

.floral-regalo {
  position: absolute;

  z-index: 1;

  width:
    190px;

  height: auto;

  left:
    0;

  bottom:
    20px;

  pointer-events:
    none;
}



/* =====================================
   ENCABEZADO
===================================== */

.regalo-encabezado {
  width:
    min(820px, 92%);

  margin:
    0 auto 65px;
}


.regalo-titulo-fila {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    18px;
}



/* =====================================
   LÍNEA IZQUIERDA
===================================== */

.linea-regalo {
  display:
    block;

  flex:
    1;

  height:
    1px;

  background:
    rgba(44, 44, 44, .48);

  transform-origin:
    right center;
}



/* =====================================
   BLOQUE DEL TÍTULO
===================================== */

.regalo-titulo-bloque {
  position:
    relative;

  flex:
    0 0 auto;

  min-width:
    290px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}



/* ICONO */

.icono-regalo {
  display:
    block;

  width:
    52px;

  height:
    auto;

  margin-bottom:
    4px;
}



/* SUGERENCIAS DE REGALO */

.regalo-titulo-bloque h2 {
  margin:
    0;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(48px, 4.2vw, 64px);

  font-weight:
    400;

  line-height:
    .86;

  color:
    var(--carbon);
}



/* =====================================
   REGALO LIBRE
===================================== */

.regalo-principal {
  width:
    min(580px, 82%);

  margin:
    25px auto 0;

  text-align:
    center;
}



/* REGALO */

.regalo-palabra {
  margin:
    0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(72px, 8vw, 112px);

  font-weight:
    500;

  line-height:
    .78;

  letter-spacing:
    .045em;

  color:
    var(--carbon);
}



/* libre */

.regalo-libre {
  position:
    relative;

  z-index:
    2;

  margin:
    -2px 0 0;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(75px, 8vw, 110px);

  font-weight:
    400;

  line-height:
    .78;

  color:
    var(--dorado);
}



/* CORAZONES */

.ornamento-regalo {
  display:
    block;

  width:
    min(330px, 66%);

  height:
    auto;

  margin:
    18px auto 0;
}



/* =====================================
   ANIMACIONES
   MISMA ESTÉTICA DE LAS DEMÁS SECCIONES
===================================== */


/* FLORAL DESDE IZQUIERDA */

.reveal-regalo-floral {
  opacity:
    0;

  transform:
    translateX(-35px);

  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}


.reveal-regalo-floral.visible {
  opacity:
    1;

  transform:
    translateX(0);
}



/* ENCABEZADO:
   OPACIDAD + SUBE SUAVEMENTE */

.reveal-regalo-titulo {
  opacity:
    0;

  transform:
    translateY(24px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-regalo-titulo.visible {
  opacity:
    1;

  transform:
    translateY(0);
}



/* ICONO:
   FADE + ESCALA SUTIL */

.reveal-regalo-titulo
.icono-regalo {
  opacity:
    0;

  transform:
    translateY(10px)
    scale(.90);

  transition:
    opacity .8s ease .15s,
    transform .8s ease .15s;
}


.reveal-regalo-titulo.visible
.icono-regalo {
  opacity:
    1;

  transform:
    translateY(0)
    scale(1);
}



/* LA LÍNEA SE DIBUJA */

.reveal-regalo-titulo
.linea-regalo {
  transform:
    scaleX(0);

  transition:
    transform 1.1s ease .25s;
}


.reveal-regalo-titulo.visible
.linea-regalo {
  transform:
    scaleX(1);
}



/* REGALO LIBRE:
   FADE DESDE ABAJO */

.reveal-regalo-principal {
  opacity:
    0;

  transform:
    translateY(28px);

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


.reveal-regalo-principal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}



/* CORAZONES:
   APARECEN DESPUÉS */

.reveal-regalo-principal
.ornamento-regalo {
  opacity:
    0;

  transform:
    translateY(10px);

  transition:
    opacity .8s ease .25s,
    transform .8s ease .25s;
}


.reveal-regalo-principal.visible
.ornamento-regalo {
  opacity:
    1;

  transform:
    translateY(0);
}
/* =====================================
   ÁLBUM DIGITAL
===================================== */

.album-seccion {
  position: relative;

  width: 100%;

  padding:
    105px 0 125px;

  overflow: hidden;
}


.album-contenido {
  position: relative;

  z-index: 2;

  width:
    min(1100px, 92%);

  margin:
    0 auto;
}






/* =====================================
   ENCABEZADO
===================================== */

.album-encabezado {
  width:
    min(820px, 92%);

  margin:
    55px auto 60px;
}


.icono-album {
  display: block;

  width: 52px;
  height: auto;

  margin-bottom: 5px;
}


.album-titulo-fila {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 18px;
}


.album-titulo-fila h2 {
  flex-shrink: 0;

  margin: 0;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(50px, 4.5vw, 68px);

  font-weight: 400;

  line-height: .9;

  color:
    var(--carbon);
}


.linea-album {
  display: block;

  flex: 1;

  height: 1px;

  background:
    rgba(44,44,44,.48);

  transform-origin:
    left center;
}



/* =====================================
   CARRUSEL
===================================== */

.album-carrusel-wrap {
  width: 100%;
}


.album-carrusel {
  width: 100%;

  display: flex;

  gap: 18px;

  overflow-x: auto;
  overflow-y: hidden;

  padding:
    5px 3px 22px;

  scroll-snap-type:
    x mandatory;

  scroll-behavior:
    smooth;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;
}


.album-carrusel::-webkit-scrollbar {
  display: none;
}



/* =====================================
   FOTO
===================================== */

.album-slide {
  position: relative;

  flex:
    0 0 calc((100% - 36px) / 3);

  aspect-ratio:
    4 / 5;

  padding: 8px;

  overflow: hidden;

  border:
    1px solid rgba(197,168,128,.52);

  background:
    rgba(252,251,249,.85);

  box-shadow:
    0 8px 22px rgba(44,44,44,.08);

  cursor:
    pointer;

  scroll-snap-align:
    center;

  appearance:
    none;

  -webkit-appearance:
    none;

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


.album-slide:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 13px 28px rgba(44,44,44,.13);
}


.album-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  pointer-events: none;
}



/* =====================================
   DOTS
===================================== */

.album-indicadores {
  display: flex;

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

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;
}


.album-punto {
  width: 6px;
  height: 6px;

  padding: 0;

  border: none;
  border-radius: 50%;

  background:
    rgba(85,107,47,.28);

  cursor: pointer;

  transition:
    transform .3s ease,
    background .3s ease;
}


.album-punto.activo {
  background:
    var(--olivo);

  transform:
    scale(1.4);
}



/* =====================================
   LIGHTBOX
===================================== */

.album-lightbox {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

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

  padding:
    45px 70px;

  background:
    rgba(18,18,18,.94);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}


.album-lightbox.abierto {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


.album-lightbox-imagen {
  display: block;

  width: auto;
  height: auto;

  max-width: 88vw;
  max-height: 88vh;

  object-fit: contain;

  box-shadow:
    0 15px 50px rgba(0,0,0,.35);
}


.album-lightbox-cerrar {
  position: absolute;

  top: 20px;
  right: 25px;

  width: 44px;
  height: 44px;

  border: none;

  background: transparent;

  color: white;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 43px;

  line-height: 1;

  cursor: pointer;
}


.album-lightbox-flecha {
  position: absolute;

  top: 50%;

  transform:
    translateY(-50%);

  width: 46px;
  height: 60px;

  border: none;

  background:
    rgba(255,255,255,.08);

  color: white;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 45px;

  cursor: pointer;

  transition:
    background .3s ease;
}


.album-lightbox-flecha:hover {
  background:
    rgba(255,255,255,.17);
}


.album-lightbox-anterior {
  left: 18px;
}


.album-lightbox-siguiente {
  right: 18px;
}



/* =====================================
   ANIMACIONES ÁLBUM
===================================== */



/* TÍTULO */

.reveal-album-titulo {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-album-titulo.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ICONO */

.reveal-album-titulo
.icono-album {
  opacity: 0;

  transform:
    translateY(10px)
    scale(.9);

  transition:
    opacity .8s ease .15s,
    transform .8s ease .15s;
}


.reveal-album-titulo.visible
.icono-album {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* LÍNEA */

.reveal-album-titulo
.linea-album {
  transform:
    scaleX(0);

  transition:
    transform 1.1s ease .25s;
}


.reveal-album-titulo.visible
.linea-album {
  transform:
    scaleX(1);
}


/* CARRUSEL */

.reveal-album-carrusel {
  opacity: 0;

  transform:
    translateY(28px);

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


.reveal-album-carrusel.visible {
  opacity: 1;

  transform:
    translateY(0);
}

/* =====================================
   HOSPEDAJE
===================================== */

.hospedaje-seccion {
  position: relative;

  width: 100%;

  padding:
    105px 20px 120px;

  overflow: hidden;
}


.hospedaje-contenido {
  position: relative;

  z-index: 2;

  width:
    min(950px, 90%);

  margin:
    0 auto;
}


/* =====================================
   FLORAL HOSPEDAJE
===================================== */

.floral-hospedaje {
  position: absolute;

  z-index: 1;

  width: 190px;
  height: auto;

  top: 10px;
  right: 0;

  pointer-events: none;
}


/* =====================================
   ENCABEZADO HOSPEDAJE
===================================== */

.hospedaje-encabezado {
  width:
    min(820px, 92%);

  margin:
    55px auto 55px;
}


.hospedaje-titulo-fila {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 18px;
}


.linea-hospedaje {
  display: block;

  flex: 1;

  height: 1px;

  background:
    rgba(44, 44, 44, .48);

  transform-origin:
    right center;
}


.hospedaje-titulo-bloque {
  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


.icono-hospedaje {
  display: block;

  width: 52px;
  height: auto;

  margin-bottom: 4px;
}


.hospedaje-titulo-bloque h2 {
  margin: 0;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(50px, 4.5vw, 66px);

  font-weight: 400;

  line-height: .9;

  color:
    var(--carbon);
}


/* =====================================
   INFORMACIÓN HOSPEDAJE
===================================== */

.hospedaje-info {
  width:
    min(720px, 86%);

  margin:
    0 auto;

  text-align: center;
}


.hospedaje-destacado {
  margin-bottom: 4px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(23px, 2.4vw, 32px);

  font-weight: 700;

  line-height: 1.2;

  color:
    var(--carbon);
}


.hospedaje-texto {
  margin-bottom: 15px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(21px, 2.2vw, 29px);

  font-weight: 400;

  line-height: 1.2;

  color:
    var(--carbon);
}


.hospedaje-clave {
  display: inline-block;

  padding:
    6px 18px 7px;

  background:
    var(--olivo);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(20px, 2vw, 27px);

  font-weight: 600;

  line-height: 1;

  color:
    var(--marfil);
}
.boton-reservar {
  display: block;

width: max-content;

margin: 14px auto 0;

  padding: 9px 24px;

  background: #ffffff;

  border: 1px solid var(--dorado);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 17px;

  font-weight: 600;

  letter-spacing: .05em;

  color: var(--olivo);

  text-decoration: none;

  transition:
    transform .3s ease,
    background .3s ease;
}

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

  background: var(--marfil);
}



/* =====================================
   CONFIRMACIÓN
===================================== */

.confirmacion-seccion {
  position: relative;

  width: 100%;

  padding:
    105px 20px 135px;

  overflow: hidden;
}


.confirmacion-contenido {
  position: relative;

  z-index: 2;

  width:
    min(950px, 90%);

  margin:
    0 auto;
}


/* =====================================
   FLORAL CONFIRMACIÓN
===================================== */

.floral-confirmacion {
  position: absolute;

  z-index: 1;

  width: 190px;
  height: auto;

  top: 5px;
  left: 0;

  pointer-events: none;
}


/* =====================================
   ENCABEZADO CONFIRMACIÓN
===================================== */

.confirmacion-encabezado {
  width:
    min(820px, 92%);

  margin:
    60px auto 55px;
}


.icono-confirmacion {
  display: block;

  width: 52px;
  height: auto;

  margin-bottom: 5px;
}


.confirmacion-titulo-fila {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 18px;
}


.confirmacion-titulo-fila h2 {
  flex-shrink: 0;

  margin: 0;

  font-family:
    "Allura",
    cursive;

  font-size:
    clamp(48px, 4.3vw, 64px);

  font-weight: 400;

  line-height: .85;

  text-align: left;

  color:
    var(--carbon);
}


.linea-confirmacion {
  display: block;

  flex: 1;

  height: 1px;

  background:
    rgba(44, 44, 44, .48);

  transform-origin:
    left center;
}


/* =====================================
   INFORMACIÓN CONFIRMACIÓN
===================================== */

.confirmacion-info {
  width:
    min(720px, 88%);

  margin:
    0 auto;

  text-align: center;
}


.confirmacion-subtitulo {
  margin-bottom: 5px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(23px, 2.3vw, 31px);

  font-weight: 700;

  line-height: 1.15;

  color:
    var(--carbon);
}


.confirmacion-fecha {
  margin-bottom: 30px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(20px, 2vw, 27px);

  font-weight: 400;

  line-height: 1.25;

  color:
    var(--carbon);
}


/* =====================================
   BOTÓN WHATSAPP
===================================== */

.boton-confirmar {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;
}


.icono-whatsapp-confirmar {
  display: block;

  width: 58px;
  height: 58px;

  object-fit: contain;
}


.boton-confirmar span {
  display: inline-flex;

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

  min-width: 170px;

  padding:
    10px 24px;

  background:
    var(--olivo);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 18px;

  font-weight: 600;

  letter-spacing: .04em;

  color:
    var(--marfil);

  transition:
    transform .3s ease,
    background .3s ease;
}


.boton-confirmar:hover span {
  transform:
    translateY(-2px);

  background:
    #46592a;
}



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

.reveal-hospedaje-floral {
  opacity: 0;

  transform:
    translateX(35px);

  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}


.reveal-hospedaje-floral.visible {
  opacity: 1;

  transform:
    translateX(0);
}


.reveal-hospedaje-titulo {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-hospedaje-titulo.visible {
  opacity: 1;

  transform:
    translateY(0);
}


.reveal-hospedaje-titulo
.icono-hospedaje {
  opacity: 0;

  transform:
    translateY(10px)
    scale(.90);

  transition:
    opacity .8s ease .15s,
    transform .8s ease .15s;
}


.reveal-hospedaje-titulo.visible
.icono-hospedaje {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


.reveal-hospedaje-titulo
.linea-hospedaje {
  transform:
    scaleX(0);

  transition:
    transform 1.1s ease .25s;
}


.reveal-hospedaje-titulo.visible
.linea-hospedaje {
  transform:
    scaleX(1);
}


.reveal-hospedaje-info {
  opacity: 0;

  transform:
    translateY(25px);

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


.reveal-hospedaje-info.visible {
  opacity: 1;

  transform:
    translateY(0);
}



/* =====================================
   ANIMACIONES CONFIRMACIÓN
===================================== */

.reveal-confirmacion-floral {
  opacity: 0;

  transform:
    translateX(-35px);

  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}


.reveal-confirmacion-floral.visible {
  opacity: 1;

  transform:
    translateX(0);
}


.reveal-confirmacion-titulo {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-confirmacion-titulo.visible {
  opacity: 1;

  transform:
    translateY(0);
}


.reveal-confirmacion-titulo
.icono-confirmacion {
  opacity: 0;

  transform:
    translateY(10px)
    scale(.90);

  transition:
    opacity .8s ease .15s,
    transform .8s ease .15s;
}


.reveal-confirmacion-titulo.visible
.icono-confirmacion {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


.reveal-confirmacion-titulo
.linea-confirmacion {
  transform:
    scaleX(0);

  transition:
    transform 1.1s ease .25s;
}


.reveal-confirmacion-titulo.visible
.linea-confirmacion {
  transform:
    scaleX(1);
}


.reveal-confirmacion-info {
  opacity: 0;

  transform:
    translateY(25px);

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


.reveal-confirmacion-info.visible {
  opacity: 1;

  transform:
    translateY(0);
}
/* =========================
   CELULAR
========================= */

@media (max-width: 600px) {

  .presentacion {

    padding:
      45px 12px 70px;

  }


  .monograma {

  font-size: 34px;

  gap: 10px;

}


  .linea-monograma {

  height: 40px;

}


  .nos-casamos {

  font-size: 46px;

  margin-bottom: 30px;

}


  .galeria-presentacion {

    width: 100%;

    grid-template-columns:
      1fr 1.12fr 1fr;

    gap: 7px;

  }


  .foto-novios {

    padding: 5px;

  }


  .foto-izquierda,
  .foto-derecha {

    height: 265px;

  }


  .foto-centro {

    height: 305px;

  }


  /* BOTÓN DE MÚSICA */

  .btn-play {
    width: 48px;
    height: 48px;

    bottom: -22px;

    font-size: 16px;
  }



  .marco-foto::before {

    inset: 4px;

  }


  .icono-imagen {

    font-size: 28px;

  }
  


  .bloque-nombres {

  width: 88%;

  margin-top: 45px;

}


  .fila-nombre {

  gap: 10px;

}


  .nombre-caligrafico {

  font-size: 48px;

}


  .ampersand-novios {

  font-size: 42px;

  margin:
    -2px 0 -1px;

}


  .fila-ana {

  padding-right: 0;

}


  .fila-aaron {

  padding-left: 0;

}
.fecha-evento {

  width: 76%;

  margin-top: 42px;

}


.frase-con-ornamentos {
  width: 92%;
  margin: 34px auto 0;

  display: grid;

  grid-template-columns: 54px minmax(0, 220px) 54px;

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

  gap: 4px;
}

.ornamento-frase {
  width: 100%;
  max-width: 52px;
  height: auto;
}

.ornamento-izquierdo {
  justify-self: end;
}

.ornamento-derecho {
  justify-self: start;
}

.frase-boda {
  width: 100%;
  margin: 0 auto;
}

.frase-boda p {
  font-size: 15px;
  line-height: 1.30;
  text-align: center;
}
.ornamento-izquierdo {
  justify-self: end;
}

.ornamento-derecho {
  justify-self: start;
}

/* =====================================
   VIDEO HORIZONTAL - MÓVIL
===================================== */

.galeria-futura {
  width: 90%;

  margin:
    45px auto 0;
}


/* MARCO EXTERIOR */

.video-boda-marco {
  position: relative;

  width: 100%;

  padding: 7px;

  overflow: hidden;

  border:
    1px solid rgba(197, 168, 128, .65);

  background:
    rgba(252, 251, 249, .72);

  box-shadow:
    0 8px 18px rgba(44, 44, 44, .08);
}
.video-itinerario {
  width: min(900px, 90%);

  margin:
    55px auto 70px;
}

/* MARCO INTERIOR */

.video-boda-marco::before {
  content: "";

  position: absolute;

  z-index: 2;

  inset: 4px;

  border:
    1px solid rgba(197, 168, 128, .42);

  pointer-events: none;
}


/* VIDEO */

.video-boda {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  background: #000;
}
}
/* DATOS DEL INVITADO EN CELULAR */

.datos-invitado {
  top: 15%;
  width: 72%;
}

.apreciable {
  font-size: 12px;
  letter-spacing: .16em;
}

#nombreInvitado {
  font-size: 27px;
  line-height: .95;
  margin: 6px 0 7px;
}

.pases {
  font-size: 13px;
  letter-spacing: .13em;
}
/* ANIMACIÓN FOTOS EN CELULAR */

.reveal-foto-izq {
  transform: translateX(-28px);
}

.reveal-foto-centro {
  transform: translateY(22px);
}

.reveal-foto-der {
  transform: translateX(28px);
}

.reveal-foto-izq.visible,
.reveal-foto-centro.visible,
.reveal-foto-der.visible {
  transform: translate(0);
}
/* =========================
   CONTADOR EN CELULAR
========================= */

.contador-seccion {
  padding:
    25px 10px 80px;
}


.contador-titulo {

  margin-bottom: 30px;

  font-size: 16px;

  letter-spacing: .16em;

}


.contador-grid {

  width: 94%;

}


.contador-item {

  padding:
    8px 5px;

}


.contador-numero {

  font-size: 38px;

}


.contador-etiqueta {

  margin-top: 6px;

  font-size: 9px;

  letter-spacing: .08em;

}


.contador-cierre {

  margin-top: 30px;

  font-size: 14px;

  letter-spacing: .15em;

}


.contador-item:not(:last-child)::after {

  top: 20%;

  height: 60%;

}
.ornamento-contador-box {

  height: 45px;

}


.ornamento-contador {

  width: 62%;

}


.ornamento-contador-box.ornamento-contador-superior {

  margin-bottom: 8px;

}


.ornamento-contador-box.ornamento-contador-inferior {

  margin-top: 10px;

}
/* =====================================
   PADRES - CELULAR
===================================== */

.padres-seccion {
  min-height:
    650px;

  padding:
    90px 20px 105px;

  background-position:
    center center;
}


/* MÁS OSCURO EN CELULAR
   PARA QUE LOS TEXTOS SE LEAN */

.padres-overlay {
  background:
    rgba(28, 37, 30, .72);
}


/* UNA FAMILIA DEBAJO DE LA OTRA */

.padres-contenido {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    48px;
}


/* =====================================
   PRIMER TÍTULO
===================================== */

.titulo-familia {
  gap:
    12px;

  margin-bottom:
    24px;
}


.titulo-caligrafico {
  font-size:
    38px;
}


/* PADRES DE LA NOVIA */

.titulo-familia-izq
.linea-titulo {
  flex:
    1;
}


/* =====================================
   SEGUNDO TÍTULO
===================================== */

.titulo-familia-der {
  flex-direction:
    row;
}


/* EN MÓVIL EL SEGUNDO TÍTULO
   SE VA HACIA LA DERECHA */

.familia-aaron
.titulo-familia {
  margin-left:
    -20px;
}


/* NOMBRES */

.nombres-padres {
  width:
    82%;
}


.nombres-padres p {
  font-size:
    22px;

  line-height:
    1.15;

  letter-spacing:
    .10em;
}


.ampersand-padres {
  margin:
    3px 0;

  font-size:
    24px;
}


/* =====================================
   AJUSTAMOS LAS LÍNEAS COMO REFERENCIA
===================================== */

.familia-ana
.titulo-familia {
  width:
    110%;
}


.familia-aaron
.titulo-familia {
  width:
    105%;
}

/* =====================================
   MADRINAS Y PADRINOS - MÓVIL
===================================== */

.padrinos-seccion {
  width: 100%;

  padding:
    70px 0 35px;

  overflow: hidden;
}


.padrinos-contenido {
  width: 100%;

  margin: 0 auto;

  text-align: center;
}


/* =====================================
   TÍTULO
===================================== */

.padrinos-titulo {
  margin-bottom: 45px;

  padding:
    0 20px;

  font-family:
    "Allura",
    cursive;

  font-size: 43px;

  font-weight: 400;

  line-height: 1;

  color:
    var(--carbon);
}


/* =====================================
   CARRUSEL
===================================== */

.padrinos-grid {
  width: 100%;

  display: flex;

  gap: 16px;

  overflow-x: auto;
  overflow-y: hidden;

  padding:
    0 24px 18px;

  scroll-snap-type:
    x mandatory;

  scroll-padding-left:
    24px;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;
}


/* OCULTAR SCROLLBAR */

.padrinos-grid::-webkit-scrollbar {
  display: none;
}


/* =====================================
   TARJETAS
===================================== */

.padrino-card {
  flex:
    0 0 84%;

  min-height: 175px;

  padding:
    30px 22px 27px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  scroll-snap-align:
    center;

  scroll-snap-stop:
    always;

  background:
    rgba(252, 251, 249, .78);

  border:
    1px solid rgba(197, 168, 128, .55);

  box-shadow:
    0 8px 24px rgba(44, 44, 44, .05);
}


/* =====================================
   DETALLE DECORATIVO
===================================== */

.detalle-padrino {
  display: block;

  width: 36px;
  height: 1px;

  margin-bottom:
    20px;

  background:
    var(--olivo);
}


/* =====================================
   NOMBRES
===================================== */

.padrino-nombres {
  margin-bottom:
    15px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    18px;

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    .035em;

  color:
    var(--carbon);
}


/* =====================================
   TIPO DE PADRINAZGO
===================================== */

.padrino-tipo {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    19px;

  font-weight:
    600;

  line-height:
    1.2;

  letter-spacing:
    .025em;

  color:
    var(--dorado);
}


/* =====================================
   ANIMACIÓN DEL TÍTULO
===================================== */

.reveal-padrinos-titulo {
  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.reveal-padrinos-titulo.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =====================================
   ANIMACIÓN DE TARJETAS
===================================== */

.reveal-padrino-item {
  opacity: 0;

  transform:
    translateY(20px) scale(.98);

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


.reveal-padrino-item.visible {
  opacity: 1;

  transform:
    translateY(0) scale(1);
}
/* =====================================
   INDICADORES CARRUSEL PADRINOS
===================================== */

.padrinos-indicadores {
  display: flex;

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

  gap: 9px;

  margin-top: 16px;
}


.padrinos-punto {
  width: 7px;
  height: 7px;

  padding: 0;

  border: none;
  border-radius: 50%;

  background:
    rgba(85, 107, 47, .28);

  cursor: pointer;

  transition:
    transform .3s ease,
    background .3s ease;
}


.padrinos-punto.activo {
  background:
    var(--olivo);

  transform:
    scale(1.35);
}

/* =====================================
   UBICACIONES - MÓVIL
===================================== */

.ubicaciones-seccion {
  padding:
    30px 0 85px;

  overflow: hidden;
}


/* =====================================
   FLORES
===================================== */

.floral-ubicaciones-izq {
  width: 180px;

  top: 18px;
  left: 0;
}


.floral-ubicaciones-der {
  width: 180px;

  right: 0;
  bottom: -35px;
}

/* MOVIMIENTO MÁS CORTO */

.reveal-floral-izq {
  transform:
    translateX(-25px);
}


.reveal-floral-der {
  transform:
    translateX(35px);
}


.reveal-floral-izq.visible,
.reveal-floral-der.visible {
  transform:
    translateX(0);
}


/* =====================================
   CONTENIDO
===================================== */

.ubicaciones-contenido {
  width:
    100%;
}


/* =====================================
   ENCABEZADO
===================================== */

.ubicaciones-encabezado {
  width: 88%;

  margin:
    125px auto 34px;
}


.icono-ubicaciones {
  width: 36px;
  height: auto;
}


.ubicaciones-titulo-fila {
  gap:
    10px;
}


.ubicaciones-titulo-fila h2 {
  font-size:
    38px;
}


.linea-ubicaciones {
  min-width:
    60px;
}


/* =====================================
   LISTA
===================================== */

.ubicaciones-lista {
  width: 100%;

  gap:
    32px;
}


/* =====================================
   TARJETAS
===================================== */

.ubicacion-card {
  width:
    82%;

  padding:
    19px 19px 22px;

  box-shadow:
    0 10px 22px rgba(44, 44, 44, .17);
}


/* =====================================
   FOTO
===================================== */

.ubicacion-imagen-wrap {
  margin-bottom:
    13px;

  padding:
    5px;
}


.ubicacion-imagen-marco {
  padding:
    4px;
}


.ubicacion-imagen {
  aspect-ratio:
    2 / 1;
}


/* =====================================
   TEXTO
===================================== */

.ubicacion-tipo {
  font-size:
    36px;
}


.ubicacion-lugar {
  font-size:
    16px;

  line-height:
    1.2;
}


.ubicacion-hora {
  font-size:
    15px;
}


.ubicacion-direccion {
  margin-bottom:
    11px;

  font-size:
    15px;
}


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

.boton-maps {
  min-width:
    112px;

  padding:
    7px 14px;

  font-size:
    11px;
}
/* =====================================
   ITINERARIO - MÓVIL
===================================== */

.itinerario-seccion {
  padding:
    65px 16px 85px;
}


.itinerario-contenido {
  width: 100%;
}


/* =====================================
   ITINERARIO - MÓVIL
===================================== */

.itinerario-seccion {
  padding:
    70px 14px 35px;
}


.itinerario-contenido {
  width: 100%;
}


/* =====================================
   ENCABEZADO
===================================== */

.itinerario-encabezado {
  width: 92%;

  margin:
    0 auto 58px;
}


.itinerario-titulo-fila {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 0;
}


/* LÍNEA IZQUIERDA */

.linea-itinerario {
  flex: 1;

  height: 1px;

  margin-right: 10px;

  background:
    rgba(44, 44, 44, .48);

  transform-origin:
    right center;
}


/* TÍTULO + ICONO */

.itinerario-titulo-bloque {
  position: relative;

  flex:
    0 0 auto;

  display: block;

  padding:
    28px 5px 0 0;
}


/* ITINERARIO */

.itinerario-titulo-bloque h2 {
  position: relative;

  z-index: 2;

  font-family:
    "Allura",
    cursive;

  font-size: 43px;

  font-weight: 400;

  line-height: .9;

  color:
    var(--carbon);
}


/* ICONO SOBRE EL LADO DERECHO */

.icono-itinerario {
  position: absolute;

  z-index: 3;

  width: 39px;
  height: auto;

  top: -15px;
  right: 3px;

  margin: 0;
}


/* =====================================
   LISTA DE EVENTOS
===================================== */

.itinerario-lista {
  width: 92%;

  margin:
    0 auto;

  display: flex;

  flex-direction: column;

  gap: 48px;
}


/* =====================================
   CADA EVENTO
===================================== */

.itinerario-item {
  width: 100%;

  display: grid;

  grid-template-columns:
    34% 1px minmax(0, 1fr);

  gap: 14px;

  align-items: center;
}


/* =====================================
   IZQUIERDA:
   ICONO + NOMBRE
===================================== */

.itinerario-evento {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  text-align: center;
}


/* ICONO */

.icono-evento {
  display: block;

  width: 42px;
  height: 42px;

  object-fit: contain;
}


/* CEREMONIA RELIGIOSA / CIVIL / CENA */

.itinerario-evento-nombre {
  width: 100%;
  max-width: 105px;

  margin: 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 16px;

  font-weight: 600;

  line-height: 1.08;

  letter-spacing: .01em;

  text-align: center;

  color:
    var(--carbon);
}


/* =====================================
   DIVISOR
===================================== */

.itinerario-divisor {
  display: block;

  width: 1px;
  height: 82px;

  background:
    rgba(44, 44, 44, .72);
}


/* =====================================
   DERECHA:
   DATOS
===================================== */

.itinerario-detalle {
  width: 100%;
  min-width: 0;

  text-align: left;
}


.itinerario-lugar {
  margin-bottom: 5px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 14px;

  font-weight: 600;

  line-height: 1.15;

  color:
    var(--carbon);
}


/* HORA */

.itinerario-hora-fila {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 5px;
}


.itinerario-hora {
  flex-shrink: 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 13px;

  font-weight: 600;

  color:
    var(--carbon);
}


/* LÍNEA HORA */

.itinerario-linea-detalle {
  display: block;

  flex: 1;

  min-width: 25px;

  height: 1px;

  background:
    rgba(44, 44, 44, .38);
}


/* DIRECCIÓN */

.itinerario-direccion {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 13px;

  font-weight: 400;

  line-height: 1.2;

  color:
    rgba(44, 44, 44, .78);
}


/* =====================================
   ANIMACIÓN
===================================== */

.reveal-itinerario-item {
  transform:
    translateY(20px);
}


.reveal-itinerario-item.visible {
  transform:
    translateY(0);
}
/* =====================================
   DRESS CODE - MÓVIL
===================================== */

.dresscode-seccion {
  padding:
    20px 0 80px;

  overflow:
    hidden;
}


.dresscode-contenido {
  width:
    100%;
}


/* =====================================
   ORNAMENTO IZQUIERDO
===================================== */

.floral-dresscode-izq {
  width: 180px;

  top: -39px;

  left: 0;
}


/* =====================================
   ORNAMENTO DERECHO
===================================== */

.floral-dresscode-der {
  width: 180px;

  right: 0;

  bottom: -110px;
}


/* MOVIMIENTO */

.reveal-dresscode-floral-izq {
  transform:
    translateX(-22px);
}


.reveal-dresscode-floral-der {
  transform:
    translateX(22px);
}


.reveal-dresscode-floral-izq.visible,
.reveal-dresscode-floral-der.visible {
  transform:
    translateX(0);
}


/* =====================================
   ENCABEZADO
===================================== */

.dresscode-encabezado {
  width: 88%;

  margin:
    65px auto 22px;
}


/* ICONO ARRIBA Y ALINEADO A IZQUIERDA */

.icono-dresscode {
  width:
    40px;

  margin:
    0 0 6px 0;
}


/* TÍTULO */

.dresscode-titulo-fila {
  gap:
    10px;
}


.dresscode-titulo-fila h2 {
  font-size:
    42px;
}


.linea-dresscode {
  min-width:
    70px;
}


/* =====================================
   ELLOS / ELLAS
===================================== */

.dresscode-opciones {
  width:
    78%;

  margin:
    0 auto;

  grid-template-columns:
    1fr 1fr;

  gap:
    28px;

  align-items:
    end;
}


/* ÁREA DE ICONOS */

.dresscode-icono-wrap {
  width: 100%;
  height: 135px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  margin-bottom: 10px;
}


.dresscode-icono-persona {
  display: block;

  width: auto;
  height: 132px;

  object-fit: contain;
  object-position: center bottom;
}


/* ELLOS / ELLAS */

.dresscode-item h3 {
  height: 30px;

  margin: 0 0 4px;

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

  font-size: 24px;
  line-height: 1;
}


.dresscode-item p {
  min-height: 48px;

  margin: 0;

  font-size: 20px;
  line-height: 1.12;

  text-align: center;
}

/* AJUSTE VISUAL INDIVIDUAL */

/* TRAJE Y VESTIDO DEL MISMO TAMAÑO EN MÓVIL */
.dresscode-item:nth-child(1)
.dresscode-icono-persona,
.dresscode-item:nth-child(2)
.dresscode-icono-persona {
  width: 96px;
  height: 132px;
}


/* =====================================
   PROHIBIDO
===================================== */

.dresscode-restricciones {
  width: 88%;

  margin:
    42px auto 0;
}


.dresscode-prohibido-texto {
  margin:
    0 auto 16px;

  font-size:
    19px;

  line-height:
    1.3;
}


.dresscode-prohibido-texto strong {
  font-size:
    21px;
}


.dresscode-colores-prohibidos {
  width: 100%;

  max-width: 330px;

  margin:
    0 auto;
}
/* =====================================
   SUGERENCIAS DE REGALO - MÓVIL
===================================== */

.regalo-seccion {
  padding:
    55px 0 85px;

  overflow:
    visible;
}


.regalo-contenido {
  width:
    100%;
}



/* =====================================
   ENCABEZADO
===================================== */

.regalo-encabezado {
  width:
    92%;

  margin:
    0 auto 45px;
}


.regalo-titulo-fila {
  width:
    100%;

  gap:
    10px;

  align-items:
    center;
}



/* LÍNEA */

.linea-regalo {
  min-width:
    70px;
}



/* BLOQUE DERECHO */

.regalo-titulo-bloque {
  min-width: 155px;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  text-align: right;
}



/* ICONO */

.icono-regalo {
  width: 40px;
  height: auto;

  margin:
    0 0 4px auto;
}



/* TÍTULO */

.regalo-titulo-bloque h2 {
  margin: 0;

  font-size: 39px;

  line-height: .84;

  text-align: right;
}



/* =====================================
   REGALO LIBRE
===================================== */

.regalo-principal {
  width:
    82%;

  margin:
    5px auto 0;
}



/* REGALO */

.regalo-palabra {
  font-size:
    62px;

  line-height:
    .8;

  letter-spacing:
    .03em;
}



/* libre */

.regalo-libre {
  margin:
    -1px 0 0;

  font-size:
    70px;

  line-height:
    .78;
}



/* CORAZONES */

.ornamento-regalo {
  width:
    58%;

  margin-top:
    14px;
}



/* =====================================
   FLORAL
===================================== */

 .floral-regalo {
  width: 180px;

  left: 0;
  bottom: -85px;

  z-index: 2;
}

/* =====================================
   ÁLBUM DIGITAL - MÓVIL
===================================== */

.album-seccion {
  padding:
    45px 0 30px;
}


.album-contenido {
  width: 100%;
}







/* =====================================
   ENCABEZADO
===================================== */

.album-encabezado {
  width: 88%;

  margin:
    90px auto 38px;
}


.icono-album {
  width: 40px;

  margin-bottom: 5px;
}


.album-titulo-fila {
  gap: 10px;
}


.album-titulo-fila h2 {
  font-size: 42px;
}


.linea-album {
  min-width: 70px;
}



/* =====================================
   CARRUSEL
===================================== */

.album-carrusel {
  width: 100%;

  gap: 14px;

  padding:
    5px 24px 18px;

  scroll-padding-left:
    24px;
}



/* UNA FOTO GRANDE + PEEK DE LA SIGUIENTE */

.album-slide {
  flex:
    0 0 82%;

  aspect-ratio:
    4 / 5;

  padding: 6px;

  scroll-snap-align:
    center;
}



/* DOTS */

.album-indicadores {
  gap: 5px;

  margin-top: 11px;
}


.album-punto {
  width: 5px;
  height: 5px;
}



/* =====================================
   LIGHTBOX MÓVIL
===================================== */

.album-lightbox {
  padding:
    52px 12px 35px;
}


.album-lightbox-imagen {
  max-width:
    96vw;

  max-height:
    84vh;
}


.album-lightbox-cerrar {
  top: 12px;
  right: 14px;
}


.album-lightbox-flecha {
  width: 36px;
  height: 52px;

  font-size: 36px;

  background:
    rgba(0,0,0,.20);
}


.album-lightbox-anterior {
  left: 4px;
}


.album-lightbox-siguiente {
  right: 4px;
}

/* =====================================
   HOSPEDAJE + CONFIRMACIÓN - MÓVIL
===================================== */

@media (max-width: 600px) {


  /* =====================================
     HOSPEDAJE
  ===================================== */

 .hospedaje-seccion {
  padding:
    15px 0 45px;
}


  .hospedaje-contenido {
    width: 100%;
  }


  /* MISMO TAMAÑO FLORAL:
     180px */

.floral-hospedaje {
  width: 180px;
  right: 0;
  top: -45px;   /* subir */
  z-index: 1;
}


 .hospedaje-encabezado {
  width: 92%;

  margin:
    58px auto 32px;
}


  .hospedaje-titulo-fila {
    gap: 10px;
  }


  .hospedaje-titulo-bloque {
    min-width: 145px;
  }


  .icono-hospedaje {
    width: 40px;

    margin:
      0 0 4px auto;
  }


  .hospedaje-titulo-bloque {
    align-items: flex-end;

    text-align: right;
  }


  .hospedaje-titulo-bloque h2 {
    font-size: 41px;

    line-height: .9;

    text-align: right;
  }


  .linea-hospedaje {
    min-width: 70px;
  }


  /* INFORMACIÓN */

  .hospedaje-info {
    width: 84%;
  }


  .hospedaje-destacado {
    font-size: 19px;

    line-height: 1.2;
  }


  .hospedaje-texto {
    margin-top: 5px;

    margin-bottom: 13px;

    font-size: 17px;

    line-height: 1.25;
  }


  .hospedaje-clave {
    padding:
      6px 14px;

    font-size: 18px;
  }



  /* =====================================
     CONFIRMACIÓN
  ===================================== */

  .confirmacion-seccion {
  padding:
    20px 0 70px;
}


  .confirmacion-contenido {
    width: 100%;
  }


  /* MISMO ESTÁNDAR FLORAL */

 .floral-confirmacion {
  width: 180px;
  left: 0;
  top: -45px;   /* subir */
  z-index: 1;
}


 .confirmacion-encabezado {
  width: 88%;

  margin:
    62px auto 35px;
}


  .icono-confirmacion {
    width: 40px;

    margin:
      0 0 5px 0;
  }


  .confirmacion-titulo-fila {
    gap: 10px;
  }


  .confirmacion-titulo-fila h2 {
    font-size: 39px;

    line-height: .86;
  }


  .linea-confirmacion {
    min-width: 60px;
  }


  /* TEXTO */

  .confirmacion-info {
    width: 84%;
  }


  .confirmacion-subtitulo {
    font-size: 19px;
  }


  .confirmacion-fecha {
    margin-bottom: 26px;

    font-size: 17px;

    line-height: 1.25;
  }


  /* BOTÓN */

  .boton-confirmar {
    gap: 10px;
  }


  .icono-whatsapp-confirmar {
    width: 46px;
    height: 46px;
  }


  .boton-confirmar span {
    min-width: 135px;

    padding:
      9px 18px;

    font-size: 15px;
  }

}









/* ==================================================
   PRESENTACIÓN EDITORIAL - AJUSTE FINAL
================================================== */

.presentacion {
  padding-top: 35px;
  padding-left: 0;
  padding-right: 0;
}


.monograma {
  gap: 16px;

  margin-bottom: 5px;

  font-size: 52px;

  color:
    rgba(197, 168, 128, .78);
}


.linea-monograma {
  height: 52px;

  background:
    rgba(197, 168, 128, .65);
}


.nos-casamos {
  margin:
    0 0 30px;

  font-size: 58px;

  line-height: .9;

  color:
    rgba(44, 44, 44, .72);
}


/* GALERÍA */

.galeria-presentacion {
  width:
    min(850px, 100%);

  grid-template-columns:
    .66fr 1fr .66fr;

  gap: 14px;

  align-items: center;
}


/* FOTOS + VIDEO */

.foto-novios {
  width: 100%;
  min-width: 0;

  padding: 0;

  overflow: hidden;

  background:
    transparent;

  box-shadow:
    none;
}


.foto-centro {
  height: 510px;

  z-index: 3;
}


.foto-izquierda,
.foto-derecha {
  height: 355px;
}


.marco-foto {
  width: 100%;
  height: 100%;

  overflow: hidden;

  border: none;

  background:
    transparent;
}


.marco-foto::before {
  display: none;
}


.imagen-novios,
.video-presentacion {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;
  min-width: 0;

  object-fit: cover;

  object-position: center;
}


/* NOMBRES */

.bloque-nombres {
  margin-top: 55px;
}



/* ==================================================
   PRESENTACIÓN - CELULAR
================================================== */

@media (max-width: 600px) {

 .presentacion {
  padding:
    10px 0 20px;
}


  /* A | A */

  .monograma {
    gap: 9px;

    margin-bottom: 0;

    font-size: 34px;
  }


  .linea-monograma {
    height: 36px;
  }


  /* NOS CASAMOS */

  .nos-casamos {
    margin:
      0 0 14px;

    font-size: 40px;

    line-height: .9;
  }


  /* =====================================
     LAS TRES COLUMNAS
  ===================================== */

  .galeria-presentacion {
    width: 100%;

    margin:
      0 auto;

    display: grid;

    grid-template-columns:
      .66fr 1fr .66fr;

    gap: 8px;

    align-items: center;

    overflow: hidden;
  }


  /* CADA COLUMNA */

  .foto-novios {
    width: 100%;
    min-width: 0;

    padding: 0;

    overflow: hidden;

    background:
      transparent;

    box-shadow:
      none;
  }


  /* LATERALES */

  .foto-izquierda,
  .foto-derecha {
    height: 220px;
  }


  /* VIDEO CENTRAL */

  .foto-centro {
    height: 315px;

    z-index: 2;
  }


  /* CONTENEDOR */

  .marco-foto {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border: none;

    background:
      transparent;
  }


  .marco-foto::before {
    display: none;
  }


  /* FOTOS + VIDEO */

  .imagen-novios,
  .video-presentacion {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    max-width: 100%;

    object-fit: cover;

    object-position: center;
  }


  /* ANA & AARÓN */

  .bloque-nombres {
    width: 88%;

    margin:
      55px auto 0;
  }

}