.elementor-394499 .elementor-element.elementor-element-a811390{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-394499 .elementor-element.elementor-element-09b8ac8{width:var( --container-widget-width, 93.789% );max-width:93.789%;--container-widget-width:93.789%;--container-widget-flex-grow:0;}.elementor-394499 .elementor-element.elementor-element-09b8ac8 > .elementor-widget-container{padding:20px 0px 20px 0px;}.elementor-394499 .elementor-element.elementor-element-09b8ac8.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-394499 .elementor-element.elementor-element-a811390{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-394499 .elementor-element.elementor-element-a811390{--content-width:1488px;}}/* Start custom CSS for shortcode, class: .elementor-element-09b8ac8 *//* Contenedor general del megamenú */
.custom-megamenu-container {
    width: 100%;
    background-color: var(--e-global-color-accent); /* Color de fondo del megamenú */

}

/* Contenedor de las pestañas */
.elementor-394499 .elementor-element.elementor-element-09b8ac8 .custom-tabs-heading {
    display: flex;
    justify-content: center;
    padding: 0;
    gap: 15px;
    background-color: #ffffff; /* Fondo blanco detrás de las pestañas */
    flex-wrap: wrap; /* Las pestañas se ajustan en pantallas pequeñas */
}

/* Estilo de las pestañas principales */
.custom-tab-title {
    background-color: #915c3a; /* Color marrón sólido para las pestañas */
    color: #fff;
    padding: 10px 20px;
    border-radius: 0;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    border: 0;
}

/* Estilo cuando la pestaña está activa */
.custom-tab-title.active {
    background-color: var(--e-global-color-accent); /* Mismo color que el fondo del megamenú para la pestaña activa */
    color: #915c3a; /* Color de texto marrón para la pestaña activa */
    border-bottom: 2px solid transparent; /* Eliminar borde inferior en la pestaña activa */
}

/* Hover para las pestañas */
.custom-tab-title:hover {
    background-color: #c5a27d; /* Fondo marrón más claro en hover */
    color: #fff;
}

/* Contenedor de las pestañas */
.elementor-394499 .elementor-element.elementor-element-09b8ac8  .custom-tabs-content {
    margin-top: 0;
    width: 100%;
    max-height: 60vh; /* Limita la altura máxima a un 80% de la altura de la ventana */
    overflow-y: auto; /* Habilita el scroll vertical */
}

/* Contenedor del contenido */
.custom-tab-content-container.active-tab {
    display: block;
}
.custom-tab-content-container {
    display: none;
}

/* Estilo para el contenedor de productos en modo grid */
.custom-tab-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorio */
    gap: 10px;
    padding: 20px;
}

/* Estilo individual de cada producto */
.custom-tab-item {
    display: flex;
    align-items: center;
    background-color: #ffffff; /* Fondo blanco para los productos */
    border: 1px solid #e3cfc0;
    border-radius: 5px;
    padding: 0; /* Eliminar el padding para evitar espacio extra */
    gap: 15px;
    transition: transform 0.3s ease;
    text-decoration: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    min-height: 50px; /* Ajustar la altura mínima */
}

/* Ajuste para la imagen sin espacios arriba o abajo */
.custom-tab-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    height: 100%; /* Asegurar que la imagen ocupe el 100% del contenedor */
}

.custom-tab-item:hover {
    transform: scale(1.02); /* Efecto hover */
}

.custom-tab-item-image img {
    max-width: 50px; /* Tamaño de la imagen */
    height: auto;
    display: block;
    vertical-align: middle; /* Asegurarse de que la imagen esté alineada al medio */
}


.custom-tab-item-title {
    font-size: 14px;
    font-weight: bold; /* Cambiado a negrita */
    line-height: var(--e-global-typography-primary-line-height);
    color: var(--e-global-color-primary);
}

/* Aleaciones */

.custom-alloys-container {
    background-color: white; /* Color de fondo */
    padding: 20px; /* Espaciado interno */
    margin: 20px;
    border: 1px solid var(--e-global-color-primary); /* Borde */
    display: flex; /* Usar flexbox */
    flex-direction: column; /* Colocar elementos en columna */
    align-items: center; /* Centrar horizontalmente */
    justify-content: center; /* Centrar verticalmente */
    height: 100%; /* Asegurarse de que ocupe toda la altura disponible */
}

.custom-heading-title {
    font-size: 14px !important; /* Tamaño de fuente para el título */
    font-weight: bold; /* Negrita */
    margin-bottom: 15px; /* Espacio debajo del título */
    color: var(--e-global-color-primary); /* Color del texto */
    text-align: center; /* Centrar texto horizontalmente */
}

.inner-container {
    display: flex; /* Alineación flexible */
    flex-wrap: wrap; /* Permitir salto de línea */
    gap: 10px; /* Espaciado entre elementos */
    justify-content: center; /* Centrar horizontalmente los elementos dentro de inner-container */
    align-items: center; /* Centrar verticalmente los elementos dentro de inner-container */
}

.custom-alloy-button a {
    display: inline-block; /* Alineación en línea */
    background-color: white; /* Color de fondo */
    color: var(--e-global-color-primary); /* Color del texto */
    padding: 10px 15px; /* Espaciado interno del botón */
    border: 1px solid var(--e-global-color-primary); /* Borde del botón */
    text-decoration: none; /* Sin subrayado */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
    border-radius: 0; /* Esquinas cuadradas */
    text-align: center; /* Centrar texto */
}

.custom-alloy-button a:hover {
    background-color: var(--e-global-color-accent); /* Color de fondo al pasar el ratón */
}


/* Estilos responsivos para tablet y móvil */

/* Ajuste para tablets (pantallas entre 768px y 1024px) */
@media (max-width: 1024px) {
    .custom-tab-panel {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en tablet */
    }
}

/* Ajuste para móviles (pantallas menores a 768px) */
@media (max-width: 768px) {
    .custom-tab-panel {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }

    .custom-tab-title {
        min-width: auto;
        width: 100%;
    }
}

/* pruebas */

/* Asegúrate de que el contenido de las pestañas se ordene correctamente en dispositivos móviles */
@media (max-width: 767px) {
    .custom-tabs-content > .custom-tab-content-container {
        order: var(--tabs-title-order);
    }

    .custom-tab-content-container.active-tab {
        display: flex !important; /* Solo la activa debe ser flex */
        flex-direction: column;
    }
}

/* Asegúrate de que el contenedor de las pestañas tenga una propiedad de flex adecuada */
.custom-tabs-content {
    display: flex;
    flex-direction: column; /* Alinear el contenido en columna */
}

/* Añade esta clase para asegurar que cada contenido de la pestaña sea visible en móviles */
.custom-tab-content-container {
    width: 100%; /* Asegúrate de que el contenido ocupe el 100% del contenedor */
}/* End custom CSS */