/* O site do Bátus — o protótipo "Bátus - Site Mobile v3" e a "Central legal"
   (`design_handoff_site/`), servidos pelo Worker (`apps/api/src/site/`).

   **Celular primeiro, e é regra.** Mais de nove em dez visitas vêm do telefone:
   o que está fora de media query é o desenho do protótipo na moldura de 412 px,
   e o computador só acrescenta, com `min-width` (600, 960 e 1280). Os valores
   `clamp(…cqw…)` são os do protótipo — ele media dentro de um contêiner, e o
   `.pagina` é esse contêiner aqui.

   **Nenhum estilo embutido.** A CSP do site é `style-src 'self'`: o que o
   protótipo calculava em `style=` virou classe (a largura das barras, a posição
   dos blocos da agenda) ou atributo de SVG (o gráfico do fluxo), e o script só
   mexe por CSSOM e Web Animations, que a CSP não alcança.

   **As interações são CSS**, e o `site.js` só acrescenta movimento. A escolha
   do slide, o Mensal/Anual e o Desktop/App são rádios com `:has()`; o menu e os
   recursos são `<details>`. Navegador sem `:has()` vê o conteúdo inteiro, sem os
   seletores — nunca um botão que não troca nada.

   **Contraste.** O cinza de apoio do protótipo (#8A7A6E) dá 3,7:1 sobre o creme
   e virou #6B5B50 (5,8:1) em todo texto miúdo; o acento (#B0755A) segue como
   preenchimento — ponto, barra, borda —, e em texto pequeno sai no tom mais
   escuro dele, #955A40 (4,9:1). No escuro, o apoio passou de #8A7A6E para
   #A39286 (5,3:1). É o site lido na rua, no sol, e 10 px de olho em caixa alta
   é o texto que mais sofre com isso. */

/* ----------------------------------------------------------------- fontes -- */

/* As mesmas do aplicativo, auto-hospedadas: a página é onde o salão decide se
   confia no arquivo que vai baixar, e pedir fonte a um terceiro no meio disso é
   o contrário do que ela diz. O endereço é **o mesmo** do `preload` de
   `site/casca.ts` (`FONTES`) — divergindo, o navegador baixa duas vezes. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/instrument-serif-latin-jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+221E, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fontes/karla-latin-qkBbXvYC6trAT7RVLtw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* O progresso do anel do carrossel. Registrada para poder ser animada: sem o
   `@property`, uma variável é texto e salta de 0 a 100% sem passar pelo meio. */
@property --prog {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ----------------------------------------------------------------- tokens -- */

:root {
  --creme: #f6f1ec;
  --papel: #fffdfb;
  --areia: #f0e8e0;
  --areia2: #ede3da;
  --tinta: #2a211c;
  --tinta-doc: #4a3d35;
  --corpo: #6b5b50;
  --linha: #e4d8ce;
  --acento: #b0755a;
  --acento-texto: #955a40;
  --marrom: #8a6a4f;
  --ouro: #c9a227;
  --brasa: #d85a30;
  --brasa-tinta: #1a1917;
  --escuro: #2a211c;
  --escuro2: #231c18;
  --escuro-linha: #3a2e27;
  --escuro-texto: #c4b2a6;
  --escuro-apoio: #a39286;
  --acento-no-escuro: #c98e72;
  --creme-quente: #f4ebcb;
  --creme-quente-tinta: #7a5e12;
  --alerta: #a85b4c;

  --dp: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ui: 'Karla', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --suave: cubic-bezier(0.22, 0.7, 0.2, 1);
  --margem: clamp(14px, 4.4cqw, 18px);

  /* O tema das peças que trocam com o slide (cabeçalho, botões, gaveta). Fora
     do topo temático elas usam o Nude, que é o padrão do sistema. */
  --t-bg: var(--creme);
  --t-sf: var(--papel);
  --t-ink: var(--tinta);
  --t-corpo: var(--corpo);
  --t-ac: var(--acento-texto);
  --t-line: var(--linha);
  --t-rad: 14px;
  --t-azulejo: var(--tinta);
  --t-letra: var(--creme);
  --t-btn-bg: var(--tinta);
  --t-btn-ink: var(--creme);
  --t-dim: rgba(42, 33, 28, 0.15);
  --t-sombra: 0 10px 24px -10px rgba(42, 33, 28, 0.5);

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ------------------------------------------------------------------- base -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.pagina {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}

/* O rodapé fica no pé da janela quando a página é curta (o 404, o contato
   enviado): sem isto, sobra uma faixa de fundo embaixo dele. */
.pagina > main {
  flex: 1 0 auto;
}

img,
svg,
picture {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

p,
h1,
h2,
h3,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--acento-texto);
  text-decoration: none;
}

/* O link dentro de prosa leva sublinhado: a cor sozinha não o separa do texto
   em volta (o acento contra a tinta do corpo fica abaixo de 3:1), e quem lê um
   termo de uso no celular precisa achar o link sem adivinhar. */
:where(p, li) > a,
:where(.recurso-texto, .doc-secao, .doc-eula, .cartao-doc, .guia-secao) a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--marrom);
}

:focus-visible {
  outline: 2px solid var(--acento-texto);
  outline-offset: 2px;
}

.sec-escuro :focus-visible,
.sec-escuro2 :focus-visible,
.rod :focus-visible,
.empresa :focus-visible {
  outline-color: #e8c9b4;
}

strong {
  font-weight: 600;
}

code {
  font-family: var(--ui);
  font-size: 1em;
  font-weight: 600;
}

/* Visível só para leitor de tela — e para o foco, no caso dos rádios, que
   continuam alcançáveis pelo teclado. */
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--tinta);
  color: var(--creme);
  font: 600 13.5px/1 var(--ui);
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.pular:focus-visible {
  transform: none;
  outline-color: var(--ouro);
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pulso {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.65);
  }
}

@keyframes progresso {
  from {
    --prog: 0%;
  }
  to {
    --prog: 100%;
  }
}

/* O ponto que pulsa. **Duas vezes, e para** — a não ser que o `site.js` esteja
   rodando: aí ele marca `data-movimento` e o pulso segue, com o botão de pausar
   à vista (WCAG 2.2.2). As páginas sem script não têm botão, e movimento que
   dura mais de cinco segundos sem como parar é o que a regra proíbe. */
.pulso {
  flex: none;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brasa);
}

.pulso-ouro {
  background: var(--ouro);
}

@media (prefers-reduced-motion: no-preference) {
  .pulso {
    animation: pulso 1.8s ease-in-out 2;
  }

  :root[data-movimento] .pulso {
    animation-iteration-count: infinite;
  }

  :root[data-parado] .pulso {
    animation: none;
  }
}

/* ---------------------------------------------------------------- selos -- */

.selo {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 7px;
  border-radius: 100px;
  font: 700 10px/1 var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* O laranja da marca, com a tinta quase preta: com a tinta do protótipo
   (#2A211C) o par fica em 4,1:1, e com esta em 4,5:1. */
.selo-brasa {
  background: var(--brasa);
  color: var(--brasa-tinta);
}

/* "Em breve" — o creme do "Add-on" da tabela, que é a outra marca do protótipo
   para o que não vem no plano de hoje. */
.selo-breve {
  background: var(--creme-quente);
  color: var(--creme-quente-tinta);
  font-size: 9.5px;
}

:where(.olho, .ponto-titulo) .selo-breve {
  margin-left: 6px;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- botões -- */

.botao-prim {
  flex: 1;
  display: block;
  padding: clamp(10px, 2.9cqw, 11.5px) 8px;
  text-align: center;
  white-space: nowrap;
  font: 600 clamp(12.5px, 3.4cqw, 13px)/1 var(--ui);
  letter-spacing: 0.01em;
  border-radius: var(--t-rad);
  background: var(--t-btn-bg);
  color: var(--t-btn-ink);
  box-shadow: var(--t-sombra);
  transition:
    background-color 0.7s ease,
    color 0.7s ease,
    border-radius 0.7s ease,
    box-shadow 0.7s ease;
}

.botao-prim:hover {
  color: var(--t-btn-ink);
  filter: brightness(1.12);
}

.botao-vidro {
  flex: 1;
  display: block;
  padding: clamp(10px, 2.9cqw, 11.5px) 8px;
  text-align: center;
  white-space: nowrap;
  font: 600 clamp(12.5px, 3.4cqw, 13px)/1 var(--ui);
  border-radius: var(--t-rad);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(20, 16, 14, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  transition: border-radius 0.7s ease;
}

.botao-vidro:hover {
  color: #ffffff;
  background: rgba(20, 16, 14, 0.42);
}

.botao-escuro {
  display: block;
  padding: 13px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--tinta);
  color: var(--creme);
  font: 600 13.5px/1 var(--ui);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(42, 33, 28, 0.5);
}

.botao-escuro:hover {
  background: var(--escuro-linha);
  color: var(--creme);
}

.botao-claro {
  display: inline-block;
  padding: 11px 15px;
  border: 1px solid var(--linha);
  border-radius: 100px;
  background: var(--creme);
  color: var(--tinta);
  font: 600 12.5px/1 var(--ui);
}

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

.cab {
  position: relative;
  z-index: 30;
  color: var(--t-ink);
}

/* O da capa e das páginas de público: no celular, o fundo do tema do topo, como o
   protótipo o desenha — ele só não mora mais dentro do topo (ver `casca.ts`). */
.cab-heroi {
  background: var(--t-bg);
  transition: background-color 0.7s ease;
}

/* O das páginas internas: o do protótipo da Central legal — preso ao topo,
   translúcido, com filete. */
.cab-pagina {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 241, 236, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}

.cab-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--margem) 8px;
  min-height: 52px;
}

/* A área de toque cresce para os lados de dentro, com margem negativa: o
   desenho fica o do protótipo e o dedo acha a marca. */
.cab-marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  margin: -9px 0;
  color: var(--t-ink);
}

.cab-marca:hover {
  color: var(--t-ink);
}

.cab-nome {
  font: 400 18px/1 var(--dp);
  letter-spacing: 0.01em;
  transition: color 0.7s ease;
}

.marca-svg {
  flex: none;
}

.marca-svg .azulejo {
  fill: var(--t-azulejo);
  transition: fill 0.7s ease;
}

.marca-svg .letra {
  fill: var(--t-letra);
  transition: fill 0.7s ease;
}

.marca-clara .azulejo {
  fill: #f2f0ea;
}

.marca-clara .letra {
  fill: #1a1917;
}

.cab-nav,
.cab-acoes {
  display: none;
}

/* O menu do celular é um `<details>`: abre e fecha sem script. O botão fica por
   cima da linha da marca, e a gaveta desce **no fluxo**, empurrando a página —
   como o protótipo desenha. */
.menu-botao {
  position: absolute;
  top: 10px;
  right: var(--margem);
  width: 34px;
  height: 34px;
  border: 1px solid var(--t-line);
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.7s ease;
}

.menu-botao::-webkit-details-marker {
  display: none;
}

.menu-botao::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.menu-botao span {
  position: absolute;
  left: 8px;
  top: 13.5px;
  width: 16px;
  height: 1.5px;
  background: var(--t-ink);
  transition:
    transform 0.2s ease,
    background-color 0.7s ease;
}

.menu-botao span + span {
  top: 19px;
}

.menu[open] .menu-botao span:first-child {
  transform: translateY(2.75px) rotate(45deg);
}

.menu[open] .menu-botao span + span {
  transform: translateY(-2.75px) rotate(-45deg);
}

.gaveta {
  position: relative;
  background: var(--t-sf);
  border-top: 1px solid var(--t-line);
  border-bottom: 1px solid var(--t-line);
  padding: 6px var(--margem) 13px;
  animation: subir 0.22s ease;
}

.cab-pagina .gaveta {
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  border-bottom: 0;
}

