* {
  box-sizing: border-box;
}


:root {

  --cream: #f5efe3;

  --paper: #eee5d4;

  --ink: #30291f;

  --muted: #766a59;

  --gold: #a48758;

  --gold-dark: #765f39;

  --line: rgba(118, 95, 57, .28);

}


/* =========================================
   BASE
========================================= */

html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background: var(--cream);

  color: var(--ink);

  font-family: "Montserrat", sans-serif;

  overflow-x: hidden;

}


/* =========================================
   TEXTURA
========================================= */

.grain {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 999;

  opacity: .035;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

}


/* =========================================
   🐝 ABEJAS
========================================= */

.bees {

  position: fixed;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 2;

}


.bee {

  position: absolute;

  opacity: .15;

  font-size: 20px;

  filter: grayscale(.15);

  animation: beeFloat 14s ease-in-out infinite;

}


.bee-1 {

  left: 7%;

  top: 20%;

  animation-delay: 0s;

}


.bee-2 {

  right: 8%;

  top: 37%;

  font-size: 16px;

  animation-delay: 3s;

}


.bee-3 {

  left: 12%;

  bottom: 27%;

  font-size: 15px;

  animation-delay: 6s;

}


.bee-4 {

  right: 17%;

  bottom: 14%;

  font-size: 18px;

  animation-delay: 9s;

}


@keyframes beeFloat {

  0%,
  100% {

    transform:
      translate(0, 0)
      rotate(-5deg);

  }

  25% {

    transform:
      translate(18px, -12px)
      rotate(5deg);

  }

  50% {

    transform:
      translate(-10px, -25px)
      rotate(-3deg);

  }

  75% {

    transform:
      translate(15px, -8px)
      rotate(6deg);

  }

}


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

.cover {

  min-height: 100svh;

  display: grid;

  place-items: center;

  position: relative;

  padding: 30px 20px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.65),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #f7f1e6,
      #e9dfcc
    );

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

}


.cover.opened {

  opacity: 0;

  transform: scale(1.04);

  pointer-events: none;

}


.cover-content {

  width: min(100%, 560px);

  animation: entrance 1.2s ease both;

}


/* =========================================
   TEXTOS
========================================= */

.eyebrow {

  margin: 0 0 14px;

  color: var(--gold-dark);

  font-size: 10px;

  letter-spacing: .28em;

  font-weight: 600;

}


.cover-caption {

  max-width: 360px;

  margin: 0 auto 24px;

  color: var(--muted);

  font:
    400 18px/1.35
    "Cormorant Garamond",
    serif;

}


/* =========================================
   IMÁGENES
========================================= */

.image-container {

  text-align: center;

}


.cover-image {

  display: block;

  width: min(86vw, 500px);

  max-height: 64svh;

  object-fit: contain;

  margin: 0 auto;

  filter:
    drop-shadow(
      0 18px 28px
      rgba(70, 52, 30, .14)
    );

}


.invitation-image {

  width: 100%;

  height: auto;

  display: block;

  box-shadow:
    0 22px 50px
    rgba(67, 50, 28, .16);

}


.zoomable-image {

  cursor: zoom-in;

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

}


.zoomable-image:hover {

  transform: scale(1.015);

}


.image-hint {

  margin: 10px 0 0;

  text-align: center;

  color: var(--muted);

  font-size: 8px;

  letter-spacing: .15em;

  text-transform: uppercase;

  opacity: .65;

}


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

.gold-button {

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

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

  color: var(--gold-dark);

  min-height: 52px;

  padding: 10px 22px;

  border-radius: 999px;

  font:
    600 11px
    "Montserrat",
    sans-serif;

  letter-spacing: .16em;

  text-transform: uppercase;

  cursor: pointer;

  transition: .3s ease;

}


.gold-button:hover {

  background: var(--gold-dark);

  color: white;

  transform: translateY(-2px);

}


.gold-button .arrow {

  margin-left: 10px;

  font-size: 15px;

}


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

.ornament {

  position: absolute;

  color: var(--gold);

  font-size: 18px;

  opacity: .75;

}


.ornament-top {

  top: 24px;

}


.ornament-bottom {

  bottom: 24px;

}


/* =========================================
   OCULTO
========================================= */

.hidden {

  display: none;

}


/* =========================================
   INVITACIÓN
========================================= */

.invitation {

  max-width: 760px;

  margin: 0 auto;

  background: var(--cream);

  animation: pageIn 1.1s ease both;

}


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

