/**
 * ============================================
 * STYLES.CSS - Hoja de Estilos Principal VENA
 * ============================================
 * 
 * Sistema de diseño modular basado en variables CSS.
 * Siguiendo el Manual de Identidad de Marca VENA.
 * 
 * ÍNDICE:
 * 1. Variables y Configuración Global
 * 2. Reset y Base
 * 3. Tipografías
 * 4. Componentes Generales (Botones, Cards)
 * 5. Header y Navegación
 * 6. Secciones Específicas (Hero, Nosotros, etc.)
 * 7. Footer
 * 8. Utilidades y Animaciones
 * 9. Media Queries (Responsive)
 * 
 * @author VENA Development Team
 * @version 1.0.0
 */

/* ==========================================
   1. VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================== */
:root {
    /* Colores de Marca (Manual de Identidad) */
    --color-rojo-principal: #E93439;
    --color-rojo-oscuro: #770806;
    --color-rojo-hover: #c42d31; /* Intermedio para hover */
    --color-gris: #80858C;
    --color-gris-claro: #F5F5F7;
    --color-blanco: #FFFFFF;
    --color-negro: #1A1A1A;
    --color-texto: #333333;
    --color-texto-claro: #666666;
    
    /* Gradientes */
    --gradiente-rojo: linear-gradient(135deg, var(--color-rojo-principal) 0%, var(--color-rojo-oscuro) 100%);
    --gradiente-oscuro: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.9) 100%);
    
    /* Tipografías */
    --fuente-principal: 'Exo 2', sans-serif;
    --fuente-secundaria: 'Arial', sans-serif;
    
    /* Tamaños de Fuente (Escala Modular) */
    --texto-xs: 0.75rem;    /* 12px */
    --texto-sm: 0.875rem;   /* 14px */
    --texto-base: 1rem;     /* 16px */
    --texto-lg: 1.125rem;   /* 18px */
    --texto-xl: 1.25rem;    /* 20px */
    --texto-2xl: 1.5rem;    /* 24px */
    --texto-3xl: 1.875rem;  /* 30px */
    --texto-4xl: 2.25rem;   /* 36px */
    --texto-5xl: 3rem;      /* 48px */
    --texto-6xl: 3.75rem;   /* 60px */
    
    /* Espaciado */
    --espacio-xs: 0.5rem;   /* 8px */
    --espacio-sm: 1rem;     /* 16px */
    --espacio-md: 1.5rem;   /* 24px */
    --espacio-lg: 2rem;     /* 32px */
    --espacio-xl: 3rem;     /* 48px */
    --espacio-2xl: 4rem;    /* 64px */
    --espacio-3xl: 6rem;    /* 96px */
    
    /* Bordes y Sombras */
    --radio-sm: 4px;
    --radio-md: 8px;
    --radio-lg: 16px;
    --radio-full: 9999px;
    
    --sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sombra-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transiciones */
    --transicion-rapida: 150ms ease;
    --transicion-base: 300ms ease;
    --transicion-lenta: 500ms ease;
    
    /* Z-index (Capas) */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fijo: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    
    /* Contenedor */
    --contenedor-max: 1200px;
    --contenedor-padding: 1.5rem;
}

/* ==========================================
   2. RESET Y BASE
   ========================================== */

/* Box sizing global */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Reset de márgenes y padding */
* {
    margin: 0;
    padding: 0;
}

/* ============================================
   CURSOR PERSONALIZADO — LOGO VENA
============================================ */
*, a, button, label, select, [role="button"], [tabindex] {
    cursor: url('../assets/logo v sin fondo mouse.png') 8 6, auto;
}

/* HTML y Body */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--fuente-secundaria);
    font-size: var(--texto-base);
    line-height: 1.6;
    color: var(--color-texto);
    background-color: var(--color-blanco);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Imágenes responsivas */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Listas sin estilo */
ul, ol {
    list-style: none;
}

/* Links sin subrayado */
a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transicion-rapida);
}

