/* Estilos Generales del Cuerpo */
html {
    scroll-behavior: smooth; /* Suaviza el desplazamiento al hacer clic en enlaces de anclaje */
}

body {
    font-family: 'Raleway', sans-serif;
    font-weight: 300; /* peso ligero como base */
    color: #333; /* Un gris oscuro para mejor legibilidad */
}

/* Estilos para los Encabezados */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Antes 800 */
}

/* Ajuste para los botones */
.btn-primary {
    background-color: #007bff; 
    border-color: #007bff;
    border-radius: 0; /* Bordes rectos */
    text-transform: uppercase;
    padding: 10px 20px;
}

/*------------------------------------*\
  #BARRA DE NAVEGACIÓN
\*------------------------------------*/
.navbar {
    background-color: #fff; /* Fondo blanco puro */
    border-bottom: 1px solid #eee; /* Línea divisoria sutil */
}

.navbar-nav .nav-link {
    font-weight: 800; /* negrita */
    text-transform: uppercase; /* en mayúsculas */
    color: #555; /* Color de texto gris oscuro */
    margin-left: 1rem; /* Espacio entre los elementos del menú */
}

.navbar-nav .nav-link:hover {
    color: #000;
}

.navbar-brand img {
    height: 7rem; /* Altura del logo principal */
}

.navbar-nav .nav-link i.bi-linkedin {
    font-size: 1.5rem; /* tamaño del icono de LinkedIn */
    vertical-align: middle;
}

/*------------------------------------*\
  #SECCIÓN DE MARCAS
\*------------------------------------*/
.brand-logo {
    height: 6rem; /* Aumentamos la altura de los logos */
    max-width: 200px;
    margin-bottom: 1.5rem; /* Un poco más de margen inferior */
}

.brand-description {
    font-size: 1rem; /* Aumentamos el tamaño de la fuente */
    color: #777;
    min-height: 140px; 
}

.brand-tagline {
    font-size: 1rem; /* Tamaño de 16px */
    font-weight: 300;
    color: #666;
    text-transform: lowercase; /* Todo en minúsculas */
    margin-bottom: 1.5rem;
}

/* Ajuste para el botón de las marcas */
.btn-outline-dark {
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 800;
    padding: 8px 25px;
    border-width: 2px;
}

.btn-outline-dark:hover {
    background-color: #343a40;
    color: #fff;
}

/*------------------------------------*\
  #SECCIÓN DISTRIBUIDORES
\*------------------------------------*/
.distribuidores-section {
    position: relative;
    /* Asegúrate de que la ruta a tu nueva imagen sea correcta */
    background-image: url('images/mapa-2.jpg');
    background-size: cover;  /* Antes cover */
    background-position: center;
    padding: 11rem 0; /* Espaciado vertical para dar aire */
}

.distribuidores-texto h2, .distribuidores-texto p {
    color: #343a40; /* Txt en contraste con fondo azulado */
}

.distribuidores-texto .lead {
    font-weight: 400;
    font-size: 1.25rem;
}

.mapa-mobil {
    display: none; /* Ocultamos la imagen móvil por defecto */
}

.distr_solo_texto {
    display: block;
}

.distr_texto_mobil {
    display: none;
}

/*------------------------------------*\
  #SECCIÓN RSE Y MODAL
\*------------------------------------*/
#rse {
    text-align: left; /* Alineamos todo a la izquierda */
}

#rse h2 {
    font-size: 2.5rem;
}

#rse h3 {
    font-size: 1.75rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

#rse .lead {
    font-size: 1.1rem;
    font-weight: 300;
    color: #6c757d;
    max-width: 80%; /* Evitamos q las líneas de texto sean muy largas */
}

.btn-read-more {
    color: #333;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-read-more:hover {
    color: #000;
}

/* Estilos para el modal personalizado */
#rseModal .modal-dialog.modal-fullscreen-custom {
    max-width: none;
    height: 100%;
    margin: 0;
}