.hero {

  min-height: 55svh;

  display: grid;

  place-items: center;

  align-content: center;

  text-align: center;

  padding: 70px 25px 45px;

  position: relative;

  overflow: hidden;

}


.hero::before,
.hero::after {

  content: "❦";

  position: absolute;

  color: var(--gold);

  font-size: 80px;

  opacity: .08;

}


.hero::before {

  left: -20px;

  top: 35px;

  transform: rotate(-30deg);

}


.hero::after {

  right: -20px;

  bottom: 15px;

  transform: rotate(150deg);

}


.hero-glow {

  position: absolute;

  width: 330px;

  height: 330px;

  border-radius: 50%;

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

  filter: blur(10px);

  z-index: 0;

}


.hero > *:not(.hero-glow) {

  position: relative;

  z-index: 1;

}


.hero h1 {

  margin: 0;

  font:
    500 clamp(42px, 11vw, 72px)/.88
    "Cormorant Garamond",
    serif;

}


.hero h1 em {

  color: var(--gold-dark);

  font-weight: 400;

}


.line {

  width: 72px;

  height: 1px;

  background: var(--gold);

  margin: 28px auto 18px;

}


.hero-date {

  margin: 0;

  color: var(--muted);

  font-size: 11px;

  letter-spacing: .3em;

}


/* =========================================
   IMAGEN INTERIOR
========================================= */

.card-section {

  padding: 10px 14px 30px;

}


/* =========================================
   DETALLES
========================================= */

.details {

  text-align: center;

  padding: 70px 24px 55px;

}


.details h2 {

  margin: 0;

  font:
    500 clamp(39px, 10vw, 58px)/.88
    "Cormorant Garamond",
    serif;

}


.details h2 em {

  color: var(--gold-dark);

  font-weight: 400;

}


/* =========================================
   CUENTA REGRESIVA
========================================= */

.countdown {

  display: grid;

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

  max-width: 590px;

  margin: 38px auto 0;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

}


.countdown div {

  padding: 18px 4px;

  position: relative;

}


.countdown div + div::before {

  content: "";

  position: absolute;

  left: 0;

  top: 22%;

  height: 56%;

  width: 1px;

  background: var(--line);

}


.countdown strong {

  display: block;

  color: var(--gold-dark);

  font:
    600 clamp(28px, 7vw, 40px)/1
    "Cormorant Garamond",
    serif;

}


.countdown span {

  display: block;

  margin-top: 7px;

  color: var(--muted);

  font-size: 8px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


/* =========================================
   BOTONES DE ACCIÓN
========================================= */

.action-section {

  display: grid;

  gap: 12px;

  padding: 10px 20px 70px;

}


.action-card {

  min-height: 92px;

  display: grid;

  grid-template-columns:
    46px 1fr 20px;

  gap: 8px;

  align-items: center;

  padding: 14px 18px;

  color: var(--ink);

  text-decoration: none;

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

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

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

}


.action-card:hover {

  transform: translateY(-3px);

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

}


.icon {

  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  color: var(--gold-dark);

  font-size: 21px;

}


/* =========================================
   WHATSAPP / ESCUDO
========================================= */

.whatsapp-icon {

  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  overflow: hidden;

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

}


.whatsapp-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  padding: 5px;

}


.action-card small {

  display: block;

  color: var(--gold-dark);

  font-size: 8px;

  letter-spacing: .18em;

  margin-bottom: 4px;

}


.action-card strong {

  display: block;

  font:
    600 22px/1.05
    "Cormorant Garamond",
    serif;

}


.action-card b {

  display: block;

  color: var(--muted);

  font:
    400 13px/1.3
    "Montserrat",
    sans-serif;

  margin-top: 4px;

}


.chevron {

  color: var(--gold-dark);

  font-size: 25px;

}


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

.closing {

  padding: 80px 20px;

  text-align: center;

  border-top:
    1px solid var(--line);

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.55),
      transparent 60%
    );

}


.floral {

  color: var(--gold-dark);

  font-size: 35px;

  margin-bottom: 12px;

}


.closing > p:first-of-type {

  margin: 0 0 10px;

  font:
    400 23px/1.3
    "Cormorant Garamond",
    serif;

}


.closing h2 {

  margin: 0;

  font:
    500 clamp(42px, 11vw, 62px)/.88
    "Cormorant Garamond",
    serif;

}


.closing h2 span {

  color: var(--gold);

  font-size: .65em;

}


