/**
 * header.css
 * Estilos específicos para el componente header
 * 
 * Este archivo define los estilos para:
 * 1. Navegación superior con logo y menú principal
 * 2. Información de contacto
 * 3. Menú de servicios con sus colores específicos
 * 4. Comportamiento responsive del header
 */

/* Contenedor principal del header */
header {
    background-color: var(--color-primary);
    width: 100%;
}

/* Contenedor superior de navegación */
.nav-top-container {
    padding: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl)) 0;
}

/* Navegación principal */
nav {
    width: 100%;
}

/* Layout principal del header */
.nav-main-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

/* Sección izquierda de la navegación (logo) */
.nav-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Sección derecha con contacto y menú */
.nav-right-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm); /* Espaciado intermedio entre contacto y menú */
}

/* Fila del menú */
.nav-menu-row {
    display: flex;
    justify-content: flex-end;
}

/* Información de contacto en el header */
.contact-info {
    display: flex;
    gap: clamp(var(--spacing-md), 3vw, var(--spacing-lg));
}

.contact-info a {
    display: flex;
    align-items: center;
    color: var(--text-light);
    text-decoration: none;
    font-size: clamp(0.75rem, 1.5vw, var(--text-xs));
    gap: var(--spacing-xs);
    white-space: nowrap;
}

/* Iconos en el header */
.header-icon {
    width: clamp(20px, 4vw, 24px);
    height: clamp(20px, 4vw, 24px);
    opacity: 0.9;
}

/* Logo principal - Más grande */
.logo {
    height: clamp(60px, 10vw, 80px);
    width: auto;
}

/* Menú principal */
.main-menu {
    display: flex;
    list-style: none;
    gap: clamp(var(--spacing-md), 3vw, var(--spacing-lg));
    align-items: center;
}

.main-menu li a {
    font-family: var(--font-secondary);
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition-default);
    font-size: clamp(0.85rem, 1.8vw, var(--text-sm));
    white-space: nowrap;
}

.main-menu li a:hover {
    color: var(--color-secondary);
}

/* Botón de área de cliente */
.btn-cliente {
    background-color: var(--bg-testimonials);
    padding: var(--spacing-xs) clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    border-radius: var(--radius-sm);
}

.btn-cliente:hover {
    background-color: #EC6F73;
    color: var(--text-light) !important;
}

/* Menú de Servicios */
.nav-bottom {
    background-color: #345e2e;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar el contenido del menú de servicios */
    padding: 0;
    width: 100%;
}

/* Asegurar que el nav dentro del menú de servicios también esté centrado */
.nav-bottom nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Grid de servicios */
.services-menu {
    display: flex;
    list-style: none;
    width: 100%;
    overflow: hidden;
    justify-content: center;
}

/* Elementos individuales del menú de servicios */
.service-item {
    flex: 1;
    transition: var(--transition-default);
    position: relative;
    display: flex;
}

.service-item:hover {
    transform: translateY(-5px);
    z-index: 1;
}

/* Colores de fondo para cada servicio */
.service-item:nth-child(1) { background-color: var(--bg-reason-1); }
.service-item:nth-child(2) { background-color: #7aad79; }
.service-item:nth-child(3) { background-color: var(--bg-testimonials); }
.service-item:nth-child(4) { background-color: #7ea04c; }
.service-item:nth-child(5) { background-color: #f198a1; }

/* Enlaces dentro de los items de servicio */
.service-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-primary);
    width: 100%;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-sm));
    gap: var(--spacing-xs);
}

/* Iconos del menú de servicios */
.menu-icon {
    width: clamp(55px, 9vw, 220px);
    height: clamp(55px, 9vw, 220px);
    transition: transform var(--transition-default);
}

.service-item:hover .menu-icon {
    transform: scale(1.3);
}

/* Texto de los servicios */
.service-item span {
    font-family: var(--font-secondary);
    font-weight: bold;
    font-size: clamp(0.85rem, 2vw, var(--text-lg));
    text-align: center;
    color: #F2EBE3; /* Color personalizado para el texto del menú de servicios */
}

/* Media Queries */
@media (max-width: 1200px) {
    .nav-top-container {
        padding: var(--spacing-xl) 0;
    }
}

@media (max-width: 1024px) {
    .nav-right-section {
        align-items: center;
    }

    .nav-menu-row {
        justify-content: center;
    }

    .services-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center !important; /* Forzar centrado */
        max-width: 600px;
        margin: 0 auto; /* Centrar el contenedor */
        gap: 0;
    }

    .service-item {
        flex: 0 0 33.33%;
        display: flex;
        justify-content: center;
    }

    .main-menu {
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .nav-main-layout {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }

    .nav-right-section {
        align-items: center;
        width: 100%;
    }

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

    .contact-info {
        justify-content: center;
        flex-wrap: wrap;
    }

    .main-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
    }

    .services-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center !important; /* Forzar centrado */
        max-width: 400px;
        margin: 0 auto; /* Centrar el contenedor */
        gap: 0;
    }

    .service-item {
        flex: 0 0 50%;
        display: flex;
        justify-content: center;
    }

    .nav-top-container {
        padding: var(--spacing-lg) 0;
    }
}

@media (max-width: 480px) {
    .contact-info {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .contact-info a {
        justify-content: center;
    }

    .nav-top-container {
        padding: var(--spacing-md) 0;
    }

    .services-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center !important; /* Forzar centrado */
        max-width: 300px;
        margin: 0 auto; /* Centrar el contenedor */
        gap: 0;
    }

    .service-item {
        display: flex;
        justify-content: center;
    }

    .service-item a {
        padding: var(--spacing-xs);
    }
}