/* Importar fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600&family=Montserrat:wght@700;800&display=swap');

/* Definición de variables CSS para la paleta de colores (Modo Claro por defecto) */
:root {
    --primary-blue-dark: #0A192F;
    --primary-blue-light: #00BFFF;
    --neutral-light: #F8F9FA;
    --neutral-dark: #495057;
    --accent-gold: #FFD700;
    --success-green: #28a745;
    --error-red: #dc3545;

    /* Colores base que se invertirán en modo oscuro */
    --bg-color: var(--neutral-light);
    --text-color: var(--neutral-dark);
    --heading-color: var(--primary-blue-dark);
    --header-bg: var(--primary-blue-dark);
    --header-text-color: var(--neutral-light); /* Texto claro para header principal */
    --card-bg: var(--neutral-light);
    --card-border: #e0e0e0;
    --card-hover-border: var(--accent-gold);
    --chat-bg: #ffffff;
    --chat-border: #e0e0e0;
    --chat-messages-bg: #fcfcfc;
    --chat-user-bubble: #dcf8c6;
    --chat-ai-bubble: #e0e0e0;
    --ai-suggestion-bg: #e6f7ff;
    --ai-suggestion-border: var(--primary-blue-light);
    --ai-suggestion-text: var(--primary-blue-dark);
    --footer-bg: var(--primary-blue-dark);
    --footer-text-color: var(--neutral-light);

    /* NUEVAS VARIABLES PARA SECCIÓN HERO */
    --hero-overlay-color: rgba(248, 249, 250, 0.7); /* Capa clara para modo claro */
    --hero-text-color: var(--primary-blue-dark);    /* Texto oscuro para modo claro */
}

/* Modo Oscuro: Redefinición de variables */
body.dark-mode {
    --bg-color: #121212; /* Fondo oscuro */
    --text-color: #e0e0e0; /* Texto claro */
    --heading-color: #E6E6E6; /* Títulos más claros */
    --header-bg: #1f1f1f;
    --header-text-color: #E6E6E6; /* Texto claro para header principal */
    --card-bg: #1f1f1f;
    --card-border: #333;
    --card-hover-border: var(--accent-gold);
    --chat-bg: #2b2b2b;
    --chat-border: #333;
    --chat-messages-bg: #363636;
    --chat-user-bubble: #0056b3; /* Un azul más oscuro y profundo */
    --chat-ai-bubble: #4a4a4a; /* Gris más oscuro */
    --ai-suggestion-bg: #0A192F; /* Fondo oscuro para sugerencias */
    --ai-suggestion-border: var(--primary-blue-light);
    --ai-suggestion-text: var(--neutral-light);
    --footer-bg: #1f1f1f;
    --footer-text-color: #E6E6E6;

    /* REESCRITURA PARA SECCIÓN HERO EN MODO OSCURO */
    --hero-overlay-color: rgba(10, 25, 47, 0.85); /* Capa oscura para modo oscuro */
    --hero-text-color: var(--header-text-color);    /* Texto claro para modo oscuro */
}


/* Estilos Generales y Reset Básico */
html {
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho/alto */
    scroll-behavior: smooth; /* Desplazamiento suave para anclas */
}

*, *::before, *::after { /* Incluye pseudo-elementos para box-sizing */
    box-sizing: inherit;
}

body {
    font-family: 'Lato', sans-serif; /* Cuerpo de texto */
    line-height: 1.7; /* Aumentado para mayor legibilidad */
    color: var(--text-color); /* Usar variable */
    background-color: var(--bg-color); /* Usar variable */
    margin: 0;
    padding: 0;
    transition: background-color 0.5s ease, color 0.5s ease; /* Transición para el modo oscuro */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif; /* Títulos */
    color: var(--heading-color); /* Usar variable */
    margin-bottom: 20px;
}

h1 { font-size: 3.8em; font-weight: 800; } /* Ajuste de peso para H1 */
h2 { font-size: 2.5em; font-weight: 800; } /* Ajuste de peso para H2 */
h3 { font-size: 1.6em; font-weight: 700; } /* Ajuste de peso para H3 */
h4 { font-size: 1.3em; font-weight: 700; } /* Ajuste de peso para H4, usado en tarjetas de listado */
p { font-size: 1.05em; margin-bottom: 15px; } /* Tamaño de párrafo ligeramente aumentado */


