/* XV de Andrea · Midnight floral disco: azul marino, plata y blanco con flores fucsia, naranja, amarillo y verde */
:root {
  --noche: #0b1433;
  --noche-2: #13204a;
  --plata: #c9ced8;
  --blanco: #f4f6fb;
  --fucsia: #e0317f;
  --naranja: #f28c1b;
  --amarillo: #f5c518;
  --verde: #3fae5a;
  --fondo: var(--noche);
  --suave: var(--noche-2);
  --texto: var(--blanco);
  --linea: rgba(201, 206, 216, .28);
  --acento: var(--fucsia);
  --sobre-acento: #fff;
  --encabezado-fondo: rgba(11, 20, 51, .9);
  --fuente-display: "Bodoni Moda", Didot, Georgia, serif;
  --fuente-script: "Great Vibes", cursive;
  --fuente-texto: "Montserrat", system-ui, sans-serif;
  --radio-foto: 14px;
}
body { background: var(--noche); color: var(--blanco); font: 400 16px/1.7 var(--fuente-texto); }
.angosto { width: min(620px, 100% - 40px); }
.eyebrow { font: 600 11px/1.6 var(--fuente-texto); letter-spacing: .34em; color: var(--amarillo); }
.titulo { font: italic 400 clamp(36px, 9vw, 56px)/1.1 var(--fuente-display); }
.etiqueta { font: 600 11px/1.6 var(--fuente-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--plata); }
.boton { font: 700 12px/1 var(--fuente-texto); letter-spacing: .18em; border-radius: 999px; background: var(--fucsia); border-color: var(--fucsia); }
.boton--linea { background: transparent; color: var(--blanco); border-color: var(--plata); }
.boton--claro { background: var(--blanco); color: var(--noche); border-color: var(--blanco); }
.seccion { position: relative; overflow: hidden; }
.brillo { background: radial-gradient(90% 60% at 50% 0%, #1b2c66 0%, var(--noche) 70%); }
.seccion > .contenedor, .seccion > .galeria, .seccion > .hashtag { position: relative; z-index: 1; }

/* Plata metálica para textos grandes */
.hero__nombre, .pie__nombre, .titulo {
  background: linear-gradient(100deg, #8e95a6 0%, #ffffff 30%, #b9c0cf 48%, #ffffff 64%, #8e95a6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Reflejos de colores que flotan por toda la página */
.destellos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
main, .pie { position: relative; z-index: 1; }

/* Bola disco dibujada (canvas) */
.bola { display: block; width: 170px; height: 170px; margin: 0 auto 18px; }
.bola--hero { position: absolute; top: 0; right: 10px; width: 104px; height: 200px; z-index: 2; margin: 0; }
.bola--hero2 { right: auto; left: 8px; width: 76px; height: 120px; }
.bola--chica { width: 120px; height: 120px; }

/* Portada */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 20, 51, .55) 0%, rgba(11, 20, 51, 0) 35%, rgba(11, 20, 51, .35) 55%, var(--noche) 100%); }
.hero__texto { position: relative; z-index: 2; text-align: center; padding: 0 20px calc(46px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 6px; }
.hero__pre { font: 500 22px/1 var(--fuente-display); letter-spacing: .5em; padding-left: .5em; color: var(--plata); }
.hero__nombre { font: 400 clamp(92px, 28vw, 150px)/1 var(--fuente-script); padding: 0 .1em .08em; }
.hero__fecha { display: flex; align-items: center; gap: 0; margin: 4px 0 18px; font: 500 20px var(--fuente-display); letter-spacing: .2em; }
.hero__fecha span { padding: 0 16px; }
.hero__fecha span + span { border-left: 1px solid var(--plata); }

/* Invitación */
.frase { font: italic 400 clamp(19px, 4.6vw, 23px)/1.6 var(--fuente-display); margin-top: 16px; }
.familia { display: grid; gap: 28px; margin-top: 40px; }
.padres { display: grid; gap: 2px; margin-top: 8px; }
.padres__nombre { font: 400 22px/1.4 var(--fuente-display); display: block; }
.padres__y { color: var(--fucsia); font: italic 400 22px var(--fuente-display); }
.padrinos { margin-top: 8px; grid-template-columns: 1fr; list-style: none; padding: 0; }
.padrino__rol { display: none; }
.padrino__nombre { font: 400 22px/1.4 var(--fuente-display); }
.flor { position: absolute; width: 46%; max-width: 360px; opacity: .72; filter: saturate(1.6) brightness(1.15); mask-image: radial-gradient(closest-side, #000 40%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); pointer-events: none; }
.flor--izq { left: -18%; top: -6%; }
.flor--der { right: -18%; top: -4%; }

/* Cuenta regresiva */
.cuenta__item { border: 1px solid var(--linea); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.cuenta__num { font-family: var(--fuente-display); }
.cuenta__item:nth-child(1) .cuenta__num { color: var(--fucsia); }
.cuenta__item:nth-child(2) .cuenta__num { color: var(--naranja); }
.cuenta__item:nth-child(3) .cuenta__num { color: var(--amarillo); }
.cuenta__item:nth-child(4) .cuenta__num { color: var(--verde); }
.cuenta__lbl { color: var(--plata); }

/* Lugares con foto */
.lugares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px; margin-top: 34px; text-align: left; }
.lugar { background: var(--noche-2); border: 1px solid var(--linea); border-radius: 20px; overflow: hidden; }
.lugar__foto { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.lugar__cuerpo { padding: 20px 20px 24px; display: grid; gap: 4px; }
.lugar__tipo { font: 600 11px var(--fuente-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--amarillo); }
.lugar__hora { font: italic 400 34px/1.1 var(--fuente-display); }
.lugar__nombre { font: 500 20px/1.3 var(--fuente-texto); }
.lugar__dir { color: var(--plata); font-size: 14px; }
.lugar .boton { justify-self: start; margin-top: 12px; }

/* Itinerario con puntos de colores */
.itin__hora { font-family: var(--fuente-display); font-style: italic; }
.itin__punto { background: var(--fucsia); box-shadow: 0 0 12px var(--fucsia); }
.itin:nth-child(4n + 2) .itin__punto { background: var(--naranja); box-shadow: 0 0 12px var(--naranja); }
.itin:nth-child(4n + 3) .itin__punto { background: var(--amarillo); box-shadow: 0 0 12px var(--amarillo); }
.itin:nth-child(4n + 4) .itin__punto { background: var(--verde); box-shadow: 0 0 12px var(--verde); }
.itin:not(:last-child) .itin__punto::after { background: var(--linea); }

/* Banda con flores */
.banda { position: relative; height: 62svh; min-height: 380px; overflow: hidden; display: grid; place-items: center; }
.banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.5) contrast(1.05); animation: acercar 24s ease-in-out infinite alternate; }
.banda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noche) 0%, rgba(11, 20, 51, .15) 30%, rgba(11, 20, 51, .15) 70%, var(--noche) 100%); }
.banda__frase { position: relative; z-index: 1; text-align: center; font: italic 400 clamp(34px, 9vw, 54px)/1.1 var(--fuente-display); }
.banda__frase em { font: 400 1.5em var(--fuente-script); color: var(--amarillo); }
@keyframes acercar { to { transform: scale(1.12); } }

