/* =========================
	Tema base y variables globales
	========================= */
:root {
	--page-bg: #0A192F;
	--surface: #0F2140;
	--card-front: #162B45;
	--header-height: 64px;
	--primary: #00A2FF;
	--primary-2: #2D6CDF;
	--accent: #B3D7FF;
	--muted: #B3D7FF;

	--contact-bg: rgba(255, 255, 255, 0.02);
	--on-contact: var(--text-color);
	--text-color: #ffffff;
	--text-muted: rgba(255, 255, 255, 0.92);
	--section-text: var(--text-color);
	--footer-text: #ffffff;

	--card-bg: rgba(255, 255, 255, 0.03);
	--card-border: rgba(255, 255, 255, 0.06);
	--card-shadow: 0 10px 30px rgba(2, 6, 23, 0.45);

	--tone-1-start: #0F2140;
	--tone-1-end: #071528;
	--tone-2-start: #071A33;
	--tone-2-end: #06202f;
	--tone-3-start: #0E2A4A;
	--tone-3-end: #072033;

	--font-heading: 'Plus Jakarta Sans', 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	--font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Theme: light overrides */
.theme-light {
	--page-bg: #F0F6FF;
	--surface: #FFFFFF;
	--card-front: #F5F9FF;
	--primary: #0B6CFF;
	--primary-2: #0A58D3;
	--accent: #0B6CFF;
	--muted: #24405A;
	--contact-bg: #F5F9FF;
	--on-contact: #0A192F;
	--text-color: #1a2b42;
	--text-muted: rgba(26, 43, 66, 0.75);
	--footer-text: #1a2b42;

	--card-bg: #FFFFFF;
	--card-border: rgba(10, 25, 47, 0.08);
	--card-shadow: 0 4px 16px rgba(10, 25, 47, 0.06);

	--tone-1-start: #EAF3FF;
	--tone-1-end: #F0F6FF;
	--tone-2-start: #F5F9FF;
	--tone-2-end: #EEF4FF;
}

/* =========================
	Base / reset
	========================= */
* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
	font-family: var(--font-body);
	background: linear-gradient(180deg, var(--page-bg) 0%, #071226 100%);
	color: var(--text-color);
	margin: 0;
}

.theme-light body,
.theme-light {
	background: linear-gradient(180deg, #F0F6FF 0%, #E8F0FE 100%);
}

/* =========================
	Tipografía
	========================= */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title {
	font-family: var(--font-heading);
}

h1,
h2,
h3 {
	letter-spacing: -0.01em
}

/* Heading prefix '>' - REMOVIDO para identidad comercial */

/* Encabezados ocultos para accesibilidad */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* =========================
	Layout base
	========================= */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem
}

/* Sections */
.site-section {
	background: var(--surface);
	color: var(--section-text);
}

.site-section.alt {
	background: transparent;
	color: var(--section-text);
	position: relative;
}

/* Ensure headings inside sections use section-text for contrast */
.site-section h1,
.site-section h2,
.site-section h3 {
	color: var(--section-text)
}

/* Accent bar on top of a section for subtle separation */
.site-section.has-accent {
	position: relative;
	overflow: visible
}

.site-section.has-accent::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -6px;
	width: 60%;
	height: 6px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
	box-shadow: 0 6px 18px rgba(0, 162, 255, 0.12);
}

/* Alternate subtle divider line */
/* Section tone variants */
.section-tone-1 {
	background: linear-gradient(180deg, var(--tone-1-start), var(--tone-1-end))
}

.section-tone-2 {
	background: linear-gradient(180deg, var(--tone-2-start), var(--tone-2-end))
}

