/* ═══════════════════════════════════════════════════════════
   PetNininho - folha unica
   Paleta do brief: azul bebe, rosa leve, ouro, branco.
   Assinatura: o filete dourado com a patinha, que marca cada secao.
   ═══════════════════════════════════════════════════════════ */

/* ── Paleta ────────────────────────────────────────────────
   Regra que organiza tudo: o rosa claro e SUPERFICIE, nunca fica
   atras de texto. Quem carrega texto e acao e o rosa profundo.
   E o arranjo classico de marca feminina premium (rosa claro +
   bordo + ouro), e e o que faz o contraste fechar.
   Cada par foi medido contra o WCAG, nao escolhido no olho. */
:root {
  /* superficie - decoracao, fundo, borda. Nunca sob texto. */
  --rosa:         #F0A6C1;
  --rosa-suave:   #FDEFF4;
  --rosa-borda:   #F7D3E0;

  /* acao - botao, faixa, titulo. 5.65:1 no branco. */
  --rosa-acao:    #B03E63;
  --rosa-fundo:   #8E2748;  /* botao sobre foto: 4.03:1 vs entorno */
  --rosa-profundo:#77203C;  /* hover do botao sobre foto */

  --azul:         #AFCAE8;
  --azul-suave:   #EDF4FC;
  --azul-tinta:   #43617F;  /* 6.45:1 no branco */
  --azul-borda:   #5C7FA6;  /* 4.17:1 - borda visivel de componente */
  --azul-fundo:   #2F4459;  /* texto sobre o azul bebe, 5.94:1 */

  --ouro:         #C9A961;  /* so filete decorativo */
  --ouro-tinta:   #A87C2A;  /* estrela de avaliacao: 3.78:1 no branco.
                               O --ouro da 2.26:1 e reprova ate o minimo de
                               3:1 de elemento grafico - some no card branco. */
  --ouro-claro:   #F8EDD4;  /* sobre o bordo, 4.86:1 */
  --ouro-fundo:   #5C481E;  /* sobre o azul bebe do rodape, 5.18:1 */

  --branco:       #FFFFFF;
  --tinta:        #4E434A;
  --tinta-forte:  #3A3238;  /* texto sobre foto, dispensa veu pesado */
  --tinta-suave:  #6B5F67;  /* 6.15:1 - o antigo #85787F reprovava */

  /* Trocado pra Montserrat em 26/08 (pedido do fundador) - uma familia so,
     hierarquia por peso em vez de duas familias diferentes. */
  --display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --corpo: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1120px;
  --raio: 18px;
  --sombra: 0 10px 30px rgba(139, 106, 120, .10);

  /* A patinha, desenhada uma vez e reaproveitada como mascara em todo lugar
     que precisa dela. Evita arquivo de imagem e permite trocar a cor. */
  --pata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='66' rx='24' ry='20'/%3E%3Cellipse cx='24' cy='40' rx='10' ry='13'/%3E%3Cellipse cx='42' cy='28' rx='10' ry='14'/%3E%3Cellipse cx='62' cy='28' rx='10' ry='14'/%3E%3Cellipse cx='79' cy='41' rx='10' ry='13'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* 1.15 cortava o circunflexo de "elegancia": serifada com diacritico do
   portugues precisa de mais entrelinha que o padrao em ingles. */
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; line-height: 1.2; }

p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* Foco de teclado sempre visivel - vale pra loja inteira. */
:focus-visible {
  outline: 3px solid var(--azul-tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--branco);
  padding: 12px 18px; z-index: 100; border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; top: 0; }

/* ── A patinha reutilizavel ────────────────────────────── */
.filete-pata, .faixa-pata {
  display: inline-block;
  -webkit-mask-image: var(--pata); mask-image: var(--pata);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}

/* ── Filete: a assinatura da marca ─────────────────────── */
.filete {
  display: flex; align-items: center; gap: 12px;
  margin: 18px auto 22px; max-width: 240px;
}
/* 26/08: filete de fechamento de secao - mesma peca, so com mais respiro
   acima pra separar do conteudo que acabou de terminar. */
.filete-fechamento { margin-top: clamp(36px, 6vw, 56px); }
.filete::before, .filete::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
}
.filete-pata { width: 18px; height: 18px; background: var(--ouro); flex: none; }
.filete-centro { margin-left: auto; margin-right: auto; }
.filete-esq { margin-left: 0; }
/* No hero o filete separa a assinatura da headline - fica mais curto e mais
   apertado, senao vira um sexto elemento empilhado. */
.hero .filete { max-width: 150px; margin: 14px auto 20px; }

/* ── Topo ──────────────────────────────────────────────── */
/* 28/08: virou PILULA FLUTUANTE. A referencia que o fundador colou na nota de
   material (sign-in-flow-1, 21st.dev) entrou como construcao: capsula solta
   sobre o conteudo, sem faixa de largura total, item virando pilula no hover.
   A identidade nao veio junto - a referencia e escura, aqui a capsula e de
   vidro claro, no mesmo material do botao da abertura, pra abertura ter UMA
   linguagem so em vez de duas.
   O header nao ocupa mais espaco de layout (fixed, nao sticky): a foto da
   abertura comeca no alto da tela e a pilula flutua por cima. Por isso o
   respiro de topo do .hero cresceu - e ele que guarda o lugar da capsula. */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 14px 16px;
  /* O header ocupa a largura toda pra centralizar a capsula, mas so a capsula
     recebe clique - senao ele viraria uma tampa invisivel sobre o topo da
     foto e comeria o clique de quem mira ali. */
  pointer-events: none;
}
.topo-pilula {
  pointer-events: auto;
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  border-radius: 999px;
  /* VIDRO DE VERDADE (29/08). A versao de ontem estava em .88 de opacidade:
     tecnicamente translucida, visualmente solida - o fundador olhou e disse
     que faltava o efeito. Vidro so LE como vidro quando tres coisas acontecem
     juntas: da pra ver o que passa atras, o que passa atras chega desfocado, e
     a quina pega luz. As tres estao aqui, e a queda pra .62 e o que devolve a
     primeira.
     O que segura a leitura da letra depois de afinar o vidro e a sombra
     propria dela (.topo-pilula a), nao mais a opacidade do fundo. Medido no
     PIOR fundo que a capsula cruza, que e a secao branca: 5.4:1 ja em .58.
     Mexer em qualquer um dos dois pede `npm run contraste`. */
  /* 29/08, segunda passada: o fundador disse que a cor tinha ficado acinzentada
     e sem vida, e tinha mesmo. Vidro fino em cima de uma foto BEGE puxa tudo
     pro neutro: o bordo #8E2748 e escuro mas pouco cromatico, entao o que
     sobrava da mistura era um malva sem sangue - 27% de saturacao medidos
     sobre o bege da cortina. Duas mudancas devolvem a cor: o topo do degrade
     passa a ser um rosa MAIS CROMATICO (nao mais escuro, mais colorido) e a
     saturacao do desfoque sobe pra 200%, que reforca a cor do que passa atras
     em vez de so borrar. Deu 38% de saturacao, e o contraste ainda melhorou. */
  background: linear-gradient(180deg, rgba(201, 59, 110, .62), rgba(150, 33, 74, .78));
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, .30);
  /* A linha clara por dentro da quina de cima e o reflexo do vidro - e ela que
     da a espessura. Sem isso a capsula vira um retangulo pintado. */
  box-shadow: 0 10px 30px rgba(58, 50, 56, .22), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.topo-pilula a {
  display: block; text-decoration: none;
  padding: 9px 16px; border-radius: 999px;
  font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  color: var(--branco);
  /* A sombra da propria letra e o que sustenta a leitura agora que o vidro
     ficou fino. E o mesmo recurso do halo da manchete, so que escuro. */
  text-shadow: 0 1px 3px rgba(59, 15, 31, .8), 0 0 9px rgba(59, 15, 31, .5);
  transition: background .2s, color .2s;
}
/* O item aceso vira pilula clara dentro da capsula - o mesmo mecanismo do
   botao destacado na referencia. Perde a sombra: em cima do branco ela sujaria
   a letra em vez de ajudar. */
.topo-pilula a:hover, .topo-pilula a:focus-visible {
  background: var(--branco); color: var(--rosa-fundo); text-shadow: none;
}
/* Icone de canal: mesma pilula, so que quadrada de lado igual. */
.topo-icone { padding: 8px 10px; display: flex; align-items: center; }
.topo-icone svg { display: block; filter: drop-shadow(0 1px 2px rgba(59, 15, 31, .7)); }
.topo-icone:hover svg { filter: none; }
/* Fio que separa a navegacao dos canais dentro da capsula. */
.topo-risco {
  width: 1px; height: 18px; margin: 0 5px; flex: none;
  background: rgba(255, 255, 255, .35);
}
@media (max-width: 560px) {
  .topo-pilula a { padding: 8px 11px; font-size: .72rem; }
  .topo-icone { padding: 7px 8px; }
}

/* O atributo hidden perde a queda de braco pra qualquer classe que declare
   display - mesma armadilha ja anotada na secao de lancamentos. */
.topo-pilula a[hidden] { display: none; }
@media (max-width: 560px) {
  .topo { padding: 10px 12px; }
  .topo-pilula a { padding: 8px 13px; font-size: .74rem; }
}

/* ── Botoes ────────────────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--corpo); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s;
}

/* Botao de vidro da abertura (28/08, pedido do fundador).
   Substitui o keycap do Press Depth e o anel branco de 2px que vinham de
   26/08 - ele achou os dois pesados. Entra vidro fosco de verdade (fundo
   translucido + desfoque do que passa atras), no MESMO material da pilula do
   topo, e um pulso de halo em vez de anel.

   POR QUE O VIDRO E BORDO E A LETRA E BRANCA, e nao o contrario: a primeira
   tentativa foi vidro claro com a letra bordo, e ela nao fecha em lugar
   nenhum. A foto da abertura e clara (cortina, tapete, piso), entao vidro
   claro por cima dela continua claro, e bordo sobre claro-em-cima-de-claro
   deu de 1.13:1 a 3.25:1 contra o minimo de 4.5:1 - e subir a opacidade nao
   resolvia, so matava o vidro antes de chegar no numero. Invertendo, o vidro
   carrega o proprio escuro e a letra branca le com folga.
   .78 e o piso medido: entrega 6.57:1 sobre o primeiro quadro da cena, 5.49:1
   sobre a foto do modo calmo e 5.16:1 sobre o corte do celular. Abaixo disso
   o celular comeca a reprovar, porque la o botao cai sobre o tapete claro.
   Mexer nesse numero pede `npm run hero` depois. */
.btn-vidro {
  position: relative; overflow: hidden;
  /* 29/08: caiu de .78 pro par .38/.54 pelo mesmo motivo da capsula - em .78
     era translucido no papel e solido na tela. O botao pode ser mais fino que
     a capsula porque ele so assenta sobre a FOTO, que e clara e previsivel; a
     capsula cruza a pagina inteira e tem que aguentar fundo branco.
     Com a cor viva de 29/08 (segunda passada) o que sobra atras da letra no
     meio do degrade equivale a #A93058 a 68%, e com a sombra dela entrega
     7.66:1 sobre o primeiro quadro da cena, 6.49:1 sobre a foto do modo calmo
     e 6.09:1 no corte do celular, contra o minimo de 4.5:1.
     O celular e quem manda no piso: la o botao cai sobre o tapete claro. */
  background: linear-gradient(180deg, rgba(201, 59, 110, .58), rgba(150, 33, 74, .76));
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  backdrop-filter: blur(20px) saturate(200%);
  color: var(--branco);
  text-shadow: 0 1px 3px rgba(59, 15, 31, .8), 0 0 9px rgba(59, 15, 31, .5);
  /* Fio claro de 1px mais o reflexo por dentro da quina de cima: e o que da
     espessura ao vidro. Nao confundir com o anel de 2px de 26/08 que ele
     mandou tirar - aquele era uma borda solida desenhada em volta da pilula. */
  border-color: rgba(255, 255, 255, .32);
  box-shadow: 0 10px 30px rgba(58, 50, 56, .22), inset 0 1px 0 rgba(255, 255, 255, .40);
  animation: pulso-vidro 3.2s ease-in-out infinite;
}
/* O brilho dourado que cruza o botao no hover, herdado do desenho anterior:
   e o unico movimento decorativo da pagina fora do pulso. */
