/* ==========================================================================
   Oculab · site.css — D3 "Oferta direta", na pele da tabela de preços (F7.2)
   Mobile-first. Tokens em :root. Fontes locais (OFL) em ../fonts/.
   Ritmo das seções, como no impresso: capa (navy + foto + faixa laranja) →
   abertura em creme com arcos → páginas internas (navy / branco, Sora) →
   contracapa (tinta + arcos) → faixa laranja do rodapé.
   Breakpoints: 600 (gutter 24) · 768 (tablet) · 900 (hero em 2 colunas)
   · 1024 (cabeçalho fixo em vez da barra; gutter 48) · 1280 (gutter 80, conteúdo 1280)
   ========================================================================== */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-400-800.woff2") format("woff2");
}
/* Sora (títulos de seção e de cartão, como nas páginas internas da tabela de preços):
   subconjunto latino, eixo de peso limitado a 600–700 (fontTools instancer + subset). */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/sora-latin-600-700.woff2") format("woff2");
}
/* JetBrains Mono (numeração 01–05, números dos passos, medidas): só dígitos e pontuação
   básica, eixo 500–700. Não tem acentos de propósito — nunca usar em texto corrido. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-700.woff2") format("woff2");
}

:root {
  /* marca (paleta da tabela de preços, F7.1) */
  --laranja: #ef552c;          /* superfícies e texto grande */
  --laranja-texto: #c8421c;    /* texto pequeno SÓ sobre branco (4,94:1); no creme dá 4,50 — não usar */
  --laranja-escuro: #b83a17;   /* texto pequeno sobre creme e cinzas (≥ 5,1:1) */
  --laranja-claro: #ff7a50;    /* hover do botão laranja */
  --laranja-suave: #ffd9cc;    /* hover do botão branco */
  --laranja-palido: #fff0eb;   /* quadrinho dos ícones (como nos cartões da tabela) */
  --navy: #1a2230;             /* o navy da tabela; substitui #243650 e #2f4560 */
  --tinta: #14181f;
  /* neutros */
  --creme: #f7f4ef;            /* só nas aberturas/cartazes, com o padrão de arcos */
  --branco: #ffffff;
  --cinza-1: #f3f6f9;          /* painéis claros (como o aviso de refazimento da tabela) */
  --cinza-2: #eef2f6;
  --cinza-3: #dfe6ee;
  --cinza-linha: #e3e8ee;      /* linhas finas das listas */
  --cinza-borda: #d5dde6;      /* borda dos cartões */
  --cinza-claro: #c9d3df;      /* texto secundário sobre navy/tinta */
  --texto-2: #4f5d6d;          /* texto secundário sobre branco/cinzas/creme */
  /* tipografia */
  --fonte-display: "Anton", Impact, "Haettenschweiler", "Franklin Gothic Medium", sans-serif;
  --fonte-titulo: "Sora", "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --fonte-texto: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* espaçamento */
  --gutter: 16px;
  --conteudo-max: 1280px;
  --secao-y: clamp(56px, 3vw + 44px, 88px);
  --raio: 4px;
  --raio-foto: 14px;
  --raio-cartao: 12px;
  --barra-altura: 72px;
  --cabecalho-fixo-altura: 64px;
  --sombra: 0 12px 32px rgba(20, 24, 31, 0.28);
  /* foco: trocado por seção conforme o fundo */
  --cor-foco: var(--tinta);
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }
@media (min-width: 1280px) { :root { --gutter: 80px; } }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--branco);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
a {
  color: var(--laranja-escuro);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--tinta); }
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Anton: cartazes (hero, "E se…?", faixa do laboratório, CTA final) */
.disp {
  font-family: var(--fonte-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
  overflow-wrap: anywhere; /* só quebra palavra se ela sozinha não couber na linha (fonte do sistema a 200%) */
}
h1.disp, h2.disp { text-wrap: balance; }
/* Sora: títulos das seções de informação (prova, serviços, privacidade), como nas páginas internas */
.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
h2.titulo { text-wrap: balance; }
/* JetBrains Mono: números (passos, numeração das objeções, medidas, CNPJ) */
.num {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kicker {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.container {
  width: 100%;
  max-width: calc(var(--conteudo-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.somente-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Padrão de arcos da tabela (V5), inline e atrás do conteúdo. É <svg>, não <img> nem
   background-image: assim o texto por cima não entra no caminho de pixel do portão 2b. */
.arcos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Pular para o conteúdo
   -------------------------------------------------------------------------- */
.pular {
  position: absolute;
  top: -200px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
  border-radius: var(--raio);
  text-decoration: none;
  --cor-foco: #fff;
}
.pular:focus, .pular:focus-visible { top: 16px; outline-color: #fff; }

/* --------------------------------------------------------------------------
   Botões e links
   Contraste (calculado): .btn-dark → branco/#1a2230 15,96, hover branco/#14181f 17,8
   · .btn-orange → #14181f/#ef552c 5,09, hover #14181f/#ff7a50 6,91
   · .btn-white → #14181f/#fff 17,8, hover #14181f/#ffd9cc 13,6
   · .lnk-ink → #14181f sobre creme/branco 16,2/17,8; sobre navy vira branco 15,96
   · .lnk-light sobre laranja → #14181f 5,09; hover branco sobre #14181f 17,8
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px clamp(14px, 2.5vw, 34px);
  border-radius: 6px;
  font-family: var(--fonte-texto);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn svg { flex: none; }
.btn-lg { min-height: clamp(58px, 4vw + 42px, 68px); font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem); }
.btn-md { min-height: clamp(52px, 2vw + 44px, 60px); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); }
.btn-sm { min-height: 44px; font-size: 0.9375rem; }
.btn--cheio { width: 100%; }
@media (min-width: 600px) { .btn--cheio { width: auto; } }

.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--tinta); color: #fff; }
.btn-orange { background: var(--laranja); color: var(--tinta); }
.btn-orange:hover { background: var(--laranja-claro); color: var(--tinta); }
.btn-white { background: #fff; color: var(--tinta); }
.btn-white:hover { background: var(--laranja-suave); color: var(--tinta); }
.btn-ghost { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.btn-ghost:hover { background: var(--tinta); color: #fff; }

.lnk-ink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--tinta);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  border-radius: 3px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lnk-ink:hover { color: #fff; background: var(--tinta); }
.lnk-ink svg { flex: none; }
/* sobre navy (cabeçalho, hero): branco, e o hover inverte */
.sobre-navy .lnk-ink { color: #fff; }
.sobre-navy .lnk-ink:hover { color: var(--navy); background: #fff; }
.lnk-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  border-radius: 3px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lnk-light:hover { color: #fff; background: var(--tinta); }
.lnk-light svg { flex: none; }

.icone-balao { width: 22px; height: 22px; }
.icone-check { width: 15px; height: 15px; }
/* quadrinho de ícone dos cartões e blocos (como na tabela: fundo #fff0eb, traço #c8421c) */
.icone-quadro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--laranja-palido);
  color: var(--laranja-texto);
}
.icone-quadro svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Cabeçalho (navy, como o alto da capa)
   -------------------------------------------------------------------------- */
.cabecalho { background: var(--navy); color: #fff; --cor-foco: #fff; }
.cabecalho__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 72px;
}
.marca { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }
.marca img { width: 77px; height: 32px; }
.cabecalho__nav { display: flex; align-items: center; gap: 4px; }
.cabecalho__nav .lnk-ink { font-size: 0.8125rem; font-weight: 600; padding: 0 10px; }
.cabecalho .ver-como { display: none; }
@media (min-width: 768px) {
  .cabecalho__grid { min-height: 96px; }
  .marca img { width: 106px; height: 44px; }
  .cabecalho__nav .lnk-ink { font-size: 0.875rem; padding: 0 14px; }
  .cabecalho .ver-como { display: inline-flex; font-size: 0.9375rem; font-weight: 700; }
}

/* --------------------------------------------------------------------------
   1. Hero = a oferta, no espírito da capa: navy, a foto da lente (F1), Anton
   branco + laranja. O texto só fica sobre a foto onde o véu é opaco (≥ 0,93),
   medido em px — o portão 2b troca a foto por branco/preto e mede por pixel.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  --cor-foco: #fff;
}
.hero__foto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  z-index: 0;
}
.hero__foto picture, .hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__foto img { object-fit: cover; object-position: 100% 0; }
/* véu em px, não em %: o texto começa em 300px e aí o navy já está em 0,93+ */
.hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 34, 48, 0.3) 0,
    rgba(26, 34, 48, 0) 56px,
    rgba(26, 34, 48, 0) 150px,
    rgba(26, 34, 48, 0.93) 270px,
    #1a2230 350px
  );
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-top: 300px;
  padding-bottom: 44px;
}
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; }
.hero__kicker { font-size: 0.6875rem; color: #fff; }
.hero__titulo {
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 14px;
}
.hero__titulo-destaque { color: var(--laranja); }
.hero__sub {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--cinza-3);
  margin-top: 16px;
  max-width: 600px;
}
.selo {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  background: var(--laranja);
  color: var(--tinta);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 11px 14px 11px 12px;
  border-radius: 3px;
}
.selo .ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tinta);
  box-shadow: inset 0 0 0 2px var(--navy);
  flex: none;
}
.hero .selo { transform: rotate(-2deg); }
.hero .btn-lg { margin-top: 22px; }
.reversoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}
.reversoes li { display: flex; align-items: center; gap: 8px; }
.reversoes svg { flex: none; color: var(--laranja); }
.reversoes--claro { color: #fff; }
@media (min-width: 600px) {
  .reversoes { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; font-size: 0.9375rem; }
}
.hero__ver-como { margin-top: 8px; margin-left: -12px; font-size: 0.875rem; }
.hero__etiqueta-col { display: none; }

@media (min-width: 600px) {
  .hero__foto { height: 480px; }
  .hero__veu {
    background: linear-gradient(
      to bottom,
      rgba(26, 34, 48, 0.3) 0,
      rgba(26, 34, 48, 0) 56px,
      rgba(26, 34, 48, 0) 190px,
      rgba(26, 34, 48, 0.93) 320px,
      #1a2230 410px
    );
  }
  .hero__grid { padding-top: 350px; }
}
@media (min-width: 768px) {
  .hero .ver-como { display: none; }
}
@media (min-width: 900px) {
  .hero { display: flex; flex-direction: column; min-height: 640px; }
  /* a foto ocupa a metade direita (a lente fica no canto, fora da etiqueta); o véu é
     horizontal e sólido até 60% da largura, onde termina a coluna de texto em todas as
     larguras (900–1440) */
  .hero__foto { height: 100%; bottom: 0; }
  .hero__foto picture { left: 50%; width: 50%; }
  .hero__foto img { object-position: 100% 0; }
  /* dois véus: o horizontal (sólido até 60%) e um esmaecimento no alto, para a foto
     nascer do navy do cabeçalho sem aresta */
  .hero__veu {
    background:
      linear-gradient(to bottom, #1a2230 0, rgba(26, 34, 48, 0) 120px),
      linear-gradient(
        to right,
        #1a2230 0,
        #1a2230 60%,
        rgba(26, 34, 48, 0.93) 66%,
        rgba(26, 34, 48, 0) 84%
      );
  }
  .hero__grid {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 56px;
    align-items: stretch;
  }
  .hero__texto { justify-content: center; }
  .hero__kicker { font-size: 0.8125rem; }
  .hero__titulo { margin-top: 22px; }
  .hero__sub { margin-top: 28px; }
  .hero .selo { display: none; }
  .hero .btn-lg { margin-top: 34px; }
  .reversoes { margin-top: 18px; }
  /* a etiqueta pendurada na base da coluna da direita, abaixo da lente */
  .hero__etiqueta-col { display: flex; justify-content: flex-start; align-items: flex-end; padding-top: 200px; }
}
@media (min-width: 1280px) {
  .hero { min-height: 720px; }
  .hero__etiqueta-col { padding-top: 240px; }
}

.etiqueta {
  position: relative;
  width: min(372px, 100%);
  transform: rotate(-4deg);
  background: var(--laranja);
  color: var(--tinta);
  padding: 56px 34px 38px;
  border-radius: 6px;
  box-shadow: 0 34px 70px rgba(10, 14, 22, 0.5);
}
.etiqueta__furo {
  position: absolute;
  top: 18px;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: inset 0 0 0 4px var(--tinta);
}
.etiqueta .kicker { color: var(--tinta); }
.etiqueta__titulo {
  font-size: clamp(3rem, 2rem + 2vw, 4.125rem);
  text-transform: uppercase;
  color: #fff;
  margin-top: 12px;
}
.etiqueta__linha { border-top: 2px dashed rgba(20, 24, 31, 0.4); margin: 24px 0; }
.etiqueta__texto { font-size: 1rem; line-height: 1.5; font-weight: 600; }

/* --------------------------------------------------------------------------
   Como funciona (faixa laranja, como a base da capa; âncora #como-funciona)
   -------------------------------------------------------------------------- */
.passos { background: var(--laranja); color: var(--tinta); --cor-foco: var(--tinta); }
.passos__grid { display: grid; gap: 22px; padding-block: 32px 36px; }
.passos__titulo { color: var(--tinta); }
.passos__lista { display: grid; gap: 18px; }
.passos__lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
  padding-top: 14px;
  border-top: 3px solid var(--tinta);
}
.passos__num {
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tinta);
}
.passos__icone { width: 28px; height: 28px; justify-self: end; }
.passos__lista p { grid-column: 1 / -1; font-size: 1.0625rem; line-height: 1.4; font-weight: 700; }
@media (min-width: 768px) {
  .passos__grid { gap: 26px; padding-block: 40px 44px; }
  .passos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .passos__lista li { grid-template-columns: auto 1fr auto; align-items: center; }
  .passos__num { font-size: 2.75rem; }
  .passos__icone { grid-column: 3; width: 30px; height: 30px; }
  .passos__lista p { font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   Fotos (blocos com proporção fixa; a imagem cobre; cantos como na tabela)
   -------------------------------------------------------------------------- */
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-foto);
  background: var(--navy);
}
.foto img, .foto picture { width: 100%; height: 100%; }
.foto img { object-fit: cover; }
.foto--16x9 { aspect-ratio: 16 / 9; }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--3x1 { aspect-ratio: 3 / 1; }

/* --------------------------------------------------------------------------
   2. E se…? (creme, abertura de seção: arcos + Anton laranja gigante)
   -------------------------------------------------------------------------- */
.duvidas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--creme);
  padding-block: var(--secao-y);
  --cor-foco: var(--tinta);
}
.duvidas > .container { position: relative; z-index: 1; }
.duvidas__topo { display: grid; gap: 20px; }
.duvidas__titulo {
  font-size: clamp(4.5rem, 2rem + 16vw, 11rem);
  line-height: 0.9;
  color: var(--laranja);
  margin-left: -0.03em;
}
.duvidas__sub {
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.375rem);
  line-height: 1.45;
  color: var(--texto-2);
  font-weight: 500;
  margin-top: 12px;
  max-width: 560px;
}
@media (min-width: 1024px) {
  .duvidas__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: end; }
  /* a coluna do título tem (100vw - gutters - 560 - 64); em uma linha o "E se…?" mede ~2,8em */
  .duvidas .duvidas__titulo { font-size: min(11rem, calc((100vw - 96px - 624px) / 2.95)); white-space: nowrap; text-wrap: nowrap; }
  .duvidas__sub { margin-top: 16px; }
}

