/* ==========================================================================================================
   VISA Óptica · base compartida
   Tema claro, limpio y profesional, con toques Frutiger Aero: vidrio translúcido, brillo "aqua", cielo claro y
   gotas que funcionan como lentes. Todo gira en torno a la claridad de una mica.
   Tokens, tipografía, estructura de secciones, componentes (botones, chips, tarjetas, controles), nav, intro y
   pie. Cada sección tiene su propio archivo en css/secciones/ y solo usa estos tokens.
   ========================================================================================================== */

:root {
	/* Fondos: blanco con cielos muy claros para alternar secciones */
	--fondo: #ffffff;
	--fondo-2: #f4f8fe;
	--fondo-3: #e9f2fd;
	--cielo: linear-gradient(180deg, #e8f3ff 0%, #f6faff 45%, #ffffff 100%);

	/* Vidrio (tarjetas, nav, paneles) */
	--vidrio: rgba(255, 255, 255, 0.62);
	--vidrio-fuerte: rgba(255, 255, 255, 0.86);
	--borde: rgba(14, 42, 92, 0.1);
	--borde-fuerte: rgba(14, 42, 92, 0.18);
	--canto: rgba(255, 255, 255, 0.95); /* canto brillante del vidrio */

	/* Texto */
	--texto: #0a1733;
	--texto-2: #414e69;
	--texto-3: #68738c;

	/* Marca. Logo: rojo #e00510 y azul #0000ff. En la interfaz se usa --azul-marca, más legible. */
	--rojo: #e00510;
	--azul: #0000ff;
	--azul-marca: #1437e6;
	--azul-hondo: #0b25b0;
	--azul-claro: #dfe8ff;

	/* Toques Aero: cielo, agua y hoja (con moderación) */
	--cielo-500: #2e9bff;
	--aqua: #16bfe3;
	--hoja: #3fbf6a;

	/* Óptica: luz, retina, vidrio de la mica, UV, enfocado */
	--luz: #ffa412;
	--luz-clara: #ffe4a8;
	--retina: #f0445a;
	--cristal: #7fcfff;
	--uv: #7b45f0;
	--exito: #12a877;

	/* Tipografía */
	--f-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--t-xl: clamp(2.9rem, 1.6rem + 5.6vw, 7.25rem);
	--t-l: clamp(2.2rem, 1.45rem + 3.4vw, 4.6rem);
	--t-m: clamp(1.55rem, 1.25rem + 1.3vw, 2.35rem);
	--t-entrada: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem);
	--t-base: 1rem;
	--t-chico: 0.875rem;
	--t-mini: 0.75rem;

	/* Espacio y forma */
	--ancho: 1240px;
	--gutter: clamp(16px, 4vw, 48px);
	--sec-pad: clamp(88px, 12vw, 176px);
	--radio-s: 10px;
	--radio: 18px;
	--radio-l: 26px;
	--radio-xl: 36px;

	/* Movimiento */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-resorte: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur: 0.6s;

	/* Sombras: suaves y azuladas, como luz de cielo */
	--sombra-s: 0 1px 2px rgba(10, 23, 51, 0.06), 0 4px 14px rgba(10, 23, 51, 0.05);
	--sombra: 0 2px 6px rgba(10, 23, 51, 0.05), 0 26px 60px -26px rgba(20, 60, 150, 0.28);
	--sombra-l: 0 3px 10px rgba(10, 23, 51, 0.05), 0 50px 110px -40px rgba(20, 60, 150, 0.38);
	/* Brillo del vidrio: canto superior luminoso */
	--brillo-vidrio: inset 0 1px 0 var(--canto), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	/* Reflejo "gloss" de la mitad superior (el guiño Aero); usar en ::before/::after con poca opacidad */
	--gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 51%);

	/* Capas */
	--z-nav: 50;
	--z-intro: 100;

	color-scheme: light;
}

/* ---------- Reset ----------------------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 88px;
}
body {
	min-height: 100svh;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--f-sans);
	font-size: var(--t-base);
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; word-spacing: 0.03em; text-wrap: balance; }
/* text-wrap: pretty solo en las entradas: en todos los párrafos costaba ~0.7 s de estilo y layout al arrancar en un
   celular de gama media (medido con CPU ×4), y la diferencia visual en párrafos de cuerpo es mínima. */
.entrada { text-wrap: pretty; }
address { font-style: normal; }
::selection { background: rgba(46, 155, 255, 0.24); color: var(--texto); }

