/*
 * Fuentes, reset y tipografía base.
 *
 * Montserrat (cuerpo) y Roboto Condensed (títulos) autoalojadas como fuentes
 * variables (un solo .woff2 por familia, font-weight: 100 900) — más liviano
 * que varios cortes estáticos y el navegador resuelve el peso exacto que pida
 * cada selector. Los .woff2 de Barlow/Barlow Condensed (fallback del stack)
 * nunca llegaron a autoalojarse — quedan solo como fallback de nombre, sin
 * archivo, así que su @font-face se quita para no dejar un fetch fallido.
 */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-variable.woff2') format('woff2-variations'), url('../fonts/montserrat-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('../fonts/roboto-condensed-variable.woff2') format('woff2-variations'), url('../fonts/roboto-condensed-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

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

body {
	margin: 0;
	background: var(--br-fondo);
	font-family: var(--br-font-body);
	color: var(--br-texto);
	font-size: 15px;
	line-height: 1.6;
}

a { color: var(--br-azul); text-decoration: none; }
a:hover { color: var(--br-verde); }
/* Sin esto, el navegador aplica su color morado/rosa por defecto a links ya
 * visitados (tel:, mailto:, cualquier <a> con historial) — se repite en
 * cualquier componente nuevo si no se resetea una sola vez aquí.
 * :where() en vez de un selector normal: a:visited (0,1,1) le gana por
 * especificidad a clases de componente como .br-nav__item (0,1,0), así que
 * cualquier link ya visitado (nav, footer) se pintaba de azul aunque el
 * diseño pida otro color en reposo — :where() baja su especificidad a 0
 * para que siempre pierda contra el color del componente. */
:where(a:visited) { color: var(--br-azul); }
/* Mismo criterio para el anillo de foco: color de marca en vez del que
 * imponga el navegador/SO (a veces rosa/magenta según el tema del sistema). */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--br-azul);
	outline-offset: 2px;
}
::selection { background: var(--br-verde); color: var(--br-tinta); }

h1, h2, h3, h4 {
	font-family: var(--br-font-title);
	font-weight: 700;
	margin: 0;
	line-height: 1.06;
}
h1 { font-size: 52px; }
h2 { font-size: 44px; }
h3 { font-size: 24px; }
p { margin: 0 0 1em; color: var(--br-texto-2); }

.br-eyebrow {
	font-family: var(--br-font-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--br-verde);
}

.br-container {
	max-width: var(--br-container);
	margin: 0 auto;
	padding: 0 var(--br-container-pad);
}

.br-section { padding: 84px 0; }
.br-section--tight { padding: 56px 0; }

@media (max-width: 782px) {
	h1 { font-size: 36px; }
	h2 { font-size: 30px; }
	.br-section { padding: 56px 0; }
}

/* Reveal por scroll — ver assets/js/reveal.js */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--br-dur-rise) var(--br-ease-rise), transform var(--br-dur-rise) var(--br-ease-rise);
}
[data-reveal].br-revealed { opacity: 1; transform: none; }

@keyframes br-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes br-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes br-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	*, [data-reveal] { animation: none !important; transition: none !important; }
	[data-reveal] { opacity: 1; transform: none; }
}