/* Bnoted — base comum a todas as páginas.
   Identidade: assets/client-brand-kits/bnoted no repositório de agentes da Bulb Hub (brand book de
   2026-08-06). Mostarda #F2D037, marrom quase preto #180000 (texto, contorno, sombra dura), marrom
   #321800 (fundo escuro), creme #F4EFEA, taupe #8C7A6B. Bricolage Grotesque em títulos e texto.
   Movimento: entrada cubic-bezier(.16,1,.3,1), saída cubic-bezier(.7,0,.84,0), nunca linear, nunca
   com repique; texto entra por linha, subindo de dentro de uma máscara. */

:root {
  --creme: #F4EFEA;
  --creme-2: #EBE3DA;
  --tinta: #180000;
  --marrom: #321800;
  --mostarda: #F2D037;
  --taupe: #8C7A6B;
  --branco: #fff;

  --fonte: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

  --borda: 3px solid var(--tinta);
  --sombra: 6px 6px 0 var(--tinta);
  --sombra-p: 3px 3px 0 var(--tinta);
  --raio: 22px;
  --raio-g: 34px;

  --entra: cubic-bezier(.16, 1, .3, 1);
  --sai: cubic-bezier(.7, 0, .84, 0);
  --olhar: cubic-bezier(.45, 0, .55, 1);

  --margem: clamp(16px, 4.5vw, 72px);
  --largura: 1320px;
  --secao: clamp(88px, 12vw, 176px);

  --t-mega: clamp(3rem, 9.4vw, 9.5rem);
  --t-1: clamp(2.6rem, 6.2vw, 5.6rem);
  --t-2: clamp(2rem, 4.4vw, 3.9rem);
  --t-3: clamp(1.45rem, 2.4vw, 2.1rem);
  --t-corpo: clamp(1.02rem, 1.15vw, 1.15rem);
  --t-p: .92rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: normal; }
::selection { background: var(--mostarda); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nao-quebra { white-space: nowrap; }
.pular { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--mostarda); border: var(--borda); border-radius: 999px; font-weight: 700; transform: translateY(-160%); transition: transform .3s var(--entra); }
.pular:focus { transform: none; }

/* ---------------------------------------------------------------- peças comuns */

.etiqueta {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--taupe);
}
.etiqueta--amarela, .etiqueta--clara, .etiqueta--escura {
  padding: .5em 1.05em .45em; border: 2px solid var(--tinta); border-radius: 999px;
  color: var(--tinta); letter-spacing: .1em; box-shadow: var(--sombra-p);
}
.etiqueta--amarela { background: var(--mostarda); }
.etiqueta--clara { background: var(--creme); }
.etiqueta--escura { background: var(--tinta); color: var(--mostarda); box-shadow: 3px 3px 0 var(--mostarda); border-color: var(--mostarda); }

.titulo-secao { font-size: var(--t-2); max-width: 17ch; }

.botao {
  --fundo: var(--mostarda); --cor: var(--tinta);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .8em 1.5em; border: var(--borda); border-radius: 999px;
  background: var(--fundo); color: var(--cor);
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--tinta);
  transition: transform .35s var(--entra), box-shadow .35s var(--entra), background-color .3s ease;
}
.botao:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.botao:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tinta); transition-duration: .08s; }
.botao--escuro { --fundo: var(--tinta); --cor: var(--creme); box-shadow: 4px 4px 0 var(--mostarda); }
.botao--escuro:hover { box-shadow: 6px 6px 0 var(--mostarda); }
.botao--escuro:active { box-shadow: 0 0 0 var(--mostarda); }
.botao--p { min-height: 44px; padding: .55em 1.15em; font-size: .92rem; box-shadow: 3px 3px 0 var(--tinta); }
.botao--g { min-height: 60px; padding: .9em 1.8em; font-size: 1.08rem; }
.seta { width: 1.1em; height: 1.1em; flex: none; transition: transform .4s var(--entra); }
a:hover > .seta, button:hover > .seta { transform: translateX(4px); }
.chev { width: 14px; height: 14px; transition: transform .35s var(--entra); }

