/* =========================================================================
   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
   ========================================================================= */
/* EL ANCHO DE LA TIENDA.
 *
 * Se aprovecha la pantalla en vez de dejar dos franjas vacías enormes en un
 * monitor grande: el contenido crece hasta 1600 px y solo respeta un margen
 * a cada lado. Sigue centrado.
 *
 * El tope existe igual: sin él, en un monitor ultrapanorámico la rejilla de
 * productos se estiraría tanto que el ojo tendría que barrer de una punta a
 * otra para leer un renglón. 1600 es donde una rejilla de tarjetas todavía
 * se abarca de un vistazo.
 *
 * La corporativa (.web-envoltura) se queda más angosta A PROPÓSITO: ahí lo
 * que manda es texto para leer, y una línea de más de 75 caracteres cansa.
 * Aquí lo que manda es mercancía, y de esa caben más por fila. */
.envoltura {
    width: min(1600px, calc(100% - 64px));
    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;
}


/* =========================================================================
   NAVEGAR EL CATÁLOGO

   Antes esto era una lista plana: familias e hijas una debajo de otra, con
   las hijas sangradas a mano con un `style`. Con cuatro familias y quince
   subcategorías eran veinte renglones iguales — un índice, no una tienda.

   Ahora cada familia es una FILA con dos controles distintos: el nombre
   lleva a la familia entera y la flecha enseña lo que hay dentro. Solo viene
   abierta la familia que se está viendo, así que el riel cabe de un vistazo.
   ========================================================================= */
.filtro-rama {
    display: flex;
    align-items: center;
    gap: 2px;
}

.filtro-rama .filtro-enlace {
    flex: 1 1 auto;
    min-width: 0;
}

.filtro-enlace--familia {
    font-weight: 550;
    color: var(--tinta);
}

/* La flecha: un botón pequeño y sin fondo. Área de 30 px para el dedo aunque
   el dibujo mida 15. */
.filtro-rama__flecha {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--tinta-tenue);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.filtro-rama__flecha svg {
    width: 15px;
    height: 15px;
    transition: transform 160ms var(--salida);
}

/* Plegada, la flecha apunta a la derecha: es la convención de "hay más
   adentro" en cualquier explorador de archivos o menú de tienda. */
.filtro-rama__flecha[aria-expanded="false"] svg {
    transform: rotate(-90deg);
}

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

    .filtro-rama__flecha:hover {
        background: var(--superficie-hundida);
        color: var(--tinta);
    }
}

.filtro-rama__flecha:focus-visible {
    outline: 2px solid var(--marca-acento);
    outline-offset: 2px;
}

/* Las hijas cuelgan de una línea: se ve de dónde vienen sin leer la sangría.
   Antes el desnivel lo ponía un `style="padding-left:20px"` en cada enlace. */
.filtro-rama__hijas {
    margin: 2px 0 6px 10px;
    padding-left: 10px;
    border-left: 1.5px solid var(--borde);
}

.filtro-enlace--hija {
    font-size: 13.5px;
}


/* =========================================================================
   LOS DOS BOTONES DEL TELÉFONO

   En escritorio no existen: el riel está siempre a la vista. Aparecen cuando
   el catálogo pasa a una sola columna, y entonces son la puerta a la hoja de
   filtros. Cada uno dice QUÉ decide y CÓMO está decidido ahora mismo: un
   filtro escondido que no se anuncia hace creer que se está viendo el
   catálogo entero.
   ========================================================================= */
.catalogo-barra {
    display: none;
}

.catalogo-barra__boton {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--tinta);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 130ms ease, background-color 130ms ease;
}

.catalogo-barra__boton:active {
    background: var(--superficie-hundida);
}

.catalogo-barra__boton svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--tinta-tenue);
}

.catalogo-barra__texto {
    display: grid;
    min-width: 0;
}

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

/* El nombre largo se corta con puntos suspensivos en vez de romper el botón
   en dos renglones: "Componentes de transmisión" existe. */
.catalogo-barra__cual {
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La cabeza del panel solo tiene sentido cuando el panel es una hoja. */
.filtros-lateral__cabeza {
    display: none;
}

.filtros-velo {
    display: none;
}


/* =========================================================================
   EL MENÚ DE LA TIENDA — botón en la cabecera y cajón desde la derecha

   Es lo que hace cualquier tienda en un teléfono: un botón de menú arriba a
   la derecha y un cajón que entra por ese mismo lado con el árbol completo.
   Entra por la DERECHA y no por la izquierda a propósito: el botón que lo
   abre está a la derecha, y un panel que sale del lado contrario al dedo que
   lo llamó se siente como otra pantalla en vez de como el mismo gesto.

   Vive en la cabecera, así que se puede saltar de categoría desde una ficha
   de producto o desde el carrito, no solo desde el catálogo.

   El botón solo se pinta si el JavaScript encendió `hay-js` en el <html>: un
   botón de menú que no abre nada es peor que no tenerlo.
   ========================================================================= */
.cabecera__menu {
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    color: var(--tinta);
    cursor: pointer;
}

.cabecera__menu svg {
    width: 20px;
    height: 20px;
}

.menu-tienda {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(86vw, 370px);
    background: var(--superficie);
    border-left: 1px solid var(--borde);
    box-shadow: -26px 0 64px -30px rgba(0, 0, 0, .6);
    transform: translateX(101%);

    /* La visibilidad se apaga AL TERMINAR de salir y se enciende ANTES de
       entrar: si no, el cajón cerrado sigue siendo enfocable con el tabulador
       aunque esté fuera de la pantalla. */
    visibility: hidden;
    transition: transform 280ms var(--salida), visibility 0s linear 280ms;
}

body.menu-abierto .menu-tienda {
    transform: none;
    visibility: visible;
    transition: transform 280ms var(--salida), visibility 0s;
}

.menu-tienda__cabeza {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--borde);
}

