/* ==========================================================================
   Hero — cartao branco sobre a foto desfocada (o fundo vivo, .backdrop).
   Dentro do cartao a mesma foto aparece nitida, na coluna da direita.

   Regra de ouro desta secao: o hero inteiro cabe na janela, sem rolagem.
   Para isso, todas as medidas verticais sao limitadas tanto pela largura
   (vw) quanto pela ALTURA (vh) da janela — e nao apenas por breakpoints.
   ========================================================================== */

.hero {
  --hero-pad: clamp(1.125rem, min(0.4rem + 4.4vw, 5vh), 4.5rem);
  --hero-gap: clamp(0.625rem, min(2.4vw, 2.1vh), 1.625rem);

  position: relative;
  /* Contexto proprio para o fundo vivo (.backdrop) ficar atras do cartao. */
  isolation: isolate;
  padding: var(--hero-top) var(--shell-pad) var(--shell-pad);
}

.hero__card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  min-height: var(--hero-fill);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Halo quente quase imperceptivel, recortado pelo raio do cartao. */
.hero__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hero__glow::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -8%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 68%);
}

/* --------------------------------------------------------------------------
   Grade principal
   -------------------------------------------------------------------------- */
.hero__main {
  position: relative;
  display: grid;
  /* Em coluna unica o bloco fica centrado: a sobra se divide igualmente
     em cima e embaixo, em vez de virar um vazio so no topo.
     No layout de duas colunas isso passa a "end", como na referencia. */
  align-content: center;
  gap: calc(var(--hero-gap) * 1.6);
  padding: var(--hero-pad);
  min-height: 0;
}

.hero__content {
  display: grid;
  align-content: end;
  gap: var(--hero-gap);
  min-width: 0;
  container-type: inline-size;
}

/* --------------------------------------------------------------------------
   Eyebrow
   -------------------------------------------------------------------------- */
.hero__eyebrow {
  display: grid;
  gap: 0.0625rem;
}

.hero__eyebrow span {
  opacity: 0;
  animation: rise-in var(--dur-slow) var(--ease-out) forwards;
}

.hero__eyebrow span:nth-child(1) {
  animation-delay: 200ms;
}

.hero__eyebrow span:nth-child(2) {
  animation-delay: 280ms;
}

/* --------------------------------------------------------------------------
   Headline — revelacao linha a linha
   -------------------------------------------------------------------------- */
.hero__headline {
  margin-left: -0.04em; /* alinhamento optico da haste */
}

.hero__line {
  display: block;
  overflow: hidden;
  padding-block: 0.05em 0.16em;
  margin-block: -0.05em -0.16em;
}

.hero__line-inner {
  display: block;
  transform: translate3d(0, 110%, 0);
  animation: line-rise var(--dur-reveal) var(--ease-out) forwards;
  will-change: transform;
}

.hero__line:nth-of-type(1) .hero__line-inner {
  animation-delay: 320ms;
}

.hero__line:nth-of-type(2) .hero__line-inner {
  animation-delay: 410ms;
}

.hero__line:nth-of-type(3) .hero__line-inner {
  animation-delay: 500ms;
}

/* --------------------------------------------------------------------------
   Subtitulo e acoes
   -------------------------------------------------------------------------- */
.hero__subhead {
  max-width: 42ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-70);
  opacity: 0;
  animation: rise-in var(--dur-slow) var(--ease-out) 620ms forwards;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  opacity: 0;
  animation: rise-in var(--dur-slow) var(--ease-out) 720ms forwards;
}

/* Quando a coluna de texto e estreita, os dois botoes dividem a mesma
   linha em vez de quebrar — uma linha extra custa ~50px de altura, que e
   exatamente o que faria o hero passar da janela em celular e em paisagem.
   A decisao depende da largura da COLUNA, nao da tela: por isso container query. */
@container (max-width: 26rem) {
  .hero__actions .btn {
    /* `1 1 auto` e nao `1 1 0`: a base e a largura natural de cada rotulo.
       Com base 0 os dois botoes ficariam do MESMO tamanho, o que sufoca
       "Falar com um contador" e desperdicia espaco no rotulo curto. */
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0.625rem;
    font-size: 0.8125rem;
  }

  .hero__actions .btn__icon {
    display: none;
  }
}

