/* ========================================================================
   BRUM ESTHETICS - home curta (direcao de arte, 11/10/2026)
   docs/design.md §2-§4 + ADR-0016. Carregada DEPOIS de site.css e v7.css,
   escopada em body.hm. Retrato centralizado + linha de marca + H1 + 1 CTA,
   e as sete portas. Sem faixa, sem fundadora, sem combos, sem depoimentos.
   Espaco vertical so pelos tokens --sec-* (v7.css); gap/padding de
   componente so na escala 4/8/12/16/24/32/48.
   Cores so de token: --linho, --sala, --sala-fundo, --tinta, --tinta-suave,
   --gold-ink, --iris. O --dourado nunca e texto.
   ======================================================================== */

/* A nav e fixa: a folga de 64px mora no <main>, nao nas secoes. */
body.hm .hm-main { padding-top: var(--sl-nav-h); }

/* ---- Dobra ------------------------------------------------------------- */
.hm-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-block: var(--sec-xs) var(--sec-s);
  padding-inline: var(--sl-gut);
  /* luz de estudio: so tons da marca, sem desenho (design.md §1.6) */
  background: radial-gradient(ellipse 70% 60% at 50% 38%, var(--linho) 0%, var(--sala) 70%);
}
.hm-portrait {
  width: 342px; max-width: 100%; aspect-ratio: 5 / 4; align-self: center; margin-inline: auto;
  overflow: hidden; border-radius: 2px; background: var(--sala-fundo);
}
/* Nunca acima do nativo: o arquivo servido (390/780/1440/1860) e sempre >= a caixa. */
.hm-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-brand {
  margin: var(--space-md) 0 0;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold-ink);
}
.hm-hero h1 {
  margin: var(--space-2xs) 0 0;
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  font-variation-settings: "wdth" 82, "wght" 500;
  font-weight: 500; line-height: 1.02; letter-spacing: -0.03em;
  color: var(--tinta); text-wrap: balance;
}
.hm-sub {
  margin: var(--space-sm) 0 0; max-width: 30ch;
  font-size: 1.0625rem; line-height: 1.5; color: var(--tinta-suave);
}
.hm-cta { display: flex; width: 100%; justify-content: center; margin-top: var(--space-md); }
.hm-cta .sl-btn { width: 100%; min-height: 52px; }
@media (min-width: 768px) {
  .hm-portrait { width: 480px; }
  .hm-sub { max-width: 44ch; }
  .hm-cta .sl-btn { width: auto; min-width: 240px; }
  /* Fatia 3/3 (§2): cartaz editorial. Retrato fica em 480 (ADR-0016); quem ocupa
     a largura e a tipografia. Uma composicao so, centrada, com 48px das portas
     aparecendo embaixo. O H1 maior NAO ganha animacao (candidato a LCP). */
  .hm-hero { min-height: min(calc(100svh - var(--sl-nav-h) - 48px), 960px); justify-content: center; }
  .hm-brand { margin-top: var(--space-lg); }
  .hm-hero h1 {
    font-size: clamp(3.75rem, 1.5rem + 4.4vw, 6.5rem);
    line-height: 0.98; letter-spacing: -0.035em; margin-top: var(--space-xs);
  }
  .hm-sub { font-size: 1.1875rem; margin-top: var(--space-md); }
  .hm-cta { margin-top: var(--space-lg); }
}

/* ---- As oito portas ---------------------------------------------------- */
.hm-doors { padding-block: 0 var(--sec-l); }
.hm-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-xs); row-gap: var(--space-lg);
}
.hm-door {
  display: flex; flex-direction: column; align-items: stretch; text-align: left; min-width: 0;
  color: var(--tinta); text-decoration: none; position: relative;
}
.hm-door--drainage, .hm-door--lashes, .hm-door--massage, .hm-door--prices { grid-column: 1 / -1; }
.hm-frame {
  display: block; position: relative; overflow: hidden; flex: none; width: 100%;
  border-radius: 2px; background: var(--sala-fundo);
}
.hm-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* mobile: alturas por proporcao (390: 350 de largura util) */
.hm-door--drainage .hm-frame { aspect-ratio: 350 / 360; }
.hm-door--skin .hm-frame, .hm-door--waxing .hm-frame { aspect-ratio: 3 / 4; }
.hm-door--lashes .hm-frame { aspect-ratio: 350 / 150; }
.hm-door--bridal .hm-frame, .hm-door--forhim .hm-frame { aspect-ratio: 4 / 5; }
.hm-door--massage .hm-frame { aspect-ratio: 350 / 220; } /* faixa baixa: fecha o par bridal/forhim sem buraco no 2-col */
.hm-door--massage img { object-position: 50% 62%; }
.hm-door--skin img     { object-position: 50% 45%; }
.hm-door--lashes img   { object-position: 50% 14%; }
.hm-door--drainage img { object-position: 50% 30%; }