.menu-tienda__titulo {
    font-family: var(--fuente-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--tinta);
}

.menu-tienda__cerrar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio-completo);
    background: var(--superficie);
    color: var(--tinta-suave);
    cursor: pointer;
}

.menu-tienda__cerrar svg {
    width: 17px;
    height: 17px;
}

/* El cuerpo se desplaza solo: la cabeza con la ✕ se queda siempre donde el
   pulgar la busca, aunque la tienda tenga cuarenta subcategorías. */
.menu-tienda__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px calc(22px + env(safe-area-inset-bottom));
}

.menu-tienda__cuerpo .filtro-enlace {
    padding: 11px 10px;
    font-size: 15px;
}

.menu-tienda__cuerpo .filtro-enlace--hija {
    font-size: 14px;
}

.menu-tienda__cuerpo .filtro-rama__flecha {
    width: 38px;
    height: 38px;
}

.menu-tienda__aparte {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
}

.menu-tienda__velo {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, .5);
    animation: velo-aparece 200ms ease;
}

body.menu-abierto {
    overflow: hidden;
}

.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);
    color: var(--peligro-texto);
}

.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 {
    /* En línea y con hueco: en las opciones de color, cada botón lleva su
       muestra redonda a la izquierda del nombre. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    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-acento);
    border-color: var(--marca-acento);
    color: var(--marca-acento-encima);
}

.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;
}

/* --tinta-suave y no --tinta-tenue: el tenue se queda en 3.41:1 sobre el
   fondo del pie, por debajo del mínimo de 4.5. Son los ENCABEZADOS de las
   columnas ("Comprar", "Información", "Síguenos"); si no se leen, el pie
   queda como una lista de enlaces sueltos sin agrupar. Con el suave sube a
   7.13:1 y sigue viéndose discreto. */
.pie__titulo {
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    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);
}

/* Mismo motivo que arriba: aquí va el aviso de derechos y el crédito, y a
   3.41:1 se leían a medias. */
.pie__legal {
    padding-top: 20px;
    border-top: 1px solid var(--borde);
    font-size: 12.5px;
    color: var(--tinta-suave);
    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 la tienda: 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: var(--peligro-texto);
}

/* --- 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 {
    position: relative;
    isolation: isolate;
    cursor: zoom-in;
}

/* RELLENO DESENFOCADO: cuando la foto no es cuadrada, `contain` dejaba franjas
   claras arriba y abajo. En vez de eso, el hueco se llena con una copia
   AMPLIADA y DESENFOCADA de la misma foto (como en Apple o Netflix): la imagen
   nítida se sigue viendo ENTERA encima, y las barras desaparecen sin recortar
   la bici. El JS de la ficha pone --fondo con el src actual y lo actualiza al
   cambiar de miniatura. */
.galeria__principal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--fondo, none);
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.2);
    transform: scale(1.2);
    opacity: .7;
}

.galeria__principal img {
    position: relative;
    z-index: 1;
    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;
    }
}

/* --- Cabecera responsiva -----------------------------------------------
   En un teléfono, el buscador de 260px fijo + la navegación + el carrito no
   caben y se salían de la pantalla. En tablet la navegación pasa a poder
   deslizarse en horizontal y el buscador se encoge; en teléfono la navegación
   de categorías se oculta (viven en los filtros del catálogo) y el buscador
   ocupa el espacio libre. Nada crítico se pierde: carrito y cuenta siguen.   */
