/* =========================================================================
   tienda.css — Tienda en línea
   Sistema Integral de Gestión Comercial · Jabc SoftWorks

   FORMATO: Expandido absoluto (una declaración por línea)

   Se monta ENCIMA de app.css: reutiliza sus tokens (colores, radios, curvas)
   y solo agrega lo que el escaparate necesita. Así el panel y la tienda
   comparten paleta y movimiento sin duplicar el sistema, y cambiar el color
   de marca en la configuración cambia los dos a la vez.

   DIFERENCIA DE REGISTRO respecto al panel: aquí el visitante no viene a
   ejecutar una tarea, viene a decidir. Por eso la tipografía crece, el aire
   se multiplica y el producto manda; en el panel era al revés.
   ========================================================================= */

/* =========================================================================
   1. ESTRUCTURA
   ========================================================================= */
.envoltura {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

@media (max-width: 640px) {

    .envoltura {
        width: calc(100% - 28px);
    }
}

/* =========================================================================
   2. CABECERA
   ========================================================================= */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--borde);
}

.cabecera__fila {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 62px;
}

.cabecera__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16.5px;
    font-weight: 650;
    letter-spacing: -0.025em;
    color: var(--tinta);
    text-decoration: none;
    white-space: nowrap;
}

.cabecera__logo:hover {
    text-decoration: none;
}

.cabecera__marca {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--marca-tinta);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.cabecera__marca img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cabecera__nav {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.cabecera__enlace {
    padding: 7px 11px;
    border-radius: var(--radio-sm);
    color: var(--tinta-suave);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 130ms ease, color 130ms ease;
}

@media (hover: hover) and (pointer: fine) {

    .cabecera__enlace:hover {
        background: var(--superficie-hundida);
        color: var(--tinta);
        text-decoration: none;
    }
}

.cabecera__enlace[aria-current="page"] {
    color: var(--tinta);
    font-weight: 600;
}

.cabecera__acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Buscador con resultados en vivo */
.busqueda-viva {
    position: relative;
    width: 260px;
}

.busqueda-viva input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-completo);
    background: var(--superficie-hundida);
    color: var(--tinta);
    font-family: inherit;
    font-size: 13.5px;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.busqueda-viva input:focus {
    outline: none;
    background: var(--superficie);
    border-color: var(--marca-acento);
    box-shadow: var(--anillo);
}

.busqueda-viva svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--tinta-tenue);
    pointer-events: none;
}

.sugerencias {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 340px;
    overflow-y: auto;
    padding: 5px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-elevada);

    transform-origin: top center;
    transition: opacity 150ms var(--salida), transform 150ms var(--salida);
}

.sugerencias[hidden] {
    display: block;
    opacity: 0;
    transform: scale(.98) translateY(-4px);
    pointer-events: none;
}

.sugerencia {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: var(--radio-sm);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 110ms ease;
}

@media (hover: hover) and (pointer: fine) {

    .sugerencia:hover {
        background: var(--superficie-hundida);
        text-decoration: none;
    }
}

/* Burbuja del carrito */
.boton-carrito {
    position: relative;
}

.burbuja {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--radio-completo);
    background: var(--marca-acento);
    color: var(--marca-acento-encima);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: grid;
    place-items: center;
    transition: transform 200ms var(--salida);
}

.burbuja[hidden] {
    display: none;
}

/* Al agregar algo, la burbuja da un salto corto. Es la única confirmación
   que necesita el visitante para saber que el producto entró. */
