/*
 * Footer — B001 component (brand/component-library/brand/b001-footer.md).
 * Fixed-height dark brand band: logo + single canonical tagline + optional URL.
 * Tokens per B001 spec: --smq-navy-950 / --smq-white, Inter 400/500.
 * Social links are NOT part of B001's documented input contract (logo/tagline/url only) —
 * this is a WP-01B product decision (footer social requirement) applied ahead of that doc
 * being updated. Flagged in the WP-01B report; not a silent reinterpretation of DS-002.
 */
.smq-site-footer {
	background: var(--smq-navy-950);
	color: var(--smq-white);
	width: 100%;
}
/* FOOTER VISUAL REFINEMENT V1 (Sergio's direct visual review): the SG-01 signature mark that used
   to sit above the horizontal logo is removed (see below) and .smq-b001-footer's vertical padding
   is reduced 48px -> 32px (-33%), min-height 120px -> 88px (-27%) — both within the ~20-30% more
   compact target, without cramping the band (it still centers its content with room to breathe). */
.smq-b001-footer {
	padding: var(--smq-space-5) 0;
	min-height: 88px;
	display: flex;
	align-items: center;
}
.smq-b001-inner {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--smq-space-5);
}
.smq-b001-brand {
	display: flex;
	align-items: center;
	gap: var(--smq-space-3);
}
/* Logo lockup — WP-01C-R2: same approved asset as the header (logo-cropped.png), no crop/box. */
.smq-b001-brand .smq-brand-logo {
	margin: 0;
}
.smq-b001-brand .smq-brand-logo a {
	display: block;
}
.smq-b001-brand .smq-brand-logo img {
	display: block;
	height: 36px;
	width: auto;
}
/* FOOTER VISUAL REFINEMENT V1: the SG-01 mark (brand/design-system-v2/04-component-evolution.md;
   doc not present in this repo, referenced only in the removed code comment) rendered here as a
   near-full arc — visually read as a loose "C", not the intended "Q", and sat disconnected above
   the horizontal logo. Removed from the Footer only, per Sergio's direct visual-review decision;
   its other usages (header, hero — different class names, `.smq-sg01`, not `.smq-sg01-b001`) are
   untouched. The horizontal SMQUANTUM logo is now the first and strongest element of the brand
   block. */
.smq-b001-tagline-group {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-1);
}
.smq-b001-tagline {
	font-family: var(--smq-font-text);
	font-weight: 500;
	color: var(--smq-white);
	margin: 0;
	font-size: 0.95rem;
}
/* FOOTER VISUAL REFINEMENT V1.1: smquantum.com removed from the brand block (Sergio's decision —
   redundant, the visitor is already on the site). .smq-b001-url is gone from footer.html; the rule
   that styled it is removed rather than left as dead CSS. .smq-b001-tagline-group's gap only mattered
   between 2+ children — harmless now with a single child, no layout consequence. */
/* Redes sociales — WP-01C-R6: logotipos reales reconocibles (Instagram/X/Facebook/YouTube), no
   abreviaturas en círculo. Sin assets reutilizables en el repo (auditado read-only en brand/assets,
   content/campaigns/public-launch-kit/assets y SMQuantum-Web) ni en las fuentes legacy -- SVG
   inline mínimo, monocromo, sin librería/dependencia nueva. Se sustituyen los bloques dinámicos
   `core/social-link` (que dependían del set de iconos interno de WordPress, no verificable en
   este entorno) por marcado propio, para que preview y producción sean idénticos y verificables.
   FOOTER VISUAL REFINEMENT V1 (Sergio's direct visual review — social presence was too weak):
   control area 40px -> 44px, icon 20px -> 22px, each control now gets its own subtle dark-surface
   button (soft translucent fill + border) instead of being a flat, borderless circle — reads as an
   intentional control, not a decorative afterthought, still fully reusing the existing inline SVGs
   (no new icon framework/asset).
   FOOTER VISUAL REFINEMENT V1.1 (Sergio's follow-up review — rest state still read as four grey
   utility buttons): the DARK CIRCULAR BUTTON itself is unchanged (still the same translucent navy
   fill + border, same 44px box) — only the ICON now carries its platform's real colour in the NORMAL
   resting state, not just on hover. Instagram's icon uses a genuine inline SVG gradient (defs below,
   in footer.html) rather than a flat accent, since a single colour can't read as "Instagram". Hover
   keeps the existing, already-modest background/border tint per platform — it is intentionally left
   unchanged from V1, since the icon no longer needs hover to reveal its identity. */