/* Botones y inputs heredan fuente */
input, button, textarea, select {
    font: inherit;
}

/* ==========================================
   3. TIPOGRAFÍAS
   ========================================== */

/* Títulos con fuente primaria */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-principal);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-negro);
    margin-bottom: var(--espacio-sm);
}

h1 { font-size: var(--texto-5xl); }
h2 { font-size: var(--texto-4xl); }
h3 { font-size: var(--texto-3xl); }
h4 { font-size: var(--texto-2xl); }
h5 { font-size: var(--texto-xl); }
h6 { font-size: var(--texto-lg); }

/* Párrafos */
p {
    margin-bottom: var(--espacio-sm);
    color: var(--color-texto-claro);
}

/* Texto destacado */
.texto-destacado {
    font-size: var(--texto-lg);
    color: var(--color-texto);
}

/* Colores de texto especiales */
.texto-rojo { color: var(--color-rojo-principal); }
.texto-blanco { color: var(--color-blanco); }
.texto-gris { color: var(--color-gris); }

/* ==========================================
   4. COMPONENTES GENERALES
   ========================================== */

/* --- Contenedor Principal --- */
.contenedor {
    width: 100%;
    max-width: var(--contenedor-max);
    margin: 0 auto;
    padding: 0 var(--contenedor-padding);
}

/* --- Sección --- */
.seccion {
    padding: var(--espacio-3xl) 0;
}

.seccion-oscura {
    background-color: var(--color-negro);
    color: var(--color-blanco);
}

.seccion-gris {
    background-color: var(--color-gris-claro);
}

/* --- Encabezado de Sección --- */
.seccion-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--espacio-xl);
}

.seccion-header h2 {
    position: relative;
    display: inline-block;
    margin-bottom: var(--espacio-md);
}

.seccion-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradiente-rojo);
    border-radius: var(--radio-full);
}

.seccion-header p {
    font-size: var(--texto-lg);
}

/* --- Botones --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-xs);
    padding: 0.875rem 1.75rem;
    font-family: var(--fuente-principal);
    font-size: var(--texto-base);
    font-weight: 600;
    border-radius: var(--radio-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transicion-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-lg);
}

.btn:active {
    transform: translateY(0);
}

/* Botón Primario (Rojo con degradado) */
.btn-primario {
    background: var(--gradiente-rojo);
    color: var(--color-blanco);
    border-color: var(--color-rojo-principal);
}

.btn-primario:hover {
    background: var(--color-rojo-hover);
    border-color: var(--color-rojo-hover);
}

/* Botón Secundario (Outline) */
.btn-secundario {
    background: transparent;
    color: var(--color-rojo-principal);
    border-color: var(--color-rojo-principal);
}

.btn-secundario:hover {
    background: var(--color-rojo-principal);
    color: var(--color-blanco);
}

/* Botón Blanco */
.btn-blanco {
    background: var(--color-blanco);
    color: var(--color-rojo-hover);
}

.btn-blanco:hover {
    background: var(--color-gris-claro);
}

/* Botones especiales del menú */
.btn-crm, .btn-timecamp {
    font-size: var(--texto-sm);
    padding: 0.5rem 1rem;
}

/* --- Cards --- */
.card {
    background: var(--color-blanco);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
    overflow: hidden;
    transition: all var(--transicion-base);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-xl);
}

.card-imagen {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.card-contenido {
    padding: var(--espacio-md);
}

.card-titulo {
    font-size: var(--texto-xl);
    margin-bottom: var(--espacio-xs);
}

.card-texto {
    font-size: var(--texto-sm);
    color: var(--color-texto-claro);
}

/* ==========================================
   5. HEADER Y NAVEGACIÓN
   ========================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: var(--z-fijo);
    transition: all var(--transicion-base);
}

/* Estado transparente (inicio) */
.header-transparente {
    background: transparent;
}

/* Estado sólido (scroll) */
.header-solido {
    background: var(--color-blanco);
    box-shadow: var(--sombra-md);
}

.header-solido .nav-link {
    color: var(--color-negro);
}

.header-solido .logo-color {
    display: block;
}

.header-solido .logo-blanco {
    display: none;
}

/* Navegación interna */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 4rem;
    max-width: 100%;
    margin: 0 auto;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    z-index: var(--z-modal);
    flex-shrink: 0;
}