a {
    text-decoration: none;
    color: var(--primary-blue-light); /* Usar variable de acento */
}

/* Clases de acento */
.gold-accent {
    color: var(--accent-gold); /* Usar variable */
}

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

/* Header - Navegación Principal */
.sticky-header {
    background-color: var(--header-bg); /* Usar variable */
    color: var(--header-text-color); /* Usar variable */
    padding: 15px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Espacio entre los elementos del header */
}

.logo a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5em; /* Ajuste de tamaño de fuente para el logo */
    color: var(--header-text-color); /* Usar variable */
    transition: color 0.3s ease;
}

.logo a:hover {
    color: var(--primary-blue-light); /* Acento al pasar el ratón */
}

.logo-pro { /* Estilo específico para "Pro" en el logo */
    color: var(--accent-gold); /* Oro Metálico */
    margin-left: 2px; /* Pequeño ajuste visual */
    font-size: 0.9em; /* Ligeramente más pequeño que el resto del logo */
}

.header-container nav { /* MODIFICADO: Asegura que la nav tome el espacio y centre su contenido */
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Centra el ul dentro del nav */
    align-items: center;
}

nav ul { /* MODIFICADO: Distribuye los ítems de menú uniformemente y evita el salto de línea en pantallas anchas */
    list-style: none;
    display: flex;
    flex-wrap: nowrap; /* Crucial: Evita que los ítems de menú se envuelvan prematuramente */
    justify-content: space-around; /* Distribuye los ítems con espacio alrededor */
    width: 100%; /* Hace que el ul ocupe todo el ancho disponible en el nav */
    gap: 15px; /* Ajuste el gap si desea un espaciado mínimo entre items además del space-around */
}

nav ul li a {
    color: var(--header-text-color);
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 0.95em; /* Ajuste de tamaño de fuente para los enlaces de navegación */
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-blue-light); /* Subrayado con color de acento */
    transition: width 0.3s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

nav ul li a:hover {
    color: var(--primary-blue-light);
}

/* Botones / CTAs */
.btn {
    display: inline-flex; /* Usar flexbox para alinear iconos con texto */
    align-items: center;
    gap: 8px; /* Espacio entre icono y texto */
    padding: 12px 25px;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-align: center;
    justify-content: center; /* Centrar contenido si solo hay texto */
}

.btn-primary-cta { /* Botón principal del header (ahora un enlace) */
    background-color: var(--primary-blue-light); /* Color de acento */
    color: var(--primary-blue-dark); /* Azul Noche Profundo para texto contrastante */
    box-shadow: 0 4px 8px rgba(0, 191, 255, 0.3);
}

.btn-primary-cta:hover {
    background-color: #0099CC;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 191, 255, 0.4);
}

.btn-accent-cta { /* Botones grandes y prominentes */
    background-color: var(--primary-blue-light); /* Color de acento */
    color: var(--primary-blue-dark);
    padding: 15px 30px;
    font-size: 1.1em;
    box-shadow: 0 8px 20px rgba(0, 191, 255, 0.45); /* Sombra más pronunciada */
}

.btn-accent-cta:hover {
    background-color: #0099CC;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 191, 255, 0.6); /* Sombra más dramática al hover */
}

.btn-secondary { /* Botones para tarjetas de contenido */
    background-color: var(--neutral-dark); /* Gris Oscuro Suave */
    color: var(--neutral-light);
    padding: 10px 20px;
    font-size: 0.95em;
}

.btn-secondary:hover {
    background-color: #343a40; /* Tono más oscuro del gris */
    transform: translateY(-1px);
}

.btn-send-message { /* Botón de enviar mensaje en el chat */
    background-color: var(--primary-blue-light); /* Color de acento */
    color: var(--primary-blue-dark);
    padding: 8px 15px;
    font-size: 0.9em;
    flex-shrink: 0; /* Para que no se encoja en flex */
}

.btn-send-message:hover {
    background-color: #0099CC;
}

.btn-cerrar-chat {
    background-color: transparent; /* Fondo transparente */
    color: var(--neutral-dark); /* Color del icono/texto */
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2em; /* Icono un poco más grande */
    font-weight: bold; /* Hacer la 'X' más negrita */
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: flex; /* Para centrar la X */
    align-items: center;
    justify-content: center;
}

