html {
    /* Esto hace que al navegar no sea un salto brusco, sino un deslizamiento elegante */
    scroll-behavior: smooth; 
}

section {
    /* ESTA ES LA CLAVE: */
    /* Le dice al navegador: "Cuando saltes aquí, deja 90px de aire arriba" */
    scroll-margin-top: 90px; 
}

/* --- RESET Y VARIABLES --- */
        :root {
            --primary-color: #2563eb;
            --text-color: #333;
            --bg-light: #f3f4f6;
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
        }

        /* --- NAVEGACIÓN --- */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            background-color: var(--white);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        /* Estilo del Logo Minimalista */
        .logo {
            font-family: 'Montserrat', sans-serif; /* Usamos la fuente nueva */
            font-size: 1.8rem;     /* Tamaño grande */
            font-weight: 800;      /* Extra negrita (Extra Bold) */
            color: #000000;        /* Color negro puro */
            letter-spacing: -1px;  /* Las letras un poco más juntas para que se vea compacto */
            text-transform: uppercase; /* Todo en mayúsculas */
            display: flex;
            align-items: center;

            /* --- AGREGA ESTA LÍNEA PARA QUITAR EL SUBRAYADO DEL ENLACE --- */
            text-decoration: none; 
    
            /* Opcional: Un pequeño efecto al pasar el mouse */
            transition: opacity 0.3s;
        }

        /* Opcional: Efecto hover para que sepa que es cliqueable */
        .logo:hover {
            opacity: 0.7;
        }

        /* Estilo específico para la parte "SRL" */
        .logo span {
            font-size: 1rem;       /* Más pequeño */
            font-weight: 700;      /* Un poco menos negrita */
            margin-left: 5px;      /* Separación del nombre principal */
            opacity: 0.8;          /* Un negro un poquito más suave */
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-color);
            margin-left: 20px;
            font-weight: 500;
        }

        .btn-cta {
            background-color: var(--primary-color);
            color: white !important;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .btn-cta:hover {
            background-color: #1d4ed8;
        }

        /* --- HERO SECTION (La portada) --- */
        .hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4rem 5%;
            background-color: var(--bg-light);
            min-height: 80vh; /* Ocupa casi toda la pantalla */
        }

        .hero-text {
            flex: 1;
            padding-right: 2rem;
        }

        .hero-text h1 {
            font-size: 3rem;
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .hero-image {
            flex: 1;
            text-align: center;
        }

        .hero-image img {
            max-width: 100%;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        /* --- CARACTERÍSTICAS (Grid) --- */
        .features {
            padding: 1rem 5% 4rem 5%;
            text-align: center;
        }

        .features-grid {
            display: flex;
            flex-wrap: wrap;         
            justify-content: center;
            gap: 2rem;
            margin-top: 3rem;
            width: 100%;
        }

        .feature-card {
            padding: 2rem;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            width: 400px; 
            max-width: 100%;
        }

        /* --- RESPONSIVE (MEDIA QUERIES) --- */
        /* Aquí ocurre la magia para celulares */
        @media (max-width: 768px) {
            .hero {
                flex-direction: column; /* Apila elementos verticalmente */
                text-align: center;
                padding-top: 2rem;
            }

            .hero-text {
                padding-right: 0;
                margin-bottom: 2rem;
            }

            .hero-text h1 {
                font-size: 2rem;
            }

            nav {
                /* IMPORTANTE: Cambiamos de column a row */
                flex-direction: row; 
    
                /* Esto empuja el logo al principio y el menú al final */
                justify-content: space-between; 
    
                /* Alineación vertical perfecta */
                align-items: center;
    
                padding: 1rem 5%;
            }
            
            .nav-links {
                display: flex;
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
            
            .nav-links a {
                margin-left: 0;
            }
        }

/* --- NUESTRAS MARCAS --- */
        .brands-section {
            padding: 4rem 5% 0 5%;
            text-align: center;
            background-color: var(--white); /* Fondo blanco para contraste */
        }

        .brands-section h2 {
            margin-bottom: 0.5rem;
        }

        .brands-section p {
            color: #666;
            margin-bottom: 1.5rem;
        }

        .brands-grid {
            display: grid;
            /* Esto crea columnas automáticas. Si la pantalla es chica, 
               pone menos columnas; si es grande, pone más. */
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 3rem;
            align-items: center; /* Centra los logos verticalmente */
            justify-items: center; /* Centra los logos horizontalmente */
        }

        .brand-item img {
            max-width: 100%;
            height: auto;
            /* Efecto visual: Escala de grises y opacidad reducida */
            /*filter: grayscale(100%) opacity(0.7); */
            transition: all 0.3s ease;
            cursor: pointer;
        }

        /* Al pasar el mouse, recupera el color y opacidad total */
        .brand-item img:hover {
            /*filter: grayscale(0%) opacity(1);*/
            transform: scale(1.1); /* Un pequeño zoom */
        }


/* --- SECCIÓN CTA (Oferta de Productos) --- */
.cta-section {
    padding: 3rem 5%;
    text-align: center; /* Todo centrado */
    background-color: white;
}

/* Título Principal */
.cta-section h2 {
    font-size: 2rem; /* Letra grande e impactante */
    color: #1a1a1a;    /* Negro casi puro */
    font-weight: 800;  /* Muy negrita (extra bold) */
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* La parte naranja del título */
.cta-section h2 span {
    color: var(--primary-color); /* Tu naranja corporativo */
    /* Si no tienes la variable, usa: color: #e87c26; */
}

/* Texto descriptivo */
.cta-section p {
    font-size: 1.2rem;
    color: #4b5563; /* Gris medio */
    max-width: 700px; /* Evita que el texto se estire demasiado a los lados */
    margin: 0 auto 3rem auto; /* Centrado y con espacio antes del botón */
    line-height: 1.6;
}

/* Botón Grande Naranja */
.btn-big-orange {
    display: inline-block;
    background-color: var(--primary-color); 
    
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 30px; /* Botón gordito y ancho */
    border-radius: 50px; /* Bordes totalmente redondos (Píldora) */
    box-shadow: 0 4px 15px rgba(232, 124, 38, 0.3); /* Sombra naranja suave */
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-big-orange:hover {
    transform: translateY(-3px); /* Se levanta al pasar el mouse */
    box-shadow: 0 8px 25px rgba(232, 124, 38, 0.5); /* Sombra más fuerte */
}

/* AJUSTE PARA CELULARES */
@media (max-width: 768px) {
    .cta-section h2 {
        font-size: 2rem; /* Achicar título en móvil */
    }
    
    .cta-section p {
        font-size: 1rem;
        padding: 0 10px;
    }
}

/* --- AJUSTE DE ESPACIOS (Features y Catálogos) --- */

/* 1. Busca la clase .features y asegúrate de que tenga poco espacio abajo */
.features {
    /* Mantenemos 4rem arriba y a los lados, pero solo 1rem abajo */
    padding: 1rem 5% 4rem 5%; 
}

.features h2 {
    margin-top: 0;
}

/* 2. Busca la clase .catalogs-section y redúcele el espacio de arriba */
.catalogs-section {
    /* Solo 1rem arriba, y mantenemos el resto igual */
    padding: 1rem 5% 4rem 5%; 
}

/* --- SECCIÓN CONTACTO --- */
.contact-section {
    padding: 4rem 5%;
    background-color: var(--bg-light); /* Fondo suave para separar visualmente */
}

.contact-container {
    display: flex;
    flex-wrap: wrap; /* Permite que caigan los elementos en móvil */
    gap: 4rem; /* Espacio entre el texto y el mapa */
    align-items: center; /* Centrado vertical */
}

/* Estilos de la Columna Info */
.contact-info {
    flex: 1; /* Ocupa el espacio disponible */
    min-width: 300px; /* Evita que se haga demasiado angosto */
}

.contact-info h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.contact-details {
    margin-top: 2rem;
}

.detail-item {
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--primary-color); /* Línea decorativa al lado */
}

.detail-item h3 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

/* Estilos de la Columna Mapa */
.map-container {
    flex: 1;
    min-width: 300px;
    height: 400px; /* Altura fija del mapa */
    background-color: #ddd; /* Color de carga mientras aparece el mapa */
    border-radius: 10px;
    overflow: hidden; /* Para que el mapa respete los bordes redondeados */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- BOTÓN CONTACTO CENTRADO --- */
.contact-btn-container {
    text-align: center; /* Centra el botón horizontalmente */
    margin-top: 3rem;   /* Espacio entre el mapa y el botón */
    width: 100%;        /* Asegura que ocupe todo el ancho para poder centrar */
}

/* Opcional: Si quieres que este botón sea un poco más grande que los otros */
.contact-btn-container .btn-cta {
    padding: 15px 40px;
    font-size: 1.1rem;
}

/* Ajuste específico para móviles (opcional, ya que flex-wrap hace el trabajo) */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column-reverse; /* Pone el mapa arriba y el texto abajo */
        gap: 2rem;
    }
    
    .map-container {
        width: 100%;
        height: 300px; /* Mapa un poco más bajo en celular */
    }
}

/* --- FOOTER CORPORATIVO --- */
.main-footer {
    background-color: #111; /* Negro casi puro para seriedad */
    color: #bbb; /* Texto gris suave */
    padding-top: 4rem;
    font-size: 0.95rem;
}

.footer-container {
    display: flex;
    flex-wrap: wrap; /* Permite adaptarse a celulares */
    
    /* CAMBIO CLAVE: 'space-evenly' las separa con simetría perfecta */
    justify-content: space-evenly; 
    
    /* Reducimos el gap para que no empuje la 3ra columna hacia abajo */
    gap: 2rem; 
    
    max-width: 1200px;
    margin: 0 auto; /* Centra el bloque entero en la pantalla */
    padding: 0 5% 3rem 5%;
    
    /* Alineación vertical superior para que todos los títulos empiecen igual */
    align-items: flex-start;
}

.footer-col {
    /* Base de 250px. Si sobra espacio crecen (1), si falta se encogen (1) */
    flex: 1 1 250px; 
    
    /* Opcional: Centrar el texto DENTRO de cada columna */
    /* Si prefieres el texto a la izquierda (como en la foto), borra la línea de abajo */
    /* text-align: center; */
}

/* Logo dentro del footer */
.footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}
.footer-logo span { color: var(--primary-color); }

/* Títulos de columnas */
.footer-col h4 {
    color: white;
    margin-bottom: 1.2rem;
    position: relative;
    padding-bottom: 10px;
    font-size: 1.1rem;
}
/* Pequeña línea decorativa debajo del título */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}

/* Listas de enlaces */
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { 
    color: #bbb; 
    text-decoration: none; 
    transition: 0.3s; 
}
.footer-col ul li a:hover { 
    color: var(--primary-color); 
    padding-left: 5px; /* Efecto de movimiento al tocar */
}

/* Iconos de contacto */
.footer-col i { 
    color: var(--primary-color);
    margin-right: 10px; 
    width: 20px; 
    text-align: center; 
}

/* Redes Sociales en Footer */
.social-icons-footer { margin-top: 1rem; display: flex; gap: 10px; }
.social-icons-footer a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    
    /* ESTAS 3 LÍNEAS CENTRAN EL ICONO: */
    display: flex;
    justify-content: center; /* Centro horizontal */
    align-items: center;     /* Centro vertical */
    
    border-radius: 5px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* El dibujo del icono (i) */
.social-icons-footer a i {
    font-size: 1.2rem;
    margin: 0; /* Quitamos márgenes basura que lo desvíen */
}

.social-icons-footer a:hover { 
    background: var(--primary-color);
    transform: translateY(-3px);
}

/* Barra inferior de copyright */
.footer-bottom {
    background-color: #000;
    text-align: center;
    padding: 1.5rem;
    border-top: 1px solid #222;
    font-size: 0.85rem;
}


/* --- ESTILOS DE LA PÁGINA DE CONTACTO --- */

.page-header {
    background-color: var(--bg-light);
    padding: 3rem 5%;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.contact-page-section {
    padding: 4rem 5%;
}

.contact-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    /* Divide en 2 columnas: El formulario ocupa un poco más (1.5fr) */
    grid-template-columns: 1.5fr 1fr; 
    gap: 4rem;
}

/* Estilos del Formulario */
.form-column {
    background: var(--white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}

.form-column h2 {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Inputs y Textarea */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(37, 99, 235, 0.2);
}

.btn-submit {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
}

/* Estilos Columna Derecha (Info + Mapa) */
.info-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-card {
    background: var(--primary-color);
    color: white;
    padding: 2rem;
    border-radius: 10px;
}

.info-card h3 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.contact-list {
    list-style: none;
}

.contact-list li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.map-wrapper {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 100%; /* Ocupa el resto del alto disponible */
    min-height: 300px;
}

/* --- RESPONSIVE CONTACTO --- */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 3rem;
    }
    
    .contact-page-section {
        padding: 2rem 5%;
    }
}