/* Piso de 320px: os dois rotulos somados nao cabem em uma linha e empilhar
   custaria mais altura do que a janela tem. Fica a acao principal, em largura
   total. Os servicos continuam a um toque no menu e logo abaixo na pagina. */
@container (max-width: 17.5rem) {
  .hero__actions .btn--ghost {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Objeto da direita — a foto nitida ocupando a coluna, com o painel de
   rotina em vidro sobre a parte calma dela. Fora do cartao a mesma foto esta
   desfocada: o cartao vira a lente que poe a cena em foco.
   -------------------------------------------------------------------------- */
.hero__visual {
  position: relative;
  display: grid;
  gap: var(--hero-gap);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Foto. No celular e uma faixa no topo do cartao; no desktop preenche a
   coluna inteira, da altura do texto.
   -------------------------------------------------------------------------- */
.hero__photo {
  /* O zoom de entrada da moldura .media e trocado pelo `photo-settle` da
     imagem, para nao somar dois movimentos de escala. */
  --img-scale: 1;

  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 7;
  /* Faixa curta: a altura e limitada pela janela, nunca so pela largura. */
  max-height: clamp(7rem, 22vh, 12rem);
  opacity: 0;
  /* Entra desfocada e poe em foco: o mesmo gesto do fundo para o cartao. */
  animation: panel-in var(--dur-reveal) var(--ease-out) 300ms forwards;
}

.hero__photo-img {
  /* O ponto que nao pode sair do quadro vem do catalogo (--focus). */
  object-position: var(--focus, 50% 40%);
  scale: 1.1;
  /* So o assentar da entrada; a foto nao segue o ponteiro. */
  animation: photo-settle 2400ms var(--ease-out) 300ms forwards;
}

/* Legenda em vidro sobre a foto. Mesmo chip de status do painel, mais o
   dado que o badge antigo carregava. */
.photo-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: grid;
  gap: 0.0625rem;
  padding: 0.5rem 0.875rem 0.5625rem;
  border-radius: 0.75rem;
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-md);
  opacity: 0;
  animation: rise-in var(--dur-slow) var(--ease-out) 900ms forwards;
}

.photo-tag__v {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* O assentar da foto tem duracao propria (nao segue os tokens), entao pede
   o seu proprio desligamento. */
@media (prefers-reduced-motion: reduce) {
  .hero__photo-img {
    scale: 1;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Painel de rotina — construido em codigo
   -------------------------------------------------------------------------- */

.panel {
  position: relative;
  display: grid;
  gap: clamp(0.625rem, min(1.6vw, 1.5vh), 1.125rem);
  padding: clamp(0.75rem, min(1.8vw, 1.7vh), 1.375rem);
  border-radius: var(--radius-panel);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  opacity: 0;
  animation: panel-in var(--dur-reveal) var(--ease-out) 380ms forwards;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel__cycle {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-50);
}

.panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, min(0.9rem + 1.1vw, 2.4vh), 1.4375rem);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: calc(-0.028em * var(--track-display));
}

.panel__list {
  display: grid;
  gap: clamp(0.1875rem, 0.6vh, 0.375rem);
}

/* Revelacao item a item, de cima para baixo e sem pressa:
   cada linha entra 320ms depois da anterior. */
.panel__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: clamp(0.4375rem, 1.1vh, 0.6875rem) 0.75rem;
  border-radius: 0.625rem;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition:
    opacity var(--dur-row) var(--ease-out),
    transform var(--dur-row) var(--ease-out);
}

.panel.is-live .panel__row {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: calc(var(--i) * var(--row-stagger));
}

.panel__row-label {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-90);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel__row-dept {
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   Faixa de prova no rodape do cartao
   -------------------------------------------------------------------------- */
.hero__proof {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(1.25rem, 5vw, 4rem);
  padding: clamp(0.75rem, min(2.4vw, 2vh), 1.625rem) var(--hero-pad);
  border-top: 1px solid var(--line);
}

.hero__proof::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left;
  transform: scaleX(0);
  animation: rule-grow var(--dur-reveal) var(--ease-out) 820ms forwards;
}

.hero__proof-item {
  display: grid;
  gap: 0.0625rem;
  min-width: 0;
  opacity: 0;
  animation: rise-in var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(880ms + var(--i) * 80ms);
}

.hero__proof-value {
  font-family: var(--font-display);
  font-size: clamp(1rem, min(0.95rem + 0.85vw, 2.2vh), 1.4375rem);
  font-weight: var(--fw-display-strong);
  line-height: 1.1;
  letter-spacing: calc(-0.035em * var(--track-display));
  white-space: nowrap;
}

.hero__proof-label {
  font-size: var(--fs-micro);
  line-height: 1.3;
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   Celular: a foto abre o cartao, como capa; o texto vem em seguida e o
   painel fecha. A .hero__visual deixa de gerar caixa para os dois filhos
   entrarem na grade principal, cada um no seu lugar.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .hero__visual {
    display: contents;
  }

  /* Capa: a foto sangra ate a borda do cartao, sem moldura interna, e o
     raio de cima e o do proprio cartao. Puxada pela margem negativa, ela
     ocupa o respiro do topo em vez de somar altura. */
  .hero__photo {
    order: -1;
    width: auto;
    margin: calc(-1 * var(--hero-pad)) calc(-1 * var(--hero-pad)) 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  /* A capa se dissolve no branco do cartao, sem linha de corte. */
  .hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    /* So o ultimo quarto se dissolve: um degrade longo lia como vazio entre
       a foto e o texto. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 76%, var(--surface) 100%);
    pointer-events: none;
  }
}

/* Celular alto (a foto so existe a partir de 47rem de altura, ver abaixo):
   a sobra vertical do cartao, que antes se dividia em cima e embaixo do
   bloco, vira foto. A capa cresce ate onde a janela deixar e nunca empurra
   o resto: o piso e o mesmo da faixa fixa de antes. */
@media (max-width: 47.99rem) and (min-height: 47rem) {
  .hero__main {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
  }

  /* `contain: size` zera a altura natural da foto na conta da linha: sem
     isso a imagem (3:2) entraria com a propria altura e empurraria o cartao
     para fora da janela. Assim a linha 1fr so reparte a sobra, e a foto
     estica ate preencher a linha inteira, sem vao branco ate o texto. */
  .hero__photo {
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    contain: size;
    min-height: clamp(7rem, 22vh, 12rem);
    max-height: none;
  }
}

/* --------------------------------------------------------------------------
   Compactacao mobile — menos elementos, mesma mensagem
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .panel__title,
  .panel__row:nth-child(n + 5) {
    display: none;
  }

  .hero__proof-label {
    display: none; /* no celular, so o dado — sem ruido */
  }

  .hero__proof {
    gap: 1.25rem;
  }
}

/* Celular pequeno: tres rotinas ja comunicam a esteira sem alongar o card,
   e a linha de apoio (as seis areas) desce um degrau para caber em tres
   linhas sem empurrar o painel para fora da janela. */
@media (max-width: 30rem) {
  .panel__row:nth-child(n + 4) {
    display: none;
  }

  .hero__subhead {
    font-size: var(--fs-sm);
    line-height: 1.45;
  }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
/* Tablet: nao ha altura para foto em cima do painel (a faixa de 21:9
   custaria ~250px e o cartao sairia da janela), entao os dois ficam lado a
   lado abaixo do texto — a foto vira um tile vertical, da altura do painel,
   e o hero nao cresce um pixel. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .hero__visual {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: stretch;
  }

  .hero__photo {
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
  }

  .panel {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Desktop — texto a esquerda e painel a direita, centrados na altura do cartao
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  /* O cartao ocupa a janela inteira; o texto e o painel ficam no centro
     optico dela, e nao presos na base: com o titulo em duas linhas, ancorar
     embaixo deixava um vazio grande no topo em tela de notebook. */
  .hero__main {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-content: center;
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 4rem);
  }

  .hero__content {
    align-content: center;
  }

  /* Variacao editorial: a foto sai da coluna e vira o fundo do cartao
     inteiro (acima da faixa de prova). Um veu branco nasce na esquerda e
     se abre para a direita: o texto senta sobre branco limpo, a cena
     aparece por inteiro do meio para a direita, sem escurecer nada. A
     coluna da direita fica so com o painel, e a altura do hero nao muda. */
  .hero__visual {
    position: static;
    align-self: stretch;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .hero__content,
  .panel {
    position: relative;
    z-index: 1;
  }

  .hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    height: auto;
    /* O raio de cima e o do cartao; embaixo a foto encontra, reta, o fio
       da faixa de prova. */
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      var(--surface) 0%,
      var(--surface) 30%,
      rgba(255, 255, 255, 0.86) 44%,
      rgba(255, 255, 255, 0.35) 58%,
      rgba(255, 255, 255, 0) 72%
    );
    pointer-events: none;
  }

  /* A legenda em vidro vai para o canto de cima a direita, longe do texto. */
  .photo-tag {
    z-index: 1;
    top: clamp(1rem, 2vw, 1.75rem);
    right: clamp(1rem, 2vw, 1.75rem);
    left: auto;
  }

  .panel {
    grid-area: 1 / 1;
  }

  /* Sobre a foto o painel vira vidro: bem translucido, para a cena continuar
     aparecendo atraves dele; o desfoque e a borda clara garantem a leitura.
     As linhas ficam um pouco mais densas que o fundo, para o texto ter chao. */
  .panel {
    align-self: center;
    justify-self: end;
    width: min(100%, 24rem);
    max-width: none;
    background: rgba(255, 255, 255, 0.34);
    -webkit-backdrop-filter: saturate(160%) blur(22px);
    backdrop-filter: saturate(160%) blur(22px);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: var(--shadow-lg);
  }

  .panel__row {
    background: rgba(255, 255, 255, 0.58);
    box-shadow: none;
  }
}

