/* ---------- topo ---------- */
.b-topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--topo-h);
  padding: 0 var(--marg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.b-marca-casa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ouro);
}
.b-emblema { width: 46px; height: 46px; flex: none; }
.b-palavra-marca { display: grid; line-height: 1; }
.b-centro {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--tinta);
}
.b-nome-marca {
  font-family: var(--f-marca);
  font-weight: 600;
  font-size: 1.38rem;
  letter-spacing: .005em;
  color: var(--latao);
  margin-top: 5px;
}
.b-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: .9rem;
}
.b-nav a {
  text-decoration: none;
  color: var(--tinta);
  padding: 10px 2px;
  background: linear-gradient(var(--ouro), var(--ouro)) no-repeat 0 85% / 0 1.5px;
  transition: background-size .35s var(--ease);
}
.b-nav a:hover { background-size: 100% 1.5px; }
.b-ig { display: inline-flex; align-items: center; gap: 8px; }
.b-ig svg { width: 20px; height: 20px; color: var(--latao); }

/* ---------- hero ---------- */
.b-hero {
  position: relative;
  min-height: var(--alt);
  padding: calc(var(--topo-h) + 2vh) var(--marg) clamp(36px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
  isolation: isolate;
}

/* malha morna: gelo, branco, ouro claro diluído, pêssego da pele */
.b-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(in oklab 180deg, #FBF8F2 0%, var(--gelo) 60%, #F5EFE4 100%);
}
.b-mancha {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle closest-side in oklab, var(--c), color-mix(in oklab, var(--c) 50%, transparent) 45%, transparent);
  will-change: transform;
}
.b-m1 { --c: #FFFFFF; width: 78vmax; height: 78vmax; left: -22vmax; top: -34vmax; animation: b-deriva-1 38s ease-in-out infinite alternate; }
.b-m2 { --c: #F0DFB4; width: 66vmax; height: 66vmax; right: -14vmax; top: -12vmax; opacity: .9; animation: b-deriva-2 44s ease-in-out infinite alternate; }
.b-m3 { --c: #F1E1D0; width: 58vmax; height: 58vmax; left: -16vmax; bottom: -30vmax; animation: b-deriva-3 34s ease-in-out infinite alternate; }
.b-m4 { --c: #F6EBD3; width: 40vmax; height: 40vmax; left: 30%; top: 38%; opacity: .8; animation: b-deriva-2 52s ease-in-out infinite alternate-reverse; }
@keyframes b-deriva-1 { to { transform: translate(6vmax, 4vmax) scale(1.06); } }
@keyframes b-deriva-2 { to { transform: translate(-5vmax, 5vmax) scale(.94); } }
@keyframes b-deriva-3 { to { transform: translate(7vmax, -4vmax) scale(1.08); } }

.b-intro, .b-corpo {
  position: relative;
  z-index: 3;
  width: min(40vw, 590px);
}

/* fala dela, antes da pergunta */
.b-fala {
  margin: 0 0 clamp(14px, 2.2vh, 22px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: clamp(.95rem, .8rem + .3vw, 1.08rem);
  color: var(--latao-escuro);
  letter-spacing: .01em;
}
.b-fala-ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ouro) 22%, transparent);
  flex: none;
}

/* título como legenda de vídeo */
.b-titulo {
  position: relative;
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-titulo);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--tinta);
}
.b-linha { display: block; white-space: nowrap; }
.b-p { position: relative; z-index: 1; display: inline-block; }
.b-marcador {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  width: var(--mw, 0px);
  height: var(--mh, 0px);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  background: var(--marcador);
  border-radius: .11em;
  box-shadow: inset 0 -.035em 0 color-mix(in oklab, var(--latao) 35%, transparent), 0 .08em .22em -.1em color-mix(in oklab, var(--latao) 40%, transparent);
  opacity: 0;
  transition: transform .34s var(--ease), width .34s var(--ease), height .34s var(--ease), opacity .25s linear;
}
.b-marcador.b-lento { transition-duration: .9s, .9s, .9s, .25s; }
.b-marcador.b-on { opacity: 1; }
.js .b-p { opacity: 0; transform: translateY(.16em); }
.js .b-p.b-dita { opacity: 1; transform: none; transition: opacity .28s linear, transform .42s var(--ease); }

/* palco: ela + coluna */
.b-palco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.b-cena {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent 100%);
}
.b-figura {
  position: absolute;
  right: 0;
  top: calc(var(--topo-h) - 14px);
  width: var(--fig-w);
  aspect-ratio: 1200 / 2150;
}
.b-figura::before { /* luz morna atrás dela */
  content: "";
  position: absolute;
  left: 2%; top: 4%;
  width: 110%; height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, #F3E2B4 75%, transparent), transparent);
  z-index: 0;
}
.b-ela {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 17%);
          mask-image: linear-gradient(to right, transparent 0%, #000 17%);
}
.js .b-ela { opacity: 0; transform: translateY(18px); transition: opacity 1.2s ease, transform 1.6s var(--ease); }
.b-pronto .b-ela { opacity: 1; transform: none; }