.btn-cerrar-chat:hover {
    background-color: var(--error-red); /* Fondo rojo al pasar el ratón */
    color: white; /* Texto blanco al pasar el ratón */
}

/* Main Content Layout */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

.content-section {
    background-color: var(--card-bg); /* Usar variable */
    padding: 40px;
    margin-bottom: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); /* Sombra más difuminada y profunda */
    transition: background-color 0.5s ease, box-shadow 0.5s ease; /* Transición para el modo oscuro */
}

h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--heading-color); /* Usar variable */
    position: relative;
    padding-bottom: 10px;
}

/* Iconos en títulos de sección */
.section-icon-title {
    color: var(--primary-blue-light); /* Color de acento para iconos */
    margin-right: 10px;
}

h2::after { /* Subrayado decorativo para títulos de sección */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: var(--primary-blue-light); /* Color de acento */
    border-radius: 2px;
}

/* Hero Section (Video Background) */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 500px; /* Altura fija para el hero, ajustar según necesidad */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2); /* Sombra más prominente para el hero */
}

/* Nueva capa de superposición para el hero */
.hero-video-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hero-overlay-color); /* Usa la variable dinámica */
    z-index: 0; /* Asegura que esté sobre el video pero bajo el contenido */
    transition: background-color 0.5s ease;
}

.hero-video, .hero-fallback-image {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -1; /* Asegura que el video esté detrás de la superposición */
    object-fit: cover;
    filter: brightness(1); /* Video/imagen con brillo normal, la superposición maneja el oscurecimiento */
    transition: filter 0.5s ease; /* Añadir transición si el filtro se manipulara dinámicamente */
}

.hero-content {
    position: relative; /* Asegura que el contenido esté sobre la superposición */
    z-index: 1;
    color: var(--hero-text-color); /* Usa la nueva variable dinámica para el color del texto */
    text-align: center;
    padding: 20px;
    max-width: 800px;
    transition: color 0.5s ease; /* Transición para el color del texto del hero */
}

.hero-content h1 {
    font-size: 3.8em;
    margin-bottom: 20px;
    color: inherit; /* Hereda el color de .hero-content */
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.4em;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Contenido Destacado (Grid de Tarjetas) */
.contenido-destacado .grid-layout,
.latest-blog-posts .grid-layout,
.products-grid,
.courses-grid { /* Aplica grid layout a todas las secciones con tarjetas/listados */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background-color: var(--card-bg); /* Usar variable */
    border: 1px solid var(--card-border); /* Usar variable */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Sombra de tarjeta refinada */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.5s ease; /* Transición para el modo oscuro */
    display: flex;
    flex-direction: column;
    text-align: center;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.2);
    border-color: var(--card-hover-border);
}

.card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--card-border);
}

.card h3 {
    font-size: 1.6em;
    margin: 20px 20px 10px;
    color: var(--heading-color); /* Usar variable */
    display: flex; /* Para alinear icono con texto */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre icono y título */
}

.card-icon {
    color: var(--primary-blue-light); /* Iconos en las tarjetas con color de acento */
}

.card p {
    font-size: 0.98em; /* Ajuste para el texto de la tarjeta */
    padding: 0 20px;
    margin-bottom: 20px;
    flex-grow: 1; /* Para que ocupe el espacio disponible */
}

.card .btn {
    margin: 0 20px 20px;
    align-self: center; /* Centrar el botón dentro de la tarjeta */
    width: calc(100% - 40px); /* Ajustar al padding de la tarjeta */
}

/* --- Corrección de centrado para el botón de Asesoría AI en index.html --- */
/* Esta regla asegura que el botón "Iniciar AsesorIA" en la sección de IA de index.html esté centrado */
#seccion-ai-chat #mostrarChatBtn {
    display: block; /* Lo convierte a un elemento de bloque para que margin: auto funcione */
    margin: 30px auto; /* Centra el botón horizontalmente */
    max-width: fit-content; /* Asegura que el botón no ocupe todo el ancho disponible */
}

/* Sección de Chat AI (Mini-Ventana de Webchat) */
.chat-oculto {
    position: fixed;
    bottom: 100px; /* Posicionado por encima del botón flotante */
    right: 30px;
    width: 350px; /* Ancho fijo para la mini-ventana */
    height: 450px; /* Altura fija para la mini-ventana */
    background-color: var(--chat-bg);
    border-radius: 10px;
    /* Box-shadow más pronunciado y con un ligero "levantamiento" */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 1000;
    display: none; /* Controlado por JS */
    flex-direction: column;
    overflow: hidden; /* Asegura que el contenido interno no se desborde del border-radius */
    transition: background-color 0.5s ease;
}

