@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fontes/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fontes/nunito-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fontes/nunito-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fontes/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fontes/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/andika-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fontes/andika-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fontes/caveat-latin-700-normal.woff2') format('woff2'); }

:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:root {
  --fundo: #F5F8FD;
  --papel: #FFFFFF;
  --tinta: #16213B;
  --tinta-suave: #4F5D78;
  --linha: #DCE6F3;
  --linha-forte: #C9D4E6;
  --azul: #1F6FBF;
  --azul-forte: #185A9C;
  --azul-suave: #DCEBFA;
  --azul-faixa: #EAF3FD;
  --sol: #FFC83D;
  --sol-halo: rgb(255 200 61 / 22%);
  --sol-halo-2: rgb(255 200 61 / 10%);
  --sol-suave: #FFF1C9;
  --sol-texto: #6B4A00;
  --verde: #157A4D;
  --verde-suave: #D8F2E3;
  --botao: #1F6FBF;
  --botao-borda: #185A9C;
  --botao-texto: #FFFFFF;
  --ceu-alto: #BCDAF8;
  --ceu-meio: #D9EAFC;
  --ceu-baixo: #EDF5FF;
  --morro: #CBEBD6;
  --quadro: #E6EDF8;
  --bandeja: #DFE8F5;
  --tecla: #FFFFFF;
  --tecla-texto: #16213B;
  --tecla-lado: #B4C4DC;
  --tecla-borda: #C3D0E4;
  --moldura: #1B2540;
  --moldura-brilho: rgb(255 255 255 / 8%);
  --folha: #FFFFFF;
  --folha-tinta: #232A36;
  --folha-pauta: #DCE6F3;
  --folha-margem: #F3C4C4;
  --grafite: #5A5D62;
  --letra-azul: #1F4FD6;
  --caneta: #D32F2F;
  --caneta-suave: rgb(211 47 47 / 12%);
  --sombra: rgb(22 33 59 / 12%);
  --sombra-forte: rgb(22 33 59 / 26%);
  --topo-fundo: rgb(245 248 253 / 86%);
  --rodape: #16213B;
  --rodape-tinta: #B9C7DF;
  --rodape-forte: #FFFFFF;
  --rodape-linha: #2C3B5F;
  --preencher: #FFF1C9;
  --preencher-borda: #D99A00;
  --foco: #1F6FBF;

  --f-titulo: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --f-texto: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --f-folha: 'Andika', 'Comic Neue', 'Segoe UI', sans-serif;

  --t-rotulo: 0.8125rem;
  --t-pequeno: 0.9375rem;
  --t-corpo: 1.0625rem;
  --t-lead: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --t-h1: clamp(2.5rem, 1.5rem + 3.8vw, 4.375rem);

  --raio: 14px;
  --raio-g: 28px;
  --largura: 1200px;
  --respiro: clamp(80px, 10vw, 136px);
  --gutter: clamp(20px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0C1528;
    --papel: #131E36;
    --tinta: #EAF1FB;
    --tinta-suave: #A9B8D2;
    --linha: #223150;
    --linha-forte: #31436B;
    --azul: #8CC0F4;
    --azul-forte: #B4D6F8;
    --azul-suave: #17305A;
    --azul-faixa: #101D37;
    --sol: #FFC83D;
    --sol-halo: rgb(255 200 61 / 14%);
    --sol-halo-2: rgb(255 200 61 / 6%);
    --sol-suave: #3A2F12;
    --sol-texto: #FFD877;
    --verde: #6BD9A2;
    --verde-suave: #123A2B;
    --botao: #8CC0F4;
    --botao-borda: #4F8FD0;
    --botao-texto: #0C1528;
    --ceu-alto: #102246;
    --ceu-meio: #12284F;
    --ceu-baixo: #0C1528;
    --morro: #17402F;
    --quadro: #1C2A47;
    --bandeja: #22324F;
    --tecla: #EEF3FB;
    --tecla-texto: #16213B;
    --tecla-lado: #0B1428;
    --tecla-borda: #AFC0DA;
    --moldura: #050A16;
    --moldura-brilho: rgb(255 255 255 / 10%);
    --sombra: rgb(0 0 0 / 35%);
    --sombra-forte: rgb(0 0 0 / 55%);
    --topo-fundo: rgb(12 21 40 / 86%);
    --rodape: #070D1B;
    --rodape-tinta: #9FB0CC;
    --rodape-forte: #FFFFFF;
    --rodape-linha: #1C2944;
    --preencher: #3A2F12;
    --preencher-borda: #FFC83D;
    --foco: #FFC83D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0C1528;
  --papel: #131E36;
  --tinta: #EAF1FB;
  --tinta-suave: #A9B8D2;
  --linha: #223150;
  --linha-forte: #31436B;
  --azul: #8CC0F4;
  --azul-forte: #B4D6F8;
  --azul-suave: #17305A;
  --azul-faixa: #101D37;
  --sol: #FFC83D;
  --sol-halo: rgb(255 200 61 / 14%);
  --sol-halo-2: rgb(255 200 61 / 6%);
  --sol-suave: #3A2F12;
  --sol-texto: #FFD877;
  --verde: #6BD9A2;
  --verde-suave: #123A2B;
  --botao: #8CC0F4;
  --botao-borda: #4F8FD0;
  --botao-texto: #0C1528;
  --ceu-alto: #102246;
  --ceu-meio: #12284F;
  --ceu-baixo: #0C1528;
  --morro: #17402F;
  --quadro: #1C2A47;
  --bandeja: #22324F;
  --tecla: #EEF3FB;
  --tecla-texto: #16213B;
  --tecla-lado: #0B1428;
  --tecla-borda: #AFC0DA;
  --moldura: #050A16;
  --moldura-brilho: rgb(255 255 255 / 10%);
  --sombra: rgb(0 0 0 / 35%);
  --sombra-forte: rgb(0 0 0 / 55%);
  --topo-fundo: rgb(12 21 40 / 86%);
  --rodape: #070D1B;
  --rodape-tinta: #9FB0CC;
  --rodape-forte: #FFFFFF;
  --rodape-linha: #1C2944;
  --preencher: #3A2F12;
  --preencher-borda: #FFC83D;
  --foco: #FFC83D;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--fundo);
}
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.02em;
}
p { margin: 0; }
img { display: block; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
section[id], footer[id] { scroll-margin-top: 84px; }

.in {
  max-width: var(--largura);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.pular {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--botao);
  color: var(--botao-texto);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
}
.pular:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.preencher {
  background: var(--preencher);
  outline: 1.5px dashed var(--preencher-borda);
  outline-offset: 1px;
  border-radius: 4px;
  padding: 0 0.3em;
  color: inherit;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--raio);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.botao-p {
  background: var(--botao);
  color: var(--botao-texto);
  box-shadow: 0 4px 0 var(--botao-borda);
}
.botao-p:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--botao-borda); }
.botao-p:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--botao-borda); }
.botao-s {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 0 0 1.5px var(--linha-forte) inset, 0 4px 0 var(--linha-forte);
}
.botao-s:hover { transform: translateY(-1px); }
.botao-s:active { transform: translateY(3px); box-shadow: 0 0 0 1.5px var(--linha-forte) inset, 0 1px 0 var(--linha-forte); }
.botao-g { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }

