/**
 * Replika Agency - Sistema visual premium
 * Estructura: tokens → base → layout → header → hero → secciones → componentes → blog → responsive → animaciones
 *
 * @package Replika_Agency
 */

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
	--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

	/* Contenedores */
	--container: min(100% - 3rem, 75rem);
	--container-narrow: min(100% - 3rem, 46rem);

	/* Escala tipográfica fluid */
	--text-xs: 0.75rem;
	--text-sm: 0.8125rem;
	--text-caption: 0.875rem;
	--text-base: 0.9375rem;
	--text-md: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;

	/* Espaciado (escala 4px) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--section-gap: clamp(4.5rem, 8vw, 7rem);

	/* Aliases de spacing legacy (retrocompatibilidad con clases) */
	--space-xs: var(--space-1);
	--space-sm: var(--space-2);
	--space-md: var(--space-4);
	--space-lg: var(--space-6);
	--space-xl: var(--space-8);
	--space-2xl: var(--space-12);
	--space-3xl: var(--space-16);

	/* Paleta — Oscuro premium con tonos azul-violeta */
	--color-bg:           #07070a;
	--color-bg-elevated:  #0e0e14;
	--color-bg-subtle:    #13131b;
	--color-bg-card:      #111118;
	--color-surface:      #16161f;

	--color-text:         #f0f0f3;
	--color-text-muted:   #7c7c8a;
	--color-text-faint:   #4a4a56;
	--color-text-accent:  var(--color-accent);

	--color-border:       rgba(255, 255, 255, 0.06);
	--color-border-hover: rgba(255, 255, 255, 0.12);

	/* Acentos */
	--color-accent:       #818cf8;
	--color-accent-hover: #6366f1;
	--color-accent-text:  #a5b4fc;
	--color-accent-rgb:   129, 140, 248;

	--color-secondary:    #38bdf8;
	--color-secondary-rgb: 56, 189, 248;

	--color-success:      #34d399;
	--color-error:        #f87171;

	/* Acento con alpha */
	--accent-dim:            rgba(var(--color-accent-rgb), 0.08);
	--accent-dim-2:          rgba(var(--color-accent-rgb), 0.12);
	--accent-border:         rgba(var(--color-accent-rgb), 0.15);
	--accent-border-strong:  rgba(var(--color-accent-rgb), 0.25);
	--accent-hover-soft:     rgba(var(--color-accent-rgb), 0.20);
	--accent-hover-mid:      rgba(var(--color-accent-rgb), 0.30);
	--accent-glow:           rgba(var(--color-accent-rgb), 0.04);
	--accent-glow-hero:      rgba(var(--color-accent-rgb), 0.10);

	/* Gradientes reutilizables */
	--gradient-accent: linear-gradient(135deg, #818cf8, #6366f1);
	--gradient-accent-full: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #38bdf8 100%);
	--gradient-text: linear-gradient(135deg, #c7d2fe, #818cf8 40%, #38bdf8 100%);
	--gradient-glow: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.15), transparent 70%);
	--gradient-card-border: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.3), rgba(var(--color-secondary-rgb), 0.1), transparent 60%);

	/* Componentes */
	--header-height: 4rem;
	--radius: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-full: 9999px;
	--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

	/* Sombras */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
	--shadow-glow: 0 0 40px rgba(var(--color-accent-rgb), 0.12);
	--shadow-glow-strong: 0 0 60px rgba(var(--color-accent-rgb), 0.2);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.hero-scroll-line { animation: none; }
	.reveal { opacity: 1 !important; transform: none !important; }
}

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

html {
	scroll-behavior: smooth;
}

body.replika-body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

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

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

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--text-caption);
	transition: top var(--transition);
}

.skip-link:focus {
	top: var(--space-4);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

.container--narrow,
.container-narrow {
	max-width: var(--container-narrow);
}

.site-main {
	min-height: 50vh;
}

.section {
	padding-block: var(--section-gap);
	position: relative;
}

.section-header {
	text-align: center;
	margin-bottom: var(--space-12);
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.section-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	padding: var(--space-1) var(--space-4);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	background: var(--accent-dim);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-full);
}

.section-title {
	margin: 0 0 var(--space-4);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.15;
}

.section-subtitle {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-text-muted);
	line-height: 1.7;
	max-width: 42ch;
	margin-inline: auto;
}

.section-actions {
	text-align: center;
	margin-top: var(--space-10);
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   Header — Frosted glass
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--header-height);
	background: rgba(7, 7, 10, 0.7);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border-bottom: 1px solid var(--color-border);
	transition: background var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
	background: rgba(7, 7, 10, 0.88);
	box-shadow: 0 1px 24px rgba(0, 0, 0, 0.4);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

.site-brand {
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: var(--text-base);
	letter-spacing: 0.08em;
	transition: opacity var(--transition);
}

.site-brand:hover {
	opacity: 0.85;
}

.site-brand img {
	max-height: 1.75rem;
	width: auto;
}

.site-logo-text {
	color: var(--color-text);
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Menú móvil: hamburguesa */
.nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-text);
	cursor: pointer;
	transition: color var(--transition);
}

.nav-toggle:hover {
	color: var(--color-accent);
}

.nav-toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform var(--transition), opacity var(--transition);
}

.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Navegación */
.nav-primary {
	position: fixed;
	inset: 0;
	top: var(--header-height);
	background: rgba(7, 7, 10, 0.96);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	visibility: hidden;
	opacity: 0;
	transition: visibility var(--transition), opacity var(--transition);
	overflow-y: auto;
}

.nav-primary.is-open {
	visibility: visible;
	opacity: 1;
}

.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.nav-menu a {
	display: block;
	padding: var(--space-3) 0;
	font-size: var(--text-md);
	font-weight: 500;
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.nav-menu a:hover,
.nav-menu .current-menu-item a {
	color: var(--color-text);
}

.nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-4);
	padding: var(--space-2) var(--space-6);
	background: var(--gradient-accent);
	color: #fff;
	font-weight: 600;
	font-size: var(--text-caption);
	border-radius: var(--radius);
	transition: opacity var(--transition), box-shadow var(--transition);
	box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.15);
}