.gaveta-links a {
  display: block;
  padding: 6px 0;
  font: 400 21px/1.45 var(--dp);
  color: var(--t-ink);
  border-bottom: 1px solid var(--t-line);
}

.gaveta-links a:last-child {
  border-bottom: 0;
}

.gaveta-publicos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--t-line);
  font: 600 13px/1 var(--ui);
  color: var(--t-corpo);
}

.gaveta-publicos a {
  padding: 8px 0;
  color: var(--t-ink);
  text-decoration: none;
}

.gaveta-para {
  margin-right: 6px;
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t-ac);
}

.gaveta-cta {
  margin-top: 12px;
}

.gaveta-entrar {
  display: block;
  margin-top: 2px;
  padding: 12px 0 2px;
  text-align: center;
  font: 600 13px/1 var(--ui);
  color: var(--t-ink);
}

/* ------------------------------------------------------ o topo temático -- */

/* Os três temas são temas **do próprio aplicativo** — Rosé, Noir e Botânico —,
   e cada um troca fundo, tinta, acento, raio e sombra do topo inteiro. As
   tintas de texto do Rosé e do Botânico são mais escuras que as do app de
   propósito: o olho de 10 px é lido no celular, na rua.

   **Os tokens moram na `.pagina`, e não no topo**: o cabeçalho é filho da
   página (para ficar preso ao rolar no computador), e tem de trocar de cor junto
   com o slide. O resto da página não lê `--t-*` — as seções têm cor própria. */