.topo {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--topo-fundo);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.topo.rolou { border-bottom-color: var(--linha); }
.topo-in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.marca img { width: 38px; height: 38px; border-radius: 50%; }
.marca b { color: var(--azul); font-weight: 900; }
.topo nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.topo nav a {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 0.975rem;
  text-decoration: none;
  color: var(--tinta-suave);
  padding: 8px 12px;
  border-radius: 10px;
}
.topo nav a:hover { color: var(--tinta); background: var(--azul-suave); }
.topo-acoes { display: flex; align-items: center; gap: 8px; }
.entrar {
  font-family: var(--f-titulo);
  font-weight: 800;
  text-decoration: none;
  color: var(--azul);
  padding: 10px 14px;
  border-radius: 10px;
}
.entrar:hover { background: var(--azul-suave); }
.topo .botao { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
.menu-botao {
  display: none;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
}
.menu-gaveta {
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}
.menu-gaveta nav {
  display: grid;
  gap: 2px;
  padding-block: 12px 20px;
}
.menu-gaveta a {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.125rem;
  text-decoration: none;
  padding: 12px 4px;
  border-bottom: 1px solid var(--linha);
}

.ceu {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ceu-alto) 0%, var(--ceu-meio) 42%, var(--ceu-baixo) 100%);
  isolation: isolate;
}
.sol-disco {
  position: absolute;
  z-index: -1;
  width: clamp(280px, 34vw, 480px);
  aspect-ratio: 1;
  right: clamp(-160px, -6vw, -40px);
  top: clamp(-200px, -10vw, -80px);
  border-radius: 50%;
  background: var(--sol);
  box-shadow: 0 0 0 clamp(28px, 4vw, 56px) var(--sol-halo), 0 0 0 clamp(64px, 9vw, 128px) var(--sol-halo-2);
}
.ceu-in {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px) clamp(110px, 12vw, 160px);
}
.hero-texto { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.hero-texto h1 {
  font-size: var(--t-h1);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -0.035em;
  max-width: 12ch;
}
.grifo { position: relative; z-index: 0; white-space: nowrap; }
.grifo::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.02em;
  height: 0.2em;
  border-radius: 999px;
  background: var(--sol);
  transform: rotate(-1.4deg);
  transform-origin: left;
  animation: risco 0.9s 0.5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes risco { from { transform: rotate(-1.4deg) scaleX(0); } to { transform: rotate(-1.4deg) scaleX(1); } }
.hero-lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 34em;
}
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.morro {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(56px, 8vw, 120px);
}
.morro .m1 { fill: var(--morro); }
.morro .m2 { fill: var(--fundo); }

