:root {
  --crema: #f5efe5;
  --crema-claro: #fcf9f4;
  --beige: #ded0bd;
  --beige-oscuro: #b8a68e;
  --cafe: #4e4135;
  --cafe-claro: #766758;
  --dorado: #b6904c;
  --dorado-claro: #d8bd82;
  --verde: #737866;
  --blanco: #ffffff;
  --negro: #1f1c19;

  --fuente-titulos: "Great Vibes", cursive;
  --fuente-textos: "Marcellus", serif;

  --sombra-suave:
    0 20px 60px rgba(43, 34, 25, 0.14);

  --transicion:
    0.5s cubic-bezier(0.22, 1, 0.36, 1);
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--cafe);
  background: var(--crema-claro);
  font-family: var(--fuente-textos);
  font-size: 16px;
  line-height: 1.8;
  overflow: hidden;
}

body.invitacion-abierta {
  overflow-x: hidden;
  overflow-y: auto;
}

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

button,
a {
  font: inherit;
}

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

button {
  color: inherit;
}

.pantalla-sobre {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  min-height: 100vh;
  min-height: 100svh;

  overflow: hidden;
  background: var(--crema);
}

.fondo-sobre {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.75),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(183, 160, 122, 0.28),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #f6f0e7,
      #ded1be
    );
}

.fondo-sobre::after {
  content: "";
  position: absolute;
  inset: 0;

  opacity: 0.22;

  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 2px,
      rgba(83, 67, 48, 0.04) 2px,
      rgba(83, 67, 48, 0.04) 3px
    );
}

.sobre {
  position: relative;
  z-index: 2;

  width: min(760px, 88vw);
  height: min(480px, 57vw);

  min-height: 300px;
  max-height: 480px;

  perspective: 1600px;
  filter:
    drop-shadow(0 30px 35px rgba(48, 37, 25, 0.25));
}

.sobre-interior {
  position: absolute;
  inset: 0;
  z-index: 1;

  border-radius: 4px;
  background: #b9a88f;
}

.sobre-base {
  position: absolute;
  inset: 0;
  z-index: 2;

  border-radius: 4px;
  background:
    linear-gradient(
      140deg,
      #eee4d5,
      #d7c7b1
    );
}

.carta {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 10%;
  z-index: 3;

  height: 90%;

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

  padding: 2rem;

  text-align: center;
  background: var(--crema-claro);
  box-shadow: 0 10px 25px rgba(48, 37, 25, 0.15);

  transform: translateY(8%);
}

.carta-frase {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.65rem;
}

.carta-nombres {
  margin: 1rem 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 400;
  line-height: 0.85;
}

.carta-nombres span {
  display: block;
  margin: 0.65rem 0;
  color: var(--dorado);
  font-size: 0.5em;
}

.carta-fecha {
  margin: 0;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
}

.solapa {
  position: absolute;
  inset: 0;
  z-index: 5;

  background: var(--crema);
}

.solapa-izquierda {
  clip-path: polygon(
    0 0,
    53% 50%,
    0 100%
  );

  background:
    linear-gradient(
      110deg,
      #eee3d3,
      #d3c1a8
    );
}

.solapa-derecha {
  clip-path: polygon(
    100% 0,
    47% 50%,
    100% 100%
  );

  background:
    linear-gradient(
      250deg,
      #eee3d3,
      #d3c1a8
    );
}

.solapa-inferior {
  z-index: 6;

  clip-path: polygon(
    0 100%,
    50% 43%,
    100% 100%
  );

  background:
    linear-gradient(
      to top,
      #e8dccb,
      #d6c5ad
    );
}