/* Código de vestimenta */
.dress__codigo { font: italic 400 clamp(32px, 8vw, 46px)/1.15 var(--fuente-display); margin-top: 8px; }
.dress__pares { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.dress__pares div { border: 1px solid var(--linea); border-radius: 16px; padding: 18px 12px; background: rgba(255, 255, 255, .03); }
.dress__pares b { display: block; font: 600 11px var(--fuente-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--amarillo); margin-bottom: 6px; }
.dress__reservados { margin-top: 26px; }
.dress__lista { display: flex; justify-content: center; gap: 34px; margin-top: 14px; }
.dress__color { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--plata); }
.dress__muestra { width: 44px; height: 44px; border-radius: 50%; position: relative; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.dress__muestra::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--fucsia); transform: translateX(-50%) rotate(45deg); }
.dress__nota { margin-top: 22px; color: var(--plata); }

/* Galería */
.galeria { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px max(20px, calc((100% - 400px) / 2)) 10px; scrollbar-width: none; margin-top: 0; }
.galeria::-webkit-scrollbar { display: none; }
.gal__item { flex: 0 0 min(76vw, 400px); aspect-ratio: 4 / 5; background: #e9ecf2; scroll-snap-align: center; border: 1px solid var(--linea); }
.hashtag { margin-top: 22px; color: var(--plata); }
.hashtag strong { color: var(--amarillo); }

/* Regalos y hospedaje */
.regalos__texto { margin-top: 14px; }
.tarjetas { display: grid; gap: 14px; margin-top: 24px; }
.tarjeta { border: 1px solid var(--linea); border-radius: 18px; padding: 22px 18px; background: var(--noche-2); display: grid; gap: 6px; justify-items: center; }
.tarjeta h3 { font: italic 400 26px var(--fuente-display); }
.tarjeta p { color: var(--plata); }
.clabe { font: 600 18px var(--fuente-texto); letter-spacing: .1em; color: var(--blanco) !important; }
.hoteles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 28px; }
.hoteles .tarjeta p:empty { display: none; }

