/* ============================================================
   HERO — o problema nº1 do arquivo original era não ter CTA
   nenhum na primeira tela. Aqui a ação principal, a prova
   social e o status de funcionamento ficam acima da dobra.
   ============================================================ */
.hero {
  position: relative;
  min-height: min(88svh, 780px);
  display: grid; align-items: center;
  padding-block: calc(var(--header-h) + var(--sp-3xl)) var(--sp-5xl);
  isolation: isolate;
  overflow: hidden;
}
@media (max-width: 767px) { .hero { min-height: 100svh; } }

.hero__media { position: absolute; inset: 0; z-index: -2; }
/* O <picture> é um wrapper inline por padrão: sem height:100% a
   foto não preenchia o hero em telas estreitas. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

/* Scrim CALIBRADO POR MEDIÇÃO, não a olho.
   A versão anterior era uma vinheta — escurecia as bordas e deixava
   o CENTRO transparente, que é justamente onde o texto fica. O pior
   contraste do "NORDESTINA" dava 1,40:1. Aqui o gradiente radial é
   center-weighted: escuro atrás do texto, transparente nas bordas,
   preservando a foto onde ela aparece.

   O véu linear (que escurecia a foto INTEIRA) caiu para 40% do que
   era — a foto respira. O radial, que fica só atrás do texto,
   continua inteiro: é ele que segura o contraste.

   Pior caso medido sobre esta foto (tools/contraste-hero.py):
     h1 6,18:1 · NORDESTINA 3,92:1 · provas 8,74:1
   Limiares WCAG: 4,5:1 para texto normal, 3:1 para texto grande.

   ⚠️ Trocar a foto do hero invalida esta calibração.
      Rode `python3 tools/contraste-hero.py` de novo. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 46%, rgb(20 8 4 / .86) 0%, rgb(20 8 4 / 0) 100%),
    linear-gradient(to bottom, rgb(20 8 4 / .25) 0%, rgb(20 8 4 / .10) 45%, rgb(20 8 4 / .23) 100%);
}
/* No mobile o recorte cai numa área muito mais clara da foto e o
   hero é mais alto: precisa de scrim próprio.
   Pior caso: h1 7,20:1 · NORDESTINA 3,87:1 */
@media (max-width: 767px) {
  .hero__scrim {
    background:
      radial-gradient(70% 62% at 50% 46%, rgb(20 8 4 / .72) 0%, rgb(20 8 4 / 0) 100%),
      linear-gradient(to bottom, rgb(20 8 4 / .26) 0%, rgb(20 8 4 / .18) 45%, rgb(20 8 4 / .26) 100%);
  }
}

.hero__topo, .hero__base {
  text-align: center; display: grid; justify-items: center; gap: var(--sp-lg);
}
.hero__base { gap: var(--sp-lg); }
/* Desktop: "O Melhor da Cozinha" corrido. Mobile: quebrado em
   "O Melhor" / "da Cozinha", como no lockup de referência. */
.hero__linha { display: inline; }
@media (max-width: 767px) { .hero__linha { display: block; } }
/* Cacto do Figma, acima da linha de apoio */
.hero__rasgo { display: none; }

.hero .cacto { filter: drop-shadow(0 2px 6px rgb(0 0 0 / .45)); margin-bottom: calc(var(--sp-lg) * -1); }
.hero .cacto { width: clamp(30px, 3.2vw, 46px); }

/* No Figma o "NORDESTINA" é ladeado pelo mesmo raio de 3 traços dos
   títulos de seção, em branco. */
