@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wdth,wght@1,87.5,600;1,87.5,700;1,100,600;1,100,700&display=swap');

/* --- 1. Filtro de Categorías (Pestañas horizontales) --- */
.metalbyte-catalog-wrapper {
    width: 100%;
    margin: 30px 0;
}

.metalbyte-categories-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px; /* Espacio amplio entre pestañas */
    margin-bottom: 30px;
    padding-bottom: 8px;
}

.metalbyte-cat-tab {
    display: inline-block;
    font-family: var(--us-get-font-h1-family, var(--us-get-font-heading-family, 'Anybody SemiCondensed')), 'Anybody SemiCondensed', 'Anybody', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1d1e1c !important;
    opacity: 0.55; /* Muted para las pestañas inactivas */
    text-decoration: none !important;
    padding-bottom: 0px !important; /* Pegado directamente al texto */
    border-bottom: 3.5px solid transparent; /* Subrayado grueso */
    line-height: 1.2 !important; /* Altura de línea idéntica a Impreza Encabezado 1 */
    letter-spacing: -0.00em !important; /* Espaciado de letras idéntico a Impreza */
    transition: opacity 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.metalbyte-cat-tab:hover {
    opacity: 1;
}

.metalbyte-cat-tab.active {
    opacity: 1;
    border-bottom-color: #1d1e1c; /* Subrayado negro activo */
}


/* --- 2. Grid de Productos --- */
.metalbyte-products-grid {
    display: grid;
    justify-content: center;
    gap: 45px 25px; /* Separación vertical y horizontal de la maqueta */
    width: 100%;
}

/* Columnas responsivas con ancho máximo de 320px por tarjeta */
.metalbyte-products-grid.cols-1 { grid-template-columns: minmax(0, 320px); }
.metalbyte-products-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 320px)); }
.metalbyte-products-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 320px)); }
.metalbyte-products-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 320px)); }

@media (max-width: 991px) {
    .metalbyte-products-grid.cols-3,
    .metalbyte-products-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 320px));
        gap: 30px 20px;
    }
}

@media (max-width: 576px) {
    .metalbyte-products-grid {
        grid-template-columns: minmax(0, 320px) !important;
        justify-content: center; /* Centrar tarjeta en celulares */
        gap: 30px 20px;
    }
    .metalbyte-categories-filter {
        gap: 15px;
    }
    .metalbyte-cat-tab {
        font-size: 13.5px;
        font-weight: 400 !important;
    }
}

/* Tarjeta de Producto (Estilo Minimalista Plano) */
.metalbyte-product-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: none;
    box-shadow: none;
    position: relative;
    max-width: 320px; /* Ancho más amplio según maqueta */
    width: 100%;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.metalbyte-product-link {
    text-decoration: none !important;
    display: block;
    color: inherit;
}

/* Contenedor de Imagen Cuadrado/Ancho Redondeado a 24px */
.metalbyte-product-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Proporción 1:1 más ancha como en el diseño */
    overflow: hidden;
    background-color: transparent;
    border-radius: 24px; /* Redondeado extremo */
    transform: translateZ(0); /* Aceleración 3D para recortar bordes */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.metalbyte-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Efecto hover interactivo sobre el contenedor de imagen */
.metalbyte-product-card:hover .metalbyte-product-image-container {
    transform: translateY(-4px);
}

.metalbyte-product-card:hover .metalbyte-product-image {
    transform: scale(1.04);
}

/* Información en Tarjeta (Centrada según Maqueta) */
.metalbyte-product-info {
    padding: 8px 4px 0 4px;
    text-align: center !important;
}

.metalbyte-product-title {
    font-family: var(--us-get-font-h1-family, var(--us-get-font-heading-family, 'Anybody SemiCondensed')), 'Anybody SemiCondensed', 'Anybody', sans-serif !important;
    font-size: 16.5px !important; /* Aumentado para mayor legibilidad */
    font-weight: 600 !important;
    color: #1d1e1c !important;
    margin: 0 0 0 0 !important;
    line-height: 1.25 !important; /* Altura de línea idéntica a Impreza Encabezado 1 */
    letter-spacing: -0.00em !important; /* Espaciado de letras idéntico a Impreza */
    text-align: center !important;
    transition: color 0.2s ease;
}

