/* ==========================================================================
   HOJA DE ESTILOS ESTRUCTURALES Y MAQUETACIÓN GLOBAL (layout.css)
   Estilos globales reutilizables, sistema de navegación y pie de página.
   ========================================================================== */

/* ==========================================================================
   SECCIÓN 1: CONFIGURACIÓN BASE Y VARIABLES GLOBALES (Design Tokens)
   ========================================================================== */

:root {
	/* --- Colores de Identidad Corporativa (Semánticos) --- */
	/* Gama morada: todos los tonos parten del mismo morado de la marca (#942ad1) */
	--color-primary: #942ad1; /* Morado corporativo (logo, botones, acentos) */
	--color-primary-dark: #7a1fb0; /* Morado más oscuro, mismo tono: estados hover/active */
	--color-primary-accent: #5b7fff; /* Azul complementario (solo degradados azul → morado) */
	--color-primary-light: #e4caf3; /* Morado claro (tinte 25%): textos sobre fondos oscuros */

	/* --- Canales RGB (para transparencias: rgba(var(--x-rgb), 0.1)) --- */
	--color-primary-rgb: 148, 42, 209; /* Mismo valor que --color-primary */
	--bg-neutral-dark-rgb: 11, 19, 42; /* Mismo valor que --bg-neutral-dark */
	--bg-site-light-rgb: 255, 255, 255; /* Mismo valor que --bg-site-light */

	/* --- Superficies y Fondos --- */
	--bg-site-light: #ffffff; /* Fondo blanco puro general */
	--bg-section-soft: #f8fafc; /* Fondo gris muy claro para secciones alternas */
	--bg-lavender: #f5ecfb; /* Lavanda (tinte 8% del morado): heros y degradados */
	--bg-lavender-soft: #fbf7fd; /* Lavanda muy tenue (tinte 4% del morado): tarjetas destacadas */
	--bg-footer-dark: #111622; /* Fondo oscuro neutro para pie de página */
	--bg-neutral-dark: #0b132a; /* Tonalidad oscura profunda para textos y headers */

	/* --- Tipografía --- */
	--text-primary: #0b132a; /* Texto principal de alta jerarquía */
	--text-secondary: #475569; /* Texto secundario / Menús */
	--text-muted: #64748b; /* Texto atenuado / Subtítulos */
	--text-light: #ffffff; /* Texto claro para fondos oscuros */
	--text-navy: #0527a5; /* Azul corporativo secundario (wire): palabra "estratégica", etiquetas y acentos */

	/* --- Escala Tipográfica (usar siempre estas variables para tamaños de letra) --- */
	--font-family-base:
		"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Fuente del sitio (igual que Figma) */
	--fs-xs: 0.8125rem; /* 13px - Etiquetas en mayúsculas, badges, copyright (mínimo del sitio) */
	--fs-sm: 0.9375rem; /* 15px - Textos secundarios, listas, datos de contacto */
	--fs-base: 1.0625rem; /* 17px - Párrafos (tamaño cómodo de lectura) */
	--fs-lg: 1.1875rem; /* 19px - Subtítulos y descripciones destacadas */
	--fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20px → 24px - Títulos de tarjeta */
	--fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* 28px → 36px - Títulos de sección */
	--fs-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); /* 36px → 60px - Título principal del hero */
	--lh-body: 1.7; /* Interlineado de párrafos */
	--lh-heading: 1.2; /* Interlineado de títulos */

	/* --- Bordes y Separadores --- */
	--border-light-subtle: #e2e8f0; /* Borde suave para barras de navegación */
	--border-dark-footer: #2d3548; /* Líneas divisorias internas del footer */
	--border-soft: rgba(0, 0, 0, 0.04); /* Contornos sutiles para tarjetas */

	/* --- Elevación y Sombras Corporativas --- */
	--shadow-navbar: 0 2px 10px rgba(0, 0, 0, 0.03); /* Sombra sutil de separación para la barra superior */
	--shadow-dropdown: 0 15px 35px rgba(0, 0, 0, 0.08); /* Sombra de flotación para submenús desplegables */
	--shadow-btn-cta: 0 4px 12px rgba(var(--color-primary-rgb), 0.25); /* Destaque cromático con difuminado para botones CTA */
	--shadow-btn-social: 0 6px 15px rgba(var(--color-primary-rgb), 0.35); /* Elevación y destello interactivo en estados Hover */
	--shadow-card: 0 6px 14px rgba(0, 0, 0, 0.08); /* Sombra estándar de tarjetas */
	--shadow-card-hover: 0 18px 35px rgba(0, 0, 0, 0.1); /* Sombra de tarjetas al pasar el cursor */
	--shadow-card-soft: 0 12px 30px rgba(0, 0, 0, 0.06); /* Sombra amplia y suave para tarjetas grandes */
	--shadow-image: 0 16px 30px rgba(0, 0, 0, 0.16); /* Sombra para fotografías destacadas */
	--shadow-primary-glow: 0 8px 18px rgba(var(--color-primary-rgb), 0.35); /* Resplandor morado para elementos activos */
}