.nav-cta:hover {
	opacity: 0.9;
	box-shadow: var(--shadow-glow);
	color: #fff;
}

.nav-cta:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	.nav-toggle { display: none; }

	.nav-primary {
		position: static;
		flex-direction: row;
		align-items: center;
		padding: 0;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		visibility: visible;
		opacity: 1;
		overflow: visible;
	}

	.nav-menu {
		flex-direction: row;
		gap: var(--space-6);
	}

	.nav-menu a {
		padding: var(--space-2) 0;
		font-size: var(--text-caption);
		position: relative;
	}

	.nav-menu a::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 1px;
		background: var(--gradient-accent);
		transition: width var(--transition);
	}

	.nav-menu a:hover::after,
	.nav-menu .current-menu-item a::after {
		width: 100%;
	}

	.nav-cta {
		margin-top: 0;
		margin-left: var(--space-5);
	}
}

/* ==========================================================================
   Hero — Inmersivo
   ========================================================================== */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: min(94vh, 820px);
	padding-block: var(--space-16);
	padding-block-end: var(--space-12);
	text-align: center;
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--color-accent-rgb), 0.12), transparent 50%),
		radial-gradient(ellipse 60% 40% at 100% 50%, rgba(99, 102, 241, 0.06), transparent 50%),
		radial-gradient(ellipse 50% 35% at 0% 60%, rgba(var(--color-secondary-rgb), 0.04), transparent 50%);
	pointer-events: none;
}

.hero-bg-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 72px 72px;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, black 0%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, black 0%, transparent 80%);
}

.hero-bg-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	animation: glow-float 12s ease-in-out infinite alternate;
}

.hero-bg-glow--1 {
	width: 400px;
	height: 400px;
	top: -100px;
	right: -100px;
	background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 70%);
}

.hero-bg-glow--2 {
	width: 300px;
	height: 300px;
	bottom: 5%;
	left: -80px;
	background: radial-gradient(circle, rgba(var(--color-secondary-rgb), 0.04) 0%, transparent 70%);
	animation-delay: -6s;
}

.hero-bg-glow--3 {
	width: 200px;
	height: 200px;
	top: 45%;
	left: 50%;
	background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.03) 0%, transparent 70%);
	animation-delay: -3s;
}

@keyframes glow-float {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(15px, -20px) scale(1.1); }
}

.hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-5);
	margin-bottom: var(--space-8);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	background: var(--accent-dim);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-full);
}

.hero-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.6);
	animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(0.7); }
}

.hero-title {
	margin: 0 0 var(--space-6);
	font-size: clamp(2.25rem, 6vw + 0.5rem, 4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.04em;
	max-width: 20ch;
	margin-inline: auto;
}

.hero-title-accent {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 800;
}

.hero-subtitle {
	margin: 0 0 var(--space-6);
	max-width: 38rem;
	margin-inline: auto;
	font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
	color: var(--color-text-muted);
	line-height: 1.7;
}

.hero-audience {
	margin: 0 0 var(--space-10);
	font-size: var(--text-base);
	color: var(--color-text-faint);
	max-width: 28rem;
	margin-inline: auto;
	line-height: 1.5;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
	margin-bottom: var(--space-12);
}

.hero-cta-primary {
	min-width: 12rem;
}

.hero-cta-secondary {
	border-color: var(--color-border);
}

.hero-cta-secondary:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: var(--accent-dim);
}

.hero-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	letter-spacing: 0.01em;
}

.hero-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
}

.hero-trust-icon {
	flex-shrink: 0;
	color: var(--color-accent);
	opacity: 0.7;
}

.hero-scroll {
	position: absolute;
	bottom: var(--space-8);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.625rem;
	color: var(--color-text-faint);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.hero-scroll-line {
	display: block;
	width: 1px;
	height: 2rem;
	background: linear-gradient(to bottom, rgba(var(--color-accent-rgb), 0.4), transparent);
	border-radius: 1px;
	animation: hero-scroll-pulse 2.5s ease-in-out infinite;
}

@keyframes hero-scroll-pulse {
	0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
	50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@media (max-width: 640px) {
	.hero {
		min-height: min(90vh, 700px);
		padding-block: var(--space-12);
	}
	.hero-title { max-width: none; }
	.hero-actions {
		flex-direction: column;
		width: 100%;
		max-width: 20rem;
		margin-inline: auto;
	}
	.hero-actions .btn { width: 100%; }
	.hero-trust { gap: var(--space-2); }
}

/* ==========================================================================
   Botones — Premium
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.75rem 1.75rem;
	font-family: inherit;
	font-size: var(--text-caption);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition:
		background var(--transition),
		color var(--transition),
		border-color var(--transition),
		box-shadow var(--transition),
		transform var(--transition);
}

.btn:active {
	transform: scale(0.97);
}

.btn-primary {
	background: var(--gradient-accent);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 0 24px rgba(var(--color-accent-rgb), 0.15), inset 0 1px 0 rgba(255,255,255,0.12);
}

.btn-primary:hover {
	box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.15);
	color: #fff;
	transform: translateY(-1px);
}

.btn-outline {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border-hover);
}

.btn-outline:hover {
	border-color: rgba(var(--color-accent-rgb), 0.3);
	background: var(--accent-dim);
	color: var(--color-text);
}

.btn-ghost {
	background: transparent;
	color: var(--color-text-muted);
	border-color: var(--color-border-hover);
}

.btn-ghost:hover {
	color: var(--color-text);
	border-color: var(--color-border-hover);
	background: rgba(255, 255, 255, 0.03);
}

.btn-sm {
	padding: 0.5rem 1.125rem;
	font-size: var(--text-sm);
}

.btn-lg {
	padding: 0.875rem 2.25rem;
	font-size: var(--text-base);
	border-radius: var(--radius-lg);
}

.btn-icon {
	flex-shrink: 0;
	transition: transform var(--transition);
}

.btn:hover .btn-icon {
	transform: translateX(3px);
}

/* ==========================================================================
   Métricas — Social proof
   ========================================================================== */
.section-metrics {
	padding-block: var(--space-12);
	background: var(--color-bg-elevated);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.metrics-grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
}

.metric-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.metric-value {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.metric-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.4;
}

@media (min-width: 768px) {
	.metrics-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-12);
	}
}

