/* ==========================================================================
   alobyte.net — responsive.css
   La ventana se mantiene en todos los tamaños. En móvil el menú lateral se
   convierte en un desplegable tipo pausa y el hero se apila: imagen arriba,
   texto abajo, como la versión portátil de la consola.
   ========================================================================== */

@media (max-width: 1000px) {
  .layout { grid-template-columns: 196px minmax(0, 1fr); }
  .hero__grid { grid-template-columns: 46% minmax(0, 1fr); }
  .hero__art::after {
    background: linear-gradient(90deg,
      rgba(0, 20, 22, 0) 0%, rgba(0, 20, 22, 0) 42%,
      rgba(0, 20, 22, 0.99) 54%, #001416 66%, #001416 100%);
  }
}

@media (max-width: 860px) {
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lower { grid-template-columns: 1fr; }
  .toolbar__motto { display: none; }
  .win__title-text em + span { display: none; }
}

@media (max-width: 720px) {
  body { padding: 10px 6px 20px; }
  .page { padding: 0 10px; }
  .footer { margin: 0 -10px; }

  /* Menú plegable */
  .layout { grid-template-columns: 1fr; }
  .sidebar { order: -1; }
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    background: var(--panel);
    border: 2px solid var(--cyan);
    color: var(--cyan);
    font-family: var(--f-ui);
    font-size: var(--t-base);
    letter-spacing: 0.08em;
    cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] { background: var(--cyan); color: var(--ink); }
  .menu { display: none; }
  .menu.is-open { display: block; }
  .menu__link { font-size: var(--t-md); padding: 14px 12px; }

  /* Emblema y etiquetas: en fila, más compactos */
  .emblem { display: none; }
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 4px 4px 8px;
    font-size: var(--t-sm);
  }

  /* Hero apilado */
  .hero { min-height: 0; }
  .hero__art { position: relative; height: 300px; }
  .hero__art img { object-position: 30% center; }
  .hero__figure {
    top: 6px;
    bottom: auto;
    height: 294px;
    width: 56%;
    left: 4%;
  }
  .hero__art::after {
    background: linear-gradient(180deg, rgba(0, 20, 22, 0) 40%, rgba(0, 20, 22, 0.9) 100%);
  }
  .hero__grid { display: block; min-height: 0; }
  .hero__body { padding: 18px 14px 22px; }
  .hero__title { font-size: clamp(22px, 7.4vw, 34px); }
  .hero__sub { max-width: none; }
  .hero__note {
    position: static;
    text-align: left;
    padding: 12px 14px 0;
    font-size: var(--t-sm);
  }
  .btn { width: 100%; min-width: 0; }

  .quick__label { font-size: var(--t-xs); }
  .featured__body { grid-template-columns: 1fr; gap: 12px; }
  .post-row { grid-template-columns: 1fr; }
  .post-row__art { aspect-ratio: 16 / 9; }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer { justify-content: center; text-align: center; gap: 10px; }
  .footer__motto { margin: 0; width: 100%; }
  .modal { padding: 0; }
  .modal__win { width: 100%; height: 100%; max-height: 100vh; }
}

@media (max-width: 460px) {
  .win__title-text { font-size: 10px; }
  .winbtn { width: 20px; height: 18px; }
  .addr__url { font-size: 10px; }
  .quick { grid-template-columns: 1fr; }
  .follow__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .wordmark { width: min(78vw, 300px); }
  .kicker { font-size: 9px; letter-spacing: 0.06em; }
  .masthead { min-height: 132px; grid-template-columns: minmax(0, 1fr) 34%; }
  .masthead__art { inset: 0 0 0 52%; }
}

@media print {
  .crt, .grain, .toolbar, .win__title, .sidebar, .footer { display: none; }
  body { background: #fff; color: #000; }
  .win, .page { background: #fff; border: 0; }
}