/* NotaBot · landing page. Tema claro institucional: azul, branco e um toque de verde. */
:root {
  --marinho: #0B2A55; --marinho-2: #12366B; --azul: #1D5FD1; --azul-h: #1852B8; --azul-claro: #5B8EE6;
  --ceu: #9CC0F5; --nevoa: #EEF4FD; --nevoa-2: #E3ECFA;
  --verde: #12936A; --verde-claro: #18A87B; --menta: #7FE0BD; --menta-bg: #E4F7EF;
  --amarelo: #FFC857;
  --bg: #FFFFFF; --texto: #0B2A55; --corpo: #3D4F6A; --mut: #64748B; --borda: #E3E9F2; --borda-2: #CFD9E8;
  --sombra: 0 1px 2px rgba(11, 42, 85, .05), 0 4px 16px -8px rgba(11, 42, 85, .12);
  --sombra-alta: 0 24px 60px -24px rgba(11, 42, 85, .35);
  --raio: 18px; --ease: cubic-bezier(.2, .8, .2, 1);
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--corpo); font: 400 16px/1.65 "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif; overflow-x: hidden; }
h1, h2, h3 { color: var(--texto); margin: 0; letter-spacing: -.025em; line-height: 1.15; font-weight: 800; }
p { margin: 0; }
a { color: var(--azul); text-decoration: none; }
img, svg { display: block; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--ceu); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--ceu); color: var(--marinho); }
.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--marinho); color: #fff; padding: .5rem .9rem; border-radius: 8px; }
.pular:focus { left: 8px; }
.caixa { width: min(1160px, 100% - 32px); margin: 0 auto; }
.estreita { width: min(780px, 100% - 32px); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .75rem 1.35rem; border-radius: 14px; font: 700 1rem "Plus Jakarta Sans", system-ui, sans-serif; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .25s; }
.btn:active { transform: scale(.98); }
.btn-p { background: var(--azul); color: #fff; box-shadow: 0 10px 24px -12px rgba(29, 95, 209, .8); }
.btn-p:hover { background: var(--azul-h); color: #fff; box-shadow: 0 14px 28px -12px rgba(29, 95, 209, .9); }
.btn-g { background: #fff; color: var(--marinho); border-color: var(--borda-2); }
.btn-g:hover { border-color: var(--azul); color: var(--azul); }
.btn-g svg.i { transition: transform .25s var(--ease); }
.btn-g:hover svg.i { transform: translateX(3px); }
.btn-branco { background: #fff; color: var(--marinho); }
.btn-branco:hover { background: var(--nevoa); color: var(--marinho); }
.btn-s { min-height: 42px; padding: .5rem 1rem; font-size: .92rem; border-radius: 12px; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.topo.rolou { border-bottom-color: var(--borda); box-shadow: 0 6px 24px -18px rgba(11, 42, 85, .35); }
.topo-in { width: min(1160px, 100% - 32px); margin: 0 auto; height: 68px; display: flex; align-items: center; gap: 1rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; color: var(--marinho); }
.marca-ic { width: 38px; height: 39px; transition: transform .4s var(--ease); }
.marca:hover .marca-ic { transform: rotate(-8deg); }
.marca-nome { font-weight: 800; font-size: 1.45rem; letter-spacing: -.035em; }
.marca-nome b { color: var(--azul); font-weight: 800; }
.menu { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.menu a:not(.btn) { color: var(--corpo); font-weight: 600; font-size: .95rem; padding: .5rem .75rem; border-radius: 10px; transition: color .2s, background .2s; }
.menu a:not(.btn):hover { color: var(--azul); background: var(--nevoa); }
.menu-cta { margin-left: .5rem; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borda-2); background: #fff; color: var(--marinho); place-items: center; cursor: pointer; }

/* ---------- herói ---------- */
.heroi { position: relative; overflow: hidden; padding: 56px 0 72px; background: linear-gradient(180deg, var(--nevoa) 0%, #fff 78%); }
.grade-fundo { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(29, 95, 209, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 95, 209, .07) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 60% at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 70% 30%, #000, transparent 75%); }
.heroi-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.etiqueta { display: inline-flex; align-items: center; gap: .5rem; font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.etiqueta::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--verde-claro); }
.heroi h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: 14px 0 18px; }
.marca-tx { color: var(--azul); background: linear-gradient(transparent 68%, var(--menta-bg) 68%); }
.lead { font-size: 1.12rem; max-width: 560px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.selos { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: .92rem; font-weight: 600; color: var(--marinho); }
.selos li { display: inline-flex; align-items: center; gap: .4rem; }
.selos svg.i { width: 18px; height: 18px; color: var(--verde-claro); stroke-width: 2.4; }

.heroi-vis { position: relative; padding: 70px 0 20px 120px; }
.janela { position: relative; z-index: 1; background: #fff; border: 1px solid var(--borda); border-radius: 20px; box-shadow: var(--sombra-alta); overflow: hidden; }
.janela-cab { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--marinho); }
.janela-cab span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.janela-cab b { margin-left: 8px; font-size: .8rem; font-weight: 600; color: #DCE7F8; }
.fila { list-style: none; margin: 0; padding: 6px 0; }
.fila li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 16px; font-size: .86rem; }
.fila li + li { border-top: 1px solid var(--borda); }
.emp { display: flex; align-items: center; gap: 10px; color: var(--marinho); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp i { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--nevoa); color: var(--azul); font-style: normal; font-size: .68rem; font-weight: 800; }
.tp { font: 500 .72rem var(--mono); color: var(--mut); background: #F4F7FB; padding: .2rem .45rem; border-radius: 6px; }
.st { font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 99px; white-space: nowrap; }
.st-ok { background: var(--menta-bg); color: var(--verde); }
.st-baixa { background: #E5EEFD; color: var(--azul); }
.st-espera { background: #FFF4DB; color: #9A6A00; }
.janela-rod { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--borda); background: #FAFCFF; font-size: .78rem; color: var(--mut); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-claro); box-shadow: 0 0 0 0 rgba(24, 168, 123, .5); animation: vivo 2.2s infinite; }
@keyframes vivo { 70%, 100% { box-shadow: 0 0 0 7px rgba(24, 168, 123, 0); } }
.heroi-bot { position: absolute; z-index: 2; left: -14px; bottom: 6px; width: 140px; height: 175px; filter: drop-shadow(0 16px 20px rgba(11, 42, 85, .14)); }
.bolha { position: absolute; z-index: 2; left: -30px; bottom: 192px; white-space: nowrap; background: #fff; border: 1px solid var(--borda); border-radius: 14px 14px 14px 4px; padding: .55rem .8rem; font-size: .84rem; font-weight: 700; color: var(--marinho); box-shadow: var(--sombra); line-height: 1.35; }
.bolha small { font-weight: 500; color: var(--mut); }

/* ---------- faixa ---------- */
.faixa { background: var(--marinho); color: #fff; }
.faixa-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.faixa-in div { padding: 22px 12px; text-align: center; }
.faixa-in div + div { border-left: 1px solid rgba(255, 255, 255, .1); }
.faixa b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.faixa span { font-size: .84rem; color: var(--ceu); }

/* ---------- seções ---------- */
.secao { padding: 96px 0; }
.secao-nevoa { background: var(--nevoa); }
.secao-azul { background: linear-gradient(180deg, #fff, var(--nevoa)); }
.sec-cab { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.sec-cab .etiqueta { justify-content: center; }
.sec-cab h2, .secao h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 12px; }
.sec-sub { margin-top: 14px; font-size: 1.05rem; }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }

/* antes / depois */
.compara { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lado { border-radius: var(--raio); padding: 30px; }
.lado h3 { font-size: 1.15rem; margin-bottom: 18px; }
.lado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lado li { display: flex; gap: 12px; align-items: flex-start; }
.lado li svg.i { margin-top: 2px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; stroke-width: 2.6; }
.lado-antes { background: #F7F8FA; border: 1px solid var(--borda); }
.lado-antes h3 { color: var(--mut); }
.lado-antes li { color: var(--mut); }
.lado-antes li svg.i { background: #EDEFF3; color: #8A94A6; }
.lado-depois { background: #fff; border: 1.5px solid var(--azul); box-shadow: 0 18px 40px -24px rgba(29, 95, 209, .5); }
.lado-depois li { color: var(--marinho); font-weight: 500; }
.lado-depois li svg.i { background: var(--menta-bg); color: var(--verde); }

/* passos */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: p; }
.passo { position: relative; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 30px 26px; box-shadow: var(--sombra); }
.passo-n { position: absolute; top: 22px; right: 24px; font: 500 .8rem var(--mono); color: var(--ceu); }
.passo .grande { width: 30px; height: 30px; color: var(--azul); margin-bottom: 18px; }
.passo h3 { font-size: 1.15rem; margin-bottom: 8px; }
.passo:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -16px; width: 12px; height: 12px; border-top: 2px solid var(--ceu); border-right: 2px solid var(--ceu); transform: translateY(-50%) rotate(45deg); }

/* recursos */
.cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px 22px; transition: border-color .25s, box-shadow .3s, transform .3s var(--ease); }
.cartao:hover { border-color: var(--ceu); box-shadow: 0 18px 36px -24px rgba(29, 95, 209, .45); transform: translateY(-3px); }
.cartao-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--nevoa); color: var(--azul); margin-bottom: 16px; transition: background .25s, color .25s; }
.cartao:hover .cartao-ic { background: var(--azul); color: #fff; }
.cartao h3 { font-size: 1.02rem; margin-bottom: 6px; }
.cartao p { font-size: .93rem; }

/* pastas */
.lista-ok { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--marinho); font-weight: 600; }
.lista-ok li { display: flex; align-items: center; gap: 10px; }
.lista-ok svg.i { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--menta-bg); color: var(--verde); stroke-width: 2.6; }
.arvore { background: #fff; border: 1px solid var(--borda); border-radius: 20px; padding: 22px 24px; box-shadow: var(--sombra-alta); font-size: .93rem; }
.arv-l { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--marinho); font-weight: 600; }
.arv-l svg.i { color: var(--amarelo); fill: #FFF1CC; }
.arv-l.az svg.i { color: var(--azul); fill: var(--nevoa); }
.arv-l em { margin-left: auto; font: 500 .74rem var(--mono); font-style: normal; color: var(--verde); background: var(--menta-bg); padding: .15rem .5rem; border-radius: 6px; }
.arv-l.n0 { font-weight: 800; }
.n1 { margin-left: 18px; } .n2 { margin-left: 36px; } .n3 { margin-left: 54px; } .n4 { margin-left: 72px; }
.arv-l.n1::before, .arv-l.n2::before, .arv-l.n3::before, .arv-l.n4::before { content: ""; position: absolute; left: -8px; top: 50%; width: 10px; height: 1px; background: var(--borda-2); }
.arv-l:hover { background: var(--nevoa); }

/* segurança */
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; }
.seg-item { display: flex; gap: 18px; padding: 26px; border-radius: var(--raio); border: 1px solid var(--borda); background: #fff; }
.seg-item > svg.i { width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--marinho); color: #fff; }
.seg-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.seg-item p { font-size: .95rem; }

/* planos */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.plano { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borda); border-radius: 22px; padding: 30px 28px; }
.plano h3 { font-size: 1.2rem; }
.plano-desc { margin-top: 4px; font-size: .92rem; color: var(--mut); }
.preco { margin: 20px 0; font-size: 2.8rem; font-weight: 800; color: var(--marinho); letter-spacing: -.04em; line-height: 1; }
.preco small { font-size: 1rem; font-weight: 600; color: var(--mut); letter-spacing: 0; }
.plano ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; flex: 1; }
.plano li { display: flex; align-items: center; gap: 10px; color: var(--marinho); font-weight: 500; font-size: .95rem; }
.plano li svg.i { width: 20px; height: 20px; color: var(--verde-claro); }
.plano .btn { width: 100%; }
.plano-destaque { border: 2px solid var(--azul); box-shadow: 0 30px 60px -30px rgba(29, 95, 209, .55); transform: translateY(-8px); }
.plano-selo { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--azul); color: #fff; font-size: .74rem; font-weight: 700; padding: .3rem .85rem; border-radius: 99px; white-space: nowrap; }
.planos-todos { text-align: center; margin-top: 32px; color: var(--marinho); font-weight: 500; }

/* faq */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--borda); border-radius: 16px; transition: border-color .25s, box-shadow .25s; }
.faq details[open] { border-color: var(--ceu); box-shadow: var(--sombra); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-weight: 700; color: var(--marinho); font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg.i { color: var(--azul); transition: transform .3s var(--ease); }
.faq details[open] summary svg.i { transform: rotate(45deg); }
.faq details p { padding: 0 22px 22px; }

/* chamada final */
.final { padding: 0 0 96px; }
.final-in { position: relative; overflow: hidden; display: flex; align-items: center; gap: 40px; padding: 48px 56px; border-radius: 28px; background: var(--azul); color: #DCE7F8; }
.final-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.final-in > * { position: relative; }
.final h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 10px; }
.final p { font-size: 1.05rem; margin-bottom: 24px; max-width: 540px; }
.final-bot { flex: none; width: 170px; height: 212px; }

/* rodapé */
.rodape { border-top: 1px solid var(--borda); padding: 44px 0 28px; font-size: .92rem; }
.rodape-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rodape-in p { margin-top: 10px; color: var(--mut); max-width: 360px; }
.rodape nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.rodape nav a { color: var(--corpo); font-weight: 600; }
.rodape nav a:hover { color: var(--azul); }
.rodape-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--borda); color: var(--mut); font-size: .82rem; }

/* assinatura Vértice (mesmo selo das páginas de modelo) */
.vtx-assina { display: flex; justify-content: center; margin-top: 18px; padding-bottom: 64px; }
.vtx-assina a { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: 99px; color: var(--mut); font-size: .82rem; opacity: .85; transition: opacity .2s, background .2s, color .2s; }
.vtx-assina a:hover, .vtx-assina a:focus-visible { opacity: 1; color: var(--marinho); background: rgba(11, 42, 85, .06); }
.vtx-assina img { width: 22px; height: 18px; }
.vtx-assina b { font-weight: 700; color: var(--marinho); }

/* whatsapp flutuante */
.zap-flutua { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-claro); color: #fff; box-shadow: 0 12px 28px -10px rgba(18, 147, 106, .8); transition: transform .25s var(--ease), background .2s; }
.zap-flutua:hover { transform: scale(1.06); background: var(--verde); }
.zap-flutua svg.i { width: 28px; height: 28px; }

/* ---------- mascote animado ---------- */
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sombra { 0%, 100% { transform: scaleX(1); opacity: .14; } 50% { transform: scaleX(.82); opacity: .07; } }
@keyframes pisca { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes acena { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-14deg); } 75% { transform: rotate(8deg); } 85% { transform: rotate(-10deg); } }
@keyframes luz { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes fogo { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.7); } }
.bot-flutua { animation: flutua 3.4s ease-in-out infinite; }
.bot-sombra { transform-box: fill-box; transform-origin: center; animation: sombra 3.4s ease-in-out infinite; }
.bot-olho { transform-box: fill-box; transform-origin: center; animation: pisca 5s infinite; }
.bot-acena { transform-box: fill-box; transform-origin: 100% 100%; animation: acena 4s ease-in-out infinite; }
.bot-antena { animation: luz 2.4s ease-in-out infinite; }
.bot-fogo { transform-box: fill-box; transform-origin: top; animation: fogo .5s ease-in-out infinite; }

/* aparecer ao rolar */
.js .revela { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .revela.visto { opacity: 1; transform: none; }

/* ---------- celular e tablet ---------- */
@media (max-width: 1000px) {
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .heroi-in { grid-template-columns: 1fr; gap: 36px; }
  .heroi-vis { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 860px) {
  .menu-btn { display: grid; }
  .menu { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 18px; background: #fff; border-bottom: 1px solid var(--borda); box-shadow: 0 20px 30px -20px rgba(11, 42, 85, .3); display: none; }
  .menu.aberto { display: flex; }
  .menu a:not(.btn) { padding: .8rem .75rem; }
  .menu-cta { margin: 8px 0 0; }
  .compara, .duas, .passos, .seg, .planos { grid-template-columns: 1fr; }
  .passo:not(:last-child)::after { top: auto; bottom: -16px; right: 50%; transform: translateX(50%) rotate(135deg); }
  .plano-destaque { transform: none; }
  .planos { gap: 26px; }
  .final-in { flex-direction: column; text-align: center; padding: 40px 24px; gap: 16px; }
  .final p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .heroi { padding: 32px 0 56px; }
  .acoes .btn { width: 100%; }
  .heroi-vis { padding: 0 0 130px 0; }
  .heroi-bot { left: -6px; bottom: -4px; width: 104px; height: 130px; }
  .bolha { left: 100px; top: auto; bottom: 46px; }
  .fila li { grid-template-columns: minmax(0, 1fr) auto; }
  .fila .tp { display: none; }
  .faixa-in { grid-template-columns: 1fr 1fr; }
  .faixa-in div:nth-child(3) { border-left: 0; }
  .faixa-in div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
  .secao { padding: 68px 0; }
  .sec-cab { margin-bottom: 34px; }
  .cartoes { grid-template-columns: 1fr; }
  .lado, .seg-item { padding: 22px; }
  .arvore { padding: 16px; font-size: .86rem; }
  .n1 { margin-left: 12px; } .n2 { margin-left: 24px; } .n3 { margin-left: 36px; } .n4 { margin-left: 48px; }
  .rodape-base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revela { opacity: 1; transform: none; }
}