/* ==========================================================================
   Beneficios
   ========================================================================== */
.section-benefits {
	background: var(--color-bg-elevated);
}

.benefits-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.benefit-card {
	position: relative;
	padding: var(--space-8);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition), box-shadow var(--transition-slow), transform var(--transition);
	overflow: hidden;
}

.benefit-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.04), transparent 50%);
	opacity: 0;
	transition: opacity var(--transition-slow);
	pointer-events: none;
}

.benefit-card:hover {
	border-color: var(--accent-border-strong);
	box-shadow: var(--shadow-glow);
	transform: translateY(-3px);
}

.benefit-card:hover::before {
	opacity: 1;
}

.benefit-card-num {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-faint);
}

.benefit-card-icon {
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-dim);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-lg);
	color: var(--color-accent);
}

.benefit-card-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.benefit-card-title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.benefit-card-desc {
	margin: 0;
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.65;
}

@media (min-width: 640px) {
	.benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.benefits-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-6);
	}
}

/* ==========================================================================
   Problemas que resolvemos
   ========================================================================== */
.section-problems {
	background: var(--color-bg);
}

.problems-grid {
	list-style: none;
	margin: 0 0 var(--space-12);
	padding: 0;
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.problem-item {
	padding: var(--space-8);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition), box-shadow var(--transition-slow);
	position: relative;
	overflow: hidden;
}

.problem-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background: var(--gradient-accent);
	opacity: 0;
	transition: opacity var(--transition);
}

.problem-item:hover {
	border-color: var(--accent-border);
	box-shadow: var(--shadow-md);
}

.problem-item:hover::before {
	opacity: 1;
}

.problem-item-label {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.problem-item-title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.problem-item-desc {
	margin: 0;
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.65;
}

.problems-for {
	text-align: center;
	padding: var(--space-12);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	position: relative;
	overflow: hidden;
}

.problems-for::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
	opacity: 0.5;
}

.problems-for-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.problems-for-desc {
	margin: 0 0 var(--space-8);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.7;
	max-width: 42ch;
	margin-inline: auto;
}

.problem-card {
	padding: var(--space-8);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition), box-shadow var(--transition-slow);
	position: relative;
	overflow: hidden;
}

.problem-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background: var(--gradient-accent);
	opacity: 0;
	transition: opacity var(--transition);
}

.problem-card:hover {
	border-color: var(--accent-border);
	box-shadow: var(--shadow-md);
}

.problem-card:hover::before {
	opacity: 1;
}

.problem-card-icon {
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-dim);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-lg);
	color: var(--color-accent);
}

.problem-card-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.problem-card-title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.problem-card-desc {
	margin: 0;
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.65;
}

.problems-cta {
	text-align: center;
	margin-top: var(--space-10);
	padding: var(--space-10);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	position: relative;
	overflow: hidden;
}

.problems-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
	opacity: 0.4;
}

.problems-cta-text {
	margin: 0 0 var(--space-6);
	font-size: var(--text-md);
	color: var(--color-text-muted);
}

@media (min-width: 640px) {
	.problems-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.problems-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Servicios — Tarjetas con glow
   ========================================================================== */
.services-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.service-card {
	padding: var(--space-8);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition), box-shadow var(--transition-slow), transform var(--transition);
	position: relative;
	overflow: hidden;
}

.service-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at 50% 0%, rgba(var(--color-accent-rgb), 0.06), transparent 60%);
	opacity: 0;
	transition: opacity var(--transition-slow);
	pointer-events: none;
}

.service-card:hover {
	border-color: var(--accent-border-strong);
	box-shadow: var(--shadow-glow);
	transform: translateY(-3px);
}

.service-card:hover::after {
	opacity: 1;
}

.service-card-icon {
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-dim-2);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-lg);
	color: var(--color-accent);
	transition: box-shadow var(--transition);
}

.service-card:hover .service-card-icon {
	box-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.2);
}

.service-card-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.service-card-title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.service-card-desc {
	margin: 0;
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.65;
}

.service-card-num {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-faint);
}

.service-card-result {
	display: block;
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-accent);
	letter-spacing: 0.02em;
}

.service-card--featured {
	border-color: var(--accent-border);
	background: linear-gradient(135deg, var(--color-bg-card), rgba(var(--color-accent-rgb), 0.03));
}

@media (min-width: 640px) {
	.services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.services-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6);
	}
}

/* ==========================================================================
   Proceso — Timeline
   ========================================================================== */
.process-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-8);
	counter-reset: step;
	position: relative;
}

.process-step {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: auto 1fr;
	align-items: start;
	counter-increment: step;
}

.process-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-accent);
	background: var(--accent-dim-2);
	border: 1px solid var(--accent-border-strong);
	border-radius: var(--radius-lg);
	position: relative;
	z-index: 1;
	transition: box-shadow var(--transition);
}

.process-step:hover .process-step-num {
	box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.2);
}

.process-step-content {
	min-width: 0;
}

.process-step-title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.process-step-desc {
	margin: 0;
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.65;
}

@media (min-width: 768px) {
	.process-list {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-6);
	}

	.process-list::before {
		content: '';
		position: absolute;
		top: 1.5rem;
		left: 12%;
		right: 12%;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--color-accent) 20%, var(--color-accent) 80%, transparent);
		opacity: 0.25;
	}

	.process-step {
		grid-template-columns: 1fr;
		text-align: center;
		align-items: center;
	}

	.process-step-num {
		margin-inline: auto;
	}
}

.process-step-time {
	display: block;
	margin-top: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-accent);
	letter-spacing: 0.02em;
	opacity: 0.8;
}

/* ==========================================================================
   Por qué nosotros
   ========================================================================== */
