@media only screen and (max-width: 768px) {
  body {
    padding-bottom: 92px;
  }

  body::before {
    background-size: 32px 32px;
    opacity: 0.12;
  }

  .site-header {
    width: calc(100% - 20px);
    margin-top: 10px;
    padding: 16px;
    border-radius: 24px;
    gap: 16px;
  }

  .brand-logo {
    width: 100%;
  }

  .brand {
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }

  .main-nav {
    gap: 14px;
    font-size: 0.92rem;
  }

  .nav-cta,
  .button,
  .contact-form button {
    width: 100%;
  }

  .page-shell {
    width: calc(100% - 20px);
    margin: 18px auto 56px;
  }

  .site-footer {
    width: calc(100% - 20px);
    margin: 0 auto 20px;
    padding: 20px;
    border-radius: 22px;
  }

  .footer-grid,
  .footer-contact-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-brand {
    align-items: flex-start;
    gap: 14px;
  }

  .footer-brand img {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .footer-brand-copy strong {
    font-size: 1.04rem;
  }

  .footer-copy p {
    margin-top: 12px;
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .footer-points {
    gap: 8px;
    margin-top: 14px;
  }

  .footer-points span {
    padding: 8px 12px;
    font-size: 0.72rem;
  }

  .footer-card {
    padding: 14px 16px;
  }

  .footer-bottom {
    margin-top: 18px;
    padding-top: 14px;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.88rem;
  }

  .floating-whatsapp {
    display: inline-flex;
    right: 16px;
    bottom: 16px;
    width: 58px;
    height: 58px;
  }

  .promo-strip {
    padding: 14px 16px;
    border-radius: 22px;
    align-items: flex-start;
    flex-direction: column;
  }

  .promo-copy {
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .promo-strip a {
    width: 100%;
  }

  .section {
    padding: 26px 0;
  }

  .hero {
    gap: 14px;
    padding-top: 10px;
  }

  .hero-copy,
  .hero-panel,
  .service-card,
  .benefit-card,
  .portfolio-card,
  .pricing-card,
  .authority-card,
  .founder-card,
  .contact-form,
  .contact-card,
  .cta-strip,
  .projects-intro,
  .case-content {
    border-radius: 22px;
    padding: 20px;
  }

  h1 {
    font-size: 2rem;
  }

  .section-heading h2,
  .cta-strip h2 {
    font-size: 1.45rem;
  }

  .lead,
  .section-heading p,
  .service-card p,
  .benefit-card p,
  .portfolio-card p,
  .founder-copy p,
  .logo-stage p,
  .contact-section p,
  #mensagem-status {
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .hero-panel {
    display: none;
  }

  .hero-copy {
    padding: 18px;
  }

  .eyebrow {
    margin-bottom: 12px;
  }

  .hero-copy h1 {
    margin-bottom: 12px;
  }

  .lead {
    font-size: 0.93rem;
    line-height: 1.55;
  }

  .typewriter-box {
    margin-top: 16px;
    padding: 12px 14px;
  }

  .hero-actions,
  .skill-chips {
    gap: 10px;
  }

  .hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .point-card,
  .mini-service-grid article,
  .contact-card {
    padding: 12px;
  }

  .point-card i {
    margin-bottom: 8px;
    font-size: 1rem;
  }

  .point-card span {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  #servicos .section-heading p,
  #orcamento .section-heading p,
  .authority-section .section-heading p,
  #portfolio .section-heading p,
  #sobre .founder-copy p,
  #contato .section-heading p {
    display: none;
  }

  .section-heading {
    margin-bottom: 16px;
  }

  .service-grid,
  .pricing-grid,
  .portfolio-grid,
  .authority-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 82vw);
    grid-template-columns: none;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .service-card,
  .pricing-card,
  .portfolio-card,
  .authority-card {
    scroll-snap-align: start;
  }

  .service-grid::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar,
  .portfolio-grid::-webkit-scrollbar,
  .authority-grid::-webkit-scrollbar {
    height: 5px;
  }

  .service-grid::-webkit-scrollbar-thumb,
  .pricing-grid::-webkit-scrollbar-thumb,
  .portfolio-grid::-webkit-scrollbar-thumb,
  .authority-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
  }

  .service-card p,
  .authority-card p {
    display: none;
  }

  .service-card h3,
  .authority-card strong {
    margin-bottom: 0;
  }

  .pricing-card h3 {
    font-size: 1.55rem;
    margin: 12px 0 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.05;
  }

  .pricing-prefix,
  .pricing-value {
    display: block;
  }

  .pricing-prefix {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
  }

  .pricing-value {
    margin-left: 0;
    white-space: nowrap;
  }

  .pricing-card p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .pricing-highlight {
    margin-top: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .feature-list {
    gap: 8px;
    margin: 14px 0 16px;
  }

  .feature-list li {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .feature-list li:nth-child(n+3) {
    display: none;
  }

  .portfolio-card {
    min-height: auto;
  }

  .portfolio-top {
    margin-bottom: 10px;
  }

  .portfolio-tag {
    font-size: 0.72rem;
    padding: 7px 10px;
  }

  .portfolio-card h3 {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .portfolio-card p,
  .portfolio-meta,
  .portfolio-actions a:last-child {
    display: none;
  }

  .portfolio-actions {
    margin-top: 12px;
  }

  .portfolio-media {
    margin: -20px -20px 18px;
  }

  .portfolio-actions,
  .case-actions {
    gap: 12px;
  }

  .case-media {
    min-height: 220px;
  }

  .case-content h2 {
    font-size: 1.55rem;
  }

  .logo-stage {
    min-height: auto;
    padding: 18px;
  }

  .logo-stage::before {
    inset: 12px;
  }

  .hero-logo {
    margin-bottom: 18px;
  }

  .portfolio-top {
    margin-bottom: 14px;
  }

  .founder-photo {
    display: none;
  }

  .contact-form {
    padding: 20px;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 15px 16px;
    border-radius: 14px;
  }

  .contact-form button {
    align-self: stretch;
  }

  .cta-strip {
    gap: 14px;
  }

  .hero-watermark {
    display: none;
  }
}