/**
 * 1.0 Tipografía base del sitio
 */
body {
	font-family: var(--font-family-base);
	-webkit-font-smoothing: antialiased;
}

/**
 * 1.1 Contenedor de Alta Densidad (Pantallas Ultrawide)
 * Extiende el comportamiento por defecto de Bootstrap en pantallas grandes
 * para un aprovechamiento óptimo del espacio horizontal sin perder márgenes.
 */
@media (min-width: 1400px) {
	.container {
		max-width: 1620px !important;
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

/* ==========================================================================
   SECCIÓN 2: COMPONENTE - HEADER Y NAVEGACIÓN PRINCIPAL
   ========================================================================== */

.custom-navbar {
	background-color: var(--bg-site-light);
	border-bottom: 1px solid var(--border-light-subtle);
	/* Relleno compensado por el logo más alto: el header conserva su altura original */
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	overflow: visible;
}

.logo-header {
	/* Logo SVG (proporción 907 × 290): altura fija, ancho automático */
	display: block;
	height: 60px;
	width: auto;
	max-width: 100%;
}

/* Enlaces individuales del menú */
.custom-nav-link {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: var(--fs-base);
	padding: 0.5rem 1.2rem !important;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: color 0.25s ease;
}

/**
 * BARRA INFERIOR DE INDICADOR (Underline Effect)
 * Exclusiva para marcar el ítem activo o el hover sin chocar con íconos.
 */
.custom-nav-link::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 0;
	height: 3px;
	background-color: var(--color-primary);
	border-radius: 2px;
	transition:
		width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
		transform 0.3s ease;
	transform: translateX(-50%);
	pointer-events: none;
}

/* Estados Activo e Interactivo */
.custom-nav-link:hover,
.custom-nav-link.active {
	color: var(--color-primary) !important;
}

.custom-nav-link:hover::after,
.custom-nav-link.active::after {
	width: 60%;
}

/* --- CONTROL EXCLUSIVO PARA LA FLECHA DESPLEGABLE --- */

/* Eliminación de la flecha por defecto de Bootstrap para no romper el ::after */
.dropdown-toggle::after {
	display: none !important;
}

/* Flecha en icono vectorial */
.nav-arrow-icon {
	font-size: 0.75rem;
	transition: transform 0.3s ease;
	display: inline-block;
}

/* Rotación limpia de 180° sobre su propio eje al desplegar */
.custom-dropdown:hover .nav-arrow-icon,
.custom-dropdown.show .nav-arrow-icon {
	transform: rotate(180deg);
}

/* Submenú Flotante (Dropdown Menu) */
.custom-dropdown-menu {
	border-radius: 16px;
	padding: 0.75rem 0;
	margin-top: 0.5rem !important;
	background-color: var(--bg-site-light);
	box-shadow: var(--shadow-dropdown) !important;
	animation: fadeInDropdown 0.2s ease-out;
}

@keyframes fadeInDropdown {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.custom-dropdown-item {
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	font-weight: 500;
	padding: 0.6rem 1.25rem;
	display: flex;
	align-items: center;
	transition: all 0.2s ease;
}

.custom-dropdown-item:hover,
.custom-dropdown-item.active {
	background-color: rgba(var(--color-primary-rgb), 0.08);
	color: var(--color-primary) !important;
	transform: translateX(4px);
}

/* Apertura fluida en Escritorio */
@media (min-width: 992px) {
	.custom-dropdown:hover .custom-dropdown-menu {
		display: block;
	}

	.custom-dropdown-menu::before {
		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		width: 100%;
		height: 10px;
	}

	.custom-dropdown > .custom-nav-link {
		cursor: pointer;
	}
}

/* Botón CTA - Agenda una Asesoría */
.custom-btn-cta {
	background-color: var(--color-primary);
	color: var(--text-light);
	font-weight: 600;
	font-size: var(--fs-xs);
	letter-spacing: 0.05em;
	border-radius: 50px;
	transition: all 0.3s ease;
	border: none;
}

.custom-btn-cta:hover {
	background-color: var(--color-primary-dark);
	color: var(--text-light);
	transform: translateY(-1px);
	box-shadow: var(--shadow-btn-cta);
}

.custom-btn-cta i {
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   HEADER MÓVIL (< 992px): hamburguesa a la izquierda + logo centrado
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.custom-navbar {
		padding-top: 0.55rem;
		padding-bottom: 0.55rem;
	}

	.custom-navbar .container {
		flex-wrap: nowrap;
	}

	.custom-navbar .navbar-brand {
		margin: 0 auto;
	}

	.logo-header {
		height: 46px;
	}
}

.mobile-menu-toggle,
.mobile-menu-spacer {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}

.mobile-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--text-primary);
	font-size: 1.9rem;
	transition: background-color 0.2s ease;
}