.why-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.why-item {
	padding: var(--space-8);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition), box-shadow var(--transition-slow);
}

.why-item:hover {
	border-color: var(--accent-border);
	box-shadow: var(--shadow-md);
}

.why-item-title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	letter-spacing: -0.01em;
}

.why-item-title::before {
	content: '';
	width: 3px;
	height: 1.2em;
	background: var(--gradient-accent);
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.why-item-desc {
	margin: 0;
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.65;
	padding-left: calc(3px + var(--space-4));
}

.why-comparison {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.why-col {
	padding: var(--space-10);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
}

.why-col--others {
	background: var(--color-bg-card);
}

.why-col--us {
	background: linear-gradient(135deg, var(--color-bg-card), rgba(var(--color-accent-rgb), 0.04));
	border-color: var(--accent-border-strong);
	position: relative;
	overflow: hidden;
}

.why-col--us::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gradient-accent-full);
}

.why-col-title {
	margin: 0 0 var(--space-8);
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.why-col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.why-col-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.5;
}

.why-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.why-icon--no {
	color: var(--color-text-faint);
	opacity: 0.6;
}

.why-icon--yes {
	color: var(--color-accent);
}

.why-col--us .why-col-list li {
	color: var(--color-text);
}

@media (min-width: 768px) {
	.why-comparison {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 640px) {
	.why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.why-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Casos de uso
   ========================================================================== */
.cases-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.case-card {
	padding: var(--space-8);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition), box-shadow var(--transition-slow), transform var(--transition);
	position: relative;
	overflow: hidden;
}

.case-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gradient-accent-full);
	opacity: 0;
	transition: opacity var(--transition);
}

.case-card:hover {
	border-color: var(--accent-border);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.case-card:hover::before {
	opacity: 1;
}

.case-card-tag {
	display: inline-block;
	margin-bottom: var(--space-5);
	padding: var(--space-1) var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	background: var(--accent-dim);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius);
}

.case-card-title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.case-card-desc {
	margin: 0;
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.65;
}

.case-card-result {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.case-card-result-label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-1);
}

.case-card-result-value {
	display: block;
	font-size: var(--text-caption);
	font-weight: 500;
	color: var(--color-text);
	line-height: 1.4;
}

.case-card--highlight {
	border-color: var(--accent-border);
	background: linear-gradient(135deg, var(--color-bg-card), rgba(var(--color-accent-rgb), 0.04));
}

.case-card--highlight::before {
	opacity: 1;
}

@media (min-width: 640px) {
	.cases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.cases-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   FAQ — Acordeón refinado
   ========================================================================== */
.faq-list {
	margin: 0;
	padding: 0;
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.faq-question {
	margin: 0;
	margin-top: 0;
}

.faq-answer-inner {
	display: block;
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.7;
}

.faq-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-6) 0;
	background: none;
	border: none;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--text-md);
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: color var(--transition);
	letter-spacing: -0.01em;
}

.faq-trigger:hover {
	color: var(--color-accent);
}

.faq-item.is-open .faq-trigger {
	color: var(--color-accent);
	border-bottom-color: var(--accent-border);
}

.faq-trigger::after {
	content: '';
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transition);
}

.faq-trigger[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.faq-answer {
	margin: 0 0 var(--space-4);
	padding: var(--space-4) 0 var(--space-6);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.7;
}

.faq-answer[hidden] {
	display: none;
}

.faq-layout {
	display: grid;
	gap: var(--space-12);
	grid-template-columns: 1fr;
}

.faq-header {
	text-align: left;
}

.faq-header .section-title {
	text-align: left;
	margin-bottom: var(--space-4);
}

.faq-header-text {
	margin: 0 0 var(--space-6);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.65;
}

@media (min-width: 768px) {
	.faq-layout {
		grid-template-columns: 1fr 1.5fr;
		gap: var(--space-16);
		align-items: start;
	}

	.faq-header {
		position: sticky;
		top: calc(var(--header-height) + var(--space-8));
	}

	.faq-list {
		max-width: none;
	}
}

/* ==========================================================================
   CTA bloque
   ========================================================================== */
.section-cta {
	background: var(--color-bg-elevated);
	border-top: 1px solid var(--color-border);
}

.cta-block {
	text-align: center;
	padding: var(--space-16) var(--space-8);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	position: relative;
	overflow: hidden;
}

.cta-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 20rem;
	height: 2px;
	background: var(--gradient-accent-full);
	opacity: 0.8;
}

.cta-block::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
	height: 120px;
	background: radial-gradient(ellipse at top, rgba(var(--color-accent-rgb), 0.08), transparent 70%);
	pointer-events: none;
}

.cta-title {
	margin: 0 0 var(--space-4);
	font-size: clamp(1.75rem, 3vw + 0.5rem, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	position: relative;
}

.cta-text {
	margin: 0 0 var(--space-8);
	color: var(--color-text-muted);
	font-size: var(--text-md);
	line-height: 1.7;
	max-width: 38ch;
	margin-inline: auto;
	position: relative;
}

.cta-actions {
	display: flex;
	justify-content: center;
	position: relative;
}

.cta-note {
	margin: var(--space-6) 0 0;
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	position: relative;
}

.section-cta-final {
	background: var(--color-bg);
}

.section-cta-final .cta-block {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-16) var(--space-8);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.section-cta-final .cta-block-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--color-accent-rgb), 0.08), transparent 60%),
		radial-gradient(ellipse 40% 40% at 80% 80%, rgba(var(--color-secondary-rgb), 0.04), transparent 60%);
	pointer-events: none;
}

.section-cta-final .cta-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 24rem;
	height: 2px;
	background: var(--gradient-accent-full);
	opacity: 0.8;
}

.cta-block-content {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact-grid {
	display: grid;
	gap: var(--space-12);
	grid-template-columns: 1fr;
}

.contact-form-wrap {
	padding: var(--space-10);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.contact-intro .section-title {
	text-align: left;
	margin-bottom: var(--space-4);
}

.contact-lead {
	margin: 0 0 var(--space-8);
	color: var(--color-text-muted);
	font-size: var(--text-base);
	line-height: 1.7;
}

.contact-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.contact-meta li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.contact-meta li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
	flex-shrink: 0;
	opacity: 0.6;
}

/* Formulario */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
}