.smq-b001-social-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--smq-space-2);
}
.smq-b001-social-label {
	font-family: var(--smq-font-mono, var(--smq-font-text));
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smq-gray-400);
	margin: 0;
}
.smq-b001-socials {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--smq-space-3);
	margin: 0;
	padding: 0;
}
.smq-b001-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--smq-white);
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.smq-b001-social-icon {
	width: 22px;
	height: 22px;
}
.smq-b001-social-link:focus-visible {
	outline: 2px solid var(--smq-white);
	outline-offset: 2px;
}
/* V1.1 — recognizable platform colour on the ICON in the normal/rest state. The dark button surface
   (background/border) is untouched here; only `color` (and, for Instagram, the SVG's own gradient)
   changes. X intentionally has no override — it inherits the base white, which is its own correct
   "neutral" brand treatment on a dark surface. */
.smq-b001-social-link--instagram {
	color: #DD2A7B; /* fallback if the SVG gradient (footer.html defs) is ever unavailable */
}
.smq-b001-social-link--youtube {
	color: #FF0000;
}
.smq-b001-social-link--facebook {
	color: #1877F2;
}
/* Restrained per-platform accent on hover/focus — background/border only, unchanged from V1; the
   icon's colour already carries platform recognition at rest, so hover does not need to do more. */
.smq-b001-social-link--instagram:hover,
.smq-b001-social-link--instagram:focus-visible {
	background: linear-gradient(135deg, rgba(245, 133, 41, 0.24), rgba(221, 42, 123, 0.24) 55%, rgba(129, 52, 175, 0.24));
	border-color: #DD2A7B;
}
.smq-b001-social-link--youtube:hover,
.smq-b001-social-link--youtube:focus-visible {
	background: rgba(255, 0, 0, 0.16);
	border-color: #FF0000;
}
.smq-b001-social-link--facebook:hover,
.smq-b001-social-link--facebook:focus-visible {
	background: rgba(24, 119, 242, 0.16);
	border-color: #1877F2;
}
.smq-b001-social-link--x:hover,
.smq-b001-social-link--x:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--smq-white);
}

/* WEB-INTEGRATION-03C — four-family sitemap (Productos / Recursos / SMQuantum / Legal). Subordinate
   to the B001 brand band: hairline separator, same token set as the rest of the footer. Replaces the
   prior single-row Contacto/Aviso legal/Privacidad link list (CONTACT-01D §12) — those three links now
   live inside the SMQuantum and Legal columns below, alongside Membership/Series/Condiciones de uso. */
.smq-footer-nav {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* WEB-INTEGRATION-03C.1: the footer group uses the constrained layout, so this row sits in the theme's
   760px content column (the same column as the brand band and the copyright, which it stays aligned
   with). Four flex columns of 160px + 48px gaps needed 784px of the 712px available, so Legal always
   wrapped to a second row. A content-sized four-column grid fits the four families in one row inside
   that column (first column flush with the logo, last with the social row), without widening the
   footer. <=768px keeps the stacked column below. */
.smq-footer-nav-inner {
	width: min(1440px, calc(100% - 48px));
	margin: 0 auto;
	padding: var(--smq-space-5) 0;
	display: grid;
	grid-template-columns: repeat(4, max-content);
	justify-content: space-between;
	gap: var(--smq-space-5) var(--smq-space-5);
}
.smq-footer-nav-col {
	min-width: 0;
}
.smq-footer-nav-heading {
	font-family: var(--smq-font-mono, var(--smq-font-text));
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smq-gray-400);
	margin: 0 0 var(--smq-space-3);
}
.smq-footer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
}
.smq-footer-nav-list a {
	font-family: var(--smq-font-text);
	font-size: 0.9rem;
	color: var(--smq-white);
	text-decoration: none;
	transition: color 0.15s ease;
}
.smq-footer-nav-list a:hover {
	color: var(--smq-blue-interactive);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.smq-footer-nav-list a:focus-visible {
	color: var(--smq-white);
	outline: 2px solid var(--smq-white);
	outline-offset: 2px;
}
@media (max-width: 768px) {
	.smq-footer-nav-list a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Bottom bar — copyright only. Hairline separator + token set kept from the prior single-row layout. */
.smq-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.smq-footer-copyright {
	width: min(1440px, calc(100% - 48px));
	margin: 0 auto;
	padding: var(--smq-space-3) 0;
	font-family: var(--smq-font-text);
	font-size: 0.85rem;
	color: var(--smq-gray-400);
}

/* Baseline responsive (WEB-014): 375 / 768 / 1440px */
@media (max-width: 768px) {
	.smq-b001-inner {
		width: calc(100% - 32px);
		justify-content: flex-start;
	}
	.smq-footer-nav-inner {
		width: calc(100% - 32px);
		display: flex;
		flex-direction: column;
		gap: var(--smq-space-4);
	}
	.smq-footer-copyright {
		width: calc(100% - 32px);
	}
}
@media (max-width: 375px) {
	.smq-b001-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--smq-space-4);
	}
}