.objecoes { margin-top: 28px; border-bottom: 2px solid var(--navy); }
.objecoes li { border-top: 2px solid var(--navy); padding: 16px 0 18px; display: grid; gap: 8px; }
.objecoes__cab { display: flex; align-items: baseline; gap: 12px; }
.objecoes__num {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--laranja-escuro);
  flex: none;
}
.objecoes h3 { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.625rem); color: var(--navy); }
.objecoes p { font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem); line-height: 1.5; color: var(--navy); }
@media (min-width: 768px) {
  .objecoes { margin-top: 36px; }
  .objecoes li {
    grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr);
    gap: 24px;
    padding: 26px 0;
    align-items: start;
  }
  .objecoes__cab { display: contents; }
  .objecoes__num { font-size: 0.9375rem; padding-top: 10px; }
  .objecoes p { padding-top: 4px; }
}
@media (min-width: 1280px) {
  .objecoes li { grid-template-columns: 72px 500px minmax(0, 1fr); gap: 32px; }
}

.duvidas__cta { margin-top: 24px; display: grid; gap: 12px; align-items: center; }
.duvidas__cta-titulo { font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); color: var(--navy); }
.duvidas__cta .reversoes { margin-top: 12px; color: var(--navy); }
.duvidas__cta .reversoes svg { color: var(--laranja-escuro); }
@media (min-width: 900px) {
  .duvidas__cta { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   3. Prova de ofício (navy, página interna: Sora)
   -------------------------------------------------------------------------- */
.oficio { background: var(--navy); color: #fff; padding-block: var(--secao-y); --cor-foco: #fff; }
.oficio .kicker { color: var(--cinza-claro); }
.oficio__topo { display: grid; gap: 24px; }
.oficio__titulo { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem); color: #fff; margin-top: 12px; }
.marcadores { display: grid; gap: 12px; font-size: 1rem; line-height: 1.5; color: var(--cinza-3); }
.marcadores strong { color: #fff; }
.marcadores li { display: flex; gap: 12px; align-items: flex-start; }
.marcadores li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--laranja);
  margin-top: 0.5em;
}
.oficio__fotos { display: grid; gap: 20px; margin-top: 20px; }
@media (max-width: 767.98px) {
  .oficio .container { display: flex; flex-direction: column; }
  .oficio__topo { display: contents; }
  .oficio__fotos { order: 1; }
  .marcadores { order: 2; margin-top: 24px; }
  .oficio__cta { order: 3; }
}
@media (min-width: 768px) {
  .oficio__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
  .marcadores { font-size: 1.125rem; gap: 14px; }
  .marcadores li::before { width: 12px; height: 12px; margin-top: 0.45em; }
}
@media (min-width: 1024px) {
  .oficio__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: end; }
}
.oficio__cta {
  margin-top: 24px;
  border-top: 2px solid rgba(255, 255, 255, 0.28);
  padding-top: 20px;
  display: grid;
  gap: 12px;
}
.oficio__cta-titulo { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 600; color: #fff; }
.oficio__cta-sub {
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  line-height: 1.5;
  color: var(--cinza-claro);
  font-weight: 500;
  margin-top: 8px;
}
@media (min-width: 900px) {
  .oficio__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    margin-top: 48px;
    padding-top: 32px;
  }
}

/* --------------------------------------------------------------------------
   4. Serviços (branco, página interna: Sora, cartões com borda, listas com linha)
   -------------------------------------------------------------------------- */
.servicos { background: #fff; color: var(--navy); padding-block: var(--secao-y); --cor-foco: var(--navy); }
.servicos__topo { display: flex; flex-direction: column-reverse; gap: 12px; }
.servicos__topo .kicker { color: var(--laranja-texto); }
.servicos__titulo { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem); color: var(--navy); }
@media (min-width: 900px) {
  .servicos__topo { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .servicos__topo .kicker { padding-bottom: 10px; }
}
.foto--faixa { margin-top: 20px; aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .foto--faixa { aspect-ratio: auto; height: 420px; margin-top: 28px; }
}

.servicos__blocos { display: grid; gap: 32px; margin-top: 32px; }
.servicos__bloco { display: grid; gap: 14px; align-content: start; }
.servicos__bloco-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.servicos__bloco-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.servicos__bloco-titulo .icone-quadro { width: 34px; height: 34px; border-radius: 8px; }
.servicos__bloco-titulo .icone-quadro svg { width: 18px; height: 18px; }
.servicos__bloco-nota { font-size: 0.875rem; line-height: 1.4; color: var(--texto-2); }

.cartoes { display: grid; gap: 12px; }
.cartao {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px 18px 18px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-cartao);
  background: #fff;
}
.cartao .icone-quadro { width: 36px; height: 36px; border-radius: 8px; margin-bottom: 8px; }
.cartao .icone-quadro svg { width: 18px; height: 18px; }
.cartao h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.cartao p { font-size: 0.9375rem; line-height: 1.45; color: var(--texto-2); }
@media (min-width: 600px) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.linhas li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cinza-linha);
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--navy);
}
.linhas li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--laranja);
}

