/* Hero escura da Home e do Sobre (19/10/2026, scripts/hero_escura_fixas.py). Mesmo visual da hero da página de
   tratamento (tratamento-de-gota/assets/tratamento.css), com classes próprias "he-". */
.he-crumb { border-bottom: 1px solid var(--line); background: #f4f7f5; }
.he-crumb ol { padding: 11px 0; }
.he-crumb li + li::before { content: "\203A"; }
.he-crumb [aria-current="page"] { color: var(--ink); }

.he-hero { position: relative; overflow: hidden; color: var(--white); background: #121413; }
.he-hero::after { /* transição suave para a seção branca de baixo */
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 28px;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}
.he-grid { position: relative; z-index: 1; display: flex; flex-direction: column; }
.he-copy { min-width: 0; }
.he-photo { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: #121413; }
.he-photo picture { position: absolute; inset: 0; display: block; }
.he-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.he-photo::after { /* bordas esmaecidas: a foto não vira uma "caixa" */
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, #121413 0%, rgba(18, 20, 19, 0) 16%, rgba(18, 20, 19, 0) 84%, #121413 100%),
    linear-gradient(180deg, #121413 0%, rgba(18, 20, 19, 0) 9%, rgba(18, 20, 19, 0) 86%, #121413 100%);
}
.he-badge {
  display: inline-block;
  margin: 0 0 20px;
  padding: 7px 14px;
  border: 1px solid rgba(34, 201, 90, .55);
  border-radius: 999px;
  color: #7ee79d;
  background: rgba(34, 201, 90, .14);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.he-hero h1 { max-width: none; margin: 0 0 20px; color: var(--white); }
.he-accent { color: var(--green); }
.he-hero .he-sub { max-width: none; margin: 0; color: #dde4df; font-size: 1.15rem; line-height: 1.65; }
.he-hero .portal-actions { margin-top: 30px; }
.he-hero .he-note { max-width: none; margin: 22px 0 0; color: #c9d2cc; font-size: .95rem; line-height: 1.6; }
.he-hero .he-note strong { color: var(--white); }
.he-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.he-chips > span {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #eef3ef;
  background: rgba(255, 255, 255, .09);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Computador (>= 1024 px): texto 55% e foto 45%, mesma altura, centralizados */
@media (min-width: 1024px) {
  .he-grid { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); column-gap: 48px; align-items: stretch; padding-top: 60px; padding-bottom: 60px; }
  .he-copy { align-self: center; }
  .he-photo { min-height: 380px; }
  .he-photo img { object-position: 20% 20%; }
  /* Home: coluna de texto em 60% (título em 3 linhas e subtítulo em 4 a partir de 1280 px; pedido de 19/10/2026) */
  .he-home .he-grid { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
}

/* Celular e tablet (< 1024 px): foto no topo, de ponta a ponta, e texto embaixo */
@media (max-width: 1023px) {
  .he-photo { order: -1; align-self: center; width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); aspect-ratio: 1017 / 680; border-radius: 0; }
  .he-photo img { object-position: 50% 88%; } /* 21/10/2026: menos fundo acima da cabeça */
  .he-photo::after {
    background:
      linear-gradient(90deg, #121413 0%, rgba(18, 20, 19, 0) 8%, rgba(18, 20, 19, 0) 92%, #121413 100%),
      linear-gradient(180deg, #121413 0%, rgba(18, 20, 19, 0) 10%, rgba(18, 20, 19, .35) 62%, #121413 100%);
  }
  .he-grid { padding-bottom: 52px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .he-photo { align-self: center; width: 560px; margin-inline: 0; }
}
/* tipografia-tratamento.css força o texto corrido com !important (main p = 1,05 rem); aqui valem os valores do topo
   da página de tratamento */
main .he-hero .he-badge { font-size: .78rem !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: .06em !important; }
main .he-hero .he-sub { font-size: 1.15rem !important; line-height: 1.65 !important; }
main .he-hero .he-note { font-size: .9rem !important; line-height: 1.6 !important; }
@media (max-width: 760px) {
  main .he-hero .he-sub { font-size: 1.05rem !important; }
}
@media (max-width: 440px) {
  .he-hero .portal-actions .button { width: 100%; }
}