.mobile-menu-toggle:hover {
	background: rgba(var(--color-primary-rgb), 0.08);
}

/* --------------------------------------------------------------------------
   VENTANA "AGENDA UNA ASESORÍA" (Formulario HubSpot)
   -------------------------------------------------------------------------- */

.asesoria-modal .modal-content {
	border: none;
	border-radius: 20px;
	box-shadow: var(--shadow-dropdown);
}

.asesoria-modal .modal-header {
	align-items: flex-start;
	padding: 24px 28px 16px;
	border-bottom: 1px solid var(--border-light-subtle);
}

.asesoria-modal-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	color: var(--text-primary);
	font-size: var(--fs-h3);
	font-weight: 800;
}

.asesoria-modal-title i {
	color: var(--color-primary);
}

.asesoria-modal-subtitle {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-sm);
}

.asesoria-modal .modal-body {
	padding: 20px 28px 28px;
	min-height: 320px;
}

/* --------------------------------------------------------------------------
   MENÚ LATERAL MÓVIL (Offcanvas)
   -------------------------------------------------------------------------- */

.mobile-menu.offcanvas {
	--bs-offcanvas-width: 280px;

	border-right: none;
	border-radius: 0 16px 16px 0;
	background-color: var(--bg-lavender-soft);
	box-shadow: var(--shadow-dropdown);
}

.mobile-menu-body {
	display: flex;
	flex-direction: column;
	padding: 20px 14px;
}

.mobile-menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Enlace principal: ícono + texto */
.mobile-menu-link {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: var(--fs-base);
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.mobile-menu-link > i:first-child {
	width: 22px;
	font-size: 1.25rem;
	text-align: center;
}

.mobile-menu-link:hover {
	background: rgba(var(--color-primary-rgb), 0.08);
	color: var(--color-primary);
}

/* Página actual: píldora morada */
.mobile-menu-link.active {
	background: var(--color-primary);
	color: var(--text-light);
	box-shadow: var(--shadow-primary-glow);
}

/* Flecha del submenú de Servicios */
.mobile-menu-arrow {
	margin-left: auto;
	font-size: 0.8rem;
	transition: transform 0.3s ease;
}

.mobile-menu-link[aria-expanded="true"] .mobile-menu-arrow {
	transform: rotate(180deg);
}

.mobile-menu-sublink {
	display: block;
	margin: 4px 0 4px 52px;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.mobile-menu-sublink:hover,
.mobile-menu-sublink.active {
	background: rgba(var(--color-primary-rgb), 0.08);
	color: var(--color-primary);
}

/* Pie del menú: CTA + acciones */
.mobile-menu-footer {
	margin-top: auto;
	padding: 22px 10px 6px;
	border-top: 1px solid var(--border-light-subtle);
	text-align: center;
}

.mobile-menu-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	border-radius: 12px;
	background: var(--color-primary);
	color: var(--text-light);
	font-size: var(--fs-base);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-primary-glow);
	transition: filter 0.25s ease;
}