/* Light theme overrides for section-tone backgrounds & cards to keep contrast */
.theme-light .section-tone-1 {
	background: linear-gradient(180deg, #EAF3FF, #EDF6FF)
}

.theme-light .section-tone-2 {
	background: linear-gradient(180deg, #F3F8FF, #EEF6FF)
}

/* =========================
	Header / navegación
	========================= */
.site-header {
	background: rgba(2, 6, 23, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px)
}

.site-header a.logo {
	font-weight: 800;
	color: #fff;
}

.color-hover:hover {
	color: var(--primary);
}

/* Hover en el logo: cambiar color del span 'color-hover' y el span
   con la clase literal text-[var(--primary)] al blanco */
.site-header a.logo:hover .color-hover {
	color: var(--primary);
	transition: color .16s ease;
}

/* Selección por atributo para la clase que contiene corchetes
   (ej. text-[var(--primary)]) — al hacer hover en el enlace principal
   ese span se vuelve blanco para contraste */
.site-header a.logo:hover span[class*="text-[var(--primary)]"] {
	color: #ffffff;
	transition: color .16s ease;
}

/* Hover en el hero title: cambiar color del span 'hero-hover' y
   cualquier span con clase text-[var(--primary)] a blanco */
.hero-title:hover .hero-hover {
	color: var(--primary);
	transition: color .16s ease;
}

.hero-title:hover span[class*="text-[var(--primary)]"] {
	color: #ffffff;
	transition: color .16s ease;
}

/* Hover específico para el span con clase 'hover-nombre' dentro del h1.hero-title */
.hero-title:hover .hover-nombre {
	color: var(--primary) !important;
	transition: color .16s ease;
}

/* Reforzar selectores usando la clase escapada generada por Tailwind
   y añadir !important como último recurso para garantizar el override */
.site-header a.logo:hover .color-hover,
.hero-title:hover .hero-hover {
	color: var(--primary) !important;
}

.site-header a.logo:hover .text-\[var\(--primary\)\],
.hero-title:hover .text-\[var\(--primary\)\] {
	color: #ffffff !important;
	transition: color .16s ease;
}

.nav-link {
	color: #ffffff;
	text-decoration: none;
	opacity: .93;
	display: inline-flex;
	align-items: center;
	padding: .45rem 0;
	position: relative;
	transition: color .25s ease, opacity .25s ease;
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
	transition: width .3s cubic-bezier(.4, 0, .2, 1), left .3s cubic-bezier(.4, 0, .2, 1);
	border-radius: 2px;
}

.nav-link:hover {
	color: var(--primary);
	opacity: 1;
	text-decoration: none;
}

.nav-link:hover::after {
	width: 100%;
	left: 0;
}

/* Theme toggle icons visibility (inline SVGs) */
.icon-moon,
.icon-sun {
	vertical-align: middle;
	color: #fff
}

.icon-moon {
	display: inline-block;
}

.icon-sun {
	display: none;
}

.theme-light .icon-moon {
	display: none
}

.theme-light .icon-sun {
	display: inline-block
}

/* Theme toggle button small */
.theme-toggle {
	padding: .35rem .6rem;
	border-radius: .45rem;
	font-size: .9rem
}

/* =========================
	Botones
	========================= */
.btn {
	display: inline-block;
	padding: .65rem 1.25rem;
	border-radius: .6rem;
	font-weight: 700;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, filter .18s ease
}

.btn-primary {
	background: var(--primary-2);
	color: #fff;
	border-color: transparent
}

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

.btn-outline:hover {
	background: rgba(0, 162, 255, 0.12);
}

.theme-light .btn-outline:hover {
	background: rgba(11, 108, 255, 0.10);
}

nav div .btn-outline {
	border-color: var(--surface);
	color: #fff;
}

nav div .btn-outline:hover {
	border-color: var(--primary);
	color: #fff;
}

.btn:focus {
	outline: 3px solid rgba(0, 162, 255, 0.18);
	outline-offset: 2px
}

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

/* =========================
	Hero / micro-animaciones
	========================= */
.hero-title {
	font-size: clamp(2.5rem, 6vw, 4rem);
	text-shadow: 0 6px 20px rgba(2, 6, 23, 0.45);
}

/* Hacer el título interactivo: cursor pointer para indicar clicabilidad */
.hero-title {
	cursor: pointer;
}

/* Efecto de pulsado al hacer click: ligera escala y desplazamiento */
.hero-title {
	transition: color .16s ease, transform .12s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Usar la animación 'heartBeat' de Animate.css al pulsar */
.hero-title:active {
	-webkit-animation-name: heartBeat;
	animation-name: heartBeat;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

/* Mantener accesibilidad para teclado (simular pulsado con focus-visible) */
.hero-title:focus-visible {
	outline: 3px solid rgba(0, 162, 255, 0.12);
	outline-offset: 2px;
}

.typing-effect {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.92);
	animation: typing 3.5s steps(40, end) 1s forwards, blink-caret .75s step-end infinite
}

.theme-light .typing-effect {
	color: var(--text-muted);
}

.btn-primary {
	transition: transform .16s ease, box-shadow .16s ease;
}

.btn-primary:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(2, 6, 23, 0.35);
	filter: brightness(1.05);
}

/* Soft gradient underline for the section headings */
.site-section h2 {
	position: relative;
}

.site-section h2::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -30px;
	width: 90px;
	height: 6px;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
	opacity: 0.95;
}

/* Tamaño aumentado para título y descripción dinámicos del hero */
#hero-action-title {
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	line-height: 1.05;
}

#hero-action-desc {
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	line-height: 1.6;
	color: var(--text-muted);
	max-width: 46rem;
}

/* Estilos para la nueva sección 'Qué hacemos' en el hero */
/* =========================
	Cards (flip)
	========================= */
.card-container {
	perspective: 1000px
}

.card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform .7s;
	transform-style: preserve-3d
}

.card-container:hover .card-inner {
	transform: rotateY(180deg)
}

.card-front,
.card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: .6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem
}

.card-front {
	background: var(--card-front);
	color: #fff;
	transition: transform .2s
}

.card-front i {
	opacity: .95
}

/* Chat styles for product-chat */
#product-chat {
	--chat-bg: var(--card-bg);
	--chat-border: var(--card-border);
	--chat-user-bg: var(--primary-2);
	--chat-user-color: #ffffff;
	--chat-bot-bg: var(--card-bg);
	--chat-bot-color: var(--text-color);
}

#product-chat-messages {
	position: relative;
}

/* WebKit scrollbar for Chrome, Safari, Edge, etc. */
#product-chat-messages::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

#product-chat-messages::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(0, 162, 255, 0.32), rgba(45, 108, 223, 0.32));
	border-radius: 8px;
	border: 2px solid rgba(0, 0, 0, 0.06);
	background-clip: padding-box;
	box-shadow: 0 2px 10px rgba(2, 6, 23, 0.2);
}

#product-chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

/* WebKit scrollbar */
#product-chat-messages::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

#product-chat-messages::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(0, 162, 255, 0.32), rgba(45, 108, 223, 0.32));
	border-radius: 8px;
	border: 2px solid rgba(0, 0, 0, 0.06);
	background-clip: padding-box;
	box-shadow: 0 2px 10px rgba(2, 6, 23, 0.2);
}

#product-chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

/* Top/bottom fade indicators. Visible only when there's overflow and not at the respective edge. */
#product-chat-messages::before,
#product-chat-messages::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 18px;
	pointer-events: none;
	z-index: 10;
	opacity: 0;
	transition: opacity .18s ease;
}

#product-chat-messages::before {
	top: 0;
	background: linear-gradient(180deg, rgba(10, 25, 47, 0.9), transparent);
}

#product-chat-messages::after {
	bottom: 0;
	background: linear-gradient(0deg, rgba(10, 25, 47, 0.9), transparent);
}

.theme-light #product-chat-messages::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent);
}

.theme-light #product-chat-messages::after {
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), transparent);
}

/* Show fades when scrollable and not at start/end */
#product-chat.has-scroll #product-chat-messages:not(.at-top)::before {
	opacity: 1;
}

#product-chat.has-scroll #product-chat-messages:not(.at-bottom)::after {
	opacity: 1;
}

/* Chat rows & bubbles */
.chat-row {
	margin-bottom: 0.6rem;
}

.chat-bubble {
	box-shadow: 0 6px 18px rgba(2, 6, 23, 0.18);
	border-radius: 12px;
}

.chat-bubble-user {
	background: var(--chat-user-bg);
	color: var(--chat-user-color);
	border-color: transparent;
}

