/* style.css - Estilos para Guiti Engineering */

/* 1. Variables de Color (Tu marca) */
:root {
    --guiti-dark: #0B2545;  /* Azul Oscuro */
    --guiti-cyan: #00A8CC;  /* Turquesa */
    --guiti-gray: #F4F7F6;  /* Fondo Gris Claro */
    --text-dark: #333333;
}

/* 2. Tipografía General */
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    overflow-x: hidden; /* Evita scroll horizontal */
}

h1, h2, h3, h4, h5 {
    font-weight: 700; /* Negrita fuerte para títulos */
}

/* 3. Ajustes del Menú (Navbar) */
.navbar {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave */
    padding-top: 15px;
    padding-bottom: 15px;
}

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

.nav-link:hover {
    color: var(--guiti-cyan) !important; /* Brillo turquesa al pasar el ratón */
}

/* 4. Botones Personalizados */
.btn-guiti {
    background-color: var(--guiti-cyan);
    color: white;
    padding: 10px 30px;
    border-radius: 50px; /* Bordes muy redondos */
    transition: all 0.3s ease;
}

.btn-guiti:hover {
    background-color: #008CB3; /* Un poco más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Efecto de elevación */
    box-shadow: 0 5px 15px rgba(0, 168, 204, 0.4);
}

/* 5. Tarjetas (Cards) de Productos */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-10px); /* La tarjeta flota hacia arriba */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
}

/* 6. Sección Hero (Portada) */
.hero h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra en el texto para leerse mejor */
}

/* 7. Footer */
footer a:hover {
    color: var(--guiti-cyan) !important;
    padding-left: 5px; /* Pequeño movimiento a la derecha */
    transition: all 0.3s ease;
}
/* Añade esto al final de style.css */
.text-cyan {
    color: var(--guiti-cyan) !important;
}
.text-primary-guiti {
    color: var(--guiti-dark) !important;
}
/* Añadir al final de style.css */

/* Contenedor fijo para los iconos de producto */
.product-icon-box {
    width: 70px;            /* Ancho fijo para todos */
    height: 70px;           /* Alto fijo para todos */
    display: flex;
    align-items: center;    /* Centra el logo verticalmente en la caja */
    justify-content: center;/* Centra el logo horizontalmente en la caja */
    margin-right: 15px;     /* Espacio hasta el texto */
    flex-shrink: 0;         /* Evita que la caja se aplaste en móviles */
}

/* Ajuste de la imagen dentro de la caja */
.product-icon-box img {
    max-width: 100%;        /* Nunca más ancho que la caja */
    max-height: 100%;       /* Nunca más alto que la caja */
    object-fit: contain;    /* La imagen se ajusta sin deformarse */
}
/* Añadir al final de style.css */

/* --- Estilos para el Carrusel Hero --- */

/* Asegura que la sección del hero tenga la altura correcta y posición relativa */
#inicio {
    position: relative;
    min-height: 90vh;
    overflow: hidden; /* Evita que nada se salga */
}

/* El carrusel se posiciona absolutamente detrás del texto */
#heroCarousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Se queda atrás */
}

/* Las imágenes deben ocupar todo el espacio sin deformarse */
.hero-img-fit {
    width: 100%;
    height: 90vh; /* Misma altura que la sección */
    object-fit: cover; /* Clave: recorta la imagen si es necesario para llenar el hueco */
}

/* El overlay oscuro se aplica a cada item del carrusel */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 37, 69, 0.7); /* Tu color azul oscuro con transparencia */
}

/* Corrección del Scroll para el Menú Fijo */
html {
    scroll-behavior: smooth; /* Hace que el desplazamiento sea suave y elegante */
}

section {
    /* Esto es la magia: obliga al navegador a detenerse 100px antes */
    /* Ajusta este valor si tu menú es más alto o más bajo */
    scroll-margin-top: 100px; 
}