/* ==========================================================
   ENIGMA URBAN STUDIOS · hoja de estilos
   Orden: variables → base → encabezado → portada → entrada
          → categorías → vitrina de fotos → visor de gorras
          → movimiento reducido
   ========================================================== */

/* ---------- Variables (tokens de diseño) ---------- */
:root {
	/* Colores de la marca (medidos del logo) */
	--negro: #000000;
	--verde-neon: #00f800;
	--blanco: #f4f4f0;

	/* Tipografías */
	--fuente-titulo: "Permanent Marker", cursive;
	--fuente-texto: "Space Grotesk", system-ui, sans-serif;

	/* Alto del encabezado fijo: logo + relleno + borde (cambia en celular) */
	--alto-encabezado: calc(48px + 2rem + 1px);
}

/* ---------- Base ---------- */
* {
	box-sizing: border-box;
	margin: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--alto-encabezado);
}

body {
	background: var(--negro);
	color: var(--blanco);
	font-family: var(--fuente-texto);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Lienzo fijo con los grafitis: queda detrás de todo y no estorba al mouse */
.fondo-grafiti {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

main {
	position: relative;
	z-index: 1;
	flex: 1;
}

/* ---------- Encabezado y menú ---------- */
.encabezado {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding: 1rem 2rem;
	background: var(--negro);
	background: color-mix(in srgb, var(--negro) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid color-mix(in srgb, var(--verde-neon) 30%, transparent);
}

.marca img {
	display: block;
	width: 48px;
	height: 48px;
}

.menu {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	list-style: none;
	padding: 0;
}

.menu a {
	position: relative;
	display: inline-block;
	padding: 0.4rem 0;
	color: var(--blanco);
	text-decoration: none;
	text-align: center;
	font-family: var(--fuente-titulo);
	font-size: 1.15rem;
	letter-spacing: 0.04em;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--verde-neon);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.menu a:focus-visible {
	transform: translateY(-3px);
}

.menu a:focus-visible::after {
	transform: scaleX(1);
}

/* El :hover solo se aplica donde hay mouse. En pantallas táctiles el
   navegador deja el :hover "pegado" tras un toque y atenuaría el menú. */
@media (hover: hover) {
	.menu a:hover {
		transform: translateY(-3px);
	}

	.menu a:hover::after {
		transform: scaleX(1);
	}

	.menu:hover a:not(:hover) {
		opacity: 0.4;
	}

	.tipo:hover {
		border-color: var(--verde-neon);
	}

	.zona:hover {
		opacity: 1;
		box-shadow: 0 0 14px var(--verde-neon);
	}
}

/* Sección en la que estás: la pincelada se queda puesta */
.menu a[aria-current="true"] {
	color: var(--verde-neon);
}

.menu a[aria-current="true"]::after {
	transform: scaleX(1);
}

/* ---------- Portada ---------- */
.portada {
	position: relative;
	overflow: hidden;
	min-height: calc(100vh - var(--alto-encabezado));
	min-height: calc(100dvh - var(--alto-encabezado));
	display: grid;
	place-items: center;
	text-align: center;
}

/* Resplandor que "respira" detrás del logo (solo anima la opacidad) */
.portada::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(110vw, 760px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, color-mix(in srgb, var(--verde-neon) 22%, transparent) 0%, transparent 62%);
	animation: respirar 5s ease-in-out infinite;
}

.portada__contenido {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 1rem;
	padding: 2rem 1rem;
}

.logo {
	display: block;
	width: min(60vw, 40vh, 360px);
	height: auto;	/* sin esto, el height del atributo HTML deformaría la imagen */
	animation: entrada-logo 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.eslogan {
	font-family: var(--fuente-titulo);
	color: var(--verde-neon);
	font-size: clamp(1.4rem, 5vw, 2rem);
	animation: aparecer 0.8s ease 0.9s both;
}

.eslogan__animado {
	display: inline-block;
}

/* Texto solo para lectores de pantalla (el animado se oculta con aria-hidden) */
.solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@keyframes entrada-logo {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes aparecer {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes respirar {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

/* ---------- Redes sociales (portada) ---------- */
.redes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.5rem;
	margin-top: 0.25rem;
	animation: aparecer 0.8s ease 1.6s both;
}

.redes a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--blanco);
	text-decoration: none;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	transition: color 0.25s ease, transform 0.25s ease;
}

.redes a svg {
	display: block;
}

.redes a:focus-visible {
	color: var(--verde-neon);
	outline: 2px solid var(--verde-neon);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (hover: hover) {
	.redes a:hover {
		color: var(--verde-neon);
		transform: translateY(-2px);
	}
}

/* ---------- Pantalla de entrada (solo la 1ª visita por pestaña) ---------- */
/* Oculta por defecto: si no hay JavaScript, o si no le toca verla,
   la web aparece sola. La clase .con-entrada la pone un script del <head>
   ANTES de pintar, por eso no hay parpadeo. */
.entrada {
	display: none;
}

.con-entrada body {
	overflow: hidden;      /* mientras dura la entrada no se puede bajar */
}

.con-entrada .entrada {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: block;
	overflow: hidden;
}

/* El negro va en su propia capa: así se puede desvanecer para dejar ver
   la web mientras el logo (que está encima) sigue viajando. */
.entrada__fondo {
	position: absolute;
	inset: 0;
	background: var(--negro);
	transition: opacity 0.9s ease;
}

.entrada__fondo--fuera {
	opacity: 0;
}

/* Capa donde se dibujan los signos de interrogación (debajo del logo) */
.entrada__chispas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Oculto de partida: el movimiento lo anima main.js (aparecer, crecer, volar) */
.entrada__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: min(56vw, 300px);
	height: auto;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.35);
	will-change: transform, opacity, filter;
}

.entrada__saltar {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	font-size: 0.95rem;
}

.entrada__saltar--oculto {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* Si se pulsa "Saltar": todo se desvanece de golpe */
.entrada.entrada--fuera {
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* ---------- Secciones por categoría ---------- */
/* Cada categoría ocupa una pantalla COMPLETA menos el alto del encabezado:
   si midiera 100vh, al saltar desde el menú su última línea quedaría
   siempre por debajo de la pantalla (el encabezado se come esos píxeles).
   "safe center" evita que, en pantallas bajas, el centrado saque el
   título por encima de la ventana donde no se puede hacer scroll. */
.categoria {
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem;
	min-height: calc(100vh - var(--alto-encabezado));
	min-height: calc(100dvh - var(--alto-encabezado));
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-content: safe center;
	text-align: center;
}

.categoria__titulo {
	font-family: var(--fuente-titulo);
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	color: var(--verde-neon);
	margin-bottom: 2rem;
	text-shadow: 0 0 26px color-mix(in srgb, var(--verde-neon) 40%, transparent);
}

.descripcion {
	max-width: 36ch;
	margin-inline: auto;
	line-height: 1.5;
}

/* Botones de tipo (pastillas) */
.tipos {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.tipo {
	font-family: var(--fuente-titulo);
	font-size: 1.1rem;
	color: var(--blanco);
	background: transparent;
	border: 2px solid var(--blanco);
	border-radius: 999px;
	padding: 0.5rem 1.4rem;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.tipo.activo {
	background: var(--verde-neon);
	border-color: var(--verde-neon);
	color: var(--negro);
}

@media (hover: hover) {
	.tipo:not(.activo):hover {
		border-color: var(--verde-neon);
		color: var(--verde-neon);
		box-shadow: 0 0 14px color-mix(in srgb, var(--verde-neon) 30%, transparent);
	}
}

.volver {
	align-self: center;
	margin-top: 1rem;
}

/* Botón "Ver colección" de la portada (usa el estilo de .tipo).
   La animación de entrada la lleva su contenedor .portada__acciones. */
.tipo.pista {
	margin-top: 0.5rem;
	text-decoration: none;
	border-color: var(--verde-neon);
}

.tipo.pista:focus-visible {
	background: var(--verde-neon);
	color: var(--negro);
}

@media (hover: hover) {
	.tipo.pista:hover {
		background: var(--verde-neon);
		color: var(--negro);
	}
}

/* ---------- Vitrina de fotos (Jeans y Bermudas) ---------- */
.vitrina {
	display: grid;
	justify-items: center;
	gap: 1.5rem;
}

.marco {
	position: relative;
	/* El ancho también depende de la ALTA de la ventana: en portátiles bajos
	   la foto no debe comerse el texto de abajo. 470px = todo lo demás
	   (título, botones, descripción y relleno). */
	width: min(80vw, 380px, max(200px, calc((100vh - 440px) * 0.8)));
	width: min(80vw, 380px, max(200px, calc((100dvh - 440px) * 0.8)));
	aspect-ratio: 4 / 5;
	border: 2px solid var(--verde-neon);
	border-radius: 12px;
	overflow: hidden;
	background: var(--negro);
	box-shadow: 0 0 18px var(--verde-neon), 0 0 0 10px var(--negro);
}

.foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	transition: opacity 0.3s ease;      /* al encenderse: 0.3 s */
}

/* Foto "apagada" durante el cambio: se apaga más rápido de lo que se enciende */
.foto.apagada {
	opacity: 0;
	transition-duration: 0.18s;
}

/* La silueta solo se ve si no hay foto (o si la foto no carga) */
.silueta {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
}

.marco.sin-foto .foto {
	display: none;
}

.marco.sin-foto .silueta {
	display: block;
}

.forma {
	fill: var(--verde-neon);
	fill-opacity: 0.08;
	stroke: var(--verde-neon);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Pantallas anchas: la descripción sigue ABAJO de la foto, pero el título,
   los botones y los espacios se compactan para que la foto crezca sin que
   la sección se salga de la pantalla (270 px = todo lo demás: relleno,
   título, botones, descripción y espacios, con un margen de seguridad). */
@media (min-width: 900px) {
	.categoria[data-lista] {
		padding-block: 1rem;
	}

	.categoria[data-lista] .categoria__titulo {
		font-size: clamp(2.5rem, 5vw, 3.5rem);
		margin-bottom: 1rem;
	}

	.categoria[data-lista] .tipos {
		margin-bottom: 1rem;
	}

	.vitrina {
		gap: 1rem;
	}

	.marco {
		width: min(80vw, 420px, max(220px, calc((100vh - var(--alto-encabezado) - 270px) * 0.8)));
		width: min(80vw, 420px, max(220px, calc((100dvh - var(--alto-encabezado) - 270px) * 0.8)));
	}

	.vitrina .descripcion {
		max-width: 60ch;
	}
}

/* ---------- Visor de gorras (zoom por zonas) ---------- */
.visor {
	position: relative;
	height: min(56vh, 520px, max(240px, calc(100vh - var(--alto-encabezado) - 250px)));
	height: min(56vh, 520px, max(240px, calc(100dvh - var(--alto-encabezado) - 250px)));
	aspect-ratio: 9 / 16;
	margin: 0 auto 1.5rem;
	border: 2px solid var(--verde-neon);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 18px var(--verde-neon), 0 0 0 10px var(--negro);
}

.visor__imagen {
	position: absolute;
	inset: 0;
	transform-origin: 0 0;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.visor__imagen img {
	display: block;
	width: 100%;
	height: 100%;
}

.zona {
	position: absolute;
	width: 34%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: 2px dashed var(--verde-neon);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.zona:focus-visible {
	opacity: 1;
	box-shadow: 0 0 14px var(--verde-neon);
}

.visor.ampliado .zona {
	display: none;
}

/* ---------- Ubicación (mapa) ---------- */
/* Misma estética que las fotos: borde verde con resplandor. El alto del
   mapa también depende del alto de la ventana (300px = título, texto,
   botón y espacios) para que la sección quepa en una pantalla. */
.ubicacion {
	display: grid;
	grid-template-columns: minmax(0, 1fr);	/* sin esto el mapa se encoge al ancho del texto */
	justify-items: center;
	align-content: center;
	gap: 1rem;
	text-align: center;
}

.ubicacion .categoria__titulo,
.ubicacion .descripcion {
	margin-bottom: 0;
}

.mapa {
	width: min(100%, 760px);
	height: min(52vh, 420px, max(220px, calc(100vh - var(--alto-encabezado) - 300px)));
	height: min(52vh, 420px, max(220px, calc(100dvh - var(--alto-encabezado) - 300px)));
	border: 2px solid var(--verde-neon);
	border-radius: 12px;
	overflow: hidden;
	background: var(--negro);
	box-shadow: 0 0 18px var(--verde-neon), 0 0 0 10px var(--negro);
}

.mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ubicacion .tipo {
	display: inline-block;
	text-decoration: none;
	margin-top: 0.5rem;
}

@media (hover: hover) {
	.ubicacion .tipo:hover {
		background: var(--verde-neon);
		border-color: var(--verde-neon);
		color: var(--negro);
	}
}

/* ---------- Celular: encabezado compacto, menú en una sola fila ---------- */
@media (max-width: 700px) {
	:root {
		--alto-encabezado: calc(40px + 1rem + 1px);
	}

	.encabezado {
		flex-wrap: nowrap;
		gap: 1rem;
		padding: 0.5rem 1rem;
	}

	.marca img {
		width: 40px;
		height: 40px;
	}

	.encabezado nav {
		flex: 1;
		min-width: 0;
	}

	.menu {
		flex-wrap: nowrap;
		gap: 1.5rem;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.menu::-webkit-scrollbar {
		display: none;
	}

	.menu a {
		white-space: nowrap;
	}

	/* Pastillas de tipo más compactas: con las de escritorio los cinco
	   tipos de Jeans se apilaban en tres filas y desbordaban la pantalla */
	.tipo {
		padding: 0.4rem 1rem;
		font-size: 1rem;
	}

	.tipos {
		gap: 0.5rem;
	}

	/* En pantallas bajas el título y el relleno respiran menos para que
	   la foto y la descripción sigan cabiendo en una sola pantalla */
	.categoria {
		padding: 1.25rem 1rem;
	}

	.categoria__titulo {
		margin-bottom: 1.25rem;
	}
}

/* ---------- Categorías sin fotos: aviso estilizado ---------- */
/* Mientras no lleguen las fotos, la sección muestra una camiseta de neón
   con el aviso, en vez de un texto suelto que parece roto. */
.proximamente {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	max-width: 420px;
	margin-inline: auto;
	padding: 2rem 1.5rem;
	border: 2px dashed color-mix(in srgb, var(--verde-neon) 55%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--verde-neon) 6%, transparent);
}

.proximamente__icono {
	width: clamp(48px, 12vw, 64px);
	height: auto;
	color: var(--verde-neon);
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--verde-neon) 50%, transparent));
}

.proximamente__nota {
	font-family: var(--fuente-titulo);
	font-size: clamp(1.5rem, 5vw, 2rem);
	color: var(--verde-neon);
}

/* ---------- Pie de página ---------- */
.pie {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	padding: 2.5rem 1.5rem 2rem;
	text-align: center;
	border-top: 1px solid color-mix(in srgb, var(--verde-neon) 30%, transparent);
	background: var(--negro);
}

.pie__marca {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--fuente-titulo);
	font-size: 1.15rem;
	letter-spacing: 0.03em;
	color: var(--blanco);
	text-decoration: none;
	transition: color 0.25s ease;
}

.pie__marca img {
	display: block;
	width: 44px;
	height: 44px;
}

.pie__marca:focus-visible {
	color: var(--verde-neon);
	outline: 2px solid var(--verde-neon);
	outline-offset: 4px;
	border-radius: 6px;
}

@media (hover: hover) {
	.pie__marca:hover {
		color: var(--verde-neon);
	}
}

.pie__direccion {
	font-size: 0.95rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--blanco) 80%, transparent);
}

.pie__horario {
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--blanco) 80%, transparent);
}

