/* ══════════════════════════════════════════════════════════════════════════
   Home do Essenti — sistema VENICE.
   A linguagem é de revista de perfumaria, não de marketplace: papel, serifa,
   filete. A tensão do produto é luxo (a categoria) contra dado cru (o
   diferencial) — a resolução é dar forma editorial ao conteúdo factual.
   Fonte: `documentacao/Redesign_VENICE.MD`. A marca é preservada: a Material
   Lettering continua sendo a voz do logo (`PRODUCT.md:45`).
   ══════════════════════════════════════════════════════════════════════════ */

/* O `:root` mudou para `tokens.css` e o card inteiro para `card.css` — item 6
   do PLANO-VISUAL.md. Os dois eram blocos deste arquivo; agora são arquivos
   próprios, carregados antes dele (a ordem relativa é a mesma, e a verificação
   é diff de pixel zero). Este arquivo ficou com o que é da home. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--papel);color:var(--tinta);font-family:var(--font-sans);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
::selection{background:var(--verde-muito-claro);color:var(--verde-escuro)}
:focus-visible{outline:2px solid var(--ouro-texto);outline-offset:2px;border-radius:2px}
input,select{caret-color:var(--verde)}
*{scrollbar-width:thin;scrollbar-color:rgba(19,26,21,.28) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(19,26,21,.24);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.container{width:100%;max-width:1360px;margin:0 auto;padding:0 1.5rem}

/* O SKIP LINK mudou para `tokens.css` em 01/11/2026: morava aqui, e esta
   folha so e carregada pela home — as outras nove paginas tinham <main> sem
   `id` e nenhum skip-link. `tokens.css` e a unica folha que todas carregam. */

/* ══ O KICKER ════════════════════════════════════════════════════════════
   O `.eyebrow` não tinha regra base em lugar nenhum — só quatro sobrescritas
   de `color` e `margin-bottom`, uma por contexto. O elemento renderizava como
   corpo de texto (16px / 400 / sem caixa-alta) e as quatro declarações
   `::before{background:...}` estavam mortas: sem `content`, nada era desenhado.

   O `::before` é absoluto, e não `inline-flex` com `gap`. Medido: com flex o
   "Explore por famílias" descia 7px e o `/guias` 13px, porque o flex muda a
   linha de base do texto. Com `inline-block` + `line-height:1` + `padding-left`
   + traço absoluto, o deslocamento é zero no hero e em "Explore por famílias".
   Em "Destaques do dia" o ganho é −14px, e é correção: aquele eyebrow era
   `display:block` e herdava uma caixa de linha de 25,6px para 11,5px de texto.
   O traço é ouro: é o fio editorial que separa o rótulo do corpo. */
.eyebrow{display:inline-block;line-height:1;position:relative;padding-left:26px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ouro-texto)}
.eyebrow::before{content:'';position:absolute;left:0;top:50%;width:18px;height:1px;
  margin-top:-.5px;background:currentColor}

/* ── O NÚMERO DE SEÇÃO ────────────────────────────────────────────────────
   A home tinha ícone em dois títulos de seção (estrela no carrossel, chama na
   grade) e nenhum nos outros quatro. Isso não é hierarquia, é acidente: dois
   blocos marcados, quatro não. O número em mono faz o trabalho do ícone sem
   repetir o vocabulário do card, e — ao contrário do ícone — ordena a leitura.
   É o mesmo gesto que o `/guias` já usa (`counter` em `--font-data`), então a
   home passa a falar a língua do resto do site.
   `aria-hidden` porque a ordem já está no DOM; o leitor de tela não precisa
   ouvir "zero um" antes de cada manchete. */
.secao-num{font-family:var(--font-data);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;color:var(--ouro-texto);flex-shrink:0;
  padding-top:.15rem;font-variant-numeric:tabular-nums}