.demo {
  position: relative;
  min-width: 0;
  padding-bottom: 8px;
}
.demo-palco { position: relative; }
.tablet {
  position: relative;
  background: var(--moldura);
  border-radius: clamp(18px, 2.6vw, 30px);
  padding: clamp(10px, 1.6vw, 18px);
  box-shadow: 0 1px 0 var(--moldura-brilho) inset, 0 40px 70px -30px var(--sombra-forte), 0 18px 30px -18px var(--sombra-forte);
  animation: subir 0.8s 0.1s cubic-bezier(.2,.8,.2,1) both;
}
.tablet::before {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(4px, 0.6vw, 7px);
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #2B3654;
}
@keyframes subir { from { opacity: 0.001; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.tela {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: clamp(8px, 1.2vw, 14px);
  overflow: hidden;
  background: var(--quadro);
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--f-titulo);
  color: var(--tinta);
}
.app-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.6cqw 2.4cqw;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.app-crianca { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; }
.app-crianca svg { width: 5.6cqw; height: 5.6cqw; flex: none; }
.app-crianca b { display: block; font-size: 2.5cqw; line-height: 1.1; font-weight: 900; }
.app-crianca span { display: block; font-size: 1.75cqw; color: var(--tinta-suave); font-weight: 700; line-height: 1.2; }
.app-botoes { display: flex; gap: 1.2cqw; }
.app-botoes button {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 2cqw;
  padding: 1cqw 2.2cqw;
  border-radius: 1.4cqw;
  border: 0;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.app-desfazer {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 0 0 0.25cqw var(--tecla-borda) inset, 0 0.5cqw 0 var(--tecla-borda);
}
.app-terminei {
  background: var(--sol);
  color: #3A2900;
  box-shadow: 0 0.5cqw 0 #C99400;
}
.app-botoes button:disabled { opacity: 0.45; cursor: default; }
.app-botoes button:not(:disabled):active { transform: translateY(0.4cqw); }
.app-terminei.pronto:not(:disabled) { animation: chamar 1.6s ease-in-out infinite; }
@keyframes chamar { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }

.app-mesa {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2.2cqw 6cqw 1.6cqw;
  min-height: 0;
}
.folha {
  width: 100%;
  height: 100%;
  background-color: var(--folha);
  background-image:
    linear-gradient(90deg, transparent 6.4cqw, var(--folha-margem) 6.4cqw, var(--folha-margem) calc(6.4cqw + 2px), transparent calc(6.4cqw + 2px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(4.4cqw - 1px), var(--folha-pauta) calc(4.4cqw - 1px), var(--folha-pauta) 4.4cqw);
  background-position: 0 0, 0 2.2cqw;
  border-radius: 0.6cqw;
  box-shadow: 0 1.2cqw 3cqw -1cqw rgb(22 33 59 / 30%), 0 0 0 1px rgb(22 33 59 / 6%);
  transform: rotate(-0.7deg);
  padding: 2.4cqw 3.4cqw 2.4cqw 9cqw;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1.4cqw;
  font-family: var(--f-folha);
  color: var(--folha-tinta);
}
.folha-cab {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  font-size: 1.8cqw;
}
.folha-cab .traco { display: inline-block; width: 18cqw; border-bottom: 1px solid var(--folha-tinta); margin-left: 0.6cqw; vertical-align: baseline; }
.folha-ordem { font-size: 2.3cqw; font-weight: 700; }
.folha-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqw;
  align-items: start;
  padding-top: 0.6cqw;
}
.folha-itens li { display: grid; justify-items: center; gap: 1.2cqw; }
.folha-itens svg { width: 11cqw; height: 11cqw; }
.desenho { fill: none; stroke: var(--folha-tinta); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.palavra { display: flex; align-items: flex-end; gap: 0.7cqw; }
.palavra .l {
  font-size: 4.6cqw;
  line-height: 1;
  font-weight: 700;
  width: 4.2cqw;
  text-align: center;
}
.lacuna {
  width: 5.2cqw;
  height: 6.2cqw;
  padding: 0;
  border: 0.32cqw dashed #8EA3C4;
  border-radius: 0.8cqw;
  background: rgb(220 235 250 / 45%);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-weight: 700;
  font-size: 4.8cqw;
  line-height: 1;
  color: var(--letra-azul);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.tela.com-letra .lacuna:not(.cheia) { border-color: var(--azul); background: rgb(255 200 61 / 30%); animation: piscar 1.2s ease-in-out infinite; }
@keyframes piscar { 50% { background: rgb(255 200 61 / 12%); } }
.lacuna.cheia { border-style: solid; border-color: transparent; background: transparent; }
.lacuna.alvo { transform: scale(1.12); border-color: var(--azul); background: rgb(255 200 61 / 45%); }
.lacuna.pulso { animation: pousar 0.35s cubic-bezier(.2,1.6,.4,1); }
@keyframes pousar { from { transform: scale(1.4); } to { transform: none; } }

.app-teclado {
  display: flex;
  justify-content: center;
  gap: 1.6cqw;
  padding: 1.8cqw 2cqw 2.4cqw;
  background: var(--bandeja);
  border-top: 1px solid var(--tecla-borda);
}
.tecla {
  width: 8.6cqw;
  height: 8.6cqw;
  border-radius: 1.6cqw;
  border: 0;
  background: var(--tecla);
  color: var(--tecla-texto);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-weight: 700;
  font-size: 4.9cqw;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 0 0.22cqw var(--tecla-borda) inset, 0 0.75cqw 0 var(--tecla-lado);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.tecla:active { transform: translateY(0.5cqw); box-shadow: 0 0 0 0.22cqw var(--tecla-borda) inset, 0 0.25cqw 0 var(--tecla-lado); }
.tecla[aria-pressed="true"] {
  box-shadow: 0 0 0 0.7cqw var(--sol) inset, 0 0.75cqw 0 #C99400;
  transform: translateY(-0.4cqw);
}
.fantasma {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, -60%) scale(1.15) rotate(-4deg);
  box-shadow: 0 0 0 3px var(--sol) inset, 0 14px 28px rgb(22 33 59 / 35%);
  cursor: grabbing;
}
.app-recado {
  position: absolute;
  z-index: 3;
  top: 9.5cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 78cqw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2cqw;
  padding: 1.4cqw 2.2cqw 1.4cqw 1.4cqw;
  background: var(--papel);
  border-radius: 2.2cqw;
  box-shadow: 0 0 0 0.3cqw var(--verde) inset, 0 2cqw 4cqw -1cqw var(--sombra-forte);
  animation: descer 0.45s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes descer { from { opacity: 0.001; transform: translate(-50%, -3cqw); } to { opacity: 1; transform: translate(-50%, 0); } }
.app-recado img { width: 9cqw; height: auto; }
.app-recado p { font-size: 2.2cqw; line-height: 1.3; color: var(--tinta); font-weight: 700; }
.app-recado p b { display: block; font-size: 2.8cqw; font-weight: 900; color: var(--verde); }
.app-recado button {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.9cqw;
  padding: 1cqw 1.8cqw;
  border-radius: 1.2cqw;
  border: 0;
  background: var(--azul-suave);
  color: var(--tinta);
  cursor: pointer;
}
.demo-gui {
  position: absolute;
  z-index: 4;
  width: clamp(110px, 25%, 190px);
  left: clamp(-90px, -9%, -24px);
  bottom: clamp(-64px, -9%, -28px);
  filter: drop-shadow(0 18px 18px rgb(22 33 59 / 22%));
  pointer-events: none;
  animation: chegar 0.9s 0.5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes chegar { from { opacity: 0.001; transform: translateY(30px) rotate(-8deg); } to { opacity: 1; transform: none; } }
.demo-gui.festa { animation: pular 0.9s cubic-bezier(.3,1.5,.5,1) 2; }
@keyframes pular { 0%, 100% { transform: none; } 40% { transform: translateY(-26px) rotate(4deg); } }
.demo-legenda {
  margin-top: clamp(40px, 6vw, 72px);
  margin-left: clamp(70px, 20%, 150px);
  display: grid;
  gap: 4px;
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
  max-width: 34em;
}
.demo-legenda b { color: var(--tinta); font-family: var(--f-titulo); font-weight: 800; }

.secao { padding-block: var(--respiro); }
.secao-cab { display: grid; gap: 16px; max-width: 46rem; }
.secao-cab h2, .h2 { font-size: var(--t-h2); line-height: 1.08; font-weight: 900; letter-spacing: -0.03em; }
.secao-cab p.lead { font-size: var(--t-lead); color: var(--tinta-suave); line-height: 1.55; }

.acolher { padding-top: clamp(48px, 7vw, 96px); }
.grade-acolher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.acolher-texto { display: grid; gap: 20px; min-width: 0; }
.acolher-texto > p { color: var(--tinta-suave); font-size: 1.125rem; max-width: 32em; }
.frase {
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.frase em { font-style: normal; color: var(--azul); }
.conquista {
  position: relative;
  margin: 0;
  min-width: 0;
  padding: 0 clamp(56px, 12%, 110px) 0 0;
}
.folha-pronta {
  background-color: var(--folha);
  background-image:
    linear-gradient(90deg, transparent 48px, var(--folha-margem) 48px, var(--folha-margem) 50px, transparent 50px),
    repeating-linear-gradient(180deg, transparent 0, transparent 37px, var(--folha-pauta) 37px, var(--folha-pauta) 38px);
  background-position: 0 0, 0 14px;
  border-radius: 6px;
  box-shadow: 0 34px 50px -30px var(--sombra-forte), 0 0 0 1px var(--linha);
  transform: rotate(-1.6deg);
  padding: 22px clamp(18px, 3vw, 30px) 26px 70px;
  display: grid;
  gap: 16px;
  font-family: var(--f-folha);
  color: var(--folha-tinta);
}
.folha-pronta .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1rem; }
.folha-pronta .cab b { font-family: 'Atkinson Hyperlegible', sans-serif; color: var(--letra-azul); font-size: 1.5rem; letter-spacing: 0.1em; margin-left: 8px; }
.folha-pronta .ordem { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.itens-prontos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.itens-prontos li { display: grid; justify-items: center; gap: 10px; }
.itens-prontos svg { width: clamp(48px, 7vw, 68px); height: auto; }
.desenho-folha { fill: none; stroke: var(--folha-tinta); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.palavra-pronta { font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.875rem); letter-spacing: 0.14em; line-height: 1; white-space: nowrap; }
.palavra-pronta span { color: var(--letra-azul); font-family: 'Atkinson Hyperlegible', sans-serif; }
.recado-prof {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin: 6px 0 0 4px;
  font-family: 'Caveat', 'Segoe Print', cursive;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.375rem);
  line-height: 1;
  color: var(--caneta);
  transform: rotate(-5deg);
}
.recado-prof svg { width: 1.3em; height: 1.3em; }
.recado-prof path { fill: var(--caneta-suave); stroke: var(--caneta); stroke-width: 2.2; stroke-linejoin: round; }
.conquista-gui {
  position: absolute;
  right: 0;
  bottom: -18px;
  width: clamp(116px, 27%, 196px);
  filter: drop-shadow(0 18px 18px rgb(22 33 59 / 22%));
}
.conquista figcaption { margin-top: 30px; max-width: 26em; font-size: var(--t-pequeno); color: var(--tinta-suave); }

.como { background: var(--papel); border-block: 1px solid var(--linha); }
.passos {
  list-style: none;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  counter-reset: passo;
}
.passo { display: grid; gap: 14px; align-content: start; }
.passo-ilustra {
  position: relative;
  height: 200px;
  border-radius: var(--raio-g);
  background: var(--azul-faixa);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.passo-n {
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: 0.9375rem;
  color: var(--sol-texto);
  background: var(--sol-suave);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.passo h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.2; }
.passo p { color: var(--tinta-suave); max-width: 30em; }
.mini-folha {
  width: 112px;
  height: 140px;
  background-color: var(--folha);
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 17px, var(--folha-pauta) 17px, var(--folha-pauta) 18px);
  background-position: 0 22px;
  border-radius: 4px;
  box-shadow: 0 14px 24px -12px var(--sombra-forte);
  padding: 12px 12px 12px 18px;
  display: grid;
  align-content: start;
  gap: 9px;
}
.mini-folha i { display: block; height: 5px; border-radius: 3px; background: #C3CCDA; }
.mini-folha i:nth-child(1) { width: 70%; background: #8E99AB; }
.mini-folha i:nth-child(2) { width: 90%; }
.mini-folha i:nth-child(3) { width: 55%; }
.mini-folha i:nth-child(4) { width: 80%; }
.p1 .mini-folha { transform: rotate(-7deg); }
.mira {
  position: absolute;
  width: 170px;
  height: 176px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  --c: var(--azul);
  background:
    linear-gradient(var(--c), var(--c)) top left / 26px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 4px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 26px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 4px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 26px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 4px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 26px 4px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 4px 26px no-repeat;
}
.disparo {
  position: absolute;
  bottom: 14px;
  left: 50%;
  margin-left: -17px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 4px solid var(--papel);
  background: var(--azul);
  box-shadow: 0 0 0 2px var(--azul);
}
.p2-cena { display: flex; align-items: center; gap: 14px; }
.mini-teclas { display: grid; grid-template-columns: repeat(2, 48px); gap: 10px; }
.mini-tecla {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--tecla);
  color: var(--tecla-texto);
  display: grid;
  place-items: center;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  box-shadow: 0 0 0 1.5px var(--tecla-borda) inset, 0 4px 0 var(--tecla-lado);
}
.mini-tecla.sel { box-shadow: 0 0 0 4px var(--sol) inset, 0 4px 0 #C99400; transform: translateY(-3px); }
.p2-seta { width: 54px; height: 40px; }
.p2-seta path { fill: none; stroke: var(--azul); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 7; }
.p2-seta .ponta { stroke-dasharray: none; }
.mini-palavra {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  padding: 12px 14px;
  background: var(--folha);
  border-radius: 6px;
  box-shadow: 0 14px 24px -12px var(--sombra-forte);
  font-family: var(--f-folha);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--folha-tinta);
  line-height: 1;
}
.mini-palavra .vazio { width: 26px; height: 30px; border: 2px dashed #8EA3C4; border-radius: 5px; background: rgb(255 200 61 / 30%); margin: 0 2px; }
.p3 .mini-folha { width: 150px; height: 150px; gap: 12px; }
.p3-palavra { font-family: 'Atkinson Hyperlegible', sans-serif; font-weight: 700; font-size: 1.85rem; letter-spacing: 0.12em; color: var(--letra-azul); line-height: 1; padding-top: 4px; }
.selo-pronta {
  position: absolute;
  right: calc(50% - 112px);
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: var(--verde-suave);
  color: var(--verde);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 0.875rem;
  box-shadow: 0 8px 16px -10px var(--sombra-forte);
}
.selo-pronta::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.recursos {
  margin-top: clamp(72px, 9vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.recursos-cab { display: grid; gap: 20px; position: sticky; top: 110px; }
.recursos-cab h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.03em; }
.recursos-cab img { width: 150px; }
.recursos-lista {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
}
.recursos-lista > div {
  padding-block: 22px 24px;
  border-top: 1px solid var(--linha-forte);
  display: grid;
  gap: 6px;
  align-content: start;
}
.recursos-lista dt { font-family: var(--f-titulo); font-weight: 800; font-size: 1.1875rem; line-height: 1.25; }
.recursos-lista dd { margin: 0; color: var(--tinta-suave); }

.abas {
  margin-top: clamp(36px, 5vw, 56px);
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 18px;
  background: var(--azul-suave);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.aba {
  flex: none;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: 13px;
  border: 0;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.aba:hover { color: var(--tinta); }
.aba[aria-selected="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 2px 0 var(--linha-forte), 0 6px 16px -8px var(--sombra-forte); }
.painel {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: clamp(28px, 4.5vw, 56px);
  animation: aparecer 0.35s ease both;
}
@keyframes aparecer { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.painel-texto { display: grid; gap: 18px; min-width: 0; }
.painel h3 { font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; }
.painel-texto > p { color: var(--tinta-suave); font-size: 1.125rem; max-width: 34em; }
.painel ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--linha);
}
.painel li { padding-block: 13px; border-bottom: 1px solid var(--linha); }
.painel-arte {
  position: relative;
  aspect-ratio: 1;
  max-width: 380px;
  width: 100%;
  justify-self: center;
}
.painel-arte::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--ceu-meio), var(--ceu-alto));
}
.painel-arte img {
  position: absolute;
  inset: 17%;
  width: 66%;
  height: 66%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 14px 14px rgb(22 33 59 / 16%));
}
.painel-arte.larga img { inset: 15% 12%; width: 76%; height: 70%; }

.gui-secao { background: var(--azul-faixa); border-block: 1px solid var(--linha); overflow: hidden; }
.grade-gui {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.gui-texto { display: grid; gap: 18px; color: var(--tinta-suave); font-size: 1.125rem; max-width: 34em; }
.expressoes {
  list-style: none;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
.expressoes li { display: grid; gap: 4px; align-content: start; }
.expressoes .quadro-gui {
  position: relative;
  height: clamp(150px, 15vw, 200px);
  border-bottom: 3px solid var(--linha-forte);
  margin-bottom: 10px;
}
.expressoes img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 12px);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 10px rgb(22 33 59 / 16%));
  transition: transform 0.3s cubic-bezier(.2,1.4,.4,1);
}
.expressoes li:hover img { transform: translateY(-6px) rotate(-2deg); }
.expressoes b { font-family: var(--f-titulo); font-weight: 900; font-size: 1.125rem; }
.expressoes span { font-size: var(--t-pequeno); color: var(--tinta-suave); line-height: 1.45; }
.alem {
  margin-top: clamp(64px, 8vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.alem img { width: 100%; max-width: 560px; filter: drop-shadow(0 24px 22px rgb(22 33 59 / 18%)); }
.alem-cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.alem-cartoes li { display: grid; justify-items: center; gap: 10px; padding: 18px 14px 16px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); }
.alem .alem-cartoes img { width: auto; max-width: 100%; height: clamp(120px, 14vw, 180px); filter: drop-shadow(0 10px 10px rgb(22 33 59 / 16%)); }
.alem-cartoes span { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-pequeno); text-align: center; }
.alem-texto { display: grid; gap: 16px; justify-items: start; }
.alem-texto h3 { font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; }
.alem-texto p { color: var(--tinta-suave); font-size: 1.125rem; max-width: 32em; }
.cartoes-lugar { display: flex; flex-wrap: wrap; gap: 10px; }
.cartoes-lugar span {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  background: #FFFFFF;
  color: #16213B;
  border: 3px solid #1F6FBF;
  border-radius: 10px;
}

.grade-vanessa {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
.retrato { position: relative; margin: 0; position: sticky; top: 110px; }
.retrato-foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-g);
  background:
    radial-gradient(120% 80% at 20% 0%, var(--ceu-alto), transparent 60%),
    linear-gradient(160deg, var(--azul-suave), var(--azul-faixa));
  border: 1px solid var(--linha);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
  overflow: hidden;
}
.retrato-foto .monograma {
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 0.9;
  color: var(--papel);
  opacity: 0.9;
  letter-spacing: -0.04em;
}
.retrato-foto small { font-size: var(--t-pequeno); color: var(--tinta-suave); }
.retrato-foto.com-foto { display: block; padding: 0; background: var(--azul-faixa); }
.retrato-foto.com-foto img { width: 100%; height: 100%; object-fit: cover; }
.vanessa-fotos {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 15fr) minmax(0, 8fr) minmax(0, 8fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.vanessa-fotos figure { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--raio-g); overflow: hidden; background: var(--azul-faixa); }
.vanessa-fotos figure.largo { aspect-ratio: 3 / 2; }
.vanessa-fotos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .vanessa-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vanessa-fotos figure.largo { grid-column: 1 / -1; }
}
.retrato-gui {
  position: absolute;
  width: clamp(110px, 32%, 170px);
  right: clamp(-48px, -6%, -16px);
  bottom: clamp(-40px, -5%, -16px);
  filter: drop-shadow(0 16px 16px rgb(22 33 59 / 20%));
}
.vanessa-texto { display: grid; gap: 22px; min-width: 0; }
.nome { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.cargo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.1875rem; line-height: 1.4; color: var(--azul); margin-top: -6px; }
.vanessa-redes { display: grid; gap: 14px; max-width: 36em; margin-top: 8px; }
.vanessa-redes h3 { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.02em; }
.rede-site, .rede-insta {
  text-decoration: none;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--linha-forte);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.2s ease;
}
.rede-site:hover, .rede-insta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--linha-forte); border-color: var(--azul); }
.rede-site:active, .rede-insta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--linha-forte); }
.rede-site { display: grid; overflow: hidden; }
.rede-site-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--azul-faixa); border-bottom: 1px solid var(--linha); }
.rede-site-barra > i { width: 9px; height: 9px; border-radius: 50%; background: var(--linha-forte); flex: none; }
.rede-site-endereco { flex: 1; min-width: 0; margin-left: 8px; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); font-size: var(--t-pequeno); color: var(--tinta-suave); }
.rede-site-endereco svg { width: 13px; height: 13px; flex: none; color: var(--verde); }
.rede-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rede-site-corpo { display: grid; gap: 6px; padding: 18px 20px 20px; }
.rede-site-corpo b { font-family: var(--f-titulo); font-weight: 900; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.rede-site-desc { color: var(--tinta-suave); }
.rede-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--f-titulo); font-weight: 800; color: var(--azul); }
.rede-ir svg, .rede-seta { width: 18px; height: 18px; flex: none; transition: transform 0.15s ease; }
.rede-site:hover .rede-ir svg, .rede-insta:hover .rede-seta { transform: translateX(3px); }
.rede-insta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; }
.rede-insta-icone {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
.rede-insta-icone svg { width: 26px; height: 26px; }
.rede-insta small { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-rotulo); color: var(--tinta-suave); }
.rede-insta b { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1.0625rem; overflow-wrap: anywhere; }
.rede-seta { color: var(--azul); }
.citacao {
  margin: 8px 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--sol);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  line-height: 1.35;
  color: var(--tinta);
  letter-spacing: -0.01em;
}
.vanessa-texto > p { color: var(--tinta-suave); font-size: 1.125rem; max-width: 36em; }
.formacao { display: grid; gap: 14px; margin-top: 12px; }
.formacao h3 { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.02em; }
.formacao-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.formacao-lista li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  padding-block: 16px;
  border-top: 1px solid var(--linha-forte);
  align-items: baseline;
}
.formacao-lista li:last-child { border-bottom: 1px solid var(--linha-forte); }
.formacao-lista .ano { font-family: var(--f-titulo); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta-suave); justify-self: start; }
.formacao-lista b { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1.125rem; line-height: 1.3; }
.formacao-lista div > span { display: inline-block; margin-top: 6px; color: var(--tinta-suave); font-size: var(--t-pequeno); }
.vanessa-dados {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.vanessa-dados div { display: grid; gap: 6px; align-content: start; }
.vanessa-dados dt { font-size: var(--t-rotulo); color: var(--tinta-suave); font-family: var(--f-titulo); font-weight: 800; letter-spacing: 0.04em; }
.vanessa-dados dd { margin: 0; font-weight: 700; }

.combinados { background: var(--papel); border-block: 1px solid var(--linha); }
.grade-combinados {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.grade-combinados .secao-cab { position: sticky; top: 110px; }
.lista-combinados { list-style: none; margin: 0; padding: 0; }
.lista-combinados li {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px 32px;
  padding-block: 26px;
  border-top: 1px solid var(--linha-forte);
}
.lista-combinados li:last-child { border-bottom: 1px solid var(--linha-forte); }
.lista-combinados h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem); font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; }
.lista-combinados p { color: var(--tinta-suave); }