.btn-vidro::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(240, 221, 176, .38) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-vidro:hover {
  background: linear-gradient(180deg, rgba(216, 70, 124, .70), rgba(150, 33, 74, .86));
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(58, 50, 56, .28);
}
.btn-vidro:hover::after { transform: translateX(120%); }
.btn-vidro:active { transform: translateY(0); }

/* Botao vazado: a borda precisa de 3:1 contra o branco do card pra
   continuar parecendo botao - borda rosa clara reprovava. */
.btn-atacado {
  flex: none;
  background: transparent; color: var(--rosa-acao);
  border-color: var(--rosa-acao); font-size: .74rem; padding: 13px 22px;
}
.btn-atacado:hover { background: var(--rosa-acao); color: var(--branco); }

/* Fio dourado de leitura. Era "rente a base do topo" enquanto existia uma
   barra de largura total; com a pilula flutuante ele passou a morar rente ao
   TOPO DA TELA (28/08), atravessando a largura inteira. Comeca zerado e o
   movimento.js preenche conforme a pagina anda. Sem JS ele fica invisivel,
   nao vira um risco parado atravessando a tela. */
.topo-progresso {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 51;
  background: linear-gradient(90deg, var(--ouro-tinta), var(--ouro));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* Pulso do botao de vidro (28/08). O anterior desenhava um anel branco solido
   de 2px em volta da pilula, que era justamente o que o fundador achou feio.
   Este nao desenha borda: e um halo bordo que nasce colado no botao e se abre
   ate sumir, entao a pausa do laco fica limpa. Fica no box-shadow e nao em
   transform porque o botao tem overflow escondido por causa do brilho que
   atravessa no hover. */
@keyframes pulso-vidro {
  0%, 100% { box-shadow: 0 10px 30px rgba(58, 50, 56, .22), inset 0 1px 0 rgba(255, 255, 255, .40), 0 0 0 0 rgba(176, 62, 99, .34); }
  55%      { box-shadow: 0 10px 30px rgba(58, 50, 56, .22), inset 0 1px 0 rgba(255, 255, 255, .40), 0 0 0 16px rgba(176, 62, 99, 0); }
}

/* ── Hero ──────────────────────────────────────────────── */
/* Abertura de tela cheia (20/08). A tese da pagina e a CENA: os pets vestidos
   sentados na base da tela, com a promessa por cima. Por isso a altura passou
   a ser a da tela e o respiro de baixo virou proporcional a ela - com os
   368px fixos de antes, em tela de notebook a secao terminava abaixo da
   dobra e a primeira coisa que a pessoa via era a estante, com os bichos
   cortados. A foto e ancorada embaixo, entao respiro proporcional mantem os
   pets na cena em qualquer altura de tela. */
.hero {
  position: relative; overflow: hidden;
  /* Altura TRAVADA na tela, nao apenas piso: a foto e ancorada embaixo, entao
     e a altura da secao que decide se os bichos aparecem. Com piso (min-),
     um bloco de texto um pouco maior empurrava a base pra fora da dobra e os
     pets sumiam - que era o defeito que o fundador viu. O min-height de 620px
     e a rede pra tela muito baixa: ali a secao volta a crescer. */
  height: 100svh; min-height: 620px;
  /* Ancorado no TOPO, nao centralizado: centralizar so funciona enquanto o
     bloco cabe na caixa, e quando nao cabe ele transborda pros DOIS lados -
     era o que decepava a trava da marca por baixo do topo fixo. Ancorado, a
     abertura sempre comeca abaixo da barra e o resto da tela fica pra cena. */
  display: flex; flex-direction: column; justify-content: flex-start;
  background: linear-gradient(170deg, var(--rosa-suave) 0%, var(--branco) 70%);
  /* O topo e fixo e cobre os primeiros ~64px da secao: o respiro de cima
     precisa passar por baixo dele, senao a trava da marca abre decepada. */
  /* 28/08: o topo virou pilula FLUTUANTE e deixou de ocupar espaco de layout.
     Antes a barra empurrava o conteudo por conta propria; agora quem guarda o
     lugar dela e este respiro, senao a capsula pousa em cima da abertura. */
  padding: clamp(76px, 11vh, 104px) 0 clamp(40px, 8vh, 90px);
  text-align: center;
}
/* A costura com a secao seguinte e o filete dourado da marca - o mesmo
   elemento que assina cada divisor. Um degrade branco aqui apagaria
   justamente a parte da foto onde os bichos estao. */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  pointer-events: none;
}
/* A foto do hero. Por CSS e nao por <img>: se o arquivo ainda nao existe,
   o degrade da secao aparece sozinho, sem icone de imagem quebrada. */
.hero-foto {
  position: absolute; inset: 0; pointer-events: none;
  background-size: cover;
  background-position: center bottom;
  /* A linha do jpg fica primeiro como rede de seguranca: navegador que nao
     entende image-set() usa ela. Quem entende, pega o webp (menos da metade
     do peso, e o hero e a primeira coisa que carrega). */
  background-image: url('../img/hero-16x9.jpg');
  background-image: image-set(
    url('../img/hero-16x9.webp') type('image/webp'),
    url('../img/hero-16x9.jpg') type('image/jpeg')
  );
  background-image: -webkit-image-set(
    url('../img/hero-16x9.webp') type('image/webp'),
    url('../img/hero-16x9.jpg') type('image/jpeg')
  );
}

/* O SALTO DA ABERTURA (corrigido em 28/08).
   Sintoma que o fundador viu: ao recarregar, a foto do cachorro parado ficava
   alguns segundos na tela e de repente virava outra coisa. Nao era demora, era
   TROCA DE FOTO. Esta .hero-foto mostrava o shiba posando (hero-16x9.jpg),
   enquanto a cena presa a rolagem comeca no quarto VAZIO, com o cachorro ainda
   fora do quadro (quadro-001.jpg). Ou seja: a pagina abria numa foto e pulava
   pra outra assim que as 85 fotos da sequencia terminavam de baixar.
   Correcao: onde a cena vai tocar, a foto de espera passa a ser o PRIMEIRO
   QUADRO DELA. A troca continua acontecendo, mas de uma imagem pra ela mesma,
   entao ninguem ve.
   A condicao repete exatamente a do `usaCena` no movimento.js (tela larga E
   sem modo calmo). Fora dela nada muda: quem esta no celular ou pediu menos
   movimento nao ve cena nenhuma, e pra essa pessoa o certo continua sendo a
   foto do cachorro posando, nao um quarto vazio. */
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .hero-foto {
    background-position: center bottom;
    background-image: url('../img/hero-cena/quadro-001.jpg');
  }
}
/* A cena do cachorro fica por cima da mesma area da foto. Nasce transparente
   - o movimento.js so acende depois que as 85 fotos da sequencia carregarem,
   e ate la a foto de baixo segura a tela. Fora do celular e do modo calmo
   por CSS tambem (nao so por JS), pra quem esta nesses casos nao pagar o
   download de 3,6MB de fotos. */
.hero-cena {
  position: absolute; inset: 0; pointer-events: none;
  width: 100%; height: 100%; opacity: 0;
}
/* 29/08: a cena deixou de ser escondida no celular - ela passou a tocar la
   tambem, com a sequencia 9:16. Quem continua sem cena e o modo calmo, logo
   abaixo. */
@media (prefers-reduced-motion: reduce) { .hero-cena { display: none; } }
/* Veu que garante o contraste do texto INDEPENDENTE da foto que entrar.
   Como o texto assenta neste veu quase opaco, e nao no pixel da foto, as
   razoes de contraste medidas continuam valendo mesmo se a imagem mudar. */
/* Veu MEDIDO, nao chutado. Cada parada foi calculada contra a cor real da
   foto naquela altura, com a tinta que assenta ali, buscando o MENOR veu que
   ainda passa em 4.5:1. Resultado: caiu de 90-96% para 34-50%, e a boutique
   voltou a aparecer. Se a foto for trocada, rodar `npm run contraste`. */
/* O veu de tela cheia SAIU em 14/08: era ele o "filtro rosa" que o fundador
   via por cima da foto. Agora a foto aparece limpa de ponta a ponta, e a
   legibilidade fica por conta do painel local abaixo. */
.hero-conteudo { position: relative; z-index: 1; }

/* NENHUMA cobertura sobre a foto (14/08, segunda rodada).
   Medindo as faixas nas alturas REAIS do texto - e nao nas que eu tinha
   chutado, que caiam em cima dos cachorros - o texto passa com folga sobre a
   foto crua: 5.64:1 na headline e 7.73:1 no subtitulo no corte do celular.
   O texto sempre assenta na caminha clara; os bichos ficam ABAIXO dele.
   Entao painel e veu sairam. A legibilidade agora e carregada pelo halo do
   proprio texto (abaixo), que e por letra e nao desenha retangulo nenhum
   sobre a imagem. */

/* Halo por letra: um brilho claro coladinho no glifo. Sustenta a leitura se
   a foto for trocada por uma mais escura, sem por cor sobre a cena. */
/* 29/08: o halo ficou MAIS DENSO e virou UM SO pra pagina inteira.
   Achado pelo validador novo da abertura: ate aqui a conferencia do computador
   media so o PRIMEIRO quadro da cena - o quarto vazio, que e claro e facil.
   Medindo a cena inteira, a manchete cai pra 4.22:1 contra o minimo de 4.5 no
   trecho em que o cachorro passa por tras dela. O quadro parado escondia isso.
   Como o numero que o celular ja usava (.68 de cobertura equivalente) resolve
   os dois casos, os dois blocos separados viraram este. Menos uma medida
   vivendo em dois lugares. */
.hero-titulo, .hero-sub, .hero-marca, .hero-tagline {
  text-shadow:
    0 1px 2px rgba(255, 255, 255, .98),
    0 0 6px  rgba(255, 255, 255, .95),
    0 0 14px rgba(255, 255, 255, .82),
    0 0 26px rgba(255, 255, 255, .62);
}

/* A trava completa da marca abre a pagina. Maior na largura (era 340px) e
   ocupando menos altura: o respiro de baixo caiu de 18px pra 6px, e o proprio
   .hero perdeu padding no topo, entao ela cresce sem empurrar a headline. */
/* Margem de topo curta: a trava da marca abre a pagina, mas o bloco
   inteiro precisa caber entre o topo fixo e a cena dos bichos - com a
   margem antiga a logo era decepada pela barra do topo. */
.hero-logo { display: block; margin: clamp(6px, 1.6vh, 18px) auto 6px; }
.hero-logo img {
  /* Limite pela ALTURA, nao so pela largura: em tela baixa a trava da marca
     comia o espaco do bloco inteiro e a manchete descia por cima dos bichos.
     Altura mandando, a abertura se recompoe sozinha em qualquer tela. */
  width: min(300px, 68vw); max-height: clamp(66px, 10vh, 96px);
  height: auto; object-fit: contain; display: block; margin: 0 auto;
  /* Halo branco por CONTORNO - a mesma ideia do halo das letras do texto, so
     que aqui o drop-shadow acompanha o recorte do PNG. E o que faz a
     assinatura "O carinho que seu pet merece" aparecer: ela e dourada e fina,
     e sobre o rosa da caminha praticamente sumia. A sombra escura fica por
     ultimo, so pra dar peso. */
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, .95))
    drop-shadow(0 0 12px rgba(255, 255, 255, .85))
    drop-shadow(0 0 26px rgba(255, 255, 255, .6))
    drop-shadow(0 2px 10px rgba(119, 32, 60, .18));
}

/* A marca e a tagline formam UM bloquinho de assinatura, pequeno. A headline
   e que manda no hero. Antes os dois tinham o mesmo tamanho e brigavam - e o
   nome ainda se repetia no topo da pagina. */