.pagina[data-tema] {
  --t-bg: #fbf1f1;
  --t-sf: #fffafa;
  --t-ink: #2e1f23;
  --t-corpo: #5e4a4f;
  --t-ac: #8f4a5e;
  --t-line: #ebd5d6;
  --t-rad: 16px;
  --t-azulejo: #2e1f23;
  --t-letra: #fbf1f1;
  --t-btn-bg: #2e1f23;
  --t-btn-ink: #fffafa;
  --t-dim: rgba(46, 31, 35, 0.15);
  --t-brilho: radial-gradient(130% 80% at 50% 0%, #fffafa 0%, rgba(251, 241, 241, 0) 70%);
  --t-scrim: linear-gradient(to top, rgba(46, 31, 35, 0.55) 0%, rgba(46, 31, 35, 0.06) 46%, rgba(46, 31, 35, 0) 70%);
  --t-sombra: 0 10px 24px -10px rgba(46, 31, 35, 0.5);
}

.topo-tema {
  position: relative;
  overflow: hidden;
  background: var(--t-bg);
  color: var(--t-ink);
  transition: background-color 0.7s ease;
}

/* `:is()` e não uma lista comum: a lista comum é descartada inteira quando um
   seletor dela é inválido, e num navegador sem `:has()` isso levaria junto a
   página da barbearia. O `:is()` perdoa o que não entende. */
.pagina:is([data-tema='noir'], :has(#slide-barbearia:checked)) {
  --t-bg: #0e0e10;
  --t-sf: #161619;
  --t-ink: #f2f0ee;
  --t-corpo: #a9a7ae;
  --t-ac: #c9a227;
  --t-line: #2a2a30;
  --t-rad: 6px;
  --t-azulejo: #f2f0ea;
  --t-letra: #1a1917;
  --t-btn-bg: #c9a227;
  --t-btn-ink: #141416;
  --t-dim: rgba(242, 240, 238, 0.18);
  --t-brilho: radial-gradient(120% 75% at 22% 0%, #1f1f24 0%, rgba(14, 14, 16, 0) 72%);
  --t-scrim: linear-gradient(to top, rgba(14, 14, 16, 0.5) 0%, rgba(14, 14, 16, 0.06) 46%, rgba(14, 14, 16, 0) 70%);
  --t-sombra: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
}

/* O terceiro slide, que o protótipo não desenhou ("acrescenta um terceiro slide
   para clínica de estética"): o Botânico do app, com o raio de 20 px dele e o
   botão no verde do acento. */
.pagina:is([data-tema='botanico'], :has(#slide-spa:checked)) {
  --t-bg: #f1f4ee;
  --t-sf: #ffffff;
  --t-ink: #1e2a20;
  --t-corpo: #4b5a4d;
  --t-ac: #3f6b4a;
  --t-line: #dbe3d5;
  --t-rad: 20px;
  --t-azulejo: #1e2a20;
  --t-letra: #f1f4ee;
  --t-btn-bg: #3f6b4a;
  --t-btn-ink: #ffffff;
  --t-dim: rgba(30, 42, 32, 0.15);
  --t-brilho: radial-gradient(130% 80% at 78% 0%, #ffffff 0%, rgba(241, 244, 238, 0) 70%);
  --t-scrim: linear-gradient(to top, rgba(30, 42, 32, 0.55) 0%, rgba(30, 42, 32, 0.06) 46%, rgba(30, 42, 32, 0) 70%);
  --t-sombra: 0 10px 24px -10px rgba(30, 42, 32, 0.45);
}

.topo-brilho {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  background: var(--t-brilho);
  pointer-events: none;
}

.heroi {
  position: relative;
}

/* Os slides empilhados na mesma célula: a altura do topo é a do maior deles, e
   **não muda** quando o slide troca — mudar de altura sem o toque de ninguém é o
   que o Google mede como deslocamento de layout. O inativo sai por opacidade, e
   continua sendo lido pelo leitor de tela (ver `site/capa.ts`). */
.heroi-texto {
  position: relative;
  display: grid;
  padding: clamp(12px, 3.6cqw, 17px) var(--margem) clamp(10px, 3cqw, 14px);
}

.slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.slide:first-child {
  opacity: 1;
  pointer-events: auto;
}

.topo-tema:has(#slide-barbearia:checked) .slide:not(.slide-barbearia),
.topo-tema:has(#slide-spa:checked) .slide:not(.slide-spa) {
  opacity: 0;
  pointer-events: none;
}

/* Sem animação enquanto inativo: é o que faz a entrada do título tocar de novo
   quando o carrossel volta ao salão — o nome da animação só "começa" ao mudar. */
.topo-tema:has(#slide-barbearia:checked) .slide:not(.slide-barbearia) :is(.slide-titulo, .slide-resumo),
.topo-tema:has(#slide-spa:checked) .slide:not(.slide-spa) :is(.slide-titulo, .slide-resumo) {
  animation: none;
}

.topo-tema:has(#slide-barbearia:checked) .slide-barbearia,
.topo-tema:has(#slide-spa:checked) .slide-spa {
  opacity: 1;
  pointer-events: auto;
}

.slide-cabeca {
  margin: 0;
  font-weight: 400;
}

.slide-olho {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  font: 500 clamp(9.5px, 2.6cqw, 10.5px)/1 var(--ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t-ac);
  transition: color 0.7s ease;
}

.slide-olho-ponto {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brasa);
}

.slide-titulo {
  display: block;
  margin-top: clamp(10px, 3cqw, 14px);
  font: 400 clamp(27px, 9.4cqw, 39px)/1.01 var(--dp);
  letter-spacing: -0.018em;
  text-wrap: pretty;
  color: var(--t-ink);
  transition: color 0.7s ease;
}

.slide-resumo {
  margin-top: clamp(8px, 2.6cqw, 12px);
  max-width: 86%;
  font: 400 clamp(13px, 3.6cqw, 14.5px)/1.55 var(--ui);
  text-wrap: pretty;
  color: var(--t-corpo);
  transition: color 0.7s ease;
}

.slide:first-child .slide-titulo {
  animation: entrar 0.55s ease;
}

.slide:first-child .slide-resumo {
  animation: entrar 0.7s ease;
}

.topo-tema:has(#slide-barbearia:checked) .slide-barbearia .slide-titulo,
.topo-tema:has(#slide-spa:checked) .slide-spa .slide-titulo {
  animation: entrar 0.55s ease;
}

.topo-tema:has(#slide-barbearia:checked) .slide-barbearia .slide-resumo,
.topo-tema:has(#slide-spa:checked) .slide-spa .slide-resumo {
  animation: entrar 0.7s ease;
}

/* A foto. Enquanto a imagem não existe, cada camada mostra um degradê nas cores
   do tema dela — nunca um buraco —, e o esmaecimento entre slides funciona do
   mesmo jeito com e sem foto. */
.heroi-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ede6e0;
}

.heroi-fundo {
  position: absolute;
  inset: 0;
}

.camada {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.85s ease;
}

.camada-salao {
  background: linear-gradient(155deg, #f6e4e4 0%, #e8cbd0 46%, #c99aa6 100%);
}

.camada-barbearia {
  background: linear-gradient(155deg, #2a2a30 0%, #1f1f24 48%, #0e0e10 100%);
}

.camada-spa {
  background: linear-gradient(155deg, #e7ede2 0%, #c6d6c0 48%, #8fab93 100%);
}

.heroi-fundo + .camada {
  opacity: 1;
}

.topo-tema:has(#slide-barbearia:checked) .camada:not(.camada-barbearia),
.topo-tema:has(#slide-spa:checked) .camada:not(.camada-spa) {
  opacity: 0;
}

.topo-tema:has(#slide-barbearia:checked) .camada-barbearia,
.topo-tema:has(#slide-spa:checked) .camada-spa {
  opacity: 1;
}

.camada picture,
.camada img {
  width: 100%;
  height: 100%;
}

.camada img {
  object-fit: cover;
}

.heroi-scrim {
  position: absolute;
  inset: 0;
  background: var(--t-scrim);
  pointer-events: none;
}

.heroi-legenda {
  position: absolute;
  left: var(--margem);
  top: 11px;
  font: 500 clamp(10px, 2.8cqw, 11px)/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.legenda {
  display: none;
}

.legenda:first-child {
  display: inline;
}

.topo-tema:has(#slide-barbearia:checked) .legenda:not(.legenda-barbearia),
.topo-tema:has(#slide-spa:checked) .legenda:not(.legenda-spa) {
  display: none;
}

.topo-tema:has(#slide-barbearia:checked) .legenda-barbearia,
.topo-tema:has(#slide-spa:checked) .legenda-spa {
  display: inline;
}

.heroi-acoes {
  position: absolute;
  left: clamp(12px, 3.6cqw, 16px);
  right: clamp(12px, 3.6cqw, 16px);
  bottom: clamp(10px, 3cqw, 13px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.heroi-botoes {
  display: flex;
  gap: 7px;
}

.heroi-nota {
  text-align: center;
  font: 500 clamp(10.5px, 2.9cqw, 11.5px)/1.3 var(--ui);
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* Os anéis: rótulos dos rádios do slide. Clicar funciona sem script, as setas
   do teclado andam entre eles, e o giro é o `site.js` marcando o rádio. */
.aneis {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(22px, 7cqw, 32px);
  padding: clamp(14px, 4cqw, 18px) var(--margem) clamp(16px, 4.6cqw, 20px);
}

.anel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.anel-item[for='slide-salao'] {
  --anel-cor: #8f4a5e;
}

.anel-item[for='slide-barbearia'] {
  --anel-cor: #c9a227;
}

.anel-item[for='slide-spa'] {
  --anel-cor: #3f6b4a;
}

.anel {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.anel-progresso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--anel-cor) 0% var(--prog), var(--t-dim) var(--prog) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 61%, #000 63%);
  mask: radial-gradient(farthest-side, transparent 61%, #000 63%);
}

/* O anel escolhido fica cheio; girando, ele enche em 6,5 s — e é o fim dessa
   animação que o `site.js` escuta para passar ao slide seguinte. Um relógio só,
   o que se vê: um `setInterval` ao lado dele desencontraria os dois. */
.aneis input:checked + .anel-item .anel-progresso {
  --prog: 100%;
}

.topo-tema[data-girando] .aneis input:checked + .anel-item .anel-progresso {
  animation: progresso 6.5s linear forwards;
}

.topo-tema[data-pausado] .aneis input:checked + .anel-item .anel-progresso {
  animation-play-state: paused;
}

.anel-icone {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-corpo);
  transition: color 0.5s ease;
}

.anel-icone svg {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.anel-nome {
  font: 600 clamp(10.5px, 3cqw, 11.5px)/1 var(--ui);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--t-corpo);
  transition: color 0.5s ease;
}

.aneis input:checked + .anel-item .anel-icone,
.aneis input:checked + .anel-item .anel-nome {
  color: var(--t-ink);
}

.aneis input:focus-visible + .anel-item .anel {
  outline: 2px solid var(--t-ac);
  outline-offset: 3px;
}

/* Pausar é exigência (WCAG 2.2.2, e a LBI no art. 63): o giro, a pilha e os
   pulsos passam de cinco segundos. O botão só aparece quando o script roda —
   sem ele não há o que pausar. */
.pausa {
  position: absolute;
  right: max(6px, calc(var(--margem) - 10px));
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--t-corpo);
}

.pausa-icone {
  position: absolute;
  left: 16px;
  top: 15px;
  width: 12px;
  height: 14px;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
}

.pausa[aria-pressed='true'] .pausa-icone {
  left: 18px;
  width: 0;
  height: 0;
  border-left: 11px solid currentColor;
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.pausa:hover {
  color: var(--t-ink);
}

/* Sem `:has()` o rádio não troca nada, e o anel viraria um botão morto. */
@supports not selector(:has(*)) {
  .aneis {
    display: none;
  }
}

/* ------------------------------------------------ "Agora, no seu salão" -- */

.agora {
  padding: 22px var(--margem) 20px;
  background: var(--t-sf);
  transition: background-color 0.7s ease;
}

.agora-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agora-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t-ac);
  transition: color 0.7s ease;
}

.agora-apoio {
  font: 400 11px/1 var(--ui);
  color: var(--t-corpo);
  transition: color 0.7s ease;
}

.pilha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.pilha .aviso {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: calc(var(--t-rad) - 2px);
  background: var(--t-bg);
  border: 1px solid var(--t-line);
  transform-origin: top center;
  transition:
    background-color 0.7s ease,
    border-color 0.7s ease,
    border-radius 0.7s ease;
}

.pilha .aviso:first-child {
  box-shadow: var(--t-sombra);
}

.pilha .aviso:nth-child(2) {
  opacity: 0.72;
  transform: scale(0.975);
}

.pilha .aviso:nth-child(3) {
  opacity: 0.42;
  transform: scale(0.95);
}

.pilha .aviso:nth-child(n + 4) {
  display: none;
}

.aviso-bolinha {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--t-ac);
  transition: background-color 0.7s ease;
}

.aviso-bolinha.aviso-alerta {
  background: var(--brasa);
}

.aviso-texto {
  flex: 1;
  min-width: 0;
}

.aviso-titulo,
.aviso-apoio {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.7s ease;
}

.aviso-titulo {
  font: 600 13px/1.3 var(--ui);
  color: var(--t-ink);
}

.aviso-apoio {
  margin-top: 2px;
  font: 400 11.5px/1.3 var(--ui);
  color: var(--t-corpo);
}

.aviso-valor {
  flex: none;
  font: 400 18px/1 var(--dp);
  color: var(--t-ac);
  transition: color 0.7s ease;
}

.numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
  border-top: 1px solid var(--t-line);
  transition: border-color 0.7s ease;
}

.numero {
  padding: 14px 0 12px 12px;
  transition: border-color 0.7s ease;
}

.numero:nth-child(odd) {
  padding: 14px 12px 12px 0;
  border-right: 1px solid var(--t-line);
}

.numero:nth-child(-n + 2) {
  border-bottom: 1px solid var(--t-line);
}

.numero-valor {
  display: block;
  font: 400 clamp(21px, 6.2cqw, 24px)/1.02 var(--dp);
  letter-spacing: -0.01em;
  color: var(--t-ink);
  transition: color 0.7s ease;
}

.numero-rotulo {
  display: block;
  margin-top: 5px;
  font: 400 clamp(11.5px, 3.1cqw, 12px)/1.4 var(--ui);
  color: var(--t-corpo);
  transition: color 0.7s ease;
}

/* ---------------------------------------------------------------- seções -- */

.sec {
  padding: 46px 0 42px;
}

.sec-claro {
  background: var(--creme);
}

.sec-branco {
  background: var(--papel);
  border-top: 1px solid var(--linha);
}

.sec-areia {
  background: var(--areia);
}

.sec-escuro {
  background: var(--escuro);
}

.sec-escuro2 {
  background: var(--escuro2);
}

.sec-filete {
  border-top: 1px solid var(--linha);
}

.sec-escuro.sec-filete,
.sec-escuro2.sec-filete {
  border-top-color: var(--escuro-linha);
}

.miolo {
  margin: 0 auto;
  padding: 0 18px;
}

.olho {
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.olho-ouro {
  color: var(--ouro);
}

.sec-integracoes .olho {
  color: var(--acento-no-escuro);
}

.sec-titulo {
  margin-top: 10px;
  font: 400 30px/1.04 var(--dp);
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--tinta);
}

.sec-titulo-grande {
  font-size: 31px;
  line-height: 1.03;
  letter-spacing: -0.018em;
}

.sec-titulo-medio,
.sec-titulo-planos {
  font-size: 27px;
  line-height: 1.06;
}

.sec-titulo-pequeno {
  margin-top: 9px;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.sec-titulo-claro {
  color: var(--creme);
}

.sec-texto {
  margin-top: 10px;
  font: 400 13.5px/1.55 var(--ui);
  text-wrap: pretty;
  color: var(--corpo);
}

.sec-texto-claro {
  color: var(--escuro-texto);
}

.produtos,
.recursos,
.precos,
.perguntas {
  padding: 32px 0;
}

.sec-integracoes {
  padding: 28px 0;
}

#produtos,
#recursos,
#planos,
#perguntas,
#avisos,
#formulario {
  scroll-margin-top: 64px;
}

/* Os pontos com título e texto — "Menos cadeira vazia", os itens do app. */
.pontos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.pontos-compactos {
  gap: 10px;
  margin-top: 16px;
}

.ponto {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.ponto-bolinha {
  flex: none;
  margin-top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
}

.pontos-brasa .ponto-bolinha {
  background: var(--brasa);
}

.ponto-titulo {
  font: 600 13.5px/1.3 var(--ui);
  color: var(--tinta);
}

.ponto-texto {
  margin-top: 2px;
  font: 400 12.5px/1.5 var(--ui);
  color: var(--corpo);
}

/* A maquete — ilustração, com nomes inventados; quem lê é a legenda da figura. */
.maquete {
  margin-top: 22px;
}

.maquete-livre {
  margin: 0;
}

/* -------------------------------------------- "Feito para quem vive…" -- */

.bolhas {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 24px;
}

.bolha {
  align-self: flex-start;
  max-width: 80%;
  padding: 10px 14px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 18px 18px 18px 5px;
  font: 400 17px/1.25 var(--dp);
  color: var(--tinta);
}

.bolha-direita {
  align-self: flex-end;
  background: var(--areia);
  border: 0;
  border-radius: 18px 18px 5px 18px;
}

.resposta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}

.resposta-marca {
  flex: none;
}

.resposta-titulo {
  font: 400 21px/1.15 var(--dp);
  color: var(--tinta);
}

.resposta-texto {
  margin-top: 6px;
  font: 400 13.5px/1.55 var(--ui);
  text-wrap: pretty;
  color: var(--corpo);
}

/* ---------------------------------------------------------- 01 · agenda -- */

.maquete-agenda {
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: 0 28px 44px -30px rgba(42, 33, 28, 0.5);
}

.maquete-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.maquete-dia {
  font: 400 18px/1 var(--dp);
  color: var(--tinta);
}

.maquete-apoio {
  font: 400 11px/1 var(--ui);
  color: var(--corpo);
}

.grade {
  display: grid;
  grid-template-columns: 28px repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.grade-prof {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font: 600 11.5px/1 var(--ui);
  color: var(--tinta);
}

.grade-rosto {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 2px var(--creme),
    0 0 0 3.5px var(--anel, var(--acento));
}

.grade-rosto-1 {
  --anel: var(--acento);
}

.grade-rosto-2 {
  --anel: var(--ouro);
}

.grade-rosto-3 {
  --anel: var(--marrom);
}

.grade-rosto img,
.equipe-rosto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* As iniciais no lugar da foto que ainda não existe, na cor do anel. */
.avatar-iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--anel, var(--acento));
  color: var(--papel);
  font: 700 9px/1 var(--ui);
  letter-spacing: 0.02em;
}

.grade-rosto-2.avatar-iniciais {
  color: var(--tinta);
}

.grade-horas {
  display: flex;
  flex-direction: column;
  font: 500 10px/1 var(--ui);
  color: var(--corpo);
}

.grade-horas span {
  height: 48px;
}

.grade-coluna {
  position: relative;
  height: 240px;
  background: repeating-linear-gradient(to bottom, var(--linha) 0 1px, transparent 1px 48px);
}

.bloco {
  position: absolute;
  left: 0;
  right: 0;
  padding: 4px 6px;
  border-radius: 8px;
  overflow: hidden;
}

.bloco-nome,
.bloco-servico {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bloco-nome {
  font: 600 10.5px/1.2 var(--ui);
  color: var(--tinta);
}

.bloco-servico {
  font: 400 10px/1.2 var(--ui);
  color: var(--corpo);
}

.b-karen,
.b-elisa {
  background: #f3e3d8;
  border-left: 2px solid var(--acento);
}

.b-lino,
.b-isadora,
.b-marta {
  background: var(--creme-quente);
  border-left: 2px solid var(--ouro);
}

.b-rafael,
.b-tulio,
.b-otavio {
  background: #eadfd6;
  border-left: 2px solid var(--marrom);
}

.b-karen {
  top: 0;
  height: 70px;
}

.b-elisa {
  top: 84px;
  height: 118px;
}

.b-lino {
  top: 24px;
  height: 34px;
}

.b-isadora {
  top: 72px;
  height: 46px;
}

.b-encaixe {
  top: 144px;
  height: 46px;
  border: 1.5px dashed var(--ouro);
  background: var(--papel);
}

.b-encaixe .bloco-nome {
  color: #7a5a40;
}

.b-marta {
  top: 204px;
  height: 34px;
}

.b-rafael {
  top: 0;
  height: 34px;
}

.b-tulio {
  top: 48px;
  height: 34px;
}

.b-almoco {
  top: 144px;
  height: 46px;
  background: repeating-linear-gradient(135deg, #efe6de 0 5px, var(--creme) 5px 10px);
}

.b-almoco .bloco-nome,
.b-almoco .bloco-servico {
  color: var(--corpo);
}

.b-otavio {
  top: 192px;
  height: 34px;
}

.pilula-escura-linha {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: -17px;
}

.pilula-escura {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--escuro);
  border-radius: 100px;
  box-shadow: 0 14px 28px -12px rgba(42, 33, 28, 0.6);
  font: 500 12px/1 var(--ui);
  color: var(--creme);
}

/* --------------------------------------------------------- 02 · painel -- */

.maquete-painel {
  padding: 16px 15px 15px;
  background: var(--escuro2);
  border: 1px solid var(--escuro-linha);
  border-radius: 18px;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.8);
}

.painel-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.painel-rotulo {
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--escuro-apoio);
}

.painel-vivo {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--ui);
  color: var(--escuro-texto);
}

.painel-vivo .pulso {
  width: 6px;
  height: 6px;
}

.painel-valor-linha {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.painel-valor {
  font: 400 42px/1 var(--dp);
  letter-spacing: -0.01em;
  color: var(--creme);
}

.painel-chip {
  padding: 4px 8px;
  border-radius: 100px;
  background: var(--escuro-linha);
  font: 600 11px/1 var(--ui);
  color: var(--ouro);
}

.painel-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font: 400 11.5px/1 var(--ui);
  color: var(--escuro-texto);
}

.painel-meta strong {
  color: var(--creme);
}

.painel-mix {
  margin-top: 16px;
}

.trilho {
  margin-top: 7px;
  height: 6px;
  border-radius: 6px;
  background: var(--escuro-linha);
  overflow: hidden;
}

.trilho-barra {
  height: 100%;
  border-radius: inherit;
}

.barra-meta {
  background: linear-gradient(90deg, var(--acento), var(--ouro));
}

.nivel-12 {
  width: 12%;
}

.nivel-38 {
  width: 38%;
}

.nivel-64 {
  width: 64%;
}

.nivel-81 {
  width: 81%;
}

.nivel-82 {
  width: 82%;
}

.painel-fluxo-topo {
  margin-top: 20px;
}

.painel-legenda {
  display: flex;
  gap: 9px;
  font: 400 10.5px/1 var(--ui);
  color: var(--escuro-texto);
}

.painel-legenda span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.painel-legenda i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.leg-entrada {
  background: var(--ouro);
}

.leg-saida {
  background: var(--corpo);
}

.painel-legenda .leg-saldo {
  width: 10px;
  height: 2px;
  border-radius: 0;
  background: var(--creme);
}

.fluxo {
  position: relative;
  height: 120px;
  margin-top: 12px;
  border-bottom: 1px solid var(--escuro-linha);
}

.fluxo-grafico {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fluxo-entrada {
  fill: var(--ouro);
}

.fluxo-saida {
  fill: var(--corpo);
}

/* A barra de cada dia sobe a partir do chão dela, e não do canto do SVG. */
.fluxo-grafico .rv-barra {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.fluxo-saldo {
  fill: none;
  stroke: var(--creme);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.painel-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  background: var(--escuro-linha);
  border-radius: 12px;
  overflow: hidden;
}

.painel-numeros > div {
  padding: 11px 10px;
  background: var(--escuro);
}

.painel-num {
  display: block;
  font: 600 16px/1 var(--ui);
  color: var(--creme);
}

.painel-num-ouro {
  color: var(--ouro);
}

.painel-num-rotulo {
  display: block;
  margin-top: 5px;
  font: 400 11px/1.3 var(--ui);
  color: var(--escuro-apoio);
}

.mix {
  display: flex;
  gap: 3px;
  margin-top: 7px;
  height: 6px;
}

.mix-servicos {
  flex: 84;
  border-radius: 6px;
  background: var(--acento);
}

.mix-revenda {
  flex: 16;
  border-radius: 6px;
  background: var(--ouro);
}

.painel-rodape {
  margin-top: 16px;
  font: 400 12.5px/1.5 var(--ui);
  color: var(--escuro-apoio);
  text-align: center;
}

/* ---------------------------------------------------- 03 · precificação -- */

.maquete-custo {
  padding: 17px 16px 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 18px;
  box-shadow: 0 28px 44px -30px rgba(42, 33, 28, 0.45);
}

.custo-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.custo-servico {
  font: 400 23px/1 var(--dp);
  color: var(--tinta);
}

.custo-apoio {
  margin-top: 5px;
  font: 400 11.5px/1 var(--ui);
  color: var(--corpo);
}

.custo-direita {
  text-align: right;
}

.custo-direita .custo-apoio {
  font-size: 11px;
}

.custo-preco {
  font: 600 24px/1 var(--ui);
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.custo-barra {
  display: flex;
  gap: 2px;
  height: 16px;
  margin-top: 18px;
  border-radius: 8px;
  overflow: hidden;
}

.cb-produtos {
  flex: 21;
  background: var(--marrom);
}

.cb-comissao {
  flex: 35;
  background: var(--acento);
}

.cb-outros {
  flex: 4;
  background: var(--brasa);
}

.cb-lucro {
  flex: 40;
  background: var(--ouro);
}

.custo-lista {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.custo-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--areia);
}

.custo-linha.custo-total {
  padding: 10px 0 0;
  border-bottom: 0;
}

.custo-cor {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.cor-produtos {
  background: var(--marrom);
}

.cor-comissao {
  background: var(--acento);
}

.cor-outros {
  background: var(--brasa);
}

.cor-lucro {
  background: var(--ouro);
}

.custo-rotulo {
  flex: 1;
  font: 400 12.5px/1.3 var(--ui);
  color: var(--corpo);
}

.custo-total .custo-rotulo {
  font: 600 13px/1.3 var(--ui);
  color: var(--tinta);
}

.custo-valor {
  font: 600 12.5px/1 var(--ui);
  color: var(--tinta);
}

.custo-valor-grande {
  font: 400 22px/1 var(--dp);
  color: var(--tinta);
}

.cartao-escuro {
  margin-top: 12px;
  padding: 14px 15px;
  background: var(--escuro);
  border-radius: 14px;
}

.cartao-escuro-titulo {
  font: 400 18px/1.2 var(--dp);
  color: var(--creme);
}

.cartao-escuro-texto {
  margin-top: 4px;
  font: 400 12.5px/1.5 var(--ui);
  color: var(--escuro-texto);
}

/* -------------------------------------------------------- 04 · estoque -- */

.baixa {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  padding: 11px 13px;
  background: var(--escuro);
  border-radius: 14px;
  box-shadow: 0 16px 30px -16px rgba(42, 33, 28, 0.6);
}

.baixa svg {
  flex: none;
}

.baixa-titulo {
  font: 600 12.5px/1.3 var(--ui);
  color: var(--creme);
}

.baixa-texto {
  margin-top: 2px;
  font: 400 11.5px/1.4 var(--ui);
  color: var(--escuro-texto);
}

.niveis {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.nivel-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.nivel-nome {
  font: 600 13px/1.3 var(--ui);
  color: var(--tinta);
}

.nivel-qtd {
  font: 400 12px/1.3 var(--ui);
  color: var(--corpo);
}

.trilho-claro {
  height: 7px;
  border-radius: 7px;
  background: var(--areia);
}

.barra-brasa {
  background: var(--brasa);
}

.barra-acento {
  background: var(--acento);
}

.barra-ouro {
  background: var(--ouro);
}

.barra-marrom {
  background: var(--marrom);
}

.nivel-nota {
  margin-top: 5px;
  font: 400 11px/1 var(--ui);
  color: var(--corpo);
}

.xml {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
  padding: 13px 14px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--creme);
}

.xml-icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 40px;
  border-radius: 6px;
  background: var(--papel);
  border: 1px solid var(--linha);
  font: 700 9.5px/1 var(--mono);
  color: var(--acento-texto);
}

.xml-titulo {
  font: 600 12.5px/1.3 var(--ui);
  color: var(--tinta);
}

.xml-texto {
  margin-top: 2px;
  font: 400 11.5px/1.45 var(--ui);
  color: var(--corpo);
}

/* --------------------------------------------------------- 05 · vendas -- */

.maquete-comanda {
  padding: 16px 16px 14px;
  background: var(--papel);
  border-radius: 16px;
  box-shadow: 0 28px 44px -30px rgba(42, 33, 28, 0.5);
}

.comanda-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 11px;
  border-bottom: 1px dashed var(--linha);
}

.comanda-numero {
  font: 400 18px/1 var(--dp);
  color: var(--tinta);
}

.comanda-cliente {
  font: 400 11.5px/1 var(--ui);
  color: var(--corpo);
}

.comanda-itens {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--linha);
}

.comanda-itens li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 400 12.5px/1.3 var(--ui);
  color: var(--tinta);
}

.comanda-itens .comanda-revenda {
  align-items: center;
  margin: 0 -8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--creme-quente);
}

.comanda-revenda em {
  margin-left: 6px;
  font: 700 9.5px/1 var(--ui);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--creme-quente-tinta);
}

.comanda-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  font: 600 13px/1 var(--ui);
  color: var(--tinta);
}

.comanda-total-valor {
  font: 400 26px/1 var(--dp);
}

.comanda-formas {
  display: flex;
  gap: 6px;
  margin-top: 11px;
}

.comanda-formas span {
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--areia);
  font: 500 11.5px/1 var(--ui);
  color: var(--tinta);
}

.fila {
  margin-top: 12px;
  padding: 15px;
  background: var(--papel);
  border-radius: 16px;
  border: 1px solid var(--linha);
}

.fila-rotulo {
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corpo);
}

.fila-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}

.fila-titulo {
  font: 400 20px/1.15 var(--dp);
  color: var(--tinta);
}

.fila-pontos {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 10px);
  gap: 4px;
}

.fila-pontos span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linha);
}

.fila-pontos .fp-quente {
  background: var(--brasa);
}

.fila-texto {
  margin-top: 6px;
  font: 400 12.5px/1.5 var(--ui);
  color: var(--corpo);
}

/* ------------------------------------------------------- 06 · sumidos -- */

.sumidos {
  margin-top: 22px;
  background: var(--escuro);
  border: 1px solid var(--escuro-linha);
  border-radius: 16px;
  overflow: hidden;
}

.sumido {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--escuro-linha);
}

