/**
 * Strongway — base.
 * Tokens, reset, tipografía, botones y utilidades compartidas.
 * Las fuentes las declara theme.json; aquí solo se consumen sus variables.
 */

/*
 * PALETA — fuente única de verdad del color del sitio.
 *
 * Estos 15 tokens son los ÚNICOS colores literales del tema. Todo lo demás se
 * deriva de ellos con color-mix(), así que cambiarlos aquí repinta el sitio
 * entero. El panel «Apariencia → Paleta de color» (inc/palette.php) reescribe
 * este mismo bloque en línea desde la base de datos; estos valores son el
 * respaldo y la paleta original de Strongway.
 *
 * Al añadir CSS nuevo: nunca escribas un color literal. Usa un token, o
 * color-mix(in srgb, var(--token) N%, transparent | white | black) para
 * transparencias y matices. Un hex suelto se queda fuera de la paleta.
 */
:root {
	/* --- Marca --- */
	--sw-red: #e1352a;
	--sw-red-dark: #b9271e;
	--sw-red-light: #ff5b47;

	/* --- Neutros --- */
	--sw-ink: #141414;
	--sw-ink-2: #2a2a2a;
	--sw-grey-900: #1b1b1d;
	--sw-grey-800: #26262e;
	--sw-grey-500: #8a8a90;
	--sw-grey-200: #e7e7ea;
	--sw-grey-100: #f4f4f5;
	--sw-paper: #fff;

	/* --- Estado: no siguen a la marca a propósito ---
	   Un pedido completado debe seguir leyéndose en verde aunque la marca
	   deje de ser roja. */
	--sw-gold: #f5b301;
	--sw-green: #137a3f;
	--sw-green-light: #4ade80;

	/* --- Derivados: los recalcula el panel, no los edites a mano --- */

	/* Texto sobre el color de marca. El panel lo cambia a --sw-ink si la
	   marca elegida es demasiado clara para el blanco (contraste WCAG). */
	--sw-on-brand: #fff;

	/* Negro cálido de las sombras: tinta empujada hacia el negro. */
	--sw-shade: color-mix(in srgb, var(--sw-ink) 50%, #000);

	--sw-head: var(--wp--preset--font-family--head, "Oswald", system-ui, sans-serif);
	--sw-cond: var(--wp--preset--font-family--cond, "Barlow Condensed", system-ui, sans-serif);
	--sw-body: var(--wp--preset--font-family--body, "Inter", system-ui, sans-serif);

	--sw-shadow: 0 10px 30px rgb(0 0 0 / 8%);
	--sw-shadow-lg: 0 18px 50px rgb(0 0 0 / 16%);
	--sw-shadow-red: 0 14px 34px color-mix(in srgb, var(--sw-red) 32%, transparent);

	--sw-radius: 14px;
	--sw-radius-sm: 10px;
	--sw-radius-lg: 22px;

	--sw-maxw: 1240px;
	--sw-gutter: clamp(16px, 4vw, 24px);

	--sw-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sw-fast: 0.18s;
	--sw-slow: 0.5s;

	--sw-header-h: 82px;
	--sw-topbar-h: 40px;
	--sw-nav-h: 52px;

	/* Alturas cuando la cabecera queda colgada al hacer scroll. */
	--sw-header-h-stuck: 58px;
	--sw-nav-h-stuck: 42px;
	--sw-stuck-gap: 10px;

	/* Alto total del chrome: barra superior (40) + cabecera (82) + navegación (52).
	   Lo usa el hero para caber justo en una pantalla. */
	--sw-chrome-h: 174px;
}

@media (max-width: 1080px) {
	:root {
		/* Sin barra de navegación ni barra superior visible en móvil. */
		--sw-chrome-h: 122px;
	}
}

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

/*
 * Red de seguridad contra el scroll lateral, SOLO en <html>.
 *
 * Importante: aplicarlo también a <body> convierte a este en contenedor de
 * desplazamiento y rompe `position: sticky` de la cabecera — deja de quedarse
 * fija al hacer scroll. `clip` en <html> contiene el desbordamiento sin ese
 * efecto secundario.
 */
html {
	overflow-x: clip;
	max-width: 100%;
}

body {
	font-family: var(--sw-body);
	color: var(--sw-ink);
	background: var(--sw-paper);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

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

h1,
h2,
h3,
h4 {
	font-family: var(--sw-head);
	text-transform: uppercase;
	line-height: 1.04;
	letter-spacing: 0.01em;
	margin: 0;
}

/* Foco visible y coherente en todo el sitio. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--sw-red);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * `hidden` del navegador aplica `display:none` con especificidad mínima, así
 * que cualquier `display` propio lo anula y el elemento sigue viéndose. Se
 * restablece aquí para los componentes que se ocultan desde JavaScript.
 *
 * Quedan fuera a propósito los paneles que se animan al entrar y salir
 * (menú móvil, velos y cajón de filtros): esos necesitan seguir en el flujo.
 */
[hidden]:not(.sw-mobile-panel):not(.sw-scrim):not(.sw-filters-scrim) {
	display: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Contenedor ---------- */

.sw-wrap {
	width: 100%;
	max-width: var(--sw-maxw);
	margin-inline: auto;
	padding-inline: var(--sw-gutter);
}

/*
 * WordPress separa cabecera, contenido y pie con
 * `:where(.wp-site-blocks) > * { margin-block-start: … }`.
 * El diseño controla su propio espaciado, así que se anula.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.sw-section {
	padding-block: clamp(52px, 8vw, 84px);
}

.sw-section-head {
	text-align: center;
	max-width: 660px;
	margin: 0 auto clamp(30px, 5vw, 46px);
}

.sw-section-head h2 {
	font-size: clamp(30px, 5vw, 46px);
	font-weight: 700;
	letter-spacing: 0.015em;
}

.sw-section-head p {
	color: var(--sw-grey-500);
	margin: 12px 0 0;
	font-size: clamp(15px, 1.6vw, 16.5px);
}

.sw-eyebrow {
	display: inline-block;
	font-family: var(--sw-head);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 600;
	font-size: 12.5px;
	color: var(--sw-red);
	margin-bottom: 10px;
}

.sw-eyebrow-light {
	color: color-mix(in srgb, var(--sw-red-light) 70%, #fff);
}

/* ---------- Botones ---------- */

.sw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--sw-head);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1;
	padding: 14px 24px;
	border-radius: var(--sw-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--sw-fast) var(--sw-ease),
		background-color var(--sw-fast) ease,
		color var(--sw-fast) ease,
		box-shadow var(--sw-fast) ease,
		border-color var(--sw-fast) ease;
}

.sw-btn-lg {
	padding: 16px 30px;
	font-size: 15px;
}

.sw-btn-block {
	width: 100%;
}

/* Destello que cruza el botón al pasar el cursor. */
.sw-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 28%) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.6s var(--sw-ease);
	z-index: -1;
}

