/* ============================================================
   Tienda profesional — tarjeta de producto, filtros y ficha.
   La usan tienda.php y index.php (la portada). Va DESPUÉS de estilo.css.

   Principios de presentación:
   - Cada foto se muestra ENTERA (object-fit: contain) sobre su propio
     fondo desenfocado: ningún producto se recorta y todas las tarjetas
     quedan del mismo tamaño aunque las fotos sean distintas.
   - Un solo precio, grande. Una sola acción por tarjeta.
   - Escasez y novedad con etiquetas pequeñas (Nuevo / Últimas N / Edición
     limitada / Agotado), nunca con texto encima de la foto más allá de eso.
   - Verde = acción (comprar, filtro activo). Dorado = cualidad especial del
     producto (edición limitada, autografiada). Nunca al revés.
   ============================================================ */

/* ---------- Etiquetas ---------- */
.chip-merch {
    display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
    line-height: 1; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.chip-nuevo { background: var(--accion); color: #04170a; }
.chip-ultimas { background: #f0a35e; color: #2a1403; }
.chip-especial { background: #c9a24b; color: #1a1405; }
.chip-destacado { background: #f2f2f2; color: #111; }
.chip-agotado { background: #3a3a3a; color: #d9d9d9; }
.chip-neutro { background: transparent; color: var(--texto-tenue); border: 1px solid var(--borde); font-weight: 600; }

/* ---------- Encabezado y filtros de la tienda ---------- */
.tienda-intro { margin: 4px 0 0; color: var(--texto-tenue); }
.tienda-filtros {
    display: flex; gap: 8px; overflow-x: auto; margin: 18px -16px 0; padding: 2px 16px 6px;
    scrollbar-width: none; scroll-snap-type: x proximity;
}
.tienda-filtros::-webkit-scrollbar { display: none; }
.filtro-merch {
    flex: none; scroll-snap-align: start; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.88rem;
    color: var(--texto); background: var(--fondo-tarjeta); border: 1px solid var(--borde);
    padding: 10px 16px; border-radius: 999px; min-height: 44px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filtro-merch .n { color: var(--texto-tenue); font-weight: 600; margin-left: 4px; }
.filtro-merch.activo { background: var(--accion); border-color: var(--accion); color: #04170a; }
.filtro-merch.activo .n { color: #04170a; opacity: 0.75; }
@media (hover: hover) and (pointer: fine) {
    .filtro-merch:not(.activo):hover { border-color: var(--texto-tenue); }
}
.tienda-vacia { text-align: center; color: var(--texto-tenue); padding: 40px 0; }

/* ---------- Rejilla ---------- */
.grid-tienda {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px;
}
@media (min-width: 640px) { .grid-tienda { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 980px) { .grid-tienda { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.grid-tienda[hidden], .producto[hidden], .tarjeta-merch.producto[hidden] { display: none; }

/* ---------- Tarjeta de producto ---------- */
.tarjeta-merch.producto {
    position: relative; flex: none; display: flex; flex-direction: column; padding: 0; overflow: hidden;
    background: var(--fondo-tarjeta); border-radius: 14px; cursor: pointer;
}
.producto .pf {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0d0d0d;
}
.tarjeta-merch.producto .pf img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.tarjeta-merch.producto .pf .pf-fondo {
    inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); object-fit: cover;
    filter: blur(18px) brightness(0.45) saturate(1.1);
}
.tarjeta-merch.producto .pf .pf-frente { object-fit: contain; padding: 5%; width: 100%; height: 100%; transition: transform 0.35s var(--ease-suave); }
.tarjeta-merch.producto .pf .pf-segunda { object-fit: contain; padding: 5%; opacity: 0; transition: opacity 0.3s ease; background: #0d0d0d; }
@media (hover: hover) and (pointer: fine) {
    .producto:hover .pf-segunda { opacity: 1; }
    .producto:hover .pf-frente { transform: scale(1.03); }
}
.pf-chips { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; z-index: 2; }
.pf-cuenta {
    position: absolute; right: 8px; bottom: 8px; z-index: 2; font-size: 0.68rem; font-weight: 700;
    background: rgba(10, 10, 10, 0.72); color: #f2f2f2; padding: 4px 8px; border-radius: 999px;
}
.producto-agotado .pf-frente, .producto-agotado .pf-segunda { filter: grayscale(0.9) brightness(0.65); }
.producto-agotado .pf-fondo { filter: blur(18px) brightness(0.3) grayscale(1); }

.producto .pi { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px 14px; flex: 1; }
.producto .pi-marca { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--texto-tenue); }
.producto .pi-nombre { margin: 0; font-size: 0.98rem; line-height: 1.25; font-weight: 700; }
.producto .pi-abrir {
    all: unset; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.producto .pi-abrir::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.producto .pi-abrir:focus-visible::after { outline: 2px solid var(--accion); outline-offset: -2px; border-radius: 14px; }
.producto .pi-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.producto .pi-precio { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.producto .pi-tallas { font-size: 0.72rem; color: var(--texto-tenue); text-align: right; }
.producto .pi-comprar { position: relative; z-index: 2; margin-top: 10px; width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.producto .pi-sin-stock { margin-top: 10px; font-size: 0.8rem; color: var(--texto-tenue); }

/* Destacado: ocupa todo el ancho de la rejilla */
.producto-destacado { grid-column: 1 / -1; }
.producto-destacado .pf { aspect-ratio: 1 / 1; }
@media (min-width: 720px) {
    .tarjeta-merch.producto-destacado { flex-direction: row; align-items: stretch; }
    .producto-destacado .pf { flex: 0 0 44%; aspect-ratio: auto; min-height: 380px; }
    .producto-destacado .pi { justify-content: center; padding: 28px 32px; gap: 8px; }
    .producto-destacado .pi-marca { font-size: 0.74rem; }
    .producto-destacado .pi-nombre { font-size: 1.7rem; line-height: 1.15; }
    .producto-destacado .pi-precio { font-size: 1.8rem; }
    .producto-destacado .pi-comprar { width: auto; align-self: flex-start; padding-left: 28px; padding-right: 28px; }
}

/* En la portada: las tarjetas van en un carrusel horizontal */
.carrusel-portada .tarjeta-merch.producto { flex: 0 0 168px; scroll-snap-align: start; }
@media (min-width: 640px) { .carrusel-portada .tarjeta-merch.producto { flex-basis: 200px; } }

/* ---------- Ficha del producto (modal) ---------- */
.ficha-merch.modal-merch-contenido {
    max-width: 480px; padding: 0; text-align: left; overflow-y: auto; max-height: 92vh;
}
.ficha-merch .modal-cerrar {
    position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(10, 10, 10, 0.7); display: flex; align-items: center; justify-content: center; z-index: 6;
}
.ficha-galeria { position: relative; background: #0d0d0d; }
.ficha-visor { position: relative; }
.ficha-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ficha-pista::-webkit-scrollbar { display: none; }
.ficha-slide { position: relative; flex: 0 0 100%; aspect-ratio: 1 / 1.08; scroll-snap-align: center; overflow: hidden; }
.ficha-merch .ficha-slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; max-height: none; }
.ficha-merch .ficha-slide .ficha-slide-fondo { inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); object-fit: cover; filter: blur(20px) brightness(0.45); }
.ficha-merch .ficha-slide .ficha-slide-frente { object-fit: contain; padding: 4%; cursor: zoom-in; }
.ficha-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(10, 10, 10, 0.65); color: #fff; font-size: 1.5rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3;
}
.ficha-flecha[hidden] { display: none; }
.ficha-flecha:disabled { opacity: 0.3; cursor: default; }
.ficha-flecha-prev { left: 10px; }
.ficha-flecha-next { right: 10px; }
@media (hover: none) { .ficha-flecha { display: none; } }
.ficha-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 12px; }
.ficha-dots[hidden], .ficha-miniaturas[hidden] { display: none; }
.ficha-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #4a4a4a; cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease; position: relative;
}
.ficha-dot::before { content: ""; position: absolute; inset: -10px; } /* área de toque más grande */
.ficha-dot.activo { width: 22px; background: var(--accion); }
.ficha-miniaturas { display: none; }

.ficha-info { padding: 18px 18px 20px; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ficha-marca { margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--texto-tenue); }
.ficha-merch .ficha-info h3 { margin: 4px 0 0; font-size: 1.45rem; line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; }
.ficha-precio-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.ficha-merch .ficha-precio-fila .precio-merch { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; }
.ficha-merch .texto-stock-merch { margin: 0; font-size: 0.78rem; }
.ficha-merch .texto-stock-merch.stock-bajo { color: #f0a35e; font-weight: 700; }

.ficha-bloque { margin-top: 18px; }
.ficha-etiqueta { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 8px; }
.ficha-tallas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-talla {
    min-width: 48px; min-height: 44px; padding: 0 14px; font: inherit; font-weight: 700; color: var(--texto);
    background: transparent; border: 1px solid #3d3d3d; border-radius: 10px; cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ficha-talla.activa { border-color: var(--accion); background: rgba(34, 197, 94, 0.14); }
@media (hover: hover) and (pointer: fine) { .ficha-talla:not(.activa):hover { border-color: var(--texto-tenue); } }
.ficha-aviso-talla { margin: 8px 0 0; font-size: 0.82rem; font-weight: 700; color: #f0a35e; }
.ficha-bloque.sacudir { animation: ficha-sacudir 0.4s ease; }
@keyframes ficha-sacudir { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .ficha-bloque.sacudir { animation: none; } }

/* La barra de compra se queda a la vista mientras se lee el resto */
.ficha-compra {
    position: sticky; bottom: 0; z-index: 4; display: flex; gap: 10px; align-items: stretch;
    margin: 16px -18px 0; padding: 12px 18px 14px;
    background: linear-gradient(to top, var(--fondo-tarjeta) 78%, rgba(28, 28, 28, 0));
}
.ficha-merch .ficha-compra .btn { margin: 0; width: auto; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ficha-merch .ficha-compra #modal-merch-comprar { flex: 1; font-size: 1rem; font-weight: 800; }
.ficha-merch .ficha-compartir { padding: 0 16px; }
.ficha-merch .ficha-compartir span { display: none; }
@media (min-width: 480px) { .ficha-merch .ficha-compartir span { display: inline; } }
.ficha-agotado {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: var(--radio);
    background: #2a2a2a; color: var(--texto-tenue); font-weight: 700;
}
.ficha-agotado.oculto, #modal-merch-comprar.oculto { display: none; }

.ficha-entrega { margin: 2px 0 0; font-size: 0.85rem; color: var(--texto); padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.ficha-aviso-mayores { margin: 12px 0 0; font-size: 0.8rem; color: #f0d38a; padding: 10px 12px; border: 1px solid #5c4a1c; border-radius: 10px; background: rgba(201, 162, 75, 0.08); }
.ficha-merch .descripcion-merch { margin: 0; padding: 0; border: 0; font-size: 0.95rem; line-height: 1.55; color: #dedede; white-space: pre-line; }
.ficha-detalles { margin: 0; display: grid; grid-template-columns: minmax(90px, 36%) 1fr; font-size: 0.9rem; }
.ficha-detalles dt, .ficha-detalles dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.ficha-detalles dt { color: var(--texto-tenue); padding-right: 12px; }
.ficha-detalles dd { color: var(--texto); font-weight: 600; }
.ficha-detalles .ficha-detalle-solo { grid-column: 1 / -1; font-weight: 500; position: relative; padding-left: 16px; }
.ficha-detalles .ficha-detalle-solo::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--accion); }
.ficha-merch .redes-banda-merch { justify-content: flex-start; margin: 18px 0 4px; }
.ficha-merch .botones-perfil-agrupacion-merch .btn { width: 100%; margin: 0; }

/* Escritorio: foto a la izquierda, información a la derecha */
@media (min-width: 860px) {
    .ficha-merch.modal-merch-contenido {
        max-width: 1000px; width: min(1000px, 94vw); display: grid; grid-template-columns: 1.08fr 1fr; overflow: hidden; max-height: 88vh;
    }
    .ficha-galeria { overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
    .ficha-slide { aspect-ratio: auto; height: min(62vh, 560px); }
    .ficha-dots { display: none; }
    .ficha-miniaturas { display: flex; gap: 8px; padding: 12px 14px 16px; overflow-x: auto; scrollbar-width: none; }
    .ficha-miniaturas[hidden] { display: none; }
    .ficha-mini {
        flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: #1a1a1a;
        overflow: hidden; cursor: pointer; opacity: 0.65; transition: opacity 0.15s ease, border-color 0.15s ease;
    }
    .ficha-mini img { width: 100%; height: 100%; object-fit: cover; }
    .ficha-mini.activa { border-color: var(--accion); opacity: 1; }
    .ficha-info { overflow-y: auto; padding: 28px 28px 8px; }
    .ficha-compra { margin: 18px -28px 0; padding: 12px 28px 16px; }
    .ficha-merch .ficha-info h3 { font-size: 1.8rem; }
}