/* Octo, páginas por área (octo.oitosolucoes.com/areas/). Mesma linguagem da página do Octo:
   grade, tipografia grande, poucas cores, muito respiro. Folha própria: várias classes têm o mesmo
   nome que em octo.css com regras diferentes, por isso as duas não se juntam. */
:root {
    --tinta: #060a10;
    --carvao: #0d151f;
    --grafite: #1c2733;
    --cinza: #5d6b78;
    --neblina: #9fb0c0;
    --linha: #dde7ee;
    --linha-escura: rgba(255, 255, 255, .14);
    --papel: #ffffff;
    --gelo: #f3f7fb;
    --azul: #1463ff;
    --ciano: #00c2e0;
    --verde: #00a878;
    --verde-vivo: #3dffa8;
    --ambar: #ffb547;
    --grad: linear-gradient(100deg, #1463ff 0%, #00c2e0 55%, #00e08a 100%);
    --grad-texto: linear-gradient(100deg, #4d8dff 0%, #00c2e0 50%, #00e5a0 100%);
    --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --corpo: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --gutter: clamp(16px, 2.2vw, 32px);
    --margem: clamp(16px, 5vw, 96px);
    --raio: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--corpo); color: var(--grafite); background: var(--papel); line-height: 1.55; font-size: clamp(16px, 1.05vw, 18px); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.02; letter-spacing: -.035em; color: var(--tinta); font-weight: 800; }
h1 { font-size: clamp(2.5rem, 6.6vw, 6.2rem); }
h2 { font-size: clamp(2rem, 4.4vw, 4rem); }
h3 { font-size: clamp(1.12rem, 1.4vw, 1.4rem); letter-spacing: -.02em; line-height: 1.18; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .86em; background: rgba(20, 99, 255, .08); color: var(--azul); padding: .1em .4em; border-radius: 6px; word-break: break-word; }
.escuro code { background: rgba(0, 194, 224, .12); color: #7fe6f5; }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding-left: var(--margem); padding-right: var(--margem); }
section { padding: clamp(72px, 9vw, 140px) 0; position: relative; }
.escuro { background: var(--tinta); color: #cdd8e6; }
.escuro h1, .escuro h2, .escuro h3 { color: #fff; }
.gelo { background: var(--gelo); }
.degrade { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* cabeçalho de seção */
.cab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 18px; align-items: end; margin-bottom: clamp(40px, 5vw, 80px); }
.cab .num { grid-column: span 2; }
.cab h2 { grid-column: span 7; }
.cab p { grid-column: 10 / span 3; color: var(--cinza); font-size: .98rem; }
.escuro .cab p { color: var(--neblina); }
.num { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--azul); display: flex; align-items: center; gap: 10px; align-self: start; padding-top: 14px; }
.escuro .num { color: var(--ciano); }
.num::after { content: ''; height: 1px; flex: 1; background: currentColor; opacity: .35; }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; background: #000; border-bottom: 1px solid var(--linha-escura); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: 1.3rem; flex-shrink: 0; }
.marca img { width: 40px; height: 30px; }
.marca small { font-family: var(--mono); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .62rem; color: var(--neblina); margin-left: 4px; }
.nav { display: flex; gap: 26px; }
.nav a { color: #cdd8e6; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.nav a:hover { color: #fff; }
.botao { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; border: 1.5px solid transparent; transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap; }
.botao:hover { transform: translateY(-2px); }
.botao-cheio { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -12px rgba(20, 99, 255, .7); }
.botao-vazado { border-color: rgba(255, 255, 255, .35); color: #fff; }
.botao-vazado:hover { border-color: #fff; }
.topo .botao { padding: 10px 18px; font-size: .88rem; }

/* herói */
.heroi { padding: clamp(56px, 8vw, 120px) 0 clamp(56px, 7vw, 100px); overflow: hidden; }
.heroi::before { content: ''; position: absolute; inset: 0; background:
    radial-gradient(60% 50% at 85% 20%, rgba(20, 99, 255, .22), transparent 70%),
    radial-gradient(40% 40% at 70% 90%, rgba(0, 224, 138, .12), transparent 70%); pointer-events: none; }
.heroi .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.selo { display: inline-flex; align-items: center; gap: 10px; color: #cdd8e6; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 28px; }
.selo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-vivo); box-shadow: 0 0 14px var(--verde-vivo); }
.heroi h1 { max-width: 13ch; }
.heroi .lide { margin-top: 28px; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: #b9c6dc; max-width: 46ch; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.ilustra { position: relative; }
.ilustra svg { width: 100%; height: auto; filter: drop-shadow(0 40px 80px rgba(20, 99, 255, .25)); }
.fatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(48px, 6vw, 90px); padding-top: 26px; border-top: 1px solid var(--linha-escura); grid-column: 1 / -1; }
.fato .mono { color: var(--neblina); display: block; margin-bottom: 8px; }
.fato b { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; color: #fff; font-size: clamp(1.2rem, 1.8vw, 1.7rem); display: block; line-height: 1.1; }
.fato span { display: block; color: var(--neblina); font-size: .86rem; margin-top: 6px; }

/* o que faz: cards de entrega */
.feitos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.feito { border: 1px solid var(--linha); border-radius: var(--raio); padding: 30px 28px 28px; background: var(--papel); display: flex; flex-direction: column; gap: 12px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feito:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(6, 10, 16, .35); border-color: #c4d6e4; }
.feito .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--tinta); display: grid; place-items: center; }
.feito .ico svg { width: 24px; height: 24px; }
.feito p { color: var(--cinza); font-size: .95rem; }
.feito .entrega { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--linha); font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }

/* ciclo */
.ciclo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); counter-reset: passo; }
.ciclo li { border-top: 2px solid #fff; padding-top: 18px; counter-increment: passo; }
.ciclo li::before { content: counter(passo, decimal-leading-zero); font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; color: var(--ciano); display: block; margin-bottom: 10px; }
.ciclo .braco { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-vivo); display: block; margin-bottom: 6px; }
.ciclo h3 { margin-bottom: 8px; }
.ciclo p { color: var(--neblina); font-size: .93rem; }
.frase { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.5rem, 3vw, 2.8rem); line-height: 1.1; max-width: 26ch; margin-top: clamp(56px, 7vw, 100px); padding-top: 28px; border-top: 1px solid var(--linha-escura); color: #fff; }

/* tabela tarefa → caminho */
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th, .tabela td { text-align: left; padding: 18px 16px 18px 0; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela th { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); font-weight: 500; }
.tabela td:first-child { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; color: var(--tinta); width: 34%; }
.tabela td { color: var(--cinza); }
.tabela td:nth-child(2) { color: var(--tinta); font-weight: 600; }
.rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* evolução */
.escada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.degrau { position: relative; border-radius: var(--raio); padding: 30px 28px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linha-escura); }
.degrau .k { font-family: var(--display); font-size: 3rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.degrau .quando { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ciano); margin: 16px 0 8px; }
.degrau h3 { margin-bottom: 10px; }
.degrau p { color: var(--neblina); font-size: .94rem; }
.degrau ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.degrau li { color: #cdd8e6; font-size: .9rem; padding-left: 18px; position: relative; }
.degrau li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--verde-vivo); }
.degrau .ganho { display: block; margin-top: 18px; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-vivo); }
.degrau:nth-child(2) { border-color: rgba(0, 194, 224, .35); }
.degrau:nth-child(3) { border-color: rgba(61, 255, 168, .35); background: linear-gradient(160deg, rgba(20, 99, 255, .12), rgba(0, 224, 138, .06)); }