/* coluna em traço dourado */
.b-coluna {
  position: absolute;
  z-index: 0;
  left: -36%;
  top: 13%;
  width: 64%;
  height: auto;
  overflow: visible;
}
.b-traco {
  fill: rgba(255, 253, 248, .86);
  stroke: var(--ouro-traco);
  stroke-width: 1.15;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.b-fino { fill: none; stroke: var(--ouro); stroke-width: .55; opacity: .75; }
.b-disco { fill: #F4E9CC; stroke: var(--ouro); stroke-width: .8; }
.b-disco-l45 { fill: url(#b-ouro-disco); stroke: var(--latao); stroke-width: .9; opacity: 0; transition: opacity 1s ease; }
.b-l45-halo { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 1.2s ease; }
.b-l45-onda { fill: none; stroke: var(--ouro); stroke-width: .9; opacity: 0; transform-box: fill-box; transform-origin: center; }
.b-nervo { fill: none; stroke: var(--ouro-traco); stroke-width: 2.1; stroke-linecap: round; }
.b-nervo-luz { fill: none; stroke: #F8E7AE; stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: .045 1.2; stroke-dashoffset: .05; opacity: 0; }
.b-raiz { fill: none; stroke: var(--ouro); stroke-width: 1; stroke-linecap: round; }
.b-silhueta { fill: none; stroke: var(--ouro); stroke-width: 1.4; stroke-dasharray: .1 5.5; stroke-linecap: round; opacity: .7; }
.b-ancoras circle { fill: none; }

.js .b-traco { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.js .b-fino, .js .b-disco, .js .b-silhueta { opacity: 0; }
.js .b-nervo, .js .b-raiz { stroke-dasharray: 1; stroke-dashoffset: 1; }
.b-desenhada .b-vert .b-traco {
  stroke-dashoffset: 0;
  fill-opacity: 1;
  transition: stroke-dashoffset 1.3s var(--ease) calc(var(--i) * 140ms), fill-opacity .9s ease calc(var(--i) * 140ms + .7s);
}
.b-desenhada .b-fino { opacity: .75; transition: opacity .8s ease 1.2s; }
.b-desenhada .b-disco { opacity: 1; transition: opacity .8s ease .9s; }
.b-acesa .b-disco-l45 { opacity: 1; }
.b-acesa .b-l45-halo { opacity: 1; animation: b-pulso 3.8s ease-in-out infinite; }
.b-acesa .b-l45-onda { animation: b-onda 3.8s ease-out infinite; }
.b-irradia .b-nervo { stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s cubic-bezier(.45, .1, .25, 1); }
.b-irradia .b-raiz { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease .5s; }
.b-irradia .b-silhueta { opacity: .7; transition: opacity 1.6s ease 1s; }
.b-corre .b-nervo-luz { animation: b-luz 9s cubic-bezier(.5, .1, .3, 1) infinite; }
@keyframes b-pulso { 0%, 100% { transform: scale(.82); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes b-onda { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes b-luz {
  0% { stroke-dashoffset: .05; opacity: 0; }
  4% { opacity: .95; }
  34% { stroke-dashoffset: -1.02; opacity: .9; }
  36%, 100% { stroke-dashoffset: -1.02; opacity: 0; }
}

/* rótulos (posicionados pelo script a partir das âncoras do desenho) */
.b-rotulos { position: absolute; inset: 0; z-index: 2; }
.b-rot {
  position: absolute;
  left: var(--x, 0px);
  top: var(--y, 0px);
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: var(--t-rotulo);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--latao-escuro);
  white-space: nowrap;
}
.b-rot-v { transform: translate(calc(-100% - 6px), -50%); }
.js .b-rot-v { opacity: 0; transition: opacity .6s ease calc(var(--i, 0) * 140ms + .9s); }
.b-desenhada .b-rot-v { opacity: 1; }
.b-chip {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  transform: translate(-100%, -50%);
}
.b-chip-fio {
  display: block;
  width: var(--fio, 90px);
  height: 1px;
  background: var(--latao);
  transform-origin: right center;
}
.b-chip-fio::before { /* pontinho na ponta do fio */
  content: "";
  display: block;
  width: 5px; height: 5px;
  margin: -2px 0 0 auto;
  translate: 2.5px 0;
  border-radius: 50%;
  background: var(--latao);
}
.b-chip-txt {
  position: relative;
  padding: .36em .5em .34em;
  color: var(--tinta);
  font-size: .72rem;
  letter-spacing: .08em;
  isolation: isolate;
}
.b-chip-txt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 5px;
  background: var(--marcador);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--latao) 35%, transparent);
  transform-origin: left center;
}
.js .b-chip .b-chip-fio { transform: scaleX(0); transition: transform .6s var(--ease); }
.js .b-chip .b-chip-txt { opacity: 0; transition: opacity .3s linear .45s; }
.js .b-chip .b-chip-txt::before { transform: scaleX(0); transition: transform .45s var(--ease) .5s; }
.b-chip.b-on .b-chip-fio { transform: none; }
.b-chip.b-on .b-chip-txt { opacity: 1; }
.b-chip.b-on .b-chip-txt::before { transform: none; }
.b-chip-nervo { --fio: 34px; }
.b-chip-curto { display: none; }
.b-par { border-radius: 3px; transition: background-color .8s ease, box-shadow .8s ease, color .8s ease; }
.b-acesa .b-par { --g: color-mix(in oklab, var(--ouro-claro) 60%, transparent); background: var(--g); box-shadow: 0 0 0 .32em var(--g); color: var(--tinta); }

.b-legenda-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px;
}

/* tarja com nome, como nos vídeos */
.b-tarja {
  position: absolute;
  z-index: 4;
  left: calc(100% - var(--fig-w) * .93);
  bottom: clamp(36px, 8vh, 80px);
  display: grid;
  gap: 4px;
  padding: 13px 18px 13px 20px;
  background: rgba(255, 255, 255, .9);
  border-radius: 10px;
  box-shadow: 0 18px 40px -22px rgba(110, 83, 31, .45), 0 0 0 1px rgba(201, 167, 90, .28);
  pointer-events: auto;
}
.b-tarja::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--marcador);
}
.b-tarja strong { font-family: var(--f-titulo); font-weight: 600; font-size: 1rem; letter-spacing: -.005em; color: var(--tinta); }
.b-tarja span { font-size: .9rem; color: var(--tinta-suave); }
.js .b-tarja { opacity: 0; transform: translateX(-14px); transition: opacity .7s ease, transform .9s var(--ease); }
.b-mostra .b-tarja { opacity: 1; transform: none; }

/* apoio, ação e prova */
.b-corpo { margin-top: clamp(18px, 3vh, 30px); }
.b-apoio {
  margin: 0;
  max-width: 33em;
  font-size: var(--t-apoio);
  line-height: 1.58;
  color: var(--tinta-suave);
}
.b-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(20px, 3.2vh, 30px);
}
.b-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px 0 22px;
  border-radius: 14px;
  background: var(--marcador);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 14px 28px -16px rgba(142, 108, 46, .75), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(142, 108, 46, .28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
}
.b-botao svg { width: 22px; height: 22px; flex: none; }
.b-botao:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 20px 34px -18px rgba(142, 108, 46, .8), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(142, 108, 46, .28); }
.b-link {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-height: 48px;
  justify-content: center;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: underline;
  text-decoration-color: var(--ouro);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  color: var(--tinta);
}
.b-link-end { font-family: var(--f-texto); font-weight: 400; font-size: .86rem; color: var(--tinta-suave); text-decoration: none; display: inline-block; }