.logo img {
    height: 45px;
    width: auto;
    transition: all var(--transicion-base);
}

.logo-color {
    display: none;
}

.logo-blanco {
    display: block;
}

/* Menú de navegación */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-left: var(--espacio-xl);
}

/* Botón de login duplicado dentro del menú off-canvas: oculto en
   escritorio porque ahí ya se muestra vía .nav-acciones. */
.nav-menu-login {
    display: none !important;
}

.nav-link {
    font-family: var(--fuente-principal);
    font-size: var(--texto-sm);
    font-weight: 500;
    color: var(--color-blanco);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 0;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-rojo-principal);
    transition: width var(--transicion-base);
}

.nav-link:hover::after,
.nav-link.activo::after {
    width: 100%;
}

/* Acciones del nav (botones externos) */
.nav-acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio-sm);
    margin-left: var(--espacio-lg);
}

.nav-acciones .btn {
    padding: 0.5rem 1rem;
    font-size: var(--texto-sm);
    letter-spacing: 0;
}

/* Selector de idioma ES/EN (dropdown compacto) */
.lang-dropdown {
    position: relative;
    margin-left: var(--espacio-sm);
    flex-shrink: 0;
}

.lang-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radio-full);
    padding: 0.4rem 0.7rem;
    font-size: var(--texto-sm);
    font-weight: 600;
    line-height: 1;
    color: var(--color-blanco);
    cursor: pointer;
    transition: all var(--transicion-base);
}

.header-solido .lang-dropdown-btn {
    border-color: rgba(26, 26, 26, 0.2);
    color: var(--color-negro);
}

.lang-dropdown-flecha {
    font-size: 0.65rem;
    transition: transform var(--transicion-base);
}

.lang-dropdown.activo .lang-dropdown-flecha {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 140px;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--color-blanco);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transicion-base);
    z-index: var(--z-modal);
}

.lang-dropdown.activo .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-opcion {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: var(--texto-sm);
    color: var(--color-negro);
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: background var(--transicion-base);
}

.lang-opcion:hover {
    background: var(--color-gris-claro);
}

.lang-opcion.activo {
    color: var(--color-rojo-principal);
    font-weight: 700;
}

/* Google Translate: ocultar banner y artefactos visuales del widget */
#google_translate_element {
    display: none !important;
}

/* El banner superior y los popups auxiliares de Google viajan en iframes
   marcados con la clase "skiptranslate" (estable entre versiones del widget,
   a diferencia de sus clases internas que cambian sin aviso). */
iframe.skiptranslate {
    display: none !important;
}

/* Tooltip "Texto original / Calificar traducción" que aparece al
   interactuar con texto traducido. */
#goog-gt-tt {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* Red de seguridad: cualquier otro elemento de chrome que el widget
   inyecte directo en <body> (spinner de "traduciendo...", globo de
   selección, etc.) comparte el prefijo de clase "VIpgJd". No es texto
   traducido de la página (eso vive dentro de nuestros propios
   elementos), así que es seguro ocultarlo por completo. */
[class*="VIpgJd"] {
    display: none !important;
}

/* Botón menú móvil */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: var(--z-modal);
}

.menu-toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-blanco);
    transition: all var(--transicion-base);
}

.header-solido .menu-toggle span {
    background: var(--color-negro);
}

/* Con el menú móvil abierto, el botón queda sobre el panel blanco
   del off-canvas, así que sus barras deben ser oscuras sin importar
   si el header sigue transparente. */
.menu-toggle.activo span {
    background: var(--color-negro);
}

/* Animación hamburger a X */
.menu-toggle.activo span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

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

/* ==========================================
   6. SECCIONES ESPECÍFICAS
   ========================================== */