/* --- ESTILOS DEL MENÚ HAMBURGUESA --- */

/* 1. En PC, el botón de las 3 rayitas no se debe ver */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px; /* Espacio entre rayitas */
}

/* El dibujo de las rayitas */
.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* 2. REGLAS PARA CELULARES (Pantallas menores a 768px) */
@media (max-width: 768px) {
    
    /* Mostrar el botón hamburguesa */
    .menu-toggle {
        display: flex; 
        z-index: 1001; /* Asegura que quede encima de todo */
    }

    /* Ocultar los enlaces normales y convertirlos en caja flotante */
    .nav-links {
        display: none; /* Oculto por defecto */
        width: 100%;
        position: absolute;
        top: 70px; /* Altura de tu barra de navegación */
        left: 0;
        background-color: var(--white);
        flex-direction: column;
        align-items: center;
        padding: 2rem 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 1000;
        border-top: 1px solid #eee;
    }

    /* CLASE MÁGICA: Cuando JS agregue esta clase, el menú aparecerá */
    .nav-links.active {
        display: flex;
        animation: slideDown 0.3s ease forwards;
    }

    .nav-links a {
        margin: 1rem 0; /* Más espacio entre opciones para el dedo */
        font-size: 1.2rem;
    }
    
    /* Ajuste para que el botón de contactar no se vea raro en el menú */
    .nav-links .btn-cta {
        margin-left: 0;
        width: 80%; /* Botón ancho en el menú móvil */
        text-align: center;
    }
}