.pie__legal a {
	color: color-mix(in srgb, var(--blanco) 75%, transparent);
	font-size: 0.9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.25s ease;
}

.pie__legal a:focus-visible {
	color: var(--verde-neon);
	outline: 2px solid var(--verde-neon);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (hover: hover) {
	.pie__legal a:hover {
		color: var(--verde-neon);
	}
}

/* En el pie las redes no llevan la animación de entrada de la portada */
.pie .redes {
	animation: none;
	margin-top: 0;
}

/* Computador: el pie se organiza en columnas, en vez de una sola fila apilada */
@media (min-width: 820px) {
	.pie {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"marca direccion horario"
			"redes redes redes"
			"legal legal copy";
		justify-items: start;
		gap: 1.5rem 2rem;
		text-align: left;
		padding: 3rem 2.5rem 2rem;
		max-width: 1100px;
		margin: 0 auto;
		width: 100%;
	}

	.pie__marca { grid-area: marca; }
	.pie__direccion { grid-area: direccion; }
	.pie__horario { grid-area: horario; }
	.pie .redes { grid-area: redes; justify-content: flex-start; }
	.pie__legal { grid-area: legal; justify-self: start; }
	.pie__copy { grid-area: copy; justify-self: end; }
}

.pie__copy {
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--blanco) 55%, transparent);
}