.metalbyte-product-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important; /* Subtítulo en negrita (bold) */
    font-style: normal;
    color: #1d1e1c !important;
    margin: 1px 0 0 0 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.metalbyte-product-link:hover .metalbyte-product-title {
    color: #f0e42d; /* El título se colorea en hover */
}

/* Mensaje de no productos */
.metalbyte-no-products {
    color: #555555;
    font-size: 16px;
    text-align: center;
    padding: 40px;
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 12px;
}

/* --- 2. Detalle del Producto (single-producto.php) --- */


.metalbyte-single-product-container {
    width: 100%;
    background-color: #ffffff !important;
    color: #1d1e1c !important;
    padding: 120px 0 25px 0; /* Relleno superior para evitar la cabecera fija */
}

.metalbyte-single-product-wrapper {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Link de volver a la categoría */
.metalbyte-back-link {
    font-family: 'Anybody SemiCondensed', sans-serif !important;
    display: inline-block;
    font-size: 19px;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-style: normal !important;
    color: #1d1e1c !important;
    text-decoration: none !important;
    margin-bottom: 20px; /* Margen reducido */
    transition: opacity 0.2s ease;
}

.metalbyte-back-link:hover {
    opacity: 0.7;
}

/* Estructura split (Hero) */
.metalbyte-product-detail-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 35px; /* Margen reducido */
}

@media (max-width: 900px) {
    .metalbyte-product-detail-hero {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Caja de Imagen Principal (Redondeada a 24px idéntica a las fotos de la galería) */
.metalbyte-product-detail-image {
    background: transparent;
    border-radius: 24px !important;
    overflow: hidden !important;
}

.metalbyte-main-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px !important;
}

/* Caja de Información */
.metalbyte-product-detail-info {
    padding-top: 10px;
}

/* Título con diseño de Badge Verde */
.metalbyte-detail-title {
    font-family: var(--us-get-font-h1-family, var(--us-get-font-heading-family, 'Anybody SemiCondensed')), 'Anybody SemiCondensed', 'Anybody', sans-serif !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0;
    line-height: 1.2 !important;
    letter-spacing: -0.00em !important;
}

.metalbyte-title-highlight {
    background-color: #008e45 !important; /* Verde de la maqueta */
    color: #ffffff !important;
    padding: 5px 14px 4px 14px !important; /* Padding ajustado para llenar la caja verde */
    border-radius: 4px !important;
    display: inline-block;
}

.metalbyte-detail-subtitle {
    font-family: var(--font-family, 'Inter', sans-serif);
    font-size: 16px !important; /* 16px según diseño original */
    font-weight: 700 !important; /* En negrita (bold) según solicitud */
    font-style: normal;
    color: #0f8b46 !important;
    margin-top: 10px;
    margin-left: 0px !important; /* Alineado al borde exterior izquierdo de la placa verde del título */
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Descripción */
.metalbyte-detail-description {
    font-size: 15px;
    color: #1d1e1c;
    line-height: 1.6;
    margin-bottom: 25px;
}

.metalbyte-detail-description p {
    margin-bottom: 14px;
}

.metalbyte-product-specs {
    display: flex;
    justify-content: flex-start; /* Agrupar a la izquierda */
    gap: 50px; /* Separación fija entre ítems */
    align-items: flex-start;
    margin-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 20px;
}

.metalbyte-spec-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el ícono y el texto horizontalmente entre sí */
    text-align: center; /* Centra las líneas de texto internas */
    font-family: 'Inter', sans-serif !important; /* Forzar tipografía Inter como en el diseño */
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1d1e1c !important;
    line-height: 1.15 !important; /* Interlineado más compacto según solicitud */
    flex: 0 1 auto; /* Ancho ajustable basado en su contenido */
    max-width: 140px;
}

.metalbyte-spec-icon {
    height: 28px !important; /* Altura fija para que queden alineados en el eje vertical */
    width: auto !important; /* Ancho dinámico para respetar la proporción horizontal de la foto original */
    max-width: 100%;
    margin: 0 0 8px 0; /* Sin márgenes automáticos, el centrado lo maneja el align-items: center de la columna */
    opacity: 0.9;
    display: block;
}

svg.metalbyte-spec-icon {
    width: 28px !important; /* Mantener los SVG de fallback por defecto cuadrados (1:1) */
}

/* Responsivo para la vista de producto en móviles */
@media (max-width: 576px) {
    .metalbyte-detail-title {
        font-size: 20px !important;
    }
    .metalbyte-product-specs {
        gap: 25px; /* Reduce la separación en móviles para evitar desbordes */
    }
}

/* --- 3. Galería de Fotos (4 columnas) --- */
.metalbyte-product-detail-gallery {
    padding-top: 60px; /* Más espacio arriba (relleno) */
    margin-top: 40px;  /* Más espacio arriba (margen) */
    margin-bottom: 50px; /* Más espacio abajo (con el botón CTA) */
    width: 100%;
}

.metalbyte-detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 180px));
    gap: 20px;
    justify-content: center; /* Centra las tarjetas horizontalmente */
}

