/* DISEÑO GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    scroll-behavior: smooth;
}

body {
    background-color: #606aec;
    color: #f10707;
    line-height: 1.6;
}

/* ==========================================================================
   MENÚ SUPERIOR (NAVBAR) - COMPACTADO UN 20% Y CENTRADO
   ========================================================================== */
.navbar {
    /* Reemplazamos el fondo blanco por este degradado de gris a blanco y a gris */
    background: linear-gradient(to right, #333333 0%, #ffffff 50%, #333333 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 9999; 
    padding: 8px 0 6px 0; 
    width: 100%;   
}

/* El contenedor principal vuelve a ordenar sus hijos en vertical (dos pisos) */
.navbar-wrapper {
    display: flex;
    flex-direction: column;    /* 🚀 Apila los logos arriba y el menú abajo */
    align-items: center;    
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   ÁREA SUPERIOR: LOGOS GENERALES (NORCANTEC Y MARCAS REPROGRÁFICAS)
   ========================================================================== */
/* ÁREA SUPERIOR: LOGOS */
/* ==========================================================================
   NUEVA ALINEACIÓN: LOGO PRINCIPAL Y MARCAS EN LA MISMA LÍNEA
   ========================================================================== */

* PISO SUPERIOR: El logo de Norcantec y las marcas alineados horizontalmente */
/* PISO SUPERIOR: El logo de Norcantec y las marcas alineados horizontalmente */
.logo-area {
    display: flex;
    flex-direction: row;       
    align-items: center;       
    justify-content: center;   
    gap: 50px;                 /* 🚀 ¡Aumentado! Subió de 25px a 55px para dar más separación */
    width: 100%;
    padding: 5px 0 10px 0;     
    border: none !important;
}
/* Evitamos que el contenedor del logo rompa la fila */
.logo {
    display: flex;
    justify-content: center;
    width: auto;
}    

/* Mantenemos tu logo de Norcantec con sus dimensiones y recuadro intactos */
.main-logo-img {
    max-height: 85px;
    height: auto;
    width: auto;
    display: block;
    margin: 0;                /* 👈 Eliminamos el auto-margin para que se alinee bien */
    border: 2px solid #0d74eb;
    border-radius: 8px;
    padding: 8px 15px;
    background-color: #ffffff;
}

/* La fila de marcas se acopla perfectamente al lado derecho de tu logo */
.brand-logos-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* Tu logo principal imponente */
.main-logo-img {
    max-height: 85px;
    height: auto;
    width: auto;
    display: block;
    margin: 0;                 /* Quitamos el margen automático */
    border: 2px solid #0d74eb;
    border-radius: 8px;
    padding: 8px 15px;
    background-color: #ffffff;
}

/* ==========================================================================
   MARCAS REPROGRÁFICAS INDEPENDIENTES (CANON, TOSHIBA Y PANTUM)
   ========================================================================== */

/* Fila horizontal de marcas */
.brand-logos-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
 */ achicar logo pantum
.brand-logos-row a img[src*="pantum"] {
    max-height: 10px !important; /* 📐 Bajó de 20px/24px a 14px para que no sature */
    width: auto !important;
    transform: scale(0.8) !important; /* Ajuste fino de escala si es necesario */
}
/* ==========================================================================
   CORRECCIÓN QUIRÚRGICA: ACHICAR LOGO PANTUM EN LA CABECERA
   ========================================================================== */
.brand-logos-row a img[alt="Pantum"],
.brand-logos-row img[alt="Pantum"] {
    height: 22px !important;            /* 📐 Forzamos una altura mucho menor (ajustalo si lo querés más chico) */
    max-height: 22px !important;
    width: auto !important;
    transform: scale(0.85) !important;  /* 📉 Achique fino de escala visual */
}

/* Evitamos que al pasar el mouse (hover) recupere un tamaño gigante */
.brand-logos-row a:hover img[alt="Pantum"] {
    transform: scale(1.05) !important;  /* Un estímulo sutil al pasar el cursor, sin desarmar la barra */
}

/* 🎨 RECUADRO AZUL INDEPENDIENTE Y REDONDEADO PARA CADA LOGO SECUNDARIO */
.brand-logos-row img {
    height: 38px;            /* Un poquito más grandes para que hagan juego */
    width: auto;
    object-fit: contain;
    opacity: 1;             
    transition: transform 0.2s ease, border-color 0.2s ease;
    vertical-align: middle; 
    
    background-color: #ffffff; 
    border: 2px solid #0d74eb; /* Cada marca tiene su propio borde azul claro independiente */
    border-radius: 6px;       /* Bordes redondeados individuales */
    padding: 5px 10px;        /* Margen interno para que respiren las marcas */
}

/* Estado cuando pasas el cursor por encima (:hover) de una marca */
.brand-logos-row a:hover img {
    border-color: #0d74eb;    /* El borde cambia a azul oscuro al pasar el mouse */
    transform: scale(2);   /* Efecto de agrandado sutil e interactivo */
    opacity: 0.6;             /* 👈 Esto hace que el logo se atenúe (se vuelva un poquito transparente) */
}
/* 1. Definimos la animación del latido */
@keyframes latidoMarcas {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(246, 50, 50, 0.152));
    }
    50% {
        transform: scale(1.05); /* Se agranda un poquito solo */
        filter: drop-shadow(0px 4px 10px rgba(204, 0, 0, 0.574)); /* Crea un aura roja sutil (color Canon/alerta) */
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}

/* 2. Aplicamos la animación en bucle a los logos */
.brand-logos-row a img {
    cursor: pointer !important;
    /* Corre la animación de forma infinita, dura 2 segundos y se repite */
    animation: latidoMarcas 2s ease-in-out infinite !important; 
    transition: transform 0.3s ease !important;
}

/* 3. Si el usuario ya le puso el mouse encima, detenemos el latido y dejamos el control al usuario */
.brand-logos-row a:hover img {
    animation: none !important; 
    transform: scale(1.15) !important;
    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.2)) !important;
}
/* ÁREA INFERIOR: MENÚ DE NAVEGACIÓN */
/* PISO INFERIOR: El menú de navegación recupera su lugar abajo bien centrado */
.main-nav {
    width: 100%;               /* Cambiado de 140% a 100% para que no desborde la pantalla */
    border-top: 2px solid #506ef7; /* Línea divisoria horizontal limpia y sutil */
    padding-top: 10px;         /* Espacio interno sobre los botones */
    margin-top: 5px;           /* Separación con el piso de los logos */
}