/* ---------- Contacto: WhatsApp, horario y listas sin JavaScript ---------- */
.horario {
	font-size: 1.05rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--blanco) 85%, transparent);
}

/* Lista que se muestra solo cuando NO hay JavaScript (dentro de <noscript>) */
.lista-sin-js {
	list-style: none;
	padding: 0;
	max-width: 46ch;
	margin: 0 auto 1.25rem;
	display: grid;
	gap: 0.6rem;
	text-align: left;
}

.lista-sin-js li {
	padding: 0.65rem 0.95rem;
	border: 1px solid color-mix(in srgb, var(--verde-neon) 35%, transparent);
	border-radius: 10px;
	line-height: 1.45;
}

/* Botón flotante de WhatsApp: siempre visible, abajo a la derecha */
.whatsapp-flotante {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;                 /* debajo de la pantalla de entrada (100) */
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25d366;        /* verde oficial de WhatsApp */
	color: var(--negro);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-flotante svg {
	display: block;
}

.whatsapp-flotante:focus-visible {
	outline: 3px solid var(--verde-neon);
	outline-offset: 4px;
}

@media (hover: hover) {
	.whatsapp-flotante:hover {
		transform: translateY(-3px) scale(1.05);
		box-shadow: 0 10px 26px rgba(37, 211, 102, 0.5);
	}
}

.whatsapp-flotante:active {
	transform: scale(0.95);
}

/* ---------- Barra fija de WhatsApp (solo celular) ---------- */
/* En pantallas pequeñas reemplaza al botón flotante: la compra queda
   siempre a un toque y no tapa el contenido. */
.barra-wa {
	display: none;
}

@media (max-width: 760px) {
	.barra-wa {
		display: grid;
		place-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 0.95rem 1rem calc(0.95rem + env(safe-area-inset-bottom));
		background: #25d366;
		color: var(--negro);
		font-family: var(--fuente-titulo);
		font-size: 1.2rem;
		text-decoration: none;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
	}

	.barra-wa:focus-visible {
		outline: 3px solid var(--verde-neon);
		outline-offset: -6px;
	}

	.whatsapp-flotante {
		display: none;
	}

	/* Deja aire para que la barra no tape el final de la página */
	main {
		padding-bottom: 4.5rem;
	}
}

/* ---------- Página de privacidad (privacidad.html) ---------- */
.legal {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 3.5rem;
	text-align: left;
	line-height: 1.6;
}

.legal h1 {
	font-family: var(--fuente-titulo);
	font-size: clamp(2rem, 6vw, 3rem);
	color: var(--verde-neon);
	text-align: center;
	margin-bottom: 1.5rem;
}

.legal h2 {
	font-family: var(--fuente-titulo);
	font-size: 1.5rem;
	color: var(--verde-neon);
	margin: 1.75rem 0 0.5rem;
}

.legal p,
.legal li {
	color: color-mix(in srgb, var(--blanco) 88%, transparent);
}

.legal ul {
	padding-left: 1.25rem;
	margin: 0.5rem 0;
}

.legal .actualizado {
	margin-top: 2rem;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--blanco) 60%, transparent);
}

/* ---------- Barra de progreso de lectura ---------- */
.progreso {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 3px;
	background: var(--verde-neon);
	box-shadow: 0 0 10px var(--verde-neon);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* ---------- Selección de texto y barra de scroll con la marca ---------- */
::selection {
	background: var(--verde-neon);
	color: var(--negro);
}

html {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--verde-neon) 55%, transparent) var(--negro);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--negro);
}

::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--verde-neon) 55%, transparent);
	border-radius: 999px;
	border: 2px solid var(--negro);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--verde-neon);
}

/* ---------- Portada: bajada de texto y acciones ---------- */
.portada__bajada {
	max-width: 46ch;
	font-size: 1.05rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--blanco) 85%, transparent);
	animation: aparecer 0.8s ease 1.15s both;
}

.portada__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1rem;
	animation: aparecer 0.8s ease 1.4s both;
}

/* Botón verde estilo WhatsApp: la acción de venta principal */
.tipo--wa {
	background: var(--verde-neon);
	border-color: var(--verde-neon);
	color: var(--negro);
	text-decoration: none;
	box-shadow: 0 0 18px color-mix(in srgb, var(--verde-neon) 40%, transparent);
}

.tipo--wa:focus-visible {
	outline: 2px solid var(--blanco);
	outline-offset: 3px;
}

@media (hover: hover) {
	.tipo--wa:hover {
		background: var(--blanco);
		border-color: var(--blanco);
		box-shadow: 0 0 26px color-mix(in srgb, var(--verde-neon) 60%, transparent);
	}
}

.tipo:active {
	transform: translateY(1px);
}

/* ---------- Franja de confianza (portada) ---------- */
.confianza {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
	margin-top: 1.25rem;
	padding: 0.9rem 1.5rem;
	list-style: none;
	border: 1px solid color-mix(in srgb, var(--verde-neon) 25%, transparent);
	border-radius: 18px;
	background: color-mix(in srgb, var(--negro) 55%, transparent);
	backdrop-filter: blur(6px);
	animation: aparecer 0.8s ease 1.8s both;
}

.confianza li {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.92rem;
	color: color-mix(in srgb, var(--blanco) 85%, transparent);
}

.confianza svg {
	flex: none;
	color: var(--verde-neon);
}

@media (hover: hover) {
	.confianza li {
		transition: color 0.25s ease, transform 0.25s ease;
	}

	.confianza li:hover {
		color: var(--verde-neon);
		transform: translateY(-2px);
	}
}

/* ---------- Cintas cruzadas (antes "ticker") ---------- */
/* Dos cintas tipo "cinta de obra": una verde sólida y otra de contorno,
   inclinadas en sentidos opuestos y deslizándose al revés una de otra. */