.contato .ceu-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding-block: var(--respiro) calc(var(--respiro) + 40px); }
.contato-texto { display: grid; gap: 20px; justify-items: start; }
.contato-texto p { color: var(--tinta-suave); font-size: var(--t-lead); max-width: 30em; }
.contato-texto img { width: clamp(150px, 18vw, 210px); margin-top: 12px; filter: drop-shadow(0 18px 18px rgb(22 33 59 / 20%)); }
.ficha {
  background: var(--papel);
  border-radius: var(--raio-g);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 0 0 1px var(--linha), 0 40px 70px -40px var(--sombra-forte);
  display: grid;
  gap: 18px;
}
.ficha h3 { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }
.campo { display: grid; gap: 8px; }
.campo label { font-family: var(--f-titulo); font-weight: 800; font-size: 0.975rem; }
.campo .opcional { font-weight: 700; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--tinta);
  background: var(--fundo);
  border: 1.5px solid var(--linha-forte);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo textarea { padding: 12px 16px; min-height: 112px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-suave); }
.campo-dica { font-size: var(--t-pequeno); color: var(--tinta-suave); }
.campo-erro { color: #C73E1D; font-size: var(--t-pequeno); font-weight: 700; }
:root[data-theme="dark"] .campo-erro { color: #FF9A80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .campo-erro { color: #FF9A80; } }
.campo[data-erro] input, .campo[data-erro] select, .campo[data-erro] textarea { border-color: #C73E1D; }
.dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.perfis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; margin: 0; padding: 0; }
.perfis legend { font-family: var(--f-titulo); font-weight: 800; font-size: 0.975rem; margin-bottom: 8px; padding: 0; }
.perfis label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--fundo);
}
.perfis input { width: 20px; height: 20px; accent-color: var(--azul); margin: 0; }
.perfis label:has(input:checked) { border-color: var(--azul); background: var(--azul-suave); }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aceite { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--t-pequeno); color: var(--tinta-suave); }
.aceite input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--azul); }
.ficha .botao { width: 100%; }
.ficha .botao:disabled { opacity: 0.6; cursor: progress; }
.ficha-status { font-size: var(--t-pequeno); border-radius: 12px; }
.ficha-status:empty { display: none; }
.ficha-status.ok { padding: 14px 16px; background: var(--verde-suave); color: var(--tinta); }
.ficha-status.ok b { color: var(--verde); }
.ficha-status.erro { padding: 14px 16px; background: var(--sol-suave); color: var(--tinta); }
.ficha-status a { color: var(--azul); font-weight: 700; }

