/* ============================================================
   Ajustes finos de responsividade — telas pequenas
   Não substitui o sistema do handoff, apenas patches mobile.
   ============================================================ */

/* ---------- Topbar ---------- */
@media (max-width: 720px) {
  .topbar {
    padding: 14px 18px;
    gap: 12px;
  }

  .brand {
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand-wordmark .name {
    font-size: 16px;
  }

  .brand-wordmark .kicker {
    display: none;
  }

  .topbar-cta {
    gap: 10px;
    flex-shrink: 0;
  }

  .topbar-cta .btn {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

@media (max-width: 540px) {
  .topbar-cta .btn {
    display: none;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }
}

/* ---------- Hero ---------- */
@media (max-width: 720px) {
  .hero {
    padding-top: 88px;
  }

  .hero-collage {
    gap: 32px;
    padding-bottom: clamp(40px, 8vw, 60px);
  }

  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 24px;
    font-size: 10px;
  }

  .hero-sub {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.5;
  }

  .hero-actions {
    margin-top: 32px;
    gap: 12px;
  }

  .hero-actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  .hero-foot {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    text-align: left;
    padding: 16px var(--gutter);
  }

  .hero-foot .scroll-cue {
    display: none;
  }

  .hero-watermark {
    display: none;
  }
}

@media (max-width: 540px) {
  .hero-plate {
    display: none;
  }

  .hero-seal {
    width: 80px !important;
    height: 80px !important;
  }
}

/* ---------- Section padding global ---------- */
@media (max-width: 720px) {
  section {
    padding: clamp(60px, 12vw, 90px) 0;
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-head {
    gap: 16px;
  }

  .h-1 {
    font-size: clamp(32px, 9vw, 52px);
    line-height: 1.05;
  }

  .lede {
    font-size: 16px;
  }
}

/* ---------- Marquee ---------- */
@media (max-width: 720px) {
  .marquee {
    padding: 18px 0;
  }

  .marquee-track {
    gap: 32px;
    font-size: clamp(22px, 6vw, 36px);
  }

  .marquee-track .star {
    margin: 0 12px;
  }
}

/* ---------- Manifesto ---------- */
@media (max-width: 720px) {
  .manifesto-quote {
    font-size: clamp(22px, 5vw, 32px);
    line-height: 1.3;
  }

  .manifesto-photo-plate {
    font-size: 9px;
  }
}

/* ---------- Áreas ---------- */
@media (max-width: 720px) {
  .area {
    padding: 20px 0;
    gap: 12px;
  }

  .area-title {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .area-detail p {
    font-size: 15px;
  }
}

/* ---------- Equipe ---------- */
@media (max-width: 720px) {
  .equipe-grid {
    gap: 48px;
  }

  .member-numeral {
    font-size: 100px !important;
  }

  .member-name {
    font-size: clamp(28px, 7vw, 40px);
  }

  .member-quote {
    font-size: 16px;
  }
}

/* ---------- Bastidores ---------- */
@media (max-width: 720px) {
  .bastidores-scroll {
    padding-left: 20px;
    padding-right: 20px;
    gap: 16px;
  }

  .bastidor {
    width: 75vw !important;
    min-width: 260px;
  }

  .bastidores-track {
    font-size: clamp(28px, 7vw, 48px);
  }
}

/* ---------- Processo ---------- */
@media (max-width: 720px) {
  .step {
    padding: 24px 0;
  }

  .step-title {
    font-size: 22px;
  }
}

/* ---------- Voices ---------- */
@media (max-width: 720px) {
  .voice-quote {
    font-size: clamp(20px, 5vw, 28px) !important;
    line-height: 1.4;
  }

  .voice-attr {
    flex-wrap: wrap;
    font-size: 11px;
  }
}

/* ---------- FAQ ---------- */
@media (max-width: 720px) {
  .qa-q {
    font-size: 17px;
    padding: 18px 0;
  }

  .qa-a {
    font-size: 15px;
    padding-bottom: 18px;
  }
}

/* ---------- Contato ---------- */
@media (max-width: 720px) {
  .contato-title {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: 1;
  }

  .contato-sub {
    font-size: 16px;
  }

  .contato-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .contato-actions .btn {
    justify-content: center;
  }

  .info-row {
    padding: 16px 0;
  }
}

/* ---------- Footer ---------- */
@media (max-width: 720px) {
  .footer-grid {
    gap: 36px;
    padding-bottom: 48px;
  }

  .footer-brand .name {
    font-size: 22px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }

  .footer-bottom .legal {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ---------- WhatsApp float — não cobrir conteúdo ---------- */
@media (max-width: 720px) {
  .wa-float {
    width: 48px !important;
    height: 48px !important;
    right: 16px !important;
    bottom: 16px !important;
  }

  .wa-float svg {
    width: 22px;
    height: 22px;
  }

  body {
    padding-bottom: 76px;
  }
}

/* ---------- Mobile menu — links com alvo confortável ---------- */
@media (max-width: 720px) {
  .mobile-menu {
    padding: 28px 24px;
  }

  .mobile-menu .nav-link {
    font-family: var(--serif);
    font-size: 32px;
    text-transform: none;
    letter-spacing: 0;
    padding: 14px 0;
  }

  .mobile-menu .nav-link .num {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 12px;
  }

  .mobile-menu-cta {
    margin-top: 36px;
    align-self: flex-start;
  }
}

/* ---------- Toque: alvo mínimo confortável ---------- */
@media (max-width: 720px) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav-link,
  .qa-q,
  .area {
    min-height: 44px;
  }
}

/* ---------- Cortar rolagem horizontal acidental ---------- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------- Section index lateral — esconde em qualquer mobile/tablet ---------- */
@media (max-width: 1099px) {
  .section-index {
    display: none !important;
  }
}

/* ============================================================
   Motion layer — foto viva + transições suaves
   ============================================================ */

.motion-photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: block;
  will-change: clip-path;
}

.motion-photo-inner {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  display: block;
  will-change: transform, filter;
}

.motion-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.motion-photo--hero,
.motion-photo--manifesto,
.motion-photo--member,
.motion-photo--area,
.motion-photo--bastidor {
  height: 100%;
}

/* Quando o motion-photo está dentro de uma figure (hero-photo, manifesto-photo, etc.)
   ele precisa preencher o espaço sem quebrar o aspect-ratio definido pelo pai. */
.hero-photo--main,
.manifesto-photo,
.member-photo,
.bastidor,
.areas-photo-stack {
  position: relative;
}

/* Render fluido sem layout-thrash durante a animação inicial */
@media (prefers-reduced-motion: reduce) {
  .motion-photo-inner {
    transform: none !important;
    filter: none !important;
  }
}