/* ==========================================================================
   1. VARIABLES, CONFIGURACIÓN BASE Y RESET
   ========================================================================== */
:root {
   --primary: #795548;
   /* Marrón corporativo */
   --accent-orange: #ff9800;
   /* Naranja de identidad */
   --dark: #2d3436;
   /* Gris casi negro para textos */
   --light-gray: #f9f9f9;
   /* Fondo secciones claras */
   --eco-green: #198754;
   /* Compromiso Ecológico */
}

/* Reset básico de márgenes y dimensiones */
html,
body {
   margin: 0;
   padding: 0;
   width: 100%;
}

/* Tipografía base y comportamiento de scroll */
body {
   font-family: 'Mulish', sans-serif;
   color: var(--dark);
   scroll-behavior: smooth;
   overflow-x: hidden;
   /* Evita desplazamientos laterales por animaciones AOS */
}

/* Optimización de secciones para animaciones y visibilidad */
section {
   width: 100%;
   overflow: hidden;
   position: relative;
}

#servicios,
#clientes,
#administradores,
#nosotros,
#compromiso,
#contacto {
   /* 90px es suficiente para que el menú no tape el título */
   scroll-margin-top: 20px;
   scroll-behavior: smooth;
}

/* ==========================================================================
   2. COMPONENTES GLOBALES (Navbar, Botones, Divisores)
   ========================================================================== */

/* Estilos de la barra de navegación */
.navbar {
   z-index: 1030;
   transition: all 0.4s ease;
   padding: 15px 0;
}

/* Estado del navbar al hacer scroll */
.navbar.scrolled {
   padding: 10px 0;
   background: rgba(255, 255, 255, 0.98);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Dimensionamiento del logotipo en el header */
.nav-logo-custom {
   width: auto;
   height: 50px;
   object-fit: contain;
}

/* Botón principal con mezcla de color corporativo */
.btn-primary-custom {
   background-color: color-mix(in srgb, var(--dark), transparent 30%) !important;
   color: white;
   border: none;
   padding: 12px 35px;
   transition: 0.3s;
}

.btn-primary-custom:hover {
   background-color: #5d4037;
   color: white;
   transform: translateY(-2px);
}

/* Botón flotante de contacto directo por WhatsApp */
.btn-whatsapp {
   position: fixed;
   bottom: 30px;
   right: 30px;
   background: #25d366;
   color: white;
   width: 65px;
   height: 65px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;
   box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
   z-index: 1000;
   text-decoration: none;
   transition: 0.3s;
}

.btn-whatsapp:hover {
   transform: scale(1.1);
   color: white;
}

/* Divisores decorativos naranja bajo los títulos */
.divider-agl,
.divider-orange {
   width: 80px;
   height: 4px;
   background-color: var(--accent-orange);
   border-radius: 2px;
   margin: 1rem 0;
}

/* ==========================================================================
   3. SECCIONES ESPECÍFICAS (Hero, Servicios, Clientes)
   ========================================================================== */

/* Sección de impacto inicial con imagen de fondo */
.hero {
   min-height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: relative;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-color: #1a1a1a;
   color: #ffffff;
}

/* Capa oscura sobre el Hero para mejorar legibilidad del texto */
.hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.45);
   z-index: 1;
}

.hero .container {
   position: relative;
   z-index: 2;
}

/* Estilo de tarjetas de servicios con efectos de elevación */
.service-card {
   border: none;
   border-radius: 20px;
   transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   background: #fff;
   overflow: hidden;
   height: 100%;
   will-change: transform;
}

.service-card:hover,
.service-card:focus-within {
   transform: translateY(-12px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
   outline: none;
}

/* Imágenes dentro de las tarjetas de servicios */
.service-card img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   border-bottom: 5px solid var(--accent-orange);
   aspect-ratio: 16 / 9;
   display: block;
}

/* Iconos circulares con fondo suave naranja */
.feature-icon {
   width: 60px;
   height: 60px;
   background: rgba(255, 152, 0, 0.1);
   color: var(--accent-orange);
   border-radius: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   margin-bottom: 1rem;
}

/* Contenedores para logotipos de clientes */
.client-logo-wrapper {
   padding: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.4s ease;
   cursor: pointer;
}

.client-logo-wrapper:hover {
   transform: scale(1.08);
}

.client-logo-wrapper img {
   max-height: 55px;
   max-width: 100%;
   object-fit: contain;
   image-rendering: -webkit-optimize-contrast;
}

/* ==========================================================================
   4. PIE DE PÁGINA Y CUMPLIMIENTO (Footer & Cookies)
   ========================================================================== */

