/*
	Theme Name: Correcto 3.0
	Theme URI: https://www.correctoai.com/
	Description: Tema Correcto 3.0 - Diseño limpio basado en Figma
	Author: Correcto
	Author URI: https://www.correctoai.com/
	Version: 3.0.0
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: correcto-3-0
	Tags: elementor, custom-header, performance, modern, business
*/

/* Importar Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap');

/* ========================================
   ESTILOS GLOBALES
   ======================================== */

/* Variables CSS */
:root {
	--font-primary: 'Poppins', sans-serif;
	--font-secondary: 'Inter', sans-serif;
	--color-primary: #4A5CCC;
	--color-secondary: #2b3576;
	--color-text: #444e5a;
	--color-light: #f8f9fa;
	--color-white: #ffffff;
	--border-radius: 8px;
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 32px;
	--spacing-xl: 48px;
	--spacing-xxl: 64px;
	
	/* Layout variables basadas en Figma */
	--page-width: 1176px; /* Ancho total de la web */
	--content-padding: 32px; /* Padding interno para contenido central */
}

/* Reset básico */
* {
	box-sizing: border-box;
}

body {
	font-family: var(--font-secondary);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ========================================
   LAYOUT GENERAL BASADO EN FIGMA
   ======================================== */

/* Contenedor principal de la página */
.site-container {
	max-width: var(--page-width);
	margin: 0 auto;
}

/* Contenedor de contenido principal (excepto header y footer) */
.main-content {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

/* Contenedor de secciones */
.section-container {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

/* Contenedor de ancho completo (para header y footer) */
.full-width-container {
	max-width: var(--page-width);
	margin: 0 auto;
}

/* Responsive para tablets */
@media (max-width: 1024px) {
	:root {
		--content-padding: 24px;
	}
}

/* Responsive para móviles */
@media (max-width: 768px) {
	:root {
		--content-padding: 16px;
	}
}

/* Estilos globales para títulos */

/* H1 - Título principal */
h1 {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 52px;
	line-height: 63px;
	letter-spacing: -1.04px;
	color: var(--color-primary);
	margin: 0 0 24px 0;
	padding: 0;
}

/* H2 - Títulos de sección */
h2 {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 40px;
	line-height: 55px;
	letter-spacing: -0.8px;
	color: var(--color-secondary);
	margin: 0 0 24px 0;
	padding: 0;
}

/* H3 - Subtítulos */
h3 {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 28px;
	line-height: 38px;
	letter-spacing: -0.56px;
	color: var(--color-secondary);
	margin: 0 0 20px 0;
	padding: 0;
}

/* H4 - Subtítulos menores */
h4 {
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.48px;
	color: var(--color-secondary);
	margin: 0 0 16px 0;
	padding: 0;
}

/* H5 - Títulos pequeños */
h5 {
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.4px;
	color: var(--color-secondary);
	margin: 0 0 12px 0;
	padding: 0;
}

/* H6 - Títulos muy pequeños */
h6 {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: -0.36px;
	color: var(--color-secondary);
	margin: 0 0 12px 0;
	padding: 0;
}

/* Párrafos */
p {
	margin: 0 0 16px 0;
	line-height: 1.6;
}

/* Enlaces */
a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--color-secondary);
	text-decoration: underline;
}

/* Listas */
ul, ol {
	margin: 0 0 16px 0;
	padding-left: 24px;
}

li {
	margin-bottom: 8px;
}

/* Imágenes */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Botones base */
button, .btn {
	font-family: var(--font-primary);
	font-weight: 500;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

/* Formularios */
input, textarea, select {
	font-family: var(--font-secondary);
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: var(--border-radius);
	padding: 12px 16px;
	width: 100%;
	transition: border-color 0.3s ease;
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-primary);
}

/* Responsive para títulos globales */
@media (max-width: 1024px) {
	/* H1 responsive */
	h1 {
		font-size: 42px;
		line-height: 52px;
		letter-spacing: -0.84px;
	}
	
	/* H2 responsive */
	h2 {
		font-size: 32px;
		line-height: 44px;
		letter-spacing: -0.64px;
	}
	
	/* H3 responsive */
	h3 {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.48px;
	}
	
	/* H4 responsive */
	h4 {
		font-size: 20px;
		line-height: 28px;
		letter-spacing: -0.4px;
	}
	
	/* H5 responsive */
	h5 {
		font-size: 18px;
		line-height: 24px;
		letter-spacing: -0.36px;
	}
	
	/* H6 responsive */
	h6 {
		font-size: 16px;
		line-height: 22px;
		letter-spacing: -0.32px;
	}
}

@media (max-width: 768px) {
	/* H1 mobile */
	h1 {
		font-size: 36px;
		line-height: 44px;
		letter-spacing: -0.72px;
	}
	
	/* H2 mobile */
	h2 {
		font-size: 28px;
		line-height: 38px;
		letter-spacing: -0.56px;
	}
	
	/* H3 mobile */
	h3 {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.48px;
	}
	
	/* H4 mobile */
	h4 {
		font-size: 20px;
		line-height: 28px;
		letter-spacing: -0.4px;
	}
	
	/* H5 mobile */
	h5 {
		font-size: 18px;
		line-height: 24px;
		letter-spacing: -0.36px;
	}
	
	/* H6 mobile */
	h6 {
		font-size: 16px;
		line-height: 22px;
		letter-spacing: -0.32px;
	}
}

/* ========================================
   VARIABLES CSS - COLORES Y TIPOGRAFÍAS
   ======================================== */

:root {
	/* Colores principales */
	--color-primary: #2B3576;        /* Morado 800 - Títulos principales */
	--color-secondary: #4A5CCC;      /* Azul - Enlaces y elementos secundarios */
	--color-text: #444e5a;           /* Gris - Texto normal */
	--color-text-light: #666666;     /* Gris claro - Texto secundario */
	--color-white: #ffffff;          /* Blanco */
	--color-black: #000000;          /* Negro */
	
	/* Tipografías */
	--font-primary: 'Poppins', sans-serif;
	--font-secondary: 'Inter', sans-serif;
	
	/* Tamaños de fuente */
	--font-size-h1: 52px;
	--font-size-h2: 40px;
	--font-size-h3: 32px;
	--font-size-h4: 28px;
	--font-size-body: 16px;
	--font-size-small: 14px;
	
	/* Line heights */
	--line-height-h1: 63px;
	--line-height-h2: 55px;
	--line-height-h3: 42px;
	--line-height-h4: 42px;
	--line-height-body: 1.6;
	
	/* Letter spacing */
	--letter-spacing-h1: -1.04px;
	--letter-spacing-h2: -0.8px;
	--letter-spacing-h3: -0.64px;
	--letter-spacing-h4: -0.56px;
}

/* ========================================
   RESET HEADINGS - SIN MARGINS NI PADDINGS
   ======================================== */

/* Resetear margins y paddings de todos los headings */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

/* ========================================
   TIPOGRAFÍA - ESPECIFICACIONES FIGMA
   ======================================== */

/* D/H - Título más grande (52px) */
h1 {
	font-family: var(--font-primary);
	font-weight: 100;
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	letter-spacing: var(--letter-spacing-h1);
	color: var(--color-primary);
}

/* H1 - Título principal (40px) */
h1.h1-style {
	font-family: var(--font-primary);
	font-weight: 200;
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-h2);
	color: var(--color-primary);
}

/* H2 - Subtítulo (40px) - Estilo de Figma */
h2 {
	font-family: var(--font-primary);
	font-weight: 100;
	font-size: 40px;
	line-height: 55px;
	letter-spacing: -0.8px;
	color: #2b3576;
}

/* H3 - Título secundario (28px) */
h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 47px;
	letter-spacing: -0.56px;
	color: #2b3576;
	margin: 0;
}

/* Estilos base unificados para todos los títulos H3 */
.correcto-h3-title,
h3.correcto-title {
	font-family: 'Poppins', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 42px;
	letter-spacing: -0.56px;
	margin: 0;
}