.chat-bubble-bot {
	background: var(--chat-bot-bg);
	color: var(--chat-bot-color);
	border-color: var(--chat-border);
}

/* Select styling for product chat: ensure contrast in dark/light themes */
#product-chat select,
#product-chat select option {
	color: var(--text-color) !important;
}

/* Force option background/text in dark theme where native dropdowns may use system colors */
#product-chat select option {
	background-color: var(--card-front) !important;
	color: var(--text-color) !important;
}

/* Light theme: ensure options stay readable */
.theme-light #product-chat select option {
	background-color: var(--card-bg) !important;
	color: var(--text-color) !important;
}

/* Force native appearance normalization and a bit more padding */
#product-chat select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

/* Improve dropdown option readability in browsers that respect option styles */
#product-chat select option {
	padding: .4rem 0.6rem;
}

/* =========================
	Sección Asistente Virtual (rediseño)
	========================= */
.assistant-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.assistant-header {
	text-align: center;
}

.assistant-badge {
	display: none;
}

.assistant-badge-inline {
	display: inline-block;
	background: linear-gradient(135deg, rgba(0, 162, 255, 0.12), rgba(45, 108, 223, 0.12));
	color: var(--primary);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba(0, 162, 255, 0.18);
	margin-top: 0.25rem;
}

.assistant-title {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--section-text);
	margin: 0.5rem 0;
}

.assistant-subtitle {
	color: var(--text-muted);
	font-size: 1rem;
	max-width: 520px;
	margin: 0 auto;
	line-height: 1.6;
}

.assistant-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: stretch;
}

/* Features card (left) */
.assistant-features-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 1rem;
	padding: 1.75rem;
	box-shadow: var(--card-shadow);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.assistant-avatar-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.assistant-mini-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--primary);
	box-shadow: 0 0 12px rgba(0, 162, 255, 0.25);
}

.assistant-status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 600;
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	display: inline-block;
	box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
	animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.6;
		transform: scale(1.3);
	}
}

.assistant-features-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.assistant-feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.assistant-feature-icon {
	font-size: 1.4rem;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.assistant-feature-icon.icon-bolt {
	background: rgba(245, 158, 11, 0.12);
	color: #F59E0B;
}

.assistant-feature-icon.icon-target {
	background: rgba(16, 185, 129, 0.12);
	color: #10B981;
}

.assistant-feature-icon.icon-trending {
	background: rgba(99, 102, 241, 0.12);
	color: #6366F1;
}

.assistant-feature strong {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--section-text);
	margin-bottom: 2px;
}

.assistant-feature p {
	font-size: 0.82rem;
	color: var(--text-muted);
	line-height: 1.5;
	margin: 0;
}

/* Chat card (right) */
.assistant-chat-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 1rem;
	padding: 0;
	box-shadow: var(--card-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.assistant-chat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary), var(--primary-2), #8B5CF6);
	border-radius: 1rem 1rem 0 0;
}

.assistant-chat-window {
	padding: 1.25rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.assistant-avatar-glow {
	position: relative;
	display: inline-block;
}

.assistant-chat-avatar {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid transparent;
	background-image: linear-gradient(var(--card-bg), var(--card-bg)), linear-gradient(135deg, var(--primary), var(--primary-2));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 0 20px rgba(0, 162, 255, 0.2), 0 0 40px rgba(0, 162, 255, 0.08);
}

.assistant-avatar-glow::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 162, 255, 0.15) 0%, transparent 70%);
	animation: glow-pulse 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes glow-pulse {

	0%,
	100% {
		opacity: 0.5;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.08);
	}
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
	.assistant-grid {
		grid-template-columns: 1fr;
	}

	.assistant-chat-card {
		order: -1;
	}

	.assistant-title {
		font-size: 1.4rem;
	}

	.assistant-features-card {
		padding: 1.25rem;
	}

	.assistant-feature {
		gap: 0.5rem;
	}

	.assistant-subtitle {
		font-size: 0.9rem;
	}
}

/* Make sure long messages wrap nicely */
.chat-bubble {
	word-break: break-word;
}

/* Adjust small-screen padding */
@media (max-width: 640px) {
	.chat-bubble {
		max-width: 95% !important;
	}
}

.card-front:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 30px rgba(2, 6, 23, 0.45)
}

.card-back {
	transform: rotateY(180deg);
	color: #fff
}

.card-back.accent-1 {
	background: var(--primary)
}

.card-back.accent-2 {
	background: var(--primary-2)
}

.icon-primary {
	color: var(--primary)
}

.icon-secondary {
	color: var(--accent)
}

.theme-light .card-front {
	background: linear-gradient(180deg, #ffffff, #f6fbff);
	box-shadow: 0 6px 18px rgba(10, 20, 30, 0.04);
	color: var(--text-color)
}

.theme-light .card-back.accent-1 {
	background: var(--primary)
}

.theme-light .card-back.accent-2 {
	background: var(--primary-2)
}

/* =========================
	Sección: Estadísticas (#estadisticas)
	========================= */
#estadisticas .hero-stats-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* reducir separación vertical excesiva */
	padding: clamp(1.5rem, 4vw, 3rem) 0;
}

#estadisticas .stat-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

#estadisticas .stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	min-width: 140px;
}

#estadisticas .stat-number {
	font-size: 3rem;
	line-height: 1;
	font-weight: 900;
	color: var(--primary);
	margin-top: .25rem;
}

#estadisticas .stat-label {
	font-size: 1.25rem;
	color: var(--text-muted);
	opacity: .98;
	margin-bottom: .5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Suavizar fondo de la sección de estadísticas en modo claro */
.theme-light #estadisticas {
	background: #f5f6f8;
}

.theme-light #estadisticas .hero-stats-bar {
	background: linear-gradient(180deg, rgba(10, 25, 47, 0.03), rgba(10, 25, 47, 0.01));
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(10, 25, 47, 0.04);
}

/* =========================
	Sección: Contacto (#contacto)
	========================= */
.contact-section {
	background: var(--contact-bg);
	color: var(--on-contact)
}

