/*
 * Nuriplast — catálogo (la tienda) y ficha de producto. Va encima de paginas.css.
 * Las familias son las fichas de categoría de la tienda actual (foto de presentación, nombre en
 * mayúsculas y el número de piezas en verde) y cada pieza se enseña con el molde que se abre.
 */

/* ═══ Familias ═══════════════════════════════════════════════════════════════════════ */
.familias-catalogo {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px;
    margin: 0 0 clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 560px) { .familias-catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Las cinco en fila cuando hay sitio: sin barra lateral (900–1079) o con ella a partir de 1280 */
@media (min-width: 900px) and (max-width: 1079px) { .familias-catalogo { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .familias-catalogo { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.familia-catalogo { display: block; text-align: center; }
.familia-catalogo-foto {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radio-s);
    overflow: hidden;
    background: #1B1B1B;
    transition: transform .6s var(--curva), box-shadow .6s var(--curva);
}
.familia-catalogo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva); }
.familia-catalogo:hover .familia-catalogo-foto { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(2, 2, 2, .6); }
.familia-catalogo:hover .familia-catalogo-foto img { transform: scale(1.08); }
.familia-catalogo-nombre {
    display: block; margin-top: 1rem;
    font-size: .84rem; line-height: 1.35; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    transition: color .3s ease;
}
.familia-catalogo-nombre b { font-weight: 600; color: #56752F; }
.familia-catalogo:hover .familia-catalogo-nombre { color: #56752F; }
.familia-catalogo--activa .familia-catalogo-foto { box-shadow: 0 0 0 3px var(--verde), 0 26px 44px -26px rgba(2, 2, 2, .55); }
.familia-catalogo--activa .familia-catalogo-nombre { color: #56752F; }

/* ═══ Listado ════════════════════════════════════════════════════════════════════════ */
.tienda-cabeza {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.4rem;
    margin-bottom: 1.8rem; padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--linea);
}
.tienda-cabeza h2 { margin: 0; }
.tienda-cuenta { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--tinta-3); }
.tienda-cuenta a { color: #56752F; text-decoration: underline; text-underline-offset: 3px; }
.tienda-cinta { margin-top: clamp(3.5rem, 7vw, 6rem); }

.rejilla-piezas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 24px; }
@media (min-width: 620px) { .rejilla-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .rejilla-piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .rejilla-piezas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/*
 * En el listado, el escalonado va por filas y no por toda la lista: cada pieza entra (y su
 * molde se abre) según su columna, así la última no espera casi un segundo al aparecer.
 */
.rejilla-piezas:not(.rejilla-piezas--tres) > .pieza { --retraso: 0ms !important; }
@media (min-width: 620px) and (max-width: 1279px) {
    .rejilla-piezas:not(.rejilla-piezas--tres) > .pieza:nth-child(2n) { --retraso: 110ms !important; }
}
@media (min-width: 1280px) {
    .rejilla-piezas:not(.rejilla-piezas--tres) > .pieza:nth-child(3n+2) { --retraso: 110ms !important; }
    .rejilla-piezas:not(.rejilla-piezas--tres) > .pieza:nth-child(3n) { --retraso: 220ms !important; }
}

/* ═══ Tarjeta de pieza ═══════════════════════════════════════════════════════════════ */
.pieza { display: block; }
.pieza-foto {
    position: relative;
    aspect-ratio: 1536 / 986;
    border-radius: var(--radio-m);
    overflow: hidden;
    background: #1B1B1B;
    transition: transform .6s var(--curva), box-shadow .6s var(--curva);
}
.pieza-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva); }
.pieza:hover .pieza-foto { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(2, 2, 2, .6); }
.pieza:hover .pieza-foto img { transform: scale(1.06); }
.pieza-sinfoto { display: grid; place-items: center; height: 100%; color: rgba(255, 255, 255, .25); }
.pieza-sinfoto svg { width: 56px; height: 56px; }
.pieza-marca {
    position: absolute; top: 16px; left: 16px; z-index: 3;
    padding: .4rem .85rem;
    border-radius: var(--pildora);
    background: var(--verde); color: var(--negro);
    font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}

/*
 * El molde se abre cuando la pieza entra en pantalla: dos mitades de acero que se separan y
 * dejan ver la pieza, como al abrir el molde de verdad. Después se queda abierto.
 */
.pieza-molde { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pieza-molde i {
    position: absolute; top: 0; bottom: 0; width: 50.5%;
    background: linear-gradient(180deg, #E2E5E0, #C6CBC3);
    box-shadow: inset 0 0 0 1px rgba(2, 2, 2, .07);
    transition: transform 1s var(--curva-molde);
    transition-delay: calc(var(--retraso, 0ms) + 150ms);
}
/* Tornillos del molde, para que se lea como una pieza de acero */
.pieza-molde i::before, .pieza-molde i::after {
    content: '';
    position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(2, 2, 2, .14);
}
.pieza-molde i::before { top: 14px; }
.pieza-molde i::after { bottom: 14px; }
.pieza-molde i:first-child { left: 0; border-right: 1px solid rgba(2, 2, 2, .14); }
.pieza-molde i:first-child::before, .pieza-molde i:first-child::after { left: 14px; }
.pieza-molde i:last-child { right: 0; border-left: 1px solid rgba(2, 2, 2, .14); }
.pieza-molde i:last-child::before, .pieza-molde i:last-child::after { right: 14px; }
.js .pieza.visible .pieza-molde i:first-child,
.js .ficha-fotos.visible .pieza-molde i:first-child { transform: translateX(-101%); }
.js .pieza.visible .pieza-molde i:last-child,
.js .ficha-fotos.visible .pieza-molde i:last-child { transform: translateX(101%); }
/* Sin JavaScript o con menos movimiento, el molde no llega a taparla */
.no-js .pieza-molde { display: none; }
@media (prefers-reduced-motion: reduce) { .pieza-molde { display: none; } }

.pieza-texto { padding: 1.3rem .3rem 0; }
.pieza-familia { display: block; font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tinta-3); }
.pieza-nombre {
    margin: .45rem 0 .5rem;
    font-size: clamp(1.25rem, 1.1rem + .5vw, 1.6rem); line-height: 1.25;
    transition: color .3s ease;
}
.pieza:hover .pieza-nombre { color: #56752F; }
.pieza-resumen {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0; color: #666; font-size: .94rem; line-height: 1.6;
}
.pieza-pie {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
    margin-top: 1.1rem; padding-top: .9rem;
    border-top: 1px solid var(--linea);
    font-size: .88rem;
}
.pieza-precio { font-weight: 700; color: #56752F; }
.pieza-medidas { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-3); }

/* ═══ Ficha de producto ══════════════════════════════════════════════════════════════ */
.ficha-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) { .ficha-rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 80px); align-items: start; } }

