/* 105 · Laurel y Mármol — graduación universitaria clásica. Sobre marfil, forro de laurel, lacre vino que se quiebra.
   Portada: el salón de mármol con columnas; un haz de luz diagonal se desplaza lento (WebGL, modo rayos) y flota polvo de luz.
   Orden: placas de piedra — cada sección es una placa de mármol y su título aparece como si se tallara.
   Fecha: las hojas de laurel giran y se ordenan en la corona; el día queda en el centro. */
.c-laurel { --display-peso: 700; --nombre-color: #2A2A2A; --titulo-letra: "Cormorant Garamond"; --titulo-peso: 700; --titulo-mayus: uppercase; --titulo-espacio: .08em; --dia-letra: "Cinzel Decorative"; --dia-color: #2A2A2A;
	--radio: 2px; --vj: 46px; --sombra: 0 20px 26px rgb(42 42 42 / .22); --nombre-tam: clamp(3rem, 7vw, 6.2rem); --display-espacio: .02em; }
.c-laurel .xv-cielo { display: none; }
.c-laurel main { background: linear-gradient(180deg, #F4F1EA, #ECE7DC); }
.c-laurel main > .xv-sec:not(#portada) { background: transparent; }
.c-laurel .v-velo { background: radial-gradient(56% 40% at 50% 46%, rgb(251 249 244 / .72), transparent 74%); }

html[data-largo] .c-laurel .e-nombre { --n: 1; }

/* portada */
.c-laurel .e-nombre { white-space: normal; text-wrap: balance; max-width: 13ch; line-height: 1.02; }
.c-laurel .e-evento { color: #6B1E2E; letter-spacing: .5em; font-family: "EB Garamond", serif; font-weight: 600; font-size: .78rem; }
.c-laurel .e-grado-t { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.8rem); letter-spacing: 0; color: #4F6B3A; }
.c-laurel .e-fecha { color: #4A4845; letter-spacing: .1em; }
.la-birrete { --w: min(24vmin, 220px); right: 4vw; bottom: 5vh; --r: 10deg; --dx: 6vw; --dy: 10vh; --dr: 10deg; --ex: 30vw; --ey: 0px; --ed: .6s; --fd: 6s; --fa: 6px; --fr: 2deg; }
.la-hoja-a { --w: min(12vmin, 110px); left: 8vw; top: 14vh; --r: -30deg; --dx: -6vw; --dy: -16vh; --dr: -40deg; --ex: -20vw; --ey: -10vh; --ed: .4s; --fd: 7s; --fa: 10px; --fr: 8deg; }
.la-hoja-b { --w: min(9vmin, 80px); left: 16vw; bottom: 14vh; --r: 40deg; --dx: -8vw; --dy: 12vh; --dr: 50deg; --ex: -20vw; --ey: 10vh; --ed: .7s; --fd: 8s; --fa: 12px; --fr: 10deg; }

/* placas de mármol */
.c-laurel main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; padding: clamp(34px, 5vw, 64px); border-radius: 3px;
	background: radial-gradient(120% 80% at 10% 0%, rgb(255 255 255 / .9), transparent 60%), linear-gradient(115deg, transparent 40%, rgb(160 150 135 / .08) 42%, transparent 46%), linear-gradient(160deg, #FBF9F4, #EDE8DD);
	box-shadow: inset 0 0 0 1px #DDD6C8, inset 0 0 0 9px #FBF9F4, inset 0 0 0 10px rgb(194 161 91 / .45), 0 30px 60px -36px rgb(42 42 42 / .4); }
.c-laurel .xv-kicker { color: #6B1E2E; letter-spacing: .44em; font-family: "EB Garamond", serif; }
.c-laurel .xv-titulo { color: #3A3633; text-shadow: 0 1px 0 #FFFFFF, 0 -1px 0 rgb(0 0 0 / .12); }
.c-laurel .xv-titulo .xv-script { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; color: #4F6B3A; }
.c-laurel .xv-superficie { background: rgb(255 255 255 / .55); border: 1px solid #DDD6C8; }
.c-laurel .xv-momento time { color: #6B1E2E; font-weight: 600; }
.c-laurel .e-firma { font-family: "Cormorant Garamond", serif; font-style: italic; color: #4F6B3A; }
.c-laurel .xv-boton:not(.xv-boton-suave) { background: #2A2A2A; color: #FBF9F4; border-color: #2A2A2A; }
.c-laurel .e-ornamento { width: min(70%, 280px); }

/* fecha: las hojas se ordenan en la corona */
.c-laurel .e-fecha-k { color: #6B1E2E; }
.la-m-hoja { left: 44%; top: 44%; width: 12%; transform: rotate(calc(var(--a) * 1deg)) translateY(calc(-210% - (1 - var(--t1)) * 240%)) rotate(calc((1 - var(--t1)) * 220deg)); opacity: clamp(0, calc((1 - var(--t2)) * 2.4), 1); }
.la-m-h1 { --a: 0; } .la-m-h2 { --a: 45; } .la-m-h3 { --a: 90; } .la-m-h4 { --a: 135; } .la-m-h5 { --a: 180; } .la-m-h6 { --a: 225; } .la-m-h7 { --a: 270; } .la-m-h8 { --a: 315; }
.la-m-corona { left: 2%; top: 2%; width: 96%; opacity: var(--t2); transform: scale(calc(.85 + var(--t2) * .15)) rotate(calc((1 - var(--t2)) * -20deg)); filter: drop-shadow(0 16px 20px rgb(42 42 42 / .2)); }
.c-laurel .e-dia { font-size: clamp(3.6rem, 11vw, 6rem); }
.c-laurel .e-mes { font-family: "Cormorant Garamond", serif; font-style: italic; color: #6B1E2E; font-size: clamp(1.4rem, 3.4vw, 2rem); }
.c-laurel .e-anio { color: #4A4845; }

/* cierre */
.la-cierre-birrete { position: absolute; left: 50%; top: 5%; width: min(24vmin, 170px); translate: -50% 0; animation: e-flota 4s ease-in-out infinite alternate; }
.c-laurel .e-cierre { padding-top: clamp(190px, 28vh, 260px); }
.c-laurel .e-nombre-fin { font-size: clamp(2.2rem, 6vw, 4.6rem); }

@media (max-width: 760px) {
	.c-laurel { --nombre-tam: clamp(2.4rem, 11vw, 3.6rem); }
	.la-birrete { --w: 30vw; right: 0; bottom: 3vh; }
	.la-hoja-a { --w: 15vw; left: 4vw; top: 10vh; } .la-hoja-b { --w: 11vw; left: 8vw; bottom: 10vh; }
}