/**
 * Herramat design system — visual direction v5 (pasada agresiva mockups)
 * ---------------------------------------------------------------------------
 * Marca: #200C80
 * Tipografía global: Montserrat (300/400 body · 500/600 títulos) — sin condensadas
 * Contenedor: --hm-max 1280–1440px
 * Motion: 150–300ms · prefers-reduced-motion obligatorio
 * Vértices: --hm-radius* = 0 (esquinas a 90°, sin border-radius)
 * Color: solo plenos (sólidos). Prohibido linear/radial/conic-gradient.
 *         Sin tokens --hm-gradient*. Overlays de foto: rgba() sólido OK.
 * ---------------------------------------------------------------------------
 */

:root {
	/* Brand */
	--hm-brand: #200c80;
	--hm-brand-dark: #16085c;
	--hm-brand-deep: #0a0428;
	--hm-brand-soft: rgba(32, 12, 128, 0.06);
	--hm-brand-glow: rgba(32, 12, 128, 0.12);

	/* Neutrals — muted darkened for WCAG body text on paper */
	--hm-ink: #12121a;
	--hm-muted: #4a4a55;
	--hm-muted-soft: #5c5c68;
	--hm-line: #e5e5e8;
	--hm-line-strong: rgba(32, 12, 128, 0.28);
	--hm-paper: #f3f3f5;
	--hm-paper-warm: #ececef;
	--hm-mist: #efeff2;
	--hm-white: #ffffff;
	--hm-footer: #f3f3f5;
	--hm-footer-ink: #12121a;
	--hm-footer-bar: #200c80;
	--hm-ig-strip: #200c80;
	--hm-ribbon: #200c80;
	/* WhatsApp teal darkened for #fff text ≥4.5:1 (lab: #128c7e → 4.13) */
	--hm-wa: #0a6b5c;
	--hm-wa-dark: #08574b;

	/* Layout — ritmo generoso, gutters ~48px desktop */
	--hm-max: 1360px;
	--hm-header-h: 76px;
	--hm-topbar-h: 36px;
	--hm-section-y: clamp(4.25rem, 7.5vw, 6.75rem);
	--hm-section-y-sm: clamp(2.85rem, 4.5vw, 4rem);
	--hm-gutter: clamp(1.5rem, 3.5vw + 0.5rem, 3rem);
	--hm-card-gap: clamp(1rem, 2vw, 1.35rem);

	/* Radius & elevation — siempre 0; sombras mínimas */
	--hm-radius: 0;
	--hm-radius-md: 0;
	--hm-radius-lg: 0;
	--hm-shadow: 0 10px 28px rgba(18, 18, 26, 0.06);
	--hm-shadow-sm: 0 4px 12px rgba(18, 18, 26, 0.045);
	--hm-shadow-float: 0 14px 32px rgba(18, 18, 26, 0.08);

	/* Type — Montserrat only */
	--hm-font-display: "Montserrat", "Segoe UI", sans-serif;
	--hm-font-body: "Montserrat", "Segoe UI", sans-serif;
	/* Pesos cargados: 400 + 600 (medium → semibold) */
	--hm-fw-light: 400;
	--hm-fw-regular: 400;
	--hm-fw-medium: 600;
	--hm-fw-semibold: 600;

	/* Motion */
	--hm-ease: 220ms cubic-bezier(0.22, 1, 0.36, 1);
	--hm-ease-fast: 160ms ease-out;
	--hm-ease-out: 320ms cubic-bezier(0.22, 1, 0.36, 1);
	--hm-stagger: 45ms;
}

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.hm-reveal,
	.hm-stagger > *,
	[data-hm-reveal]:not(.is-inview):not(.is-visible):not(.is-in) {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

body {
	margin: 0;
	color: var(--hm-ink);
	background: var(--hm-white);
	font-family: var(--hm-font-body);
	font-weight: var(--hm-fw-light);
	font-size: 16px;
	line-height: 1.65;
	letter-spacing: 0.01em;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body strong,
body b {
	font-weight: var(--hm-fw-medium);
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--hm-ease-fast);
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button,
input {
	font: inherit;
}

.hm-container,
.wf-container {
	width: min(calc(100% - (var(--hm-gutter) * 2)), var(--hm-max));
	margin-inline: auto;
}

.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;
}

/* —— Typography —— */
.hm-display,
.wf-display,
h1, h2, h3 {
	font-family: var(--hm-font-display);
	font-weight: var(--hm-fw-medium);
	line-height: 1.18;
	letter-spacing: -0.022em;
	text-transform: none;
	color: var(--hm-ink);
}

h1 {
	font-weight: var(--hm-fw-semibold);
	line-height: 1.12;
	letter-spacing: -0.028em;
}

h2 {
	font-weight: var(--hm-fw-medium);
	letter-spacing: -0.02em;
}

h3 {
	font-weight: var(--hm-fw-medium);
	letter-spacing: -0.015em;
}

.hm-eyebrow,
.wf-eyebrow {
	margin: 0 0 0.7rem;
	color: var(--hm-brand);
	font-weight: var(--hm-fw-medium);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hm-lead,
.wf-lead {
	color: var(--hm-muted);
	font-weight: var(--hm-fw-light);
	font-size: 1.0625rem;
	line-height: 1.7;
	letter-spacing: 0.01em;
	max-width: 52ch;
}

.hm-text-link,
.wf-text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--hm-brand);
	font-weight: var(--hm-fw-medium);
	font-size: 0.92rem;
	transition: gap var(--hm-ease), color var(--hm-ease);
}