/* ══ FITA DE RADAR (Redesign_VENICE.MD §6.3) ═════════════════════════════
   A faixa que mais muda a percepção de "isto está vivo". Rola sob o header,
   em mono, com o dado real: perfume, R$/ml e a queda observada.
   Só entra no DOM quando há queda real para afirmar — o `home.js` a esconde
   se a base não tem desconto. Um elemento de "tempo real" com número falso é
   o oposto do que o site existe para fazer (`PRODUCT.md:37`). */
.fita{background:var(--tinta);color:var(--creme);overflow:hidden;padding:.7rem 0;
  max-width:100%;min-height:43px;
  font-family:var(--font-data);border-bottom:1px solid rgba(244,239,228,.08)}
.fita[hidden]{display:none}
/* A ALTURA ESTÁ RESERVADA de propósito (`min-height` acima).
   A fita é o primeiro elemento depois do header e nasce vazia até o `home.js`
   pintar. Sem altura, ela ocupava 0 px e empurrava a página inteira para baixo
   quando o dado chegava — medido em 31/10 num carregamento frio: 77 px de pulo
   e CLS 0,206 (o limite do "bom" é 0,1). Com a altura fixa o lugar já existe
   desde o primeiro paint e nada se desloca.
   O valor sai da própria caixa: 0,7rem de padding em cima e embaixo (22,4 px)
   mais a linha de 0,76rem — a fita mede 42,81 px com conteúdo. */
.fita-carregando .fita-faixa{animation:none;display:flex;align-items:center;
  gap:2.5rem;padding-inline:1.2rem}
/* Esqueleto: ocupa o lugar reservado enquanto o dado não chega, para o espaço
   não ficar um bloco preto vazio. É indicador de carregamento, não conteúdo. */
.fita-esqueleto{display:inline-block;flex:0 0 auto;height:.62rem;border-radius:999px;
  background:linear-gradient(90deg,rgba(244,239,228,.08),rgba(244,239,228,.20),rgba(244,239,228,.08));
  background-size:200% 100%;animation:brilha 1.5s linear infinite}
.fita-esqueleto:nth-child(2n){width:118px}
.fita-esqueleto:nth-child(2n+1){width:168px}
@keyframes brilha{from{background-position:200% 0}to{background-position:-200% 0}}
/* O brilho é indicador de carregamento, não conteúdo — com movimento reduzido
   ele fica parado. A fita em si continua rolando: decisão do dono, 30/10. */
@media (prefers-reduced-motion:reduce){.fita-esqueleto{animation:none}}
.fita-faixa{display:flex;width:max-content;will-change:transform;
  animation:corre 48s linear infinite}
.fita-item{display:inline-flex;align-items:baseline;gap:.5rem;font-size:.76rem;
  letter-spacing:.02em;white-space:nowrap;color:rgba(244,239,228,.66);margin-right:2.5rem}
.fita-item b{color:var(--creme);font-weight:700}
.fita-item .queda{color:var(--ouro-claro);font-weight:700}
/* Loop perfeito: `home.js` escreve a lista duas vezes (`html + html`), então
   -50% cai exatamente no início da segunda cópia e a emenda é invisível.
   `translate3d` mantém a animação na camada de composição (sem repaint). */
@keyframes corre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Pausa ao passar o mouse ou focar dentro da faixa. */
.fita:hover .fita-faixa,.fita:focus-within .fita-faixa{animation-play-state:paused}
/* `prefers-reduced-motion` NÃO desliga mais esta fita — decisão do dono, 30/10:
   a faixa é decorativa e o movimento é o ponto dela. O escape continua no
   hover/focus acima, e no celular ela já nasce rolável, sem animação nenhuma.
   Para restaurar, é uma linha: `.fita-faixa{animation:none}`. */
/* ── No celular a fita não rola sozinha: vira faixa que o dedo arrasta ────
   Marquee em tela estreita é ruim de ler — o item entra e sai antes de terminar
   de ser lido — e briga com o gesto de rolagem da página. Aqui o conteúdo
   continua todo alcançável, só quem decide o ritmo é quem lê. */
