/* Sentinela — versão de celular (≤900px). No celular a moldura de iPhone some:
   a mensagem vira um cartão de WhatsApp na largura toda, pra ler inteira. */
@media (max-width:900px){
  body{font-size:16.5px}
  section{padding:3.5rem 0}
  .titulo{font-size:clamp(1.9rem,8.5vw,2.5rem)}
  .intro{font-size:1.1rem}

  /* hero: texto, botões, depois o celular menor (é ilustração) */
  .hero{padding:2.5rem 0 3rem}
  .hero-grade{gap:2.5rem}
  .hero .fone{max-width:300px;zoom:.9;transform:none}
  .hero .tela{height:auto;min-height:0}
  .hero .conversa{overflow:visible}
  .hero .b{font-size:14px}
  .hero .cab .nome{font-size:15px}

  /* tablet (641–900px): pares em 2 colunas com a moldura de iPhone, menor */
  .trio{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .trio .par{display:block}
  @media (min-width:641px){
    .par{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center}
    .trio .par{display:block}
    .trio .par-fone .fone{max-width:330px}
    .par:nth-child(even) .par-fone{order:-1}
    .par-texto{max-width:28ch}
    .par-fone .fone{max-width:330px}
    .par-fone .tela{height:auto;min-height:0}
    .par-fone .conversa{overflow:visible}
    .par-fone .b{font-size:13.5px}
    .hero-grade{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
    .hero .fone{max-width:330px}
  }
  /* celular (≤640px): texto em cima, mensagem vira cartão de WhatsApp na largura toda */
  @media (max-width:640px){
    /* pares: texto em cima, cartão embaixo */
    .pares{gap:3.5rem;margin-top:2.5rem}
    .par{grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:start}
    .par:nth-child(even) .par-fone{order:0}
    .par:nth-child(even) .par-texto{justify-self:start}
    .par-texto{max-width:none}
    .par-texto .rotulo{font-size:1rem;margin-bottom:.6rem}
    .par-texto h3{font-size:1.55rem}
    .par-texto p{font-size:1.05rem}

    /* todos os celulares iguais ao do topo: moldura de iPhone, conversa inteira visível */
    .par-fone .fone{max-width:300px;zoom:.9;margin:0 auto}
    .par-fone .tela{height:auto;min-height:0}
    .par-fone .conversa{overflow:visible}
    .par-fone .b{font-size:14px}
  }

  /* blocos do meio e diferenciais: 1 coluna, espaço igual */
  .buraco{margin-top:2rem}
  .buraco div{padding:1.5rem 1.2rem}
  .buraco .n{font-size:1.35rem}
  .buraco p{font-size:1.05rem}
  .passos{gap:1.5rem;margin-top:2rem}
  .passo{padding-top:1.6rem}
  .passo h3{font-size:1.3rem}
  .passo p{font-size:1.05rem}

  /* seções novas */
  .lados,.planos,.oferta{grid-template-columns:minmax(0,1fr)}
  .lados{gap:1rem;margin-top:2rem}
  .lado{padding:1.5rem 1.3rem}
  .lado h3{font-size:1.35rem}
  .grande{font-size:clamp(1.5rem,7vw,2rem)}
  .prosa{font-size:1.08rem}
  .planos{gap:1.6rem;margin-top:2.2rem}
  .plano{padding:1.6rem 1.3rem 1.4rem}
  .plano .valor{font-size:3rem}
  .compara{font-size:1.12rem}
  .faq summary{font-size:1.05rem}
  .faq p{font-size:1.02rem}
  .lista li{font-size:1.08rem}
  .selos span{font-size:.9rem}
  .fim .titulo{font-size:1.8rem}
  /* preço */
  .valor{font-size:clamp(3.6rem,22vw,5.5rem)}
  .valor small{font-size:.26em}
  .inclui span{font-size:.95rem}
  .preco .titulo{font-size:1.8rem}

  /* botão fixo não cobre o fim da página */
  main>section:last-of-type{padding-bottom:5rem}
  footer{padding-bottom:6.5rem;font-size:.98rem}
}