/* 0. Paleta de marca (tomada del logo AGRO-VETZO) */
:root {
    --marron: #603000;            /* marrón del logo: cabecera y títulos */
    --verde: #3C9C18;             /* verde del logo: acentos */
    --verde-accion: #2E7A12;      /* verde oscurecido para botones con texto blanco (contraste AA) */
    --verde-accion-hover: #24620E;
    --verde-claro: #6CC03C;       /* verde claro del logo: destacados, con texto marrón */
    --verde-suave: #EAF5E0;       /* fondo suave para hover y estados */
    --fondo: #FAF7F2;             /* crema neutro para el cuerpo de la página */
    --texto: #2B1A0A;             /* marrón muy oscuro para texto corrido */
    --gris-borde: #e0e0e0;
}

/* 1. Configuración General (Reset) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--fondo);
    color: var(--texto);
}

/* 2. Cabecera: queda fija arriba mientras se baja por la pagina (Carrito y Combos siempre a mano) y el
   contenido pasa por debajo de ella. Tiene un tamano constante: si cambiara al hacer scroll, la pagina
   daria saltos. Su alto real lo publica main.js en --alto-cabecera (para el menu lateral y los scrolls). */
html {
    scroll-padding-top: calc(var(--alto-cabecera, 90px) + 8px);
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--marron);
    color: white;
    border-bottom: 4px solid var(--verde-claro);
    padding: 6px 0;
    text-align: center;
    width: 100%;
}

/* 3. El Contenedor Padre (Layout en paralelo) */
.contenedor-principal {
    display: flex; /* cada vista (catalogo, promociones, combos, producto) ocupa todo el ancho */
    min-height: 50vh;
}

/* En la portada se oculta el contenedor de las demas vistas (todas estan ocultas) */
body.en-inicio .contenedor-principal {
    display: none;
}

/* 5. Sección de Productos (Derecha) */
.contenido-productos {
    flex: 1; /* Ocupa todo el ancho */
    min-width: 0;
    padding: 20px;
    /* Al elegir categoría, la vista se alinea al inicio de la grilla (ver main.js) */
    scroll-margin-top: 16px;
}

/* Celular: la cabecera se reparte en filas para que nada quede fuera de la pantalla.
   Fila 1: logo + Carrito. Fila 2: buscador completo. Fila 3: Combos (si hay combos publicados). */
