/* Portada de lossantos2080.com: cinematográfica, a sangre, con la paleta rosa y azul de la web
   y todo empujando al Discord, que es por donde se entra al servidor */
:root {
	--rosa: #e0336f;
	--rosa-vivo: #ff4d8d;
	--rosa-osc: #7b2039;
	--azul: #1d8dda;
	--cian: #3ad6ff;
	--fondo: #04070d;
	--texto: #eef2f7;
	--suave: #9aa8b8;
	--ancho: 1280px;
	--lado: clamp(16px, 5vw, 64px);
	--curva: cubic-bezier(.2, .7, .1, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }  /* sin scroll-padding: los enlaces deben caer justo en las paradas de la rueda */
body {
	font-family: "Rajdhani", system-ui, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.5;
	color: var(--texto); background: var(--fondo); overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
strong { color: #fff; font-weight: 700; }
ol { list-style: none; }
::selection { background: var(--rosa); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--rosa), var(--azul)); border: 3px solid var(--fondo); }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }

/* Grano de película y líneas de pantalla por encima de todo */
.grano {
	position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grano 1s steps(4) infinite;
}
@keyframes grano { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
.lineas { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

/* Botones */
.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	padding: .75em 1.6em .75em 1.3em; border: 0; cursor: pointer; position: relative;
	font: 700 1rem "Rajdhani", sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
	color: #fff; background: var(--rosa);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
	transition: background .25s, transform .25s var(--curva);
	overflow: hidden;
}
.boton::after { /* destello que cruza el botón */
	content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
}
.boton:hover { background: var(--rosa-vivo); transform: translateY(-2px); }
.boton:hover::after { transform: translateX(120%) skewX(-20deg); transition: transform .7s var(--curva); }
.boton:focus-visible, .boton-fantasma:focus-visible, .copiar:focus-visible, .panel:focus-visible { outline: 2px solid var(--cian); outline-offset: 4px; }
.boton i { font-size: 1.25em; }
.boton-sm { padding: .55em 1.2em .55em 1em; font-size: .85rem; }
.boton-xl {
	padding: 1.05em 2.6em 1.05em 2.1em; font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset;
}
.boton-xl::before { /* halo que respira */
	content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, .25), transparent 60%);
	animation: respira 2.8s ease-in-out infinite; opacity: 0;
}
@keyframes respira { 50% { opacity: 1; } }
.boton-fantasma {
	display: inline-flex; align-items: center; gap: .6em; padding: .9em .4em; text-decoration: none;
	font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; color: #dfe6ee;
	border-bottom: 1px solid rgba(255, 255, 255, .35); transition: color .2s, border-color .2s;
}
.boton-fantasma:hover { color: var(--cian); border-color: var(--cian); }