@media (max-width: 820px) {

    .cabecera__fila {
        gap: 10px;
    }

    .cabecera__nav {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .cabecera__nav::-webkit-scrollbar {
        display: none;
    }

    .busqueda-viva {
        width: 160px;
    }
}

@media (max-width: 560px) {

    /* Ya no cabe la tira de categorías: se oculta (el catálogo tiene su propio
       filtro de categorías) y el buscador se estira para llenar el hueco. */
    .cabecera__nav {
        display: none;
    }

    .busqueda-viva {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* --- En una sola columna, los filtros son una HOJA -----------------------

   Antes, a ≤900px el riel pasaba a flujo normal y quedaba APILADO ENCIMA de
   la rejilla: en un teléfono había que pasar las veinte categorías y los
   cuatro órdenes antes de ver el primer producto, incluso al buscar algo.
   Los filtros son la herramienta, no el contenido.

   Ahora salen de la página: el riel se convierte en una hoja que sube desde
   abajo cuando se pulsa uno de los dos botones, y los resultados empiezan
   arriba del todo. Se cierra tocando fuera, con la ✕ o con Escape.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {

    /* El botón de menú sustituye a la tira de categorías, que a este ancho ya
       no cabía y se salía de la cabecera. */
    .hay-js .cabecera__menu {
        display: grid;
    }

    .hay-js .cabecera__nav {
        display: none;
    }

    /* Los dos botones del catálogo solo sirven si hay JavaScript para abrir lo
       que prometen. Sin él se quedan escondidos y el riel de filtros baja al
       final de la página: incómodo, pero completo y alcanzable. */
    .hay-js .catalogo-barra {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .filtros-lateral {
        order: 3;
        margin-top: 26px;
    }

    /* Las categorías de la hoja sobran: en este ancho viven en el cajón del
       menú, que es el que abre el primer botón. Aquí queda solo el orden. */
    .hay-js #grupoCategorias {
        display: none;
    }

    .hay-js .filtros-lateral {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        top: auto;
        z-index: 60;
        max-height: 82vh;
        overflow-y: auto;
        margin: 0;
        padding: 0 18px calc(24px + env(safe-area-inset-bottom));
        background: var(--superficie);
        border-top: 1px solid var(--borde);
        border-radius: var(--radio-lg) var(--radio-lg) 0 0;
        box-shadow: 0 -20px 54px -22px rgba(0, 0, 0, .5);
        transform: translateY(101%);

        /* La visibilidad se apaga AL TERMINAR de bajar y se enciende ANTES de
           subir. Sin esto, la hoja cerrada sigue siendo enfocable con el
           tabulador aunque esté fuera de la pantalla. */
        visibility: hidden;
        transition: transform 260ms var(--salida), visibility 0s linear 260ms;
    }

    .hay-js body.filtros-abiertos .filtros-lateral,
    body.filtros-abiertos .filtros-lateral {
        transform: none;
        visibility: visible;
        transition: transform 260ms var(--salida), visibility 0s;
    }

    /* La cabeza se queda pegada arriba: la ✕ tiene que estar donde el pulgar
       la busca aunque la lista de categorías sea larga. */
    .hay-js .filtros-lateral__cabeza {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 1;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 -18px 6px;
        padding: 16px 18px 12px;
        background: var(--superficie);
        border-bottom: 1px solid var(--borde);
    }

    .filtros-lateral__titulo {
        font-family: var(--fuente-display, inherit);
        font-size: 17px;
        font-weight: 700;
        color: var(--tinta);
    }

    .filtros-lateral__cerrar {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--borde);
        border-radius: var(--radio-completo);
        background: var(--superficie);
        color: var(--tinta-suave);
        cursor: pointer;
    }

    .filtros-lateral__cerrar svg {
        width: 17px;
        height: 17px;
    }

    /* Opciones más altas: se tocan con el dedo, no con un ratón. */
    .filtros-lateral .filtro-enlace {
        padding: 11px 10px;
        font-size: 15px;
    }

    .filtros-lateral .filtro-enlace--hija {
        font-size: 14px;
    }

    .filtro-rama__flecha {
        width: 38px;
        height: 38px;
    }

    .filtros-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, .5);
        animation: velo-aparece 200ms ease;
    }

    /* La página de atrás no se mueve mientras la hoja está abierta. */
    body.filtros-abiertos {
        overflow: hidden;
    }
}

@keyframes velo-aparece {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .filtros-lateral,
    .menu-tienda,
    .filtro-rama__flecha svg {
        transition: none;
    }

    .filtros-velo,
    .menu-tienda__velo {
        animation: none;
    }
}

/* --- 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;
    }
}

/* --- Sugerencias de venta cruzada dentro del cajón del carrito ---------- */
.cajon-sugerencias {
    padding: 14px 18px 6px;
    border-top: 1px solid var(--borde);
    margin-top: 6px;
}

.cajon-sugerencias__titulo {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin-bottom: 10px;
}

.cajon-sugerencia {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background-color 120ms ease;
}

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

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

.cajon-sugerencia__img {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dji-tinta-producto);
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

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

.cajon-sugerencia__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cajon-sugerencia__nombre {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cajon-sugerencia__precio {
    font-size: 13px;
    font-weight: 650;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}


/* =========================================================================
   §15 · ENCUENTRA TU TALLA

   El buscador de talla por estatura de la ficha de producto. Dos columnas:
   la escala a la izquierda (donde se actúa) y la respuesta a la derecha (lo
   que se viene a ver), con la foto del modelo debajo del tamaño para que no
   quede duda de qué bici se está hablando.

   La talla se pinta enorme a propósito: es el único dato que el visitante
   vino a buscar, y tiene que leerse desde lejos y de un vistazo.
   ========================================================================= */
.ajuste__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

/* ---- Escala ---- */
.ajuste__escala {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ajuste__lectura {
    border: 2px solid var(--tono-talla, var(--marca-acento));
    border-radius: var(--radio-lg, 14px);
    padding: 18px 22px;
    text-align: center;
}

.ajuste__lectura-etq {
    display: block;
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.ajuste__lectura-val {
    display: block;
    margin-top: 6px;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 760;
    letter-spacing: -.02em;
    color: var(--tono-talla, var(--marca-acento));
    font-variant-numeric: tabular-nums;
    transition: color .25s ease;
}

/* El deslizador se dibuja a mano porque el nativo no admite el relleno de
   avance, que es lo que convierte "una barra" en "una escala". */
.ajuste__rango {
    --avance: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--tono-talla, var(--marca-acento)) 0%,
        var(--tono-talla, var(--marca-acento)) var(--avance),
        var(--borde) var(--avance),
        var(--borde) 100%
    );
    cursor: pointer;
}

.ajuste__rango::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tono-talla, var(--marca-acento));
    border: 3px solid var(--superficie);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    cursor: grab;
}