@media (max-width: 900px) {
    .metalbyte-detail-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 180px));
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .metalbyte-detail-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 160px));
        gap: 12px;
    }
}

.metalbyte-gallery-item,
.metalbyte-gallery-item img {
    aspect-ratio: 1.1 / 1;
    border-radius: 12px !important; /* Esquinas ligeramente más sujetas y finas con menos curvas */
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: transform 0.3s ease;
    transform: translateZ(0);
    opacity: 1;
}

.metalbyte-gallery-item:hover {
    transform: scale(1.03);
}

/* Paginación de la Galería */
.metalbyte-gallery-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.metalbyte-page-btn {
    background: transparent !important;
    border: 1.5px solid #1d1e1c !important;
    color: #1d1e1c !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.metalbyte-page-btn:hover:not(:disabled) {
    background: #1d1e1c !important;
    color: #ffffff !important;
}

.metalbyte-page-btn:disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    border-color: #cccccc !important;
    color: #cccccc !important;
}

.metalbyte-page-info {
    font-size: 14.5px;
    font-weight: 700;
    font-style: normal;
    color: #1d1e1c;
    min-width: 80px;
    text-align: center;
}

.metalbyte-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Botón CTA */
.metalbyte-detail-cta {
    text-align: center;
    margin-top: 45px;
}

/* --- 4. Lightbox Modal --- */
.metalbyte-lightbox-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(18, 19, 17, 0.70) !important; /* Opacidad del 70% */
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}

/* Fallback de opacidad 70% para bibliotecas adicionales de lightbox */
.mfp-bg,
.lg-backdrop,
.fancybox-bg {
    background-color: rgba(18, 19, 17, 0.70) !important;
    opacity: 0.70 !important;
}

.metalbyte-lightbox-content {
    margin: auto;
    display: block;
    max-width: 85%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

.metalbyte-lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    transition: color 0.15s ease;
    cursor: pointer;
    z-index: 100001;
}

.metalbyte-lightbox-close:hover,
.metalbyte-lightbox-close:focus {
    color: #f0e42d;
}

/* Flechas de Navegación del Lightbox Modal */
.metalbyte-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 48px; /* Un poco más grande al no tener círculo */
    font-weight: bold;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100000;
    transition: color 0.2s ease, transform 0.2s ease;
    outline: none;
    line-height: 1;
    padding-bottom: 5px;
    user-select: none;
}

.metalbyte-lightbox-arrow:hover {
    background: transparent;
    color: #f0e42d; /* Hover amarillo dinámico */
    transform: translateY(-50%) scale(1.25);
}

.metalbyte-lightbox-prev {
    left: 25px;
}

.metalbyte-lightbox-next {
    right: 25px;
}

@media (max-width: 576px) {
    .metalbyte-lightbox-prev {
        left: 10px;
    }
    .metalbyte-lightbox-next {
        right: 10px;
    }
    .metalbyte-lightbox-arrow {
        width: 42px;
        height: 42px;
        font-size: 30px;
        background: transparent !important;
        box-shadow: none !important;
    }
}

.metalbyte-lightbox-close:hover,
.metalbyte-lightbox-close:focus {
    color: #f0e42d;
}