.b-prova {
  margin: clamp(22px, 3.6vh, 36px) 0 0;
  padding-top: clamp(16px, 2.4vh, 22px);
  border-top: 1px solid color-mix(in oklab, var(--ouro) 45%, transparent);
  max-width: 31em;
}
.b-nota { font-family: var(--f-titulo); font-size: .88rem; color: var(--tinta-suave); }
.b-nota strong { color: var(--tinta); font-weight: 600; }
.b-estrelas { color: var(--ouro-traco); letter-spacing: .12em; margin-right: 4px; }
.b-prova blockquote {
  margin: 10px 0 0;
  font-size: clamp(1.06rem, .9rem + .35vw, 1.2rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--tinta);
}
.b-grifo {
  color: inherit;
  background: var(--grifo);
  padding: .04em .22em .06em;
  margin: 0 -.06em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.b-quem { margin: 8px 0 0; font-size: .9rem; color: var(--tinta-suave); }

/* entradas do texto */
.js .b-fala, .js .b-corpo > *, .js .b-topo { opacity: 0; transform: translateY(10px); }
.b-mostra .b-corpo > *, .b-mostra .b-fala, .b-mostra .b-topo { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s var(--ease); }
.b-mostra .b-corpo > :nth-child(2) { transition-delay: .12s; }
.b-mostra .b-corpo > :nth-child(3) { transition-delay: .5s; }
.js .b-pronto .b-fala, .js .b-pronto .b-topo { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s var(--ease); }

/* pausa fora da tela */
.b-fora .b-mancha, .b-fora .b-l45-halo, .b-fora .b-l45-onda, .b-fora .b-nervo-luz { animation-play-state: paused; }

/* selo */
.b-selo {
  padding: 22px var(--marg) 26px;
  text-align: center;
  font-family: var(--f-titulo);
  font-size: .85rem;
  color: var(--tinta-suave);
  background: #F5EFE4;
}
.b-selo a { color: var(--latao-escuro); font-weight: 600; text-decoration-color: var(--ouro); text-underline-offset: 3px; }

/* ---------- notebook menor ---------- */
@media (max-width: 1180px) and (min-width: 900px) {
  :root { --t-titulo: clamp(2.6rem, 5.4vw, 4.4rem); --fig-w: min(calc(var(--alt) * .62), 43vw); }
  .b-intro, .b-corpo { width: min(40vw, 440px); }
  .b-nav a:not(.b-ig) { display: none; }
  .b-coluna { left: -27%; width: 57%; top: 14%; }
  .b-chip-nervo { flex-direction: row; transform: translate(0, -50%); }
  .b-chip-nervo .b-chip-fio { transform-origin: left center; }
  .b-chip-nervo .b-chip-fio::before { margin: -2px auto 0 0; translate: -2.5px 0; }
}

/* ---------- tablet e celular ---------- */
@media (max-width: 899px) {
  :root {
    --topo-h: 68px;
    --t-titulo: clamp(2.55rem, 11.2vw, 4.6rem);
    --fig-w: min(76vw, 480px);
    --t-rotulo: .7rem;
  }
  .b-emblema { width: 38px; height: 38px; }
  .b-centro { font-size: .56rem; }
  .b-nome-marca { font-size: 1.18rem; margin-top: 4px; }
  .b-nav a:not(.b-ig) { display: none; }
  .b-ig span { display: none; }
  .b-ig { width: 44px; height: 44px; justify-content: center; }
  .b-ig svg { width: 24px; height: 24px; }

  .b-hero {
    display: block;
    min-height: 0;
    padding: calc(var(--topo-h) + 10px) var(--marg) 40px;
  }
  .b-intro, .b-corpo { width: auto; }
  .b-fala { font-size: .95rem; margin-bottom: 12px; align-items: flex-start; }
  .b-fala-ponto { margin-top: .42em; }
  .b-palco {
    position: relative;
    inset: auto;
    height: auto;
    margin: 6px calc(var(--marg) * -1) 0;
  }
  .b-cena {
    position: relative;
    inset: auto;
    height: calc(var(--fig-w) * 1.79 * .84);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
  }
  .b-figura { top: 0; }
  .b-coluna { left: -16%; top: 14%; width: 60%; }
  .b-tarja {
    position: relative;
    left: auto; bottom: auto;
    margin: -46px var(--marg) 0;
    padding: 10px 14px 10px 16px;
  }
  .b-tarja span { text-wrap: balance; }
  .b-tarja strong { font-size: .95rem; }
  .b-tarja span { font-size: .84rem; }
  .b-chip-txt { font-size: .66rem; }
  .b-chip-longo, .b-par { display: none; }
  .b-chip-curto { display: inline; }
  .b-corpo { margin-top: 20px; display: flex; flex-direction: column; }
  .b-acoes { order: -1; margin: 0 0 22px; }
  .b-chip-nervo { flex-direction: row; transform: translate(0, -50%); }
  .b-chip-nervo .b-chip-fio { transform-origin: left center; }
  .b-chip-nervo .b-chip-fio::before { margin: -2px auto 0 0; translate: -2.5px 0; }
  .b-acoes { gap: 10px 22px; }
  .b-botao { width: 100%; justify-content: center; padding: 0 14px; gap: 9px; font-size: clamp(.9rem, 4.1vw, 1.02rem); white-space: nowrap; }
}

@media (max-width: 899px) and (min-width: 600px) {
  :root { --t-titulo: clamp(3.2rem, 9vw, 4.8rem); --fig-w: min(62vw, 470px); }
  .b-botao { width: auto; }
  .b-coluna { left: -50%; width: 74%; top: 11%; }
  .b-chip-longo, .b-par { display: inline; }
  .b-chip-curto { display: none; }
  .b-tarja { width: fit-content; margin-left: auto; margin-right: calc(var(--fig-w) * .3); }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .b-nervo-luz { display: none; }
}

/* ---------- telas largas ---------- */
@media (min-width: 1600px) {
  :root { --t-titulo: clamp(5.5rem, 5.4vw, 7rem); }
  .b-intro, .b-corpo { width: min(38vw, 720px); }
  .b-apoio { max-width: 30em; }
}