/* Contact card */
.contact-card {
	max-width: 820px;
	margin: 0 auto;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	padding: 2rem;
	border-radius: .75rem;
}

.contact-card input,
.contact-card textarea {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: .75rem;
	border-radius: .45rem;
	color: var(--section-text)
}

.contact-card input::placeholder,
.contact-card textarea::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.contact-card .btn-primary {
	width: 100%
}

/* Form inputs */
input[type=text],
input[type=email],
textarea {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	padding: .75rem;
	border-radius: .45rem;
	color: inherit
}

/* Mejoras para formularios en tema claro */
.theme-light .contact-card input,
.theme-light .contact-card textarea {
	border: 1px solid rgba(10, 25, 47, 0.30);
	color: var(--text-color)
}

.theme-light .contact-card input::placeholder,
.theme-light .contact-card textarea::placeholder {
	color: rgba(10, 25, 47, 0.5);
}

.theme-light input::placeholder,
.theme-light textarea::placeholder,
.theme-light select::placeholder {
	color: rgba(10, 25, 47, 0.55);
}

.theme-light input[type=text],
.theme-light input[type=email],
.theme-light input[type=password],
.theme-light textarea,
.theme-light select {
	border: 1px solid rgba(10, 25, 47, 0.30);
	background: #FFFFFF;
	color: var(--text-color);
	box-shadow: none;
}

.theme-light input:focus,
.theme-light textarea:focus,
.theme-light select:focus {
	outline: none;
	border-color: var(--primary-2);
	box-shadow: 0 0 0 4px rgba(11, 108, 255, 0.12);
}

/* =========================
	Menú móvil
	========================= */
.mobile-menu {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--header-height);
	background: var(--surface);
	border-bottom: 1px solid var(--card-border);
	box-shadow: 0 8px 30px rgba(2, 6, 23, 0.12);
	padding: 0.75rem 1rem;
	z-index: 1000;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	text-align: center;

	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: max-height 300ms cubic-bezier(.2, .9, .2, 1), opacity 220ms ease, transform 240ms ease;
}

.mobile-menu.open {
	max-height: 80vh;
	opacity: 1;
	transform: translateY(0);
}

.mobile-menu a.nav-link,
.mobile-menu .btn {
	color: var(--text-color);
	text-decoration: none;
}

.mobile-menu a.nav-link {
	display: inline-block;
}

.mobile-menu .nav-link {
	padding: .5rem 0;
	border-radius: .35rem;
	width: 100%;
	text-align: center;
}

.mobile-menu .btn-primary {
	margin-top: .5rem;
	display: inline-block;
	width: auto;
}

.theme-light .mobile-menu {
	background: var(--surface);
	border-bottom-color: rgba(10, 25, 47, 0.06);
}

#mobile-menu-button {
	background: transparent;
	border: 1px solid transparent;
	color: var(--text-color);
}

#mobile-menu-button:focus {
	outline: none;
	box-shadow: 0 0 0 4px rgba(11, 108, 255, 0.12);
	border-radius: .35rem;
}

/* =========================
	Footer
	========================= */
.site-footer {
	background: rgba(255, 255, 255, 0.02);
	color: var(--footer-text);
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.theme-light .site-footer {
	--footer-text: #3B4D63;
	background: rgba(10, 25, 47, 0.04);
	color: var(--footer-text);
}

.site-footer a {
	color: var(--footer-text);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--primary);
	text-decoration: none;
}

.footer-social {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin-left: .75rem;
}

.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: .5rem;
	border: 0;
	background: transparent;
	color: var(--footer-text);
	text-decoration: none;
}

.footer-social-link:hover {
	color: var(--footer-text);
	opacity: 0.85;
	text-decoration: none;
}

.footer-social-link:focus-visible {
	outline: 2px solid var(--primary-2);
	outline-offset: 3px;
}

.footer-social-link svg {
	width: 18px;
	height: 18px;
}

.footer-social-link i {
	font-size: 18px;
	line-height: 1;
}

/* =========================
	Sección: Inicio (#inicio)
	========================= */
#inicio .hero-layout {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#inicio .hero-row {
	width: 100%;
}

#inicio .hero-row-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5rem;
}

#inicio .hero-title-col {
	flex: 1 1 320px;
	min-width: 260px;
}

#inicio .hero-what-col {
	flex: 1 1 320px;
	min-width: 260px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

#inicio .hero-what-col p {
	margin: 0;
}

#inicio .hero-row-stats {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#inicio .hero-stats-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem 0;
}

#inicio .stat-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	justify-content: space-around;
	gap: 1rem;
}

#inicio .stat-item {
	flex: 0 1 auto;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
}

#inicio .stat-number {
	font-size: 2.25rem;
	line-height: 1;
}

#inicio .stat-label {
	font-size: .95rem;
	color: var(--text-muted);
}

#inicio .hero-row-projects {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#inicio .project-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

#inicio .project-card {
	flex: 1 1 250px;
	min-width: 250px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: .9rem;
	padding: 1.25rem;
	box-shadow: var(--card-shadow);
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

#inicio .project-preview {
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: .7rem;
	padding: 1.25rem;
	/* Mantener uniformidad entre cards aunque el texto de arriba varíe */
	margin-top: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 72px;
	color: var(--text-muted);
}

.theme-light #inicio .project-preview {
	background: rgba(10, 25, 47, 0.04);
	border-color: rgba(10, 25, 47, 0.18);
	color: rgba(10, 25, 47, 0.78);
}

#inicio .project-preview:hover {
	border-color: var(--primary);
}

/* =========================
	Sección: Planes y Precios
	========================= */
.pricing-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.pricing-card {
	position: relative;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	padding: 1.5rem;
	border-radius: .75rem;
	color: var(--section-text);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 250px;
}

.pricing-card.recommended {
	border-color: var(--primary);
	box-shadow: 0 10px 30px rgba(11, 108, 255, 0.12);
	transform: translateY(-6px);
}

.recommended-badge {
	position: absolute;
	right: 12px;
	top: 12px;
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
	color: #fff;
	padding: .35rem .6rem;
	border-radius: 999px;
	font-weight: 800;
	font-size: .75rem;
	letter-spacing: .02em;
}

