/* =========================================================================
   DESOCULTADOR — responsive.css
   Mobile-first. Breakpoints testados: 320/360/375/390/414/430/480/600/
   768/820/900/1024/1280/1366/1440/1600/1920/2560.
   ========================================================================= */

/* Base (320px+) já definida em style.css como layout de 1 coluna. */

/* ---------- 480px — telas grandes de celular ---------- */
@media (min-width: 480px) {
  .hero-cta { justify-content: center; }
  .footer-social { justify-content: flex-start; }
}

/* ---------- 600px ---------- */
@media (min-width: 600px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .author-strip { grid-template-columns: auto 1fr; text-align: left; }
}

/* ---------- 768px — tablets ---------- */
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .hero-title { letter-spacing: -0.01em; }
}

/* ---------- 900px ---------- */
@media (min-width: 900px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 1024px — desktop pequeno / navegação completa ---------- */
@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .nav-mobile-toggle { display: none; }
  .articles-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 1280px ---------- */
@media (min-width: 1280px) {
  .pillars-grid { grid-template-columns: repeat(4, 1fr); }
  :root { --container-pad: 2.5rem; }
}

/* ---------- 1600px+ — ultrawide: conter, nunca esticar ---------- */
@media (min-width: 1600px) {
  :root { --container-max: 1320px; }
}
@media (min-width: 1920px) {
  :root { --container-max: 1400px; }
  body { font-size: calc(var(--fs-body) * 1.02); }
}

/* ---------- Correções específicas de largura curta (320–359px) ---------- */
@media (max-width: 359px) {
  .btn { width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; width: 100%; }
  .logo { font-size: 1rem; }
}

/* ---------- Landscape em celulares (altura curta) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 130svh; }
  .nav-mobile { overflow-y: auto; }
}

/* ---------- Impressão (não deve quebrar) ---------- */
@media print {
  .site-header, .nav-mobile, .hero-scroll, #hero-canvas, .footer-social { display: none !important; }
  body { background: #fff; color: #000; }
}