@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

    :root { 
        --navy: #002366; 
        --gold: #c5a059;
        --bs-primary: #002366; 
        --bs-primary-rgb: 0, 35, 102;
        --primary-navy: #002366;
        --soft-blue: #f0f4f8;
    }
    body { 
        font-family: "Sora", sans-serif;
        color: #333;
        overflow-x: hidden;
    }
        
/* Navbar*/
    .navbar {
        min-height: 80px;
    }

    .nav-link {
        transition: color 0.3s ease;
    }

    .nav-link:hover {
        color: #c5a059 !important;
    }

    /* Estilo del botón */
    .btn-warning {
        background-color: #f6b642;
        border: none;
        color: #1a1a1a;
        font-size: 0.9rem;
    }

    .btn-warning:hover {
        background-color: #e5a532;
        transform: scale(1.02);
    }

    /* Separación visual para el dropdown */
    .dropdown-menu {
        border-top: 3px solid #002366 !important;
    }
        
/* Hero*/
    .hero{
        min-height: 80vh; 
        display: flex; 
        align-items: center;
    }
/*cuadros*/
    #empresa {
    /* Asegura que no haya colapso de márgenes */
    overflow: hidden; 
    padding-top: 100px !important; 
    padding-bottom: 100px !important;
    }
    #empresa span.text-primary {
        display: inline-block;
        position: relative;
        padding-bottom: 10px;
    }
    .bg-primary-light {
        background-color: rgba(var(--bs-primary-rgb), 0.1);
    }
    
    .bg-primary-soft {
        background-color: rgba(13, 110, 253, 0.08);
    }

    .text-primary {
        color: var(--bs-primary) !important;
    }

    /* Efectos de la tarjeta para que se vea premium */
    .card {
        transition: all 0.3s ease-in-out;
    }

    .transition-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important;
    }

    .display-4 {
        font-size: 2.5rem; /* Ajuste para que no sea *demasiado* grande */
    }


    @media (min-width: 768px) {
        .display-4 {
            font-size: 3rem;
        }
    }


/*productos*/
    .bg-navy {
        background-color: var(--navy); 
        color: white;
    }
    .case-item {
        cursor: pointer;
        opacity: 0.5;
        transition: all 0.3s ease;
        padding-bottom: 10px;
        border-bottom: 2px solid transparent;
    }
    .case-item:hover, .case-item.active {
        opacity: 1;
        border-bottom-color: #ffc107; 
    }
    .transition-fade {
        transition: opacity 0.5s ease-in-out;
    }
    .bg-custom-dark {
        background-color: #1a1d20 !important;
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
    }


/**/
    .bg-primary-soft { background-color: rgba(0, 35, 102, 0.08); }
    .text-primary { color: var(--primary-navy) !important; }

    /* Estilos del Navegador Redondeado */
    .case-item {
        cursor: pointer;
        background: white;
        border: 2px solid transparent !important;
        transition: all 0.3s ease-in-out;
    }

    /* Estado Hover (Al pasar el mouse) */
    .case-item:hover {
        background: #f8f9fa;
        transform: translateY(-5px); /* Pequeño levante */
    }

    /* Estado Activo (Seleccionado) */
    .case-item.active {
        background: white;
        border-color: var(--primary-navy) !important; 
        box-shadow: 0 10px 30px rgba(0,35,102,0.12) !important;
    }

    /* Icono del estado activo cambia de color */
    .case-item.active .icon-box {
        background-color: var(--primary-navy);
        color: white !important;
    }

    /* Utilidades de espaciado */
    .ls-1 { letter-spacing: 1px; }
    .transition-all { transition: all 0.3s ease-in-out; }