.nav-links {
    display: flex;
    justify-content: center;   /* 🚀 Centra los botones de navegación perfectamente abajo */
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links li {
    margin: 0 15px;         /* Distribución equilibrada */
}

.nav-links a {
    text-decoration: none;
    color: #f70505;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease; /* 👈 Agregamos esto para que el cambio a azul sea suave */
}

/* Estado cuando pasas el cursor (:hover) */
.nav-links a:hover {
    color: #134074; /* 👈 Cambia a este azul (puedes usar el azul que prefieras) */
    opacity: 0.6;
    transform: scale(1.3);
}

/* Estado del botón activo (la página donde está parado el usuario) */
.nav-links a.active {
    color: #f70505; /* Mantiene el rojo para resaltar en qué sección está */
}

.nav-links ul {
    text-decoration: none;
    color: #f70505;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

/* ==========================================================================
   BANNER PRINCIPAL (HERO)
   ========================================================================== */
.hero {
    background: linear-gradient(rgba(58, 134, 226, 0.692), rgba(19, 64, 116, 0.85)), url('banner-principal.png') no-repeat center center/cover;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 80vh;
    color: #ffffff;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 45px;
    font-weight: 800;
    flex-direction: column;   /* Apila el título, párrafo y botones en vertical */
    align-items: center;      /* 🚀 Centra los botones en el medio exacto de la pantalla */
    justify-content: center;
    max-width: 800px;
    margin-bottom: 0px;
    max-width: 800px;
    margin: 0 auto;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 35px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.btn-main, .btn-sec, .btn-ter, .btn-product {
    padding: 5px 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-main {
    background-color: #a9c0fe;
    color: #0b2545;
    border: 3px solid #fa0606;
}

.btn-main:hover {
    background-color: #ffffff;
    color: #0b2545;
}

.btn-sec {
    background-color: #a9c0fe;
    color: #0b2545;
    border: 3px solid #fa0606;
}

.btn-sec:hover {
    background-color: #ffffff;
    color: #0b2545;
}
.btn-ter {
    background-color: #a9c0fe;
    color: #0b2545;
    border: 3px solid #fa0606;
}

.btn-ter:hover {
    background-color: #ffffff;
    color: #0b2545;
}
.btn-novedad-hero {
  /* Posicionamiento Sticky para que se deslice SOLO dentro del Hero */
  position: sticky;
  top: 20px;          /* Distancia desde el techo de la pantalla mientras hace scroll */
  left: 0px;         /* Pegado a la izquierda */
  z-index: 100;
  
  /* Para alinearlo dinámicamente si usas flexbox en el contenedor */
  align-self: flex-start;
  margin-left: 10px;

  /* Estilo visual y animación */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(135deg, #ecfd04, #7928ca);
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  animation: pulso 1.8s infinite;
  transition: transform 0.2s ease;
}

.btn-novedad-hero:hover {
  transform: scale(1.05);
}

.badge {
  background-color: #ffffff;
  color: #ff0800;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  text-transform: uppercase;
}

/* Animación de pulso */
@keyframes pulso {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 127, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 0, 127, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 127, 0);
  }
}


/* CONTENEDORES GENERALES */
/* 1. ACHICAMOS EL RELLENO SUPERIOR DE LAS SECCIONES */
/* Bajamos el padding de 80px a 40px arriba para que todo el bloque de Equipos suba */
.section-container {
    padding: 50px 8% 80px 8%; /* 👈 Cambiado: 40px arriba, 8% lados, 80px abajo */
    text-align: center;
}

/* 2. REDUCIMOS EL FRENO DEL SCROLL (SCROLL-MARGIN-TOP) */
/* Al bajarlo de 180px a 110px, la página no se deslizará tan abajo al hacer clic en "Equipos" */
[id="inicio"], [id="contacto"], #inicio, #contacto, #servicios, #equipos {
    scroll-margin-top: 110px !important; /* 👈 Cambiado de 180px a 110px */
    display: block; 
}

.bg-light {
    background-color: #f4f6f9;
}

.section-title {
    font-size: 32px;
    color: #0b2545;
    margin-bottom: 40px;
    position: center;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    width: 60px;
    height: 3px;
    background-color: #134074;
    position: center;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section-subtitle {
    color: #3f4bf1;
    margin-top: -30px;
    margin-bottom: 40px;
}

.grid-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* TARJETAS DE SERVICIOS */
.card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    transition: transform 0.3s;
    border-top: 4px solid #134074;
    border-bottom: 4px solid #134074
}

.card:hover {
    transform: translateY(-0px);
}

.card-icon {
    font-size: 35px;
    color: #fc0404;
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
    color: #134074;
}

/* TARJETAS DE PRODUCTOS (Equipos) */
.product-card {
    background-color: #e9902b70;
    /* 🎨 Añadimos el recuadro azul corporativo */
    border: 6px solid #134074; 
    /* 📐 Bordes redondeados */
    border-radius: 8px; 
    
    /* Mantenemos tus estilos base intactos para que no se desarme nada */
    overflow: hidden; /* Esto hace que el badge de arriba respete la curva */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 🌟 Efecto hover para que la tarjeta reaccione de forma fluida al pasar el mouse */
.product-card:hover {
    transform: translateY(-0px);
    box-shadow: 0 8px 25px rgba(19, 64, 116, 0.15);
    border-color: #0b2545; /* El borde se oscurece sutilmente */
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #134074;
    color: rgb(255, 255, 255);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
}

.product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.product-info {
    padding: 20px;
}

.product-info h3 {
    font-size: 18px;
    color: #0b2545;
    margin-bottom: 10px;
}

.product-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    height: 44px;
    overflow: hidden;
}

.product-status {
    display: block;
    font-size: 12px;
    color: #2ec4b6;
    font-weight: bold;
    margin-bottom: 15px;
}

.btn-product {
    display: block;
    text-align: center;
    background-color: #0b2545;
    color: white;
    padding: 10px;
    font-size: 14px;
    border: 6px solid #ffffff;
}

.btn-product:hover {
    background-color: #134074;
}
/* ==========================================================================
   ESTILO PARA EL TEXTO DEL MODELO EN LAS TARJETAS (TODOS LOS INDEX)
   ========================================================================== */
.product-card .product-model {
    display: block !important;
    text-align: center !important;  /* Lo centra abajo de la imagen */
    font-size: 16px !important;     /* Tamaño de letra destacado */
    font-weight: bold !important;   /* Pone el modelo en negrita */
    color: #01158a !important;      /* Color gris oscuro elegante (podés usar el que quieras) */
    margin-top: 05px !important;    /* Separación respecto de la foto */
    margin-bottom: -15px !important; /* Separación respecto del botón inferior */
}

/* ==========================================================================
   ESTILOS DE LA SECCIÓN DE CONTACTO
   ========================================================================== */
.contact-wrapper {
    display: flex;
    justify-content: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    flex-wrap: wrap;
}

.contact-form {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
}

.btn-submit {
    background-color: #0b2545;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit:hover {
    background-color: #134074;
}

.contact-info-panel {
    flex: 1;
    min-width: 300px;
    background: #ffffff;
    padding: 30px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.contact-info-panel h3 {
    color: #0b2545;
    margin-bottom: 20px;
}

.contact-info-panel p {
    margin-bottom: 20px;  /* 👈 ¡Punto y coma agregado! */
    color: #134074;       /* 👈 Ahora sí el navegador leerá el color azul */
}

.contact-info-panel i {
    color: #134074;
    margin-right: 10px;
    width: 20px;
}

.work-hours {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}

.work-hours h4 {
    color: #0b2545;
    margin-bottom: 5px;
}

/* WHATSAPP FLOTANTE */
/* WHATSAPP FLOTANTE - POSICIONADO ARRIBA DEBAJO DEL HEADER */
.whatsapp-btn {
    position: fixed !important;
    top: 155px !important;       /* 📐 Lo baja lo justo para quedar abajo de tu header de dos pisos */
    right: 30px !important;      /* Mantiene su distancia del borde derecho */
    bottom: auto !important;     /* 🚀 Anula la posición de abajo anterior */
    background-color: #25d366 !important;
    color: white !important;
    width: 50px !important;      /* Lo hacemos un cachetito más compacto (de 60px a 50px) para que sintonice arriba */
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 26px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    z-index: 9999 !important;    /* Capa alta para que no lo tape ningún contenido */
    text-decoration: none !important;
    transition: transform 0.3s !important;
}

/* Ajuste para el globo de texto blanco del botón */
.whatsapp-text {
    position: absolute !important;
    right: 65px !important;       /* Se acomoda al nuevo tamaño del botón */
    white-space: nowrap !important;
    background-color: #ffffff !important;
    color: #134074 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

/* Efecto opcional: Cuando pasen el cursor sobre el botón, el cartel se mueve sutilmente */
.whatsapp-btn:hover .whatsapp-text {
    transform: translateX(-5px);
    color: #0b2545;
}

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

/* FOOTER */
footer {
    background-color: #0b2545;
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
    font-size: 14px;
}

.footer-content p {
    margin: 5px 0;
    opacity: 0.8;
}

/* RESPONSIVE (MÓVILES) */
@media (max-width: 768px) {
    .navbar-wrapper { padding: 0 10px; }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .nav-links li { margin: 0 5px; }
    .nav-links a { font-size: 11px; }
    .hero-content h1 { font-size: 30px; }
    .hero-content p { font-size: 10px; }
}

/* AJUSTE PARA QUE EL MENÚ FLOTANTE NO TAPE LAS SECCIONES AL HACER CLIC */
#inicio,
#servicios,
#equipos,
#quienes\ somos {
    scroll-margin-top: 100px; /* Ajusta este número según la altura total de tu header */
}

/* OPTIMIZACIÓN DE CAMPOS DEL FORMULARIO */
.contact-form input, 
.contact-form textarea {
    background-color: #ffffff; /* Fondo blanco para los campos */
    color: #333333;            /* Texto gris oscuro al escribir */
    border: 1px solid #cccccc; /* Borde sutil */
    outline: none;             /* Quita el borde azul por defecto del navegador */
    transition: border-color 0.3s;
}

/* Efecto cuando el usuario hace clic para escribir en un campo */
.contact-form input:focus, 
.contact-form textarea:focus {
    border-color: #134074;     /* El borde cambia al azul de tu marca */
    box-shadow: 0 0 5px rgba(19, 64, 116, 0.2);
}
/* AJUSTE PARA QUE NINGUNA SECCIÓN NI EL FORMULARIO SE OCULTEN BAJO EL HEADER */

[id="inicio"], 
[id="contacto"],
#inicio,
#contacto,
#servicios,
#equipos {
    scroll-margin-top: 140px !important; /* 👈 Espacio perfecto para este diseño de dos pisos */
}
/* Espaciado extra para que el título de contacto respire */
#contacto {
    padding-top: 40px;
}


/* 1. Fondo de la sección drivers y espaciado para que no "suba" tanto */
.drivers-section {
    background-image: url('fondo-drivers.png');
    font-palette: 2px 2px 4px rgb(34, 34, 34);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}    
/* Cambiar a blanco el título y párrafos de la sección Drivers */
.drivers-section h2, 
.drivers-section p {
    color: #535252;
}
/* Deja un margen de cortesía arriba al scrollear mediante un enlace/botón */
#drivers {
    scroll-margin-top: 160px; /* Ajusta los píxeles (px) según el tamaño de tu menú o el aire que quieras dejar */
}

/* 2. Contenedor de los logos para alinearlos en fila */
.drivers-logos {
    display: flex;
    justify-content: center;
    gap: 40px; /* Espacio entre cada marca */
    flex-wrap: wrap;
    margin-top: 30px;
}

/* 3. Estructura de cada marca */
.driver-brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 4. TAMAÑO IDÉNTICO PARA TODAS LAS IMÁGENES */
.driver-brand-item img {
    width: 150px;       /* Forzamos el mismo ancho para todas */
    height: 50px;       /* Forzamos el mismo alto para todas */
    object-fit: contain;/* Evita que las imágenes se deformen o estiren */
    background: #ffffff;/* Opcional: fondo blanco por si el fondo de la sección es oscuro */
    padding: 5px;
    border-radius: 4px;
}