.sumido:last-child {
  border-bottom: 0;
}

.sumido-rosto {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font: 600 12px/1 var(--ui);
  color: var(--creme);
}

.rosto-acento {
  background: var(--acento);
}

.rosto-marrom {
  background: var(--marrom);
}

.rosto-corpo {
  background: var(--corpo);
}

.sumido-texto {
  flex: 1;
  min-width: 0;
}

.sumido-nome {
  font: 600 13px/1.3 var(--ui);
  color: var(--creme);
}

.sumido-apoio {
  font: 400 11.5px/1.35 var(--ui);
  color: var(--escuro-apoio);
}

.conversa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}

.fala {
  padding: 10px 13px;
  font: 400 13px/1.45 var(--ui);
}

.fala-salao {
  align-self: flex-end;
  max-width: 84%;
  background: var(--creme);
  border-radius: 16px 16px 4px 16px;
  color: var(--tinta);
}

.fala-cliente {
  align-self: flex-start;
  max-width: 70%;
  background: var(--escuro-linha);
  border-radius: 16px 16px 16px 4px;
  color: var(--creme);
}

.volta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--ouro);
  font: 500 12.5px/1.4 var(--ui);
  color: var(--creme);
}

.volta svg {
  flex: none;
}

.sumidos-rodape {
  margin-top: 18px;
  font: 400 12.5px/1.5 var(--ui);
  color: var(--escuro-apoio);
}

/* -------------------------------------------------- 07 · app do dono -- */

.celular {
  margin: 24px auto 0;
  max-width: 300px;
  padding: 9px;
  background: var(--escuro);
  border-radius: 32px;
  box-shadow: 0 30px 50px -28px rgba(42, 33, 28, 0.6);
}

.celular-tela {
  background: var(--creme);
  border-radius: 24px;
  overflow: hidden;
}

.celular-topo {
  padding: 16px 14px 14px;
  background: var(--escuro);
}

.celular-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.celular-dia {
  font: 400 10px/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--escuro-apoio);
}

.celular-vivo {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 10px/1 var(--ui);
  color: var(--escuro-texto);
}

.celular-vivo .pulso {
  width: 6px;
  height: 6px;
}

.celular-titulo {
  margin-top: 6px;
  font: 400 21px/1 var(--dp);
  color: var(--creme);
}

.celular-resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.cr-rotulo {
  display: block;
  font: 400 9.5px/1 var(--ui);
  color: var(--escuro-apoio);
}

.cr-valor {
  display: block;
  margin-top: 4px;
  font: 600 13.5px/1 var(--ui);
  color: var(--creme);
}

