@charset "utf-8";
/* CSS Document - Restro.es Welcome Design System — VARIANTE CLARA DE PRUEBA
   Copia 1:1 de welcome.css con los tokens de fondo/texto invertidos a claro.
   El header y el hero se re-oscurecen explícitamente más abajo (ver bloque
   ".header, .hero") para que sean el único bloque oscuro de la página —
   todo lo demás (tarjetas "glass", inputs, etc.) hereda estos tokens claros
   sin tocar ni una sola regla de layout/estructura. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary-black: #ffffff;
	--carbon-dark: #f5f5f7;
	--carbon-medium: #ffffff;
	--carbon-light: #eef0f4;
	--metal-dark: #e4e6ec;
	--metal-light: #d5d8e0;

	/* Brand Color Restro */
	--accent-purple: #E8231F;
	--accent-blue: #F4791E;
	--accent-cyan: #FAB40E;
	--accent-pink: #f857a6;

	--text-primary: #1d1d1f;
	--text-secondary: #55555a;
	--text-dim: #86868b;

	/* Aliases usados por el agendador de llamadas (sección Contacto) */
	--primary-color: #E8231F;
	--border-light: rgba(232, 35, 31, 0.15);
	--bg-light: #f0f0f3;
}

/* El header y el hero son el único bloque oscuro de la página: reinstauran
   aquí los tokens oscuros originales, así todo lo que hay dentro de ellos
   (carrusel, tarjetas del carrusel, dropdown "Acceder al panel", menú móvil…)
   sigue viéndose exactamente igual que en la landing original, sin tocar
   ninguna de sus reglas individuales. */
.header, .hero, .footer {
	--primary-black: #07050d;
	--carbon-dark: #0f0b1a;
	--carbon-medium: #171129;
	--carbon-light: #221a3a;
	--metal-dark: #322654;
	--metal-light: #443472;
	--text-primary: #ffffff;
	--text-secondary: #b9b5c9;
	--text-dim: #7f7a93;
	--bg-light: #221a3a;
}

html {
	scroll-behavior: smooth;
	/* En iOS Safari, overflow-x:hidden solo en body NO bloquea el
	   desplazamiento horizontal — hace falta también en html. Sin esto,
	   el carrusel 3D (sus diapositivas usan translateX bastante lejos del
	   centro) generaba overflow real y dejaba la página entera desplazarse
	   hacia la derecha en móvil, "recortando" el logo y el resto del texto. */
	overflow-x: hidden;
	max-width: 100%;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--primary-black);
	color: var(--text-primary);
	overflow-x: hidden;
	position: relative;
}

h1, h2, h3, h4, h5, h6, .logo-text, .nav-menu a, .card-title, .stat-number, .category-tab, .submit-btn {
	font-family: 'Outfit', sans-serif;
}

/* Carbon Fiber Background Pattern */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			rgba(255, 255, 255, 0.015) 2px,
			rgba(255, 255, 255, 0.015) 4px),
		repeating-linear-gradient(90deg,
			transparent,
			transparent 2px,
			rgba(255, 255, 255, 0.015) 2px,
			rgba(255, 255, 255, 0.015) 4px),
		linear-gradient(135deg,
			var(--primary-black) 0%,
			var(--carbon-dark) 25%,
			var(--carbon-medium) 50%,
			var(--carbon-dark) 75%,
			var(--primary-black) 100%);
	z-index: -2;
}

/* Animated Grid Overlay - Custom purple glow */
body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(232, 35, 31, 0.03) 2px, transparent 2px),
		linear-gradient(90deg, rgba(232, 35, 31, 0.03) 2px, transparent 2px);
	background-size: 100px 100px;
	animation: gridMove 25s linear infinite;
	z-index: -1;
	opacity: 0.6;
}

@keyframes gridMove {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(100px, 100px);
	}
}

/* Loading Screen */
.loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: var(--primary-black);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	transition: opacity 0.5s, visibility 0.5s;
}

.loader.hidden {
	opacity: 0;
	visibility: hidden;
}

.loader-content {
	text-align: center;
}

.loader-butterfly {
	width: 100px;
	height: 100px;
	margin: 0 auto 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: butterflyFloat 3s ease-in-out infinite;
}

.loader-icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform-origin: center;
	animation: butterflyFlutter 0.9s ease-in-out infinite;
	filter: drop-shadow(0 6px 14px rgba(232, 35, 31, 0.45));
}

/* Aleteo: el icono se "encoge" horizontalmente como alas batiendo */
@keyframes butterflyFlutter {
	0%, 100% {
		transform: scaleX(1) rotate(-4deg);
	}
	50% {
		transform: scaleX(0.55) rotate(4deg);
	}
}

