/* ============================================================
   pilot.cr — responsive.css
   Breakpoints: 640 / 1024 / 1280
   Mobile-first ya está embebido en los otros archivos vía
   clamp() y grid-template-columns con minmax(). Aquí solo los
   overrides explícitos por breakpoint.
   ============================================================ */

/* ============================================================
   <= 640px (mobile)
   ============================================================ */
@media (max-width: 640px) {
  .container { padding: 0 var(--space-4); }
  .section { padding: var(--space-12) 0; }

  .hero { padding: calc(var(--nav-height) + var(--space-10)) 0 var(--space-12); }
  .hero__title { font-size: clamp(2rem, 8vw, 2.75rem); }
  .hero__subtitle { font-size: var(--font-size-base); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .module-grid { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
  .duo-grid { grid-template-columns: 1fr; }

  /* Orquesta del hero: centrar y achicar en mobile */
  .orchestra { margin: 0 auto; max-width: 320px; }
  .orchestra__core { width: 132px; height: 132px; border-radius: 28px; padding: 24px; }

  .cta-band { padding: var(--space-10) var(--space-5); }
  .cta-band h2 { font-size: var(--font-size-2xl); }

  .site-footer { padding: var(--space-12) 0 var(--space-6); }
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .integration-hero__logos { gap: var(--space-3); }
  .integration-hero__logo { width: 72px; height: 72px; }

  .block-steps__item { padding: var(--space-3) var(--space-4); }
  .block-example { padding: var(--space-4); }
  .block-cross-module__list { grid-template-columns: 1fr; }
}

/* ============================================================
   641-1023px (tablet)
   ============================================================ */
@media (min-width: 641px) and (max-width: 1023px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-10);
  }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hero colapsado (<=1023px): centrar la orquesta en su columna */
@media (max-width: 1023px) {
  .hero__visual--orchestra { justify-content: center; }
  .orchestra { margin: 0 auto; }
}

/* ============================================================
   >= 1280px (desktop wide)
   ============================================================ */
@media (min-width: 1280px) {
  :root {
    --container-max: 1240px;
  }
  .hero__title { font-size: var(--font-size-6xl); }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .cookie-banner,
  .cta-band,
  .btn { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .hero { padding: 0; }
  .hero::before { display: none; }
}

/* ============================================================
   Dark mode (no implementado todavía — placeholder para futuro)
   ============================================================ */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f8fafc;
    ...
  }
}
*/