:root {
  --vg-guinda: #7A1E35;
  --vg-guinda-osc: #5A1427;
  --vg-guinda-claro: #9A2B47;
  --vg-topo: #D6C2B8;
  --vg-crema: #F6EFEA;
  --vg-blanco: #FFFFFF;
  --vg-fondo: #FBF9F8;
  --vg-tinta: #1D1D1F;
  --vg-gris: #6E6E73;
  --vg-gris-suave: #B9B4B6;
  --vg-noche: #160A0E;
  --vg-noche-tarjeta: #26131A;
  --bs-body-font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-color: var(--vg-tinta);
  --bs-body-bg: var(--vg-fondo);
  --bs-link-color-rgb: 122, 30, 53;
  --bs-link-hover-color-rgb: 90, 20, 39;
}

html {
  scroll-padding-top: 72px;
}

body {
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  line-height: 1.6;
}

::selection {
  background: var(--vg-topo);
  color: var(--vg-guinda-osc);
}

.barra {
  min-height: 60px;
  background: rgba(251, 249, 248, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.barra-activa {
  background: rgba(251, 249, 248, 0.86);
  border-bottom-color: rgba(29, 29, 31, 0.08);
}

.logo {
  object-fit: contain;
}

.menu-fino .nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--vg-gris);
  padding: 0.5rem 0.85rem !important;
  transition: color 0.2s ease;
}

.menu-fino .nav-link:hover {
  color: var(--vg-tinta);
}

.menu-fino .nav-link.active {
  color: var(--vg-guinda);
  font-weight: 700;
}

.enlace-icono {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vg-tinta);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.enlace-icono:hover {
  background: rgba(122, 30, 53, 0.08);
  color: var(--vg-guinda);
}

.boton-guinda {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--vg-guinda);
  --bs-btn-border-color: var(--vg-guinda);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--vg-guinda-claro);
  --bs-btn-hover-border-color: var(--vg-guinda-claro);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--vg-guinda-osc);
  --bs-btn-active-border-color: var(--vg-guinda-osc);
  --bs-btn-focus-shadow-rgb: 122, 30, 53;
  font-weight: 600;
}

.boton-borde {
  --bs-btn-color: var(--vg-guinda);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--vg-guinda);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--vg-guinda);
  --bs-btn-hover-border-color: var(--vg-guinda);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--vg-guinda-osc);
  font-weight: 600;
  word-break: break-all;
}

.boton-chico {
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
}

.boton-grande {
  font-size: 1.05rem;
  padding: 0.8rem 1.6rem;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--vg-guinda);
  text-decoration: none;
  word-break: break-all;
}

.enlace-flecha i {
  transition: transform 0.25s ease;
}

.enlace-flecha:hover {
  text-decoration: underline;
}

.enlace-flecha:hover i {
  transform: translateX(4px);
}

.portada {
  padding-top: 8.5rem;
  padding-bottom: 2rem;
}

.antetitulo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vg-guinda);
}

.antetitulo-claro {
  color: var(--vg-topo);
}

.titulo-portada {
  font-weight: 900;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 13ch;
}

.texto-guinda {
  color: var(--vg-guinda);
}

.bajada {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--vg-tinta);
  letter-spacing: -0.02em;
  max-width: 32rem;
}

.invitacion {
  font-size: 1.1rem;
  color: var(--vg-gris);
  max-width: 36rem;
}

.foto-portada {
  border-radius: 2rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--vg-crema);
}

.foto-portada img {
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}

.seccion {
  padding: 7rem 0;
}

.titulo-seccion {
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 18ch;
}

.titulo-claro {
  color: #F5F5F7;
}

.titulo-sub {
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
}

.texto-destello {
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.3;
  letter-spacing: -0.025em;
  max-width: 60rem;
}

.palabra {
  color: var(--vg-gris-suave);
  transition: color 0.35s ease;
}

.palabra.encendida {
  color: var(--vg-tinta);
}

.texto-destello strong .palabra.encendida {
  color: var(--vg-guinda);
}

.mosaico {
  border-radius: 1.75rem;
  padding: 2.25rem;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mosaico:hover {
  transform: scale(1.012);
}

.mosaico-crema {
  background: var(--vg-crema);
}

.mosaico-blanco {
  background: var(--vg-blanco);
  box-shadow: 0 2px 30px -12px rgba(29, 29, 31, 0.18);
}

.mosaico-guinda {
  background: linear-gradient(160deg, var(--vg-guinda-claro) 0%, var(--vg-guinda) 50%, var(--vg-guinda-osc) 100%);
  color: #F8EDEF;
}

.mosaico-noche {
  background: var(--vg-noche-tarjeta);
  color: #CFC6C9;
}

.cuerpo {
  font-size: 1.02rem;
  line-height: 1.7;
}

.mosaico-crema .cuerpo,
.mosaico-blanco .cuerpo {
  color: #424245;
}

.cuerpo-grande {
  font-size: 1.2rem;
  line-height: 1.65;
  color: #424245;
}

.icono-redondo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--vg-guinda);
  background: rgba(122, 30, 53, 0.1);
}

.icono-claro {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.pieza {
  position: relative;
  border-radius: 1.75rem;
  padding: 2rem;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.65;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}

.pieza:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -36px rgba(90, 20, 39, 0.5);
}

.pieza-grande {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
}

.pieza-ancha {
  grid-column: span 3;
}

.pieza-oscura {
  color: #fff;
  background: var(--vg-noche);
}

.pieza-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.pieza-oscura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(22, 10, 14, 0.94) 0%, rgba(90, 20, 39, 0.6) 45%, rgba(22, 10, 14, 0.05) 100%);
}