/* 5. Estilo de los textos debajo de los logos */
.section-subtitle-drivers {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 500;
}
/* ==========================================================================
   RECUPERACIÓN Y AJUSTE DE IMAGEN DE FONDO EN SECCIÓN DRIVERS
   ========================================================================== */
#drivers {
    background-image: url('fondo-drivers.png') !important; /* 🖼️ Trae de vuelta tu fondo */
    background-size: cover !important;                    /* Asegura que cubra toda el área */
    background-position: center !important;                /* Centra la imagen de fondo */
    background-repeat: no-repeat !important;
    position: relative !important;
    padding: 60px 0 !important;                            /* Le da un lindo espacio arriba y abajo */
}

/* Opcional: Agrega una capa suave por encima del fondo para que las filas contrasten mejor */
#drivers::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.05) !important;            /* Capa sutil para amalgamar el diseño */
    z-index: 1 !important;
}

/* Forzamos a que el contenido se monte arriba de la capa de fondo */
#drivers h2, 
.drivers-list-container {
    position: relative !important;
    z-index: 2 !important;
}
/* ==========================================================================
   NUEVO DISEÑO VERTICAL PARA LA SECCIÓN DRIVERS
   ========================================================================== */

/* Contenedor principal de la lista */
.drivers-list-container {
    display: flex !important;
    flex-direction: column !important; /* Fuerza el orden uno debajo del otro */
    gap: 20px !important;              /* Separación entre cada fila de marca */
    max-width: 800px !important;       /* Limita el ancho para que no se desarme en pantallas grandes */
    margin: 0 auto !important;         /* Centra todo el bloque en la página */
    padding: 20px !important;
}

/* Cada fila individual (Logo + Link) */
.driver-row {
    display: flex !important;
    flex-direction: row !important;    /* Pone el logo al lado del link */
    align-items: center !important;    /* Centra verticalmente el logo con el texto */
    background-color: #faf8f8 !important; /* Fondo blanco para destacar la fila */
    padding: 15px 25px !important;     /* Relleno interno de la fila */
    border-radius: 8px !important;     /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Suave sombra */
}

/* Caja fija para el logo (evita que se deforme) */
.driver-logo-box {
    flex: 0 0 150px !important;        /* Ancho fijo asignado para la zona del logo */
    display: flex !important;
    justify-content: flex-start !important;
}

.driver-logo-box img {
    max-height: 35px !important;       /* Tamaño controlado de los logos */
    max-width: 130px !important;
    object-fit: contain !important;
}

/* Caja para el Link */
.driver-link-box {
    flex: 1 !important;                /* Ocupa todo el resto del espacio disponible hacia la derecha */
    padding-left: 20px !important;     /* Separación respecto del logo */
    text-align: left !important;
}

.driver-link-box .driver-link {
    color: #0056b3 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    word-break: break-all !important;  /* Evita que URLs muy largas rompan la pantalla en celulares */
    transition: color 0.2s ease !important;
}

/* Efecto hover en el link */
.driver-link-box .driver-link:hover {
    color: #fa0909 !important;
    text-decoration: underline !important;
}

/* 📱 ADAPTACIÓN PARA CELULARES (Si la pantalla es muy chica, se apilan) */
@media (max-width: 580px) {
    .driver-row {
        flex-direction: column !important; /* En celular se pone el logo arriba y el link abajo */
        text-align: center !important;
        gap: 10px !important;
    }
    .driver-logo-box {
        justify-content: center !important;
        flex: auto !important;
    }
    .driver-link-box {
        padding-left: 0 !important;
        text-align: center !important;
    }
}
/* También aseguramos que el título principal de la sección sea blanco */
#drivers .section-title {
    color: #ffffff !important;
}



/* DISEÑO PARA LA FOTO EN QUIENES SOMOS */
/* SECCIÓN QUIENES SOMOS CON FOTO DE FONDO ATENUADA */
.about-bg-section {

    /* El linear-gradient aplica una capa oscura semitransparente (opacidad 0.85) sobre la foto */
    background: linear-gradient(rgba(11, 37, 69, 0.582), rgba(19, 64, 116, 0.582)), url('quienes-somos.jpg') no-repeat center center/cover;
    padding: 200px 20px;
    text-align: center;
    color: #ffffff; /* Pintamos los textos de blanco para que resalten sobre el fondo oscuro */
}

.about-overlay-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-overlay-content h2 {
    font-size: 36px;
    color: #ffffff; /* Título en blanco impecable */
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* Estilo exclusivo para este párrafo de descripción */
.section-subtitle-about {
    color: #eef4f8; /* Un tono gris claro/azul sutil muy elegante y fácil de leer */
    font-size: 18px; /* Tamaño destacado */
    line-height: 1.8;
    font-weight: 400;
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.about-text h2 {
    font-size: 32px;
    color: #0b2545;
    margin-bottom: 25px;
}

.about-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.about-image img {
    width: 100%;
    max-width: 450px; /* Tamaño máximo de la foto */
    height: auto;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
}

/* Ajuste rápido para móviles */
@media (max-width: 768px) {
    .about-wrapper {
        text-align: center; /* En celulares vuelve a centrarse */
    }
}

/* ALINEACIÓN DE LOS BOTONES AL PIE DE LAS TARJETAS */
.product-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Hace que el contenedor interno ocupe todo el alto disponible */
}

.brand-features-list {
    flex-grow: 1; /* ¡La magia ocurre acá! Se estira y empuja el botón "Explorar" siempre al piso */
}
/* 🚨 SOLUCIÓN DEFINITIVA PARA INICIO Y CONTACTO 🚨 */

/* 1. Forzamos el comportamiento en el HTML de forma global */
html {
    scroll-behavior: smooth !important;
}

/* 2. Le aplicamos el freno directo, sin importar si son divs, sections o contenedores */
[id="inicio"], 
[id="contacto"],
#inicio,
#contacto {
    scroll-margin-top: 120px !important; /* Subimos a 180px para asegurar que pasen la altura del logo grande */
    display: block; /* Asegura que el navegador tome el margen superior correctamente */
}

/* 3. Por las dudas, le damos el mismo freno a Servicios y Equipos para que queden todos alineados */
#equipos-2d{
    scroll-margin-top: 105px !important;
}
#servicios,
#equipos-3d{
    scroll-margin-top: 110px !important;
}

/* ==========================================================================
   TEXTO INVITACIÓN AL LADO DE WHATSAPP
   ========================================================================== */

/* Aseguramos que el botón de WhatsApp sea un contenedor relativo para posicionar el texto */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Ocultar el texto en pantallas muy chicas (celulares) para que no tape contenido */
@media (max-width: 480px) {
    .whatsapp-text {
        display: none;
    }
}
/* ==========================================================================
   CARRUSEL DE IMÁGENES EN MOVIMIENTO (HERO SLIDER) - MÁS GRANDES E IMPACTANTES
   ========================================================================== */

/* Optimizamos el alto del Hero para que el contenido respire bien con las fotos gigantes */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 90vh;          /* 📐 Subimos a 90vh para dar una excelente holgura visual */
    color: #ffffff;
    padding: 60px 0 25px 0;    
}

/* El contenedor que fuerza el 100% real del ancho de la pantalla */
.hero-slider-container {
    width: 100vw;               
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;        
    margin-top: -5px;
    overflow: hidden;           
    padding: 20px 0;           /* Un poco más de aire arriba y abajo de la cinta */
}

/* 📐 NUEVO CÁLCULO DE LA PISTA: 340px de ancho por celda x 20 imágenes en total */
.hero-slider-track {
    display: flex;
    width: calc(340px * 20);    
    animation: scrollInfinito 30s linear infinite; /* Subimos a 30s para que mantenga un ritmo suave y elegante */
}

.hero-slider-container:hover .hero-slider-track {
    animation-play-state: paused;
}

/* 📏 CELDAS INDIVIDUALES EXTRA GRANDES */
.slide {
    width: 340px;               /* 🚀 Subió de 280px a 340px de ancho */
    height: 145px;              /* 🚀 Subió de 120px a 145px de alto */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;            /* Más separación lateral para que no se amontonen */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;        
    background-color: rgba(255, 255, 255, 0.98); 
    border-radius: 0px;        /* Bordes un poquito más curvos que acompañan el tamaño */
    padding: 12px;              /* Más margen blanco interno para que los logos luzcan perfectos */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Sombra con más carácter para dar volumen */
}

/* 🎥 REGLA DE ANIMACIÓN AJUSTADA: Reseteo exacto al pasar las primeras 10 imágenes */
@keyframes scrollInfinito {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(calc(-340px * 10)); /* 🚀 Se reinicia de forma invisible en el píxel exacto */
    }
}
/* ==========================================================================
   CARRUSEL CONTINUO SIN ESPACIOS (LOGOS PEGADOS)
   ========================================================================== */

/* 1. Quitamos el ancho fijo exagerado de las celdas y eliminamos su aire lateral */
.slide {
    width: 200px !important;    /* 📐 Reducimos el ancho de la celda al tamaño justo del logo */
    height: 120px !important;   /* Ajustamos la altura para que quede más compacto y elegante */
    padding: 0 0px !important;  /* Casi cero separación lateral (solo 5px por seguridad para que no se encimen) */
}

