/* 148 · Martillo y Balanza — graduación de Derecho: nogal, latón, marfil y verde inglés. Se abre con el golpe del mazo: la onda abre la invitación.
   Portada: el escritorio de nogal con la balanza de latón y los códigos, con la luz de la lámpara que respira (WebGL, modo velas).
   Orden: el expediente legal — cada sección es un «Artículo» con su número y un filete fino; la balanza del costado se equilibra al bajar (--pg).
   Fecha: la balanza se equilibra y el día queda en el fiel. Cierre: «Se levanta la sesión: ¡a celebrar!». */
.c-derecho { --display-peso: 700; --nombre-color: #F3EEE3; --titulo-letra: "Cinzel"; --titulo-peso: 600; --titulo-espacio: .04em;
	--dia-letra: "Cormorant Garamond"; --dia-color: #F3EEE3; --radio: 2px; --vj: 40px; --sombra: 0 16px 20px rgb(0 0 0 / .45);
	--nombre-tam: clamp(3.8rem, 10vw, 8.4rem); --ap-w: min(66vw, 320px); --ap-destello: rgb(226 201 142 / .55); }
.c-derecho .xv-cielo { display: none; }
.c-derecho main { background: radial-gradient(90% 40% at 50% 0%, #4A2E1F, #2A1C13 60%, #1F150E); }
.c-derecho main > .xv-sec:not(#portada) { background: transparent; }
.c-derecho .v-velo { background: radial-gradient(48% 40% at 50% 48%, rgb(24 16 10 / .66), transparent 76%); }
.c-derecho .ap-cosa .ap-pieza { transform-origin: 80% 70%; }
.dr-balanza { position: fixed; right: 2vw; bottom: 4vh; z-index: 0; width: min(14vw, 150px); pointer-events: none; opacity: 0; transition: opacity 1s ease; }
html.e-abierto .dr-balanza { opacity: .5; }
.dr-balanza img { width: 100%; transform-origin: 50% 20%; transform: rotate(calc((1 - var(--pg, 0)) * 10deg)); transition: transform .3s ease; }
.c-derecho main > .xv-sec { position: relative; z-index: 1; }

.c-derecho .e-evento { font-family: "Cinzel", serif; color: #C9AA66; letter-spacing: .4em; font-size: .78rem; }
.c-derecho .e-grado-t { color: #F3EEE3; font-family: "Lora", serif; } .c-derecho .e-grado-i { color: #D8CDBA; }
.c-derecho .e-fecha { color: #D8CDBA; letter-spacing: .1em; }
.c-derecho .e-nombre { text-shadow: 0 4px 30px rgb(0 0 0 / .8); }
.dr-libros { --w: min(22vmin, 210px); left: 4vw; bottom: 4vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: 9s; --fa: 2px; --fr: 0deg; }
.dr-mazo { --w: min(22vmin, 210px); right: 5vw; bottom: 5vh; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .5s; --fd: 8s; --fa: 2px; --fr: 0deg; }
.dr-pluma { --w: min(12vmin, 110px); right: 10vw; top: 10vh; --r: 30deg; --dy: -12vh; --ex: 30vw; --ey: -20vh; --ed: .65s; --fd: 6s; --fa: 4px; --fr: 2deg; }

/* el expediente: hojas marfil con artículos */
.c-derecho main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #F7F2E7; color: #2B1F17; --papel: #FFFDF8; --tinta: #2B1F17; --tinta-2: #5A4A3C; --acento: #1F3B30; --linea: rgba(43,31,23,.14);
	padding: clamp(66px, 7vw, 86px) clamp(26px, 6vw, 76px) clamp(44px, 5vw, 64px); box-shadow: inset 0 0 0 10px #F7F2E7, inset 0 0 0 11px rgb(184 154 90 / .7), 0 40px 70px -36px rgb(0 0 0 / .85); }
.dr-art { top: 24px; left: clamp(26px, 6vw, 76px); right: clamp(26px, 6vw, 76px); padding-bottom: 8px; border-bottom: 1px solid rgb(184 154 90 / .7); font: 600 .78rem/1 "Cinzel", serif; letter-spacing: .3em; color: #8A6D33;
	clip-path: inset(0 100% 0 0); transition: clip-path 1.2s ease .3s; }
.llego > .xv-ancho > .dr-art { clip-path: inset(0 0 0 0); }
.c-derecho .xv-kicker { font-family: "Cinzel", serif; color: #1F3B30; letter-spacing: .3em; }
.c-derecho .xv-titulo { color: #2B1F17; }
.c-derecho .xv-titulo .xv-script { font-style: italic; font-weight: 500; color: #8A6D33; text-transform: none; letter-spacing: 0; }
.c-derecho .xv-superficie { background: #FFFDF8; border: 1px solid rgb(43 31 23 / .12); border-radius: 0; box-shadow: none; }
.c-derecho .xv-momento time { color: #1F3B30; font-family: "Cinzel", serif; }
.c-derecho .e-firma { font-style: italic; color: #8A6D33; }
.c-derecho .xv-boton:not(.xv-boton-suave) { background: #1F3B30; color: #F3EEE3; border-color: #1F3B30; border-radius: 2px; }
.c-derecho .xv-boton-suave { border-radius: 2px; }
.c-derecho .e-ornamento { width: min(56%, 220px); }

/* fecha: la balanza se equilibra */
.c-derecho .e-fecha-k { font-family: "Cinzel", serif; color: #C9AA66; letter-spacing: .4em; }
.dr-m-balanza { left: 27%; top: 0; width: 46%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform-origin: 50% 14%; transform: rotate(calc((1 - var(--t1)) * 16deg)); filter: drop-shadow(0 20px 26px rgb(0 0 0 / .5)); }
.c-derecho .e-dia-caja { translate: 0 72%; }
.c-derecho .e-dia { font-variant-numeric: lining-nums tabular-nums; }
.c-derecho .e-dia { font-size: clamp(4rem, 11vw, 6.4rem); text-shadow: 0 4px 20px rgb(0 0 0 / .8); }
.c-derecho .e-mes { font-family: "Cinzel", serif; text-transform: uppercase; letter-spacing: .3em; font-size: clamp(.9rem, 2.2vw, 1.1rem); color: #C9AA66; }
.c-derecho .e-anio { color: #D8CDBA; }

.dr-cierre-mazo { position: absolute; left: 50%; top: 30px; width: min(34vmin, 210px); translate: -50% 0; transform-origin: 80% 70%; animation: dr-golpe 3s ease-in-out infinite; }
@keyframes dr-golpe { 0%, 70%, 100% { rotate: 0deg; } 80% { rotate: -22deg; } 88% { rotate: 4deg; } }
.c-derecho .e-cierre { padding-top: clamp(220px, 32vh, 280px); }
.c-derecho .e-cierre .xv-kicker { color: #C9AA66; font-family: "Cinzel", serif; }

@media (max-width: 760px) {
	.c-derecho { --nombre-tam: clamp(3.2rem, 15vw, 4.6rem); }
	.dr-libros { --w: 34vw; left: -2vw; bottom: 3vh; } .dr-mazo { --w: 34vw; right: -2vw; bottom: 3vh; } .dr-pluma { --w: 18vw; right: 4vw; top: 8vh; }
	.dr-balanza { width: 20vw; right: 0; opacity: .3 !important; }
	.c-derecho main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { padding: 66px 24px 44px; }
}