/* =====================================================
   PRODUCTOS.CSS — EXTENSIÓN
   Se carga DESPUÉS de base.css, solo en productos.html.
   Contiene: catálogo, filtros, tarjetas de producto y
   el modal de producto. No redefine reset, header, footer
   ni botones: esos vienen de base.css.
===================================================== */

/* Variables nuevas que usa este bloque y que no existen
   en base.css (no pisan ninguna variable de base.css) */
:root {
    --border: #ead9dc;
    --shadow: 0 15px 40px rgba(50, 30, 30, .08);
    --gray: #666666;
    --gray-light: #f6f6f6;
}

/* =====================================================
   CATÁLOGO
===================================================== */

.catalog-section {

    padding-top:
        70px;

}


.catalog-filter-block {

    /* Espacio reservado para futuros filtros */

}


.filter-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;

}


.filter-btn {

    padding: 11px 22px;

    border:
        1px solid var(--border);

    background:
        var(--white);

    color: var(--dark);

    cursor: pointer;

    font-size: 13px;

    transition:
        .2s ease;

}


.filter-btn:hover,
.filter-btn.active {

    background:
        var(--pink-dark);

    border-color:
        var(--pink-dark);

    color:
        var(--white);

}


/* =====================================================
   FILTROS SECUNDARIOS
===================================================== */

.filter-title {

    border: 0;

    background:
        transparent;

    color: var(--gray);

    padding: 6px 10px;

    font-size: 12px;

}


.filter-btn2 {

    border: 0;

    background:
        transparent;

    color: var(--gray);

    padding: 6px 10px;

    font-size: 12px;

    cursor: pointer;

    border-bottom:
        1px solid transparent;

}


.filter-btn2:hover,
.filter-btn2.active {

    background:
        transparent;

    border-color:
        transparent;

    color:
        var(--pink-dark);

    border-bottom-color:
        var(--pink-dark);

}


/* =====================================================
   ENCABEZADO DEL CATÁLOGO
===================================================== */

.catalog-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 25px;

    margin:
        55px 0 30px;

}


.catalog-heading h2 {

    font-size:
        clamp(32px, 4vw, 46px);

}


.product-count {

    color: var(--gray);

    font-size: 13px;

}


/* =====================================================
   PRODUCTOS
===================================================== */

.products-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;

}


.product-card {

    display: flex;

    flex-direction: column;

    border:
        1px solid var(--border);

    background:
        var(--white);

    cursor: pointer;

    transition:
        .3s ease;

}


.product-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}


.product-card-image {

    aspect-ratio:
        1 / 1;

    overflow: hidden;

    background:
        var(--pink-light);

}


.product-card-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;

}


.product-card:hover
.product-card-image img {

    transform:
        scale(1.04);

}


.product-card-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 25px;

}


.product-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 12px;

}


.product-tag {

    display: inline-block;

    padding:
        4px 9px;

    background:
        var(--pink-light);

    color:
        var(--pink-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;

}


.product-tag.secondary {

    background:
        var(--gray-light);

    color:
        var(--gray);

}


.product-card h3 {

    margin-bottom:
        10px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.25;

}


.product-card p {

    color:
        var(--gray);

    font-size: 13px;

    margin-bottom: 18px;

}


/* =====================================================
   BOTÓN VER PRODUCTO
===================================================== */

.product-view-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 0;

    border: 0;

    background: none;

    color:
        var(--pink-dark);

    cursor: pointer;

    font-size: 13px;

    font-weight: 700;

}


.product-view-btn:hover {

    color:
        var(--dark);

}


/* Compatibilidad con el botón generado
   por productos.js */

.product-card-button {

    align-self: flex-start;

    margin-top: auto;

}


/* =====================================================
   SIN RESULTADOS
===================================================== */

.no-results {

    display: none;

    padding:
        80px 20px;

    text-align: center;

}


.no-results.show {

    display: block;

}


.no-results i {

    margin-bottom:
        15px;

    font-size: 35px;

    color:
        var(--pink-dark);

}


.no-results h3 {

    margin-bottom:
        5px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 28px;

}


.no-results p {

    color:
        var(--gray);

}


/* =====================================================
   PRODUCT MODAL
===================================================== */

.product-modal {

    position: fixed;

    inset: 0;

    z-index: 2000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 30px;

}


/*
   IMPORTANTE:
   productos.js utiliza la clase .active
   para abrir el modal.
*/

.product-modal.active {

    display: flex;

}


/* Compatibilidad adicional */

.product-modal.open {

    display: flex;

}


/* =====================================================
   OVERLAY
===================================================== */

.modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(20,15,15,.72);

    cursor: pointer;

}


/* =====================================================
   CONTENIDO DEL MODAL
===================================================== */

.product-modal-content {

    position: relative;

    z-index: 2;

    width:
        min(1100px, 100%);

    max-height:
        90vh;

    overflow-y: auto;

    background:
        var(--white);

    box-shadow:
        0 25px 80px rgba(0,0,0,.25);

}