.pricing-card h3 {
	margin: 0;
}

.pricing-card .price {
	color: var(--primary);
}

.pricing-card ul {
	margin: 0;
	padding-left: 1rem;
}

.pricing-card .btn {
	align-self: start;
}

/* Services section: use the same responsive grid behaviour so cards form 2x2 or 1x1 */
#servicios .grid {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.25rem;
}

/* =========================
	Modal (contact form)
	========================= */
.modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 60;
}

.modal[aria-hidden="false"] {
	display: flex;
}

.modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 23, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.modal-dialog {
	position: relative;
	width: 95%;
	max-width: 720px;
	margin: 1rem;
	z-index: 70;
	transform: translateY(0);
}

.modal-content {
	/* Fondo opaco para evitar que el blur del overlay se “filtre” al contenido */
	background: var(--surface);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	padding: 1.25rem;
	border-radius: .6rem;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	filter: none;
	opacity: 0;
	transform: translateY(-8px) scale(.98);
	transition: transform 260ms cubic-bezier(.2, .9, .2, 1), opacity 220ms ease;
}

.modal-close {
	position: absolute;
	right: 8px;
	top: 8px;
	background: transparent;
	border: none;
	color: var(--text-color);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.modal[aria-hidden="false"] .modal-overlay {
	animation: overlay-fade-in 220ms ease forwards;
}

.modal[aria-hidden="false"] .modal-content {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@keyframes overlay-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes overlay-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

#modal-form-target .contact-card,
#modal-form-target .contact-form-card {
	margin: 0;
	/* El panel lo aporta .modal-content; evitamos doble “card” translúcida */
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: .75rem;
}

.modal-actions .btn {
	padding: .5rem .75rem;
}

/* =========================
	Sección: Sobre Nosotros (#nosotros)
	========================= */
#nosotros h2 {
	font-size: clamp(2rem, 5.2vw, 3.5rem);
	line-height: 1.03;
}

#nosotros p {
	font-size: clamp(1rem, 2.1vw, 1.35rem);
	line-height: 1.75;
	color: var(--text-muted);
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}

/* =========================
	Sección: Fundadores (#fundadores)
	========================= */
#fundadores .founders-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.25rem;
}

#fundadores .founder-card {
	position: relative;
	overflow: hidden;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: .9rem;
	padding: 1.5rem;
	text-align: center;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: .25rem;
}

#fundadores .founder-avatar {
	width: 240px;
	height: 240px;
	border-radius: 999px;
	object-fit: cover;
	display: block;
	margin: 0 auto .75rem;
	border: 2px solid rgba(255, 255, 255, 0.10);
	transform-origin: center top;
	transition: transform 260ms cubic-bezier(.2, .9, .2, 1);
}

.theme-light #fundadores .founder-avatar {
	border-color: rgba(10, 25, 47, 0.12);
}

#fundadores .founder-name {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--section-text);
	transition: opacity 200ms ease, transform 260ms cubic-bezier(.2, .9, .2, 1);
}

#fundadores .founder-quote {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	top: 56%;
	bottom: 1.25rem;
	margin: 0;
	color: var(--section-text);
	line-height: 1.7;
	font-size: 1.1rem;
	font-style: italic;
	font-weight: 600;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 200ms ease, transform 260ms cubic-bezier(.2, .9, .2, 1);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#fundadores .founder-card:hover .founder-quote {
	opacity: 1;
	transform: translateY(0);
}

#fundadores .founder-card:hover .founder-name {
	opacity: 0;
	transform: translateY(-8px);
}

#fundadores .founder-card:hover .founder-avatar {
	transform: translateY(-10px) scale(0.60);
}

@media (min-width: 768px) {
	#fundadores .founders-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================
	Portafolio
	========================= */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
}

.portfolio-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: 1rem;
	color: var(--section-text);
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.portfolio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 36px rgba(11, 108, 255, 0.10);
}

.portfolio-card__info {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.portfolio-tag {
	display: inline-block;
	align-self: flex-start;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(11, 108, 255, 0.10);
	color: var(--primary);
	letter-spacing: 0.02em;
}

.portfolio-section-badge {
	display: inline-block;
	padding: 0.4rem 1.1rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	background: rgba(11, 108, 255, 0.10);
	color: var(--primary);
	margin-bottom: 1rem;
}

.portfolio-card__stage {
	position: relative;
	width: 100%;
	height: 190px;
	border-radius: .75rem;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.12);
}

.portfolio-card__media {
	position: absolute;
	inset: 0;
	opacity: 1;
	visibility: visible;
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.portfolio-card__details {
	position: absolute;
	inset: 0;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	opacity: 0;
	transform: translateY(14px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.portfolio-card:hover .portfolio-card__details,
.portfolio-card:focus-within .portfolio-card__details {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {

	.portfolio-card__media,
	.portfolio-card__details {
		transition: none;
	}

	.portfolio-card__details {
		transform: none;
	}
}

.portfolio-card:hover .portfolio-card__media,
.portfolio-card:focus-within .portfolio-card__media {
	opacity: 0;
	visibility: hidden;
}

.portfolio-card h3,
.portfolio-card p {
	margin: 0;
}

.portfolio-card .btn {
	align-self: flex-start;
	margin-top: auto;
}

@media (min-width: 640px) {
	.portfolio-card__stage {
		height: 230px;
	}
}

@media (hover: none) {
	.portfolio-card__stage {
		height: auto;
	}

	.portfolio-card__media,
	.portfolio-card__details {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: none;
	}

	.portfolio-card__details {
		padding: .9rem 0 0;
	}
}

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

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

/* =========================
	Media Queries / Responsive
	========================= */
@media (min-width: 768px) {
	.modal-dialog {
		width: 720px;
	}
}

@media (min-width: 1024px) {
	#inicio {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	#inicio .hero-row-top {
		align-items: center;
		gap: 2.5rem;
	}

	#inicio .hero-what-col {
		padding: 1.75rem;
	}
}

/* Pantallas medianas: optimizar hero banner */
@media (min-width: 768px) and (max-width: 1023px) {
	#inicio {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	#inicio .hero-row-top {
		flex-direction: column;
		gap: 1.5rem;
		align-items: stretch;
	}

	#inicio .hero-title-col {
		flex: 1 1 auto;
		min-width: auto;
	}

	#inicio .hero-what-col {
		flex: 1 1 auto;
		min-width: auto;
		padding: 1.5rem;
		background: var(--card-bg);
		border: 1px solid var(--card-border);
		border-radius: 0.5rem;
	}

	#hero-action-title {
		font-size: 1.75rem;
	}

	#hero-action-desc {
		font-size: 1rem;
	}

	.hero-title {
		font-size: 2.5rem;
	}
}