.ficha-grande {
    position: relative;
    aspect-ratio: 1536 / 986;
    border-radius: var(--radio-m);
    overflow: hidden;
    background: #1B1B1B;
}
.ficha-grande img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease, transform 1.2s var(--curva); }
.ficha-grande:hover img { transform: scale(1.06); }
.ficha-grande--vacia { display: grid; place-items: center; color: rgba(255, 255, 255, .2); }
.ficha-grande--vacia svg { width: 84px; height: 84px; }
.ficha-miniaturas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .9rem; }
.ficha-mini {
    width: 92px; aspect-ratio: 1536 / 986; padding: 0;
    border: 0; border-radius: 14px;
    overflow: hidden; cursor: pointer; background: #1B1B1B;
    opacity: .72;
    transition: opacity .3s ease, transform .4s var(--curva), box-shadow .3s ease;
}
.ficha-mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha-mini:hover { opacity: 1; transform: translateY(-2px); }
.ficha-mini--activa { opacity: 1; box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--verde); }

.ficha-familia {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 1.4rem;
    font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--tinta-2);
}
.ficha-familia svg { width: 18px; height: 18px; color: var(--verde-hondo); }
.ficha-precio {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.4rem;
    margin: 0 0 1.6rem; padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--linea);
}
.ficha-precio-valor { font-family: var(--f-titular); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.1; font-weight: 300; letter-spacing: -1px; }
.ficha-minimo { font-size: .76rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-3); }
/* Venta por bolsas: frase normal, que se lea bien */
.ficha-minimo.ficha-bolsa { display: block; margin-top: .35rem; font-size: .86rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.5; }
.ficha-resumen { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--tinta-2); }
.ficha-tecnica { display: grid; margin: 1.8rem 0 0; }
.ficha-tecnica > div {
    display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--linea);
}
.ficha-tecnica dt { font-size: .74rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-3); }
.ficha-tecnica dd { margin: 0; font-size: .96rem; }
.ficha-botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
/* «Pedir más información»: el botón verde de WhatsApp de la ficha actual */
.boton--whatsapp { --b-fondo: linear-gradient(90deg, #25D366 0%, #1EBE5B 50%, #25D366 100%); }
.boton--whatsapp .flecha { color: #1EBE5B; }
.boton--whatsapp:hover { box-shadow: 0 16px 34px -16px rgba(37, 211, 102, .8); }
.boton--whatsapp .flecha svg { width: 13px; height: 13px; }

/* minmax(0, 1fr): la tabla de medidas se desplaza dentro de su caja y no ensancha la página */
.ficha-detalle { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 4.5rem); margin-top: clamp(4rem, 8vw, 6.5rem); }
@media (min-width: 1080px) {
    .ficha-detalle { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 80px); align-items: start; }
    /* La tabla de medidas es larga: la descripción la acompaña mientras se baja */
    .ficha-detalle .ficha-descripcion { position: sticky; top: 110px; }
}
/* La pestaña «Descripción» de la tienda actual */
.ficha-pestana {
    display: inline-block;
    margin: 0 0 1.6rem; padding: .95rem 1.6rem;
    border-radius: var(--pildora);
    background: var(--gris-tarjeta);
    font-family: var(--f-cuerpo); font-size: .95rem; font-weight: 700; letter-spacing: 0;
}
.ficha-medidas h2 { margin: 0 0 1.4rem; }
.tabla-envoltura { overflow-x: auto; border-radius: var(--radio-s); box-shadow: inset 0 0 0 1px var(--linea); }
.tabla { width: 100%; min-width: 420px; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .8rem 1.1rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla th { background: var(--gris-tarjeta); font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-3); }
.tabla tbody tr { transition: background-color .25s ease; }
.tabla tbody tr:hover { background: rgba(159, 193, 112, .12); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla-ref { font-weight: 700; font-variant-numeric: tabular-nums; }
/* En el móvil la tabla cabe entera: sin ancho mínimo y con menos relleno */
@media (max-width: 519px) {
    .tabla { min-width: 0; font-size: .84rem; }
    .tabla th, .tabla td { padding: .7rem .65rem; }
    .tabla th { letter-spacing: 1px; }
}

.relacionados { margin-top: clamp(4.5rem, 9vw, 7.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--linea); }
.relacionados h2 { margin: 0 0 clamp(2rem, 4vw, 3rem); }