/* desenho da tabela (V3: acabada × surfaçada), inline, em duas linhas. Os rótulos são
   HTML, não <text> do SVG: escalam com a fonte do sistema e o portão de contraste os mede. */
.servicos__vetor {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--raio-cartao);
  background: var(--cinza-1);
}
.vetor { display: flex; align-items: center; gap: 14px; }
.vetor svg { flex: none; width: min(42%, 200px); height: auto; }
.vetor p { font-size: 0.875rem; line-height: 1.4; color: var(--texto-2); }
.vetor strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
}

@media (min-width: 768px) {
  .servicos__blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 40px; }
  .servicos__bloco--largo { grid-column: 1 / -1; }
  .servicos__bloco--largo .cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .servicos__bloco--lentes { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cab cab" "cartoes vetor"; column-gap: 24px; }
  .servicos__bloco--lentes .servicos__bloco-cab { grid-area: cab; }
  .servicos__bloco--lentes .cartoes { grid-area: cartoes; grid-template-columns: 1fr; align-content: start; }
  .servicos__bloco--lentes .servicos__vetor { grid-area: vetor; align-content: center; }
}
@media (min-width: 1024px) {
  .servicos__blocos { gap: 40px 48px; }
}

.servicos__rodape {
  margin-top: 32px;
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: var(--raio-cartao);
  background: var(--cinza-1);
}
.servicos__rodape-texto { display: grid; gap: 14px; align-content: start; }
.servicos__rodape-titulo { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); color: var(--navy); }
.servicos__rodape-sub { font-size: 1rem; line-height: 1.5; color: var(--texto-2); }
.servicos__rodape .btn { justify-self: start; }
@media (min-width: 768px) {
  .servicos__rodape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 24px; margin-top: 48px; }
  .servicos__rodape .foto { order: 2; }
}
@media (min-width: 1024px) {
  .servicos__rodape { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 28px 32px; }
}