/* Responsive del contenedor principal */
@media (max-width: 768px) {
    .metalbyte-single-product-container {
        padding: 90px 0 30px 0;
    }

    .metalbyte-single-product-wrapper {
        padding: 0 15px;
    }

    /* Centrado de título, subtítulo y descripción en móvil */
    .metalbyte-product-detail-info {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center !important;
    }

    .metalbyte-detail-title {
        font-size: 20px !important;
        text-align: center !important;
        width: 100%;
        display: block !important;
    }

    .metalbyte-detail-subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        display: block !important;
    }

    .metalbyte-detail-description {
        text-align: center !important;
        width: 100%;
    }

    .metalbyte-detail-description p {
        text-align: center !important;
    }

    /* Reducción de grosor de títulos verdes en móviles (para Anybody) */
    .metalbyte-title-highlight {
        font-weight: 400 !important;
    }

    .metalbyte-slider-badge-title {
        font-weight: 400 !important;
    }
}

/* ==========================================================================
   FORMULARIO DE CONTACTO RESPONSIVO Y CENTRADO
   ========================================================================== */

/* Limita el ancho en PC e impide que se corte en móviles */
.w-form, 
.wpcf7,
.w-form-h {
    width: 100% !important;
    max-width: 650px !important; /* Ajustado a 650px para dar el ancho exacto de tu maqueta de PC */
    margin-left: auto !important;
    margin-right: auto !important; /* Auto-centra el formulario horizontalmente */
    box-sizing: border-box !important;
}

/* Ajustes específicos para dispositivos móviles */
@media (max-width: 768px) {
    .w-form, 
    .wpcf7,
    .w-form-h {
        max-width: 100% !important; /* Permite que el formulario fluya al 100% del celular */
        padding-left: 15px !important;
        padding-right: 15px !important; /* Evita que los inputs toquen el borde de la pantalla */
    }
}

/* ==========================================================================
   FORMULARIO DE CONTACTO - IMAGEN DE FONDO RESPONSIVA
   ========================================================================== */

/* Forzar visualización de la sección en todos los dispositivos */
.us_custom_b7a68ffe {
    display: block !important;
}