:focus-visible {
	outline: 2px solid var(--azul-marca);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Luz de cielo que sigue al puntero: main.js crea el elemento y lo mueve con transform (sin recalcular estilos) */
.luz-puntero {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	width: 1040px;
	height: 1040px;
	margin: -520px 0 0 -520px;
	pointer-events: none;
	background: radial-gradient(circle closest-side, rgba(46, 155, 255, 0.06), transparent 65%);
	will-change: transform;
}

/* ---------- Tipografía ------------------------------------------------------------------------------------ */
.titulo-xl { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.038em; line-height: 1; }
.titulo-l { font-size: var(--t-l); font-weight: 700; letter-spacing: -0.032em; line-height: 1.04; }
.titulo-m { font-size: var(--t-m); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }

/* La palabra clave de cada título: mismo tipo, en el azul de la marca. Limpio, sin efectos. */
.titulo-xl em,
.titulo-l em,
.titulo-m em {
	font-style: normal;
	color: var(--azul-marca);
}

.entrada { font-size: var(--t-entrada); color: var(--texto-2); line-height: 1.6; max-width: 62ch; }

/* Ceja: etiqueta pequeña sobre los títulos, con una gota de vidrio como viñeta */
.ceja {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	font-size: var(--t-mini);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--azul-marca);
}
.ceja::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0 18%, #8fd6ff 34%, var(--cielo-500) 72%, var(--azul-marca) 100%);
	box-shadow: 0 1px 3px rgba(20, 55, 230, 0.35);
}

.nota { margin-top: 20px; font-size: var(--t-mini); color: var(--texto-3); max-width: 70ch; }

.enlace {
	color: var(--azul-marca);
	font-weight: 600;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.4s var(--ease-out), color 0.2s;
}
.enlace:hover { color: var(--azul-hondo); background-size: 0 1px; background-position: 100% 100%; }

.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Estructura ------------------------------------------------------------------------------------ */
main { position: relative; z-index: 2; }
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.sec { position: relative; padding-block: var(--sec-pad); }
.sec--cielo { background: var(--cielo); }
.sec--claro { background: var(--fondo-2); }
.sec-cabeza { display: grid; gap: 20px; margin-bottom: clamp(44px, 6vw, 88px); max-width: 880px; }
.sec-cabeza--centro { text-align: center; justify-items: center; margin-inline: auto; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.saltar {
	position: fixed;
	left: 16px;
	top: 16px;
	z-index: calc(var(--z-intro) + 1);
	padding: 10px 16px;
	background: var(--azul-marca);
	color: #fff;
	border-radius: 999px;
	transform: translateY(-160%);
	transition: transform 0.3s var(--ease-out);
}
.saltar:focus { transform: none; }

.visualmente-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Botones --------------------------------------------------------------------------------------- */
.boton {
	--alto: 52px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--alto);
	padding: 0 26px;
	border-radius: 999px;
	font-weight: 650;
	font-size: 0.975rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
	isolation: isolate;
	overflow: hidden;
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.25s, color 0.25s;
}
.boton:active { transform: translateY(0) scale(0.98); }
.boton--chico { --alto: 44px; padding: 0 18px; font-size: 0.9rem; }

/* Primario: píldora azul con el reflejo de vidrio en la mitad superior */
.boton--primario {
	color: #fff;
	background: linear-gradient(180deg, #4a70ff 0%, var(--azul-marca) 55%, #102ecb 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(11, 37, 176, 0.4), 0 10px 24px -10px rgba(20, 55, 230, 0.7);
}
.boton--primario::before {
	content: "";
	position: absolute;
	inset: 1px 1px 50%;
	z-index: -1;
	border-radius: 999px 999px 40% 40% / 999px 999px 12px 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.04));
}
.boton--primario:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(11, 37, 176, 0.4), 0 16px 32px -12px rgba(20, 55, 230, 0.75);
}