/* --------------------------------------------------------------------------
   Faixa: o laboratório inteiro (#laboratorio)
   -------------------------------------------------------------------------- */
.laboratorio { position: relative; background: var(--navy); color: #fff; --cor-foco: #fff; }
.laboratorio__foto { display: grid; }
.laboratorio__foto picture { display: block; height: max(260px, 56.25vw); overflow: hidden; }
.laboratorio__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.laboratorio__texto { display: grid; gap: 6px; padding-block: 20px 28px; }
.laboratorio .kicker { color: var(--cinza-claro); font-size: 0.6875rem; }
.laboratorio__titulo { font-size: clamp(2rem, 1rem + 4.4vw, 4rem); color: #fff; max-width: 1100px; }
.laboratorio__titulo-destaque { color: var(--laranja); }
@media (min-width: 768px) {
  .laboratorio__foto { min-height: clamp(360px, 36vw, 520px); }
  .laboratorio__foto > picture, .laboratorio__veu { grid-area: 1 / 1; }
  /* a foto não dita a altura: quem dita é o min-height da faixa ou o texto, se crescer */
  .laboratorio__foto picture { position: relative; height: auto; }
  .laboratorio__foto img { position: absolute; inset: 0; }
  /* véu = fundo do próprio bloco do texto, POR CIMA da foto (z-index), sólido (≥ 0,9)
     atrás de todo o texto e esmaecendo só nos 56px de cima do padding — acompanha o
     texto quando ele cresce (fonte do sistema maior, espaçamento de texto). */
  .laboratorio__veu {
    position: relative;
    z-index: 1;
    align-self: end;
    background: linear-gradient(to top, rgba(20, 24, 31, 0.94) 0%, rgba(20, 24, 31, 0.9) calc(100% - 56px), rgba(20, 24, 31, 0) 100%);
  }
  .laboratorio__texto { gap: 12px; padding-block: 72px 44px; }
  .laboratorio .kicker { font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   6. CTA final (tinta + arcos, como a contracapa)
   -------------------------------------------------------------------------- */
.final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tinta);
  color: #fff;
  padding-block: var(--secao-y);
  --cor-foco: #fff;
}
.final__conteudo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.selo--branco { background: #fff; color: var(--tinta); margin-top: 0; font-size: 0.6875rem; transform: none; }
.selo--branco .ponto { background: var(--laranja); box-shadow: none; }
.final__titulo {
  font-size: clamp(3.25rem, 1rem + 8.5vw, 7.75rem);
  line-height: 0.88;
  text-transform: uppercase;
  color: #fff;
  margin-top: 20px;
}
.final__titulo-destaque { color: var(--laranja); }
.final__sub {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--cinza-3);
  margin-top: 16px;
  max-width: 680px;
}
.final .btn-lg { margin-top: 24px; }
.final .reversoes svg { color: var(--laranja); }
@media (min-width: 900px) {
  .final__conteudo { align-items: center; text-align: center; }
  .selo--branco { font-size: 0.8125rem; }
  .final__titulo { margin-top: 26px; }
  .final__sub { margin-top: 22px; }
  .final .btn-lg { margin-top: 34px; }
  .final .reversoes { justify-content: center; margin-top: 18px; }
}

/* --------------------------------------------------------------------------
   Rodapé (faixa laranja, como a base da contracapa; folga inferior ≥ 96 px
   para a barra fixa em < 1024)
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--laranja);
  color: var(--tinta);
  padding-block: 40px 96px;
  --cor-foco: var(--tinta);
}
.rodape__grid { display: grid; gap: 20px; }
.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
}
.rodape__marca img { width: 77px; height: 32px; }
.rodape__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rodape__nav .lnk-light { padding: 0 8px; margin-left: -8px; font-size: 0.9375rem; }
@media (min-width: 1024px) {
  .rodape { padding-block: 0; }
  .rodape__grid {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    min-height: 160px;
  }
  .rodape__marca { flex-direction: row; align-items: center; gap: 20px; }
  .rodape__marca img { width: 87px; height: 36px; }
  .rodape__nav { flex-direction: row; align-items: center; gap: 8px; }
  .rodape__nav .lnk-light { padding: 0 12px; margin-left: 0; font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   Cabeçalho fixo ao rolar (só ≥ 1024). O JS tira o `hidden`; o CSS decide a largura.
   -------------------------------------------------------------------------- */
.cabecalho-fixo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: none;
  background: #fff;
  border-bottom: 3px solid var(--navy);
  box-shadow: 0 12px 32px rgba(20, 24, 31, 0.18);
  --cor-foco: var(--tinta);
}
.cabecalho-fixo__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--cabecalho-fixo-altura);
}
.cabecalho-fixo .marca img { width: 77px; height: 32px; }
.cabecalho-fixo__selo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
}
.cabecalho-fixo__selo .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--laranja); flex: none; }
.cabecalho-fixo__acoes { display: flex; align-items: center; gap: 8px; }
.cabecalho-fixo__acoes .lnk-ink { font-size: 0.875rem; font-weight: 600; }
.cabecalho-fixo .icone-balao { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .cabecalho-fixo { display: block; }
}

