@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* --- Variables de Color (Ajustar según el logo) --- */
:root {
    --primary-color: #005A9C;  /* Azul corporativo */
    --secondary-color: #003B69; /* Azul oscuro para acentos */
    --accent-color: #F5A623;   /* Un acento opcional (ej. naranja/amarillo) */
    --light-gray-color: #f4f4f4;
    --dark-gray-color: #333;
    --white-color: #ffffff;
}

/* --- Estilos Generales y Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Ajuste para el header pegajoso. 80px es la altura del header. */
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: var(--dark-gray-color);
    background-color: var(--white-color);
}

strong {
    color: var(--accent-color);
}

/* --- Barra de Navegación --- */
.header {
    background-color: var(--white-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 80px;
    transition: height 0.4s ease;
}

.logo img {
    height: 50px;
    width: auto;
    transition: height 0.4s ease;
}

.nav-menu {
    list-style: none;
    display: flex;
}

.nav-menu li {
    margin-left: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: var(--dark-gray-color);
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: var(--primary-color);
}

/* --- Secciones Generales --- */
.content-section, .products-section, .contact-section {
    padding: 4rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

h1, h2, h3 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }
p { margin-bottom: 1rem; max-width: 800px; margin-left: auto; margin-right: auto; }

/* --- Botón de Llamada a la Acción (CTA) --- */
.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.cta-button:hover {
    background-color: var(--secondary-color);
}

/* --- Header Scrolled State --- */
.header.is-scrolled .nav-bar {
    height: 65px; /* Altura reducida */
}

.header.is-scrolled .logo img {
    height: 40px; /* Logo reducido */
}

/* --- Section Dividers --- */
.hero-section,
.about-section,
.products-section,
.commitment-section,
.contact-section {
    /* Creates a diagonal cut at the bottom right of the section */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(40px, 8vw, 100px)), 0 100%);
    position: relative; /* Establishes a stacking context */
}

.about-section,
.products-section,
.commitment-section,
.contact-section,
.footer {
    /* Pulls the section up to overlap the clipped area of the section above */
    margin-top: calc(-1 * clamp(40px, 8vw, 100px));
    position: relative;
}

/* Adjust section padding to account for the overlap and clipping */
.hero-section {
    padding-bottom: clamp(40px, 8vw, 100px);
}
.about-section, .contact-section {
    padding-top: calc(4rem + clamp(40px, 8vw, 100px));
    padding-bottom: calc(4rem + clamp(40px, 8vw, 100px));
}
.products-section {
    padding-top: calc(2.5rem + clamp(40px, 8vw, 100px)); /* Espacio superior reducido */
    padding-bottom: calc(4rem + clamp(40px, 8vw, 100px));
}
.footer {
    padding-top: calc(2rem + clamp(40px, 8vw, 100px));
    clip-path: none; /* The footer should not be clipped */
}

/* --- Estilo de collage para la sección "Nuestra Empresa" --- */
.about-section p {
    margin-bottom: 2.5rem; /* Más espacio antes del botón */
}

/* Mejoras para la sección de Calidad */
.commitment-section h2 {
    text-align: center; /* Asegura que el título esté centrado */
}

.commitment-section {
    padding: calc(4rem + clamp(40px, 8vw, 100px)) 2rem calc(4rem + clamp(40px, 8vw, 100px));
}

.commitment-section p {
    max-width: 900px; /* Aumenta el ancho máximo para el texto */
    font-size: 1.15rem; /* Aumenta el tamaño de la fuente para mejor legibilidad */
    line-height: 1.8; /* Mejora el interlineado */
    margin-left: auto;
    margin-right: auto;
}

/* --- Estilos de Secciones Específicas --- */
.hero-section {
    background: linear-gradient(rgba(0, 59, 105, 0.7), rgba(0, 59, 105, 0.7)), url('../img/maquina1.jpg') no-repeat center center/cover;
    color: var(--white-color);
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 2rem;
}

.hero-content h1 {
    color: var(--white-color);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.products-section {
    background-color: var(--light-gray-color);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem; /* Espacio ajustado entre título y tarjetas */
}

.product-card {
    background: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    opacity: 0; /* Inicialmente oculto */
    transform: translateY(50px); /* Ligeramente desplazado hacia abajo */
    transition: opacity 0.6s ease-out, transform 0.4s ease-out, box-shadow 0.4s ease-out; /* Transición suave para todo */
}

.product-card:hover {
    /* El transform de is-visible se sobreescribe por este al hacer hover */
    transform: translateY(-8px); /* Levanta la tarjeta al pasar el mouse */
    box-shadow: 0 12px 24px rgba(0, 90, 156, 0.2); /* Sombra más pronunciada y con color corporativo */
}

.product-card.is-visible {
    opacity: 1; /* Visible */
    transform: translateY(0); /* Posición original */
}

.product-card img {
    width: 100%;
    height: 160px; /* Reduce card image height */
    object-fit: contain;
    transition: transform 0.4s ease-in-out; /* Transición para el zoom de la imagen */
}

.product-card:hover img {
    transform: scale(1.05); /* Efecto de zoom en la imagen */
}

.product-card h3, .product-card p {
    padding: 1rem;
    text-align: left;
}

.commitment-section {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.commitment-section h2 {
    color: var(--white-color);
}

.contact-section {
    background-color: var(--light-gray-color);
}

.contact-details {
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.contact-details p {
    margin-bottom: 0.5rem;
    max-width: 100%; /* Anular el max-width de los p generales */
}

.contact-form {
    max-width: 600px;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
}

/* --- Footer --- */
.footer {
    background-color: var(--dark-gray-color);
    color: var(--light-gray-color);
    text-align: center;
    padding: 2rem;
}
/* --- Hamburger Menu Button --- */
.nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger {
    display: block;
    position: relative;
    width: 25px;
    height: 3px;
    background: var(--dark-gray-color);
    transition: all 0.2s ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background: var(--dark-gray-color);
    transition: all 0.2s ease-in-out;
    left: 0;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}
/* --- Responsive Design (Media Queries) --- */
@media (max-width: 768px) {
    .nav-toggle {
        display: block; /* Show on mobile */
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Start off-screen */
        width: 70%;
        height: 100vh;
        background-color: var(--light-gray-color);
        flex-direction: column;
        padding-top: 5rem;
        align-items: center;
        transition: right 0.4s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    .nav-menu.is-active {
        right: 0; /* Slide in */
    }

    .nav-menu li {
        margin-left: 0;
        margin-bottom: 2rem;
    }

    /* Animation for hamburger to 'X' */
    .nav-toggle.is-active .hamburger {
        background: transparent;
    }
    .nav-toggle.is-active .hamburger::before {
        transform: rotate(45deg) translate(5px, 7px);
    }
    .nav-toggle.is-active .hamburger::after {
        transform: rotate(-45deg) translate(5px, -7px);
    }

    /* --- Tipografía y Secciones --- */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    .content-section, .products-section, .contact-section {
        padding: 3rem 1.5rem;
    }