/* Colección Bodas 2027 · segunda serie (80–99): el sobre, el fondo vivo y las estructuras. */

/* ================================================================ EL SOBRE */
:root { --so-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.so-escena { background: transparent !important; perspective: 1600px; overflow: hidden; }
.so-escena::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(75% 60% at 50% 42%, var(--so-mesa-1, #3A4450), var(--so-mesa-2, #161B21) 82%);
	transition: opacity .9s ease .25s; }
.so-escena::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: overlay; background: var(--so-grano); }
.so-expande .so-escena::before, .so-expande .so-escena::after { opacity: 0; }
.so-contenido { position: relative; display: grid; justify-items: center; gap: 22px; text-align: center; width: 100%; padding: 0 16px; }
.so-sobre { --w: min(86vw, 500px); position: relative; perspective: 1300px; width: var(--w); aspect-ratio: 1.42; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d;
	animation: so-flota 4.6s ease-in-out infinite alternate; -webkit-tap-highlight-color: transparent; }
@keyframes so-flota { from { transform: translateY(-5px) rotateX(4deg) rotateZ(-.6deg); } to { transform: translateY(5px) rotateX(-2deg) rotateZ(.6deg); } }
.so-sobre:focus-visible { outline: 2px solid var(--so-acento, var(--acento)); outline-offset: 14px; border-radius: 8px; }
.so-sobre > span { position: absolute; display: block; }
.so-sombra { inset: 6% 4% -6%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); filter: blur(14px); transform: translateZ(-40px) translateY(18%); }
.so-fondo { inset: 0; border-radius: 7px; background: var(--so-papel-2); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.so-interior { inset: 3% 3% 30%; border-radius: 4px; background: var(--so-forro-c, #ccc) center / 42% repeat; visibility: hidden; transition: visibility 0s linear .55s; }
.so-tarjeta { inset: 7% 6.5% 9%; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 6%; text-align: center; border-radius: 3px; visibility: hidden;
	background: var(--so-tarjeta, #FBF8F2); color: var(--so-tarjeta-tinta, var(--tinta)); box-shadow: 0 10px 24px rgb(0 0 0 / .25), inset 0 0 0 1px rgb(0 0 0 / .05);
	transition: transform 1s cubic-bezier(.34,1.18,.64,1) 1s, visibility 0s linear .55s; }
.so-tarjeta::before { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--so-acento, var(--acento)) 45%, transparent); border-radius: 2px; pointer-events: none; }
.so-tarjeta small { font: 600 .56rem/1.2 var(--sans), sans-serif; letter-spacing: .42em; text-transform: uppercase; color: var(--so-acento, var(--acento)); }
.so-tarjeta strong { font-family: var(--display), var(--script), serif; font-weight: var(--display-peso, 400); font-style: var(--display-estilo, normal); font-size: clamp(1.5rem, 6.4vw, 2.5rem); line-height: 1; color: inherit; }
.so-tarjeta em { font: 500 .62rem/1 var(--sans), sans-serif; font-style: normal; letter-spacing: .3em; color: color-mix(in srgb, var(--so-tarjeta-tinta, var(--tinta)) 70%, transparent); margin-top: 4px; }
.so-bolsillo { inset: 0; z-index: 2; transform: translateZ(4px); }
.so-bolsillo i { position: absolute; inset: 0; filter: drop-shadow(0 -1px 1.5px rgb(0 0 0 / .16)); }
.so-bolsillo b { position: absolute; inset: 0; border-radius: 7px; background-color: var(--so-papel); background-image: var(--so-grano), linear-gradient(var(--a, 180deg), rgb(255 255 255 / .16), rgb(0 0 0 / .08)); background-blend-mode: soft-light, normal; }
.so-l b { clip-path: polygon(0 0, 53% 55%, 0 100%); --a: 90deg; }
.so-r b { clip-path: polygon(100% 0, 47% 55%, 100% 100%); --a: 270deg; }
.so-b b { clip-path: polygon(0 100%, 50% 43%, 100% 100%); --a: 0deg; background-color: var(--so-papel-3, var(--so-papel)); }
.so-solapa { inset: 0 0 auto; height: 60%; z-index: 3; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.65,0,.35,1) .45s, z-index 0s linear .95s; }
.so-solapa i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 7px 7px 0 0; }
.so-solapa .cara { box-shadow: inset 0 -2px 0 rgb(0 0 0 / .04); background-color: var(--so-papel); background-image: var(--so-grano), linear-gradient(180deg, rgb(255 255 255 / .2), rgb(0 0 0 / .1)); background-blend-mode: soft-light, normal; }
.so-solapa .dorso { clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotateX(180deg); background: var(--so-forro-c, #ccc) center / 42% repeat; }
.so-solapa .sombra { clip-path: none; background: none; }
.so-solapa .sombra::before { content: ""; position: absolute; left: 6%; right: 6%; top: 10%; bottom: -8%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: rgb(0 0 0 / .22); filter: blur(5px); }
.so-cierre { z-index: 4; transform: translateZ(6px); left: 50%; top: 60%; width: var(--so-cierre-w, 22%); translate: -50% -50%; transition: transform .75s cubic-bezier(.5,0,.75,0), opacity .5s ease .2s; }
.so-cierre img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .32)); }
.so-brillo { inset: 0; z-index: 5; border-radius: 7px; pointer-events: none; overflow: hidden; }
.so-brillo::before { content: ""; position: absolute; inset: -50% -80%; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .28) 50%, transparent 58%); animation: so-brilla 5.5s ease-in-out infinite 1s; }
@keyframes so-brilla { 0%, 55% { transform: translateX(-40%); } 85%, 100% { transform: translateX(40%); } }
.so-para { margin: 0; font-size: 1rem; color: var(--so-texto-2, #D8DDE2); }
.so-para strong { color: var(--so-texto, #fff); }
.so-escena .xv-boton-suave { color: var(--so-texto, #fff); border-color: color-mix(in srgb, var(--so-texto, #fff) 40%, transparent); background: transparent; }
.so-toque { margin: 0; font: 700 .7rem/1 var(--sans), sans-serif; letter-spacing: .36em; text-transform: uppercase; color: var(--so-acento, var(--acento)); animation: so-late 2.2s ease-in-out infinite; }
@keyframes so-late { 50% { opacity: .4; } }
.so-escena .xv-boton { margin-top: -6px; }
.so-pie { display: grid; justify-items: center; gap: 14px; transition: opacity .45s ease, transform .45s ease; }

/* la apertura */
html.so-abre .so-sobre { animation: none; transform: none; transition: transform 1s cubic-bezier(.65,0,.35,1) 1.2s; }
html.so-abre .so-pie { opacity: 0; transform: translateY(10px); pointer-events: none; }
html.so-abre .so-interior, html.so-abre .so-tarjeta { visibility: visible; }
html.so-abre .so-solapa { transform: rotateX(180deg); z-index: 0; }
html.so-abre .so-tarjeta { transform: translateY(-66%) translateZ(2px); }
html.so-abre .so-brillo { opacity: 0; }
/* los cierres */
html.so-abre .so-cierre[data-cierre="despega"] { transform: translate(55%, -70%) rotate(32deg) scale(.55); opacity: 0; }
html.so-abre .so-cierre[data-cierre="desata"] { transform: scaleX(.05) scaleY(1.2); opacity: 0; transition: transform .6s cubic-bezier(.6,0,.4,1), opacity .4s ease .25s; }
html.so-abre .so-cierre[data-cierre="cae"] { transform: translateY(120%) rotate(-24deg); opacity: 0; transition: transform .8s cubic-bezier(.55,0,.8,.3), opacity .4s ease .45s; }
html.so-abre .so-cierre[data-cierre="gira"] { transform: rotate(540deg) scale(0); opacity: 0; transition: transform .8s cubic-bezier(.6,0,.4,1), opacity .3s ease .5s; }
html.so-abre .so-cierre[data-cierre="sube"] { transform: translateY(-160%) scale(1.15); opacity: 0; transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .5s ease .2s; }
.so-cierre[data-cierre="rompe"] { width: var(--so-cierre-w, 22%); }
.so-cierre[data-cierre="rompe"] img + img { position: absolute; inset: 0; }
.so-cierre[data-cierre="rompe"] img:first-child { clip-path: polygon(0 0, 54% 0, 46% 40%, 55% 62%, 44% 100%, 0 100%); }
.so-cierre[data-cierre="rompe"] img + img { clip-path: polygon(54% 0, 100% 0, 100% 100%, 44% 100%, 55% 62%, 46% 40%); }
html.so-abre .so-cierre[data-cierre="rompe"] { opacity: 0; transition: opacity .4s ease .45s; }
html.so-abre .so-cierre[data-cierre="rompe"] img:first-child { transform: translate(-28%, 14%) rotate(-24deg); transition: transform .6s cubic-bezier(.3,0,.5,1); }
html.so-abre .so-cierre[data-cierre="rompe"] img + img { transform: translate(28%, 16%) rotate(22deg); transition: transform .6s cubic-bezier(.3,0,.5,1); }
/* la tarjeta llena la pantalla */
html.so-expande .so-sobre { transform: translateY(26vh) scale(.9); }
html.so-expande .so-fondo, html.so-expande .so-interior, html.so-expande .so-bolsillo, html.so-expande .so-solapa, html.so-expande .so-sombra { opacity: 0; transition: opacity .55s ease; }
html.so-expande .so-tarjeta { z-index: 6; transform: translateY(-80%) translateZ(8px) scale(5.2); opacity: 0; transition: transform 1.25s cubic-bezier(.55,0,.25,1), opacity .55s ease .6s; }
@media (min-width: 761px) { html.so-expande .so-tarjeta { transform: translateY(-80%) translateZ(8px) scale(3.6); } }

/* ================================================================ EL FONDO VIVO */
.e-fondo.v-fondo { overflow: hidden; }
.v-fondo canvas, .v-fondo img, .v-fijo canvas, .v-fijo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.v-fondo canvas, .v-fijo canvas { opacity: 0; transition: opacity 1.2s ease; }
.vivo-listo .v-fondo canvas, .vivo-listo .v-fijo canvas { opacity: 1; }
.v-fijo { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.v-fijo-on .xv-cielo { display: none; }
.v-fijo-on .xv-sec, .v-fijo-on .xv-cierre { background: transparent; }
.v-velo { position: absolute; inset: 0; pointer-events: none; background: var(--v-velo, radial-gradient(60% 45% at 50% 48%, rgb(0 0 0 / .32), transparent 72%)); }
#tinte { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--tinte, transparent); mix-blend-mode: var(--tinte-mezcla, color); opacity: var(--tinte-op, .55); transition: background-color 1.4s ease; }

/* ================================================================ ESTRUCTURAS */
/* paneles de vidrio / papel sobre el fondo vivo */
.panel { position: relative; padding: clamp(22px, 4vw, 44px); border-radius: var(--radio, 18px); background: var(--panel, rgb(255 255 255 / .1)); border: 1px solid var(--panel-borde, rgb(255 255 255 / .18));
	-webkit-backdrop-filter: var(--panel-filtro, blur(14px) saturate(1.2)); backdrop-filter: var(--panel-filtro, blur(14px) saturate(1.2)); box-shadow: var(--panel-sombra, 0 30px 60px -36px rgb(0 0 0 / .5)); }

/* capítulos a pantalla completa (80) */
.es-capitulos main > .xv-sec:not(#portada):not(#fecha) { min-height: 100svh; display: grid; align-content: center; }

/* pantalla dividida (81): el encabezado queda fijo a un lado */
@media (min-width: 900px) {
	.es-dividida .xv-sec:not(#portada):not(#fecha):not(#confirmar) > .xv-ancho { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
	.es-dividida .xv-sec:not(#portada):not(#fecha):not(#confirmar) > .xv-ancho > :first-child { position: sticky; top: 18vh; }
	.es-dividida .e-dos { display: contents; }
}

/* recorrido horizontal (83, 95) */
.h-pista { position: relative; }
.h-vista { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.h-vista::-webkit-scrollbar { display: none; }
.h-tren { display: flex; }
.h-panel { flex: 0 0 100vw; width: 100vw; min-height: 100svh; scroll-snap-align: start; display: grid; align-content: center; overflow-y: auto; padding: 9vh 0; position: relative; }
.h-pista.h-activa .h-vista { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.h-pista.h-activa .h-panel { height: 100vh; overflow: hidden; }
.h-avance { position: absolute; z-index: 3; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: min(40vw, 260px); height: 3px; translate: -50% 0; border-radius: 3px; background: color-mix(in srgb, currentColor 20%, transparent); }
.h-pista.h-activa .h-avance { position: sticky; top: calc(100vh - 34px); margin-top: -3px; translate: -50% 0; left: 50%; }
.h-avance::before { content: ""; position: absolute; inset: 0; width: calc(var(--hp, 0) * 100%); background: currentColor; border-radius: inherit; }
.h-desliza { position: absolute; right: 18px; top: 50%; z-index: 3; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; opacity: calc(1 - var(--hp, 0) * 6); }
@media (min-width: 761px) { .h-desliza { display: none; } }

/* secciones que se encienden (90) */
.es-enciende main > .xv-sec:not(#portada) > * { transition: opacity 1.2s ease, filter 1.2s ease; }
.es-enciende main > .xv-sec:not(#portada):not(.encendida) > * { opacity: .12; filter: blur(3px); }
.es-enciende .encendida .xv-titulo, .es-enciende .encendida .xv-kicker { text-shadow: 0 0 18px var(--brillo, rgb(47 208 255 / .6)); }

/* el haz que revela (91) */
@property --hx { syntax: "<percentage>"; inherits: false; initial-value: -30%; }
@property --hf { syntax: "<number>"; inherits: false; initial-value: .3; }
.es-reflector main > .xv-sec:not(#portada):not(#fecha) > .xv-ancho { -webkit-mask-image: radial-gradient(ellipse 55% 110% at var(--hx) 50%, #000 45%, rgb(0 0 0 / var(--hf)) 100%); mask-image: radial-gradient(ellipse 55% 110% at var(--hx) 50%, #000 45%, rgb(0 0 0 / var(--hf)) 100%); }
.es-reflector main > .xv-sec.llego > .xv-ancho { animation: hz-barre 1.4s cubic-bezier(.45,0,.25,1) forwards; }
@keyframes hz-barre { 0% { --hx: -30%; --hf: .3; } 60% { --hf: .55; } 100% { --hx: 130%; --hf: 1; } }
html.quieto .es-reflector main > .xv-sec > .xv-ancho, .es-reflector #cierre > .xv-ancho { -webkit-mask-image: none; mask-image: none; }

/* origami que se despliega (94) */
.es-despliega main > .xv-sec:not(#portada):not(#fecha) > .xv-ancho { transform-origin: 50% 0; transition: transform 1.3s cubic-bezier(.2,.9,.25,1), opacity .9s ease; }
.es-despliega main > .xv-sec:not(#portada):not(#fecha):not(.llego) > .xv-ancho { transform: perspective(1200px) rotateX(-82deg) scaleY(.6); opacity: 0; }

/* una carta por sección (98) */
.es-cartas main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { transform-origin: 50% 0; transition: transform 1.2s cubic-bezier(.2,.9,.25,1), opacity .8s ease, clip-path 1.2s cubic-bezier(.2,.9,.25,1); }
.es-cartas main > .xv-sec:not(#portada):not(#fecha):not(#cierre):not(.llego) > .xv-ancho { transform: perspective(1400px) rotateX(70deg) translateY(10vh); opacity: 0; clip-path: inset(0 0 66% 0); }

/* mosaico (93) */
.bento { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(6, 1fr); width: min(100% - 2.5rem, 1180px); margin: 0 auto; padding: 12vh 0; }
.bento > .xv-sec { padding: 0 !important; min-height: 0 !important; }
.bento > .xv-sec > .xv-ancho { width: 100%; height: 100%; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .bento > .xv-sec { grid-column: auto !important; grid-row: auto !important; } }

/* rosetón indicador (92) */
.ro-indicador { position: fixed; z-index: 6; right: max(14px, env(safe-area-inset-right)); top: 50%; width: 54px; aspect-ratio: 1; translate: 0 -50%; pointer-events: none; opacity: 0; transition: opacity .8s; }
.abierto .ro-indicador { opacity: 1; }
.ro-indicador img { width: 100%; display: block; filter: grayscale(1) brightness(1.3) opacity(.45); }
.ro-indicador img + img { position: absolute; inset: 0; filter: drop-shadow(0 0 10px rgb(227 162 59 / .6)); -webkit-mask-image: conic-gradient(#000 calc(var(--avance, 0) * 360deg), transparent 0); mask-image: conic-gradient(#000 calc(var(--avance, 0) * 360deg), transparent 0); transition: -webkit-mask-image .4s; }
@media (max-width: 760px) { .ro-indicador { width: 40px; top: auto; bottom: 86px; translate: 0 0; } }

/* fuegos (89) */
#fuegos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* texto que se teclea */
.tecleando::after { content: "▌"; font-weight: 400; animation: so-late .8s steps(1) infinite; margin-left: 2px; }

/* movimiento reducido */
html.vivo-quieto .v-fondo canvas, html.vivo-quieto .v-fijo canvas { display: none; }
@media (prefers-reduced-motion: reduce) {
	.so-sobre, .so-brillo::before, .so-toque { animation: none !important; }
	.so-escena *, .so-escena::before { transition-duration: .01s !important; transition-delay: 0s !important; }
}
html.so-expande .so-sobre { transition: transform 1s cubic-bezier(.65,0,.35,1); }

/* las cartas y los pliegues en 3D no deben ensanchar la página */
.es-cartas main, .es-despliega main, .es-movimientos main { overflow-x: clip; }