/* Forzar 2 columnas entre 750px y 1025px con mínimo 250px por card */
@media (min-width: 750px) and (max-width: 1025px) {
	.pricing-grid {
		grid-template-columns: repeat(2, minmax(250px, 1fr));
	}

	#servicios .grid {
		grid-template-columns: repeat(2, minmax(250px, 1fr));
	}

	#inicio .project-cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(250px, 1fr));
		gap: 1rem;
	}

	.pricing-card,
	.project-card {
		min-width: 250px;
	}
}

@media (max-width: 768px) {
	#inicio {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.feature-card {
		order: 3
	}

	.feature-list {
		order: 2
	}

	.site-section h2::after {
		bottom: -16px;
		width: 64px
	}

	#inicio .hero-stats-bar {
		flex-direction: row;
		align-items: center;
	}

	#inicio .stat-list {
		justify-content: space-around;
	}

	#inicio .project-card {
		flex: 1 1 100%;
	}
}

@media (max-width: 640px) {
	#inicio {
		margin-top: 4rem;
		padding-bottom: 4rem;
	}

	#hero-action-title {
		font-size: 1.6rem
	}

	#hero-action-desc {
		font-size: 1rem
	}

	.hero-title {
		font-size: 2rem
	}

	.nav-link {
		display: none
	}

	.tech-badge {
		padding: .3rem .4rem;
		line-height: 0;
	}

	.tech-logo {
		width: auto;
		height: auto;
		max-width: 32px;
		max-height: 32px;
	}

	#nosotros {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	#nosotros h2 {
		font-size: 1.6rem;
	}

	#nosotros p {
		font-size: 0.98rem;
		line-height: 1.6;
	}
}

@media (max-width: 480px) {
	#inicio {
		margin-top: 4rem;
		padding-bottom: 4rem;
	}

	#estadisticas .stat-number {
		font-size: 2rem;
	}

	#estadisticas .stat-label {
		font-size: 1rem;
		font-weight: 700;
	}

	#estadisticas .stat-list {
		flex-direction: column;
		gap: .5rem;
		align-items: center;
	}

	#inicio .hero-stats-bar {
		flex-direction: column;
		align-items: center;
		padding: .75rem 0;
	}

	#inicio .stat-list {
		flex-direction: column;
		gap: .75rem;
		align-items: center;
		justify-content: center;
	}

	#inicio .stat-item {
		min-width: auto;
		width: 100%;
		align-items: center;
	}
}

@media (max-width: 640px) {
	#inicio {
		/* en móviles, que el hero crezca según contenido */
		padding-top: 1rem;
		padding-bottom: 1.5rem;
	}

	/* Añadir padding lateral leve para móviles y mantener los ajustes tipográficos */
	#nosotros {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	#nosotros h2 {
		font-size: 1.6rem;
	}

	#nosotros p {
		font-size: 0.98rem;
		line-height: 1.6;
	}
}

.carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.carousel-track {
	display: flex;
	will-change: transform;
	animation: scroll 20s linear infinite;
	--scroll-width: 0px;
}

.carousel-group {
	display: flex;
	gap: 48px;
}

.carousel-item {
	width: 128px;
	flex-shrink: 0;
}

.carousel-item img {
	width: max-content;
	width: 80px;
	height: auto;
	display: block;
}

@media (min-width: 768px) {
	.carousel-item {
		width: 180px;
		flex-shrink: 0;
	}
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-1 * var(--scroll-width)));
	}
}

/* Visual for disabled buttons (make state obvious across themes) */
.btn[disabled],
button[disabled] {
	opacity: 0.48;
	cursor: not-allowed;
	pointer-events: none;
	filter: grayscale(8%);
	box-shadow: none !important;
	border-color: rgba(255, 255, 255, 0.06) !important;
}

/* =========================
	Sección: Servicios comerciales
	========================= */
.service-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: 1rem;
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: transform .2s ease, box-shadow .2s ease;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(10, 25, 47, 0.10);
}

.service-card-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.service-icon {
	font-size: 2rem;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	flex-shrink: 0;
}

.service-icon-web {
	background: rgba(16, 185, 129, 0.12);
}

.service-icon-remodel {
	background: rgba(245, 158, 11, 0.12);
}

.service-icon-support {
	background: rgba(59, 130, 246, 0.12);
}

.service-icon-ai {
	background: rgba(139, 92, 246, 0.12);
}

.service-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.service-features li {
	font-size: 0.95rem;
	color: var(--text-muted);
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
}

.service-ideal {
	font-size: 0.88rem;
	color: var(--text-muted);
	margin-top: auto;
	padding-top: 0.5rem;
}

.service-ideal strong {
	color: var(--primary);
}

/* Botones de servicio con colores */
.btn-service {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	border-radius: 0.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
	color: #fff;
}

.btn-service:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	filter: brightness(1.08);
}

.btn-service-green {
	background: #10B981;
}

.btn-service-orange {
	background: #F59E0B;
}

.btn-service-blue {
	background: #3B82F6;
}

.btn-service-purple {
	background: #8B5CF6;
}

.btn-service-red {
	background: #EF4444;
}

/* Precios coloreados */
.price-green {
	color: #10B981;
}

.price-blue {
	color: #3B82F6;
}

.price-red {
	color: #EF4444;
}

/* Pricing features con checks */
.pricing-features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.95rem;
}

.pricing-features .check {
	font-weight: 700;
	flex-shrink: 0;
}