/* 2. Hacemos que la imagen ocupe todo el espacio de la celda sin dejar franjas blancas */
.slide img {
    padding: 6px !important;    /* Reducimos el colchón blanco interno de la tarjeta */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; /* Una sombra más sutil acorde al nuevo tamaño */
}

/* 3. Reajustamos la animación matemática de la pista para el nuevo ancho de 200px */
.hero-slider-track {
    width: calc(200px * 20) !important; /* Nuevo ancho total de la pista (200px por 20 imágenes) */
    animation: scrollInfinitoEfectivo 20s linear infinite !important; /* Un ritmo un poco más dinámico */
}

/* 4. Nueva regla de reinicio invisible para que el bucle sea perfecto con 200px */
@keyframes scrollInfinitoEfectivo {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(calc(-200px * 10)); /* Se resetea exactamente al pasar las primeras 10 imágenes */
    }
}
/* ==========================================================================
   CORRECCIÓN DEFINITIVA: SÍMBOLO + LOGO + MARCAS EN LA MISMA LÍNEA
   ========================================================================== */

/* 1. Forzamos la fila única en horizontal absoluta y alineación al centro */
.logo-area {
    display: flex !important;
    flex-direction: row !important;      /* 🚀 Obliga a ir uno al lado del otro */
    align-items: center !important;     /* 🚀 Centra perfectamente las alturas de todos */
    justify-content: center !important;
    gap: 40px !important;                /* Separación elegante entre los 4 bloques */
    width: 100% !important;
    padding: 5px 0 10px 0 !important;
}

/* 2. Forzamos a los contenedores a alinearse en el mismo eje */
.logo-simbolo, .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. Forzamos a la imagen del símbolo a tener la misma altura que tu logo principal */
.simbolo-img {
    max-height: 110px !important;        /* 📐 Altura idéntica para simetría perfecta */
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* 4. El botón circular de Instagram */
.instagram-header-btn {
    color: #ffffff !important;
    font-size: 24px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease !important;
}

.instagram-header-btn:hover {
    transform: scale(1.12) !important;
}
/* ==========================================================================
   GLOBO DE TEXTO "¡SEGUINOS!" DEBAJO DEL LOGO DE INSTAGRAM
   ========================================================================== */

/* 1. Contenedor del link: Lo preparamos para posicionar el globo abajo */
.social-header-area a,
.instagram-header-btn {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: column !important; /* Fuerza el orden vertical */
    align-items: center !important;
    text-decoration: none !important;
}

/* 2. El Globo de Texto (Posicionado Abajo) */
.social-header-area .insta-balloon {
    position: absolute !important;
    top: 100% !important;               /* Lo ubica justo abajo del límite del logo */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Lo centra perfectamente respecto al logo */
    margin-top: 8px !important;         /* Separación para que no pise el ícono */
    background-color: #fa0505 !important; /* Color rojo */
    color: #ffffff !important;          /* Texto blanco */
    padding: 4px 8px !important;        /* Más compacto para que no sature la cabecera */
    font-size: 11px !important;         /* Letra un poquito más chica y delicada */
    font-weight: bold !important;
    border-radius: 4px !important;      /* Bordes redondeados sutiles */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
    white-space: nowrap !important;     /* Evita que se parta el texto */
    z-index: 9999 !important;           /* Asegura que flote por encima de todo */
}

/* 3. La Flechita del Globo (Ahora apunta hacia ARRIBA) */
.social-header-area .insta-balloon::before {
    content: "" !important;
    position: absolute !important;
    top: -5px !important;               /* La sube al borde superior del globo */
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-width: 0 5px 5px 5px !important;
    border-style: solid !important;
    border-color: transparent transparent #fa0505 transparent !important; /* Flecha apuntando arriba */
}

/* 4. Efecto de Animación Sutil (Flota de arriba a abajo) */
@keyframes floatBalloonVertical {
    0% { transform: translate(-50%, 0px); }
    50% { transform: translate(-50%, 2px); }
    100% { transform: translate(-50%, 0px); }
}

.social-header-area a:hover .insta-balloon {
    animation: floatBalloonVertical 1.5s ease-in-out infinite;
    background-color: #d00404 !important;
}

.social-header-area a:hover .insta-balloon::before {
    border-color: transparent transparent #d00404 transparent !important;
}
@media (max-width: 480px) {
    .instagram-link .insta-balloon { display: none !important; }
}
/* ==========================================================================
   SEPARACIÓN EXTREMA DEL PRIMER PISO (SÍMBOLO - LOGO CENTRAL - INSTAGRAM)
   ========================================================================== */
.logo-area {
    justify-content: space-between !important; /* 🚀 Envía los costados a las esquinas y el logo al centro */
    padding: 10px 4% 5px 4% !important;        /* Le damos un 4% de aire a los lados para que no toquen el borde real de la pantalla */
    gap: 0 !important;                          /* Quitamos el gap viejo porque ahora se calcula de forma automática */
}
/* ==========================================================================
   EFECTO DE MOVIMIENTO (ESCALA) EN BOTONES DEL HERO
   ========================================================================== */

/* 1. Le agregamos la propiedad de transición a los botones en su estado normal */
.btn-main, .btn-sec, .btn-ter {
    transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    display: inline-block !important; /* Asegura que el navegador permita aplicar movimientos físicos */
}

/* 2. Definimos el movimiento de agrandado cuando pasás el mouse por encima (:hover) */
.btn-main:hover, .btn-sec:hover, .btn-ter:hover{
    transform: scale(1.1) !important; /* 🚀 Se agranda un 10%, igual que el efecto de las marcas */
}
/* ==========================================================================
   AGRANDAR ESPECÍFICAMENTE EL LOGO DE PANTUM EN EL HEADER
   ========================================================================== */
.brand-logos-row a img[alt="Pantum"] {
    max-height: 55px !important;  /* 🚀 Subimos la altura (ajustá este número si lo querés aún más grande) */
    transform: scale(1.1) !important; /* Le damos un ligero extra de escala por defecto */
    transition: transform 0.3s ease !important;
}

/* Efecto hover mejorado para cuando pasen el mouse por encima */
.brand-logos-row a img[alt="Pantum"]:hover {
    transform: scale(1.25) !important; /* Se agranda un poco más al pasar el cursor */
}
/* ==========================================================================
   AJUSTE DE ULTRA-PROPORCIÓN PARA LAS 7 MARCAS EN UNA SOLA LÍNEA
   ========================================================================== */

/* 1. Reducimos sutilmente el Símbolo y el Logo Principal para dar espacio extra */
.simbolo-img {
    max-height: 52px !important;    /* 📐 Bajó de 60px a 52px */
}

.main-logo-img {
    max-height: 52px !important;    /* 📐 Bajó de 60px a 52px para nivelar con el símbolo */
    padding: 4px 10px !important;   /* Compactamos el recuadro azul */
}

/* 2. Compactamos la fila de las 7 marcas para que entren en el "ancho" disponible */
.brand-logos-row {
    gap: 0px !important;            /* Separación milimétrica entre logos para que no se estiren */
}

/* 3. Reducimos el tamaño de cada logo individual (Ahora son 7) */
.brand-logos-row img {
    height: 26px !important;        /* 📐 Bajó de 32px a 26px: la altura justa para que sean legibles y entren los 7 */
    border-width: 2px !important;
    padding: 4px !important;    /* Margen interno mínimo para aprovechar el espacio */
}

/* 4. Minimizamos las distancias de los 4 grandes bloques de la cabecera */
.logo-area {
    gap: 12px !important;           /* 📐 Reduce el espacio entre Símbolo, Logo, Marcas e Instagram */
    padding: 6px 3% !important;     /* Ajustamos el aire en los bordes de la pantalla al 3% */
}
/* ==========================================================================
   CONTROL DE LOGO ACTIVO SEGÚN LA PÁGINA (MARCA DESTACADA)
   ========================================================================== */
/* ==========================================================================
   REPARACIÓN DE LOGO ACTIVO (FUERZA EL TAMAÑO RESALTADO)
   ========================================================================== */

/* 1. Logo Activo General: Forzamos a que rompa cualquier max-height previo */
.brand-logos-row img.logo-activo,
.brand-logos-row a img.logo-activo {
    height: 34px !important;
    max-height: 34px !important;  /* 🚀 Rompe el bloqueo de 24px en la página activa */
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

/* 2. Caso Especial Pantum Activo: Aseguramos su proporción correcta cuando está activo */
.brand-logos-row img[alt="Pantum"].logo-activo,
.brand-logos-row a img[alt="Pantum"].logo-activo {
    height: 34px !important;
    max-height: 34px !important;  /* 🚀 Mantiene el protagonismo en pantum.html */
}


/* 3. Mantenemos el efecto hover interactivo para el resto */
.brand-logos-row a:hover img {
    transform: scale(1.15) !important;
}

/* ==========================================================================
   AJUSTE DE ALTURA ESPECÍFICO PARA EL LOGO PANTUM EN PORTADA
   ========================================================================== */

/* 1. Buscamos el logo de Pantum específicamente en cualquier página */
.brand-logos-row img[alt="Pantum"] {
    height: 22px !important; /* 📐 Bajamos su altura base en la fila general para nivelarlo visualmente con Canon, Toshiba, etc. */
}

/* 2. Re-forzamos que si tiene la clase "logo-activo" (en pantum.html), recupere su tamaño grande */
.brand-logos-row img[alt="Pantum"].logo-activo {
    height: 34px !important; /* 🚀 Mantiene el protagonismo exclusivo en su index correspondiente */
}
/* ==========================================================================
   CORRECCIÓN DE ALINEACIÓN Y SUPERPOSICIÓN DE MARCAS
   ========================================================================== */

/* 1. Forzamos la alineación vertical exacta al centro y un mínimo espacio de seguridad */
.brand-logos-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;     /* 🚀 Centra todos los logos perfectamente en el eje vertical */
    justify-content: center !important;
    gap: 7px !important;                /* ⚡ Separación milimétrica para que NINGÚN logo se superponga con otro */
}

/* 2. Ajuste fino de posición para el logo de Pantum */
.brand-logos-row img[alt="Pantum"] {
    position: relative !important;
    top: 0px !important;               /* 📐 Levanta el logo de Pantum 2 píxeles hacia arriba para corregir su caída */
}

.brand-logos-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important; /* 📐 Espacio exacto, uniforme e idéntico para separar CADA par de logos */
}
/* ==========================================================================
   COLOR AZUL PARA EL ENLACE SELECCIONADO
   ========================================================================== */