/* Pequeña animación para que baje suave */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- SECCIÓN CATÁLOGOS (Estilo Visual) --- */
.catalogs-section {
    padding: 4rem 5%;
    background-color: var(--white);
    text-align: center;
}

/* --- AJUSTE ESPACIO TEXTO CATÁLOGOS --- */

.catalogs-section .section-subtitle {
    /* Antes tenía unos 2rem o 3rem */
    /* Lo subimos a 4rem para separarlo bien de las tarjetas */
    margin-bottom: 3rem; 
    
    /* Opcional: Si quieres que el texto sea un poquito más grande también */
    font-size: 1.1rem; 
}

.catalogs-grid {
    /* Cambiamos Grid por Flex para poder centrar los últimos */
    display: flex;
    flex-wrap: wrap; /* Permite que bajen a la siguiente línea */
    justify-content: center; /* ESTA ES LA CLAVE: Centra todo el bloque */
    gap: 1.5rem; /* El mismo espacio que tenías antes */
}

/* La tarjeta contenedora de la imagen */
.catalog-card {
    /* --- AGREGAR ESTAS LÍNEAS NUEVAS --- */
    
    /* 1. Base flexible: Crece (1), se encoge (1), ancho ideal (300px) */
    flex: 1 1 300px; 
    
    /* 2. Límite máximo: Para que si quedan 2 solos, no se estiren gigantes */
    max-width: 400px; 
    
    /* --- MANTENER LO QUE YA TENÍAS --- */
    position: relative;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* EFECTO DE OSCURECIMIENTO (OVERLAY) */
/* Esto pone un velo negro sobre la foto para que el texto resalte */
.catalog-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.2));
    z-index: 1; /* Queda por encima de la foto */
    transition: background 0.3s ease;
}

