/* =========================================
   PALETA DE COLORES (Basada en tu logo)
   ========================================= */
:root {
    --rojo-principal: #E31221;
    --rojo-profundo: #A60A16;
    --blanco: #FFFFFF;
    --gris-plata: #f4f4f4; /* Un poco más claro que el plata puro para que el texto se lea mejor */
    --gris-carbon: #212529;
}

/* =========================================
   ESTILOS GENERALES Y UTILIDADES
   ========================================= */
body {
    color: var(--gris-carbon);
}

.section-padding { 
    padding: 80px 0; 
}

.bg-light-gray { 
    background-color: var(--gris-plata); 
}

.title-line {
    width: 60px; 
    height: 3px; 
    background-color: var(--rojo-principal);
}

/* =========================================
   BOTONES E ÍCONOS PERSONALIZADOS (Sobrescribiendo Bootstrap)
   ========================================= */
.btn-primary {
    background-color: var(--rojo-principal);
    border-color: var(--rojo-principal);
    color: var(--blanco);
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
    background-color: var(--rojo-profundo) !important;
    border-color: var(--rojo-profundo) !important;
    color: var(--blanco) !important;
}

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

/* =========================================
   SECCIÓN INICIO (HERO)
   ========================================= */
.hero-section {
    /* Agregamos un degradado oscuro con un levísimo tinte de tu rojo profundo para que combine perfecto */
    background: linear-gradient(rgba(33, 37, 41, 0.85), rgba(166, 10, 22, 0.6)), url('../img/portada.webp') center/cover;
    color: var(--blanco);
    padding: 150px 0;
    text-align: center;
}

/* =========================================
   TARJETAS (SERVICIOS Y CÓMO TRABAJAMOS)
   ========================================= */
.service-card, 
.process-card {
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    background-color: var(--blanco);
}

.service-card:hover, 
.process-card:hover { 
    transform: translateY(-5px); 
    /* Sombra con un toque de tu rojo principal al pasar el mouse */
    box-shadow: 0 8px 15px rgba(227, 18, 33, 0.15); 
}

.icon-box {
    font-size: 2.5rem;
    color: var(--rojo-principal);
    margin-bottom: 15px;
}

/* =========================================
   BARRA DE NAVEGACIÓN (Mobile First)
   ========================================= */

/* 1. Estilos Base (Aplican a celulares por defecto) */
.navbar-light .navbar-nav .nav-link {
    color: var(--gris-carbon) !important;
    transition: color 0.3s ease;
    padding: 10px 15px; /* Da un área táctil cómoda para el dedo en móviles */
}

/* Cambia el color a rojo al tocar/pasar el mouse o estar activo (en todas las pantallas) */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--rojo-principal) !important;
}

/* El título de la marca cambia de color sutilmente */
.navbar-light .navbar-brand:hover {
    color: var(--rojo-principal) !important;
    transition: color 0.3s ease;
}

/* =========================================
   EFECTO SUBRAYADO (Solo para Pantallas Grandes)
   ========================================= */
@media (min-width: 992px) {
    
    /* Preparamos el enlace para alojar la línea */
    .navbar-light .navbar-nav .nav-link {
        position: relative;
        padding-bottom: 5px; 
    }

    /* Creamos la línea invisible (ancho 0) en el centro */
    .navbar-light .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 3px;
        bottom: 0;
        left: 50%;
        background-color: var(--rojo-principal);
        transition: all 0.3s ease-in-out;
        transform: translateX(-50%);
    }

    /* La línea crece al hacer hover o estar activo */
    .navbar-light .navbar-nav .nav-link:hover::after,
    .navbar-light .navbar-nav .nav-link.active::after {
        width: 80%;
    }

    
}
/* =========================================
   FIRMA DEL DESARROLLADOR (FOOTER)
   ========================================= */
.hover-firma {
    transition: color 0.3s ease;
}

.hover-firma:hover {
    color: var(--blanco) !important;
    text-decoration: underline !important;
}