/* ==========================================================================
   MÓDULO: ESTILOS BASE, VARIABLES Y COMPONENTES GLOBALES
   ========================================================================== */

:root {
    /* Nueva Paleta Corporativa */
    --color-primary-dark: #214f50;  /* Fondo oscuro, textos principales y contrastes fuertes */
    --color-primary: #307a6d;       /* Botones, acentos y llamadas a la acción (CTA) */
    --color-text-muted: #65a39c;    /* Subtítulos, textos secundarios e iconos */
    --color-primary-light: #9bc7c1; /* Fondos tenues, hover states y detalles suaves */
    
    --color-white: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-text: #333333;
    
    /* Sistema Tipográfico Híbrido */
    --font-primary: 'Science Gothic', sans-serif; /* Reservado exclusivamente para Logotipo y Títulos (fuente original, preferida por el cliente) */
    --font-main: 'Inter', sans-serif;             /* Inter para menús, botones y bloques de texto */
    
    --transition-fast: 0.3s ease;
    --max-width: 1200px;
}

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

/* --- MOTOR DE SCROLL MAGNÉTICO GLOBAL (SCROLL SNAP) --- */
html {
    scroll-behavior: smooth;
    /* OJO: el valor debe ser el alto del header EN SU ESTADO FINAL tras el
       scroll, no el alto inicial. Cualquier navegación por el menú cruza el
       umbral de 50px, así que el header SIEMPRE termina en modo cápsula (65px)
       al llegar. Usar el alto expandido (100px) generaba un desfase de 35px
       que se "corregía solo" en la siguiente interacción (el doble salto). */
    scroll-padding-top: 65px;
    /* "mandatory" competía con el scroll suave de los enlaces del menú: el snap
       forzado interrumpía la animación del primer clic y necesitaba un segundo
       clic para terminar de acomodarse. "proximity" respeta el destino exacto
       del enlace y solo ajusta si el usuario queda scrolleando muy cerca de
       una sección, sin pelear con la navegación por el menú. */
    scroll-snap-type: y proximity;
}

body {
    font-family: var(--font-main); /* Uso de Inter para textos generales */
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-white);
    overflow-x: hidden;
}

/* Blindaje absoluto para forzar el peso refinado (500) en fuentes variables */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 500 !important; 
    font-variation-settings: 'wght' 500 !important; /* Configuración explícita del eje variable */
    color: var(--color-primary-dark);
}

/* Aplicamos el punto de adherencia magnética al inicio de cada bloque principal */
section, 
.parallax-divider, 
.site-footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* ==========================================================================
   SISTEMA DE ENCABEZADOS Y SECCIONES GLOBALES
   ========================================================================== */
   
.section-padding {
    padding: 80px 0;
}

/* Blindaje absoluto para centrar cualquier encabezado del sitio */
.section-header {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 50px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.section-title {
    width: 100%;
    font-size: 2.2rem;
    color: var(--color-primary-dark);
    margin: 0 auto 15px auto;
    text-align: center;
    display: block;
    font-family: var(--font-primary);
    font-weight: 500 !important;
    font-variation-settings: 'wght' 500 !important;
}

.section-subtitle {
    width: 100%;
    font-size: 1.1rem;
    color: var(--color-text-muted);
    max-width: 700px; /* Evita que el texto sea muy largo y difícil de leer */
    margin: 0 auto;
    text-align: center;
    display: block;
}

/* ==========================================================================
   SISTEMA DE BOTONES PREMIUM (EFECTO BARRIDO Y BRILLO)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
    font-family: var(--font-main); /* Revertido a Inter para evitar deformación horizontal */
}

/* Efecto de Haz de Luz Blanca (Shine) que atraviesa el botón */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: left 0.6s ease;
    z-index: 2;
    pointer-events: none;
}

.btn:hover::after {
    left: 200%;
}

/* Variante Primaria */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
    box-shadow: inset 0 0 0 0 var(--color-primary-dark); 
}

.btn-primary:hover {
    box-shadow: inset 400px 0 0 0 var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Variante Outline (Secundaria) */
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: inset 0 0 0 0 var(--color-primary);
}

.btn-outline:hover {
    color: var(--color-white);
    box-shadow: inset 400px 0 0 0 var(--color-primary);
}

/* ==========================================================================
   BOTÓN FLOTANTE WHATSAPP (CORPORATIVO)
   ========================================================================== */
   
.whatsapp-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary); 
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(33, 79, 80, 0.4);
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
}

.whatsapp-fab:hover {
    transform: scale(1.15) translateY(-5px);
    background-color: var(--color-primary-dark);
}

@media (max-width: 768px) {
    .whatsapp-fab {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    .whatsapp-fab svg {
        width: 25px;
        height: 25px;
    }
}