/* Contenido (Texto y Botón) */
.card-content {
    position: relative;
    z-index: 2; /* Queda por encima del velo negro */
    width: 100%;
    padding: 1.5rem;
    
    /* Ponemos texto a la izq y botón a la derecha */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-content h3 {
    color: white;
    font-size: 1.5rem;
    margin: 0;
    text-align: left;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Botón Blanco Transparente */
.btn-download-white {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap; /* Evita que el texto del botón se rompa en dos líneas */
}

/* --- INTERACCIONES (Hover) --- */
.catalog-card:hover {
    transform: translateY(-5px); /* Se levanta un poco */
}

.catalog-card:hover::before {
    /* Al pasar el mouse, se oscurece un poco menos para ver mejor la foto */
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.0));
}

.btn-download-white:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Ajuste para móviles */
@media (max-width: 480px) {
    .card-content {
        flex-direction: column; /* Apila texto y botón en pantallas muy chicas */
        align-items: flex-start;
        gap: 10px;
    }
}

/* --- CORRECCIÓN DEFINITIVA DE ESPACIOS --- */

/* 1. Sección del medio: "¿Por qué elegirnos?" */
.features {
    /* 1rem arriba (pegado a marcas) | 5% lados | 3rem abajo (pegado a catálogos) */
    padding: 1rem 5% 3rem 5% !important; 
}