@media (max-width:768px){
  .fita{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .fita::-webkit-scrollbar{display:none}
  .fita-faixa{animation:none;padding-inline:1rem}
}

/* ══ HERO — full-bleed editorial (Redesign_VENICE.MD §6.2) ═══════════════ */
.hero{position:relative;background:var(--verde-fundo);color:var(--creme);overflow:hidden;
  min-height:min(86vh,740px);display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0}
/* Dois véus. O de 105° escurece a esquerda e deixa a direita respirar; o
   vertical garante contraste na base, onde a manchete encosta. Um só
   gradiente de 90° apagava a foto inteira por igual. */
.hero-veu{position:absolute;inset:0;z-index:1;background:
  linear-gradient(105deg,rgba(19,26,21,.94) 0%,rgba(19,26,21,.72) 42%,rgba(19,26,21,.18) 78%),
  linear-gradient(to top,rgba(19,26,21,.90),transparent 55%)}
.hero-inner{position:relative;z-index:2;width:100%;padding:3.5rem 1.5rem 3.25rem;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:flex-end;gap:3rem}
/* ── A ALTURA DO HERO NÃO PODE DEPENDER DA FONTE ──────────────────────────
   O hero é `align-items:flex-end`: o bloco de texto encosta na base. Se a
   altura do bloco muda, o TOPO dele anda — e é isso que o PageSpeed mediu
   como CLS 0,23 em 31/10.

   Medido com Playwright a 1350×940, com e sem os arquivos de fonte:

     largura   altura sem fonte   altura com fonte   deslocamento
     1440      525 px             417 px             108 px
     1280      608 px             583 px              25 px
     1100      577 px             552 px              25 px
      900      523 px             523 px               0 px

   A causa é a quebra de linha do <h1>: em 1440 o fallback ocupa 3 linhas
   (250 px) e a Playfair ocupa 2 (166 px). Nenhum `size-adjust` resolve isso,
   porque o problema é a CONTAGEM de linhas, não a largura do glifo.

   `min-height` com o maior valor medido (608) trava a altura: o bloco nunca
   encolhe, então o topo nunca anda. O conteúdo continua na base porque
   `align-items:flex-end` o alinha ao fim da linha esticada. O espaço extra
   fica ACIMA do texto, dentro do hero — a posição visível não muda.

   Abaixo de 1100 o deslocamento medido é 0 a 28 px e a página já pontua
   acima de 90; a regra fica só onde ela é necessária. */
@media (min-width:1100px){.hero-inner{min-height:608px}}
.hero .eyebrow{color:var(--ouro-claro)}
.hero h1{font-family:var(--font-serif);font-size:clamp(2.5rem,6.6vw,5rem);font-weight:500;
  line-height:1.04;letter-spacing:-.03em;color:var(--creme);margin-bottom:1rem;
  text-wrap:balance;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--ouro-claro);font-weight:400}
.hero-sub{font-size:1.02rem;line-height:1.55;color:rgba(244,239,228,.82);max-width:54ch;text-wrap:pretty}
/* Os três selos são uma régua, não três adesivos: um filete entre eles, sem
   pílula, sem fundo. Lido como rodapé do hero — a informação continua toda
   lá, mas deixa de competir com a manchete. */
.hero-selos{display:flex;flex-wrap:wrap;margin-top:1.85rem}
.hero-selo{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;
  color:rgba(244,239,228,.72);padding:0 1.15rem}
.hero-selo:first-child{padding-left:0}
.hero-selo + .hero-selo{border-left:1px solid rgba(198,169,114,.4)}
.hero-selo svg{width:15px;height:15px;color:var(--ouro-claro);flex-shrink:0}
.hero-citacao{max-width:250px;margin-left:auto;padding-left:1.5rem;
  border-left:1px solid var(--ouro)}
.hero-citacao p{font-family:var(--font-serif);font-style:italic;font-size:1.25rem;
  line-height:1.4;color:var(--ouro-claro)}