/* --- HERO --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-negro) 0%, #2a2a2a 100%);
    overflow: hidden;
}

.hero-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}

.hero-contenido {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--espacio-lg);
    max-width: 900px;
}

.hero-contenido h1 {
    font-size: var(--texto-6xl);
    color: var(--color-blanco);
    margin-bottom: var(--espacio-md);
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.hero-contenido h1 span {
    background: var(--gradiente-rojo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-contenido p {
    font-size: var(--texto-xl);
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--espacio-xl);
}

.hero-botones {
    display: flex;
    gap: var(--espacio-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Texto animado */
.texto-animado {
    display: block;
    min-height: 1.5em;
    font-size: var(--texto-2xl);
    color: var(--color-rojo-principal);
    font-weight: 300;
    margin-bottom: var(--espacio-sm);
}

/* --- NOSOTROS --- */
.nosotros-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-xl);
    align-items: center;
}

.nosotros-imagen {
    display: flex;
    justify-content: space-between;
}

.nosotros-imagen img {
    width: 48%;
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-xl);
}

.nosotros-contenido h3 {
    margin-top: var(--espacio-md);
    color: var(--color-rojo-principal);
}

/* Valores Grid */
.valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--espacio-md);
    margin-top: var(--espacio-xl);
}

.valor-card {
    background: var(--color-blanco);
    padding: var(--espacio-lg);
    border-radius: var(--radio-lg);
    text-align: center;
    border: 1px solid var(--color-gris-claro);
    transition: all var(--transicion-base);
}

.valor-card:hover {
    border-color: var(--color-rojo-principal);
    transform: translateY(-5px);
}

.valor-icono {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--espacio-sm);
    background: var(--gradiente-rojo);
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
    font-size: var(--texto-2xl);
}

/* --- SERVICIOS --- */
.servicios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-md);
}

.servicio-card {
    background: var(--color-blanco);
    padding: var(--espacio-xl);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
    border-left: 4px solid var(--color-rojo-principal);
    transition: all var(--transicion-base);
}

.servicio-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra-xl);
}

.servicio-icono {
    width: 70px;
    height: 70px;
    background: var(--color-gris-claro);
    border-radius: var(--radio-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--espacio-md);
    font-size: var(--texto-3xl);
    color: var(--color-rojo-principal);
    transition: all var(--transicion-base);
}

.servicio-card:hover .servicio-icono {
    background: var(--gradiente-rojo);
    color: var(--color-blanco);
}

.servicio-lista {
    margin-top: var(--espacio-sm);
}

.servicio-lista li {
    position: relative;
    padding-left: var(--espacio-md);
    margin-bottom: var(--espacio-xs);
    font-size: var(--texto-sm);
    color: var(--color-texto-claro);
}

.servicio-lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-rojo-principal);
    font-weight: bold;
}

/* --- EQUIPO --- */
.equipo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-lg);
    max-width: 900px;
    margin: 0 auto;
}

.equipo-card {
    background: var(--color-blanco);
    border-radius: var(--radio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-md);
    /* Solo animamos las propiedades que cambian, no 'all' */
    transition: transform var(--transicion-base), box-shadow var(--transicion-base);
}

.equipo-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra-xl);
}

.equipo-foto {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    filter: grayscale(100%);
    /* Aceleración por hardware: fuerza a la GPU a procesar la imagen */
    transform: translateZ(0);
    /* Indica al navegador que esta propiedad cambiará, optimizando el renderizado */
    will-change: filter;
    /* Transición más rápida y suave */
    transition: filter 0.4s ease-out;
}

.equipo-card:hover .equipo-foto {
    filter: grayscale(0%);
}

.equipo-info {
    padding: var(--espacio-md);
    text-align: center;
}

.equipo-nombre {
    font-size: var(--texto-xl);
    margin-bottom: 0;
}

.equipo-cargo {
    color: var(--color-rojo-principal);
    font-weight: 600;
    font-size: var(--texto-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--espacio-sm);
}

