/* ==========================================================================
   Invitación digital · Alexia Mineidi · Mis XV Años
   Hoja de estilos principal
   Diseño base: 1209 px de ancho. Todas las medidas se escalan con --u.
   ========================================================================== */

/* ---------- Fuentes locales ---------- */
@font-face {
  font-family: "Invitacion Script";
  src: url("../fonts/script-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Invitacion Display";
  src: url("../fonts/display-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Invitacion Display";
  src: url("../fonts/display-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Invitacion Body";
  src: url("../fonts/body-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Invitacion Label";
  src: url("../fonts/label-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Invitacion Button";
  src: url("../fonts/button-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */
:root {
  --azul: #1e3358;
  --azul-profundo: #13285d;
  --azul-noche: #141d41;
  --texto: #44506b;
  --hielo: #edf2fa;
  --crema: #fffaf5;
  --oro: #a88c4e;
  --oro-claro: #e6cd95;
  --blanco: #ffffff;
  --script: "Invitacion Script", "Segoe Script", cursive;
  --display: "Invitacion Display", Georgia, "Times New Roman", serif;
  --cuerpo: "Invitacion Body", "Trebuchet MS", Verdana, sans-serif;
  --etiqueta: "Invitacion Label", Arial, Helvetica, sans-serif;
  --boton: "Invitacion Button", "Trebuchet MS", Verdana, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 280px;
  color: var(--azul);
  background: #091226;
  background-image: radial-gradient(circle at 50% 0%, #1c3566 0%, #0a1429 55%, #060d1c 100%);
  font-family: var(--cuerpo);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  border: 0;
}

p,
h1,
h2,
h3,
figure,
blockquote,
address,
ol {
  margin: 0;
}

address {
  font-style: normal;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: var(--azul-noche);
  background: var(--oro-claro);
}

:focus-visible {
  outline: 3px solid var(--oro-claro);
  outline-offset: 4px;
}

audio {
  display: none;
}

/* Enlace de salto para lectores de pantalla y navegación por teclado */
.salto {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border: 2px solid var(--oro-claro);
  border-radius: 999px;
  color: var(--azul-noche);
  background: var(--oro-claro);
  font-family: var(--cuerpo);
  font-size: 15px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.25s ease;
}

.salto:focus {
  transform: translateY(0);
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Lienzo general ---------- */
.invitacion {
  container-type: inline-size;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--hielo);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   INTRO · EL SITIO SALE DEL SOBRE
   El espaciador reserva el recorrido del efecto. El sobre se divide en dos
   capas fijas: el forro (detrás del sitio) y el bolsillo (delante), de modo
   que la invitación sube y sale por la abertura en V.
   ========================================================================== */
.intro-espacio {
  height: 0;
}

html.intro-activo {
  --intro-ancho: max(min(122vw, 720px), 49vh);
  --intro-alto: calc(var(--intro-ancho) * 1.2772);
  --intro-linea: 80vh;
  --intro-p: 0;
  --intro-salida: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

html.intro-activo .intro-espacio {
  height: 85vh;
}

html.intro-activo .invitacion {
  position: relative;
  z-index: 1;
  box-shadow:
    0 -16px 36px rgba(9, 18, 38, 0.35),
    0 0 90px rgba(0, 0, 0, 0.55);
}

.intro-sobre {
  display: none;
  position: fixed;
  left: calc(50% - 0.01 * var(--intro-ancho));
  top: calc(var(--intro-linea) - 0.665 * var(--intro-alto));
  width: var(--intro-ancho);
  height: var(--intro-alto);
  max-width: none;
  z-index: 0;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate3d(-50%, calc(var(--intro-salida) * 110vh), 0);
  will-change: transform;
}

html.intro-activo .intro-sobre {
  display: block;
}

.intro-sobre--frente {
  z-index: 2;
  -webkit-clip-path: polygon(0% 34%, 51% 66%, 100% 34%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 34%, 51% 66%, 100% 34%, 100% 100%, 0% 100%);
}

.intro-pista {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(3vh + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  margin: 0;
  transform: translateX(-50%);
  color: var(--oro-claro);
  font-family: var(--etiqueta);
  font-size: clamp(12px, 1.6vw, 15px);
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: calc(1 - var(--intro-p, 0) * 6);
}

html.intro-activo .intro-pista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.intro-pista__flecha {
  width: 22px;
  height: 22px;
  animation: intro-flecha 1.6s ease-in-out infinite;
}

@keyframes intro-flecha {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

.seccion {
  --u: calc(100cqw / 1209);
  position: relative;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--hielo);
  background-image: url("../images/comunes/textura-papel.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.seccion img {
  position: absolute;
  object-fit: fill;
}

.texto {
  position: absolute;
  z-index: 6;
  text-align: center;
}

/* ==========================================================================
   PORTADA
   ========================================================================== */
.portada {
  aspect-ratio: 1209 / 2098;
}

.portada__sobre{left:0.000%;top:-2.383%;width:60.629%;height:44.662%;z-index:1;}
.portada__flores--izq{left:1.158%;top:33.317%;width:35.649%;height:42.993%;z-index:1;}
.portada__flores--der{left:56.245%;top:15.729%;width:35.649%;height:42.993%;z-index:1;}
.portada__marco{left:17.701%;top:11.535%;width:68.321%;height:55.481%;z-index:1;}
.portada__oval{left:28.122%;top:49.762%;width:71.878%;height:49.333%;z-index:2;}
.portada__divisor{left:30.852%;top:37.989%;width:40.033%;height:2.717%;z-index:3;}
.portada__pajaro{left:32.589%;top:5.767%;width:28.122%;height:15.682%;z-index:2;}
.portada__mariposa--1{left:83.871%;top:9.724%;width:8.933%;height:6.149%;z-index:3;}
.portada__mariposa--2{left:14.640%;top:70.448%;width:11.249%;height:7.769%;z-index:3;}
.portada__mariposa--3{left:19.603%;top:82.412%;width:11.249%;height:7.769%;z-index:3;}

.portada__retrato {
  position: absolute;
  left:46.898%;top:59.104%;width:34.326%;height:29.695%;
  z-index: 3;
  overflow: hidden;
  border-radius: 50%;
  background: var(--azul);
}

.portada__retrato img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portada__antetitulo {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  pointer-events: none;
}

.portada__antetitulo span {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--azul);
  font-family: var(--cuerpo);
  font-size: calc(48.98 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

.portada__antetitulo span:nth-child(1){left:36.642%;top:25.929%;width:5.128%;height:3.384%;transform:rotate(-20.32deg);}
.portada__antetitulo span:nth-child(2){left:40.199%;top:25.691%;width:2.564%;height:2.908%;transform:rotate(-16.56deg);}
.portada__antetitulo span:nth-child(3){left:41.439%;top:25.357%;width:3.639%;height:3.098%;transform:rotate(-13.66deg);}
.portada__antetitulo span:nth-child(4){left:45.575%;top:24.929%;width:4.053%;height:3.051%;transform:rotate(-6.71deg);}
.portada__antetitulo span:nth-child(5){left:49.214%;top:24.881%;width:3.474%;height:2.860%;transform:rotate(-1.35deg);}
.portada__antetitulo span:nth-child(6){left:53.846%;top:24.929%;width:3.557%;height:2.955%;transform:rotate(5.88deg);}
.portada__antetitulo span:nth-child(7){left:56.658%;top:25.119%;width:4.053%;height:3.098%;transform:rotate(10.72deg);}
.portada__antetitulo span:nth-child(8){left:59.553%;top:25.453%;width:5.128%;height:3.337%;transform:rotate(16.21deg);}
.portada__antetitulo span:nth-child(9){left:62.945%;top:26.120%;width:4.136%;height:3.146%;transform:rotate(21.19deg);}

.portada__nombre{left:50%;top:31.700%;width:auto;height:14.395%;white-space:nowrap;transform:translateX(-50%);font-family:var(--script);font-size:calc(150 * var(--u));line-height:1.39;color:var(--azul);}
.portada__fecha{left:50%;top:44.870%;width:auto;height:2.750%;white-space:nowrap;transform:translateX(-50%);font-family:var(--cuerpo);font-size:calc(41.2 * var(--u));line-height:1.39;color:var(--azul);}

/* ==========================================================================
   MIS PADRES
   ========================================================================== */
.padres {
  aspect-ratio: 1209 / 2583;
}

.padres::before {
  content: "";
  position: absolute;
  left:16.377%;top:25.668%;width:67.328%;height:68.564%;
  z-index: 2;
  border-radius: calc(407 * var(--u));
  background: var(--crema);
  box-shadow: 0 calc(15 * var(--u)) calc(40 * var(--u)) rgba(30, 51, 88, 0.12);
}

.padres::after {
  content: "";
  position: absolute;
  left:18.528%;top:27.216%;width:63.027%;height:65.389%;
  z-index: 3;
  border: calc(3 * var(--u)) solid #1e3459;
  border-radius: calc(381 * var(--u));
  pointer-events: none;
}

.padres__fondo-azul--1{left:-2.399%;top:17.693%;width:103.474%;height:89.857%;z-index:1;}
.padres__fondo-azul--2{left:-2.730%;top:55.788%;width:103.474%;height:89.857%;z-index:1;}
.padres__ramo--1{left:-11.663%;top:34.379%;width:58.478%;height:18.002%;z-index:3;}
.padres__ramo--2{left:-10.174%;top:63.492%;width:58.478%;height:18.002%;z-index:3;}
.padres__ramo--3{left:65.012%;top:29.810%;width:58.478%;height:18.002%;z-index:3;}
.padres__ramo--4{left:57.403%;top:66.551%;width:58.478%;height:18.002%;z-index:3;}
/* Los ramos grandes quedan detrás de la tarjeta para no tapar los textos */
.padres__ramo{z-index:1;}
.padres__eucalipto--1{left:-24.648%;top:36.082%;width:48.718%;height:24.003%;z-index:3;}
.padres__eucalipto--2{left:81.472%;top:55.168%;width:40.778%;height:20.093%;z-index:3;}
.padres__eucalipto2--1{left:-20.265%;top:38.870%;width:32.920%;height:21.370%;z-index:3;}
.padres__eucalipto2--2{left:78.495%;top:61.169%;width:32.920%;height:21.370%;z-index:3;}
.padres__mariposa--1{left:6.038%;top:39.102%;width:11.911%;height:6.698%;z-index:4;}
.padres__mariposa--2{left:84.367%;top:51.297%;width:11.911%;height:6.698%;z-index:4;}
.padres__mariposa--3{left:2.812%;top:52.884%;width:11.911%;height:6.698%;z-index:4;}
.padres__flor-varita{left:83.788%;top:38.444%;width:12.821%;height:29.965%;z-index:3;}
.padres__pajaro{left:80.811%;top:66.396%;width:28.122%;height:12.737%;z-index:3;transform:scaleX(-1);}
.padres__lazo{left:36.890%;top:23.461%;width:30.190%;height:11.266%;z-index:4;}
.padres__flores-linea{left:40.116%;top:30.701%;width:19.520%;height:9.640%;z-index:4;}
.padres__separador--1{left:36.394%;top:46.341%;width:25.806%;height:1.432%;z-index:4;}
.padres__separador--2{left:36.394%;top:63.221%;width:25.806%;height:1.432%;z-index:4;}

/* Reproductor de música */
.musica {
  position: absolute;
  left:24.0695%;top:0.658%;width:51.861%;height:14.324%;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  padding: 0 0 calc(20 * var(--u));
  border: 0;
  color: var(--hielo);
  background: url("../images/comunes/reproductor-fondo.png") center / 100% 100% no-repeat;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.musica:hover {
  filter: brightness(1.08);
}

.musica__onda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 46%;
  height: calc(98 * var(--u));
  flex: 0 0 auto;
  pointer-events: none;
}

.musica__onda i {
  display: block;
  width: 3.4%;
  height: var(--h, 50%);
  border-radius: 999px;
  background: var(--hielo);
  opacity: 0.92;
}

.musica__aro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(98 * var(--u));
  height: calc(98 * var(--u));
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--hielo);
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(9, 18, 38, 0.28);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.musica:hover .musica__aro {
  background: var(--oro-claro);
  transform: scale(1.06);
}

.musica__play,
.musica__pause {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  fill: var(--azul);
}

.musica__pause {
  display: none;
}

.musica[aria-pressed="true"] .musica__play {
  display: none;
}

.musica[aria-pressed="true"] .musica__pause {
  display: block;
}

.musica__texto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48%;
  color: var(--hielo);
  font-family: var(--etiqueta);
  font-size: calc(25 * var(--u));
  font-weight: 400;
  line-height: 1.37;
  text-align: center;
}

.musica[data-inactiva="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.padres__titulo{left:30.687%;top:41.889%;width:38.627%;height:7.549%;font-family:var(--script);font-size:calc(140.34 * var(--u));line-height:1.39;color:var(--azul);}
.padres__titulo--padrinos{left:27.709%;top:58.730%;width:44.582%;height:7.549%;font-family:var(--script);font-size:calc(140.34 * var(--u));line-height:1.39;color:var(--azul);}
.padres__nombre{left:50%;top:49.903%;width:auto;height:2.439%;white-space:nowrap;transform:translateX(-50%);font-family:var(--cuerpo);font-size:calc(37 * var(--u));line-height:1.39;color:var(--texto);}
.padres__nombre--nubia{top:54.781%;}
.padres__nombre--ulises{top:67.054%;}
.padres__nombre--christian{top:71.971%;}
.padres__y--1{left:48.801%;top:52.342%;width:2.399%;height:2.439%;font-family:var(--cuerpo);font-size:calc(37 * var(--u));line-height:1.39;color:var(--texto);}
.padres__y--2{left:48.801%;top:69.532%;width:2.399%;height:2.439%;font-family:var(--cuerpo);font-size:calc(37 * var(--u));line-height:1.39;color:var(--texto);}

/* ==========================================================================
   EL GRAN DÍA
   ========================================================================== */
.programa {
  aspect-ratio: 1209 / 2188;
}

.programa::before {
  content: "";
  position: absolute;
  left:11.497%;top:-1.058%;width:77.006%;height:129.488%;
  z-index: 0;
  background: #e3ebf7;
}

.programa__divisor{left:30.025%;top:9.828%;width:40.033%;height:2.628%;z-index:3;}
.programa__titulo{left:30.108%;top:3.519%;width:36.642%;height:10.055%;font-family:var(--script);font-size:calc(157.96 * var(--u));line-height:1.39;color:var(--azul);}

.programa__tarjeta {
  position: absolute;
  z-index: 2;
  width: 100.000%;
  aspect-ratio: 1209 / 947;
  filter: drop-shadow(0 calc(18 * var(--u)) calc(26 * var(--u)) rgba(30, 51, 88, 0.2));
}

.programa__tarjeta--2 {
  left: 1.241%;
  top: 15.768%;
}

.programa__tarjeta--3 {
  left: 1.902%;
  top: 56.947%;
}

.programa__tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/comunes/tarjeta-arco.png") center / 100% 100% no-repeat;
}

.programa__tarjeta img {
  z-index: 2;
}

.programa__tarjeta .texto,
.programa__tarjeta .mapa {
  z-index: 4;
}

.programa__flores--1a{left:5.045%;top:4.541%;width:34.160%;height:50.792%;z-index:3;}
.programa__flores--1b{left:59.553%;top:1.901%;width:34.160%;height:50.792%;z-index:3;}
.programa__racimo--1a{left:4.136%;top:-0.950%;width:28.453%;height:32.101%;z-index:3;}
.programa__racimo--1b{left:66.336%;top:-2.218%;width:29.446%;height:33.157%;z-index:3;transform:scaleX(-1);}
.programa__icono--iglesia{left:18.197%;top:29.356%;width:28.784%;height:38.226%;z-index:3;}
.programa__flores--2a{left:59.388%;top:-1.478%;width:34.160%;height:50.792%;z-index:3;transform:scaleX(-1);}
.programa__flores--2b{left:5.376%;top:0.211%;width:34.160%;height:50.792%;z-index:3;}
.programa__racimo--2a{left:5.376%;top:-3.907%;width:28.453%;height:32.101%;z-index:3;}
.programa__racimo--2b{left:67.577%;top:-5.069%;width:29.446%;height:33.157%;z-index:3;transform:scaleX(-1);}
.programa__icono--mesa{left:22.415%;top:29.039%;width:23.904%;height:34.847%;z-index:3;}
.programa__flores--3a{left:4.053%;top:-1.162%;width:34.160%;height:50.792%;z-index:3;}
.programa__flores--3b{left:58.147%;top:-2.851%;width:34.160%;height:50.792%;z-index:3;transform:scaleX(-1);}
.programa__racimo--3a{left:4.715%;top:-3.590%;width:28.453%;height:32.101%;z-index:3;}
.programa__racimo--3b{left:66.915%;top:-4.752%;width:29.446%;height:33.157%;z-index:3;transform:scaleX(-1);}
.programa__icono--vestido{left:20.926%;top:24.182%;width:21.754%;height:41.499%;z-index:3;}

.programa__card-titulo{left:24.069%;top:15.206%;width:48.966%;height:16.473%;white-space:nowrap;font-family:var(--script);font-size:calc(112.2 * var(--u));line-height:1.39;color:var(--azul);}
.programa__hora{left:52.936%;top:30.623%;width:15.054%;height:7.181%;font-family:var(--display);font-size:calc(48.98 * var(--u));line-height:1.39;color:var(--azul);}
.programa__lugar{left:46.154%;top:40.866%;width:31.596%;height:9.504%;white-space:nowrap;font-family:var(--cuerpo);font-size:calc(32.66 * var(--u));line-height:1.39;color:var(--texto);text-transform:uppercase;}
.programa__card-titulo--2{left:37.717%;top:11.510%;width:24.731%;height:16.473%;font-family:var(--script);font-size:calc(112.2 * var(--u));line-height:1.39;color:var(--azul);}
.programa__hora--2{left:54.756%;top:26.822%;width:15.054%;height:7.181%;font-family:var(--display);font-size:calc(48.98 * var(--u));line-height:1.39;color:var(--azul);}
.programa__lugar--2{left:50.951%;top:39.493%;width:23.987%;height:4.752%;white-space:nowrap;font-family:var(--cuerpo);font-size:calc(32.66 * var(--u));line-height:1.39;color:var(--texto);text-transform:uppercase;}
.programa__card-titulo--3{left:31.762%;top:9.187%;width:35.318%;height:16.473%;font-family:var(--script);font-size:calc(112.2 * var(--u));line-height:1.39;color:var(--azul);}
.programa__formal{left:52.523%;top:29.039%;width:18.280%;height:6.864%;font-family:var(--cuerpo);font-size:calc(47.36 * var(--u));line-height:1.38;color:var(--texto);text-transform:uppercase;}
.programa__nota{left:47.974%;top:39.388%;width:27.378%;height:14.256%;font-family:var(--cuerpo);font-size:calc(32.52 * var(--u));line-height:1.39;color:var(--azul);text-transform:uppercase;}

/* Círculo de color azul marino reservado para la quinceañera */
.programa__nota::before {
  content: "";
  display: block;
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  margin: 0 auto calc(10 * var(--u));
  border-radius: 50%;
  background: var(--azul-profundo);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(230, 205, 149, 0.9);
}

.mapa {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  color: var(--azul);
  text-decoration: none;
}

.mapa--1 {
  left:51.199%;top:53.854%;width:22.002%;height:15.312%;
}

.mapa--2 {
  left:53.019%;top:50.158%;width:22.002%;height:15.312%;
}

.mapa__pin {
  flex: 0 0 auto;
  width: calc(145 * var(--u));
  height: calc(145 * var(--u));
  padding: calc(30 * var(--u));
  border-radius: 50%;
  color: var(--blanco);
  background: #3f5f92;
  fill: none;
}

.mapa span {
  font-family: var(--cuerpo);
  font-size: calc(32.52 * var(--u));
  font-weight: 700;
  line-height: 1.39;
  letter-spacing: calc(1 * var(--u));
  text-transform: uppercase;
}

.mapa:hover .mapa__pin {
  background: var(--azul-profundo);
}

/* ==========================================================================
   LLUVIA DE SOBRES
   ========================================================================== */
.regalos {
  aspect-ratio: 1209 / 2114;
}

.regalos::before {
  content: "";
  position: absolute;
  left:10.587%;top:18.780%;width:67.328%;height:56.102%;
  z-index: 3;
  border-radius: calc(407 * var(--u)) calc(407 * var(--u)) 0 0;
  border: calc(8 * var(--u)) solid var(--azul);
  background: var(--crema);
  box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(30, 51, 88, 0.16);
}

.regalos__fondo-azul{left:0.000%;top:-4.163%;width:100.331%;height:106.149%;z-index:1;}
.regalos__flores--1{left:-22.415%;top:52.933%;width:29.694%;height:21.003%;z-index:2;}
.regalos__flores--2{left:-5.211%;top:21.807%;width:29.694%;height:21.003%;z-index:2;}
.regalos__corazon{left:44.086%;top:12.488%;width:39.289%;height:18.874%;z-index:2;}
.regalos__pajaro{left:20.347%;top:9.035%;width:21.505%;height:14.570%;z-index:2;}
.regalos__eucalipto--1{left:-20.926%;top:3.737%;width:45.988%;height:27.673%;z-index:2;}
.regalos__eucalipto--2{left:-12.242%;top:7.427%;width:31.017%;height:24.645%;z-index:2;}
.regalos__eucalipto--3{left:77.254%;top:10.218%;width:31.017%;height:24.645%;z-index:4;}
.regalos__flores-linea{left:37.634%;top:21.902%;width:12.986%;height:7.805%;z-index:4;}
.regalos__separador{left:31.927%;top:36.187%;width:25.806%;height:1.750%;z-index:4;}
.regalos__caja{left:65.922%;top:44.797%;width:38.875%;height:22.233%;z-index:4;}
.regalos__sobre{left:69.810%;top:32.308%;width:35.567%;height:17.928%;z-index:4;}
.regalos__mariposa--1{left:44.086%;top:3.217%;width:11.249%;height:7.711%;z-index:4;}
.regalos__mariposa--2{left:5.542%;top:25.166%;width:9.347%;height:6.433%;z-index:4;}

/* Plantas del borde inferior para que la sección no quede vacía */
.regalos__flores--3{left:-7.500%;top:77.400%;width:32.000%;height:22.600%;z-index:2;}
.regalos__flores--4{left:75.500%;top:77.400%;width:32.000%;height:22.600%;z-index:2;transform:scaleX(-1);}
.regalos__eucalipto--4{left:12.000%;top:82.000%;width:30.000%;height:18.100%;z-index:1;}
.regalos__eucalipto--5{left:58.000%;top:79.500%;width:28.000%;height:22.200%;z-index:1;transform:scaleX(-1);}

/* Difumina el borde inferior para integrarlo con el papel */
.regalos__flores--3,
.regalos__flores--4,
.regalos__eucalipto--4,
.regalos__eucalipto--5 {
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}

.regalos__titulo{left:17.204%;top:29.707%;width:52.109%;height:8.515%;font-family:var(--script);font-size:calc(129.85 * var(--u));line-height:1.39;color:var(--azul);}
.regalos__intro{left:16.625%;top:39.782%;width:53.681%;height:4.825%;font-family:var(--cuerpo);font-size:calc(37.03 * var(--u));line-height:1.39;color:var(--azul);text-transform:uppercase;}
.regalos__parrafo--1{left:16.129%;top:47.067%;width:55.831%;height:7.237%;font-family:var(--cuerpo);font-size:calc(37.03 * var(--u));line-height:1.39;color:var(--texto);}
.regalos__parrafo--2{left:15.633%;top:56.764%;width:56.741%;height:4.825%;font-family:var(--cuerpo);font-size:calc(37.03 * var(--u));line-height:1.39;color:var(--texto);}
.regalos__cierre{left:22.746%;top:63.907%;width:42.514%;height:2.412%;font-family:var(--cuerpo);font-size:calc(37.03 * var(--u));line-height:1.39;color:var(--texto);}

/* ==========================================================================
   GALERÍA
   ========================================================================== */
.galeria {
  /* La sección es un poco más alta que el contenido (≈52 px a 640 px de ancho)
     para que la tarjeta inferior no se corte contra la sección siguiente. */
  aspect-ratio: 1209 / 2617;
}

.galeria__flores-azules{left:60.050%;top:13.109%;width:29.446%;height:28.432%;z-index:1;}
.galeria__ramo{left:9.181%;top:36.234%;width:55.170%;height:16.740%;z-index:2;}
.galeria__medallon{left:24.814%;top:8.446%;width:48.801%;height:33.251%;z-index:3;}
.galeria__marco-corazon{left:39.800%;top:31.893%;width:49.000%;height:22.397%;z-index:3;}
.galeria__tarjeta-frase{left:50%;top:42.232%;width:117%;height:54.020%;transform:translateX(-50%);z-index:2;}
.galeria__mariposa{left:43.259%;top:9.936%;width:11.993%;height:9.898%;z-index:4;}
.galeria__sombra{left:12.490%;top:78.686%;width:59.636%;height:12.154%;z-index:1;}
.galeria__tarjeta{left:13.069%;top:67.032%;width:74.524%;height:26.980%;z-index:5;}
.galeria__flores--izq{left:10.008%;top:66.732%;width:25.476%;height:13.682%;z-index:6;}
.galeria__flores--der{left:50.289%;top:66.273%;width:25.476%;height:13.682%;z-index:6;}
.galeria__racimo--izq{left:10.505%;top:66.083%;width:21.257%;height:8.675%;z-index:6;}
.galeria__racimo--der{left:56.824%;top:65.738%;width:21.919%;height:8.943%;z-index:6;}
.galeria__camara{left:38.875%;top:68.753%;width:22.250%;height:14.638%;z-index:6;}

.galeria__retrato {
  position: absolute;
  left:42.300%;top:33.236%;width:44.000%;height:19.709%;
  z-index: 4;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  clip-path: url(#corazon-foto);
}

.galeria__retrato img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.galeria__nombre{left:17.535%;top:2.679%;width:64.930%;height:19.109%;z-index:1;font-family:var(--script);font-size:calc(178 * var(--u));line-height:1.39;color:#8fa9ca;}
.galeria__xv{left:16.625%;top:15.822%;width:15.633%;height:20.483%;z-index:1;font-family:var(--display);font-size:calc(298.16 * var(--u));line-height:0.9;color:#b9cde4;}
.galeria__23{left:37.304%;top:13.530%;width:23.821%;height:14.485%;font-family:var(--display);font-size:calc(272.43 * var(--u));line-height:1.39;color:#c9d7ea;}
.galeria__mes{left:50%;top:21.635%;width:auto;height:10.740%;white-space:nowrap;transform:translateX(-50%);font-family:var(--script);font-size:calc(166 * var(--u));line-height:1.39;color:var(--hielo);}
.galeria__anio{left:39.537%;top:25.798%;width:22.581%;height:6.421%;font-family:var(--display);font-size:calc(120.56 * var(--u));line-height:1.39;color:var(--hielo);}
.galeria__frase{left:50%;top:54.647%;width:50%;height:12.094%;transform:translateX(-50%);font-family:var(--cuerpo);font-size:calc(40.83 * var(--u));line-height:1.32;color:var(--texto);}
.galeria__sesion{left:50%;top:78.044%;width:auto;height:4.434%;white-space:nowrap;transform:translateX(-50%);font-family:var(--script);font-size:calc(83.65 * var(--u));line-height:1.39;color:var(--azul);}

.galeria__boton {
  left:37.841%;top:82.399%;width:24.318%;height:3.134%;
  z-index: 7;
}

/* ==========================================================================
   CONFIRMAR ASISTENCIA
   ========================================================================== */
.confirmar {
  aspect-ratio: 1209 / 1717;
}

.confirmar__flores--der{left:49.711%;top:10.192%;width:42.928%;height:42.807%;z-index:1;}
.confirmar__sobre{left:5.376%;top:40.769%;width:82.382%;height:74.083%;z-index:1;}
.confirmar__flores--izq{left:-9.760%;top:36.401%;width:42.928%;height:42.807%;z-index:1;}
.confirmar__marco{left:9.760%;top:0.815%;width:81.141%;height:80.547%;z-index:2;}

.confirmar__falta{left:43.176%;top:13.570%;width:13.069%;height:7.688%;z-index:1;font-family:var(--script);font-size:calc(94.74 * var(--u));line-height:1.39;color:var(--azul);}
.confirmar__mensaje{left:27.750%;top:30.285%;width:45.000%;height:5.125%;font-family:var(--cuerpo);font-size:calc(45.27 * var(--u));line-height:0.98;color:var(--texto);}
.confirmar__mensaje--2{left:22.829%;top:37.624%;width:55.004%;height:7.688%;font-family:var(--cuerpo);font-size:calc(45.27 * var(--u));line-height:0.98;color:var(--texto);}
.confirmar__limite{left:50%;top:42.749%;width:auto;height:2.563%;white-space:nowrap;transform:translateX(-50%);font-family:var(--cuerpo);font-size:calc(40 * var(--u));line-height:1.1;color:var(--azul);}

.cuenta {
  position: absolute;
  left:30.108%;top:19.744%;width:39.868%;height:6.174%;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  padding: 0;
  list-style: none;
  color: var(--azul);
}

.cuenta__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cuenta__item:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: calc(-2 * var(--u));
  right: calc(-9 * var(--u));
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  color: var(--azul);
}

.cuenta__num {
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: calc(1 * var(--u));
  font-variant-numeric: tabular-nums;
}

.cuenta__etiqueta {
  margin-top: calc(2 * var(--u));
  font-family: var(--etiqueta);
  font-size: calc(17 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: calc(1.5 * var(--u));
  text-transform: uppercase;
}

.confirmar__boton {
  left:30.852%;top:48.398%;width:35.567%;height:6.756%;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  border-radius: 999px;
  color: var(--blanco);
  font-family: var(--boton);
  font-size: calc(40.12 * var(--u));
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: calc(-1 * var(--u));
  text-transform: uppercase;
  text-decoration: none;
}

.confirmar__check {
  flex: 0 0 auto;
  width: calc(86 * var(--u));
  height: calc(77 * var(--u));
  fill: none;
}

/* ---------- Botón dorado ---------- */
.boton-dorado {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(
    90deg,
    #a88c4e 0%,
    #e6cd95 25%,
    #a88c4e 50%,
    #e6cd95 75%,
    #a88c4e 100%
  );
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.18),
    0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(20, 29, 65, 0.28);
  color: var(--blanco);
  font-family: var(--boton);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.boton-dorado:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.28),
    0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(20, 29, 65, 0.34);
}

.boton-dorado:active {
  transform: translateY(0);
}

.galeria__boton {
  width: 24.318%;
  height: 3.498%;
  border-radius: 999px;
  font-size: calc(33.04 * var(--u));
  letter-spacing: calc(1.26 * var(--u));
}

/* ==========================================================================
   GALERÍA EMERGENTE
   ========================================================================== */
.lightbox {
  --u: clamp(0.8px, calc(100vw / 1209), 1.1px);
  position: fixed;
  inset: 0;
  width: min(92vw, 560px);
  max-height: 88vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: calc(22 * var(--u));
  background: transparent;
  color: var(--blanco);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(7, 14, 30, 0.88);
  backdrop-filter: blur(6px);
}

.lightbox__figura {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(230, 205, 149, 0.55);
  border-radius: calc(22 * var(--u));
  background: #0a1429;
  box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(0, 0, 0, 0.5);
}

.lightbox__imagen {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #08101f;
}

.lightbox__pie {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: calc(26 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
  color: var(--hielo);
  background: linear-gradient(180deg, transparent, rgba(6, 12, 26, 0.85));
  font-family: var(--etiqueta);
  font-size: calc(17 * var(--u));
  letter-spacing: calc(1.4 * var(--u));
  text-align: center;
}

.lightbox__chispas {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.lightbox__chispas::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(246, 217, 143, 0.5), rgba(246, 217, 143, 0) 62%);
}

.lightbox__chispas--activo::before {
  animation: destello 0.9s ease-out forwards;
}

.lightbox__chispas i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  color: var(--c);
  font-style: normal;
  line-height: 1;
  opacity: 0;
  animation: chispa var(--t) ease-out var(--d) forwards;
}

.lightbox__chispas i::before {
  content: "✦";
  display: block;
  font-size: 100%;
  line-height: 1;
  text-shadow: 0 0 calc(7 * var(--u)) rgba(255, 241, 196, 0.95);
}

.lightbox__figura--sorpresa {
  animation: asombro 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes chispa {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot));
  }
}

@keyframes destello {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes asombro {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.025);
  }
  60% {
    transform: scale(0.995);
  }
  100% {
    transform: scale(1);
  }
}

.lightbox__cerrar,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230, 205, 149, 0.7);
  border-radius: 50%;
  color: var(--oro-claro);
  background: rgba(9, 18, 38, 0.72);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lightbox__cerrar:hover,
.lightbox__nav:hover {
  color: var(--azul-noche);
  background: var(--oro-claro);
}

.lightbox__cerrar {
  top: calc(14 * var(--u));
  right: calc(14 * var(--u));
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1;
}

.lightbox__nav {
  top: 50%;
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  padding: 0;
  border-radius: 50%;
  font-size: calc(40 * var(--u));
  line-height: 1;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: calc(12 * var(--u));
}

.lightbox__nav--next {
  right: calc(12 * var(--u));
}

/* ==========================================================================
   MODAL DE CONFIRMACIÓN
   ========================================================================== */
.modal-confirmar {
  position: fixed;
  inset: 0;
  width: min(92vw, 440px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--azul);
  overflow: visible;
}

.modal-confirmar::backdrop {
  background: rgba(7, 14, 30, 0.82);
  backdrop-filter: blur(6px);
}

.modal-confirmar[open]::backdrop {
  animation: modal-fondo 0.25s ease-out;
}

.modal-confirmar__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 17px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: clamp(28px, 6vw, 38px) clamp(20px, 5.5vw, 32px) clamp(22px, 5vw, 28px);
  border: 1px solid rgba(230, 205, 149, 0.8);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf9 0%, #fbf3e6 100%);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 5px rgba(230, 205, 149, 0.12);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: modal-entrar 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.modal-confirmar__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--azul);
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.modal-confirmar__cerrar:hover {
  background: rgba(30, 51, 88, 0.08);
}

.modal-confirmar__antetitulo {
  margin: 0;
  color: #8a6d35;
  font-family: var(--etiqueta);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
}

.modal-confirmar__titulo {
  margin: -7px 0 0;
  color: var(--azul);
  font-family: var(--script);
  font-size: clamp(34px, 9vw, 46px);
  font-weight: 400;
  line-height: 1.05;
  text-align: center;
}

.modal-confirmar__texto {
  margin: -8px 0 0;
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.45;
  text-align: center;
}

.modal-confirmar__campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.modal-confirmar__campo label {
  color: var(--azul);
  font-family: var(--etiqueta);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.modal-confirmar__campo label span {
  color: #8a8f9c;
  letter-spacing: 0.06em;
  text-transform: none;
}

.modal-confirmar__campo input,
.modal-confirmar__campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(30, 51, 88, 0.22);
  border-radius: 10px;
  background: #ffffff;
  color: var(--azul);
  font-family: var(--cuerpo);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-confirmar__campo textarea {
  min-height: 88px;
  resize: vertical;
}

.modal-confirmar__campo input::placeholder,
.modal-confirmar__campo textarea::placeholder {
  color: #9aa3b5;
  font-weight: 400;
}

.modal-confirmar__campo input:focus,
.modal-confirmar__campo textarea:focus {
  outline: none;
  border-color: #b99a55;
  box-shadow: 0 0 0 3px rgba(230, 205, 149, 0.35);
}

.modal-confirmar__campo input[aria-invalid="true"] {
  border-color: #b04a4a;
  box-shadow: 0 0 0 3px rgba(176, 74, 74, 0.15);
}

.modal-confirmar__error {
  margin: 0;
  color: #a33b3b;
  font-family: var(--cuerpo);
  font-size: 12px;
  line-height: 1.35;
}

.modal-confirmar__error:empty {
  display: none;
}

.modal-confirmar__enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #a88c4e 0%,
    #e6cd95 25%,
    #a88c4e 50%,
    #e6cd95 75%,
    #a88c4e 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(20, 29, 65, 0.28);
  color: var(--blanco);
  font-family: var(--boton);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.modal-confirmar__enviar:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
}

.modal-confirmar__enviar:active {
  transform: translateY(0);
}

.modal-confirmar__enviar svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.modal-confirmar__nota {
  margin: -7px 0 0;
  color: #7d8494;
  font-family: var(--etiqueta);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
}

@keyframes modal-entrar {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-fondo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .intro-espacio {
    height: 0 !important;
  }

  .intro-sobre,
  .intro-pista {
    display: none !important;
  }
}

/* ==========================================================================
   Pantallas muy estrechas: mantiene la proporción y evita texto minúsculo
   ========================================================================== */
@media (max-width: 340px) {
  .invitacion {
    max-width: none;
  }
}