.hero-marca {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  color: var(--azul-fundo); letter-spacing: .02em; margin: 0;
}
.hero-titulo {
  /* 28/08: teto de 3.15rem pra 2.5rem, a pedido do fundador - a manchete
     estava tomando tela demais. */
  /* 29/08: segunda reducao, pelo desenho dele no canvas. */
  font-size: clamp(1.5rem, 3.2vw, 2.05rem); font-weight: 600;
  color: var(--azul-fundo);
  /* Serifada grande pede um leve fechamento: em corpo de 3.7rem o espaco
     entre letras da fonte parece frouxo, e fechar em -0.012em e o que faz a
     manchete ler como titulo de revista, nao como texto ampliado. */
  letter-spacing: -.012em;
  /* 1.22 (era 1.28): as duas linhas passam a se ler como um bloco. Continua
     com folga pro circunflexo de "elegancia" - conferido no print. */
  line-height: 1.22;
  /* 24ch quebra em 2 linhas equilibradas, como na referencia. Com 17ch
     saiam 3 linhas irregulares. */
  /* 28/08: o teto passou a ser min(24ch, 100%) como trava de seguranca. `ch`
     mede em caractere da FONTE, e a familia trocou pra Montserrat em 26/08 -
     mais larga que a Cormorant pra qual 24ch tinha sido calibrado. Em aparelho
     estreito 24ch pode passar da largura util e vazar o texto pra fora da tela;
     com o min(), nunca passa. O 24ch continua mandando onde cabe, que e onde
     ele faz a manchete quebrar em duas linhas parelhas.
     Conferido no computador. No celular NAO da pra conferir por aqui: o Chrome
     sem emulacao de aparelho desenha numa largura minima maior que a pedida e
     so recorta o print, entao o corte que aparece e da ferramenta, nao do site.
     O portao do celular continua sendo o aparelho do fundador. */
  max-width: min(24ch, 100%); margin: 0 auto .34em; text-wrap: balance;
}
/* Bordo, nao o rosa de acao: rosa claro sobre parede rosa da 2.18:1 e era
   ele que obrigava o veu a 77%, apagando a foto. */
.hero-tagline {
  font-family: var(--display); font-size: clamp(.72rem, 1.9vw, .88rem);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--rosa-fundo); margin: 4px 0 0;
}
/* Peso 500 e nao 600: a manchete e que carrega a voz, e um subtitulo quase
   tao pesado quanto ela achatava a hierarquia. Em 38ch a frase cabe em duas
   linhas cheias em vez de tres irregulares. */
.hero-sub {
  /* 29/08: menor junto com a manchete, e o respiro de baixo cresceu duas vezes
     - de 24px pro desenho do canvas, e de novo quando ele pediu mais
     afastamento olhando o resultado na tela. */
  font-size: clamp(.88rem, 1.9vw, 1rem); color: var(--tinta-forte);
  font-weight: 500; letter-spacing: .006em;
  max-width: min(38ch, 100%); margin: 0 auto clamp(48px, 8vh, 88px); line-height: 1.5;
  text-wrap: balance;
}

/* CORRECAO DE 28/08 - POSICAO DESTE BLOCO E O QUE FAZ ELE FUNCIONAR.
   Ele nasceu em 26/08 la em cima, logo depois do .hero-cena, e nunca pegou:
   media query NAO acrescenta especificidade, entao `.hero-titulo {margin-left:0}`
   dentro dela empatava com o `.hero-titulo {margin: 0 auto}` das regras base -
   e, empatado, quem vem depois no arquivo ganha. As regras base vinham depois.
   Resultado no ar: o texto continuava centralizado em cima da cara do cachorro
   e so o botao andava pra esquerda (ele segue text-align, nao margem), que era
   o desalinho que aparecia na tela. Descendo o bloco pra depois das bases, a
   correcao de 26/08 finalmente vale. Se alguma regra base do hero for movida
   pra baixo daqui um dia, o defeito volta - o bloco tem que continuar por
   ultimo.

   O que ele faz: onde a cena do cachorro toca (mesma regra de min-width:701px
   do usaCena no movimento.js), o texto sai do centro e assenta na esquerda,
   que e o terco vazio que a cena reserva por desenho. No celular e no modo
   calmo, sem cena, o texto continua centralizado como sempre foi. */
@media (min-width: 701px) {
  .hero { text-align: left; }
  .hero-logo { margin-left: 0; margin-right: 0; }
  .hero-logo img { margin-left: 0; margin-right: 0; }
  .hero-titulo { margin-left: 0; margin-right: 0; }
  .hero-sub { margin-left: 0; margin-right: 0; }
  /* A marca de reserva (entra so se o PNG da logo falhar) tambem assenta na
     esquerda - senao o filete dela ficava sozinho no meio do quadro. */
  .hero .filete { margin-left: 0; margin-right: 0; }
}

/* ── Sobre ─────────────────────────────────────────────── */
/* ── Provas ────────────────────────────────────────────────
   Faixa de sustentacao entre a promessa e a historia da marca: ela responde
   "posso confiar?" antes de a pagina pedir atencao pra qualquer outra coisa.
   26/08: ganhou fundo --rosa-suave (rosa quase branco) pra abrir o
   revezamento de fundo por secao - e claro o bastante pra nao competir com o
   bordo solido da .faixa mais abaixo, entao as linhas de separacao ficam. */
.provas {
  background: var(--rosa-suave);
  border-top: 1px solid var(--rosa-borda);
  border-bottom: 1px solid var(--rosa-borda);
  padding: clamp(26px, 4vw, 38px) 0;
}

/* ── Filosofia (26/08) ─────────────────────────────────────
   Intercala a grade de numeros com uma frase, no espirito da vemvem.com de
   nunca emendar bloco de produto direto no proximo. */
.filosofia { background: var(--branco); padding: clamp(56px, 9vw, 96px) 0; text-align: center; }
.filosofia-frase {
  max-width: 640px; margin: 0 auto; padding: 0 22px;
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem); line-height: 1.5;
  color: var(--tinta-forte);
}
.filosofia .filete { margin-top: 22px; }
/* As tres provas ficam SEMPRE lado a lado, inclusive no celular - empilhadas
   viravam uma lista de tres linhas e roubavam a atencao da promessa logo
   acima. Sem quebra de linha: o tamanho encolhe ate caber. */
.provas-linha {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 4vw, 52px); flex-wrap: nowrap;
}
.prova { text-align: center; min-width: 0; }
.prova-numero {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 4.6vw, 2.3rem); line-height: 1.05;
  color: var(--rosa-acao);
  /* Tabular evita a largura pular a cada quadro enquanto o numero cresce. */
  font-variant-numeric: tabular-nums;
}
/* "Todo o Brasil" nao e numero: perde o tabular, ganha o azul pra nao
   competir com os dois numeros de venda, e quebra em duas linhas parelhas
   sem esticar a faixa. */
.prova-numero-texto {
  font-variant-numeric: normal; color: var(--azul-tinta);
  font-size: clamp(1.05rem, 3.4vw, 1.75rem); text-wrap: balance;
}
.prova-rotulo {
  display: block; margin-top: 5px;
  font-size: clamp(.58rem, 1.7vw, .7rem); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave);
  text-wrap: balance;
}
/* Fio dourado entre as provas - a mesma assinatura do filete. */
.prova-risco {
  width: 1px; align-self: stretch; min-height: 44px;
  background: linear-gradient(180deg, transparent, var(--ouro), transparent);
}

.sobre { padding: clamp(58px, 8vw, 92px) 0; background: var(--rosa-suave); }
.sobre-grade { display: grid; gap: 40px; align-items: center; }
/* A foto ganha uma moldura dourada deslocada - o mesmo ouro do filete,
   agora como passe-partout. E o detalhe que tira a foto do ar de banco
   de imagem e a encaixa na marca. */
.sobre-foto { position: relative; }
.sobre-foto::before {
  content: ''; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--ouro); border-radius: var(--raio);
  pointer-events: none;
}
.sobre-foto img {
  position: relative;
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
/* O piso do tamanho caiu de 1.9rem pra 1.55rem e o espacamento de .06em pra
   .04em: com o valor antigo, "SOBRE NOS" nao cabia na coluna estreita e o
   "NOS" descia sozinho pra segunda linha. 'balance' cuida dos titulos de
   duas palavras que ainda precisem quebrar, dividindo em linhas parelhas em
   vez de deixar uma palavra orfa. */
.titulo-secao {
  font-weight: 700; font-size: clamp(1.55rem, 4.4vw, 2.6rem); color: var(--rosa-acao);
  letter-spacing: .04em; text-transform: uppercase;
  text-wrap: balance; margin-bottom: 0;
}
.titulo-centro { text-align: center; }
/* O titulo e a patinha ficam centrados na coluna (pedido do fundador). Pra
   nao ficar titulo no meio com paragrafo grudado na esquerda, o bloco de
   texto tambem centraliza - o texto continua alinhado a esquerda, que e o
   que se le bem, mas a caixa dele fica no eixo do titulo. */
.sobre-texto p { color: var(--tinta-suave); max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ── Lancamentos (20/08) ───────────────────────────────────
   Fica acima da colecao e so aparece quando existe produto marcado como
   lancamento no painel - o main.js e quem tira o hidden. Sobe antes de o
   criativo existir sem deixar buraco na pagina. O card e vertical porque o
   material dela e video de reels. */
/* 28/08: a faixa azul terminava rente ao card - as irmas ganharam o ritmo
   novo em 26/08 e essa ficou pra tras. Respiro embaixo um pouco menor que o
   de cima porque o filete de fechamento ja ocupa parte dele. */
.lancamentos {
  /* Respiro de baixo maior que o de cima desde 29/08: os cartoes das pontas
     descem e giram, entao o leque ocupa mais chao do que uma fileira reta. */
  padding: clamp(52px, 7vw, 84px) 0 clamp(64px, 9vw, 104px);
  background: var(--azul-suave);
  /* Na referencia os cartoes das pontas sao cortados pela beirada da tela, e e
     isso que faz o leque parecer maior que a janela. Pra deixar vazar sem criar
     rolagem lateral na PAGINA, o corte acontece aqui, na secao.
     `clip` e nao `hidden` de proposito: hidden criaria um container de rolagem
     e poderia atrapalhar posicionamento preso mais adiante. */
  overflow-x: clip;
  position: relative;
}

/* PENUMBRA NAS BEIRADAS (29/08).
   Sem ela o holofote nao existe. A primeira tentativa foi so por uma poca de
   luz clara atras dos cartoes, e ela sumiu: o fundo da secao ja e quase branco,
   e claro sobre claro nao vira foco. Luz e uma relacao, nao uma cor - precisa
   de entorno mais escuro pra ter o que iluminar.
   Escurecer a secao inteira resolveria de um jeito obvio, mas quebraria o
   revezamento de fundo claro que a pagina mantem de ponta a ponta. Entao o
   escuro fica so nas BEIRADAS, de leve, e o centro segue claro: da o palco sem
   trocar a identidade da secao. */
/* 29/08, segunda passada: a penumbra era AZUL porque a secao era azul
   (--azul-suave). Com o fundo novo a secao virou bloco quase branco sobre
   pagina quente, e a sombra fria passou a ser a unica coisa cool da pagina -
   lia como secao de outro site. Mesmas paradas, mesmo efeito, tinta quente. */
.lancamentos::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 52%,
      transparent 0%,
      rgba(119, 32, 60, .05) 58%,
      rgba(119, 32, 60, .13) 100%);
}
.lancamentos > .wrap { position: relative; z-index: 1; }
.lancamentos .titulo-secao { color: var(--azul-tinta); }
.lancamentos-etiqueta {
  text-align: center; margin: 0 0 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rosa-acao);
}
/* ── O LEQUE (29/08) ───────────────────────────────────────
   Construcao trazida da referencia que o fundador colou na nota de material
   (hero-10 do 21st.dev, "centered hero with image fan"): os cartoes nao ficam
   numa fileira reta, eles se abrem em leque - o do meio ereto e na frente, os
   dos lados girados pra fora e um pouco mais baixos, como fotos espalhadas na
   mesa. Da referencia veio SO o arranjo; a moldura, a cor e a sombra continuam
   sendo do PetNininho.

   O arranjo muda com a QUANTIDADE, e isso nao e capricho: leque de um cartao so
   e um cartao torto, e leque de seis e bagunca. Por isso:
     1 cartao  -> ereto e centralizado, sem giro
     2 cartoes -> abrem simetricos, sem "meio"
     3 cartoes -> o leque cheio da referencia
     4 ou mais -> volta a ser trilho que rola de lado, que e o que aguenta
                  quantidade sem virar pilha
   Quem conta os cartoes e o proprio CSS, com :has() - o JS nao precisa saber
   de arranjo, ele so cria os cartoes. */