.grade-perguntas {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.perguntas-lista { border-top: 1px solid var(--linha-forte); }
.perguntas-lista details { border-bottom: 1px solid var(--linha-forte); }
.perguntas-lista summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 16px;
  align-items: center;
  padding-block: 22px;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
}
.perguntas-lista summary::-webkit-details-marker { display: none; }
.perguntas-lista summary::after {
  content: "";
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--azul-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 10v12M10 16h12' stroke='%231F6FBF' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: transform 0.2s ease;
}
.perguntas-lista details[open] summary::after { transform: rotate(45deg); }
.perguntas-lista details p { padding-bottom: 24px; color: var(--tinta-suave); max-width: 40em; }

.rodape { background: var(--rodape); color: var(--rodape-tinta); padding-top: clamp(56px, 7vw, 88px); }
.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 48px;
}
.rodape .marca { color: var(--rodape-forte); }
.rodape .marca b { color: var(--sol); }
.rodape-marca { display: grid; gap: 16px; align-content: start; }
.rodape-marca p { max-width: 26em; font-size: var(--t-pequeno); }
.rodape-col { display: grid; gap: 10px; align-content: start; font-size: var(--t-pequeno); }
.rodape-col .rodape-titulo { font-family: var(--f-titulo); font-weight: 800; color: var(--rodape-forte); font-size: 0.975rem; margin-bottom: 4px; }
.rodape-col a { text-decoration: none; }
.rodape-col a:hover { color: var(--rodape-forte); text-decoration: underline; }
.rodape-col .sel { user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rodape-linha);
  font-size: 0.875rem;
}
.rodape-base b { color: var(--rodape-forte); font-weight: 700; }