.hero h1 .destaque {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
}
.hero h1 .destaque::before, .hero h1 .destaque::after {
  content: ''; flex: none;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA3NyIgd2lkdGg9IjU0IiBoZWlnaHQ9Ijc3IiBmaWxsPSJub25lIj48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NC4wMCwyNC4wMCkgc2NhbGUoLTAuOTIsMC45MikiIGQ9Ik0zLjgxNDdlLTA2IDIxLjU1OTdMNTggMjIuMDU2M0w1NC44OTgyIDBMMy44MTQ3ZS0wNiAyMS41NTk3WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTAuMDAsNTIuMDApIHNjYWxlKC0wLjkyLDAuOTIpIiBkPSJNNS41MzEzMWUtMDUgMEwyNy42NyAyOC4yMTI3TDI4Ljc1MSAxNy43NDAxTDUuNTMxMzFlLTA1IDBaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS4wMCwwLjAwKSBzY2FsZSgtMC45MiwwLjkyKSIgZD0iTS00LjE5NjE3ZS0wNSAzMC4zOTVMMzUuNjc4MyAxMi43NDI2TDMxLjE2MzggMEwtNC4xOTYxN2UtMDUgMzAuMzk1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+") center / contain no-repeat;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA3NyIgd2lkdGg9IjU0IiBoZWlnaHQ9Ijc3IiBmaWxsPSJub25lIj48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NC4wMCwyNC4wMCkgc2NhbGUoLTAuOTIsMC45MikiIGQ9Ik0zLjgxNDdlLTA2IDIxLjU1OTdMNTggMjIuMDU2M0w1NC44OTgyIDBMMy44MTQ3ZS0wNiAyMS41NTk3WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTAuMDAsNTIuMDApIHNjYWxlKC0wLjkyLDAuOTIpIiBkPSJNNS41MzEzMWUtMDUgMEwyNy42NyAyOC4yMTI3TDI4Ljc1MSAxNy43NDAxTDUuNTMxMzFlLTA1IDBaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS4wMCwwLjAwKSBzY2FsZSgtMC45MiwwLjkyKSIgZD0iTS00LjE5NjE3ZS0wNSAzMC4zOTVMMzUuNjc4MyAxMi43NDI2TDMxLjE2MzggMEwtNC4xOTYxN2UtMDUgMzAuMzk1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+") center / contain no-repeat;
  height: .62em; aspect-ratio: 54 / 77;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / .4));
}
.hero h1 .destaque::after { transform: scaleX(-1); }
@media (max-width: 479px) {
  .hero h1 .destaque::before, .hero h1 .destaque::after { height: .5em; }
}
.hero__eyebrow { color: var(--c-mostarda); text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
 /* No Figma a primeira linha é a sans do corpo e só "NORDESTINA"
    usa a display. Manter essa diferença é o que dá o contraste. */
.hero h1 {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.1rem + 3.1vw, 3.25rem);
  letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgb(0 0 0 / .45);
}
.hero h1 .destaque {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  text-transform: uppercase;
  color: var(--c-mostarda);
  /* min() garante que a palavra + os dois raios caibam em
     qualquer largura, inclusive 320px. */
  font-size: min(1.9em, 13vw);
  line-height: .98;
  letter-spacing: .005em;
  margin-top: .08em;
}
/* Abaixo de 480px usa o lockup empilhado que já existia solto
   no canvas do Figma (NOR / DES / TINA). */
/* Desktop e tablet: "NORDESTINA" inteiro numa linha.
   Mobile: empilhado em NOR / DES / TINA, como o lockup solto que
   já existia no canvas do Figma. */
/* display:contents faz os três pedaços voltarem a ser um texto só —
   sem isso o gap do flex separava "NOR DES TINA". */
