/* ============================================================
   MISA EN MEMORIA DE MARÍA RODRÍGUEZ — recordatorio
   Marfil, gris cálido, oro apagado. EB Garamond + Source Sans 3.
   Sobrio, lento, con aire. Sin ninguna nota de fiesta. Diseño propio.
   ============================================================ */
:root {
  --marfil: #F6F1E7; --marfil-osc: #ECE4D4; --marfil-prof: #E2D8C3;
  --tinta: #3A362F; --gris: #69635A; --gris-cl: #676159;
  --oro: #C2AE85; --oro-cl: #E3D7BE; --oro-osc: #7A694B;
  --wa: #0E7A3B;
  --f-titulo: 'EB Garamond', Georgia, serif;
  --f-texto: 'Source Sans 3', system-ui, sans-serif;
  --t-xs: clamp(11px, 2.9vw, 12.5px); --t-sm: clamp(13px, 3.4vw, 15px); --t-md: clamp(16px, 4.2vw, 18px);
  --t-lg: clamp(19px, 5vw, 23px); --t-xl: clamp(24px, 6.4vw, 30px); --t-2xl: clamp(28px, 7.6vw, 38px);
  --t-3xl: clamp(34px, 9.5vw, 52px);
  --ancho: 560px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-texto); font-weight: 300; color: var(--tinta); 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; }