/* Nuevo estilo para chat modal/pantalla completa en asesoria-gratis */
.chat-modal-full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
    z-index: 10000; /* Asegura que esté por encima de todo */
    border-radius: 0; /* Elimina border-radius en modo pantalla completa */
    box-shadow: none; /* Elimina sombras en modo pantalla completa */
}

.chat-modal-full .chat-content {
    width: 90%; /* Ajusta el ancho del contenido del chat dentro del modal */
    max-width: 600px; /* Ancho máximo para el chat en modal */
    height: 90%; /* Ajusta la altura del contenido del chat dentro del modal */
    max-height: 700px; /* Altura máxima para el chat en modal */
    background-color: var(--chat-bg);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* Sombra para el modal flotante */
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


#chatContainer .chat-content { /* Contenido interno del chat */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupa toda la altura del contenedor padre */
    padding: 20px; /* Padding interno para el contenido */
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--card-border); /* Usar variable para el separador */
    padding-bottom: 10px;
    transition: border-color 0.5s ease;
}

.chat-header h3 {
    margin: 0;
    color: var(--heading-color);
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-messages {
    border: 1px solid var(--chat-border);
    background-color: var(--chat-messages-bg);
    flex-grow: 1; /* Permite que ocupe el espacio disponible */
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* Estilos de la barra de desplazamiento para Webkit (Chrome, Safari) */
.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--bg-color); /* Fondo de la barra de desplazamiento, puede ser neutral-light o bg-color */
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--primary-blue-light);
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #0099CC;
}

/* Contenedor para burbujas de mensaje en el chat */
.chat-message-bubble {
    margin-bottom: 8px; /* Espacio entre burbujas */
    display: flex;
    flex-direction: column;
    max-width: 85%; /* Ajuste para mini-ventana */
}

/* Ajuste: Aplicar las clases mensaje-usuario/ai a los párrafos dentro de .chat-message-bubble */
.chat-messages .chat-message-bubble p {
    margin-bottom: 0; /* No margin-bottom en el p si el div ya tiene espacio */
    padding: 8px 12px;
    border-radius: 15px; /* Ajuste de radio */
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.chat-messages .chat-message-bubble p.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.mensaje-usuario {
    align-self: flex-end;
    background-color: var(--chat-user-bubble);
    color: var(--text-color);
}

.mensaje-ai {
    align-self: flex-start;
    background-color: var(--chat-ai-bubble);
    color: var(--text-color);
}

.ai-suggestions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
    width: 100%;
}

.ai-suggestion-link {
    display: block;
    background-color: var(--ai-suggestion-bg);
    border: 1px solid var(--ai-suggestion-border);
    border-radius: 5px;
    padding: 6px 10px; /* Ajuste de padding */
    font-size: 0.85em; /* Ajuste de tamaño */
    color: var(--ai-suggestion-text);
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.5s ease, color 0.5s ease;
}

.ai-suggestion-link:hover {
    background-color: #d0efff;
    transform: translateY(-2px);
}

.chat-input-area {
    display: flex;
    gap: 10px;
}

#chatInput {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--card-border);
    border-radius: 5px;
    font-size: 0.9em;
    font-family: 'Lato', sans-serif;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color 0.5s ease, background-color 0.5s ease, color 0.5s ease;
    background-color: var(--bg-color);
    color: var(--text-color);
}

#chatInput:focus {
    border-color: var(--primary-blue-light);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), 0 0 8px rgba(0, 191, 255, 0.3);
    outline: none;
}