.solapa-superior {
  position: absolute;
  inset: 0;
  z-index: 7;

  clip-path: polygon(
    0 0,
    100% 0,
    50% 57%
  );

  background:
    linear-gradient(
      to bottom,
      #f6eee2,
      #d9c8af
    );

  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.boton-sello {
  position: absolute;
  top: 51%;
  left: 50%;
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;

  padding: 0;
  border: 0;
  background: transparent;

  cursor: pointer;
  transform: translate(-50%, -50%);
}

.texto-abrir {
  padding: 0.35rem 0.8rem;
  border-radius: 50px;

  color: var(--blanco);
  background: rgba(75, 64, 51, 0.75);

  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  animation: flotarTexto 2s ease-in-out infinite;
}

.sello {
  position: relative;

  width: 88px;
  height: 88px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;

  border: 3px double #8f6a2d;
  border-radius: 50%;

  color: #79561f;
  background:
    radial-gradient(
      circle at 35% 30%,
      #f2dca5,
      #c59b50 70%
    );

  font-family: var(--fuente-titulos);
  font-size: 1.7rem;
  font-weight: 600;

  box-shadow:
    0 9px 18px rgba(52, 38, 22, 0.3),
    inset 0 0 0 5px rgba(255, 255, 255, 0.2);

  transition: transform var(--transicion);
  animation: pulsoSello 2s ease-in-out infinite;
}

.sello::before {
  content: "";
  position: absolute;
  inset: 8px;

  border: 1px solid rgba(100, 69, 22, 0.7);
  border-radius: 50%;
}

.sello small {
  font-size: 0.7em;
}

.boton-sello:hover .sello {
  transform: scale(1.08);
}

.indicacion-sobre {
  position: absolute;
  bottom: 5%;
  z-index: 3;

  margin: 0;

  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}



@keyframes pulsoSello {
  0%,
  100% {
    box-shadow:
      0 9px 18px rgba(52, 38, 22, 0.3),
      0 0 0 0 rgba(182, 144, 76, 0.25);
  }

  50% {
    box-shadow:
      0 9px 18px rgba(52, 38, 22, 0.3),
      0 0 0 17px rgba(182, 144, 76, 0);
  }
}

@keyframes flotarTexto {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.invitacion {
  position: relative;
  z-index: 1;

  visibility: hidden;
  opacity: 0;

  background: var(--crema-claro);
}

.invitacion.visible {
  visibility: visible;
}

.contenedor {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.seccion {
  position: relative;
  padding: 110px 0;
}

.etiqueta-seccion {
  margin: 0 0 0.7rem;

  color: var(--dorado);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.etiqueta-seccion.clara {
  color: var(--dorado-claro);
}

.titulo-seccion {
  margin: 0;

  color: var(--cafe);
  font-family: var(--fuente-titulos);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
}

.titulo-seccion.claro {
  color: var(--blanco);
}

.adorno-linea {
  width: 80px;
  height: 1px;
  margin: 1.6rem 0;

  background: var(--dorado);
}

.adorno-linea.centrado {
  margin-inline: auto;
}

.adorno-linea.claro {
  background: var(--dorado-claro);
}

.encabezado-seccion {
  max-width: 760px;
  margin: 0 auto 70px;
  text-align: center;
}

.boton {
  min-width: 180px;

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

  padding: 0.9rem 1.6rem;
  border: 1px solid var(--dorado);

  color: var(--blanco);
  background: var(--dorado);

  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  cursor: pointer;
  transition:
    color var(--transicion),
    background var(--transicion),
    transform var(--transicion);
}

.boton:hover {
  color: var(--dorado);
  background: transparent;
  transform: translateY(-3px);
}

.boton-secundario {
  color: var(--dorado);
  background: transparent;
}

.boton-secundario:hover {
  color: var(--blanco);
  background: var(--dorado);
}

.marco-foto {
  position: relative;
}

.marco-foto::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -18px;
  z-index: -1;

  width: 65%;
  height: 65%;

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


.hero {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: grid;
  place-items: center;

  overflow: hidden;
  color: var(--blanco);
}

.hero-imagen {
  position: absolute;
  inset: -5%;

  background:
    url("../img/portada.jpg?v=2")
    center 40% / cover no-repeat;

  transform: scale(1.1);
}

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

  background:
    linear-gradient(
      to bottom,
      rgba(21, 18, 15, 0.28),
      rgba(21, 18, 15, 0.52)
    );
}

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

  width: min(1000px, calc(100% - 30px));

  text-align: center;
}

.hero-subtitulo {
  margin: 0 0 3.2rem;

  font-size: 0.8rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.hero-titulo {
  margin: 0;

  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: clamp(4.4rem, 13vw, 10rem);
  font-weight: 400;
  line-height: 0.66;
}

.hero-titulo .nombre {
  display: block;
}

.hero-titulo .ampersand {
  display: block;

  margin: 0.35em 0;

  color: var(--dorado-claro);
  font-size: 0.38em;
  font-style: italic;
}

.hero-linea {
  width: 90px;
  height: 1px;
  margin: 2.4rem auto 1.5rem;

  background: var(--dorado-claro);
}

.hero-fecha {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.scroll-indicador {
  position: absolute;
  left: 50%;
  bottom: 0px;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;

  width: max-content;

  color: #ffffff;
  opacity: 1;

  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;

  transform: translateX(-50%);
}

.scroll-indicador i {
  position: relative;

  width: 1px;
  height: 48px;

  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
}

.scroll-indicador i::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;

  width: 100%;
  height: 100%;

  background: var(--blanco);
  animation: lineaScroll 2s ease-in-out infinite;
}

@keyframes lineaScroll {
  to {
    top: 100%;
  }
}


.bienvenida {
  background: var(--crema-claro);
}

.bloque-dos-columnas {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
}

.bienvenida-imagen img {
  width: 100%;
  height: min(680px, 75vh);

  object-fit: cover;
}

.bienvenida-texto {
  max-width: 530px;
}

.bienvenida-texto p {
  color: var(--cafe-claro);
}

.bienvenida-texto .firma {
  margin-top: 2rem;

  color: var(--dorado);
  font-family: var(--fuente-titulos);
  font-size: 1.7rem;
  font-style: italic;
}

.seccion-frase {
  position: relative;

  min-height: 75vh;

  display: grid;
  place-items: center;

  overflow: hidden;
  color: var(--blanco);
}

.frase-fondo {
  position: absolute;
  inset: -8%;

  background:
    url("../img/historia.jpg")
    center / cover no-repeat;
}

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

  background: rgba(35, 30, 25, 0.62);
}

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

  width: min(850px, calc(100% - 40px));
  text-align: center;
}

.comillas {
  color: var(--dorado-claro);
  font-family: var(--fuente-titulos);
  font-size: 7rem;
  line-height: 0.5;
}

.frase-contenido blockquote {
  margin: 1.5rem 0;

  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-style: italic;
  line-height: 1.15;
}

.frase-contenido p {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cuenta-regresiva {
  background: var(--crema);
}

.contador {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 3vw, 40px);
}

.contador-item {
  min-width: 100px;
  text-align: center;
}

.contador-item strong {
  display: block;

  color: var(--cafe);
  font-family: var(--fuente-titulos);
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
}

.contador-item span {
  display: block;
  margin-top: 0.7rem;

  color: var(--cafe-claro);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.contador-separador {
  color: var(--dorado);
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
}

.mensaje-contador {
  margin: 2rem 0 0;
  text-align: center;
}

.familia {
  background: var(--crema-claro);
}

.tarjetas-familia {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 50px;
}

.tarjeta-familia {
  padding: 45px;
  text-align: center;
  border: 1px solid rgba(182, 144, 76, 0.35);
}

.familia-tipo {
  color: var(--dorado);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tarjeta-familia h3 {
  margin: 0.5rem 0;

  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 400;
}

.tarjeta-familia > span {
  color: var(--dorado);
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
}

.separador-familia {
  width: 90px;
  height: 90px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;

  border: 1px solid var(--dorado);
  border-radius: 50%;

  color: var(--dorado);
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
}


.eventos {
  background: var(--crema);
}

.eventos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px;
}

.evento-card {
  padding: clamp(35px, 5vw, 65px);
  text-align: center;
  background: var(--crema-claro);
  box-shadow: var(--sombra-suave);
}

.evento-icono {
  color: var(--dorado);
  font-size: 3rem;
}

.evento-tipo {
  margin-bottom: 0.6rem;

  color: var(--dorado);
  font-size: 0.67rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.evento-card h3 {
  margin: 0;

  font-family: var(--fuente-titulos);
  font-size: 2.7rem;
  font-weight: 400;
}

.evento-hora {
  color: var(--dorado);
  font-weight: 600;
}

.evento-direccion {
  margin-bottom: 2rem;
  color: var(--cafe-claro);
}


.itinerario {
  background: var(--crema-claro);
}

.linea-tiempo {
  position: relative;
  max-width: 850px;
  margin-inline: auto;
}

.linea-tiempo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;

  width: 1px;
  background: var(--dorado);
}

.momento {
  position: relative;

  width: 50%;
  min-height: 130px;

  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: start;
  gap: 35px;

  padding: 0 70px 60px 0;
}

.momento-derecha {
  margin-left: 50%;
  padding: 0 0 60px 70px;
}

.momento-punto {
  position: absolute;
  top: 13px;
  right: -8px;

  width: 16px;
  height: 16px;

  border: 4px solid var(--crema-claro);
  border-radius: 50%;

  background: var(--dorado);
  box-shadow: 0 0 0 1px var(--dorado);
}

.momento-derecha .momento-punto {
  right: auto;
  left: -8px;
}

.momento-hora {
  color: var(--dorado);
  font-family: var(--fuente-titulos);
  font-size: 2rem;
}

.momento-info h3 {
  margin: 0;

  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 400;
}

.momento-info p {
  margin: 0.5rem 0 0;
  color: var(--cafe-claro);
}

.vestimenta {
  background: var(--verde);
  color: var(--blanco);
}

.vestimenta-contenido {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  gap: 80px;
}

.vestimenta .titulo-seccion {
  color: var(--blanco);
}

.vestimenta-texto {
  max-width: 600px;
}

.vestimenta-texto p:not(.etiqueta-seccion) {
  color: rgba(255, 255, 255, 0.8);
}

.paleta-colores {
  display: flex;
  gap: 15px;
  margin-top: 2rem;
}

.color {
  width: 45px;
  height: 45px;

  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.color-1 {
  background: #323641;
}

.color-2 {
  background: #72594c;
}

.color-3 {
  background: #8b2e3d;
}

.color-4 {
  background: #485e4a;
}

.vestimenta-figuras {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 25px;

  color: var(--dorado-claro);
  font-family: var(--fuente-titulos);
}

.figura-vestido {
  font-size: clamp(8rem, 18vw, 14rem);
}

.figura-traje {
  font-size: clamp(7rem, 16vw, 12rem);
}

.galeria {
  background: var(--crema-claro);
}

.galeria-grid{

    display:grid;

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

    grid-auto-rows:110px;

    gap:18px;

}

.foto1{

    grid-column:1 / 8;
    grid-row:1 / 5;

}

.foto2{

    grid-column:8 / 13;
    grid-row:1 / 3;

}

.foto3{

    grid-column:8 / 13;
    grid-row:3 / 5;

}

.foto4{

    grid-column:1 / 5;
    grid-row:5 / 8;

}

.foto5{

    grid-column:5 / 13;
    grid-row:5 / 8;

}

.foto6{

    grid-column:1 / 13;
    grid-row:8 / 11;

}

.foto{

    overflow:hidden;

    border-radius:14px;

}

.foto img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s;

}

.foto:hover img{

    transform:scale(1.08);

}

.galeria-item {
  margin: 0;
  overflow: hidden;
}

.galeria-grande {
  grid-row: span 2;
}

.galeria-horizontal {
  grid-column: span 1;
}

.galeria-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  transition: transform 1.2s ease;
}

.galeria-item:hover img {
  transform: scale(1.07);
}

.regalos {
  background: var(--crema);
}

.regalos-contenido {
  max-width: 750px;
  text-align: center;
}

.regalo-icono {
  margin-bottom: 1rem;
  color: var(--dorado);
  font-size: 4rem;
}

.regalos-contenido > p:not(.etiqueta-seccion) {
  color: var(--cafe-claro);
}

.botones-regalos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;

  margin-top: 2.2rem;
}

