/**
 * JOVI — Base: tipografía y primitivas.
 * Migrado del snippet "JOVI Typography" (id 12), con dos cambios:
 *   1. Fuentes self-hosted — se elimina el @import bloqueante a Google Fonts.
 *   2. Se quitan los !important globales; solo quedan donde Blocksy gana por especificidad.
 */

/* --- Fuentes self-hosted ---
   Los .woff2 se descargan con assets/fonts/fetch-fonts.sh (ver README de esa carpeta).
   Si faltan, el fallback de sistema mantiene el sitio legible: nada se rompe.

   ⚠️ Cada peso que use el CSS necesita su propio archivo. Faltaba el 600 —el peso más usado
   del diseño, 21 apariciones— y el navegador lo estaba fabricando engrosando el 500 por
   software. Eso es lo que hacía ver la tipografía distinta a la maqueta: el falso negrita
   engorda los trazos de forma pareja y borra el contraste que dibujó el diseñador. */

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --- Texto --- */

body {
	font-family: var(--jovi-font-sans);
	font-size: var(--jovi-text-base);
	/* 1.5 es lo que hereda la maqueta del preflight de Tailwind. El 1.65 que traía el CSS
	   viejo del Customizer separaba más los renglones y era parte de por qué la tipografía
	   se veía distinta aunque la familia fuera la correcta. */
	line-height: 1.5;
	color: var(--jovi-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.product_title,
.entry-title,
.woocommerce-loop-product__title {
	font-family: var(--jovi-font-display);
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--jovi-ink);
}

h1 { font-size: var(--jovi-h1); font-weight: 700; }
h2 { font-size: var(--jovi-h2); font-weight: 700; }
h3 { font-size: var(--jovi-h3); font-weight: 500; }

.site-header,
.main-navigation {
	font-family: var(--jovi-font-display);
	font-weight: 500;
}

::selection {
	background: var(--jovi-red);
	color: var(--jovi-white);
}

/* --- Accesibilidad: foco visible ---
   Blocksy lo deja muy tenue. Un anillo rojo claro es marca y accesibilidad a la vez. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--jovi-red);
	outline-offset: 2px;
	border-radius: var(--jovi-radius-sm);
}

/* --- Reveal al hacer scroll ---
   Reemplaza la librería AOS que se cargaba desde unpkg.com (snippet id 5).
   Estado inicial solo si hay JS: sin JS el contenido se ve igual, no en blanco. */
.js .jovi-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 600ms var(--jovi-ease),
		transform 600ms var(--jovi-ease);
	will-change: opacity, transform;
}

.js .jovi-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Respetar a quien pide menos movimiento. No es opcional. */
@media (prefers-reduced-motion: reduce) {
	.js .jovi-reveal,
	.js .jovi-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}