:root {
    /* El Negro del Engrane */
    --steel-black: #1A1A1B;
    /* El Gris Profundo del sombreado */
    --steel-dark: #333538;
    /* Plata Mate (del rostro) */
    --steel-silver: #A6A9AD;
    /* Fondo limpio industrial */
    --steel-light: #F8F9FA;
    /* ACENTO: Sustituimos el azul por un tono 'Gunmetal' o 'Bronze' 
       para mantener la elegancia del logo */
    --industrial-accent: #2D3136;
    --card-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* --- BASE --- */
body {
    background-color: #f4f7f9; /* Fondo gris-azulado para que resalten las cards */
    color: var(--steel-dark);
    font-family: 'Segoe UI', Roboto, sans-serif;
}
.steel-light {
    color: var(--steel-light);
}
.industrial-blue {
    color: var(--industrial-blue);
}
.steel-dark {
    color: var(--steel-dark);
}
/* --- NAVEGACIÓN --- */
/* --- AJUSTES DE NAVBAR Y LOGO --- */

/* 1. Reducimos la altura total de la Navbar para concentrar la atención */
.navbar {
    padding-top: 5px !important; /* Menos aire arriba */
    padding-bottom: 5px !important; /* Menos aire abajo */
    background-color: white !important; /* Asegurar fondo blanco */
}

/* 2. Hacemos el logo significativamente más alto */
.navbar-brand img {
    height: 80px !important; /* Aumentamos de 50px a 70px. Es un cambio drástico. */
    width: auto !important; /* Mantiene la proporción original */
    display: block;
    object-fit: contain;
    /* Pequeño toque Pro: Un ligero resplandor negro en el borde 
       para que se sienta aún más nítido contra el blanco */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* 3. Ajustamos los enlaces de navegación para que se alineen visualmente con el logo más grande */
.navbar-nav .nav-link {
    padding-top: 25px !important; /* Alineación vertical con el centro del logo */
    padding-bottom: 25px !important;
    text-transform: uppercase;
    font-weight: 700;
}
    .nav-link:hover {
        color: var(--steel-silver) !important;
    }

/* --- COMPONENTE: CARDS DE ACERO (SISTEMA UNIFICADO) --- */
.steel-card-base {
    border: none !important;
    border-top: 5px solid #D4A017 !important; /* El borde superior grueso */
    border-radius: 4px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden;
}
    .steel-card-base:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
    }

/* En lugar de colores, usa intensidades de gris para las categorías */
.steel-dark-card {
    border-top: 4px solid var(--steel-black) !important;
}

.aluminium-silver-card {
    border-top: 4px solid var(--steel-silver) !important;
}


.border-grey {
    border-left: var(--steel-silver)
}
/* Headers con fondo tenue para dar profundidad */
.card-header-tech {
    background-color: #f8fafd !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 20px !important;
}

/* --- CARD DE GRADO ESPECIAL / PREMIUM --- */
.steel-premium-card {
    background: white !important;
    border: 1px solid var(--steel-silver) !important;
    /* Un borde superior más grueso en el color del badge para amarrar el diseño */
    border-top: 5px solid #D4A017 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(212, 160, 23, 0.1); /* Sombra con un toque ámbar */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

    .steel-premium-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(212, 160, 23, 0.15);
        border-color: #D4A017 !important;
    }

/* El Badge de Advertencia/Especializado */
.badge-industrial-warning {
    /*background-color: #D4A017;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 5px 12px;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    display: inline-block;*/
    background-color: #D4A017;
    color: white;
    /*border: 1px solid var(--steel-silver);*/ /* Un pequeño relieve metálico */
}

/* Especial: Aluminio y Estructural (Borde Superior) */

.steel-structure-card {
    border-top: 5px solid var(--steel-dark) !important;
}

/* --- TIPOGRAFÍA TÉCNICA --- */
.steel-grade {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--steel-black);
    letter-spacing: -0.5px;
    line-height: 1;
}
/* Badge Base (Mantenemos la estructura técnica) */
.badge-tech {
    border-radius: 4px; /* Menos redondeado = más industrial */
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    border: 1px solid transparent;
}

/* Antiguo Rojo (Maquinaria) -> Negro Carbón */
/* Representa la dureza y el núcleo del engrane de tu logo */
.badge-maquinaria {
    background-color: var(--steel-black);
    color: #FFFFFF;
    border: 1px solid var(--steel-dark); /* Un pequeño relieve metálico */
}

/* Antiguo Azul (Herramental) -> Gris Acero / Silver */
/* Representa la precisión y el rostro de la efigie */
.badge-herramental {
    background-color: var(--steel-silver);
    color: var(--steel-black);
    border: 1px solid var(--steel-silver);
}

/* Badge Neutro (Bajo Carbón / Otros) */
.badge-neutral {
    background-color: #e9ecef;
    color: var(--steel-gray);
    border: 1px solid #dee2e6;
}
/* OPCIONAL: Un "Gold/Amber" para alertas o 'Nuevos' sin perder la clase */
.badge-industrial-warning {
    background-color: #D4A017; /* Un oro viejo, no amarillo brillante */
    color: white;
}

/* --- BOTONES INDUSTRIALES --- */
.btn-steel {
    background: linear-gradient(145deg, #2b2b2b, #1a1a1a); /* Imita el degradado del logo */
    color: #ffffff;
    border: 1px solid var(--steel-black);
    border-radius: 4px; /* Bordes menos redondeados = más industrial */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 4px 4px 8px #d1d1d1, -2px -2px 4px #ffffff; /* Sutil relieve */
}

    .btn-steel:hover {
        background: var(--steel-black);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(10,0,0,0.3);
    }

    /* CLICK */

    .btn-steel:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
    }