.cr-saida {
  color: #e8a184;
}

.cr-ouro {
  color: var(--ouro);
}

.movs {
  display: flex;
  flex-direction: column;
  padding: 4px 12px 12px;
}

.mov {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}

.mov:nth-last-child(2) {
  border-bottom: 0;
}

.mov-hora {
  flex: none;
  width: 30px;
  font: 500 10px/1 var(--ui);
  color: var(--corpo);
}

.mov-texto {
  flex: 1;
  min-width: 0;
}

.mov-titulo {
  font: 600 12px/1.25 var(--ui);
  color: var(--tinta);
}

.mov-apoio {
  margin-top: 2px;
  font: 400 10.5px/1.3 var(--ui);
  color: var(--corpo);
}

.mov-valor {
  font: 600 12px/1 var(--ui);
  color: var(--tinta);
}

.mov-valor.mov-saida {
  color: #a8461f;
}

.mov-valor.mov-neutro {
  color: var(--corpo);
}

.mov-alerta {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 4px;
  padding: 10px 11px;
  background: #fbe9e0;
  border: 1px solid #efc3ae;
  border-radius: 12px;
}

.mov-alerta-ponto {
  flex: none;
  margin-top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brasa);
}

.mov-alerta .mov-titulo {
  line-height: 1.3;
}

.mov-alerta .mov-apoio {
  line-height: 1.4;
}

.duplo-extra .cartao-escuro {
  margin-top: 22px;
  padding: 15px 16px;
  border-radius: 15px;
}

.duplo-extra .cartao-escuro-titulo {
  font-size: 19px;
}

.duplo-extra .cartao-escuro .cartao-escuro-texto {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.45;
}

.chips-escuros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.chips-escuros li {
  padding: 5px 9px;
  border-radius: 100px;
  background: var(--escuro-linha);
  font: 500 11px/1 var(--ui);
  color: var(--creme);
}

/* ------------------------------------------------------- um dia com… -- */

.linha-do-dia {
  position: relative;
  margin-top: 24px;
  padding-left: 22px;
}

.linha-do-dia-traco {
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--acento);
  transform-origin: top;
}

.momentos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.momento {
  position: relative;
}

.momento-ponto {
  position: absolute;
  left: -22px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--creme);
  border: 1.5px solid var(--acento);
}

.momento-ultimo .momento-ponto {
  background: var(--acento);
}

.momento-hora {
  font: 600 11px/1 var(--mono);
  color: var(--acento-texto);
}

.momento-texto {
  margin-top: 5px;
  font: 400 17px/1.3 var(--dp);
  color: var(--tinta);
}

/* ------------------------------------------------- desktop e app (abas) -- */

.abas {
  display: flex;
  gap: 6px;
  margin: 17px 0 13px;
  padding: 4px;
  background: var(--areia);
  border-radius: 11px;
}

.aba {
  flex: 1;
  padding: 11px 8px;
  border-radius: 8px;
  cursor: pointer;
  font: 600 12.5px/1 var(--ui);
  text-align: center;
  color: var(--corpo);
  transition:
    background-color 0.18s,
    color 0.18s,
    box-shadow 0.18s;
}

.abas input:checked + .aba {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 2px 6px -2px rgba(42, 33, 28, 0.28);
}

.abas input:focus-visible + .aba {
  outline: 2px solid var(--acento-texto);
  outline-offset: 2px;
}

.aba-app {
  display: none;
}

.produtos:has(#produto-app:checked) .aba-desktop {
  display: none;
}

.produtos:has(#produto-app:checked) .aba-app {
  display: block;
  animation: subir 0.26s ease;
}

.produtos:has(#produto-desktop:checked) .aba-desktop {
  animation: subir 0.26s ease;
}

/* Sem `:has()`: as duas abas em sequência, e o seletor some. */
@supports not selector(:has(*)) {
  .abas {
    display: none;
  }

  .aba-app {
    display: block;
    margin-top: 28px;
  }
}

.janela {
  background: var(--escuro);
  border-radius: 14px;
  padding: 7px 7px 0;
  box-shadow: 0 18px 40px -20px rgba(42, 33, 28, 0.5);
}

.janela-pontos {
  display: flex;
  gap: 4px;
  padding: 0 3px 6px;
}

.janela-pontos span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a7a6e;
}

.janela-pontos span:nth-child(2) {
  background: var(--corpo);
}

.janela-pontos span:nth-child(3) {
  background: #544741;
}

.janela img {
  width: 100%;
  border-radius: 10px 10px 0 0;
  border: 1px solid var(--escuro-linha);
  border-bottom: 0;
}

.janela-vazia {
  aspect-ratio: 16 / 10;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(var(--creme) 0 0) 12px 12px / 30% 10px no-repeat,
    linear-gradient(var(--areia) 0 0) 12px 32px / calc(100% - 24px) 38% no-repeat,
    linear-gradient(var(--papel) 0 0) 0 0 / 100% 100% no-repeat;
}

.app-mini {
  display: flex;
  justify-content: center;
  padding: 6px 0 4px;
}

.app-mini-tela {
  width: 176px;
  background: var(--papel);
  border: 6px solid var(--escuro);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(42, 33, 28, 0.5);
}

.app-mini-topo {
  padding: 11px 11px 8px;
  background: var(--escuro);
}

.app-mini-dia {
  font: 400 10px/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--escuro-apoio);
}

.app-mini-titulo {
  margin-top: 5px;
  font: 400 21px/1 var(--dp);
  color: var(--creme);
}

.app-mini-numeros {
  display: flex;
  gap: 11px;
  margin-top: 8px;
}

.app-mini-numeros strong {
  display: block;
  font: 600 14px/1 var(--ui);
  color: var(--creme);
}

.app-mini-numeros .app-mini-ouro {
  color: var(--ouro);
}

.app-mini-numeros span {
  display: block;
  margin-top: 3px;
  font: 400 10px/1 var(--ui);
  color: var(--escuro-apoio);
}

.app-mini-lista {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 9px 11px;
}

.app-mini-lista li {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 7px 8px;
  background: var(--creme);
  border-radius: 9px;
  border-left: 2px solid var(--acento);
}

.app-mini-lista li > span {
  flex: none;
  width: 32px;
  font: 600 10.5px/1 var(--ui);
  color: var(--corpo);
}

.app-mini-lista div {
  min-width: 0;
}

.app-mini-lista p {
  font: 400 10.5px/1.2 var(--ui);
  color: var(--corpo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-mini-lista p:first-child {
  font: 600 11.5px/1.2 var(--ui);
  color: var(--tinta);
}

.app-mini-lista p + p {
  margin-top: 2px;
}

/* ----------------------------------------------- recursos e perguntas -- */

.acordeao {
  margin-top: 18px;
  border-top: 1px solid var(--areia);
}

.recurso {
  border-bottom: 1px solid var(--areia);
}

.recurso summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}

.recurso summary::-webkit-details-marker {
  display: none;
}

.recurso summary:hover {
  background: #fffcf8;
}

.recurso-num {
  flex: none;
  width: 18px;
  font: 500 10px/1 var(--mono);
  color: var(--acento-texto);
}

.recurso-nome {
  flex: 1;
  font: 400 18px/1.2 var(--dp);
  color: var(--tinta);
}

.recurso-sinal {
  flex: none;
  width: 16px;
  text-align: center;
  font: 300 19px/1 var(--ui);
  color: var(--corpo);
}

.recurso-sinal::before {
  content: '+';
}

.recurso[open] .recurso-sinal::before {
  content: '−';
}

.recurso-texto {
  margin: -4px 0 12px 27px;
  font: 400 12.5px/1.5 var(--ui);
  color: var(--corpo);
}

.recurso[open] .recurso-texto {
  animation: subir 0.2s ease;
}

.pergunta .recurso-texto {
  margin-left: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* --------------------------------------------------------- integrações -- */

.integracoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 16px;
  background: var(--escuro-linha);
  border: 1px solid var(--escuro-linha);
  border-radius: 11px;
  overflow: hidden;
}

.integracoes li {
  padding: 12px 11px;
  background: var(--escuro2);
}

.int-nome {
  font: 600 12.5px/1.3 var(--ui);
  color: var(--creme);
}

.int-texto {
  margin-top: 3px;
  font: 400 11px/1.4 var(--ui);
  color: var(--escuro-apoio);
}

/* ---------------------------------------------------------------- planos -- */

/* O Mensal/Anual: dois rádios, e `:has()` troca o preço à vista. Sem `:has()`
   o seletor some e cada card mostra o mensal com o anual escrito embaixo
   (`.preco-alternativa`). */
.ciclo {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 20px auto 14px;
  padding: 4px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 100px;
  box-shadow: 0 12px 26px -18px rgba(42, 33, 28, 0.45);
  min-inline-size: 0;
}

.ciclo-opcao {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  border-radius: 100px;
  cursor: pointer;
  font: 600 13px/1 var(--ui);
  color: var(--corpo);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.ciclo-opcao:last-of-type {
  padding-right: 12px;
}

.ciclo input:checked + .ciclo-opcao {
  background: var(--tinta);
  color: var(--creme);
}

.ciclo input:focus-visible + .ciclo-opcao {
  outline: 2px solid var(--acento-texto);
  outline-offset: 2px;
}

.ciclo-selo {
  padding: 4px 7px;
  border-radius: 100px;
  font: 700 10.5px/1 var(--ui);
  background: var(--creme-quente);
  color: var(--creme-quente-tinta);
}

.ciclo input:checked + .ciclo-opcao .ciclo-selo {
  background: var(--brasa);
  color: var(--brasa-tinta);
}

@supports selector(:has(*)) {
  .preco-alternativa {
    display: none;
  }

  .precos:not(:has(#ciclo-anual:checked)) .preco-anual {
    display: none;
  }

  .precos:has(#ciclo-anual:checked) .preco-mensal {
    display: none;
  }
}

@supports not selector(:has(*)) {
  .ciclo,
  .preco-anual {
    display: none;
  }
}

.equipe-faixa {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
  padding: 14px 15px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 15px;
}

.equipe-rostos {
  flex: none;
  display: flex;
}

.equipe-rosto {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--papel);
}

.equipe-rosto + .equipe-rosto {
  margin-left: -9px;
}

.equipe-rosto.avatar-iniciais:nth-child(2) {
  --anel: var(--ouro);
  color: var(--tinta);
}

.equipe-rosto.avatar-iniciais:nth-child(3) {
  --anel: var(--marrom);
}

.equipe-rosto.avatar-iniciais:nth-child(4) {
  --anel: var(--corpo);
}

.equipe-infinito {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinta);
  font: 400 19px/1 var(--dp);
  color: var(--creme);
}

.equipe-titulo {
  font: 400 18px/1.15 var(--dp);
  color: var(--tinta);
}

.equipe-texto {
  margin-top: 3px;
  font: 400 11.5px/1.45 var(--ui);
  text-wrap: pretty;
  color: var(--corpo);
}

/* Os cards rolam de lado no celular, com a borda do próximo à vista — é o que
   diz "tem mais para o lado" sem seta nenhuma. */
.planos-lista {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 18px;
  padding: 4px 18px 16px;
  scrollbar-width: none;
}

.planos-lista::-webkit-scrollbar {
  display: none;
}

.planos-lista:focus-visible {
  outline-offset: -2px;
}

.plano-card {
  --pc-tinta: var(--tinta);
  --pc-apoio: var(--corpo);
  --pc-linha: var(--linha);
  --pc-teste: var(--acento-texto);

  flex: none;
  width: 68%;
  max-width: 250px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 17px 16px;
  border-radius: 15px;
  background: var(--papel);
  border: 1px solid var(--linha);
}

.plano-card.plano-destacado {
  --pc-tinta: var(--creme);
  --pc-apoio: var(--escuro-texto);
  --pc-linha: var(--escuro-linha);
  --pc-teste: #e8c9b4;

  background: var(--escuro);
  border-color: var(--escuro);
  box-shadow: 0 20px 44px -22px rgba(42, 33, 28, 0.6);
}

.plano-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.plano-card .plano-nome {
  font: 400 21px/1 var(--dp);
  color: var(--pc-tinta);
}

.plano-linha {
  margin-top: 3px;
  font: 400 12px/1.4 var(--ui);
  color: var(--pc-apoio);
}

.plano-canais {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
}

.plano-canais li {
  padding: 4px 8px;
  border-radius: 100px;
  font: 500 10.5px/1 var(--ui);
  background: var(--areia);
  color: var(--corpo);
}

.plano-destacado .plano-canais li {
  background: var(--escuro-linha);
  color: var(--creme);
}

.plano-card .plano-preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}