.pricing-features .check.green {
	color: #10B981;
}

.pricing-features .check.blue {
	color: #3B82F6;
}

.pricing-features .check.red {
	color: #EF4444;
}

.pricing-card-icon {
	font-size: 1.75rem;
	margin-bottom: 0.25rem;
}

/* =========================
	CTA Banner
	========================= */
.cta-banner {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: 1rem;
	padding: 2rem 2.5rem;
}

.cta-banner-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.cta-banner-text {
	flex: 1;
	min-width: 260px;
}

.btn-cta {
	display: inline-block;
	padding: 0.85rem 2rem;
	border-radius: 0.6rem;
	font-weight: 800;
	font-size: 1.1rem;
	text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
	background: #EF4444;
	color: #fff;
	transition: transform .16s ease, box-shadow .16s ease;
}

.btn-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(239, 68, 68, 0.25);
}

/* =========================
	About Values
	========================= */
.about-value-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: 1rem;
	padding: 2rem 1.5rem;
	text-align: center;
	transition: transform .2s ease;
}

.about-value-card:hover {
	transform: translateY(-4px);
}

.about-value-icon {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 0.75rem;
}

/* Hero subtitle y description */
.hero-subtitle {
	font-size: clamp(1.25rem, 2.8vw, 1.75rem);
	color: var(--text-color);
	font-weight: 600;
	line-height: 1.3;
}

.hero-desc {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: var(--text-muted);
	line-height: 1.6;
	max-width: 36rem;
}

/* Sección de decoración de heading */
.site-section h2::after {
	bottom: -14px;
}

/* Light theme section tones ya definidos arriba, reforzar */
.theme-light .section-tone-1 {
	background: linear-gradient(180deg, #EAF3FF, #F0F6FF);
}

.theme-light .section-tone-2 {
	background: linear-gradient(180deg, #F5F9FF, #EEF4FF);
}

/* Header en light: fondo blanco con sutil sombra */
.theme-light .site-header {
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 4px rgba(10, 25, 47, 0.06);
}

.theme-light .site-header a.logo {
	color: #1a2b42;
}

.theme-light .nav-link {
	color: #1a2b42;
}

.theme-light .nav-link:hover {
	color: var(--primary);
}

.theme-light #mobile-menu-button {
	color: #1a2b42;
}

.theme-light .icon-moon,
.theme-light .icon-sun {
	color: #1a2b42;
}

.theme-light nav div .btn-outline {
	border-color: var(--card-border);
	color: #1a2b42;
}

.theme-light nav div .btn-outline:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Responsive para CTA banner */
@media (max-width: 640px) {
	.cta-banner {
		padding: 1.25rem 1rem;
		display: flex;
		justify-content: center;
	}

	.cta-banner-content {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}

	.cta-banner-text p {
		font-size: 1rem !important;
		line-height: 1.5;
	}

	.cta-banner-text .text-sm {
		font-size: 0.85rem !important;
	}

	.btn-cta {
		width: 100%;
		padding: 0.75rem 1.5rem;
		font-size: 1rem;
	}
}

/* More specific target for the product chat start button */
#product-chat-start[disabled] {
	opacity: 0.48;
}

/* Ensure focus outline is not misleading when disabled */
.btn[disabled]:focus,
button[disabled]:focus {
	outline: none;
}

@-webkit-keyframes bounce {

	from,
	20%,
	53%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0);
	}

	70% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}
}

@keyframes bounce {

	from,
	20%,
	53%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0);
	}

	70% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}
}

.bounce {
	-webkit-animation-name: bounce;
	animation-name: bounce;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
}

.animated {
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* =========================
	Scroll-to-top Button
	========================= */
.scroll-top-btn {
	position: fixed;
	bottom: 6rem;
	right: 1.1rem;
	z-index: 55;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(11, 108, 255, 0.3);
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease;
}

.scroll-top-btn.visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.scroll-top-btn:hover {
	box-shadow: 0 6px 24px rgba(11, 108, 255, 0.45);
	transform: translateY(-2px);
}

/* =========================
	Stats Cards (rediseñadas)
	========================= */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 720px;
	margin: 0 auto;
}

.stat-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: 1rem;
	padding: 1.25rem 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	transition: transform .25s ease, box-shadow .25s ease;
}

.stat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 36px rgba(11, 108, 255, 0.12);
}

.stat-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stat-icon svg {
	width: 22px;
	height: 22px;
}

.stat-icon-projects {
	background: rgba(16, 185, 129, 0.12);
	color: #10B981;
}

.stat-icon-years {
	background: rgba(59, 130, 246, 0.12);
	color: #3B82F6;
}

.stat-icon-clients {
	background: rgba(139, 92, 246, 0.12);
	color: #8B5CF6;
}

.stat-card .stat-number {
	font-size: 2.25rem;
	font-weight: 900;
	color: var(--primary);
	line-height: 1;
}

.stat-card .stat-label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text-muted);
}

.theme-light .stat-card {
	background: #fff;
	box-shadow: 0 4px 20px rgba(10, 25, 47, 0.06);
}

/* Responsive stats grid */
@media (max-width: 640px) {
	.stats-grid {
		grid-template-columns: 1fr;
		max-width: 320px;
		gap: 1rem;
	}

	.stat-card {
		flex-direction: row;
		text-align: left;
		padding: 1rem 1.25rem;
		gap: 1rem;
	}

	.stat-card .stat-number {
		font-size: 1.75rem;
	}
}

/* =========================
	Tech Grid (reemplaza carrusel)
	========================= */
.tech-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	max-width: 800px;
	margin: 0 auto;
}

.tech-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 1rem;
	padding: 1.5rem 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	cursor: default;
}

.tech-card i {
	font-size: 2.5rem;
	color: var(--primary);
	transition: transform .2s ease;
}

.tech-card span {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

.tech-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(11, 108, 255, 0.10);
	border-color: var(--primary);
}

.tech-card:hover i {
	transform: scale(1.15);
}

.theme-light .tech-card {
	background: #fff;
	box-shadow: 0 2px 12px rgba(10, 25, 47, 0.04);
}