.hm-text-link:hover,
.wf-text-link:hover {
	gap: 0.65rem;
	color: var(--hm-brand-dark);
}

/* —— Buttons —— */
.hm-btn,
.wf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 50px;
	padding: 0 1.5rem;
	border-radius: 0;
	border: 1.5px solid transparent;
	font-family: var(--hm-font-body);
	font-weight: var(--hm-fw-medium);
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition:
		background var(--hm-ease),
		color var(--hm-ease),
		border-color var(--hm-ease),
		transform var(--hm-ease),
		box-shadow var(--hm-ease);
}

.hm-btn:hover,
.wf-btn:hover {
	transform: translateY(-2px);
}

.hm-btn:active,
.wf-btn:active {
	transform: translateY(0);
}

.hm-btn:focus-visible,
.wf-btn:focus-visible {
	outline: 2px solid var(--hm-brand);
	outline-offset: 2px;
}

.hm-btn--primary,
.wf-btn--primary {
	background: var(--hm-brand);
	color: #fff;
}

.hm-btn--primary:hover,
.wf-btn--primary:hover {
	background: var(--hm-brand-dark);
	color: #fff;
	box-shadow: var(--hm-shadow-sm);
}

.hm-btn--secondary,
.wf-btn--secondary {
	background: transparent;
	color: var(--hm-brand);
	border-color: var(--hm-brand);
}

.hm-btn--secondary:hover,
.wf-btn--secondary:hover {
	background: var(--hm-brand-soft);
	color: var(--hm-brand);
}

.hm-btn--ghost,
.wf-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.85);
}

.hm-btn--ghost:hover,
.wf-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: #fff;
}

/* WhatsApp — verde accesible, vértices 90°, sin gradients */
.hm-btn--wa,
.wf-btn--wa,
.hm-btn--whatsapp {
	position: relative;
	border-radius: 0;
	background: var(--hm-wa);
	color: #fff;
	border-color: var(--hm-wa);
	border-width: 1.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: none;
	padding-inline: 1.45rem;
}

.hm-btn--wa:hover,
.wf-btn--wa:hover,
.hm-btn--whatsapp:hover {
	background: var(--hm-wa-dark);
	color: #fff;
	border-color: var(--hm-wa-dark);
	box-shadow: none;
}

.hm-btn--wa .hm-wa-mark,
.wf-btn--wa .hm-wa-mark,
.hm-btn--whatsapp .hm-wa-mark {
	color: #fff;
	flex-shrink: 0;
}

/* Sobre bandas navy: sigue verde WhatsApp (borde blanco fino por contraste) */
.hm-cta-band .hm-btn--wa,
.hm-cta-band .hm-btn--whatsapp,
.hm-help-cta .hm-btn--wa,
.hm-help-cta .hm-btn--whatsapp,
.hm-btn--wa-on-dark,
.hm-btn--whatsapp-on-dark {
	background: var(--hm-wa);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.95);
	box-shadow: none;
}

.hm-cta-band .hm-btn--wa:hover,
.hm-cta-band .hm-btn--whatsapp:hover,
.hm-help-cta .hm-btn--wa:hover,
.hm-help-cta .hm-btn--whatsapp:hover,
.hm-btn--wa-on-dark:hover,
.hm-btn--whatsapp-on-dark:hover {
	background: var(--hm-wa-dark);
	color: #fff;
	border-color: #fff;
	box-shadow: none;
}

.hm-btn--sm,
.wf-btn--sm {
	min-height: 40px;
	padding: 0 1rem;
	font-size: 0.88rem;
}

/* —— Icons —— */
.hm-icon,
.wf-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--hm-brand);
	transition: transform var(--hm-ease), color var(--hm-ease);
}

/* Redes: toma color del <a> padre (blanco en navy, brand en fondos claros). */
.hm-icon--social {
	color: inherit;
}

.hm-icon svg,
.wf-icon svg {
	width: 100%;
	height: 100%;
}

.hm-icon--sm { width: 18px; height: 18px; }
.hm-icon--md { width: 26px; height: 26px; }
.hm-icon--lg { width: 36px; height: 36px; }
.hm-icon--xl { width: 48px; height: 48px; }

a:hover .hm-icon:not(.hm-wa-mark),
button:hover .hm-icon:not(.hm-wa-mark),
.hm-mega__parent:hover .hm-icon,
.hm-catalog-cats__link:hover .hm-icon,
.hm-cat-card:hover .hm-icon {
	transform: translateY(-1px);
}

.hm-wa-mark {
	color: inherit;
	display: block;
	flex-shrink: 0;
}