.sw-btn:hover::after {
	transform: translateX(120%);
}

.sw-btn:active {
	transform: translateY(0) scale(0.985);
}

.sw-btn-red {
	background: var(--sw-red);
	color: var(--sw-on-brand);
	box-shadow: var(--sw-shadow-red);
}

.sw-btn-red:hover {
	background: var(--sw-red-dark);
	color: var(--sw-on-brand);
	transform: translateY(-2px);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--sw-red) 40%, transparent);
}

.sw-btn-dark {
	background: var(--sw-ink);
	color: #fff;
}

.sw-btn-dark:hover {
	background: #000;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--sw-shadow-lg);
}

.sw-btn-ghost {
	background: rgb(255 255 255 / 6%);
	color: #fff;
	border-color: rgb(255 255 255 / 45%);
	backdrop-filter: blur(6px);
}

.sw-btn-ghost:hover {
	background: #fff;
	color: var(--sw-ink);
	border-color: #fff;
	transform: translateY(-2px);
}

.sw-btn-ghost-dark {
	background: transparent;
	color: var(--sw-ink);
	border-color: var(--sw-grey-200);
}

.sw-btn-ghost-dark:hover {
	border-color: var(--sw-ink);
}

.sw-btn-outline {
	background: transparent;
	color: var(--sw-ink);
	border-color: var(--sw-ink);
}

.sw-btn-outline:hover {
	background: var(--sw-ink);
	color: #fff;
	transform: translateY(-2px);
}

/* ---------- Estrellas ---------- */

.sw-stars {
	display: inline-flex;
	gap: 1px;
	color: var(--sw-gold);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.5px;
}

.sw-star {
	opacity: 0.28;
}

.sw-star.is-on {
	opacity: 1;
}

/* ---------- Animaciones de entrada ---------- */

/*
 * Los elementos con .sw-reveal aparecen al entrar en pantalla.
 * El estado inicial solo se aplica si JS está activo (clase en <html>),
 * así el contenido nunca queda invisible si el script falla.
 */
.js .sw-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.65s var(--sw-ease), transform 0.65s var(--sw-ease);
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}

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

.js .sw-fade {
	opacity: 0;
	transform: translateY(18px);
	animation: sw-fade-up 0.8s var(--sw-ease) forwards;
	animation-delay: var(--d, 0ms);
}

@keyframes sw-fade-up {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .sw-reveal,
	.js .sw-fade {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sw-header-h) + 20px);
}

/* ---------- Utilidades ---------- */

.sw-hide-sm {
	display: inline-flex;
}

@media (max-width: 600px) {
	.sw-hide-sm {
		display: none;
	}
}

.sw-center-cta {
	text-align: center;
	margin-top: clamp(28px, 4vw, 44px);
}

/* ==================================================================
   404 — píldoras de categorías populares
   ================================================================== */

.sw-404-cats {
	gap: 10px !important;
}

.sw-404-cats p {
	margin: 0;
}

.sw-404-cats a {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1.5px solid var(--sw-grey-200);
	border-radius: 999px;
	background: #fff;
	font-family: var(--sw-cond);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sw-ink);
	text-decoration: none;
	transition: border-color var(--sw-fast) ease, background var(--sw-fast) ease, color var(--sw-fast) ease, transform var(--sw-fast) ease;
}

.sw-404-cats a:hover {
	border-color: var(--sw-ink);
	background: var(--sw-ink);
	color: #fff;
	transform: translateY(-2px);
}