/* ==========================================================================
   1. CONTROL DEL CONTENEDOR PRINCIPAL
   ========================================================================== */
.catalogo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

/* ==========================================================================
   2. BANNER DINÁMICO Y MARQUEE (IMÁGENES EN MOVIMIENTO)
   ========================================================================== */
.banner-categoria {
    position: relative;
    width: 100%;
    height: 260px;
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Respetamos tu preferencia de usar una imagen de fondo seleccionada por vos */
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,244,248,0.9) 100%);
    background-size: cover;
}

/* Contenido de texto centrado en el banner */
.banner-content {
    text-align: center;
    z-index: 2;
    padding: 20px;
}

.banner-content h2 {
    font-size: 2.2rem;
    color: #1e293b; /* Tono pizarra oscuro, muy limpio */
    margin: 0 0 10px 0;
    font-weight: 700;
}

.banner-content p {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
}

/* Contenedor del Marquee Infinito */
.marquee-wrapper {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    z-index: 1;
    pointer-events: none; /* No interfiere con los clics */
    opacity: 0.6; /* Sutil para no distraer de los textos */
}

/* Animación de desplazamiento infinito con CSS Puro (Súper liviano) */
@keyframes marqueeScroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.marquee-wrapper .marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 25s linear infinite;
}

/* Estilo para las ilustraciones o siluetas de productos dentro del banner */
.marquee-wrapper img {
    height: 60px;
    margin: 0 40px;
    object-fit: contain;
    /* A color y sin atenuar, para que cada ilustración se vea bien */
}


/* ==========================================================================
   3. REJILLA DEL CATÁLOGO Y TARJETAS (DISEÑO LIMPIO SIN FONDOS NEGROS)
   ========================================================================== */
.productos-seccion {
    width: 100%;
    margin-bottom: 50px;
}

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* Tarjeta del Producto/Combo */
.product-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

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

.product-card h4 {
    font-size: 1.25rem;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.product-card p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 15px 0;
    flex-grow: 1; /* Hace que la descripción ocupe el espacio y los botones queden alineados abajo */
}

/* Sección inferior de precios y canales de pago dentro de la tarjeta */
.product-card .price-tag {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0284c7; /* Azul corporativo moderno */
    margin-bottom: 5px;
}

.product-card .payment-methods-info {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   4. BOTONES DE ACCIÓN (WhatsApp, Consulta y PDFs)
   ========================================================================== */
.card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Botones base */
.btn-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

/* Botón de WhatsApp Directo */
.btn-whatsapp {
    background-color: #25d366;
    color: #ffffff;
}
.btn-whatsapp:hover {
    background-color: #1ebd57;
}

/* Botón de Consulta por Formulario */
.btn-consulta {
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.btn-consulta:hover {
    background-color: #e2e8f0;
}

/* Botón de Descarga PDF Ficha Técnica */
.btn-pdf {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
}
.btn-pdf:hover {
    background-color: #fee2e2;
}


/* ==========================================================================
   5. COMPONENTE FORMULARIO MODAL (OCULTO POR DEFECTO)
   ========================================================================== */
.modal-consulta-hidden {
    display: none; /* JS cambiará esto a 'flex' para mostrarlo */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4); /* Capa translúcida limpia */
    -webkit-backdrop-filter: blur(4px); /* Efecto desfoque de fondo moderno */
    backdrop-filter: blur(4px); /* Efecto desfoque de fondo moderno */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-consulta-visible {
    display: flex;
}

.modal-content {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    color: #94a3b8;
    cursor: pointer;
}
.close-modal:hover {
    color: #475569;
}

.modal-content h3 {
    margin: 0 0 20px 0;
    color: #0f172a;
    font-size: 1.5rem;
}

/* Formulario */
.form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
}

.form-group input, 
.form-group textarea {
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    background-color: #f8fafc;
    color: #0f172a;
    font-family: inherit;
}

.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: #38bdf8;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.btn-enviar-formulario {
    width: 100%;
    padding: 12px;
    background-color: #0f172a; /* Botón oscuro elegante */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
}