.cintas {
	position: relative;
	z-index: 2;
	height: 7.5rem;
	margin-block: 1rem;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.cinta {
	position: absolute;
	left: -5%;
	width: 110%;
	overflow: hidden;
	padding: 0.7rem 0;
}

.cinta--a {
	background: var(--verde-neon);
	color: var(--negro);
	transform: rotate(-3deg);
	box-shadow: 0 0 30px color-mix(in srgb, var(--verde-neon) 45%, transparent);
	z-index: 1;
}

.cinta--b {
	background: var(--negro);
	color: var(--verde-neon);
	border-block: 2px solid var(--verde-neon);
	transform: rotate(2.5deg);
}

.cinta__pista {
	display: flex;
	width: max-content;
	font-family: var(--fuente-titulo);
	font-size: 1.2rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	animation: deslizar 30s linear infinite;
}

.cinta--b .cinta__pista {
	animation-direction: reverse;
	animation-duration: 36s;
}

.cinta__pista span {
	padding-right: 2rem;
}

.cintas:hover .cinta__pista {
	animation-play-state: paused;
}

@keyframes deslizar {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------- Bloques de venta (cómo comprar y preguntas) ---------- */
.bloque {
	max-width: 900px;
	margin: 0 auto;
	padding: 4rem 2rem;
	display: grid;
	justify-items: center;
	text-align: center;
}

.bloque .descripcion {
	margin-bottom: 2.5rem;
}

.pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	width: 100%;
	margin-bottom: 2.5rem;
	padding: 0;
	list-style: none;
	text-align: left;
}

.paso {
	padding: 1.5rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--verde-neon) 28%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--blanco) 4%, transparent);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
	.paso:hover {
		transform: translateY(-5px);
		border-color: var(--verde-neon);
		box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 18px color-mix(in srgb, var(--verde-neon) 25%, transparent);
	}
}

.paso__numero {
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: 0.9rem;
	border: 2px solid var(--verde-neon);
	border-radius: 50%;
	font-family: var(--fuente-titulo);
	font-size: 1.25rem;
	color: var(--verde-neon);
	box-shadow: 0 0 12px color-mix(in srgb, var(--verde-neon) 40%, transparent);
}

.paso__titulo {
	font-family: var(--fuente-titulo);
	font-size: 1.3rem;
	color: var(--blanco);
	margin-bottom: 0.5rem;
}

.paso p {
	line-height: 1.55;
	font-size: 0.98rem;
	color: color-mix(in srgb, var(--blanco) 80%, transparent);
}

/* ---------- Preguntas frecuentes (acordeón) ---------- */
.faq {
	display: grid;
	gap: 0.85rem;
	width: 100%;
	max-width: 680px;
	text-align: left;
}

.faq__item {
	border: 1px solid color-mix(in srgb, var(--verde-neon) 28%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--blanco) 4%, transparent);
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq__item[open] {
	border-color: var(--verde-neon);
	box-shadow: 0 0 16px color-mix(in srgb, var(--verde-neon) 22%, transparent);
}

.faq__item summary {
	position: relative;
	cursor: pointer;
	padding: 1.05rem 3rem 1.05rem 1.25rem;
	font-family: var(--fuente-titulo);
	font-size: 1.15rem;
	list-style: none;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	content: "+";
	position: absolute;
	right: 1.15rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--verde-neon);
	font-family: var(--fuente-texto);
	font-size: 1.6rem;
	line-height: 1;
	transition: transform 0.25s ease;
}

.faq__item[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.faq__item summary:focus-visible {
	outline: 2px solid var(--verde-neon);
	outline-offset: -4px;
	border-radius: 14px;
}

@media (hover: hover) {
	.faq__item summary:hover {
		color: var(--verde-neon);
	}
}

.faq__item p {
	padding: 0 1.25rem 1.25rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--blanco) 85%, transparent);
}

/* Movimiento de las preguntas: la respuesta se despliega en altura,
   el + rebota, una barra verde se desliza y la tarjeta se ilumina. */
:root {
	interpolate-size: allow-keywords;
}

.faq__item {
	transition: border-color 0.3s ease, box-shadow 0.4s ease, background-color 0.3s ease;
}

@media (hover: hover) {
	.faq__item:hover {
		border-color: color-mix(in srgb, var(--verde-neon) 60%, transparent);
		background: color-mix(in srgb, var(--blanco) 7%, transparent);
		box-shadow: 0 0 14px color-mix(in srgb, var(--verde-neon) 14%, transparent);
	}
}

/* Barra verde a la izquierda que crece al abrir */
.faq__item summary::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22%;
	bottom: 22%;
	width: 3px;
	background: var(--verde-neon);
	border-radius: 3px;
	transform: scaleY(0);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq__item[open] summary::before {
	transform: scaleY(1);
}

/* El + rebota al girar */
.faq__item summary::after {
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* La respuesta se despliega en altura */
.faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		content-visibility 0.45s allow-discrete;
}

.faq__item[open]::details-content {
	block-size: auto;
}

/* El texto entra con un leve desvanecido al abrir */
.faq__item[open] p {
	animation: faq-abrir 0.4s ease-out both;
}

@keyframes faq-abrir {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.faq__item p a {
	color: var(--verde-neon);
}

/* ---------- Cierre (llamado final a WhatsApp) ---------- */
.cierre {
	max-width: 760px;
	margin: 2rem auto 3rem;
	padding: 3rem 2rem;
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	text-align: center;
	border: 2px solid color-mix(in srgb, var(--verde-neon) 45%, transparent);
	border-radius: 20px;
	background:
		radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--verde-neon) 14%, transparent) 0%, transparent 65%),
		color-mix(in srgb, var(--blanco) 3%, transparent);
}

.cierre__titulo {
	font-family: var(--fuente-titulo);
	font-size: clamp(2rem, 6vw, 3rem);
	color: var(--verde-neon);
	text-shadow: 0 0 26px color-mix(in srgb, var(--verde-neon) 45%, transparent);
}

.cierre .descripcion {
	margin: 0;
}

/* ---------- Botón de WhatsApp del encabezado (pantallas anchas) ---------- */
.encabezado__wa {
	padding: 0.45rem 1.25rem;
	font-size: 1rem;
	background: var(--verde-neon);
	border-color: var(--verde-neon);
	color: var(--negro);
	text-decoration: none;
	box-shadow: 0 0 14px color-mix(in srgb, var(--verde-neon) 40%, transparent);
}

@media (hover: hover) {
	.encabezado__wa:hover {
		background: var(--blanco);
		border-color: var(--blanco);
	}
}

@media (max-width: 900px) {
	.encabezado__wa {
		display: none;
	}
}

/* ---------- Botón flotante: anillo que pulsa y etiqueta ---------- */
.whatsapp-flotante::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(37, 211, 102, 0.6);
	pointer-events: none;
	animation: anillo-wa 2.8s ease-out infinite;
}

@keyframes anillo-wa {
	0%   { transform: scale(1); opacity: 0.8; }
	70%  { transform: scale(1.75); opacity: 0; }
	100% { transform: scale(1.75); opacity: 0; }
}