/* =========================
	Hero Tabs (botones interactivos)
	========================= */
.hero-tabs-container {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 1rem;
	padding: 1.5rem;
	box-shadow: var(--card-shadow);
}

.hero-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--card-border);
}

.hero-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1rem;
	border-radius: 0.6rem;
	font-size: 0.88rem;
	font-weight: 600;
	border: 1px solid var(--card-border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: all .2s ease;
	white-space: nowrap;
}

.hero-tab svg {
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity .2s ease;
}

.hero-tab:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(11, 108, 255, 0.06);
}

.hero-tab:hover svg {
	opacity: 1;
}

.hero-tab-active {
	background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 14px rgba(11, 108, 255, 0.25);
}

.hero-tab-active svg {
	opacity: 1 !important;
}

.hero-tab-content {
	animation: tabFadeIn .3s ease;
}

@keyframes tabFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.theme-light .hero-tabs-container {
	background: #fff;
	box-shadow: 0 4px 20px rgba(10, 25, 47, 0.06);
}

/* =========================
	Contact Form (rediseñado)
	========================= */
.contact-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	max-width: 1000px;
	margin: 0 auto;
	align-items: start;
}

.contact-info {
	display: flex;
	flex-direction: column;
}

.contact-details {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.contact-detail-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.contact-detail-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(11, 108, 255, 0.10);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.contact-form-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: 1rem;
	padding: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.form-label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text-color);
	letter-spacing: 0.01em;
}

.form-input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border: 1px solid var(--card-border);
	border-radius: 0.6rem;
	padding: 0.65rem 0.85rem;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.form-input-wrapper svg {
	flex-shrink: 0;
	color: var(--text-muted);
	opacity: 0.6;
}

.form-input-wrapper:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(11, 108, 255, 0.10);
}

.form-input-wrapper:focus-within svg {
	color: var(--primary);
	opacity: 1;
}

.form-textarea-wrapper {
	align-items: flex-start;
}

.form-textarea-wrapper svg {
	margin-top: 0.15rem;
}

.form-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	color: var(--text-color);
	font-size: 0.95rem;
	font-family: var(--font-body);
}

.form-input::placeholder {
	color: var(--text-muted);
	opacity: 0.6;
}

.form-textarea {
	resize: vertical;
	min-height: 100px;
}

.btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 1.5rem;
	border-radius: 0.6rem;
	border: none;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease;
}

.btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(11, 108, 255, 0.3);
}

.theme-light .contact-form-card {
	background: #fff;
	box-shadow: 0 4px 20px rgba(10, 25, 47, 0.06);
}

.theme-light .form-input-wrapper {
	background: #FAFBFF;
	border-color: rgba(10, 25, 47, 0.15);
}

.theme-light .form-input-wrapper:focus-within {
	background: #fff;
}

@media (max-width: 768px) {
	.contact-wrapper {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* =========================
	Plan Custom Card
	========================= */
.pricing-card-custom {
	border-style: dashed;
	border-color: rgba(139, 92, 246, 0.3);
}

.pricing-card-custom:hover {
	border-color: #8B5CF6;
	box-shadow: 0 10px 30px rgba(139, 92, 246, 0.10);
}

.price-purple {
	color: #8B5CF6;
}

.pricing-features .check.purple {
	color: #8B5CF6;
}

/* =========================
	Mejoras de Armonía de Colores
	========================= */
/* Pricing cards con gradiente sutil en el header */
.pricing-card {
	overflow: hidden;
}

.pricing-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 0.75rem 0.75rem 0 0;
}

.pricing-card[data-plan-card="starter"]::before {
	background: linear-gradient(90deg, #10B981, #34D399);
}

.pricing-card[data-plan-card="pro"]::before {
	background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.pricing-card[data-plan-card="enterprise"]::before {
	background: linear-gradient(90deg, #EF4444, #F87171);
}

.pricing-card[data-plan-card="custom"]::before {
	background: linear-gradient(90deg, #8B5CF6, #A78BFA);
}

/* Service cards con accent top */
.service-card {
	overflow: hidden;
	position: relative;
}

.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
}

.service-card:nth-child(1)::before {
	background: linear-gradient(90deg, #10B981, #34D399);
}

.service-card:nth-child(2)::before {
	background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.service-card:nth-child(3)::before {
	background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.service-card:nth-child(4)::before {
	background: linear-gradient(90deg, #8B5CF6, #A78BFA);
}

/* Gradiente sutil en about value cards */
.about-value-card {
	overflow: hidden;
	position: relative;
}

.about-value-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
}

/* Fondo sutil para la sección de stats */
.theme-light #estadisticas {
	background: linear-gradient(180deg, #EEF2FF, #F5F7FF);
}

/* Color hover en logo */
.color-hover {
	transition: color .3s ease;
}

a.logo:hover .color-hover {
	color: var(--primary);
}

/* Responsive para hero tabs */
@media (max-width: 640px) {
	.hero-tabs {
		gap: 0.35rem;
	}

	.hero-tab {
		padding: 0.45rem 0.7rem;
		font-size: 0.78rem;
	}

	.hero-tab svg {
		width: 14px;
		height: 14px;
	}

	.hero-tabs-container {
		padding: 1rem;
	}
}

/* Responsive para tech grid */
@media (max-width: 767px) and (min-width: 481px) {
	.tech-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.tech-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.tech-card {
		padding: 1rem 0.75rem;
	}

	.tech-card i {
		font-size: 2rem;
	}
}

/* =========================
	n8n Chat Button Override
	========================= */
#n8n-chat {
	z-index: 50;
}

#n8n-chat .chat-window-toggle {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(11, 108, 255, 0.3) !important;
	bottom: 2rem !important;
	right: 2rem !important;
	transition: box-shadow .2s ease, transform .2s ease !important;
}

#n8n-chat .chat-window-toggle:hover {
	box-shadow: 0 6px 24px rgba(11, 108, 255, 0.45) !important;
	transform: translateY(-2px) !important;
}

#n8n-chat .chat-window-toggle svg {
	width: 22px !important;
	height: 22px !important;
}