/* Boda de Areli & Toño · «El eclipse perfecto»: noche, dorado y marfil con toques de lila y celeste */
:root {
  --noche: #0d1829;
  --noche-2: #14223a;
  --oro: #d4ab6a;
  --oro-osc: #a8803f;
  --marfil: #f5f0e7;
  --lila: #c8b6e2;
  --celeste: #b7d6f2;
  --fondo: var(--marfil);
  --suave: #ebe4d6;
  --texto: #1b2740;
  --linea: rgba(180, 138, 76, .35);
  --acento: var(--oro-osc);
  --sobre-acento: #fff;
  --encabezado-fondo: rgba(13, 24, 41, .9);
  --fuente-display: "Bodoni Moda", Didot, Georgia, serif;
  --fuente-script: "Italiana", serif;
  --fuente-texto: "DM Sans", system-ui, sans-serif;
  --radio-foto: 4px;
  --radio: 2px;
}
body { font: 400 19px/1.7 "Cormorant Garamond", Georgia, serif; background: var(--noche); }
.angosto { width: min(640px, 100% - 40px); }
.eyebrow { font: 500 11px/1.6 var(--fuente-texto); letter-spacing: .34em; color: var(--oro-osc); }
.titulo { font: 400 clamp(36px, 9vw, 58px)/1.1 var(--fuente-display); letter-spacing: -.01em; }
.titulo em { font-style: italic; color: var(--oro-osc); }
.boton { font: 600 11px/1 var(--fuente-texto); letter-spacing: .22em; min-height: 46px; padding: 12px 26px; }
.boton svg { width: 15px; height: 15px; flex: none; }