.hero h1 .destaque b { font-weight: inherit; display: contents; }
@media (max-width: 767px) {
  /* "O Melhor / da Cozinha" na mesma largura do "NOR": medido a
     280px, "da Cozinha" dava 159px contra 135px do "NOR" — fator
     0,849. Como os dois tamanhos saem do mesmo par de expressões,
     o fator vale em qualquer largura desta faixa. */
  .hero h1 { font-size: calc(clamp(1.75rem, 1.1rem + 3.1vw, 3.25rem) * .849); }
  /* "O Melhor / da Cozinha" exatamente no meio entre o cacto e o
     NORDESTINA. Medido: folga de cima 3,0px, de baixo 17,1px — a
     entrelinha e a margem do .destaque jogavam o bloco para cima.
     Zerando a margem do .destaque a folga de baixo cai para 11,3px,
     e 0,35em no h1 (= 8,3px) leva a de cima ao mesmo valor. Em em,
     porque as duas folgas acompanham o corpo do texto. */
  .hero h1 { margin-top: .35em; }
  .hero h1 .destaque { margin-top: 0; }
  .hero h1 .destaque {
    flex-direction: column; gap: 0;
    /* 2.6em / 0.849 = 3.063em: o NORDESTINA fica EXATAMENTE do
       tamanho de antes, apesar de o h1 ter encolhido.
       26vw foi medido num celular de 390px (= 101px por linha).
       Sem o teto de 7.5rem, num tablet de 724px cada linha ia a
       188px e o painel inteiro inflava para 823px de altura. */
    font-size: min(3.063em, 26vw, 7.5rem); line-height: .86;
  }
  .hero h1 .destaque b { display: block; }
  /* Os raios ladeiam a LINHA DO MEIO ("des"), não o bloco inteiro.
     Ancorados no bloco, eles encostavam na borda da linha mais
     larga ("tina") e ficavam a 26px da linha do meio, que é onde o
     olho os procura. Presos ao próprio "des", a distância é sempre
     a mesma. */
  .hero h1 .destaque { width: fit-content; margin-inline: auto; }
  .hero h1 .destaque::before, .hero h1 .destaque::after { display: none; }
  .hero h1 .destaque b:nth-of-type(2) { position: relative; }
  .hero h1 .destaque b:nth-of-type(2)::before,
  .hero h1 .destaque b:nth-of-type(2)::after {
    content: ''; position: absolute;
    top: 50%; translate: 0 -50%;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA3NyIgd2lkdGg9IjU0IiBoZWlnaHQ9Ijc3IiBmaWxsPSJub25lIj48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NC4wMCwyNC4wMCkgc2NhbGUoLTAuOTIsMC45MikiIGQ9Ik0zLjgxNDdlLTA2IDIxLjU1OTdMNTggMjIuMDU2M0w1NC44OTgyIDBMMy44MTQ3ZS0wNiAyMS41NTk3WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTAuMDAsNTIuMDApIHNjYWxlKC0wLjkyLDAuOTIpIiBkPSJNNS41MzEzMWUtMDUgMEwyNy42NyAyOC4yMTI3TDI4Ljc1MSAxNy43NDAxTDUuNTMxMzFlLTA1IDBaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS4wMCwwLjAwKSBzY2FsZSgtMC45MiwwLjkyKSIgZD0iTS00LjE5NjE3ZS0wNSAzMC4zOTVMMzUuNjc4MyAxMi43NDI2TDMxLjE2MzggMEwtNC4xOTYxN2UtMDUgMzAuMzk1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+") center / contain no-repeat;
            mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA3NyIgd2lkdGg9IjU0IiBoZWlnaHQ9Ijc3IiBmaWxsPSJub25lIj48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NC4wMCwyNC4wMCkgc2NhbGUoLTAuOTIsMC45MikiIGQ9Ik0zLjgxNDdlLTA2IDIxLjU1OTdMNTggMjIuMDU2M0w1NC44OTgyIDBMMy44MTQ3ZS0wNiAyMS41NTk3WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTAuMDAsNTIuMDApIHNjYWxlKC0wLjkyLDAuOTIpIiBkPSJNNS41MzEzMWUtMDUgMEwyNy42NyAyOC4yMTI3TDI4Ljc1MSAxNy43NDAxTDUuNTMxMzFlLTA1IDBaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS4wMCwwLjAwKSBzY2FsZSgtMC45MiwwLjkyKSIgZD0iTS00LjE5NjE3ZS0wNSAzMC4zOTVMMzUuNjc4MyAxMi43NDI2TDMxLjE2MzggMEwtNC4xOTYxN2UtMDUgMzAuMzk1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+") center / contain no-repeat;
    height: .30em; aspect-ratio: 54 / 77;
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / .4));
  }
  .hero h1 .destaque b:nth-of-type(2)::before { right: 100%; margin-right: .08em; }
  .hero h1 .destaque b:nth-of-type(2)::after  { left: 100%;  margin-left: .08em; transform: scaleX(-1); }
}
.hero__sub {
  color: var(--c-areia); font-size: var(--fs-lead);
  max-width: 34ch; text-shadow: 0 1px 6px rgb(0 0 0 / .6);
}
.hero__acoes {
  display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: center;
  margin-top: var(--sp-xs);
}

/* Barra de reforço — o que faz alguém decidir pedir */
.hero__provas {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg);
  justify-content: center; align-items: center;
  margin-top: var(--sp-sm);
  font-size: var(--fs-sm); color: var(--c-areia);
  text-shadow: 0 1px 5px rgb(0 0 0 / .7);
}
.hero__provas > * {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: 6px var(--sp-sm); border-radius: 999px;
  background: rgb(20 8 4 / .55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
}
.hero__provas a {
  color: inherit; text-underline-offset: 3px;
  /* gap explícito: um container flex descarta o espaço em branco
     entre os filhos e "4,8 de 5" colava em "nas avaliações". */
  display: inline-flex; align-items: center; gap: .3em;
  min-height: var(--tap-min); padding-inline: var(--sp-2xs);
}

/* Status: cor + ícone + texto. Nunca só cor. */
.status {
  padding: 6px var(--sp-sm); border-radius: 999px;
  background: rgb(20 8 4 / .55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
  font-weight: 600;
}
.status__ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c-cinza); }
.status[data-aberto="true"]  .status__ponto { background: #6BE07A; }
.status__icone { width: 14px; height: 14px; fill: currentColor; flex: none; }

.hero__estrelas { color: var(--c-mostarda); letter-spacing: .08em; }

/* #18 — indicador de rolagem: 3 repetições e para */
.scroll-cue {
  position: absolute; left: 50%; bottom: var(--sp-lg); translate: -50% 0;
  width: 28px; height: 28px; color: var(--c-areia);
  animation: desce 1.2s var(--ease-inout) 1.2s 3;
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
}
.scroll-cue.is-on { opacity: .8; }
.scroll-cue svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }


/* ============================================================
   MOBILE — o hero deixa de ser foto de fundo atrás de tudo e vira
   um PAINEL de foto delimitado: faixa areia no topo (onde fica o
   cabeçalho), rasgo, foto com o título por cima, rasgo, e os CTAs
   descendo para o areia. Segue o print de referência.
   ============================================================ */
