/* 109 · Pasaporte al Mundo — graduación con aire de aventura. Apertura: el pasaporte se abre como un libro y adentro
   se estampa el sello. Portada: el mapa antiguo con sombras de nubes que pasan (WebGL, modo nubes) y el avión que cruza.
   Orden: páginas del pasaporte — cada sección es una página con guilloché, su número y un sello que se estampa al llegar.
   Fecha: el sello cae desde arriba y estampa el día. */
.c-pasaporte { --display-peso: 900; --nombre-color: #1E3A5F; --titulo-letra: "Playfair Display"; --titulo-peso: 900; --titulo-espacio: -.01em; --dia-letra: "Playfair Display"; --dia-color: #B83A3A;
	--radio: 12px; --vj: 70px; --sombra: 0 20px 26px rgb(30 58 95 / .25); --nombre-tam: clamp(3.6rem, 8.4vw, 7.4rem); }
.c-pasaporte .xv-cielo { display: none; }
.c-pasaporte main { background: #1E3A5F radial-gradient(80% 50% at 50% 0%, #24466F, transparent 70%); }
.c-pasaporte main > .xv-sec:not(#portada) { background: transparent; }
.c-pasaporte .v-velo { background: radial-gradient(54% 40% at 50% 46%, rgb(251 247 236 / .78), transparent 76%); }

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

/* portada */
.c-pasaporte .e-nombre { white-space: normal; text-wrap: balance; max-width: 10ch; line-height: .98; }
.c-pasaporte .e-evento { color: #B83A3A; letter-spacing: .42em; font-family: "Oswald", sans-serif; font-weight: 600; font-size: .8rem; }
.c-pasaporte .e-grado-t { color: #1E3A5F; font-family: "Lora", serif; font-style: italic; font-weight: 600; letter-spacing: 0; }
.c-pasaporte .e-grado-i { color: #3F5675; font-family: "Oswald", sans-serif; }
.c-pasaporte .e-fecha { color: #FBF7EC; background: #1E3A5F; padding: 7px 16px; border-radius: 999px; font-family: "Oswald", sans-serif; letter-spacing: .08em; }
.c-pasaporte .e-pista { color: #1E3A5F; }
.pa-maleta { --w: min(26vmin, 240px); left: 3vw; bottom: 4vh; --r: -6deg; --dx: -8vw; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .6s; --fd: 6s; --fa: 4px; --fr: 1deg; }
.pa-avion { --w: min(28vmin, 260px); right: 2vw; top: 8vh; --r: -12deg; --dx: 40vw; --dy: -22vh; --ex: -70vw; --ey: 20vh; --ed: .3s; --fd: 4s; --fa: 10px; --fr: 2deg; }

/* páginas del pasaporte */
.c-pasaporte main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; color: #1E3A5F; --tinta: #1E3A5F; --tinta-2: #3F5675; --acento: #B83A3A; --linea: rgba(30,58,95,.14);
	padding: clamp(34px, 4.8vw, 60px) clamp(26px, 4.8vw, 60px) clamp(46px, 5vw, 66px); border-radius: 14px;
	background: radial-gradient(circle at 50% 50%, transparent 0 28%, rgb(30 58 95 / .05) 29% 30%, transparent 31%) 0 0 / 38px 38px,
		repeating-radial-gradient(circle at 20% 120%, rgb(111 154 122 / .1) 0 1px, transparent 1px 10px), linear-gradient(160deg, #FBF7EC, #F1E9D6);
	box-shadow: inset 0 0 0 10px rgb(251 247 236 / .9), inset 0 0 0 11px rgb(30 58 95 / .18), 0 40px 70px -30px rgb(0 0 0 / .6); }
.c-pasaporte .xv-kicker { color: #B83A3A; letter-spacing: .36em; font-family: "Oswald", sans-serif; font-weight: 500; }
.c-pasaporte .xv-titulo { color: #1E3A5F; }
.c-pasaporte .xv-titulo .xv-script { font-style: italic; font-weight: 700; color: #B83A3A; }
.c-pasaporte .xv-superficie { background: rgb(255 255 255 / .6); border: 1px dashed rgb(30 58 95 / .3); }
.c-pasaporte .xv-momento time { color: #B83A3A; font-family: "Oswald", sans-serif; font-weight: 500; }
.c-pasaporte .e-firma { font-family: "Playfair Display", serif; font-style: italic; color: #B83A3A; }
.c-pasaporte .xv-boton:not(.xv-boton-suave) { background: #1E3A5F; color: #FBF7EC; border-color: #1E3A5F; }
.c-pasaporte .e-ornamento { width: min(66%, 240px); }
.c-pasaporte #fecha, .c-pasaporte #cierre { color: #FBF7EC; --tinta: #FBF7EC; --tinta-2: #D9E1EC; }

/* fecha: el sello cae y estampa el día */
.c-pasaporte .e-fecha-k { color: #C9A54C; font-family: "Oswald", sans-serif; }
.pa-m-sello { left: 12%; top: 12%; width: 76%; opacity: clamp(0, calc(var(--t1) * 3), .95); transform: translateY(calc((1 - var(--t1)) * -60%)) scale(calc(1.6 - var(--t1) * .6)) rotate(calc(-14deg + (1 - var(--t1)) * 30deg));
	filter: brightness(1.6) saturate(.9) drop-shadow(0 0 0 #fff); }
.c-pasaporte .e-dia-caja { rotate: -14deg; }
.c-pasaporte .e-dia { color: #FBF7EC; font-size: clamp(4.4rem, 13vw, 7rem); }
.c-pasaporte .e-mes { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .3em; color: #F2B5A8; font-size: clamp(.9rem, 2.4vw, 1.2rem); }
.c-pasaporte .e-anio { color: #D9E1EC; }
.c-pasaporte .e-sem { color: #D9E1EC; }

/* cierre */
.pa-cierre-avion { position: absolute; left: 50%; top: 5%; width: min(30vmin, 220px); translate: -50% 0; rotate: -10deg; animation: e-flota 4s ease-in-out infinite alternate; }
.c-pasaporte .e-cierre { padding-top: clamp(200px, 30vh, 280px); }
.c-pasaporte .e-nombre-fin { color: #FBF7EC; font-size: clamp(2.4rem, 7vw, 5rem); }

@media (max-width: 760px) {
	.c-pasaporte { --nombre-tam: clamp(2.8rem, 13vw, 4.2rem); }
	.pa-maleta { --w: 34vw; left: -6vw; bottom: 2vh; }
	.pa-avion { --w: 36vw; right: -6vw; top: 6vh; }
}