/* ==========================================================================
   Responsive
   Breakpoints: 1280 (notebook) · 1024 (tablet horizontal) · 768 (tablet) · 480 (celular)
   ========================================================================== */

/* Notebook
   ========================================================================== */
@media (max-width: 1280px) {
  :root { --section-padding: var(--space-9); }
}

/* Tablet horizontal / notebooks pequenos
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --container-padding: 32px; --section-padding: var(--space-8); }



  .manifesto__top { grid-template-columns: 1fr; gap: var(--space-5); }
  .manifesto__side { padding-top: 0; }
  .manifesto__principles { margin-top: var(--space-8); gap: var(--space-5); }

  .services { grid-template-columns: 1fr; gap: var(--space-6); padding-left: var(--container-padding); }
  .services__header { padding: 0 var(--container-padding) 0 0; }
  .services__cta { margin-top: var(--space-5); }
  .service { flex-basis: clamp(300px, 46vw, 400px); }


  .projects, .faq { grid-template-columns: 1fr; gap: var(--space-6); }
  .faq__header { position: static; }

}

/* Tablet vertical
   ========================================================================== */
@media (max-width: 768px) {
  :root { --container-padding: 24px; --section-padding: var(--space-8); --header-height: 68px; }

  /* Hero: círculo escuro maior que a tela, envolvendo todo o texto; botões iguais */
  .hero { --bh: clamp(560px, 130vw, 780px); }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .hero__actions .btn { width: 100%; }

  /* Cards de serviço maiores: um por vez, com o próximo aparecendo na borda */
  .service { flex-basis: min(84vw, 420px); }

  /* Princípios empilhados: número ao lado do texto */
  .manifesto__principles { grid-template-columns: 1fr; gap: 0; margin-top: var(--space-7); }
  .principle { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-3); padding: var(--space-5) 0; }
  .principle__index { grid-row: span 2; padding-top: 6px; }
  .principle__title { margin-top: 0; }

  .section__header { margin-bottom: var(--space-6); }
  .section__lead { font-size: 1.0625rem; }

  .cards--3 { grid-template-columns: 1fr; }
  .card__index { margin-bottom: var(--space-3); }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Celular
   ========================================================================== */
@media (max-width: 480px) {
  :root { --container-padding: 20px; --section-padding: var(--space-7); }

  .header__actions { gap: var(--space-2); }
  .brand--mark .brand__mark { width: 36px; height: 36px; }
  /* O painel cobre a tela inteira: a logo escurece para aparecer sobre o fundo claro */
  .header.menu-open .brand--mark { color: var(--color-primary); }

  .hero__title { font-size: clamp(2.125rem, 9vw, 2.5rem); line-height: 1.1; }
  .hero__lead { font-size: 1.0625rem; }
  .hero__actions { margin-top: var(--space-5); }


  .manifesto__inner { padding-top: var(--space-8); padding-bottom: calc(var(--space-9) + 32px); }

  .section__title { font-size: clamp(1.75rem, 7.4vw, 2rem); }


  .service__title { font-size: 1.25rem; }
  .services__arrow { width: 40px; height: 40px; }
  .card { padding: var(--space-4); }
  .card:hover { transform: none; }


  .project__head { align-items: flex-start; }
  .project__name { font-size: 1.125rem; }



  .faq__question { font-size: 1rem; padding-right: var(--space-6); }
  .faq__answer { padding-right: 0; }

  .cta { padding: var(--space-8) 0; }
  .cta__actions { flex-direction: column; }
  .cta__actions .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer__bottom { margin-top: var(--space-6); }
}