.ajuste__rango::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border: 3px solid var(--superficie);
    border-radius: 50%;
    background: var(--tono-talla, var(--marca-acento));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    cursor: grab;
}

.ajuste__rango:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.ajuste__pista {
    margin: 0;
    font-size: 13.5px;
    color: var(--tinta-tenue);
}

/* ---- Resultado ---- */
.ajuste__resultado {
    text-align: center;
}

.ajuste__resultado-etq {
    display: block;
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.ajuste__talla {
    display: block;
    font-size: clamp(58px, 11vw, 104px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--tono-talla, var(--marca-acento));
    margin: 4px 0 10px;
    transition: color .25s ease;
}

.ajuste__foto {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    height: auto;
    object-fit: contain;
}

.ajuste__modelo {
    font-size: 20px;
    font-weight: 720;
    letter-spacing: -.02em;
    margin-top: 6px;
}

.ajuste__rango-texto {
    margin: 8px auto 0;
    max-width: 46ch;
    font-size: 14px;
    color: var(--tinta-suave, var(--tinta-tenue));
}

.ajuste__aplicar {
    margin-top: 16px;
    min-width: 220px;
}

.ajuste__aplicar:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.ajuste__nota {
    margin: 14px auto 0;
    max-width: 44ch;
    font-size: 13px;
    color: var(--tinta-tenue);
}

/* Atajo desde el selector de tallas de la ficha */
.ficha__eje-cabeza {
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: space-between;
}

.ficha__ayuda-talla {
    font-size: 13px;
    font-weight: 600;
    color: var(--marca-acento);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 860px) {

    .ajuste__cuerpo {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* En el teléfono la respuesta va PRIMERO: se llega desde "¿qué talla
       soy?" y lo que se busca es el resultado, no el control. */
    .ajuste__resultado {
        order: -1;
    }
}


/* =========================================================================
   §16 · BLOQUES DE LA PORTADA (armados desde el panel)

   La portada de la tienda ya no está escrita en el código: se arma con
   secciones desde Panel → Web → Portada de la tienda. Esto es el lenguaje
   visual de esas secciones.

   Cada bloque decide su TEMA (claro, oscuro o de marca) en el panel, así que
   los colores se declaran por bloque y no por página: dos secciones seguidas
   pueden alternar fondo y la portada respira sola.
   ========================================================================= */
.bloque {
    position: relative;
    padding: clamp(48px, 8vw, 96px) 0;
}

.bloque--claro {
    background: var(--fondo);
    color: var(--tinta);
}

.bloque--oscuro {
    background: #0c0b0f;
    color: #f5f4f2;
}

.bloque--marca {
    background: var(--marca-tinta);
    color: var(--marca-tinta-encima, #fff);
}

.bloque--oscuro .bloque__texto,
.bloque--marca .bloque__texto {
    color: inherit;
    opacity: .82;
}

/* ---- Portada (hero) ---- */
.bloque--hero {
    min-height: min(78vh, 680px);
    display: grid;
    align-items: center;
    overflow: hidden;
}

.bloque__fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

/* El velo NO es decorativo: sin él, un texto claro sobre una foto clara deja
   de leerse y la portada se vuelve bonita e inútil. */
.bloque--hero .bloque__fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .38) 55%, rgba(0, 0, 0, .12) 100%);
}

.bloque--hero .bloque__contenido {
    position: relative;
    z-index: 1;
    color: #fff;
}

/* =========================================================================
   EL TEXTO DEL HERO VA EN BLANCO SIEMPRE. HAY QUE DECIRLO.

   Poner `color: #fff` en el contenedor de arriba NO basta: app.css declara
   `h1, h2, h3, h4 { color: var(--tinta) }`, y un selector de ELEMENTO le gana
   siempre al color heredado del padre. El resultado era el titular en tinta
   casi negra encima de la foto, ilegible en modo claro.

   Lo mismo con el párrafo, que se pinta a sí mismo con --tinta-suave y por
   eso tampoco heredaba el blanco.

   Y va en blanco en LOS DOS MODOS, no solo en oscuro: debajo hay una foto con
   un velo oscuro encima (.bloque__fondo::after), así que el fondo real del
   texto es la foto velada, no el lienzo de la página. El tema del navegador
   no cambia lo que hay detrás.

   Es el mismo fallo que ya está documentado en web.css para los bloques
   oscuros de la corporativa; aquí no se había aplicado.
   ========================================================================= */