.lancamentos-trilho {
  display: flex; justify-content: center; align-items: flex-start;
  /* Ancora o holofote, que e posicionado a partir daqui. */
  position: relative;
  gap: 22px; margin-top: 34px;
  /* O giro joga o canto do cartao pra fora da caixa: com overflow escondido, o
     leque apareceria decepado. */
  overflow: visible;
  padding: 10px 2px 18px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.lancamentos-trilho::-webkit-scrollbar { display: none; }

/* ── O HOLOFOTE (29/08) ────────────────────────────────────
   Uma poca de luz atras dos cartoes, pedida pelo fundador pra dar "ar de
   holofotes". Fica no CENTRO e nao precisa se mexer: o cartao da frente esta
   sempre no centro do trilho, entao a luz cai nele sozinha, seja qual for o
   video escolhido. Perseguir o cartao com JS seria trabalho pra chegar no mesmo
   lugar.
   Nasce ATRAS de tudo (z-index 0, e os cartoes tem 1 e 3) e nao recebe clique.
   O ouro no meio do degrade e o mesmo da assinatura da marca - e o que faz a luz
   parecer quente, de palco, em vez de um borrao branco. */
.lancamentos-trilho::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: min(820px, 132%); aspect-ratio: 1 / .92;
  background: radial-gradient(closest-side,
      rgba(255, 252, 244, .98) 0%,
      rgba(255, 242, 214, .88) 26%,
      rgba(226, 190, 116, .42) 48%,
      rgba(201, 169, 97, .16) 68%,
      transparent 86%);
}
/* Os cartoes precisam ficar por cima da luz. Os do leque ja recebem camada
   propria pelo slot; esta linha cobre os outros arranjos (1, 2 e 4+). */
.lancamentos-trilho > .lancamento { position: relative; z-index: 1; }
.lancamento {
  flex: 0 0 clamp(214px, 26%, 262px);
  min-width: 0;
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--rosa-borda); background: var(--branco);
  padding: 0;
  box-shadow: 0 14px 34px rgba(58, 50, 56, .16);
  transform-origin: center bottom;
  /* Sombra e borda transicionam por CSS. A POSICAO nao: quando ha GSAP, e ele
     que escreve e anima o transform do leque (ver montarLeque no main.js), e
     duas coisas animando a mesma propriedade brigam. */
  transition: box-shadow .3s ease, border-color .3s ease;
}

/* DOIS cartoes: abrem simetricos, sem ninguem no meio. */
.lancamentos-trilho:has(> :nth-child(2)):not(:has(> :nth-child(3))) > .lancamento:nth-child(1) {
  transform: rotate(-5deg) translateY(10px);
}
.lancamentos-trilho:has(> :nth-child(2)):not(:has(> :nth-child(3))) > .lancamento:nth-child(2) {
  transform: rotate(5deg) translateY(10px);
}

/* TRES cartoes: o leque cheio, e CLICAVEL (29/08, pedido do fundador - "clicar
   e o video principal mudar").

   COMO A TROCA ACONTECE: os cartoes NAO mudam de lugar no HTML nem na ordem do
   flex. O que muda e so a transformacao de cada um, entao o navegador desliza a
   troca sozinho. Reordenar de verdade (com `order` ou mexendo no HTML) daria um
   salto seco e, pior, mover um <video> no documento o recarrega.

   AS REGRAS DE SLOT ABAIXO SAO O ARRANJO DE PARTIDA, pra quem estiver sem
   GSAP. Quando ele existe - que e o caso normal - e ELE quem escreve e anima o
   transform destes cartoes, porque transform inline sempre vence folha de
   estilo. Tentar animar por variavel de CSS aqui nao funciona: medido no
   navegador, a regra do slot novo volta a casar (o `cursor` muda na hora) mas o
   `transform` que consome as variaveis nao e recalculado, e o cartao ganha
   camada sem sair do lugar. */
.lancamentos-trilho[data-leque="3"] { gap: 0; }
.lancamentos-trilho[data-leque="3"] > .lancamento { cursor: pointer; }
/* Ponta esquerda */
.lancamentos-trilho[data-leque="3"] > .lancamento[data-slot="-1"] {
  transform: translate(26px, 22px) rotate(-8deg) scale(.96);
  z-index: 1;
}
/* O da frente: ereto, maior e por cima. E ele que o olho pega primeiro, que e a
   razao de existir o arranjo. Deixa de ser clicavel porque ja esta escolhido. */
.lancamentos-trilho[data-leque="3"] > .lancamento[data-slot="0"] {
  transform: scale(1.1);
  z-index: 3; cursor: default;
  /* Duas sombras: a de baixo da o peso, e a de cima e a LUZ batendo na peca
     escolhida. Ela e espalhada (60px de borrao), e nao um anel de espessura
     fixa - anel le como borda branca desenhada, nao como iluminacao. */
  box-shadow: 0 24px 52px rgba(58, 50, 56, .26), 0 0 60px 8px rgba(226, 190, 116, .55);
}

/* AS PONTAS RECUAM NA LUZ. O holofote destaca por contraste: quem nao esta
   escolhido fica um pouco mais apagado, e o do meio parece aceso mesmo sem
   ganhar cor. Fica no `filter` e nao no `transform` porque o transform do leque
   e do GSAP - duas coisas escrevendo a mesma propriedade brigariam. */
.lancamentos-trilho[data-leque="3"] > .lancamento {
  filter: brightness(.88) saturate(.94);
  transition: filter .45s ease, box-shadow .3s ease, border-color .3s ease;
}
.lancamentos-trilho[data-leque="3"] > .lancamento[data-slot="0"] { filter: none; }
/* Ponta direita */
.lancamentos-trilho[data-leque="3"] > .lancamento[data-slot="1"] {
  transform: translate(-26px, 22px) rotate(8deg) scale(.96);
  z-index: 1;
}

/* O video nao recebe clique: o alvo e o CARTAO inteiro, senao a metade de cima
   (que e video) engoliria o toque e so a borda funcionaria. No modo calmo o
   video ganha controles proprios e ai ele volta a receber, senao a pessoa nao
   consegue dar play. */
.lancamentos-trilho[data-leque="3"] > .lancamento video { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .lancamentos-trilho[data-leque="3"] > .lancamento video { pointer-events: auto; }
}

/* QUATRO OU MAIS: leque vira pilha ilegivel, entao volta o trilho de rolar. */
.lancamentos-trilho:has(> :nth-child(4)) {
  justify-content: flex-start;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.lancamentos-trilho:has(> :nth-child(4)) > .lancamento { scroll-snap-align: start; }

/* No hover o cartao das pontas SOBE UM POUCO e ganha a borda dourada - um
   convite, nao a acao. Quem endireita e traz pra frente agora e o CLIQUE, e
   deixar o hover fazer o mesmo faria os dois brigarem pelo mesmo `transform`
   (o cartao endireitaria com o mouse em cima e voltaria torto ao sair, no meio
   da troca).
   Vem depois de todas as regras de arranjo de proposito: :has() e media query
   nao acrescentam especificidade, e no empate quem manda e a ordem no arquivo. */
.lancamentos-trilho > .lancamento:hover,
.lancamentos-trilho > .lancamento:focus-visible {
  box-shadow: 0 22px 48px rgba(58, 50, 56, .26);
  border-color: var(--ouro-claro);
}
.lancamento:focus-visible { outline: 2px solid var(--azul-tinta); outline-offset: 3px; }
.lancamento video, .lancamento img {
  display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
}

/* O atributo hidden do HTML perde a queda de braco pra QUALQUER classe que
   declare display - e e exatamente assim que o JS deste projeto esconde
   bloco. Sem esta linha, `elemento.hidden = true` nao surte efeito nenhum.
   Achado em 20/08/2026: as duas janelas do painel abriam juntas por cima do
   painel, e no site os cartoes de contato vazios continuavam na tela. */
[hidden] { display: none !important; }

/* ── Colecoes ──────────────────────────────────────────── */
.colecoes {
  padding: clamp(58px, 8vw, 92px) 0 clamp(64px, 8.5vw, 100px);
  background: var(--branco);
  /* Mesmo corte que a secao de lancamentos usa, e pelo mesmo motivo: os cards
     das pontas do coverflow saem fora da largura da tela de proposito, e sem
     este corte eles davam ROLAGEM LATERAL na pagina inteira - defeito visto no
     celular em 29/08, com o texto da chamada e a faixa de atacado saindo pela
     direita. `clip` e nao `hidden`: hidden criaria um container de rolagem. */
  overflow-x: clip;
}
.colecoes .titulo-secao { color: var(--azul-tinta); }

.colecoes-chamada {
  max-width: 52ch; margin: 18px auto 0; text-align: center;
  color: var(--tinta-suave); font-size: .95rem;
}

/* Carrossel (14/08, virou coverflow 3D em 29/08). Era um trilho horizontal
   com encaixe; agora os cards ficam empilhados em profundidade, o do meio de
   pe e os vizinhos girados pra tras. Referencia aprovada na prancheta.

   POR QUE O CARD NAO CARREGA O ARRANJO. O `transform` do coverflow (posicao,
   giro, tamanho) mora na .vaga, um involucro; o .produto so guarda o levantar
   do hover, que tambem e transform. Sao donos diferentes de propriedades
   diferentes justamente pra nao se apagarem. Foi essa colisao que matou o
   leque de lancamentos em 29/08 ("esta so sobrepondo o video clicado"), e la
   o conserto foi tirar o transform da animacao de entrada. Aqui a entrada do
   movimento.js continua mexendo no .produto e nao encosta na .vaga. */
.vitrine { margin-top: 38px; }

/* A largura do card sai do viewport, nao do container: a mesma medida precisa
   valer pra ALTURA do palco, e porcentagem em height resolveria contra a
   altura do pai, que ainda nao existe. 126px e o que o card tem embaixo da
   foto quadrada (respiro + nome de duas linhas + "ver onde comprar"). */
.carrossel {
  position: relative;
  --card: clamp(238px, 24vw, 292px);
  --alt-card: calc(var(--card) + 126px);
}

/* Palco: os cards saem do fluxo e passam a ser posicionados um sobre o outro.
   `touch-action: pan-y` devolve a rolagem vertical pra pagina - sem isso, o
   dedo subindo em cima do carrossel nao rola o site. */
.produtos {
  position: relative;
  height: calc(var(--alt-card) + 26px);
  perspective: 1400px;
  touch-action: pan-y;
}

/* O -50% do translateX resolve contra a largura do PROPRIO elemento, entao
   `left:50%` mais ele centraliza a vaga sem saber quanto o card mede. E por
   isso que --deslocar pode ser porcentagem: 86% de 292 da os 252px do
   desenho, e no celular 86% de 238 da 205px, sem segunda tabela de numeros. */
.vaga {
  position: absolute; top: 0; left: 50%;
  width: var(--card); height: var(--alt-card);
  --deslocar: 0%; --escala: 1; --girar: 0deg;
  /* --arrasto e escrito pelo JS no PALCO durante o gesto e desce por heranca
     pra todas as vagas: e o que faz o conjunto acompanhar o dedo em vez de
     so pular quando a pessoa solta. Zerado, nao muda nada. */
  transform: translateX(calc(-50% + var(--deslocar) + var(--arrasto, 0px)))
             scale(var(--escala)) rotateY(var(--girar));
  transform-origin: center center;
  transition: transform .8s cubic-bezier(.25, 1, .5, 1),
              opacity .8s cubic-bezier(.25, 1, .5, 1);
}
.vaga > .produto { height: 100%; }

/* A altura da vaga e fixa, entao o nome NAO pode crescer sem limite: duas
   linhas e o que a conta reserva. Nome real do catalogo hoje ja passa disso
   ("Roupa pet soft com capuz e sherpa. Feminha e machinho."), e sem o corte
   ele empurraria o "ver onde comprar" pra fora do card. */
.vaga .produto-nome {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Veu rosa no lugar do escurecimento da referencia. La o fundo e escuro e o
   filtro de brilho afunda o card; aqui o fundo e branco e escurecer derrubaria
   o contraste que ja esta medido peca por peca. */
.vaga::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  background: rgba(253, 239, 244, .30);
  opacity: 0; pointer-events: none;
  transition: opacity .8s cubic-bezier(.25, 1, .5, 1);
}
.vaga:not([data-vaga="0"])::after { opacity: 1; }

.vaga[data-vaga="0"]   { --deslocar: 0%;    --escala: 1;   --girar: 0deg;   opacity: 1;   z-index: 30; }
.vaga[data-vaga="1"]   { --deslocar: 86%;   --escala: .84; --girar: -24deg; opacity: .65; z-index: 20; }
.vaga[data-vaga="-1"]  { --deslocar: -86%;  --escala: .84; --girar: 24deg;  opacity: .65; z-index: 20; }
.vaga[data-vaga="2"]   { --deslocar: 154%;  --escala: .68; --girar: -38deg; opacity: .38; z-index: 10; }
.vaga[data-vaga="-2"]  { --deslocar: -154%; --escala: .68; --girar: 38deg;  opacity: .38; z-index: 10; }
/* Fora do palco: encolhe no centro em vez de sair pela lateral, senao a vaga
   viaja a tela inteira toda vez que o catalogo gira. */
.vaga[data-vaga="fora"] { --deslocar: 0%; --escala: .4; --girar: 0deg; opacity: 0; z-index: 0; pointer-events: none; }

/* Enquanto o dedo arrasta, quem manda e o dedo: transicao ligada faria o
   card correr atras do gesto com meio segundo de atraso. */
.carrossel.arrastando .vaga,
.carrossel.arrastando .vaga::after { transition: none; }

/* ── Pontinhos ─────────────────────────────────────────────
   Fazem um segundo trabalho alem de navegar: contam quantos produtos existem.
   Com o palco mostrando tres e cinco pontos acesos embaixo, a pessoa sabe que
   tem mais coisa do que cabe na tela. */
.carrossel-pontos {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 26px;
}
.carrossel-ponto {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--rosa-borda); cursor: pointer;
  transition: width .3s, background .3s;
}
.carrossel-ponto[aria-current="true"] { width: 28px; background: var(--rosa-acao); }
.carrossel-ponto:focus-visible { outline: 2px solid var(--azul-tinta); outline-offset: 3px; }
.carrossel-pontos:has(> :only-child) { display: none; }