/* ============================================================ 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 { position: absolute; left: 50%; top: 0; width: 2600px; height: 2600px; margin: -1300px; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: repeating-conic-gradient(from 0deg, rgba(255,246,222,.5) 0deg 4deg, rgba(255,246,222,0) 4deg 16deg); }
.vela { position: absolute; }
.vela__cuerpo { position: relative; z-index: 2; width: 100%; }
.vela__halo { position: absolute; left: 50%; top: 4%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; z-index: 1; opacity: 0; transform: scale(0);
  background: radial-gradient(circle, rgba(255,232,170,.95) 0%, rgba(255,214,120,.55) 35%, rgba(246,241,231,0) 72%); will-change: transform, opacity; }
/* la llama: dos formas, una exterior anaranjada y una interior clara */
.vela__llama { position: absolute; left: 50%; top: 2.2%; width: 7%; aspect-ratio: 1/1.9; z-index: 3; transform: translate(-50%, -100%) scale(0); transform-origin: 50% 100%; will-change: transform, opacity; opacity: 0;
  background: radial-gradient(ellipse at 50% 75%, #FFF3C4 0%, #F7C24A 45%, rgba(233,140,40,.9) 75%, rgba(233,140,40,0) 100%); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; }
.vela__llama i { position: absolute; left: 30%; right: 30%; top: 40%; bottom: 12%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #FFFDF2, rgba(255,243,196,0) 80%); }
.portada.encendida .vela__llama { animation: llamea .16s ease-in-out infinite alternate; }
@keyframes llamea { from { transform: translate(-50%, -100%) scale(1) rotate(-2deg); } to { transform: translate(-50%, -100%) scale(1.06, .94) rotate(2.5deg); } }
.destello { position: absolute; inset: -10%; background: radial-gradient(circle at 50% 42%, #FFFDF6 0%, #FBF4E3 35%, rgba(246,241,231,0) 72%); opacity: 0; pointer-events: none; z-index: 4; }

.portada__cabecera { position: absolute; top: max(34px, env(safe-area-inset-top)); left: 0; right: 0; display: grid; justify-items: center; gap: 10px; z-index: 5; pointer-events: none; padding: 0 24px; text-align: center; }
.portada__sobre { font: 400 var(--t-xs)/1 var(--f-texto); letter-spacing: .34em; text-transform: uppercase; color: var(--gris); }
.portada__nombre { font: 400 var(--t-3xl)/1.1 var(--f-titulo); color: var(--tinta); }
.portada__tap { position: absolute; inset: 0; z-index: 6; }
.portada__cta { position: absolute; left: 0; right: 0; bottom: max(34px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 12px; z-index: 5; pointer-events: none; }
.portada__cta span:first-child { font: italic 400 var(--t-lg)/1 var(--f-titulo); color: var(--gris); }
.portada__cta-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--oro); animation: respira 2.6s ease-in-out infinite; }
@keyframes respira { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.8); opacity: 1; } }

/* ============================================================ RECORDATORIO */
.recordatorio { position: relative; z-index: 1; }
body.cerrado .recordatorio { visibility: hidden; }
.bloque { position: relative; padding: clamp(64px, 13vh, 120px) clamp(22px, 6vw, 44px); overflow-x: hidden; overflow-x: clip; }
.bloque--suave { background: var(--marfil-osc); }
.bloque__ancho { position: relative; max-width: var(--ancho); margin: 0 auto; text-align: center; }
.titulo { font: 400 var(--t-2xl)/1.2 var(--f-titulo); color: var(--tinta); }
/* la regla dorada se dibuja desde el centro */
.regla { display: block; width: min(100%, 320px); height: 1px; margin: 22px auto; background: var(--oro); transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.regla--corta { width: 72px; margin: 16px auto 24px; }
.regla.visto { transform: scaleX(1); }
.parrafo { font-size: var(--t-md); line-height: 1.85; max-width: 46ch; margin: 12px auto 0; color: var(--gris); font-weight: 300; }
.parrafo b { font-weight: 500; color: var(--tinta); }
.parrafo--capitular { text-align: left; }
.parrafo--capitular::first-letter { font: 400 3.3em/.85 var(--f-titulo); color: var(--oro-osc); float: left; margin: 6px 10px 0 0; }
.firma { margin-top: 24px; font: italic 400 var(--t-lg)/1.3 var(--f-titulo); color: var(--gris-cl); }
[data-suave] { opacity: 0; transform: translateY(14px); transition: opacity 1.1s ease, transform 1.1s ease; }
[data-suave].visto { opacity: 1; transform: none; }

.fig { position: absolute; pointer-events: none; z-index: 2; will-change: transform; }
.fig--lirio { width: clamp(80px, 22vw, 130px); opacity: .95; }
.fig--lirio-izq { left: -3%; bottom: -10px; transform: rotate(-12deg); }
.fig--lirio-der { right: -3%; bottom: -14px; transform: scaleX(-1) rotate(-12deg); }
.fig--paloma { right: 6%; top: 8%; width: clamp(56px, 15vw, 84px); opacity: .85; }
.fig--olivo { left: -2%; top: 10px; width: clamp(90px, 24vw, 130px); transform: rotate(160deg); opacity: .8; }

/* ---------- 1 · LUZ ---------- */
.luz { position: relative; min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 80px 24px 70px; overflow: hidden; background: var(--marfil); }
.luz__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.luz__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,241,231,.2), rgba(246,241,231,.55) 50%, var(--marfil) 96%); }
.luz__contenido { position: relative; z-index: 3; display: grid; justify-items: center; }
.retrato { width: clamp(180px, 50vw, 240px); aspect-ratio: 3/4; border-radius: 50% / 40%; padding: 6px; border: 1px solid var(--oro); background: var(--marfil); }
.retrato img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% / 40%; filter: grayscale(1) contrast(1.02); }
.luz__sobre { margin-top: 26px; font: 400 var(--t-xs)/1 var(--f-texto); letter-spacing: .34em; text-transform: uppercase; color: var(--gris); }
.luz__nombre { margin-top: 10px; font: 400 var(--t-3xl)/1.1 var(--f-titulo); color: var(--tinta); }
.luz__fechas { margin-top: 8px; font: italic 400 var(--t-lg)/1 var(--f-titulo); color: var(--gris-cl); letter-spacing: .1em; }
.luz__fechas span { padding: 0 8px; color: var(--oro); }
.luz__misa { font-size: var(--t-sm); line-height: 1.7; color: var(--gris); }
.luz__misa b { font-weight: 500; color: var(--tinta); }

/* ---------- 3 · SALMO ---------- */
.salmo { position: relative; padding: 26px 22px; }
.salmo::before, .salmo::after { content: ''; position: absolute; left: 50%; width: 1px; height: 34px; background: var(--oro); transform: translateX(-50%); }
.salmo::before { top: -14px; } .salmo::after { bottom: -14px; }
.salmo p { font: italic 400 var(--t-xl)/1.55 var(--f-titulo); color: var(--tinta); }
.salmo cite { display: block; margin-top: 14px; font: 400 var(--t-xs)/1 var(--f-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--oro-osc); font-style: normal; }

/* ---------- 4 · LA MISA ---------- */
.lugares { display: grid; gap: 14px; margin-top: 4px; }
.lugar { display: block; padding: 30px 24px 26px; background: var(--marfil); border: 1px solid var(--oro-cl); text-decoration: none; color: inherit; transition: border-color .4s ease, transform .4s ease; }
.lugar--nota { background: transparent; border-style: dashed; }
.lugar__tipo { display: block; font: 400 var(--t-xs)/1 var(--f-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--oro-osc); margin-bottom: 10px; }
.lugar b { display: block; font: 400 var(--t-xl)/1.25 var(--f-titulo); color: var(--tinta); }
.lugar p { margin-top: 10px; font-size: var(--t-sm); line-height: 1.7; color: var(--gris); }
.enlace { position: relative; display: inline-block; margin-top: 14px; padding-bottom: 5px; font: 400 var(--t-xs)/1 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--tinta); text-decoration: none; }
.enlace .flecha { vertical-align: -3px; margin-left: 4px; transition: transform .3s 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 .6s cubic-bezier(.2,.7,.2,1); }