/* olhos que acompanham o cursor (site.js move .pupila conforme data-pupila) */
.pupila { transition: transform .5s var(--olhar); }
[data-olhar] svg { overflow: visible; }
#olho-esq, #olho-dir { transform-box: fill-box; transform-origin: center; }

/* ---------------------------------------------------------------- texto que sobe por linha */

.js [data-linhas] .linha { display: block; overflow: clip; overflow-clip-margin: .14em; padding-bottom: .06em; margin-bottom: -.06em; }
.js [data-linhas] .linha__i { display: block; transform: translateY(105%); transition: transform 1s var(--entra); transition-delay: calc(var(--l, 0) * .1s); }
.js [data-linhas].visto .linha__i { transform: none; }
.js [data-sobe] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--entra) .25s, transform .9s var(--entra) .25s; }
.js [data-sobe].visto { opacity: 1; transform: none; }
.js [data-revela] { opacity: 0; transform: translateY(48px); transition: opacity 1s var(--entra), transform 1s var(--entra); }
.js [data-revela].visto { opacity: 1; transform: none; }
.js [data-revela-grupo] > * { opacity: 0; transform: translateY(56px); transition: opacity 1s var(--entra), transform 1s var(--entra); transition-delay: calc(var(--g, 0) * .1s); }
.js [data-revela-grupo].visto > * { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- cabeçalho */

.cab { position: fixed; inset: 14px var(--margem) auto; z-index: 50; pointer-events: none; transition: transform .5s var(--entra); }
.cab.escondido { transform: translateY(calc(-100% - 24px)); transition: transform .45s var(--sai); }
.cab__barra {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  max-width: var(--largura); margin: 0 auto; padding: 10px 10px 10px clamp(16px, 2vw, 26px);
  background: var(--creme); border: var(--borda); border-radius: 999px; box-shadow: var(--sombra);
}
.cab__marca { display: block; flex: none; }
.cab__logo { width: clamp(108px, 10vw, 138px); height: auto; }
.cab__nav { margin-left: auto; }
.cab__lista { display: flex; align-items: center; gap: 4px; }
.cab__item { position: relative; }
.cab__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 999px;
  background: none; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .25s ease;
}
.cab__link:hover, .cab__link[aria-current="page"], .cab__link[aria-expanded="true"] { background: var(--creme-2); }
.cab__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--mostarda); }
.cab__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cab__sub {
  position: absolute; top: calc(100% + 14px); left: 50%; min-width: 220px; padding: 8px;
  background: var(--creme); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .3s var(--entra), transform .4s var(--entra), visibility 0s .4s;
}
.cab__sub::before { content: ""; position: absolute; inset: -18px 0 auto; height: 18px; }
.cab__item--sub:hover .cab__sub, .cab__link[aria-expanded="true"] + .cab__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.cab__sub a { display: block; padding: 10px 14px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s ease; }
.cab__sub a:hover, .cab__sub a:focus-visible { background: var(--mostarda); }
.cab__sub--produtos { width: 340px; }
.cab__sub--produtos strong { display: block; font-size: 1.02rem; }
.cab__sub--produtos span { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; line-height: 1.35; color: var(--marrom); }
.cab__chamada { flex: none; }
.cab__chamada-menu { display: none; }
.cab__abre { display: none; }