/* As setas do carrossel. Elas existem porque a barra de rolagem está
   escondida de propósito — e esconder a barra sem oferecer outro controle
   deixa o carrossel inalcançável para quem usa mouse comum, sem roda
   horizontal. Agora o carrossel é claro, então as setas falam em tinta. */
.carrossel-controles{display:flex;gap:.4rem;flex-shrink:0}
.carrossel-seta{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--linha-forte);border-radius:var(--radius-pill);
  color:var(--tinta);cursor:pointer;font-family:inherit;transition:var(--t-fast);position:relative}
/* O desenho tem 38px; o alvo de toque tem 44. O pseudo-elemento cresce em
   volta do botão sem ocupar espaço no layout nem empurrar o vizinho. */
.carrossel-seta::after{content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.carrossel-seta svg{width:16px;height:16px}
.carrossel-seta:hover{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.carrossel-seta:active{transform:scale(.96)}
.carrossel-seta[disabled]{opacity:.3;cursor:default}
.carrossel-seta[disabled]:hover{background:transparent;color:var(--tinta);border-color:var(--linha-forte)}

/* ══ CONTAINER PRINCIPAL E RITMO VERTICAL ═════════════════════════════════ */
main{flex:1 0 auto;padding:3.5rem 0 5.5rem}

/* ══ 1. CARROSSEL DE MAIS PROCURADOS ══════════════════════════════════════
   Era um bloco verde escuro. Em VENICE o verde só aparece em ruptura, então
   o carrossel volta a ser claro e se separa por dois filetes, não por uma
   chapa. */
.carrossel-secao{
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  padding:2rem 0 1.5rem;margin-bottom:4.5rem;
}
.carrossel-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.35rem;flex-wrap:wrap}
.carrossel-secao h2{color:var(--tinta);font-family:var(--font-serif);font-size:1.5rem;font-weight:500;display:flex;align-items:center;gap:.55rem}
.carrossel-secao .secao-sub{color:var(--texto-secundario);font-size:.88rem}
/* `position:relative` faltava aqui: sem ele o `::after` de 44px do
   `.link-mais` (linha ~322) se ancorava num ancestral distante e a área de
   toque caía fora do link. Medido em 01/11/2026 a 390px: "Ver todas" media
   83x22 e reprovava no 2.5.8. */
.carrossel-secao .link-mais{color:var(--ouro-texto);font-size:.86rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;position:relative}
.carrossel-secao .link-mais:hover{text-decoration:underline}
.carrossel{display:flex;gap:1.15rem;overflow-x:auto;padding:.35rem 0 .85rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.carrossel::-webkit-scrollbar{display:none}

.mini{
  flex:0 0 232px;scroll-snap-align:start;background:#ffffff;
  border:1px solid var(--linha);border-radius:var(--radius-lg);
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;text-decoration:none;
  color:inherit;transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.mini:hover{transform:translateY(-3px);border-color:var(--ouro)}
.mini-pos{font-family:var(--font-data);font-size:.72rem;font-weight:700;color:var(--ouro-texto);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.mini-corpo{display:flex;align-items:center;gap:.8rem}
.mini-foto{width:52px;height:52px;object-fit:contain;border-radius:2px;background:#ffffff;flex-shrink:0}
.mini-textos{flex:1;min-width:0}
.mini-nome{font-family:var(--font-serif);font-size:.92rem;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--tinta)}
.mini-marca{font-size:.72rem;color:var(--texto-terciario);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-preco{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;padding-top:.6rem;border-top:1px solid var(--linha)}
.mini-valor{font-family:var(--font-data);font-size:.92rem;font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.mini-desc{font-family:var(--font-data);font-size:.72rem;font-weight:700;color:var(--vinho);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mini-desc.ml{font-family:var(--font-data);color:var(--texto-secundario);font-size:.7rem;letter-spacing:0}

/* ══ 2. ÍNDICE DE CATEGORIAS (Redesign_VENICE.MD §6.5) ═══════════════════
   Era uma grade de 5 cards que ocupava 3× a altura necessária para cinco
   links. Agora é uma lista de linhas com filete inferior: o hover inverte a
   linha inteira para verde e o padding recua — o payoff é a inversão, não o
   ícone. O ícone sobrevive como marcador de categoria, não como ilustração. */
.hub-categorias{margin-bottom:3.5rem}
/* Número e kicker na MESMA linha: empilhados, os dois gastavam 60px para dizer
   "02 · explore por famílias". */
.hub-topo{margin-bottom:1.1rem;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;column-gap:.7rem;row-gap:.15rem}
.hub-topo .secao-num{grid-area:1/1}
.hub-topo .eyebrow{grid-area:1/2;margin:0}
.hub-topo h2{grid-area:2/1/3/3;font-family:var(--font-serif);font-size:1.35rem;
  font-weight:500;color:var(--tinta);letter-spacing:-.02em}
.hub-lista{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;
  border-top:0}
.hub-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  align-items:center;column-gap:.7rem;row-gap:.1rem;
  padding:.9rem .85rem;border:1px solid var(--linha);border-radius:var(--radius-lg);
  background:var(--papel-2);text-decoration:none;color:inherit;
  transition:background-color .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease);
}
.hub-card:hover{background:var(--verde-fundo);color:var(--creme);
  border-color:var(--verde-fundo);transform:translateY(-2px)}
.hub-card:active{transform:scale(.995)}
.hub-icone{grid-area:1/1/3/2;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;width:2.3rem;height:2.3rem;border-radius:var(--radius-pill);
  border:1px solid rgba(133,101,56,.45);color:var(--ouro-texto)}
.hub-icone svg{width:15px;height:15px}
.hub-card:hover .hub-icone{color:var(--ouro-claro);border-color:rgba(198,169,114,.5)}
.hub-info{grid-area:1/2/3/3;display:flex;flex-direction:column;gap:.05rem;min-width:0}
.hub-info strong{font-family:var(--font-serif);font-size:1rem;font-weight:500;
  letter-spacing:-.01em;line-height:1.2}
.hub-info span{font-size:.7rem;color:var(--texto-terciario);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-card:hover .hub-info span{color:rgba(244,239,228,.66)}
/* A seta sai: o cartão inteiro é o alvo. Ver o comentário no topo do patch. */
.hub-seta{display:none}

@media (max-width:1100px){
  .hub-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .hub-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .hub-card{padding:.8rem .7rem;column-gap:.55rem}
  .hub-icone{width:2rem;height:2rem}
  .hub-info strong{font-size:.92rem}
  /* No celular o subtítulo some: com duas colunas ele cabe em duas linhas e
     dobra a altura do cartão para dizer o que o título já diz. */
  .hub-info span{display:none}
}

/* ══ 3. FAIXA DE DESTAQUES (EDITORIAL) ═════════════════════════════════════ */
.destaques{
  position:relative;overflow:hidden;
  background:var(--papel-2);border:1px solid var(--linha);
  margin-bottom:4.5rem;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;
}
.destaques-txt{padding:2.75rem 2.75rem;display:flex;flex-direction:column;justify-content:center;gap:.75rem}
.destaques .secao-num{margin-bottom:-.3rem}
.destaques .eyebrow{margin-bottom:.2rem}
.destaques h2{font-family:var(--font-serif);font-size:clamp(1.6rem,2.7vw,2.15rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.destaques p{font-size:.95rem;color:var(--texto-secundario);max-width:46ch;line-height:1.55}
.btn-primario{align-self:flex-start;margin-top:.7rem;display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:.75rem 1.6rem;background:var(--verde-fundo);color:var(--creme);border:1px solid var(--verde-fundo);border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;text-decoration:none;font-family:inherit;cursor:pointer;transition:var(--t-fast)}
.btn-primario:hover{background:var(--tinta);border-color:var(--tinta)}
.btn-primario:active{transform:scale(.98)}
.destaques-img{position:relative;align-self:stretch;min-height:220px;background:var(--papel-2)}
.destaques-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.destaques-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--papel-2) 0%,rgba(243,237,225,.35) 22%,transparent 48%)}
/* A moldura de canto (§6.6). Custa dois filetes e comunica "isto foi composto
   por alguém" — é o truque editorial mais barato que existe. O deslocamento
   negativo para fora da imagem cria o passe-partout; o `z-index` a mantém
   acima do gradiente de fusão, senão o filete some no lado esquerdo.
   Ouro, agora que a paleta VENICE o tem. */
.destaques-img::before{content:'';position:absolute;z-index:2;
  inset:.9rem .9rem auto auto;width:58%;height:58%;
  border-top:1px solid var(--ouro);border-right:1px solid var(--ouro);
  pointer-events:none}

/* ══ 4. VITRINE DE OFERTAS (GRADE DE CARDS) ════════════════════════════════ */
.secao{margin-bottom:4.5rem}
.secao-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.secao h2{font-family:var(--font-serif);font-size:1.6rem;font-weight:500;letter-spacing:-.02em;display:flex;align-items:center;gap:.55rem;color:var(--tinta)}
.secao-sub{font-size:.88rem;color:var(--texto-secundario);margin-top:.25rem}
.link-mais{font-size:.88rem;font-weight:600;color:var(--ouro-texto);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;position:relative}
/* O texto mede 22px de altura; o alvo de toque precisa de 44. O
   pseudo-elemento cresce em volta sem mudar o desenho nem o layout. */
.link-mais::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:44px;min-height:44px}
.link-mais:hover{text-decoration:underline;text-underline-offset:3px}
.link-mais svg{width:14px;height:14px}


/* ══ 5. FAIXA DE MÉTODO (Redesign_VENICE.MD §6.8) ════════════════════════
   Os pilares de confiança ficavam no meio do fluxo de compra, interrompendo a
   navegação antes do clique. Agora são uma faixa full-bleed verde escuro,
   fora do container: o usuário passa por ela em bloco, não é interrompido
   três vezes. Os três ícones em caixa viraram algarismos em contorno — o
   ícone dizia "escudo", "frasco", "relógio"; três metáforas para três ideias
   que são, na verdade, uma sequência (01, 02, 03). O número diz a sequência. */
.pilares{
  position:relative;width:100%;
  margin-bottom:4.5rem;padding:4rem 1.5rem;
  background:var(--verde-fundo);color:var(--creme);
  overflow:hidden;
}
/* O mesmo brilho radial que dá profundidade à chapa escura sem gradiente
   colorido. */
.pilares::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 0%,rgba(198,169,114,.14),transparent 62%)}
.pilares-inner{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;position:relative;z-index:1}
.pilar{display:flex;flex-direction:column;gap:.6rem}
/* `-webkit-text-stroke` com `color:transparent` dá oco real. O fallback é
   `@supports`: onde o stroke não existe, o algarismo aparece cheio em
   `--ouro-claro` em vez de sumir — `color:transparent` sem stroke é texto
   invisível, e texto invisível é pior que texto sem estilo. */
.pilar-num{font-family:var(--font-serif);font-size:2.4rem;font-style:italic;
  font-weight:500;line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--ouro-claro);letter-spacing:-.02em}
@supports not ((-webkit-text-stroke:1px red) or (text-stroke:1px red)){
  .pilar-num{color:var(--ouro-claro)}
}
.pilar h3{font-family:var(--font-serif);font-size:1.24rem;font-weight:500;color:var(--creme);letter-spacing:-.01em}
.pilar p{font-size:.88rem;line-height:1.6;color:rgba(244,239,228,.72);text-wrap:pretty}
/* Os SVGs originais continuam no HTML, escondidos: se algum dia um CMS ou um
   script voltar a injetá-los, o algarismo é só CSS e não quebra nada. */
.pilar-icone{display:none}

/* ══ 6. SEÇÃO DE ALERTAS & CANAIS (Redesign_VENICE.MD §6.9) ════════════ */
.chamada-fav{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:2.5rem;
  background:var(--papel);border:1px solid var(--linha-forte);
  padding:2.75rem 2.5rem;margin-bottom:3rem;align-items:center;
}
.chamada-txt{display:flex;flex-direction:column;gap:.75rem}
.chamada-txt h2{font-family:var(--font-serif);font-size:1.55rem;font-weight:500;line-height:1.25;color:var(--tinta);text-wrap:balance}
.chamada-txt p{font-size:.92rem;line-height:1.55;color:var(--texto-secundario);max-width:48ch}
.chamada-acoes{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:.4rem}
.chamada-nota{font-family:var(--font-data);font-size:.8rem;color:var(--texto-terciario);font-variant-numeric:tabular-nums}
/* A bolha só é crível sobre escuro, como numa conversa real. O painel verde
   escuro é o segundo ponto em que o verde aparece em bloco. */
.aviso-exemplo{background:var(--verde-fundo);border-radius:var(--radius-lg);padding:1.25rem 1.4rem;display:flex;flex-direction:column;gap:.6rem}
.aviso-rot{font-family:var(--font-data);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(244,239,228,.55)}
.aviso-bolha{background:var(--creme);padding:.85rem 1rem;border:1px solid rgba(19,26,21,.06)}
/* O rabo assimétrico no canto inferior esquerdo é o que faz a bolha parecer
   mensagem recebida em vez de card de marketing. Um raio uniforme diz
   "componente"; 10/10/10/2 diz "chegou agora". */
.aviso-bolha{border-radius:10px 10px 10px 2px}
.aviso-cab{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem}
.aviso-icone{width:16px;height:16px;color:var(--verde)}
.aviso-de{font-family:var(--font-data);font-size:.7rem;font-weight:700;color:var(--verde)}
.aviso-corpo{font-size:.82rem;line-height:1.45;color:var(--tinta)}
.aviso-cta{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;
  color:var(--verde);margin-top:.35rem}
.aviso-cta svg{width:12px;height:12px;flex-shrink:0}
.aviso-pe{font-size:.72rem;color:rgba(244,239,228,.6)}


/* ══ ESTADOS ═══════════════════════════════════════════════════════════════ */
.aviso{grid-column:1/-1;text-align:center;padding:3rem 1.5rem;background:var(--papel);border:1px solid var(--linha)}
.aviso h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:600;margin-bottom:.35rem}
.aviso p{font-size:.87rem;color:var(--texto-secundario);max-width:44ch;margin:0 auto}
/* O aviso de "carregando" do carrossel. Era um `style=` inline no
   `home.js`; virou classe para a CSP poder fechar `style-src`. */