/* Superposición del Formulario sobre el Mapa */
    .text-primary {
        color: #002366 !important;
    }
    .contact-card-overlap {
        position: relative;
        z-index: 100; /* Asegura que el cuadro esté arriba */
        margin-bottom: -150px; /* Empuja el mapa "debajo" del cuadro */
        background: #ffffff;
    }

    .map-container {
        height: 500px;
        width: 100%;
        position: relative;
        z-index: 1; /* El mapa queda en la capa base */
    }

    /* Estilo de los inputs */
    #contacto .form-control {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 12px 15px;
        color: #1a202c;
    }
    #contacto .form-control:focus {
        border-color: #002366;
        box-shadow: 0 0 0 0.25rem rgba(0, 35, 102, 0.1);
    }
    #contacto .form-control::placeholder {
        color: #a0aec0;
    }

    #recubrimientos .card {
        transition: transform 0.3s ease;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }

    #recubrimientos .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }

    /* --- Estilos para la Galería Industrial --- */

    #galeria .position-relative {
        overflow: hidden; /* Esto es vital para que la imagen no se salga al crecer */
        cursor: pointer;
        background-color: #f8f9fa;
    }

    /* El efecto de Zoom */
    #galeria .transition-zoom {
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Transición suave y elegante */
    }

    #galeria .position-relative:hover .transition-zoom {
        transform: scale(1.1); /* Amplía la imagen un 10% */
    }

    /* Efecto de Overlay (Sombra sutil al pasar el mouse) */
    #galeria .position-relative::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    #galeria .position-relative:hover::after {
        opacity: 1;
    }

    /* Ajuste para que las imágenes ocupen todo su contenedor */
    #galeria .object-fit-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /*CALL TO ACTION*/
    .bg-grafito {
        background-color: #0f1e30;
    }
    .italic-fancy {
        font-style: italic;
        letter-spacing: 0.5px;
    }
    .text-muted-custom {
        color: rgba(255,255,255,0.5);
        letter-spacing: 2px;
    }
    .text-primary-light {
        color: #00aaff;

    }

    /* Ajusta el grosor de todos los iconos de Tabler */
    .ti {
    stroke-width: 1.5;
    }


    /*EMPRESA pagina*/
    /* Altura del Hero de Nosotros */
    .section-hero-nosotros {
        min-height: 60vh;
        background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/planta-marquet.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* Efecto parallax sutil */
    }

    .py-6 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .tracking-wider {
        letter-spacing: 2px;
    }

    .italic {
        font-style: italic;
    }

    .card {
        transition: transform 0.3s ease;
    }
    .card:hover {
        transform: translateY(-5px);
    }

    .display-4 {
        color: #FFC107;
        font-weight: 800;
    }
    .opacity-50 {
        color: #adb5bd;
        letter-spacing: 2px;
    }

    /* Estilo para el Hero de la Página Inicial con Macro-Fotografía */
    .hero-home-macro {
        min-height: 85vh; /* Altura imponente */
        background-image: 
            /* Overlay: Oscurecemos más la izquierda para el texto y dejamos ver la foto a la derecha */
            linear-gradient(to right, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.2) 100%), url('images/tableta.png'); 
        background-size: cover;
        background-position: center right;
        background-attachment: fixed; /* Efecto parallax elegante */
        position: relative;
    }

    .tracking-widest {
        letter-spacing: 3px;
    }
    .hero-home-macro h1 {
        text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    @media (max-width: 768px) {
        .hero-home-macro {
            /* En móvil oscurece la imagen por legibilidad */
            background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/tableta.png');
            background-attachment: scroll; /* Desactivar parallax en móvil por rendimiento */
            text-align: center;
        }
    }


    /* Ajustes para dispositivos móviles (quitar superposición en pantallas pequeñas) */
    @media (max-width: 991px) {
        .contact-card-overlap {
            margin-bottom: 20px;
            transform: translateY(0);
        }
        .map-container {
            height: 350px;
            margin-top: 50px;
        }
    }
    @media (min-width: 768px) {
        .border-end-md {
            border-right: 1px solid #dee2e6 !important;
        }
    }


    .footer-industrial {
        background-color: #212529;
    }

    .footer-link {
        color: rgba(255, 255, 255, 0.6); /* Blanco traslúcido */
        text-decoration: none;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .footer-link:hover {
        color: #004691 !important;
        padding-left: 5px; /* Pequeño efecto de movimiento */
    }
    .footer-industrial .ti {
        display: inline-block;
        line-height: 1;
    }

    .transition-zoom {
        transition: transform 0.5s ease;
    }
    .transition-zoom:hover {
        transform: scale(1.1);
    }