/* --------------------------------------------------------------------------
   Barra fixa (só < 1024). O JS tira o `hidden`; o CSS decide a largura.
   -------------------------------------------------------------------------- */
.barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--barra-altura);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--tinta);
  color: #fff;
  border-top: 3px solid var(--laranja);
  box-shadow: 0 -14px 34px rgba(20, 24, 31, 0.32);
  --cor-foco: #fff;
}
.barra-fixa__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.barra-fixa__texto p:first-child { font-size: 0.8125rem; font-weight: 800; line-height: 1.2; }
.barra-fixa__texto p:last-child { font-size: 0.75rem; font-weight: 500; line-height: 1.2; color: var(--cinza-claro); }
.barra-fixa .btn { min-height: 48px; padding: 0 16px; font-size: 0.9375rem; gap: 8px; flex: none; }
.barra-fixa .icone-balao { width: 20px; height: 20px; }
@media (max-width: 359.98px) {
  .barra-fixa__texto { display: none; }
  .barra-fixa .btn { flex: 1 1 auto; }
}
@media (min-width: 1024px) {
  .barra-fixa { display: none; }
}

/* --------------------------------------------------------------------------
   Aviso de cookies (#consentimento). O atributo hidden fica no HTML (sem JS: nunca
   aparece). O js/cedo.js põe html.consentimento-aberto ANTES da primeira pintura
   quando não há decisão, e aí o CSS o mostra — sem salto de layout.
   < 1024: no FLUXO, logo abaixo do CTA do hero (não cobre CTA, cabeçalho nem foco).
   ≥ 1024: fixo no canto inferior direito (longe do CTA do hero, à esquerda).
   Reaberto pelo "Preferências de cookies": .consentimento--flutuante, fixo na base.
   -------------------------------------------------------------------------- */