/* medido ou hipótese */
.provas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.provas .lado { grid-column: span 4; }
.provas .lado .grande { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(3.4rem, 7vw, 6rem); line-height: .95; color: var(--tinta); }
.provas .lado p { color: var(--cinza); margin-top: 14px; font-size: .95rem; max-width: 34ch; }
.provas dl { grid-column: 6 / span 7; margin: 0; }
.provas dt { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; color: var(--tinta); font-size: 1.1rem; padding-top: 20px; border-top: 1px solid var(--linha); }
.provas dd { margin: 8px 0 20px; color: var(--cinza); font-size: .95rem; }
.etiqueta { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; font-weight: 500; flex-shrink: 0; }
.etiqueta.medido { background: rgba(0, 168, 120, .12); color: var(--verde); }
.etiqueta.hipotese { background: rgba(255, 181, 71, .18); color: #a76300; }

/* fontes */
.fontes { columns: 2; column-gap: clamp(32px, 5vw, 80px); margin: 0; padding: 0; list-style: none; }
.fontes li { break-inside: avoid; padding: 12px 0; border-top: 1px solid var(--linha); font-size: .9rem; color: var(--cinza); }
.fontes a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.fontes a:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

/* contato */
.contato .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.contato h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); }
.contato .lide { color: #b9c6dc; margin-top: 20px; font-size: 1.05rem; max-width: 44ch; }
.contato .acoes { justify-content: flex-end; }

/* outras páginas */
/* flex com quebra: a última linha incompleta fica centralizada; largura de 1/4 por faixa (1/2 até 1100 px, inteira até 560 px) */
.irmaos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.irmaos a { flex: 0 0 calc((100% - 36px) / 4); min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px; border: 1px solid var(--linha-escura); border-radius: 12px; text-decoration: none; color: #fff; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; transition: border-color .2s ease, background .2s ease; }
.irmaos a::after { content: '→'; color: var(--ciano); font-family: var(--mono); }
.irmaos a:hover { border-color: var(--ciano); background: rgba(0, 194, 224, .06); }
.irmaos a[aria-current] { border-color: rgba(61, 255, 168, .5); color: var(--verde-vivo); pointer-events: none; }
.rodape { background: var(--tinta); color: var(--neblina); padding: 56px 0 40px; border-top: 1px solid var(--linha-escura); font-size: .86rem; }
.rodape .mono { color: var(--neblina); display: block; margin-bottom: 18px; }
.rodape .fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linha-escura); }
.rodape a { color: #cdd8e6; }

/* índice */
.vitrine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
/* hub das áreas (só ele usa .vitrine-areas): grade de 6 com cartões de 2 (todos do mesmo tamanho); a última linha incompleta fica centralizada */
@media (min-width: 1101px) {
    .vitrine-areas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .vitrine-areas > .cartao { grid-column: span 2; }
    .vitrine-areas > .cartao:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
    .vitrine-areas > .cartao:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
.cartao { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); background: var(--papel); transition: transform .25s ease, box-shadow .25s ease; }
.cartao:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(6, 10, 16, .45); }
.cartao .capa { background: var(--tinta); aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 18px; }
.cartao .capa svg { width: 100%; height: 100%; }
.cartao .corpo { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cartao .corpo p { color: var(--cinza); font-size: .92rem; }
.cartao .tags { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.cartao .tags span { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--gelo); color: var(--grafite); }

/* animação de entrada */
.js .surge { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .surge.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .surge { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* responsivo */
@media (max-width: 1100px) {
    .nav { display: none; }
    .feitos, .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vitrine-areas > .cartao:nth-child(odd):last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--gutter)) / 2); }
    .ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .irmaos a { flex-basis: calc((100% - 12px) / 2); }
}
@media (max-width: 860px) {
    .heroi .wrap, .contato .wrap { grid-template-columns: 1fr; }
    .ilustra { order: -1; max-width: 520px; }
    .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cab .num, .cab h2, .cab p { grid-column: 1 / -1; }
    .escada { grid-template-columns: 1fr; }
    .provas .lado, .provas dl { grid-column: 1 / -1; }
    .fontes { columns: 1; }
    .contato .acoes { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .feitos, .ciclo, .vitrine { grid-template-columns: 1fr; }
    .irmaos a { flex-basis: 100%; }
    .vitrine-areas > .cartao:nth-child(odd):last-child { width: auto; justify-self: stretch; }
    .marca small { display: none; }
    .topo .botao { padding: 9px 14px; font-size: .8rem; }
    .tabela td:first-child { width: auto; }
}

/* ===== complementos das páginas Octo × Autodesk ===== */

/* acessibilidade: pular para o conteúdo e foco visível */
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--papel); color: var(--tinta); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .2s ease; }
.pular:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; border-radius: 6px; }
.botao:focus-visible { outline-offset: 4px; border-radius: 999px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* herói: lide do índice e ilustração */
.heroi h1 { text-wrap: balance; }
.ilustra text { font-family: var(--mono); letter-spacing: .08em; }
.ilustra-legenda { margin-top: 10px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); text-align: right; }
.heroi-curto .wrap { grid-template-columns: minmax(0, 1fr); }
.heroi-curto h1 { max-width: 16ch; }
.heroi-curto .lide { max-width: 60ch; }

