/* ═══════════════════════════════════════════════════════════════
   escritorio.css — RETOQUES DE COMPUTADORA (no toca el celular)

   CÓMO FUNCIONA
     TODO este archivo vive dentro de `@media (min-width: 1024px)`. En un
     teléfono (hasta 640) y en una tablet (hasta 1023) el navegador ni siquiera
     lee estas reglas: el celular queda exactamente como estaba. Es a propósito:
     lo que se veía enorme era la vista de celular estirada a pantalla ancha.

   QUÉ ARREGLA
     · El catálogo salía en UNA sola columna: cada tarjeta medía 1104 px de
       ancho. Ahora vuelve a ser una grilla de tarjetas chicas (5 por fila en
       una pantalla de 1440) con la foto arriba y el precio abajo.
     · Los packs de la portada y los productos destacados ocupaban media
       pantalla cada uno: bajan a 4 por fila.
     · Retoque oscuro futurista: bordes finos, vidrio suave, brillo violeta al
       pasar el mouse y títulos con más aire.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ── Variables del retoque: un solo lugar para ajustar todo ── */
  :root {
    --esc-radio: 14px;
    --esc-borde: rgba(255, 255, 255, 0.07);
    --esc-brillo: rgba(var(--purple-rgb), 0.35);
    --esc-vidrio: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  }

  /* ── Fondo: un degradado profundo con dos halos suaves ──
     Es sutil a propósito: el punteado y los tokens de color siguen mandando. */
  body {
    background-image:
      radial-gradient(900px 520px at 12% -8%, rgba(var(--purple-rgb), 0.14), transparent 70%),
      radial-gradient(760px 460px at 92% 4%, rgba(34, 211, 238, 0.10), transparent 72%),
      radial-gradient(var(--bg-dots) 1px, transparent 1px);
    background-size: auto, auto, 24px 24px;
  }

  /* ═══════════════════════════════════════════════════════════
     CATÁLOGO: LOS FILTROS VAN ARRIBA (no a la izquierda)
     Antes el panel de categorías se comía 240 px del lado izquierdo y el
     catálogo quedaba recortado. Ahora es una BARRA horizontal pegada al
     encabezado y la grilla usa todo el ancho de la pantalla, así entran más
     productos por fila. En el celular esto no existe: ahí el panel sigue
     siendo el cajón deslizable de siempre.
     ═══════════════════════════════════════════════════════════ */
  .explorar-layout {
    /* GRILLA de 3 columnas: la primera se estira (ahí va «países», que puede
       crecer sin empujar nada) y las dos de la derecha se miden por su
       contenido (precio y ordenar). Cada bloque va en su propio renglón
       (`grid-column: 1 / -1`) salvo esos tres, que comparten uno. */
    display: grid !important;
    /* CUATRO columnas: países (se estira) · sonido · precio · controles/vista */
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
    /* Más ancho que antes (1400): en pantallas grandes el catálogo llena. */
    max-width: 1760px !important;
    padding: 0 24px 48px;
  }

  .explorar-sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    top: auto !important;
    /* SIN tope: las categorías y los géneros que se agreguen después fluyen a
       los renglones que hagan falta. Antes la franja se deslizaba de costado
       (una sola línea) y lo que no entraba quedaba escondido. */
    overflow: visible !important;
    border-right: none !important;
    border-bottom: 1px solid var(--esc-borde) !important;
    padding: 4px 0 8px !important;
    margin-bottom: 8px;
    display: flex !important;
    align-items: center;
    gap: 5px 6px;
    flex-wrap: wrap !important;
  }
  /* El título «Categorías» sobra: las pastillas ya se explican solas. */
  .explorar-sidebar-title { display: none !important; }

  .explorar-cat-list {
    flex-direction: row !important;
    /* Libre: si la línea activa trae muchas subcategorías, bajan de renglón. */
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    min-width: 0;
  }
  /* La insignia azul del desplegable: en la barra no cierra nada y se veía como
     un círculo suelto adentro de la pastilla. */
  .explorar-cat-list .cat-child-badge { display: none !important; }
  .explorar-cat-item {
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: var(--white-5);
    border: 1px solid var(--esc-borde) !important;
    font-size: 11px !important;
    line-height: 1.5;
    white-space: nowrap;
  }
  .explorar-cat-item:hover { border-color: rgba(var(--purple-rgb), 0.45) !important; color: var(--text) !important; }
  .explorar-cat-item.active {
    background: rgba(var(--purple-rgb), 0.18) !important;
    border-color: rgba(var(--purple-rgb), 0.5) !important;
    color: var(--text) !important;
  }
  /* Los submenús de una línea (sus subcategorías) también en fila. */
  .explorar-cat-children, .cat-sub-list { flex-direction: row !important; flex-wrap: wrap !important; }

  /* ── Los círculos del desplegable: fuera ──
     En la barra horizontal cada pastilla traía un círculo (la flechita que en el
     menú lateral abre/cierra las subcategorías). Acá no cerraba nada: se veía
     como un botón suelto adentro de la pastilla. Se quita. */
  .explorar-cat-list .cat-expander { display: none !important; }

  /* ── Las subcategorías NO se despliegan en la vista general ──
     Eran 8 pastillas más empujando el catálogo hacia abajo sin que nadie las
     haya pedido. Se ven al ENTRAR a la línea (ahí sí son útiles, ver abajo). */
  .explorar-cat-list:not(:has(.explorar-cat-volver)) .cat-sub-list { display: none !important; }

  /* Dentro de una línea: sus subcategorías como chips chicos, en la misma
     franja y pegadas a la línea (separador fino para que se lean como «hijas»). */
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub-list {
    display: flex !important; flex-wrap: wrap; gap: 4px;
    margin: 0 0 0 6px; padding-left: 8px;
    border-left: 1px solid var(--esc-borde);
  }
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub {
    padding: 3px 9px !important; font-size: 10.5px !important;
    background: transparent; border-color: transparent !important; color: var(--text-muted);
  }
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub:hover,
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub.active {
    background: var(--white-5); border-color: var(--esc-borde) !important; color: var(--text);
  }
  /* El icono de carpeta de cada línea: en la barra sobra (suma ruido y ancho). */
  .explorar-cat-list .cat-icon { display: none !important; }
  .explorar-cat-list .cat-count { opacity: 0.75; font-size: 10px; }

  /* El botón de limpiar y el formulario de tipo entran en la misma barra. */
  .explorar-sidebar form { display: flex; align-items: center; gap: 8px; margin: 0; }
  .explorar-sidebar .explorar-type-select { height: 34px; }
  /* «Limpiar filtros» se va al extremo derecho de la MISMA barra. */
  .sidebar-clear-btn { width: auto !important; margin: 0 0 0 auto !important; padding: 0 14px !important; height: 34px; }
  /* ── EN LA COMPUTADORA LA FRANJA YA NO LLEVA «LIMPIAR FILTROS» ──
     El dueño pidió que en ese lugar quede la LUPA (ver .ex-buscar-btn en
     explorar.ejs, al costado del botón de vista). El botón de limpiar no se
     pierde: vive dentro del panelito «Filtro», que es donde se ponen y se
     quitan los filtros. */
  .explorar-sidebar .sidebar-clear-btn { display: none !important; }

  /* El contenido ocupa todo el ancho: la grilla se lleva la pantalla. */
  .explorar-main { width: 100% !important; padding: 0 0 48px !important; }
  .explorar-sidebar-toggle { display: none !important; }

  /* ═══════════════════════════════════════════════════════════
     PORTADA (hero): que el texto se lea
     El video de las mariposas se mezcla con el fondo y, en pantalla ancha, el
     título caía justo sobre la parte clara: se leía mal. En computadora el
     video baja de intensidad y se pone una capa oscura detrás del texto.
     ═══════════════════════════════════════════════════════════ */
  .hero { min-height: 52vh; }
  .hero-video { opacity: 0.32 !important; }
  .hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 64% 72% at 50% 54%,
      rgba(4, 6, 16, 0.82) 0%, rgba(4, 6, 16, 0.5) 46%, rgba(4, 6, 16, 0) 80%);
  }
  /* ── SIN PANEL DE VIDRIO (5 de octubre) ──
     Antes el texto del hero iba sobre una caja (degradado + borde + sombra +
     desenfoque) y el dueño pidió quitarla: se veía como una tarjeta flotante
     enorme sobre la portada. El texto queda directo sobre el video y los
     degradados; se lee igual porque el centro del hero ya lleva el oscurecido
     de .hero-bg::after y cada línea tiene su propia sombra (más abajo).
     Se conservan el ancho y el relleno para que el texto no se reacomode. */
  .hero-content {
    max-width: 980px;
    padding: 26px 30px 22px;
  }
  .hero h1 { text-shadow: 0 2px 26px rgba(0, 0, 0, 0.6); letter-spacing: -0.02em; }
  .hero p, .hero-content li { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }

  /* ═══════════════════════════════════════════════════════════
     CATÁLOGO (/explorar) — la vista «lista» del celular se convierte en
     grilla. La tarjeta vuelve a ser vertical y compacta.
     ═══════════════════════════════════════════════════════════ */
  .explorar-grid,
  .explorar-grid.list-view {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)) !important;
    gap: 14px !important;
  }

  /* ── EXCEPCIÓN: «LISTA FINA» (Sonidos SF2 - NKI) ──
     Esta línea vende sonidos sueltos con un demo corto cada uno y se muestra
     como renglones delgados (▶ · nombre · precio · comprar/Descargar), también
     en la computadora. Las reglas de arriba convierten el catálogo en grilla y
     apilan la tarjeta (`flex-direction: column !important`), así que la
     excepción va con la misma fuerza y con más precisión que ellas. */
  .explorar-grid.lista-fina {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .explorar-grid.lista-fina .explorar-card.explorar-fila {
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 8px !important;
    background: var(--card) !important;
    backdrop-filter: none;
  }
  .explorar-grid.lista-fina .explorar-card.explorar-fila:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .explorar-grid.lista-fina .explorar-media-btn {
    position: static !important;
    transform: none !important;
    width: 32px !important; height: 32px !important; flex: 0 0 32px !important;
    box-shadow: none !important;
  }

  .explorar-grid.list-view .explorar-card,
  .explorar-card {
    flex-direction: column !important;
    border-radius: var(--esc-radio) !important;
    border-color: var(--esc-borde) !important;
    background: var(--esc-vidrio), var(--card) !important;
    backdrop-filter: blur(6px);
  }

  /* La foto: cuadrada y chica, como una portada de disco. */
  .explorar-grid.list-view .explorar-card-image,
  .explorar-card-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: var(--esc-radio) var(--esc-radio) 0 0 !important;
    align-self: auto !important;
  }

  /* Al pasar el mouse: se levanta un poco y se enciende el borde. */
  .explorar-grid.list-view .explorar-card:hover,
  .explorar-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(var(--purple-rgb), 0.45) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--esc-brillo) !important;
  }

  /* La barrita violeta de la izquierda era de la vista de lista: en grilla no va. */
  .explorar-grid.list-view .explorar-card::before { display: none !important; }

  /* Textos más chicos y apretados: en tarjeta angosta, dos líneas de título. */
  .explorar-card .explorar-card-body,
  .explorar-card .explorar-card-info { padding: 10px 12px 12px !important; }
  .explorar-card-title, .explorar-card .explorar-card-title { font-size: 13px !important; line-height: 1.35 !important; }
  .explorar-card-price, .explorar-card .explorar-card-price { font-size: 14.5px !important; }
  .explorar-card .explorar-card-desc,
  .explorar-card .explorar-card-excerpt { display: none !important; }

  /* ═══════════════════════════════════════════════════════════
     PORTADA — packs y productos destacados: 4 por fila y más chicos
     ═══════════════════════════════════════════════════════════ */
  .packs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .pack-card {
    /* ── SIN CAJA NI «VIDRIO» (5 de octubre) ──
       El dueño: «ese mismo tiene el producto de pack». Esta regla de la
       computadora le volvía a poner el fondo de vidrio, el borde y la sombra
       del hover, justo lo que se sacó del hero y de las secciones. Ahora la
       tarjeta no pinta nada: se ven la caja 3D, el título y el precio. */
    border-radius: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  .pack-card img,
  .pack-card .pack-card-img,
  .pack-card .pack-card-media { max-height: 190px !important; }
  .pack-card-titulo { font-size: 13px !important; }
  .pack-card-incluye { font-size: 11px !important; }
  .pack-card-precio { font-size: 15px !important; }
  .pack-card:hover {
    border: 0 !important;
    box-shadow: none !important;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)) !important;
    gap: 14px !important;
  }
  .product-card {
    border-radius: var(--esc-radio) !important;
    border-color: var(--esc-borde) !important;
    background: var(--esc-vidrio), var(--card) !important;
  }
  .product-card:hover {
    border-color: rgba(var(--purple-rgb), 0.45) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--esc-brillo) !important;
  }

  /* ── Encabezados de sección: línea fina y aire medido ── */
  .section-header { border-bottom: 1px solid var(--esc-borde); padding-bottom: 12px; }
  .section-header h2 { letter-spacing: -0.01em; }

  /* ── Listados largos del panel: filas más apretadas en pantalla ancha ── */
  .tarjeta, .tarjeta-cli, .cre-row { border-radius: 12px; }

  /* ═══════════════════════════════════════════════════════════
     PANEL (ADMINISTRACIÓN Y SUPER ADMINISTRACIÓN): EL CONTENIDO
     DEJA DE ESTIRARSE DE LADO A LADO

     El panel es flex: `.main-content` tenía `flex:1` y nada más, así que en
     un monitor ancho el contenido medía lo mismo que la pantalla: en 1920 el
     contenido llegaba a 1920 px y cada tarjeta a 1856. Se veía todo estirado
     —una fila de texto de 1800 px, un campo de escritura de 1800 px— y leer
     costaba porque la vista tenía que barrer toda la pantalla.

     Se le pone un TOPE cómodo (1360 px, como los paneles serios) y se centra
     con márgenes automáticos (en flex, los márgenes `auto` reparten el aire
     sobrante a los dos lados). Debajo de ese ancho no cambia nada.
     Es SOLO computadora: este archivo entero vive en `min-width: 1024px`, así
     que el celular del panel queda exactamente como estaba.
     ═══════════════════════════════════════════════════════════ */
  .main-content {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── El «mapa de textos»: de una lista de filas largas a una rejilla ──
     Cada acceso directo ocupaba una fila entera de 1800 px con el icono a la
     izquierda y la flecha en el otro extremo: el ojo tenía que cruzar toda la
     pantalla para «Nombre y descripción de cada línea del catálogo». Ahora van
     en tarjetas de 2 o 3 por fila, juntas y legibles. */
  .mapa {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 10px;
  }

  /* ── Campos de UNA línea: un ancho de lectura, no el ancho del monitor ──
     En una tarjeta de 1300 px el mensaje del aviso era una caja de 1258 px
     para escribir una frase de 45 caracteres: el resto era aire. A esos campos
     se les pone un tope cómodo (720 px). Los que ya eran más chicos —los de
     las rejillas de dos columnas, los formularios cortos— no cambian, porque
     el tope solo recorta a los que se pasaban. Los campos de VARIAS líneas
     (textarea) siguen a todo el ancho: ahí el ancho se aprovecha. */
  .main-content .campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
  .main-content .fila input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
  .main-content .fila select,
  .main-content input[type=search],
  .main-content input[type=email],
  .main-content input[type=tel],
  .main-content input[type=url] {
    max-width: 720px;
  }

  /* Las filas de la lista de la portada (etiqueta · texto · ✕): al acotar el
     campo, la ✕ quedaba sola en el otro extremo de la tarjeta. Se acota la
     FILA entera y se alinea a la izquierda, así el botón de quitar viaja
     pegado al campo que borra. */
  .main-content .filas .fila {
    grid-template-columns: 190px minmax(0, 720px) 34px;
    justify-content: start;
  }

  /* ── Foco visible con el color de la marca (accesibilidad) ── */
  .explorar-card:focus-visible, .product-card:focus-visible, .pack-card:focus-visible {
    outline: 2px solid var(--purple); outline-offset: 2px;
  }

  /* ═══════════════════════════════════════════════════════════
     CABECERA DEL CATÁLOGO: DOS FRANJAS FINAS Y NADA MÁS

     Antes la cabecera gastaba 149 px en cuatro renglones apilados (título,
     países, precio, ordenar) y la franja de categorías otros 61 px: 210 px
     antes de la primera tarjeta. La causa de que la franja midiera 61 y no 34
     era el desplegable «Todos los tipos», que arrastraba 14 px de margen
     inferior de la vista de celular (ahí sí van uno debajo del otro).

     Ahora: franja de categorías de ~34 px y UN solo renglón de filtros
     (título · países · precio · ordenar). Quedan ~90 px de cabecera en total.
     ═══════════════════════════════════════════════════════════ */

  /* ── 1) Franja de categorías: una línea, 34 px ── */
  .explorar-sidebar {
    padding: 2px 0 6px !important;
    margin-bottom: 10px !important;
    gap: 4px 6px;
  }
  .explorar-cat-list { gap: 5px !important; }
  .explorar-cat-item {
    padding: 2px 9px !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }
  .explorar-cat-list .cat-count { font-size: 9.5px; }
  /* El desplegable de tipo: sin el margen que la hacía alta, y del mismo alto
     que las pastillas para que la franja se lea como una sola familia. */
  .explorar-sidebar .explorar-type-select {
    margin: 0 !important;
    height: 28px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
  }
  .explorar-sidebar .sidebar-clear-btn {
    height: 28px !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    margin: 0 0 0 auto !important;
  }

  /* ── 2) Los filtros en UN renglón debajo de la franja ──
     Se usa `order` en vez de mover el HTML: el mismo marcado sigue sirviendo
     al celular, donde cada pieza tiene que seguir ocupando su renglón. */
  .explorar-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 14px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--esc-borde);
  }
  .explorar-header-titulo { order: 1; flex: 0 1 auto !important; margin-bottom: 0 !important; }
  .explorar-header .explorar-header-titulo h1 { font-size: 17px !important; margin-bottom: 0 !important; }
  #explorar-pais { order: 2; margin: 0 !important; }
  #explorar-precio { order: 3; margin: 0 !important; }
  .explorar-toolbar { order: 4; flex: 1 1 auto; justify-content: flex-end; margin-top: 0 !important; }
  /* La frase de la línea (qué incluye, para qué teclado) va en su propio
     renglón, después de los filtros: es texto para leer, no un control. */
  .explorar-linea-resumen { order: 9; flex: 1 1 100%; margin: 0 !important; }

  /* Dentro del renglón único, los controles de la derecha quedan alineados
     al mismo alto que las pastillas. */
  .explorar-header .explorar-price-input,
  .explorar-header .explorar-price-btn,
  .explorar-header .explorar-sort,
  .explorar-header .explorar-clear-btn,
  .explorar-header .view-mode-btn { height: 30px !important; }
  .explorar-header .explorar-price-btn { padding: 0 12px !important; font-size: 11.5px !important; }
  .explorar-header .explorar-price-input { width: 74px !important; font-size: 11.5px !important; }
  .explorar-header .explorar-sort { font-size: 11.5px !important; }
  .explorar-header .explorar-sort-wrap label { font-size: 11px !important; }

  /* ═══════════════════════════════════════════════════════════
     DENTRO DE UNA LÍNEA: la pastilla activa deja de ser un «cajón»

     El menú lateral era una columna: la línea activa se abría como una caja
     morada con sus subcategorías dentro y cada subcategoría traía 30 px de
     sangría. En la franja horizontal eso se veía como una caja enorme que
     empujaba la franja a 61 px y dejaba medio renglón vacío.

     Acá la línea queda como una ETIQUETA plana y sus subcategorías van al
     lado, separadas con una línea fina: todo en el mismo renglón.
     ═══════════════════════════════════════════════════════════ */
  .explorar-cat-list:has(.explorar-cat-volver) .explorar-cat-item.explorar-cat-volver {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 2px 9px !important;
    border: 1px solid var(--esc-borde) !important;
    border-radius: 999px !important;
    background: var(--white-5);
    color: var(--text-secondary);
  }
  .explorar-cat-list:has(.explorar-cat-volver) .explorar-cat-item.cat-has-children {
    /* Libre: si la línea trae muchos géneros, bajan de renglón dentro de su
       propia pastilla en vez de empujar la franja hacia el costado. */
    flex-wrap: wrap !important;
    padding: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  .explorar-cat-list:has(.explorar-cat-volver) .explorar-cat-item.cat-has-children > .cat-name {
    flex: 0 0 auto !important;
    color: var(--text);
    font-weight: 700;
  }
  .explorar-cat-list:has(.explorar-cat-volver) .explorar-cat-item.cat-has-children > .cat-count { flex-shrink: 0; }
  /* Las subcategorías: al lado de su línea, no debajo. La sangría de 30 px y el
     tope de alto venían del desplegable del celular. */
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub-list {
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 0 8px !important;
    max-height: none !important;
    overflow: visible !important;
    border-left: 1px solid var(--esc-borde) !important;
  }
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub {
    padding: 2px 9px !important;
    border-left: none !important;
    border-radius: 999px !important;
    background: var(--white-5);
    font-size: 10.5px !important;
  }
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub .cat-name { white-space: nowrap !important; }
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub.active {
    background: rgba(var(--purple-rgb), 0.18) !important;
    border: 1px solid rgba(var(--purple-rgb), 0.5) !important;
    color: var(--text) !important;
  }

  /* Los nombres NO se recortan: en la franja no hay ancho que cuidar, así que
     «Congregacionale…» o «Paquetes Completos de Yamaha s…» se leen enteros.
     Si aun así no entra todo, la franja entera se desliza de costado. */
  .explorar-cat-list:has(.explorar-cat-volver) .explorar-cat-item.cat-has-children,
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub { flex: 0 0 auto !important; }
  .explorar-cat-list:has(.explorar-cat-volver) .cat-sub .cat-name,
  .explorar-cat-list:has(.explorar-cat-volver) .explorar-cat-item.explorar-cat-volver .cat-name {
    flex: 0 0 auto !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* ═══════════════════════════════════════════════════════════
     ARRIBA QUEDA LO DE LA CUENTA; EL MENÚ BAJA A SU PROPIA FRANJA

     El dueño pidió bajar SOLO el menú (Inicio · líneas · Videos). El logo, la
     moneda, el carrito, el panel, los avisos y la cuenta SIEMPRE van arriba:
     son los controles de la aplicación, no el menú del sitio.

     Entonces la barra pasa a tener DOS renglones:
       · renglón 1 (64 px): logo a la izquierda · controles a la derecha, con
         el centro LIBRE para las opciones internas que se van a agregar.
       · renglón 2 (44 px): el menú del sitio.

     Se sube --nav-h (no solo el padding) para que TODAS las páginas, que
     reservan su hueco con var(--nav-h), sigan arrancando justo debajo de la
     barra: si solo se empujara el padding, el contenido se metería debajo.
     ═══════════════════════════════════════════════════════════ */
  /* La barra de arriba ahora lleva TRES franjas: el aviso (34), el renglón del
     logo y los controles (64) y el del menú (44). `--nav-h` los suma para que
     todas las páginas sigan arrancando justo debajo. */
  /* OJO: el aviso se puede APAGAR desde Administración → Textos y
     descripciones. Por eso la franja NO se reserva siempre: acá queda en 0px y
     quien la enciende es el propio aviso (`_navbar.ejs` lo dibuja junto a un
     <style> con --nav-aviso: 34px, solo cuando está encendido). Si el dueño lo
     apaga, el menú sube esos 34px en vez de dejar una banda vacía arriba
     empujando todo el contenido hacia abajo.
     ── OJO (2 de octubre) ──
     Acá decía `calc(64px + 44px)`: eran los 44px de la SEGUNDA fila (el menú)
     de cuando la computadora tenía dos renglones. Como el menú ya está al lado
     del logo, al apagar la promoción la barra quedaba de 108px con una banda
     negra vacía de 44px abajo del logo y todo el contenido 44px más abajo. Con
     `64px` la barra mide lo que mide: una sola fila. */
  :root { --nav-aviso: 0px; --nav-h: 64px; }
  /* ── El aviso: una franja fina pegada al borde de arriba ── */
  .nav-anuncio {
    /* En COMPUTADORA vuelve arriba de todo, como estaba antes (el dueño lo pidió
       así): la franja ocupa la primera línea y el menú queda pegado debajo. */
    position: fixed;
    top: 0;
    left: 0; right: 0; height: var(--nav-aviso);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    /* Franja de aviso NEUTRA (antes iba de violeta a rosa): el color fuerte se
       peleaba con las fotos de los productos. Ahora es un gris con ALFA (el dueño
       pidió que se viera un poco más transparente) y un desenfoque detrás; el
       texto sigue blanco y el botón claro, así se lee igual de bien. */
    /* Fondo translúcido + la LÍNEA LÁSER de abajo (los mismos dos degradados que
       en el celular: el brillo que pasa lo agrega .nav-anuncio::after). */
    background-image:
      linear-gradient(90deg, rgba(38,38,44,0.55), rgba(26,26,31,0.55)),
      linear-gradient(90deg, #7f1d1d, #ef4444, #f59e0b, #ef4444, #7f1d1d);
    background-size: 100% 100%, 100% 2px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #f4f4f5; font-size: 12.5px; font-weight: 600;
    padding: 0 20px; z-index: 101;
  }
  .nav-anuncio-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-anuncio-cta {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.38);
    color: #fff; text-decoration: none; font-size: 11.5px; font-weight: 700;
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }
  .nav-anuncio-cta:hover { background: #fff; color: #1a1a1a; transform: translateY(-1px); }
  .navbar {
    /* El relleno de arriba es el alto del aviso: el logo y los controles bajan
       justo debajo de la franja, sin taparse. */
    padding-top: calc(var(--nav-aviso) + var(--sat, env(safe-area-inset-top, 0px)));
    align-items: center;
    align-content: center;
    /* UNA sola fila: nada se baja a un segundo renglón. Si el menú no entra,
       se aprieta/se desplaza él (no los controles). */
    flex-wrap: nowrap;
    gap: 14px;
  }
  /* ORDEN: en el HTML el menú va ENTRE el logo y los controles, así que sin
     esto el navegador lo intentaba meter en el primer renglón, el menú se caía
     al segundo y los controles al TERCERO (se salían de la barra y pisaban el
     catálogo). Con `order` el orden pasa a ser: logo · controles · menú. */
  .navbar .navbar-brand { order: 1; }
  /* ORDEN nuevo (pedido del dueño): logo · MENÚ · controles, todo en UNA fila.
     El menú va al lado derecho del logo y los controles quedan al extremo. */
  .navbar .navbar-links { order: 2; }
  .navbar .navbar-actions { order: 3; margin-left: auto; }
  /* El renglón de arriba mide exactamente 64 px, así el menú cae siempre a la
     misma altura aunque los controles midan 38. */
  .navbar .navbar-brand,
  .navbar .navbar-actions { height: 64px; }
  /* El menú YA NO baja: queda en la misma fila del logo. Se aprieta (letra y
     aire más chicos) para que entren todas las líneas sin aplastarse; si algún
     día no entraran, la fila se puede desplazar en vez de romper la barra. */
  .navbar .navbar-links {
    flex: 1 1 auto;
    height: auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    justify-content: safe flex-start;
    gap: 2px;
  }
  .navbar .navbar-links::-webkit-scrollbar { height: 0; }
  .navbar .navbar-links a {
    padding: 6px 9px;
    font-size: 12.5px;
    border-radius: 999px;
    white-space: nowrap;
  }
  /* ── EL LOGO DE LA COMPUTADORA ES EL COMPLETO (2 de octubre) ──
     El dueño aclaró que no quería el wordmark estirado, sino SU logo: el que
     mandó, con el rombo, «STYLO SAMPLE», el teclado y «RITMOS Y SONIDOS».
     Ese dibujo es más cuadrado que el wordmark (402×254), así que se mide por
     ALTO: a 52px de alto mide ~82px de ancho y entra en el renglón de 64px con
     aire arriba y abajo. En el celular NO se usa (ahí la barra mide 40px y este
     logo quedaría ilegible): sigue el corto de siempre. Ver navbar.css. */
  #navbar .navbar-brand img.solo-celular { display: none; }
  #navbar .navbar-brand img.solo-pc {
    display: inline-block; height: 52px; width: auto; max-width: 220px;
    opacity: 1;
  }
  /* Sin iconos en la computadora: el menú se lee más rápido y entra completo. */
  .navbar .navbar-links .navbar-link-ico { display: none; }
  }
  /* Una línea fina separa los controles de la aplicación (arriba) del menú del
     sitio (abajo). */
  .navbar::before {
    content: '';
    position: absolute; left: 0; right: 0;
    /* La rayita va al pie de la barra (ahora hay UNA sola fila).
       ── OJO (2 de octubre) ──
       Antes decía `var(--nav-aviso) + 64px + el área segura`, que es el alto de
       la barra SOLO en la computadora (franja 34 + fila 64). En el celular la
       fila mide 40px, así que la rayita quedaba 18px por DEBAJO de la barra y
       se veía flotando encima del título de la portada (el dueño la vio:
       «hay una línea encima del título, tenía que estar más arriba»).
       Con `var(--nav-h)` —que es el alto completo de la barra en los dos
       tamaños— la rayita queda siempre pegada al pie de la barra, con la
       promoción encendida o apagada. */
    top: calc(var(--nav-h, 64px) + var(--sat, env(safe-area-inset-top, 0px)) - 1px);
    height: 1px;
    background: var(--border);
  }

  /* ═══════════════════════════════════════════════════════════
     TÍTULO Y DESCRIPCIÓN: ARRIBA Y CENTRADOS

     Antes el título compartía renglón con los filtros (quedaba a la
     izquierda) y la frase de la línea caía debajo de los filtros. Ahora:
     título centrado, frase centrada debajo, y los filtros van después.
     ═══════════════════════════════════════════════════════════ */
  .explorar-header-titulo {
    order: 1;
    flex: 1 1 100% !important;
    /* Tres columnas: el título queda en la del medio, con las dos de los
       costados del mismo ancho. Así queda centrado DE VERDAD, aunque la lupa
       esté a la derecha. */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0 10px;
    margin-bottom: 0 !important;
  }
  .explorar-header-titulo h1 {
    grid-column: 2;
    justify-self: center;
    flex: 0 0 auto !important;
    font-size: 21px !important;
    text-align: center;
    margin: 0 !important;
  }
  /* ── EL BUSCADOR Y EL FILTRO, EN EL RENGLÓN DEL TÍTULO ──
     El dueño pidió quitar la lupa del encabezado en la computadora (la franja
     ya tiene la suya) y poner en ese lugar el botón «Filtro». Así el renglón
     queda: título centrado · buscador (se despliega desde la lupa de la franja)
     · «Filtro» contra el borde derecho.

     El <form> es display:contents, así que el ítem real de la grilla es el
     contenedor visible, que en el DOM sigue estando DENTRO del form: por eso el
     selector es descendiente y no hijo directo. */
  /* Plegado no ocupa lugar: la única puerta al buscador es la lupa de la franja. */
  .explorar-header-titulo .explorar-search-wrap:not(.abierto) { display: none !important; }
  /* Abierto, el campo se estira desde la izquierda hasta antes del filtro. */
  .explorar-header-titulo .explorar-search-wrap,
  .explorar-header-titulo.buscando .explorar-search-wrap {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: stretch;
    width: 100% !important;
  }
  /* El «Filtro» ocupa la columna derecha (donde antes estaba la lupa del
     encabezado) y no se mueve aunque el buscador se despliegue. */
  .explorar-header-titulo > .ex-ancla--filtro {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  /* La frase de la línea: debajo del título, centrada y con ancho de lectura
     (una línea de 1392 px no se lee).
     Toma el renglón COMPLETO a propósito: con `flex-basis: 100%` más un
     `max-width`, el navegador encogía la frase a 780 y metía «países» y
     «precio» al lado, pisando el texto. El ancho de lectura se consigue con
     relleno simétrico, no con max-width: así el bloque ocupa la línea entera,
     empuja los filtros al renglón de abajo y el texto queda centrado de
     verdad. */
  .explorar-header .explorar-linea-resumen {
    order: 2;
    flex: 1 1 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 min(306px, 22%);
    text-align: center;
  }
  #explorar-pais { order: 3; }
  #explorar-precio { order: 4; }
  .explorar-toolbar { order: 5; }

  /* ═══════════════════════════════════════════════════════════
     MENOS PUERTAS REPETIDAS EN LA FRANJA

     · «← Todas las categorías»: era la vuelta al catálogo general, pero las
       líneas ya están en el menú de arriba; la pastilla «Todos los productos»
       del catálogo general hace lo mismo. Se quita.
     · «Todos los tipos»: mismo caso, un desplegable más en una franja que ya
       tenía tres puertas. NO se borra del HTML: se deja fuera de la vista para
       que el asistente del navegador (WebMCP) siga teniendo su herramienta
       «filtrar por tipo». Por eso se oculta con 1×1 y no con display:none,
       que lo sacaría también del árbol de accesibilidad.
     ═══════════════════════════════════════════════════════════ */
  .explorar-cat-list .explorar-cat-item.explorar-cat-volver { display: none !important; }
  .explorar-sidebar #wmcp-filter-form {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }
  .explorar-sidebar #explorar-tipo {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: 0 !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
  }

  /* ═══════════════════════════════════════════════════════════
     ORDEN DE LA PÁGINA: TÍTULO · DESCRIPCIÓN · CATEGORÍAS · FILTROS

     El panel de categorías venía ANTES del título (en el HTML es un `<aside>`
     hermano de `<main>`), así que la franja salía arriba de todo. Ahora se
     reacomoda el orden sin tocar el HTML: con `display: contents` en `<main>`
     y en la cabecera, sus hijos pasan a ser ítems de la grilla del layout y
     se les puede dar el orden que corresponde con `order`.

     Es SOLO en computadora: en el celular este archivo no se lee y el orden
     del HTML manda igual que siempre (ahí el panel es el cajón deslizable,
     que está fijo en pantalla y no depende de dónde esté en el documento).
     ═══════════════════════════════════════════════════════════ */
  .explorar-main { display: contents !important; }
  .explorar-header { display: contents !important; }

  /* OJO con los selectores: `display: contents` cambia las CAJAS, no el árbol
     del documento. El título y los filtros siguen estando DENTRO de main y de
     la cabecera, así que hay que alcanzarlos con descendencia (`> *` no los
     ve, y por eso al principio el catálogo salía primero y el título al final).
     Todo va a lo ancho y al final, salvo los seis bloques que ordenamos. */
  .explorar-layout > *,
  .explorar-main > *,
  .explorar-header > * { grid-column: 1 / -1; order: 7; }

  .explorar-layout .explorar-header-titulo { order: 1; }
  .explorar-layout .explorar-linea-resumen { order: 2; }
  .explorar-layout > .explorar-sidebar { order: 3; }
  /* El renglón de los filtros: «países» se estira (columna 1) y empuja a
     «precio» y «ordenar» contra el borde derecho. Así, cuando se agreguen más
     países, se acomodan dentro de SU espacio y nadie se corre de lugar. */
  .explorar-layout #explorar-pais {
    order: 4;
    grid-column: 1;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  /* ── EL FILTRO DE SONIDO, ARRIBA Y A LA IZQUIERDA DEL FILTRO ──
     «🎼 requiere sample» / «🎹 no usa sample» estaban en su propio renglón, al
     fondo de la cabecera: en la computadora no se encontraban. Ahora van en el
     renglón de filtros y arrancan desde la IZQUIERDA (el dueño pidió tenerlas a
     mano). Antes compartían el renglón con el precio; desde que el precio vive
     en su botón «Filtro» (ver explorar.ejs), este renglón quedó para ellas. */
  .explorar-layout #explorar-sonido {
    order: 5;
    grid-column: 1 / 3;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    min-width: 0;
  }
  .explorar-layout #explorar-sonido:not(.visible) { display: none !important; }
  /* Mismo alto que el resto del renglón (28 px). */
  .explorar-layout #explorar-sonido .explorar-chip-sonido {
    height: 28px !important; padding: 0 11px !important; font-size: 12px !important;
  }
  /* OJO: #explorar-precio ya NO es una pieza de esta rejilla: ahora es el
     panelito que abre el botón «Filtro» (dentro de la franja de arriba), así que
     va con position: absolute y estas reglas de rejilla quedan de adorno. Se
     dejan por si algún día vuelve a la fila. */
  .explorar-layout #explorar-precio { order: 6; grid-column: 3; }
  .explorar-layout .explorar-toolbar { order: 7; grid-column: 4; justify-content: flex-end; }

  /* ── ALTURAS: todo el renglón de filtros mide lo mismo ──
     Los cuadraditos de Min/Max medían 30 px y las pastillas de al lado 26/27,
     así que se veían «más grandes». Ahora los siete controles del renglón —
     pastillas de país, Min, Max, Aplicar, ordenar, vista y filtros activos—
     miden 28 px. */
  .explorar-layout #explorar-pais .explorar-chip-cat,
  .explorar-layout #explorar-precio .explorar-price-input,
  .explorar-layout #explorar-precio .explorar-price-btn,
  .explorar-layout .explorar-toolbar .explorar-sort,
  .explorar-layout .explorar-toolbar .view-mode-btn,
  .explorar-layout .explorar-toolbar .explorar-chip,
  .explorar-layout .explorar-toolbar .explorar-clear-btn {
    height: 28px !important;
    box-sizing: border-box !important;
  }
  .explorar-layout #explorar-pais .explorar-chip-cat {
    display: inline-flex !important;
    align-items: center;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
  .explorar-layout #explorar-precio { align-items: center; }
  .explorar-layout #explorar-precio .explorar-price-input {
    width: 78px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  .explorar-layout #explorar-precio .explorar-price-btn { padding: 0 14px !important; font-size: 12px !important; }
  .explorar-layout .explorar-toolbar .explorar-chip { display: inline-flex; align-items: center; padding: 0 10px; font-size: 12px; }
  .explorar-layout .explorar-toolbar .explorar-clear-btn { padding: 0 12px; font-size: 12px; }

  /* ═══════════════════════════════════════════════════════════
     BARRA DE ARRIBA: TODO MÁS CHICO Y DEL MISMO ALTO

     Los controles de la derecha medían 38 px de alto con iconos de 17 y la
     pastilla de la cuenta llevaba un avatar de 30: se veían macizos al lado de
     la cuenta y desparejos entre sí (el cuadro, el círculo y la pastilla).
     Ahora los cinco comparten la MISMA caja de 30 px, los iconos miden 14, el
     avatar 22 y las letras 11. Es un solo valor para todo (`--na-h`), así que
     el día que quieras subirlos o bajarlos de nuevo se cambia una línea.

     Va en el archivo de computadora: en el celular la barra sigue con sus
     medidas de antes (34 px), que ya estaban ajustadas al pulgar.
     ═══════════════════════════════════════════════════════════ */
  /* MÁS COMPACTO (pedido del dueño, para que el menú entre completo y quede
     lugar para «Ingresar»): cajas de 26px, iconos y avatar más chicos y menos
     aire entre los controles. En el celular NO se toca (sigue en 34px). */
  .navbar-actions { --na-h: 26px; --na-r: 7px; gap: 4px; }
  .navbar-actions .navbar-avatar { width: 19px !important; height: 19px !important; font-size: 10px !important; }
  .navbar-actions .navbar-user, .navbar-actions .navbar-login, .navbar-actions .navbar-currency { font-size: 11px; padding: 0 8px; }

  /* Los tres cuadros (carrito, panel, campana): igual alto, igual ancho. */
  .navbar .btn-cart,
  .navbar .btn-panel,
  .navbar .notif-bell {
    width: var(--na-h) !important;
    height: var(--na-h) !important;
    border-radius: var(--na-r) !important;
  }
  .navbar .btn-cart svg,
  .navbar .btn-panel svg,
  .navbar .notif-bell svg { width: 14px !important; height: 14px !important; }

  /* Moneda (S/ PEN): misma altura y letra más contenida. */
  .navbar .btn-currency {
    height: var(--na-h) !important;
    padding: 0 10px !important;
    gap: 4px !important;
    border-radius: var(--na-r) !important;
    font-size: 11px !important;
  }
  .navbar .btn-currency .curr-symbol,
  .navbar .btn-currency .curr-code { font-size: 11px !important; }

  /* Cuenta: la pastilla con avatar, del mismo alto que los cuadros
     (4 + 22 + 4 = 30) y con la letra del mismo cuerpo que la moneda. */
  .navbar .navbar-user {
    height: var(--na-h) !important;
    padding: 4px 10px 4px 4px !important;
    gap: 6px !important;
    font-size: 11.5px !important;
  }
  .navbar .navbar-user-avatar { width: 22px !important; height: 22px !important; font-size: 10.5px !important; }
  .navbar .navbar-user-email { font-size: 11px !important; max-width: 120px !important; }
  .navbar .navbar-user-chevron { width: 10px !important; height: 10px !important; }

  /* Las burbujas de aviso (carrito y campana): mismo tamaño entre ellas. */
  .navbar .cart-badge,
  .navbar .notif-badge {
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 3px !important;
    font-size: 9px !important;
    line-height: 15px !important;
    top: -3px !important;
    right: -3px !important;
  }
  /* La rayita que separa comprar / cuenta, a escala del resto. */
  .navbar .navbar-sep { height: 14px !important; }

  /* Los botones de «Iniciar Sesión» / «Crear Cuenta» (cuando no hay sesión) y
     el del Panel cuando se pinta como botón con texto: misma caja y misma letra
     que el resto de la fila, para que ninguno se vea más grande que otro. */
  .navbar .nav-auth-btn,
  .navbar .btn-dashboard {
    height: var(--na-h) !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    border-radius: var(--na-r) !important;
    gap: 5px !important;
  }

  /* ═══════════════════════════════════════════════════════════
     MOVIMIENTO DE LA PORTADA (solo computadora)

     Tres cosas sacadas de estudiar la portada de Magnific (antes Freepik),
     hechas a mano con CSS y sin librerías:

       1. Una columna de LÍNEAS QUE SUBE SOLA al costado del anuncio: la que
          pasa por el centro queda nítida y los extremos se desvanecen por una
          máscara. Es solo adorno: no recibe clics.
       2. Una FRANJA QUE CORRE debajo del anuncio, como separador antes del
          catálogo. El bucle no tiene costura (la fila va duplicada y se mueve
          la mitad exacta) y al pasar el ratón se detiene.
       3. Los TÍTULOS DE SECCIÓN entran con el scroll: aparecen subiendo
          mientras se acercan por el borde de abajo de la pantalla.

     Nada de esto existe en el celular: las dos franjas se apagan en el @media
     del <style> de index.ejs y todo esto vive en el archivo de computadora.
     ═══════════════════════════════════════════════════════════ */

  /* El texto del anuncio un poco más angosto, para que la columna entre al
     costado sin pisarlo. (Con `!important` porque el <style> de la portada va
     DESPUÉS de esta hoja: sin él, ganaría su valor de 800px.) */
  .hero-content { max-width: 880px !important; }

  /* ── 1) Columna de líneas que sube sola ── */
  .hero-lineas-track {
    display: flex; flex-direction: column;
    /* El truco del bucle sin costura: la lista va DUPLICADA y se desplaza la
       mitad exacta. Por eso cada ítem lleva su propio margen de abajo (con
       `gap` sobraría un hueco y el salto se notaría cada vuelta). */
    animation: esc-lineas-sube 18s linear infinite;
  }
  .hero-linea {
    display: flex; align-items: center; gap: 10px;
    font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--text); white-space: nowrap; margin-bottom: 10px;
  }
  .hero-linea i { font-style: normal; color: #ff58ae; font-size: 11px; }
  @keyframes esc-lineas-sube { to { transform: translateY(-50%); } }

  /* La columna solo aparece cuando sobra ancho de verdad (el anuncio mide 880):
     abajo de 1360 el texto y la columna se pisarían. */
  @media (min-width: 1360px) {
    .hero-lineas {
      /* Empieza DEBAJO del botón «Compartir» (que vive en la esquina de arriba)
         y termina antes del borde derecho, donde van las flechas del anuncio
         cuando hay más de uno. Así el adorno no se cruza con nada tocable. */
      position: absolute; top: 168px; bottom: 12px; right: 48px;
      width: 220px; display: flex; align-items: center;
      overflow: hidden; pointer-events: none; z-index: 1;
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
      mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
    }
  }

  /* ── 2) La franja que corre ── */
  .franja-corre {
    position: relative; overflow: hidden;
    border-top: 1px solid var(--esc-borde);
    border-bottom: 1px solid var(--esc-borde);
    background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0));
    padding: 9px 0;
    /* Los extremos se desvanecen: la fila parece venir de ningún lado. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
  .franja-corre-track { display: flex; width: max-content; animation: esc-franja-corre 42s linear infinite; }
  .franja-item {
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
    white-space: nowrap; margin-right: 10px;
  }
  .franja-sep { color: var(--purple); margin-right: 10px; }
  @keyframes esc-franja-corre { to { transform: translateX(-50%); } }
  /* Al pasar el ratón se detiene, así se puede leer sin perseguirla. */
  .franja-corre:hover .franja-corre-track { animation-play-state: paused; }

  /* ── 3) Títulos de sección con más cuerpo ──
     La referencia usa titulares grandes con el espaciado entre letras apretado
     (-0.03em). Acá se mantiene la escala de la tienda pero con ese gesto. */
  /* Título de sección (p. ej. «Packs con precio único»): el dueño lo quería más
     chico en la computadora. Estaba en 26px y baja a 21px, la misma medida que
     usa el resto del sitio, para que no quede un título gigante solo acá. */
  .section-header-left h2 { font-size: 21px !important; letter-spacing: -0.02em !important; }
  .section-header-left p { font-size: 13.5px !important; }

  /* ── 4) Los títulos de sección entran con el scroll ──
     `animation-timeline: view()` es del navegador: el CSS le pide el progreso
     según cuánto entró el bloque por el borde de abajo. Donde el navegador no
     lo entiende, el @supports deja la regla sin aplicar y el título se ve
     normal — nunca queda escondido. Se eligen los títulos y NO las tarjetas a
     propósito: las tarjetas ya traen su propio fundido al cargar. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .section-header {
        animation: esc-entra linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
      @keyframes esc-entra {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: none; }
      }
    }
  }

  /* Si el sistema pide menos movimiento, no se mueve nada. */
  @media (prefers-reduced-motion: reduce) {
    .hero-lineas, .franja-corre { display: none !important; }
    .hero-lineas-track, .franja-corre-track { animation: none !important; }
    .section-header { animation: none !important; }
  }

  /* ═══════════════════════════════════════════════════════════
     LO QUE ESTÁ EN VENTA: MÁS CHICO Y MÁS DENSO

     OJO: este bloque se volvió a abrir con `@media (min-width: 1024px)` a
     propósito. El bloque de `prefers-reduced-motion` de arriba cerraba el
     `@media (min-width: 1024px)` del archivo y TODO esto quedaba aplicándose
     también en el celular: los packs salían de 5 columnas (tarjetas de 59px, con
     las cajas pisadas) — el dueño lo reportó como «se apretó mucho esto: los
     productos». Con la media query de nuevo, es solo de computadora.

     En pantalla ancha la tarjeta de producto medía 216×375 (la foto cuadrada
     más 159 px de texto) y el pack 273×283: entraban pocas por fila y el
     catálogo se veía «de a uno». Acá se aprieta la tarjeta —no el contenido—
     para que entren más y se lea todo de un vistazo:

       · Productos en venta (portada, tienda y relacionados): 6 por fila.
         Se quita la frase descriptiva de la tarjeta (el detalle está en la
         ficha) y se achican nombre, precio y el botón de compra.
       · Packs: 5 por fila.
       · Videos del mural: 7 por fila (antes 5), con la mini más baja.
     Es solo la vista de computadora: el celular mantiene sus tarjetas.
     ═══════════════════════════════════════════════════════════ */
  @media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap: 12px !important;
  }
  .product-card { border-radius: 12px !important; }
  .product-card .product-info { padding: 8px 10px 10px !important; gap: 3px !important; }
  /* La frase descriptiva no va en la tarjeta: alarga la tarjeta ~20 px y el
     texto completo ya está en la ficha del producto. */
  .product-card .product-excerpt { display: none !important; }
  .product-card .product-name { font-size: 12px !important; line-height: 1.3 !important; }
  .product-card .product-tenant { font-size: 9.5px !important; }
  .product-card .product-price-current { font-size: 13.5px !important; }
  .product-card .card-add-btn {
    padding: 6px 8px !important; font-size: 10.5px !important;
    gap: 4px !important; border-radius: 8px !important;
  }
  .product-card .card-add-ico { width: 13px !important; height: 13px !important; }
  .product-card .product-badge,
  .product-card .product-type-badge,
  .product-card .product-cat-chip { font-size: 9px !important; padding: 2px 6px !important; }

  /* Packs: una fila más y la caja 3D a escala de la tarjeta. */
  .packs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; }
  .pack-card { border-radius: 12px !important; }
  .pack-card-titulo { font-size: 12px !important; }
  .pack-card-incluye { font-size: 10.5px !important; }
  .pack-card-precio { font-size: 14px !important; }
  /* La caja 3D se arma con estas tres medidas: bajándolas, la caja entra
     completa en la tarjeta nueva (antes medía 116×148 y estiraba la fila). */
  .pack-card .caja3d--mini {
    --caja-w: 96px; --caja-h: 122px; --caja-d: 18px;
    padding: 6px 4px 8px !important;
  }

  /* El catálogo (/explorar) con la misma densidad que la portada. */
  .explorar-grid,
  .explorar-grid.list-view {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
    gap: 12px !important;
  }

  /* Videos del mural: más chicos y más densos. (El <style> de la página va
     después de esta hoja, así que van con `!important`.) */
  .v-mural { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important; gap: 10px !important; }
  .v-card .v-info { padding: 8px 10px 9px !important; gap: 2px !important; }
  .v-card .v-titulo { font-size: 12.5px !important; }
  .v-card .v-autor { font-size: 10.5px !important; }
  .v-card .v-meta { font-size: 10px !important; }

  /* ═══════════════════════════════════════════════════════════
     LA VISTA «LISTA» DEL CATÁLOGO EN LA COMPUTADORA — VA AL FINAL

     Hasta ahora el botón Lista/Grilla no hacía nada en la computadora: a la
     tarjeta la apilan y la grilla se fuerza con `!important` en DOS lugares de
     este archivo (arriba y en la parte de «más chico y más denso»), así que al
     pulsarlo solo cambiaba el texto del botón.

     Ahora la lista es una lista de verdad: renglones horizontales con la foto a
     la izquierda y los datos al lado —las MISMAS piezas de la lista del
     celular—. Por eso este bloque va al FINAL: es el último que habla de la
     rejilla del catálogo y gana por orden sobre los dos anteriores.

     OJO: la «lista fina» de Sonidos SF2 - NKI NO pasa por acá (esa tiene su
     propia excepción con .lista-fina, más arriba). */
  .explorar-grid.list-view {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    /* Un ancho de lectura: de lado a lado (1392 px en un monitor de 1440) el
       nombre quedaba en una punta y los botones en la otra. Igual que la lista
       fina de Sonidos SF2 - NKI, la lista se acorta y va centrada. */
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .explorar-grid.list-view .explorar-card {
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 134px !important;
    overflow: hidden !important;
  }
  /* La foto: una columna fija a la izquierda (como la portada de un disco). */
  .explorar-grid.list-view .explorar-card-image {
    width: 134px !important; max-width: 134px !important;
    height: auto !important; min-height: 134px !important;
    /* Cuadrada SIEMPRE, aunque la foto sea vertical: así el renglón mide lo
       mismo en todas las líneas (Ritmos Yamaha y Ritmos Korg quedan en 136 px).
       La causa del renglón de 200 px en Ritmos Korg era la rejilla —con un solo
       producto estiraba su única fila por el `min-height`— y se corrigió con
       `align-content: start` en explorar.ejs; esta proporción fija es la
       defensa de la foto para que nunca sea ella la que dicte el alto.
       Si el texto fuese más alto que la foto, `align-self: stretch` la estira
       para llenar el renglón, como estaba previsto. */
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 134px !important;
    align-self: stretch !important;
    border-radius: var(--esc-radio) 0 0 var(--esc-radio) !important;
    overflow: hidden !important;
  }
  .explorar-grid.list-view .explorar-card-image img {
    border-radius: var(--esc-radio) 0 0 var(--esc-radio) !important;
  }
  /* Al pasar el mouse, el renglón se corre un poco a la derecha (no salta hacia
     arriba: en una lista, el salto vertical marea). */
  .explorar-grid.list-view .explorar-card:hover { transform: translateX(5px) !important; }
  /* El relleno de la derecha le reserva el sitio al ▶, al corazón y al carrito:
     sin él, el texto se mete por debajo de los botones. */
  .explorar-grid.list-view .explorar-card .explorar-card-info {
    padding: 13px 112px 13px 16px !important;
  }
  .explorar-grid.list-view .explorar-card .explorar-card-title {
    font-size: 14.5px !important;
    -webkit-line-clamp: 1 !important;
  }
  /* En el renglón SÍ entra la bajada: es lo que hace útil a la lista (se lee de
     qué se trata sin abrir el producto). En la grilla sigue oculta. */
  .explorar-grid.list-view .explorar-card .explorar-card-excerpt {
    display: -webkit-box !important;
    font-size: 11.5px !important;
    -webkit-line-clamp: 2 !important;
  }
  .explorar-grid.list-view .explorar-card .explorar-card-price { font-size: 15px !important; }
}


/* Cierre de la media query de computadora que reabre el bloque de densidad (ver arriba). */
}