/* Estilos de catalogo.php */

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: #121212;
            line-height: 1.6;
        }

        header {
            background-color: #ffffff;
            padding: 15px 7%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eaeaea;
        }

        .logo { font-size: 24px; font-weight: bold; text-decoration: none; color: #121212; }
        .logo span { color: #ff6b00; }

        .btn-volver {
            background-color: #121212; color: #ffffff;
            padding: 10px 20px; border-radius: 20px;
            text-decoration: none; font-weight: bold; font-size: 14px;
        }
        .btn-volver:hover { background-color: #ff6b00; }

        .container { padding: 40px 7%; }

        .section-header { text-align: center; margin-bottom: 30px; }
        .section-header h1 { font-size: 32px; margin-bottom: 10px; }
        .section-header span { color: #ff6b00; }

        /* Botones de Filtro */
        .filtros { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
        .btn-filtro {
            background: #ffffff; border: 1px solid #cccccc;
            padding: 8px 18px; border-radius: 20px;
            text-decoration: none; color: #121212; font-weight: bold;
        }
        .btn-filtro:hover, .btn-filtro.active {
            background-color: #ff6b00; color: #ffffff; border-color: #ff6b00;
        }

        /* Cuadrícula de Tarjetas de Productos */
        .productos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .producto-card {
            background: #ffffff; border: 1px solid #eaeaea;
            border-radius: 10px; overflow: hidden;
        }

        /* 
          EXPLICACIÓN: Cuadro de la imagen y efecto Zoom al pasar el ratón.
          - overflow: hidden; oculta la foto cuando crece para que no se salga.
          - cursor: pointer; cambia el mouse a una manita.
        */
        .producto-img-container {
            height: 180px;
            background: #fff5ee;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden; 
            cursor: pointer;   
        }

        .producto-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease; /* Hace que el zoom sea lento y elegante */
        }

        /* Al pasar el ratón, la foto se agranda un 18% */
        .producto-img-container:hover img {
            transform: scale(1.18); 
        }

        .producto-info { padding: 20px; }
        .producto-info span.badge { background: #fff0e6; color: #ff6b00; font-size: 12px; font-weight: bold; padding: 4px 10px; border-radius: 10px; }
        .producto-info h3 { font-size: 18px; margin: 10px 0 5px; }
        .producto-info p { color: #666666; font-size: 14px; margin-bottom: 15px; }

        .producto-footer { display: flex; justify-content: space-between; align-items: center; }
        .producto-precio { font-weight: bold; font-size: 18px; }

        .btn-comprar {
            background-color: #ff6b00; color: #ffffff;
            padding: 8px 15px; border-radius: 15px;
            text-decoration: none; font-size: 14px; font-weight: bold;
        }
        .btn-comprar:hover { background-color: #e56000; }

        /* 
          EXPLICACIÓN: Ventana Modal (Pantalla completa oscura para ver la imagen grande)
        */
        .modal-imagen {
            display: none; /* Oculta por defecto */
            position: fixed;
            z-index: 2000;
            left: 0; top: 0;
            width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.85); /* Fondo negro semitransparente */
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal-imagen.active {
            display: flex; /* Se activa con JavaScript */
        }

        .modal-content-wrapper {
            position: relative;
            max-width: 90%;
            max-height: 90vh;
            text-align: center;
        }

        .modal-content-wrapper img {
            max-width: 100%;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 12px;
        }

        .modal-close-btn {
            position: absolute;
            top: -45px; right: 0;
            background: #ff6b00; color: white;
            border: none; width: 36px; height: 36px;
            border-radius: 50%; font-size: 18px; cursor: pointer;
        }

        .modal-caption { color: #fff; margin-top: 12px; font-size: 16px; font-weight: 600; }