.elementor-14465 .elementor-element.elementor-element-84980a1{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(3, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-14465 .elementor-element.elementor-element-fcd8149.elementor-element{--align-self:center;}.elementor-14465 .elementor-element.elementor-element-fcd8149{text-align:center;}@media(max-width:1024px){.elementor-14465 .elementor-element.elementor-element-84980a1{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-14465 .elementor-element.elementor-element-84980a1{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-84980a1 *//* Forzar que los widgets de imagen ocupen un poco más de espacio */
.elementor-14465 .elementor-element.elementor-element-84980a1 .elementor-widget-image {
    width: 90% !important; /* Ajusta este porcentaje si quieres cambiar la distribución */
    max-width: 100%;
}

/* Hacer que los logos se estiren horizontalmente sin perder proporción */
.elementor-14465 .elementor-element.elementor-element-84980a1 .elementor-widget-image img {
    width: 180px !important; /* Incrementa este valor a tu gusto (ej. 140px o 150px) */
    height: auto !important;   /* Rompe la proporción fija de 225px de alto */
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Opcional: Un pequeño efecto hover para que resalten al pasar el mouse */
.elementor-14465 .elementor-element.elementor-element-84980a1 .elementor-widget-image img:hover {
    transform: scale(1.08);
}


/* Hacer que las imágenes llenen el espacio de su celda en el Grid */
.elementor-14465 .elementor-element.elementor-element-84980a1 .elementor-widget-image img {
    width: 100% !important;
    max-width: 140px !important; /* Controla el tamaño máximo aquí. Súbelo a 150px o 160px si los quieres aún más grandes */
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Reducir el espacio interno del contenedor para que los logos tengan más margen donde crecer */
.elementor-14465 .elementor-element.elementor-element-84980a1 .e-con-inner {
    padding: 10px !important; 
    gap: 15px 10px !important; /* Controla la separación entre filas y columnas */
}





/* Romper la limitación del ancho del menú desplegable */
.elementor-14465 .elementor-element.elementor-element-84980a1 {
    position: absolute !important;
    width: 600px !important; /* Ancho total que tendrá el desplegable de marcas (ajústalo a tu gusto) */
    left: 50% !important;   /* Lo centra respecto al botón "BRANDS" */
    transform: translateX(-50%) !important;
    max-width: 90vw !important; /* Evita que se salga de la pantalla en monitores chicos */
    background-color: #ffffff !important; /* Fondo blanco para todo el bloque */
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) !important; /* Sombra elegante */
    border-radius: 8px !important;
    z-index: 9999 !important;
}

/* Forzar a que el Grid interno se estire y use el nuevo espacio */
.elementor-14465 .elementor-element.elementor-element-84980a1 .e-con-inner {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Mantiene las 3 columnas */
    gap: 20px !important; /* Espacio generoso entre los logos */
    padding: 25px !important; /* Margen interno para que respiren */
}

/* Ajustar el tamaño real de los logos ahora que hay espacio */
.elementor-14465 .elementor-element.elementor-element-84980a1 .elementor-widget-image img {
    width: 100% !important;
    max-width: 150px !important; /* Ahora sí puedes subirlos a 150px o más sin que se amontonen */
    height: auto !important;
    object-fit: contain;
    margin: 0 auto !important;
}/* End custom CSS */