/* 2. Sección de abajo: "Catálogos" */
.catalogs-section {
    /* 0 arriba (para pegarse a features) | 5% lados | 4rem abajo (espacio normal al final) */
    padding: 0 5% 4rem 5% !important;
}

/* 3. Aseguramos que el título "Nuestros Catálogos" no empuje hacia abajo */
.catalogs-section h2 {
    margin-top: 1.5rem; /* Un pequeño respiro antes del título */
}

/* --- BOTÓN FLOTANTE WHATSAPP --- */
.btn-whatsapp {
    position: fixed; /* Se queda fijo al hacer scroll */
    bottom: 30px;    /* Distancia desde abajo */
    right: 30px;     /* Distancia desde la derecha */
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Verde oficial WhatsApp */
    color: white;
    border-radius: 50%; /* Círculo perfecto */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px; /* Tamaño del icono */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 9999; /* Para que quede ENCIMA de todo */
    text-decoration: none;
    transition: all 0.3s ease;
    
    /* Animación de latido */
    animation: pulse 2s infinite;
}

/* Efecto al pasar el mouse */
.btn-whatsapp:hover {
    background-color: #128c7e; /* Un verde un poco más oscuro */
    transform: scale(1.1); /* Se agranda un poquito */
    animation: none; /* Pausa el latido cuando lo tocas */
}

/* Definición de la animación Pulse */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Ajuste para celulares (un poco más chico y pegado al borde) */
@media (max-width: 768px) {
    .btn-whatsapp {
        width: 50px;
        height: 50px;
        font-size: 28px;
        bottom: 20px;
        right: 20px;
    }
}