.plano-valor {
  font: 600 30px/1 var(--ui);
  letter-spacing: -0.025em;
  color: var(--pc-tinta);
}

/* Os centavos menores: "R$ 59,00" com o peso do "R$ 59" do protótipo. */
.plano-centavos {
  font-size: 16px;
  letter-spacing: 0;
}

.plano-sufixo {
  font: 400 12px/1 var(--ui);
  color: var(--pc-apoio);
}

.plano-cheio {
  margin-left: 4px;
  font: 400 12px/1 var(--ui);
  color: var(--pc-apoio);
}

.plano-cobranca {
  margin-top: 6px;
  font: 400 11.5px/1.4 var(--ui);
  color: var(--pc-apoio);
}

.plano-teste {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font: 600 11.5px/1 var(--ui);
  color: var(--pc-teste);
}

.plano-itens {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 13px 0 16px;
  padding-top: 11px;
  border-top: 1px solid var(--pc-linha);
}

.plano-itens li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font: 400 12.5px/1.4 var(--ui);
  color: var(--pc-apoio);
}

.plano-itens li::before {
  content: '';
  flex: none;
  margin-top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acento);
}

.plano-botao {
  margin-top: auto;
  display: block;
  padding: 13px 11px;
  text-align: center;
  border-radius: 11px;
  font: 600 13px/1 var(--ui);
  background: var(--areia);
  color: var(--tinta);
}

.plano-botao:hover {
  color: var(--tinta);
  background: var(--linha);
}

.plano-destacado .plano-botao {
  background: var(--brasa);
  color: var(--brasa-tinta);
}

.plano-destacado .plano-botao:hover {
  background: #e06a42;
  color: var(--brasa-tinta);
}

.planos-nota {
  margin-top: 13px;
  font: 400 11.5px/1.5 var(--ui);
  color: var(--corpo);
}

.comparar {
  margin-top: 30px;
}

.comparar-titulo {
  font: 400 22px/1.1 var(--dp);
  color: var(--tinta);
}

.comparar-texto {
  margin-top: 6px;
  font: 400 12.5px/1.5 var(--ui);
  text-wrap: pretty;
  color: var(--corpo);
}

.tabela-caixa {
  margin-top: 14px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: 0 24px 40px -32px rgba(42, 33, 28, 0.45);
}

.tabela-planos {
  width: 100%;
  min-width: 300px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.tabela-planos th,
.tabela-planos td {
  font-weight: 400;
}

.tabela-canto {
  padding: 14px 10px 12px 12px;
  vertical-align: bottom;
  text-align: left;
  font: 500 9.5px/1.3 var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corpo);
}

.tabela-plano {
  width: 60px;
  padding: 14px 2px 12px;
  vertical-align: bottom;
  text-align: center;
  color: var(--tinta);
}

.tabela-plano span {
  display: block;
}

.tabela-plano-destaque {
  background: var(--escuro);
  border-radius: 12px 12px 0 0;
  color: var(--creme);
}

.tabela-plano-nome {
  font: 600 11px/1.1 var(--ui);
}

.tabela-plano-preco {
  margin-top: 4px;
  font: 600 12px/1 var(--ui);
  letter-spacing: -0.01em;
}

.tabela-plano-sufixo {
  margin-top: 2px;
  font: 400 9.5px/1 var(--ui);
  color: var(--corpo);
}

.tabela-plano-destaque .tabela-plano-sufixo {
  color: var(--escuro-texto);
}

.tabela-plano-breve {
  margin: 5px auto 0;
  width: fit-content;
  padding: 2px 5px;
  border-radius: 100px;
  background: var(--creme-quente);
  font: 700 8.5px/1.1 var(--ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--creme-quente-tinta);
}

.tabela-grupo th {
  padding: 10px 12px;
  background: var(--areia);
  border-top: 1px solid var(--linha);
  text-align: left;
  font: 600 9.5px/1.2 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.tabela-planos tbody tr:not(.tabela-grupo) > * {
  border-top: 1px solid var(--areia2);
}

.tabela-recurso {
  padding: 11px 8px 11px 12px;
  text-align: left;
}

.tabela-recurso-nome {
  display: block;
  font: 600 12.5px/1.25 var(--ui);
  text-wrap: pretty;
  color: var(--tinta);
}

.tabela-recurso-desc {
  display: block;
  margin-top: 3px;
  font: 400 11px/1.4 var(--ui);
  text-wrap: pretty;
  color: var(--corpo);
}

.tabela-celula {
  padding: 10px 3px;
  text-align: center;
  vertical-align: middle;
}

.tabela-destaque {
  background: #f7ece4;
  box-shadow:
    inset 1px 0 #d9b8a4,
    inset -1px 0 #d9b8a4;
}

.marca-sim,
.marca-nao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
}

.marca-sim {
  background: var(--acento);
  color: var(--papel);
}

.marca-nao {
  background: #efe8e1;
}

.marca-nao::after {
  content: '';
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  background: #b8a99d;
}

.marca-addon {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 100px;
  background: var(--creme-quente);
  font: 600 9.5px/1 var(--ui);
  color: var(--creme-quente-tinta);
}

.marca-texto {
  display: block;
  font: 600 10px/1.25 var(--ui);
  text-align: center;
  color: var(--tinta);
}

.tabela-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 11px;
  font: 400 11px/1.4 var(--ui);
  color: var(--corpo);
}

.tabela-legenda li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.marca-mini {
  width: 10px;
  height: 10px;
}

.marca-mini svg {
  display: none;
}

.marca-nao.marca-mini::after {
  display: none;
}

.tabela-legenda .marca-addon {
  padding: 2px 5px;
  font-size: 9px;
}

/* --------------------------------------------------------- perguntas FAQ -- */

.perguntas .acordeao {
  border-top-color: var(--linha);
}

.perguntas .recurso {
  border-bottom-color: var(--linha);
}

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

.chamada {
  padding: 30px 0;
  text-align: center;
}

.chamada-titulo {
  font: 400 26px/1.08 var(--dp);
  letter-spacing: -0.015em;
  color: var(--tinta);
}

.chamada .botao-escuro {
  margin-top: 16px;
}

.chamada-nota {
  margin-top: 10px;
  font: 400 12px/1.5 var(--ui);
  color: var(--corpo);
}

.chamada-celular {
  margin: 8px auto 0;
  max-width: 34em;
  font: 400 11.5px/1.5 var(--ui);
  color: var(--corpo);
}

/* -------------------------------------------------- páginas de público -- */

.destaques-lista {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.destaque {
  padding: 15px 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 15px;
}

.destaque-titulo {
  font: 400 19px/1.2 var(--dp);
  color: var(--tinta);
}

.destaque-texto {
  margin-top: 5px;
  font: 400 13px/1.55 var(--ui);
  color: var(--corpo);
}

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

.rod {
  background: var(--escuro);
}

.rod-miolo {
  margin: 0 auto;
  padding: 24px 18px calc(28px + env(safe-area-inset-bottom));
}

.rod-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 400 16px/1 var(--dp);
  color: var(--creme);
}

.rod-sobre {
  margin-top: 10px;
  max-width: 300px;
  font: 400 12.5px/1.55 var(--ui);
  color: var(--escuro-apoio);
}

.rod-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  margin-top: 17px;
  padding-top: 8px;
  border-top: 1px solid var(--escuro-linha);
}

.rod-links a {
  padding: 6px 0;
  font: 400 12.5px/1.5 var(--ui);
  color: var(--creme);
}

.rod-links a:hover {
  color: #e8c9b4;
}

.rod-links-fracos {
  margin-top: 3px;
  padding-top: 0;
  border-top: 0;
}

.rod-links-fracos a {
  color: var(--escuro-texto);
}

/* O primeiro grupo de links não leva rótulo no celular — o protótipo o desenha
   só com o filete em cima. No computador, cada coluna tem o seu. */
.rod-coluna-site .rod-rotulo {
  display: none;
}

.rod-rotulo {
  margin-top: 16px;
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--escuro-apoio);
}

.rod-empresa {
  margin-top: 17px;
  padding-top: 13px;
  border-top: 1px solid var(--escuro-linha);
  font: 400 11px/1.6 var(--ui);
  color: var(--escuro-apoio);
}

.rod-empresa a {
  color: var(--escuro-texto);
}

.rod-copia {
  margin-top: 8px;
  font: 400 11.5px/1.5 var(--ui);
  color: var(--escuro-apoio);
}

/* ------------------------------------------------------- central legal -- */

.miolo-texto {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 18px 44px;
}

.doc-titulo {
  margin-top: 10px;
  font: 400 34px/1.02 var(--dp);
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--tinta);
}

.doc-resumo {
  margin-top: 10px;
  font: 400 13.5px/1.55 var(--ui);
  text-wrap: pretty;
  color: var(--corpo);
}

.doc-versao {
  margin-top: 10px;
  font: 400 11.5px/1.4 var(--ui);
  color: var(--corpo);
}

/* As abas do protótipo são links: cada documento tem endereço próprio. */
.legal-abas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 20px -18px 0;
  padding: 2px 18px 6px;
  scrollbar-width: none;
}

.legal-abas::-webkit-scrollbar {
  display: none;
}

.legal-aba {
  flex: none;
  padding: 11px 14px;
  border: 1px solid var(--linha);
  border-radius: 100px;
  background: var(--papel);
  font: 600 12.5px/1 var(--ui);
  white-space: nowrap;
  color: var(--corpo);
}

.legal-aba:hover {
  color: var(--tinta);
  border-color: var(--acento);
}

.legal-aba.legal-aba-ativa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--creme);
}

.doc-cartao {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 14px;
  padding: 22px 18px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 18px;
}

.doc-secao {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-secao-titulo {
  font: 400 21px/1.15 var(--dp);
  color: var(--tinta);
}

/* As cláusulas da EULA vêm em caixa alta do `.txt` do instalador, que é o
   mesmo texto que o Windows mostra. Na serifa de 21 px a caixa alta pesa como
   um grito; no Karla com espaçamento ela vira o que é — um rótulo de cláusula. */
.doc-clausula {
  font: 700 13px/1.35 var(--ui);
  letter-spacing: 0.05em;
  color: var(--tinta);
}

.doc-cartao p {
  font: 400 13.5px/1.62 var(--ui);
  text-wrap: pretty;
  color: var(--tinta-doc);
}

.doc-lista {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* O ponto é posicionado, e não item de flex: um `<li>` em flex parte a frase em
   colunas no primeiro link que ela tiver — "(veja a Política de Cookies)" virava
   três colunas lado a lado. */
.doc-lista li {
  position: relative;
  padding-left: 14px;
  font: 400 13.5px/1.55 var(--ui);
  color: var(--tinta-doc);
}

.doc-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
}

.doc-tabela {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha);
  border-radius: 12px;
  overflow: hidden;
}

.doc-tabela-linha {
  padding: 11px 13px;
  background: var(--papel);
}