.whatsapp-flotante__texto {
	position: absolute;
	right: calc(100% + 0.65rem);
	white-space: nowrap;
	padding: 0.35rem 0.75rem;
	border-radius: 8px;
	background: var(--verde-neon);
	color: var(--negro);
	font-family: var(--fuente-titulo);
	font-size: 0.95rem;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

@media (hover: hover) {
	.whatsapp-flotante:hover .whatsapp-flotante__texto {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Revelado al hacer scroll ---------- */
/* El contenido solo se oculta cuando hay JavaScript (scripting: enabled):
   sin JS, o con movimiento reducido, todo se ve de una. */
@media (scripting: enabled) {
	.reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.reveal.visible {
		opacity: 1;
		transform: none;
	}

	/* Las tarjetas de pasos entran una tras otra */
	.pasos .paso:nth-child(2) {
		transition-delay: 0.12s;
	}

	.pasos .paso:nth-child(3) {
		transition-delay: 0.24s;
	}
}

/* ---------- Celular: pasos apilados y cinta más pequeña ---------- */
@media (max-width: 760px) {
	.pasos {
		grid-template-columns: minmax(0, 1fr);
	}

	.cinta__pista {
		font-size: 1rem;
	}

	.cintas {
		height: 6rem;
	}

	.confianza {
		gap: 0.55rem 1.15rem;
		padding: 0.8rem 1rem;
	}
}

/* ---------- Galería de fotos (bermudas) ---------- */
.galeria__grupos {
	display: grid;
	gap: 3rem;
	width: 100%;
}

.galeria__grupo-titulo {
	font-family: var(--fuente-titulo);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	color: var(--verde-neon);
	margin-bottom: 0.35rem;
	text-shadow: 0 0 20px color-mix(in srgb, var(--verde-neon) 35%, transparent);
}

.galeria__grupo-nota {
	color: color-mix(in srgb, var(--blanco) 75%, transparent);
	margin-bottom: 1.25rem;
}

.galeria__cuadricula {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
}

.galeria__foto {
	padding: 0;
	border: 2px solid color-mix(in srgb, var(--verde-neon) 35%, transparent);
	border-radius: 12px;
	overflow: hidden;
	background: var(--negro);
	cursor: zoom-in;
	aspect-ratio: 4 / 5;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.galeria__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.galeria__foto:focus-visible {
	outline: 2px solid var(--verde-neon);
	outline-offset: 3px;
}

@media (hover: hover) {
	.galeria__foto:hover {
		transform: translateY(-4px);
		border-color: var(--verde-neon);
		box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 16px color-mix(in srgb, var(--verde-neon) 25%, transparent);
	}

	.galeria__foto:hover img {
		transform: scale(1.06);
	}
}

/* ---------- Enlace a las variedades (index → bermudas.html) ---------- */
.enlace-variedades {
	display: grid;
	justify-items: center;
	gap: 1.1rem;
	width: 100%;
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.enlace-variedades__texto {
	font-family: var(--fuente-titulo);
	font-size: clamp(1.4rem, 4vw, 1.9rem);
	color: var(--verde-neon);
	text-shadow: 0 0 20px color-mix(in srgb, var(--verde-neon) 35%, transparent);
}

/* ---------- Visor de fotos de la galería ---------- */
.visor-foto {
	position: fixed;
	inset: 0;
	z-index: 120;				/* encima de todo, incluso de la entrada */
	display: grid;
	place-items: center;
	padding: 1rem;
}

.visor-foto[hidden] {
	display: none;
}

.visor-foto__fondo {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--negro) 88%, transparent);
	backdrop-filter: blur(4px);
	cursor: zoom-out;
}

.visor-foto__caja {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.9rem;
	justify-items: center;
	width: min(92vw, 540px);
	max-height: calc(100dvh - 2rem);
	overflow: auto;
	padding: 1rem;
	border: 2px solid var(--verde-neon);
	border-radius: 16px;
	background: var(--negro);
	box-shadow: 0 0 30px color-mix(in srgb, var(--verde-neon) 35%, transparent);
}

.visor-foto__cerrar {
	justify-self: end;
	font-size: 0.95rem;
}

.visor-foto__imagen {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.visor-foto__pie {
	display: grid;
	gap: 0.9rem;
	justify-items: center;
	text-align: center;
}

.visor-foto__texto {
	line-height: 1.5;
	color: color-mix(in srgb, var(--blanco) 85%, transparent);
}

/* ---------- Movimiento reducido (accesibilidad) ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.menu a,
	.menu a::after,
	.tipo,
	.zona,
	.foto,
	.whatsapp-flotante,
	.whatsapp-flotante__texto,
	.galeria__foto,
	.galeria__foto img,
	.paso,
	.faq__item,
	.faq__item summary::after,
	.visor__imagen {
		transition: none;
	}

	.faq__item[open] p,
	.faq__item summary::before,
	.faq__item::details-content {
		animation: none;
		transition: none;
	}

	.portada::before,
	.logo,
	.eslogan,
	.portada__bajada,
	.portada__acciones,
	.tipo.pista,
	.redes,
	.confianza,
	.cinta__pista,
	.whatsapp-flotante::before {
		animation: none;
	}

	/* Nada se oculta al hacer scroll: todo se ve de una */
	.reveal {
		opacity: 1;
		transform: none;
	}

	/* Sin movimiento no hay entrada: la web aparece directa */
	.con-entrada .entrada {
		display: none;
	}

	.con-entrada body {
		overflow: visible;
	}
}


/* ==========================================================
   REDISEÑO 2.0 · más movimiento, texturas y carácter urbano
   Todo lo de abajo es decoración encima del diseño base:
   si algo falla, la web sigue funcionando igual.
   Orden: utilidades → grano → encabezado → portada → títulos
          → marcos con cinta → próximamente → pasos → preguntas
          → cierre → muro → botones → galería → cursor → confeti
          → celular → movimiento reducido
   ========================================================== */

@property --angulo {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* Ningún adorno puede crear scroll horizontal (clip no rompe el sticky) */
body {
	overflow-x: clip;
}

@keyframes girar {
	to { transform: rotate(360deg); }
}

@keyframes flotar-suave {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -14px; }
}

/* ---------- Grano de película sobre toda la web ---------- */
body::after {
	content: "";
	position: fixed;
	inset: -50%;
	z-index: 95;				/* debajo de la entrada (100) y del visor (120) */
	pointer-events: none;
	background: url("../img/decor/ruido.svg");
	opacity: 0.06;
	animation: grano 0.9s steps(4) infinite;
}

@keyframes grano {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-4%, 3%); }
	50%  { transform: translate(3%, -4%); }
	75%  { transform: translate(-2%, -5%); }
	100% { transform: translate(0, 0); }
}

/* ---------- Encabezado: línea de neón que barre y sombra al bajar ---------- */
.encabezado {
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.encabezado::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--verde-neon), transparent) no-repeat;
	background-size: 40% 100%;
	animation: barrido 5s linear infinite;
}

@keyframes barrido {
	from { background-position: -100% 0; }
	to   { background-position: 200% 0; }
}

.encabezado--scroll {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 1px 18px color-mix(in srgb, var(--verde-neon) 18%, transparent);
}

.marca img {
	transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

@media (hover: hover) {
	.marca:hover img {
		transform: rotate(360deg) scale(1.08);
		filter: drop-shadow(0 0 10px var(--verde-neon));
	}
}

/* Subrayado del menú con forma de pincelada en vez de una barra recta */
.menu a::after {
	height: 7px;
	bottom: -2px;
	border-radius: 0;
	-webkit-mask: url("../img/decor/pincelada.svg") center / 100% 100% no-repeat;
	mask: url("../img/decor/pincelada.svg") center / 100% 100% no-repeat;
}

/* ---------- Portada ---------- */
/* Palabra gigante de contorno, flotando detrás de todo */
.portada__palabra {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-4deg);
	font-family: var(--fuente-titulo);
	font-size: clamp(6rem, 26vw, 24rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px color-mix(in srgb, var(--verde-neon) 16%, transparent);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	animation: palabra-flotar 14s ease-in-out infinite;
}

@keyframes palabra-flotar {
	0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
	50%      { transform: translate(-47%, -53%) rotate(-1deg); }
}

/* El logo con un anillo de texto que gira y una órbita punteada */
.logo-escena {
	--tam-logo: min(56vw, 32vh, 330px);
	position: relative;
	display: grid;
	place-items: center;
	width: calc(var(--tam-logo) * 1.34);
	aspect-ratio: 1;
	margin-block: -0.75rem;
}

.logo-escena::before {
	content: "";
	position: absolute;
	inset: 9%;
	border-radius: 50%;
	border: 1.5px dashed color-mix(in srgb, var(--verde-neon) 35%, transparent);
	animation: girar 40s linear infinite reverse;
}

.logo-escena .logo {
	position: relative;
	width: var(--tam-logo);
}

.portada .logo {
	animation:
		entrada-logo 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both,
		logo-flota 6s ease-in-out 1.2s infinite;
}

@keyframes logo-flota {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-10px) rotate(-1.5deg); }
}