/* Para PC y Laptops (ancho de pantalla >= 1025px) */
@media (min-width: 1025px) {
    .us_custom_b7a68ffe .l-section-img {
        background-image: url(https://demiatest.sytes.net:5033/wp-content/uploads/2026/07/form-imagen-e.jpg) !important;
    }
}

/* Para Tablets y Móviles (ancho de pantalla <= 1024px) */
@media (max-width: 1024px) {
    .us_custom_b7a68ffe .l-section-img {
        background-image: url(https://demiatest.sytes.net:5033/wp-content/uploads/2026/07/form-imagen-mobilet.jpg) !important;
    }
}

/* ==========================================================================
   5. MULTIGALERÍAS - PESTAÑAS (TABS)
   ========================================================================== */

.metalbyte-gallery-tabs-container {
    background: #ffffff !important; /* Fondo blanco como en el diseño */
    border: 1px solid #e2e8f0 !important; /* Borde sutil y plano */
    border-radius: 50px !important;
    padding: 3px !important; /* Reducido para ceñir más el alto */
    margin: 25px 0 !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.metalbyte-gallery-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px; /* Unión de píldoras continua */
}

.metalbyte-tab-btn {
    font-family: var(--font-family, 'Inter', sans-serif) !important;
    font-size: 13.5px !important; /* Ligeramente más chico para estilizarlo */
    font-weight: 700 !important;
    color: #1d1e1c !important;
    background: transparent !important;
    border: none !important;
    padding: 5px 32px !important; /* Reducido drásticamente a 5px vertical para lograr la forma alargada y fina */
    line-height: 1 !important; /* Forzado a 1 para que no herede altos de línea del tema */
    border-radius: 40px !important;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    flex: 1;
    min-width: 120px;
    text-align: center;
    outline: none !important;
}

.metalbyte-tab-btn:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.metalbyte-tab-btn.active {
    background-color: #dbdbdb !important; /* Gris un poco más oscuro plano de la maqueta */
    color: #1d1e1c !important;
}

/* Tabs de galería - Responsive Mobile (Las 3 pestañas estrictamente en la misma fila) */
@media (max-width: 768px) {
    .metalbyte-gallery-tabs-container {
        padding: 2px !important;
        margin: 15px 0 !important;
        border-radius: 40px !important;
    }

    .metalbyte-gallery-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .metalbyte-tab-btn {
        padding: 6px 2px !important;
        font-size: 12.5px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
        min-width: 0 !important;
        flex: 1 1 0px !important;
        text-align: center !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
}

/* Animación de entrada de arriba hacia abajo para la información del producto al cargar */
.metalbyte-product-detail-info {
    animation: metalbyteFadeInDown 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes metalbyteFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 6. Lista de Descripción con Flechas Verdes --- */
.metalbyte-desc-items-list {
    list-style: none !important;
    margin: 15px 0 25px 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 22px; /* Espaciado idéntico al diseño original */
}

.metalbyte-desc-item {
    position: relative;
    padding-left: 24px !important; /* Traer el texto más cerca de la flecha ajustado al nuevo ancho */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; /* Forzar Inter o sans-serif limpio */
    font-size: 16px !important; /* Tamaño idéntico al del mockup */
    font-weight: 500 !important; /* Peso medio limpio */
    color: #1a1a1a !important; /* Color oscuro del mockup */
    line-height: 1.4 !important;
}

/* Flecha verde provista por el usuario (versión grande) */
.metalbyte-desc-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px; /* Centrado vertical con el primer renglón */
    width: 16px;
    height: 16px;
    background-image: url('https://demiatest.sytes.net:5033/wp-content/uploads/2026/07/greenarrowe.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.metalbyte-text-bold {
    font-weight: 700 !important;
    color: #000000 !important;
}

.metalbyte-text-green {
    color: #0f8b46 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   SLIDER / CARRUSEL DESLIZABLE DE PRODUCTOS ([metalbyte_slider])
   ========================================================================== */
.metalbyte-slider-wrapper {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    overflow: hidden;
}

.metalbyte-slider-track-container {
    overflow: hidden;
    width: 100vw !important;
    position: relative;
    touch-action: pan-y !important; /* Optimiza soporte táctil en iOS/iPhone */
}

.metalbyte-slider-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    cursor: grab;
    touch-action: pan-y !important; /* Optimiza soporte táctil en iOS/iPhone */
}

.metalbyte-slider-track:active {
    cursor: grabbing;
}

.metalbyte-slider-slide {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding: 15px 0 0 0;
}

.metalbyte-slider-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 45px;
    box-sizing: border-box;
}

.metalbyte-slider-image-col {
    flex: 0 0 45%;
    max-width: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.metalbyte-slider-img-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    outline: none;
    border-radius: 24px !important;
    overflow: hidden !important;
}

.metalbyte-slider-img {
    max-width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover !important;
    border-radius: 24px !important;
    transition: transform 0.3s ease;
}

.metalbyte-slider-card:hover .metalbyte-slider-img {
    transform: scale(1.02);
}

.metalbyte-slider-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Insignia Verde del Título */
.metalbyte-slider-badge-title {
    display: inline-block;
    background-color: #008e45;
    color: #ffffff !important;
    font-family: var(--us-get-font-h1-family, var(--us-get-font-heading-family, 'Anybody SemiCondensed')), 'Anybody SemiCondensed', 'Anybody', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 5px 14px 4px 14px !important;
    border-radius: 4px !important;
    margin-left: 0 !important;
    margin-bottom: 10px;
    line-height: 1.2 !important;
    letter-spacing: -0.00em !important;
    box-shadow: 0 2px 8px rgba(0, 142, 69, 0.15);
}

/* Subtítulo Verde */
.metalbyte-slider-subtitle {
    color: #008e45 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-left: 0 !important;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Descripción */
.metalbyte-slider-desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13.5px !important;
    color: #1a1a1a !important;
    line-height: 1.4;
    margin-left: 0 !important;
    margin-bottom: 16px;
    max-width: 440px;
}

/* Botón "Más info" (Alineado estrictamente a la izquierda) */
.metalbyte-slider-action {
    margin-top: 4px;
    width: 100%;
    text-align: left !important;
    display: flex;
    justify-content: flex-start;
}

/* Quitar el bold de los botones del catálogo y estilo_1 */
.us-btn-style_1,
.us-btn-style_1 *,
.w-btn.us-btn-style_1,
.w-btn.us-btn-style_1 *,
.metalbyte-slider-btn,
.metalbyte-slider-btn *,
.metalbyte-detail-cta .w-btn,
.metalbyte-detail-cta .w-btn * {
    font-weight: 400 !important;
}

.metalbyte-slider-action .w-btn,
.metalbyte-slider-action .us-btn-style_1,
.metalbyte-slider-btn {
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
}

.metalbyte-slider-btn:not(.us-btn-style_1) {
    display: inline-block;
    background-color: #f0e42d;
    color: #000000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.metalbyte-slider-btn:not(.us-btn-style_1):hover {
    background-color: #dcd125;
    transform: translateY(-1px);
    color: #000000;
}

/* Flechas de Navegación Lateral (Alineadas estrictamente con la ficha superior del producto) */
.metalbyte-slider-arrow {
    position: absolute;
    top: 140px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #1a1a1a;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s ease, transform 0.2s ease;
    outline: none;
    padding: 0;
}

.metalbyte-slider-wrapper,
.metalbyte-slider-track-container,
.metalbyte-slider-track,
.metalbyte-slider-card-link,
.metalbyte-slider-card,
.metalbyte-slider-slide {
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: pan-y !important;
}

.metalbyte-slider-arrow:hover {
    color: #008e45;
    transform: translateY(-50%) scale(1.2);
}

.metalbyte-slider-prev {
    left: calc(50vw - 510px);
}

.metalbyte-slider-next {
    right: calc(50vw - 510px);
}

@media (max-width: 1060px) {
    .metalbyte-slider-prev {
        left: 20px;
    }
    .metalbyte-slider-next {
        right: 20px;
    }
}

/* Responsive para Pantallas Pequeñas */
@media (max-width: 768px) {
    .metalbyte-slider-wrapper {
        padding: 0;
    }

    .metalbyte-slider-card {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        padding: 0 40px 10px 40px;
        height: auto !important; /* Adaptable sin huecos vacíos gigantes */
        min-height: 290px;
        box-sizing: border-box;
        justify-content: flex-start;
    }

    .metalbyte-slider-image-col {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        height: 135px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .metalbyte-slider-img {
        max-height: 120px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .metalbyte-slider-content-col {
        align-items: center !important;
        text-align: center !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: auto;
    }

    .metalbyte-slider-badge-title {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .metalbyte-slider-subtitle {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .metalbyte-slider-desc {
        max-width: 100%;
        height: 58px !important; /* Reserva el espacio idéntico de 3 líneas en todas las tarjetas */
        min-height: 58px !important;
        max-height: 58px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 8px !important;
    }

    .metalbyte-slider-action {
        text-align: center !important;
        justify-content: center !important;
        margin-top: 4px !important; /* Posición milimétricamente fija en todas las tarjetas */
        padding-top: 0;
        width: 100%;
    }

    .metalbyte-slider-action .w-btn,
    .metalbyte-slider-action .us-btn-style_1,
    .metalbyte-slider-btn {
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
    }

    .metalbyte-slider-arrow {
        top: 170px;
    }

    .metalbyte-slider-prev {
        left: 2px !important;
    }

    .metalbyte-slider-next {
        right: 2px !important;
    }
}

/* Enlaces contenedores del slider */
.metalbyte-slider-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    outline: none !important;
}

.metalbyte-slider-banner-link {
    display: block;
    text-decoration: none !important;
    outline: none !important;
}

/* Fila de Imagen Banner del Slider (Foto Completa 1300x652 Proporcional Sin Recortes) */
.metalbyte-slider-banner-row {
    display: block;
    width: 100%;
    height: calc(100vw * 0.5015) !important;
    max-height: 850px;
    margin-top: 15px;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    text-decoration: none !important;
    outline: none !important;
    pointer-events: auto !important;
}

/* Fila Banner Superior (Sólo en PC/Escritorio; en mobile queda 100% default) */
@media (min-width: 769px) {
    .us_custom_b7a68ffe {
        position: relative !important;
        width: 100% !important;
        min-height: 320px !important;
        height: calc(100vw * 0.24) !important;
        max-height: 380px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .us_custom_b7a68ffe #s08f,
    .us_custom_b7a68ffe #k4bc {
        display: none !important;
    }

    .us_custom_b7a68ffe .l-section-h {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        padding: 30px 0 !important;
    }

    .us_custom_b7a68ffe .l-section-img {
        background-size: cover !important;
        background-position: center 65% !important;
        background-repeat: no-repeat !important;
    }
}

/* Restablecer la marca amarilla del footer a su estado original (esquina inferior derecha) */
#page-footer .l-section.with_img .l-section-img,
#page-footer .l-section-img {
    background-size: contain !important;
    background-position: bottom right !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 768px) {
    .metalbyte-slider-banner-row {
        margin-top: 15px;
        height: 260px !important; /* Altura fija definida para evitar cortes o variaciones en mobile */
        max-height: 260px !important;
        background-position: center center !important;
    }
}

/* ==========================================================================
   GALERÍA INDEPENDIENTE / NOSOTROS (SHORTCODE)
   ========================================================================== */

.metalbyte-standalone-gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 30px 0;
    padding: 0 45px;
    box-sizing: border-box;
}

.metalbyte-standalone-gallery-content {
    flex: 1;
    width: 100%;
    overflow: hidden;
    transition: min-height 0.3s ease;
}

.metalbyte-standalone-gallery-content .metalbyte-detail-gallery-grid {
    will-change: transform, opacity;
}

.metalbyte-standalone-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #1a1a1a;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    outline: none;
    padding: 0;
}

.metalbyte-standalone-gallery-arrow:hover:not(:disabled) {
    color: #008e45;
    transform: translateY(-50%) scale(1.25);
}

.metalbyte-standalone-gallery-arrow:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.metalbyte-standalone-gallery-arrow.metalbyte-standalone-gallery-prev {
    left: 0;
}

.metalbyte-standalone-gallery-arrow.metalbyte-standalone-gallery-next {
    right: 0;
}

@media (max-width: 768px) {
    .metalbyte-standalone-gallery-wrapper {
        padding: 0 32px;
    }
    .metalbyte-standalone-gallery-arrow {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================================================
   ALINEACIÓN Y ESPACIADOS SECCIÓN NOSOTROS: "ACTUALMENTE LA EMPRESA CUENTA CON"
   ========================================================================== */

/* Centrado de columnas y unificación del espacio entre números/títulos y subtítulos */
.us_custom_48b92bd9 {
    text-align: center !important;
}

.us_custom_33b9ee00 .g-cols.cols_3 .vc_column-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Especificidad imbatible con doble ID (html body#page-top main#page-content) para anular <style data-type="us_custom-css"> */
html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3 .vc_column-inner > .w-hwrapper,
html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3 .vc_column-inner > .wpb_text_column,
html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3 .vc_column-inner > .wpb_text_column p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3:nth-of-type(1) .wpb_text_column,
html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3:nth-of-type(1) .wpb_text_column p {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3:nth-of-type(2) .vc_column-inner > .wpb_text_column:first-of-type,
html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3:nth-of-type(2) .vc_column-inner > .wpb_text_column:first-of-type p {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3:nth-of-type(2) .vc_column-inner > .wpb_text_column:nth-of-type(2),
html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3:nth-of-type(2) .vc_column-inner > .wpb_text_column:nth-of-type(2) p {
    margin-top: -3px !important; /* Pegado absoluto con el texto superior */
    padding-top: 0px !important;
}

html body#page-top main#page-content .us_custom_33b9ee00 .g-cols.cols_3 .wpb_wrapper p {
    text-align: center !important;
    line-height: 1.15 !important;
}

/* ==========================================================================
   SOBREESCRITURA DE ALTA ESPECIFICIDAD PARA EL SLIDER CARRUSEL DESTACADOS
   ========================================================================== */

html body#page-top main#page-content .metalbyte-slider-wrapper {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body#page-top main#page-content .metalbyte-slider-track-container {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
}

html body#page-top main#page-content .metalbyte-slider-track {
    display: flex !important;
    width: 100% !important;
}

html body#page-top main#page-content .metalbyte-slider-slide {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    min-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 10px 0 0 0 !important;
}

html body#page-top main#page-content .metalbyte-slider-card-link {
    display: block !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    text-decoration: none !important;
    color: inherit !important;
}

html body#page-top main#page-content .metalbyte-slider-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 15px 40px !important;
    box-sizing: border-box !important;
}

html body#page-top main#page-content .metalbyte-slider-image-col {
    flex: 0 0 42% !important;
    width: 42% !important;
    max-width: 400px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

html body#page-top main#page-content .metalbyte-slider-img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 280px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 20px !important;
}

html body#page-top main#page-content .metalbyte-slider-content-col {
    flex: 1 1 58% !important;
    width: 58% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body#page-top main#page-content .metalbyte-slider-badge-title {
    display: inline-block !important;
    background-color: #008e45 !important;
    color: #ffffff !important;
    font-family: var(--us-get-font-h1-family, var(--us-get-font-heading-family, 'Anybody SemiCondensed')), 'Anybody SemiCondensed', 'Anybody', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    padding: 6px 16px 5px 16px !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body#page-top main#page-content .metalbyte-slider-subtitle {
    color: #008e45 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body#page-top main#page-content .metalbyte-slider-desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    max-width: 480px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body#page-top main#page-content .metalbyte-slider-action {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: 4px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Banner inferior: 100% ancho completo de pantalla (100vw) y SIN bordes redondeados (border-radius: 0) */
html body#page-top main#page-content .metalbyte-slider-banner-link {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    outline: none !important;
}