.datos-bancarios {
  max-height: 0;
  margin-top: 0;

  overflow: hidden;
  opacity: 0;

  border: 1px solid transparent;

  transition:
    max-height 0.6s ease,
    opacity 0.4s ease,
    padding 0.6s ease,
    margin 0.6s ease,
    border-color 0.6s ease;
}

.datos-bancarios.visible {
  max-height: 350px;
  margin-top: 2rem;
  padding: 1.5rem;

  opacity: 1;
  border-color: rgba(182, 144, 76, 0.4);
}

.datos-bancarios p {
  margin: 0.4rem 0;
}

.confirmacion {
  position: relative;

  min-height: 75vh;

  display: grid;
  place-items: center;

  overflow: hidden;
  color: var(--blanco);
}

.confirmacion-fondo {
  position: absolute;
  inset: -5%;

  background:
    url("../img/portada.jpg?v=2")
    center / cover no-repeat;
}

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

  background: rgba(32, 27, 23, 0.72);
}

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

  max-width: 760px;
  text-align: center;
}

.confirmacion-contenido > p:not(.etiqueta-seccion) {
  color: rgba(255, 255, 255, 0.82);
}

.boton-claro {
  margin-top: 1.5rem;

  color: var(--cafe);
  border-color: var(--blanco);
  background: var(--blanco);
}