/* animações dos SVG: traço que se desenha, fluxo e pulso */
.desenha { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: desenha 3.2s cubic-bezier(.6, .1, .2, 1) .3s forwards; }
.fluxo { stroke-dasharray: 4 10; animation: fluxo 1.6s linear infinite; }
.pulso { transform-box: fill-box; transform-origin: center; animation: pulso 2.8s ease-out infinite; }
.flutua { animation: flutua 5s ease-in-out infinite; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes fluxo { to { stroke-dashoffset: -28; } }
@keyframes pulso { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
    .desenha { animation: none; stroke-dashoffset: 0; }
    .fluxo, .pulso, .flutua { animation: none; }
    .pulso { opacity: 0; }
    .botao, .feito, .cartao { transition: none; }
}

/* cabeçalho: lide de seção em fundo claro */
.cab p strong { color: var(--tinta); }
.escuro .cab p strong { color: #fff; }

/* tabela: rolagem horizontal só dentro de .rolar */
.rolar .tabela { min-width: 640px; }
.tabela tbody tr:last-child td { border-bottom: 1px solid var(--linha); }
.tabela td:first-child { padding-right: 24px; }

/* evolução: aviso de proposta */
.proposta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); border: 1px solid rgba(255, 181, 71, .4); border-radius: 999px; padding: 5px 12px; margin-bottom: 24px; }
.degrau .k.degrade { display: inline-block; }

