/* Refinamento mobile comum das demonstrações. Carregar antes de tofy-mobile.css. */
@media (max-width:860px) {
  .model-demo { -webkit-text-size-adjust:100%; }
  .model-demo main { overflow:clip; }
  .model-demo section { scroll-margin-top:16px; }
  .model-demo .container { width:calc(100% - 32px); margin-inline:auto; }
  .model-demo .hero,
  .model-demo .hero-section { min-height:0; }
  .model-demo .hero-grid {
    grid-template-columns:minmax(0,1fr);
    gap:28px;
    min-height:0;
    padding-block:32px 48px;
  }
  .model-demo .hero-copy { max-width:680px; }
  .model-demo .hero h1,
  .model-demo .hero-section h1 {
    max-width:18ch;
    margin-bottom:16px;
    font-size:clamp(40px,8.5vw,58px);
    line-height:1.02;
    letter-spacing:-.045em;
    text-wrap:balance;
    overflow-wrap:normal;
  }
  .model-demo .hero p,
  .model-demo .hero-text,
  .model-demo .hero-lead {
    max-width:58ch;
    font-size:16px;
    line-height:1.65;
  }
  .model-demo .hero-actions,
  .model-demo .cta-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    width:100%;
  }
  .model-demo .hero-actions .btn,
  .model-demo .cta-actions .btn,
  .model-demo .cta .btn,
  .model-demo .model-purchase {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:50px;
    padding:13px 18px;
    line-height:1.35;
  }
  .model-demo .hero-points {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    max-width:100%;
    margin-top:18px;
    padding:0;
    overflow:visible;
  }
  .model-demo .hero-points > * { height:auto; }
  .model-demo .service-grid,
  .model-demo .services-grid,
  .model-demo .practice-grid,
  .model-demo .treatment-grid,
  .model-demo .differential-grid,
  .model-demo .diff-grid,
  .model-demo .process-grid,
  .model-demo .steps,
  .model-demo .faq-grid,
  .model-demo .team-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .model-demo .service-card,
  .model-demo .practice-card,
  .model-demo .treatment-card,
  .model-demo .model-info-card { padding:18px; }
  .model-demo .model-gallery-caption {
    position:static;
    min-height:44px;
    display:flex;
    align-items:center;
    background:#17191c;
  }
  .model-demo .cta,
  .model-demo .cta-band { padding-block:44px; }
  .model-demo .cta-grid,
  .model-demo .cta-wrap { gap:22px; padding-block:0; }

  /* Uma coluna, sem trilho horizontal.
     O trilho economizava altura, mas escondia conteudo atras de um gesto
     que nem todo mundo faz, e no Windows a barra de rolagem aparecia por
     cima do cartao. Empilhado nao esconde nada. */
  .model-demo #apresentacao .model-info-grid,
  .model-demo[data-model="consultoria"] #servicos .service-grid,
  .model-demo[data-model="advocacia"] #areas .practice-grid,
  .model-demo[data-model="arquitetura"] #servicos .service-grid,
  .model-demo[data-model="fotografia"] #servicos .service-grid,
  .model-demo[data-model="personal"] #servicos .service-grid,
  .model-demo[data-model="psicologia"] #servicos .service-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-auto-flow:row;
    gap:14px;
    max-width:100%;
    margin-inline:0;
    padding:0;
    overflow:visible;
  }
  .model-demo [aria-label*="deslize para ver"] { width:100%; max-width:100%; overflow:visible; }
  .model-demo[data-model="psicologia"] .model-business .header-cta { display:none; }
  .model-demo[data-model="barbearia"] .hero-copy { padding-top:220px; }
}

@media (max-width:360px) {
  .model-demo .hero h1,
  .model-demo .hero-section h1 { font-size:36px; }
  .model-demo h2,
  .model-demo .section-heading h2,
  .model-demo .about h2,
  .model-demo .faq h2,
  .model-demo .cta h2 { font-size:29px; }
  .model-demo .project-grid,
  .model-demo .portfolio-grid,
  .model-demo .gallery-grid { grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  .model-demo .model-gallery-tools { scroll-behavior:auto; }
}