.form-row label {
	font-size: var(--text-caption);
	font-weight: 500;
	color: var(--color-text-muted);
}

.form-row .required {
	color: var(--color-error);
}

.form-row-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 0.75rem var(--space-4);
	font-family: inherit;
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: var(--color-text-faint);
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
	outline: none;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
	outline: none;
}

.contact-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.form-actions {
	margin-top: var(--space-2);
}

.form-message {
	margin: 0 0 var(--space-6);
	padding: var(--space-4);
	border-radius: var(--radius);
	font-size: var(--text-base);
}

.form-message.success {
	background: rgba(52, 211, 153, 0.1);
	color: var(--color-success);
	border: 1px solid rgba(52, 211, 153, 0.3);
}

.form-message.error {
	background: rgba(248, 113, 113, 0.1);
	color: var(--color-error);
	border: 1px solid rgba(248, 113, 113, 0.3);
}

@media (min-width: 768px) {
	.contact-grid {
		grid-template-columns: 1fr 1.2fr;
		align-items: start;
	}
}

/* ==========================================================================
   Páginas internas
   ========================================================================== */
.content-section {
	padding-block: var(--section-gap);
}

.error-404-inner {
	text-align: center;
	max-width: 28rem;
	margin-inline: auto;
}
.error-404-title {
	margin: 0 0 var(--space-4);
	font-size: clamp(3rem, 10vw, 5rem);
	font-weight: 800;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.error-404-text {
	margin: 0 0 var(--space-8);
	color: var(--color-text-muted);
}
.error-404-search {
	margin-bottom: var(--space-8);
}
.error-404-search .search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
}
.error-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

.block-spacing + .block-spacing {
	margin-top: var(--space-16);
}

.block-spacing .lead {
	margin: 0 0 var(--space-12);
	font-size: var(--text-lg);
	line-height: 1.7;
	color: var(--color-text-muted);
	max-width: var(--container-narrow);
}

/* Breadcrumb */
.breadcrumb {
	margin-bottom: var(--space-6);
}

.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.breadcrumb-item a {
	color: var(--color-text-muted);
	transition: color var(--transition);
}
.breadcrumb-item a:hover {
	color: var(--color-accent-text);
}

.breadcrumb-sep {
	user-select: none;
	color: var(--color-text-faint);
}

.breadcrumb-current {
	color: var(--color-text);
	font-weight: 500;
}

.page-header {
	margin-bottom: var(--space-12);
}

.page-title {
	margin: 0 0 var(--space-3);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	color: var(--color-text);
}

.page-subtitle {
	margin: 0;
	font-size: var(--text-md);
	line-height: 1.7;
	color: var(--color-text-muted);
}

.page-cta {
	text-align: center;
	padding-top: var(--space-16);
	border-top: 1px solid var(--color-border);
}

.page-cta-text {
	margin: 0 0 var(--space-6);
	font-size: var(--text-md);
	color: var(--color-text-muted);
}

.page-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

.servicios-contextual {
	margin: var(--space-4) 0 0;
	font-size: var(--text-base);
}
.servicios-contextual a {
	font-weight: 500;
	color: var(--color-accent);
	transition: color var(--transition);
}
.servicios-contextual a:hover {
	color: var(--color-accent-text);
}

.servicios-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.servicio-detail {
	padding-bottom: var(--space-12);
	border-bottom: 1px solid var(--color-border);
}

.servicio-detail:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.servicio-detail-title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.servicio-detail p {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--color-text-muted);
}

.about-content .lead {
	margin-bottom: var(--space-12);
}

.about-content h2 {
	margin: var(--space-12) 0 var(--space-4);
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.about-content h2:first-of-type {
	margin-top: 0;
}

.about-content p {
	margin: 0 0 var(--space-6);
	line-height: 1.7;
	color: var(--color-text-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	padding-block: var(--space-12);
	background: var(--color-bg-elevated);
	border-top: 1px solid var(--color-border);
}

.footer-inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

.footer-grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
	margin-bottom: var(--space-8);
}

.footer-brand .footer-logo {
	display: inline-block;
	font-weight: 700;
	font-size: var(--text-base);
	letter-spacing: 0.08em;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: opacity var(--transition);
}

.footer-brand .footer-logo:hover {
	opacity: 0.8;
}

.footer-tagline {
	margin: var(--space-3) 0 0;
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	line-height: 1.5;
	max-width: 22rem;
}

.footer-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-faint);
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu a {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.footer-menu a:hover {
	color: var(--color-text);
}

.footer-menu li + li {
	margin-top: var(--space-2);
}

.footer-cta-block .footer-cta-text {
	margin: 0 0 var(--space-4);
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	line-height: 1.5;
}

.footer-bottom {
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.footer-copy {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-faint);
}

@media (min-width: 640px) {
	.footer-grid { grid-template-columns: 1fr auto auto; }
}

@media (min-width: 768px) {
	.footer-grid { gap: var(--space-12); }
}

/* ==========================================================================
   Blog — Listado y tarjetas
   ========================================================================== */
.blog-section.archive-section {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

.blog-section .page-header,
.archive-section .archive-header {
	margin-bottom: var(--space-12);
}

.posts-grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.posts-grid { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
	margin: 0;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition-slow), transform var(--transition);
}

.post-card:hover {
	border-color: var(--accent-border);
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.post-card-link-wrap {
	display: block;
	color: inherit;
	text-decoration: none;
	outline-offset: -1px;
}

.post-card-link-wrap:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.post-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg);
}

.post-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card:hover .post-card-image {
	transform: scale(1.04);
}

.post-card-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-subtle) 100%);
	color: var(--color-text-faint);
}

.post-card-placeholder-icon {
	width: 3rem;
	height: 3rem;
	opacity: 0.3;
}

.post-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%);
	opacity: 0;
	transition: opacity var(--transition);
	pointer-events: none;
}

