/* =========================================================
   3BF Agência — responsive.css
   Breakpoints reais: 1280 / 1024 / 860 / 640 / 400
   ========================================================= */

/* ---------- <= 1280px ---------- */
@media (max-width: 1280px) {
  :root { --maxw: 1200px; }

  .nav { gap: 1.1rem; }
  .nav__link { font-size: 0.78125rem; }

  .work__featured { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- <= 1024px ---------- */
@media (max-width: 1024px) {
  .sec-head { grid-template-columns: 1fr; gap: 1rem; }
  .sec-meta { padding-top: 0; }

  .manifesto__grid { grid-template-columns: 1fr; gap: 2rem; }
  .manifesto__aside p { max-width: none; }

  .web__stage { grid-template-columns: 1fr; min-height: 0; }
  .web__canvas { min-height: 320px; aspect-ratio: 16 / 10; }
  .web__copy { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .web__video { grid-template-columns: 1fr; }

  .work__featured { grid-template-columns: 1fr; }
  .work__featured-media > .figbox { aspect-ratio: 16 / 9; }

  .contact__grid { grid-template-columns: 1fr; }
  .contact__channel { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }

  .about__grid { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brandcol { grid-column: 1 / -1; }
}

/* ---------- <= 900px : vídeo de fundo do hero precisa de mais "papel"
   por baixo do texto — em telas estreitas a coluna de texto ocupa quase
   toda a largura, então a área nítida da foto precisa recuar mais para
   a direita para não brigar de contraste com o texto cinza. ---------- */
@media (max-width: 1080px) {
  .hero__video::after,
  .phero__video::after {
    background: linear-gradient(100deg,
      rgba(251, 250, 248, 0.99) 0%,
      rgba(251, 250, 248, 0.97) 38%,
      rgba(251, 250, 248, 0.86) 58%,
      rgba(251, 250, 248, 0.4) 76%,
      rgba(251, 250, 248, 0.12) 100%);
  }
}

/* ---------- <= 860px : navegação passa para menu full-screen ---------- */
@media (max-width: 860px) {
  :root { --header-h: 66px; }

  .nav,
  .header__actions .btn { display: none; }
  .burger { display: flex; }

  .hero { min-height: 100svh; }
  .hero__title { max-width: none; font-size: clamp(2.6rem, 13.5vw, 5rem); line-height: 0.92; }
  .hero__bottom { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }

  .pillars { grid-template-columns: 1fr; }

  .svc__head { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .svc__panel-in { grid-template-columns: 1fr; }
  .svc__list { grid-template-columns: 1fr; }

  .work__grid { gap: 2rem; }
  .work-card,
  .work-card--wide,
  .work-card--narrow,
  .work-card--third,
  .work-card--full { grid-column: span 12; }
  .work-card--offset { padding-top: 0; }
  .work-card .figbox,
  .work-card--full .figbox,
  .work-card--third .figbox { aspect-ratio: 16 / 10; }

  .process__item { grid-template-columns: 3rem minmax(0, 1fr); }
  .process__item p { grid-column: 2 / -1; margin-top: 0.5rem; }

  .about__media { grid-template-columns: 1fr; }

  .clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- <= 640px : layout mobile dedicado ---------- */
@media (max-width: 640px) {
  :root {
    --gut: 1.25rem;
    --header-h: 62px;
  }

  body { font-size: 1rem; }

  .section { padding-block: 3.5rem; }
  .section--tight { padding-block: 2.5rem; }

  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 0.95rem; }

  .hero {
    justify-content: center;
    padding-top: calc(var(--header-h) + 1rem);
  }
  .hero__inner { gap: 1.75rem; justify-content: center; }
  .hero__eyebrow span { font-size: 0.5625rem; letter-spacing: 0.16em; }
  .hero__eyebrow .sep { display: none; }
  .hero__title { font-size: clamp(2.4rem, 14vw, 3.4rem); }
  .hero__lede { font-size: 1rem; }
  .hero__bottom { padding-top: 1.25rem; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* No mobile o canvas 3D recua para plano de fundo discreto */
  .hero__canvas-wrap { opacity: 0.55; }

  .ticker { padding-block: 0.7rem; }
  .ticker__item { font-size: 0.625rem; padding-inline: 0.8rem; gap: 0.8rem; }

  .manifesto__statement { font-size: 1.5rem; }

  .pillar { padding: 1.5rem 1.25rem; }

  .svc__head { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.75rem; padding-block: 1.25rem; }
  .svc__title { font-size: 1.6rem; }
  .svc__toggle { width: 34px; height: 34px; }
  .svc__panel-in { padding-bottom: 1.75rem; gap: 1.25rem; }

  .web__canvas { aspect-ratio: 1 / 1; min-height: 260px; }
  .web__specs li { flex-direction: column; gap: 0.3rem; }

  .case-facts > div { grid-template-columns: 1fr; gap: 0.25rem; }

  .work__featured-copy { gap: 1.25rem; }

  .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clients__cell img { max-height: 42px; }

  .process__item { grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: 1.4rem; }
  .process__n { font-size: 1.35rem; }

  .about__portraits { gap: 0.75rem; }

  .contact__title { font-size: clamp(2.1rem, 11vw, 3rem); }
  .contact__channel {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "k k" "v go";
    gap: 0.4rem 1rem;
  }
  .contact__channel .k { grid-area: k; }
  .contact__channel .v { grid-area: v; font-size: 1.15rem; }
  .contact__channel .go { grid-area: go; }

  .footer__top { grid-template-columns: 1fr; gap: 2rem; }

  .wa { padding: 0.75rem 0.95rem; font-size: 0.6875rem; }
  .wa span { display: none; }
  .wa svg { width: 20px; height: 20px; }
}

/* ---------- <= 400px ---------- */
@media (max-width: 400px) {
  :root { --gut: 1.05rem; }
  .brand__tag { display: none; }
  .hero__title { font-size: 2.15rem; }
  .svc__title { font-size: 1.4rem; }
  .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Telas muito baixas em paisagem ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 640px; }
}

/* ---------- Impressão ---------- */
@media print {
  .header, .menu, .wa, .hero__canvas-wrap, .web__stage, video { display: none !important; }
  body { background: #fff; color: #000; }
  .contact, .footer, .web { background: #fff !important; color: #000 !important; }
}