/* === PALETA DE COLORES (Basada en el Logo RC) === */
:root {
    /* Ese gris verdoso técnico del centro del logo */
    --color-primario: #8c9693; 
    /* El gris oscuro del borde del logo */
    --color-secundario: #383838; 
    /* Un color de acento para botones (Naranjo minero para resaltar sobre el gris) */
    --color-acento: #e67e22; 
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* === BARRA DE NAVEGACIÓN === */
.navbar {
    /* Usamos el gris oscuro del borde del logo */
    background-color: var(--color-secundario) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.logo-img {
    height: 50px; /* Tamaño controlado del logo */
    border-radius: 50%; /* Asegura que se mantenga redondo */
    border: 2px solid white; /* Un bordecito fino para que resalte */
}

.navbar-brand span {
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.2rem;
    vertical-align: middle;
}

header#inicio {
    /* Mantenemos la sombra oscura para leer el texto */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url('img/autoclave.png');
    
    background-size: cover;       /* Cubre todo el espacio sin deformarse */
    background-position: center;  /* Centra la máquina */
    background-repeat: no-repeat; /* Para que no se repita si la pantalla es gigante */
    
    /* BORRAMOS o COMENTAMOS la línea de "background-attachment: fixed" */
    /* background-attachment: fixed; <--- ESTO CAUSABA EL ZOOM EXCESIVO Y EL BORROSO */
}

h1 {
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* === BOTONES === */
/* Personalizamos el botón para que destaque */
.btn-warning {
    background-color: var(--color-acento);
    border-color: var(--color-acento);
    color: white;
    padding: 12px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    background-color: #d35400; /* Un naranjo más oscuro al pasar el mouse */
    color: white;
    transform: translateY(-2px); /* Efecto de elevación */
}

/* === SECCIONES === */
h2 {
    /* Los títulos de secciones usan el gris oscuro del logo */
    color: var(--color-secundario);
    position: relative;
    padding-bottom: 15px;
}

/* Una rayita debajo de los títulos para decorar */
h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background-color: var(--color-primario);
}

/* === SECCIÓN POLÍTICA DE CALIDAD === */
#calidad {
    /* Aquí usamos el gris del centro del logo como fondo */
    background-color: var(--color-primario) !important;
}

#calidad .border {
    background-color: rgba(255, 255, 255, 0.1); /* Efecto vidrio suave */
    border: 1px solid rgba(255,255,255,0.3) !important;
    transition: transform 0.3s;
}

#calidad .border:hover {
    transform: scale(1.05); /* Crece un poquito al pasar el mouse */
    background-color: rgba(255, 255, 255, 0.2);
}

/* === FOOTER === */
footer {
    background-color: #1a1a1a !important; /* Casi negro */
}
/* Efecto para las fotos de la galería */
.img-galeria {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.img-galeria:hover {
    transform: scale(1.03); /* Se agranda un poquito al pasar el mouse */
    opacity: 0.9;
}
/* === ESTILO CLIENTES (ACTUALIZADO) === */
.logo-cliente {
    /* ANTES: max-height: 90px; */
    max-height: 140px; /* AHORA: Mucho más grandes */
    width: auto;
    transition: transform 0.3s ease;
    /* Sin filtro gris, a todo color siempre */
}

.logo-cliente:hover {
    transform: scale(1.1); /* Efecto lupa suave al pasar el mouse */
}
/* === MEJORA VENTANA MODAL (FOTOS GRANDES) === */

/* Hacemos la "X" de cerrar mucho más grande y fácil de pinchar */
.modal-header .btn-close {
    transform: scale(2); /* Aumenta el tamaño al doble */
    margin-right: 10px; /* Un poquito de aire a la derecha */
    margin-top: 10px;   /* Un poquito de aire arriba */
    opacity: 1;         /* Que se vea bien blanca y nítida */
}

/* === MEJORA TEXTOS DE PROYECTOS (V2 - EQUILIBRADO) === */
#proyectos .card-text {
    font-size: 1.05rem !important; /* Un poquito más grande que lo normal, pero no gigante */
    font-weight: 500 !important;   /* 500 es "Semi-Negrita". Se nota, pero no es tan gruesa */
    color: #000 !important;        /* Negro absoluto para que se lea perfecto */
}