/* ---------- 5 · RECUERDOS ---------- */
.recuerdos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 680px; margin: 0 auto; }
.recuerdos figure { margin: 0; }
.recuerdos img { width: 100%; aspect-ratio: 3/4; object-fit: cover; padding: 6px; border: 1px solid var(--oro-cl); background: var(--marfil); filter: sepia(.25) saturate(.8); transition: filter .6s ease, border-color .4s ease; }
.recuerdos figcaption { margin-top: 10px; font: italic 400 var(--t-md)/1.3 var(--f-titulo); color: var(--gris-cl); text-align: center; transition: color .4s ease; }

/* ---------- 6 · VELITA ---------- */
.velita { position: relative; margin: 26px auto 0; width: 70px; height: 150px; border: none; background: transparent; cursor: pointer; display: grid; align-items: end; justify-items: center; }
.velita__cuerpo { display: block; width: 26px; height: 96px; border-radius: 4px 4px 3px 3px; background: linear-gradient(90deg, #E8E2D4, #FFFDF7 45%, #E3DCCB); position: relative; }
.velita__cuerpo::after { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 8px; background: #4a4038; transform: translateX(-50%); }
.velita__cuerpo::before { content: ''; position: absolute; left: -12px; right: -12px; bottom: -8px; height: 10px; border-radius: 50%; background: var(--oro); opacity: .8; }
.velita__llama { position: absolute; left: 50%; bottom: 100px; width: 16px; height: 30px; transform: translateX(-50%) scale(0); transform-origin: 50% 100%; opacity: 0; transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
  background: radial-gradient(ellipse at 50% 75%, #FFF3C4 0%, #F7C24A 45%, rgba(233,140,40,.9) 75%, rgba(233,140,40,0) 100%); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; }
.velita__llama i { position: absolute; left: 30%; right: 30%; top: 40%; bottom: 12%; border-radius: 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #FFFDF2, rgba(255,243,196,0) 80%); }
.velita__llama::after { content: ''; position: absolute; inset: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(255,228,160,.55), rgba(255,228,160,0) 70%); }
.velita.encendida .velita__llama { opacity: 1; transform: translateX(-50%) scale(1); animation: llamea2 .18s ease-in-out infinite alternate; }
@keyframes llamea2 { from { transform: translateX(-50%) scale(1) rotate(-2deg); } to { transform: translateX(-50%) scale(1.05, .95) rotate(2deg); } }
.velas__cuenta { margin-top: 18px; font: italic 400 var(--t-md)/1.4 var(--f-titulo); color: var(--gris); min-height: 1.4em; }

/* ---------- 7 · CANCIÓN ---------- */
.paloma-btn { margin: 6px auto 0; width: 120px; height: 120px; border-radius: 50%; border: 1px solid var(--oro); background: var(--marfil); cursor: pointer; display: grid; place-items: center; transition: background-color .4s ease, border-color .4s ease; }
.paloma-btn img { width: 70px; transition: transform .6s ease; }
.cancion.tocando .paloma-btn { background: #fff; }
.cancion.tocando .paloma-btn img { animation: asciende 2.6s ease-in-out infinite; }
@keyframes asciende { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.04); } }
.cancion__pista { margin-top: 12px; font: 300 var(--t-sm)/1.5 var(--f-texto); color: var(--gris); }
.yt-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------- 8 · CONFIRMAR ---------- */
.personas { display: inline-flex; align-items: center; gap: 14px; margin: 22px 0 18px; padding: 6px 8px; border: 1px solid var(--oro-cl); border-radius: 999px; }
.personas__btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--oro); background: transparent; color: var(--tinta); cursor: pointer; transition: background-color .3s ease, color .3s ease, transform .15s ease; }
.personas__btn svg { display: block; }
.personas__btn:active { transform: scale(.92); }
.personas__num b { font: 400 var(--t-xl)/1 var(--f-titulo); color: var(--tinta); }
.personas__num small { font: 300 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; text-decoration: none; font: 400 var(--t-xs)/1 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; background: var(--tinta); color: var(--marfil); transition: transform .2s ease, background-color .4s ease, color .4s ease; }
.boton:active { transform: scale(.97); }
.boton--wa { background: var(--wa); color: #fff; }

/* ---------- 9 · CIERRE + CRÉDITOS ---------- */
.cierre { padding: clamp(70px, 14vh, 120px) 24px clamp(50px, 9vh, 70px); text-align: center; background: var(--marfil-osc); }
.cierre__rosario { width: clamp(40px, 11vw, 56px); margin: 0 auto 26px; will-change: transform, filter; }
.cierre__texto { font: italic 400 var(--t-lg)/1.3 var(--f-titulo); color: var(--gris); }
.cierre__nombre { margin: 10px 0 28px; font: 400 var(--t-2xl)/1.15 var(--f-titulo); color: var(--tinta); }
.creditos { padding: clamp(44px, 8vh, 64px) 20px calc(36px + env(safe-area-inset-bottom)); text-align: center; background: var(--tinta); color: rgba(246,241,231,.85); }
.creditos p { font-size: var(--t-sm); line-height: 1.7; max-width: 46ch; margin: 0 auto; }
.creditos b { color: var(--oro-cl); font-weight: 500; }
.creditos__extras { display: none; }
.creditos__pregunta { margin: 0 auto 24px !important; font: italic 400 var(--t-lg)/1.4 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(194,174,133,.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(246,241,231,.88); color: var(--tinta); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .3s ease, background-color .3s ease, color .3s ease, opacity .3s ease; }
.volver-fijo:active { transform: scale(.94); }
body.cerrado .volver-fijo { opacity: 0; pointer-events: none; }

@media (min-width: 768px) {
  .lugares { grid-template-columns: 1fr 1fr; }
  .recuerdos { grid-template-columns: repeat(4, 1fr); max-width: 980px; }
}
@media (hover: none) { .enlace::after, .creditos__correo::after { transform: scaleX(1); opacity: .45; } }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--oro-osc); color: var(--marfil); }
  .boton--wa:hover { background: var(--marfil); color: var(--wa); }
  .personas__btn:hover { background: var(--tinta); color: var(--marfil); }
  .lugar:hover { border-color: var(--oro); transform: translateY(-3px); }
  .lugar:hover .enlace::after, .enlace:hover::after, .creditos__correo:hover::after { transform: scaleX(1); }
  .lugar:hover .flecha, .enlace:hover .flecha { transform: translateX(5px); }
  .recuerdos figure:hover img { filter: sepia(0) saturate(1); border-color: var(--oro); }
  .recuerdos figure:hover figcaption { color: var(--tinta); }
  .retrato { transition: border-color .5s ease; } .retrato img { transition: filter .8s ease; }
  .retrato:hover { border-color: var(--oro-osc); } .retrato:hover img { filter: grayscale(0) sepia(.15); }
  .paloma-btn:hover { background: #fff; border-color: var(--oro-osc); }
  .paloma-btn:hover img { transform: translateY(-4px); }
  .velita:hover .velita__llama { opacity: .5; transform: translateX(-50%) scale(.7); }
  .velita.encendida:hover .velita__llama { opacity: 1; }
  .volver-fijo:hover { background: var(--tinta); color: var(--marfil); transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  [data-suave] { opacity: 1; transform: none; } .regla { transform: scaleX(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; }

/* ============================================================
   Revisión 1: las secciones aparecen en cascada, con un respiro antes
   de cada elemento (título, regla, párrafos…). El retraso lo pone el JS
   y se borra al terminar para que los hovers no se sientan lentos.
   ============================================================ */
.cascada > * { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.cascada > .regla { opacity: 1; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.cascada > .visto { opacity: 1; transform: none; }
.cascada > .regla.visto { transform: scaleX(1); }

/* recuerdos: la foto elegida sube y se ve a color; las demás se apagan */
.recuerdos figure { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.recuerdos figcaption { position: relative; padding-bottom: 8px; }
.recuerdos figcaption::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 40px; height: 1px; margin-left: -20px; background: var(--oro-osc); transform: scaleX(0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .recuerdos:hover figure:not(:hover) { opacity: .4; }
  .recuerdos figure:hover { transform: translateY(-10px); }
  .recuerdos figure:hover img { filter: none; border-color: var(--oro-osc); background: #fff; }
  .recuerdos figure:hover figcaption { color: var(--tinta); }
  .recuerdos figure:hover figcaption::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .cascada > * { opacity: 1; transform: none; } .cascada > .regla { transform: scaleX(1); } }