.carrossel-vazio{color:#A9BCAE;font-size:.85rem;padding:0 1.75rem}
.btn-acao{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.65rem 1.4rem;background:var(--verde-fundo);color:var(--creme);border:1px solid var(--verde-fundo);border-radius:var(--radius-sm);font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--t-fast)}
.btn-acao:hover{background:var(--tinta)}
.esqueleto{height:380px;border-radius:var(--radius-lg);background:linear-gradient(100deg,var(--papel) 30%,var(--papel-2) 50%,var(--papel) 70%);background-size:220% 100%}
@media (prefers-reduced-motion:no-preference){.esqueleto{animation:brilho 1.4s linear infinite}}
@keyframes brilho{to{background-position:-220% 0}}

@media (max-width:1100px){
  .chamada-fav{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1.75rem}
}
@media (max-width:900px){
  .pilares-inner{grid-template-columns:1fr;gap:1.75rem}
  .pilares{padding:2.75rem 1.5rem}
  .destaques{grid-template-columns:1fr}
  .destaques-img{min-height:180px}
  /* A moldura de canto encolhe junto com a imagem: 58% de 180px de altura
     daria um L curto e gordo. */
  .destaques-img::before{width:46%;height:44%;inset:.7rem .7rem auto auto}
}
@media (max-width:768px){
  .hero{min-height:auto}
  .hero-inner{grid-template-columns:1fr;padding:3rem 1rem 2.5rem;gap:1.5rem;align-items:start}
  .hero-citacao{margin-left:0;padding-left:1rem}
  /* A régua dos selos vira duas linhas de duas colunas: com o filete à
     esquerda de cada um, o padding de 1,15rem comeria 40% da largura útil. */
  .hero-selos{gap:.55rem 0;margin-top:1.4rem}
  .hero-selo{font-size:.74rem;padding:0 .8rem}
  .hero-selo:nth-child(3){padding-left:0;border-left:none}
  .carrossel-secao{padding:1.5rem 0 1.25rem}
}