.anillo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	animation: girar 26s linear infinite;
}

.anillo text {
	font-family: var(--fuente-titulo);
	font-size: 11px;
	fill: var(--verde-neon);
	letter-spacing: 1px;
}

/* Pegatinas: entran rebotando, flotan y se apartan un poco del cursor */
.pegatinas {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.pegatina {
	--r: -6deg;
	--prof: 1;
	--d: 1.9s;
	position: absolute;
	padding: 0.45rem 0.95rem;
	border-radius: 6px;
	font-family: var(--fuente-titulo);
	font-size: clamp(0.9rem, 1.3vw, 1.15rem);
	white-space: nowrap;
	background: var(--verde-neon);
	color: var(--negro);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 24px color-mix(in srgb, var(--verde-neon) 30%, transparent);
	transform: rotate(var(--r));
	translate: calc(var(--px, 0) * var(--prof) * 1px) calc(var(--py, 0) * var(--prof) * 1px);
	transition: translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	animation:
		pegatina-entra 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) both,
		pegatina-flota 6s ease-in-out calc(var(--d) + 0.7s) infinite;
}

@keyframes pegatina-entra {
	from { opacity: 0; transform: rotate(calc(var(--r) - 40deg)) scale(0); }
	to   { opacity: 1; transform: rotate(var(--r)) scale(1); }
}

@keyframes pegatina-flota {
	0%, 100% { transform: rotate(var(--r)) translateY(0); }
	50%      { transform: rotate(calc(var(--r) + 4deg)) translateY(-10px); }
}

.pegatina--1 { top: 13%; left: 7%; --r: -9deg; --prof: 1.4; --d: 1.9s; }
.pegatina--2 {
	top: 20%; right: 6%; --r: 7deg; --prof: -1; --d: 2.05s;
	background: var(--negro);
	color: var(--verde-neon);
	border: 2px dashed var(--verde-neon);
}
.pegatina--3 {
	bottom: 27%; left: 11%; --r: -14deg; --prof: 2; --d: 2.2s;
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	padding: 0;
	border-radius: 50%;
	font-size: 2.2rem;
}
.pegatina--4 {
	bottom: 31%; right: 10%; --r: -5deg; --prof: 1.2; --d: 2.35s;
	background: var(--blanco);
}
.pegatina--5 {
	top: 58%; left: 3.5%; --r: 4deg; --prof: -1.6; --d: 2.5s;
	background: transparent;
	color: var(--blanco);
	border: 2px solid var(--blanco);
	box-shadow: none;
}
.pegatina--6 {
	top: 10%; right: 25%; --r: 0deg; --prof: 2.4; --d: 2.65s;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--verde-neon);
	font-size: 2.4rem;
	text-shadow: 0 0 16px var(--verde-neon);
}

/* Eslogan con un "glitch" de neón cada pocos segundos */
.eslogan__animado {
	position: relative;
}

.eslogan__animado::before,
.eslogan__animado::after {
	content: attr(data-texto);
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.eslogan__animado::before {
	color: var(--blanco);
	animation: glitch-a 7s steps(1) 3s infinite;
}

.eslogan__animado::after {
	color: #0a7d0a;
	animation: glitch-b 7s steps(1) 3s infinite;
}

@keyframes glitch-a {
	0%, 91%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
	92% { opacity: 0.85; transform: translate(-4px, 1px); clip-path: inset(8% 0 58% 0); }
	94% { opacity: 0.85; transform: translate(3px, -1px); clip-path: inset(62% 0 6% 0); }
	96% { opacity: 0.7;  transform: translate(-2px, 0);   clip-path: inset(30% 0 42% 0); }
}

@keyframes glitch-b {
	0%, 91%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
	93% { opacity: 0.9; transform: translate(4px, 0);  clip-path: inset(45% 0 20% 0); }
	95% { opacity: 0.9; transform: translate(-3px, 1px); clip-path: inset(10% 0 70% 0); }
}

/* Indicador para bajar (un mouse con la ruedita animada) */
.bajar {
	position: absolute;
	left: 50%;
	bottom: 1.1rem;
	translate: -50% 0;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	color: var(--verde-neon);
	text-decoration: none;
	font-family: var(--fuente-titulo);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	animation: aparecer 0.8s ease 2.6s both;
}

.bajar__flecha {
	position: relative;
	width: 22px;
	height: 34px;
	border: 2px solid var(--verde-neon);
	border-radius: 12px;
	box-shadow: 0 0 12px color-mix(in srgb, var(--verde-neon) 40%, transparent);
}

.bajar__flecha::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	width: 4px;
	height: 7px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--verde-neon);
	animation: ruedita 1.6s ease-in-out infinite;
}

