:root {
   --navbar: #212121;
   --main-section: #eceaea;
   --container-max-width: 1280px; /*1366*/
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
   color: #212121;
   background: repeating-linear-gradient(
      45deg,
      #2b2b2b 2px,
      #2b2b2b 4px,
      #212121 4px,
      #212121 6px
    );
}

/* CONTENEDOR PRINCIPAL (limita el ancho en escritorio) */
.site-wrapper {
   max-width: var(--container-max-width);
   margin: 0 auto;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

/* LOGO */
.logo-section {
   background-color: #eceaea;
   padding: 1.2rem 0;
   text-align: center;
}

.logo-img {
   max-height: 20vh;
   height: auto;
   width: auto;
}

/* MENÚ PRINCIPAL */
.main-nav {
   background-color: var(--navbar);
   position: relative;
   z-index: 1000;
}

.main-nav .nav {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 100%;
}

.main-nav .nav .nav-item {
   flex: 1;
   text-align: center;
}

.main-nav .nav .nav-item .nav-link {
   color: white;
   padding: 1rem 0;
   display: block;
   text-decoration: none;
   transition: all 0.3s ease;
}

.main-nav .nav .nav-item .nav-link:hover {
   background-color: #3a3a3a;
   color: white;
}

.main-nav .nav .nav-item .nav-link.active {
   background-color: #2c2c2c;
   color: white;
   font-weight: bold;
}

/* BOTÓN HAMBURGUESA (móvil) */
.mobile-menu-toggle {
   display: none;
   background: none;
   background-color: #212121;
   border: none;
   color: white;
   font-size: 1.5rem;
   padding: 0.2rem 0.8rem;
   cursor: pointer;
   position: absolute;
   top: 48%;
   /*right: 1rem;*/
   transform: translateY(-70%);
}

/* MENÚ MÓVIL (overlay - mitad inferior) */
.mobile-menu {
   position: fixed;
   top: 0;
   transform: translateY(50%);
   left: 0;
   width: 100%;
   max-height: 50vh;
   background-color: var(--navbar);
   z-index: 2000;
   display: none;
   flex-direction: column;
   overflow-y: auto;
   box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
}

.mobile-menu.active {
   display: flex;
}

.mobile-menu .nav {
   flex-direction: column;
   width: 100%;
   padding: 0;
}

.mobile-menu .nav-item {
   width: 100%;
   text-align: center;
   
}

.mobile-menu .nav-link {
   color: white !important;
   font-size: 1.1rem;
   padding: 0.6rem 0;
   display: block;
   text-decoration: none;
}

/* CONTENIDO */
.main-content {
   flex: 1;
   background-color: var(--main-section);
}

.banner-img {
   width: 100%;
   /* height: 30vh; Altura del 30% del viewport 
   object-fit: cover; /* Recorta la imagen para llenar el contenedor */
}
/* FOOTER - 3 COLUMNAS */
.footer-section {
   background-color: #212121;
   color: white;
   padding: 2.5rem 1.5rem 1.5rem;
   margin-top: auto;
}

.footer-columns {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
}

.footer-column {
   flex: 1 1 250px;
   /* Cada columna mínimo 250px, crece equitativamente */
}

.footer-column h5 {
   border-bottom: 2px solid #495d72;
   padding-bottom: 0.5rem;
   margin-bottom: 1rem;
   font-size: 1.1rem;
}

.footer-column ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-column ul li {
   margin-bottom: 0.4rem;
   font-size: 0.95rem;
}

.footer-column a {
   color: #ddd;
   text-decoration: none;
}

.footer-column a:hover {
   color: white;
   text-decoration: underline;
}

/* LOGO DE EMPRESAS AFILIADAS */
.afiliados-container {
   margin-top: 2rem;
   text-align: center;
}



/* RESPONSIVE */
@media (max-width: 767.98px) {
   .main-nav .nav {
      display: none;
   }

   .mobile-menu-toggle {
      display: block;
   }

   .logo-img {
      max-height: 80px;
   }

   .footer-columns {
      flex-direction: column;
      gap: 1.5rem;
   }

   .afiliados-container img {
      height: 80px;
      margin: 0 0.3rem 0.6rem;
   }
}