/* ===========================================================================
   BASE
   =========================================================================== */

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

html,body{ width:100%; min-height:100%; }

body{
	margin:0;
	font-family: var(--fuente);
	font-size: 15px;
	line-height: 1.55;
	color: var(--texto);
	background: var(--fondo);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* El lienzo es fijo para que los halos no se desplacen al hacer scroll. */
body::before{
	content:"";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		var(--halo-lienzo),
		linear-gradient(170deg, var(--fondo), var(--fondo-2) 44%, var(--fondo-3));
}

/* Grano muy leve: rompe el bandeado de los degradados grandes. */
body::after{
	content:"";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .030;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

img,svg,video{ display:block; max-width:100%; }

h1,h2,h3,h4{
	margin:0;
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: 1.18;
	text-wrap: balance;
}
h1{ font-size: clamp(24px, 2.4vw, 30px); }
h2{ font-size: clamp(19px, 1.6vw, 22px); }
h3{ font-size: 16px; }

p{ margin: 0 0 12px; color: var(--texto-suave); }
p:last-child{ margin-bottom: 0; }

a{ color: inherit; text-decoration: none; }

/* Sin este reinicio el navegador pinta su propio fondo de botón, que en modo
   oscuro llega como un gris sólido y arruina los controles translúcidos. */
button{
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	background-color: transparent;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

input,select,textarea{ font: inherit; color: inherit; }

b,strong{ font-weight: 700; color: var(--texto); }

ul,ol{ margin:0; padding:0; list-style:none; }

/* Los iconos son glifos de la fuente del proyecto. La caja se mantiene
   cuadrada para que todo lo que los posiciona siga midiendo lo mismo que
   cuando eran SVG, y el tamaño real lo da font-size. */
.icono{
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	line-height: 1;
}
.icono-sm{ width:16px; height:16px; font-size:15px; }
.icono-lg{ width:24px; height:24px; font-size:23px; }

.numero{
	font-family: var(--fuente-num);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.epigrafe{
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

.apagado{ color: var(--texto-suave); }
.tenue{ color: var(--texto-tenue); }

/* Foco visible y coherente en todo el panel. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
	outline: 2px solid rgba(var(--marca-1-rgb), .85);
	outline-offset: 2px;
	border-radius: var(--radio-xs);
}

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

::selection{ background: rgba(var(--marca-1-rgb), .34); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
	background: rgba(255,255,255,.12);
	border: 3px solid transparent;
	background-clip: content-box;
	border-radius: var(--radio-pil);
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); background-clip: content-box; }

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

/* Evita el parpadeo de transiciones al aplicar el tema guardado. */
html.sin-transicion *,
html.sin-transicion *::before,
html.sin-transicion *::after{ transition:none !important; }