/* Secciones claras y oscuras */
.marfil { background: var(--marfil); color: var(--texto); }
.noche { background: var(--noche); color: #ece4d4; --acento: var(--oro); --sobre-acento: var(--noche); }
.noche .eyebrow, .noche .titulo em { color: var(--oro); }
.estrellada { position: relative; overflow: hidden; }
.estrellada > .contenedor { position: relative; z-index: 1; }
.estrella { position: absolute; border-radius: 50%; background: #fff; opacity: .7; animation: titilar 4s ease-in-out infinite; }
@keyframes titilar { 50% { opacity: .15; } }
.chispa-sola { width: 26px; height: 26px; fill: var(--oro); margin: 0 auto 22px; display: block; }

/* Portada con eclipse */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: #f1e9da;
  background: radial-gradient(120% 70% at 50% 110%, #2a2440 0%, rgba(42, 36, 64, 0) 60%), radial-gradient(80% 50% at 50% 38%, #18294a 0%, var(--noche) 70%); }
.cielo { position: absolute; inset: 0; }
.hero__contenido { position: relative; z-index: 1; text-align: center; padding: 70px 20px 40px; display: grid; justify-items: center; }
.hero__pre { font: 500 11px var(--fuente-texto); letter-spacing: .5em; color: var(--oro); padding-left: .5em; }
.eclipse { position: relative; width: min(300px, 72vw); aspect-ratio: 1; margin: 26px 0 18px; }
.eclipse > span, .eclipse svg { position: absolute; }
.eclipse__sol { inset: 14%; border-radius: 50%; background: radial-gradient(circle, #fff3d6 0%, #f2c77a 55%, #d4ab6a 100%); box-shadow: 0 0 40px 10px rgba(242, 199, 122, .55); }
.eclipse__corona { inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(212, 171, 106, 0) 52%, rgba(242, 199, 122, .55) 60%, rgba(212, 171, 106, .14) 68%, rgba(212, 171, 106, 0) 74%); opacity: 0; transform: scale(.9); }
.eclipse__luna { inset: 14.6%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #18263f, #0a1322 70%); box-shadow: inset 0 0 0 1px rgba(212, 171, 106, .6); transform: translateX(-118%); }
.eclipse__chispa { width: 34px; height: 34px; fill: #fff8e6; left: 13%; top: 16%; opacity: 0; filter: drop-shadow(0 0 8px #fff3d6); }
.eclipse__letras { inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; font: 400 clamp(58px, 17vw, 84px)/1 var(--fuente-display); color: var(--oro); opacity: 0; }
.eclipse__letras em { font: italic 400 .36em "Cormorant Garamond", serif; color: #f1e9da; margin: .9em 2px 0; }
.hero__nombres { font: 400 clamp(40px, 11vw, 64px)/1.05 var(--fuente-display); }
.hero__nombres em { font-style: italic; color: var(--oro); }
.hero__fecha { font: 400 20px var(--fuente-script); letter-spacing: .5em; color: var(--oro); margin-top: 12px; padding-left: .5em; }
.hero__lema { font: italic 400 20px/1.4 "Cormorant Garamond", serif; margin-top: 18px; max-width: 26ch; opacity: .9; }
.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hero .boton { --acento: var(--oro); --sobre-acento: var(--noche); }
.hero .boton--linea { color: var(--oro); }
.hero__pre, .hero__nombres, .hero__fecha, .hero__lema, .hero__acciones { opacity: 0; transform: translateY(10px); }

/* Animación: la luna cubre al sol, aparece la corona, el anillo de diamante y las iniciales */
.eclipse__luna { animation: luna 2.6s cubic-bezier(.45, .05, .25, 1) .3s forwards; }
.eclipse__sol { animation: sol 2.6s ease .3s forwards; }
.eclipse__corona { animation: corona 1.4s ease 2.5s forwards; }
.eclipse__chispa { animation: chispa 1.6s ease 2.7s forwards; }
.eclipse__letras { animation: aparecer 1.2s ease 3.1s forwards; }
.hero__pre { animation: subir .9s ease .2s forwards; }
.hero__nombres { animation: subir 1s ease 3.4s forwards; }
.hero__fecha { animation: subir 1s ease 3.6s forwards; }
.hero__lema { animation: subir 1s ease 3.8s forwards; }
.hero__acciones { animation: subir 1s ease 4s forwards; }
@keyframes luna { to { transform: none; } }
@keyframes sol { 70% { box-shadow: 0 0 40px 10px rgba(242, 199, 122, .55); } to { box-shadow: 0 0 60px 18px rgba(242, 199, 122, .35); background: radial-gradient(circle, #f6d79c, #d4ab6a); } }
@keyframes corona { to { opacity: 1; transform: none; } }
@keyframes chispa { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; transform: scale(1.25); } to { opacity: .9; transform: scale(1); } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes subir { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .eclipse__luna { transform: none; }
  .eclipse__corona, .eclipse__chispa, .eclipse__letras, .hero__pre, .hero__nombres, .hero__fecha, .hero__lema, .hero__acciones { opacity: 1; transform: none; }
}

/* Ella es luna, él es sol */
.dos-mundos { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; max-width: 760px; margin-inline: auto; }
.mundo { border: 1px solid rgba(212, 171, 106, .3); padding: 32px 24px; display: grid; justify-items: center; gap: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)); }
.mundo:first-child .mundo__icono { color: var(--lila); }
.mundo:last-child .mundo__icono { color: var(--oro); }
.mundo__icono { width: 46px; height: 46px; margin-bottom: 6px; }
.mundo__quien { font: 500 11px var(--fuente-texto); letter-spacing: .32em; text-transform: uppercase; color: var(--oro); }
.mundo__nombre { font: 400 44px/1.1 var(--fuente-display); }
.mundo__texto { font-size: 19px; opacity: .88; max-width: 28ch; }
.dos-mundos__y { font: italic 400 40px/1 "Cormorant Garamond", serif; color: var(--oro); }
@media (min-width: 760px) { .dos-mundos { grid-template-columns: 1fr auto 1fr; align-items: center; } }

/* Banda con foto */
.banda { position: relative; min-height: 70svh; display: grid; align-items: end; overflow: hidden; }
.banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.banda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 24, 41, .1) 30%, rgba(13, 24, 41, .85) 100%); }
.banda__frase { position: relative; z-index: 1; padding: 0 24px 46px; color: #f1e9da; font: 400 clamp(30px, 8vw, 48px)/1.15 var(--fuente-display); }
.banda__frase em { color: var(--oro); }

/* Invitación */
.frase { font: italic 400 clamp(22px, 5vw, 27px)/1.55 "Cormorant Garamond", serif; max-width: 34ch; margin: 0 auto; }
.padres-grid { margin-top: 44px; }
.padres__nombre { font: 400 22px/1.45 var(--fuente-display); }
.padrinos { margin-top: 36px; grid-template-columns: 1fr; }
.padrino { border-top: 1px solid var(--linea); padding-top: 26px; }
.padrino__rol { font: 500 11px var(--fuente-texto); letter-spacing: .3em; color: var(--oro-osc); }
.padrino__nombre { font: 400 22px/1.45 var(--fuente-display); }

/* Cuenta regresiva */
.cuenta__item { border: 1px solid rgba(212, 171, 106, .4); background: rgba(255, 255, 255, .03); }
.cuenta__num { font-family: var(--fuente-display); color: var(--oro); }
.cuenta__lbl { font: 500 10px var(--fuente-texto); letter-spacing: .24em; }

/* Historia: línea con siete lugares */
.lugares { list-style: none; padding: 0; margin: 44px auto 0; max-width: 520px; position: relative; text-align: left; display: grid; gap: 26px; }
.lugares::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--oro), rgba(212, 171, 106, .2)); }
.lugar { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: center; position: relative; }
.lugar__icono { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; background: var(--noche); color: var(--oro); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--oro), 0 0 0 5px var(--marfil); }
.lugar__icono svg { width: 26px; height: 26px; }
.lugar__nombre { font: 500 11px/1.4 var(--fuente-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--oro-osc); align-self: end; }
.lugar__texto { font: 400 22px/1.3 var(--fuente-display); align-self: start; }
.lugar--hoy .lugar__icono { background: var(--oro); color: var(--noche); }

/* Ceremonias */
.eventos { gap: 18px; }
.evento { border: 1px solid rgba(212, 171, 106, .3); padding: 32px 18px 28px; }
.evento__tipo { color: var(--oro); font: 500 11px var(--fuente-texto); letter-spacing: .3em; }
.evento__hora { font-family: var(--fuente-display); color: var(--oro); }
.evento__lugar { font: 400 25px/1.25 var(--fuente-display); }
.evento__mapa { border-radius: 2px; filter: grayscale(.2); }

/* Itinerario */
.itin__hora { font-family: var(--fuente-display); color: var(--oro-osc); }
.itin__txt { font-size: 20px; }
.itin__punto { background: var(--noche); box-shadow: 0 0 0 1px var(--oro); }

/* Código de vestimenta */
.reservados { margin-top: 26px; padding: 22px 16px; border: 1px solid rgba(212, 171, 106, .3); }
.reservados__titulo, .sugeridos__titulo { font: 500 11px var(--fuente-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
.reservados__lista { display: flex; justify-content: center; gap: 40px; margin-top: 16px; }
.reservado { display: grid; justify-items: center; gap: 4px; }
.reservado b { font: 400 20px var(--fuente-display); }
.reservado small { font: 400 12px var(--fuente-texto); opacity: .7; }
.muestra { width: 26px; height: 26px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.muestra--grande { width: 44px; height: 44px; position: relative; }
.muestra--grande::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: #e06a6a; transform: translateX(-50%) rotate(45deg); }
.sugeridos__titulo { margin-top: 30px; }
.sugeridos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px auto 0; max-width: 300px; }
.dress__notas { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 8px; font-size: 19px; }
.dress__notas li::before { content: "✦ "; color: var(--oro); }

/* Galería */
.galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal__item:nth-child(3n + 1) { grid-column: span 2; aspect-ratio: 3 / 2; }

/* Regalos */
.regalos__texto { font-size: 20px; margin-top: 20px; }
.regalo { border: 1px solid rgba(212, 171, 106, .35); }
.regalo__tienda { font-family: var(--fuente-display); color: var(--oro); }
.regalo__clabe { font-family: var(--fuente-texto); letter-spacing: .12em; }

/* Hospedaje y recomendaciones */
.hotel { border: 1px solid var(--linea); padding: 24px 18px; }
.hotel__nombre { font: 400 24px/1.2 var(--fuente-display); }
.hotel__detalle:empty { display: none; }
.recomendacion { margin: 44px auto 0; max-width: 420px; }

/* Confirmación y pie */
.confirmar__texto { font-size: 20px; margin-top: 18px; }
.pie { background: var(--noche); color: #ece4d4; border-top: 1px solid rgba(212, 171, 106, .25); }
.pie__logo { width: min(240px, 60vw); margin: 0 auto; }
.pie__lema { font: 400 20px/1.5 var(--fuente-display); margin-top: 18px; }
.pie__lema em { color: var(--oro); }
.rsvp-flotante { --acento: var(--oro); --sobre-acento: var(--noche); }
.hospedaje__nota { margin: 16px auto 0; max-width: 34ch; font-size: 20px; }
.hospedaje__nota strong { color: var(--oro-osc); font-weight: 600; }