.bloque--hero .bloque__titulo,
.bloque--hero .bloque__contenido h1,
.bloque--hero .bloque__contenido h2,
.bloque--hero .bloque__contenido h3 {
    color: #fff;
}

.bloque--hero .bloque__texto {
    color: rgba(255, 255, 255, .88);
}

/* El antetítulo, aclarado sobre el velo. El naranja pleno de marca sobre un
   fondo oscuro vibra y se lee peor que el mismo tono subido de luz; es el
   mismo tratamiento que ya usa la corporativa en sus bloques oscuros. */
.bloque--hero .bloque__antetitulo {
    color: color-mix(in srgb, var(--marca-acento) 55%, white);
}

.bloque__contenido {
    max-width: 62ch;
}

.bloque__contenido--derecha {
    margin-left: auto;
    text-align: right;
}

.bloque__contenido--centro {
    margin: 0 auto;
    text-align: center;
}

.bloque__antetitulo {
    display: block;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    /* --marca-texto y no --marca-acento: son 12.5px, y el naranja pleno se
       queda en 4.01:1 sobre el fondo claro. Ver el token en app.css. */
    color: var(--marca-texto);
    margin-bottom: 10px;
}

.bloque__titulo {
    font-size: clamp(26px, 4.2vw, 46px);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 780;
    margin: 0;
}

.bloque__titulo--grande {
    font-size: clamp(34px, 6vw, 68px);
}

.bloque__texto {
    margin: 14px 0 0;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: var(--tinta-suave, var(--tinta-tenue));
    max-width: 60ch;
}

.bloque__contenido--centro .bloque__texto {
    margin-left: auto;
    margin-right: auto;
}

.bloque__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.bloque__contenido--centro .bloque__acciones {
    justify-content: center;
}

/* ---- Imagen y texto ---- */
.bloque__duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 60px);
    align-items: center;
}

/* La alineación elegida en el panel decide de qué lado va la foto. */
.bloque__duo--derecha .bloque__duo-foto {
    order: 2;
}

.bloque__duo-foto img {
    width: 100%;
    height: auto;
    border-radius: var(--radio-lg, 14px);
    display: block;
}

/* ---- Cabeza de sección ---- */
.bloque__cabeza {
    text-align: center;
    max-width: 64ch;
    margin: 0 auto clamp(24px, 4vw, 44px);
}

/* Banda de contexto encima de los productos */
.bloque__banda {
    margin-bottom: clamp(20px, 3vw, 36px);
    border-radius: var(--radio-lg, 14px);
    overflow: hidden;
}

.bloque__banda img {
    width: 100%;
    height: clamp(180px, 30vw, 380px);
    object-fit: cover;
    display: block;
}