.btn-steel-outline {
    background: transparent;
    color: #2b2b2b;
    border: 1px solid #2b2b2b;
    padding: 10px 22px;
    font-weight: 600;
    transition: all 0.25s ease;
}

    .btn-steel-outline:hover {
        background: #2b2b2b;
        color: #fff;
    }


/* --- UTILIDADES --- */
.section-padding {
    padding: 80px 0;
}
.hero {
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('/img/steel-texture.jpg');
    background-size: cover;
    background-position: center;
}
.top-products .list-group-item {
    transition: background 0.2s ease;
}

    .top-products .list-group-item:hover {
        background: #f5f5f5;
    }

/* Agrega esto a tu CSS */
.category-header {
    padding: 60px 0 40px;
    background-color: #f8fafd; /* Un gris apenas más oscuro que el fondo general */
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 40px;
}

.category-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--steel-black);
    letter-spacing: -1px;
    text-transform: uppercase;
}

.category-subtitle {
    color: var(--steel-gray);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 10px auto 0;
}

.category-card {
    transition: transform 0.3s ease, shadow 0.3s ease;
    border-radius: 12px;
}

    .category-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    }

.category-img-wrapper {
    position: relative;
    transition: transform 0.5s ease;
}

.category-card:hover .category-img-wrapper {
    transform: scale(1.05);
}

.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.4));
}

.category-icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: -45px; /* Saca el icono un poco hacia la imagen */
    z-index: 2;
    position: relative;
}

.service-card {
    transition: transform 0.3s ease, shadow 0.3s ease;
}

    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
    }

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.category-title {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 900;
    color: var(--steel-black);
    letter-spacing: 2px; /* Más aire, más elegancia */
    border-left: 8px solid var(--steel-black); /* Referencia a la solidez del engrane */
    padding-left: 20px;
}

/* --- MINI HERO CON MINERVA DE PLATA "GRABADA" --- */
.mini-hero-industrial {
    background: linear-gradient(135deg, var(--steel-black) 0%, #252526 100%);
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    border-bottom: 4px solid #D4A017;
}

    /* El Isologo Gigante y Sutil (Técnica de Máscara) */
    /* --- AJUSTE DE ISOTIPO EN MINI-HERO --- */
    .mini-hero-industrial::after {
        content: '';
        position: absolute;
        /* Movemos el logo más hacia el centro (estaba en -10%) */
        right: 2%;
        /* Lo subimos un poco (estaba en -15%) */
        bottom: -18%;
        /* Aumentamos el tamaño para que sea el protagonista del fondo */
        width: 550px;
        height: 550px;
        /* Mantenemos tu técnica de máscara */
        mask-image: url('/img/GDLMetals_mw.webp');
        -webkit-mask-image: url('/img/GDLMetals_mw.webp');
        mask-size: contain;
        mask-repeat: no-repeat;
        /* Color plata metálico sutil */
        background: var(--steel-silver);
        /* Bajamos la opacidad un poco más si el logo es más grande, 
       para que no distraiga de la lectura del título */
        opacity: 0.04;
        /* Reducimos la rotación para que el rostro sea más legible */
        transform: rotate(-5deg);
        pointer-events: none;
        z-index: 1;
    }
.mini-hero-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.mini-hero-subtitle {
    color: var(--steel-silver);
    font-size: 1rem;
    font-weight: 400;
    max-width: 600px;
}

/* Breadcrumbs (Navegación) */
.hero-breadcrumb {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

    .hero-breadcrumb a {
        color: #D4A017;
        text-decoration: none;
    }

    .hero-breadcrumb span {
        color: rgba(255,255,255,0.4);
    }

.seccion-cards-industrial {
    background-color: #f8f9fa;
    /* Patrón de puntos tipo ingeniería */
    background-image: radial-gradient(#d1d1d1 0.8px, transparent 0.8px);
    background-size: 24px 24px;
    padding: 60px 0;
    position: relative;
}

    /* El degradado sutil para suavizar el golpe del negro al gris */
    .seccion-cards-industrial::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
    }

/* Estilo específico para las cards de CATEGORÍA */
/* Estilo unificado para los renders en las cards */
.render-container {
    height: 180px;
    background: #fdfdfd;
    border-radius: 12px;
    overflow: hidden;
}

.render-img {
    max-height: 140px;
    /* El drop-shadow ayuda a que el render "salte" del fondo blanco */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.08));
    transition: transform 0.3s ease;
}

.category-card-render:hover .render-img {
    transform: scale(1.05) rotate(2deg); /* Un pequeño movimiento orgánico al pasar el mouse */
}

.category-link-text {
    color: #D4A017 !important; /* Tu Dorado de GDL Metals */
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* --- SERVICIOS INDUSTRIALES --- */
.service-card-industrial {
    border: none !important;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    transition: all 0.4s ease;
    border-radius: 8px !important;
    overflow: hidden;
}

.service-img-wrapper {
    overflow: hidden;
    height: 200px;
}

    .service-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

.service-card-industrial:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* El toque dorado al hacer hover, similar a las cards de materiales */
.service-card-industrial::after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
    background: #D4A017;
    transition: width 0.4s ease;
}

.service-card-industrial:hover::after {
    width: 100%;
}

.service-card-industrial:hover img {
    transform: scale(1.1);
}