/* =========================================================================
   responsive.css — Ajustes finos por breakpoint y utilidades de impresión.
   El grueso del responsive vive en layout/components con clamp() y grid auto.
   ========================================================================= */

/* Evitar desbordamiento horizontal en cualquier circunstancia.
   `clip` (no `hidden`) recorta el eje X sin crear contenedor de scroll,
   de modo que el header con position:sticky sigue funcionando. */
html, body { max-width: 100%; overflow-x: clip; }

/* Tablet */
@media (max-width: 1023px) {
  :root { --header-h: 68px; }
}

/* Móvil */
@media (max-width: 640px) {
  .btn { width: 100%; }
  .hero-actions .btn { width: auto; }
  .cluster .btn { width: auto; }
}

/* Reduce el tamaño del hero en pantallas muy pequeñas */
@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
}

/* Impresión básica */
@media print {
  .site-header, .site-footer, .cookie-banner, .nav-toggle, .mobile-nav { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}