.equipo-descripcion {
    font-size: var(--texto-sm);
    margin-bottom: var(--espacio-sm);
}

.equipo-redes {
    display: flex;
    justify-content: center;
    gap: var(--espacio-sm);
}

.equipo-redes a {
    width: 36px;
    height: 36px;
    border-radius: var(--radio-full);
    background: var(--color-gris-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gris);
    transition: all var(--transicion-rapida);
}

.equipo-redes a:hover {
    background: var(--color-rojo-principal);
    color: var(--color-blanco);
}

/* --- E-COMMERCE --- */
.ecommerce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--espacio-lg);
}

.producto-card {
    background: var(--color-blanco);
    border-radius: var(--radio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-md);
    transition: all var(--transicion-base);
    position: relative;
    color: inherit;
    display: block;
    text-decoration: none;
}

.producto-card:hover {
    box-shadow: var(--sombra-lg);
    color: inherit;
    transform: translateY(-4px);
}

.producto-card.destacado {
    border: 2px solid var(--color-rojo-principal);
}

.producto-badge {
    position: absolute;
    top: var(--espacio-sm);
    right: var(--espacio-sm);
    background: var(--gradiente-rojo);
    color: var(--color-blanco);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radio-full);
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.producto-imagen {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.producto-contenido {
    padding: var(--espacio-md);
}

.producto-tipo {
    font-size: var(--texto-xs);
    color: var(--color-rojo-principal);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}


.producto-caracteristicas {
    margin: var(--espacio-sm) 0;
    padding-top: var(--espacio-sm);
    border-top: 1px solid var(--color-gris-claro);
}

.producto-caracteristicas li {
    font-size: var(--texto-sm);
    color: var(--color-texto-claro);
    padding-left: var(--espacio-md);
    position: relative;
    margin-bottom: 0.25rem;
}

.producto-caracteristicas li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-rojo-principal);
}

.producto-link {
    align-items: center;
    display: flex;
    justify-content: center;
}

/* --- CONTACTO --- */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-xl);
}

.contacto-info {
    background: var(--color-negro);
    color: var(--color-blanco);
    padding: var(--espacio-xl);
    border-radius: var(--radio-lg);
}

.contacto-info h3 {
    color: var(--color-blanco);
    margin-bottom: var(--espacio-lg);
}

.contacto-item {
    display: flex;
    gap: var(--espacio-md);
    margin-bottom: var(--espacio-lg);
}

.contacto-item-icono {
    width: 50px;
    height: 50px;
    background: var(--gradiente-rojo);
    border-radius: var(--radio-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--texto-xl);
    flex-shrink: 0;
}

.contacto-item-texto h4 {
    color: var(--color-blanco);
    font-size: var(--texto-base);
    margin-bottom: 0.25rem;
}

.contacto-item-texto p {
    color: rgba(255,255,255,0.7);
    font-size: var(--texto-sm);
    margin: 0;
}

/* Formulario */
.contacto-formulario {
    background: var(--color-blanco);
    padding: var(--espacio-xl);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
}

.form-grupo {
    margin-bottom: var(--espacio-md);
}

.form-label {
    display: block;
    font-family: var(--fuente-principal);
    font-size: var(--texto-sm);
    font-weight: 600;
    margin-bottom: var(--espacio-xs);
    color: var(--color-texto);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-gris-claro);
    border-radius: var(--radio-md);
    font-size: var(--texto-base);
    transition: all var(--transicion-rapida);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-rojo-principal);
    box-shadow: 0 0 0 3px rgba(233, 52, 57, 0.1);
}

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

/* ==========================================
   7. FOOTER
   ========================================== */

.footer {
    background: var(--color-negro);
    color: var(--color-blanco);
    padding: var(--espacio-xl) 0 var(--espacio-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--espacio-xl);
    padding-bottom: var(--espacio-xl);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
    margin-bottom: var(--espacio-md);
}

.footer-descripcion {
    color: rgba(255,255,255,0.7);
    font-size: var(--texto-sm);
    margin-bottom: var(--espacio-md);
}