/* ── Setas do carrossel ────────────────────────────────────
   29/08: o topo passou a ser a metade do PALCO, nao do .carrossel, porque o
   .carrossel agora tambem carrega os pontinhos embaixo e 50% dele cairia
   abaixo dos cards. z-index acima de 30, que e a camada do card do meio. */
.carrossel-seta {
  position: absolute; z-index: 40;
  top: calc((var(--alt-card) + 26px) / 2);
  transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--branco); border: 1px solid var(--rosa-borda);
  box-shadow: var(--sombra);
  transition: background .2s, border-color .2s, opacity .2s, transform .2s;
}
.carrossel-seta-esq { left: -14px; }
.carrossel-seta-dir { right: -14px; }
/* O translateY tem que ser repetido: transform e uma propriedade so, e
   escrever `scale` sozinho aqui jogaria a seta pra baixo do lugar. */
.carrossel-seta:hover:not(:disabled) {
  background: var(--rosa-acao); border-color: var(--rosa-acao);
  transform: translateY(-50%) scale(1.06);
}
.carrossel-seta:hover:not(:disabled) .carrossel-bico { border-color: var(--branco); }
/* Fim do trilho: a seta some em vez de ficar apagada ocupando espaco. */
.carrossel-seta:disabled { opacity: 0; pointer-events: none; }
.carrossel.sem-setas .carrossel-seta { display: none; }

.carrossel-bico {
  width: 10px; height: 10px;
  border-top: 2px solid var(--rosa-acao); border-right: 2px solid var(--rosa-acao);
  transition: border-color .2s;
}
.carrossel-seta-dir .carrossel-bico { transform: translateX(-2px) rotate(45deg); }
.carrossel-seta-esq .carrossel-bico { transform: translateX(2px) rotate(-135deg); }
/* Estado de carregando / catalogo indisponivel. */
.aviso-catalogo {
  margin: 0; padding: 34px 20px; text-align: center;
  background: var(--branco); border: 1px dashed var(--rosa-borda);
  border-radius: var(--raio); color: var(--tinta-suave);
}

/* ── Card de produto ───────────────────────────────────── */
.produto {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--rosa-borda);
  border-radius: 14px; padding: 22px; /* 26/08: era 16px, mais respiro no card */
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
/* Filete dourado que se abre no topo do card - mesma assinatura do
   divisor de secao, aplicada como recompensa de hover. */
.produto::before {
  content: ''; position: absolute; top: -1px; left: 50%; right: 50%;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  transition: left .3s ease, right .3s ease;
}
.produto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: var(--ouro-claro);
}
.produto:hover::before { left: 14%; right: 14%; }
.produto-foto { margin: -22px -22px 16px; }
.produto-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px 14px 0 0; }
.produto-foto-vazia {
  aspect-ratio: 1; border-radius: 14px 14px 0 0;
  background:
    radial-gradient(circle at 35% 35%, rgba(175,202,232,.55), transparent 62%),
    radial-gradient(circle at 70% 68%, rgba(240,166,193,.45), transparent 62%),
    var(--rosa-suave);
}
.produto-nome {
  font-family: var(--display); font-size: 1.3rem; font-weight: 600;
  color: var(--azul-tinta); margin-bottom: 4px;
}

/* ── O card virou botao (20/08) ────────────────────────────
   Preco, estrelas e botao de compra sairam do card: a vitrine e referencia,
   e o clique abre o popup com as lojas. O main.js monta cada card como
   <button>, que ja traz teclado e leitor de tela de graca - o reset abaixo
   e o que faz um botao parecer um card. */
.produto {
  appearance: none; -webkit-appearance: none;
  font: inherit; text-align: left; width: 100%;
  cursor: pointer;
}
.produto:focus-visible { outline: 2px solid var(--azul-tinta); outline-offset: 3px; }

/* A linha que avisa que o card e clicavel. Sem ela, um card so com foto e
   nome nao parece levar a lugar nenhum. Empurrada pro rodape do card pra
   todos terminarem na mesma altura, independente do tamanho do nome. */
.produto-ver {
  margin: 12px 0 0; padding-top: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rosa-acao);
}
.produto-nome + .produto-ver { margin-top: auto; }
.produto:hover .produto-ver { color: var(--rosa-profundo); }

/* ── Atacado (20/08) ───────────────────────────────────────
   Saiu de dentro de cada produto e virou uma faixa so, embaixo da vitrine.
   Sem preco: o que ela promete e a quantidade minima; o valor sai na conversa. */
/* 28/08: entra na familia de superficie que o design.md define pro que
   "levanta" - produto, canal de contato e esta faixa: branco, borda rosa
   clara e sombra so no hover. A borda tracejada azul era heranca de 20/08 e
   lia como area provisoria, nao como oferta. */
.atacado {
  margin-top: 34px; padding: 22px 26px; border-radius: 16px;
  background: var(--branco); border: 1px solid var(--rosa-borda);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 26px; text-align: center;
  transition: box-shadow .2s, border-color .2s;
}
.atacado:hover { box-shadow: var(--sombra); border-color: var(--rosa); }
.atacado-titulo {
  font-family: var(--display); font-size: clamp(1.2rem, 3.4vw, 1.45rem);
  font-weight: 600; color: var(--azul-tinta); margin: 0;
}
.atacado-nota { margin: 4px 0 0; font-size: .86rem; color: var(--tinta-suave); }

/* ── Popup de compra (20/08) ───────────────────────────────
   E onde a decisao acontece. <dialog> nativo de proposito: o ::backdrop
   escurece a pagina, o Esc fecha e o foco volta pro card sem uma linha de JS. */
/* ── Altura do popup (02/09) ───────────────────────────────
   O popup nunca teve teto de altura. Enquanto havia UM botao de compra isso
   passou despercebido; com a Kwai cadastrada viraram dois, o conteudo passou
   da tela do celular e o 'overflow: hidden' daqui CORTOU o segundo botao sem
   deixar rolar. Cortar e o comportamento certo pro arredondado da borda, o
   errado era nao ter onde rolar.

   O conserto e em duas partes, e as duas precisam existir:
     1. teto de altura no dialog, senao ele cresce alem da tela;
     2. a rolagem mora no CORPO, nao no dialog - se o dialog inteiro rolasse,
        o X de fechar (position: absolute) subiria junto e sumiria.

   svh e nao vh de proposito: no celular a barra de endereco muda a altura da
   janela ao rolar, que foi exatamente a causa do defeito da abertura na
   sessao de 28/08. A linha em vh fica antes como reserva pra navegador
   antigo, que ignora a de svh. */
.popup {
  --popup-largura: min(440px, 92vw);
  width: var(--popup-largura); padding: 0; border: none; border-radius: 18px;
  background: var(--branco); color: var(--tinta);
  box-shadow: 0 24px 60px rgba(58, 50, 56, .28);
  overflow: hidden;
  max-height: 88vh;
  max-height: 88svh;
}
/* O 'display' MORA NO [open], nunca no .popup solto (corrigido em 02/09).
   O navegador esconde dialog fechado com a propria regra
   'dialog:not([open]) { display: none }'. Regra de autor sem o [open] ganha
   dela por precedencia, e o resultado e o card do produto continuar na tela
   por cima de tudo depois de fechado - foi exatamente o que aconteceu.

   E a mesma armadilha ja registrada no projeto com o atributo 'hidden': o
   navegador desliga o elemento por uma regra fraca, e qualquer display escrito
   a mao passa por cima dela sem avisar. Toda vez que um dialog precisar de
   display proprio, ele vai no seletor de estado. */
.popup[open] { display: flex; flex-direction: column; }
.popup::backdrop { background: rgba(58, 50, 56, .55); }
.popup-fechar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px; border: none;
  background: rgba(255, 255, 255, .92); color: var(--tinta);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(58, 50, 56, .18);
}
.popup-fechar:hover { background: var(--rosa-suave); }
/* ── Galeria do popup (29/08) ──────────────────────────────
   O produto passou a ter mais de uma foto. Uma aparece por vez, e as setas
   trocam. A regra antiga (.popup-foto img com aspect-ratio) foi SUBSTITUIDA,
   nao empilhada: deixar as duas competindo e o empate de especificidade do
   postmortem de 26/08.

   A altura mora na CAIXA, nao na imagem. E o que impede o popup de pular de
   altura enquanto a foto seguinte carrega. Ela era 'aspect-ratio: 1' ate
   02/09; virou altura explicita, pelo motivo no comentario da .popup-galeria
   logo abaixo. */
