/* Conteúdo do aviso de área de atendimento. A casca está em css/modal.css.

   Deliberadamente mais sóbrio que a promoção: aqui não se vende nada, se
   responde uma pergunta. Por isso não há foto de produto nem cor cheia —
   só a faixa com o caminhão, que diz "entrega" antes de qualquer palavra
   ser lida. */

.atende-faixa {
  display: grid; place-items: center;
  padding: 30px 0 6px;
  background: var(--laranja-fraco);
}
.atende-faixa svg {
  width: 46px; height: 46px;
  stroke: var(--laranja-forte); stroke-width: 1.6;
  fill: none;
}

.atende-texto { padding: 24px 28px 28px; }

.atende-selo {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 9px;
  background: var(--laranja); color: #fff;
  font-size: .66rem; font-weight: 800;
  font-variation-settings: "wdth" 112;
  letter-spacing: .06em; text-transform: uppercase;
}

/* Menor que o da promoção: o título aqui é uma frase inteira, não uma
   chamada de três palavras, e no tamanho da promoção ela quebrava em
   quatro linhas e empurrava o botão para fora da dobra no celular. */
.atende-texto h2 {
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 10px;
}

.atende-texto p {
  margin: 0 0 20px;
  color: var(--texto-medio);
  line-height: 1.55;
}

.atende-cta { width: 100%; }

@media (max-width: 430px) {
  .atende-texto { padding: 20px 18px 22px; }

  /* Menor que no desktop, e o tamanho saiu de medição, não de gosto.

     O par mais longo que o dono mandou manter junto — "Grande
     Florianópolis" — renderiza a 322 px em caixa alta com o eixo de
     largura da fonte em 118. Numa tela de 375 px sobram 311 px de texto:
     a 19,5 px ele estourava por 15 e o navegador rachava a palavra ao
     meio; a 17,2 px pede 285 px e cabe com folga.

     O piso de 0,95rem é para a tela de 320 px, onde o mesmo par pedia 277
     px contra 256 disponíveis. Ele não encolhe o título de um celular
     comum: a 375 px o termo em vw dá 17,25 px, e é esse que vale. */
  .atende-texto h2 { font-size: clamp(0.95rem, 4.6vw, 1.45rem); }
}