/* =====================================================
   BOTÓN CERRAR
===================================================== */

.modal-close {

    position: absolute;

    top: 15px;
    right: 15px;

    z-index: 5;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.95);

    cursor: pointer;

    font-size: 20px;

    transition:
        .2s ease;

}


.modal-close:hover {

    background:
        var(--pink-light);

    color:
        var(--pink-dark);

}


/* =====================================================
   GRID DEL MODAL
===================================================== */

.product-modal-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

}


/* =====================================================
   IMÁGENES DEL MODAL
===================================================== */

.modal-product-images {

    padding:
        30px;

    background:
        var(--pink-light);

}


.modal-main-image {

    aspect-ratio:
        1 / 1;

    overflow: hidden;

    background:
        var(--white);

}


.modal-main-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.modal-thumbnails {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;

}


.modal-thumbnail {

    width: 70px;
    height: 70px;

    padding: 0;

    border:
        2px solid transparent;

    background:
        var(--white);

    cursor: pointer;

    flex-shrink: 0;

}


.modal-thumbnail.active {

    border-color:
        var(--pink-dark);

}


.modal-thumbnail:hover {

    border-color:
        var(--pink);

}


.modal-thumbnail img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* =====================================================
   INFORMACIÓN DEL MODAL
===================================================== */

.modal-product-info {

    padding:
        55px 45px;

}


.modal-product-info h2 {

    margin-bottom:
        18px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(32px, 4vw, 46px);

    line-height: 1.15;

    font-weight: 500;

}


/* =====================================================
   DESCRIPCIÓN
===================================================== */

.modal-description {

    margin-bottom:
        25px;

    color:
        var(--gray);

    font-size: 15px;

    line-height: 1.7;

}


.modal-description p {

    margin: 0;

    color:
        var(--gray);

}


/* =====================================================
   BLOQUES DE INFORMACIÓN
===================================================== */

.modal-info-block {

    margin-bottom:
        22px;

}


.modal-info-block h4 {

    margin-bottom:
        7px;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color:
        var(--dark);

}


.modal-info-block p {

    color:
        var(--gray);

    font-size: 14px;

    line-height: 1.7;

}


.modal-info-block ul {

    margin: 0;

    padding-left:
        20px;

    color:
        var(--gray);

    font-size: 14px;

    line-height: 1.7;

}


.modal-info-block li {

    margin-bottom:
        5px;

}


.modal-info-block li:last-child {

    margin-bottom: 0;

}


/* =====================================================
   BOTÓN DEL MODAL
===================================================== */

.modal-product-info > .btn {

    margin-top:
        5px;

}


/* =====================================================
   RESPONSIVE — TABLET (900px)
===================================================== */

@media (max-width: 900px) {

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-modal {
        padding: 20px;
        align-items: center;
    }

    .product-modal-content {
        max-height: 90vh;
    }

    .product-modal-grid {
        grid-template-columns: 1fr;
    }

    .modal-product-images {
        padding: 25px;
    }

    .modal-product-info {
        padding: 40px 30px;
    }

}


/* =====================================================
   RESPONSIVE — MÓVIL (600px)
===================================================== */

@media (max-width: 600px) {

    .products-grid {
        grid-template-columns: 1fr;
    }

    .catalog-heading {
        display: block;
    }

    .product-count {
        margin-top: 10px;
    }

    .product-modal {
        padding: 8px;
        align-items: center;
    }

    .product-modal-content {
        width: 100%;
        max-height: 94vh;
    }

    .product-modal-grid {
        grid-template-columns: 1fr;
    }

    .modal-product-images {
        padding: 12px;
    }

    .modal-product-info {
        padding: 30px 20px 35px;
    }

    .modal-product-info h2 {
        padding-right: 35px;
        font-size: 32px;
    }

    .modal-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .modal-thumbnail {
        width: 58px;
        height: 58px;
    }

    .modal-info-block {
        margin-bottom: 18px;
    }

    .modal-info-block h4 {
        font-size: 12px;
    }

    .modal-info-block p,
    .modal-info-block ul {
        font-size: 13px;
    }

    .modal-product-info > .btn {
        width: 100%;
    }

}

/* =====================================================
   FLECHAS - TARJETAS DEL LISTADO
   ===================================================== */

.product-card-image {
  position: relative;
}

.card-image-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.product-card-image:hover .card-image-arrow {
  opacity: 1;
}

.card-image-arrow-left {
  left: 8px;
}

.card-image-arrow-right {
  right: 8px;
}


/* =====================================================
   FLECHAS - MODAL
   ===================================================== */

.modal-main-image {
  position: relative;
}

.modal-image-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
}

.modal-image-arrow-left {
  left: 12px;
}

.modal-image-arrow-right {
  right: 12px;
}