.popup-foto { position: relative; flex: none; }
/* ALTURA EXPLICITA, e nao aspect-ratio com max-height (corrigido em 02/09).
   A primeira tentativa foi 'aspect-ratio: 1' + 'max-height: 44svh' e ela
   QUEBROU a foto: quando um box tem aspect-ratio e largura automatica, o
   navegador TRANSFERE o limite de altura pra largura pela propria razao. O
   max-height de 44svh virou um max-width de 44svh na pratica, a foto encolheu
   na horizontal e sobrou faixa branca do lado direito.

   A conta aqui e a mesma de antes, escrita direto: quadrada enquanto couber
   (a altura iguala a largura do popup) e mais baixa quando a tela e baixa.
   Sem aspect-ratio nao ha o que transferir, e a largura fica cheia.

   A altura continua sendo definida ANTES da foto carregar, que era o motivo
   original de a proporcao morar na caixa e nao na imagem: o popup nao pula de
   altura enquanto a proxima foto chega. object-fit: cover na img absorve o
   corte, entao nada distorce. */
.popup-galeria {
  position: relative;
  height: min(var(--popup-largura), 44vh);
  height: min(var(--popup-largura), 44svh);
  background: var(--rosa-suave);
}
.popup-galeria img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .18s ease;
}
.popup-galeria img.ativa { opacity: 1; }

/* As setas repetem a linguagem que o carrossel da vitrine ja estabeleceu:
   circulo de 44px, branco, borda rosa, bico desenhado com borda, hover bordo.
   Nao inventar um segundo desenho de seta no mesmo site. A unica diferenca e
   a posicao - aqui elas ficam DENTRO da foto, porque o .popup tem
   overflow: hidden e uma seta em left negativo seria cortada. */
.popup-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--branco); border: 1px solid var(--rosa-borda);
  box-shadow: var(--sombra);
  transition: background .2s, border-color .2s, transform .2s;
}
.popup-seta-ant  { left: 12px; }
.popup-seta-prox { right: 12px; }
/* transform e UMA propriedade so: o translateY precisa ser repetido aqui,
   senao o scale sozinho joga a seta pra fora do eixo. Mesma pegadinha ja
   comentada no carrossel. */
.popup-seta:hover {
  background: var(--rosa-acao); border-color: var(--rosa-acao);
  transform: translateY(-50%) scale(1.06);
}
.popup-seta:hover .popup-bico { border-color: var(--branco); }
.popup-seta:focus-visible { outline: 2px solid var(--azul-tinta); outline-offset: 3px; }

.popup-bico {
  width: 10px; height: 10px;
  border-top: 2px solid var(--rosa-acao); border-right: 2px solid var(--rosa-acao);
  transition: border-color .2s;
}
.popup-seta-prox .popup-bico { transform: translateX(-2px) rotate(45deg); }
.popup-seta-ant  .popup-bico { transform: translateX(2px)  rotate(-135deg); }

/* ARMADILHA JA DOCUMENTADA NESTE PROJETO: 'display' declarado numa classe
   vence o [hidden] embutido do navegador. Produto de foto unica esconde as
   setas pelo atributo hidden, e sem esta linha elas continuariam na tela.
   Nao apagar. */
.popup-seta[hidden] { display: none; }

/* Os pontinhos ficam ABAIXO da foto, nao em cima dela. Em cima, a cor deles
   dependeria da foto que a dona subiu - e nao ha como garantir contraste
   contra uma imagem qualquer. Embaixo, eles reusam exatamente a pilula do
   carrossel, com o mesmo aria-current e o mesmo :has que faz o grupo sumir
   sozinho quando so existe uma foto. */
.popup-pontos {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 16px 0; flex: none;
}
.popup-ponto {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--rosa-borda); cursor: pointer;
  transition: width .3s, background .3s;
}
.popup-ponto[aria-current="true"] { width: 28px; background: var(--rosa-acao); }
.popup-ponto:focus-visible { outline: 2px solid var(--azul-tinta); outline-offset: 3px; }
.popup-pontos:has(> :only-child) { display: none; }
.popup-pontos:empty { display: none; }

/* Sobrescrita de movimento: mora DEPOIS das bases acima de proposito -
   @media nao acrescenta especificidade (playbook de cascata, regra 2). */
@media (prefers-reduced-motion: reduce) {
  .popup-galeria img,
  .popup-seta,
  .popup-ponto { transition: none; }
}

.popup-corpo {
  padding: 20px 22px 24px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;
}
.popup-nome {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--azul-tinta); margin: 0 0 6px;
}
.popup-desc { font-size: .88rem; color: var(--tinta-suave); margin: 0 0 14px; }
.popup-chamada {
  margin: 16px 0 10px; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave);
}
.popup-lojas { display: grid; gap: 10px; }
.popup-loja {
  display: block; text-align: center; text-decoration: none;
  padding: 13px 16px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--rosa-acao); border: 1px solid var(--rosa-acao);
  transition: background .2s, color .2s, transform .2s;
}
.popup-loja:hover { background: var(--rosa-acao); color: var(--branco); transform: translateY(-1px); }
/* A primeira loja e a principal. Quem abre a lista nao pode ver tres opcoes
   iguais e ter que escolher - a loja onde ela mais vende abre na frente. */
.popup-loja:first-child { background: var(--rosa-acao); color: var(--branco); }
.popup-loja:first-child:hover { background: var(--rosa-profundo); border-color: var(--rosa-profundo); }
.popup-vazio { margin: 0; font-size: .86rem; color: var(--tinta-suave); }

/* ── Provas sociais: o desfile (29/08) ─────────────────────
   Avaliacoes reais da loja passando sozinhas, da direita pra esquerda, e
   parando no clique pra dar tempo de ler. Fica logo acima da faixa "porque
   carinho tambem e cuidado".

   POR QUE A FITA TEM A LISTA DUAS VEZES: e o que faz o desfile nao ter fim
   visivel. A animacao anda exatamente METADE da fita e volta ao inicio; como a
   metade e uma copia inteira, o quadro final e igualzinho ao inicial e ninguem
   ve a emenda.

   POR QUE O RESPIRO E `margin-right` E NAO `gap`: com `gap`, 16 cartoes tem 15
   vaos, e metade da largura nao cai exatamente em cima de uma copia - sobra
   meio vao e o desfile pula a cada volta. Com a margem no cartao, cada cartao
   carrega o proprio vao e a metade fecha certo. */
.provas-sociais {
  padding: clamp(50px, 7vw, 78px) 0 clamp(54px, 7.5vw, 86px);
  background: var(--branco);
  overflow-x: clip;
}
.provas-palco {
  margin-top: 26px;
  overflow: hidden;
  /* As pontas somem em degrade em vez de cortar seco na beirada da tela: o
     cartao entra e sai da cena, e nao aparece e some. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.provas-fita {
  display: flex; align-items: center;
  width: max-content;
  cursor: pointer;
  animation: desfilar 64s linear infinite;
}
.provas-fita.pausada { animation-play-state: paused; }
.provas-fita:focus-visible { outline: 2px solid var(--azul-tinta); outline-offset: 4px; }
@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.prova-social {
  flex: 0 0 clamp(268px, 30vw, 380px);
  margin: 0 18px 0 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--rosa-borda); background: var(--branco);
  box-shadow: 0 10px 26px rgba(58, 50, 56, .10);
}
.prova-social img { display: block; width: 100%; height: auto; }

/* Quem pediu menos movimento nao recebe desfile: recebe a mesma fita, parada e
   arrastavel com o dedo. O conteudo continua inteiro - e a regra do projeto,
   dois modos em vez de desligado. */
@media (prefers-reduced-motion: reduce) {
  .provas-fita { animation: none; cursor: default; }
  .provas-palco { overflow-x: auto; scroll-snap-type: x proximity; }
  .prova-social { scroll-snap-align: center; }
}

@media (max-width: 560px) {
  .prova-social { flex-basis: 76vw; margin-right: 12px; }
  .provas-fita { animation-duration: 46s; }
}

/* ── Faixa ─────────────────────────────────────────────── */
/* 28/08: entra no mesmo ritmo proporcional das outras secoes. */
.faixa { background: var(--rosa-acao); padding: clamp(46px, 6.5vw, 68px) 0; }
.faixa-linha { display: flex; align-items: center; justify-content: center; gap: 26px; }
.faixa-pata { width: 34px; height: 34px; background: rgba(255,255,255,.55); flex: none; }
.faixa-frase {
  font-family: var(--display); font-size: clamp(1.4rem, 4.6vw, 2.3rem);
  color: var(--branco); text-transform: uppercase; letter-spacing: .05em;
  text-align: center; margin: 0;
}

/* ── Contato ───────────────────────────────────────────── */
.contato { padding: clamp(58px, 8vw, 92px) 0 clamp(62px, 8vw, 96px); background: var(--rosa-suave); }
.contato-chamada { text-align: center; color: var(--tinta-suave); max-width: 46ch; margin: 0 auto 34px; }
.canais { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.canal {
  display: block; text-decoration: none; background: var(--branco);
  border: 1px solid var(--rosa-borda); border-radius: var(--raio);
  padding: 22px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.canal:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--rosa); }
.canal-rotulo {
  display: block; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rosa-acao); margin-bottom: 7px;
}
.canal-valor {
  display: block; font-family: var(--display); font-size: 1.35rem;
  font-weight: 600; color: var(--azul-tinta); word-break: break-word;
}
.canal-nota { display: block; font-size: .8rem; color: var(--tinta-suave); margin-top: 5px; }

/* ── Rodape ────────────────────────────────────────────── */
.rodape { background: var(--azul); color: var(--azul-fundo); padding: 40px 0 34px; text-align: center; }
.rodape-marca { font-family: var(--display); font-size: 1.7rem; font-weight: 600; margin: 0; }
.rodape-tag {
  font-family: var(--display); font-size: .74rem; letter-spacing: .34em;
  text-transform: uppercase; margin: 2px 0 16px; color: var(--ouro-fundo);
}
.rodape-legal { font-size: .76rem; margin: 0; color: var(--azul-fundo); }

/* ── Telas maiores ─────────────────────────────────────── */
@media (min-width: 780px) {
  .sobre-grade { grid-template-columns: 1fr 1fr; gap: 56px; }
  .hero { padding: 96px 0 500px; }
}

/* No celular entra o corte vertical da mesma cena - gerado no 4:5, nao
   recortado por CSS, pra nao decepar os bichos. */
@media (max-width: 700px) {
  /* ── Coverflow no celular ────────────────────────────────
     O anel de fora SOME em vez de ser empurrado pra fora da tela. Na
     proporcao do desenho ele cai a 154% do card (368px num card de 238), e
     numa tela de 390 isso e a rua: manter desenhado custaria composicao em
     3D que ninguem ve, no aparelho com menos folga de video.

     A perspectiva encolhe junto com o card. 1400 foi medido pro card de 292;
     mantido num card menor ele achata o efeito, e o giro de 24 graus passa a
     ler torto em vez de fundo. */
  .produtos { perspective: 1000px; }
  .vaga[data-vaga="1"]  { --girar: -18deg; }
  .vaga[data-vaga="-1"] { --girar: 18deg; }
  .vaga[data-vaga="2"],
  .vaga[data-vaga="-2"] { --deslocar: 0%; --escala: .4; opacity: 0; pointer-events: none; }
  /* Setas fora: nesta largura elas cairiam em cima dos cards laterais, e o
     gesto natural ja e o dedo. Ficam os pontinhos. */
  .carrossel-seta { display: none; }

  .hero-foto {
    background-position: center bottom;
    background-image: url('../img/hero-4x5.jpg');
    background-image: image-set(
      url('../img/hero-4x5.webp') type('image/webp'),
      url('../img/hero-4x5.jpg') type('image/jpeg')
    );
    background-image: -webkit-image-set(
      url('../img/hero-4x5.webp') type('image/webp'),
      url('../img/hero-4x5.jpg') type('image/jpeg')
    );
  }
  /* O celular herda a mesma logica do computador: bloco ancorado no topo e o
     resto da tela pra cena. O respiro fixo de antes (332px) foi feito pro
     desenho antigo, centralizado. */
  /* 29/08: no celular o bloco de abertura desceu pro MEIO da tela, a pedido do
     fundador - titulo, subtitulo, botao e a trava da marca juntos.
     `safe center` e a rede: se um dia o bloco crescer mais que a tela, centro
     puro transborda pros DOIS lados e decepa o topo por baixo da pilula, que e
     exatamente o defeito que fez a abertura ser ancorada no topo la em 20/08.
     Navegador que nao entende `safe` ignora a segunda linha e fica no centro
     comum, entao nao ha perda em declarar as duas. */
  .hero {
    padding: clamp(18px, 3vh, 34px) 0 clamp(32px, 7vh, 72px);
    justify-content: center;
    justify-content: safe center;
  }
  /* Ancorado no meio, a trava da marca nao precisa mais do respiro de topo que
     existia pra ela nao ser decepada pela barra. */
  .hero-logo { margin-top: 0; }
  /* Sem cobertura sobre a foto tambem no celular: o halo por letra e o unico
     recurso, e ele agora e o mesmo da pagina inteira (ver o bloco do halo la em
     cima). Os reforcos separados que existiam aqui sairam em 29/08 quando o
     valor do celular virou o valor de todo mundo. */
}

