/* 115 · Terminal — eventos de tecnología. Apertura: una terminal donde se teclea solo el comando de la invitación;
   al tocar (o Enter) compila con su barra de progreso. Portada: el fondo de circuitos con sus luces que titilan (WebGL,
   modo titila) y una lluvia muy suave de código. Orden: cada sección es una ventana de terminal con su comando
   (cat, ls, open, rsvp…) que se teclea antes de mostrar la salida. Fecha: la barra de carga llega a 100 % y aparece el día. */
@property --pc { syntax: "<integer>"; inherits: false; initial-value: 0; }
.c-terminal { --display-peso: 700; --nombre-color: #FFFFFF; --titulo-letra: "Space Grotesk"; --titulo-peso: 700; --titulo-espacio: -.03em; --dia-letra: "Space Grotesk"; --dia-color: #FFFFFF;
	--radio: 14px; --vj: 52px; --sombra: 0 24px 34px rgb(0 0 0 / .5); --nombre-tam: clamp(3.4rem, 8vw, 7rem);
	--panel: #0D1117; --panel-borde: rgb(88 166 255 / .22); --panel-filtro: none; --panel-sombra: 0 30px 70px -30px rgb(0 0 0 / .8), 0 0 50px rgb(63 185 80 / .06); --pad: clamp(22px, 4vw, 44px); }
.c-terminal .xv-cielo { display: none; }
.c-terminal main { background: #0A0D12 radial-gradient(70% 40% at 50% 0%, #0F1A16, transparent 70%); }
.c-terminal main > .xv-sec:not(#portada) { background: transparent; }
.c-terminal .v-velo { background: radial-gradient(56% 40% at 50% 46%, rgb(13 17 23 / .7), transparent 76%); }
.tm-lluvia { position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(180deg, rgb(63 185 80 / .35) 0 2px, transparent 2px 14px) 0 0 / 30px 100%;
	-webkit-mask: linear-gradient(90deg, #000 0 12%, transparent 30% 70%, #000 88%), linear-gradient(transparent, #000 40%, transparent); -webkit-mask-composite: source-in;
	mask: linear-gradient(90deg, #000 0 12%, transparent 30% 70%, #000 88%) intersect, linear-gradient(transparent, #000 40%, transparent); animation: tm-cae 6s linear infinite; }
@keyframes tm-cae { to { background-position: 0 280px; } }

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

/* portada */
.c-terminal .e-evento { color: #3FB950; font-family: "IBM Plex Mono", monospace; letter-spacing: .1em; font-size: .82rem; text-transform: none; }
.c-terminal .e-evento::before { content: "$ "; color: #8B949E; }
.c-terminal .e-nombre { white-space: normal; text-wrap: balance; max-width: 12ch; line-height: .98; }
.c-terminal .e-nombre::after { content: ""; display: inline-block; width: .42em; height: .78em; margin-left: .08em; vertical-align: -.04em; background: #3FB950; animation: ap-parpadeo 1s steps(1) infinite; }
.c-terminal .e-logo { color: #9DA7B3; border-color: rgb(157 167 179 / .4); font-family: "IBM Plex Mono", monospace; }
.c-terminal .e-lema { color: #9DA7B3; }
.c-terminal .e-fecha { color: #E6EDF3; font-family: "IBM Plex Mono", monospace; font-size: .82rem; background: #161B22; padding: 6px 14px; border-radius: 6px; border: 1px solid rgb(255 255 255 / .1); }
.c-terminal .e-pista { color: #9DA7B3; }
.tm-cubo { --w: min(18vmin, 170px); right: 8vw; top: 10vh; --dy: -16vh; --dr: 40deg; --ex: 20vw; --ey: -10vh; --ed: .4s; --fd: 6s; --fa: 10px; --fr: 6deg; }
.tm-chip { --w: min(22vmin, 200px); left: 4vw; bottom: 6vh; --r: -10deg; --dx: -8vw; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .6s; --fd: 6s; --fa: 6px; --fr: 2deg; }
.tm-teclado { --w: min(30vmin, 280px); right: 2vw; bottom: 3vh; --r: 8deg; --dx: 8vw; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .8s; --fd: 7s; --fa: 4px; --fr: 1deg; }

/* secciones: ventanas de terminal */
.c-terminal .panel { overflow: hidden; border-radius: 14px; }
.c-terminal .xv-kicker { color: #58A6FF; font-family: "IBM Plex Mono", monospace; letter-spacing: .14em; }
.c-terminal .xv-kicker::before { content: "# "; color: #8B949E; }
.c-terminal .xv-titulo { color: #FFFFFF; }
.c-terminal .xv-titulo .xv-script { font-family: "IBM Plex Mono", monospace; font-weight: 500; color: #3FB950; letter-spacing: -.04em; }
.c-terminal .xv-superficie { background: #161B22; border: 1px solid rgb(255 255 255 / .08); border-radius: 10px; }
.c-terminal .xv-momento time { color: #F0B429; font-family: "IBM Plex Mono", monospace; }
.c-terminal .xv-lugar-hora { font-family: "IBM Plex Mono", monospace; }
.c-terminal .e-firma { font-family: "IBM Plex Mono", monospace; font-size: 1.2rem; color: #3FB950; }
.c-terminal .e-firma::before { content: "— "; }
.c-terminal .xv-boton { border-radius: 8px; font-family: "IBM Plex Mono", monospace; }
.c-terminal .xv-boton:not(.xv-boton-suave) { background: #238636; color: #FFFFFF; border-color: #2EA043; }
.c-terminal .xv-boton-suave { color: #E6EDF3; border-color: rgb(255 255 255 / .2); }
.c-terminal .e-ornamento { width: min(56%, 200px); }

/* fecha: la barra de carga llega al 100 % */
.c-terminal .e-fecha-k { color: #58A6FF; font-family: "IBM Plex Mono", monospace; letter-spacing: .14em; }
.tm-m-barra { left: 6%; right: 6%; top: 84%; height: 14px; border-radius: 3px; background: #161B22; border: 1px solid rgb(255 255 255 / .12); opacity: clamp(0, calc((1 - var(--t2)) * 4), 1); overflow: hidden; }
.tm-m-barra b { position: absolute; inset: 0; width: calc(var(--t1) * 100%); background: repeating-linear-gradient(90deg, #3FB950 0 8px, #2EA043 8px 12px); }
.tm-m-pct { left: 0; right: 0; top: 72%; text-align: center; font: 500 .9rem/1 "IBM Plex Mono", monospace; color: #3FB950; --pc: calc(var(--t1) * 100); counter-reset: pc var(--pc); opacity: clamp(0, calc((1 - var(--t2)) * 4), 1); }
.tm-m-pct::after { content: "compilando… " counter(pc) "%"; }
.tm-m-cubo { left: 20%; top: 14%; width: 60%; opacity: calc(var(--t2) * .35); transform: rotate(calc(var(--t1) * 90deg)) scale(calc(.6 + var(--t2) * .4)); }
.c-terminal .e-dia { font-size: clamp(4.4rem, 13vw, 7rem); letter-spacing: -.05em; }
.c-terminal .e-mes { font-family: "IBM Plex Mono", monospace; color: #3FB950; text-transform: lowercase; font-size: clamp(1rem, 2.6vw, 1.3rem); }
.c-terminal .e-anio { color: #9DA7B3; font-family: "IBM Plex Mono", monospace; }
.c-terminal .e-sem { color: #9DA7B3; font-family: "IBM Plex Mono", monospace; text-transform: none; letter-spacing: .04em; }

/* cierre */
.tm-cierre-teclado { position: absolute; left: 50%; top: 5%; width: min(32vmin, 230px); translate: -50% 0; }
.c-terminal .e-cierre { padding-top: clamp(190px, 28vh, 260px); }
.c-terminal .e-cierre .xv-texto-grande { font-family: "IBM Plex Mono", monospace; color: #3FB950; font-size: clamp(1rem, 2.4vw, 1.3rem); }
.c-terminal .e-nombre-fin { font-size: clamp(2.4rem, 7vw, 5rem); }

@media (max-width: 760px) {
	.c-terminal { --nombre-tam: clamp(2.8rem, 13vw, 4.2rem); --pad: 22px; }
	.tm-cubo { --w: 24vw; right: 4vw; top: 6vh; }
	.tm-chip { --w: 28vw; left: -2vw; bottom: 3vh; }
	.tm-teclado { --w: 40vw; right: -6vw; bottom: 2vh; }
	.c-terminal .fi-term code { font-size: .66rem; }
}