/* =========================================================================
   responsive — Los tres puntos de quiebre del sitio.

   Tramo 6 de 8 de la hoja que antes era una sola (1 468 líneas). Los
   tramos son CONTIGUOS y se cargan en este orden: el orden de carga es la
   cascada. Mover una hoja de sitio puede cambiar qué regla gana sin que
   nada falle — se comprueba con `npm run huella`, no razonando.
   ========================================================================= */

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1000px) {
  .armazon { grid-template-columns: minmax(0, 1fr); }

  /* El botón vive sobre la cinta, no dentro: la cinta es sticky y el cajón
     tiene que poder taparla entera cuando se abre. */
  /*
   * El botón es un elemento MÁS de la cinta, no una capa flotando encima.
   * Estaba `position: fixed` con un `top` puesto a ojo, y cualquier cambio en
   * el alto de la barra —una etiqueta más alta, otro tamaño de fuente— lo
   * dejaba desfasado. Dentro del flex lo centra el layout y no queda ningún
   * número que mantener a mano.
   */
  .hamburguesa {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0 .6rem;
    border: 1px solid var(--linea);
    border-radius: .6rem;
    background: var(--blanco);
    cursor: pointer;
  }
  .hamburguesa span {
    display: block;
    height: 2px;
    background: var(--tinta);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }

  /*
   * Cerrar es un botón DENTRO del cajón, no el mismo de abrir.
   *
   * Con el de abrir dentro de la cinta, al abrirse el cajón queda detrás del
   * velo y no se podría tocar. Abrir desde la barra y cerrar desde el cajón es
   * además lo que hace cualquier aplicación: la cruz está donde el dedo ya
   * está mirando.
   */
  .menu-abierto .cerrar-menu {
    display: grid;
    place-items: center;
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--linea-oscura);
    border-radius: .6rem;
    background: var(--negro-suave);
    cursor: pointer;
    z-index: 2;
  }
  .cerrar-menu span {
    position: absolute;
    width: 1rem;
    height: 2px;
    background: var(--gris-claro);
    border-radius: 2px;
  }
  .cerrar-menu span:nth-child(1) { transform: rotate(45deg); }
  .cerrar-menu span:nth-child(2) { transform: rotate(-45deg); }

  .velo {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 65;
  }
  .velo[hidden] { display: none; }

  /*
   * El cajón sólo se esconde si hay JavaScript (`html.js`, que pone menu.js
   * antes de pintar). Sin JS no habría con qué abrirlo, y un menú imposible de
   * abrir deja el sitio sin navegación: en ese caso se queda visible arriba,
   * que es feo pero funciona.
   */
  /*
   * El cajón va por encima del velo (65). Estaba en 60 —el z-index que usa en
   * escritorio— y el velo se pintaba ENCIMA del menú: todo el cajón se veía
   * lavado y gris, como si estuviera apagado. Parecía un problema de color y
   * era de orden de capas.
   */
  .js .lateral {
    position: fixed;
    z-index: 70;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(19rem, 84vw);
    height: 100%;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .4);
  }
  .js.menu-abierto .lateral,
  .menu-abierto .lateral { transform: translateX(0); }

  /* El botón de cerrar es fijo y queda ENCIMA del cajón: si el logo empieza
     arriba, la X le cae sobre el ave. Se baja el logo en vez de mover el
     botón, que tiene que estar siempre en el mismo sitio abra o cierre. */
  /* Plegar no aplica en el cajón: ya es la forma compacta del menú, y un botón
     que lo encogiera más dejaría una tira flotando sobre el contenido. */
  .plegar { display: none; }


  .cinta { padding: .7rem 1rem; }
  .contenido { padding: 1.75rem 1.1rem 2rem; }
  .cadena__fila { gap: .7rem; padding: .8rem .35rem; }
  .pie { padding: 1.75rem 1.1rem 9rem; }

  .dial { left: 0; padding: .6rem .8rem .5rem; gap: .2rem .7rem; }
  .dial__ecualizador { width: 3.2rem; height: 1.8rem; }
  .dial__titulo { font-size: .88rem; }
  .dial__boton { width: 2.1rem; height: 2.1rem; }
  .dial__boton--grande { width: 2.6rem; height: 2.6rem; }
}

@media (max-width: 560px) {
  .ct-lista { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }

  /* En una columna, la tarjeta vuelve a leerse mejor con la foto al lado:
     apiladas, cinco fotos de ancho completo son cinco pantallas de scroll. */
  .ct-nota { flex-direction: row; gap: .9rem; align-items: flex-start; }
  .ct-nota__foto { flex: none; width: 7.5rem; aspect-ratio: 1; }
  .ct-nota:not(:has(.ct-nota__foto))::before {
    flex: none; width: 7.5rem; aspect-ratio: 1; background-size: 2.2rem;
  }
  .ct-nota__titulo { font-size: 1.05rem; }
  .ct-nota__entrada { display: none; }
}