/* Ajustes exclusivos para telas pequenas. */
html, body { max-width: 100%; overflow-x: hidden; }

img { max-width: 100%; }

@media (max-width: 760px) {
  .topbar { width: 100%; }
  .brand-image { flex: 0 1 145px; min-width: 0; }
  .brand-image img { width: 100%; }

  .hero { min-height: 700px; padding: 118px 22px 132px; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(40px, 12.2vw, 56px); line-height: 1.01; letter-spacing: -2px; }
  .hero-text { font-size: 15px; line-height: 1.58; margin: 22px 0 26px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero-actions .button { width: 100%; max-width: 285px; }
  .hero-photo { height: 39%; opacity: .48; }
  .scroll-hint { font-size: 9px; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }

  .section, .community { padding-left: 18px; padding-right: 18px; }
  .suppliers-page .suppliers-directory { padding-top: 184px; }
  .directory-tools { gap: 10px; }
  .search { min-height: 52px; }
  .filter-button { min-height: 52px; }
  .filters { max-height: min(56vh, 370px); overflow-y: auto; }
  .results-bar { align-items: flex-start; gap: 12px; }
  .results-bar button { flex: 0 0 auto; text-align: right; }

  .supplier-grid { gap: 14px; }
  .supplier-card { min-height: 0; padding: 18px; }
  .supplier-logo { height: 118px; margin: 16px auto 18px; width: 118px; }
  .supplier-card h3 { font-size: 23px; line-height: 1.12; overflow-wrap: anywhere; }
  .supplier-card .contact-art { margin-top: 16px; }
  .supplier-card .contact-art img { height: auto; min-height: 44px; object-fit: fill; }

  /* Não usa os recortes de imagem nos links: eles alongavam em alguns celulares. */
  .supplier-card .contact-art.split-art {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    height: auto;
    min-height: 64px;
    overflow: visible;
  }
  .supplier-card .contact-art.split-art .social-button {
    align-items: center !important;
    display: flex !important;
    height: 48px !important;
    justify-content: center !important;
    min-height: 48px !important;
    position: relative !important;
    top: auto !important;
    width: auto !important;
  }
  .supplier-card .contact-art.split-art .social-button.instagram {
    background: #fff4f8 !important;
    border: 1px solid #efb3d0 !important;
    left: auto !important;
  }
  .supplier-card .contact-art.split-art .social-button.whatsapp {
    background: #f2fbf7 !important;
    border: 1px solid #b8e4ce !important;
    right: auto !important;
  }
  .supplier-card .contact-art.split-art .social-button .contact-piece { display: none !important; }
  .supplier-card .contact-art.split-art .social-button::after { content: none !important; display: none !important; }
  .supplier-card .contact-art.split-art .social-button::before {
    display: inline-grid !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    content: "" !important;
    height: 20px !important;
    margin-right: 6px;
    width: 20px !important;
  }
  .supplier-card .contact-art.split-art .social-button.instagram::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='%23c51a69'/%3E%3Ccircle cx='12' cy='12' r='4.1' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='17.2' cy='6.9' r='1.15' fill='white'/%3E%3C/svg%3E") !important; }
  .supplier-card .contact-art.split-art .social-button.whatsapp::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23079458' d='M12 2a10 10 0 0 0-8.6 15.1L2.2 21.8l4.8-1.2A10 10 0 1 0 12 2Zm0 17.9a7.9 7.9 0 0 1-4-1.1l-.3-.2-2.8.7.7-2.7-.2-.3A7.9 7.9 0 1 1 12 19.9Zm4.6-5.7c-.3-.1-1.6-.8-1.9-.9-.2-.1-.4-.1-.6.2l-.8 1c-.1.2-.3.2-.5.1-1.6-.8-2.6-1.8-3.3-3.3-.1-.2 0-.4.1-.5l.4-.5c.1-.2.1-.3 0-.5l-.8-1.8c-.2-.4-.4-.3-.6-.3h-.5c-.3 0-.6.1-.8.4-.2.3-1.1 1-1.1 2.5s1.1 3 1.2 3.2c.1.2 2.1 3.2 5 4.5 1.9.8 2.7.8 3.6.7.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.1-1.4-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") !important; }
  .supplier-card .contact-art.split-art .social-button .contact-label {
    display: block !important;
    font: 700 12px "DM Sans", sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .supplier-card .contact-art.split-art .social-button.instagram .contact-label { color: #c51a69; }
  .supplier-card .contact-art.split-art .social-button.whatsapp .contact-label { color: #079458; }

  .supplier-card .card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-card .social-button { min-width: 0; overflow: hidden; }
  .supplier-card .social-button em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .access-gate { min-height: 100dvh; padding: 16px; }
  .access-card { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 20px; }
  .access-card h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .access-brand { margin-bottom: 20px; }

  .community-mark { pointer-events: none; }
  footer { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 380px) {
  .hero { min-height: 675px; padding-top: 104px; }
  .hero h1 { font-size: 39px; }
  .supplier-card { padding: 16px; }
  .supplier-card h3 { font-size: 21px; }
}