/* Variables de marca Basketmon
 *
 * Punto único de verdad para colores, tipografías y radios.
 * Cualquier cambio aquí se propaga a child theme + Elementor (donde sea referenciable).
 *
 * Si el cliente cambia el rojo de marca, basta con tocar --bm-color-accent (y opcionalmente
 * --bm-color-accent-hover, que se deriva visualmente).
 */

:root {
	/* ── Colores base (heredado de la referencia Tornados) ────────────── */
	--bm-color-bg:           #F8F8F7;  /* fondo principal del sitio */
	--bm-color-bg-alt:       #FFFFFF;  /* fondo de tarjetas / contraste sutil */
	--bm-color-border:       #DEDEDB;  /* separadores y bordes neutros */
	--bm-color-text:         #0F0F12;  /* texto principal — off-black tibio, no #000 puro */
	--bm-color-text-soft:    #4A4A4F;  /* texto secundario fuerte (subtítulos) */
	--bm-color-text-mute:    #A5A6AA;  /* texto secundario suave (metadatos) */

	/* ── Acento (CTAs, links, énfasis) ────────────────────────────────── */
	--bm-color-accent:       #E03821;  /* color de marca / call-to-action */
	--bm-color-accent-hover: #B82A18;  /* hover: mismo hue, luminosidad −15% */
	--bm-color-accent-soft:  #FBE8E5;  /* fondo suave del acento */
	--bm-color-accent-rgb:   224, 56, 33;  /* components RGB de l'accent, per rgba() en gradients/glows */

	/* ── Estados ──────────────────────────────────────────────────────── */
	--bm-color-success:      #2E8B57;
	--bm-color-warning:      #E0A800;
	--bm-color-danger:       #C92A2A;

	/* ── Tipografía ───────────────────────────────────────────────────── */
	--bm-font-heading: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bm-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--bm-fw-regular: 400;
	--bm-fw-medium:  500;
	--bm-fw-bold:    700;
	--bm-fw-heavy:   800;

	/* ── Tamaños / espaciados base ────────────────────────────────────── */
	--bm-radius-sm:  4px;
	--bm-radius-md:  8px;
	--bm-radius-lg:  16px;

	/* Shadows tintadas — capa neutra warm + capa accent muy diluïda.
	 * El warm-brown (60/25/20) suma "calidesa" sobre el cream, evita el grey
	 * digital. La capa accent sobre cards interactives suggereix l'interés. */
	--bm-shadow-sm: 0 1px 2px rgba(60, 25, 20, 0.06);
	--bm-shadow-md: 0 4px 16px rgba(60, 25, 20, 0.08), 0 2px 6px rgba(var(--bm-color-accent-rgb), 0.03);
	--bm-shadow-lg: 0 18px 40px rgba(60, 25, 20, 0.10), 0 6px 14px rgba(var(--bm-color-accent-rgb), 0.04);
}

/* Smooth scroll global + offset para anchors (que no queden tapados
 * por el header sticky de 88px + un poco de aire). */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ── Aplicación global de tipografía y color (suave, no agresiva) ──────
 * Mantenemos override mínimo para no pelearnos con Hello Elementor ni
 * con widgets de Elementor que tengan su propio styling. */
body,
.elementor-widget-container p,
.elementor-widget-text-editor {
	font-family: var(--bm-font-body);
	color: var(--bm-color-text);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--bm-font-heading);
	font-weight: var(--bm-fw-bold);
	color: var(--bm-color-text);
	/* Evita orfes en headlines (paraules soltes en línia pròpia). El navegador
	 * reequilibra l'última línia perquè quedi visualment ben repartida. */
	text-wrap: balance;
}

/* Paràgrafs llargs: pretty redueix les "vídues" al final del paràgraf
 * sense fer reflow agressiu. Aplica només quan el navegador ho suporta. */
p {
	text-wrap: pretty;
}

/* Nombres tabulars on apareix data o stats. Evita que cada xifra tingui
 * un ample propi i el contingut salti visualment. */
.bm-stat__num,
.bm-edicions-grid time {
	font-variant-numeric: tabular-nums;
}

/* Focus ring accessible global per a interactius. Elementor i Hello deixen
 * el ring del navegador per defecte; aquí donem un ring acolorit que
 * encaixa amb el accent de la marca. Aplica només a teclat (focus-visible). */
:focus-visible {
	outline: 2px solid var(--bm-color-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
/* Excepció: dins els inputs ja gestionem focus amb box-shadow. Evitem
 * que el ring outline trenqui el border-radius del camp. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wpcf7-form-control:focus-visible {
	outline: none;
}

a {
	color: var(--bm-color-accent);
	transition: color .15s ease;
}
a:hover,
a:focus-visible {
	color: var(--bm-color-accent-hover);
}

/* ── Accent global: span dentro de cualquier título ───────────────────
 * Replicado del patrón de la home. Antes solo aplicaba a .page-id-7;
 * ahora es global así que cualquier seed/PHP puede usar
 * <span class="bm-accent">palabra</span> y queda en color accent inline. */
.bm-accent,
.elementor-heading-title .bm-accent,
h1 .bm-accent, h2 .bm-accent, h3 .bm-accent,
h4 .bm-accent, h5 .bm-accent, h6 .bm-accent {
	color: var(--bm-color-accent) !important;
	display: inline !important;
}

/* ── Cierre limpio: cero gap entre la última sección y el footer ──────
 * Hello Elementor mete un margin-bottom por defecto en .elementor que
 * deja una franja blanca antes del footer. Aplicamos el reset GLOBAL
 * (antes solo aplicaba a .page-id-7). */
.bm-site-content,
.bm-site-content > .elementor,
.bm-site-content .elementor-section-wrap {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.bm-site-content > main:last-child,
.bm-site-content > main > section:last-child,
.bm-site-content > .elementor .elementor-section:last-child {
	margin-bottom: 0 !important;
}
.bm-site-footer {
	margin-top: 0 !important;
}