/* Confirmación y pie */
.texto { margin-top: 14px; }
.pie { background: var(--noche); border-top: 1px solid var(--linea); }
.pie__nombre { font: 400 64px/1 var(--fuente-script); }
.pie__fecha { letter-spacing: .3em; color: var(--plata); margin-top: 6px; }
.rsvp-flotante { background: var(--fucsia); border-color: var(--fucsia); }
.btn-musica { background: var(--noche-2); color: var(--blanco); border-color: var(--linea); }

/* Pantalla de inicio */
.intro { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; text-align: center; padding: 24px; background: radial-gradient(90% 60% at 50% 30%, #1b2c66 0%, var(--noche) 70%); transition: opacity .8s, visibility .8s; }
.intro.cerrando { opacity: 0; visibility: hidden; }
.intro .bola { width: 180px; height: 180px; }
.intro__frase { font: italic 400 30px/1.2 var(--fuente-display); margin-bottom: 22px; }
body.con-intro { overflow: hidden; }

/* Aparición al bajar (con respaldo: si no hay soporte, todo queda visible) */
.js-mov [data-revelar] { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s ease; }
.js-mov [data-revelar].revelado { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-mov [data-revelar] { opacity: 1; transform: none; }
  .banda img { animation: none; }
}

/* Más flores, sutiles y en distintos lados */
.flor--chica { width: 34%; max-width: 260px; opacity: .6; }
.flor--abajo { top: auto; bottom: -8%; }
.flor--centro { position: absolute; left: 50%; top: -60px; width: 300px; transform: translateX(-50%); opacity: .35; }
.pie { overflow: hidden; }
.pie > :not(.flor) { position: relative; z-index: 1; }

/* Fotos de Andrea intercaladas entre secciones */
.foto-banda { position: relative; height: 78svh; min-height: 460px; max-height: 760px; overflow: hidden; display: grid; align-items: end; }
.foto-banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.foto-banda::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--noche) 0%, rgba(11, 20, 51, 0) 18%, rgba(11, 20, 51, 0) 55%, var(--noche) 100%); }
.foto-banda__frase { position: relative; z-index: 2; text-align: center; padding-bottom: 34px; font: italic 400 clamp(30px, 8vw, 46px)/1.1 var(--fuente-display); }
.foto-banda__frase em { font: 400 1.45em var(--fuente-script); color: var(--amarillo); }

/* Monitos del código de vestimenta */
.dress__pares div { display: grid; justify-items: center; gap: 4px; padding-top: 14px; }
.monito { width: 96px; height: 170px; margin-bottom: 6px; overflow: visible; }
.monito .brilla { animation: brilla 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.monito .brilla:nth-of-type(2n) { animation-delay: -.8s; } .monito .brilla:nth-of-type(3n) { animation-delay: -1.6s; }
@keyframes brilla { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .monito .brilla { animation: none; opacity: .9; } }

/* Prendas del código de vestimenta (imágenes sin fondo) */
.prenda { display: grid; place-items: end center; width: 100%; height: 190px; margin-bottom: 8px;
  background: radial-gradient(closest-side, rgba(201, 206, 216, .32), rgba(201, 206, 216, 0) 75%); }
.prenda img { max-height: 182px; width: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }

/* Ramilletes de flores recortadas (fucsia, naranja, amarillo, morado) en las orillas de las secciones */
.ramo { position: absolute; z-index: 0; width: var(--t, 150px); height: var(--t, 150px); pointer-events: none; }
.ramo img { position: absolute; width: var(--f, 62%); height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); transform: rotate(var(--r, 0deg)); }
.ramo img:nth-child(1) { left: 0; top: 10%; }
.ramo img:nth-child(2) { right: 0; top: 0; width: 50%; }
.ramo img:nth-child(3) { left: 26%; bottom: 0; width: 44%; }
.ramo--izq { left: calc(var(--t, 150px) * -0.32); }
.ramo--der { right: calc(var(--t, 150px) * -0.32); }
.ramo--arriba { top: -30px; } .ramo--abajo { bottom: -30px; } .ramo--medio { top: 40%; }
.ramo { animation: mecer 7s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.ramo--der { animation-delay: -3s; }
@keyframes mecer { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .ramo { animation: none; } }
@media (min-width: 900px) { .ramo { --t: 210px; } }