@media (max-width: 767px) {
  /* Scrim leve: no mobile a foto é o assunto, não um fundo.
     Calibrado para o texto passar sem apagar a comida. */
  .hero__scrim {
    background:
      radial-gradient(50% 52% at 50% 52%, rgb(20 8 4 / .95) 0%, rgb(20 8 4 / 0) 100%),
      linear-gradient(to bottom, rgb(20 8 4 / .12) 0%, rgb(20 8 4 / .09) 45%, rgb(20 8 4 / .14) 100%);
  }
  .hero {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0;
    padding-block: 0 var(--sp-3xl);
    background: var(--c-areia);
    overflow: visible;
  }
  /* foto, scrim, rasgos e título dividem a MESMA célula da grade */
  .hero__media, .hero__scrim, .hero__topo, .hero__rasgo {
    grid-row: 1; grid-column: 1;
  }
  /* z-index precisa voltar ao positivo: no desktop o media fica em
     -2 (atrás de tudo), mas aqui o .hero tem fundo próprio e um
     filho negativo some atrás dele. */
  .hero__media, .hero__scrim { position: relative; inset: auto; }
  /* sem o stretch a div vazia do scrim fica com 0 de altura e não
     escurece nada — o contraste medido deixava de valer */
  .hero__scrim { align-self: stretch; }
  /* O modelo (429x470) pede altura 1,095x a largura: a 390px dá
     427px, que é o certo. Duas armadilhas já caíram aqui:
     - só a proporção, sem teto: num viewport de 724px o painel
       virava 793px de altura, quase uma tela inteira de foto;
     - proporção + max-height: quando o teto pegava, a caixa
       mantinha a proporção ENCOLHENDO A LARGURA (456px num
       viewport de 724px), e sobrava areia dos dois lados.
     - teto em svh: numa janela baixa a foto virava uma tira fina.
     Por isso: largura sempre 100%, altura mínima calculada e
     presa em 500px, e o object-fit:cover cuida do recorte. O
     align-self:stretch deixa a foto acompanhar o título quando
     este precisa de mais espaço que o mínimo. */
  .hero__media {
    align-self: stretch;
    min-height: min(109.5vw, 500px);
    overflow: hidden;
    z-index: 0;
  }
  /* height:100% num pai que só tem min-height não resolve: a foto
     caía para a altura intrínseca e ERA ELA quem definia o painel
     (823px num viewport de 724px). Tirando o <picture> do fluxo,
     quem manda na altura passa a ser o título + o botão, e a foto
     só preenche o que sobrar. */
  .hero__media picture { position: absolute; inset: 0; }
  .hero__scrim { z-index: 1; }

  .hero__topo {
    position: relative; z-index: 3;
    align-self: center;
    padding-block: var(--sp-2xl);
  }
  /* O botão desce com o título, dentro do painel de foto. O gap do
     .hero__topo já dá 24px; a margem negativa encosta mais, porque
     o line-height .86 do display deixa folga visual sob o "TINA". */
  .hero__topo .hero__acoes { margin-top: var(--sp-2xs); }
  .hero__base { grid-row: 2; padding-top: var(--sp-2xl); }

  /* os dois rasgos fecham o painel em cima e embaixo */
  .hero__rasgo {
    display: block; width: 100%; z-index: 2;
    height: clamp(20px, 2.4vw, 36px);
  }
  /* O path #rasgo-hero preenche de areia a METADE DE BAIXO da sua
     caixa. Para a borda DE CIMA do painel isso é o lado errado: o
     areia ficava embaixo da linha rasgada e sobrava uma tira de
     foto ACIMA dela, solta, parecendo um frame. Quem precisa do
     scaleY(-1) é o rasgo de cima; o de baixo usa o path como veio. */
  .hero__rasgo--topo { align-self: start; transform: scaleY(-1); }
  .hero__rasgo--base { align-self: end; }

  /* no areia o indicador de rolagem sai de cena */
  .scroll-cue { display: none; }
}

/* Sobre areia, o texto de apoio do hero troca de cor: o par escuro
   que servia por cima da foto some no fundo claro. */
@media (max-width: 767px) {
  .hero__provas { color: var(--c-texto); text-shadow: none; }
  .hero__provas > * {
    background: var(--c-creme);
    box-shadow: inset 0 0 0 1px #E0CDAE;
  }
  .hero__provas a { color: var(--c-tijolo); }
  .hero__estrelas { color: var(--c-estrela); }
  .status[data-aberto="true"] .status__ponto { background: var(--c-verde); }
  .btn--secundario { --btn-fg: var(--c-tijolo); }
  .btn--secundario:hover { --btn-fg: var(--c-mostarda); }
}