/* Vista pública de una tarjeta. Los colores y fuentes vienen del tema (variables en :root). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--fuente-texto);
    color: var(--texto);
    background: var(--fondo);
    line-height: 1.6;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}
body.bloqueado { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--primario); }

.titulo-script { font-family: var(--fuente-titulos); font-weight: 400; font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.15; margin: .2em 0 .4em; color: var(--primario); }
.texto-grande { font-size: 1.2rem; }
.firma { font-family: var(--fuente-titulos); font-size: 1.8rem; color: var(--primario); margin-top: 1rem; }
.separador { width: 80px; height: 2px; margin: 0 auto 1.2rem; background: var(--primario); opacity: .5; }
.icono-bloque { font-size: 2.4rem; color: var(--primario); display: block; }

.bloque { padding: 4rem 1.25rem; }
.bloque:nth-child(even) { background: rgba(255, 255, 255, .55); }
.contenedor { max-width: 640px; margin: 0 auto; }
.contenedor-ancho { max-width: 1000px; margin: 0 auto; }

.boton {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1rem; padding: .8rem 1.8rem;
    border: 0; border-radius: 999px;
    background: var(--primario); color: #fff;
    font: 600 .95rem var(--fuente-texto); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
    cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.boton-secundario { background: transparent; color: var(--primario); border: 2px solid var(--primario); }

/* Intro */
.intro {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 2rem;
    background: var(--fondo);
    transition: opacity .6s, visibility .6s;
}
.intro.oculta { opacity: 0; visibility: hidden; }
.intro h1 { font-family: var(--fuente-titulos); font-weight: 400; color: var(--primario); font-size: clamp(2.6rem, 10vw, 4.5rem); margin: 0; line-height: 1.1; }
.intro-invitado { text-transform: uppercase; letter-spacing: .15em; font-size: .85rem; }