html body#page-top main#page-content .metalbyte-slider-banner-row {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vw * 0.5015) !important;
    max-height: 800px !important;
    border-radius: 0 !important; /* SIN bordes redondeados */
    overflow: hidden !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

html body#page-top main#page-content .metalbyte-slider-arrow {
    position: absolute !important;
    top: 150px !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #1a1a1a !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 20 !important;
}

html body#page-top main#page-content .metalbyte-slider-prev {
    left: calc(50vw - 510px) !important;
}

html body#page-top main#page-content .metalbyte-slider-next {
    right: calc(50vw - 510px) !important;
}

@media (max-width: 1060px) {
    html body#page-top main#page-content .metalbyte-slider-prev {
        left: 15px !important;
    }
    html body#page-top main#page-content .metalbyte-slider-next {
        right: 15px !important;
    }
}

@media (max-width: 768px) {
    html body#page-top main#page-content .metalbyte-slider-card {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
        padding: 0 15px 15px 15px !important;
    }

    html body#page-top main#page-content .metalbyte-slider-image-col {
        width: 100% !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }

    html body#page-top main#page-content .metalbyte-slider-img {
        max-height: 180px !important;
    }

    html body#page-top main#page-content .metalbyte-slider-content-col {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    html body#page-top main#page-content .metalbyte-slider-action {
        justify-content: center !important;
    }

    html body#page-top main#page-content .metalbyte-slider-banner-row {
        height: 260px !important;
        border-radius: 0 !important;
    }

    /* Anular saltos de línea forzados (<br>) en bloques de texto para que fluyan de forma natural en móviles */
    html body#page-top main#page-content .wpb_text_column br,
    html body#page-top main#page-content .w-text br,
    html body#page-top main#page-content .vc_column-inner br {
        display: none !important;
    }

    /* Fuerza 2 columnas ÚNICAMENTE en la galería de ficha de productos en móviles (pantallas <= 768px) */
    html body#page-top main#page-content .metalbyte-product-detail-gallery .metalbyte-detail-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body#page-top main#page-content .metalbyte-product-detail-gallery .metalbyte-gallery-item,
    html body#page-top main#page-content .metalbyte-product-detail-gallery .metalbyte-gallery-item img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   REEMPLAZO DIRECTO POR EL PNG TRANSPARENTE LIMPIO PROVISTO
   ========================================================================== */
a[href*="whatsapp"],
a[href*="wa.me"],
a[href*="whatsapp"] *,
a[href*="wa.me"] * {
    background-color: transparent !important;
    background-image: none !important;
}

a[href*="whatsapp"] img,
a[href*="wa.me"] img,
img[src*="whatsapp"],
img[alt*="whatsapp" i],
.w-image a[href*="whatsapp"] img,
.vc_single_image-wrapper a[href*="whatsapp"] img,
.w-image-h img[src*="whatsapp"] {
    content: url('https://demiatest.sytes.net:5033/wp-content/uploads/2026/07/whatsapp-icon-clean.png') !important;
    border-radius: 50% !important;
    clip-path: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    background-color: transparent !important;
    object-fit: contain !important;
}