.nav-links a.active {
    color: #0056b3 !important;      /* 🚀 Tu azul corporativo */
    font-weight: bold !important;    
}
/* ==========================================================================
   CORRECCIÓN DE DESPLAZAMIENTO Y CORTE DE INSTAGRAM EN PANTUM
   ========================================================================== */

/* Ajustamos el contenedor de la cabecera para reacomodar el contenido */
.navbar-wrapper {
    width: 100% !important;
    max-width: 1200px !important;  /* Limita el ancho máximo para que no se desborde en pantallas grandes */
    margin: 0 !important;     /* Centra la caja contenedora */
    padding-right: 10px !important; /* 📐 Empuja el botón de Instagram unos 2 cm hacia adentro para que no se corte */
    box-sizing: border-box !important;
}

/* Forzamos a que el área de logos se mantenga firme dentro de los límites visuales */
.logo-area {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 20px !important; /* Refuerzo de seguridad en el extremo derecho */
    box-sizing: border-box !important;
}
/* ==========================================================================
   ALINEACIÓN DE LAS 4 TARJETAS DE EQUIPOS EN UNA SOLA FILA HORIZONTAL
   ========================================================================== */

/* 1. Forzamos al contenedor de Equipos a tener exactamente 4 columnas iguales */
#equipos .grid-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    gap: 15px !important;                             /* Espacio de separación óptimo entre tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 0 auto !important;                        /* Centra el bloque entero en la pantalla */
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 2. Ajustamos las tarjetas individuales para que se adapten al nuevo ancho más compacto */
#equipos .product-card {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;       /* Hace que los botones de "Explorar" queden todos nivelados abajo */
    padding: 15px !important;                         /* Colchón interno un poquito más compacto */
}

/* 3. Ajustamos el tamaño de los logos internos de las tarjetas para que no queden gigantes */
#equipos .brand-card-header img {
    max-height: 38px !important;                      /* 📐 Reduce de 45px a 38px para que sigan siendo legibles pero estéticos */
    width: auto !important;
}

/* 4. Achicamos milimétricamente el texto de la lista para que entre bien en tarjetas más angostas */
#equipos .brand-features-list li {
    font-size: 13px !important; 
    /* 🎨 Si querés cambiar el color acá, agregá la propiedad color */
    color: #fc0404 !important; /* Ejemplo: Azul corporativo */                      /* 📐 De 14px a 13px para evitar que los textos largos hagan saltos de línea raros */
}
/* ==========================================================================
   ALINEACIÓN DE LAS 4 TARJETAS DE EQUIPOS EN UNA SOLA FILA HORIZONTAL
   ========================================================================== */

/* 1. Forzamos al contenedor de Equipos a tener exactamente 4 columnas iguales */
#equipos-2d.grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 🚀 Crea 3 columnas perfectas de igual ancho */
    gap: 15px !important;                             /* Espacio de separación óptimo entre tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 0 auto !important;                        /* Centra el bloque entero en la pantalla */
    padding: 20px !important;
    box-sizing: border-box !important;
}
/* 1. Forzamos al contenedor de Equipos a tener exactamente 4 columnas iguales */
#equipos-3d .grid-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    gap: 15px !important;                             /* Espacio de separación óptimo entre tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 0 auto !important;                        /* Centra el bloque entero en la pantalla */
    padding: 20px !important;
    box-sizing: border-box !important;
}


/* 2. Ajustamos las tarjetas individuales para que se adapten al nuevo ancho más compacto */
#equipos .product-card {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;       /* Hace que los botones de "Explorar" queden todos nivelados abajo */
    padding: 15px !important;                         /* Colchón interno un poquito más compacto */
}

/* 3. Ajustamos el tamaño de los logos internos de las tarjetas para que no queden gigantes */
#equipos .brand-card-header img {
    max-height: 38px !important;                      /* 📐 Reduce de 45px a 38px para que sigan siendo legibles pero estéticos */
    width: auto !important;
}

/* 4. Achicamos milimétricamente el texto de la lista para que entre bien en tarjetas más angostas */
#equipos .brand-features-list li {
    font-size: 13px !important;  
    /* 🎨 Si querés cambiar el color acá, agregá la propiedad color */
    color: #fc0404 !important; /* Ejemplo: Azul corporativo */                      /* 📐 De 14px a 13px para evitar que los textos largos hagan saltos de línea raros */
}                    /* 📐 De 14px a 13px para evitar que los textos largos hagan saltos de línea raros */
/* ==========================================================================
   RE-DIRECCIONAMIENTO ESTRICTO Y COMPACTACIÓN DE LOGOS DE TARJETAS
   ========================================================================== */

/* 1. Obligamos al contenedor del encabezado de la tarjeta a usar flex y centrar de forma estricta */
#equipos .product-card .brand-card-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;        /* Rompe la rigidez interna de las cajas en Grid layouts */
    padding: 10px 0 !important;      /* Espaciado vertical mínimo */
    margin: 0 auto !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* 2. Forzamos un límite matemático del 85% del ancho de la tarjeta para las imágenes */
#equipos .product-card .brand-card-header img {
    display: block !important;
    width: 85% !important;          /* 🚀 Clave: la imagen ocupará como máximo el 85% del ancho de la tarjeta */
    max-width: 150px !important;    /* Evita que en pantallas grandes se deforme hacia arriba */
    height: 30px !important;        /* 📐 Altura fija y uniforme para todos los logos de tarjetas */
    object-fit: contain !important; /* Mantiene la proporción perfecta sin estirar ni deformar */
    margin: 0 auto !important;
}

/* ==========================================================================
   FONDO IMAGEN PARA LA SECCIÓN DE EQUIPOS 2D
   ========================================================================== */
#equipos-2d {
    /* El linear-gradient le pone una capa oscura semitransparente arriba de la foto */
    background: linear-gradient(rgba(221, 248, 99, 0.651), rgba(221, 248, 99, 0.651)), 
                url('fondo-2d.png') no-repeat center center/cover !important;
    
    /* Le damos un poco de aire arriba y abajo para que luzca la imagen */
    padding-top: 60px !important;
    padding-bottom: 80px !important;
}

/* Forzamos a que el título de esta sección se pinte de blanco para que resalte */
#equipos-2d .section-title {
    color: #fa0505!important;
}

#equipos-2d .section-subtitle {
    color: #ffffff !important;
}


/* ==========================================================================
   FONDO IMAGEN PARA LA SECCIÓN DE EQUIPOS 3D
   ========================================================================== */
#equipos-3d {
    /* El linear-gradient le pone una capa oscura semitransparente arriba de la foto */
    background: linear-gradient(rgb(246, 248, 113, 0.651), rgba(246, 248, 113, 0.651)), 
                url('fondo-3d.png') no-repeat center center/cover !important;
    
    /* Le damos un poco de aire arriba y abajo para que luzca la imagen */
    padding-top: 60px !important;
    padding-bottom: 80px !important;
}

/* Forzamos a que el título de esta sección se pinte de blanco para que resalte */
#equipos-3d .section-title {
    color: #fa0505 !important;
}

#equipos-3d .section-subtitle {
    color: #fa0505 !important;
}

/* ==========================================================================
   ALINEACIÓN HORIZONTAL DE 3 TARJETAS (EQUIPOS 2D - INDEX NORCANTEC)
   ========================================================================== */

/* 1. Forzamos a la grilla de equipos 3D a tener 5 columnas perfectas */
#equipos-2d .grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 📐 Divide el espacio exactamente en 5 columnas */
    gap: 12px !important;                             /* Achicamos levemente el espacio entre tarjetas */
    justify-content: center !important;
    max-width: 1200px !important;                     /* Ancho máximo de la sección para que no se deforme */
    margin: 0 auto !important;
}