/* Sección de Newsletter */
.newsletter-section {
    text-align: center;
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.newsletter-form input[type="email"] {
    flex-grow: 1;
    max-width: 400px; /* Ancho máximo para el input */
    padding: 15px 20px;
    border: 1px solid var(--card-border);
    border-radius: 5px;
    font-size: 1.1em;
    font-family: 'Lato', sans-serif;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.5s ease, color 0.5s ease;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.newsletter-form input[type="email"]:focus {
    border-color: var(--primary-blue-light);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), 0 0 8px rgba(0, 191, 255, 0.3);
    outline: none;
}

.newsletter-form .btn {
    padding: 15px 30px;
    font-size: 1.1em;
    /* Reutiliza .btn-accent-cta */
}

.form-message {
    width: 100%;
    margin-top: 15px;
    font-size: 1em;
    font-weight: 600;
    color: var(--heading-color);
    min-height: 20px; /* Para evitar saltos de diseño */
    transition: color 0.5s ease;
}

.form-message.success {
    color: var(--success-green);
}

.form-message.error {
    color: var(--error-red);
}

/* Formularios Avanzados */
.advanced-form-group {
    margin-bottom: 20px;
    text-align: left;
}

.advanced-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--heading-color);
    transition: color 0.5s ease;
}

.advanced-form-group input[type="text"],
.advanced-form-group input[type="email"],
.advanced-form-group input[type="tel"],
.advanced-form-group textarea,
.advanced-form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--card-border);
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.5s ease, color 0.5s ease;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.advanced-form-group input:focus,
.advanced-form-group textarea:focus,
.advanced-form-group select:focus {
    border-color: var(--primary-blue-light);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), 0 0 8px rgba(0, 191, 255, 0.3);
    outline: none;
}

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

.form-actions {
    text-align: center;
    margin-top: 30px;
}

.form-error-message {
    color: var(--error-red);
    font-size: 0.9em;
    margin-top: 5px;
    display: block; /* Asegura que el mensaje de error ocupe su propia línea */
}

/* Estilos para el formulario de Asesoría Gratuita */
/* Ajuste del ancho del formulario principal */
#asesorForm {
    max-width: 560px; /* Aproximadamente el 50% de 1120px (1200px - 2*40px padding) */
    margin: 0 auto 40px auto; /* Centra el formulario y añade margen inferior */
}

/* Nuevo estilo para el párrafo introductorio en asesoria-gratis */
.form-intro-text {
    max-width: 700px; /* Más ancho que el formulario */
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em;
    line-height: 1.8;
}


/* Estilos para listados de productos/cursos */
.listing-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 40px;
}

.listing-controls input[type="text"],
.listing-controls select {
    padding: 10px 15px;
    border: 1px solid var(--card-border);
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    min-width: 200px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color 0.5s ease, background-color 0.5s ease, color 0.5s ease;
}

.listing-controls button {
    /* Reutiliza .btn-secondary o crea uno específico */
    padding: 10px 20px;
    font-size: 1em;
}

/* Estilos de las tarjetas para listados dinámicos */
.product-card, .course-card {
    background-color: var(--card-bg); /* Usar variable */
    border: 1px solid var(--card-border); /* Usar variable */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.5s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.2);
    border-color: var(--card-hover-border);
}

.product-card-img, .course-card-img {
    width: 100%;
    height: 180px; /* Altura un poco más pequeña para listados */
    object-fit: cover;
    border-bottom: 1px solid var(--card-border);
}

.product-card h4, .course-card h4 {
    font-size: 1.3em;
    margin: 15px 15px 8px;
    color: var(--heading-color);
}

.product-card p, .course-card p {
    font-size: 0.9em;
    padding: 0 15px;
    margin-bottom: 15px;
    flex-grow: 1;
    color: var(--text-color);
}

.product-card .price, .course-card .price {
    font-weight: 700;
    color: var(--success-green);
    font-size: 1.2em;
    margin-bottom: 15px;
}

.product-card .btn, .course-card .btn {
    margin: 0 15px 15px;
    align-self: center;
    width: calc(100% - 30px);
}

/* Estilos para páginas de detalle */
.detail-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin-top: 30px;
}

.detail-image-container {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    text-align: center;
}

.detail-image-container img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.detail-content {
    flex: 2;
    min-width: 300px;
    max-width: 700px;
}

.detail-content h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
    color: var(--heading-color);
}

.detail-content .price {
    font-size: 1.8em;
    color: var(--success-green);
    font-weight: bold;
    margin-bottom: 20px;
    display: block;
}

.detail-content p {
    margin-bottom: 20px;
    color: var(--text-color);
}

.detail-content ul {
    list-style: none;
    margin-bottom: 20px;
    padding-left: 0;
}

.detail-content ul li {
    margin-bottom: 10px;
    font-size: 1.05em;
    position: relative;
    padding-left: 25px;
    color: var(--text-color);
}