/* Em qualquer altura de janela o cartao ocupa a tela inteira, do header ate
   a borda de baixo (--hero-fill): no desktop a foto e o fundo do cartao, entao
   a sobra de altura vira cena, e nao vazio. O texto fica centrado nela. */

/* --------------------------------------------------------------------------
   Janelas baixas (celular deitado, notebooks curtos):
   duas colunas cedo e descarte progressivo do que e acessorio.
   -------------------------------------------------------------------------- */
@media (min-width: 40rem) and (max-height: 34rem) {
  .hero__main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 1.5rem;
  }

  .hero__visual {
    display: grid;
    justify-items: end;
  }

  .panel {
    width: min(100%, 21rem);
    max-width: none;
    margin: 0;
  }

  /* Deitado nao ha altura para foto e painel: fica o painel, que e o que
     carrega informacao. */
  .hero__photo,
  .panel__title,
  .panel__row:nth-child(n + 4) {
    display: none;
  }
}

/* Celular baixo em retrato (ate ~750px, ex.: 375x667 e 360x740): a foto e o
   primeiro bloco a sair, porque e o unico puramente visual — a mensagem e o
   painel ficam. De 800px de altura para cima ela entra. */
@media (max-width: 47.99rem) and (max-height: 47rem) {
  .hero__photo {
    display: none;
  }
}