.post-card:hover .post-card-overlay {
	opacity: 1;
}

.post-card-body {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.post-card-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	list-style: none;
	margin: 0 0 var(--space-1);
	padding: 0;
}

.post-card-cat {
	display: inline-block;
	padding: 0.15em 0.5em;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-accent);
	background: var(--accent-dim);
	border-radius: var(--radius);
}

.post-card-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
	transition: color var(--transition);
	letter-spacing: -0.01em;
}

.post-card-link-wrap:hover .post-card-title {
	color: var(--color-accent);
}

.post-card-excerpt {
	margin: 0;
	font-size: var(--text-caption);
	line-height: 1.6;
	color: var(--color-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.post-card-date {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
}

.post-card-more {
	font-size: var(--text-caption);
	font-weight: 600;
	color: var(--color-accent);
	transition: transform var(--transition);
}

.post-card-link-wrap:hover .post-card-more {
	transform: translateX(3px);
}

/* Paginación del blog */
.blog-pagination {
	margin-top: var(--space-16);
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 var(--space-2);
	font-size: var(--text-caption);
	font-weight: 500;
	color: var(--color-text-muted);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
	border-color: var(--color-accent);
	background: var(--accent-dim);
	color: var(--color-accent);
}

.blog-pagination .page-numbers.current {
	cursor: default;
}

.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

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

/* ==========================================================================
   Blog — Entrada individual
   ========================================================================== */
.single-content {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

.single-content-inner {
	max-width: var(--container-narrow);
}

.single-header {
	margin-bottom: var(--space-8);
}

.single-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.single-cat-link {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition);
}

.single-cat-link:hover {
	color: var(--color-accent-text);
}

.single-title {
	margin: 0 0 var(--space-4);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.035em;
	color: var(--color-text);
}

.single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-caption);
	color: var(--color-text-muted);
}

.single-meta-sep {
	opacity: 0.4;
}

.single-featured {
	margin: 0 0 var(--space-12);
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
}

.single-featured-image {
	width: 100%;
	height: auto;
	display: block;
}

.single-body.entry-content {
	font-size: var(--text-md);
	line-height: 1.75;
	color: var(--color-text);
}

.single-body.entry-content > * + * {
	margin-top: 1.6em;
}

.single-body.entry-content h2 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.02em;
}

.single-body.entry-content h3 {
	margin-top: 1.6em;
	margin-bottom: 0.4em;
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.single-body.entry-content p {
	margin: 0;
}

.single-body.entry-content ul,
.single-body.entry-content ol {
	padding-left: 1.5em;
	margin: 0.5em 0 0;
}

.single-body.entry-content li + li {
	margin-top: 0.4em;
}

.single-body.entry-content blockquote {
	margin: 1.5em 0;
	padding: var(--space-5) var(--space-6);
	border-left: 3px solid var(--color-accent);
	background: var(--color-bg-card);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--color-text-muted);
	font-style: italic;
}

.single-body.entry-content code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	padding: 0.15em 0.4em;
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.single-body.entry-content pre {
	margin: 1.5em 0;
	padding: var(--space-6);
	overflow-x: auto;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.single-body.entry-content pre code {
	padding: 0;
	background: none;
	border: none;
}

.single-body.entry-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(var(--color-accent-rgb), 0.4);
	transition: text-decoration-color var(--transition);
}

.single-body.entry-content a:hover {
	text-decoration-color: var(--color-accent);
}

.single-footer {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.single-tags-label {
	display: block;
	margin-bottom: var(--space-3);
	font-size: var(--text-caption);
	font-weight: 500;
	color: var(--color-text-muted);
}

.single-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-tag-link {
	display: inline-block;
	padding: 0.25em 0.6em;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color var(--transition), color var(--transition);
}

.single-tag-link:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Navegación entre posts */
.single-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	margin-top: var(--space-16);
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.single-nav-link {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--transition), background var(--transition);
}

a.single-nav-link:hover {
	border-color: var(--accent-border);
	background: var(--accent-dim);
}

.single-nav-link.single-nav-empty {
	pointer-events: none;
	opacity: 0.3;
}

.single-nav-next {
	text-align: right;
}

.single-nav-label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-faint);
}

.single-nav-title {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.35;
}

a.single-nav-link:hover .single-nav-title {
	color: var(--color-accent);
}

/* ==========================================================================
   Blog — Artículos relacionados
   ========================================================================== */
.related-posts {
	padding-top: var(--space-10);
	padding-bottom: var(--section-gap);
	background: var(--color-bg-elevated);
	border-top: 1px solid var(--color-border);
}

.related-posts-title {
	margin: 0 0 var(--space-8);
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.related-posts-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.related-posts-grid { grid-template-columns: repeat(3, 1fr); }
}

.related-post-card {
	margin: 0;
}

.related-post-link {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--transition), background var(--transition);
}

.related-post-link:hover {
	border-color: var(--accent-border);
	background: var(--accent-dim);
}