/* --- ESTILOS PÁGINA DE GRACIAS --- */
.success-section {
    min-height: 80vh; /* Ocupa casi toda la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f4f6;
    padding: 2rem;
}

.success-content {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 500px;
    animation: popIn 0.5s ease;
}

/* Círculo verde del icono */
.icon-circle {
    width: 80px;
    height: 80px;
    background-color: #dcfce7; /* Verde muy suave */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1.5rem auto;
}

.icon-circle i {
    font-size: 2.5rem;
    color: #22c55e; /* Verde fuerte */
}

.success-content h1 {
    color: #1f2937;
    margin-bottom: 1rem;
}

.success-content p {
    color: #6b7280;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Pequeña animación de entrada */
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}


/* =========================================
   SECCIÓN DE PRODUCTOS (FINAL Y COMPACTA)
   ========================================= */

.products-section {
    padding: 4rem 5%;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Estilo del Título "Nuestros Productos" */
.products-section h2 {
    text-align: center;       /* 1. Lo centra en la pantalla */
    margin-bottom: 3rem;      /* 2. Agrega espacio entre el título y los botones */
    
    /* Opcionales para que destaque más */
    font-size: 2.5rem; 
    color: #1a1a1a;
}

/* --- 1. MENÚ DE FILTROS --- */
.filter-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2rem;
}

.filter-btn {
    border: none;
    background-color: #e5e7eb;
    color: #374151;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

.filter-btn:hover {
    background-color: #d1d5db;
    transform: translateY(-2px);
}

.filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- 2. LA GRILLA --- */
.products-grid {
    display: grid;
    /* Mantiene las columnas ordenadas y evita que se estiren gigantes */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem; /* Espacio un poco más chico entre tarjetas */
    width: 100%;
}

/* --- 3. LA TARJETA --- */
.product-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    display: flex;
    flex-direction: column;
    height: 100%; 
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- 4. LA IMAGEN --- */
.product-image {
    width: 100%;
    /* Reduje la altura de 200px a 180px para ahorrar espacio vertical */
    height: 180px; 
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px; /* Menos padding interno */
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- 5. INFORMACIÓN DEL PRODUCTO (AQUÍ ESTÁ EL CAMBIO CLAVE) --- */
.product-info {
    /* Padding reducido de 1.2rem a 1rem */
    padding: 1rem; 
    
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left; /* Alineado a la izquierda se ve más ordenado */
}

.product-category {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    
    /* Margen reducido casi a cero */
    margin-bottom: 2px; 
}

.product-info h3 {
    font-size: 1.1rem;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.2;
    
    /* Margen reducido drásticamente */
    margin-bottom: 35px; 
}

.product-code {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
    
    /* Margen reducido */
    margin-bottom: 8px; 
}

.product-desc {
    /* 1. TAMAÑO DE TEXTO */
    font-size: 14px; 
    color: #666;
    text-align: center;
    padding: 0;
    margin-bottom: 15px;
    
    /* 2. ALTURA DE RENGLÓN (Le damos 20px a cada línea) */
    line-height: 20px; 
    
    /* 3. ALTURA DE LA CAJA (20px x 2 líneas = 40px) */
    /* Si ponemos 40px exactos, entran las dos líneas perfecto */
    height: 42px; /* Le damos 2px extra de "respiro" para que no corte los puntos */
    
    /* 4. EL EFECTO DE CORTE */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* --- 6. BOTÓN --- */
.btn-consult {
    margin-top: auto; /* Empuja el botón al final de la tarjeta */
    background-color: #25d366;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    
    /* Botón más compacto (menos relleno arriba/abajo) */
    padding: 8px 10px; 
    border-radius: 6px;
    transition: background 0.3s ease;
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-consult:hover {
    background-color: #128c7e;
}

/* Estilo para mensaje de error o carga */
#contenedor-productos p {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    padding: 2rem;
}

/* --- CARRUSEL DE IMÁGENES --- */
.product-image {
    position: relative; /* Clave para posicionar las flechas */
    overflow: hidden;
    padding: 0; /* Quitamos padding para que las flechas toquen el borde */
}

/* Las imágenes del carrusel */
.carousel-img {
    display: none; /* Por defecto ocultas */
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: fadeIn 0.4s ease; /* Efecto suave al cambiar */
}

/* La clase que hace visible la imagen actual */
.carousel-img.active {
    display: block;
}

/* Botones de navegación (flechas) */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3); /* Fondo semitransparente */
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
    z-index: 10;
}

.carousel-btn:hover {
    background-color: var(--primary-color);
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* Animación suave */
@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* =========================================
   AJUSTES PARA CELULARES (2 COLUMNAS)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. FORZAR LA GRILLA A 2 COLUMNAS */
    .products-grid {
        /* repeat(2, 1fr) obliga a dividir el ancho en 2 partes iguales sí o sí */
        grid-template-columns: repeat(2, 1fr);
        
        /* Reducimos el hueco entre tarjetas para ganar espacio */
        gap: 10px; 
    }

    /* 2. ACHICAR LA TARJETA PARA QUE ENTRE BIEN */
    .product-info {
        padding: 0.8rem; /* Menos relleno interno */
    }

    /* 3. ACHICAR LA IMAGEN */
    .product-image {
        height: 140px; /* Un poco más bajitas */
        padding: 5px;
    }

    /* 4. TEXTOS MÁS PEQUEÑOS */
    .product-category {
        font-size: 10px; /* Marca más chica */
    }

    .product-info h3 {
        font-size: 13px; /* Título más chico para que no ocupe 5 renglones */
        margin-bottom: 15px;
    }

    /* 5. AJUSTAR EL BOTÓN */
    .btn-consult {
        font-size: 12px;
        padding: 8px 5px; /* Más compacto */
    }
    
    /* Opcional: Si el texto "Consultar Precio" es muy largo para el celular,
       podemos ocultar el icono o achicar la letra aún más */
}

/* =========================================
   SOLUCIÓN DEFINITIVA CATÁLOGOS MÓVIL (STACK)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. LA GRILLA (2 Columnas) */
    .catalogs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
        gap: 10px;      /* Espacio entre tarjetas */
        padding: 0 10px; 
    }

    /* 2. LA TARJETA (Asegurar altura) */
    .catalog-card {
        height: 180px; /* Altura fija para que todas sean iguales */
        width: 100%;
        /* Aseguramos que el contenido se posicione bien */
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Empuja el contenido al fondo */
    }

    /* 3. EL CONTENEDOR INTERNO (CAMBIO CLAVE: COLUMNA) */
    .card-content {
        display: flex;
        flex-direction: column; /* <--- ESTO ARREGLA EL SOLAPAMIENTO */
        align-items: center;    /* Centra todo */
        gap: 5px;               /* Espacio entre Título y Botón */
        padding: 10px;
        width: 100%;            /* Ocupa todo el ancho */
        
        /* Fondo semitransparente opcional para que se lea mejor sobre la foto */
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    }

    /* 4. EL TÍTULO (Más chico) */
    .card-content h3 {
        font-size: 13px;
        margin: 0;
        text-align: center;
        width: 100%;
        white-space: nowrap;      /* Evita que se rompa en dos líneas si es posible */
        overflow: hidden;         /* Si es muy largo, lo corta */
        text-overflow: ellipsis;  /* Pone ... */
    }

    /* 5. EL BOTÓN (Ancho completo y letra chica) */
    .card-content .btn-download-white {
        font-size: 11px;
        padding: 6px 0;       /* Relleno solo arriba y abajo */
        width: 100%;          /* El botón ocupa todo el ancho de la tarjetita */
        text-align: center;   /* Texto centrado */
        display: block;       /* Se comporta como bloque */
        border-radius: 4px;   /* Bordes un poco redondeados */
    }
}