/* Fondo oscuro general del footer */
footer {
   background: #1a1a1a;
   color: #b0b0b0;
}

/* Bloque que contiene el texto de copyright */
.footer-copyright-block {
   line-height: 1.2 !important;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* Contenedor flexible para enlaces legales */
.legal-links-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 2px 0px;
   line-height: 1.5 !important;
   opacity: 1 !important;
   visibility: visible !important;
}

/* Estilo de los enlaces a Aviso Legal, Cookies, etc. */
.link-legal {
   font-size: 0.75rem !important;
   padding: 0 !important;
   text-decoration: none !important;
   transition: opacity 0.2s ease, transform 0.2s ease;
   display: inline-flex;
   align-items: center;
}

.link-legal:hover {
   text-decoration: none !important;
   opacity: 0.8;
}

/* Ajuste de tamaño y alineación para los emojis legales */
.footer-emoji {
   font-size: 1.1rem;
   vertical-align: middle;
   margin-right: 4px;
}

/* Logo pequeño para el pie de página */
.footer-logo-custom {
   height: 30px;
   width: auto;
   object-fit: contain;
}

/* Texto informativo discreto en el footer */
.footer-description {
   font-size: 0.75rem !important;
   opacity: 0.6;
   margin-top: 1rem;
   line-height: 1.4;
}

/* Banner de cookies flotante (prioridad máxima de visibilidad) */
.cookie-banner-custom {
   position: fixed !important;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9999 !important;
   /* Asegura que esté por encima de todo */
   width: 90%;
   max-width: 800px;
   display: none;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
   animation: slideUp 0.5s ease-out;
}

/* Icono de galleta dentro del banner */
.cookie-icon-large {
   font-size: 1.8rem;
   line-height: 1;
   display: inline-block;
   vertical-align: middle;
}

/* Botón de aceptación de cookies con colores corporativos */
.btn-cookies-accept {
   background-color: #ff8c00;
   color: #000 !important;
   border: none;
   min-width: 120px;
   transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-cookies-accept:hover {
   background-color: #e67e00;
   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   color: #000 !important;
}

.btn-cookies-accept:active {
   transform: scale(0.95);
}

/* Animación de entrada para el banner de cookies */
@keyframes slideUp {
   from {
      transform: translate(-50%, 100%);
      opacity: 0;
   }

   to {
      transform: translate(-50%, 0);
      opacity: 1;
   }
}

/* ==========================================================================
   5. MODALES DE SISTEMA (Aviso Legal, Privacidad, Cookies)
   ========================================================================== */

/* Forzar que las ventanas emergentes estén siempre sobre el banner */
.modal {
   z-index: 10000 !important;
}

/* Capa de fondo oscuro de las modales */
.modal-backdrop {
   z-index: 9998 !important;
}

/* ==========================================================================
   6. CLASES DE UTILIDAD (Helpers)
   ========================================================================== */
.text-optimized {
   font-size: 0.9rem;
   line-height: 1.6;
}

.text-xs {
   font-size: 0.85rem !important;
}

.text-agl-orange {
   color: var(--accent-orange) !important;
}

.border-agl-orange {
   border-color: var(--accent-orange) !important;
}

/* Badge destacado en la sección Hero */
.badge-agl-hero {
   background-color: color-mix(in srgb, var(--dark), transparent 30%) !important;
   border: 1px solid var(--accent-orange);
   color: #ffffff !important;
   font-size: 0.9rem;
   font-weight: 400;
}

/* Etiqueta de sector en tarjetas o textos */
.sector-tag {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 700;
   color: var(--accent-orange);
}

/* Etiqueta de tiempo con nosotros en tarjetas */
.since-work {
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
   /* seminegrita */
   font-style: italic;
   /* cursiva */
   color: var(--primary);
}


/* Estilos específicos para el compromiso ecológico */
.icon-eco,
.text-eco {
   color: var(--eco-green) !important;
}

.icon-eco {
   font-size: 1.40rem;
}

/* ==========================================================================
   7. RESPONSIVE Y MEDIA QUERIES
   ========================================================================== */

/* Ajustes para Tablets y Dispositivos Medianos */
@media (min-width: 768px) {
   .border-md-start {
      border-left: 1px solid rgba(108, 117, 125, 0.25) !important;
   }
}

/* Ajustes para Escritorio y Pantallas Grandes */
@media (min-width: 992px) {

   #servicios,
   #clientes,
   #nosotros,
   #compromiso,
   #contacto {
      scroll-margin-top: 40px;
      /* Menor margen en PC ya que el navbar es más pequeño */
   }
}