.closing .small {

  color: var(--muted);

  font-size: 10px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


/* =========================================
   FOOTER
========================================= */

footer {

  display: flex;

  justify-content: space-between;

  padding: 22px 25px 30px;

  color: var(--muted);

  font-size: 8px;

  letter-spacing: .16em;

}


/* =========================================
   BOTÓN VOLVER ARRIBA
========================================= */

.back-top {

  position: fixed;

  right: 16px;

  bottom: 16px;

  width: 42px;

  height: 42px;

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

  border-radius: 50%;

  background: rgba(245,239,227,.88);

  color: var(--gold-dark);

  cursor: pointer;

  opacity: 0;

  pointer-events: none;

  transition: .3s ease;

  z-index: 10;

}


.back-top.visible {

  opacity: 1;

  pointer-events: auto;

}


/* =========================================
   🎵 BOTÓN DE MÚSICA
========================================= */

.music-button {

  position: fixed;

  right: 18px;

  bottom: 18px;

  width: 48px;

  height: 48px;

  border-radius: 50%;

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

  background: rgba(245, 239, 227, 0.92);

  color: var(--gold-dark);

  display: grid;

  place-items: center;

  font-size: 22px;

  cursor: pointer;

  z-index: 100;

  box-shadow:
    0 5px 20px
    rgba(60, 45, 25, 0.15);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;

}


.music-button:hover {

  transform: scale(1.08);

  background: rgba(255, 252, 245, 0.98);

}


.music-button.playing {

  animation: musicPulse 2s infinite;

}


.music-button.playing #musicIcon {

  animation: musicRotate 3s linear infinite;

}


@keyframes musicPulse {

  0% {

    box-shadow:
      0 0 0 0
      rgba(164, 135, 88, 0.35),
      0 5px 20px
      rgba(60, 45, 25, 0.15);

  }

  70% {

    box-shadow:
      0 0 0 10px
      rgba(164, 135, 88, 0),
      0 5px 20px
      rgba(60, 45, 25, 0.15);

  }

  100% {

    box-shadow:
      0 0 0 0
      rgba(164, 135, 88, 0),
      0 5px 20px
      rgba(60, 45, 25, 0.15);

  }

}


@keyframes musicRotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}


/* =========================================
   🖼️ VISOR DE IMÁGENES
========================================= */

.image-viewer {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 25px;

  background: rgba(35, 29, 21, .94);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

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

}


.image-viewer.active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}


.image-viewer img {

  display: block;

  max-width: 94vw;

  max-height: 88vh;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 3px;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.4);

  transform: scale(.92);

  transition:
    transform .4s ease;

}


.image-viewer.active img {

  transform: scale(1);

}


.close-viewer {

  position: absolute;

  top: 18px;

  right: 18px;

  width: 44px;

  height: 44px;

  border:
    1px solid
    rgba(255,255,255,.45);

  border-radius: 50%;

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

  color: white;

  font-size: 18px;

  cursor: pointer;

  z-index: 2;

}


.close-viewer:hover {

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

}


.viewer-hint {

  position: absolute;

  bottom: 18px;

  left: 0;

  right: 0;

  text-align: center;

  margin: 0;

  color:
    rgba(255,255,255,.65);

  font-size: 8px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


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

@keyframes entrance {

  from {

    opacity: 0;

    transform: translateY(16px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}


@keyframes pageIn {

  from {

    opacity: 0;

    transform: translateY(25px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}


/* =========================================
   TABLET / ESCRITORIO
========================================= */

@media (min-width: 700px) {

  body {

    background: #ddd3c2;

  }


  .invitation {

    box-shadow:
      0 0 70px
      rgba(50, 40, 28, .12);

  }


  .card-section {

    padding:
      25px
      35px
      50px;

  }


  .action-section {

    padding-left: 60px;

    padding-right: 60px;

  }

}


/* =========================================
   CELULARES PEQUEÑOS
========================================= */

@media (max-width: 380px) {

  .countdown strong {

    font-size: 25px;

  }


  .countdown span {

    font-size: 7px;

  }


  .action-card strong {

    font-size: 20px;

  }


  .music-button {

    width: 44px;

    height: 44px;

    right: 14px;

    bottom: 14px;

  }


  .bee {

    font-size: 15px;

  }

}


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

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

  *,
  *::before,
  *::after {

    scroll-behavior: auto !important;

    animation-duration: .01ms !important;

    transition-duration: .01ms !important;

  }

}