.btn-enviar-formulario:hover {
    background-color: #1e293b;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN (ADAPTACIÓN A CELULARES)
   ========================================================================== */
@media (max-width: 768px) {
    .banner-categoria {
        height: 200px;
        margin-bottom: 25px;
    }
    .banner-content h2 {
        font-size: 1.7rem;
    }
    .banner-content p {
        font-size: 0.95rem;
    }
    .marquee-wrapper img {
        height: 35px;
        margin: 0 25px;
    }
    .productos-grid {
        gap: 20px;
    }
}


/* ==========================================================================
   7. SECCIONES POR CATEGORÍA (catálogo apilado) E ÍNDICE RÁPIDO
   ========================================================================== */
.categoria-seccion {
    margin-bottom: 70px;
    scroll-margin-top: 100px; /* para que el ancla no quede tapada por el header sticky */
}

.categoria-seccion:last-child {
    margin-bottom: 0;
}

.indice-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 0 40px 0;
}

.indice-categoria-link {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.indice-categoria-link:hover {
    background-color: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

/* ==========================================================================
   8. FOTO DE PRODUCTO EN LA TARJETA
   ========================================================================== */
.product-image-wrapper {
    height: 160px;
    margin: -20px -20px 15px -20px; /* compensa el padding de .product-card */
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}

.product-image-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    color: #a0aec0;
    font-style: italic;
    font-size: 0.85rem;
}


/* ==========================================================================
   9. FIX DEL BANNER: fondo sólido de marca, visible con o sin ilustraciones
   --------------------------------------------------------------------------
   El banner no debe depender de que las imágenes carguen para tener
   presencia visual. Esta regla sobreescribe el fondo degradado blanco
   original (que se perdía contra el fondo blanco de la página) por un
   fondo sólido con los colores corporativos, y ajusta el texto a blanco
   para que se lea bien encima.
   ========================================================================== */
.banner-categoria {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.banner-content h2 {
    color: #ffffff;
}

.banner-content p {
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   10. CATÁLOGO INFORMATIVO POR RUBRO (variedades sin precio + consulta única)
   ========================================================================== */

/* Lista de variedades/productos como texto, sin foto ni precio */
.variedades-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.variedad-chip {
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: default;
}

.nota-informativa {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 20px;
    max-width: 600px;
}

/* Botón único de consulta por categoría (reemplaza a los botones por tarjeta) */
.btn-consultar-categoria {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #25d366;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.btn-consultar-categoria:hover {
    background-color: #1ebd57;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .btn-consultar-categoria {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   9. FIX DEL BANNER: fondo sólido de marca, visible con o sin ilustraciones
   --------------------------------------------------------------------------
   El banner no debe depender de que las imágenes carguen para tener
   presencia visual. Esta regla sobreescribe el fondo degradado blanco
   original (que se perdía contra el fondo blanco de la página) por un
   fondo sólido con los colores corporativos, y ajusta el texto a blanco
   para que se lea bien encima.
   ========================================================================== */
.banner-categoria {
    height: 320px;
    background: var(--primary); /* queda de base mientras cargan las fotos */
    border-bottom: 4px solid var(--accent);
}

/* Velo de marca sobre las fotos: mantiene la identidad visual y asegura
   que el texto se lea con fuerza sin importar qué foto haya detrás */
.banner-categoria::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 52, 92, 0.55) 0%, rgba(19, 52, 92, 0.8) 100%);
    z-index: 2;
    pointer-events: none;
}

.banner-content {
    z-index: 3;
}

.banner-content h2 {
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.banner-content p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* Las fotos pasan de ser una franja chica abajo a ocupar todo el banner,
   como un mazo de tarjetas deslizándose detrás del velo de marca */
.marquee-wrapper {
    top: 0;
    bottom: 0;
    height: 100%;
    opacity: 1;
    z-index: 1;
}

.marquee-wrapper .marquee-track {
    align-items: center;
    height: 100%;
    animation-duration: 32s;
}

.marquee-wrapper img {
    height: 260px;
    width: 340px;
    margin: 0 14px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .banner-categoria {
        height: 220px;
    }
    .marquee-wrapper img {
        height: 170px;
        width: 220px;
        margin: 0 8px;
        border-radius: 10px;
    }
}

/* ==========================================================================
   10. CATÁLOGO INFORMATIVO POR RUBRO (variedades sin precio + consulta única)
   ========================================================================== */

/* Lista de variedades/productos como texto, sin foto ni precio */
.variedades-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.variedad-chip {
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: default;
}

.nota-informativa {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 20px;
    max-width: 600px;
}

/* Botón único de consulta por categoría (reemplaza a los botones por tarjeta) */
.btn-consultar-categoria {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #25d366;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.btn-consultar-categoria svg {
    flex-shrink: 0;
}

.btn-consultar-categoria:hover {
    background-color: #1ebd57;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .btn-consultar-categoria {
        width: 100%;
        justify-content: center;
    }
}