.mobile-menu-cta:hover {
	color: var(--text-light);
	filter: brightness(0.9);
}

.mobile-menu-actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

.mobile-menu-action {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-light-subtle);
	border-radius: 50%;
	background: var(--bg-site-light);
	color: var(--text-primary);
	font-size: 1rem;
	text-decoration: none;
	transition:
		border-color 0.2s ease,
		color 0.2s ease;
}

.mobile-menu-action:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* ==========================================================================
   SECCIÓN 3: COMPONENTE - FOOTER
   ========================================================================== */

.custom-footer {
	background-color: var(--bg-footer-dark);
	color: var(--text-light);

	width: 100%;

	padding-top: 48px;
	padding-bottom: 23px;

	font-family: var(--font-family-base);
}

/* ==========================================================================
   CONTENEDOR
   ========================================================================== */

/* El ancho lo da el .container de Bootstrap (igual que el header).
   Primera columna pegada a la izquierda y última a la derecha. */
.footer-container {
	display: grid;
	grid-template-columns:
		minmax(0, 300px)
		auto
		minmax(0, 340px)
		auto;

	justify-content: space-between;

	column-gap: 42px;

	align-items: start;
}

/* ==========================================================================
   COLUMNAS
   ========================================================================== */

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

/* ==========================================================================
   LOGO
   ========================================================================== */

.footer-logo {
	margin: 0 0 2px 0;

	line-height: 1;
}

.footer-logo span {
	color: var(--text-light);

	font-size: 27px;
	font-weight: 700;

	letter-spacing: -0.65px;
}

.footer-logo .footer-logo-accent {
	color: var(--color-primary) !important; /* morado principal: resalta sobre el fondo oscuro */
}

/* ==========================================================================
   ACENTO DEL LOGO
   ========================================================================== */

.accent-text {
	color: var(--color-primary-dark);
}

/* ==========================================================================
   SUBTÍTULO
   ========================================================================== */

.footer-sub {
	display: block;

	margin: 0 0 23px 0;
	padding: 0;

	border: none;

	color: rgba(var(--bg-site-light-rgb), 0.55);

	font-size: 10.5px;
	font-weight: 500;

	letter-spacing: 0.08em;
	line-height: 1.2;

	text-transform: uppercase;
}

/* ==========================================================================
   DESCRIPCIÓN
   ========================================================================== */

.footer-slogan {
	margin: 0;

	color: rgba(var(--bg-site-light-rgb), 0.92);

	font-size: var(--fs-base);
	font-weight: 400;

	line-height: 1.65;
}

/* ==========================================================================
   TÍTULOS
   ========================================================================== */

.footer-title {
	margin: 0 0 25px 0;

	padding: 0;

	color: var(--text-light);

	font-size: var(--fs-lg);
	font-weight: 600;

	line-height: 1.2;
}

/* ==========================================================================
   REDES SOCIALES
   ========================================================================== */

.social-icons {
	display: flex;

	align-items: center;

	gap: 15px;
}

.social-icon-btn {
	width: 44px;
	height: 44px;

	padding: 0;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	box-sizing: border-box;

	border: 1px solid var(--border-dark-footer);
	border-radius: 50%;

	background: transparent;

	color: rgba(var(--bg-site-light-rgb), 0.8);
	text-decoration: none;
	font-size: 14px;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.social-icon-btn i {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: inherit;
	font-size: 16px;
	line-height: 1;
}

.social-icon-btn svg {
	width: 17px;
	height: 17px;
	display: block;
	fill: currentColor;
}

.social-icon-btn:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--text-light);
	transform: translateY(-2px);
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */

