/* ---- ESTILOS GENERALES Y HERO ---- */

html {
    scroll-behavior: smooth; /* Hace que el salto entre secciones sea suave */
}

.hero-section {
    position: relative;
    min-height: 80vh; /* Ocupa el 80% del alto de la pantalla */
    background-color: #0f172a; /* Color azul oscuro de respaldo si no hay imagen */
    background: linear-gradient(135px, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%), 
                url('../img/hero-bg.jpg') center/cover no-repeat;
}


.hero-section h1 {
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Animación sutil para el icono de la derecha */
.hero-icon-box i {
    display: inline-block;
    animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* Personalización del botón principal */
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px); /* Efecto de elevación al pasar el mouse */
}
/* ---- SECCIÓN SERVICIOS ---- */

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

.service-card:hover {
    transform: translateY(-8px); /* Eleva la tarjeta sutilmente */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

.icon-box {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ---- AJUSTES DE IMÁGENES EN TARJETAS ---- */

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

.service-img {
    height: 200px; /* Determina un alto fijo para que todas las tarjetas queden alineadas */
    object-fit: cover; /* Recorta la imagen automáticamente de forma armónica sin deformarla */
    transition: transform 0.5s ease;
}

/* Efecto visual: La imagen se amplía levemente al pasar el mouse */
.service-card:hover .service-img {
    transform: scale(1.06);
}
/* ---- SECCIÓN MARCAS OPTIMIZADA (MAYOR TAMAÑO) ---- */

.brand-item {
    min-height: 110px; /* Aumentamos la altura del contenedor */
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important; /* Quitamos el fondo gris para que no enmarque en pequeño */
    border: none !important; /* Eliminamos el borde del recuadro */
    transition: all 0.3s ease;
}

.brand-img {
    max-height: 85px; /* ¡Aumentado de 55px a 85px para máxima legibilidad! */
    max-width: 90%;  /* Evita que los logos anchos se salgan de su columna */
    object-fit: contain;
    filter: grayscale(100%); 
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Al pasar el mouse, el logo se agranda un poco más y toma color total */
.brand-item:hover {
    transform: scale(1.1); /* Efecto de acercamiento más pronunciado */
}

.brand-item:hover .brand-img {
    filter: grayscale(0%);
    opacity: 1;
}
/* ---- AJUSTE DE LOGO EN HERO ---- */

.hero-logo-container {
    transition: transform 0.4s ease;
}

.hero-logo-container:hover {
    transform: scale(1.04) rotate(1deg); /* Sutil efecto dinámico al pasar el cursor */
}