@keyframes ruedita {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(12px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

.bajar:focus-visible {
	outline: 2px solid var(--verde-neon);
	outline-offset: 6px;
	border-radius: 8px;
}

@media (min-height: 960px) and (min-width: 701px) {
	.portada {
		padding-bottom: 4.5rem;
	}
}

@media (max-height: 959px), (max-width: 700px) {
	.bajar {
		display: none;
	}
}

/* ---------- Títulos: número de sección, goteo y revelado "spray" ---------- */
.categoria__titulo,
.cierre__titulo {
	position: relative;
	align-self: center;
}

/* Etiqueta con el número de sección encima de cada título (solo inicio) */
.inicio main {
	counter-reset: seccion;
}

.inicio .categoria > .categoria__titulo::before,
.inicio .bloque > .categoria__titulo::before {
	counter-increment: seccion;
	content: counter(seccion, decimal-leading-zero);
	display: table;
	margin: 0 auto 0.6rem;
	padding: 0.2rem 0.55rem;
	border-radius: 4px;
	font-family: var(--fuente-texto);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	color: var(--negro);
	background: var(--verde-neon);
	text-shadow: none;
	transform: rotate(-6deg);
	box-shadow: 0 0 16px color-mix(in srgb, var(--verde-neon) 45%, transparent);
}

/* Pincelada con goteos debajo de cada título */
.categoria__titulo::after,
.cierre__titulo::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 100%;
	height: 0.42em;
	margin-top: -0.1em;
	background: var(--verde-neon);
	opacity: 0.85;
	pointer-events: none;
	-webkit-mask: url("../img/decor/goteo.svg") center / 100% 100% no-repeat;
	mask: url("../img/decor/goteo.svg") center / 100% 100% no-repeat;
}

/* La clase la pone main.js: sin JavaScript los títulos se ven de una */
.titulo-spray {
	clip-path: inset(-40% 100% -70% -10%);
	transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.titulo-spray.pintado {
	clip-path: inset(-40% -10% -70% -10%);
}

.titulo-spray::after {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.3s ease 0.8s;
}

.titulo-spray.pintado::after {
	clip-path: inset(0);
}

/* ---------- Marcos de fotos con cinta adhesiva, sello y brillo 3D ---------- */
.marco-envoltura {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.marco-envoltura--visor {
	margin-bottom: 1.5rem;
}

.marco-envoltura--visor .visor {
	margin: 0;
}

.cinta-adhesiva {
	position: absolute;
	z-index: 3;
	top: 0;
	width: 78px;
	height: 22px;
	background: color-mix(in srgb, #ecebd8 78%, transparent);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
	clip-path: polygon(3% 0, 97% 0, 100% 20%, 96% 40%, 100% 60%, 96% 80%, 100% 100%, 3% 100%, 0 80%, 4% 60%, 0 40%, 4% 20%);
	pointer-events: none;
}

.cinta-adhesiva--izq {
	left: -26px;
	transform: rotate(-26deg);
}

.cinta-adhesiva--der {
	right: -26px;
	transform: rotate(28deg);
}

.sello {
	position: absolute;
	z-index: 4;
	right: -24px;
	bottom: 14%;
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	text-align: center;
	font-family: var(--fuente-titulo);
	font-size: 0.95rem;
	line-height: 1;
	color: var(--negro);
	background: var(--verde-neon);
	box-shadow:
		0 0 0 4px var(--negro),
		0 0 0 6px var(--verde-neon),
		0 12px 26px rgba(0, 0, 0, 0.55);
	pointer-events: none;
	transform: rotate(-14deg);
	animation: sello-latido 3.4s ease-in-out infinite;
}

@keyframes sello-latido {
	0%, 100% { transform: rotate(-14deg) scale(1); }
	50%      { transform: rotate(-6deg) scale(1.08); }
}

/* Brillo que sigue al cursor (las variables las pone main.js) */
.marco::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.22), transparent 55%);
	opacity: var(--brillo, 0);
	transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
	.inclinable {
		transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
		transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.inclinable.inclinando {
		transition-duration: 0.12s;
	}
}

/* Cambio de foto: se desenfoca y crece un poco al salir, y vuelve nítida */
.foto {
	transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

.foto.apagada {
	transform: scale(1.07);
	filter: blur(6px) saturate(1.8);
}

.tipo.activo {
	animation: pastilla-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pastilla-pop {
	0%   { transform: scale(0.9); }
	60%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}

/* ---------- Próximamente: cinta de obra y signos flotando ---------- */
.proximamente {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
	.proximamente:hover {
		border-color: var(--verde-neon);
		box-shadow: 0 0 26px color-mix(in srgb, var(--verde-neon) 22%, transparent);
	}
}

.cinta-obra {
	position: absolute;
	top: 28px;
	right: -52px;
	width: 200px;
	padding: 0.42rem 0;
	overflow: hidden;
	transform: rotate(38deg);
	text-align: center;
	white-space: nowrap;
	font-family: var(--fuente-titulo);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--negro);
	background: var(--verde-neon);
	box-shadow: 0 0 18px color-mix(in srgb, var(--verde-neon) 45%, transparent);
}

.cinta-obra::before,
.cinta-obra::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	background: repeating-linear-gradient(90deg, var(--negro) 0 10px, transparent 10px 20px);
	background-size: 20px 100%;
	animation: rayas 0.9s linear infinite;
}

.cinta-obra::before { top: 0; }
.cinta-obra::after  { bottom: 0; animation-direction: reverse; }

@keyframes rayas {
	to { background-position: 20px 0; }
}

.proximamente__signo {
	position: absolute;
	z-index: -1;
	font-family: var(--fuente-titulo);
	font-size: 5.5rem;
	line-height: 1;
	color: var(--verde-neon);
	opacity: 0.16;
	pointer-events: none;
	animation: flotar-suave 7s ease-in-out infinite;
}

.proximamente__signo--1 { left: 6%; bottom: 2%; rotate: -18deg; }
.proximamente__signo--2 { right: 9%; top: 42%; font-size: 3.4rem; rotate: 16deg; animation-delay: -3.5s; }

.proximamente__icono {
	animation: icono-flota 4s ease-in-out infinite;
}

@keyframes icono-flota {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50%      { transform: translateY(-8px) rotate(4deg); }
}

/* ---------- Cómo comprar: línea que se dibuja y números que giran ---------- */
.pasos {
	position: relative;
	counter-reset: paso;
}

.paso {
	position: relative;
	z-index: 1;
	overflow: hidden;
	isolation: isolate;
	counter-increment: paso;
	background: #0b0f0b;
}

/* Número gigante de contorno al fondo de cada tarjeta */
.paso::after {
	content: counter(paso);
	position: absolute;
	right: 0.6rem;
	bottom: -1.6rem;
	z-index: -1;
	font-family: var(--fuente-titulo);
	font-size: 7.5rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--verde-neon) 22%, transparent);
	pointer-events: none;
	transition: -webkit-text-stroke-color 0.3s ease, transform 0.4s ease;
}

.paso:hover::after {
	-webkit-text-stroke-color: color-mix(in srgb, var(--verde-neon) 55%, transparent);
	transform: translateY(-6px) rotate(-4deg);
}

/* Brillo del cursor en tarjetas y fotos de la galería */
.paso::before,
.galeria__foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.14), transparent 55%);
	opacity: var(--brillo, 0);
	transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
	.paso.inclinable:hover {
		transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
	}

	.galeria__foto.inclinable:hover {
		transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
	}
}

@media (min-width: 761px) {
	.pasos::before {
		content: "";
		position: absolute;
		left: 6%;
		right: 6%;
		top: 2.7rem;
		height: 2px;
		z-index: 0;
		background: repeating-linear-gradient(90deg, var(--verde-neon) 0 10px, transparent 10px 20px);
		opacity: 0.7;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
	}

	.pasos.dibujado::before {
		transform: scaleX(1);
	}
}

.paso.visible .paso__numero {
	animation: numero-gira 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes numero-gira {
	from { transform: rotate(-200deg) scale(0); }
	to   { transform: none; }
}

/* ---------- Preguntas: la tarjeta se corre un poco al pasar ---------- */
.faq__item {
	transition: border-color 0.3s ease, box-shadow 0.4s ease, background-color 0.3s ease, translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	.faq__item:hover {
		translate: 6px 0;
	}
}

/* ---------- Cierre: borde de neón que gira y signos flotando ---------- */
.cierre {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 2px solid transparent;
	background:
		radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--verde-neon) 16%, transparent) 0%, transparent 65%) padding-box,
		repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in srgb, var(--verde-neon) 5%, transparent) 38px 40px) padding-box,
		linear-gradient(#060906, #060906) padding-box,
		conic-gradient(from var(--angulo),
			color-mix(in srgb, var(--verde-neon) 25%, transparent) 0deg 200deg,
			var(--verde-neon) 260deg,
			color-mix(in srgb, var(--verde-neon) 25%, transparent) 320deg) border-box;
	animation: borde-gira 5s linear infinite;
}

@keyframes borde-gira {
	to { --angulo: 360deg; }
}

.cierre__signo {
	position: absolute;
	z-index: -1;
	font-family: var(--fuente-titulo);
	line-height: 1;
	color: var(--verde-neon);
	opacity: 0.2;
	pointer-events: none;
	animation: flotar-suave 6s ease-in-out infinite;
}

.cierre__signo--1 { left: 6%;  top: 12%;   font-size: 4.5rem; rotate: -20deg; }
.cierre__signo--2 { right: 7%; bottom: 10%; font-size: 5.5rem; rotate: 18deg; animation-delay: -2s; }
.cierre__signo--3 { right: 14%; top: 14%;  font-size: 2.2rem; animation-delay: -4s; }
.cierre__signo--4 { left: 14%; bottom: 8%; font-size: 2.6rem; rotate: 10deg; animation-delay: -1s; }

/* ---------- Muro: letras gigantes de contorno sobre el pie ---------- */
.muro {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 1.5rem 0 0.75rem;
}

.muro__pista {
	display: flex;
	width: max-content;
	font-family: var(--fuente-titulo);
	font-size: clamp(3.5rem, 11vw, 9rem);
	line-height: 1.05;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--verde-neon) 50%, transparent);
	animation: deslizar 45s linear infinite;
	transition: color 0.5s ease;
}

.muro__pista span {
	padding-right: 3rem;
}