@media (max-width: 560px) {
  .topo-nav { gap: 16px; }
  .topo-nav a { font-size: .68rem; letter-spacing: .1em; }
  .faixa-linha { gap: 14px; }
  .faixa-pata { width: 24px; height: 24px; }
  /* 29/08: com o coverflow, o card do celular deixou de ser "um por linha" e
     voltou a ser o mesmo card do computador, so menor. Saiu daqui o que
     existia pro trilho: o respiro de 16px, o recorte deitado 4/3 da foto e as
     medidas do flex. Motivo: a altura do palco e calculada (foto quadrada +
     126px), entao card com anatomia diferente por largura estouraria a conta,
     e a prancheta aprovada mostra a foto quadrada nos dois tamanhos. */
  .produto-nome { font-size: 1.18rem; }
  /* No celular o leque continua leque: o cartao do meio manda e os das pontas
     vazam pelas beiradas, exatamente como na referencia. Sem isto, tres cartoes
     de 62% somariam quase o dobro da tela e virariam pilha. O corte fica por
     conta do overflow da secao. */
  .lancamentos-trilho { gap: 14px; padding: 10px 0 16px; }
  .lancamento { flex: 0 0 54%; }
  .lancamentos-trilho[data-leque="3"] > .lancamento[data-slot="-1"] {
    transform: translate(30px, 20px) rotate(-9deg) scale(.96);
  }
  .lancamentos-trilho[data-leque="3"] > .lancamento[data-slot="1"] {
    transform: translate(-30px, 20px) rotate(9deg) scale(.96);
  }
  /* No celular a poca de luz encolhe junto com o leque, senao ela vira um
     clarao na secao inteira em vez de um foco. */
  .lancamentos-trilho::before { width: min(560px, 150%); }
  /* Trilho de 4 ou mais volta a mostrar a beirada do proximo, como antes. */
  .lancamentos-trilho:has(> :nth-child(4)) > .lancamento { flex: 0 0 62%; }
  .colecoes-chamada { font-size: .9rem; }
}

/* Quem pediu menos movimento no sistema recebe a pagina parada. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn-vidro:hover, .produto:hover, .canal:hover { transform: none; }
}

html { scroll-behavior: smooth; }

/* 29/08: com a pilula flutuante o topo deixou de ocupar espaco de layout, entao
   clicar num item do menu levava a secao pra debaixo da capsula e o titulo dela
   ficava escondido. Este respiro e o lugar que a pilula ocupa na tela, avisado
   ao navegador na hora de parar a rolagem. */
#lancamentos, #colecoes, #contato, #sobre { scroll-margin-top: 92px; }
@media (max-width: 560px) {
  #lancamentos, #colecoes, #contato, #sobre { scroll-margin-top: 76px; }
}

/* ── Abertura no celular: o video no lugar da foto (29/08) ──────────────────
   FICA NO FIM DO ARQUIVO DE PROPOSITO. Ela sobrescreve o background-image que
   o bloco de celula mais acima declara pra .hero-foto, e media query NAO
   acrescenta especificidade: no empate ganha quem vem depois. Foi exatamente
   essa armadilha que deixou a manchete presa no centro por dois dias. Se
   alguem mover este bloco pra cima, ele para de valer em silencio.

   A condicao junta tela estreita COM modo normal de movimento, que e o mesmo
   par que o resto da abertura usa. Quem pediu menos movimento nao recebe video
   tocando sozinho: fica com a foto parada do bloco de cima. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  /* A foto de espera do celular e o PRIMEIRO QUADRO da sequencia 9:16, pelo
     mesmo motivo do computador: a cena comeca exatamente nessa imagem, entao
     quando ela acende a troca acontece de uma imagem pra ela mesma e ninguem
     ve. Apontar pra outra foto aqui traz de volta o salto que o fundador
     reclamou em 29/08. */
  .hero-foto {
    background-image: url('../img/hero-cena-9x16/quadro-001.jpg');
    background-image: image-set(url('../img/hero-cena-9x16/quadro-001.jpg') type('image/jpeg'));
  }
}

/* ═══════════════════════════════════════════════════════════
   FUNDO DA PAGINA - direcao B (29/08/2026)
   Aprovada pelo fundador no canvas, referencia: o site da Claren
   (Projetos/Dominio/claren-estetica), cliente da Vitrine Rapida.

   A REGRA, EM UMA FRASE: a pagina fica no tom quente (--areia) e as secoes de
   conteudo viram BLOCOS quase brancos (--bloco) com o canto de cima
   arredondado, fechados por um fio de ouro. O branco PURO fica reservado pro
   card.

   Por que o bloco nao e branco puro: os cards de produto, de lancamento, de
   avaliacao e de contato sao brancos. Bloco branco faria eles sumirem dentro
   dele. E isso que faz o sistema funcionar nas seis secoes e nao so numa.

   O ritmo alterna bloco / base:
     bloco  provas + filosofia   (sobe por cima da foto da abertura)
     base   sobre
     bloco  lancamentos + colecoes
     base   provas sociais
     -      faixa bordo, sem mexer
     bloco  contato
     -      rodape azul, sem mexer

   SOBRE OS DESENHOS: sao marca d'agua, nao ilustracao. Sempre cortados por
   uma beirada (o deslocamento negativo no background-position e o que corta),
   sempre fora da linha de leitura, e num tom quase igual ao da superficie.
   Na primeira rodada eles estavam mais escuros e caiam em cima do texto; as
   duas coisas foram corrigidas olhando a pagina inteira, nao a secao isolada.
   Eles entram como background-image da propria secao (e nao em ::before) pra
   nao disputar pseudo-elemento com nada que ja existe.

   Este bloco vive no FIM do arquivo de proposito: ele sobrescreve o fundo das
   secoes, e @media nao acrescenta especificidade (ver css_cascata_playbook).
   ═══════════════════════════════════════════════════════════ */
:root {
  --areia: #FBEFF3;
  --bloco: #FFFDFD;
  /* ATENCAO - MESMA MEDIDA EM DOIS LUGARES.
     Estes dois tons sao a cor do TRACO dos desenhos, e o valor real esta
     dentro de cada data URI logo abaixo (data URI nao aceita var()). Eles
     existem aqui declarados por um motivo so: e por eles que o
     `npm run contraste` consegue medir o pior caso, que e o texto cair
     exatamente em cima de um desenho. Mexeu na cor de um desenho, mexa aqui. */
  --traco-bloco: #FAE4EC;
  --traco-areia: #F6E1E7;
  --raio-bloco: 56px;
  --fio-ouro: inset 0 1px 0 rgba(201, 169, 97, .55);
  --d-coleira: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 145.49 116.35%22%3E%3Cg transform=%22translate%2872.74 58.18%29 rotate%2814%29 translate%28-64.00 -44.00%29%22%3E%3Cpath d=%22M10 30 h100 a14 14 0 0 1 0 28 h-100 a14 14 0 0 1 0-28z M52 30 v28 M68 30 v28 M60 58 v14 M60 72 a11 11 0 1 0 .1 0z%22 fill=%22none%22 stroke=%22%23FAE4EC%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-coleira-e: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 143.50 112.69%22%3E%3Cg transform=%22translate%2871.75 56.34%29 rotate%28-12%29 translate%28-64.00 -44.00%29%22%3E%3Cpath d=%22M10 30 h100 a14 14 0 0 1 0 28 h-100 a14 14 0 0 1 0-28z M52 30 v28 M68 30 v28 M60 58 v14 M60 72 a11 11 0 1 0 .1 0z%22 fill=%22none%22 stroke=%22%23FAE4EC%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-osso: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 134.18 86.43%22%3E%3Cg transform=%22translate%2867.09 43.21%29 rotate%28-12%29 translate%28-62.00 -31.00%29%22%3E%3Cpath d=%22M8 26 a13 13 0 1 1 12-16 a13 13 0 1 1 12 16 h44 a13 13 0 1 1 12 16 a13 13 0 1 1-12 16 h-44 a13 13 0 1 1-12-16 a13 13 0 1 1-12-16z%22 fill=%22none%22 stroke=%22%23FAE4EC%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-osso-d: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 137.09 97.28%22%3E%3Cg transform=%22translate%2868.55 48.64%29 rotate%2818%29 translate%28-62.00 -31.00%29%22%3E%3Cpath d=%22M8 26 a13 13 0 1 1 12-16 a13 13 0 1 1 12 16 h44 a13 13 0 1 1 12 16 a13 13 0 1 1-12 16 h-44 a13 13 0 1 1-12-16 a13 13 0 1 1-12-16z%22 fill=%22none%22 stroke=%22%23FAE4EC%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-casinha: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 123.13 116.32%22%3E%3Cg transform=%22translate%2861.56 58.16%29 rotate%288%29 translate%28-55.00 -51.00%29%22%3E%3Cpath d=%22M8 46 L54 8 L100 46 M18 46 v50 h72 v-50 M40 96 v-28 a14 14 0 0 1 28 0 v28%22 fill=%22none%22 stroke=%22%23FAE4EC%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-casinha-a: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 123.13 116.32%22%3E%3Cg transform=%22translate%2861.56 58.16%29 rotate%28-8%29 translate%28-55.00 -51.00%29%22%3E%3Cpath d=%22M8 46 L54 8 L100 46 M18 46 v50 h72 v-50 M40 96 v-28 a14 14 0 0 1 28 0 v28%22 fill=%22none%22 stroke=%22%23F6E1E7%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-novelo: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 118.61 118.61%22%3E%3Cg transform=%22translate%2859.30 59.30%29 rotate%2812%29 translate%28-50.00 -50.00%29%22%3E%3Cpath d=%22M50 6 a44 44 0 1 0 .1 0z M12 26 c32 12 62 36 74 66 M18 64 c28-4 54-22 66-46 M50 6 c-18 28-20 62-6 88%22 fill=%22none%22 stroke=%22%23FAE4EC%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-novelo-a: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 115.85 115.85%22%3E%3Cg transform=%22translate%2857.92 57.92%29 rotate%28-10%29 translate%28-50.00 -50.00%29%22%3E%3Cpath d=%22M50 6 a44 44 0 1 0 .1 0z M12 26 c32 12 62 36 74 66 M18 64 c28-4 54-22 66-46 M50 6 c-18 28-20 62-6 88%22 fill=%22none%22 stroke=%22%23F6E1E7%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-peixe-a: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 113.01 73.67%22%3E%3Cg transform=%22translate%2856.50 36.84%29 rotate%28-14%29 translate%28-52.00 -25.00%29%22%3E%3Cpath d=%22M6 30 c22-24 58-24 74 0 c-16 24-52 24-74 0z M80 30 l20-16 v32z M28 24 a4 4 0 1 0 .1 0z%22 fill=%22none%22 stroke=%22%23F6E1E7%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E');
  --d-pata: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120.93 114.08%22%3E%3Cg transform=%22translate%2860.47 57.04%29 rotate%28-16%29 translate%28-50.00 -45.00%29%22%3E%3Cpath d=%22M50 66 a24 20 0 1 0 .1 0z M24 40 a10 13 0 1 0 .1 0z M42 28 a10 14 0 1 0 .1 0z M62 28 a10 14 0 1 0 .1 0z M79 41 a10 13 0 1 0 .1 0z%22 fill=%22%23FAE4EC%22/%3E%3C/g%3E%3C/svg%3E');
  --d-pata-p: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 126.43 120.91%22%3E%3Cg transform=%22translate%2863.22 60.45%29 rotate%2822%29 translate%28-50.00 -45.00%29%22%3E%3Cpath d=%22M50 66 a24 20 0 1 0 .1 0z M24 40 a10 13 0 1 0 .1 0z M42 28 a10 14 0 1 0 .1 0z M62 28 a10 14 0 1 0 .1 0z M79 41 a10 13 0 1 0 .1 0z%22 fill=%22%23FAE4EC%22/%3E%3C/g%3E%3C/svg%3E');
}