/* 3. Ajuste fino de la imagen interna para que NUNCA se recorte a lo ancho */
#equipos-2d .product-card img {
    width: 100% !important;           /* 📐 Fuerza a la imagen a ocupar el ancho de la tarjeta */
    max-width: 160px !important;      /* Evita que logos muy chicos se estiren de más */
    height: auto !important;          /* 🌟 ¡La clave! Deja que la altura se calcule sola en base al ancho */
    max-height: 110px !important;     /* Le pone un límite de altura para que queden alineados */
    object-fit: contain !important;   /* Asegura que el logo entero se enmarque sin recortes */
    display: block !important;
    margin: 0 auto !important;        /* Centra el logo dentro de la tarjeta */
}
/* ==========================================================================
   ALINEACIÓN HORIZONTAL DE 5 TARJETAS (EQUIPOS 3D - INDEX NORCANTEC)
   ========================================================================== */

/* 1. Forzamos a la grilla de equipos 3D a tener 5 columnas perfectas */
#equipos-3d .grid-container {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* 📐 Divide el espacio exactamente en 5 columnas */
    gap: 12px !important;                             /* Achicamos levemente el espacio entre tarjetas */
    justify-content: center !important;
    max-width: 1200px !important;                     /* Ancho máximo de la sección para que no se deforme */
    margin: 0 auto !important;
}

/* 2. Ajustamos el tamaño máximo individual de las tarjetas para que entren las 5 */
#equipos-3d .product-card {
    max-width: 210px !important;                      /* 📐 Reducimos el ancho máximo de la tarjeta */
    width: 100% !important;
    margin: 0 auto !important;
}

/* 3. Ajuste fino del relleno y la imagen interna para mantener la proporción */
#equipos-3d .product-card img {
    height: 140px !important;                         /* 📐 Achicamos un poco la altura de la imagen */
    object-fit: contain !important;
}

#equipos-3d .product-info {
    padding: 10px !important;                         /* Compactamos el espacio del texto */
}

/* 4. Mantenemos el comportamiento elástico (responsive) para notebooks o tablets */
@media (max-width: 1024px) {
    #equipos-3d .grid-container {
        grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
        overflow-x: auto !important;                  /* Si la pantalla es muy chica, permite un deslizamiento horizontal prolijo */
        padding-bottom: 10px !important;
    }
}
/* 3. Ajuste fino de la imagen interna para que NUNCA se recorte a lo ancho */
#equipos-3d .product-card img {
    width: 100% !important;           /* 📐 Fuerza a la imagen a ocupar el ancho de la tarjeta */
    max-width: 160px !important;      /* Evita que logos muy chicos se estiren de más */
    height: auto !important;          /* 🌟 ¡La clave! Deja que la altura se calcule sola en base al ancho */
    max-height: 110px !important;     /* Le pone un límite de altura para que queden alineados */
    object-fit: contain !important;   /* Asegura que el logo entero se enmarque sin recortes */
    display: block !important;
    margin: 0 auto !important;        /* Centra el logo dentro de la tarjeta */
}
/* ==========================================================================
   OPTIMIZACIÓN EXCLUSIVA PARA DISPOSITIVOS MÓVILES (RESPONSIVE DESIGN)
   ========================================================================== */

/* Este bloque solo se activará en pantallas menores a 768px (Celulares y Tablets) */
@media (max-width: 768px) {
    /* AJUSTE FLUIDO PARA LOS LOGOS DENTRO DE LAS TARJETAS EN MÓVILES */
    #equipos-3d .product-card .brand-card-header img,
    #equipos-2d .product-card .brand-card-header img,
    #equipos .product-card .brand-card-header img {
        width: 100% !important;        /* Ocupa el ancho disponible de forma fluida */
        max-width: 130px !important;    /* Evita que se agrande de más en teléfonos anchos */
        height: auto !important;        /* 🚀 CRUCIAL: Rompe la altura fija de 30px para que no se deforme ni se corte */
        object-fit: contain !important; /* Mantiene la proporción original del logo */
    }
    
    /* 1. Ajustamos las rejillas para que todo se apile en una sola columna */
    #equipos .grid-container,
    #equipos-2d .grid-container,
    #equipos-3d .grid-container,
    .grid-container {
        grid-template-columns: 1fr !important; /* Una tarjeta debajo de la otra */
        gap: 20px !important;
        padding: 10px !important;
    }

    /* 2. El menú superior se adapta para no desbordar */
    .brand-logos-row {
        flex-wrap: wrap !important; /* Si los logos no entran, bajan a la siguiente línea */
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .brand-logos-row a img {
        height: 24px !important; /* Hacemos los logos del header un poco más chicos en el celular */
    }

    .nav-links {
        flex-direction: column !important; /* Los botones de Inicio, Contacto, etc., se apilan verticalmente */
        gap: 10px !important;
        text-align: center;
        padding: 10px 0 !important;
    }

    /* 3. Ajustamos el formulario y el panel de contacto */
    .contact-wrapper {
        grid-template-columns: 1fr !important; /* El mapa/info se va abajo del formulario */
    }

    /* 4. Separación del botón de WhatsApp para que no tape contenido crucial */
    .whatsapp-btn {
        top: auto !important;
        bottom: 20px !important; /* En móviles es más cómodo tenerlo abajo a la derecha para el pulgar */
        right: 20px !important;
        width: 55px !important;
        height: 55px !important;
    }
    
    /* Ocultamos el globo de texto en móviles para que no tape media pantalla */
    .whatsapp-text {
        display: none !important;
    }

    /* 5. Reducimos el tamaño de los títulos principales para que no queden gigantes */
    h1 {
        font-size: 28px !important;
    }
    .section-title {
        font-size: 24px !important;
    }
}
/* ==========================================================================
   EFECTO HOVER PARA LOS LOGOS DE LAS MARCAS EN EL HEADER (TODOS LOS INDEX)
   ========================================================================== */

/* 1. Preparamos los logos para que cualquier cambio de tamaño sea suave y fluido */
.brand-logos-row a img {
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

/* 2. Cuando el usuario pasa el mouse por encima (hover) de cualquier logo */
.brand-logos-row a:hover img {
    transform: scale(1.15) !important;   /* 🚀 Lo agranda un 15% para llamar la atención */
    filter: brightness(1.2) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) !important; /* Le da un toque más de brillo y una sombra sutil */
}

/* 3. Mantenemos el comportamiento del logo que ya está activo para que no se rompa */
.brand-logos-row a:hover img.logo-activo {
    transform: scale(1.25) !important;   /* Si ya estaba activo (grande), se agranda un cachito más (25%) */
}
/* ==========================================================================
   POSICIONAMIENTO DE DATA FISCAL EN EL FOOTER
   ========================================================================== */

/* 1. Convertimos el contenido del footer en un contenedor flexible */
footer .footer-content {
    display: flex !important;
    justify-content: space-between !important; /* Separa el texto a la izquierda y la imagen a la derecha */
    align-items: center !important;     /* Los centra verticalmente para que queden parejos */
    max-width: 1200px !important;       /* Lo alineamos con el ancho del resto de la web */
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* 2. Controlamos el tamaño y estilo del logo de Data Fiscal */
.data-fiscal-container .data-fiscal-img {
    display: block !important;
    height: 90px !important;            /* 📐 Altura estándar y discreta para que no sature */
    width: auto !important;             /* Mantiene la proporción horizontal */
    transition: transform 0.3s ease !important;
}

/* Un pequeño efecto hover por si el usuario pasa el mouse */
.data-fiscal-container a:hover .data-fiscal-img {
    transform: scale(1.05) !important;
}

/* 3. OPTIMIZACIÓN EN MÓVILES: En pantallas chicas, se apila todo en el centro */
@media (max-width: 768px) {
    footer .footer-content {
        flex-direction: column !important; /* El texto arriba y la imagen abajo */
        gap: 15px !important;
        text-align: center !important;
        }
}
/* ==========================================================================
   CORRECCIÓN FINAL: FONDO DE LA SECCIÓN DE SERVICIOS
   ========================================================================== */
#servicios {
    background: linear-gradient(rgba(38, 133, 250, 0.658), rgba(38, 133, 250, 0.658)), 
                url('nuestros-servicios.png') no-repeat center center/cover !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 80px 0 !important;
}

/* Forzamos a que los títulos y textos de esta sección sean blancos para que se lean bien */
#servicios .section-title {
    color: #ffffff !important;
}

#servicios .section-subtitle {
    color: #eef4f8 !important;
}
/* ==========================================================================
   FORZAR HEADER A ANCHO COMPLETO (DE PUNTA A PUNTA)
   ========================================================================== */
.navbar {
    width: 100% !important;
    max-width: 100vw !important; /* Toma el ancho total de la ventana del navegador */
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

.navbar-wrapper {
    width: 100% !important;
    max-width: 1200px !important; /* Limita el contenido interno para que no se desarme */
    margin: 0 auto !important;     /* Centra de forma simétrica los logos y el menú */
    padding: 0 20px !important;
}

/* AJUSTES INDEX CANON*/
/* ==========================================================================
   SOLUCIÓN AL DESBORDE DE LOGOS EN PANTALLAS MEDIANAS 
   ========================================================================== */

/* 1. Permitimos que los logos reduzcan su tamaño para que entren siempre en una línea */
.brand-logos-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;       /* Achicamos levemente el espacio entre logos */
    flex-wrap: nowrap !important; /* Forzamos a que no se vayan abajo */
    max-width: 100% !important;  /* Le ponemos un límite estricto para que no pise a Instagram */
    overflow: visible !important;
}

/* 2. Reducimos el tamaño máximo de cada logo para que quepan los 8 juntos */
.brand-logos-row a img {
    max-height: 24px !important; /* 📐 Bajó un poquito la altura para ganar espacio horizontal */
    width: auto !important;
    object-fit: contain !important;
}