.footer-redes {
    display: flex;
    gap: var(--espacio-sm);
}

.footer-redes a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
    transition: all var(--transicion-rapida);
}

.footer-redes a:hover {
    background: var(--color-rojo-principal);
    border-color: var(--color-rojo-principal);
}

.footer-columna h4 {
    color: var(--color-blanco);
    font-size: var(--texto-base);
    margin-bottom: var(--espacio-md);
}

.footer-enlaces li {
    margin-bottom: var(--espacio-xs);
}

.footer-enlaces a {
    color: rgba(255,255,255,0.7);
    font-size: var(--texto-sm);
    transition: color var(--transicion-rapida);
}

.footer-enlaces a:hover {
    color: var(--color-rojo-principal);
}

.footer-bottom {
    padding-top: var(--espacio-md);
    text-align: center;
    font-size: var(--texto-sm);
}

.footer-bottom p {
    color: rgba(255,255,255,0.6);
}

/* ==========================================
   8. UTILIDADES Y ANIMACIONES
   ========================================== */

/* Scroll Reveal - Clases base */
.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease-out;
}

.reveal.activo {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.1s; }
.reveal-delay-3 { transition-delay: 0.15s; }
.reveal-delay-4 { transition-delay: 0.2s; }

/* Clases de utilidad */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--espacio-sm); }
.mt-2 { margin-top: var(--espacio-md); }
.mt-3 { margin-top: var(--espacio-lg); }

.mb-1 { margin-bottom: var(--espacio-sm); }
.mb-2 { margin-bottom: var(--espacio-md); }
.mb-3 { margin-bottom: var(--espacio-lg); }

.hidden { display: none !important; }
.visible { display: block !important; }

/* ==========================================
   9. MEDIA QUERIES (RESPONSIVE)
   ========================================== */

/* Nav angosto: entre el breakpoint de tablet (1024px, donde entra el menú
   hamburguesa) y el ancho de escritorio amplio, el espaciado normal del
   nav (padding, gaps) ya no alcanza para los 8 enlaces + acciones +
   selector de idioma. En vez de activar el hamburguesa antes de tiempo
   (lo que esconde el menú en ventanas de portátil normales), se reduce
   el espaciado para que todo siga cabiendo en una sola fila. */
@media (min-width: 1025px) and (max-width: 1380px) {
    .nav {
        padding: 0 2rem;
    }

    .nav-menu {
        gap: 1.1rem;
        margin-left: var(--espacio-md);
    }

    .nav-acciones {
        margin-left: var(--espacio-md);
    }
}

/* Justo antes del breakpoint del hamburguesa el sobrante ya no alcanza
   solo con lo anterior, así que se aprieta un poco más. */
@media (min-width: 1025px) and (max-width: 1160px) {
    .nav {
        padding: 0 1rem;
    }

    .nav-menu {
        gap: 0.65rem;
        margin-left: var(--espacio-sm);
    }

    .nav-acciones {
        margin-left: var(--espacio-sm);
        gap: 0.5rem;
    }
}

