/* ==========================================================================
   css/mutador/13-responsive.css — parte 13/15 de lo que era styles.css
   --------------------------------------------------------------------------
   §26 responsive general (720 / 720–900).
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* ---------- §26 · Responsive (720 / 720–900) ---------- */
@media (max-width: 720px){
  .mark{ display: none; }
  .nav{ display: none; }
  .meta{ display: none; }
  .mobile-logo{ display: block; }
  .hamburger{ display: block; }
  .topbar{ padding-bottom: 6px; }

  .kicker{ grid-column: 1 / -1; padding-bottom: 8px; }
  .statement{ grid-column: 1 / -1; font-size: 40px; }
  .aside{ grid-column: 1 / -1; padding-top: 24px; }
  .entry{ grid-template-columns: repeat(6, 1fr); height: auto; padding: 10px 0; }
  .entry .n{ grid-column: 1 / span 1; padding-top: 4px; }
  .entry .t{ grid-column: 2 / span 5; font-size: 20px; }
  .entry .c{ grid-column: 2 / span 5; padding-top:4px; }
  .entry .d, .entry .y{ display:none; }

  .masonry{ column-count: 1; }
  /* On mobile the compact 5.5-card layout is too tight; show 2.2 cards. */
  .f-slide{ width: calc((100% - var(--gutter) * 1.2) / 2.2); }
  .f-slide .f-title{ font-size: 14px; }
  .manifesto{ padding: 48px 24px; margin: 12px 0 18px; }
  .manifesto-line{ font-size: clamp(36px, 11vw, 64px); }

  .foot .c1,.foot .c2,.foot .c3,.foot .c4{ grid-column: 1 / -1; text-align: left; margin-bottom: 18px; }
  .sig .big{ font-size: 56px; }

  /* La miniatura de cursor no tiene sentido en táctil:
     mouseenter puede quedarse activa al tocar y no soltarse. */
  .preview{ display: none; }
}

@media (min-width: 721px) and (max-width: 900px){
  .mark{ grid-column: 1 / span 3; }
  .nav{ grid-column: 4 / span 6; gap: 14px; }
  .meta{ grid-column: 10 / span 3; }
  .masonry{ column-count: 2; }
  /* Tablet: 3.5 filmstrip cards visible */
  .f-slide{ width: calc((100% - var(--gutter) * 2.5) / 3.5); }
}