@media (max-width: 980px) {
  .cab__chamada { margin-left: auto; }
  .cab__abre {
    display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0;
    background: var(--tinta); border: 0; border-radius: 50%; cursor: pointer;
  }
  .cab__abre-ico, .cab__abre-ico::before { display: block; width: 18px; height: 2.5px; background: var(--creme); border-radius: 2px; transition: transform .4s var(--entra); }
  .cab__abre-ico { position: relative; transform: translateY(-3px); }
  .cab__abre-ico::before { content: ""; position: absolute; top: 6px; }
  .cab__abre[aria-expanded="true"] .cab__abre-ico { transform: translateY(3px) rotate(45deg); }
  .cab__abre[aria-expanded="true"] .cab__abre-ico::before { transform: translateY(-6px) rotate(-90deg); }
  .cab__nav {
    position: absolute; top: calc(100% + 12px); left: 0; right: 0; margin: 0; padding: 14px;
    max-height: calc(100dvh - 110px); overflow-y: auto;
    background: var(--creme); border: var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra);
    opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s var(--sai), transform .35s var(--sai), visibility 0s .35s;
  }
  .cab.aberto .cab__nav { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--entra), transform .5s var(--entra); }
  .cab__lista { flex-direction: column; align-items: stretch; gap: 2px; }
  .cab__link { width: 100%; justify-content: space-between; padding: 14px 16px; font-size: 1.15rem; }
  .cab__sub, .cab__sub--produtos { position: static; width: auto; min-width: 0; margin: 4px 0 8px; padding: 4px; border-width: 2px; box-shadow: none; transform: none; display: none; opacity: 1; visibility: visible; }
  .cab__item--sub:hover .cab__sub { transform: none; }
  .cab__link[aria-expanded="true"] + .cab__sub { display: block; transform: none; }
  .cab__chamada-menu { display: flex; width: 100%; margin-top: 12px; }
}
@media (max-width: 520px) {
  .cab { inset-inline: 12px; top: 10px; }
  .cab__chamada { display: none; }
  .cab__abre { margin-left: auto; }
}

/* ---------------------------------------------------------------- chamada final */

.fecho {
  position: relative; overflow: hidden;
  margin: var(--secao) var(--margem) 0; padding: clamp(64px, 9vw, 128px) clamp(24px, 6vw, 96px) clamp(210px, 21vw, 290px);
  background: var(--branco); border: var(--borda); border-radius: var(--raio-g); box-shadow: 10px 10px 0 var(--tinta);
}
.fecho::before { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: radial-gradient(120% 100% at 50% 100%, rgba(242, 208, 55, .55), rgba(242, 208, 55, 0) 70%); pointer-events: none; }
.fecho__miolo { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; }
.fecho__titulo { font-size: var(--t-1); }
.fecho__texto { max-width: 46ch; margin: 1.4rem auto 2.2rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.fecho__mascote {
  position: absolute; left: 50%; bottom: 0; width: clamp(150px, 15vw, 210px);
  transform: translate(-50%, var(--espia-y, 100%));
}
.fecho__mascote svg { width: 100%; height: auto; }
.fecho .botao { box-shadow: 4px 4px 0 var(--tinta); }

/* ---------------------------------------------------------------- rodapé */

.rod {
  position: relative; overflow: hidden;
  margin-top: clamp(64px, 8vw, 120px); padding: clamp(56px, 7vw, 96px) var(--margem) 0;
  background: var(--mostarda); color: var(--tinta); border-top: var(--borda);
}
.rod__topo { display: grid; grid-template-columns: 1.1fr 1.5fr; gap: clamp(40px, 6vw, 96px); max-width: var(--largura); margin: 0 auto; }
.rod__logo { width: clamp(170px, 18vw, 250px); height: auto; }
.rod__assina { margin-top: 1.6rem; font-size: var(--t-3); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.rod__frase { margin-top: .8rem; max-width: 30ch; color: var(--marrom); }
.rod__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rod__titulo { margin-bottom: 1rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marrom); opacity: .75; }
.rod__col li + li { margin-top: .55rem; }
.rod__col a { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; background: linear-gradient(var(--tinta), var(--tinta)) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--entra); }
.rod__col a:hover { background-size: 100% 2px; }
.rod__col .seta { width: .9em; height: .9em; }
.rod__base { max-width: var(--largura); margin: clamp(56px, 7vw, 96px) auto 0; padding: 22px 0 clamp(150px, 16vw, 210px); border-top: 2px solid var(--tinta); font-size: .86rem; color: var(--marrom); }
.rod__mascote { position: absolute; right: clamp(24px, 8vw, 140px); bottom: 0; width: clamp(150px, 15vw, 220px); transform: translateY(var(--espia-y, 100%)); }
.rod__mascote svg { width: 100%; height: auto; }

@media (max-width: 860px) {
  .rod__topo { grid-template-columns: 1fr; }
  .rod__nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .rod__nav { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-linhas] .linha__i, .js [data-sobe], .js [data-revela], .js [data-revela-grupo] > * { opacity: 1; transform: none; }
  .fecho__mascote { --espia-y: 0%; }
  .rod__mascote { --espia-y: 0%; }
}