/* Colores específicos para diferentes contextos */
.correcto-h3-title--primary,
h3.correcto-title--primary {
	color: #2b3576;
}

.correcto-h3-title--secondary,
h3.correcto-title--secondary {
	color: #3c4ba6;
}

.correcto-h3-title--amarillo,
h3.correcto-title--amarillo {
	color: #c8740b;
}

.correcto-h3-title--verde,
h3.correcto-title--verde {
	color: #1a826a;
}

.correcto-h3-title--morado,
h3.correcto-title--morado {
	color: #3c4ba6;
}

/* Mayor especificidad para sobrescribir Elementor */
body .correcto-3-0 h3,
body .home-funcionalidades-scroll h3,
.funcionalidad-scroll-titulo-contenedor h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 42px;
	letter-spacing: -0.56px;
	margin: 0;
	color: #2b3576;
}

/* Párrafos - Texto normal según Figma */
p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 0;
}

/* Mayor especificidad para sobrescribir Elementor */
body .correcto-3-0 p,
body .home-funcionalidades-scroll p,
.funcionalidad-scroll-text p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 0;
}

/* Botón secundario según Figma */
.button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	background-color: #f3f4fd;
	color: #556aeb;
	text-decoration: none;
	border-radius: 24px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.button-secondary:hover {
	background-color: #e8e9ff;
	transform: translateY(-1px);
	text-decoration: none;
	color: #556aeb;
}

.button-secondary svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* ========================================
   MENÚ HEADER - ESTILOS SEGÚN FIGMA
   ======================================== */

/* Contenedor principal del menú */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent;
	padding: 40px 0 0 0;
	margin-bottom: 64px; /* Separación del contenido */
	width: 100%;
}

/* Contenedor del menú con ancho máximo */
.site-header .main-navigation {
	max-width: var(--page-width);
	margin: 40px auto 0 auto;
}

/* Header completamente transparente en páginas home */
body.home .site-header {
	background: transparent;
}

/* Header con scroll - fondo blanco con animación */
body.home .site-header.scrolled,
.site-header.scrolled {
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Navegación principal - Layout de 3 columnas */
.main-navigation {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 53px;
	gap: 20px;
}

/* Logo a la izquierda */
.site-branding {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	height: 100%;
	position: relative;
	z-index: 10;
}

/* Menú centrado - Columna 2 */
.menu-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu-center > ul {
	display: flex;
	align-items: center;
	gap: 48px; /* Restaurado - estaba bien */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Enlaces normales del menú */
.main-navigation li:not(.menu-item-button):not(.menu-item-button-primary) a {
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #4a5ccc;
	text-decoration: none;
	transition: color 0.3s ease;
}

.main-navigation li:not(.menu-item-button):not(.menu-item-button-primary) a:hover {
	color: #4a5ccc;
	text-decoration: none;
}

/* Botones dentro del menú - Estilo según Figma */
.main-navigation .menu-item-button a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 24px;
	background-color: #dbdef5;
	color: #4a5ccc;
	text-decoration: none;
	border-radius: 24px;
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	transition: all 0.3s ease;
	border: none;
	height: 40px;
}

.main-navigation .menu-item-button a:hover {
	background-color: #c8d0f0;
	transform: translateY(-1px);
	text-decoration: none;
	color: #4a5ccc;
}

.main-navigation .menu-item-button-primary a {
	background: #4a5ccc;
	color: #ffffff;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 24px;
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	text-decoration: none;
	transition: all 0.3s ease;
}

.main-navigation .menu-item-button-primary a:hover {
	background: #3c4ba6;
	color: #ffffff;
	transform: translateY(-1px);
}

/* Botones del menú - Columna 3 (derecha) */
.menu-buttons {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

.menu-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 24px;
	border-radius: 24px;
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 1px solid transparent;
}

.menu-button.login {
	background: rgba(219, 222, 245, 0.5);
	color: #4a5ccc;
	border: none;
	height: 40px;
}

.menu-button.login:hover {
	background: rgba(219, 222, 245, 0.7);
	color: #4a5ccc;
	text-decoration: none;
	transform: translateY(-1px);
}

.menu-button.register,
.menu-button.chrome {
	background: #4a5ccc;
	color: #ffffff;
	border: none;
	height: 40px;
}

.menu-button.register:hover,
.menu-button.chrome:hover {
	background: #3c4ba6;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
}


.site-title {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 35.17px;
	line-height: 52.75px;
	letter-spacing: -0.703px;
	color: #3c4ba6;
	margin: 0;
	text-decoration: none;
}

.site-title:hover {
	color: #3c4ba6;
	text-decoration: none;
}

/* Estilos base del menú */
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation > ul > li {
	margin: 0;
	display: flex;
	align-items: center;
	position: relative;
}

/* ========================================
   APRENDE CON CORRECTO - SECCIÓN FLEXIBLE
   ======================================== */

.home-aprende {
	padding: 0 0 80px 0;
	margin-bottom: 44px;
	background: #ffffff;
	position: relative;
	z-index: 10;
}

.aprende-container {
	max-width: 1176px;
	margin: 0 auto;
	padding: 0;
}

h2.aprende-title {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 40px;
	line-height: 55px;
	letter-spacing: -0.8px;
	color: #2b3576;
	text-align: center;
	margin-bottom: 64px;
}

.aprende-grid {
	display: grid;
	grid-template-columns: 375px 375px 375px;
	gap: 25px;
	align-items: start;
	justify-content: center;
	width: 100%;
}

.aprende-item {
	background: #fcf7ec;
	border-radius: 40px;
	padding: var(--content-padding);
	position: relative;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Forma orgánica de fondo (puede ser un pseudo-elemento) */
.aprende-item::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 200px;
	height: 200px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	z-index: 1;
}

.aprende-item-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.aprende-item-image {
	width: 100%;
	max-width: 300px;
	height: 200px;
	object-fit: contain;
	margin: 0 auto 24px;
	border-radius: 12px;
	background: transparent;
	padding: 0;
	box-shadow: none;
}

/* Mantener el espacio de la imagen incluso si no hay imagen */
.aprende-item-image:empty {
	display: block;
	background: transparent;
}

.aprende-item-pastilla {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px; /* Más padding vertical (6px) y horizontal (12px) */
	border-radius: 25px; /* Forzado para que se vea más redondo */
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0;
	margin-bottom: 16px;
	align-self: flex-start;
	min-width: 60px; /* Ancho mínimo para textos cortos */
	height: 28px;
	box-sizing: border-box; /* Para que el padding se incluya en el tamaño total */
	white-space: nowrap; /* Evita que el texto se rompa en líneas */
}

/* ========================================
   SISTEMA DE TEMAS PARA APRENDE ITEMS
   ======================================== */

/* Tema Amarillo (Escribe) */
.aprende-item--amarillo {
	position: relative;
	background: #fcf7ec; /* Fondo amarillo base */
}

/* Vector de fondo en el contenedor amarillo */
.aprende-item--amarillo::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 315 257" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.9" d="M21.9056 181.364C-24.4521 101.832 12.1126 25.1589 59.8254 4.54157C107.538 -16.0758 125.68 51.5102 180.879 53.4027C236.078 55.2953 226.963 -7.01923 296.366 43.0621C365.769 93.1434 212.153 124.395 179.188 206.977C146.223 289.559 68.2633 260.895 21.9056 181.364Z" fill="url(%23paint0_linear_42_1012)"/><defs><linearGradient id="paint0_linear_42_1012" x1="96.5099" y1="279.691" x2="223.84" y2="2.64079" gradientUnits="userSpaceOnUse"><stop stop-color="%23FFC951"/><stop offset="0.921197" stop-color="%23FCF7EC"/></linearGradient></defs></svg>');
	background-size: 75% auto;
	background-repeat: no-repeat;
	background-position: center 40px;
	opacity: 0.9; /* 90% de opacidad */
	z-index: 1;
	pointer-events: none; /* Para que no interfiera con clics */
}

.aprende-item--amarillo .aprende-item-pastilla {
	background: #fdebc5; /* Amarillo claro exacto de Figma */
	color: #c8740b;
	position: relative;
	z-index: 2;
}