/* Vuelo: trayectoria flotante en zigzag, como una mariposa */
@keyframes butterflyFloat {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	25% {
		transform: translate(-14px, -18px) rotate(-8deg);
	}
	50% {
		transform: translate(10px, -30px) rotate(6deg);
	}
	75% {
		transform: translate(16px, -12px) rotate(10deg);
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* Navigation Header */
.header {
	position: fixed;
	top: 0;
	width: 100%;
	background: linear-gradient(180deg,
			rgba(15, 11, 26, 0.96) 0%,
			rgba(15, 11, 26, 0.85) 60%,
			rgba(15, 11, 26, 0) 100%);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-bottom: 1px solid rgba(232, 35, 31, 0.15);
	z-index: 1000;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled {
	background: rgba(15, 11, 26, 0.95);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(232, 35, 31, 0.1);
	padding: 5px 0;
}

.nav-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 24px;
}

.logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	position: relative;
}

.logo img {
	height: 32px;
	width: auto;
	transition: transform 0.3s ease;
}

.logo:hover img {
	transform: scale(1.05);
}

.nav-menu {
	display: flex;
	list-style: none;
	gap: 8px;
	align-items: center;
}

.nav-menu a {
	color: var(--text-secondary);
	text-decoration: none;
	padding: 10px 18px;
	transition: all 0.3s ease;
	position: relative;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
	font-size: 13px;
}

.nav-menu a::before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
	transition: width 0.3s ease;
}

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

.nav-menu a:hover::before,
.nav-menu a.active::before {
	width: 70%;
}

.nav-menu a.active {
	color: var(--accent-cyan);
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Acceder al Panel Dropdown Styles */
.panel-dropdown-container {
	position: relative;
}

.panel-dropdown-trigger {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	padding: 8px 12px;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.panel-dropdown-trigger:hover {
	color: var(--text-primary);
	background: rgba(232, 35, 31, 0.08);
}

.panel-dropdown-menu {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 10px;
	width: 300px;
	background: linear-gradient(135deg, var(--carbon-medium), var(--carbon-dark));
	border: 1px solid var(--metal-dark);
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05);
	z-index: 1100;
}

.panel-dropdown-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-dim);
	margin-bottom: 10px;
	font-weight: 700;
}

.panel-input-group {
	display: flex;
	align-items: center;
	background: var(--carbon-dark);
	border: 1px solid var(--metal-dark);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.3s;
}

.panel-input-group:focus-within {
	border-color: var(--accent-purple);
}

.panel-input-prefix {
	padding: 10px 0 10px 12px;
	font-size: 12px;
	color: var(--text-dim);
	user-select: none;
}

.panel-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	padding: 10px 10px 10px 4px;
	color: var(--text-primary);
	font-size: 13px;
	font-family: inherit;
	min-width: 0;
}

.panel-submit-btn {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	background: var(--accent-purple);
	color: white;
	border: none;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	text-decoration: none;
}

.panel-submit-btn:hover {
	background: #FF5A3C;
	box-shadow: 0 4px 12px rgba(232, 35, 31, 0.3);
}

/* Regístrate Header Button */
.btn-register {
	background: linear-gradient(135deg, var(--accent-purple), #B8140F);
	color: white;
	text-decoration: none;
	padding: 8px 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(232, 35, 31, 0.2);
}

.btn-register:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(232, 35, 31, 0.4);
	filter: brightness(1.1);
}

.menu-toggle {
	display: none;
	flex-direction: column;
	cursor: pointer;
	padding: 5px;
}

.menu-toggle span {
	width: 25px;
	height: 2px;
	background: var(--accent-purple);
	margin: 3px 0;
	transition: 0.3s;
	border-radius: 2px;
}

.menu-toggle.active span:nth-child(1) {
	transform: rotate(-45deg) translate(-5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
	transform: rotate(45deg) translate(-5px, -5px);
}

/* Hero Section with 3D Carousel */
.hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 120px 24px 60px;
	/* Base sólida propia (var(--carbon-dark) resuelve al oscuro de arriba) —
	   en el original esto quedaba transparente porque toda la página ya era
	   oscura detrás; aquí hace falta un relleno opaco explícito. */
	background: radial-gradient(circle at center, rgba(232, 35, 31, 0.08) 0%, transparent 65%), var(--carbon-dark);
}