/* =========================================
   CARRUSEL DE IMÁGENES (QUIENES SOMOS)
   ========================================= */

/* 1. EL MARCO (Lo que se ve) */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 600px; /* O el tamaño que prefieras */
    height: 400px;    /* Altura fija para que no salte */
    overflow: hidden; /* Oculta las fotos que están a los lados */
    border-radius: 12px; /* Bordes redondeados estéticos */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Sombrita profesional */
}

/* 2. LA PISTA (El tren de imágenes) */
.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* La magia del deslizamiento suave */
}

/* 3. LAS IMÁGENES INDIVIDUALES */
.carousel-track img {
    width: 100%;      /* Ocupa todo el marco */
    flex-shrink: 0;   /* Evita que se aplasten */
    height: 100%;     /* Llena la altura */
    object-fit: cover; /* Recorta la imagen para llenar sin deformar */
}

/* 4. LOS BOTONES (Flechas) */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%; /* Botones redondos */
    transition: background 0.3s;
    user-select: none;
    z-index: 10;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Más oscuro al pasar el mouse */
}

/* Posición de cada botón */
.btn-prev { left: 15px; }
.btn-next { right: 15px; }

/* AJUSTE PARA MÓVIL */
@media (max-width: 768px) {
    .carousel-container {
        height: 250px; /* Más bajito en celular */
    }
}

/* =========================================
   RESPONSIVE: HERO / QUIENES SOMOS
   (Texto Arriba - Fotos Abajo en pantallas chicas)
   ========================================= */

@media (max-width: 1024px) {
    
    /* 1. EL PADRE (.hero) */
    .hero {
        /* Cambiamos la dirección de fila (lado a lado) a columna (uno sobre otro) */
        flex-direction: column; 
        
        /* IMPORTANTE: Si antes tenía altura fija (ej: 100vh), esto deja que crezca según el contenido */
        height: auto; 
        min-height: auto; 
        
        /* Agregamos relleno para que no quede pegado a los bordes */
        padding: 40px 20px; 
        
        /* Centramos todo */
        align-items: center; 
        justify-content: center;
    }

    /* 2. EL TEXTO (.hero-text) */
    .hero-text {
        width: 100%;       /* Ocupa todo el ancho */
        max-width: 100%;   /* Elimina restricciones de ancho de PC */
        margin-bottom: 40px; /* Empuja el carrusel hacia abajo */
        text-align: center;  /* El texto centrado se ve mejor en móvil */
        padding-right: 0;    /* Quitamos márgenes laterales viejos */
    }

    /* Opcional: Ajustar el título y párrafo si quedaron muy grandes */
    .hero-text h1 {
        font-size: 32px; /* Un poco más chico que en PC */
    }

    /* 3. EL CARRUSEL (.carousel-container) */
    .carousel-container {
        width: 100%;      /* Ancho completo del celular */
        max-width: 600px; /* Tope máximo para que no se deforme en tablets */
        min-height: 400px;    /* Altura cómoda para ver las fotos */
        margin: 0 auto;   /* Centrado */
    }
}