/* Base do site. As medidas de cada página vêm do Figma (estilos dentro de cada HTML). */

/* Inter 3.19, a mesma versão do Figma (a 4.x do Google Fonts tem outras larguras e muda as quebras de linha) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fontes/inter-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fontes/inter-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fontes/inter-ext-700.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fontes/inter-ext-800.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; }
html, body { margin: 0; padding: 0; background: #0b0c0f; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }
img { display: block; }
svg { display: block; overflow: visible; }
a { color: inherit; }

/* uma versão por faixa de largura; a escala acompanha a tela (escala.js) */
.v { display: none; overflow: hidden; }
.v-d { zoom: var(--zd, 1); }
.v-t { zoom: var(--zt, 1); }
.v-m { zoom: var(--zm, 1); }
@media (min-width: 1100px) { .v-d { display: block; } }
@media (min-width: 640px) and (max-width: 1099.98px) { .v-t { display: block; } }
@media (max-width: 639.98px) { .v-m { display: block; } }

/* separador "●" das faixas: a Inter não tem esse sinal, então ele é desenhado */
.bola { display: inline-block; position: relative; -webkit-text-fill-color: transparent; }
.bola::before { content: ""; position: absolute; left: 50%; top: 50%; width: .7em; height: .7em; margin: -.38em 0 0 -.35em; border-radius: 50%; background: currentColor; }

/* links e botões */
a.lk { display: block; text-decoration: none; transition: opacity .2s; }
a.lk:hover { opacity: .7; }
p a.lk { display: inline; }
a.bt { cursor: pointer; transition: opacity .2s, transform .2s; }
a.bt:hover { opacity: 1; }
a.bloco { cursor: pointer; transition: opacity .2s; }
a.bloco:hover { opacity: .9; }
a:focus-visible, button:focus-visible { outline: 2px solid #d8464b; outline-offset: 3px; }

/* menu de telas pequenas */
.menu-abrir { cursor: pointer; }
.menu-tela {
  position: fixed; inset: 0; z-index: 100; background: #0b0c0f;
  display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 24px 28px;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -0.02em;
}
.menu-tela[hidden] { display: none; }
.menu-tela a { color: #f3f1ed; text-decoration: none; }
.menu-tela a:hover { color: #d8464b; }
.menu-tela .menu-cta {
  margin-top: 18px; align-self: flex-start; font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: 16px; letter-spacing: 0; background: #f3f1ed; color: #0b0c0f; padding: 14px 22px; border-radius: 999px;
}
.menu-tela .menu-cta:hover { color: #0b0c0f; opacity: .85; }
.menu-fechar {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 1px solid #2a2c32; border-radius: 50%;
  background: none; color: #f3f1ed; font-size: 26px; line-height: 1; cursor: pointer;
}

/* menu fixo: cópia do cabeçalho presa no topo; aparece ao rolar para cima (site.js) */
.barra-fixa {
  position: fixed; top: 0; left: 0; z-index: 90;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
}
.barra-fixa.visivel { transform: translateY(0); visibility: visible; transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
.barra-fixa.sem-transicao { transition: none; }
@media (prefers-reduced-motion: reduce) { .barra-fixa, .barra-fixa.visivel { transition: none; } }
@media print { .barra-fixa { display: none; } }

/* perguntas frequentes */
[data-fq], [data-fi] { cursor: pointer; }
[data-fq]:hover { opacity: .8; }
[data-fq]:focus-visible { outline: 2px solid #d8464b; outline-offset: 4px; }
[data-fi] { transition: transform .2s; }
[data-fi]::before { content: ""; position: absolute; inset: -14px -16px; }

/* botões redondos de ir para outra página: seta na horizontal; vermelho com seta branca na diagonal ao passar o mouse ou clicar */
.bc { --bc: #0b0c0f; }
.bc-c { fill: transparent; stroke: var(--bc); stroke-opacity: .38; stroke-width: 1; transition: fill .25s, stroke .25s, stroke-opacity .25s; }
.bc-s { fill: none; stroke: var(--bc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s, stroke .25s; }
.bc:hover .bc-c, a:hover .bc-c, a:focus-visible .bc-c, a:active .bc-c, .bc.row-on .bc-c { fill: #d8464b; stroke: #d8464b; stroke-opacity: 1; }
.bc:hover .bc-s, a:hover .bc-s, a:focus-visible .bc-s, a:active .bc-s, .bc.row-on .bc-s { stroke: #f3f1ed; transform: rotate(-45deg); }

/* linhas com botão: ao passar o mouse, a linha fica preta */
.rowhit { cursor: pointer; display: block; z-index: 2; }
[data-rowbg] { transition: opacity .25s; pointer-events: none; }
[data-rowbg].row-on { opacity: 1 !important; }
[data-row] { transition: color .25s; }
[data-row].row-on { color: #f3f1ed !important; }
[data-row][data-mut].row-on { color: #c5cad0 !important; }
[data-rowline].row-on { opacity: 0; }
.rowhov { transition: background .25s, box-shadow .25s; }
.rowhov:hover, .rowhov:focus-visible { background: #0b0c0f; box-shadow: -20px 0 0 #0b0c0f, 20px 0 0 #0b0c0f; border-radius: 14px; }
.rowhov:hover *, .rowhov:focus-visible * { color: #f3f1ed !important; }
.rowhov:hover p, .rowhov:focus-visible p { color: #f3f1ed !important; }

/* bolinha vermelha que percorre a trilha pontilhada */
[data-trilha] { will-change: transform, opacity; }

/* botões e links com seta: a seta sai pelo canto e volta pelo outro, sem mudar nenhuma cor */
@keyframes seta-passa {
  0% { transform: translate(0, 0); opacity: 1; }
  45% { transform: translate(8px, -8px); opacity: 0; }
  46% { transform: translate(-8px, 8px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
a.bt:not(.bc):hover svg, a.bt:not(.bc):focus-visible svg { animation: seta-passa .55s cubic-bezier(.4, 0, .2, 1); }
a.bt:not(.bc) { transition: transform .2s; }
a.bt:not(.bc):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { a.bt:not(.bc):hover svg { animation: none; } }

/* botões sem seta (ex.: "Agendar conversa" do topo): sobem um pouco e ganham sombra ao passar o mouse */
a.bt:not(.bc):not(:has(svg)):hover, a.bt:not(.bc):not(:has(svg)):focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
a.bt:not(.bc):not(:has(svg)):active { transform: translateY(0) scale(.97); box-shadow: none; }