/* =========================================================
   OV BODA · Fanny & Eric
   Mobile-first. En escritorio se muestra con ancho de teléfono.
   ========================================================= */
:root {
  --ov-crema: #FBF6EF;
  --ov-papel: #F5EDE2;
  --ov-durazno: #EFC2A6;
  --ov-durazno-osc: #C98B6B;
  --ov-cielo: #A9C7DE;
  --ov-salvia: #9DAF8E;
  --ov-tinta: #4B3A3A;
  --ov-tinta-suave: #7A6863;
  --ov-blanco: #FFFFFF;
  --ov-wa: #25D366;
  --ov-ancho: 480px;
  --ov-serif: 'Cormorant Garamond', Georgia, serif;
  --ov-sans: 'Jost', system-ui, sans-serif;
  --ov-script: 'Pinyon Script', 'Cormorant Garamond', cursive;
  --ov-radio: 18px;
  --ov-sombra: 0 10px 30px -12px rgba(75, 58, 58, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #E9DFD3;
  color: var(--ov-tinta);
  font-family: var(--ov-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.ov-bloqueado { overflow: hidden; height: 100svh; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- Contenedor tipo teléfono ---------- */
.ov-app {
  position: relative;
  max-width: var(--ov-ancho);
  margin: 0 auto;
  background: var(--ov-crema);
  min-height: 100svh;
  overflow-x: clip;
}
.ov-fondo-escritorio { display: none; }
@media (min-width: 560px) {
  .ov-fondo-escritorio {
    display: block;
    position: fixed; inset: -40px;
    background: var(--ov-fondo, #E9DFD3) center / cover no-repeat;
    filter: blur(28px) saturate(.9) brightness(.92);
    z-index: 0;
  }
  .ov-app { box-shadow: 0 0 60px rgba(0, 0, 0, .25); z-index: 1; }
}

/* ---------- Tipografía ---------- */
.ov-eyebrow {
  margin: 0 0 .4rem;
  font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ov-durazno-osc); font-weight: 400;
}
.ov-eyebrow--claro { color: #F7E3D6; }
.ov-h2 {
  margin: 0 0 1.2rem;
  font: 500 clamp(1.9rem, 8vw, 2.4rem)/1.1 var(--ov-serif);
}
.ov-h3 { margin: 0 0 .3rem; font: 600 1.25rem/1.2 var(--ov-serif); }
.ov-texto { margin: 0 0 1rem; color: var(--ov-tinta-suave); }
.ov-nota { margin: .6rem 0 0; font-size: .86rem; color: var(--ov-tinta-suave); font-style: italic; }

.ov-seccion { position: relative; padding: 4.5rem 1.5rem; text-align: center; }
.ov-seccion:nth-of-type(even) { background: var(--ov-papel); }

/* ---------- Botones ---------- */
.ov-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.6rem;
  border: 0; border-radius: 999px;
  background: var(--ov-tinta); color: var(--ov-crema);
  font: 400 .85rem var(--ov-sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .2s, background .2s;
}
.ov-btn:active { transform: scale(.97); }
.ov-btn--suave { background: transparent; color: var(--ov-tinta); box-shadow: inset 0 0 0 1px var(--ov-tinta); }
.ov-btn--wa { background: var(--ov-wa); color: #083b1c; width: 100%; font-weight: 500; }

/* ---------- Portada ---------- */
.ov-portada {
  position: fixed; inset: 0; z-index: 50;
  max-width: var(--ov-ancho); margin: 0 auto;
  height: 100svh; overflow: hidden;
  background: var(--ov-papel);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.7, 0, .2, 1);
}
.ov-portada.ov-abierta { opacity: 0; transform: scale(1.15); pointer-events: none; }
.ov-portada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-portada__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,246,239,.75) 0%, rgba(251,246,239,0) 30%, rgba(251,246,239,0) 70%, rgba(251,246,239,.8) 100%); }
.ov-portada__contenido {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(2.5rem, env(safe-area-inset-top)) 1.5rem max(2.5rem, env(safe-area-inset-bottom));
  text-align: center;
}
.ov-portada { cursor: pointer; }
/* Panel suave detrás del texto para que se lea sobre los pétalos */
.ov-portada__top {
  padding: 1rem 1.6rem 1.1rem; border-radius: 20px;
  background: rgba(251, 246, 239, .86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -16px rgba(75, 58, 58, .45);
}
.ov-portada__pre { margin: 0 0 .3rem; font-size: .72rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: #8A553D; }
.ov-portada__para { margin: 0; font: italic 600 1.7rem/1.2 var(--ov-serif); color: #3A2B2A; }
.ov-abrir { animation: ov-pulso 2.4s ease-in-out infinite; padding-inline: 2.2rem; }
@keyframes ov-pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(75,58,58,.35); } 50% { box-shadow: 0 0 0 16px rgba(75,58,58,0); } }
@keyframes ov-latido { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- Historia (scroll-scrub) ---------- */
.ov-historia { position: relative; height: 700svh; background: #1d1714; }
.ov-historia__escena { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ov-historia__capas, .ov-capa { position: absolute; inset: 0; }
.ov-capa { opacity: 0; transition: opacity .45s ease; }
.ov-capa.ov-activa { opacity: 1; }
.ov-capa video, .ov-capa img, .ov-capa .ov-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ov-capa .ov-poster { transition: opacity .3s; }
.ov-capa.ov-lista .ov-poster { opacity: 0; }
.ov-capa--foto img { transform: scale(calc(1.02 + var(--ov-p, 0) * .1)); will-change: transform; }

.ov-historia__textos { position: absolute; inset: 0; pointer-events: none; }
/* Velo suave arriba para que los textos blancos resalten */
.ov-historia__escena::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48%; pointer-events: none; background: linear-gradient(180deg, rgba(40,24,16,.5) 0%, rgba(40,24,16,.22) 55%, rgba(40,24,16,0) 100%); }
.ov-historia__textos, .ov-titulo { z-index: 2; }
.ov-frase {
  position: absolute; left: 1.5rem; right: 1.5rem; top: 14%;
  margin: 0; text-align: center;
  font: italic 500 clamp(1.7rem, 7.5vw, 2.2rem)/1.2 var(--ov-serif);
  color: #fff; text-shadow: 0 1px 2px rgba(45,25,15,.6), 0 2px 16px rgba(45,25,15,.65), 0 0 42px rgba(45,25,15,.4);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .6s ease;
}
.ov-frase.ov-visible { opacity: 1; transform: none; }
.ov-frase em { margin-left: .12em; font-family: var(--ov-script); font-style: normal; font-size: 2.2em; line-height: .8; color: #fff; text-shadow: 0 0 6px #FF5C86, 0 0 16px #FF5C86, 0 0 30px rgba(255, 92, 134, .7); }

.ov-destello { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

.ov-titulo {
  position: absolute; left: 0; right: 0; top: 9%;
  text-align: center; color: #fff;
  text-shadow: 0 1px 2px rgba(45,25,15,.6), 0 2px 18px rgba(45,25,15,.65), 0 0 46px rgba(45,25,15,.45);
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform .9s ease;
  pointer-events: none;
}
.ov-titulo.ov-visible { opacity: 1; transform: none; }
/* Halo oscuro y difuso detrás del título para separarlo del cielo y el papel picado */
.ov-titulo::before {
  content: ''; position: absolute; z-index: -1;
  left: -8%; right: -8%; top: -18%; bottom: -22%;
  background: radial-gradient(ellipse at center, rgba(42, 24, 18, .55) 0%, rgba(42, 24, 18, .32) 45%, rgba(42, 24, 18, 0) 72%);
}
.ov-titulo__pre { margin: 0; font-size: .8rem; font-weight: 500; letter-spacing: .4em; text-transform: uppercase; }
.ov-titulo__nombres { margin: .2rem 0 0; font: 400 clamp(3.4rem, 17vw, 4.6rem)/1 var(--ov-script); }
.ov-titulo__nombres i { font-family: var(--ov-serif); font-size: .55em; }
.ov-titulo__fecha { margin: .6rem 0 0; font: 700 1.45rem var(--ov-serif); letter-spacing: .22em; }
.ov-titulo__lugar { margin: .2rem 0 0; font-size: .82rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }

.ov-desliza {
  position: absolute; left: 50%; bottom: max(1.6rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: #fff; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  transition: opacity .4s;
}
.ov-desliza span { width: 1px; height: 36px; background: linear-gradient(#fff, transparent); animation: ov-baja 1.6s ease-in-out infinite; transform-origin: top; }
.ov-desliza.ov-oculto { opacity: 0; }
@keyframes ov-baja { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.ov-progreso { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.15); }
.ov-progreso i { display: block; height: 100%; width: 100%; background: var(--ov-durazno); transform-origin: left; transform: scaleX(0); }

/* ---------- Cuenta regresiva ---------- */
.ov-cuenta__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 0 0 1.8rem; }
.ov-cuenta__grid div { background: var(--ov-blanco); border-radius: 14px; padding: .9rem .2rem; box-shadow: var(--ov-sombra); }
.ov-cuenta__grid b { display: block; font: 500 2rem/1 var(--ov-serif); }
.ov-cuenta__grid span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ov-tinta-suave); }

/* ---------- Línea del tiempo ---------- */
.ov-linea { list-style: none; margin: 0; padding: 0; text-align: left; position: relative; }
.ov-linea::before { content: ''; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--ov-durazno), var(--ov-salvia)); }
.ov-momento { position: relative; padding: 0 0 2.4rem 58px; opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.ov-momento.ov-visible { opacity: 1; transform: none; }
.ov-momento::before {
  content: ''; position: absolute; left: 15px; top: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ov-crema); border: 2px solid var(--ov-durazno-osc);
}
.ov-momento__hora { font: 600 1.1rem var(--ov-serif); color: var(--ov-durazno-osc); letter-spacing: .05em; }
.ov-momento__titulo { margin: 0; font: 600 1.45rem/1.2 var(--ov-serif); }
.ov-momento__nota { margin: .2rem 0 .9rem; color: var(--ov-tinta-suave); font-size: .95rem; }

/* Viñeta vertical (imagen 4:5) */
.ov-vineta { position: relative; aspect-ratio: 4 / 5; border-radius: var(--ov-radio); overflow: hidden; box-shadow: var(--ov-sombra); background: var(--ov-papel); }
.ov-vineta img { width: 100%; height: 100%; object-fit: cover; animation: ov-respira 9s ease-in-out infinite alternate; }
@keyframes ov-respira { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1.5%); } }

/* Loops animados: se muestran completos en su proporción original */
.ov-estrella { position: relative; aspect-ratio: var(--ov-ar, 16 / 9); border-radius: var(--ov-radio); overflow: hidden; box-shadow: var(--ov-sombra); background: var(--ov-papel); }
.ov-estrella video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ---------- Lugar ---------- */
.ov-mapa { position: relative; aspect-ratio: 4 / 3; border-radius: var(--ov-radio); overflow: hidden; margin: 0 0 1.4rem; box-shadow: var(--ov-sombra); background: var(--ov-papel); }
.ov-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Tarjetas ---------- */
.ov-tarjeta { background: var(--ov-blanco); border-radius: var(--ov-radio); padding: 1.5rem 1.3rem; margin: 0 0 1rem; box-shadow: var(--ov-sombra); }
.ov-paleta { display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap; margin: .6rem 0 0; }
.ov-paleta i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

.ov-aviso { display: flex; gap: 1rem; text-align: left; background: var(--ov-blanco); border-radius: var(--ov-radio); padding: 1.2rem; margin: 0 0 1rem; box-shadow: var(--ov-sombra); }
.ov-aviso__icono { font-size: 1.6rem; line-height: 1; padding-top: .2rem; }
.ov-aviso .ov-texto { margin: 0; font-size: .95rem; }

.ov-desplegable { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.ov-desplegable.ov-abierto { grid-template-rows: 1fr; }
.ov-desplegable__in { overflow: hidden; min-height: 0; }
.ov-desplegable .ov-banco { margin: 1.2rem 0 0; box-shadow: inset 0 0 0 1px #EBDFD2; }
.ov-banco { text-align: left; }
.ov-banco__nota { margin: 1.1rem 0 .2rem; font-size: .88rem; line-height: 1.5; color: var(--ov-tinta-suave); }
.ov-banco__fila { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid #EFE6DB; }
.ov-banco__fila:last-child { border-bottom: 0; }
.ov-banco__fila small { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ov-tinta-suave); }
.ov-banco__fila b { font-weight: 500; overflow-wrap: anywhere; }
.ov-copiar { flex: none; border: 1px solid var(--ov-tinta); background: transparent; border-radius: 999px; padding: .35rem .8rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

/* ---------- Galería ---------- */
.ov-carrusel {
  display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -1.5rem; padding: 0 1.5rem .6rem;
  scrollbar-width: none;
}
.ov-carrusel::-webkit-scrollbar { display: none; }
.ov-carrusel button { flex: none; width: 78%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: var(--ov-radio); overflow: hidden; scroll-snap-align: center; cursor: zoom-in; box-shadow: var(--ov-sombra); background: var(--ov-papel); }
.ov-carrusel img { width: 100%; height: 100%; object-fit: cover; }

.ov-visor { position: fixed; inset: 0; z-index: 80; background: rgba(20, 14, 12, .92); display: grid; place-items: center; padding: 1rem; }
.ov-visor[hidden] { display: none; }
.ov-visor img { max-height: 90svh; border-radius: 10px; }
.ov-visor__cerrar { position: absolute; top: max(.6rem, env(safe-area-inset-top)); right: .8rem; width: 48px; height: 48px; border: 0; background: none; color: #fff; font-size: 2.2rem; cursor: pointer; }

/* ---------- Formulario ---------- */
.ov-form { text-align: left; }
.ov-campo { display: block; margin: 0 0 1rem; }
.ov-campo > span { display: block; margin: 0 0 .35rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ov-tinta-suave); }
.ov-campo input, .ov-campo select, .ov-campo textarea {
  width: 100%; min-height: 48px; padding: .75rem 1rem;
  border: 1px solid #E3D6C7; border-radius: 12px; background: var(--ov-blanco);
  font: 400 16px var(--ov-sans); color: var(--ov-tinta);
}
.ov-campo input:focus, .ov-campo select:focus, .ov-campo textarea:focus { outline: 2px solid var(--ov-durazno); border-color: transparent; }
.ov-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 1rem; }
.ov-opciones label { position: relative; }
.ov-opciones input { position: absolute; opacity: 0; }
.ov-opciones span { display: block; text-align: center; padding: .8rem .5rem; border-radius: 12px; border: 1px solid #E3D6C7; background: var(--ov-blanco); cursor: pointer; transition: .2s; }
.ov-opciones input:checked + span { background: var(--ov-tinta); color: var(--ov-crema); border-color: var(--ov-tinta); }
.ov-opciones input:focus-visible + span { outline: 2px solid var(--ov-durazno); }
.ov-error { min-height: 1.2em; margin: 0 0 .6rem; color: #B3453A; font-size: .88rem; }

/* ---------- Cierre ---------- */
.ov-cierre { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #1b2230; }
.ov-cierre__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-cierre__texto { position: absolute; left: 0; right: 0; top: 12%; text-align: center; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.ov-cierre__nombres { margin: 0; font: 400 clamp(3rem, 15vw, 4rem)/1 var(--ov-script); }
.ov-cierre__nombres i { font-family: var(--ov-serif); font-size: .55em; }
.ov-cierre__fecha { margin: .6rem 0 0; font: 500 1.1rem var(--ov-serif); letter-spacing: .25em; }

/* ---------- Música ---------- */
.ov-musica {
  position: fixed; z-index: 60;
  right: max(1rem, calc(50vw - var(--ov-ancho) / 2 + 1rem));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(251, 246, 239, .92); box-shadow: var(--ov-sombra);
  display: grid; place-items: center; cursor: pointer;
}
.ov-musica[hidden] { display: none; }
.ov-musica__barras { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.ov-musica__barras i { width: 3px; height: 100%; background: var(--ov-tinta); border-radius: 2px; animation: ov-barra .9s ease-in-out infinite; }
.ov-musica__barras i:nth-child(2) { animation-delay: .2s; }
.ov-musica__barras i:nth-child(3) { animation-delay: .4s; }
.ov-musica.ov-pausa .ov-musica__barras i { animation: none; height: 4px; }
@keyframes ov-barra { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.ov-aviso-copiado {
  position: fixed; left: 50%; bottom: 5rem; z-index: 90;
  transform: translate(-50%, 20px); opacity: 0;
  padding: .55rem 1.1rem; border-radius: 999px; background: var(--ov-tinta); color: var(--ov-crema);
  font-size: .8rem; letter-spacing: .1em; transition: .3s; pointer-events: none;
}
.ov-aviso-copiado.ov-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Precarga ---------- */
.ov-carga {
  position: fixed; inset: 0; z-index: 55;
  max-width: var(--ov-ancho); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  padding: 2rem; text-align: center;
  background: var(--ov-crema);
  transition: opacity .7s ease;
}
.ov-carga[hidden] { display: none; }
.ov-carga.ov-saliendo { opacity: 0; pointer-events: none; }
.ov-carga__foto { width: 170px; height: 170px; border-radius: 50%; overflow: hidden; box-shadow: var(--ov-sombra); animation: ov-flota 3s ease-in-out infinite; }
.ov-carga__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
@keyframes ov-flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ov-carga__texto { margin: .8rem 0 .2rem; font: italic 500 1.55rem/1.2 var(--ov-serif); }
.ov-carga__barra { width: 190px; height: 3px; border-radius: 3px; background: #EADFD2; overflow: hidden; }
.ov-carga__barra i { display: block; height: 100%; width: 100%; background: var(--ov-durazno-osc); transform-origin: left; transform: scaleX(0); transition: transform .35s ease; }
.ov-carga__pct { margin: 0; font-size: .75rem; letter-spacing: .22em; color: var(--ov-tinta-suave); }
.ov-carga__saltar { margin-top: .4rem; min-height: 44px; border: 0; background: none; color: var(--ov-tinta-suave); font-size: .9rem; text-decoration: underline; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}