/* Portada */
.bloque-portada { padding: 0; }
.portada { min-height: 100vh; min-height: 100svh; background: var(--primario) center / cover no-repeat; display: flex; }
.portada-velo {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 1.25rem; color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45));
}
.portada .titulo-script { color: #fff; font-size: clamp(3rem, 14vw, 6rem); text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.antetitulo, .portada-fecha { text-transform: uppercase; letter-spacing: .25em; font-size: .9rem; margin: 0; }
.subtitulo { font-size: 1.1rem; margin: 0 0 1rem; }
.flecha { color: #fff; font-size: 1.8rem; margin-top: 2.5rem; animation: rebote 2s infinite; }
@keyframes rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Cuenta regresiva */
.cuenta { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.cuenta div { min-width: 70px; padding: .8rem .4rem; border-radius: .8rem; background: var(--primario); color: #fff; }
.cuenta span { display: block; font-size: 2rem; font-weight: 700; line-height: 1; }
.cuenta small { text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; }
.cuenta.terminada { font-family: var(--fuente-titulos); font-size: 2rem; color: var(--primario); }

/* Ubicación */
.dato { margin: .3rem 0; }
.lugar { font-size: 1.25rem; font-weight: 600; }
.mapa { width: 100%; height: 260px; border: 0; border-radius: 1rem; margin-top: 1rem; }

/* Cronograma */
.cronograma { list-style: none; padding: 0; margin: 0 auto; max-width: 420px; text-align: left; }
.cronograma li { display: flex; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed rgba(0, 0, 0, .15); }
.cronograma .hora { font-weight: 700; color: var(--primario); min-width: 60px; }

/* Galería */
.galeria-carrusel { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.galeria-carrusel .foto { flex: 0 0 80%; max-width: 420px; scroll-snap-align: center; }
.galeria-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .8rem; }

/* Video */
.video { position: relative; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 1rem; }

/* Regalos */
.datos-bancarios { margin-top: 1.2rem; padding: 1.2rem; border-radius: 1rem; background: #fff; }
.datos-bancarios p { margin: .4rem 0; }
.datos-bancarios small { text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.copiable { font-weight: 600; word-break: break-all; }
.copiar { border: 0; background: none; color: var(--primario); cursor: pointer; font-size: 1rem; }

/* RSVP */
.form-rsvp { display: grid; gap: .9rem; margin-top: 1.2rem; text-align: left; }
.form-rsvp label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }
.form-rsvp input:not([type=radio]), .form-rsvp select, .form-rsvp textarea {
    width: 100%; padding: .7rem .9rem; border: 1px solid rgba(0, 0, 0, .15); border-radius: .6rem;
    font: 1rem var(--fuente-texto); background: #fff; color: #222;
}
.opciones-asiste { display: flex; gap: 1.5rem; justify-content: center; }
.opciones-asiste label { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
.form-rsvp .boton { justify-self: center; }
.form-rsvp.no-asiste .solo-si-asiste { display: none; }
.mensaje-ok, .mensaje-error, .mensaje-info { margin-top: 1rem; padding: 1rem; border-radius: .8rem; }
.mensaje-ok { background: #e3f6e8; color: #1c6b34; font-weight: 600; }
.mensaje-error { background: #fde8e8; color: #9b1c1c; }
.mensaje-info { background: rgba(0, 0, 0, .05); }

/* Cierre */
.cierre .titulo-script { font-size: clamp(2rem, 8vw, 3rem); }
.pie { margin-top: 3rem; font-size: .8rem; opacity: .7; }
.pie a { color: inherit; }

/* Música */
.boton-musica {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
    width: 52px; height: 52px; border-radius: 50%; border: 0;
    background: var(--primario); color: #fff; font-size: 1.3rem; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.boton-musica.sonando i { animation: girar 3s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.aviso-preview { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: .3rem; background: #ffcf40; color: #333; font-size: .8rem; }

/* Aparición suave al hacer scroll */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
.revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; transition: none; } .flecha { animation: none; } }

/* ===== Apariencia configurable (ver Config\Temas y tema_css()) ===== */
.titulo-script { font-size: calc(clamp(2.2rem, 8vw, 3.4rem) * var(--escala-titulos, 1)); }
.mayusculas .antetitulo, .mayusculas .portada-fecha, .mayusculas .cuenta small, .mayusculas .boton { text-transform: uppercase; }
body:not(.mayusculas) .antetitulo, body:not(.mayusculas) .portada-fecha, body:not(.mayusculas) .boton { text-transform: none; letter-spacing: .05em; }
.separador, .icono-bloque, .firma { color: var(--acento); }
.separador { background: var(--acento); }

/* Fondo */
body.fondo-degradado { background: linear-gradient(180deg, var(--fondo), var(--fondo2)) fixed; }
body.fondo-imagen { background: var(--fondo) var(--fondo-imagen, none) center / cover fixed; }
body.fondo-textura.textura-papel { background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 4px 4px; }
body.fondo-textura.textura-lino { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px); }
body.fondo-textura.textura-puntos { background-image: radial-gradient(color-mix(in srgb, var(--primario) 25%, transparent) 1.5px, transparent 1.5px); background-size: 22px 22px; }
body.fondo-textura.textura-floral { background-image: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primario) 12%, transparent) 0 40px, transparent 41px), radial-gradient(circle at 80% 60%, color-mix(in srgb, var(--acento) 12%, transparent) 0 60px, transparent 61px); background-size: 260px 260px; }
body.fondo-imagen .bloque:nth-child(even), body.fondo-degradado .bloque:nth-child(even) { background: rgba(255, 255, 255, .35); }

/* Portada */
.portada-velo { background: rgba(0, 0, 0, var(--velo, .25)); }
.portada { overflow: hidden; position: relative; background-size: cover; }
/* Zoom lento: se anima una copia del fondo (::before) para no deformar el "cover" */
.portada-kenburns .portada::before {
    content: ""; position: absolute; inset: 0;
    background: inherit; background-size: cover; background-position: center;
    animation: kenburns 20s ease-in-out infinite alternate;
}
.portada-velo { position: relative; z-index: 1; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-1%, -1%); } }
.portada-parallax .portada { background-attachment: fixed; }
@media (max-width: 767px) { .portada-parallax .portada { background-attachment: scroll; } }

/* Fotos */
.fotos-recta .galeria img, .fotos-recta .video iframe { border-radius: 0; }
.fotos-circulo .galeria img { border-radius: 50%; aspect-ratio: 1; }
.fotos-arco .galeria img { border-radius: 999px 999px .6rem .6rem; }
.marco-blanco .galeria .foto { background: #fff; padding: .5rem .5rem 1.6rem; box-shadow: 0 4px 14px rgba(0,0,0,.12); border-radius: .3rem; }
.marco-color .galeria img { border: 4px solid var(--acento); }
.filtro-bn .galeria img, .filtro-bn .portada { filter: grayscale(1); }
.filtro-sepia .galeria img, .filtro-sepia .portada { filter: sepia(.6); }
.filtro-calido .galeria img, .filtro-calido .portada { filter: saturate(1.2) sepia(.15) brightness(1.03); }
.filtro-suave .galeria img, .filtro-suave .portada { filter: contrast(.9) brightness(1.08) saturate(.85); }

/* Movimientos: aparición de bloques */
.revelar { transition-duration: var(--vel-animacion, .8s); }
.anim-fade .revelar { transform: none; }
.anim-zoom .revelar { transform: scale(.92); }
.anim-lados .bloque:nth-child(odd) .revelar { transform: translateX(-40px); }
.anim-lados .bloque:nth-child(even) .revelar { transform: translateX(40px); }
.anim-ninguna .revelar { opacity: 1; transform: none; transition: none; }
.revelar.visible { opacity: 1; transform: none; }

/* Decoración animada */
.decoracion { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.decoracion span { position: absolute; top: -10vh; opacity: .8; animation: caer linear infinite; will-change: transform; }
@keyframes caer { to { transform: translateY(120vh) rotate(360deg); } }
.deco-brillos .decoracion span { color: var(--acento); animation-name: titilar; top: auto; }
@keyframes titilar { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .decoracion, .portada-kenburns .portada { animation: none !important; display: none; } }