.detail-content ul li::before {
    content: "\f00c"; /* Icono de checkmark de Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary-blue-light);
    position: absolute;
    left: 0;
    top: 0;
}

.detail-content .btn-primary-cta {
    margin-top: 20px;
}

/* Icono de Webchat Flotante */
.floating-chat-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-blue-light); /* Color de acento */
    color: var(--primary-blue-dark); /* Azul Noche Profundo */
    font-size: 1.8em;
    display: flex; /* Asegura que el icono esté centrado */
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 191, 255, 0.4);
    cursor: pointer;
    border: none;
    z-index: 1001; /* Asegura que esté por encima de otros elementos */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, color 0.5s ease;
}

.floating-chat-btn:hover {
    background-color: #0099CC;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 191, 255, 0.6);
}

/* Mensaje Proactivo para el chat flotante */
.proactive-message-bubble {
    position: fixed;
    bottom: 105px; /* Ajusta para que aparezca encima del botón flotante */
    right: 30px;
    background-color: var(--primary-blue-dark); /* Fondo oscuro */
    color: var(--neutral-light); /* Texto claro */
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1002; /* Por encima del botón flotante */
    opacity: 0;
    visibility: hidden; /* Controla la visibilidad con JS */
    transform: translateY(10px); /* Para la animación de entrada */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s;
    max-width: 200px; /* Limita el ancho del mensaje */
    text-align: center;
}

.proactive-message-bubble.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Footer */
footer {
    background-color: var(--footer-bg); /* Usar variable */
    color: var(--footer-text-color); /* Usar variable */
    text-align: center;
    padding: 30px;
    margin-top: 50px;
    font-size: 0.9em;
    transition: background-color 0.5s ease, color 0.5s ease;
}

footer p {
    margin-bottom: 8px;
    opacity: 0.9;
}

/* -------------------------------------- */
/* Animaciones de Transición de Secciones */
/* -------------------------------------- */
.section-animated {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Estilo para el botón de modo oscuro (sol/luna) */
#themeToggle i {
    transition: transform 0.3s ease, color 0.5s ease; /* Transición para el icono */
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color); /* Usa el color de fondo actual */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader {
    border: 8px solid var(--card-border); /* Color de la rueda */
    border-top: 8px solid var(--primary-blue-light); /* Color de la parte que gira */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.5s linear infinite;
    margin-bottom: 20px;
    transition: border-color 0.5s ease; /* Para modo oscuro */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#preloader p {
    color: var(--text-color);
    font-size: 1.2em;
    font-weight: 600;
    transition: color 0.5s ease; /* Para modo oscuro */
}