.hm-copy {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-xs);
  align-items: baseline; padding-top: var(--space-xs);
}
.hm-name {
  grid-column: 1; font-family: var(--font-sans); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.25; color: var(--tinta);
}
.hm-line {
  grid-column: 1; margin-top: var(--space-3xs);
  font-size: 0.875rem; line-height: 1.4; color: var(--tinta-suave); max-width: 36ch;
}
.hm-arrow {
  grid-column: 2; grid-row: 1; color: var(--iris); font-size: 1.25rem; line-height: 1;
  transition: transform 220ms var(--ease-out);
}
.hm-door:hover .hm-arrow, .hm-door:focus-visible .hm-arrow { transform: translateX(4px); }
.hm-door:hover .hm-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hm-door:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }

/* Prices: a unica sem foto, so tipo */
.hm-door--prices {
  background: var(--sala-fundo); border-radius: 2px;
  padding: var(--space-md); gap: var(--space-2xs); justify-content: space-between;
}
.hm-door--prices .hm-name { color: var(--gold-ink); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; }
.hm-figure {
  display: block; margin-top: var(--space-2xs);
  font-family: var(--font-display); font-variation-settings: "wdth" 88, "wght" 600;
  font-size: 3.5rem; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.hm-door--prices .hm-copy { padding-top: 0; }
.hm-door--prices .hm-line { color: var(--tinta-suave); }

/* ---- Desktop: 12 colunas, 1 grande + 2 empilhadas / faixa / trio 4+5+3 ---- */
@media (min-width: 768px) {
  .hm-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-md); row-gap: var(--space-xl); }
  .hm-door--drainage { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .hm-door--skin     { grid-column: 8 / span 5; grid-row: 1; }
  .hm-door--waxing   { grid-column: 8 / span 5; grid-row: 2; }
  .hm-door--lashes   { grid-column: 1 / -1; grid-row: 3; }
  /* linha 4: trio 4+4+4 (era 6+6); a massagem fecha a linha, nunca sozinha */
  .hm-door--bridal   { grid-column: 1 / span 4; grid-row: 4; }
  .hm-door--forhim   { grid-column: 5 / span 4; grid-row: 4; }
  .hm-door--massage  { grid-column: 9 / span 4; grid-row: 4; }
  /* Precos: rodape do indice, faixa de largura inteira e baixa (fatia 3/3, §3) */
  .hm-door--prices   { grid-column: 1 / -1; grid-row: 5; justify-content: flex-start; }
  .hm-door--prices .hm-line { max-width: none; }
  .hm-door--drainage .hm-frame { aspect-ratio: auto; min-height: 480px; flex: 1 1 auto; }
  .hm-door--skin .hm-frame, .hm-door--waxing .hm-frame { aspect-ratio: 5 / 3; }
  .hm-door--lashes .hm-frame { aspect-ratio: 1120 / 260; }
  .hm-door--bridal .hm-frame, .hm-door--forhim .hm-frame, .hm-door--massage .hm-frame { aspect-ratio: auto; min-height: 400px; flex: 1 1 auto; }
  .hm-door--prices { padding: var(--space-lg) var(--space-xl); }
  .hm-figure { font-size: 3rem; }
}
@media (min-width: 1100px) {
  .hm-figure { font-size: 3.5rem; }
}

/* ---- Estado inicial do movimento nao existe no CSS: o estado final e o que
   esta aqui; o home.js anima por .from() so sem prefers-reduced-motion. ---- */

/* Rodape: mesma escala dos tokens de secao (24 no celular, 32 no desktop). */
body.hm .simple-footer { padding-block: var(--sec-xs); }

/* O site fixa `align-items:center` em links (v7.css/site.css); a porta precisa esticar. */
body.v7.hm main .hm-grid > a.hm-door:not(.sl-row):not(.sl-btn) { display: flex; align-items: stretch; }