.boton-claro:hover {
  color: var(--blanco);
  border-color: var(--blanco);
}

.footer {
  padding: 85px 20px;

  color: var(--blanco);
  background: var(--negro);

  text-align: center;
}

.footer-monograma {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;

  border: 1px solid var(--dorado);
  border-radius: 50%;

  color: var(--dorado-claro);
  font-family: var(--fuente-titulos);
  font-size: 1.8rem;
}

.footer h2 {
  margin: 0;

  font-family: var(--fuente-titulos);
  font-size: 3.2rem;
  font-weight: 400;
}

.footer p {
  margin: 0.5rem 0;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer .footer-mensaje {
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
}

.boton-musica {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;

  width: 54px;
  height: 54px;

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

  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;

  color: var(--blanco);
  background: rgba(46, 40, 34, 0.75);
  backdrop-filter: blur(9px);

  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.icono-musica {
  font-size: 1.2rem;
}

.ondas-musica {
  position: absolute;

  display: flex;
  align-items: flex-end;
  gap: 2px;

  opacity: 0;
}

.ondas-musica i {
  width: 2px;
  height: 15px;
  background: var(--blanco);
}

.boton-musica.reproduciendo .icono-musica {
  opacity: 0;
}

.boton-musica.reproduciendo .ondas-musica {
  opacity: 1;
}

.boton-musica.reproduciendo .ondas-musica i {
  animation: onda 0.75s ease-in-out infinite alternate;
}

.boton-musica.reproduciendo .ondas-musica i:nth-child(2) {
  animation-delay: 0.2s;
}

.boton-musica.reproduciendo .ondas-musica i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes onda {
  from {
    height: 5px;
  }

  to {
    height: 20px;
  }
}

@media (max-width: 900px) {

  .seccion {
    padding: 90px 0;
  }

  .bloque-dos-columnas,
  .vestimenta-contenido {
    grid-template-columns: 1fr;
  }

  .bienvenida-imagen {
    width: min(580px, 90%);
    margin-inline: auto;
  }

  .bienvenida-texto {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
  }

  .bienvenida-texto .adorno-linea {
    margin-inline: auto;
  }

  .tarjetas-familia {
    grid-template-columns: 1fr;
  }

  .separador-familia {
    margin-inline: auto;
  }

  .vestimenta-texto {
    margin-inline: auto;
    text-align: center;
  }

  .vestimenta-texto .adorno-linea,
  .paleta-colores {
    justify-content: center;
    margin-inline: auto;
  }

  .vestimenta-figuras {
    order: -1;
  }
}

@media (max-width: 650px) {

  .contenedor {
    width: min(100% - 28px, 1120px);
  }

  .seccion {
    padding: 75px 0;
  }

  .sobre {
  width: min(92vw, 500px);
  height: auto;
  aspect-ratio: 1.35 / 1;

  min-height: 340px;
  max-height: none;
}

  .sello {
    width: 72px;
    height: 72px;
    font-size: 1.35rem;
  }

  .carta {
  left: 5%;
  right: 5%;
  bottom: 8%;

  height: 94%;
  padding: 1.4rem 1rem 2.6rem;

  transform: translateY(3%);
}
.carta-frase {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
}

  .carta-nombres {
  margin: 0.7rem 0;
  font-size: clamp(2.7rem, 12vw, 4rem);
  line-height: 0.92;
}

.carta-nombres span {
  margin: 0.35rem 0;
  font-size: 0.48em;
}

.carta-fecha {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
}

  .indicacion-sobre {
    bottom: 3%;
  }

  .hero-titulo {
    font-size: clamp(4rem, 21vw, 6rem);
  }

  .scroll-indicador {
  bottom: 20px;
  width: 100%;
}

  .bienvenida-imagen img {
    height: 500px;
  }

  .titulo-seccion {
    font-size: clamp(2.6rem, 14vw, 4rem);
  }

  .contador {
    gap: 5px;
  }

  .contador-item {
    min-width: 58px;
  }

  .contador-item strong {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }

  .contador-item span {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
  }

  .contador-separador {
    font-size: 2.5rem;
  }

  .eventos-grid {
    grid-template-columns: 1fr;
  }

  .tarjeta-familia {
    padding: 35px 20px;
  }

  .linea-tiempo::before {
    left: 21px;
  }

  .momento,
  .momento-derecha {
    width: 100%;
    margin-left: 0;
    padding: 0 0 60px 70px;

    grid-template-columns: 70px 1fr;
    gap: 15px;
  }

  .momento-punto,
  .momento-derecha .momento-punto {
    top: 13px;
    right: auto;
    left: 13px;
  }

  .momento-hora {
    font-size: 1.6rem;
  }

  .momento-info h3 {
    font-size: 1.7rem;
  }

  .galeria-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 18px;
}

/* Cancela las posiciones de escritorio */
.foto1,
.foto2,
.foto3,
.foto4,
.foto5,
.foto6 {
  grid-column: 1 / -1;
  grid-row: auto;
}

/* Evita el margen predeterminado de <figure> */
.foto {
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;

  overflow: hidden;
  border-radius: 14px;
}

.foto img {
  width: 100%;
  height: 100%;

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

  .botones-regalos {
    flex-direction: column;
  }

  .boton {
    width: 100%;
  }

  .solapa-inferior {
  clip-path: polygon(
    0 100%,
    50% 48%,
    100% 100%
  );
}

.solapa-superior {
  clip-path: polygon(
    0 0,
    100% 0,
    50% 52%
  );
}
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}

.bloque-padrinos {
  margin-top: 120px;
}

.bloque-padrinos .encabezado-seccion {
  margin-bottom: 55px;
}

.padrinos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.tarjeta-padrino {
  min-height: 330px;

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

  padding: 42px 35px;

  border: 1px solid rgba(182, 144, 76, 0.4);

  text-align: center;
  background: rgba(255, 255, 255, 0.18);

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

.tarjeta-padrino:hover {
  transform: translateY(-7px);

  background: rgba(255, 255, 255, 0.42);

  box-shadow:
    0 20px 45px rgba(70, 55, 39, 0.1);
}

.nombres-padrinos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 195px;
}

.tarjeta-padrino h3 {
  max-width: 390px;
  margin: 0.55rem auto;

  color: var(--cafe);
  font-family: var(--fuente-titulos);
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
}

.tarjeta-padrino .nombres-padrinos > span {
  display: block;
  margin: 0.25rem 0;

  color: var(--dorado);
  font-family: var(--fuente-titulos);
  font-size: 1.55rem;
}

.cruz {
  margin-right: 0.2rem;
  color: var(--dorado);
}

.hero {
  position: relative;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  display: grid;
  place-items: center;

  overflow: hidden;
  color: var(--blanco);

  background-image: url("../img/portada.jpg?v=2");
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Ya no se necesita este div para mostrar la imagen */
.hero-imagen {
  display: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(21, 18, 15, 0.28),
    rgba(21, 18, 15, 0.52)
  );
}

.hero-contenido {
  position: relative;
  z-index: 2;
}

.confirmacion {
  position: relative;

  width: 100%;
  min-height: 75vh;

  display: grid;
  place-items: center;

  overflow: hidden;
  color: var(--blanco);

  background-image: url("../img/portada.jpg?v=2");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Ya no se necesita este div para mostrar la imagen */
.confirmacion-fondo {
  display: none;
}

.confirmacion-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(32, 27, 23, 0.72);
}

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

  max-width: 760px;
  text-align: center;
}

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