/* Barra superior */
.barra {
	position: fixed; inset: 0 0 auto; z-index: 40; height: 72px;
	display: flex; align-items: center; gap: 2.4rem; padding: 0 var(--lado);
	transition: background .4s, height .4s, box-shadow .4s;
}
.barra.solida { height: 62px; background: rgba(4, 7, 13, .86); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.barra-marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; font: 900 .95rem "Orbitron", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.barra-marca em { font-style: normal; color: var(--rosa-vivo); }
.barra-marca img { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(180, 60, 255, .5)); }
.barra-nav { display: flex; gap: 2rem; margin-left: auto; }
.barra-nav a { position: relative; text-decoration: none; color: #c3cdd8; font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; }
.barra-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--rosa-vivo); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--curva); }
.barra-nav a:hover { color: #fff; }
.barra-nav a:hover::after { transform: scaleX(1); }
.menu-boton { display: none; }
/* Botón de cuenta: "Entrar" sin sesión; avatar y nombre con ella */
.cuenta {
	--borde: rgba(255, 255, 255, .24);
	position: relative; display: inline-flex; align-items: center; gap: .55em; height: 36px; padding: 0 1em 0 .8em;
	margin-left: -.4rem; /* con el hueco de la barra queda a la misma distancia que los enlaces entre sí */
	border: 1px solid var(--borde); text-decoration: none; color: #dfe6ee;
	font: 600 .9rem "Rajdhani", sans-serif; letter-spacing: .14em; text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
	transition: color .2s, background .2s;
}
.cuenta::after { /* el clip-path se come el borde de la esquina: se dibuja la diagonal a mano */
	content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; pointer-events: none;
	background: linear-gradient(to top left, transparent 50%, var(--borde) 50%, var(--borde) calc(50% + 1.2px), transparent calc(50% + 1.2px));
}
.cuenta:hover { --borde: var(--cian); color: #fff; background: rgba(58, 214, 255, .06); }
.barra-cuenta .cuenta { margin-left: 0; }
.cuenta img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.cuenta span { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Portada */
.heroe { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; display: flex; align-items: flex-end; }
.heroe-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--fondo) url(img/fondo_poster.jpg) center / cover; transform: scale(1.06); animation: acercar 22s ease-out forwards; }
@keyframes acercar { to { transform: scale(1); } }
.heroe-velo {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(4, 7, 13, .92) 0%, rgba(4, 7, 13, .55) 42%, rgba(4, 7, 13, .05) 75%),
		linear-gradient(0deg, var(--fondo) 0%, rgba(4, 7, 13, 0) 38%),
		linear-gradient(180deg, rgba(4, 7, 13, .7) 0%, rgba(4, 7, 13, 0) 22%);
}
.heroe-contenido { position: relative; z-index: 2; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado) clamp(64px, 11vh, 120px); }
.heroe-antes { display: flex; align-items: center; gap: .9rem; color: var(--cian); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; font-size: .82rem; margin-bottom: 1.2rem; }
.raya { width: 48px; height: 2px; background: var(--cian); box-shadow: 0 0 12px var(--cian); }
.titulo { font-family: "Orbitron", sans-serif; font-weight: 900; line-height: .9; letter-spacing: -.01em; margin-bottom: 1.6rem; }
.titulo span { position: relative; display: block; }
.titulo-1 { font-size: clamp(3rem, 9.6vw, 8.6rem); color: #fff; text-shadow: 0 0 40px rgba(255, 77, 141, .35); }
.titulo-2 {
	font-size: clamp(3rem, 9.6vw, 8.6rem); color: transparent;
	-webkit-text-stroke: 2px var(--rosa-vivo); filter: drop-shadow(0 0 18px rgba(255, 77, 141, .55));
}
/* Glitch: dos copias desplazadas en rojo y cian que saltan de vez en cuando */
.titulo span::before, .titulo span::after { content: attr(data-glitch); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.titulo span::before { color: var(--rosa-vivo); -webkit-text-stroke: 0; transform: translateX(-4px); clip-path: inset(10% 0 60% 0); }
.titulo span::after { color: var(--cian); -webkit-text-stroke: 0; transform: translateX(4px); clip-path: inset(55% 0 15% 0); }
.titulo span.falla::before, .titulo span.falla::after { animation: falla .45s steps(3) 1; }
@keyframes falla {
	0% { opacity: .9; clip-path: inset(10% 0 60% 0); }
	33% { opacity: .9; clip-path: inset(70% 0 5% 0); transform: translateX(6px); }
	66% { opacity: .9; clip-path: inset(30% 0 40% 0); transform: translateX(-6px); }
	100% { opacity: 0; }
}
.heroe-texto { font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: #d7dee7; max-width: 560px; margin-bottom: 2.2rem; }
.heroe-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2rem; }
.heroe-nota { margin-top: 1.3rem; color: var(--suave); font-size: 1rem; max-width: 460px; }

.heroe-vivo {
	position: absolute; z-index: 2; right: var(--lado); bottom: clamp(64px, 11vh, 120px);
	display: grid; grid-template-columns: auto auto; column-gap: 1rem; align-items: end;
	padding: 1rem 1.3rem; background: rgba(4, 7, 13, .55); backdrop-filter: blur(10px);
	border-left: 2px solid var(--rosa-vivo);
}
.heroe-vivo[hidden] { display: none; }
.vivo-etq { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #3ddc84; margin-bottom: .2rem; }
.vivo-num { font: 900 2.6rem "Orbitron", sans-serif; line-height: 1; }
.vivo-txt { color: var(--suave); font-size: .95rem; line-height: 1.25; padding-bottom: .2rem; }
.vivo-txt b { color: #fff; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: vivo 1.8s infinite; }
@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }

.heroe-bajar { position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 1px; height: 48px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.heroe-bajar span { position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: #fff; animation: caer 1.8s var(--curva) infinite; }
@keyframes caer { to { top: 100%; } }

/* Cabeceras de sección */
.cabecera { display: flex; align-items: flex-start; gap: 1.4rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.indice { font: 700 .9rem "Orbitron", sans-serif; color: var(--rosa-vivo); letter-spacing: .1em; padding-top: .7em; display: flex; align-items: center; gap: .8rem; }
.indice::after { content: ""; width: 40px; height: 1px; background: currentColor; }
h2 { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }

/* Cómo entrar */
.entrar { padding: clamp(80px, 12vw, 160px) 0; background: radial-gradient(ellipse 45% 40% at 88% 55%, rgba(224, 51, 111, .1), transparent 70%), var(--fondo); }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .12); }
.paso { position: relative; padding: 2.4rem 2rem 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.paso + .paso { padding-left: 2rem; border-left: 1px solid rgba(255, 255, 255, .08); }
.paso::before { content: ""; position: absolute; top: -1px; left: 0; width: 64px; height: 3px; background: rgba(255, 255, 255, .5); }
.paso + .paso::before { left: 2rem; }
.paso-1::before { width: 100%; background: linear-gradient(90deg, var(--rosa-vivo), transparent); box-shadow: 0 0 14px var(--rosa); }
.paso-num { font: 900 4.4rem "Orbitron", sans-serif; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .28); }
.paso-1 .paso-num { -webkit-text-stroke-color: var(--rosa-vivo); text-shadow: 0 0 30px rgba(255, 77, 141, .4); }
.paso h3 { font-size: 1.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.paso p { color: var(--suave); max-width: 340px; }
.paso .boton { margin-top: .6rem; }
.copiar {
	margin-top: .6rem; display: inline-flex; align-items: center; gap: .6em; cursor: pointer;
	padding: .7em 1em; background: rgba(58, 214, 255, .06); border: 1px solid rgba(58, 214, 255, .4); color: var(--cian);
	font: 600 .95rem ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: nowrap; transition: background .2s;
}
.copiar:hover { background: rgba(58, 214, 255, .14); }
.boton-fivem { margin-top: .6rem; background: var(--azul); }
.boton-fivem:hover { background: #2aa3f0; }
.boton-fivem + .copiar { margin-top: .2rem; padding: .4em 0; background: none; border: 0; color: var(--suave); font-size: .82rem; }
.boton-fivem + .copiar:hover { background: none; color: var(--cian); }

/* La ciudad: imagen a sangre con el texto encima */
.ciudad { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.ciudad-fondo, .final-fondo { position: absolute; inset: -12% 0; background-size: cover; background-position: center; will-change: transform; }
.ciudad-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 7, 13, .1) 30%, rgba(4, 7, 13, .9) 70%), linear-gradient(180deg, var(--fondo), transparent 22%, transparent 78%, var(--fondo)); }
.ciudad-texto { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-end; text-align: left; }
.ciudad-texto > * { width: min(560px, 100%); }
.ciudad-texto .indice { margin-bottom: 1.2rem; }
.ciudad-texto h2 { margin-bottom: 1.6rem; }
.ciudad-texto p { color: #cdd6e0; font-size: 1.15rem; }
.ciudad-texto p + p { margin-top: 1rem; }

/* Sistemas: paneles que se abren */
.sistemas { padding: clamp(80px, 12vw, 160px) 0; }
.paneles { display: flex; gap: 6px; height: clamp(420px, 62vh, 620px); padding: 0 var(--lado); max-width: 1600px; margin: 0 auto; }
.panel { position: relative; flex: 1; min-width: 0; overflow: hidden; cursor: pointer; transition: flex .7s var(--curva); outline: none; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.55); transform: scale(1.08); transition: filter .7s, transform 1.2s var(--curva); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 7, 13, .95), rgba(4, 7, 13, 0) 60%); }
.panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: var(--rosa-vivo); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--curva); }
.panel.abierto { flex: 4.2; }
.panel.abierto img { filter: saturate(1.15) brightness(.9); transform: scale(1); }
.panel.abierto::before { transform: scaleX(1); }
.panel-info { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.6rem 1.8rem; }
.panel-num { font: 700 .85rem "Orbitron", sans-serif; color: var(--rosa-vivo); letter-spacing: .1em; }
.panel h3 { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; margin-top: .4rem; white-space: nowrap; }
.panel p { color: #cfd7e1; max-width: 420px; margin-top: .5rem; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--curva); }
.panel.abierto p { opacity: 1; transform: none; transition-delay: .25s; }
.panel:not(.abierto) .panel-info { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.4rem 1.1rem; }
.panel:not(.abierto) p { position: absolute; left: -9999px; }
.panel:not(.abierto) h3 { order: -1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.15rem; margin: 0; }

/* Cierre */
.final { position: relative; min-height: 92vh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 120px var(--lado); }
.final-velo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(4, 7, 13, .45), rgba(4, 7, 13, .92) 75%), linear-gradient(180deg, var(--fondo), transparent 25%, transparent 75%, var(--fondo)); }
.final-contenido { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.final-logo { width: clamp(110px, 12vw, 150px); filter: drop-shadow(0 0 34px rgba(180, 60, 255, .6)); margin-bottom: 1.6rem; }
.final h2 { font-size: clamp(2.8rem, 8vw, 6.8rem); text-shadow: 0 0 50px rgba(255, 77, 141, .35); margin-bottom: 1rem; }
.final p { color: #cdd6e0; font-size: 1.2rem; margin-bottom: 2.2rem; }
.final-vivo { margin: 1.4rem 0 0 !important; font-size: 1.05rem !important; color: var(--suave) !important; }
.final-vivo .punto { margin-right: .5rem; vertical-align: 1px; }
.final-vivo[hidden] { display: none; }
.final-vivo b { color: #fff; }

/* Pie */
.pie { padding: 3rem 0 3.4rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.pie-fila { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.redes { display: flex; gap: .5rem; margin-left: auto; }
.redes a { width: 44px; height: 44px; display: grid; place-items: center; color: #c3cdd8; border: 1px solid rgba(255, 255, 255, .14); text-decoration: none; font-size: 1.15rem; transition: color .2s, border-color .2s, background .2s; }
.redes a:hover { color: #fff; border-color: var(--rosa-vivo); background: rgba(224, 51, 111, .15); }
.pie-enlaces { display: flex; gap: 1.4rem; }
.pie-enlaces a { color: var(--suave); text-decoration: none; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; }
.pie-enlaces a:hover { color: #fff; }
.pie-legal { margin-top: 2rem; color: #5f6d7d; font-size: .85rem; line-height: 1.55; }

.boton-fijo { display: none; }

/* Apariciones: barrido desde abajo */
.js .aparece { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--curva), transform 1.1s var(--curva); }
.js .aparece.visto { opacity: 1; transform: none; }
.js .heroe-contenido > * { opacity: 0; transform: translateY(30px); animation: entra 1.1s var(--curva) forwards; }
.js .heroe-contenido > :nth-child(2) { animation-delay: .12s; }
.js .heroe-contenido > :nth-child(3) { animation-delay: .3s; }
.js .heroe-contenido > :nth-child(4) { animation-delay: .42s; }
.js .heroe-contenido > :nth-child(5) { animation-delay: .54s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* Escritorio: cada sección ocupa la pantalla y la rueda salta de una a otra (inicio.js) */
@media (min-width: 1021px) {
	.entrar, .sistemas { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 56px; }
	.entrar > .envoltura, .sistemas > .envoltura { width: 100%; }
	.ciudad, .final { min-height: 100vh; }
	.paneles { width: 100%; height: clamp(340px, calc(100vh - 330px), 640px); }
	.sistemas .cabecera { margin-bottom: clamp(1.6rem, 4vh, 3rem); }
}
/* Escritorio estrecho: que los enlaces de la barra quepan en una línea. Con la sesión iniciada la barra lleva además
   «Panel», «Salir» y el nombre, así que ahí se aprieta hasta más ancho y esos dos botones se quedan en icono */
.barra-nav a, .barra-marca { white-space: nowrap; }
@media (min-width: 1021px) and (max-width: 1180px) {
	.barra { gap: 1.6rem; }
	.barra-nav { gap: 1.3rem; }
	.barra-nav a { font-size: .84rem; letter-spacing: .1em; }
	.barra:has(.barra-mini) .barra-marca span { display: none; }
}
@media (min-width: 1181px) and (max-width: 1360px) {
	.barra:has(.barra-mini) { gap: 1.6rem; }
	.barra:has(.barra-mini) .barra-nav { gap: 1.3rem; }
	.barra:has(.barra-mini) .barra-nav a { font-size: .84rem; letter-spacing: .1em; }
}
@media (min-width: 1021px) and (max-width: 1440px) {
	.barra-cuenta .barra-mini { font-size: 0; gap: 0; }
	.barra-cuenta .barra-mini i { font-size: .95rem; }
	.barra-cuenta .cuenta span { max-width: 10ch; }
}
@media (max-width: 1020px) {
	.barra { gap: .8rem; }
	.barra-nav { display: none; }
	.barra-marca { margin-right: auto; }
	/* Menú del móvil (inicio/menu.js): el botón abre los enlaces de la barra en un desplegable debajo */
	.menu-boton {
		display: flex; flex-direction: column; justify-content: center; gap: 5px; flex: none; width: 40px; height: 36px; padding: 0 10px;
		background: none; border: 1px solid rgba(255, 255, 255, .24); cursor: pointer;
	}
	.menu-boton span { height: 2px; background: #dfe6ee; transition: transform .3s var(--curva), opacity .2s; }
	.menu-abierto .menu-boton { border-color: var(--rosa-vivo); }
	.menu-abierto .menu-boton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menu-abierto .menu-boton span:nth-child(2) { opacity: 0; }
	.menu-abierto .menu-boton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.barra.menu-abierto { background: var(--fondo); backdrop-filter: none; }
	.menu-abierto .barra-nav {
		display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
		padding: 0 var(--lado) .8rem; background: var(--fondo); box-shadow: 0 18px 30px rgba(0, 0, 0, .5);
	}
	.menu-abierto .barra-nav a { padding: 1.05rem 0; font-size: 1rem; border-top: 1px solid rgba(255, 255, 255, .07); }
	.menu-abierto .barra-nav a::after { display: none; }
	.menu-abierto .barra-nav a.activo { color: var(--rosa-vivo); }
	.heroe-vivo { display: none !important; }
	.pasos { grid-template-columns: 1fr; border-top: 0; }
	.paso, .paso + .paso { padding: 2rem 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
	.paso + .paso::before { left: 0; }
	.ciudad-velo { background: linear-gradient(180deg, var(--fondo), rgba(4, 7, 13, .4) 25%, rgba(4, 7, 13, .9) 65%, var(--fondo)); }
	.ciudad { align-items: flex-end; padding-bottom: 80px; }
	.ciudad-texto { align-items: flex-start; }
	/* Paneles en carrusel que se desliza con el dedo */
	.paneles { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; }
	.paneles::-webkit-scrollbar { display: none; }
	.panel, .panel.abierto { flex: 0 0 min(78vw, 380px); height: 480px; scroll-snap-align: start; }
	.panel img, .panel.abierto img { filter: saturate(1.1) brightness(.85); transform: none; }
	.panel::before { transform: scaleX(1); }
	.panel p { opacity: 1; transform: none; }
	.panel:not(.abierto) .panel-info { display: block; padding: 1.6rem 1.6rem 1.8rem; }
	.panel:not(.abierto) p { position: static; }
	.panel:not(.abierto) h3 { writing-mode: horizontal-tb; transform: none; font-size: 1.5rem; margin-top: .4rem; }
}
@media (max-width: 620px) {
	.cuenta span { max-width: 9ch; }
	body { font-size: 17px; }
	.barra { height: 60px; }
	.barra.solida { height: 56px; }
	.barra-marca span { display: none; }
	.heroe-velo { background: linear-gradient(0deg, var(--fondo) 0%, rgba(4, 7, 13, .75) 45%, rgba(4, 7, 13, .25) 75%, rgba(4, 7, 13, .6) 100%); }
	.heroe-contenido { padding-bottom: 48px; }
	.heroe-antes { letter-spacing: .18em; font-size: .72rem; }
	.raya { width: 28px; }
	.titulo-1, .titulo-2 { font-size: 15vw; }
	.heroe-acciones .boton-xl { width: 100%; }
	.heroe-acciones .boton-fantasma { display: none; }
	.heroe-bajar { display: none; }
	.cabecera { flex-direction: column; gap: .6rem; }
	.indice { padding-top: 0; }
	.paso-num { font-size: 3.4rem; }
	.boton-fijo {
		display: flex; position: fixed; left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 45;
		font-size: 1.05rem; padding: 1em; box-shadow: 0 8px 30px rgba(224, 51, 111, .5);
		transform: translateY(160%); transition: transform .45s var(--curva);
	}
	.boton-fijo.visible { transform: none; }
	.pie { padding-bottom: 110px; }
	.redes { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.grano, .boton-xl::before, .punto, .heroe-bajar span, .heroe-video { animation: none; }
	.js .aparece, .js .heroe-contenido > * { opacity: 1; transform: none; transition: none; animation: none; }
}