/* Vidrio: píldora blanca translúcida */
.boton--vidrio {
	color: var(--texto);
	background: var(--vidrio-fuerte);
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra-s);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
}
.boton--vidrio:hover { transform: translateY(-2px); border-color: var(--borde-fuerte); background: #fff; }

/* ---------- Chips y segmentos (selector de opciones) ------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid var(--borde);
	background: var(--vidrio-fuerte);
	box-shadow: var(--brillo-vidrio);
	color: var(--texto-2);
	font-size: var(--t-chico);
	font-weight: 600;
	transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.35s var(--ease-out);
}
.chip:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.chip[aria-pressed="true"],
.chip[aria-selected="true"],
.chip[aria-checked="true"] {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(180deg, #4a70ff 0%, var(--azul-marca) 60%, #102ecb 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px -10px rgba(20, 55, 230, 0.8);
}

/* ---------- Tarjetas de vidrio ---------------------------------------------------------------------------- */
.tarjeta {
	position: relative;
	padding: clamp(22px, 3vw, 32px);
	border-radius: var(--radio-l);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
}
.tarjeta h3 { font-size: 1.3rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.tarjeta p { color: var(--texto-2); }

/* Panel para las demostraciones interactivas: una superficie de cielo claro */
.panel {
	position: relative;
	border-radius: var(--radio-xl);
	background: radial-gradient(120% 90% at 50% 0%, #eef6ff 0%, #ffffff 62%);
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra-l);
	overflow: hidden;
}

/* ---------- Deslizador (range) ---------------------------------------------------------------------------- */
.deslizador {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 44px;
	background: transparent;
	cursor: pointer;
	--p: 50%;
}
.deslizador::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cielo-500), var(--azul-marca) var(--p), #dfe6f2 var(--p));
	box-shadow: inset 0 1px 2px rgba(10, 23, 51, 0.12);
}
.deslizador::-moz-range-track { height: 8px; border-radius: 999px; background: #dfe6f2; }
.deslizador::-moz-range-progress { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--cielo-500), var(--azul-marca)); }
.deslizador::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	margin-top: -10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #fff 0 30%, #eef3ff 60%, #d5def0 100%);
	border: 1px solid rgba(14, 42, 92, 0.18);
	box-shadow: 0 0 0 5px rgba(20, 55, 230, 0.12), 0 4px 10px rgba(10, 23, 51, 0.22);
	transition: transform 0.2s var(--ease-out);
}
.deslizador::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #fff 0 30%, #eef3ff 60%, #d5def0 100%);
	border: 1px solid rgba(14, 42, 92, 0.18);
	box-shadow: 0 0 0 5px rgba(20, 55, 230, 0.12), 0 4px 10px rgba(10, 23, 51, 0.22);
}
.deslizador:active::-webkit-slider-thumb { transform: scale(1.1); }

/* Interruptor sí/no (button role="switch") */
.interruptor {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	font-weight: 650;
	color: var(--texto);
}
.interruptor__pista {
	position: relative;
	width: 56px;
	height: 32px;
	border-radius: 999px;
	background: #dfe6f2;
	box-shadow: inset 0 1px 3px rgba(10, 23, 51, 0.16);
	transition: background 0.3s;
}
.interruptor__pista::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #fff 0 35%, #f0f4ff 70%, #dde5f5 100%);
	box-shadow: 0 2px 6px rgba(10, 23, 51, 0.25);
	transition: transform 0.45s var(--ease-resorte);
}
.interruptor[aria-checked="true"] .interruptor__pista { background: linear-gradient(180deg, #4a70ff, var(--azul-marca)); }
.interruptor[aria-checked="true"] .interruptor__pista::after { transform: translateX(24px); }

/* ---------- Revelado "enfoque" (firma del sitio) -----------------------------------------------------------
   Los elementos con [data-enfoque] entran desenfocados y se enfocan, como al ponerse unos lentes. main.js los
   anima; sin JavaScript se ven normales. */
.js [data-enfoque] { opacity: 0; filter: blur(12px); transform: translateY(16px); }
.js [data-enfoque].enfocando {
	transition: opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out), transform 1.2s var(--ease-out);
	will-change: opacity, filter, transform;
}
.js [data-enfoque].enfocado,
.js.sin-movimiento [data-enfoque] { opacity: 1; filter: none; transform: none; }

/* ---------- Nav ------------------------------------------------------------------------------------------- */
.nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-nav);
	padding: 12px var(--gutter);
	transition: transform 0.5s var(--ease-out);
}
.nav--oculta { transform: translateY(-110%); }
.nav__barra {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1400px;
	margin-inline: auto;
	padding: 8px 8px 8px 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s;
}
.nav--solida .nav__barra {
	background: rgba(255, 255, 255, 0.72);
	border-color: var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra-s);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
}
.nav__logo img { width: 84px; height: auto; }
.nav__enlaces { display: flex; gap: 2px; margin-left: auto; }
.nav__enlaces a {
	position: relative;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 550;
	color: var(--texto-2);
	transition: color 0.2s, background-color 0.2s;
}
.nav__enlaces a:hover { color: var(--texto); background: rgba(20, 55, 230, 0.06); }
.nav__enlaces a[aria-current="true"] { color: var(--azul-marca); }
.nav__enlaces a[aria-current="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--azul-marca);
}
.nav__menu { display: none; width: 44px; height: 44px; border-radius: 50%; position: relative; }
.nav__menu span {
	position: absolute;
	left: 13px;
	right: 13px;
	height: 2px;
	border-radius: 2px;
	background: var(--texto);
	transition: transform 0.4s var(--ease-out);
}
.nav__menu span:first-child { top: 17px; }
.nav__menu span:last-child { top: 25px; }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1080px) {
	.nav__menu { display: block; }
	.nav__cta { margin-left: auto; }
	.nav__enlaces {
		position: fixed;
		inset: 0;
		z-index: -1;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		padding: 96px var(--gutter) 48px;
		background: rgba(246, 250, 255, 0.94);
		-webkit-backdrop-filter: blur(24px) saturate(160%);
		backdrop-filter: blur(24px) saturate(160%);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--ease-out), visibility 0s 0.4s;
	}
	.nav__enlaces a { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 700; letter-spacing: -0.035em; color: var(--texto); padding: 6px 0; }
	.nav__enlaces a[aria-current="true"]::after { display: none; }
	.nav--abierta .nav__enlaces { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease-out); }
	.nav--abierta .nav__barra { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 420px) {
	.nav__cta { display: none; }
	.nav__menu { margin-left: auto; }
}