.doc-tabela-linha + .doc-tabela-linha {
  border-top: 1px solid var(--areia2);
}

.doc-cartao .doc-tabela-nome {
  font: 600 13px/1.3 var(--ui);
  color: var(--tinta);
}

.doc-cartao .doc-tabela-campo {
  margin-top: 3px;
  font: 400 12px/1.45 var(--ui);
  color: var(--tinta-doc);
}

.doc-tabela-nome + .doc-tabela-campo {
  margin-top: 5px;
}

.doc-tabela-campo span {
  color: var(--corpo);
}

/* A EULA é um texto corrido, cláusula a cláusula — o espaço entre parágrafos
   é o de um contrato, não o de seções de uma política. */
.doc-cartao.doc-eula {
  gap: 10px;
}

.doc-eula .doc-clausula {
  margin-top: 16px;
}

.doc-eula .doc-clausula:first-child {
  margin-top: 0;
}

.empresa {
  margin-top: 18px;
  padding: 18px;
  background: var(--escuro);
  border-radius: 18px;
}

.empresa-olho {
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ouro);
}

.empresa-linha {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 9px;
}

.empresa-olho + .empresa-linha {
  margin-top: 13px;
}

.empresa-rotulo {
  font: 400 11px/1.3 var(--ui);
  color: var(--escuro-apoio);
}

.empresa-valor {
  font: 500 13.5px/1.4 var(--ui);
  color: var(--creme);
}

.legal-dpo {
  margin-top: 18px;
  text-align: center;
  font: 400 12px/1.6 var(--ui);
  color: var(--corpo);
}

.legal-dpo a {
  font-weight: 600;
}

.legal-rodape {
  margin-top: 6px;
  text-align: center;
  font: 400 11.5px/1.5 var(--ui);
  color: var(--corpo);
}

/* ---------------------------------------------------------------- contato -- */

.canais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.canal {
  display: block;
  padding: 15px 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 15px;
}

.canal:hover {
  border-color: var(--acento);
}

.canal span {
  display: block;
}

.canal-rotulo {
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.canal-email {
  margin-top: 8px;
  font: 600 14px/1.3 var(--ui);
  word-break: break-all;
  color: var(--tinta);
}

.canal-uso {
  margin-top: 4px;
  font: 400 12px/1.45 var(--ui);
  color: var(--corpo);
}

.form-contato {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 20px 18px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 18px;
}

.form-titulo {
  margin-bottom: 2px;
  font: 400 22px/1.15 var(--dp);
  color: var(--tinta);
}

.form-recusa {
  padding: 11px 13px;
  border: 1px solid var(--alerta);
  border-radius: 11px;
  background: #fbf0ec;
  font: 500 13.5px/1.5 var(--ui);
  color: var(--alerta);
}

.form-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-rotulo {
  font: 600 12px/1 var(--ui);
  color: var(--tinta);
}

/* 16 px no campo, e não os 14 do protótipo: abaixo disso o Safari do iPhone dá
   zoom ao focar, e a página salta debaixo do dedo de quem está escrevendo. */
.form-entrada {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--linha);
  border-radius: 11px;
  background: var(--creme);
  font: 400 16px/1.2 var(--ui);
  color: var(--tinta);
}

.form-entrada:focus-visible {
  outline: 2px solid var(--acento-texto);
  outline-offset: 1px;
  border-color: var(--acento);
}

.form-area {
  line-height: 1.45;
  resize: vertical;
}

.form-assuntos {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.form-assuntos legend {
  padding: 0;
  margin-bottom: 6px;
}

.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.form-chip {
  flex: none;
  padding: 10px 13px;
  border: 1px solid var(--linha);
  border-radius: 100px;
  background: var(--papel);
  cursor: pointer;
  white-space: nowrap;
  font: 600 12.5px/1 var(--ui);
  color: var(--corpo);
}

.form-chips input:checked + .form-chip {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--creme);
}

.form-chips input:focus-visible + .form-chip {
  outline: 2px solid var(--acento-texto);
  outline-offset: 2px;
}

.form-enviar {
  margin-top: 2px;
  width: 100%;
  box-shadow: none;
}

.form-nota {
  font: 400 11.5px/1.5 var(--ui);
  color: var(--corpo);
}

/* O campo-isca: fora da tela, fora do teclado e do leitor de tela. O robô que
   preenche tudo o preenche; a pessoa nunca o vê. */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-enviado {
  align-items: flex-start;
  gap: 8px;
}

.form-visto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--acento);
}

.form-texto {
  font: 400 13px/1.55 var(--ui);
  color: var(--corpo);
}

.form-enviado .botao-claro {
  margin-top: 6px;
}

/* --------------------------------------------------------------- instalar -- */

.guia-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.guia-entrar {
  display: block;
  padding: 13px 12px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
  text-align: center;
  font: 600 13.5px/1 var(--ui);
  color: var(--tinta);
}

.guia-nota {
  margin-top: 12px;
  font: 400 13px/1.55 var(--ui);
  color: var(--corpo);
}

/* O aviso-mãe: **antes** dos passos, porque é onde a pessoa olha quando decide
   clicar. Um alerta no rodapé chegaria depois do susto. */
.chamada-aviso {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--alerta);
  border-radius: 14px;
}

.chamada-aviso p {
  font: 400 13.5px/1.6 var(--ui);
  color: var(--tinta-doc);
}

.chamada-aviso p + p {
  margin-top: 10px;
}

.guia-secao {
  margin-top: 38px;
}

.guia-secao > p {
  margin-top: 10px;
  font: 400 14px/1.62 var(--ui);
  color: var(--tinta-doc);
}

.doc-subtitulo {
  font: 400 26px/1.1 var(--dp);
  letter-spacing: -0.012em;
  color: var(--tinta);
}

.passos {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.passo {
  padding: 18px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 18px;
  break-inside: avoid;
}

.passo h3 {
  margin: 6px 0 12px;
  font: 600 17px/1.3 var(--ui);
  color: var(--tinta);
}

.passo p {
  margin-bottom: 10px;
  font: 400 13.5px/1.6 var(--ui);
  color: var(--tinta-doc);
}

.passo p:last-child {
  margin-bottom: 0;
}

.passo .passo-quando {
  margin: 0;
  font: 500 10px/1.2 var(--ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.passo .passo-rotulo {
  margin: 12px 0 4px;
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corpo);
}

/* O que o Windows escreve, escrito como o Windows escreve: quem lê está
   comparando com a tela na frente dela. */
.passo .tela {
  padding: 11px 13px;
  background: var(--areia);
  border-radius: 10px;
}

.tela em {
  font-style: normal;
  font-weight: 600;
}

.clique {
  display: inline-block;
  padding: 0 6px;
  background: var(--areia);
  border: 1px solid var(--linha);
  border-radius: 5px;
  font-weight: 600;
  white-space: nowrap;
}

.passo .nota {
  font-size: 12.5px;
  color: var(--corpo);
}

.cartao-doc {
  margin-top: 14px;
  padding: 18px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 18px;
}

.cartao-doc p {
  font: 400 13.5px/1.6 var(--ui);
  color: var(--tinta-doc);
}

.lista-doc {
  display: grid;
  gap: 10px;
}

.cartao-doc p + .lista-doc {
  margin-top: 12px;
}

.lista-doc li {
  position: relative;
  padding-left: 16px;
  font: 400 13.5px/1.6 var(--ui);
  color: var(--tinta-doc);
}

.lista-doc li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
}

.guia-secao > .guia-fim {
  margin-top: 18px;
}

/* ------------------------------------------------------------------- 404 -- */

.nao-achei-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.nao-achei-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  font: 600 14px/1.2 var(--ui);
  color: var(--tinta);
  text-decoration: none;
}

.nao-achei-links a::after {
  content: '›';
  font: 400 20px/1 var(--ui);
  color: var(--acento-texto);
}

.nao-achei-links a:hover {
  border-color: var(--acento);
}

/* ============================================================== ≥ 600 px -- */