.hero-intro {
	max-width: 800px;
	text-align: center;
	margin-bottom: 20px;
	z-index: 10;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(232, 35, 31, 0.08);
	border: 1px solid rgba(232, 35, 31, 0.25);
	color: var(--text-primary);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: 6px 16px;
	border-radius: 50px;
	margin-bottom: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-badge-pulse {
	width: 6px;
	height: 6px;
	background: var(--accent-cyan);
	border-radius: 50%;
	animation: pulse 1.5s infinite;
}

@keyframes pulse {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(250, 180, 14, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(250, 180, 14, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(250, 180, 14, 0); }
}

.hero-headline {
	font-size: 44px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.5px;
	margin-bottom: 16px;
	color: var(--text-primary);
}

.hero-headline span {
	background: linear-gradient(135deg, var(--accent-purple) 30%, var(--accent-cyan) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-subheading {
	font-size: 16px;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto 30px;
	line-height: 1.5;
}

.hero-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.btn-primary {
	background: linear-gradient(135deg, var(--accent-purple), #B8140F);
	color: white;
	text-decoration: none;
	padding: 12px 30px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 14px;
	transition: all 0.3s;
	box-shadow: 0 8px 20px rgba(232, 35, 31, 0.3);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(232, 35, 31, 0.5);
}

.btn-secondary {
	background: rgba(255, 255, 255, 0.04);
	color: white;
	text-decoration: none;
	padding: 12px 30px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s;
}

.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(232, 35, 31, 0.4);
}

.hero-subtext {
	font-size: 12px;
	color: var(--text-dim);
}

/* 3D Carousel Container */
.carousel-container {
	width: 100%;
	max-width: 1400px;
	height: 760px;
	perspective: 1200px;
	position: relative;
	padding-top: 40px;
	z-index: 5;
}

.carousel {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
}

.carousel-item {
	position: absolute;
	width: 360px;
	height: 680px;
	left: 50%;
	top: 50%;
	transform-style: preserve-3d;
	transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	cursor: pointer;
	transform-origin: center center;
}

.carousel-item .card {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--carbon-medium), var(--carbon-dark));
	border: 1px solid rgba(232, 35, 31, 0.25);
	border-radius: 20px;
	padding: 24px;
	position: relative;
	overflow: hidden;
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	display: flex;
	flex-direction: column;
}

.carousel-item .card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
			transparent,
			rgba(232, 35, 31, 0.4),
			transparent);
	animation: scanline 4s linear infinite;
}

@keyframes scanline {
	0% { transform: translateY(0); }
	100% { transform: translateY(680px); }
}

.card-number {
	position: absolute;
	top: 15px;
	right: 24px;
	font-size: 64px;
	font-weight: 900;
	color: rgba(232, 35, 31, 0.08);
}

.card-image {
	width: 100%;
	height: 400px;
	background: var(--carbon-dark);
	border-radius: 12px;
	margin-bottom: 16px;
	overflow: hidden;
	position: relative;
	border: 1px solid rgba(232, 35, 31, 0.15);
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.85) contrast(1.1);
	transition: all 0.5s ease;
}

.carousel-item:hover .card-image img {
	filter: brightness(1) contrast(1.2);
	transform: scale(1.05);
}