html.consentimento-aberto .consentimento[hidden] { display: grid !important; }
.consentimento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin-top: 20px;
  padding: 10px 12px;
  background: #fff;
  color: var(--tinta);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(20, 24, 31, 0.14);
  --cor-foco: var(--tinta);
}
body > .consentimento { margin: 8px; width: auto; }
.consentimento p {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
}
.consentimento a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--laranja-escuro);
  white-space: nowrap;
}
.consentimento a:hover { color: var(--tinta); }
.consentimento button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--raio);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.consentimento [data-consentimento="recusar"] {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 2px var(--tinta);
}
.consentimento [data-consentimento="recusar"]:hover { background: var(--tinta); color: #fff; }
.consentimento [data-consentimento="aceitar"] { background: var(--navy); color: #fff; }
.consentimento [data-consentimento="aceitar"]:hover { background: var(--tinta); color: #fff; }
/* reaberto pelo rodapé: flutua na base da tela, acima da barra fixa */
.consentimento--flutuante {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: auto;
  margin: 0;
  box-shadow: var(--sombra);
}
body > .consentimento.consentimento--flutuante { margin: 0; }
@media (max-width: 1023.98px) {
  body.rolou-hero .consentimento--flutuante { bottom: calc(var(--barra-altura) + 8px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 600px) {
  .consentimento--flutuante { left: auto; right: 24px; max-width: 560px; }
}
@media (min-width: 1024px) {
  html.consentimento-aberto .consentimento[hidden] { display: flex !important; }
  .consentimento,
  body > .consentimento,
  .consentimento--flutuante {
    position: fixed;
    left: auto;
    right: var(--gutter);
    bottom: 24px;
    z-index: 60;
    display: flex;
    gap: 12px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 10px 10px 10px 16px;
    box-shadow: var(--sombra);
  }
  .consentimento p { max-width: 210px; }
  .consentimento a { padding: 0 8px; }
  .consentimento button { padding: 0 14px; }
  .consentimento [data-consentimento="aceitar"] { padding: 0 16px; }
}

/* Foco nunca escondido por elemento fixo (WCAG 2.4.11): o navegador rola o elemento
   focado para fora das faixas cobertas pela barra fixa, pelo cabeçalho fixo e pelo aviso. */
@media (max-width: 1023.98px) {
  html { scroll-padding-bottom: calc(var(--barra-altura) + 16px); }
  html.consentimento-flutuante { scroll-padding-bottom: calc(var(--barra-altura) + 200px); }
}
@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--cabecalho-fixo-altura) + 16px); }
  html.consentimento-aberto { scroll-padding-bottom: 104px; }
  /* no fim da página não há para onde rolar: o rodapé ganha folga para os links
     dele saírem de baixo do aviso do canto enquanto ele estiver aberto */
  html.consentimento-aberto .rodape { padding-bottom: 104px; }
}
@media (max-width: 1023.98px) {
  /* idem, com o aviso reaberto flutuando na base (acima da barra fixa) */
  html.consentimento-flutuante .rodape { padding-bottom: calc(var(--barra-altura) + 240px); }
}

/* --------------------------------------------------------------------------
   Página de texto (privacidade.html) — página interna: branco, Sora, linhas navy
   -------------------------------------------------------------------------- */
.pagina {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  color: var(--navy);
  padding-block: var(--secao-y);
  --cor-foco: var(--navy);
}
.pagina > .container { position: relative; z-index: 1; }
.pagina__conteudo { max-width: 720px; }
.pagina__kicker { color: var(--laranja-texto); }
.pagina__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
  margin-top: 10px;
}
.pagina__intro { font-size: 1.125rem; line-height: 1.55; color: var(--texto-2); font-weight: 500; margin-top: 16px; }
.pagina section { margin-top: 40px; scroll-margin-top: 24px; }
.pagina h2 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.pagina p, .pagina li { font-size: 1.0625rem; line-height: 1.6; }
.pagina p { margin-top: 12px; }
.pagina ul { list-style: disc; padding-left: 1.25em; margin-top: 12px; }
.pagina li + li { margin-top: 6px; }
.pagina a { color: var(--laranja-escuro); }
.pagina a:hover { color: var(--navy); }
/* dados do controlador: linhas com rótulo pequeno, como os contatos da contracapa */
.pagina ul.pagina__dados { list-style: none; padding: 0; margin-top: 14px; }
.pagina__dados li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-height: 44px;
  padding: 4px 0;
  margin: 0;
  border-bottom: 1px solid var(--cinza-linha);
}
/* link dentro da linha de dados: alvo de toque de 44px sem mudar a aparência */
.pagina__dados a { display: inline-flex; align-items: center; min-height: 44px; }
.pagina__dados li:first-child { border-top: 1px solid var(--cinza-linha); }
.pagina__dados li + li { margin-top: 0; }
.pagina__rotulo {
  flex: none;
  min-width: 110px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.pagina__acoes { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pagina__acoes--perto { margin-top: 4px; }
.pagina__acoes .lnk-ink { margin-left: -12px; color: var(--navy); }
.pagina__acoes .lnk-ink:hover { color: #fff; background: var(--navy); }

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}