/* ===== Yeap Marketing — responsividade (mobile projetado, não empilhado) ===== */

/* notebooks estreitos */
@media (max-width: 1120px) and (min-width: 901px) {
  .header__nav { gap: 20px; }
  .header__nav a:not(.btn) { font-size: .7rem; }
  .header__nav .btn--sm { padding: 9px 14px; font-size: .66rem; }
}

/* tablet */
@media (max-width: 900px) {
  .header__nav {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    background: rgba(20, 20, 20, .97);
    gap: 34px;
    transform: translateY(-100%);
    visibility: hidden; /* tira os links do tab order quando fechado */
    transition: transform .4s var(--ease), visibility 0s .4s;
  }
  .header__nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .header__nav a:not(.btn) { font-size: 1.05rem; letter-spacing: .2em; }
  .header__burger { display: block; position: relative; z-index: 110; }
  .header__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .header__burger.is-open span:nth-child(2) { opacity: 0; }
  .header__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* hero: foto vira faixa lateral menor, título domina */
  .hero__photo { object-position: 62% 30%; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 30px; }

  /* sobre: foto de fundo com véu mais forte para o texto ler bem */
  .about { padding-bottom: clamp(140px, 20vw, 200px); }
  .about__scrim {
    background: linear-gradient(180deg, rgba(206,205,203,.95) 0%, rgba(206,205,203,.88) 46%, rgba(206,205,203,.45) 100%);
  }
  /* coluna estreita: volta ao alinhamento à esquerda (legibilidade) */
  .about__comp { align-items: flex-start; text-align: left; }
  .about__text { max-width: 560px; }
  .about__text p { margin-left: 0; }
  .services { padding-top: clamp(80px, 10vw, 130px); }

  /* serviços */
  .services__intro { grid-template-columns: 1fr; row-gap: 50px; }
  .circle360 { margin: 0 auto; }
  .svc__row { grid-template-columns: 48px 1fr; row-gap: 14px; }
  .svc__body { grid-column: 2; }
  .svc__row::before { display: none; } /* número fantasma só faz sentido com hover */

  /* clientes / diferenciais / contato */
  .clients__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .clients__count { text-align: left; }
  .diff__grid { grid-template-columns: 1fr; row-gap: 54px; }
  .diff__media { max-width: 380px; }
  .contact__grid { grid-template-columns: 1fr; row-gap: 60px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* celular */
@media (max-width: 520px) {
  :root { --fs-hero: clamp(2.2rem, 10.5vw, 2.9rem); }

  /* respiros menores entre seções para não sobrar tela vazia */
  .about { padding-bottom: 96px; }
  .services { padding-top: 72px; padding-bottom: 64px; }
  .clients { padding-top: 72px; padding-bottom: 64px; }
  .diff { padding-top: 72px; padding-bottom: 72px; }
  .contact { padding-top: 72px; padding-bottom: 72px; }

  /* títulos de serviço: sem quebras herdadas do desktop (evita órfãos) */
  .svc__name br { display: none; }

  /* folio compacto para a régua não colapsar */
  .folio { gap: 12px; font-size: .64rem; letter-spacing: .13em; }

  /* CTA de clientes sai da zona do botão flutuante */
  .clients__cta { justify-content: flex-start; }

  .hero { padding-top: 104px; }
  .hero__photo { object-position: 50% 62%; }

  .stat strong { font-size: 1.7rem; }
  .stat { padding: 0 22px; }


  .svc__num { padding-top: .3em; }
  .svc__name { font-size: 1.45rem; }

  .clients__row { gap: 22px; }
  .clients__row img { width: 78px; height: 78px; }
  .clients__marquee::before, .clients__marquee::after { width: 48px; }

  .diff::before { width: 220px; background-size: 240px auto; }
  .diff__item { grid-template-columns: 58px 1fr; }
  .diff__num { font-size: 2.1rem; }
  .diff__cta { justify-content: flex-start; }

  .form__row { grid-template-columns: 1fr; }
  .contact__channels a { font-size: 1.05rem; }

  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; gap: 6px; }

  .wpp-float { width: 50px; height: 50px; right: 16px; bottom: 16px; }
}