@media (min-width: 600px) {
  .tabela-plano {
    width: 104px;
  }

  .tabela-plano-nome {
    font-size: 12.5px;
  }

  .tabela-plano-preco {
    font-size: 14px;
  }

  .destaques-lista {
    grid-template-columns: 1fr 1fr;
  }

  .rod-links {
    grid-template-columns: repeat(3, 1fr);
  }

  .legal-abas {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ============================================================== ≥ 960 px -- */

/* O computador — lacuna do protótipo, que só desenha o celular. A página se
   distribui na largura: o miolo vai a 1320 px, as seções que no celular são uma
   coluna viram duas (o título de um lado, o conteúdo do outro), o cabeçalho fica
   preso ao rolar com o menu no centro, e o rodapé abre em quatro colunas. */
@media (min-width: 960px) {
  :root {
    --margem: 32px;
    --largura: 1320px;
  }

  /* ------------------------------------------------ o cabeçalho, preso -- */

  /* Preso ao rolar, em toda página. Translúcido e com desfoque, e não sólido: o
     conteúdo passa por baixo e continua se percebendo, como no cabeçalho da
     Central legal do protótipo — que é o único cabeçalho preso que ele desenha. */
  .cab {
    position: sticky;
    top: 0;
    background: var(--t-bg);
    background: color-mix(in srgb, var(--t-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.3) blur(12px);
    backdrop-filter: saturate(1.3) blur(12px);
    border-bottom: 1px solid var(--t-line);
    transition:
      background-color 0.7s ease,
      border-color 0.7s ease;
  }

  /* Até 1120 px o centro da página não cabe: com o menu nele, as ações invadem o
     último item (medido — 14 px por cima de "Contato" em 960). Aqui o menu se
     centra no espaço entre a marca e as ações; a partir de 1120, na página. */
  .cab-linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    max-width: var(--largura);
    min-height: 68px;
    margin: 0 auto;
    padding: 12px var(--margem);
  }

  .cab-marca {
    justify-self: start;
  }

  .menu {
    display: none;
  }

  .cab-nav {
    display: flex;
    justify-self: center;
    align-items: center;
    gap: 22px;
  }

  .cab-nav a {
    position: relative;
    padding: 12px 0;
    font: 500 14px/1 var(--ui);
    color: var(--t-ink);
    transition: color 0.2s ease;
  }

  .cab-nav a:hover,
  .cab-entrar:hover {
    color: var(--t-ac);
  }

  /* A página em que a pessoa está: o traço laranja da marca embaixo do nome. */
  .cab-nav a[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--brasa);
  }

  .cab-acoes {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 20px;
  }

  .cab-entrar {
    padding: 12px 0;
    font: 600 14px/1 var(--ui);
    color: var(--t-ink);
  }

  .cab-acoes .cab-cta {
    flex: none;
    padding: 12px 18px;
    font-size: 13.5px;
  }

  /* A âncora não para embaixo do cabeçalho preso. */
  #produtos,
  #recursos,
  #planos,
  #perguntas,
  #avisos,
  #formulario {
    scroll-margin-top: 92px;
  }

  /* ---------------------------------------------------------- o topo -- */

  .heroi {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas:
      'texto foto'
      'aneis foto';
    align-items: center;
    column-gap: 64px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 48px var(--margem) 60px;
  }

  .heroi-texto {
    grid-area: texto;
    align-self: end;
    padding: 0 0 8px;
  }

  .heroi-foto {
    grid-area: foto;
    border-radius: var(--t-rad);
    box-shadow: var(--t-sombra);
    transition: border-radius 0.7s ease;
  }

  .aneis {
    grid-area: aneis;
    align-self: start;
    justify-content: flex-start;
    padding: 22px 0 0;
  }

  .pausa {
    right: 0;
  }

  .slide-titulo {
    font-size: clamp(44px, 4.3cqw, 64px);
  }

  .slide-resumo {
    max-width: 34em;
    font-size: 16.5px;
  }

  /* A pilha e os números lado a lado: numa coluna só, a faixa deixaria metade da
     tela vazia. O miolo sai do recuo, e não de uma caixa a mais no HTML — a
     porcentagem do `padding` é da largura do topo. */
  .agora {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'topo numeros'
      'pilha numeros';
    grid-template-rows: auto 1fr;
    column-gap: 72px;
    padding: 36px max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem))) 40px;
  }

  .agora-topo {
    grid-area: topo;
  }

  .agora .pilha {
    grid-area: pilha;
  }

  .numeros {
    grid-area: numeros;
    align-self: center;
    margin-top: 0;
  }

  /* -------------------------------------------------------- as seções -- */

  .sec {
    padding: 96px 0 88px;
  }

  .produtos,
  .recursos,
  .precos,
  .perguntas {
    padding: 88px 0;
  }

  .sec-integracoes,
  .chamada {
    padding: 72px 0;
  }

  .miolo,
  .miolo-estreito {
    max-width: var(--largura);
    padding: 0 var(--margem);
  }

  /* A página de erro continua estreita: são cinco links, e esticá-los não
     distribui nada. As páginas de texto (legal e instalação) têm grade própria,
     mais abaixo. */
  .miolo-texto {
    max-width: 784px;
    padding: 56px var(--margem) 72px;
  }

  .sec-titulo {
    font-size: 42px;
  }

  .sec-titulo-grande {
    font-size: 44px;
  }

  .sec-titulo-medio,
  .sec-titulo-planos {
    font-size: 38px;
  }

  .sec-titulo-pequeno {
    font-size: 32px;
  }

  .sec-texto {
    max-width: 36em;
    font-size: 16px;
  }

  /* "Feito para quem vive o salão": o título e a resposta de um lado, as
     perguntas do dia do outro. */
  .dores .miolo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'olho bolhas'
      'titulo bolhas'
      'resposta bolhas';
    grid-template-rows: auto auto 1fr;
    column-gap: 88px;
  }

  .dores .olho {
    grid-area: olho;
  }

  .dores .sec-titulo {
    grid-area: titulo;
  }

  .dores .bolhas {
    grid-area: bolhas;
    align-self: center;
    margin-top: 0;
  }

  .dores .resposta {
    grid-area: resposta;
    align-self: start;
  }

  .bolha {
    font-size: 19px;
  }

  /* As seções de figura: o texto de um lado, a figura do outro — e os lados
     alternam (`duplo-invertido`, decidido por quem monta a página). */
  .miolo-duplo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas:
      'texto figura'
      'extra figura';
    grid-template-rows: auto 1fr;
    column-gap: 88px;
    align-items: start;
  }

  .miolo-duplo.duplo-invertido {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas:
      'figura texto'
      'figura extra';
  }

  .duplo-texto {
    grid-area: texto;
  }

  .duplo-figura {
    grid-area: figura;
    align-self: center;
  }

  .duplo-extra {
    grid-area: extra;
  }

  .duplo-figura.maquete,
  .duplo-figura .maquete,
  .duplo-figura.celular,
  .duplo-figura .baixa,
  .duplo-figura .sumidos {
    margin-top: 0;
  }

  .ponto-titulo {
    font-size: 15px;
  }

  .ponto-texto {
    font-size: 14px;
  }

  /* "Um dia com o Bátus": a linha do tempo deita, e as cinco horas ficam lado a
     lado. */
  .linha-do-dia {
    margin-top: 52px;
    padding: 36px 0 0;
  }

  .linha-do-dia-traco {
    left: 0;
    right: 0;
    top: 4px;
    bottom: auto;
    width: auto;
    height: 1px;
    transform-origin: left;
  }

  .momentos {
    flex-direction: row;
    gap: 32px;
  }

  .momento {
    flex: 1 1 0;
  }

  .momento-ponto {
    left: 0;
    top: -36px;
  }

  .momento-texto {
    font-size: 19px;
  }

  /* "Dois produtos": o texto, as abas e os pontos de um lado, a janela do outro.
     O painel da aba vira `contents` para os filhos dele entrarem na grade da
     seção — a janela à direita, os pontos à esquerda, embaixo das abas. */
  .produtos .miolo {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas:
      'olho figura'
      'titulo figura'
      'texto figura'
      'abas figura'
      'pontos figura';
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 80px;
    align-items: start;
  }

  .produtos .olho {
    grid-area: olho;
  }

  .produtos .sec-titulo {
    grid-area: titulo;
  }

  .produtos .sec-texto {
    grid-area: texto;
  }

  .produtos .abas {
    grid-area: abas;
    margin: 26px 0 6px;
  }

  .produtos .aba-desktop {
    display: contents;
  }

  .produtos:has(#produto-app:checked) .aba-app {
    display: contents;
  }

  .produtos .janela,
  .produtos .app-mini {
    grid-area: figura;
    align-self: center;
  }

  .produtos .app-mini {
    justify-self: center;
  }

  .produtos .pontos {
    grid-area: pontos;
  }

  /* Recursos e perguntas: o título fica preso de um lado enquanto a lista rola do
     outro. */
  .recursos .miolo,
  .perguntas .miolo {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas:
      'olho lista'
      'titulo lista';
    grid-template-rows: auto 1fr;
    column-gap: 80px;
  }

  .recursos .olho,
  .perguntas .olho {
    grid-area: olho;
  }

  .recursos .sec-titulo,
  .perguntas .sec-titulo {
    grid-area: titulo;
    align-self: start;
    position: sticky;
    top: 112px;
  }

  .recursos .acordeao,
  .perguntas .acordeao {
    grid-area: lista;
    margin-top: 0;
  }

  .recurso-nome {
    font-size: 20px;
  }

  .recurso-texto,
  .pergunta .recurso-texto {
    font-size: 15px;
  }

  .integracoes {
    grid-template-columns: repeat(4, 1fr);
  }

  .integracoes li {
    padding: 18px 16px;
  }

  .int-nome {
    font-size: 14px;
  }

  .int-texto {
    font-size: 12.5px;
  }

  /* -------------------------------------------------------- os planos -- */

  .precos .miolo:first-child {
    text-align: center;
  }

  .precos .sec-texto {
    margin-inline: auto;
  }

  .equipe-faixa {
    max-width: 600px;
    margin: 0 auto 20px;
    text-align: left;
  }

  .planos-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 12px var(--margem) 20px;
    overflow: visible;
  }

  .plano-card {
    width: auto;
    max-width: none;
    padding: 26px 24px;
  }

  .comparar,
  .planos-nota {
    max-width: 1080px;
    margin-inline: auto;
  }

  .planos-nota {
    text-align: center;
  }

  .tabela-plano {
    width: 150px;
  }

  /* ------------------------------------------------------- a chamada -- */

  .chamada .botao-escuro {
    max-width: 360px;
    margin-inline: auto;
  }

  .chamada-titulo {
    font-size: 44px;
  }

  .chamada-celular {
    display: none;
  }

  /* ------------------------------------------ as páginas de público -- */

  /* O título de um lado, os quatro destaques em 2 × 2 do outro. */
  .destaques .miolo {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas:
      'olho lista'
      'titulo lista'
      'texto lista';
    grid-template-rows: auto auto 1fr;
    column-gap: 80px;
  }

  .destaques .olho {
    grid-area: olho;
  }

  .destaques .sec-titulo {
    grid-area: titulo;
  }

  .destaques .sec-texto {
    grid-area: texto;
  }

  .destaques .destaques-lista {
    grid-area: lista;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 0;
  }

  .destaque {
    padding: 20px 22px;
  }

  .destaque-titulo {
    font-size: 21px;
  }

  .destaque-texto {
    font-size: 14px;
  }

  /* -------------------------------------------- o rodapé, em colunas -- */

  /* A marca e três listas, e a empresa numa faixa embaixo, na largura toda. */
  .rod-miolo {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    column-gap: 48px;
    max-width: var(--largura);
    padding: 64px var(--margem) 36px;
  }

  .rod-sobre {
    max-width: 340px;
    font-size: 13.5px;
  }

  .rod-coluna-site .rod-rotulo {
    display: block;
  }

  .rod-rotulo {
    margin-top: 4px;
  }

  .rod-links,
  .rod-links-fracos {
    grid-template-columns: 1fr;
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
  }

  .rod-links a {
    padding: 5px 0;
    font-size: 14px;
  }

  .rod-base {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--escuro-linha);
  }

  .rod-empresa {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .rod-copia {
    margin: 0;
  }

  /* ------------------------------------- a central legal, com menu ao lado -- */

  /* As abas viram um menu lateral, preso ao rolar; o documento fica numa coluna
     de leitura ao lado — a largura da página se usa sem esticar a linha do texto
     além do que se lê. */
  .legal .miolo-texto {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    column-gap: 80px;
    max-width: var(--largura);
    padding: 64px var(--margem) 88px;
  }

  .legal .miolo-texto > * {
    grid-column: 2;
    max-width: 880px;
  }

  .legal .miolo-texto > .legal-abas {
    grid-column: 1;
    grid-row: 1 / span 20;
    align-self: start;
    position: sticky;
    top: 108px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .legal .legal-aba {
    padding: 11px 14px;
    border-color: transparent;
    border-radius: 10px;
    background: none;
    font-size: 14px;
  }

  .legal .legal-aba:hover {
    background: var(--papel);
    border-color: var(--linha);
  }

  .legal .legal-aba.legal-aba-ativa {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--creme);
  }

  .doc-titulo {
    font-size: 46px;
  }

  .doc-resumo {
    font-size: 16px;
  }

  .doc-cartao {
    padding: 34px 36px;
  }

  .doc-cartao p,
  .doc-lista li {
    font-size: 15px;
  }

  /* ------------------------------ o guia de instalação, em duas colunas -- */

  /* A apresentação fica presa de um lado — é onde estão o botão e o aviso —, e os
     passos rolam do outro. */
  .guia .miolo-texto {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 80px;
    align-items: start;
    max-width: var(--largura);
    padding: 64px var(--margem) 88px;
  }

  .guia-capa {
    grid-column: 1;
    grid-row: 1 / span 10;
    position: sticky;
    top: 108px;
  }

  .guia-secao {
    grid-column: 2;
  }

  .guia-secao:first-of-type {
    margin-top: 0;
  }

  .passo p,
  .cartao-doc p,
  .lista-doc li,
  .guia-secao > p,
  .chamada-aviso p {
    font-size: 15px;
  }
}

/* O menu no centro da página: `1fr auto 1fr`, e não o meio do espaço entre a
   marca e as ações — que o empurraria para a esquerda, porque as ações são mais
   largas que a marca. */
@media (min-width: 1120px) {
  .cab-linha {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .cab-nav {
    gap: 26px;
  }
}

@media (min-width: 1280px) {
  :root {
    --margem: 48px;
  }
}

/* Monitor largo: o miolo cresce mais um degrau, para a página não virar uma
   coluna no meio de duas faixas vazias. O texto não acompanha — cada coluna
   tem o próprio teto de linha (`.sec-texto`). */
@media (min-width: 1600px) {
  :root {
    --largura: 1440px;
  }
}

/* =================================================================== print -- */

@media print {
  .cab,
  .rod,
  .pular,
  .aneis,
  .gaveta,
  .legal-abas {
    display: none !important;
  }

  body,
  .sec,
  .doc-cartao,
  .passo,
  .cartao-doc {
    background: #ffffff !important;
  }

  .doc-cartao,
  .passo,
  .cartao-doc {
    border-color: #bbbbbb;
    break-inside: avoid;
  }
}

/* ====================================================== movimento reduzido -- */

/* Com a preferência ligada, nada entra em cena nem gira: o carrossel para no
   primeiro slide (o `site.js` não o liga), e as trocas são instantâneas. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}