/* ---------- Intro ----------------------------------------------------------------------------------------- */
.intro {
	position: fixed;
	inset: 0;
	z-index: var(--z-intro);
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 26px;
	background: var(--fondo);
	-webkit-backdrop-filter: blur(var(--desenfoque, 24px));
	backdrop-filter: blur(var(--desenfoque, 24px));
}
.intro-activa body { overflow: hidden; }
.intro__ojo { position: relative; width: min(38vw, 180px); }
.intro__ojo img { width: 100%; filter: drop-shadow(0 18px 30px rgba(20, 55, 230, 0.22)); }
/* Párpados: SVG encima del símbolo con su mismo viewBox. Cerrados, el ojo es una almendra azul con la línea
   blanca de las pestañas; main.js los abre cuando cargan los lentes 3D. */
.intro__parpados { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Sin transform en CSS: en SVG le ganaría al atributo que anima GSAP. Arrancan cerrados. */
.intro__parpado { fill: var(--azul); }
.intro__pestanas { stroke: #fff; }
/* Indicador de carga discreto: un destello que recorre una línea de cielo */
.intro__carga {
	position: relative;
	width: 132px;
	height: 3px;
	border-radius: 3px;
	background: var(--azul-claro);
	overflow: hidden;
}
.intro__carga::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 40%;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent, var(--azul-marca), transparent);
	animation: intro-carga 1.3s var(--ease-in-out) infinite;
}
@keyframes intro-carga {
	from { transform: translateX(-100%); }
	to { transform: translateX(250%); }
}
.intro__texto {
	font-size: clamp(0.8rem, 1.6vw, 0.95rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--texto-3);
}
.sin-intro .intro { display: none; }

/* ---------- Pie ------------------------------------------------------------------------------------------- */
.pie {
	position: relative;
	z-index: 2;
	padding: 80px 0 40px;
	border-top: 1px solid var(--borde);
	background: linear-gradient(180deg, #ffffff, var(--fondo-3));
}
.pie__rejilla { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start; }
.pie__marca img { width: 140px; margin-bottom: 14px; }
.pie__marca p { font-size: 1.1rem; font-weight: 600; color: var(--texto-2); }
.pie__enlaces { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 28px; }
.pie__enlaces a, .pie__contacto a { color: var(--texto-2); transition: color 0.2s; }
.pie__enlaces a:hover, .pie__contacto a:hover { color: var(--azul-marca); }
.pie__contacto { color: var(--texto-2); font-size: var(--t-chico); display: grid; gap: 6px; }
.pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--borde);
	font-size: var(--t-mini);
	color: var(--texto-3);
}
.pie__credito strong { font-weight: 650; color: var(--texto-2); letter-spacing: 0.01em; }
@media (max-width: 820px) {
	.pie__rejilla { grid-template-columns: 1fr; }
}

/* ---------- Movimiento reducido --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}