body { background: var(--areia); }

/* ── As superficies ──────────────────────────────────────── */
.sobre, .provas-sociais { background: transparent; }

.provas {
  background:
    var(--d-pata) right -46px bottom 30px / 210px auto no-repeat,
    var(--d-coleira-e) left -54px top 96px / 200px auto no-repeat,
    var(--bloco);
}
.filosofia { background: var(--bloco); }

.sobre {
  background:
    var(--d-novelo-a) left -60px bottom -50px / 230px auto no-repeat,
    var(--d-peixe-a) right -40px top 70px / 210px auto no-repeat,
    transparent;
}

.lancamentos {
  background:
    var(--d-coleira) right -56px top 60px / 230px auto no-repeat,
    var(--bloco);
}
.colecoes {
  background:
    var(--d-osso) left -70px bottom 250px / 300px auto no-repeat,
    var(--d-casinha) right -48px bottom 150px / 210px auto no-repeat,
    var(--d-pata-p) left -40px top 470px / 150px auto no-repeat,
    var(--bloco);
}

.provas-sociais {
  background:
    var(--d-casinha-a) left -44px top 40px / 190px auto no-repeat,
    transparent;
}

.contato {
  background:
    var(--d-osso-d) right -60px top 40px / 240px auto no-repeat,
    var(--d-novelo) left -46px bottom 40px / 170px auto no-repeat,
    var(--bloco);
}

/* ── O canto arredondado e o fio de ouro ─────────────────── */
/* Quem leva o canto e a PRIMEIRA secao de cada bloco. Como duas delas podem
   nascer escondidas (.provas some quando nao ha peca vendida, .lancamentos
   quando nao ha lancamento), o canto e declarado nas duas e retirado da
   segunda so quando a primeira esta de fato na tela. */
.provas, .filosofia, .lancamentos, .colecoes, .contato {
  border-radius: var(--raio-bloco) var(--raio-bloco) 0 0;
  box-shadow: var(--fio-ouro);
}
.provas:not([hidden]) + .filosofia,
.lancamentos:not([hidden]) + .colecoes {
  border-radius: 0;
  box-shadow: none;
}

/* O primeiro bloco sobe por cima da foto da abertura: e o movimento que veio
   da Claren, e o que costura a foto com a pagina. */
.provas, .filosofia { position: relative; z-index: 2; margin-top: -44px; }
.provas:not([hidden]) + .filosofia { margin-top: 0; z-index: auto; }

/* ── Celular ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  :root { --raio-bloco: 34px; }
  /* UM desenho por superficie. Dois numa tela de 390 viram poluicao, e o
     segundo quase sempre cai em cima do texto. */
  .provas   { background: var(--d-pata) right -34px bottom -30px / 150px auto no-repeat, var(--bloco); }
  .sobre    { background: var(--d-novelo-a) left -52px bottom -44px / 172px auto no-repeat, transparent; }
  .lancamentos { background: var(--d-coleira) right -44px top 18px / 176px auto no-repeat, var(--bloco); }
  .colecoes { background:
                var(--d-osso) left -58px bottom 196px / 214px auto no-repeat,
                var(--d-casinha) right -38px bottom 262px / 150px auto no-repeat,
                var(--bloco); }
  .provas-sociais { background: var(--d-peixe-a) right -30px top 44px / 152px auto no-repeat, transparent; }
  .contato  { background: var(--d-osso-d) right -42px top 24px / 164px auto no-repeat, var(--bloco); }
  .provas, .filosofia { margin-top: -30px; }
  .provas:not([hidden]) + .filosofia { margin-top: 0; }
}

/* ── Menos movimento / menos enfeite ─────────────────────── */
/* Quem pediu modo calmo continua vendo o sistema de superficie (ele nao e
   movimento), mas sem os desenhos: eles sao decoracao pura. */
@media (prefers-reduced-motion: reduce) {
  .provas, .sobre, .lancamentos, .colecoes, .provas-sociais, .contato {
    background-image: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   LEITURA DA ABERTURA (29/08/2026)
   Pedido do fundador, olhando a pagina no aparelho: "branco quase nao da pra
   ver direito o que ta escrito ... pode ser que seja bom escurecer um pouco o
   fundo tambem, colocar tipo uma sombra escura no fundo e deixar o texto
   normal."

   O QUE MUDA E POR QUE. Ate aqui a leitura era sustentada por um halo BRANCO
   por letra, escolhido em 14/08 justamente pra nao por cobertura sobre a foto.
   O halo funciona quando o texto e escuro e o fundo e claro; na cena atual ele
   engrossa o glifo e a manchete le borrada, que e o que ele viu.

   A troca inverte o esquema: entra um escurecimento suave sobre a foto e o
   texto passa a ser CLARO, com uma sombra escura discreta so pra definir a
   borda. E o par que funciona junto - escurecer o fundo mantendo a tinta
   escura teria deixado pior.

   Isto REVERTE, com pedido dele por escrito, a decisao de 14/08 de nao ter
   cobertura nenhuma sobre a foto. O degrade e mais forte em cima, onde o texto
   assenta, e some embaixo, onde os bichos aparecem: a cena continua limpa na
   parte que importa.
   ═══════════════════════════════════════════════════════════ */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Medido, nao chutado. Com .62 no topo a manchete dava 6.84:1 contra o
     minimo de 4.5 - sobrava escuro. Baixou pro que ainda passa com folga, que
     e o que ele pediu ("escurecer UM POUCO"). A parada do meio continua forte
     de proposito: no celular o bloco de texto fica no MEIO da tela, e nao no
     topo como no computador. Embaixo some, pra cena dos bichos ficar limpa. */
  /* 30/08, terceira medicao: com o texto em AZUL (mais escuro que branco) as
     margens ficaram no fio - manchete 3.34:1 contra o piso 3.0 e subtitulo
     4.50:1 contra 4.5. A abertura tem 85 quadros e basta um mais claro pra
     derrubar. Aprofundado o suficiente pra sobrar folga, e nao mais. */
  background: linear-gradient(180deg,
    rgba(26, 14, 20, .60) 0%,
    rgba(26, 14, 20, .56) 28%,
    rgba(26, 14, 20, .46) 52%,
    rgba(26, 14, 20, .20) 76%,
    rgba(26, 14, 20, 0) 100%);
}
/* Sobe uma camada: o escurecimento agora ocupa a de baixo. */
.hero-conteudo { z-index: 2; }

/* 30/08: o bloco inteiro da abertura vai a BRANCO PURO, a pedido do fundador
   ("o texto totalmente branco, ele deve ficar elegante"). Antes o subtitulo
   era off-white e a tagline dourada; tres tons diferentes num bloco de tres
   linhas e o que tirava a elegancia dele. Um tom so, hierarquia por PESO e
   por tamanho, que e como a pagina inteira ja funciona desde a troca pra
   Montserrat. */
/* 30/08, segunda passada: o fundador viu a prancheta (que tinha ficado na
   versao antiga, texto #2F4459 com halo branco) e pediu a COR de volta no
   texto - "azulzinha elegante".

   O #2F4459 nao pode voltar como esta: ele e escuro, e escuro sobre foto
   escurecida some. O azul entra CLARO, e o tom escolhido nao e novo - e o
   --azul, o azul bebe que ja assina o rodape. Continua sendo um bloco de UM
   tom so: o subtitulo e o mesmo azul lavado, mais claro, porque em corpo
   pequeno o azul bebe cheio nao alcanca os 4.5:1 que texto normal exige. A
   manchete alcanca porque conta como texto grande (32.8px em peso 600). */
.hero-titulo, .hero-marca { color: var(--azul); }
.hero-sub, .hero-tagline { color: #E2EDF8; }

/* A sombra vira sopro, nao carimbo. Sombra curta e dura e o que faz texto
   sobre foto parecer legenda de banco de imagem; ela some e quem carrega o
   contraste passa a ser o escurecimento do fundo (medido: 5.64:1 no
   computador e 6.80:1 no celular, contra o minimo de 4.5). O que fica e um
   halo largo e fraco, so pra descolar a letra da textura da foto. */
.hero-titulo, .hero-sub, .hero-marca, .hero-tagline {
  text-shadow:
    0 1px 1px rgba(20, 10, 15, .28),
    0 4px 24px rgba(20, 10, 15, .38);
}

/* Peso 400 no subtitulo (era 500) e um respiro a mais entre as letras: com a
   manchete em 600 e os dois em branco, o que separa um do outro passa a ser o
   peso. Foi assim que ele deixou de competir com ela. */
.hero-sub { font-weight: 400; letter-spacing: .014em; line-height: 1.6; }

/* No celular o bloco de texto fica no MEIO da tela (o .hero centraliza a
   partir de 29/08), e e justamente ali que a foto e mais clara. Com o degrade
   do computador a manchete media 4.44:1 e o subtitulo 3.75:1, os dois abaixo
   do minimo de 4.5. Aqui o escuro deixa de ser "mais forte em cima" e vira uma
   FAIXA, com o pico onde o texto assenta. Embaixo continua sumindo, pra cena
   dos bichos ficar limpa. */
@media (max-width: 700px) {
  .hero::before {
    background: linear-gradient(180deg,
      rgba(26, 14, 20, .46) 0%,
      rgba(26, 14, 20, .56) 30%,
      rgba(26, 14, 20, .60) 50%,
      rgba(26, 14, 20, .44) 70%,
      rgba(26, 14, 20, .12) 88%,
      rgba(26, 14, 20, 0) 100%);
  }
}

/* A trava da marca perde o halo branco (30/08).
   O halo existia porque a logo e escura e precisava se descolar da caminha
   rosa. Com a abertura escurecida e a logo em versao CLARA, ele deixou de ter
   funcao e passou a ATRAPALHAR: tres brilhos brancos empilhados, o maior com
   26px de raio, formavam uma mancha clara em volta da marca e lavavam a
   assinatura fina em ouro que fica embaixo do nome.
   No lugar entra uma sombra escura curta, que e o que separa marca clara de
   foto clara sem por luz nenhuma na cena. */
.hero-logo img {
  /* 30/08, segunda tentativa. O fundador manteve a logo ORIGINAL (escura) e
     pediu so pra tirar a luz branca. Tirar por completo nao funciona: medido,
     o nome fica em 1.14:1 e a assinatura em 1.50:1 sobre a abertura
     escurecida - e a assinatura nao leria nem sem escurecimento nenhum,
     porque e um dourado medio sobre parede de tom medio.
     O que incomodava nao era o contorno, era o RAIO: tres brilhos empilhados,
     o maior de 26px, formavam a mancha clara. Aqui fica so o primeiro, curto,
     que e contorno e nao luz de fundo. */
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, .95))
    drop-shadow(0 0 3px rgba(255, 255, 255, .7))
    drop-shadow(0 2px 10px rgba(20, 10, 15, .45));
}

/* Mais respiro entre a marca e a manchete (30/08, pedido do fundador: "ajuste
   um pouco mais para cima do texto principal"). Os 6px de antes foram
   calibrados quando a trava terminava na assinatura, que ja fazia o papel de
   afastamento; sem ela, a listra dourada encostava na manchete. */
.hero-logo { margin-bottom: clamp(20px, 3.2vh, 38px); }