/* Custom Gradient Mockups in case images are missing */
.card-image.gradient-mockup {
	background: linear-gradient(135deg, #3a1512 0%, #170807 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(232, 35, 31, 0.25);
}

.card-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: linear-gradient(135deg, var(--text-primary), var(--accent-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.card-description {
	color: var(--text-secondary);
	line-height: 1.5;
	margin-bottom: 16px;
	font-size: 13px;
	flex: 1;
}

.card-tech {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.tech-badge {
	padding: 4px 10px;
	background: rgba(232, 35, 31, 0.1);
	border: 1px solid rgba(232, 35, 31, 0.3);
	border-radius: 20px;
	font-size: 10px;
	color: #FFAE6B;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.card-cta {
	width: 100%;
	padding: 10px 20px;
	background: linear-gradient(135deg, var(--accent-purple), #B8140F);
	border: none;
	border-radius: 10px;
	color: var(--text-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 11px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(232, 35, 31, 0.25);
}

.card-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(232, 35, 31, 0.4);
}

/* Carousel Controls */
.carousel-controls {
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 16px;
	z-index: 100;
}

.carousel-btn {
	width: 50px;
	height: 50px;
	background: var(--carbon-medium);
	border: 1px solid var(--metal-dark);
	border-radius: 50%;
	color: var(--accent-purple);
	font-size: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.carousel-btn:hover {
	border-color: var(--accent-purple);
	box-shadow: 0 0 15px rgba(232, 35, 31, 0.3);
	transform: scale(1.08);
	color: var(--text-primary);
}

.carousel-indicators {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	z-index: 100;
}

.indicator {
	width: 10px;
	height: 10px;
	background: var(--metal-dark);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
}

.indicator.active {
	background: var(--accent-purple);
	box-shadow: 0 0 8px var(--accent-purple);
	transform: scale(1.25);
}

/* Social Proof Banner */
.social-proof {
	width: 100%;
	background: rgba(245, 245, 247, 0.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(232, 35, 31, 0.1);
	border-top: 1px solid rgba(232, 35, 31, 0.1);
	padding: 16px 24px;
	z-index: 10;
}

.social-proof-container {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 30px;
	font-size: 13px;
	color: var(--text-dim);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.social-proof-container span.bullet {
	color: rgba(232, 35, 31, 0.3);
}

/* Philosophy Section - "Cómo funciona" */
.philosophy-section {
	padding: 100px 24px;
	background: linear-gradient(180deg,
			var(--primary-black) 0%,
			rgba(232, 35, 31, 0.02) 50%,
			var(--primary-black) 100%);
	position: relative;
	overflow: hidden;
}

.philosophy-container {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.prism-line {
	width: 100%;
	max-width: 800px;
	height: 2px;
	margin: 0 auto 50px;
	position: relative;
	overflow: hidden;
	background: rgba(232, 35, 31, 0.1);
}

.prism-line::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent,
			var(--accent-purple) 30%,
			var(--accent-cyan) 60%,
			transparent);
	animation: prismSweep 4s ease-in-out infinite;
}

@keyframes prismSweep {
	0% { left: -100%; }
	100% { left: 100%; }
}

.philosophy-headline {
	font-size: 42px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 20px;
	line-height: 1.2;
	background: linear-gradient(135deg,
			var(--accent-purple) 0%,
			var(--accent-cyan) 50%,
			var(--accent-pink) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 200% 200%;
	animation: gradientFlow 6s ease infinite;
}

@keyframes gradientFlow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.philosophy-subheading {
	font-size: 16px;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto 60px;
	line-height: 1.6;
}

.philosophy-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
	margin-bottom: 40px;
}

.pillar {
	position: relative;
	padding: 40px 24px;
	background: #ffffff;
	border: 1px solid rgba(232, 35, 31, 0.15);
	border-radius: 20px;
	transition: all 0.4s ease;
	overflow: hidden;
}

.pillar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.pillar:hover::before {
	transform: scaleX(1);
}

.pillar:hover {
	transform: translateY(-6px);
	border-color: var(--accent-purple);
	box-shadow: 0 15px 35px rgba(232, 35, 31, 0.15);
	background: linear-gradient(135deg, rgba(232, 35, 31, 0.06), rgba(0, 0, 0, 0.02));
}

.pillar-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	position: relative;
}

.pillar-icon::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
	border-radius: 50%;
	opacity: 0.15;
	animation: pulse-ring 3s ease-in-out infinite;
}

@keyframes pulse-ring {
	0%, 100% { transform: scale(1); opacity: 0.15; }
	50% { transform: scale(1.25); opacity: 0.05; }
}

.pillar-title {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
	color: var(--text-primary);
}

.pillar-description {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.6;
}

.pillar-step {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--accent-cyan);
	margin-bottom: 8px;
}

/* Background Particles */
.philosophy-particles {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 3px;
	height: 3px;
	background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
	border-radius: 50%;
	opacity: 0;
	animation: float-particle 18s infinite linear;
}

@keyframes float-particle {
	0% { transform: translateY(0); opacity: 0; }
	5% { opacity: 0.7; }
	90% { opacity: 0.7; }
	100% { transform: translateY(-100vh); opacity: 0; }
}

/* Stats Section */
.stats-section {
	padding: 80px 24px;
	background: linear-gradient(180deg, var(--primary-black) 0%, var(--carbon-dark) 50%, var(--primary-black) 100%);
	position: relative;
	border-top: 1px solid rgba(232, 35, 31, 0.1);
	border-bottom: 1px solid rgba(232, 35, 31, 0.1);
}

.stats-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
}

.stat-card {
	background: #ffffff;
	border: 1px solid rgba(232, 35, 31, 0.15);
	border-radius: 15px;
	padding: 30px 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.stat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent-purple), transparent);
}

.stat-card:hover::before {
	animation: slideRight 0.6s ease forwards;
}

@keyframes slideRight {
	0% { left: -100%; }
	100% { left: 100%; }
}

.stat-card:hover {
	transform: translateY(-3px);
	border-color: var(--accent-purple);
	box-shadow: 0 12px 30px rgba(232, 35, 31, 0.12);
}

.stat-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
	font-size: 24px;
	color: var(--text-primary);
	box-shadow: 0 6px 15px rgba(232, 35, 31, 0.2);
}

.stat-number {
	font-size: 40px;
	font-weight: 900;
	color: var(--text-primary);
	margin-bottom: 5px;
}

.stat-label {
	font-size: 12px;
	color: var(--accent-cyan);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 10px;
	font-weight: 700;
}

.stat-description {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.4;
}

/* Skills/Funcionalidades Section */
.skills-section {
	padding: 100px 24px;
	background: var(--carbon-dark);
	position: relative;
	overflow: hidden;
}