.bloque__pie {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* ---- Galería ---- */
.bloque__galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.bloque__foto {
    margin: 0;
    border-radius: var(--radio, 10px);
    overflow: hidden;
}

.bloque__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

.bloque__foto figcaption {
    padding: 8px 2px 0;
    font-size: 13px;
    color: var(--tinta-tenue);
}

/* ---- Video ---- */
.bloque__video {
    max-width: 960px;
    margin: 0 auto;
    border-radius: var(--radio-lg, 14px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.bloque__video iframe,
.bloque__video video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 860px) {

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

    /* En el teléfono la foto va SIEMPRE arriba, se haya elegido lo que se
       haya elegido: en una columna, "izquierda" y "derecha" no significan
       nada, y lo que engancha es la imagen. */
    .bloque__duo--derecha .bloque__duo-foto {
        order: 0;
    }

    .bloque__contenido--derecha {
        text-align: left;
    }
}


/* ---- §15b · Marcas de talla bajo la escala ------------------------------
   Se ve de un vistazo qué tallas hay y hasta dónde llega cada una, y se puede
   saltar a una tocándola en vez de arrastrar a ciegas. La activa se pinta con
   el mismo tono que el resto del bloque: es la confirmación de que la escala
   y la respuesta hablan de lo mismo. */
.ajuste__marcas {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin-top: -4px;
}

.ajuste__marca {
    border: 1px solid var(--borde);
    background: transparent;
    color: inherit;
    border-radius: var(--radio, 10px);
    padding: 7px 4px;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.ajuste__marca:hover {
    border-color: var(--tono-talla, var(--marca-acento));
}

.ajuste__marca[aria-current="true"] {
    border-color: var(--tono-talla, var(--marca-acento));
    background: color-mix(in srgb, var(--tono-talla, var(--marca-acento)) 16%, transparent);
}

.ajuste__marca-talla {
    display: block;
    font-weight: 750;
    font-size: 15px;
    letter-spacing: -.01em;
}

.ajuste__marca[aria-current="true"] .ajuste__marca-talla {
    color: var(--tono-talla, var(--marca-acento));
}

.ajuste__marca-rango {
    display: block;
    font-size: 11.5px;
    color: var(--tinta-tenue);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

/* La escala pesa más que antes: es el control principal del bloque y en la
   captura del cliente se veía como una línea perdida. */
.ajuste__rango {
    height: 18px;
    transition: background .25s ease;
}

@media (prefers-reduced-motion: reduce) {

    .ajuste__rango,
    .ajuste__lectura-val,
    .ajuste__talla,
    .ajuste__marca {
        transition: none;
    }
}

@media (max-width: 560px) {

    /* Con seis tallas y pantalla estrecha, en columna se leen; apretadas en
       fila, no. */
    .ajuste__marcas {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    }
}


/* =========================================================================
   §17 · CORTINA (carrusel de imágenes)

   Las láminas se apilan en el mismo hueco y se turnan con opacidad. Se pintan
   TODAS en el HTML: si el JS falla o tarda, se ve la primera y la sección
   sigue teniendo sentido, en vez de un hueco vacío.
   ========================================================================= */
.cortina {
    position: relative;
    border-radius: var(--radio-lg, 14px);
    overflow: hidden;
    background: var(--superficie-hundida, #111);
}

.cortina__pista {
    position: relative;
    display: grid;
}

/* Todas ocupan la MISMA celda de la rejilla: así el alto lo marca la lámina
   más alta y el bloque no da saltos al cambiar de imagen. */
.cortina__lamina {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.cortina__lamina[data-activa="true"] {
    opacity: 1;
    pointer-events: auto;
}

.cortina__lamina img {
    width: 100%;
    height: clamp(240px, 46vw, 560px);
    object-fit: cover;
    display: block;
}

.cortina__pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 20px 18px;
    color: #fff;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
}

/* ---- Controles ---- */
.cortina__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color .2s ease;
}

.cortina__flecha:hover {
    background: rgba(0, 0, 0, .72);
}

.cortina__flecha--atras {
    left: 12px;
}

.cortina__flecha--adelante {
    right: 12px;
}

.cortina__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.cortina__punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

.cortina__punto[aria-current="true"] {
    width: 26px;
    border-radius: 999px;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {

    .cortina__lamina {
        transition: none;
    }
}


/* =========================================================================
   COLOR DEL TEXTO ELEGIDO EN EL PANEL

   Igual que en la web corporativa: .texto--claro o .texto--oscuro por
   sección, para las que llevan foto de fondo. Se nombran los elementos uno
   por uno porque app.css pinta h1..h4 con --tinta y .bloque__texto se pinta
   a sí mismo; el color heredado del contenedor no les gana.
   ========================================================================= */
.texto--claro,
.texto--claro h1,
.texto--claro h2,
.texto--claro h3,
.texto--claro .bloque__titulo,
.texto--claro .bloque__texto,
.texto--claro p,
.texto--claro .tenue,
.texto--claro .pequeno {
    color: #fff !important;
}

.texto--claro .bloque__texto {
    color: rgba(255, 255, 255, .88) !important;
}

.texto--claro .bloque__antetitulo {
    color: color-mix(in srgb, var(--marca-acento) 55%, white) !important;
}

.texto--claro .bloque__titulo {
    text-shadow: 0 1px 16px rgba(0, 0, 0, .38);
}

.texto--oscuro,
.texto--oscuro h1,
.texto--oscuro h2,
.texto--oscuro h3,
.texto--oscuro .bloque__titulo {
    color: var(--tinta) !important;
    text-shadow: none;
}

.texto--oscuro .bloque__texto,
.texto--oscuro p {
    color: var(--tinta-suave) !important;
}

.texto--oscuro .bloque__antetitulo {
    color: var(--marca-texto) !important;
}


/* =========================================================================
   "AVÍSAME CUANDO LLEGUE"

   Aparece en lugar del botón de comprar cuando no hay existencia. Tiene que
   verse como una oferta, no como un formulario de disculpa: quien llega a
   una ficha agotada ya decidió que lo quiere, y es la última oportunidad de
   no perderlo.
   ========================================================================= */
.aviso-stock {
    margin: 4px 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie-hundida);
}

.aviso-stock__titulo {
    font-size: 15px;
    font-weight: 650;
    margin-bottom: 12px;
}

/* En una línea mientras quepa; el correo manda y el botón no se encoge. */
.aviso-stock__fila {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}

.aviso-stock__fila .entrada {
    flex: 1 1 200px;
    min-width: 0;
}

.aviso-stock__fila .btn {
    flex: none;
}

.aviso-stock__nota {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--tinta-tenue);
}

.aviso-stock__listo {
    font-size: 14.5px;
    line-height: 1.6;
}


/* AGOTADA PERO ELEGIBLE.

   Se ve que no hay —tachada y apagada— pero SÍ se puede pulsar: al hacerlo
   aparece el aviso de "te avisamos cuando llegue" para ESA talla. Antes salía
   deshabilitada, y quien buscaba justo esa medida se iba sin dejar rastro.

   Va después de .variante:disabled a propósito, para ganarle en la cascada. */
.variante[data-agotada] {
    opacity: .55;
    text-decoration: line-through;
    cursor: pointer;
}

.variante[data-agotada]:hover {
    opacity: .82;
}

.variante[data-agotada][aria-pressed="true"] {
    opacity: 1;
}

/* La opción de un eje (talla o color) que no tiene existencia.

   Antes esta señal venía de :disabled, pero ahora estas opciones SÍ se pueden
   elegir —al hacerlo aparece el aviso de "te avisamos cuando llegue"—, así que
   necesita su propia clase. Se ve igual de apagada que antes; lo que cambia es
   que responde al clic. */
.variante--agotada {
    opacity: .55;
    text-decoration: line-through;
}

.variante--agotada:hover {
    opacity: .82;
}

.variante--agotada[aria-pressed="true"] {
    opacity: 1;
}


/* =========================================================================
   15. LA MARCA MANDA — EL COLOR DEL NEGOCIO COMO COLOR PRINCIPAL

   POR QUÉ ESTA CAPA

   El color de marca ya estaba configurado (Panel → Configuración → Empresa),
   pero la tienda solo lo sacaba en dos sitios: el botón grande de la portada y
   los antetítulos de 12 px. Una página de catálogo entera —cuarenta tarjetas,
   dos pantallas de scroll— podía recorrerse sin ver el color del negocio ni
   una vez. Con el logotipo fuera de la vista, y en el teléfono se va con el
   primer scroll, la tienda dejaba de ser de nadie.

   Aquí el color se pone donde la vista pasa de todas formas: la franja de
   arriba, la sección donde estás, la etiqueta de cada tarjeta, la categoría,
   el precio rebajado, la opción elegida en los filtros y la línea del pie.

   LO QUE NO SE PINTA DE MARCA. "Agotado" es un aviso, no un distintivo, y
   llevaba el color del negocio compitiendo de tú a tú con los destacados: un
   producto que no se puede comprar no merece el color con el que se firma.

   TODO SALE DE --marca-acento. No hay un solo rojo escrito a mano: el negocio
   que cambie su color en el panel se lleva este mismo diseño con el suyo.

   Esta hoja la cargan LA TIENDA Y LA WEB CORPORATIVA (web.css se monta encima
   de ella), así que lo de aquí vale para las dos.
   ========================================================================= */

/* --- La franja de arriba ------------------------------------------------- */
.franja-marca {
    padding: 9px 16px;
    background: var(--marca-acento);
    color: var(--marca-acento-encima);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.franja-marca a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- La cabecera: dónde estás, en el color de la casa -------------------- */
.cabecera__enlace[aria-current="page"] {
    color: var(--marca-texto);
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
}

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

    .cabecera__enlace:hover {
        color: var(--marca-texto);
    }
}

/* --- Las tarjetas del catálogo ------------------------------------------- */

/* La etiqueta de la esquina es de marca: destacado o rebaja. */
.etiqueta-flotante {
    background: var(--marca-acento);
    color: var(--marca-acento-encima);
    font-weight: 700;
}

/* Agotado, no. Gris oscuro y en su sitio: informa, no presume. */
.etiqueta-flotante--agotado {
    background: color-mix(in srgb, #0B0D10 82%, var(--tinta));
    color: #FFFFFF;
}

/* La categoría de cada tarjeta. Es el renglón que más se repite en una página
   de catálogo, así que es donde el color se nota sin gritar. */
.tarjeta-producto__categoria {
    color: var(--marca-texto);
}

/* Un precio rebajado se lee antes en color que en negritas. */
.precio--rebajado {
    color: var(--marca-texto);
}

/* Al pasar por encima, la tarjeta se firma. */
@media (hover: hover) and (pointer: fine) {

    .tarjeta-producto:hover {
        border-color: color-mix(in srgb, var(--marca-acento) 55%, transparent);
    }
}

/* --- Navegar: lo elegido, en el color del negocio ------------------------ */

/* Vale para el riel del catálogo y para el cajón del menú: los dos usan
   .filtro-enlace, y el actual pasa de una pastilla gris a una de marca. */
.filtro-enlace[aria-current="true"] {
    background: var(--marca-acento);
    color: var(--marca-acento-encima);
}

.filtro-enlace--familia[aria-current="true"] {
    color: var(--marca-acento-encima);
}

/* El ORDEN elegido, en cambio, se queda suave. Es un ajuste, no un sitio: dos
   pastillas rojas llenas en el mismo riel —"Montaña" y "Relevancia"— se leen
   como dos secciones abiertas a la vez, y solo una lo está. */
#grupoOrden .filtro-enlace[aria-current="true"] {
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
    color: var(--marca-texto);
}

/* El botón que abre el cajón y los del catálogo, al tocarse. */
.cabecera__menu:active,
.catalogo-barra__boton:active {
    border-color: var(--marca-acento);
}

/* --- El pie ------------------------------------------------------------- */

/* Una línea de marca cierra la página. Es el último sitio donde la vista se
   apoya, y hasta ahora terminaba en gris. */
.pie {
    border-top: 3px solid var(--marca-acento);
}

.pie__titulo {
    color: var(--marca-texto);
}

/* --- Botones secundarios ------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {

    .btn--secundario:hover {
        border-color: var(--marca-acento);
        color: var(--marca-texto);
    }
}


/* =========================================================================
   16. EL TELÉFONO

   POR QUÉ HAY UNA CAPA ENTERA PARA ESTO

   La ficha de producto se salía de la pantalla: el título, el precio, las
   opciones, TODO empezaba en el píxel 14 y terminaba en el 450, sesenta más
   allá del borde. Sesenta píxeles exactos en todos los elementos, que es la
   firma de un solo culpable arrastrando a los demás.

   Y lo era. La ficha es una rejilla de una columna en angosto, y una columna
   `1fr` no puede encogerse por debajo del contenido mínimo de lo que lleva
   dentro. Dentro iba la fila de compra —contador, botón grande y corazón— en
   flex SIN permiso para envolverse: su mínimo eran 436 px, la columna creció
   a 436 px, y con ella el título, el precio, las opciones y las fotos.

   De ahí el orden de esta capa: primero se le quita el suelo al problema
   (`min-width: 0` en las celdas y `flex-wrap` en la fila de compra) y después
   se ordena lo que quedó suelto. Un `overflow: hidden` en el body habría
   escondido el síntoma dejando la mitad del botón fuera del alcance del dedo.
   ========================================================================= */

/* --- La regla que evita que esto vuelva a pasar -------------------------
   Una celda de rejilla o un elemento flex NO se encoge por debajo de su
   contenido mínimo a menos que se le diga. Decírselo aquí, de una vez, es
   más barato que descubrirlo otra vez dentro de seis meses.               */
.ficha > *,
.ficha__compra > *,
.dos-columnas > * {
    min-width: 0;
}

/* --- La fila de compra -------------------------------------------------- */
.ficha__compra {
    flex-wrap: wrap;
}

/* El botón de comprar no baja de 180 px: por debajo de eso el texto se parte
   en dos renglones y deja de parecer un botón. */
.btn-comprar {
    flex: 1 1 180px;
}

/* --- Las dos columnas que se apilan -------------------------------------
   Estaban escritas con style= en cada página —opiniones, cuenta, pedido— y
   un atributo style le gana a cualquier media query: en el teléfono seguían
   siendo dos columnas y se salían de la pantalla. */
.dos-columnas {
    display: grid;
    align-items: start;
    gap: 36px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dos-columnas--resenas {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
}

.dos-columnas--cuenta {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 18px;
}

.dos-columnas--pedido {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 34px;
}

/* --- La galería --------------------------------------------------------- */
.galeria__principal {
    position: relative;
}

/* Las flechas. Discretas sobre la foto y con área de sobra para el pulgar. */
.galeria__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-completo);
    background: color-mix(in srgb, var(--superficie) 86%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--tinta);
    box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: background-color 130ms ease, transform 130ms var(--salida);
}

.galeria__flecha svg {
    width: 20px;
    height: 20px;
}

.galeria__flecha--atras {
    left: 10px;
}

.galeria__flecha--adelante {
    right: 10px;
}

.galeria__flecha:active {
    transform: translateY(-50%) scale(.92);
}

/* El contador de fotos: dice cuántas hay sin ocupar sitio. */
.galeria__cuenta {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: var(--radio-completo);
    background: color-mix(in srgb, #000 55%, transparent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* La tira de miniaturas se desliza, se enganchan al borde y no enseña barra:
   en un teléfono una barra de desplazamiento dentro de la página se lee como
   un error de maquetación. */
.galeria__miniaturas {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.galeria__miniaturas::-webkit-scrollbar {
    display: none;
}

.galeria__miniatura {
    scroll-snap-align: start;
}


/* =========================================================================
   LO QUE CAMBIA CUANDO LA PANTALLA ES DE UN TELÉFONO
   ========================================================================= */
@media (max-width: 860px) {

    /* Las dos columnas, una encima de otra. */
    .dos-columnas,
    .dos-columnas--resenas,
    .dos-columnas--cuenta,
    .dos-columnas--pedido {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {

    /* LA COMPRA, EN DOS RENGLONES. Cantidad y corazón arriba, el botón
       grande abajo y de lado a lado: es el que se toca, y un botón de compra
       a media pantalla se ve como una opción más. */
    .ficha__compra {
        gap: 10px;
    }

    .btn-comprar {
        order: 3;
        flex: 1 0 100%;
        height: 52px;
    }

    .contador {
        flex: 0 0 auto;
    }

    /* El corazón de favoritos se queda junto al contador, no debajo. */
    .ficha__compra .variante {
        flex: 0 0 48px;
    }

    /* La ficha respira menos: en 390 px, 40 px de aire arriba son una cuarta
       parte de lo que se ve al abrir. */
    .ficha {
        padding: 20px 0 40px;
    }

    .ficha__titulo {
        font-size: 26px;
    }

    .ficha__precio {
        font-size: 28px;
    }

    /* Miniaturas un poco más chicas: con 66 px solo caben cuatro y media. */
    .galeria__miniatura {
        width: 58px;
        height: 58px;
    }

    /* La ruta de migas no parte palabras: se desliza si hace falta. */
    .migas {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .migas::-webkit-scrollbar {
        display: none;
    }

    /* Los datos del producto (SKU, unidad, categoría). La etiqueta reservaba
       108 px fijos y al valor largo —un SKU de catálogo— le quedaban dos
       centímetros para partirse. En angosto, etiqueta arriba y valor abajo. */
    .dato {
        flex-direction: column;
        gap: 1px;
    }

    .dato strong {
        min-width: 0;
    }
}