/* ══ FAIXA DOS CANAIS ══════════════════════════════════════════════════════
   Entra DENTRO da grade de ofertas, entre a primeira e a segunda linha de
   cartões. `grid-column:1/-1` ocupa a linha inteira sem tocar nas colunas dos
   cartões — sem isso ela viraria o quinto item e empurraria o resto.
   Fundo #1A2A20 com texto #F4EFE4: contraste 12,6:1. */
.destaques-canal{
  grid-column:1/-1;
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.45fr);
  align-items:stretch;
  background:var(--verde-fundo);color:var(--creme);
  border:1px solid var(--verde-fundo);border-radius:var(--radius-lg);
}
.destaques-canal-txt{padding:1.9rem 2rem;display:flex;flex-direction:column;
  justify-content:center;gap:.55rem}
.destaques-canal .eyebrow{color:var(--ouro-claro);margin:0}
.destaques-canal h2{font-family:var(--font-serif);font-size:clamp(1.25rem,2vw,1.7rem);
  font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--creme);
  text-wrap:balance;margin:0}
.destaques-canal p{font-size:.86rem;line-height:1.55;color:rgba(244,239,228,.8);
  max-width:48ch;margin:0}
.destaques-canal-acoes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.canal-btn{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.1rem;
  border-radius:var(--radius-pill);border:1px solid rgba(198,169,114,.45);
  font-size:.82rem;font-weight:700;text-decoration:none;color:var(--creme);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),
             transform .2s var(--ease);
}
.canal-btn svg{width:16px;height:16px;flex-shrink:0}
.canal-btn:hover{transform:translateY(-1px)}
.canal-btn--tg:hover{background:rgba(41,161,216,.22);border-color:#29A1D8}
.canal-btn--wp:hover{background:rgba(37,211,102,.2);border-color:#25D366}
.canal-btn:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px}
.destaques-canal-img{position:relative;min-height:100%}
.destaques-canal-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}

@media (max-width:900px){
  .destaques-canal{grid-template-columns:1fr}
  .destaques-canal-txt{padding:1.5rem 1.25rem}
  /* A imagem vira faixa baixa embaixo do texto: some o corte lateral, mas a
     peça continua na página — é ela que chama o olho para os botões. */
  .destaques-canal-img{position:relative;min-height:0;height:150px;order:2}
  .destaques-canal-img img{position:absolute}
}
@media (max-width:520px){
  /* Os dois botoes dividem a linha. Empilhados custavam 96px de altura para
     dois rotulos de 20 caracteres; lado a lado cada um fica com ~165x44px,
     ainda acima do alvo minimo de toque. */
  .destaques-canal-txt{padding:1.25rem 1.1rem;gap:.45rem}
  .destaques-canal-acoes{gap:.5rem;display:grid;grid-template-columns:1fr 1fr}
  .canal-btn{justify-content:center;padding:0 .5rem;font-size:.78rem;gap:.4rem}
  .destaques-canal p{font-size:.8rem;line-height:1.5}
  .destaques-canal-img{height:120px}
}