/* Responsivo: menu recolhível (até 1240px), tablet (1060px), celular grande (860px), celular (520px) */
@media (max-width: 1240px) {
  .menu-button { display: block; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 80px 0 auto; display: grid; gap: 0; max-height: calc(100dvh - 80px); overflow-y: auto; padding: 10px max(24px, calc((100% - 1180px) / 2)) 24px; font-size: 16px; background: rgba(6,26,51,.98); border-top: 1px solid rgba(255,255,255,.08); transform: translateY(-120%); opacity: 0; visibility: hidden; transition: transform .25s, opacity .25s, visibility .25s; }
  .main-nav.open { transform: none; opacity: 1; visibility: visible; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .main-nav a::after { display: none; }
  .main-nav .nav-external { margin-top: 14px; justify-content: center; border: 1px solid rgba(255,255,255,.3); }
  .area-hub { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .app-grid { gap: 48px; }
}

@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .analytics-grid, .feature-grid, .area-grid { grid-template-columns: repeat(2, 1fr); }
  .why-points, .audience-strip, .it-benefits { grid-template-columns: repeat(2, 1fr); }
  .urban-flow { grid-template-columns: repeat(3, 1fr); }
  .audience { grid-template-columns: 1fr; gap: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .shell { width: min(100% - 32px, 680px); }
  .section { padding: 80px 0; }
  .section-heading, .block-head, .why-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .why-grid { margin-bottom: 0; }

  /* Abertura: foto abaixo do texto, totem inteiro */
  .hero { padding: 116px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-visual { flex-direction: column; align-items: center; }
  .totem-frame, .demo-frame { flex: none; width: min(100%, 420px); }

  .totem-anatomy { grid-template-columns: 1fr; gap: 32px; }
  .anatomy-figure { width: min(100%, 420px); margin-inline: auto; }
  .steps, .service-grid { grid-template-columns: 1fr; }
  .area-hub { grid-template-columns: repeat(3, 1fr); }
  .app-grid, .records-head, .records-single { grid-template-columns: 1fr; gap: 28px; }
  .timeline { grid-template-columns: 1fr; gap: 26px; }
  .records-case { padding: 20px; }
  .client-case { grid-template-columns: 1fr; }
  .client-photo { min-height: 0; aspect-ratio: 1200 / 692; }
  .client-copy { padding: 28px 22px; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .service-block { margin-top: 64px; }
}

@media (max-width: 640px) {
  .analytics-grid, .feature-grid, .area-grid, .audience-grid, .why-points, .audience-strip, .it-benefits, .contact-shortcuts { grid-template-columns: 1fr; }
  .urban-flow { grid-template-columns: 1fr 1fr; }
  .area-hub { grid-template-columns: repeat(2, 1fr); }
  .audience { padding: 24px 22px; }
  .audience .button { width: 100%; }
  .hero-stats div { padding: 0 16px; }
  .hero-stats dt { font-size: 23px; }
}

@media (max-width: 520px) {
  .shell { width: calc(100% - 32px); }
  .header-inner { min-height: 72px; }
  .main-nav { inset: 72px 0 auto; max-height: calc(100dvh - 72px); }
  .brand img { width: 160px; }
  .hero { padding-top: 104px; }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero-copy > p { font-size: 17px; }
  .hero-actions .button, .section-actions .button { width: 100%; }
  .section h2, .contact h2 { font-size: 32px; }
  .block-head h2 { font-size: 28px; }
  .group-card, .area-card { padding: 22px 20px; }
  .faq summary { padding: 18px 48px 18px 16px; font-size: 16px; }
  .faq details p { padding: 0 16px 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand img { width: 200px; }
  .footer-bottom { flex-direction: column; }
  .floating-whatsapp { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .floating-whatsapp svg { width: 29px; height: 29px; }
}