.aprende-item--amarillo .aprende-item-title {
	color: #c8740b;
	position: relative;
	z-index: 2;
}

.aprende-item--amarillo .aprende-item-description {
	position: relative;
	z-index: 2;
}

/* Quitar estilos de la imagen para el tema amarillo */
.aprende-item--amarillo .aprende-item-image {
	position: relative;
	z-index: 2;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

.aprende-item--amarillo .aprende-item-image img {
	position: relative;
	z-index: 2;
	border-radius: 0;
	box-shadow: none;
}

/* Tema Verde (Corrector) - Colores exactos de Figma */
.aprende-item--verde {
	position: relative;
	background: #f7fbfa; /* Verde muy claro para el fondo del contenedor */
}

/* Vector de fondo en el contenedor verde */
.aprende-item--verde::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 322 286" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.9" d="M18.6735 96.0848C58.4308 2.81994 150.21 -15.3176 199.807 13.2657C249.404 41.849 201.638 102.332 236.277 152.335C270.916 202.339 319.963 153.296 321.379 247.545C322.795 341.793 194.14 226.659 99.5098 251.863C4.8794 277.068 -21.0838 189.35 18.6735 96.0848Z" fill="url(%23paint0_linear_42_1081)" fill-opacity="0.3"/><defs><linearGradient id="paint0_linear_42_1081" x1="-19.1059" y1="226.665" x2="309.376" y2="156.892" gradientUnits="userSpaceOnUse"><stop stop-color="%23ABE1CF"/><stop offset="0.921197" stop-color="%23F7FBFA"/></linearGradient></defs></svg>');
	background-size: 75% auto;
	background-repeat: no-repeat;
	background-position: center 40px;
	opacity: 0.9; /* 90% de opacidad */
	z-index: 1;
	pointer-events: none; /* Para que no interfiera con clics */
}

.aprende-item--verde .aprende-item-pastilla {
	background: #def8f0; /* Verde claro para la pastilla */
	color: #1a826a; /* Verde oscuro para el texto */
	position: relative;
	z-index: 2;
}

.aprende-item--verde .aprende-item-title {
	color: #1a826a; /* Verde oscuro para el título */
	position: relative;
	z-index: 2;
}

.aprende-item--verde .aprende-item-description {
	position: relative;
	z-index: 2;
}

/* Quitar estilos de la imagen para el tema verde */
.aprende-item--verde .aprende-item-image {
	position: relative;
	z-index: 2;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

.aprende-item--verde .aprende-item-image img {
	position: relative;
	z-index: 2;
	border-radius: 0;
	box-shadow: none;
}

/* Tema Morado (Vocabulario) - Colores exactos de Figma */
.aprende-item--morado {
	position: relative;
	background: #f3f8fd; /* Azul muy claro para el fondo del contenedor */
}

/* Vector de fondo en el contenedor morado */
.aprende-item--morado::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 399 391" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.9" d="M47.5824 273.672C-2.65772 187.48 36.9693 104.385 88.6781 82.0414C140.387 59.6974 160.047 132.944 219.87 134.995C279.692 137.046 269.813 69.5124 345.029 123.788C420.244 178.064 253.763 211.932 218.037 301.431C182.311 390.929 97.8225 359.865 47.5824 273.672Z" fill="url(%23paint0_linear_55_1059)" fill-opacity="0.2"/><path opacity="0.9" d="M329.631 263.247C297.883 349.531 215.588 370.149 169.363 346.526C123.139 322.904 163.638 265.944 129.982 222.238C96.3273 178.533 54.1455 225.19 48.5592 139.895C42.9729 54.6006 164.751 153.001 249.305 125.852C333.859 98.7035 361.38 176.963 329.631 263.247Z" fill="url(%23paint1_linear_55_1059)" fill-opacity="0.2"/><defs><linearGradient id="paint0_linear_55_1059" x1="128.435" y1="380.235" x2="266.429" y2="79.9815" gradientUnits="userSpaceOnUse"><stop stop-color="%23556AEB" stop-opacity="0.3"/><stop offset="0.921197" stop-color="%23F3F4FD"/></linearGradient><linearGradient id="paint1_linear_55_1059" x1="357.884" y1="143.257" x2="63.5699" y2="221.45" gradientUnits="userSpaceOnUse"><stop stop-color="%23556AEB" stop-opacity="0.3"/><stop offset="0.921197" stop-color="%23F3F4FD"/></linearGradient></defs></svg>');
	background-size: 75% auto;
	background-repeat: no-repeat;
	background-position: center 40px;
	opacity: 0.9; /* 90% de opacidad */
	z-index: 1;
	pointer-events: none; /* Para que no interfiera con clics */
}

.aprende-item--morado .aprende-item-pastilla {
	background: #e0e6f9; /* Azul claro para la pastilla */
	color: #4a5ccc; /* Azul/morado para el texto */
	position: relative;
	z-index: 2;
}

.aprende-item--morado .aprende-item-title {
	color: #3c4ba6; /* Azul más oscuro para el título */
	position: relative;
	z-index: 2;
}

.aprende-item--morado .aprende-item-description {
	position: relative;
	z-index: 2;
}

/* Quitar estilos de la imagen para el tema morado */
.aprende-item--morado .aprende-item-image {
	position: relative;
	z-index: 2;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

.aprende-item--morado .aprende-item-image img {
	position: relative;
	z-index: 2;
	border-radius: 0;
	box-shadow: none;
}

.aprende-item-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 28px;
	line-height: 42px;
	letter-spacing: -0.56px;
	margin: 0 0 16px 0;
}

.aprende-item-description {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 0;
	flex-grow: 1;
}

.aprende-cta {
	text-align: center;
	margin: 64px 0;
}

.aprende-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #4A5CCC;
	color: #ffffff;
	padding: 16px var(--content-padding);
	border-radius: 32px;
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
	text-decoration: none;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.aprende-cta-button:hover {
	background: #3d4bb3;
	transform: translateY(-2px);
	text-decoration: none;
	color: #ffffff;
}

/* Icono eliminado - botón solo con texto */

/* Responsive */
@media (max-width: 768px) {
	.aprende-container {
		padding: 0 var(--content-padding);
	}
	
	h2.aprende-title {
		font-size: 32px;
		line-height: 44px;
		margin-bottom: 48px;
	}
	
	.aprende-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	
	.aprende-item {
		padding: var(--content-padding) 24px;
		border-radius: 24px;
	}
	
	.aprende-item-title {
		font-size: 24px;
		line-height: 36px;
	}
	
	.aprende-item-image {
		height: 160px;
		padding: 16px;
	}
}

/* ========================================
   SOLUCIONES - NAVEGACIÓN HORIZONTAL
   ======================================== */

.home-soluciones {
	padding-top: 64px !important;
	padding-bottom: 64px !important;
	margin-top: 44px;
	background: rgba(242, 229, 223, 0.2);
	position: relative;
	z-index: 10;
	border-radius: 40px;
}

.soluciones-container {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0;
}

.soluciones-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 64px;
	padding: 0 32px;
}

h2.soluciones-title {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 40px;
	line-height: 55px;
	letter-spacing: -0.8px;
	color: #2b3576;
	margin: 0;
	flex: 0 0 644px;
	max-width: 644px;
}

.soluciones-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
	justify-content: center;
	flex: 0 0 436px;
	width: 436px;
}