/* 3. Nos aseguramos de que el contenedor de Instagram no se mueva ni tape nada */
.social-header-area {
    min-width: 50px !important; /* Espacio garantizado en la esquina derecha */
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}
.section-canon .grid-container {
    padding-top: -20px;
}
.section-canon .product-card {
    margin-top: -105px;
}
/* Deja un espacio libre arriba al presionar los botones del menú o del inicio */
.section-canon {
    scroll-margin-top: 80px; /* Ajusta este número si necesitas que baje más o menos */
}

/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-canon .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(3, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-canon .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-canon .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
.carrusel-canon {
    margin-top: 50px; /* Empuja el carrusel hacia abajo aproximadamente 3 cm */
}

/* AJUSTES INDEX TOSHIBA*/
/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-toshiba .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(2, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-toshiba .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-toshiba .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
/* ==========================================================================
   SOLUCIÓN AL DESBORDE DE LOGOS EN PANTALLAS MEDIANAS 
   ========================================================================== */

/* 1. Permitimos que los logos reduzcan su tamaño para que entren siempre en una línea */
.brand-logos-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;       /* Achicamos levemente el espacio entre logos */
    flex-wrap: nowrap !important; /* Forzamos a que no se vayan abajo */
    max-width: 100% !important;  /* Le ponemos un límite estricto para que no pise a Instagram */
    overflow: visible !important;
}

/* 2. Reducimos el tamaño máximo de cada logo para que quepan los 8 juntos */
.brand-logos-row a img {
    max-height: 24px !important; /* 📐 Bajó un poquito la altura para ganar espacio horizontal */
    width: auto !important;
    object-fit: contain !important;
}

/* 3. Nos aseguramos de que el contenedor de Instagram no se mueva ni tape nada */
.social-header-area {
    min-width: 50px !important; /* Espacio garantizado en la esquina derecha */
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}
.section-toshiba .grid-container {
    padding-top: -20px;
}
.section-toshiba .product-card {
    margin-top: -105px;
}
/* Deja un espacio libre arriba al presionar los botones del menú o del inicio */
.section-toshiba {
    scroll-margin-top: 80px; /* Ajusta este número si necesitas que baje más o menos */
}

/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-toshiba .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(2, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-toshiba .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-toshiba .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
.carrusel-toshiba {
    margin-top: 50px; /* Empuja el carrusel hacia abajo aproximadamente 3 cm */
}

/* AJUSTES INDEX PANTUM*/
/* ==========================================================================
   SOLUCIÓN AL DESBORDE DE LOGOS EN PANTALLAS MEDIANAS 
   ========================================================================== */

/* 1. Permitimos que los logos reduzcan su tamaño para que entren siempre en una línea */
.brand-logos-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;       /* Achicamos levemente el espacio entre logos */
    flex-wrap: nowrap !important; /* Forzamos a que no se vayan abajo */
    max-width: 100% !important;  /* Le ponemos un límite estricto para que no pise a Instagram */
    overflow: visible !important;
}

/* 2. Reducimos el tamaño máximo de cada logo para que quepan los 8 juntos */
.brand-logos-row a img {
    max-height: 24px !important; /* 📐 Bajó un poquito la altura para ganar espacio horizontal */
    width: auto !important;
    object-fit: contain !important;
}

/* 3. Nos aseguramos de que el contenedor de Instagram no se mueva ni tape nada */
.social-header-area {
    min-width: 50px !important; /* Espacio garantizado en la esquina derecha */
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}
.section-pantum .grid-container {
    padding-top: -20px;
}
.section-pantum .product-card {
    margin-top: -105px;
}
/* Deja un espacio libre arriba al presionar los botones del menú o del inicio */
.section-pantum {
    scroll-margin-top: 80px; /* Ajusta este número si necesitas que baje más o menos */
}

/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-pantum .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(2, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-pantum .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-pantum .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
.carrusel-pantum {
    margin-top: 50px; /* Empuja el carrusel hacia abajo aproximadamente 3 cm */
}

/* AJUSTES INDEX BAMBULAB*/
/* ==========================================================================
   SOLUCIÓN AL DESBORDE DE LOGOS EN PANTALLAS MEDIANAS 
   ========================================================================== */

/* 1. Permitimos que los logos reduzcan su tamaño para que entren siempre en una línea */
.brand-logos-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;       /* Achicamos levemente el espacio entre logos */
    flex-wrap: nowrap !important; /* Forzamos a que no se vayan abajo */
    max-width: 100% !important;  /* Le ponemos un límite estricto para que no pise a Instagram */
    overflow: visible !important;
}

/* 2. Reducimos el tamaño máximo de cada logo para que quepan los 8 juntos */
.brand-logos-row a img {
    max-height: 24px !important; /* 📐 Bajó un poquito la altura para ganar espacio horizontal */
    width: auto !important;
    object-fit: contain !important;
}

/* 3. Nos aseguramos de que el contenedor de Instagram no se mueva ni tape nada */
.social-header-area {
    min-width: 50px !important; /* Espacio garantizado en la esquina derecha */
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}
.section-bambulab .grid-container {
    padding-top: -20px;
}
.section-bambulab .product-card {
    margin-top: -105px;
}
/* Deja un espacio libre arriba al presionar los botones del menú o del inicio */
.section-bambulab {
    scroll-margin-top: 80px; /* Ajusta este número si necesitas que baje más o menos */
}

/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-bambulab .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(2, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-bambulab .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-bambulab .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
.carrusel-bambulab {
    margin-top: 50px; /* Empuja el carrusel hacia abajo aproximadamente 3 cm */
}

/* AJUSTES INDEX PRUSA*/
/* ==========================================================================
   SOLUCIÓN AL DESBORDE DE LOGOS EN PANTALLAS MEDIANAS 
   ========================================================================== */

/* 1. Permitimos que los logos reduzcan su tamaño para que entren siempre en una línea */
.brand-logos-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;       /* Achicamos levemente el espacio entre logos */
    flex-wrap: nowrap !important; /* Forzamos a que no se vayan abajo */
    max-width: 100% !important;  /* Le ponemos un límite estricto para que no pise a Instagram */
    overflow: visible !important;
}

/* 2. Reducimos el tamaño máximo de cada logo para que quepan los 8 juntos */
.brand-logos-row a img {
    max-height: 24px !important; /* 📐 Bajó un poquito la altura para ganar espacio horizontal */
    width: auto !important;
    object-fit: contain !important;
}

/* 3. Nos aseguramos de que el contenedor de Instagram no se mueva ni tape nada */
.social-header-area {
    min-width: 50px !important; /* Espacio garantizado en la esquina derecha */
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}
.section-prusa .grid-container {
    padding-top: -20px;
}
.section-prusa .product-card {
    margin-top: -105px;
}
/* Deja un espacio libre arriba al presionar los botones del menú o del inicio */
.section-prusa {
    scroll-margin-top: 80px; /* Ajusta este número si necesitas que baje más o menos */
}

/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-prusa .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(2, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-prusa .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-prusa .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
.carrusel-prusa {
    margin-top: 50px; /* Empuja el carrusel hacia abajo aproximadamente 3 cm */
}

/* AJUSTES INDEX FLASHFORGE*/
/* ==========================================================================
   SOLUCIÓN AL DESBORDE DE LOGOS EN PANTALLAS MEDIANAS 
   ========================================================================== */

/* 1. Permitimos que los logos reduzcan su tamaño para que entren siempre en una línea */
.brand-logos-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;       /* Achicamos levemente el espacio entre logos */
    flex-wrap: nowrap !important; /* Forzamos a que no se vayan abajo */
    max-width: 100% !important;  /* Le ponemos un límite estricto para que no pise a Instagram */
    overflow: visible !important;
}

/* 2. Reducimos el tamaño máximo de cada logo para que quepan los 8 juntos */
.brand-logos-row a img {
    max-height: 24px !important; /* 📐 Bajó un poquito la altura para ganar espacio horizontal */
    width: auto !important;
    object-fit: contain !important;
}

/* 3. Nos aseguramos de que el contenedor de Instagram no se mueva ni tape nada */
.social-header-area {
    min-width: 50px !important; /* Espacio garantizado en la esquina derecha */
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}
.section-flashforge .grid-container {
    padding-top: -20px;
}
.section-flashforge .product-card {
    margin-top: -105px;
}
/* Deja un espacio libre arriba al presionar los botones del menú o del inicio */
.section-flashforge {
    scroll-margin-top: 80px; /* Ajusta este número si necesitas que baje más o menos */
}

/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-flashforge .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(2, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-flashforge .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-flashforge .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
.carrusel-flashforge {
    margin-top: 50px; /* Empuja el carrusel hacia abajo aproximadamente 3 cm */
}

/* AJUSTES INDEX ELEGOO*/
/* ==========================================================================
   SOLUCIÓN AL DESBORDE DE LOGOS EN PANTALLAS MEDIANAS 
   ========================================================================== */

/* 1. Permitimos que los logos reduzcan su tamaño para que entren siempre en una línea */
.brand-logos-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;       /* Achicamos levemente el espacio entre logos */
    flex-wrap: nowrap !important; /* Forzamos a que no se vayan abajo */
    max-width: 100% !important;  /* Le ponemos un límite estricto para que no pise a Instagram */
    overflow: visible !important;
}

/* 2. Reducimos el tamaño máximo de cada logo para que quepan los 8 juntos */
.brand-logos-row a img {
    max-height: 24px !important; /* 📐 Bajó un poquito la altura para ganar espacio horizontal */
    width: auto !important;
    object-fit: contain !important;
}

/* 3. Nos aseguramos de que el contenedor de Instagram no se mueva ni tape nada */
.social-header-area {
    min-width: 50px !important; /* Espacio garantizado en la esquina derecha */
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}
.section-elegoo .grid-container {
    padding-top: -20px;
}
.section-elegoo .product-card {
    margin-top: -105px;
}
/* Deja un espacio libre arriba al presionar los botones del menú o del inicio */
.section-elegoo {
    scroll-margin-top: 80px; /* Ajusta este número si necesitas que baje más o menos */
}

/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-elegoo .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(2, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-elegoo .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-elegoo .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
.carrusel-elegoo {
    margin-top: 50px; /* Empuja el carrusel hacia abajo aproximadamente 3 cm */
}

/* AJUSTES INDEX CREALITY*/
/* ==========================================================================
   SOLUCIÓN AL DESBORDE DE LOGOS EN PANTALLAS MEDIANAS 
   ========================================================================== */

/* 1. Permitimos que los logos reduzcan su tamaño para que entren siempre en una línea */
.brand-logos-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;       /* Achicamos levemente el espacio entre logos */
    flex-wrap: nowrap !important; /* Forzamos a que no se vayan abajo */
    max-width: 100% !important;  /* Le ponemos un límite estricto para que no pise a Instagram */
    overflow: visible !important;
}

/* 2. Reducimos el tamaño máximo de cada logo para que quepan los 8 juntos */
.brand-logos-row a img {
    max-height: 24px !important; /* 📐 Bajó un poquito la altura para ganar espacio horizontal */
    width: auto !important;
    object-fit: contain !important;
}

/* 3. Nos aseguramos de que el contenedor de Instagram no se mueva ni tape nada */
.social-header-area {
    min-width: 50px !important; /* Espacio garantizado en la esquina derecha */
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}
.section-creality .grid-container {
    padding-top: -20px;
}
.section-creality .product-card {
    margin-top: -105px;
}
/* Deja un espacio libre arriba al presionar los botones del menú o del inicio */
.section-creality {
    scroll-margin-top: 80px; /* Ajusta este número si necesitas que baje más o menos */
}

/* 1. Forzamos al contenedor de Equipos a tener exactamente X columnas iguales */
.section-creality .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 280px) !important; /* 🚀 Crea 4 columnas perfectas de igual ancho */
    grid-template-rows: repeat(2, auto) !important;   /* 🎯 Define explícitamente 2 líneas de tarjetas */
    row-gap: 120px !important;                             /* Espacio de separación óptimo entre filas sup e inf de tarjetas */
    width: 100% !important;
    max-width: 1200px !important;                     /* El ancho máximo de tu web */
    margin: 80px auto 0 auto !important;             /* Mantiene los 100px arriba que querías y centra el bloque */
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 🚀 LA CLAVE PARA CENTRAR LAS TARJETAS QUE QUEDEN SOLAS: */
    justify-content: center !important;                /* Centra horizontalmente las tarjetas sobrantes */
    justify-items: center !important;                  /* Asegura que el contenido interno se alinee al centro */

}
/* 1. Asegura un margen interno dentro de la zona de la imagen */
.section-creality .brand-features-list {
    display: flex !important;
    justify-content: auto !important;
    align-items: center !important;
    padding: 20px !important;       /* 🎯 ESTO CREA EL MARGEN ALREDEDOR DE LA FOTO */
    background-color: #ffffff !important; /* Fondo blanco para que resalte la foto */
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* 2. Controla que la imagen respete el espacio y no se desborde */
.section-creality .brand-features-list img {
    max-width: 100% !important;     /* Evita que se salga de los lados */
    max-height: 250px !important;    /* Ajusta este alto máximo para controlar el tamaño visual de las fotos */
    height: auto !important;         /* Mantiene la proporción original para que no se deforme */
    width: auto !important;          
    object-fit: contain !important;  /* 🚀 CLAVE: Hace que la foto se contenga dentro de su espacio sin tocar los bordes */
}
.carrusel-creality {
    margin-top: 50px; /* Empuja el carrusel hacia abajo aproximadamente 3 cm */
}

/* ==========================================================================
   EFECTO HOVER: SOLO CAMBIO DE COLOR DE TEXTO EN BOTONES DE TARJETAS
   ========================================================================== */

/* 1. Preparamos los botones con una transición suave para el texto */
.product-card .btn-explorar,
.product-card .btn-product {
    transition: color 0.25s ease-in-out !important;
}

/* 2. Efecto al pasar el mouse (Hover): Cambia solo el color del texto */
.product-card .btn-explorar:hover,
.product-card .btn-product:hover {
    background-color: #2f33f7 !important; /* Evita que cambie el fondo */
    color: #fa0505 !important;               /* 🎨 Cambia el texto a rojo (podés usar el color que quieras) */
    text-decoration: underline !important;   /* Agrega un subrayado elegante al texto */
}
/* --- Estructura Grid paralela para el Hero --- */
.hero-grid-container {
    display: grid;
    grid-template-columns:250px 1fr; /* Columna fija para evento + columna flexible para contenido */
    align-items: center; /* Alineación vertical al centro entre ambos bloques */
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* --- Cuadro del Evento (Izquierda - Máx 450x450px) --- */
.hero-evento-box {
    width: 100%;
    max-width: 500px;
    height: 300px; /* Altura idéntica o proporcional para el formato cuadrado */
    background: rgba(2, 10, 124, 0.88); /* Azul corporativo con ligera transparencia */
    backdrop-filter: blur(6px);
    border: 2px solid #3b82f6;
    border-radius: 16px;
    padding: 5px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    text-align: left;
}

.hero-evento-box .banner-evento-badge {
    background-color: #ff9800;
    color: #111;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.hero-evento-box h3 {
    font-size: 20px;
    margin: 10px 0 6px 0;
    color: #ffffff;
    line-height: 1.25;
}

.hero-evento-box p {
    font-size: 13px;
    color: #dbeaff;
    margin: 4px 0;
}

.hero-evento-box .banner-evento-desc {
    margin-top: -25px;
    font-size: 13px;
    line-height: 1.35;
    color: #ffffff;
}

.hero-evento-box .btn-evento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #ffffff;
    color: #020a7c;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-evento-box .btn-evento:hover {
    background-color: #ff9800;
    color: #ffffff;
}

/* --- Adaptación Responsive para pantallas chicas/celulares --- */
@media (max-width: 992px) {
    .hero-grid-container {
        grid-template-columns: 1fr; /* Pasa a 1 sola columna en dispositivos móviles */
        gap: 24px;
    }

    .hero-evento-box {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   ANUNCIO DE MUDANZA CON BORDE ACTIVO Y ANIMADO
   ========================================================================== */

.banner-mudanza-container {
    position: relative !important;
    height: auto !important;
    padding: 6px !important;
    background: linear-gradient(135deg, #ff0800, #ecfd04, #0d74eb, #ff0800) !important;
    background-size: 300% 300% !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(255, 8, 0, 0.5) !important;
    animation: bordeActivoGlow 4s ease infinite !important;
}

.banner-mudanza-container .img-mudanza {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    border-radius: 12px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Animación de cambio de color del borde y pulso de luz */
@keyframes bordeActivoGlow {
    0% {
        background-position: 0% 50%;
        box-shadow: 0 0 15px rgba(255, 8, 0, 0.6);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 25px rgba(236, 253, 4, 0.8);
    }
    100% {
        background-position: 0% 50%;
        box-shadow: 0 0 15px rgba(255, 8, 0, 0.6);
    }
}
/* ==========================================================================
   CARTEL LUMINOSO TITILANTE (MARQUESINA MUDANZA)
   ========================================================================== */

.banner-mudanza-container {
    position: relative !important;
    height: auto !important;
    padding: 6px !important;
    background-color: #ff0000 !important;
    border-radius: 16px !important;
    display: inline-block !important;
    /* Aplica la animación de parpadeo y luz */
    animation: cartelLuminoso 1.2s infinite alternate !important;
}

.banner-mudanza-container .img-mudanza {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    border-radius: 12px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Efecto de encendido y apagado de neón (titilante) */
@keyframes cartelLuminoso {
    0% {
        background-color: #ff0000;
        border: 3px solid #ffff00;
        box-shadow: 
            0 0 10px #ff0000,
            0 0 20px #ff0000,
            0 0 30px #ffff00,
            inset 0 0 10px #ffff00;
        transform: scale(1);
    }
    50% {
        background-color: #ffe600;
        border: 3px solid #ff0000;
        box-shadow: 
            0 0 25px #ffe600,
            0 0 45px #ff0000,
            0 0 60px #ffe600,
            inset 0 0 15px #ff0000;
        transform: scale(1.02); /* Ligero pulso hacia afuera */
    }
    100% {
        background-color: #ff0000;
        border: 3px solid #ffffff;
        box-shadow: 
            0 0 5px #ff0000,
            0 0 15px #ff0000,
            0 0 25px #ffffff;
        transform: scale(1);
    }
}