@media (hover: hover) {
	.muro:hover .muro__pista {
		color: color-mix(in srgb, var(--verde-neon) 14%, transparent);
		animation-play-state: paused;
	}
}

/* ---------- Botones: destello que cruza y efecto imán ---------- */
.tipo {
	transition:
		background 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.whatsapp-flotante {
	transition: transform 0.25s ease, box-shadow 0.25s ease, translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tipo--wa {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

@media (max-width: 760px) {
	.barra-wa {
		overflow: hidden;
		isolation: isolate;
	}
}

.tipo--wa::after,
.barra-wa::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: destello 4s ease-in-out infinite;
}

@keyframes destello {
	0%, 65% { transform: translateX(-120%); }
	100%    { transform: translateX(120%); }
}

/* ---------- Galería de bermudas ---------- */
.galeria__foto {
	position: relative;
}

.galeria__num {
	position: absolute;
	z-index: 3;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.15rem 0.45rem;
	border: 1px solid var(--verde-neon);
	border-radius: 4px;
	font-family: var(--fuente-titulo);
	font-size: 0.8rem;
	color: var(--verde-neon);
	background: color-mix(in srgb, var(--negro) 80%, transparent);
	transform: rotate(-6deg);
	pointer-events: none;
}

.galeria__ver {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 1.4rem 0.5rem 0.6rem;
	font-family: var(--fuente-titulo);
	font-size: 0.95rem;
	color: var(--verde-neon);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
	translate: 0 100%;
	transition: translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.galeria__foto:hover .galeria__ver,
.galeria__foto:focus-visible .galeria__ver {
	translate: 0 0;
}

@media (hover: none) {
	.galeria__ver {
		display: none;
	}
}

/* Las fotos entran en cascada cuando aparece su grupo */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.galeria__grupo .galeria__foto {
		opacity: 0;
	}

	.galeria__grupo.visible .galeria__foto {
		opacity: 1;
		animation: foto-entra 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 45ms) backwards;
	}
}

@keyframes foto-entra {
	from { opacity: 0; transform: translateY(34px) rotate(-4deg) scale(0.9); }
	to   { opacity: 1; transform: none; }
}

/* Visor: se abre con un pequeño rebote */
.visor-foto:not([hidden]) .visor-foto__fondo {
	animation: fundido 0.3s ease both;
}

.visor-foto:not([hidden]) .visor-foto__caja {
	animation: visor-abre 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes fundido {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes visor-abre {
	from { opacity: 0; transform: scale(0.85) rotate(-2deg); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Cursor de neón (solo con mouse; lo crea main.js) ---------- */
.cursor-punto,
.cursor-anillo {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 110;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.cursor-punto.visible,
.cursor-anillo.visible {
	opacity: 1;
}

.cursor-punto {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--verde-neon);
	box-shadow: 0 0 10px var(--verde-neon);
}

.cursor-anillo {
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 1.5px solid color-mix(in srgb, var(--verde-neon) 70%, transparent);
	transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease, margin 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.cursor-anillo.activo {
	width: 66px;
	height: 66px;
	margin: -33px 0 0 -33px;
	border-color: var(--verde-neon);
	background: color-mix(in srgb, var(--verde-neon) 12%, transparent);
}

.cursor-anillo.presionado {
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
}

/* ---------- Confeti de signos al tocar un botón de WhatsApp ---------- */
.confeti {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 130;
	pointer-events: none;
	font-family: var(--fuente-titulo);
	font-size: var(--tam, 18px);
	line-height: 1;
	color: var(--verde-neon);
	text-shadow: 0 0 8px var(--verde-neon);
	animation: confeti-vuela 0.95s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}

@keyframes confeti-vuela {
	from {
		opacity: 1;
		transform: translate(var(--x0), var(--y0)) translate(-50%, -50%) scale(0.4) rotate(0deg);
	}
	to {
		opacity: 0;
		transform: translate(calc(var(--x0) + var(--dx)), calc(var(--y0) + var(--dy))) translate(-50%, -50%) scale(1) rotate(var(--giro));
	}
}

/* ---------- Pantallas medianas y celular ---------- */
@media (max-width: 1100px) {
	.pegatina--5,
	.pegatina--6 {
		display: none;
	}
}

@media (max-width: 900px) {
	.pegatina--1,
	.pegatina--2,
	.pegatina--4 {
		display: none;
	}

	.pegatina--3 {
		top: 4%;
		bottom: auto;
		left: 4%;
		width: 2.8rem;
		height: 2.8rem;
		font-size: 1.7rem;
	}
}

@media (max-width: 760px) {
	/* El pie queda por encima de la barra fija de WhatsApp */
	.pie {
		padding-bottom: calc(2rem + 4.5rem);
	}

	.sello {
		right: -12px;
		width: 64px;
		height: 64px;
		font-size: 0.8rem;
	}

	.cinta-adhesiva {
		width: 64px;
		height: 20px;
	}

	.cinta-adhesiva--izq { left: -18px; }
	.cinta-adhesiva--der { right: -18px; }

	.portada__palabra {
		-webkit-text-stroke-width: 1.5px;
	}
}

/* ---------- Movimiento reducido: nada de lo nuevo se mueve ---------- */
@media (prefers-reduced-motion: reduce) {
	body::after,
	.encabezado::after,
	.portada__palabra,
	.logo-escena::before,
	.portada .logo,
	.anillo,
	.pegatina,
	.bajar,
	.bajar__flecha::after,
	.sello,
	.tipo.activo,
	.cinta-obra::before,
	.cinta-obra::after,
	.proximamente__signo,
	.proximamente__icono,
	.paso.visible .paso__numero,
	.cierre,
	.cierre__signo,
	.muro__pista,
	.visor-foto__caja,
	.visor-foto__fondo {
		animation: none !important;
	}

	.eslogan__animado::before,
	.eslogan__animado::after,
	.tipo--wa::after,
	.barra-wa::after {
		display: none;
	}

	.pasos::before {
		transform: scaleX(1);
		transition: none;
	}

	.foto,
	.marca img,
	.pegatina,
	.faq__item,
	.galeria__ver,
	.paso::after {
		transition: none;
	}
}


/* ---------- Letreros de neón "?" (sección de preguntas) ---------- */
/* Un "?" gigante como tubo de neón: núcleo casi blanco y varias capas
   de resplandor verde. Se enciende con un parpadeo y, de vez en cuando,
   titila como un letrero de verdad. Solo en pantallas anchas. */
#faq {
	position: relative;
}

.neon-signo {
	display: none;
	position: absolute;
	top: 14%;
	font-family: var(--fuente-titulo);
	font-size: clamp(9rem, 13vw, 14rem);
	line-height: 1;
	color: #eaffea;
	text-shadow:
		0 0 4px #ffffff,
		0 0 10px var(--verde-neon),
		0 0 22px var(--verde-neon),
		0 0 44px var(--verde-neon),
		0 0 90px var(--verde-neon);
	pointer-events: none;
	user-select: none;
	animation: neon-titila 6s steps(1) infinite;
}

.neon-signo--izq {
	left: calc((900px - 100vw) / 4 - 0.28em);
	rotate: -14deg;
}

.neon-signo--der {
	right: calc((900px - 100vw) / 4 - 0.28em);
	top: 46%;
	rotate: 12deg;
	font-size: clamp(7rem, 10vw, 11rem);
	animation-delay: -2.7s;
}

@media (min-width: 1200px) {
	.neon-signo {
		display: block;
	}
}

@keyframes neon-titila {
	0%, 100% { opacity: 1; }
	71%      { opacity: 1; }
	72%      { opacity: 0.35; }
	73%      { opacity: 1; }
	75%      { opacity: 0.25; }
	76%      { opacity: 1; }
	90%      { opacity: 0.85; }
	91%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.neon-signo {
		animation: none;
	}
}