.solucion-tab {
	background: #e0e6f9 !important;
	color: #4a5ccc !important;
	padding: 1px 26px;
	border-radius: 24px;
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 14.12px;
	line-height: 21.18px;
	letter-spacing: 0;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
	white-space: nowrap;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.solucion-tab:hover {
	background: #d0d8f0;
	color: #4a5ccc;
	text-decoration: none;
}

.solucion-tab.active {
	background: #4a5ccc !important;
	color: #e0e6f9 !important;
	text-decoration: none;
}

.soluciones-content {
	position: relative;
	overflow: hidden;
	padding: 40px 0;
	margin: -16px 0;
}

.soluciones-track {
	display: flex;
	gap: 56px;
}

.solucion-card {
	background: #ffffff;
	border-radius: 24px;
	padding: var(--content-padding);
	flex: 0 0 440px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.solucion-card-content {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.solucion-card-title {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 28px;
	line-height: 42px;
	letter-spacing: -0.56px;
	color: #3c4ba6;
	margin: 0 0 16px 0;
}

.solucion-card-description {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 0;
	flex-grow: 1;
}

/* .solucion-card-button ahora usa .button-secondary con estilos específicos */
.solucion-card-button {
	align-self: flex-end;
	margin-top: 16px;
}

/* Card activa - destacar visualmente */
.solucion-card.active {
	transform: scale(1.02);
	z-index: 2;
}

/* Cards duplicadas para el loop infinito */
.solucion-card-clone {
	pointer-events: none; /* No permitir interacción con las duplicadas */
}

/* ========================================
   SECCIÓN DE PLANES
   ======================================== */

.home-planes {
	padding: 64px 0;
	background: rgba(213, 197, 165, 0.1);
	position: relative;
	z-index: 10;
	border-radius: 56px;
	overflow: hidden;
}

.home-planes::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 850px;
	height: 700px;
	background-image: url("data:image/svg+xml,%3Csvg width='783' height='633' viewBox='0 0 783 633' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.9' d='M766.352 356.391C710.423 588.715 504.197 666.769 377.739 619.732C251.281 572.695 338.647 413.433 238.58 310.758C138.512 208.084 43.6937 341.256 3.54012 122.75C-36.6134 -95.7557 307.447 121.529 517.537 25.935C727.627 -69.6592 822.281 124.067 766.352 356.391Z' fill='url(%23paint0_linear_399_7962)' fill-opacity='0.5'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_399_7962' x1='803.09' y1='38.1104' x2='66.8948' y2='328.758' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FDEBC5'/%3E%3Cstop offset='0.921197' stop-color='%23FFFBF3'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	transform: translate(-50%, -50%);
	z-index: -1;
	pointer-events: none;
}

.planes-container {
	max-width: 1176px;
	margin: 0 auto;
	padding: 0 32px;
}

.planes-header {
	text-align: center;
	margin-bottom: 64px;
}

.planes-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.64px;
	color: #3e4dab;
	margin: 0 0 16px 0;
}

.planes-subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 0;
}

.planes-grid {
	display: grid;
	grid-template-columns: 375px 375px;
	gap: 32px;
	justify-content: center;
	align-items: start;
}

.plan-card {
	background: #ffffff;
	border-radius: 32px;
	padding: 32px;
	border: 1px solid rgba(219, 222, 245, 0.5);
	position: relative;
	height: 638px;
	display: flex;
	flex-direction: column;
	width: 375px;
	justify-content: space-between;
}

.plan-card-header {
	margin-bottom: 32px;
	min-height: 90px; /* Altura mínima para título + subtítulo + espaciado */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.plan-card-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 42px;
	letter-spacing: -0.56px;
	color: #323f8b;
	margin: 0 0 16px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.plan-card-subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 0;
}

.plan-crown-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.plan-crown-icon svg {
	width: 23px;
	height: 16px;
	display: block;
}

.plan-card-items {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.plan-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 16px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	color: #444e5a;
}

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

.plan-item::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 13px;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6339 3.27627C11.122 3.76443 11.122 4.55588 10.6339 5.04404L5.63388 10.044C5.14573 10.5322 4.35427 10.5322 3.86612 10.044L1.36612 7.54404C0.877961 7.05588 0.877961 6.26443 1.36612 5.77627C1.85427 5.28812 2.64573 5.28812 3.13388 5.77627L4.75 7.39239L8.86612 3.27627C9.35427 2.78812 10.1457 2.78812 10.6339 3.27627Z' fill='%238490DC'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 8px;
	margin-top: 6px;
	flex-shrink: 0;
}

.plan-card-button {
	align-self: center;
	width: 100%;
	margin-top: 24px; /* Separación fija de los items de arriba */
}

.plan-card-button .button-primary {
	background: #4A5CCC;
	color: #ffffff;
	padding: 12px 24px;
	border-radius: 32px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	width: 100%;
	text-align: center;
}

.plan-card-button .button-secondary {
	background: rgba(219, 222, 245, 0.5);
	color: #4A5CCC;
	padding: 12px 24px;
	border-radius: 24px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	width: 100%;
	text-align: center;
}

.plan-card-button .button-primary:hover {
	background: #3d4bb3;
	transform: translateY(-2px);
	box-shadow: 0px 8px 24px rgba(74, 92, 204, 0.3);
}

.plan-card-button .button-secondary:hover {
	background: rgba(219, 222, 245, 0.8);
}

/* Responsive para móviles */
@media (max-width: 768px) {
	.planes-container {
		padding: 0 16px;
	}
	
	.planes-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	
	.plan-card {
		padding: 24px;
		width: 100%;
		height: auto;
	}
	
	.planes-title {
		font-size: 28px;
		line-height: 36px;
	}
	
	.planes-subtitle {
		font-size: 14px;
		line-height: 24px;
	}
}