@media (max-width: 1080px) {
  .topo nav { display: none; }
  .menu-botao { display: inline-flex; align-items: center; }
  .topo-acoes { margin-left: auto; }
  .expressoes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 980px) {
  .ceu-in { grid-template-columns: minmax(0, 1fr); }
  .hero-texto h1 { max-width: 14ch; }
  .demo { max-width: 680px; width: 100%; justify-self: center; margin-left: clamp(28px, 8vw, 72px); margin-right: 0; }
  .grade-acolher, .grade-gui, .alem, .grade-vanessa, .grade-combinados, .grade-perguntas, .recursos { grid-template-columns: minmax(0, 1fr); }
  .conquista { max-width: 620px; }
  .recursos-cab, .grade-combinados .secao-cab { position: static; }
  .retrato { position: relative; top: auto; }
  .recursos-cab { grid-template-columns: 1fr auto; align-items: end; }
  .recursos-cab img { width: 110px; }
  .painel { grid-template-columns: minmax(0, 1fr); }
  .painel-arte { max-width: 280px; order: -1; }
  .retrato { max-width: 440px; }
  .contato .ceu-in { grid-template-columns: minmax(0, 1fr); }
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .passos { grid-template-columns: minmax(0, 1fr); }
  .recursos-lista { grid-template-columns: minmax(0, 1fr); }
  .lista-combinados li { grid-template-columns: minmax(0, 1fr); }
  .vanessa-dados { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .entrar { display: none; }
  .topo .botao-p { padding: 0 14px; }
  .marca { font-size: 1.2rem; }
  .marca img { width: 34px; height: 34px; }
  .demo { margin-left: 0; }
  .demo-gui { width: 96px; left: -10px; bottom: -58px; }
  .demo-legenda { margin-left: 96px; margin-top: 24px; }
  .expressoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dupla, .perfis { grid-template-columns: minmax(0, 1fr); }
  .sol-disco { width: 170px; right: -76px; top: -96px; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
  .hero-acoes .botao { width: 100%; }
  .folha-pronta { padding-left: 46px; background-image:
    linear-gradient(90deg, transparent 30px, var(--folha-margem) 30px, var(--folha-margem) 32px, transparent 32px),
    repeating-linear-gradient(180deg, transparent 0, transparent 37px, var(--folha-pauta) 37px, var(--folha-pauta) 38px); }
  .folha-pronta .cab { font-size: 0.875rem; }
  .itens-prontos { gap: 6px; }
  .conquista { padding-right: 40px; }
  .conquista-gui { width: 100px; bottom: -30px; }
  .conquista figcaption { max-width: 70%; }
  .selo-pronta { right: 12px; }
  .retrato-gui { right: -6px; bottom: -24px; width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}