/* Celular pequeno em retrato (ex.: 320x568): o cartao ainda estoura por
   poucos pixels. A faixa de prova e o unico bloco realmente acessorio aqui,
   entao ela sai antes de encolher tipografia ou o painel. */
@media (max-width: 30rem) and (max-height: 37rem) {
  .hero__proof,
  .hero__eyebrow span:nth-child(2) {
    display: none;
  }
}

@media (max-height: 30rem) {
  /* Deitado, a folga vertical e o que sobra para cortar. */
  .hero {
    --hero-pad: clamp(0.875rem, 3.6vh, 1.5rem);
  }

  .hero__eyebrow span:nth-child(2),
  .hero__proof,
  .hero__photo {
    display: none;
  }
}

/* Janela muito baixa (celular deitado): sobra o essencial — quem somos,
   a promessa e o caminho para falar com a gente. */
@media (max-height: 26rem) {
  .hero {
    --hero-pad: clamp(0.875rem, 4vh, 1.5rem);
    --fs-display: clamp(1.75rem, min(0.9rem + 7.4vw, 9.5vh), 4rem);
  }

  .hero__subhead {
    display: none;
  }
}

@media (max-width: 39.99rem) and (max-height: 34rem) {
  .hero__visual {
    display: none; /* paisagem em celular pequeno: so a mensagem */
  }
}