/* ============================================================
   SEDE 2026 — o aviso da nova sede na foto da capa (≥768)
   (02/10/2026) Pedido do dono: "no desktop a foto do escritório está
   muito básica… algo destacando que é novidade: 'Novidade' ao lado,
   'Nova sede em construção'. Do jeito que está ninguém entende nada."
   A legenda "fig. 01 · Nova sede…" (pequena, cinza) virou um aviso:
   etiqueta amarela "Novidade" (o amarelo único do site, #F0BB4A, no
   papel de destaque) + "Nova sede em construção" + Tubarão (SC).
   ⚠️ Sem animação na foto: uma versão em que o prédio "se construía"
   (desenho do projeto → foto subindo do chão) foi REJEITADA no mesmo
   dia ("a animação ficou horrível, remova"). Arquivada em
   scratchpad/sede-obra-arquivada/. Não propor de novo sem ele pedir.
   Carrega depois da capa-2026.css.
   ============================================================ */

@media (min-width: 768px) {
  /* a sombra do pé sobe um pouco mais: agora há um título para ler */
  #hero .hero-panel::after {
    height: 46%;
    background: linear-gradient(0deg,
      rgba(8, 10, 14, 0.9) 0%,
      rgba(8, 10, 14, 0.62) 34%,
      rgba(8, 10, 14, 0) 100%);
  }
  #hero .sede-legenda {
    left: clamp(22px, 2.1vw, 32px);
    right: clamp(22px, 2.1vw, 32px);
    bottom: clamp(22px, 2.1vw, 30px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-sans);
    font-style: normal;
    text-shadow: none;
    color: var(--capa-branco, #fff);
  }
  #hero .sede-tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 12px 6px;
    border-radius: 8px;
    background: #F0BB4A;
    color: #0B0C0F;
    font-family: var(--font-sans);
    font-size: 0.71875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  #hero .sede-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 0.95rem + 1.05vw, 2.25rem);
    line-height: 1.04;
    letter-spacing: -0.022em;
    color: var(--capa-branco, #fff);
    text-wrap: balance;
  }
  #hero .sede-sub {
    margin-top: 9px;
    max-width: 52ch;
    text-wrap: balance;
    font-size: 0.90625rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.74);
  }
}
/* tablet: o cartão é baixo e largo, a legenda fica mais enxuta */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #hero .sede-tag { margin-bottom: 10px; }
  #hero .sede-titulo { font-size: clamp(1.4rem, 1rem + 1.3vw, 1.75rem); }
}