/* Responsividad */
@media (max-width: 992px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
    }
    .header-container nav { /* En pantallas medianas y pequeñas, la nav ocupa todo el ancho */
        width: 100%;
        order: 1; /* Para que la nav quede debajo del logo y antes del botón */
        justify-content: center; /* Centrar elementos del menú */
    }
    .header-container #headerAsesoriaBtn { /* El botón CTA principal */
        order: 2;
        width: 100%; /* Ocupa todo el ancho en móvil */
        max-width: 300px; /* Ancho máximo para el botón */
    }
    .header-container #themeToggle { /* El botón de modo oscuro */
        order: 3; /* Después del botón CTA */
        margin-top: 5px; /* Pequeño margen superior para separarlo del CTA */
        width: 100%; /* Ocupa todo el ancho en móvil */
        max-width: 300px; /* Ancho máximo para el botón */
    }
    .logo { /* Asegura que el logo se mantenga a la izquierda */
        width: 100%;
        text-align: center; /* Centrar el logo en móvil si se desea */
        order: 0;
    }
    nav ul {
        flex-wrap: wrap; /* Permite que los ítems de menú se envuelvan en pantallas más pequeñas */
        justify-content: center; /* Centrar ítems envueltos */
        gap: 15px 25px;
    }
    nav ul li a {
        font-size: 0.95em;
    }
    h1 { font-size: 3em; }
    h2 { font-size: 2em; }
    .hero-video-container {
        height: 400px;
    }
    .hero-content h1 {
        font-size: 3em;
    }
    .hero-content p {
        font-size: 1.2em;
    }
    .contenido-destacado .grid-layout,
    .latest-blog-posts .grid-layout,
    .products-grid,
    .courses-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }
    .content-section {
        padding: 30px;
    }
    .card h3 {
        font-size: 1.5em;
    }
    .detail-section {
        flex-direction: column;
        align-items: center;
    }
    .detail-image-container, .detail-content {
        min-width: unset;
        max-width: 100%;
    }
    .floating-chat-btn {
        width: 50px;
        height: 50px;
        font-size: 1.5em;
        bottom: 20px;
        right: 20px;
    }
    .proactive-message-bubble {
        bottom: 80px; /* Ajuste para móviles */
        right: 20px;
        max-width: 180px;
        font-size: 0.85em;
    }
    #asesorForm {
        max-width: 100%; /* El formulario puede ocupar más espacio en móvil */
        margin: 0 auto 30px auto;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 0.95em; /* Ligeramente más pequeño el texto general */
    }
    header {
        padding: 15px 0;
    }
    .header-container {
        padding: 0 15px;
    }
    .logo a {
        font-size: 1.5em;
    }
    nav ul {
        gap: 10px 15px;
    }
    nav ul li a {
        font-size: 0.95em;
    }
    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .hero-video-container {
        height: 350px;
    }
    .hero-content h1 {
        font-size: 2.5em;
    }
    .hero-content p {
        font-size: 1.1em;
    }
    .content-section {
        padding: 25px 15px;
        margin-bottom: 25px;
    }
    h2 {
        font-size: 1.8em;
    }
    .card h3 {
        font-size: 1.3em;
    }
    /* Mini-ventana de chat en móvil */
    .chat-oculto {
        width: 90%; /* Ajuste de ancho para móvil */
        height: 400px; /* Ajuste de altura para móvil */
        bottom: 15px; /* Más cerca del borde */
        right: 5%; /* Centrado en horizontal */
        left: 5%;
        margin: 0 auto;
    }
    #chatContainer .chat-content {
        padding: 15px;
    }
    .chat-messages {
        height: 250px; /* Ajuste de altura */
        padding: 8px;
    }
    .chat-messages .chat-message-bubble p {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    #chatInput {
        padding: 8px;
        font-size: 0.9em;
    }
    .btn-send-message {
        padding: 8px 12px;
        font-size: 0.85em;
    }

    .btn-primary-cta, .btn-accent-cta {
        padding: 12px 20px;
        font-size: 0.95em;
    }
    .newsletter-form input[type="email"] {
        width: 100%; /* Ocupa todo el ancho en móviles */
        max-width: none;
    }
    .newsletter-form .btn {
        padding: 12px 25px;
    }
    .advanced-form-group input, .advanced-form-group textarea, .advanced-form-group select {
        padding: 10px;
    }
    .detail-content h1 {
        font-size: 2.2em;
    }
    .detail-content .price {
        font-size: 1.5em;
    }
    .floating-chat-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
        bottom: 15px;
        right: 15px;
    }
    .proactive-message-bubble {
        bottom: 70px;
        right: 15px;
        max-width: 150px;
        font-size: 0.8em;
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {
    .header-container {
        align-items: flex-start;
    }
    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .btn-primary-cta {
        margin-top: 15px;
        width: 100%;
    }
    .hero-video-container {
        height: 300px;
    }
    .hero-content h1 {
        font-size: 2em;
    }
    .hero-content p {
        font-size: 1em;
    }
    .card-img {
        height: 160px;
    }
    .card h3 {
        font-size: 1.2em;
    }
    .chat-input-area {
        flex-direction: column;
        gap: 8px;
    }
    #chatInput {
        width: 100%;
        margin-right: 0;
    }
    .btn-send-message {
        width: 100%;
    }
    .newsletter-form {
        flex-direction: column;
    }
    .newsletter-form input[type="email"] {
        padding: 12px 15px;
    }
    .newsletter-form .btn {
        padding: 12px 25px;
    }
    .advanced-form-group input, .advanced-form-group textarea, .advanced-form-group select {
        padding: 10px;
    }
    .detail-content h1 {
        font-size: 1.8em;
    }
    .detail-content .price {
        font-size: 1.3em;
    }
    .floating-chat-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
        bottom: 15px;
        right: 15px;
    }
    .proactive-message-bubble {
        bottom: 70px;
        right: 15px;
        max-width: 150px;
        font-size: 0.8em;
        padding: 8px 10px;
    }
}