/* ============================================================
   EL BAUTIZO DE EMILIO — estampa de bautizo
   Marfil, oro fino, celeste cielo. Cormorant Garamond + Karla.
   Arcos, líneas doradas finas y mucho aire. Diseño propio.
   ============================================================ */
:root {
  --marfil: #F8F3EA; --marfil-osc: #EFE6D6;
  --oro: #C9A96A; --oro-cl: #E6D6B3; --oro-osc: #81693B;
  --celeste: #CFE0EE; --celeste-cl: #E9F1F7; --celeste-osc: #8FB3D1;
  --azul: #3D5A80; --azul-osc: #2B4160; --gris: #626B76;
  --wa: #0E7A3B;
  --f-titulo: 'Cormorant Garamond', Georgia, serif;
  --f-texto: 'Karla', system-ui, sans-serif;
  --t-xs: clamp(10.5px, 2.8vw, 12px); --t-sm: clamp(12.5px, 3.3vw, 14px); --t-md: clamp(15px, 4vw, 17px);
  --t-lg: clamp(18px, 4.8vw, 22px); --t-xl: clamp(24px, 6.4vw, 30px); --t-2xl: clamp(30px, 8.2vw, 40px);
  --t-3xl: clamp(42px, 12vw, 66px); --t-num: clamp(40px, 12vw, 64px);
  --ancho: 600px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-texto); font-weight: 400; color: var(--azul-osc); background: var(--marfil); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.cerrado { overflow: hidden; height: 100dvh; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
i { font-family: var(--f-titulo); font-style: italic; }

/* ============================================================ PORTADA */
.portada { position: fixed; inset: 0; z-index: 50; background: var(--marfil); overflow: hidden; }
.portada__escena { position: absolute; left: 50%; top: 50%; width: calc(var(--w, 752) * 1px); height: calc(var(--h, 1344) * 1px); will-change: transform; }
.portada__fondo { width: 100%; height: 100%; object-fit: cover; }
/* rayos de luz que giran despacio y se encienden al abrir */
.rayos { position: absolute; left: 50%; top: 18%; width: 2400px; height: 2400px; margin: -1200px; border-radius: 50%; opacity: .0; will-change: transform, opacity;
  background: repeating-conic-gradient(from 0deg, rgba(255,246,214,.55) 0deg 6deg, rgba(255,246,214,0) 6deg 18deg); }
.paloma { position: absolute; will-change: transform; filter: drop-shadow(0 18px 30px rgba(61,90,128,.18)); }
.nube { position: absolute; will-change: transform; }
.nube--der { transform: scaleX(-1); }
.destello { position: absolute; inset: -10%; background: radial-gradient(circle at 50% 35%, #FFFDF7 0%, #FFF6DC 30%, rgba(255,246,220,0) 70%); opacity: 0; pointer-events: none; }

.portada__cabecera { position: absolute; top: max(28px, env(safe-area-inset-top)); left: 0; right: 0; display: grid; justify-items: center; gap: 6px; z-index: 3; pointer-events: none; }
.portada__sobre { font: 500 var(--t-xs)/1 var(--f-texto); letter-spacing: .34em; text-transform: uppercase; color: var(--oro-osc); }
.portada__nombre { font: italic 500 var(--t-3xl)/1 var(--f-titulo); color: var(--azul); }
.portada__fecha { font: 500 var(--t-sm)/1 var(--f-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--gris); }
.portada__tap { position: absolute; inset: 0; z-index: 5; }
.portada__cta { position: absolute; left: 0; right: 0; bottom: max(30px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 10px; z-index: 3; pointer-events: none; }
.portada__cta span:first-child { font: 500 var(--t-sm)/1 var(--f-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--azul); }
.portada__cta-linea { width: 1px; height: 34px; background: linear-gradient(180deg, var(--oro), transparent); animation: baja 1.8s ease-in-out infinite; }
@keyframes baja { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } }

/* ============================================================ ESTAMPA */
.estampa { position: relative; z-index: 1; }
body.cerrado .estampa { visibility: hidden; }
.hoja { position: relative; padding: clamp(60px, 12vh, 110px) clamp(20px, 6vw, 40px); overflow-x: hidden; overflow-x: clip; }
.hoja--celeste { background: var(--celeste-cl); }
.hoja__ancho { position: relative; max-width: var(--ancho); margin: 0 auto; text-align: center; }
.titulo { font: italic 500 var(--t-2xl)/1.15 var(--f-titulo); color: var(--azul); }
/* adorno dorado bajo los títulos: una cruz fina que se enciende al entrar */
.adorno { display: block; position: relative; width: 60px; height: 14px; margin: 12px auto 22px; }
.adorno::before, .adorno::after { content: ''; position: absolute; background: var(--oro); }
.adorno::before { left: 0; right: 0; top: 50%; height: 1px; transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.adorno::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%) scaleY(0); transition: transform .6s .5s ease; }
.adorno.visto::before { transform: scaleX(1); } .adorno.visto::after { transform: translateX(-50%) scaleY(1); }
.parrafo { font-size: var(--t-md); line-height: 1.8; max-width: 46ch; margin: 12px auto 0; color: var(--azul-osc); }
.parrafo b { font-weight: 600; color: var(--azul); }
.parrafo--capitular { text-align: left; }
.parrafo--capitular::first-letter { font: italic 500 3.4em/.85 var(--f-titulo); color: var(--oro-osc); float: left; margin: 6px 8px 0 0; }
.versiculo { margin: 26px auto 0; padding: 18px 22px; max-width: 42ch; border-left: 1px solid var(--oro); border-right: 1px solid var(--oro); }
.versiculo p { font: italic 500 var(--t-lg)/1.5 var(--f-titulo); color: var(--azul); }
.versiculo cite { display: block; margin-top: 8px; font: 500 var(--t-xs)/1 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-osc); font-style: normal; }
.firma { margin-top: 22px; font: italic 600 var(--t-xl)/1 var(--f-titulo); color: var(--gris); }

.fig { position: absolute; pointer-events: none; z-index: 2; will-change: transform; }
.fig--olivo { left: -4%; bottom: -14px; width: clamp(110px, 30vw, 170px); transform: rotate(20deg); }
.fig--palomita { left: 100%; top: 8%; width: clamp(70px, 18vw, 100px); opacity: 0; }
.fig--flores { width: clamp(70px, 20vw, 110px); }
.fig--flores-a { left: -2%; bottom: 6%; }
.fig--flores-b { right: -2%; top: 10%; transform: scaleX(-1); }

/* ---------- 1 · ARCO ---------- */
.arco { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 70px 22px 60px; overflow: hidden; background: var(--marfil); }
.arco__rayos { position: absolute; left: 50%; top: 40%; width: 220vmax; height: 220vmax; margin: -110vmax; border-radius: 50%; opacity: .55; will-change: transform;
  background: repeating-conic-gradient(from 0deg, rgba(201,169,106,.16) 0deg 5deg, rgba(201,169,106,0) 5deg 16deg); animation: giraRayos 90s linear infinite; }
@keyframes giraRayos { to { transform: rotate(360deg); } }
.arco__cruz { position: absolute; left: 50%; top: max(22px, env(safe-area-inset-top)); width: clamp(36px, 9vw, 52px); transform: translateX(-50%); z-index: 3; }
.arco__marco { position: relative; z-index: 2; width: min(100%, 420px); aspect-ratio: 3/4.2; border-radius: 999px 999px 18px 18px; overflow: hidden; border: 1px solid var(--oro); padding: 8px; background: var(--marfil); }
.arco__marco::before { content: ''; position: absolute; inset: 8px; border-radius: 999px 999px 12px 12px; border: 1px solid var(--oro); z-index: 3; pointer-events: none; }
.arco__video { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; border-radius: 999px 999px 12px 12px; }
.arco__velo { position: absolute; inset: 8px; border-radius: 999px 999px 12px 12px; background: linear-gradient(180deg, rgba(248,243,234,0) 40%, rgba(248,243,234,.75) 70%, var(--marfil) 100%); }
.arco__texto { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; text-align: center; padding: 0 20px; }
.arco__sobre { font: 500 var(--t-xs)/1.5 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-osc); }
.arco__nombre { margin-top: 6px; font: italic 500 var(--t-3xl)/1 var(--f-titulo); color: var(--azul); }
.arco__fecha { margin-top: 10px; font: 500 var(--t-sm)/1.4 var(--f-texto); letter-spacing: .1em; color: var(--gris); }