/* —— Section chrome —— */
.hm-section,
.wf-section {
	padding: var(--hm-section-y) 0;
}

.hm-section--paper,
.wf-section--paper {
	background: var(--hm-paper);
}

.hm-section--mist,
.wf-section--mist {
	background: var(--hm-mist);
}

.hm-section__head,
.wf-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.hm-section__head--center,
.wf-section__head--center {
	justify-content: center;
	text-align: center;
}

.hm-section__head h2,
.wf-section__head h2 {
	margin: 0;
	font-family: var(--hm-font-display);
	font-size: clamp(1.65rem, 2.8vw, 2.2rem);
	font-weight: var(--hm-fw-semibold);
	text-transform: none;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--hm-ink);
}

.hm-section__title--brand,
.wf-section__title--brand {
	color: var(--hm-brand) !important;
}

.hm-section__sub,
.wf-section__sub {
	margin: 0.35rem 0 0;
	color: var(--hm-muted);
	font-weight: var(--hm-fw-light);
	font-size: 0.98rem;
}

.hm-section__footer,
.wf-section__footer {
	margin-top: 2rem;
	text-align: center;
}

/* —— Cards —— */
.hm-card,
.wf-card {
	background: var(--hm-white);
	border: 1px solid var(--hm-line);
	border-radius: 0;
	overflow: hidden;
	transition: transform var(--hm-ease), box-shadow var(--hm-ease), border-color var(--hm-ease);
}

.hm-card:hover,
.wf-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hm-shadow);
	border-color: var(--hm-line-strong);
}

/* —— Motion: reveal + stagger —— */
.hm-reveal,
[data-hm-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--hm-ease-out),
		transform var(--hm-ease-out);
}

.hm-reveal.is-inview,
.hm-reveal.is-visible,
.hm-reveal.is-in,
[data-hm-reveal].is-inview,
[data-hm-reveal].is-visible,
[data-hm-reveal].is-in {
	opacity: 1;
	transform: none;
}

.hm-stagger > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--hm-ease-out),
		transform var(--hm-ease-out);
}

.hm-stagger.is-inview > *:nth-child(1),
.hm-stagger.is-visible > *:nth-child(1) { transition-delay: calc(var(--hm-stagger) * 0); }
.hm-stagger.is-inview > *:nth-child(2),
.hm-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--hm-stagger) * 1); }
.hm-stagger.is-inview > *:nth-child(3),
.hm-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--hm-stagger) * 2); }
.hm-stagger.is-inview > *:nth-child(4),
.hm-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--hm-stagger) * 3); }
.hm-stagger.is-inview > *:nth-child(5),
.hm-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--hm-stagger) * 4); }
.hm-stagger.is-inview > *:nth-child(6),
.hm-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--hm-stagger) * 5); }
.hm-stagger.is-inview > *:nth-child(7),
.hm-stagger.is-visible > *:nth-child(7) { transition-delay: calc(var(--hm-stagger) * 6); }
.hm-stagger.is-inview > *:nth-child(8),
.hm-stagger.is-visible > *:nth-child(8) { transition-delay: calc(var(--hm-stagger) * 7); }
.hm-stagger.is-inview > *:nth-child(9),
.hm-stagger.is-visible > *:nth-child(9) { transition-delay: calc(var(--hm-stagger) * 8); }
.hm-stagger.is-inview > *:nth-child(10),
.hm-stagger.is-visible > *:nth-child(10) { transition-delay: calc(var(--hm-stagger) * 9); }
.hm-stagger.is-inview > *:nth-child(11),
.hm-stagger.is-visible > *:nth-child(11) { transition-delay: calc(var(--hm-stagger) * 10); }
.hm-stagger.is-inview > *:nth-child(12),
.hm-stagger.is-visible > *:nth-child(12) { transition-delay: calc(var(--hm-stagger) * 11); }

.hm-stagger.is-inview > *,
.hm-stagger.is-visible > *,
.hm-stagger.is-in > * {
	opacity: 1;
	transform: none;
}

@media (scripting: none) {
	.hm-reveal,
	[data-hm-reveal],
	.hm-stagger > * {
		opacity: 1;
		transform: none;
	}
}

/* —— Provisional markers —— */
.hm-provisional,
.wf-provisional {
	display: inline-block;
	margin: 0 0 0.65rem;
	padding: 0.18rem 0.5rem;
	border: 1px dashed var(--hm-line-strong);
	border-radius: 0;
	background: rgba(32, 12, 128, 0.04);
	color: var(--hm-brand);
	font-size: 0.68rem;
	font-weight: var(--hm-fw-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* —— Media placeholders (sólidos; sin degradés) —— */
.hm-ph,
.wf-ph {
	background: #d0d2dc;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hm-muted);
	font-size: 0.85rem;
	font-weight: var(--hm-fw-medium);
}

.hm-ph--steel,
.wf-ph--steel {
	background: #8a8e9a;
}

.hm-ph--yard,
.wf-ph--yard {
	background: #aeb2bc;
}