.pieza-oscura:hover .pieza-fondo {
  transform: scale(1.05);
}

.pieza-contenido {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

.pieza-crema {
  background: var(--vg-crema);
  color: #424245;
}

.pieza-blanca {
  background: var(--vg-blanco);
  color: #424245;
  box-shadow: 0 2px 30px -12px rgba(29, 29, 31, 0.18);
}

.pieza-guinda {
  background: linear-gradient(160deg, var(--vg-guinda-claro) 0%, var(--vg-guinda-osc) 100%);
  color: #F8EDEF;
}

.pieza-titulo {
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}

.pieza-crema .pieza-titulo,
.pieza-blanca .pieza-titulo {
  color: var(--vg-tinta);
}

.pieza-oscura .pieza-titulo,
.pieza-guinda .pieza-titulo,
.mosaico-guinda .pieza-titulo,
.mosaico-noche .pieza-titulo {
  color: #fff;
}

.foto {
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--vg-crema);
}

.foto img {
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.foto:hover img {
  transform: scale(1.04);
}

.foto-grande {
  border-radius: 2rem;
}

.ratio-4x5 {
  --bs-aspect-ratio: 125%;
}

.seccion-oscura {
  background: var(--vg-noche);
  color: #CFC6C9;
}

.flecha-galeria {
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #F5F5F7;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  transition: background-color 0.2s ease;
}

.flecha-galeria:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.galeria {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 max(1rem, calc((100vw - 1320px) / 2 + 0.75rem)) 0.5rem;
  scroll-padding-left: max(1rem, calc((100vw - 1320px) / 2 + 0.75rem));
}

.galeria::-webkit-scrollbar {
  display: none;
}

.tarjeta-galeria {
  flex: 0 0 min(420px, 84vw);
  scroll-snap-align: start;
  background: var(--vg-noche-tarjeta);
  border-radius: 1.75rem;
  padding: 2rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #CFC6C9;
}

.tarjeta-foto {
  flex-basis: min(480px, 88vw);
}

.tarjeta-galeria-guinda {
  background: linear-gradient(160deg, var(--vg-guinda-claro) 0%, var(--vg-guinda-osc) 100%);
  color: #F8EDEF;
}

.etiqueta-galeria {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.75rem;
}

.puntos span {
  width: 8px;
  height: 8px;
  border-radius: 50rem;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.puntos span.activo {
  width: 28px;
  background: var(--vg-topo);
}

.comparativa {
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--vg-blanco);
  box-shadow: 0 2px 30px -12px rgba(29, 29, 31, 0.18);
}

.comparativa-col {
  padding: 1.75rem;
}

.comparativa-no {
  background: var(--vg-crema);
}

.comparativa-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--vg-guinda);
}

.comparativa-no .comparativa-titulo {
  color: var(--vg-gris);
}

.comparativa li {
  padding: 0.6rem 0;
  border-top: 1px solid rgba(29, 29, 31, 0.08);
  font-weight: 600;
  font-size: 0.98rem;
}

.comparativa-no li {
  color: var(--vg-gris);
  text-decoration: line-through;
  text-decoration-color: rgba(122, 30, 53, 0.45);
}

.pie {
  background: var(--vg-crema);
  color: var(--vg-gris);
  font-size: 0.85rem;
}

.pie-invitacion {
  padding: 5rem 0 4rem;
  border-bottom: 1px solid rgba(29, 29, 31, 0.1);
}

.logo-pie {
  object-fit: contain;
}

.pie-titulo {
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.04em;
  color: var(--vg-tinta);
}

.pie-bajada {
  font-size: 1.15rem;
  max-width: 32rem;
}

.pie-columnas {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(29, 29, 31, 0.1);
}

.pie-col-titulo {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--vg-tinta);
  margin-bottom: 0.75rem;
}

.pie-texto {
  line-height: 1.6;
}

.pie-lista li {
  margin-bottom: 0.5rem;
}

.pie-lista a,
.pie-lista span {
  color: var(--vg-gris);
  text-decoration: none;
  word-break: break-all;
  transition: color 0.2s ease;
}

.pie-lista a:hover {
  color: var(--vg-guinda);
  text-decoration: underline;
}

.pie-legal {
  padding: 1.25rem 0 2rem;
  font-size: 0.78rem;
}

.revelar {
  opacity: 0;
  transform: translateY(36px);
}

.revelar.visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pieza.revelar.visible:hover {
  transform: translateY(-4px);
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    padding: 0.75rem 0 1rem;
  }

  .menu-fino .nav-link {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--vg-tinta);
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid rgba(29, 29, 31, 0.08);
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .pieza-grande,
  .pieza-ancha {
    grid-column: span 2;
  }

  .pieza-grande {
    grid-row: auto;
    min-height: 440px;
  }
}

@media (max-width: 767.98px) {
  .portada {
    padding-top: 6.5rem;
  }

  .seccion {
    padding: 4.5rem 0;
  }

  .foto-portada {
    aspect-ratio: 4 / 3;
    border-radius: 1.4rem;
  }

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

  .pieza-grande,
  .pieza-ancha {
    grid-column: span 1;
  }

  .mosaico,
  .pieza,
  .tarjeta-galeria {
    border-radius: 1.4rem;
    padding: 1.6rem;
  }

  .mosaico.p-0 {
    padding: 0;
  }

  .ratio-21x9 {
    --bs-aspect-ratio: 56.25%;
  }

  .comparativa-col {
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .revelar {
    opacity: 1;
    transform: none;
  }

  .foto-portada img {
    transform: none !important;
  }

  .palabra {
    color: var(--vg-tinta);
  }

  .foto img,
  .pieza,
  .mosaico,
  .pieza-fondo {
    transition: none;
  }
}