/*
 * Reinicio, tipografía base y utilidades de retícula.
 *
 * El prototipo llevaba doce líneas de CSS real y todo lo demás inline. Esto es
 * el suelo sobre el que se apoyan components.css y las hojas de vista.
 */

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

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

body {
	margin: 0;
	background: var(--re-negro);
	color: var(--re-claro-100);
	font-family: var(--re-texto);
	font-size: var(--re-cuerpo);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img,
svg,
video {
	height: auto;
	display: block;
}

/* --- Titulares --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--re-titulo);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.018em;
	text-transform: uppercase;
	/*
	 * Último recurso para las palabras que no caben. A estos cuerpos —hasta 92 px
	 * en el hero— una sola palabra larga se sale de su caja sin ensancharla, así
	 * que no la detecta ningún cálculo de anchos: simplemente se pinta fuera y
	 * empuja la página a lo ancho. Pasaba en «Categoría: Mantenimiento» a 320 px.
	 * `break-word` solo parte cuando de verdad no hay alternativa.
	 */
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--re-h1);
	font-weight: 800;
	letter-spacing: -0.035em;
}

h2 {
	font-size: var(--re-h2);
	font-weight: 800;
	line-height: 1;
}

h3 {
	font-size: var(--re-h3);
}

p {
	margin: 0 0 1.2em;
}

p:last-child {
	margin-bottom: 0;
}

/* --- Enlaces ----------------------------------------------------------- */

a {
	color: var(--re-rojo);
	text-decoration: none;
	transition: color var(--re-transicion);
}

a:hover {
	color: var(--re-rojo-claro);
}

/*
 * Foco visible en todo el sitio. El prototipo lo perdía: sus estados venían de
 * atributos `style-focus` que solo existían dentro del runtime propietario.
 */
:focus-visible {
	outline: 2px solid var(--re-rojo);
	outline-offset: 3px;
}

::selection {
	background: var(--re-rojo);
	color: #fff;
}

/* --- Formularios ------------------------------------------------------- */

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

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

figure {
	margin: 0;
}

/* --- Retícula ---------------------------------------------------------- */

.re-contenedor {
	max-width: var(--re-ancho);
	margin: 0 auto;
	padding-inline: var(--re-medianil);
}

.re-seccion {
	padding-block: var(--re-seccion);
}

/*
 * Bandas. El sitio alterna oscuro y claro sección a sección.
 *
 * Cada banda no cambia solo su fondo: redefine el juego completo de roles de
 * tinta declarado en tokens.css. Los componentes consumen `var(--re-ink-*)` y
 * nunca `--re-claro-*` ni `--re-oscuro-*` directamente, así que una banda oscura
 * dentro de una clara —o al revés— se pinta bien sin que haga falta una regla
 * `.re-banda--X .componente` por cada combinación.
 *
 * No hay aquí ninguna regla para h1/h2/h3: los titulares no declaran color
 * propio (ver arriba), así que heredan el de la banda. La regla que existía
 * antes era redundante sobre banda clara y era justo la que volvía invisibles
 * los titulares de las bandas oscuras anidadas.
 */
.re-banda--oscura,
.re-banda--superficie {
	--re-ink: var(--re-claro-100);
	--re-ink-suave: var(--re-claro-60);
	--re-ink-media: var(--re-claro-45);
	--re-ink-tenue: var(--re-claro-35);
	--re-linea: var(--re-linea-oscura);
	--re-linea-campo: var(--re-linea-oscura-fuerte);
	--re-ink-ok: var(--re-verde-claro);
	--re-superficie-art: var(--re-superficie);
	--re-superficie-caja: var(--re-superficie);
	--re-superficie-tenue: rgba(255, 255, 255, 0.1);
	--re-badge-nuevo-fondo: rgba(37, 211, 102, 0.15);
	--re-badge-nuevo-ink: var(--re-verde-claro);
	--re-velo: rgba(11, 11, 12, 0.72);

	color: var(--re-ink);
}

.re-banda--oscura {
	background: var(--re-negro);
}

.re-banda--superficie {
	background: var(--re-superficie);
}

.re-banda--clara,
.re-banda--blanca {
	--re-ink: var(--re-oscuro-100);
	--re-ink-suave: var(--re-oscuro-60);
	--re-ink-media: var(--re-oscuro-50);
	--re-ink-tenue: var(--re-oscuro-40);
	--re-linea: var(--re-linea-clara);
	--re-linea-campo: var(--re-linea-clara-fuerte);
	--re-ink-ok: var(--re-verde);
	--re-superficie-art: var(--re-placeholder);
	--re-superficie-caja: var(--re-blanco);
	--re-superficie-tenue: rgba(0, 0, 0, 0.1);
	--re-badge-nuevo-fondo: var(--re-tinta);
	--re-badge-nuevo-ink: var(--re-banda);
	--re-velo: rgba(255, 255, 255, 0.86);

	color: var(--re-ink);
}

.re-banda--clara {
	background: var(--re-banda);
}

.re-banda--blanca {
	background: var(--re-blanco);
}

/* --- Accesibilidad ----------------------------------------------------- */

/*
 * Texto solo para lectores de pantalla.
 *
 * El `top: 0; left: 0` no es decorativo: sin él el elemento se queda en su
 * posición estática, y como es `position: absolute`, si ningún ancestro está
 * posicionado su bloque contenedor acaba siendo el inicial. Entonces un
 * `overflow: hidden` intermedio ya no lo recorta —un recorte solo alcanza a los
 * descendientes cuyo bloque contenedor esté dentro de él— y el span estira la
 * página hasta donde caiga.
 *
 * Eso es justo lo que pasaba: los «5 estrellas» de las reseñas viven dentro de
 * un carril con desplazamiento horizontal, las últimas tarjetas están a más de
 * 3.500 px, y la portada se desplazaba en horizontal por un elemento invisible
 * de un píxel. Anclándolo al origen de su bloque contenedor no puede estirar
 * nada, siga o no posicionado el ancestro.
 *
 * Los lectores de pantalla lo anuncian por orden del DOM, no por su posición, así
 * que moverlo no cambia nada de lo que se oye.
 */
.sr-only {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.re-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--re-rojo);
	color: #fff;
	padding: 12px 20px;
	font-family: var(--re-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.re-saltar:focus {
	left: 0;
	color: #fff;
}