@keyframes latido {

    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.burbuja[data-latiendo="true"] {
    animation: latido 340ms var(--salida);
}

/* =========================================================================
   3. PORTADA
   ========================================================================= */
.portada {
    position: relative;
    padding: 76px 0 64px;
    background:
        radial-gradient(900px 420px at 12% -10%, color-mix(in srgb, var(--marca-acento) 11%, transparent), transparent 62%),
        var(--lienzo);
    border-bottom: 1px solid var(--borde);
}

/* Tipografía display (Outfit) en los encabezados y nombres de producto, para
   que la tienda hable el mismo idioma tipográfico que la portada y no se lea
   como una plantilla distinta. */
.portada__titulo,
.seccion__titulo,
.ficha__titulo,
.cajon__titulo,
.bloque__titulo,
.opcion__titulo,
.hito__titulo,
.resumen-pedido .bloque__titulo {
    font-family: var(--fuente-display);
}

.tarjeta-producto__nombre {
    font-family: var(--fuente-display);
    letter-spacing: -0.015em;
}

.portada__titulo {
    font-family: var(--fuente-display);
    font-size: clamp(34px, 6vw, 56px);
    font-weight: 640;
    letter-spacing: -0.035em;
    line-height: 1.02;
    max-width: 15ch;
}

.portada__texto {
    margin-top: 16px;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.55;
    color: var(--tinta-suave);
    max-width: 52ch;
}

.portada__acciones {
    margin-top: 28px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================================================================
   4. REJILLA DE PRODUCTOS
   ========================================================================= */
.seccion {
    padding: 52px 0;
}

.seccion__cabeza {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.seccion__titulo {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 650;
    letter-spacing: -0.03em;
}

.seccion__texto {
    color: var(--tinta-suave);
    font-size: 15px;
    margin-top: 5px;
}

.catalogo {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

@media (max-width: 900px) {

    .catalogo {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.filtros-lateral {
    position: sticky;
    top: 82px;
}

.filtro-grupo {
    margin-bottom: 22px;
}

.filtro-grupo__titulo {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin-bottom: 9px;
}

.filtro-enlace {
    display: block;
    padding: 6px 9px;
    margin-left: -9px;
    border-radius: var(--radio-sm);
    color: var(--tinta-suave);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {

    .filtro-enlace:hover {
        background: var(--superficie-hundida);
        color: var(--tinta);
        text-decoration: none;
    }
}

.filtro-enlace[aria-current="true"] {
    background: var(--superficie-hundida);
    color: var(--tinta);
    font-weight: 600;
}

.rejilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 20px;
}

/* --- Tarjeta ------------------------------------------------------------
   El hover levanta la tarjeta y acerca ligeramente la imagen. Es un gesto
   de escaparate: en una tienda sí vale la pena, porque cada tarjeta se ve
   una o dos veces, no doscientas como en el panel.                        */
.tarjeta-producto {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 260ms var(--salida), box-shadow 260ms var(--salida), border-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {

    .tarjeta-producto:hover {
        transform: translateY(-4px);
        box-shadow: var(--sombra-elevada);
        border-color: var(--borde-fuerte);
        text-decoration: none;
    }

    .tarjeta-producto:hover .tarjeta-producto__imagen img {
        transform: scale(1.05);
    }
}

/* Feedback al presionar: la tarjeta se hunde un pelo. Va DESPUÉS del hover
   para ganarle al levantar cuando se pulsa (Emil: el sistema confirma que
   escuchó el toque). En táctil, donde no hay hover, actúa sola. */
.tarjeta-producto:active {
    transform: translateY(-1px) scale(.988);
    transition: transform 120ms var(--salida);
}

.tarjeta-producto__imagen {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--superficie-hundida);
    display: grid;
    place-items: center;
}

.tarjeta-producto__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 480ms var(--salida);
}

.tarjeta-producto__sin-imagen {
    color: var(--tinta-tenue);
}

.etiqueta-flotante {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: var(--radio-completo);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    background: var(--marca-tinta);
    color: #fff;
}

.etiqueta-flotante--agotado {
    background: var(--peligro);
}

.tarjeta-producto__cuerpo {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tarjeta-producto__categoria {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.tarjeta-producto__nombre {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tarjeta-producto__pie {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.precio {
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.precio--tachado {
    font-size: 13px;
    font-weight: 500;
    color: var(--tinta-tenue);
    text-decoration: line-through;
}

/* =========================================================================
   5. FICHA DE PRODUCTO
   ========================================================================= */
.ficha {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    padding: 40px 0 60px;
    align-items: start;
}

@media (max-width: 860px) {

    .ficha {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.galeria__principal {
    aspect-ratio: 1;
    border-radius: var(--radio-lg);
    overflow: hidden;
    background: var(--superficie-hundida);
    border: 1px solid var(--borde);
    display: grid;
    place-items: center;
}

.galeria__principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.galeria__miniaturas {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
}

.galeria__miniatura {
    width: 66px;
    height: 66px;
    flex-shrink: 0;
    border-radius: var(--radio-sm);
    border: 2px solid transparent;
    overflow: hidden;
    background: var(--superficie-hundida);
    cursor: pointer;
    padding: 0;
    transition: border-color 140ms ease, transform 140ms var(--salida);
}

.galeria__miniatura:active {
    transform: scale(.95);
}

.galeria__miniatura[aria-current="true"] {
    border-color: var(--marca-acento);
}

.galeria__miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ficha__titulo {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 660;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.ficha__precio {
    margin: 14px 0 18px;
    font-size: 30px;
    font-weight: 680;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.ficha__resumen {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--tinta-suave);
    margin-bottom: 22px;
}

.ficha__variantes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.variante {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    color: var(--tinta);
    font-family: inherit;
    font-size: 14px;
    font-weight: 550;
    cursor: pointer;
    transition: transform 140ms var(--salida), border-color 130ms ease, background-color 130ms ease, color 130ms ease;
}

.variante:active {
    transform: scale(.97);
}

.variante[aria-pressed="true"] {
    background: var(--marca-tinta);
    border-color: var(--marca-tinta);
    color: #fff;
}

.variante:disabled {
    opacity: .4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.ficha__compra {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 18px;
}

.contador {
    display: flex;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    overflow: hidden;
}

.contador button {
    width: 42px;
    height: 48px;
    border: 0;
    background: var(--superficie);
    color: var(--tinta);
    font-size: 19px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.contador button:active {
    background: var(--superficie-hundida);
}

.contador input {
    width: 52px;
    height: 48px;
    border: 0;
    border-left: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--tinta);
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.contador input:focus {
    outline: none;
}

.btn-comprar {
    flex: 1;
    height: 48px;
    border: 0;
    border-radius: var(--radio-sm);
    background: var(--marca-acento);
    color: var(--marca-acento-encima);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 620;
    cursor: pointer;
    transition: transform 150ms var(--salida), background-color 150ms ease, opacity 150ms ease;
}

.btn-comprar:active:not(:disabled) {
    transform: scale(.985);
}

.btn-comprar:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ficha__datos {
    border-top: 1px solid var(--borde);
    padding-top: 18px;
    display: grid;
    gap: 10px;
}

.dato {
    display: flex;
    gap: 10px;
    font-size: 13.5px;
    color: var(--tinta-suave);
}

.dato strong {
    color: var(--tinta);
    min-width: 108px;
}

/* =========================================================================
   6. CARRITO DESLIZANTE
   Entra desde la derecha y sale por donde entró: la dirección es la que
   hace que el gesto se entienda sin leer nada.
   ========================================================================= */
.cajon {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    justify-content: flex-end;
}

.cajon[hidden] {
    display: flex;
    pointer-events: none;
}

.cajon__velo {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, .42);
    opacity: 1;
    transition: opacity 300ms var(--cajon);
}

.cajon[hidden] .cajon__velo {
    opacity: 0;
}

.cajon__panel {
    position: relative;
    width: min(420px, 100%);
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--superficie);
    box-shadow: var(--sombra-flotante);
    transform: translateX(0);
    transition: transform 340ms var(--cajon);
}

.cajon[hidden] .cajon__panel {
    transform: translateX(100%);
}

.cajon__cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--borde);
}

.cajon__titulo {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.cajon__cuerpo {
    overflow-y: auto;
    padding: 8px 0;
}

.cajon__pie {
    padding: 16px 18px;
    border-top: 1px solid var(--borde);
    background: var(--superficie-alterna);
}

.linea-carrito {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--borde);
}

.linea-carrito:last-child {
    border-bottom: 0;
}

.linea-carrito__imagen {
    width: 62px;
    height: 62px;
    border-radius: var(--radio-sm);
    object-fit: cover;
    background: var(--superficie-hundida);
    border: 1px solid var(--borde);
}

.linea-carrito__nombre {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
}

.linea-carrito__variante {
    font-size: 12px;
    color: var(--tinta-tenue);
    margin-top: 1px;
}

.linea-carrito__controles {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
}

.linea-carrito__paso {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--borde);
    border-radius: var(--radio-xs);
    background: var(--superficie);
    color: var(--tinta);
    font-size: 15px;
    cursor: pointer;
    transition: transform 110ms var(--salida), background-color 110ms ease;
}

.linea-carrito__paso:active {
    transform: scale(.9);
}

.linea-carrito__cantidad {
    min-width: 30px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.linea-carrito__importe {
    text-align: right;
    font-size: 14px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.linea-carrito__aviso {
    grid-column: 2 / -1;
    margin-top: 6px;
    font-size: 12px;
    color: var(--peligro);
}

/* =========================================================================
   7. CHECKOUT
   ========================================================================= */
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 36px;
    padding: 34px 0 70px;
    align-items: start;
}

@media (max-width: 900px) {

    .checkout {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

.resumen-pedido {
    position: sticky;
    top: 82px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    overflow: hidden;
}

.bloque {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: 22px;
    margin-bottom: 16px;
}

.bloque__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 640;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.bloque__numero {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--marca-tinta);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.opcion {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    cursor: pointer;
    margin-bottom: 8px;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.opcion:has(input:checked) {
    border-color: var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 6%, transparent);
}

.opcion input {
    margin-top: 2px;
    accent-color: var(--marca-acento);
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.opcion__titulo {
    font-size: 14px;
    font-weight: 600;
}

.opcion__texto {
    font-size: 12.5px;
    color: var(--tinta-tenue);
    margin-top: 2px;
}

.opcion__precio {
    margin-left: auto;
    font-size: 14px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =========================================================================
   8. SEGUIMIENTO DEL PEDIDO
   ========================================================================= */
.linea-tiempo {
    position: relative;
    padding-left: 26px;
}

.linea-tiempo::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--borde);
}

.hito {
    position: relative;
    padding-bottom: 20px;
}

.hito::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--superficie);
    border: 2px solid var(--borde-fuerte);
}

.hito--hecho::before {
    background: var(--marca-acento);
    border-color: var(--marca-acento);
}

.hito__titulo {
    font-size: 14.5px;
    font-weight: 600;
}

.hito__fecha {
    font-size: 12.5px;
    color: var(--tinta-tenue);
    margin-top: 1px;
}

/* =========================================================================
   9. PIE
   ========================================================================= */
.pie {
    margin-top: 60px;
    padding: 44px 0 28px;
    border-top: 1px solid var(--borde);
    background: var(--superficie-hundida);
}

.pie__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.pie__titulo {
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin-bottom: 11px;
}

.pie__enlace {
    display: block;
    padding: 3px 0;
    color: var(--tinta-suave);
    font-size: 14px;
    text-decoration: none;
}

.pie__enlace:hover {
    color: var(--tinta);
}

.pie__legal {
    padding-top: 20px;
    border-top: 1px solid var(--borde);
    font-size: 12.5px;
    color: var(--tinta-tenue);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

/* =========================================================================
   10. MANTENIMIENTO
   ========================================================================= */
.mantenimiento {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 30px;
}

/* =========================================================================
   11. MOVIMIENTO REDUCIDO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {

    .tarjeta-producto:hover {
        transform: none;
    }

    .tarjeta-producto:hover .tarjeta-producto__imagen img {
        transform: none;
    }

    .cajon__panel,
    .cajon[hidden] .cajon__panel {
        transition: none;
        transform: none;
    }

    .burbuja[data-latiendo="true"] {
        animation: none;
    }
}


/* Aviso de la combinación elegida en una ficha de matriz (talla × color). */
.ficha__combo-aviso {
    font-size: 14px;
    color: var(--tinta-suave);
}

.ficha__combo-aviso--sin {
    color: var(--peligro);
    font-weight: 600;
}

/* =========================================================================
   12. MUNDO DJI — capa de escaparate
   Sistema Integral de Gestión Comercial · Jabc SoftWorks

   FORMATO: Expandido absoluto (una declaración por línea)

   POR QUÉ ESTA CAPA VA AL FINAL Y NO REPARTIDA:
   El cliente pidió un escaparate con el lenguaje de la tienda de DJI México:
   fondo blanco luminoso, mucho aire, el PRODUCTO flotando entero sobre luz,
   titulares grandes y centrados, botones en PASTILLA y bandas suaves color
   humo (#f8f8f8). En lugar de tocar cada regla de arriba una por una —y
   arriesgar el panel, que NO carga esta hoja— se monta un solo bloque que
   redefine los componentes compartidos. Al cargarse después, gana el cascade
   con la misma especificidad, así que el cambio llega de golpe a TODAS las
   páginas de la tienda (catálogo, ficha, carrito, checkout, cuenta) sin
   duplicar marcado. El acento sigue siendo el NARANJA de BiciTeq: tomamos la
   estructura de DJI, no su azul.
   ========================================================================= */

/* --- Tokens del escaparate ---------------------------------------------
   Solo viven aquí (tienda.css no la carga el panel), así que ampliar :root
   es seguro. La sombra va tintada al calor de la marca, nunca negro puro:
   un negro plano sobre blanco se ve sucio y delata la plantilla.             */
:root {
    --dji-banda: #f7f7f8;
    --dji-tinta-producto: #fbfbfc;
    --dji-sombra: 0 1px 2px rgba(24, 20, 16, .05), 0 8px 24px -12px rgba(24, 20, 16, .14);
    --dji-sombra-fuerte: 0 2px 6px rgba(24, 20, 16, .06), 0 24px 48px -20px rgba(24, 20, 16, .22);
    --dji-radio-tarjeta: 18px;
}

/* La tienda vive en claro luminoso, como DJI. Pero el escaparate conserva el
   interruptor de tema del cliente, así que las bandas y sombras TAMBIÉN se
   adaptan al oscuro: si no, la banda humo se queda como una losa blanca sobre
   la página negra y el titular (tinta clara sobre banda clara) desaparece.
   El azulejo del producto se mantiene claro en ambos temas a propósito: las
   fotos de las bicis vienen recortadas sobre blanco, así que un azulejo claro
   las funde sin costura y las hace flotar —el gesto central de DJI. */
@media (prefers-color-scheme: dark) {

    :root:not([data-tema="claro"]) {
        --dji-banda: color-mix(in srgb, var(--superficie) 78%, #fff 4%);
        --dji-tinta-producto: #f2f2f4;
        --dji-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
        --dji-sombra-fuerte: 0 2px 8px rgba(0, 0, 0, .45), 0 28px 52px -22px rgba(0, 0, 0, .8);
    }
}

:root[data-tema="oscuro"] {
    --dji-banda: color-mix(in srgb, var(--superficie) 78%, #fff 4%);
    --dji-tinta-producto: #f2f2f4;
    --dji-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
    --dji-sombra-fuerte: 0 2px 8px rgba(0, 0, 0, .45), 0 28px 52px -22px rgba(0, 0, 0, .8);
}

/* En oscuro, el nombre y el precio del producto viven sobre el azulejo claro
   solo dentro de la imagen; el cuerpo de la tarjeta sigue la superficie del
   tema. La tinta del producto es clara, así que el texto encima debe ser
   oscuro. Se resuelve dando al azulejo su propio contexto de color. */
:root[data-tema="oscuro"] .tarjeta-producto__imagen,
:root[data-tema="oscuro"] .galeria__principal,
:root[data-tema="oscuro"] .linea-carrito__imagen {
    color: #1c1917;
}

/* --- Botones en pastilla ------------------------------------------------
   El gesto más reconocible de DJI: CTA en pastilla completa, texto más firme
   y una pizca más de cuerpo. El scale(.97) al presionar ya lo trae app.css;
   aquí solo cambiamos forma y peso.                                          */
.btn {
    border-radius: var(--radio-completo);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.btn--sm {
    border-radius: var(--radio-completo);
}

.btn--lg {
    height: 50px;
    padding: 0 30px;
    font-size: 15.5px;
}

/* El primario de DJI es sólido, redondo y con una sombra apenas perceptible
   que lo despega del fondo. Sin brillo de color, sin degradado. */
.btn--primario {
    box-shadow: 0 1px 2px rgba(24, 20, 16, .12), 0 6px 16px -8px color-mix(in srgb, var(--marca-acento) 55%, transparent);
}

@media (hover: hover) and (pointer: fine) {

    .btn--primario:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(24, 20, 16, .12), 0 12px 24px -10px color-mix(in srgb, var(--marca-acento) 60%, transparent);
    }
}

/* El secundario de DJI es un contorno finísimo sobre blanco, casi un fantasma
   con borde. Se aclara y levanta al pasar el cursor. */
.btn--secundario {
    background: var(--superficie);
    border-color: color-mix(in srgb, var(--tinta) 14%, transparent);
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {

    .btn--secundario:hover:not(:disabled) {
        transform: translateY(-1px);
        background: var(--superficie);
        border-color: color-mix(in srgb, var(--tinta) 30%, transparent);
        box-shadow: var(--dji-sombra);
    }
}

/* --- Cabecera limpia ----------------------------------------------------
   DJI mantiene la barra casi blanca, con una hairline apenas visible. */
.cabecera {
    background: color-mix(in srgb, var(--superficie) 82%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
}

.cabecera__fila {
    height: 66px;
}

/* La marca de DJI usa esquinas suaves, no un cuadro duro. */
.cabecera__marca {
    border-radius: 10px;
}

.cabecera__enlace {
    border-radius: var(--radio-completo);
    font-size: 14px;
}

/* --- Portada: el titular manda -----------------------------------------
   DJI abre con una declaración grande y CENTRADA sobre una banda de luz
   plana, sin degradados de color que compitan con el producto. Damos aire
   arriba y abajo y subimos el titular.                                       */
.portada {
    padding: 96px 0 84px;
    background: var(--dji-banda);
    border-bottom: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
    text-align: center;
}

.portada .envoltura {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portada__titulo {
    font-size: clamp(38px, 6.4vw, 68px);
    font-weight: 680;
    letter-spacing: -0.04em;
    line-height: 1.03;
    max-width: 18ch;
}

.portada__texto {
    margin-top: 20px;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
    max-width: 56ch;
}

.portada__acciones {
    margin-top: 34px;
    justify-content: center;
}

/* --- Ritmo de secciones -------------------------------------------------
   Más aire entre bloques y un titular de sección más rotundo, como DJI. Una
   sección puede marcarse como banda humo para alternar el fondo.             */
.seccion {
    padding: 68px 0;
}

.seccion--banda {
    background: var(--dji-banda);
}

.seccion__titulo {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 680;
    letter-spacing: -0.035em;
}

/* Cabecera de sección centrada para los bloques de escaparate (destacados,
   campañas). El catálogo filtrado conserva su cabecera a la izquierda. */
.seccion__cabeza--centro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-bottom: 40px;
}

/* --- Tarjeta de producto estilo DJI ------------------------------------
   El cambio de fondo: el producto FLOTA entero sobre una tela de luz, no
   recortado dentro de un marco. Por eso la imagen pasa a `contain` con aire,
   la tarjeta pierde el borde y solo aparece una sombra suave al acercarse.
   El nombre y el precio respiran debajo, centrados.                          */
.rejilla-productos {
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 26px;
}

.tarjeta-producto {
    background: var(--superficie);
    border: 1px solid transparent;
    border-radius: var(--dji-radio-tarjeta);
    box-shadow: var(--dji-sombra);
    transition: transform 300ms var(--salida), box-shadow 300ms var(--salida);
}

@media (hover: hover) and (pointer: fine) {

    .tarjeta-producto:hover {
        transform: translateY(-6px);
        box-shadow: var(--dji-sombra-fuerte);
        border-color: transparent;
    }

    /* El producto se acerca apenas; sobre `contain` el efecto es un zoom
       limpio, no un recorte. */
    .tarjeta-producto:hover .tarjeta-producto__imagen img {
        transform: scale(1.04);
    }
}

.tarjeta-producto__imagen {
    aspect-ratio: 4 / 3;
    background: var(--dji-tinta-producto);
}

/* La foto LLENA el recuadro (`cover`). Las fotos del catálogo son de estilo de
   vida —la bici en el taller, con fondo—, no recortes sobre blanco; con
   `contain` quedaban con enormes barras vacías y la tarjeta se veía rota. */
.tarjeta-producto__imagen img {
    object-fit: cover;
    transition: transform 520ms var(--salida);
}

.tarjeta-producto__cuerpo {
    padding: 16px 16px 20px;
    align-items: center;
    text-align: center;
}

.tarjeta-producto__categoria {
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--tinta-tenue);
}

.tarjeta-producto__nombre {
    margin-top: 6px;
    font-size: 15.5px;
}

/* Pie centrado: precio al centro y, si hay descuento real, el tachado a un
   lado. */
.tarjeta-producto__pie {
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
}

/* La etiqueta flotante de DJI es una pastilla clara con texto oscuro, no un
   bloque de color saturado. La de "agotado" sí conserva el rojo. */
.etiqueta-flotante {
    top: 12px;
    left: 12px;
    background: color-mix(in srgb, var(--superficie) 90%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--tinta);
    box-shadow: 0 1px 3px rgba(24, 20, 16, .12);
}

.etiqueta-flotante--agotado {
    background: var(--peligro);
    color: #fff;
}

/* --- Ficha, galería y bloques: esquinas y sombras del mundo DJI --------- */
.galeria__principal {
    border-radius: var(--dji-radio-tarjeta);
    border-color: transparent;
    background: var(--dji-tinta-producto);
    box-shadow: var(--dji-sombra);
}

/* La foto de la ficha se ve COMPLETA (contain): la bici entera flotando sobre
   el azulejo de luz, sin recortarle ruedas ni manubrio. Las barras que deja
   una foto apaisada las llena el propio azulejo, no un hueco blanco.
   Y al pasar el cursor hace ZOOM hacia el puntero para inspeccionar detalles
   (grupos, calcas, suspensión). El origen del zoom lo mueve el JS de la ficha
   con --zx/--zy siguiendo el ratón; se hereda del contenedor a la imagen. */
.galeria__principal {
    cursor: zoom-in;
}

.galeria__principal img {
    object-fit: contain;
    transform-origin: var(--zx, 50%) var(--zy, 50%);
    transition: transform 240ms var(--salida);
}

@media (hover: hover) and (pointer: fine) {

    .galeria__principal:hover img {
        transform: scale(2.1);
    }
}

/* Movimiento reducido: el zoom sigue disponible, pero sin la transición de
   acercamiento (aparece de una, sin recorrido). */
@media (prefers-reduced-motion: reduce) {

    .galeria__principal img {
        transition: none;
    }
}

.galeria__miniatura {
    border-radius: 12px;
}

.ficha__titulo {
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 680;
    letter-spacing: -0.04em;
}

.ficha__precio {
    font-size: 32px;
    font-weight: 680;
}

/* El botón de comprar de la ficha, también en pastilla para hablar el mismo
   idioma que el resto de los CTA. */
.btn-comprar {
    border-radius: var(--radio-completo);
    font-weight: 620;
}

.variante {
    border-radius: var(--radio-completo);
}

.bloque,
.resumen-pedido {
    border-radius: var(--dji-radio-tarjeta);
    border-color: color-mix(in srgb, var(--tinta) 7%, transparent);
    box-shadow: var(--dji-sombra);
}

.opcion {
    border-radius: 14px;
}

/* --- Carrito deslizante: bordes suaves ---------------------------------- */
.linea-carrito__imagen {
    border-radius: 12px;
    border-color: transparent;
    background: var(--dji-tinta-producto);
    object-fit: cover;
}

/* --- Pie ----------------------------------------------------------------- */
.pie {
    background: var(--dji-banda);
    border-top: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
    padding-top: 56px;
}

/* --- Movimiento reducido: la tarjeta no se levanta ---------------------- */
@media (prefers-reduced-motion: reduce) {

    .btn--primario:hover:not(:disabled),
    .btn--secundario:hover:not(:disabled),
    .tarjeta-producto:hover {
        transform: none;
    }

    .tarjeta-producto:hover .tarjeta-producto__imagen img {
        transform: none;
    }
}

/* --- Riel de filtros: solo se pega en escritorio ------------------------
   En una sola columna (≤900px) el riel de filtros NO debe quedar `sticky`:
   pegado arriba se montaba encima de las tarjetas al hacer scroll. En ese
   ancho pasa a flujo normal, apilado sobre la rejilla.                       */
@media (max-width: 900px) {

    .filtros-lateral {
        position: static;
        top: auto;
    }
}

/* --- Ajustes finos en móvil --------------------------------------------- */
@media (max-width: 640px) {

    .portada {
        padding: 64px 0 52px;
    }

    .seccion {
        padding: 46px 0;
    }

    .rejilla-productos {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }
}