/* ==========================================================================
   responsive.css: 900+ (desktop) · 720 a 899 (tablet) · até 719 (mobile)
   Carregar por último: sobrepõe as regras de desktop das outras folhas.
   ========================================================================== */

/* ---------- Rodapé: quando as 3 colunas não cabem, "Redes Sociais" vai para uma linha própria, centrada ---------- */
@media (max-width: 979.98px) {
  .footer__social { flex-basis: 100%; text-align: center; }
  .social { justify-content: center; }
}

/* ---------- Tablet ---------- */
@media (max-width: 899.98px) {
  .hero__title { font-size: clamp(1.9rem, 4.3vw, 2.4rem); }
  .hero__phone { max-width: 360px; }
  .features__list { gap: 24px; }
  .feature__text { font-size: 0.9rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 719.98px) {
  .hero { padding-block: 32px 40px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: center; }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .hero__note { margin-inline: auto; }
  /* O PNG tem o celular à esquerda (pixels 50 a 296 de 549) e sombra/transparência à direita.
     No mobile recorta-se o enquadramento para 346 x 543, com o celular ao centro, e esbate-se
     a borda direita para a sombra não acabar num corte seco. */
  .hero__phone {
    max-width: 210px;
    aspect-ratio: 346 / 543;
    object-fit: cover;
    object-position: 0 50%;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .features__list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer__top { flex-direction: column; text-align: center; }
  .footer__mail { justify-content: center; }
}

/* ---------- Ecrãs muito estreitos ---------- */
@media (max-width: 389.98px) {
  /* A quebra manual do subtítulo deixaria "Clientes," sozinho; aqui o texto equilibra-se sozinho */
  .hero__lead { text-wrap: balance; }
  .hero__lead br { display: none; }
}
@media (max-width: 360px) {
  .footer__logo { width: 190px; }
}

/* ---------- Telemóvel deitado / ecrãs baixos: não exigir altura ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-block: 24px; }
}