#rseModal .modal-content {
    background-color: rgba(10, 10, 10, 0.9); /* Fondo gris oscuro con 90% de opacidad */
    border: 0;
    border-radius: 0;
    color: #fff; /* Color del texto */

    /* Centrado vertical y horizontal del contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#rseModal .modal-header {
    border-bottom: 0;
    position: absolute;
    top: 20px;
    right: 20px;
}

#rseModal .modal-body {
    font-size: 1.5rem; /* Fuente más grande para el txt */
    font-weight: 300;
    max-width: 800px; /* Ancho máximo para q no sea muy largo en pantallas grandes */
    padding: 2rem;
}

/*------------------------------------*\
  #SECCIÓN TRABAJA CON NOSOTROS
\*------------------------------------*/
.trabaja-con-nosotros-section {
    position: relative;
    background-image: url('images/img-trabaja.jpg');
    background-size: cover;
    background-position: center;
    min-height: 500px;
    color: #fff;
    display: flex; /* display flex para centrar verticalmente el contenido */
    align-items: center;
}

/*------------------------------------*\
  #FOOTER
\*------------------------------------*/
.site-footer {
    background-color: #595958;
    padding-top: 80px; /* Espacio superior para el logo incrustado */
    padding-bottom: 20px;
}

/* Y se lo ponemos al contenedor de adentro */
.site-footer .container {
    position: relative;
    border-color: #dee2e6;
}

.footer-logo-box {
    position: absolute;
    top: -8rem;
    left: var(--bs-gutter-x, 0.75rem); /* Alineacion Izq, considerando el padding del container */
    /* left: 50%; /* centrado */
    /* transform: translateX(-50%); */
    background-color: #fff;
    padding: 2px 2px;
    border: 1px solid #fff; /* antes #dee2e6; */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.footer-logo-box img {
    height: 5.5rem;
}

.site-footer h5 {
    font-weight: 800;
    color: #343a40;
}

.footer-link {
    text-decoration: none;
    color: white;
    font-weight: 300;
}

.footer-link:hover {
    color: #909090;
    text-decoration: underline;
}

.footer-link:visited {
    color: white;
}

.footer-brand-logo {
    height: 5rem;
    margin-right: 0.1rem;
    opacity: 0.7;
}

.site-footer hr {
    border-color: #dee2e6;
}

#logos_pie {
    height: 5rem;
    opacity: 0.7;
}

/*------------------------------------*\
  # ESTILOS RESPONSIVE (MÓVIL)
\*------------------------------------*/
@media (max-width: 991px) { /* Se aplica a tablets y móviles */

    /* 1. Soluciona el texto de la sección Distribuidores */
    .distribuidores-section {
        background-image: none; /* Quitamos la imagen de fondo */
        background-color: #f8f9fa; /* Ponemos un color de fondo sólido */
        padding: 3rem 0; /* Ajustamos el espaciado vertical */
    }

    #logos_pie {
        height: 2.7rem;
    }

    .mapa-mobil {
        display: block;
        margin-top: 2rem; /* Espacio entre el texto y la imagen */
    }

    .distr_solo_texto {
        display: none;
    }

    .distr_texto_mobil {
        display: block;
    }
}

@media (max-width: 767px) { /* Se aplica solo a móviles */

    /* 2. Ajusta el logo "incrustado" del footer para que no se desborde */
    .footer-logo-box {
        position: static; /* Quitamos el posicionamiento absoluto */
        transform: none;
        box-shadow: none;
        border: none;
        margin: -60px auto 30px auto; /* Lo centramos y ajustamos márgenes */
        padding: 0;
        background-color: transparent;
    }

    .site-footer {
        padding-top: 20px; /* Reducimos el padding superior del footer */
    }

    /* 3. Ajusta el recuadro "Trabaja con Nosotros" */
    .trabaja-box {
        padding: 1.5rem;
        background-color: rgba(10, 10, 10, 0.8); /* Fondo más opaco para legibilidad */
    }

    .trabaja-box h2 {
        font-size: 1.8rem;
    }

    #logos_pie {
        height: 3.2rem;
    }
}

@media (max-width: 767px) { /* Más pequeños */
     #logos_pie {
        height: 2.2rem;
    }
}