/* ---------- 3 · FALTAN ---------- */
.conteo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 2px; margin-top: 4px; }
.conteo div { display: grid; gap: 4px; }
.conteo i { width: 5px; height: 5px; border-radius: 50%; background: var(--oro); }
.conteo b { font: 500 var(--t-num)/1 var(--f-titulo); color: var(--azul); font-variant-numeric: tabular-nums; }
.conteo span { font: 500 var(--t-xs)/1 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.hoy { margin-top: 16px; font: italic 500 var(--t-2xl)/1 var(--f-titulo); color: var(--azul); }

/* ---------- 4 · PADRINOS ---------- */
.medallones { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
.medallon { display: grid; justify-items: center; gap: 6px; }
.medallon__inicial { display: grid; place-items: center; width: clamp(72px, 20vw, 96px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--oro); background: var(--marfil); font: italic 500 var(--t-2xl)/1 var(--f-titulo); color: var(--oro-osc); box-shadow: inset 0 0 0 5px var(--marfil), inset 0 0 0 6px var(--oro-cl); transition: background-color .3s ease, color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.medallon b { font: 600 var(--t-md)/1.3 var(--f-titulo); color: var(--azul); }
.medallon small { font: 500 var(--t-xs)/1 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--oro-osc); }
.papas { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--oro-cl); }
.papas span { display: block; font: 500 var(--t-xs)/1 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-osc); margin-bottom: 8px; }
.papas b { font: 600 var(--t-lg)/1.3 var(--f-titulo); color: var(--azul); }
.papas i { color: var(--oro-osc); padding: 0 4px; }