.related-post-media {
	flex-shrink: 0;
	width: 80px;
	height: 56px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.related-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-post-body {
	flex: 1;
	min-width: 0;
}

.related-post-title {
	margin: 0 0 var(--space-1);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

a.related-post-link:hover .related-post-title {
	color: var(--color-accent);
}

.related-post-date {
	font-size: var(--text-xs);
	color: var(--color-text-faint);
}

.related-post-arrow {
	flex-shrink: 0;
	font-size: 1.25rem;
	color: var(--color-text-faint);
	transition: transform var(--transition), color var(--transition);
}

a.related-post-link:hover .related-post-arrow {
	color: var(--color-accent);
	transform: translateX(4px);
}

.blog-section .no-posts,
.archive-section .no-posts {
	text-align: center;
	padding: var(--space-16);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ==========================================================================
   Separadores decorativos entre secciones
   ========================================================================== */
.section + .section {
	border-top: 1px solid var(--color-border);
}

/* Alternancia de fondos para el flujo del home:
   hero → metrics(elevated) → problems(bg) → services(elevated) → process(bg)
   → cases(elevated) → stack(elevated) → why(elevated) → faq(bg) → cta(elevated) → contact(bg) */
.section-problems,
.section-process,
.section-faq {
	background: var(--color-bg);
}

.section-services,
.section-contact {
	background: var(--color-bg-elevated);
}

/* ==========================================================================
   Conversión B2B — Componentes adicionales
   ========================================================================== */

/* Hero microcopy */
.hero-microcopy {
	margin: 0 0 var(--space-8);
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	letter-spacing: 0.02em;
}

/* Problems CTA — already defined in main problems section above */

.problems-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

/* Process CTA */
.process-cta {
	margin-top: var(--space-12);
	padding: var(--space-10);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.process-cta-text {
	margin: 0 0 var(--space-6);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.7;
}

/* Cases CTA */
.cases-cta {
	margin-top: var(--space-12);
	padding: var(--space-10);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.cases-cta-text {
	margin: 0 0 var(--space-6);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.7;
}

.cases-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

/* Why-us intro actions */
.why-intro-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

/* FAQ CTA */
.faq-cta {
	text-align: center;
	margin-top: var(--space-12);
	padding: var(--space-10);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.faq-cta-text {
	margin: 0 0 var(--space-6);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.7;
}

/* CTA trust items */
.cta-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	margin-top: var(--space-6);
}

.cta-trust-sep {
	opacity: 0.35;
}

/* Contact steps (numbered) */
.contact-steps {
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.contact-step {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.contact-step-num {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-accent);
	background: var(--accent-dim-2);
	border: 1px solid var(--accent-border);
	border-radius: 50%;
}

.contact-step-text {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.5;
}

/* Contact alternative */
.contact-alt {
	margin-top: var(--space-8);
	padding: var(--space-6);
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.contact-alt-label {
	margin: 0 0 var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-text-faint);
}

.contact-alt-link {
	display: inline-block;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-accent);
	transition: color var(--transition);
}

.contact-alt-link:hover {
	color: var(--color-accent-text);
}

/* Contact trust badges */
.contact-trust-badges {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.contact-trust-badge {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.contact-trust-badge svg {
	flex-shrink: 0;
	color: var(--color-success);
}

/* Form row group (side by side) */
.form-row-group {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.form-row-group {
		grid-template-columns: 1fr 1fr;
	}
}

/* Form submit full width */
.btn-submit-full {
	width: 100%;
}

/* Form disclaimer */
.form-disclaimer {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-text-faint);
	text-align: center;
}

/* Form message title */
.form-message-title {
	margin: 0 0 var(--space-2);
	font-weight: 600;
	font-size: var(--text-md);
}

.form-message p {
	margin: 0;
}

/* Page CTA microcopy */
.page-cta-microcopy {
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
	color: var(--color-text-faint);
}

/* Footer CTA email */
.footer-cta-email {
	margin: var(--space-4) 0 0;
	font-size: var(--text-caption);
}

.footer-cta-email a {
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.footer-cta-email a:hover {
	color: var(--color-accent);
}

/* Responsive columns */
@media (max-width: 480px) {
	.cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cases-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.why-intro-actions {
		flex-direction: column;
	}

	.problems-cta-actions {
		flex-direction: column;
	}
}

/* ==========================================================================
   Stack tecnológico
   ========================================================================== */
.section-stack {
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

.stack-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.stack-category {
	padding: var(--space-8);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition);
}

.stack-category:hover {
	border-color: var(--accent-border);
}

.stack-category-title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.stack-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.stack-item {
	font-size: var(--text-base);
	color: var(--color-text);
	padding-left: var(--space-4);
	position: relative;
}

.stack-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent-border-strong);
}

@media (min-width: 640px) {
	.stack-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.stack-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Why-us layout (intro + grid asimétrico)
   ========================================================================== */
.section-why {
	background: var(--color-bg-elevated);
}

.why-layout {
	display: grid;
	gap: var(--space-12);
}

.why-intro-title {
	margin: 0 0 var(--space-5);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.why-intro-lead {
	margin: 0 0 var(--space-4);
	font-size: var(--text-md);
	line-height: 1.65;
	color: var(--color-text-muted);
}

.why-intro-text {
	margin: 0 0 var(--space-8);
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--color-text-muted);
}

@media (min-width: 1024px) {
	.why-layout {
		grid-template-columns: 1fr 1.6fr;
		align-items: start;
		gap: var(--space-16);
	}
}

/* ==========================================================================
   CTA label & features
   ========================================================================== */
.cta-label {
	margin: 0 0 var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
	position: relative;
}

.cta-features {
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	position: relative;
}

.cta-features li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.cta-features li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-success);
	flex-shrink: 0;
}

/* Case card result icon (when using icon variant) */
.case-card-result-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* ==========================================================================
   Floating CTA
   ========================================================================== */
.floating-cta {
	position: fixed;
	bottom: var(--space-6);
	right: var(--space-6);
	z-index: 40;
	transform: translateY(100px);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.floating-cta.is-visible {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.floating-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	background: var(--color-accent);
	color: #fff;
	font-size: var(--text-caption);
	font-weight: 600;
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 20px rgba(var(--color-accent-rgb), 0.3);
	transition: background var(--transition), box-shadow var(--transition);
}

.floating-cta-btn:hover {
	background: var(--color-accent-hover);
	color: #fff;
	box-shadow: 0 4px 28px rgba(var(--color-accent-rgb), 0.4);
}

.floating-cta-btn svg {
	width: 1rem;
	height: 1rem;
}

@media (max-width: 640px) {
	.floating-cta {
		right: var(--space-4);
		bottom: var(--space-4);
	}
	.floating-cta-btn span {
		display: none;
	}
	.floating-cta-btn {
		padding: var(--space-4);
		border-radius: 50%;
	}
}

/* ==========================================================================
   Guarantees section
   ========================================================================== */
.section-guarantees {
	background: var(--color-bg);
}

.guarantees-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.guarantee-item {
	padding: var(--space-6) var(--space-8);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: border-color var(--transition), box-shadow var(--transition-slow);
}

.guarantee-item:hover {
	border-color: var(--accent-border);
	box-shadow: var(--shadow-md);
}

.guarantee-icon {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--space-4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent);
}

.guarantee-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.guarantee-title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-md);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.guarantee-desc {
	margin: 0;
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	line-height: 1.6;
}

@media (min-width: 640px) {
	.guarantees-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.guarantees-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Servicio detail (page-servicios) — improved layout
   ========================================================================== */
.servicio-detail-header {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	margin-bottom: var(--space-8);
}

.servicio-detail-icon {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-dim-2);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-lg);
	color: var(--color-accent);
}

.servicio-detail-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.servicio-detail-body {
	display: grid;
	gap: var(--space-6);
}

.servicio-detail-block {
	padding: 0;
}

.servicio-detail-label {
	margin: 0 0 var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.servicio-detail-example {
	padding: var(--space-6);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	border-left: 3px solid var(--color-accent);
}

.servicio-detail-result {
	padding: var(--space-5) var(--space-6);
	background: rgba(52, 211, 153, 0.06);
	border: 1px solid rgba(52, 211, 153, 0.15);
	border-radius: var(--radius-lg);
}

.servicio-detail-result p {
	color: var(--color-success) !important;
	font-weight: 500;
}

@media (min-width: 768px) {
	.servicio-detail-body {
		grid-template-columns: repeat(2, 1fr);
	}

	.servicio-detail-example,
	.servicio-detail-result {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   About page — track record stats
   ========================================================================== */
.about-track-record {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(3, 1fr);
	padding: var(--space-10);
	margin-bottom: var(--space-12);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	text-align: center;
}

.about-stat-value {
	display: block;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: var(--space-2);
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.about-stat-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.4;
}

.about-commitments ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.about-commitments li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.6;
	padding-left: var(--space-5);
	position: relative;
}

.about-commitments li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.6;
}

@media (max-width: 640px) {
	.about-track-record {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

/* ==========================================================================
   Single post CTA block
   ========================================================================== */
.single-cta-block {
	margin-top: var(--space-16);
	padding: var(--space-10);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.single-cta-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 2px;
	background: var(--gradient-accent-full);
	opacity: 0.6;
}

.single-cta-title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.single-cta-text {
	margin: 0 0 var(--space-6);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: 1.7;
	max-width: 36ch;
	margin-inline: auto;
}

/* ==========================================================================
   Footer legal links
   ========================================================================== */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.footer-legal a {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	transition: color var(--transition);
}

.footer-legal a:hover {
	color: var(--color-text-muted);
}

@media (max-width: 640px) {
	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Form validation — inline errors
   ========================================================================== */
.contact-form input.has-error,
.contact-form textarea.has-error {
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

.field-error {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-error);
	line-height: 1.4;
}

/* ==========================================================================
   Blog card reading time + meta line
   ========================================================================== */
.post-card-meta-line {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.post-card-reading-time {
	font-size: var(--text-xs);
	color: var(--color-text-faint);
}

.post-card-reading-time::before {
	content: '·';
	margin-right: var(--space-2);
	opacity: 0.5;
}

/* ==========================================================================
   Search form improvements
   ========================================================================== */
.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form label {
	flex: 1;
}

.search-field {
	width: 100%;
	padding: 0.625rem var(--space-4);
	font-family: inherit;
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.search-field:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
	outline: none;
}

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

/* ==========================================================================
   Responsive refinements — tablet breakpoints
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	.hero-title {
		font-size: clamp(2.25rem, 5vw, 3rem);
	}

	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cases-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.container {
		padding-inline: var(--space-8);
	}
}

@media (min-width: 1280px) {
	:root {
		--container: min(100% - 4rem, 80rem);
	}

	.hero {
		min-height: min(92vh, 860px);
	}
}

@media (max-width: 374px) {
	:root {
		--text-base: 0.875rem;
		--text-md: 0.9375rem;
	}

	.hero-badge {
		font-size: 0.625rem;
	}

	.btn-lg {
		padding: 0.75rem 1.5rem;
		font-size: var(--text-caption);
	}

	.contact-form-wrap {
		padding: var(--space-6);
	}
}

/* ==========================================================================
   Word-break safety for long content
   ========================================================================== */
.hero-title,
.section-title,
.page-title,
.single-title,
.service-card-title,
.problem-card-title,
.benefit-card-title,
.case-card-title,
.process-step-title,
.servicio-detail-title,
.guarantee-title {
	overflow-wrap: break-word;
	word-break: break-word;
}

.service-card-desc,
.problem-card-desc,
.benefit-card-desc,
.case-card-desc,
.contact-lead {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Missing class coverage — structural / semantic
   ========================================================================== */
.section-cases {
	background: var(--color-bg-elevated);
}

.section-trust-numbers {
	padding-block: var(--space-12);
	background: var(--color-bg-elevated);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.about-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.footer-links {
	min-width: 0;
}

.single-cta-inner {
	max-width: 28rem;
	margin-inline: auto;
}

.single-date {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
}

.single-author {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
}

.single-nav-prev {
	text-align: left;
}

/* ==========================================================================
   404 page — large code display
   ========================================================================== */
.error-404-code {
	margin: 0 0 var(--space-4);
	font-size: clamp(5rem, 15vw, 10rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	opacity: 0.3;
}

/* ==========================================================================
   Trust numbers (standalone section)
   ========================================================================== */
.trust-numbers-grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
}

.trust-number-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.trust-number-value {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.trust-number-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.4;
}

@media (min-width: 768px) {
	.trust-numbers-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-12);
	}
}

/* ==========================================================================
   Single post reading time
   ========================================================================== */
.single-reading-time {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
	.site-header,
	.nav-toggle,
	.floating-cta,
	.hero-bg,
	.hero-scroll,
	.section-cta-final,
	.footer-cta-block {
		display: none !important;
	}

	body.replika-body {
		background: #fff;
		color: #111;
	}

	.section {
		padding-block: 2rem;
	}

	a[href]::after {
		content: ' (' attr(href) ')';
		font-size: 0.8em;
		color: #666;
	}
}