.skills-container {
	max-width: 1200px;
	margin: 0 auto;
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-title {
	font-size: 40px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 16px;
	background: linear-gradient(135deg, var(--text-primary), var(--accent-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.section-subtitle {
	color: var(--text-secondary);
	font-size: 16px;
	max-width: 550px;
	margin: 0 auto;
}

/* Tab Filtering buttons */
.skill-categories {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.category-tab {
	padding: 10px 24px;
	background: var(--carbon-medium);
	border: 1px solid rgba(232, 35, 31, 0.15);
	border-radius: 30px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
	font-weight: 700;
}

.category-tab:hover {
	background: rgba(232, 35, 31, 0.08);
	border-color: var(--accent-purple);
	color: var(--text-primary);
}

.category-tab.active {
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
	border-color: var(--accent-purple);
	color: var(--text-primary);
	box-shadow: 0 4px 15px rgba(232, 35, 31, 0.3);
}

/* Hexagon Grid */
.skills-hexagon-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 15px;
	margin-top: 40px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.skill-hexagon {
	display: block;
	width: 170px;
	height: 196px;
	position: relative;
	margin: 15px 5px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	animation: fadeInScale 0.6s ease forwards;
}

@keyframes fadeInScale {
	0% { opacity: 0; transform: scale(0.8) translateY(10px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

.skill-hexagon:hover {
	transform: translateY(-8px) scale(1.03);
}

.hexagon-inner {
	width: 100%;
	height: 100%;
	position: relative;
	transform: rotate(30deg);
	overflow: hidden;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--carbon-medium), var(--carbon-light));
	border: 1px solid rgba(232, 35, 31, 0.2);
}

.skill-hexagon:hover .hexagon-inner {
	border-color: var(--accent-purple);
	box-shadow: 0 0 25px rgba(232, 35, 31, 0.4);
}

.hexagon-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: rotate(-30deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.skill-icon-hex {
	font-size: 36px;
	margin-bottom: 8px;
	animation: float-icon 4s ease-in-out infinite;
}

@keyframes float-icon {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.skill-name-hex {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-primary);
	margin-bottom: 6px;
	text-align: center;
}

.skill-level {
	width: 70%;
	height: 3px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

.skill-level-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
	border-radius: 2px;
}

.skill-percentage-hex {
	font-size: 10px;
	color: var(--text-dim);
	margin-top: 6px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Pricing Section - Glassmorphism */
.pricing-section {
	padding: 100px 24px;
	background: linear-gradient(180deg, var(--primary-black) 0%, rgba(232, 35, 31, 0.01) 50%, var(--primary-black) 100%);
	position: relative;
}

.pricing-container {
	max-width: 1100px;
	margin: 0 auto;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 50px;
	align-items: stretch;
}

.price-card {
	background: #ffffff;
	border: 1px solid rgba(232, 35, 31, 0.15);
	border-radius: 24px;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.4s ease;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.price-card:hover {
	transform: translateY(-8px);
	border-color: var(--accent-purple);
	box-shadow: 0 15px 35px rgba(232, 35, 31, 0.2);
}

.price-card.popular {
	background: linear-gradient(135deg, rgba(232, 35, 31, 0.08) 0%, rgba(255, 255, 255, 1) 55%);
	border: 2px solid var(--accent-purple);
	box-shadow: 0 15px 35px rgba(232, 35, 31, 0.15);
}

.price-card.popular::before {
	content: '';
	position: absolute;
	top: -150%;
	left: -150%;
	width: 400%;
	height: 400%;
	background: radial-gradient(circle, rgba(232, 35, 31, 0.12) 0%, transparent 60%);
	pointer-events: none;
}

.popular-badge {
	position: absolute;
	top: 15px;
	right: 20px;
	background: linear-gradient(135deg, #f857a6, #ff5858);
	color: white;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: 4px 12px;
	border-radius: 50px;
	box-shadow: 0 4px 10px rgba(248, 87, 166, 0.35);
}

.plan-name {
	font-size: 13px;
	font-weight: 800;
	color: var(--accent-cyan);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 12px;
}

.popular .plan-name {
	color: #ffb86c;
}

.plan-price-box {
	margin-bottom: 24px;
}

.plan-price {
	font-size: 38px;
	font-weight: 900;
	color: var(--text-primary);
	line-height: 1;
}

.plan-price span {
	font-size: 14px;
	font-weight: 400;
	color: var(--text-secondary);
	margin-left: 2px;
}

.plan-price-subtext {
	font-size: 11px;
	color: var(--text-dim);
	margin-top: 4px;
}

.plan-features {
	list-style: none;
	margin-bottom: 30px;
	flex: 1;
}

.plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--text-secondary);
	margin-bottom: 12px;
	line-height: 1.4;
}

.plan-features svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--accent-cyan);
	stroke-width: 3;
	margin-top: 2px;
	flex-shrink: 0;
}

.popular .plan-features svg {
	stroke: var(--accent-purple);
}

.btn-price-select {
	display: block;
	width: 100%;
	text-align: center;
	padding: 12px;
	background: #f5f5f7;
	color: var(--text-primary);
	text-decoration: none;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition: all 0.3s;
}

.btn-price-select:hover {
	background: #ececef;
	border-color: rgba(232, 35, 31, 0.3);
}

.popular .btn-price-select {
	background: linear-gradient(135deg, var(--accent-purple), #B8140F);
	border: none;
	box-shadow: 0 4px 15px rgba(232, 35, 31, 0.25);
}

.popular .btn-price-select:hover {
	box-shadow: 0 6px 20px rgba(232, 35, 31, 0.4);
	transform: translateY(-1px);
}

/* CTA Final */
.cta-final {
	padding: 100px 24px;
	background: radial-gradient(circle at center, rgba(232, 35, 31, 0.06) 0%, transparent 60%);
	text-align: center;
	border-top: 1px solid rgba(232, 35, 31, 0.1);
	position: relative;
}

.cta-final-box {
	max-width: 600px;
	margin: 0 auto;
}

.cta-final-title {
	font-size: 36px;
	font-weight: 900;
	margin-bottom: 15px;
	letter-spacing: -0.5px;
}

.cta-final-desc {
	font-size: 16px;
	color: var(--text-secondary);
	margin-bottom: 30px;
	line-height: 1.5;
}

/* Contact / Iniciar Conexión Section */
.contact-section {
	padding: 100px 24px;
	background: var(--primary-black);
	border-top: 1px solid rgba(232, 35, 31, 0.1);
}

.contact-container {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: start;
}

.contact-info {
	padding: 30px;
	background: #ffffff;
	border: 1px solid rgba(232, 35, 31, 0.12);
	border-radius: 20px;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding: 16px;
	background: var(--carbon-dark);
	border: 1px solid rgba(255, 255, 255, 0.03);
	border-radius: 12px;
	transition: all 0.3s ease;
	text-decoration: none;
	color: inherit;
}

.info-item:last-child {
	margin-bottom: 0;
}

.info-item:hover {
	transform: translateX(6px);
	background: rgba(232, 35, 31, 0.06);
	border-color: rgba(232, 35, 31, 0.3);
}

.info-icon {
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16px;
	font-size: 18px;
	color: white;
	flex-shrink: 0;
}

.info-text h4 {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 3px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.info-text p {
	font-size: 13px;
	color: var(--text-secondary);
}

.contact-form {
	padding: 30px;
	background: #ffffff;
	border: 1px solid rgba(232, 35, 31, 0.12);
	border-radius: 20px;
}

.form-group {
	margin-bottom: 16px;
}

.form-group label {
	display: block;
	color: var(--text-secondary);
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--carbon-dark);
	border: 1px solid rgba(232, 35, 31, 0.15);
	border-radius: 10px;
	color: white;
	font-size: 13px;
	font-family: inherit;
	transition: all 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--accent-purple);
	box-shadow: 0 0 10px rgba(232, 35, 31, 0.2);
}

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

.submit-btn {
	width: 100%;
	padding: 12px;
	background: linear-gradient(135deg, var(--accent-purple), #B8140F);
	border: none;
	border-radius: 10px;
	color: white;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s;
}

.submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(232, 35, 31, 0.35);
}

/* Footer */
.footer {
	padding: 50px 24px 24px;
	background: var(--primary-black);
	border-top: 1px solid rgba(232, 35, 31, 0.1);
}

.footer-content {
	max-width: 1100px;
	margin: 0 auto 30px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
}

.footer-legal-horizontal {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
	flex-wrap: wrap;
	font-size: 13px;
}

.footer-legal-horizontal a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.3s;
}

.footer-legal-horizontal a:hover {
	color: var(--accent-purple);
}

.footer-legal-divider {
	color: var(--text-dim);
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.footer-logo img {
	height: 28px;
	width: auto;
}

.footer-description {
	color: var(--text-secondary);
	line-height: 1.5;
	font-size: 13px;
}

.footer-social {
	display: flex;
	gap: 10px;
}

.social-icon {
	width: 36px;
	height: 36px;
	background: var(--carbon-medium);
	border: 1px solid rgba(232, 35, 31, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 13px;
	transition: all 0.3s;
}

.social-icon:hover {
	background: var(--accent-purple);
	color: white;
	border-color: var(--accent-purple);
	transform: translateY(-2px);
}

.footer-section h4 {
	color: var(--text-primary);
	margin-bottom: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 700;
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-links a {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 13px;
	transition: all 0.3s;
}

.footer-links a:hover {
	color: var(--accent-cyan);
	padding-left: 4px;
}

.footer-bottom {
	padding-top: 20px;
	border-top: 1px solid rgba(232, 35, 31, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}

.copyright {
	color: var(--text-dim);
	font-size: 12px;
}

.footer-credits {
	color: var(--text-dim);
	font-size: 12px;
}

.footer-credits a {
	color: var(--accent-purple);
	text-decoration: none;
}

.footer-credits a:hover {
	text-decoration: underline;
}

/* Feather Icons Custom Sizing & Colors */
.feather {
	display: inline-block;
	vertical-align: middle;
	stroke-width: 2;
	fill: none;
	stroke: currentColor;
}

.pillar-icon .feather {
	width: 32px;
	height: 32px;
	stroke-width: 1.5;
	color: var(--text-primary);
	z-index: 2;
}

.stat-icon .feather {
	width: 26px;
	height: 26px;
	stroke-width: 2;
	color: white;
}

.skill-icon-hex .feather {
	width: 36px;
	height: 36px;
	stroke-width: 1.5;
	color: var(--accent-purple);
}

.gradient-mockup .feather {
	width: 56px;
	height: 56px;
	stroke-width: 1.25;
	color: var(--accent-purple);
}

.info-icon .feather {
	width: 20px;
	height: 20px;
	stroke-width: 2;
	color: white;
}

/* Responsive Styles */
@media (max-width: 1024px) {
	.carousel-item {
		width: 320px;
		height: 620px;
	}
	.card-image {
		height: 340px;
	}
	.hero-headline {
		font-size: 38px;
	}
	.footer-content {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	/* La barra (logo + acciones + hamburguesa) no debe encogerse ni
	   desbordar: con el padding/gaps de escritorio, en móviles estrechos
	   el botón hamburguesa terminaba empujado fuera del viewport. */
	.nav-container {
		padding: 12px 16px;
		flex-wrap: nowrap;
	}

	.logo, .menu-toggle {
		flex-shrink: 0;
	}

	.menu-toggle {
		display: flex;
	}

	.nav-menu {
		position: fixed;
		left: -100%;
		top: 60px; /* Adjust based on navbar height */
		flex-direction: column;
		background: rgba(15, 11, 26, 0.98);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		width: 100%;
		text-align: center;
		transition: 0.3s ease;
		padding: 30px 0;
		border-bottom: 1px solid rgba(232, 35, 31, 0.2);
		gap: 10px;
	}

	.nav-menu.active {
		left: 0;
	}

	.nav-actions {
		gap: 6px;
		flex-shrink: 0;
	}

	.btn-register {
		padding: 9px;
	}

	/* En móvil el botón de registro queda solo con el icono (el texto
	   "Registro Gratis" es demasiado largo para no desbordar la barra). */
	.btn-register-label {
		display: none;
	}

	.panel-dropdown-trigger {
		padding: 8px 6px;
	}
	
	.carousel-item {
		width: 280px;
		height: 540px;
	}

	.card-image {
		height: 300px;
	}
	
	.card-title {
		font-size: 18px;
	}
	
	.card-description {
		font-size: 12px;
	}
	
	.hero-headline {
		font-size: 32px;
	}
	
	.philosophy-headline {
		font-size: 32px;
	}
	
	.section-title {
		font-size: 30px;
	}
	
	.contact-container {
		grid-template-columns: 1fr;
	}
	
	.footer-content {
		grid-template-columns: 1fr;
		text-align: center;
	}
	
	.footer-brand {
		align-items: center;
	}
	
	.footer-bottom {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
}

/* Demo Modal Styles */
.demo-modal {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .78);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	padding: 24px;
}
.demo-phone { position: relative; }
.demo-close {
	position: absolute; top: -16px; right: -16px; z-index: 3;
	width: 42px; height: 42px; border-radius: 50%;
	background: #fff; color: #111; border: none; cursor: pointer;
	font-size: 26px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}
.demo-phone-frame {
	position: relative;
	width: 380px; height: 780px; max-height: 90vh;
	background: #0a0a0a; border-radius: 46px; padding: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .08);
}
.demo-phone-notch {
	position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
	width: 160px; height: 26px; background: #0a0a0a;
	border-radius: 0 0 18px 18px; z-index: 2;
}
.demo-phone-screen {
	width: 100%; height: 100%;
	border: none; border-radius: 34px; background: #fff; display: block;
}
@media (max-width: 480px) {
	.demo-modal { padding: 12px; }
	.demo-phone-frame { width: 92vw; height: 88vh; border-radius: 38px; padding: 10px; }
	.demo-phone-screen { border-radius: 28px; }
}

/* ===== Chat de soporte ===== */
.chat-unavailable {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 36px 20px;
	border: 1px dashed var(--border-light);
	border-radius: 12px;
	background: var(--carbon-dark);
}
.chat-messages {
	height: 280px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background: var(--carbon-dark);
	border: 1px solid var(--border-light);
	border-radius: 12px;
	margin-bottom: 14px;
}
.chat-empty {
	margin: auto;
	text-align: center;
	color: var(--text-dim);
	font-size: 13px;
	max-width: 240px;
}
.chat-msg {
	display: flex;
	max-width: 80%;
}
.chat-msg.from-visitor {
	align-self: flex-end;
	justify-content: flex-end;
}
.chat-msg.from-admin {
	align-self: flex-start;
}
.chat-bubble {
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
	word-break: break-word;
}
.from-visitor .chat-bubble {
	background: linear-gradient(135deg, var(--accent-purple), #B8140F);
	border-bottom-right-radius: 4px;
}
.from-admin .chat-bubble {
	background: var(--carbon-light);
	border: 1px solid var(--border-light);
	border-bottom-left-radius: 4px;
}
.chat-time {
	display: block;
	font-size: 10px;
	opacity: 0.6;
	margin-top: 4px;
	text-align: right;
}
.chat-input-row {
	display: flex;
	gap: 10px;
	align-items: center;
}
.chat-input {
	flex: 1;
	padding: 12px 14px;
	background: var(--carbon-dark);
	border: 1px solid var(--border-light);
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	font-family: inherit;
}
.chat-input:focus {
	outline: none;
	border-color: var(--accent-purple);
}
.chat-send {
	padding: 12px 22px;
	white-space: nowrap;
}

/* ===== Tarjeta de datos de empresa (paso 0) ===== */
.company-info-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.company-info-item {
	display: flex;
	align-items: center;
	padding: 16px;
	background: var(--carbon-dark);
	border: 1px solid rgba(255, 255, 255, 0.03);
	border-radius: 12px;
	transition: all 0.3s ease;
	text-decoration: none;
	color: inherit;
}
a.company-info-item:hover {
	transform: translateX(6px);
	background: rgba(232, 35, 31, 0.06);
	border-color: rgba(232, 35, 31, 0.3);
}
.company-info-item .info-text h4 {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 3px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.company-info-item .info-text p {
	font-size: 13px;
	color: var(--text-secondary);
}

/* Resalta "Demo personalizada" mientras el agendador está abierto */
.info-item-active {
	background: rgba(232, 35, 31, 0.06) !important;
	border-color: rgba(232, 35, 31, 0.3) !important;
}

/* ===== Indicador de pasos del agendador ===== */
.scheduler-steps-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
}
.step-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--carbon-light);
	color: var(--text-dim);
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
	border: 1px solid var(--border-light);
	transition: all 0.25s;
}
.step-dot.active {
	background: var(--accent-purple);
	color: #fff;
	border-color: var(--accent-purple);
	box-shadow: 0 0 0 4px rgba(232, 35, 31, 0.18);
}
.step-dot.done {
	background: rgba(232, 35, 31, 0.25);
	color: #fff;
	border-color: var(--accent-purple);
}
.step-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dim);
	white-space: nowrap;
	transition: color 0.25s;
}
.step-label.active {
	color: var(--text-primary);
}
.step-line {
	background: var(--border-light);
	border-radius: 2px;
	transition: background 0.25s;
}
.step-line.done {
	background: var(--accent-purple);
}

/* ===== Agendador de llamada (sección Contacto) ===== */
.call-scheduler-container {
	padding: 30px;
	background: #ffffff;
	border: 1px solid rgba(232, 35, 31, 0.12);
	border-radius: 20px;
}

/* La sección de contacto es oscura: el formulario del paso 2 ya está
   dentro de la tarjeta del agendador, así que evitamos la doble tarjeta. */
.call-scheduler-container .contact-form {
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
}

.call-scheduler-container .scheduler-step h3,
.call-scheduler-container .scheduler-step h4 {
	color: var(--text-primary);
}

/* Tarjeta del calendario y panel de horas */
.call-scheduler-container .calendar-wrapper {
	background: var(--carbon-dark);
}

.cal-nav-btn {
	color: var(--text-primary);
	transition: background 0.2s, color 0.2s;
}
.cal-nav-btn:hover {
	background: var(--accent-purple) !important;
	color: #fff;
}

/* Botones de día */
.cal-day-btn {
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 13px;
}
.cal-day-btn:hover:not(.disabled) {
	background: rgba(232, 35, 31, 0.18) !important;
	color: #fff;
}
.cal-day-btn.selected {
	background: var(--accent-purple) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(232, 35, 31, 0.45);
}
.cal-day-btn.disabled,
.cal-day-btn:disabled {
	color: var(--text-dim);
	opacity: 0.35;
	cursor: not-allowed !important;
	text-decoration: line-through;
}

/* Botones de hora */
.slot-btn {
	background: var(--carbon-dark) !important;
	border-color: var(--border-light) !important;
	color: var(--text-secondary) !important;
	font-weight: 600;
	font-size: 13px;
}
.slot-btn:hover {
	border-color: var(--accent-purple) !important;
	color: #fff !important;
}
.slot-btn.selected {
	background: var(--accent-purple) !important;
	border-color: var(--accent-purple) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(232, 35, 31, 0.45);
}

/* ===== Desplegable "Funcionalidades" del menú (estilo mega-menú claro) ===== */
.nav-features-item {
	position: relative;
	list-style: none;
}

.nav-features-trigger {
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-secondary);
	padding: 10px 18px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
	font-size: 13px;
	transition: color 0.3s ease;
}

.nav-features-trigger:hover,
.nav-features-trigger.is-open {
	color: var(--text-primary);
}

.nav-chevron {
	width: 13px;
	height: 13px;
	transition: transform 0.25s ease;
}

.nav-chevron.is-open {
	transform: rotate(180deg);
}

.nav-features-menu {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%);
	width: 560px;
	max-width: 90vw;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
	padding: 16px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	z-index: 1200;
}

.nav-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.nav-feature-item:hover {
	background: #f5f5f7;
}

.nav-feature-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(232, 35, 31, 0.1);
	color: var(--accent-purple);
}

.nav-feature-icon svg {
	width: 18px;
	height: 18px;
}

.nav-feature-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #1d1d1f;
	margin-bottom: 2px;
}

.nav-feature-desc {
	display: block;
	font-size: 12.5px;
	color: #86868b;
	line-height: 1.3;
}

@media (max-width: 768px) {
	.nav-features-menu {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		box-shadow: none;
		grid-template-columns: 1fr;
		margin-top: 6px;
		background: rgba(255, 255, 255, 0.06);
		padding: 8px;
	}
	.nav-feature-item {
		text-align: left;
	}
	.nav-feature-item:hover {
		background: rgba(255, 255, 255, 0.08);
	}
	.nav-feature-title {
		color: #fff;
	}
	.nav-feature-desc {
		color: rgba(255, 255, 255, 0.6);
	}
}