/* 95 · Super 8 — rollo de película horizontal: cada sección es un fotograma con perforaciones y se avanza de lado.
   Portada: destellos de luz, grano y vaivén de proyector (fondo vivo). En la fecha el diafragma se abre y aparece el día. */
.c-super8 { --display-peso: 400; --nombre-color: #F5EBDA; --titulo-letra: "Bebas Neue"; --titulo-peso: 400; --titulo-espacio: .02em; --titulo-mayus: uppercase; --dia-letra: "Bebas Neue"; --dia-color: #F5EBDA;
	--y-letra: "Shrikhand"; --y-tam: .32em; --y-color: #F2C46D; --y-margen: .08em 0 .12em; --radio: 6px; --vj: 54px; --sombra: 0 22px 26px rgb(0 0 0 / .5);
	--nombre-tam: clamp(4.4rem, 12vw, 10.4rem); --pareja-tam: 1; }
.c-super8 .e-evento { color: #F2C46D; letter-spacing: .5em; font-family: "Space Mono", monospace; font-weight: 700; font-size: .72rem; }
.c-super8 .e-nombre { line-height: 1.05; text-shadow: 3px 3px 0 #B63E26; }
.c-super8 .e-fecha { color: #D9CDB8; font-family: "Space Mono", monospace; font-size: .8rem; }
.s8-carrete { --w: min(20vmin, 200px); right: 4vw; top: 6vh; --dr: 360deg; --dy: -10vh; --ey: -20vh; --ed: .6s; --fd: 0s; }
.s8-carrete .e-img { animation: s8-gira 6s linear infinite; }
@keyframes s8-gira { to { rotate: 360deg; } }
.c-super8 .so-y { font-family: "Shrikhand", serif; font-size: .5em; color: #B63E26; }
/* el rollo */
.c-super8 .xv-cielo { background: #141210; }
.c-super8 .h-pista { background: #0E0C0A; color: #F2A04E; }
.c-super8 .h-panel { padding: 13vh 0; }
.c-super8 .h-panel::before, .c-super8 .h-panel::after { content: ""; position: absolute; left: 0; right: 0; height: 7vh; min-height: 40px;
	background: radial-gradient(closest-side, #0E0C0A 62%, transparent 66%) 0 50% / 44px 26px repeat-x, #2A231C; pointer-events: none; }
.c-super8 .h-panel::before { top: 0; } .c-super8 .h-panel::after { bottom: 0; }
.c-super8 .h-panel > .xv-ancho { background: #1D1A16; border: 1px solid rgb(245 235 218 / .12); padding: clamp(22px, 4vw, 44px); box-shadow: inset 0 0 80px rgb(242 140 56 / .12); width: min(100% - 2.5rem, 1040px); }
.c-super8 .h-panel:nth-child(odd) > .xv-ancho { box-shadow: inset 0 0 80px rgb(182 62 38 / .16); }
.c-super8 main > .xv-sec:not(#portada):not(.h-panel) { background: #141210; }
.c-super8 .xv-kicker { color: #F2C46D; font-family: "Space Mono", monospace; letter-spacing: .3em; }
.c-super8 .xv-titulo { font-size: clamp(2.6rem, 7vw, 5rem); }
.c-super8 .xv-titulo .xv-script { font-family: "Shrikhand", serif; text-transform: none; color: #F2A04E; letter-spacing: 0; font-size: .8em; }
.c-super8 .xv-superficie { background: #24201B; border-color: rgb(245 235 218 / .14); }
.c-super8 .xv-momento time { color: #F2C46D; font-family: "Space Mono", monospace; }
.c-super8 .e-firma { font-family: "Shrikhand", serif; color: #F2A04E; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.c-super8 .e-ornamento { width: min(60%, 240px); }
/* fecha: diafragma */
.c-super8 .e-fecha-sec { background: #141210; }
.c-super8 .e-fecha-k { color: #F2C46D; font-family: "Space Mono", monospace; }
.s8-m-diafragma { inset: 0; border-radius: 50%; background: repeating-conic-gradient(from calc(var(--m) * 120deg), #2A231C 0 22deg, #3A3026 22deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent calc(var(--t2) * 46%), #000 calc(var(--t2) * 46% + 1%)); mask: radial-gradient(circle, transparent calc(var(--t2) * 46%), #000 calc(var(--t2) * 46% + 1%));
	box-shadow: 0 0 0 6px #4A3E30, 0 30px 60px -20px rgb(0 0 0 / .7); }
.s8-m-diafragma::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgb(242 196 109 / .35), transparent 60%); opacity: var(--t2); }
.c-super8 .e-dia { font-size: clamp(4.6rem, 13vw, 7.6rem); text-shadow: 0 0 30px rgb(242 160 78 / .5); }
.c-super8 .e-mes { font-family: "Shrikhand", serif; color: #F2A04E; font-size: clamp(1.4rem, 3.6vw, 2rem); }
.c-super8 .e-anio, .c-super8 .e-sem { color: #D9CDB8; font-family: "Space Mono", monospace; }
.s8-cierre-fin { position: absolute; left: 50%; top: 8%; translate: -50% 0; font: 400 clamp(4rem, 14vw, 9rem)/1 "Shrikhand", serif; color: rgb(245 235 218 / .14); }
.c-super8 .e-cierre { padding-top: 26vh; }
@media (max-width: 760px) {
	.c-super8 { --nombre-tam: clamp(3.8rem, 18vw, 5.4rem); }
	.s8-carrete { --w: 28vw; right: 2vw; }
	.c-super8 .h-panel > .xv-ancho { width: calc(100% - 2rem); padding: 20px 16px; }
}