.contact-item {
	display: flex;
	align-items: flex-start;
	margin: 0 0 14px 0;
	color: rgba(var(--bg-site-light-rgb), 0.72);
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.7;
}

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

.contact-item i {
	flex: 0 0 14px;
	width: 14px;
	margin: 5px 12px 0 0;
	color: rgba(var(--bg-site-light-rgb), 0.45);
	font-size: 14px;
	line-height: 1;
	text-align: center;
}

/* Mismo gris que los enlaces legales; blanco al pasar el cursor */
.contact-item span,
.contact-item a {
	color: rgba(var(--bg-site-light-rgb), 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}

.contact-item a:hover {
	color: var(--text-light);
}

/* ==========================================================================
   LEGAL
   ========================================================================== */

.footer-legal {
	padding-left: 0;
}

.footer-legal .footer-title {
	margin-bottom: 25px;
}

.legal-link {
	display: block;
	margin: 0 0 14px 0;
	color: rgba(var(--bg-site-light-rgb), 0.72);
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.2s ease;
}

.legal-link:last-child {
	margin-bottom: 0;
}

.legal-link:hover {
	color: var(--text-light);
}

/* ==========================================================================
   SEPARADOR
   ========================================================================== */

.footer-divider {
	width: 100%;
	height: 1px;
	margin: 45px 0 28px 0;
	background-color: var(--border-dark-footer);
}

/* ==========================================================================
   COPYRIGHT
   ========================================================================== */

.footer-copyright {
	width: 100%;
	color: rgba(var(--bg-site-light-rgb), 0.72);
	font-size: var(--fs-xs);
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 991.98px) {
	.custom-footer {
		padding-top: 42px;
	}

	.footer-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		row-gap: 38px;
		column-gap: 45px;
	}

	.footer-divider {
		margin-top: 40px;
	}
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {
	.custom-footer {
		padding-top: 38px;
		padding-bottom: 22px;
	}

	.footer-container {
		grid-template-columns: 1fr;

		row-gap: 32px;
	}

	.footer-title {
		margin-bottom: 18px;
	}

	.footer-divider {
		margin-top: 34px;
		margin-bottom: 22px;
	}
}
/* ==========================================================================
   SECCIÓN 4: COMPONENTE - HEADER LEGAL (Aviso, Términos, Cookies)
   ========================================================================== */

/* Contenedor general de la barra superior legal */
.legal-navbar-wrapper {
	background-color: var(--bg-site-light);
	box-shadow: var(--shadow-navbar);
}

/* Fila superior para el Logo */
.legal-navbar-wrapper .border-bottom {
	border-color: var(--border-light-subtle) !important;
}

/* Contenedor de navegación de las pestañas centradas */
.legal-nav-tabs {
	padding-top: 0.75rem;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Enlaces individuales tipo pestaña */
.legal-tab-link {
	color: var(--text-muted);
	font-weight: 500;
	font-size: var(--fs-sm);
	text-decoration: none;
	padding-bottom: 0.75rem;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	position: relative;
	display: inline-block;
	transition: color 0.25s ease;
	white-space: nowrap;
}

/* Estado al pasar el cursor (Hover) */
.legal-tab-link:hover {
	color: var(--color-primary);
}

/* Pestaña activa: Color de marca con línea indicadora inferior alineada */
.legal-tab-link.active {
	color: var(--color-primary);
	font-weight: 700;
}

/* Línea indicadora inferior (Underline) integrada perfectamente */
.legal-tab-link.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: var(--color-primary);
	border-radius: 3px 3px 0 0;
}

/* Responsividad para dispositivos móviles */
@media (max-width: 767.98px) {
	.legal-nav-tabs {
		gap: 1.25rem !important;
		overflow-x: auto;
		justify-content: flex-start !important;
		padding-bottom: 0.2rem;
	}

	.legal-tab-link {
		font-size: var(--fs-xs);
		padding-bottom: 0.6rem;
	}
}