/* -----------------------------------------
   Soulmix - Estilos base (Desktop first)
   ----------------------------------------- */

:root {
	/* Tipografía */
	--font-base: 'GT Walsheim Pro', sans-serif;
	--font-condensed: 'GT Walsheim Pro Condensed', sans-serif;

	/* Colores */
	--color-bg: #1F1E1D;
	--color-text: #FAF9F2;
	--color-btn-primary: #FF7633;
	--color-btn-primary-text: #1F1E1D;
	--color-btn-secondary: #363633;
	--color-btn-secondary-text: #FAF9F2;

	/* Layout */
	--container-max: clamp(1920px, 100vw, 2688px);
	--container-padding: clamp(48px, calc(48 / 1920 * 100vw), 67px);

	/* Altura real de .site-header: padding-top + alto del logo + padding-bottom */
	--header-height: calc(
		clamp(44px, calc(44 / 1920 * 100vw), 62px) +
		clamp(110px, calc(110 / 1920 * 100vw), 154px) +
		clamp(32px, calc(32 / 1920 * 100vw), 45px)
	);
}

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

html {
	scroll-behavior: smooth;
	/* Ninguna sección debe generar scroll horizontal: el track del carrusel
	   de recetas mide varios miles de píxeles y los desplazamientos con
	   `translateX` sacan elementos de su columna. */
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

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

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

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-condensed);
	font-weight: 900; /* Títulos: Condensed Black */
}

p {
	margin: 0;
}

button {
	font-family: var(--font-condensed);
	font-weight: 500; /* Botones: Condensed Medium */
	cursor: pointer;
	border: none;
	background: none;
}

/* -----------------------------------------
   Tipografía semántica
   ----------------------------------------- */

/* Títulos */
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-condensed);
	font-weight: 900;
}

/* Subtítulos y pretítulos */
.subtitle,
.pretitle {
	font-family: var(--font-condensed);
	font-weight: 500;
}

.pretitle {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Oculta texto visualmente manteniéndolo para lectores de pantalla. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Botones */
.btn {
	display: inline-block;
	font-family: var(--font-condensed);
	font-weight: 500;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	text-transform: uppercase;
	padding: clamp(10px, calc(10 / 1920 * 100vw), 14px) clamp(20px, calc(20 / 1920 * 100vw), 28px);
	border-radius: 999px;
	transition: opacity 0.2s ease;
}

.btn:hover {
	opacity: 0.85;
}

.btn--primary {
	background-color: var(--color-btn-primary);
	color: var(--color-btn-primary-text);
}

.btn--secondary {
	background-color: var(--color-btn-secondary);
	color: var(--color-btn-secondary-text);
}

/* Enlaces de la cabecera */
.nav-link {
	font-family: var(--font-condensed);
	font-weight: 900;
}

/* Texto regular */
.text,
.text-body {
	font-family: var(--font-base);
	font-weight: 400;
}

.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}