/* Para el fixed del header*/



/*Boton para el responsive*/
.abrir-menu,
.cerrar-menu{
    display: none;
}



/* Header */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.5rem, 12vw, 2rem);
    position: relative;
}


.logo img {
    height: 50px;
}

/*.nav-links{
    /*position: absolute; /* Posicionamiento absoluto para centrado preciso */
    /*left: 50%; /* Centra el contenedor horizontalmente */
    /*transform: translateX(-50%); /* Ajuste fino para centrado exacto *//*
}*/

nav ul {
    list-style: none;
    display: flex;
    gap: 20px; /* Espacio uniforme entre enlaces (reemplaza los márgenes individuales) */
    padding: 0; /* Elimina el padding por defecto */
    margin: 0; /* Elimina el margen por defecto */

}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: var(--header-color-links);
    font-weight: bold;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: var(--header-color-links-hover);
}

nav ul li a.active {
    color: var(--header-color-links-hover); /* Color verde de tu marca */
    /* Opcional: agregar más estilos para resaltar */
    font-weight: bold;
    /*position: relative;*/
}

.whatsapp-button {
    background-color: var(--whatsapp-button);
    color: var(--whatsapp-number);
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.whatsapp-button:hover {
    background-color: var(--whatsapp-button-hover);
}

.whatsapp-button i {
    margin-right: 5px;
}

/* Ajustes opcionales para mejorar el espaciado */
.logo, nav, .whatsapp-button {
    margin: 0 0px;         /* Espacio horizontal entre elementos */
}


/* Escritorio pequeño - hasta 1200px */
@media (max-width: 1200px) { 
    .nav-links {
        /*position: static;*/
        transform: none;
        /*order: 3;*/
        /*width: 100%;*/
        /*margin-top: 15px;*/
    }
    
    .header-row {
        display: flex;
        justify-content: space-between;
    }

    nav ul {
        justify-content: center;
    }
    
    nav ul li a {
        font-size: 0.95rem;
        padding: 0px 0px;
    }

    .header-row {
        flex-wrap: wrap;
    }
 }

/* Tablet landscape - hasta 1024px */
@media (max-width: 1024px) { 

    .header-row{
        display: flex;
        padding: 0.5rem 0.5rem;
    }

    /*
    nav ul li a {
        font-size: 0.rem;
        padding: 6px 9px;
    }*/
    
    nav ul {
        gap: 0px;
    }

    /*
    .nav ul li  a{
        margin: 0 0;
        padding: 0;
        gap: 0; 
    }

    /*
    .whatsapp-button {
        display: none;
    }*/

 }

/* Tablet portrait - hasta 768px */
@media (max-width: 768px) { 
    /* El body ya no se mueve, solo el contenido principal */

    .header-row{
        width: 100%;
        justify-content: space-between;
        /*position: fixed;*/
        top: 0;
        left: 0;
        right: 0;
        background: white;
        z-index: 1001;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .abrir-menu,
    .cerrar-menu {
        display: block;
        border: 0;
        font-size: 2rem;
        background-color: transparent;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .abrir-menu:hover,
    .cerrar-menu:hover{
        transform: scale(1.05);
    }

    .abrir-menu{
        color: #1c1c1c;
    }

    .cerrar-menu{
        color: #1c1c1c;
        display: none;
    }

    /* Mostrar botón cerrar cuando el menú está abierto */
    body.menu-open .abrir-menu {
        display: none;
    }

    body.menu-open .cerrar-menu {
        display: block;
    }
    
    .nav-list li,
    .nav-list a,
    .nav-list li a{
        margin: 0;
        padding: 0;
    }

    .nav{
        display: none;
        position: fixed;
        top: 70px; /* Altura del header */
        left: 0;
        right: 0;
        width: 100%;
        background-color: #ececec;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        z-index: 1000;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Mostrar menú cuando está activo */
    .nav.menu-visible {
        display: block;
        animation: slideDown 0.4s ease forwards;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-list{
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .nav-list li {
        width: 100%;
        text-align: center;
    }

    .nav-list li a {
        display: block;
        padding: 15px;
        color: #333;
        font-size: 1.1rem;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .nav-list li a:hover {
        background-color: rgba(32, 103, 175, 0.1);
        color: #2067af;
        transform: translateX(5px);
    }

    .nav-links.active {
        display: block;
    }
    
    nav ul {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .whatsapp-button {
        display: none;
    }
    
    .logo {
        order: 0;
    }

    /* Ajustar el contenido principal para el header fijo *//*
    .index-slider {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }*/

    /* Solo mover el contenido principal cuando el menú está abierto *//*
    body.menu-open .index-slider {
        transform: translateY(var(--menu-height));
    }*/
}
/* Móvil grande - hasta 576px */
@media (max-width: 576px) { 
    .header-row{
        width: 100%;
        justify-content: space-between;
        /*padding: 1rem;*/
    }
    
    .logo img {
        height: 40px;
    }
    
    .whatsapp-button {
        display: none;
    }
    
    .whatsapp-button i {
        margin-right: 0;
        font-size: 1.2rem;
    }
 }

/* Móvil pequeño - hasta 480px *//*
@media (max-width: 480px) { 
    .header-row{
        width: 100%;
        justify-content: space-between;
        padding: 1rem;
    }
    
    .logo img {
        height: 35px;
    }
    
    .abrir-menu {
        font-size: 1.3rem;
    }
    
    .header-row {
        padding: 10px 0;
    }
 }
*/