/* ==========================================================================
   BRIFT — camada pública (Home e todas as páginas públicas)
   base_publico.html marca o <body> com data-brift; tudo aqui é escopado
   nisso, então os painéis logados (base.html puro) não são afetados.
   Seções exclusivas da Home ficam em home-brift.css.
   ==========================================================================
   Tokens: os de brift.css (Kit de Marca v1.0). Nada de cor fora do kit.
     Tinta #01121C · Papel #F6F3EE (bases, 70%)
     Menta #5FFAD5 · Verde-água #02C2AD · Petróleo #026A76 (apoio, 20%)
     Brasa #FF5A1F (ação, ≤10%, NUNCA texto) · Âmbar #F2B01E (estado de UI)
   Tipografia: Archivo 800/700 títulos · IBM Plex Sans 400/500 texto (16/24,
   ≤70 caracteres) · IBM Plex Mono dados e etiquetas.
   Grade de 50 px: espaçamentos verticais em múltiplos de 50 (e meios).
   Animação: só transform e opacity; tudo desliga em prefers-reduced-motion.
   ========================================================================== */

[data-brift]{
  --hb-tinta:var(--tinta,#01121C); --hb-papel:var(--papel,#F6F3EE);
  --hb-menta:var(--menta,#5FFAD5); --hb-agua:var(--verde-agua,#02C2AD);
  --hb-petroleo:var(--petroleo,#026A76); --hb-brasa:var(--brasa,#FF5A1F);
  --hb-ambar:var(--ambar,#F2B01E);
  --hb-tinta-2:#0A2230; --hb-linha-e:#1B2E39; --hb-linha-c:#D9D4CB;
  --hb-suave-e:#9FB3BC; --hb-suave-c:#4A5A63;
  --hb-mola:cubic-bezier(.2,.9,.25,1.15);
  --hb-dock-h:76px;
  background:var(--hb-tinta);
  /* espaço para a barra inferior não cobrir o rodapé */
  padding-bottom:calc(var(--hb-dock-h) + 28px + env(safe-area-inset-bottom, 0px));
}
[data-brift] .nav-top-backdrop,[data-brift] .progress-bar{display:none;}

.hb-wrap{max-width:75rem; margin:0 auto; padding:0 1rem;}
.hb-sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;}
.hb-ico{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.hb-ico--p{width:18px; height:18px;}

/* Superfícies --------------------------------------------------------- */
.hb-escura{background:var(--hb-tinta); color:var(--hb-papel);}
.hb-clara{background:var(--hb-papel); color:var(--hb-tinta);}
.hb-secao{padding:4.6875rem 0; position:relative;}
.hb-escura + .hb-escura{border-top:1px solid var(--hb-linha-e);}
[data-brift] :focus-visible{outline:2px solid var(--hb-menta); outline-offset:3px; border-radius:6px;}
.hb-clara :focus-visible{outline-color:var(--hb-petroleo);}

/* Tipografia ---------------------------------------------------------- */
.hb-etiqueta{font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px; display:flex; align-items:center; gap:10px;}
.hb-etiqueta::before{content:""; width:28px; height:6px; background:currentColor; border-radius:1px;} /* a viga */
.hb-escura .hb-etiqueta{color:var(--hb-menta);}
.hb-clara .hb-etiqueta{color:var(--hb-petroleo);}
.hb-titulo{font-family:var(--serif); font-weight:800; font-size:2rem; line-height:1.06; letter-spacing:-.02em; margin:0; text-wrap:balance; color:inherit;}
.hb-lede{font-family:var(--sans); font-size:17px; line-height:1.6; max-width:62ch; margin:20px 0 0;}
.hb-escura .hb-lede{color:var(--hb-suave-e);}
.hb-clara .hb-lede{color:var(--hb-suave-c);}
.hb-nota{font-size:14px; line-height:1.5; margin:16px 0 0;}
.hb-escura .hb-nota{color:var(--hb-suave-e);} .hb-clara .hb-nota{color:var(--hb-suave-c);}
.hb-fonte{font-family:var(--mono); font-size:12.5px; line-height:1.5; margin:18px 0 0; letter-spacing:.02em;}
.hb-escura .hb-fonte{color:var(--hb-suave-e);} .hb-clara .hb-fonte{color:var(--hb-suave-c);}
.hb-cabeca{max-width:760px; margin:0 0 50px;}
.hb-link{display:inline-flex; align-items:center; min-height:44px; font-weight:600; text-underline-offset:4px;}
.hb-escura .hb-link{color:var(--hb-menta);} .hb-clara .hb-link{color:var(--hb-petroleo);}

/* Botões -------------------------------------------------------------- */
.hb-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 22px; border-radius:10px; border:1px solid transparent; font:600 15px/1 var(--sans); text-decoration:none; cursor:pointer; transition:background-color .2s, transform .2s;}
.hb-btn--brasa{background:var(--hb-brasa); color:var(--hb-tinta);}            /* Tinta sobre Brasa 6,1:1 */
.hb-btn--brasa:hover{background:var(--brasa-escura,#E04A12); color:var(--hb-tinta);}
.hb-btn--papel{background:var(--hb-papel); color:var(--hb-tinta);}
.hb-btn--papel:hover{background:#fff;}

/* ===================================================== Highlighted Text ===
   Base legível desde o início; a camada de destaque é a MESMA palavra numa
   máscara que corre da esquerda para a direita. A máscara e o conteúdo dela
   andam em sentidos opostos (dois transforms), então a palavra fica parada
   e só a janela se move — sem animar clip-path nem largura. */
.hb-hl{position:relative; display:inline-block; white-space:nowrap; padding:0 .1em; margin:0 -.1em;}
.hb-hl__mascara{position:absolute; inset:0; overflow:hidden; transform:translateX(-101%); transition:transform 1s cubic-bezier(.7,0,.2,1) .2s;}
/* mesma caixa e mesmo recuo do .hb-hl: a palavra da barra cai exatamente
   sobre a palavra base */
.hb-hl__barra{position:absolute; inset:0; padding:0 .1em; white-space:nowrap; transform:translateX(101%); transition:transform 1s cubic-bezier(.7,0,.2,1) .2s;}
.hb-escura .hb-hl__barra{background:var(--hb-menta); color:var(--hb-tinta);}  /* AAA 14,6:1 */
.hb-clara .hb-hl__barra{background:var(--hb-tinta); color:var(--hb-papel);}   /* AAA 17,2:1 */
.is-visivel .hb-hl__mascara,.is-visivel .hb-hl__barra{transform:translateX(0);}

/* ======================================================== Shimmer Text ==
   Menta com passagem de Papel; a cor de fundo (fallback) é Menta. */
.hb-shimmer{color:var(--hb-menta); background:linear-gradient(100deg, var(--hb-menta) 40%, var(--hb-papel) 50%, var(--hb-menta) 60%) 0 0 / 250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:hb-shimmer 3.4s linear infinite;}
/* Em Papel, Menta reprova (1,3:1): o brilho passa sobre Petróleo, que é o
   par do kit para gráfico/realce em fundo claro. */
.hb-shimmer--clara{color:var(--hb-petroleo); background-image:linear-gradient(100deg, var(--hb-petroleo) 40%, var(--hb-agua) 50%, var(--hb-petroleo) 60%);}
@keyframes hb-shimmer{from{background-position:150% 0;}to{background-position:-50% 0;}}
/* background-position não é transform: aceito aqui por ser só o texto
   indicado, pequeno; pausa fora da tela (classe .is-fora). */
.is-fora .hb-shimmer{animation-play-state:paused;}

/* ================================================================ Topo == */
/* Topo do celular: faixa Tinta no fluxo da página (na Home, home-brift.css
   o coloca sobre o hero). */
.hb-topo{position:relative; z-index:20; background:var(--hb-tinta); border-bottom:1px solid var(--hb-linha-e);}
.hb-topo__inner{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:100px;}
.hb-topo__marca{display:inline-flex; align-items:center; min-height:44px;}
.hb-topo__marca img{display:block; width:148px; height:auto;}   /* ≥120 px: mínimo digital do kit */


/* ========================================================= Navegação ==
   Uma pílula, dois lugares. Celular/tablet (< 56.25rem = 900 px): fixa na
   BASE. Desktop (≥ 900 px): fixa no TOPO, com a assinatura e o botão de
   conta dentro dela; ganha o vidro ao rolar (.is-rolado, home-dock.js). */
.hb-dock{position:fixed; z-index:60; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
  width:min(40rem, calc(100% - 32px)); height:var(--hb-dock-h);
  border-radius:38px; background:rgba(1,18,28,.9); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(246,243,238,.14); box-shadow:0 18px 50px rgba(1,18,28,.45);}
.hb-dock__marca{display:none;}
.hb-dock__itens{list-style:none; margin:0; padding:0 6px; height:var(--hb-dock-h); display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); align-items:center;}
.hb-dock__item{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:56px; min-width:44px; border-radius:16px; text-decoration:none; color:var(--hb-papel); font:500 9.5px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; transition:color .25s, transform .45s var(--hb-mola);}
.hb-dock__item:hover{color:var(--hb-papel);}
.hb-dock__item .hb-ico{width:22px; height:22px;}
.hb-dock__item[aria-current]{color:var(--hb-menta); transform:translateY(-12px);}
.hb-dock__rot--desk{display:none;}
/* Lupa: só o ícone, num círculo Menta (Tinta sobre Menta, 14,6:1). */
.hb-dock__item--lupa .hb-ico{width:22px; height:22px; padding:11px; box-sizing:content-box; border-radius:50%; background:var(--hb-menta); color:var(--hb-tinta); box-shadow:0 0 0 4px rgba(95,250,213,.16);}
.hb-dock__item--lupa:hover .hb-ico{box-shadow:0 0 0 6px rgba(95,250,213,.24);}
.hb-dock__item--lupa[aria-current]{transform:translateY(-6px);}
.hb-dock__item--lupa[aria-current] .hb-ico{box-shadow:0 0 0 4px var(--hb-tinta), 0 0 0 6px var(--hb-menta);}
.hb-dock__ico{position:relative; display:inline-flex;}
.hb-dock__ponto{position:absolute; top:-2px; right:-4px; width:9px; height:9px; border-radius:50%; background:var(--hb-brasa); box-shadow:0 0 0 2px var(--hb-tinta);}
/* Protuberância: mesma cor do vidro, sobe acima da borda no item ativo. */
.hb-dock__bossa{position:absolute; z-index:1; left:0; top:-25px; width:120px; height:26px; fill:rgba(1,18,28,.9); pointer-events:none; transform:translateX(var(--hb-x, -200px)) scaleX(var(--hb-s, 1)); transform-origin:center; will-change:transform; transition:opacity .3s;}
/* Linha de brilho em Menta correndo pela borda inferior. */
.hb-dock__brilho{position:absolute; z-index:1; left:0; bottom:6px; width:120px; height:2px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--hb-menta) 30%, var(--hb-menta) 70%, transparent);
  box-shadow:0 0 12px rgba(95,250,213,.75); transform:translateX(var(--hb-x, -200px)) scaleX(var(--hb-s, 1)); will-change:transform;}

/* Celular estreito: 7 itens não cabem com rótulo — só o item ativo mostra
   o nome (todos têm nome acessível pelo texto, escondido só visualmente). */
@media (max-width:37.5rem){
  .hb-dock{left:0; right:0; bottom:0; width:100%; transform:none; border-radius:24px 24px 0 0; height:calc(var(--hb-dock-h) + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); border-bottom:0;}
  .hb-dock__brilho{bottom:calc(6px + env(safe-area-inset-bottom, 0px));}
  .hb-dock__item:not([aria-current]) .hb-dock__rot{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
}
/* Banner de cookies (site todo) sobe acima da barra inferior. */
[data-brift] .consentimento{bottom:calc(var(--hb-dock-h) + 30px + env(safe-area-inset-bottom, 0px)) !important;}

@media (min-width:56.25rem){
  [data-brift]{padding-bottom:0;}
  [data-brift] .consentimento{bottom:16px !important;}
  /* Desktop: a pílula fixa ocupa o topo; aqui o .hb-topo vira só o espaço
     dela (faixa Tinta), para o conteúdo não ficar por baixo. Na Home, some. */
  .hb-topo{height:92px; border:0;} .hb-topo__inner{display:none;}
  .home-brift .hb-topo{display:none;}
  .hb-dock{top:14px; bottom:auto; width:min(75rem, calc(100% - 32px)); height:64px; display:flex; align-items:center; gap:18px; padding:0 10px 0 22px;
    border-radius:20px; background:rgba(1,18,28,.35); border-color:rgba(246,243,238,.1); box-shadow:none;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color .35s, box-shadow .35s, border-color .35s;}
  .hb-dock.is-rolado{background:rgba(1,18,28,.9); border-color:rgba(246,243,238,.14); box-shadow:0 18px 50px rgba(1,18,28,.35); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);}
  .hb-dock__marca{display:inline-flex; align-items:center; min-height:44px; flex:none;}
  .hb-dock__marca img{display:block; width:128px; height:auto;}   /* ≥120 px: mínimo digital do kit */
  .hb-dock__itens{flex:1; height:64px; padding:0; display:flex; align-items:center; justify-content:center; gap:2px;}
  .hb-dock__itens li:last-child{margin-left:auto;}
  .hb-dock__item{flex-direction:row; gap:8px; min-height:44px; padding:0 14px; border-radius:12px; font-size:11.5px; letter-spacing:.08em;}
  .hb-dock__item:hover{background:rgba(246,243,238,.06);}
  .hb-dock__item .hb-ico{width:18px; height:18px;}
  .hb-dock__item[aria-current]{transform:none;}
  .hb-dock__item--lupa{padding:0 6px;}
  .hb-dock__item--lupa:hover{background:none;}
  .hb-dock__item--lupa .hb-ico{width:18px; height:18px; padding:11px;}
  .hb-dock__item--lupa[aria-current]{transform:none;}
  /* Conta vira o botão "Minha área"/"Entrar" (o acento Brasa do topo). */
  .hb-dock__item--conta{background:var(--hb-brasa); color:var(--hb-tinta); padding:0 18px; font:600 14px/1 var(--sans); letter-spacing:0; text-transform:none;}
  .hb-dock__item--conta:hover{background:var(--brasa-escura,#E04A12); color:var(--hb-tinta);}
  .hb-dock__rot--celular{display:none;} .hb-dock__rot--desk{display:inline;}
  /* No topo, a protuberância desce abaixo da borda; o brilho corre embaixo. */
  .hb-dock__bossa{top:auto; bottom:-25px; transform:translateX(var(--hb-x, -200px)) scaleX(var(--hb-s, 1)) scaleY(-1); opacity:0;}
  .hb-dock.is-rolado .hb-dock__bossa{opacity:1;}
  .hb-dock__brilho{bottom:4px;}
}

/* ============================================== Balão do Instagram ==
   Pequeno, no canto. Entra após 2,5 s, flutua de leve e abre o nome com o
   ponteiro ou o foco. No celular fica acima da barra inferior. */
.hb-insta{position:fixed; z-index:55; right:16px; bottom:calc(var(--hb-dock-h) + 30px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:0; min-height:48px; padding:6px; border-radius:26px;
  background:var(--hb-tinta); color:var(--hb-papel); text-decoration:none; border:1px solid rgba(95,250,213,.45);
  box-shadow:0 12px 30px rgba(1,18,28,.4);
  animation:hb-insta-entra .7s var(--hb-mola) 2.5s both, hb-insta-boia 4.5s ease-in-out 3.2s infinite;}
.hb-insta .hb-ico{width:22px; height:22px; padding:7px; box-sizing:content-box; border-radius:50%; background:var(--hb-menta); color:var(--hb-tinta); flex:none;}
/* rabinho do balão */
.hb-insta::after{content:""; position:absolute; right:22px; bottom:-6px; width:10px; height:10px; background:var(--hb-tinta); border-right:1px solid rgba(95,250,213,.45); border-bottom:1px solid rgba(95,250,213,.45); transform:rotate(45deg);}
.hb-insta__txt{display:grid; max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .45s var(--hb-mola), opacity .3s, padding .45s; padding:0;}
.hb-insta__txt b{font:600 13.5px/1.2 var(--sans); color:var(--hb-papel);}
.hb-insta__txt small{font:500 10.5px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--hb-menta);}
.hb-insta:hover .hb-insta__txt,.hb-insta:focus-visible .hb-insta__txt{max-width:12rem; opacity:1; padding:0 10px 0 10px;}
.hb-insta:hover,.hb-insta:focus-visible{color:var(--hb-papel); animation-play-state:paused;}
@keyframes hb-insta-entra{from{opacity:0; transform:translateY(16px) scale(.6);}to{opacity:1; transform:none;}}
@keyframes hb-insta-boia{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@media (min-width:56.25rem){
  .hb-insta{right:24px; bottom:24px;}
  /* no desktop o nome aparece sozinho, sem precisar passar o mouse */
  .hb-insta .hb-insta__txt{max-width:12rem; opacity:1; padding:0 12px 0 10px;}
}

/* Rodapé */
[data-brift] .footer{border-top:1px solid var(--hb-linha-e);}

/* =============================================== prefers-reduced-motion == */
@media (prefers-reduced-motion: reduce){
  [data-brift] *,[data-brift] *::before,[data-brift] *::after{animation:none !important; transition:none !important;}
  .hb-shimmer{-webkit-text-fill-color:currentColor; background:none;}
  .hb-hl__mascara,.hb-hl__barra{transform:none;}
}

/* Escala: rem + pontos de quebra, nunca vw (o zoom do navegador precisa
   escalar tudo junto). */
@media (min-width:40rem){
  .hb-wrap{padding:0 2rem;}
  .hb-titulo{font-size:2.75rem;}
}
@media (min-width:64rem){
  .hb-wrap{padding:0 3.125rem;}
  .hb-secao{padding:6.25rem 0;}
  .hb-titulo{font-size:3.5rem;}
}
@media (min-width:80rem){
  .hb-secao{padding:7.8125rem 0;}
}