@media (max-width: 768px) {
    /* Recorta lo que sobresalga por los costados (los botones animados escalan y rotan).
       Sin esto, la pagina se puede arrastrar hacia la derecha. */
    html,
    body {
        overflow-x: hidden; /* respaldo para navegadores antiguos */
        overflow-x: clip;
    }

    .contador-burbuja {
        top: -8px;
        right: -8px;
    }

    /* Promos y Combos en celular: solo latido, sin el giro de escritorio */
    .btn-promos-cabecera {
        animation: latidoSuave 1.5s infinite ease-in-out;
    }

    /* Carrito en celular: el renglon se parte en dos filas para que el tacho
       de basura y el precio no queden fuera de la pantalla. */
    .modal-contenido {
        width: 94%;
        padding: 20px 16px;
    }

    .renglon-carrito {
        flex-wrap: wrap;
        gap: 10px;
    }

    .carrito-bloque-izq {
        flex: 1 1 100%;
        min-width: 0;
    }

    .carrito-detalles h4 {
        overflow-wrap: anywhere;
    }

    .carrito-bloque-der {
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .precio-renglon {
        min-width: 0;
    }
}

/* Latido suave: solo escala, sin girar (usado en celular para Promos y Combos) */
@keyframes latidoSuave {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

.contenido-productos h2 {
    margin-bottom: 20px;
}

/* 6. La Cuadrícula de Cards (Grid) */
.cuadricula-productos {
    display: grid;
    /* Crea columnas automáticas que se adaptan si la pantalla se achica */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px; /* Espacio de separación entre cada card */
    
}

/* 7. Diseño de las CARDS (Los cuadritos) */
.card-producto {
    /* Referencia de posicion de los textos absolutos de la tarjeta (.solo-lectores, la insignia).
       Sin esto, en el carrusel esos textos quedaban fuera de la pantalla, a la derecha de las
       tarjetas que no se ven, y ensanchaban toda la pagina en el celular. */
    position: relative;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}

.card-producto:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Marco cuadrado: todas las imagenes ocupan la misma proporcion, sin deformarse */
.imagen-producto {
    aspect-ratio: 1 / 1;
    background-color: var(--fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.imagen-producto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.info-producto {
    padding: 12px 15px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-producto h3 {
    font-size: 1rem;
    line-height: 1.3;
    color: var(--texto);
    margin-bottom: 8px;
    font-weight: 600;
    /* Tope de 2 lineas: un nombre largo termina en "…" en vez de estirar la tarjeta */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.card-producto .precio {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--marron);
    margin-bottom: 8px;
}

.precio-moneda {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8a7a6a;
}

.etiquetas-producto {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.card-producto .stock-info {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
}

.card-producto .stock-info.disponible {
    color: var(--verde-accion);
    background-color: var(--verde-suave);
}

.card-producto .stock-info.agotado {
    color: #B91C1C;
    background-color: #FDE8E8;
}

.unidad-producto {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6B5B4D;
    background-color: #F3EDE6;
    padding: 3px 8px;
    border-radius: 12px;
}

.pendiente-cantidad {
    color: #dc2626;
    font-weight: 600;
    font-size: 0.85rem;
}

.modal-agregado-contenido {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    width: min(360px, 90vw);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.check-agregado {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 40px;
    line-height: 72px;
    animation: pop-check 0.35s ease-out;
}

@keyframes pop-check {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

.texto-agregado {
    color: #64748b;
    margin: 6px 0 0;
}

.acciones-agregado {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.btn-agregado-principal,
.btn-agregado-secundario {
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.btn-agregado-principal {
    background: #2c3e50;
    color: #fff;
    border: none;
}

.btn-agregado-secundario {
    background: #fff;
    color: #2c3e50;
    border: 1px solid #cbd5e1;
}

@media (prefers-reduced-motion: reduce) {
    .check-agregado {
        animation: none;
    }
}

.encabezado-combos {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

.encabezado-combos h1 {
    color: #2c3e50;
    font-size: 1.8rem;
}

.paginacion-combos {
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.selector-presentaciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 16px;
}

.selector-presentaciones-titulo {
    font-size: 1.3rem;
    color: #2c3e50;
    margin: 0;
}

.grilla-presentaciones {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 700px;
}

.tarjeta-presentacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 220px;
    max-width: 280px;
    padding: 24px 20px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tarjeta-presentacion:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    border-color: #cbd5e1;
}

.tarjeta-presentacion-icono {
    font-size: 2rem;
}

.tarjeta-presentacion-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c3e50;
}

.tarjeta-presentacion-subtitulo {
    font-size: 0.85rem;
    color: #64748b;
}

@media (max-width: 600px) {
    .grilla-presentaciones {
        flex-direction: column;
        align-items: stretch;
    }

    .tarjeta-presentacion {
        max-width: none;
    }
}

/* Estilos para los botones de las categorías */


/* 🌟 NUEVO ESTILO EN AZUL OSCURO E IMPONENTE */
.btn-comprar {
    background-color: var(--verde-accion);
    color: white;
    border: none;
    width: 100%;               /* Hace que ocupe todo el ancho de la tarjeta */
    height: 48px;
    margin-top: 15px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;         /* Letras en negrita */
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;       /* Centra verticalmente el texto y el carrito */
    justify-content: center;    /* Centra horizontalmente todo el contenido */
    gap: 8px;
    transition: background-color 0.2s, transform 0.1s;
}

/* Efecto cuando el usuario pasa el mouse por arriba */
.btn-comprar:hover {
    background-color: var(--verde-accion-hover);
}

/* Efecto opcional de feedback táctil cuando el usuario hace clic */
.btn-comprar:active {
    transform: scale(0.98);    /* Achica un milímetro el botón simulando que se hunde */
}

.btn-comprar:focus-visible {
    outline: 3px solid var(--marron);
    outline-offset: -3px;
}

.btn-comprar:disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
    transform: none;
}

/* Dentro de la tarjeta: pegado al fondo, con esquinas que acompañan a la tarjeta */
.card-producto .btn-comprar {
    margin-top: auto;
    border-radius: 0 0 10px 10px;
}

.btn-cantidad-mas:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}


/* Contenedor principal para centrar la barra en la pantalla */
.contenedor-busqueda {
    margin: 30px auto;
    width: 95%;
    max-width: 800px; /* La hacemos más ancha como en tu imagen */
}

/* Caja envolvente que junta el input y la lupa en un solo bloque visual */
.caja-buscar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #e2e8f0; /* Un borde sutil como tu ejemplo */
    border-radius: 4px; /* Bordes ligeramente suavizados, no redondos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* El cuadro de texto ahora es más alto y ocupa todo el ancho */
#txt-buscar {
    width: 100%;
    height: 46px; /* alto compacto (antes 55px): la cabecera queda fija */ /* 🌟 AQUÍ LE DAMOS EL TAMAÑO GRANDE EN ALTURA */
    padding: 0 50px 0 20px; /* Espacio a la derecha para que el texto no pise la lupa */
    font-size: 1.1rem; /* Letra legible */
    color: #2c3e50;
    border: none; /* Le quitamos el borde interno */
    outline: none; /* Evita el recuadro azul por defecto del navegador */
    background: transparent;
}

/* Posicionamiento absoluto del icono de la lupa a la derecha */
.icono-lupa {
    position: absolute;
    right: 20px;
    font-size: 1.3rem;
    color: var(--verde-accion); /* Lupa en verde de marca */
    pointer-events: none; /* Hace que si haces clic en la lupa, el clic pase directo al input */
}

/* Efecto visual cuando el usuario está escribiendo */
.caja-buscar-wrapper:focus-within {
    border-color: var(--verde-accion);
    box-shadow: 0 4px 12px rgba(60, 156, 24, 0.15);
}

/* El logo tiene fondo blanco: se presenta como una placa sobre la cabecera marrón */
.contenedor-logo {
    background-color: white;
    border-radius: 12px;
    padding: 4px 10px;
}

/* Controla el tamaño del logo al costado de la búsqueda */
.logo-busqueda {
    height: 56px;     /* cabecera fija, compacta (antes 110px) -- 🔑 AJUSTADO: Reducido para que coincida con la altura (height) de tu input */          
    width: auto;               /* Evita que la imagen se deforme */
    object-fit: contain;
    display: block;
}

/* Reajustamos el contenedor de búsqueda para que ocupe todo el espacio restante */
.contenedor-busqueda {
    flex: 1; 
    margin: 0;                 /* Le quitamos los márgenes viejos para que se alinee bien */
    max-width: 750px;          /* 🔑 AGREGADO: Evita que el buscador se estire infinitamente hacia la derecha */
}

/* 🌟 LA CLAVE: Hace que el logo y el buscador se pongan en la misma fila */
.fila-navegacion {
    display: flex;
    align-items: center;       /* Alinea verticalmente los centros del logo y la barra */
    justify-content: flex-start; /* 🔑 CAMBIADO: Los pega hacia la izquierda en lugar de separarlos */
    margin: 0 auto;            /* Centra la fila si la pantalla es gigante */
    width: 100%;               /* 🌟 Obliga a la fila a usar todo el ancho disponible */
    max-width: 1400px;         /* 🌟 Permite que se estire casi hasta los bordes del monitor */
    padding: 0 10px;           /* 🌟 Deja un respiro de 10px en los extremos para que no toque el borde del vidrio */
    gap: 15px;                 /* Separa el logo de la barra de búsqueda */
}


/* Estilo base para el botón del carrito en la barra de navegación */
.btn-carrito-cabecera {
    background-color: #ffffff;
    color: var(--marron);
    border: 2px solid var(--marron);
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;         /* Permite posicionar la burbuja roja encima */
    transition: background-color 0.2s, color 0.2s;
}

/* Efecto Hover */
.btn-carrito-cabecera:hover {
    background-color: var(--verde-accion);
    border-color: var(--verde-accion);
    color: #ffffff;
}

/* 🌟 LA BURBUJA ROJA: El contador de productos */
.contador-burbuja {
    background-color: #e74c3c;  /* Un rojo intenso de alerta */
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 50%;         /* Lo hace perfectamente redondo */
    position: absolute;
    top: -10px;                 /* Lo eleva un poquito por encima del botón */
    right: -10px;               /* Lo empuja hacia la esquina derecha */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* El fondo negro translúcido que cubre toda la pantalla */
.modal-fondo {
    display: none;             /* 🌟 CLAVE: Empieza oculta en la pantalla */
    position: fixed;
    z-index: 1000;             /* Se asegura de flotar por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    align-items: center;
    justify-content: center;
}

/* La tarjeta blanca central que contiene el formulario */
.modal-contenido {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 550px;          /* Un tamaño cómodo y prolijo */
    max-height: 85vh;          /* Si la lista es muy larga, no se sale de la pantalla */
    overflow-y: auto;          /* Agrega barra de scroll interna si es necesario */
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* El botón 'X' para cerrar arriba a la derecha */
.btn-cerrar {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}
.btn-cerrar:hover {
    color: #333;
}

/* Estilos básicos para las cajitas del formulario */
.campo-formulario {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.campo-formulario label {
    font-weight: bold;
    color: #2c3e50;
    font-size: 0.9rem;
}
.campo-formulario input {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    outline: none;
}
.campo-formulario input:focus {
    border-color: #000c66;
}


/* 🌟 ESTILOS PARA EL RENGLÓN DEL CARRITO (ESTILO BRISTOL/TRADICIONAL) */

/* La lista contenedora elimina los puntitos por defecto de HTML */
.lista-carrito-emergente {
    list-style: none;
    max-height: 300px;
    overflow-y: auto; /* Permite scroll interno si hay muchos productos */
    padding-right: 5px;
}

/* Cada fila horizontal de producto */
.renglon-carrito {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Empuja el bloque izquierdo al inicio y el derecho al final */
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9; /* Línea divisoria gris clara igual a tu imagen */
}

/* Bloque Izquierdo: Foto y Textos juntos */
.carrito-bloque-izq {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

/* Miniatura pequeña de la imagen del producto */
.miniatura-carrito {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px;
}

/* Textos informativos agrupados de forma vertical */
.carrito-detalles h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    color: #2c3e50;
    font-weight: 500;
}

.codigo-articulo {
    font-size: 0.8rem;
    color: #94a3b8; /* Gris suave para el código de artículo (Art. 7434) */
}

/* Bloque Derecho: Controles de cantidad, precio y tachito */
.carrito-bloque-der {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}

/* El cuadro selector de cantidad (- 1 +) */
.control-cantidad {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background-color: #f8fafc;
}

.control-cantidad button {
    background: none;
    border: none;
    width: 25px;
    height: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    color: #64748b;
    transition: background-color 0.1s;
}

.control-cantidad button:hover {
    background-color: #e2e8f0;
}

.control-cantidad-fraccionable {
    padding: 4px 8px;
    gap: 6px;
}

.input-cantidad-fraccionable {
    width: 70px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9rem;
    text-align: right;
}

.unidad-venta {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.cantidad-numero {
    font-size: 0.95rem;
    font-weight: bold;
    color: #2c3e50;
    padding: 0 8px;
    min-width: 20px;
    text-align: center;
}

/* Precio destacado del renglón */
.precio-renglon {
    font-size: 0.95rem;
    font-weight: bold;
    color: #475569;
    margin: 0;
    min-width: 110px;
    text-align: right;
}

/* Botón transparente para el tacho de basura */
.btn-eliminar-item {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #94a3b8;
    padding: 5px;
    transition: color 0.1s, transform 0.1s;
}

.btn-eliminar-item:hover {
    color: #ef4444; /* Cambia a rojo cuando pasas el mouse para dar feedback visual */
    transform: scale(1.1);
}

/* El bloque del Importe Total abajo de los productos */
.total-pedido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding-top: 10px;
}

.total-pedido h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #2c3e50;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#total-carrito {
    font-size: 1.2rem;
    font-weight: 800; /* Letras bien gruesas como en tu captura */
    color: #000000;
}


/* Tarjeta blanca para la confirmación de éxito */
.modal-contenido-exito {
    background-color: white;
    padding: 40px 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    text-align: center; /* Centra todos los textos e iconos */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: aparecerSuave 0.3s ease-out; /* Pequeño efecto visual al aparecer */
}

/* Animación de entrada sutil */
@keyframes aparecerSuave {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Icono gigante de celebración */
.icono-exito {
    font-size: 4rem;
    margin-bottom: 15px;
}

.modal-contenido-exito h2 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 1.6rem;
}

.modal-contenido-exito p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Caja destacada gris para el número de orden en guaraníes/sistema */
.caja-numero-orden {
    background-color: #f1f5f9;
    border: 2px dashed #cbd5e1;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.caja-numero-orden span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    font-weight: bold;
}

#txt-orden-confirmada {
    margin: 5px 0 0 0;
    color: #000c66; /* Tu azul corporativo */
    font-size: 2.2rem;
    font-weight: 800;
}

.nota-formulario {
    font-style: italic;
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
}

/* 🌟 DISEÑO PARA CUANDO EL BUSCADOR NO ENCUENTRA COINCIDENCIAS */
.mensaje-sin-resultados {
    grid-column: 1 / -1; /* Ocupa todo el ancho de la cuadrícula de productos */
    text-align: center;
    padding: 60px 20px;
    color: #64748b; /* Un gris suave y elegante */
}

.mensaje-sin-resultados .icono-vacio {
    font-size: 3.5rem;
    margin-bottom: 15px;
}

.mensaje-sin-resultados h3 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 1.3rem;
}

.mensaje-sin-resultados p {
    margin: 0;
    font-size: 0.95rem;
}

/* 🌟 ESTILOS DEL CARRUSEL DE BANNERS
   Los banners son imagenes completas (texto incluido), pensadas en 1920 x 660. */
.contenedor-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 660;
    max-height: 500px;
    overflow: hidden;
    background-color: #f4f4f4;
}

.carrusel-deslizable {
    width: 100%;
    height: 100%;
    position: relative;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Transición suave de desvanecido */
    z-index: 1;
}

.banner-slide.activo {
    opacity: 1;
    z-index: 2;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Se ve la imagen completa: el texto va dentro de la imagen */
    display: block;
}

/* Indicadores (puntitos): son botones, con zona de toque mayor que el punto visible */
.carrusel-indicadores {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 4;
}

.punto {
    position: relative;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.35);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.punto::after {
    content: "";
    position: absolute;
    inset: -10px; /* zona de toque de ~32 px */
}

.punto.activo {
    background-color: var(--verde-accion);
    border-color: #ffffff;
    transform: scale(1.25);
}

.punto:focus-visible {
    outline: 3px solid #1e3a8a;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .banner-slide {
        transition: none;
    }
}

/* ---------- Texto solo para lectores de pantalla ---------- */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Promoción: precio original tachado, precio vigente e insignia "-X %" ---------- */
.imagen-producto {
    position: relative; /* ancla de la insignia de descuento */
}

.insignia-descuento {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: 3px 8px;
    border-radius: 12px;
    background-color: #B91C1C; /* texto blanco con contraste AA */
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.precio-original {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6B5B4D;
    text-decoration: line-through;
}

.precio-con-promo .precio-vigente {
    color: #B91C1C;
}

/* ---------- Carrusel de tarjetas (Promoción vigente, y luego Novedades) ---------- */
.seccion-carrusel {
    margin-bottom: 28px;
}

.seccion-carrusel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.seccion-carrusel-cabecera .titulo-seccion {
    margin-bottom: 0;
}

.seccion-carrusel-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.btn-ver-seccion {
    padding: 6px 14px;
    border: 2px solid var(--verde-accion);
    border-radius: 20px;
    color: var(--verde-accion);
    font-weight: 700;
    text-decoration: none;
}

.btn-ver-seccion:hover {
    background-color: var(--verde-suave);
}

.btn-ver-seccion:focus-visible,
.carrusel-flecha:focus-visible {
    outline: 3px solid var(--marron);
    outline-offset: 2px;
}

.carrusel-flechas {
    display: flex;
    gap: 8px;
}

.carrusel-flecha {
    width: 40px;
    height: 40px;
    border: 2px solid var(--verde-accion);
    border-radius: 50%;
    background-color: white;
    color: var(--verde-accion);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.carrusel-flecha:hover:not(:disabled) {
    background-color: var(--verde-accion);
    color: white;
}

.carrusel-flecha:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.carrusel-cards {
    display: flex;
    gap: 20px;
    padding: 4px 2px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.carrusel-cards > .card-producto {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
    .carrusel-cards {
        scroll-behavior: auto;
    }
}

@media (max-width: 768px) {
    .carrusel-cards > .card-producto {
        flex-basis: 65%;
        max-width: 260px;
    }
}

/* ---------- Enlaces de las tarjetas hacia la página del producto ---------- */
.enlace-producto {
    color: inherit;
    text-decoration: none;
}

.imagen-producto .enlace-producto {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-producto h3 .enlace-producto:hover {
    text-decoration: underline;
}

.enlace-producto:focus-visible {
    outline: 3px solid var(--marron);
    outline-offset: 2px;
}

/* ---------- Página propia de un producto ---------- */
.enlace-volver {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 0;
    color: var(--marron);
    font-weight: 600;
    text-decoration: none;
}

.enlace-volver:hover {
    text-decoration: underline;
}

.enlace-volver:focus-visible {
    outline: 3px solid var(--marron);
    outline-offset: 3px;
}

.detalle-producto {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

.detalle-imagen {
    aspect-ratio: 1 / 1;
    background-color: var(--fondo);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.detalle-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}

.detalle-categoria {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B5B4D;
}

.detalle-nombre {
    margin: 0 0 12px;
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--texto);
}

.detalle-precio {
    margin: 0 0 10px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--marron);
}

.detalle-precio .precio-original {
    font-size: 1.05rem;
}

.detalle-precio.precio-con-promo .precio-vigente {
    color: #B91C1C;
}

.detalle-precio .insignia-descuento {
    position: static;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.detalle-datos .etiquetas-producto {
    margin-bottom: 18px;
}

.detalle-datos .stock-info {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.detalle-datos .stock-info.disponible {
    color: var(--verde-accion);
    background-color: var(--verde-suave);
}

.detalle-datos .stock-info.agotado {
    color: #B91C1C;
    background-color: #FDE8E8;
}

.detalle-descripcion h2 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--texto);
}

.detalle-descripcion p {
    margin: 0 0 18px;
    line-height: 1.55;
    color: #3d2c1c;
    white-space: pre-line; /* respeta los saltos de línea que se escriben en el panel */
}

.detalle-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
}

.detalle-acciones .btn-comprar {
    margin-top: 0;
    border-radius: 8px;
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 8px;
    background-color: #0B7A6B; /* verde WhatsApp oscurecido: texto blanco con contraste AA */
    color: white;
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none;
}

.btn-whatsapp:hover {
    background-color: #075E54;
}

.btn-whatsapp:focus-visible {
    outline: 3px solid var(--marron);
    outline-offset: 3px;
}

.detalle-mensaje {
    background-color: white;
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    color: var(--texto);
}

@media (max-width: 768px) {
    .detalle-producto {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 16px;
    }

    .detalle-nombre {
        font-size: 1.3rem;
    }

    .detalle-precio {
        font-size: 1.7rem;
    }

    .detalle-acciones {
        max-width: none;
    }
}

/* Título de la sección de artículos (con la paleta de marca) */
.titulo-seccion {
    color: var(--marron);
    font-size: 1.5rem;
    border-left: 6px solid var(--verde-claro);
    padding-left: 12px;
    margin-bottom: 16px;
}

/* 🔥 ESTILOS PARA EL BOTÓN DE PROMOCIONES ANIMADO */
.btn-promos-cabecera {
    background-color: var(--verde-claro);
    color: var(--marron);
    border: none;
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s;
    
    /* 🌟 ANIMACIÓN CONTINUA: No se detiene nunca (ciclo de 1.5 segundos) */
    animation: latidoVibratorio 1.5s infinite ease-in-out;
}

/* Efecto al pasar el mouse por encima */
.btn-promos-cabecera:hover {
    background-color: #5AAE2E; /* verde claro un tono más oscuro */
}

/* 🔬 REGLA DE ANIMACIÓN: CRECE, VIBRA, ACHICA Y VUELVE A EMPEZAR */
@keyframes latidoVibratorio {
    0% {
        transform: scale(1) rotate(0deg);
    }
    /* 1. EMPIEZA A CRECER Y TIEMBLA */
    15% {
        transform: scale(1.12) rotate(3deg);
    }
    30% {
        transform: scale(1.15) rotate(-3deg);
    }
    45% {
        transform: scale(1.12) rotate(3deg);
    }
    /* 2. LLEGA AL MÁXIMO TAMAÑO Y TIEMBLA UN POCO MÁS */
    60% {
        transform: scale(1.15) rotate(-3deg);
    }
    /* 3. BAJA DE TAMAÑO MIENTRAS SE ESTABILIZA */
    75% {
        transform: scale(1.05) rotate(1deg);
    }
    90% {
        transform: scale(1) rotate(-1deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Aviso "Cargando artículos..." al elegir una categoría (la grilla se vacía mientras responde el servidor) */
.mensaje-cargando {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--marron);
    font-weight: 600;
}

.rueda-cargando {
    width: 22px;
    height: 22px;
    border: 3px solid var(--verde-suave);
    border-top-color: var(--verde-accion);
    border-radius: 50%;
    animation: girar-rueda 0.8s linear infinite;
}

@keyframes girar-rueda {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rueda-cargando {
        animation-duration: 3s;
    }
}


/* ===== Pie de pagina =====
   Cuatro bloques (Como llegar, Atencion al cliente, Nuestras redes, Nuestra tienda) sobre fondo marron.
   Los datos del negocio estan en index.html; el enlace de WhatsApp lo arma main.js con WHATSAPP_NUMERO. */
.pie-pagina {
    background-color: var(--marron);
    color: #f5ede4;
    margin-top: 40px;
    border-top: 4px solid var(--verde-claro);
}

.pie-contenido {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 20px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: left;
}

.pie-bloque h2 {
    font-size: 1.05rem;
    color: white;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--verde-claro);
    display: inline-block;
}

.pie-bloque p,
.pie-bloque li {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

.pie-bloque ul {
    list-style: none;
}

.pie-bloque a {
    color: var(--verde-claro);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pie-bloque a:hover,
.pie-bloque a:focus-visible {
    color: white;
    text-decoration: underline;
}

.pie-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 16px;
    border-radius: 6px;
    background-color: var(--verde-accion);
    color: white !important;
    font-weight: bold;
    text-decoration: none !important;
}

.pie-boton:hover,
.pie-boton:focus-visible {
    background-color: var(--verde-accion-hover);
}

.pie-boton svg,
.pie-red svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.pie-red {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pie-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
    padding: 14px 20px;
    font-size: 0.85rem;
    color: #d9c9b8;
}

@media (max-width: 900px) {
    .pie-contenido {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pie-contenido {
        grid-template-columns: 1fr;
        padding: 24px 16px 16px;
        gap: 22px;
    }
}


/* ===== Cabecera fija en celular: UNA sola fila =====
   Va al FINAL del archivo a proposito: las reglas de escritorio de la cabecera (logo, buscador, botones)
   estan definidas mas arriba con la misma especificidad y, si esto estuviera antes, ganarian ellas. */
@media (max-width: 768px) {
    /* Una sola fila fija: logo + buscador + Combos + Carrito (solo iconos; el contador del carrito sigue visible) */
    .fila-navegacion {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        padding: 0 8px;
    }

    .contenedor-logo {
        order: 1;
        flex: 0 0 auto;
        margin: 0;
        padding: 3px 6px;
    }

    .logo-busqueda {
        height: 36px;
        width: auto;
    }

    .contenedor-busqueda {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        margin: 0;
    }

    #txt-buscar {
        height: 40px;
        font-size: 1rem;
        padding: 0 32px 0 10px;
    }

    .icono-lupa {
        right: 9px;
        font-size: 1.1rem;
    }

    #btn-ver-combos {
        order: 3;
        flex: 0 0 auto;
        margin: 0;
        padding: 8px;
        justify-content: center;
        font-size: 1rem;
    }

    /* En el celular solo se ven los iconos de Combos y Carrito, pero el texto sigue disponible para los lectores
       de pantalla (no display:none). Los botones son su referencia de posicion: asi el texto absoluto no se
       escapa de la pantalla ni ensancha la pagina. */
    #btn-ver-combos,
    .btn-carrito-cabecera {
        position: relative;
    }

    .texto-promos-nav,
    .texto-carrito-nav {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .btn-carrito-cabecera {
        order: 4;
        flex: 0 0 auto;
        margin: 0;
        padding: 8px 10px;
        font-size: 1rem;
    }
}


/* ===== Barra de categorias (dentro de la cabecera fija) =====
   Inicio, Todos y un desplegable "Categorias" con todas las demas (en columnas): asi cabe cualquier cantidad de tipos.
   No tiene overflow propio: un contenedor con desplazamiento recortaria el panel desplegable. */
.barra-categorias {
    position: relative;
    max-width: 1400px;
    margin: 6px auto 0;
    padding: 0 10px 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lista-barra-categorias {
    list-style: none;
    display: flex;
    flex: none;
    gap: 6px;
    white-space: nowrap;
}

.btn-categoria {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.btn-categoria:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.btn-categoria:focus-visible {
    outline: 3px solid white;
    outline-offset: 2px;
}

.btn-categoria.activo {
    background-color: var(--verde-claro);
    border-color: var(--verde-claro);
    color: var(--marron);
}

/* Boton del desplegable: mismo aspecto que los demas, con una flechita que gira al abrirse. Si el nombre de la
   categoria es largo, el texto se recorta con "..." y el boton nunca se sale de la pantalla. */
.menu-categorias {
    flex: 0 1 auto;
    min-width: 0;
}

.btn-categorias-desplegable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    background: none;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.btn-categorias-desplegable #texto-btn-categorias {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-categorias-desplegable .flechita {
    flex: none;
    transition: transform 0.2s;
}

.btn-categorias-desplegable[aria-expanded="true"] .flechita {
    transform: rotate(180deg);
}

.menu-categorias[hidden],
.panel-categorias[hidden] {
    display: none;
}

/* Panel con todas las categorias: columnas en escritorio, una lista en celular */
.panel-categorias {
    position: absolute;
    top: calc(100% + 4px);
    left: 10px;
    width: min(980px, calc(100% - 20px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 12px;
    background-color: white;
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    text-align: left;
}

.lista-panel-categorias {
    list-style: none;
    columns: 4 200px;
    column-gap: 14px;
}

.lista-panel-categorias li {
    break-inside: avoid;
}

.lista-panel-categorias a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--texto);
    font-size: 0.95rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.lista-panel-categorias a:hover,
.lista-panel-categorias a:focus-visible {
    background-color: var(--verde-suave);
    color: var(--marron);
    font-weight: 700;
}

.lista-panel-categorias a:focus-visible {
    outline: 3px solid var(--marron);
    outline-offset: -3px;
}

.lista-panel-categorias a.activo {
    background-color: var(--verde-accion);
    color: white;
    font-weight: 700;
}

@media (max-width: 600px) {
    .barra-categorias {
        padding: 0 8px 2px;
    }

    .panel-categorias {
        left: 0;
        right: 0;
        width: auto;
        max-height: calc(100vh - var(--alto-cabecera, 100px) - 16px);
        border-radius: 0 0 10px 10px;
    }

    .lista-panel-categorias {
        columns: 1;
    }

    .lista-panel-categorias a {
        padding: 12px 10px; /* blanco tactil comodo */
    }
}

/* El logo es un enlace a la portada */
.enlace-logo {
    display: block;
}

/* ===== Portada: banner + Promocion vigente + una seccion por categoria ===== */
.contenido-inicio {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.seccion-categoria {
    margin-bottom: 32px;
}

.ver-todo-catalogo {
    text-align: center;
    margin: 8px 0 12px;
}

.btn-ver-todo {
    display: inline-block;
    padding: 14px 34px;
    border-radius: 6px;
    background-color: var(--verde-accion);
    color: white;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.btn-ver-todo:hover,
.btn-ver-todo:focus-visible {
    background-color: var(--verde-accion-hover);
}

/* Estado de la portada: cargando / error con reintento */
.portada-estado {
    text-align: center;
    padding: 40px 16px;
    color: var(--marron);
    font-weight: 600;
}

.portada-estado .btn-comprar {
    margin-top: 14px;
    width: auto;
    padding: 10px 24px;
}

/* En tablet y celular cada seccion es una fila que se desliza con el dedo (la pagina no se hace interminable) */
@media (max-width: 899px) {
    .seccion-categoria .cuadricula-productos {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .seccion-categoria .card-producto {
        flex: 0 0 min(72%, 260px);
        scroll-snap-align: start;
    }

    .contenido-inicio {
        padding: 14px 12px;
    }
}

@media (min-width: 900px) {
    .seccion-categoria .cuadricula-productos {
        grid-template-columns: repeat(4, 1fr);
    }
}