/* ---------- 5 · VENTANAS ---------- */
.ventanas { display: grid; gap: 18px; margin-top: 4px; }
.ventana { display: block; padding: 34px 22px 26px; border-radius: 999px 999px 16px 16px; background: var(--marfil); border: 1px solid var(--oro-cl); text-decoration: none; color: inherit; transition: border-color .3s ease, background-color .3s ease, transform .3s ease; }
.ventana__tipo { display: block; font: 500 var(--t-xs)/1 var(--f-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--oro-osc); margin-bottom: 10px; }
.ventana b { display: block; font: italic 600 var(--t-xl)/1.2 var(--f-titulo); color: var(--azul); }
.ventana p { margin-top: 10px; font-size: var(--t-sm); line-height: 1.6; color: var(--gris); }
.enlace { position: relative; display: inline-block; margin-top: 14px; padding-bottom: 5px; font: 500 var(--t-sm)/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); text-decoration: none; }
.enlace .flecha { vertical-align: -3px; margin-left: 4px; transition: transform .25s ease; }
.enlace::after, .creditos__correo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.7,.2,1); }

/* ---------- 6 · ARCOS (galería) ---------- */
.arcos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 700px; margin: 0 auto; }
.arcos figure { margin: 0; text-align: center; }
.arcos img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 999px 999px 10px 10px; border: 1px solid var(--oro-cl); padding: 5px; background: var(--marfil); transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s ease; }
.arcos figcaption { margin-top: 8px; font: italic 500 var(--t-md)/1 var(--f-titulo); color: var(--gris); transition: color .3s ease; }

/* ---------- 7 · ESTAMPITAS ---------- */
.estampitas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.estampita { display: grid; justify-items: center; gap: 4px; padding: 16px 8px 14px; border-radius: 12px; background: var(--marfil); border: 1px solid var(--oro-cl); outline: 1px solid var(--oro-cl); outline-offset: -5px; transition: transform .3s ease, background-color .3s ease, border-color .3s ease; }
.ico { width: 52px; height: 52px; object-fit: contain; }
.estampita b { font: 600 var(--t-sm)/1.2 var(--f-titulo); color: var(--azul); margin-top: 4px; }
.estampita small { font: 500 var(--t-xs)/1.3 var(--f-texto); color: var(--gris); text-align: center; }

