/* 161 · Blanco y Negro — cumpleaños de etiqueta: negro profundo, blanco marfil y plata, con trazos art déco.
   Sobre negro con forro de abanicos plateados y un sello de plata con el «50», que se parte al abrir.
   Portada: rayos de luz desde el centro y estrellas que titilan (WebGL, modo titila); un abanico déco detrás del nombre
   y dos copas que brindan a los lados. El nombre en Bodoni, los apellidos abajo y el «50» aparte, enorme y plateado.
   Orden: blanco y negro — las secciones se alternan en tarjetas marfil con tinta negra y tarjetas negras con filete de plata.
   Fecha: dos abanicos se abren y forman un sol déco alrededor del día. Cierre: las copas brindan bajo el abanico. */
.c-bn { --display-peso: 600; --nombre-color: #F7F6F2; --titulo-letra: "Bodoni Moda"; --titulo-peso: 500; --titulo-espacio: -.01em;
	--dia-letra: "Bodoni Moda"; --dia-color: #F7F6F2; --edad-letra: "Bodoni Moda"; --edad-color: #F7F6F2; --radio: 0px; --vj: 46px;
	--sombra: 0 18px 26px rgb(0 0 0 / .55); --nombre-tam: clamp(4.4rem, 12.5vw, 10.5rem); --titulos-dy: -5vh;
	--plata: linear-gradient(100deg, #8E9198 0%, #F4F5F7 22%, #B9BCC2 40%, #FFFFFF 55%, #A3A6AD 72%, #E9EAEC 88%, #8E9198 100%); }
.c-bn .xv-cielo { display: none; }
.c-bn main { background: radial-gradient(120% 70% at 50% 0%, #1A1A1D, #0B0B0C 55%, #050506); }
.c-bn main > .xv-sec:not(#portada) { background: transparent; }
.c-bn .v-velo { background: radial-gradient(46% 40% at 50% 50%, rgb(8 8 9 / .62), transparent 78%); }
/* filete doble de plata que enmarca toda la invitación */
.c-bn.cel::after { content: ""; position: fixed; inset: 12px; z-index: 40; pointer-events: none; border: 1px solid rgb(228 229 232 / .38); outline: 1px solid rgb(228 229 232 / .16); outline-offset: 5px; opacity: 0; transition: opacity 1.2s ease .6s; }
html.e-abierto .c-bn.cel::after { opacity: 1; }

/* ---------------------------------------------------------------- sobre */
.c-bn .so-tarjeta small { font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; font-size: .62em; }
.c-bn .so-tarjeta strong { font-family: "Bodoni Moda", serif; font-weight: 600; letter-spacing: -.01em; }
.c-bn .so-tarjeta em { font-family: "Jost", sans-serif; font-style: normal; letter-spacing: .3em; }
.c-bn .so-toque, .c-bn .so-para { font-family: "Jost", sans-serif; letter-spacing: .04em; }

/* ---------------------------------------------------------------- portada */
.c-bn .e-evento { font-family: "Jost", sans-serif; font-weight: 500; color: #C9CACE; letter-spacing: .46em; font-size: clamp(.72rem, 1.5vw, .86rem); text-transform: uppercase; padding-left: .46em; }
.c-bn .e-nombre { background: var(--plata); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 10px 30px rgb(0 0 0 / .6)); animation: bn-brillo 7s ease-in-out infinite alternate; letter-spacing: -.02em; }
@keyframes bn-brillo { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.bn-apellidos { font-family: "Jost", sans-serif; font-weight: 400; font-size: clamp(.9rem, 2vw, 1.2rem); letter-spacing: .34em; text-transform: uppercase; color: #E4E5E8; padding-left: .34em; margin-top: -.4em; }
.bn-filete { display: block; width: min(280px, 60vw); height: 12px; position: relative; }
.bn-filete::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, #C9CACE 20%, #C9CACE 80%, transparent); }
.bn-filete::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg; background: #F7F6F2; box-shadow: 0 0 0 4px #0B0B0C, 0 0 0 5px #C9CACE; }
.c-bn .bn-edad { gap: .18em; align-items: center; }
.c-bn .e-edad-n { font-weight: 500; font-size: clamp(5.6rem, 17vw, 12.5rem); line-height: .78; letter-spacing: -.04em;
	background: var(--plata); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bn-brillo 6s ease-in-out infinite alternate-reverse; }
.c-bn .e-edad-t { font-family: "Pinyon Script", cursive; font-size: clamp(2.2rem, 5vw, 3.4rem); color: #F7F6F2; translate: 0 .18em; }
.c-bn .e-fecha { font-family: "Jost", sans-serif; letter-spacing: .2em; text-transform: uppercase; font-size: clamp(.72rem, 1.6vw, .86rem); color: #C9CACE; }
.bn-abanico { --w: min(78vmin, 640px); left: calc(50% - min(39vmin, 320px)); top: 6vh; opacity: .42; --dy: -14vh; --ds: .12; --ex: 0px; --ey: -16vh; --ed: .25s; --fd: 10s; --fa: 4px; --fr: 0deg; }
.bn-abanico .e-img { filter: drop-shadow(0 0 30px rgb(255 255 255 / .12)); }
.bn-copa { --w: min(14vmin, 120px); bottom: 7vh; --fd: 5s; --fa: 6px; --fr: 2deg; --ed: .7s; }
.bn-copa-i { left: 9vw; --r: 14deg; --dx: 6vw; --dy: -6vh; --dr: 8deg; --ex: -24vw; --ey: 0px; }
.bn-copa-d { right: 9vw; --r: -14deg; --dx: -6vw; --dy: -6vh; --dr: -8deg; --ex: 24vw; --ey: 0px; }
.bn-copa-d .e-img { transform: scaleX(-1); animation-name: bn-flota-espejo; }
@keyframes bn-flota-espejo { from { transform: scaleX(-1) translateY(-6px) rotate(-2deg); } to { transform: scaleX(-1) translateY(6px) rotate(2deg); } }
.bn-chispa { --w: min(7vmin, 56px); right: 22vw; top: 18vh; --ed: 1s; --fd: 3.2s; --fa: 3px; --fr: 20deg; --ex: 0px; --ey: -10vh; }
.c-bn .e-pista { color: #E4E5E8; }

/* ---------------------------------------------------------------- secciones: blanco y negro */
.c-bn main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; padding: clamp(40px, 6vw, 76px) clamp(24px, 6vw, 76px); }
/* tarjeta marfil con tinta negra */
.c-bn #bienvenida > .xv-ancho, .c-bn #vestimenta > .xv-ancho, .c-bn #confirmar > .xv-ancho {
	--tinta: #0B0B0C; --tinta-2: #45464B; --acento: #0B0B0C; --linea: rgba(11,11,12,.16); --papel: #FFFFFF; --suave: #F1F0EC; --fondo: #F7F6F2;
	--boton: #0B0B0C; --boton-tinta: #F7F6F2; color: #0B0B0C; background: #F7F6F2;
	box-shadow: inset 0 0 0 12px #F7F6F2, inset 0 0 0 13px rgb(11 11 12 / .5), inset 0 0 0 17px #F7F6F2, inset 0 0 0 18px rgb(11 11 12 / .22), 0 40px 80px -40px rgb(0 0 0 / .9); }
/* tarjeta negra con filete de plata */
.c-bn #lugares > .xv-ancho, .c-bn #itinerario > .xv-ancho, .c-bn #regalos > .xv-ancho, .c-bn #cancion > .xv-ancho {
	background: #111113; box-shadow: inset 0 0 0 12px #111113, inset 0 0 0 13px rgb(228 229 232 / .45), inset 0 0 0 17px #111113, inset 0 0 0 18px rgb(228 229 232 / .18), 0 40px 80px -40px rgb(0 0 0 / .9); }
/* esquinas déco */
.c-bn main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::before,
.c-bn main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::after { content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none;
	border: 1px solid currentColor; opacity: .5; }
.c-bn main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::before { left: 24px; top: 24px; border-right: 0; border-bottom: 0; }
.c-bn main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::after { right: 24px; bottom: 24px; border-left: 0; border-top: 0; }
.c-bn #lugares > .xv-ancho, .c-bn #itinerario > .xv-ancho, .c-bn #regalos > .xv-ancho, .c-bn #cancion > .xv-ancho { color: #E4E5E8; }

/* la canción de la noche: reproductor oficial de Spotify */
.c-bn #cancion > .xv-ancho { max-width: 760px; }
.bn-cancion-de { margin: -4px 0 26px; font: 400 .9rem/1 "Jost", sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #C9CACE; }
.bn-spotify { display: block; width: 100%; max-width: 560px; height: 152px; margin: 0 auto; border: 0; border-radius: 12px; background: #1A1A1D; }
.bn-cancion-nota { margin: 16px 0 0; font: 400 .85rem/1.4 "Jost", sans-serif; }
.bn-cancion-nota a { color: #E4E5E8; letter-spacing: .08em; }

.c-bn .xv-kicker { font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; font-size: .76rem; color: var(--tinta-2); }
.c-bn .xv-titulo { color: var(--tinta); font-weight: 500; }
.c-bn .xv-titulo .xv-script { font-family: "Pinyon Script", cursive; font-weight: 400; font-size: 1.22em; color: var(--tinta); letter-spacing: 0; }
.c-bn .xv-texto-grande { font-family: "Bodoni Moda", serif; font-weight: 400; font-style: italic; line-height: 1.5; }
.c-bn .e-firma { font-family: "Pinyon Script", cursive; color: #0B0B0C; }
.c-bn .xv-superficie { border-radius: 0; box-shadow: none; }
.c-bn #lugares .xv-superficie { background: transparent; border: 1px solid rgb(228 229 232 / .22); }
.c-bn .xv-lugar-hora { font-family: "Bodoni Moda", serif; font-weight: 500; }
.c-bn .xv-lugar h3 { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.01em; }
.c-bn .xv-momento time { font-family: "Jost", sans-serif; letter-spacing: .14em; color: #C9CACE; }
.c-bn .xv-boton { border-radius: 0; letter-spacing: .16em; text-transform: uppercase; font-family: "Jost", sans-serif; font-weight: 500; font-size: .8rem; }
.c-bn .xv-boton:not(.xv-boton-suave) { background: var(--boton); color: var(--boton-tinta); border-color: var(--boton); }
.c-bn .xv-boton-suave { background: transparent; color: var(--tinta); border-color: currentColor; }
.c-bn #lugares .xv-boton:not(.xv-boton-suave) { background: #F7F6F2; color: #0B0B0C; border-color: #F7F6F2; }
.c-bn #lugares .xv-boton-suave { color: #F7F6F2; }

/* bienvenida: la medalla del 50 en lugar de la foto */
.c-bn .e-ornamento { width: min(76%, 300px); }
.c-bn .bn-medalla { filter: drop-shadow(0 26px 30px rgb(0 0 0 / .35)); }

/* vestimenta: la tarjeta se parte en blanco y negro */
.c-bn #vestimenta > .xv-ancho { background: linear-gradient(115deg, #F7F6F2 0 50%, #0B0B0C 50% 100%); }
.c-bn #vestimenta > .xv-ancho { isolation: isolate; }
/* la palabra cambia de color donde cruza la diagonal: negra sobre lo blanco y blanca sobre lo negro */
.c-bn #vestimenta .xv-vestimenta-codigo { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -.02em;
	color: #F7F6F2; mix-blend-mode: difference; }
.c-bn #vestimenta .xv-texto, .c-bn #vestimenta .xv-kicker { display: inline-block; padding: .4em .9em; background: #F7F6F2; color: #0B0B0C; box-shadow: 0 0 0 1px rgb(11 11 12 / .3); }
.c-bn #vestimenta .xv-muestras li { box-shadow: 0 0 0 2px #C9CACE; }

/* ---------------------------------------------------------------- fecha: dos abanicos forman un sol déco */
.c-bn .e-fecha-k { font-family: "Jost", sans-serif; color: #C9CACE; letter-spacing: .46em; text-transform: uppercase; font-size: .76rem; margin-bottom: 3vh; }
.bn-m-sol { left: 2%; width: 96%; opacity: clamp(0, calc(var(--t1) * 1.6), .85); }
/* el abanico de arriba apoya su borde recto en el centro; el de abajo es su reflejo */
.bn-m-arriba { bottom: 50%; transform-origin: 50% 100%; transform: scale(calc(.4 + var(--t1) * .6)) rotate(calc((1 - var(--t1)) * -90deg)); }
.bn-m-abajo { top: 50%; transform-origin: 50% 0%; transform: scale(calc(.4 + var(--t1) * .6)) rotate(calc((1 - var(--t1)) * 90deg)) translateY(100%) scaleY(-1); }
.bn-m-aro { inset: 24%; border-radius: 50%; border: 1px solid rgb(247 246 242 / .7); opacity: var(--t2); transform: scale(calc(.7 + var(--t2) * .3)); background: radial-gradient(closest-side, #0B0B0C 86%, transparent); }
.bn-m-aro2 { inset: 21.5%; background: none; border-color: rgb(247 246 242 / .3); transform: scale(calc(.8 + var(--t2) * .2)) rotate(calc(var(--t2) * 45deg)); }
.bn-m-destello { width: 13%; left: 74%; top: 16%; opacity: var(--t2); transform: scale(calc(var(--t2) * 1)) rotate(calc(var(--t2) * 90deg)); }
.c-bn .e-dia { font-weight: 500; font-size: clamp(5rem, 15vw, 8.4rem); background: var(--plata); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-bn .e-mes { font-family: "Pinyon Script", cursive; color: #F7F6F2; font-size: clamp(2rem, 5vw, 3rem); }
.c-bn .e-anio { font-family: "Jost", sans-serif; color: #C9CACE; letter-spacing: .5em; }
.c-bn .e-sem { font-family: "Jost", sans-serif; letter-spacing: .3em; color: #C9CACE; }

/* ---------------------------------------------------------------- confirmación por WhatsApp */
.bn-form { display: grid; gap: 22px; max-width: 520px; margin-inline: auto; text-align: left; }
.bn-form input[type="text"], .bn-form input:not([type]), .bn-form textarea { width: 100%; border-radius: 0; background: #FFFFFF; border: 1px solid rgb(11 11 12 / .25); color: #0B0B0C; font: 400 1rem/1.4 "Jost", sans-serif; padding: 14px 16px; }
.bn-form input:focus, .bn-form textarea:focus { outline: 2px solid #0B0B0C; outline-offset: 1px; }
.bn-form .xv-campo > span { font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: .06em; }
.bn-form .xv-campo em { font-style: normal; opacity: .7; }
.bn-respuesta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0; }
.bn-respuesta label { position: relative; cursor: pointer; }
.bn-respuesta input { position: absolute; opacity: 0; inset: 0; }
.bn-respuesta span { display: grid; place-items: center; min-height: 54px; padding: 0 12px; border: 1px solid #0B0B0C; font: 500 .82rem/1.2 "Jost", sans-serif; letter-spacing: .14em; text-transform: uppercase; text-align: center; transition: background .25s, color .25s; }
.bn-respuesta input:checked + span { background: #0B0B0C; color: #F7F6F2; }
.bn-respuesta input:focus-visible + span { outline: 2px solid #0B0B0C; outline-offset: 3px; }
.bn-cuantos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; font: 500 .95rem/1.3 "Jost", sans-serif; }
.bn-contador { display: flex; align-items: center; gap: 16px; }
.bn-contador button { width: 48px; height: 48px; border: 1px solid #0B0B0C; background: transparent; font: 400 1.5rem/1 "Jost", sans-serif; color: #0B0B0C; cursor: pointer; }
.bn-contador button:disabled { opacity: .3; cursor: not-allowed; }
.bn-contador output { min-width: 2ch; text-align: center; font: 400 2.2rem/1 "Jost", sans-serif; }
.bn-form.no-asiste .bn-cuantos { opacity: .35; pointer-events: none; }
.bn-error { margin: -8px 0 0; color: #A3261B; font: 500 .9rem/1.3 "Jost", sans-serif; }
.bn-enviar { width: 100%; }
.bn-nota { margin: -6px 0 0; text-align: center; font: 400 .86rem/1.4 "Jost", sans-serif; color: #45464B; }

/* ---------------------------------------------------------------- cierre: las copas brindan bajo el abanico */
.bn-cierre-sol { position: absolute; left: 50%; top: 30px; width: min(70vmin, 520px); translate: -50% 0; opacity: .5; }
.bn-cierre-copa { position: absolute; top: 120px; width: min(13vmin, 96px); transition: transform 1.4s cubic-bezier(.16,1,.3,1) .3s; }
.bn-cc-i { left: calc(50% - min(13vmin, 96px) + 6px); transform-origin: 80% 90%; transform: rotate(-4deg) translateX(-40%); }
.bn-cc-d { left: calc(50% - 6px); transform-origin: 20% 90%; transform: scaleX(-1) rotate(-4deg) translateX(-40%); }
#cierre.xv-visto .bn-cc-i, #cierre:hover .bn-cc-i { transform: rotate(12deg) translateX(0); }
#cierre.xv-visto .bn-cc-d, #cierre:hover .bn-cc-d { transform: scaleX(-1) rotate(12deg) translateX(0); }
.c-bn .e-cierre { padding-top: clamp(250px, 36vh, 320px); }
.c-bn .e-cierre .xv-kicker { color: #C9CACE; }
.c-bn .e-nombre-fin { background: var(--plata); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-bn .xv-firma a { color: #E4E5E8; }

/* Bodoni con tamaño óptico de texto: trazos finos más firmes en los números grandes */
.c-bn .e-nombre, .c-bn .e-edad-n, .c-bn .e-dia, .c-bn .e-nombre-fin, .c-bn .xv-vestimenta-codigo { font-variation-settings: "opsz" 28; }

@media (max-width: 760px) {
	.c-bn { --nombre-tam: clamp(4rem, 21vw, 6.2rem); }
	.bn-abanico { --w: 96vw; left: 2vw; top: 9vh; }
	.bn-copa { --w: 20vw; bottom: 5vh; }
	.bn-copa-i { left: 4vw; } .bn-copa-d { right: 4vw; }
	.bn-chispa { right: 12vw; top: 14vh; }
	.c-bn.cel::after { inset: 6px; outline-offset: 3px; }
	.c-bn main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { padding: 52px 26px; }
	.c-bn main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::before { left: 16px; top: 16px; }
	.c-bn main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::after { right: 16px; bottom: 16px; }
	.c-bn #vestimenta > .xv-ancho { background: linear-gradient(160deg, #F7F6F2 0 50%, #0B0B0C 50% 100%); }
	.bn-respuesta span { font-size: .74rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
	.c-bn .e-nombre, .c-bn .e-edad-n { animation: none; }
}