/**
 * Variables visuales de MOVIDO.
 * Fuente: brief de rediseño, punto 2 "IDENTIDAD VISUAL". Todos los valores de este archivo
 * son los que se especificaron literalmente — no se ha inventado ningún color ni medida.
 * El resto de hojas de estilo del tema SOLO deben usar estas variables, nunca valores sueltos,
 * para que un cambio de marca futuro se haga en un único sitio.
 */

:root {
	/* Paleta */
	--movido-negro-carbon: #111111;
	--movido-negro-profundo: #080808;
	--movido-naranja: #FF5A0A;
	--movido-naranja-hover: #E94A00;
	--movido-blanco-calido: #F7F6F3;
	--movido-blanco: #FFFFFF;
	--movido-gris-texto: #5E6065;
	--movido-gris-bordes: #E4E4E1;
	--movido-verde-stock: #17883E;

	/* Alias semánticos (para que el resto del CSS exprese intención, no color literal) */
	--movido-color-fondo: var(--movido-blanco-calido);
	--movido-color-superficie: var(--movido-blanco);
	--movido-color-texto: var(--movido-negro-carbon);
	--movido-color-texto-secundario: var(--movido-gris-texto);
	--movido-color-borde: var(--movido-gris-bordes);
	--movido-color-marca: var(--movido-naranja);
	--movido-color-marca-hover: var(--movido-naranja-hover);
	--movido-color-exito: var(--movido-verde-stock);
	--movido-color-inversa-fondo: var(--movido-negro-carbon);
	--movido-color-inversa-fondo-profundo: var(--movido-negro-profundo);
	--movido-color-inversa-texto: var(--movido-blanco);

	/* Tipografías */
	--movido-font-titulares: "Barlow Condensed", "Arial Narrow", sans-serif;
	--movido-font-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Jerarquía tipográfica — tamaño/interlineado tal cual el brief (escritorio) */
	--movido-h1-size: 64px;
	--movido-h1-line: 64px;
	--movido-h2-size: 40px;
	--movido-h2-line: 44px;
	--movido-h3-size: 26px;
	--movido-h3-line: 31px;
	--movido-texto-destacado-size: 18px;
	--movido-texto-destacado-line: 28px;
	--movido-texto-normal-size: 16px;
	--movido-texto-normal-line: 24px;
	--movido-boton-size: 15px;
	--movido-boton-line: 20px;
	--movido-etiqueta-size: 12px;
	--movido-etiqueta-line: 16px;

	/* Pesos */
	--movido-peso-h1: 700;
	--movido-peso-boton: 600;
	--movido-peso-etiqueta: 700;

	/* Contenedor y espaciados */
	--movido-container-max: 1280px;
	--movido-padding-desktop: 64px;
	--movido-padding-tablet: 32px;
	--movido-padding-mobile: 16px;

	/* Radios */
	--movido-radio-control: 6px;   /* botones y campos */
	--movido-radio-tarjeta: 10px;  /* tarjetas */
	--movido-radio-bloque: 16px;   /* bloques grandes */

	/* Breakpoints orientativos del punto 12 (para usar en comentarios / documentación;
	   los media queries reales se escriben con el valor literal, CSS no admite variables
	   dentro de @media) */
	--movido-bp-desktop: 1280px;
	--movido-bp-laptop: 1024px;
	--movido-bp-tablet: 768px;
	--movido-bp-mobile: 480px;

	/* Objetivo táctil mínimo (punto 12) */
	--movido-touch-target-min: 44px;
}

/* Tamaños móviles — el brief da valores específicos de H1/H2 para móvil */
@media (max-width: 768px) {
	:root {
		--movido-h1-size: 42px;
		--movido-h1-line: 42px;
		--movido-h2-size: 30px;
		--movido-h2-line: 34px;
	}
}

/* Estilos base que dependen directamente de estas variables. El resto de archivos
   (header.css, footer.css, home.css...) heredan de aquí, no redefinen tipografías. */
body {
	font-family: var(--movido-font-texto);
	font-size: var(--movido-texto-normal-size);
	line-height: var(--movido-texto-normal-line);
	color: var(--movido-color-texto);
	background-color: var(--movido-color-fondo);
}

h1, h2, h3, .movido-titular {
	font-family: var(--movido-font-titulares);
	font-weight: var(--movido-peso-h1);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--movido-h1-size); line-height: var(--movido-h1-line); }
h2 { font-size: var(--movido-h2-size); line-height: var(--movido-h2-line); }
h3 { font-size: var(--movido-h3-size); line-height: var(--movido-h3-line); }

.movido-texto-destacado {
	font-size: var(--movido-texto-destacado-size);
	line-height: var(--movido-texto-destacado-line);
}

.movido-etiqueta {
	font-size: var(--movido-etiqueta-size);
	line-height: var(--movido-etiqueta-line);
	font-weight: var(--movido-peso-etiqueta);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

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

@media (max-width: 1024px) {
	.movido-container {
		padding-left: var(--movido-padding-tablet);
		padding-right: var(--movido-padding-tablet);
	}
}

@media (max-width: 480px) {
	.movido-container {
		padding-left: var(--movido-padding-mobile);
		padding-right: var(--movido-padding-mobile);
	}
}

/* Botones base — el resto de estilos de botón por zona parten de esta clase */
.movido-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--movido-touch-target-min);
	padding: 12px 24px;
	border-radius: var(--movido-radio-control);
	font-family: var(--movido-font-texto);
	font-size: var(--movido-boton-size);
	line-height: var(--movido-boton-line);
	font-weight: var(--movido-peso-boton);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.movido-boton--primario {
	background-color: var(--movido-color-marca);
	color: var(--movido-blanco);
}
.movido-boton--primario:hover,
.movido-boton--primario:focus-visible {
	background-color: var(--movido-color-marca-hover);
}

.movido-boton--secundario {
	background-color: transparent;
	border-color: var(--movido-color-texto);
	color: var(--movido-color-texto);
}
.movido-boton--secundario:hover,
.movido-boton--secundario:focus-visible {
	background-color: var(--movido-color-texto);
	color: var(--movido-blanco);
}

.movido-boton--sobre-oscuro {
	background-color: var(--movido-color-marca);
	color: var(--movido-blanco);
}

.movido-tarjeta {
	background-color: var(--movido-color-superficie);
	border: 1px solid var(--movido-color-borde);
	border-radius: var(--movido-radio-tarjeta);
}

.movido-bloque {
	border-radius: var(--movido-radio-bloque);
}