/* ---------- 8 · CONFIRMAR ---------- */
.personas { display: inline-flex; align-items: center; gap: 16px; margin: 22px 0 18px; padding: 6px 8px; border: 1px solid var(--oro); border-radius: 999px; background: var(--marfil); }
.personas__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--oro); background: transparent; color: var(--azul); cursor: pointer; transition: background-color .22s ease, color .22s ease, transform .15s ease; }
.personas__btn svg { display: block; }
.personas__btn:active { transform: scale(.92); }
.personas__num b { font: italic 500 var(--t-xl)/1 var(--f-titulo); color: var(--azul); }
.personas__num small { font: 500 var(--t-sm)/1 var(--f-texto); color: var(--gris); padding-right: 6px; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 999px; text-decoration: none; font: 500 var(--t-sm)/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; background: var(--azul); color: var(--marfil); transition: transform .2s ease, background-color .3s ease, color .3s ease; }
.boton:active { transform: scale(.97); }
.boton--wa { background: var(--wa); color: #fff; }

/* ---------- 9 · VELA (canción) ---------- */
.vela { position: relative; margin: 6px auto 0; width: 90px; height: 190px; border: none; background: transparent; cursor: pointer; display: grid; place-items: end center; }
.vela img { width: 22px; }
.vela__llama { position: absolute; left: 50%; top: 4px; width: 14px; height: 22px; margin-left: -7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #FFF6D5, #F5C044 55%, rgba(245,192,68,0) 100%); opacity: 0; transform: scale(.2); transform-origin: 50% 100%; transition: opacity .5s ease, transform .5s ease; }
.vela__llama::after { content: ''; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255,230,160,.6), rgba(255,230,160,0) 70%); }
.cancion.tocando .vela__llama { opacity: 1; transform: scale(1); animation: llama .18s ease-in-out infinite alternate; }
@keyframes llama { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.08, .95) rotate(3deg); } }
.cancion__pista { margin-top: 10px; font: 500 var(--t-sm)/1.4 var(--f-texto); color: var(--gris); }
.yt-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------- 10 · CIERRE + CRÉDITOS ---------- */
.cierre { padding: clamp(60px, 13vh, 110px) 20px clamp(40px, 8vh, 60px); text-align: center; background: var(--marfil); }
.cierre__concha { width: clamp(64px, 16vw, 84px); margin: 0 auto 14px; }
.cierre__texto { font: 500 var(--t-xs)/1.5 var(--f-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--oro-osc); }
.cierre__nombre { margin: 10px 0 26px; font: italic 500 var(--t-3xl)/1 var(--f-titulo); color: var(--azul); }
.creditos { padding: clamp(44px, 8vh, 64px) 20px calc(36px + env(safe-area-inset-bottom)); text-align: center; background: var(--azul-osc); color: rgba(248,243,234,.9); }
.creditos p { font-size: var(--t-sm); line-height: 1.6; max-width: 46ch; margin: 0 auto; }
.creditos b { color: var(--oro-cl); }
.creditos__extras { display: none; }
.creditos__pregunta { margin: 0 auto 24px !important; font: italic 500 var(--t-xl)/1.3 var(--f-titulo) !important; color: var(--marfil); }
.creditos__correo { position: relative; display: inline-block; margin-top: 24px; padding-bottom: 3px; font-size: var(--t-sm); color: var(--oro-cl); text-decoration: none; }
.creditos__marca { margin: 36px auto 0 !important; padding-top: 18px; border-top: 1px solid rgba(201,169,106,.3); font-size: var(--t-xs) !important; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* ---------- volver fijo ---------- */
.volver-fijo { position: fixed; left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--oro); background: rgba(248,243,234,.88); color: var(--azul); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .2s ease, background-color .2s ease, color .2s ease, opacity .3s ease; }
.volver-fijo:active { transform: scale(.94); }
body.cerrado .volver-fijo { opacity: 0; pointer-events: none; }

@media (min-width: 768px) {
  .ventanas { grid-template-columns: 1fr 1fr; }
  .arcos { grid-template-columns: repeat(4, 1fr); max-width: 960px; }
  .medallones { max-width: 420px; margin-left: auto; margin-right: auto; }
}
@media (hover: none) { .enlace::after, .creditos__correo::after { transform: scaleX(1); opacity: .45; } }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--oro); color: var(--azul-osc); }
  .boton--wa:hover { background: var(--marfil); color: var(--wa); }
  .personas__btn:hover { background: var(--azul); color: var(--marfil); }
  .ventana:hover { border-color: var(--oro); background: #fff; transform: translateY(-4px); }
  .ventana:hover .enlace::after, .enlace:hover::after, .creditos__correo:hover::after { transform: scaleX(1); }
  .ventana:hover .flecha, .enlace:hover .flecha { transform: translateX(5px); }
  .arcos figure:hover img { transform: scaleX(1.03) scaleY(1.017); border-color: var(--oro); }
  .arcos figure:hover figcaption { color: var(--azul); }
  .medallon:hover .medallon__inicial { background: var(--azul); color: var(--marfil); transform: translateY(-4px); }
  .estampita:hover { transform: translateY(-4px); background: #fff; border-color: var(--oro); }
  .conteo div b { display: inline-block; transition: color .3s ease; } .conteo div:hover b { color: var(--oro-osc); }
  .vela { transition: transform .3s ease; } .vela:hover { transform: scale(1.05); }
  .vela:hover .vela__llama { opacity: .6; transform: scale(.8); }
  .volver-fijo:hover { background: var(--azul); color: var(--marfil); transform: translateX(-3px); }
  .cierre__concha { transition: transform .4s ease; } .cierre__concha:hover { transform: rotate(-8deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .adorno::before { transform: scaleX(1); } .adorno::after { transform: translateX(-50%) scaleY(1); }
}

/* pie: el correo va en su propia línea, 20 px debajo del botón de WhatsApp
   (en pantallas anchas quedaba pegado al lado del botón) */
.creditos__correo { display: table !important; margin: 20px auto 0 !important; }