/* provas */
.provas .lado .aviso { margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--ambar); background: rgba(255, 181, 71, .1); color: var(--grafite); font-size: .92rem; border-radius: 0 10px 10px 0; }
.provas dd small { display: block; margin-top: 4px; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); opacity: .85; }
.etiqueta.hipotese { color: #8a5200; }

/* fontes: arquivos locais em destaque */
.fontes-locais { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.fontes-locais a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--linha); text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .92rem; background: var(--papel); }
.fontes-locais a:hover { border-color: var(--azul); color: var(--azul); }

/* páginas ligadas: atalhos entre áreas, ao fim da tabela de caminhos */
.ligadas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.ligadas .mono { margin: 0 8px 0 0; color: var(--cinza); }
.ligadas a { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha); text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .9rem; background: var(--papel); }
.ligadas a:hover { border-color: var(--azul); color: var(--azul); }
.fontes li span { display: block; font-size: .82rem; margin-top: 2px; }
.fontes-nota { margin-top: 28px; color: var(--cinza); font-size: .9rem; max-width: 70ch; }

/* rodapé */
.rodape .topo-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.rodape .topo-rodape .mono { margin-bottom: 0; }
.rodape .voltar { font-weight: 600; text-decoration: none; color: #fff; }
.rodape .voltar:hover { color: var(--ciano); }

/* índice */
.cartao h3 { color: var(--tinta); }
.cartao .tags span.sim { background: rgba(0, 168, 120, .12); color: #00704f; }
.cartao .tags span.nao { background: rgba(93, 107, 120, .12); color: var(--grafite); }
.cartao .tags span.parcial { background: rgba(255, 181, 71, .2); color: #8a5200; }
.cartao .ir { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); margin-top: 10px; }

@media (max-width: 860px) {
    .ilustra { max-width: 100%; }
    .ilustra-legenda { text-align: left; }
}
@media (max-width: 560px) {
    .heroi h1 { font-size: clamp(2.2rem, 10vw, 2.6rem); }
    .fatos { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
    .acoes .botao { flex: 1 1 auto; justify-content: center; }
    .topo .wrap { gap: 10px; }
    .marca { font-size: 1.15rem; gap: 8px; }
    .marca img { width: 34px; height: 26px; }
    .contato h2 { font-size: 2rem; }
}
.cartao .capa text { font-family: var(--mono); letter-spacing: .06em; }
.provas dt code { white-space: nowrap; word-break: normal; }

/* ---- Classes que substituem estilos em linha, trilha e navegação entre páginas ---- */
.sem-margem { margin: 0; }
.acima { margin-top: 28px; }

.trilha { background: var(--carvao); border-bottom: 1px solid var(--linha-escura); font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--neblina); }
.trilha ol { list-style: none; margin: 0; padding: 10px 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.trilha li { display: inline-flex; align-items: center; }
.trilha li + li::before { content: '/'; margin: 0 10px; color: var(--cinza); }
.trilha a { color: #cdd8e6; text-decoration: none; }
.trilha a:hover { color: var(--ciano); }
.trilha [aria-current] { color: #fff; }

.rodape .rodape-areas { margin-top: 40px; }
.rodape .fim-links { display: inline-flex; flex-wrap: wrap; gap: 18px; }

/* hub: lista das áreas */
.lista-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }

@media (max-width: 1100px) {
    .nav.nav-areas { display: flex; gap: 20px; }
}
@media (max-width: 860px) {
    .lista-areas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .topo .botao-topo { display: none; }
}
@media (max-width: 560px) {
    .nav.nav-areas { gap: 14px; }
    .nav.nav-areas a { font-size: .84rem; }
}

/* figuras das áreas de 31/10 (Photoshop, Illustrator, GIS livre): o converter.py troca os estilos em linha por estas classes */
.figura-larga { width: 100%; height: auto; }
.figura-mono { max-width: 100%; display: block; font-family: var(--mono); }
.figura-bloco { width: 100%; height: auto; display: block; }
.legenda-figura { font-size: .8rem; opacity: .75; margin-top: 8px; }
.figura-acima { margin: clamp(48px, 6vw, 88px) 0 0; }
.figura-abaixo { margin: 0 0 clamp(40px, 5vw, 72px); }
.f-neblina { fill: var(--neblina); } .f-verde-vivo { fill: var(--verde-vivo); } .f-verde { fill: var(--verde); } .f-ambar { fill: var(--ambar); } .f-papel { fill: var(--papel); } .f-cinza { fill: var(--cinza); } .f-carvao { fill: var(--carvao); } .f-ciano { fill: var(--ciano); } .f-azul { fill: var(--azul); } .f-grafite { fill: var(--grafite); }
.s-neblina { stroke: var(--neblina); } .s-verde-vivo { stroke: var(--verde-vivo); } .s-verde { stroke: var(--verde); } .s-ambar { stroke: var(--ambar); } .s-papel { stroke: var(--papel); } .s-cinza { stroke: var(--cinza); } .s-carvao { stroke: var(--carvao); } .s-ciano { stroke: var(--ciano); } .s-azul { stroke: var(--azul); } .s-grafite { stroke: var(--grafite); }
/* figuras da área ArcGIS (31/10): mesmas regras que estavam em linha na origem */
.f-gelo { fill: var(--gelo); } .f-tinta { fill: var(--tinta); } .f-linha { fill: var(--linha); }
.s-gelo { stroke: var(--gelo); } .s-tinta { stroke: var(--tinta); } .s-linha { stroke: var(--linha); }
.italico { font-style: italic; }
.pulso-rest { transform-origin: 55px 224px; }
.figura-rest { margin: 48px 0 0; max-width: 720px; }
.imagem-rest { display: block; width: 100%; height: auto; border-radius: 14px; }
.legenda-rest { margin-top: 10px; font-size: .84rem; color: var(--cinza); }
.acima-largo { margin-top: clamp(56px, 7vw, 100px); }
/* figuras largas: no celular rolam na horizontal em vez de encolher o texto (no desktop, nada muda) */
@media (max-width: 720px) {
    .ilustra-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ilustra-rolar > svg { display: block; min-width: 560px; }
    .ilustra { min-width: 0; }
    .ilustra-rolar-heroi > svg { min-width: 480px; filter: none; }
}

/* whatsapp flutuante: o mesmo .zap da página do Octo (octo.css); as páginas das áreas não têm menu de celular */
.zap { position: fixed; right: 20px; bottom: 20px; z-index: 1000; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .2s; }
.zap:hover, .zap:focus-visible { transform: scale(1.08); }
.zap svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 600px) { .zap { right: 16px; bottom: 16px; width: 52px; height: 52px; } }