/* Tablet / menú hamburguesa */
@media (max-width: 1024px) {
    :root {
        --texto-6xl: 3rem;
        --texto-5xl: 2.5rem;
    }

    .nav {
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .logo {
        min-width: 0;
    }

    .logo img {
        max-width: 44vw;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        height: 100dvh;
        background: var(--color-blanco);
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--espacio-xl);
        box-shadow: var(--sombra-xl);
        transition: right var(--transicion-base);
        z-index: var(--z-modal);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu.activo {
        right: 0;
    }

    .nav-menu .nav-link {
        color: var(--color-negro);
        font-size: var(--texto-lg);
        margin-bottom: var(--espacio-md);
    }

    .nav-menu-login {
        display: block !important;
        margin-top: var(--espacio-md);
    }

    .nav-menu-login .btn {
        width: 100%;
        justify-content: center;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-acciones {
        display: none;
    }

    /* Con el menú off-canvas fuera del flujo, el selector de idioma
       queda como único elemento entre el logo y el botón hamburguesa;
       lo empujamos junto a este último con margin-left: auto. */
    .lang-dropdown {
        margin-left: auto;
        margin-right: 0.25rem;
    }

    .lang-dropdown-btn {
        white-space: nowrap;
    }

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

    .nav-menu.activo ~ .lang-dropdown {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --texto-6xl: 2.5rem;
        --texto-5xl: 2rem;
        --texto-4xl: 1.75rem;
    }

    /* Ajustes de Grid */
    .nosotros-grid,
    .contacto-grid,
    .servicios-grid,
    .equipo-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-redes {
        justify-content: center;
    }
    
    /* Hero */
    .hero-botones {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-botones .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Mobile pequeño */
@media (max-width: 480px) {
    .nav {
        padding: 0 0.75rem;
    }

    .logo img {
        height: 38px;
    }

    .lang-dropdown-btn {
        padding: 0.35rem 0.55rem;
    }

    .seccion {
        padding: var(--espacio-xl) 0;
    }
}

/* ==========================================
   10. BOTÓN FLOTANTE WHATSAPP
   ========================================== */

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px; /* Posición a la derecha */
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Color oficial de WhatsApp */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 998; /* Debajo del menú pero encima de todo lo demás */
    transition: all 0.3s ease;
    animation: pulse-wp 2s infinite; /* Animación de llamada de atención */
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #1EBE57;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Animación de Pulso (Onda expansiva) */
@keyframes pulse-wp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
        font-size: 28px;
    }
}

/* ==========================================
   11. CARRUSEL DE LOGOS DE CLIENTES
   ========================================== */

.clientes-carousel {
    padding: 4rem 0;
    background-color: var(--color-blanco);
    overflow: hidden;
    /* Degradado a los lados para que se vea más elegante al entrar/salir */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.clientes-carousel h3 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: var(--texto-2xl);
    color: var(--color-negro);
}

.carousel-track {
    display: flex;
    width: max-content; /* El ancho se ajusta al contenido */
    animation: scrollCarousel 25s linear infinite;
}

/* Pausar animación al pasar el mouse (opcional, para mejor UX) */
.carousel-track:hover {
    animation-play-state: paused;
}

.carousel-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px; /* Ancho fijo por logo */
    height: 200px;
    padding: 0 3rem;
    flex-shrink: 0;
}

.carousel-slide img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    filter: grayscale(100%); /* Blanco y negro por defecto */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.carousel-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Animación de movimiento infinito */
@keyframes scrollCarousel {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Se mueve exactamente la mitad (donde empieza la repetición) */
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .clientes-carousel {
        padding: 3rem 0;
    }
    .carousel-slide {
        width: 150px;
        padding: 0 1.5rem;
    }
}

/* ==========================================
   SCROLL INDICATOR
   ========================================== */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-indicator i {
    color: white;
    font-size: 24px;
}

/* ==========================================
   UTILITY: FULL-WIDTH BUTTON
   ========================================== */
.btn-block {
    width: 100%;
}

/* ==========================================
   DIAGNÓSTICO SECTION
   ========================================== */
.diagnostico-cta {
    margin-top: 2rem;
}

.diagnostico-card {
    background: white;
    border-radius: var(--radio-lg);
    padding: 40px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.diagnostico-icon {
    font-size: 48px;
    color: var(--color-rojo-principal);
    margin-bottom: 16px;
    display: block;
}

.diagnostico-card h3 {
    margin-bottom: 12px;
}

.diagnostico-desc {
    color: #6b7280;
    margin-bottom: 24px;
}

.diagnostico-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.diagnostico-stat {
    text-align: center;
    padding: 12px 20px;
    background: #f9fafb;
    border-radius: 8px;
}

.diagnostico-stat strong {
    color: var(--color-rojo-principal);
    font-size: 20px;
    display: block;
}

.diagnostico-stat p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

.diagnostico-btn {
    margin-top: 24px;
    display: inline-block;
}