/* 47 · Página en Blanco — diseño suizo con trazos reales de lápiz: blanco, grafito y un azul de carrera.
   Guion: en una hoja en blanco aparece escrito «Lo logré». El nombre en negro enorme, alineado a la izquierda;
   una línea de lápiz lo subraya y se dibuja con el scroll mientras el lápiz avanza. En la fecha el garabato
   se vuelve un círculo azul hecho a mano alrededor del día. Programa como apuntes sobre papel cuadriculado. */

.c-pagina { --nombre-color: #1F1F1F; --titulo-letra: "Archivo Black"; --titulo-espacio: -.02em; --display-espacio: -.035em; --dia-color: #1F1F1F; --radio: 2px; --vj: 70px;
	--nombre-tam: clamp(3.4rem, 10.5vw, 9rem); --sombra: 0 14px 18px rgb(31 31 31 / .14); }
.c-pagina .e-escena { place-items: center start; }
.c-pagina .e-titulos { justify-items: start; text-align: left; padding: 0 0 0 8vw; max-width: 80vw; --titulos-dy: -10vh; }
.c-pagina .e-nombre { white-space: normal; line-height: .88; max-width: 9ch; }
.c-pagina .e-evento { font-family: "Caveat Brush", cursive; text-transform: none; letter-spacing: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #2457D6; }
.c-pagina .e-grado { justify-items: start; }
.c-pagina .e-grado-i { color: #4A4A4A; }

/* trazo que se dibuja con el scroll y el lápiz que avanza */
.pg-trazo { --w: min(70vmin, 640px); left: 6vw; top: 63vh; --ey: 0px; --ed: .6s; --fd: 0s; }
.pg-trazo .e-img { animation: none; filter: none; clip-path: inset(0 calc(100% - 22% - var(--p, 0) * 78%) 0 0); }
.pg-lapiz { --w: min(24vmin, 220px); left: calc(6vw + min(70vmin, 640px) * .14); top: 52vh; --dx: min(52vmin, 480px); --dy: 2vh; --r: 8deg; --dr: -6deg; --ey: -30vh; --ed: .9s; --fd: 2.4s; --fa: 4px; --fr: 2deg; }
.pg-cuaderno { --w: min(34vmin, 320px); right: 5vw; top: 10vh; --r: 6deg; --dy: -14vh; --dr: -4deg; --ex: 30vw; --ey: 0px; --ed: .3s; --fd: 9s; --fa: 5px; }
.pg-virutas { --w: min(16vmin, 150px); right: 10vw; bottom: 8vh; --dy: 12vh; --dr: 30deg; --ey: 30vh; --ed: 1.2s; --fd: 5s; }

/* entrada: «Lo logré» escrito a mano */
.pg-letrero { position: absolute; left: 50%; top: 12%; translate: -50% 0; font-family: "Caveat Brush", cursive; font-size: clamp(2.4rem, 7vw, 4.6rem); color: #2457D6; rotate: -4deg; }
.pg-entrada-trazo { position: absolute; left: 50%; bottom: 10%; width: min(60vmin, 520px); translate: -50% 0; opacity: .8; }
.c-pagina .xv-entrada-nombre { font-size: clamp(2.6rem, 9vw, 5rem); }

/* bienvenida */
.c-pagina .e-ornamento { width: min(80%, 340px); rotate: -3deg; }
.c-pagina .e-firma { font-family: "Caveat Brush", cursive; color: #2457D6; }
.c-pagina .xv-texto-grande { font-weight: 500; }

/* fecha: el garabato se vuelve un círculo azul hecho a mano */
.pg-m-trazo { left: 4%; top: 26%; width: 92%; transform: rotate(calc(var(--t1) * -40deg)) scale(calc(1 - var(--t1) * .4)); opacity: clamp(0, calc((1 - var(--t1)) * 2.6), 1); clip-path: inset(0 calc((1 - var(--t1) * 1.6) * 60%) 0 0); }
.pg-m-circulo { inset: 10%; border: 4px solid #2457D6; border-radius: 52% 46% 55% 44% / 48% 55% 45% 52%; transform: rotate(calc(-12deg + var(--t2) * 8deg)) scale(calc(.6 + var(--t2) * .4));
	clip-path: polygon(50% 50%, 50% -20%, calc(50% + var(--t2) * 400%) -20%, 120% calc(-20% + var(--t2) * 400%), 120% 120%, -20% 120%, -20% -20%, 50% -20%); opacity: clamp(0, calc(var(--t2) * 3), 1); }
.c-pagina .e-dia { font-size: clamp(5rem, 16vw, 9rem); letter-spacing: -.04em; }
.c-pagina .e-mes { font-family: "Caveat Brush", cursive; color: #2457D6; }

/* apuntes sobre papel cuadriculado */
.c-pagina .e-itinerario { background: #FFFFFF linear-gradient(rgb(47 107 255 / .08) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgb(47 107 255 / .08) 1px, transparent 1px) 0 0 / 24px 24px; }
.c-pagina .xv-momento span { font-family: "Caveat Brush", cursive; font-size: 1.5rem; }
.c-pagina .xv-momento time { color: #2457D6; font-family: "IBM Plex Sans", sans-serif; }
.c-pagina .xv-superficie { background: #FFFFFF; border: 1.5px solid #1F1F1F; box-shadow: 8px 8px 0 #1F1F1F; }
.c-pagina .xv-titulo .xv-script { color: #2457D6; }

/* cierre */
.pg-cierre-trazo { position: absolute; left: 50%; bottom: 14%; width: min(56vmin, 460px); translate: -50% 0; opacity: .5; }

@media (max-width: 760px) {
	.c-pagina .e-titulos { padding-left: 7vw; }
	.pg-trazo { --w: 84vw; left: 4vw; top: 70vh; }
	.pg-lapiz { --w: 30vw; left: 12vw; top: 62vh; --dx: 56vw; }
	.pg-cuaderno { --w: 42vw; right: 2vw; top: 6vh; }
	.pg-virutas { display: none; }
}

/* Segunda revisión: lectura sin interferir con la ilustración. */
@media(max-width:760px) { .c-pagina .pg-lapiz { top:70vh; } .c-pagina .pg-trazo { top:79vh; } }

@media(min-width:761px) { .c-pagina .pg-lapiz { top:74vh; } .c-pagina .pg-trazo { top:83vh; } }