.solucion-card-button svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* Responsive */
@media (max-width: 768px) {
	.home-soluciones {
		border-radius: 24px;
	}
	
	.soluciones-header {
		flex-direction: column;
		gap: 24px;
		padding: 0 var(--content-padding);
	}
	
	h2.soluciones-title {
		font-size: 32px;
		line-height: 44px;
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	.soluciones-navigation {
		flex: 0 0 100%;
		width: 100%;
		justify-content: flex-start;
		max-width: 100%;
	}
	
	.solucion-tab {
		font-size: 13px;
		padding: 6px 16px;
		height: 36px;
	}
	
	.soluciones-content {
		padding: 40px 0 40px 20px;
	}
	
	.soluciones-track {
		gap: 16px;
	}
	
	.solucion-card {
		flex: 0 0 300px;
		height: 232px;
		padding: 24px;
	}
	
	.solucion-card-title {
		font-size: 24px;
		line-height: 32px;
	}
}

/* ========================================
   PARTNERS - CARRUSEL DE LOGOS
   ======================================== */

.home-partners {
	padding: 40px 0;
	background: transparent;
	position: relative;
	z-index: 10;
}

.partners-container {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

.partners-header {
	text-align: center;
	margin-bottom: 24px;
}

.partners-title {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.64px;
	color: #2b3576;
	margin: 0;
}

.partners-logos-container {
	position: relative;
	overflow: hidden;
	height: 140px;
	border-radius: 64px;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.partners-logos-track {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 40px;
	position: relative;
}

.partner-logo {
	flex: 0 0 auto;
	height: 80px;
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.8s ease;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -40px; /* Centrar verticalmente */
}

.partner-logo.active {
	opacity: 0.6;
	transform: translateY(0);
}

/* Posicionamiento dinámico para hasta 12 logos */
.partner-logo:nth-child(1) { margin-left: -400px; }
.partner-logo:nth-child(2) { margin-left: -200px; }
.partner-logo:nth-child(3) { margin-left: 0px; }
.partner-logo:nth-child(4) { margin-left: 200px; }
.partner-logo:nth-child(5) { margin-left: -400px; }
.partner-logo:nth-child(6) { margin-left: -200px; }
.partner-logo:nth-child(7) { margin-left: 0px; }
.partner-logo:nth-child(8) { margin-left: 200px; }
.partner-logo:nth-child(9) { margin-left: -400px; }
.partner-logo:nth-child(10) { margin-left: -200px; }
.partner-logo:nth-child(11) { margin-left: 0px; }
.partner-logo:nth-child(12) { margin-left: 200px; }

.partner-logo img {
	max-height: 100%;
	max-width: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.partner-logo:hover {
	opacity: 1;
}

.partner-logo:hover img {
	filter: grayscale(0%);
}

/* Responsive */
@media (max-width: 768px) {
	.partners-container {
		padding: 0 var(--content-padding);
	}
	
	.partners-title {
		font-size: 28px;
		line-height: 36px;
	}
	
	.partners-logos-container {
		height: 120px;
		border-radius: 32px;
	}
	
	.partner-logo {
		height: 60px;
		width: 150px;
	}
	
	.partner-logo:nth-child(1) { margin-left: -300px; }
	.partner-logo:nth-child(2) { margin-left: -150px; }
	.partner-logo:nth-child(3) { margin-left: 0px; }
	.partner-logo:nth-child(4) { margin-left: 150px; }
	.partner-logo:nth-child(5) { margin-left: -300px; }
	.partner-logo:nth-child(6) { margin-left: -150px; }
	.partner-logo:nth-child(7) { margin-left: 0px; }
	.partner-logo:nth-child(8) { margin-left: 150px; }
	.partner-logo:nth-child(9) { margin-left: -300px; }
	.partner-logo:nth-child(10) { margin-left: -150px; }
	.partner-logo:nth-child(11) { margin-left: 0px; }
	.partner-logo:nth-child(12) { margin-left: 150px; }
}

@media (max-width: 480px) {
	.partners-container {
		padding: 0 16px;
	}
	
	.partners-title {
		font-size: 24px;
		line-height: 32px;
	}
	
	.partners-logos-container {
		height: 100px;
		border-radius: 24px;
	}
	
	.partner-logo {
		height: 50px;
		width: 120px;
	}
	
	.partner-logo:nth-child(1) { margin-left: -240px; }
	.partner-logo:nth-child(2) { margin-left: -120px; }
	.partner-logo:nth-child(3) { margin-left: 0px; }
	.partner-logo:nth-child(4) { margin-left: 120px; }
	.partner-logo:nth-child(5) { margin-left: -240px; }
	.partner-logo:nth-child(6) { margin-left: -120px; }
	.partner-logo:nth-child(7) { margin-left: 0px; }
	.partner-logo:nth-child(8) { margin-left: 120px; }
	.partner-logo:nth-child(9) { margin-left: -240px; }
	.partner-logo:nth-child(10) { margin-left: -120px; }
	.partner-logo:nth-child(11) { margin-left: 0px; }
	.partner-logo:nth-child(12) { margin-left: 120px; }
}

/* ========================================
   DROPDOWN MENUS
   ======================================== */

/* Submenú oculto por defecto */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	transform: translateY(-10px);
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	padding: 4px;
	min-width: 180px;
	width: auto;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 1000;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Mostrar submenú al hacer hover */
.main-navigation li:hover .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Items del submenú */
.main-navigation .sub-menu li {
	display: block; /* Sin !important - ya no hay conflicto */
	margin: 0;
	padding: 0;
	width: 100%;
}

.main-navigation .sub-menu a {
	display: block;
	padding: 8px 16px;
	color: #4a5ccc;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
	border-radius: 6px;
	margin: 0;
}

.main-navigation .sub-menu a:hover {
	background: #f8f9ff;
	color: #3c4ba6;
	text-decoration: none;
}

/* Flecha indicadora para items con submenú - ELIMINADA */
/* Se eliminó la flecha del dropdown para mantener el diseño limpio */


/* Responsive */
@media (max-width: 768px) {
	.main-navigation {
		padding: 0 var(--content-padding);
	}
	
	.main-navigation ul {
		gap: 24px;
	}
	
	/* Dropdowns en móvil - mostrar como lista vertical */
	.main-navigation .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 8px 0 0 0;
		margin-top: 8px;
	}
	
	.main-navigation .sub-menu a {
		padding: 8px 0;
		font-size: 13px;
		color: #666;
		margin: 0;
	}
	
	.main-navigation .sub-menu a:hover {
		background: transparent;
		color: #4a5ccc;
	}
	
	.header-actions {
		gap: 8px;
	}
	
	.header-button {
		padding: 6px 16px;
		font-size: 12px;
	}
}

/* ========================================
   RESET ELEMENTOR - CONTROL TOTAL DESDE THEME
   ======================================== */

/* Resetear todos los elementos de Elementor */
.elementor-widget,
.elementor-widget-wrap,
.elementor-element,
.elementor-section,
.elementor-container,
.elementor-row,
.elementor-column,
.elementor-column-wrap {
	margin: 0 !important;
	padding: 0 !important;
}

/* Resetear contenedores específicos de Elementor */
.elementor-section .elementor-container {
	max-width: var(--page-width) !important;
	margin: 0 auto !important;
	padding: 0 var(--content-padding) !important;
}

/* Resetear widgets individuales */
.elementor-widget {
	margin: 0 !important;
	padding: 0 !important;
}

/* Resetear elementos de texto */
.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-widget-button {
	margin: 0 !important;
	padding: 0 !important;
}

/* Resetear elementos de imagen */
.elementor-widget-image {
	margin: 0 !important;
	padding: 0 !important;
}

/* Resetear elementos de columna */
.elementor-column {
	margin: 0 !important;
	padding: 0 !important;
}

/* Resetear elementos de sección */
.elementor-section {
	margin: 0 !important;
	padding: 0 !important;
}


/* ========================================
   CONTROL DE ESPACIADO DESDE THEME
   ======================================== */

/* Espaciado personalizado para secciones */
.elementor-section.spacing-small {
	padding: 20px 0 !important;
}

.elementor-section.spacing-medium {
	padding: 40px 0 !important;
}

.elementor-section.spacing-large {
	padding: 80px 0 !important;
}

/* Espaciado personalizado para widgets */
.elementor-widget.spacing-small {
	margin: 10px 0 !important;
}

.elementor-widget.spacing-medium {
	margin: 20px 0 !important;
}

.elementor-widget.spacing-large {
	margin: 40px 0 !important;
}

/* Espaciado personalizado para columnas */
.elementor-column.spacing-small {
	padding: 10px !important;
}

.elementor-column.spacing-medium {
	padding: 20px !important;
}

.elementor-column.spacing-large {
	padding: 40px !important;
}

/* ========================================
   LAYOUT GENERAL
   ======================================== */

/* Ancho máximo del contenido - 1280px */
.site {
	max-width: var(--page-width);
	margin: 0 auto;
	position: relative;
}

/* Fondo de la página home - Aplicado al body (llega hasta los bordes) */
body.home {
	background: #ffffff; /* Fondo blanco base */
	min-height: 100vh;
	position: relative; /* Necesario para posicionar el ::before */
}

/* Background degradado con altura fija de 774px - NO fijo, se mueve con el scroll */
body.home::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 774px;
	background: -webkit-linear-gradient(180deg, #d2f2ff 0%, #d2e5ff 50%, #e1e0f8 100%);
	background: linear-gradient(180deg, #d2f2ff 0%, #d2e5ff 50%, #e1e0f8 100%);
	opacity: 0.2;
	z-index: -1;
	pointer-events: none;
}

/* Compensar el header fijo */
body {
	padding-top: 160px; /* 40px margin-top + 56px altura del navbar + 64px margin-bottom */
}


/* ========================================
   PLANTILLA ADS - SIN MENÚ
   ======================================== */

/* Páginas de ads no necesitan padding-top del menú */
.ads-content {
	background: -webkit-linear-gradient(346deg, #e6e6f9,#eef2fd,#ffffff,#f0fbff,#ededfc);
	background: linear-gradient(346deg, #e6e6f9,#eef2fd,#ffffff,#f0fbff,#ededfc);
	min-height: 100vh;
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

/* ========================================
   BOTONES - ESTILOS BASE DEL THEME
   ======================================== */

/* Reset para enlaces que son botones */
a.button,
a.hero-button {
	text-decoration: none;
	color: #ffffff;
}

a.button:hover,
a.hero-button:hover {
	text-decoration: none;
	color: #ffffff;
}

a.button:visited,
a.hero-button:visited {
	text-decoration: none;
	color: #ffffff;
}

/* Botón base para todo el theme - Especificidad alta para sobrescribir Elementor */
body button,
body input[type="button"],
body input[type="submit"],
body .button,
body a.button,
body .hero-button,
.correcto-3-0 button,
.correcto-3-0 input[type="button"],
.correcto-3-0 input[type="submit"],
.correcto-3-0 .button,
.correcto-3-0 a.button,
.correcto-3-0 .hero-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10.813px 37.5px;
	background: #4a5ccc;
	color: #ffffff;
	text-decoration: none;
	border-radius: 26.374px;
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 16px;
	line-height: 26.374px;
	letter-spacing: 0;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	min-height: 48px;
	box-sizing: border-box;
}

body button:hover,
body input[type="button"]:hover,
body input[type="submit"]:hover,
body .button:hover,
body a.button:hover,
body .hero-button:hover,
.correcto-3-0 button:hover,
.correcto-3-0 input[type="button"]:hover,
.correcto-3-0 input[type="submit"]:hover,
.correcto-3-0 .button:hover,
.correcto-3-0 a.button:hover,
.correcto-3-0 .hero-button:hover {
	background: #3c4ba6;
	transform: translateY(-2px);
	text-decoration: none;
	color: #ffffff;
}

body button:visited,
body input[type="button"]:visited,
body input[type="submit"]:visited,
body .button:visited,
body a.button:visited,
body .hero-button:visited,
.correcto-3-0 button:visited,
.correcto-3-0 input[type="button"]:visited,
.correcto-3-0 input[type="submit"]:visited,
.correcto-3-0 .button:visited,
.correcto-3-0 a.button:visited,
.correcto-3-0 .hero-button:visited {
	color: #ffffff;
	text-decoration: none;
}

body button:focus,
body input[type="button"]:focus,
body input[type="submit"]:focus,
body .button:focus,
body a.button:focus,
body .hero-button:focus,
.correcto-3-0 button:focus,
.correcto-3-0 input[type="button"]:focus,
.correcto-3-0 input[type="submit"]:focus,
.correcto-3-0 .button:focus,
.correcto-3-0 a.button:focus,
.correcto-3-0 .hero-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(74, 92, 204, 0.3);
	color: #ffffff;
	text-decoration: none;
}

body button:active,
body input[type="button"]:active,
body input[type="submit"]:active,
body .button:active,
body a.button:active,
body .hero-button:active,
.correcto-3-0 button:active,
.correcto-3-0 input[type="button"]:active,
.correcto-3-0 input[type="submit"]:active,
.correcto-3-0 .button:active,
.correcto-3-0 a.button:active,
.correcto-3-0 .hero-button:active {
	color: #ffffff;
	text-decoration: none;
	background: #3c4ba6;
}

body button:link,
body input[type="button"]:link,
body input[type="submit"]:link,
body .button:link,
body a.button:link,
body .hero-button:link,
.correcto-3-0 button:link,
.correcto-3-0 input[type="button"]:link,
.correcto-3-0 input[type="submit"]:link,
.correcto-3-0 .button:link,
.correcto-3-0 a.button:link,
.correcto-3-0 .hero-button:link {
	color: #ffffff;
	text-decoration: none;
}

/* ========================================
   HERO SECTION - CONTENIDO EDITABLE
   ======================================== */

/* Hero Section - Layout principal */
.hero-section {
	padding: 64px 0 64px 0; /* 64px arriba y abajo como en Figma */
	margin-bottom: 44px; /* Separación con la siguiente sección */
	position: relative;
	z-index: 10;
}

/* Contenedor del hero */
.hero-container {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
	display: flex;
	align-items: flex-start;
	gap: 133px;
	min-height: 381px;
}

/* Contenido del hero (izquierda) */
.hero-content {
	flex: 1;
	max-width: 485px;
}


/* Título del hero - mantiene estilos específicos */
h1.hero-title {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 52px;
	line-height: 63px;
	letter-spacing: -1.04px;
	color: #4A5CCC;
	margin: 0 0 0 0;
	padding: 0;
	width: 485px;
	height: auto;
}

/* Subtítulo del hero */
.hero-subtitle {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 18px;
	line-height: 32px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 25px 0 25px 0;
	padding: 0;
	width: 494px;
	height: auto;
}

/* Botón del hero - Tamaño específico */
.hero-button {
	width: 253px;
	height: 48px;
}

/* Botón específico para otros navegadores - Sin icono */
.hero-button-alt::after {
	content: "";
	margin-left: 0;
	font-size: 14px;
}


/* ========================================
   BROWSER DETECTION - CLASES CSS
   ======================================== */

/* Ocultar elementos por defecto hasta que JavaScript los procese */
.chrome-only,
.non-chrome-only,
.firefox-only,
.safari-only {
	display: none;
}

/* Clases específicas del navegador en el body */
.browser-chrome .chrome-only {
	display: inline-flex !important;
}

.browser-chrome .non-chrome-only {
	display: none !important;
}

.browser-firefox .non-chrome-only,
.browser-safari .non-chrome-only,
.browser-edge .non-chrome-only,
.browser-opera .non-chrome-only,
.browser-brave .non-chrome-only,
.browser-other .non-chrome-only {
	display: inline-flex !important;
}

.browser-firefox .chrome-only,
.browser-safari .chrome-only,
.browser-edge .chrome-only,
.browser-opera .chrome-only,
.browser-brave .chrome-only,
.browser-other .chrome-only {
	display: none !important;
}


/* Imagen del hero (derecha) */
.hero-image {
	flex: 1;
	max-width: 486px;
	width: 486px;
	height: 313px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.hero-img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	border: none;
}

.hero-placeholder {
	width: 100%;
	height: 313px;
	background: #f8f9fa;
	border: 2px dashed #dee2e6;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6c757d;
	font-family: var(--font-secondary);
}

/* Responsive para el hero */
@media (max-width: 1024px) {
	.hero-container {
		flex-direction: column;
		gap: 40px;
		text-align: center;
		align-items: center;
	}
	
	.hero-content {
		max-width: 100%;
		width: auto;
	}
	
	.hero-title {
		font-size: 42px;
		line-height: 52px;
		letter-spacing: -0.84px;
		width: auto;
		height: auto;
	}
	
	.hero-subtitle {
		width: auto;
		height: auto;
	}
	
	.hero-image {
		width: auto;
		max-width: 100%;
		height: auto;
	}
}

@media (max-width: 768px) {
	.hero-container {
		padding: 0 var(--content-padding);
		gap: 30px;
	}
	
	.hero-title {
		font-size: 36px;
		line-height: 44px;
		letter-spacing: -0.72px;
	}
	
	.hero-subtitle {
		font-size: 16px;
		line-height: 28px;
	}
	
	.hero-button {
		padding: 11px 20px;
		font-size: 14px;
		width: auto;
		height: 40px;
	}
	
}

/* ========================================
   PLANTILLA HOME - FONDO FIGMA
   ======================================== */

/* Contenido de la página home - Solo componentes fijos */
/* Contenido manejado completamente con componentes fijos */
/* No necesita estilos específicos ya que no hay contenido de Elementor */

/* ========================================
   SECCIÓN 2 - TRANSICIÓN A FONDO GRIS SUAVE
   ======================================== */

/* Sección 2 - Fondo gris suave con bordes redondeados */
.home-section-2 {
	background: #FFFEFD;
	border-radius: 56px;
	margin-top: 44px; /* Separación con el hero section */
	margin-bottom: 44px; /* Separación con la siguiente sección */
	position: relative;
	z-index: 20; /* Mayor z-index para aparecer sobre el background degradado */
	overflow: hidden;
	box-shadow: 3.03px 0.76px 45.5px 0px rgba(60, 75, 166, 0.06);
}

/* Contenedor de la sección 2 */
.section-2-container {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 64px var(--content-padding) 64px var(--content-padding);
	text-align: center;
}

/* Título de la sección 2 */
h2.section-2-title {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 40px;
	line-height: 55px;
	letter-spacing: -0.8px;
	color: #2b3576;
	margin: 0 0 32px 0;
	padding: 0;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Descripción de la sección 2 */
.section-2-description {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 18px;
	line-height: 32px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 0;
	padding: 0;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}


/* Responsive para la sección 2 */
@media (max-width: 768px) {
	.section-2-container {
		padding: 64px var(--content-padding);
	}
	
	h2.section-2-title {
		font-size: 32px;
		line-height: 44px;
		letter-spacing: -0.64px;
	}
	
	.section-2-description {
		font-size: 16px;
		line-height: 28px;
	}
}

/* ========================================
   FUNCIONALIDADES - COMPONENTE PRINCIPAL
   ======================================== */

.home-funcionalidades {
	position: absolute;
	top: 534px; /* Posicionamiento ajustado */
	left: 0;
	right: 0;
	z-index: 25; /* Mayor z-index para aparecer sobre la sección 2 */
	margin: 0;
	padding: 0;
}

.funcionalidades-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 56px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.funcionalidades-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background: #ffffff;
	border-radius: 20px; /* Completamente redondo */
	height: 40px; /* Altura fija de 40px */
	padding: 0 20px; /* Padding horizontal solo */
	box-shadow: 0px 5.71px 17.14px 0px rgba(153, 167, 239, 0.15); /* Sombra de Figma */
	border: 1px solid #e5e7eb;
	position: relative;
}

.funcionalidad-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px; /* 24px para el contenedor */
	height: 24px; /* 24px para el contenedor */
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 16px; /* Completamente redondo */
}

.funcionalidad-item:hover {
	background: rgba(39, 196, 160, 0.2); /* Verde sombra al 20% */
	transform: none; /* Sin movimiento */
}

.funcionalidad-icono {
	width: 20px; /* Tamaño fijo 20x20px */
	height: 20px; /* Tamaño fijo 20x20px */
	object-fit: contain;
	transition: all 0.3s ease;
	display: block;
	filter: brightness(0) saturate(100%) invert(24%) sepia(89%) saturate(1200%) hue-rotate(218deg) brightness(94%) contrast(91%); /* Convierte a #3C4BA6 */
}

.funcionalidad-item:hover .funcionalidad-icono {
	filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(600%) hue-rotate(120deg) brightness(80%) contrast(100%); /* Verde más oscuro para mejor contraste */
}

.funcionalidad-icono-placeholder {
	width: 20px; /* Tamaño fijo 20x20px */
	height: 20px; /* Tamaño fijo 20x20px */
	background: #4a5ccc;
	border-radius: 4px; /* Ligeramente redondeado */
	display: flex;
	align-items: center;
	justify-content: center;
}

.funcionalidad-inicial {
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--font-primary);
}

/* Tooltip - Estilo según Figma */
.funcionalidad-item::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: #323f8b;
	color: #ffffff;
	padding: 4px 8px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	font-family: var(--font-primary);
	line-height: 18px;
	letter-spacing: 0;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 1000;
	margin-bottom: 18px; /* 8px + 10px = 18px para subirlo 10px más */
}

/* Eliminado el piquito del tooltip según diseño de Figma */
.funcionalidad-item::after {
	display: none;
}

.funcionalidad-item:hover::before {
	opacity: 1;
	visibility: visible;
}

/* Responsive para funcionalidades */
@media (max-width: 768px) {
	.funcionalidades-container {
		padding: 0 var(--content-padding);
	}
	
	.funcionalidades-icons {
		gap: 12px;
		padding: 6px 12px;
	}
	
	.funcionalidad-item {
		width: 36px;
		height: 36px;
	}
	
	.funcionalidad-icono,
	.funcionalidad-icono-placeholder {
		width: 20px;
		height: 20px;
	}
	
	.funcionalidad-inicial {
		font-size: 11px;
	}
}

/* ========================================
   FUNCIONALIDADES - SCROLL HORIZONTAL
   ======================================== */

.home-funcionalidades-scroll {
	position: relative;
	height: 300vh; /* 5 secciones × 60vh cada una */
	background: #ffffff;
	margin-top: 44px; /* Separación con la sección anterior */
}

.funcionalidades-scroll-container {
	position: sticky;
	top: 20vh; /* Más espacio arriba para ver la sección anterior */
	height: 60vh; /* Reducir altura a 60% de la pantalla */
	overflow: hidden;
	max-width: 1176px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


.funcionalidades-scroll-wrapper {
	position: relative;
	height: 60vh;
	overflow: hidden;
}

.funcionalidades-scroll-track {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

.funcionalidad-scroll-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 500px; /* Altura mínima para consistencia visual */
	display: flex;
	align-items: flex-start; /* Alinear al inicio para posición consistente */
	justify-content: center;
	background: #ffffff;
	opacity: 0;
	transform: translateX(100px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	padding-top: 15vh; /* Padding superior para centrar el contenido */
}

.funcionalidad-scroll-section.active {
	opacity: 1;
	transform: translateX(0);
	z-index: 5; /* Asegurar que esté encima de las otras secciones */
}

.funcionalidad-scroll-section.exiting {
	opacity: 0;
	transform: translateX(-100px);
}

.funcionalidad-scroll-content {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	max-width: 1112px; /* 1176px - 64px padding = 1112px */
	gap: 60px;
}

.funcionalidad-scroll-text {
	flex: 0 0 526px; /* Ancho fijo: (1112px - 60px) / 2 = 526px */
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.funcionalidad-scroll-titulo-contenedor {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.funcionalidad-scroll-icono-titulo {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 22px;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-left: 4px; /* Espacio para la sombra izquierda */
	margin-right: 4px; /* Espacio para la sombra derecha */
}

.funcionalidad-scroll-icono-titulo img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* Los estilos de título y párrafo ahora se aplican globalmente con h3 y p */

/* Contenedor para párrafo y botón - botón debajo del texto */
.funcionalidad-scroll-text-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.funcionalidad-scroll-text-content p {
	margin: 0;
}

.funcionalidad-scroll-text-content .button-secondary {
	align-self: flex-end; /* Alineado a la derecha */
}

/* Mayor especificidad para sobrescribir Elementor en botones */
body .correcto-3-0 .button-secondary,
body .home-funcionalidades-scroll .button-secondary,
.funcionalidad-scroll-text-content .button-secondary {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	text-decoration: none;
	color: #556aeb;
	background-color: #f3f4fd;
	border-radius: 24px;
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	z-index: 20;
}

body .correcto-3-0 .button-secondary:hover,
body .home-funcionalidades-scroll .button-secondary:hover,
.funcionalidad-scroll-text-content .button-secondary:hover {
	background-color: #e8e9ff;
	transform: translateY(-1px);
	text-decoration: none;
	color: #556aeb;
}

/* .funcionalidad-scroll-boton ahora usa .button-secondary con estilos específicos */
.funcionalidad-scroll-boton {
	align-self: flex-end;
}

.funcionalidad-scroll-boton svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.funcionalidad-scroll-imagen {
	flex: 0 0 526px; /* Ancho fijo: (1112px - 60px) / 2 = 526px */
	display: flex;
	justify-content: center;
	align-items: center;
}

.funcionalidad-scroll-imagen img {
	max-width: 100%;
	max-height: 400px;
	object-fit: contain;
	border-radius: 56px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Iconos específicos para cada tipo de funcionalidad */
.funcionalidad-scroll-icono-titulo {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 22px;
	flex-shrink: 0;
	position: relative;
}

/* Iconos hardcodeados eliminados - ahora se usan iconos personalizados desde ACF */

/* Demos específicos para cada funcionalidad */
.funcionalidad-demo {
	width: 100%;
	height: 200px;
	border-radius: 8px;
	background: #ffffff;
	border: 1px solid #e4e7ea;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

/* Demo Corrector - Muestra errores ortográficos */
.funcionalidad-demo-corrector {
	background: #ffffff;
}

.funcionalidad-demo-corrector::before {
	content: "Error Tipográfico";
	position: absolute;
	top: 20px;
	left: 20px;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	color: #044d9e;
}

/* Demo Parafraseador - Muestra opciones de estilo */
.funcionalidad-demo-parafraseador {
	background: #ffffff;
}

.funcionalidad-demo-parafraseador::before {
	content: "Reescribir | Académico | Amigable | Alargar | Acortar";
	position: absolute;
	top: 20px;
	left: 20px;
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 500;
	color: #1a826a;
}

/* Demo Traductor - Muestra interfaz de traducción */
.funcionalidad-demo-traductor {
	background: #f9fafa;
}

.funcionalidad-demo-traductor::before {
	content: "Traductor | Español ▼";
	position: absolute;
	top: 20px;
	left: 20px;
	font-family: var(--font-primary);
	font-size: 9px;
	font-weight: 600;
	color: #556aeb;
}

/* Demo Sinónimos - Muestra sugerencias */
.funcionalidad-demo-sinonimos {
	background: #ffffff;
}

.funcionalidad-demo-sinonimos::before {
	content: "Sinónimos | hondura | fondo | calado | abismo | insondable";
	position: absolute;
	top: 20px;
	left: 20px;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	color: #4a5ccc;
}

/* Demo Generador - Muestra formulario */
.funcionalidad-demo-generador {
	background: #f9fafa;
}

.funcionalidad-demo-generador::before {
	content: "Generador de textos";
	position: absolute;
	top: 20px;
	left: 20px;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	color: #3c4ba6;
}

/* Sobrescribir estilos de Elementor en funcionalidades */
.home-funcionalidades-scroll .elementor-kit-9 h3,
.home-funcionalidades-scroll .elementor h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 47px;
	letter-spacing: -0.56px;
	color: #2b3576;
	margin: 0;
}

.home-funcionalidades-scroll .elementor-kit-9 p,
.home-funcionalidades-scroll .elementor p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0;
	color: #444e5a;
	margin: 0;
}

/* Sobrescribir estilos de Elementor para botones en funcionalidades */
.home-funcionalidades-scroll .elementor-kit-9 a,
.home-funcionalidades-scroll .elementor a,
.home-funcionalidades-scroll .elementor-kit-9 .button-secondary,
.home-funcionalidades-scroll .elementor .button-secondary {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	text-decoration: none;
	color: #556aeb;
	background-color: #f3f4fd;
	border-radius: 24px;
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.3s ease;
}

.home-funcionalidades-scroll .elementor-kit-9 a:hover,
.home-funcionalidades-scroll .elementor a:hover,
.home-funcionalidades-scroll .elementor-kit-9 .button-secondary:hover,
.home-funcionalidades-scroll .elementor .button-secondary:hover {
	background-color: #e8e9ff;
	transform: translateY(-1px);
	text-decoration: none;
	color: #556aeb;
}

/* Indicadores eliminados - navegación automática por scroll */

/* Responsive para funcionalidades scroll */
@media (max-width: 768px) {
	.funcionalidades-scroll-container {
		padding: 0 var(--content-padding);
	}
	
	
	.funcionalidad-scroll-content {
		flex-direction: column;
		gap: 40px;
		text-align: center;
	}
	
	.funcionalidad-scroll-titulo {
		font-size: 28px;
		line-height: 36px;
	}
	
	.funcionalidad-scroll-descripcion {
		font-size: 16px;
		line-height: 28px;
	}
	
	.funcionalidad-scroll-imagen img {
		max-height: 250px;
	}
}

/* ========================================
   FOOTER - Diseño basado en Figma
======================================== */

.site-footer {
    background-color: #676b87;
    color: #ffffff;
    padding: 48px 0 0;
    margin-top: 80px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 56px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Navegación del Footer - Layout de columnas como en Figma */
.footer-navigation {
    width: 100%;
    margin-bottom: 48px;
}

.footer-menu {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 56px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1168px;
}

.footer-menu > li {
    position: relative;
}

/* Títulos de sección (Poppins Medium 12px) */
.footer-menu > li > a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.footer-menu > li > a:hover {
    color: #ffffff;
    opacity: 0.8;
}

/* Submenús del Footer (Inter Medium 11px) */
.footer-menu .sub-menu {
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: auto;
    border-radius: 0;
}

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

.footer-menu .sub-menu a {
    display: block;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 0;
    transition: opacity 0.3s ease;
}

.footer-menu .sub-menu a:hover {
    background: none;
    color: #ffffff;
    opacity: 0.8;
}

/* Sección de Extensiones y App */
.footer-extensions {
    text-align: center;
    margin-bottom: 48px;
}

.footer-extensions-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #ffffff;
    margin-bottom: 8px;
}

.footer-extensions-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-extensions-links a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 20px;
    transition: opacity 0.3s ease;
}

.footer-extensions-links a:hover {
    opacity: 0.8;
}

/* Logo y Redes Sociales */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 0;
    height: 53px;
}

.footer-logo {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 35.17px;
    line-height: 52.75px;
    letter-spacing: -0.7px;
    color: #ffffff;
    text-decoration: none;
}

.footer-social {
    display: flex;
    gap: 24px;
    align-items: center;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-social a:hover {
    opacity: 0.8;
}

.footer-social svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Información del sitio - Oculto según Figma */
.site-info {
    display: none;
}

/* Responsive Footer */
@media (max-width: 1200px) {
    .footer-menu {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-container {
        padding: 0 var(--content-padding);
    }
    
    .footer-menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        height: auto;
        padding: 20px 0;
    }
    
    .footer-extensions-links {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .footer-menu {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ========================================
   SECCIÓN DE RESEÑAS
   ======================================== */

.home-resenas {
	padding: 64px 0;
	background: #f8f8fd;
	position: relative;
	z-index: 10;
	border-radius: 32px;
	margin: 44px 0;
	overflow: visible; /* Cambiado para que los botones sean visibles */
}

.resenas-container {
    max-width: 1176px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 64px;
}

.resenas-header {
    flex: 0 0 302px; /* Ancho fijo como en Figma */
    margin-bottom: 0;
    position: relative;
    z-index: 20; /* Asegurar que esté por encima de las cards */
}

.resenas-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.64px;
    color: #323f8b;
    margin: 0;
}

.resenas-content {
    position: relative;
    overflow: hidden; /* Ocultar cards que están fuera del área visible */
    flex: 1;
    height: 304px; /* Altura fija como en Figma */
    z-index: 10; /* Por debajo del título */
}

.resenas-track {
    display: flex;
    gap: 32px;
    transition: transform 0.3s ease;
}

.resena-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    flex: 0 0 375px;
    height: 304px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: 0 2px 8px rgba(39, 196, 160, 0.15); /* Drop shadow en lugar de border */
}

.resena-texto {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #444e5a;
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.resena-usuario {
    display: flex;
    align-items: center;
    gap: 16px;
}

.resena-foto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #dbdef5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.resena-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resena-info {
    flex: 1;
}

.resena-nombre {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #444e5a;
    margin: 0 0 4px 0;
}

.resena-cargo {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    color: #647384;
    margin: 0;
}

.resenas-navigation {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    position: relative;
    z-index: 30;
    width: 100%;
}

.resena-nav-button {
    width: 40px;
    height: 40px;
    background: #f8f8fd;
    border: 1px solid #6776d4;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.resena-nav-button:hover {
    background: #6776d4;
    border-color: #6776d4;
}

.resena-nav-button:hover svg {
    fill: #ffffff;
}

.resena-nav-button svg {
    width: 12px;
    height: 12px;
    fill: #6776d4;
    transition: fill 0.3s ease;
}

.resena-nav-button.prev svg {
    transform: rotate(180deg);
}

.resena-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.resena-nav-button:disabled:hover {
    background: #f8f8fd;
    border-color: #6776d4;
}

.resena-nav-button:disabled:hover svg {
    fill: #6776d4;
}

/* Responsive para reseñas */
@media (max-width: 768px) {
    .resenas-container {
        padding: 0 16px;
    }
    
    .resenas-header {
        margin-bottom: 48px;
        max-width: 100%;
    }
    
    .resenas-title {
        font-size: 28px;
        line-height: 36px;
    }
    
    .resena-card {
        flex: 0 0 280px;
        height: auto;
        min-height: 280px;
        padding: 24px;
    }
    
    .resenas-track {
        gap: 16px;
    }
    
    .resenas-navigation {
        margin-top: 24px;
    }
}