:root { --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono Variable", ui-monospace, monospace; --font-numero: var(--font-mono); --color-fundo: #05070c; --color-superficie-1: #0b0f18; --color-superficie-2: #121826; --color-vidro: rgb(16 20 30 / 0.55); --color-vidro-solido: rgb(11 15 24 / 0.96); --color-vidro-denso: rgb(11 15 24 / 0.88); --color-linha: rgb(255 255 255 / 0.08); --color-borda: rgb(255 255 255 / 0.08); --color-borda-2: rgb(255 255 255 / 0.12); --color-borda-hover: rgb(255 255 255 / 0.2); --color-brilho: rgb(255 255 255 / 0.06); --color-dentro: rgb(255 255 255 / 0.04); --color-pil: rgb(255 255 255 / 0.09); --color-col: rgb(255 255 255 / 0.022); --color-esqueleto: rgb(255 255 255 / 0.055); --color-atmosfera: #1b2b66; --color-texto-1: #edf0f5; --color-texto-2: #b9c0cd; --color-texto-3: #b0b7c6; --color-texto-desligado: #8b93a5; --color-destaque: #ff6a2a; --color-destaque-hover: #ff7c44; --color-destaque-pressionado: #f0601f; --color-sobre-destaque: #08100a; --color-acerto: #3fcf8e; --color-acerto-fundo: rgb(63 207 142 / 0.14); --color-erro: #f2557a; --color-erro-texto: #ff93ab; --color-erro-fundo: rgb(242 85 122 / 0.14); --color-erro-borda: rgb(242 85 122 / 0.35); --color-erro-campo: rgb(242 85 122 / 0.7); --color-info: #c9d3e8; --color-info-fundo: rgb(130 150 200 / 0.2); --color-aviso: #e9c27a; --color-fase-novo: #4a5a86; --color-fase-aprendendo: #8296c8; --color-fase-revisao: #c9d3e8; --color-fase-dominado: #edf0f5; --color-fase-pausado: #8b93a5; --color-evento-revisao: #c9d3e8; --color-evento-novas: #8296c8; --color-evento-caderno: #f2557a; --color-evento-simulado: #edf0f5; --color-grafico-grade: rgb(255 255 255 / 0.08); --color-grafico-meta: rgb(255 255 255 / 0.88); --color-grafico-trilho: rgb(255 255 255 / 0.08); --radius-cartao: 22px; --radius-kc: 16px; --radius-gaveta: 28px; --radius-copia: 20px; --radius-celula: 15px; --radius-campo: 14px; --radius-aviso: 12px; --radius-dom: 10px; --radius-ck: 7px; --radius-qt: 6px; --radius-pilula: 999px; --shadow-vidro: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 60px -24px rgb(0 0 0 / 0.7); --shadow-cartao: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 60px -24px rgb(0 0 0 / 0.42); --shadow-solido: inset 0 1px 0 rgb(255 255 255 / 0.06); --shadow-pil: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 4px 12px -6px rgb(0 0 0 / 0.5); --shadow-sublinhado: 0 0 8px rgb(255 106 42 / 0.8); --color-fio-principal: rgb(255 255 255 / 0.35); --shadow-kc: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 10px 22px -14px rgb(0 0 0 / 0.8); --shadow-pego: inset 0 0 0 2px #ff6a2a, 0 0 0 1px #ff6a2a, 0 0 18px -4px #ff6a2a; --shadow-fantasma: 0 26px 50px -18px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.25); --shadow-toast: 0 18px 40px -16px rgb(0 0 0 / 0.8); --shadow-hoje: 0 10px 28px -14px rgb(237 240 245 / 0.35); --ease-saida: cubic-bezier(0.16, 1, 0.3, 1); --ease-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-cubica: cubic-bezier(0.33, 1, 0.68, 1); --ease-foco: cubic-bezier(0.4, 0, 0.2, 1); --ease-folha: cubic-bezier(0.32, 0.72, 0, 1); --fundo-foto: none; --atmosfera: radial-gradient(62% 52% at 50% 32%, rgb(27 43 102 / 0.35), transparent 70%), linear-gradient(180deg, transparent 60%, rgb(5 7 12 / 0.6)), #05070c; --dur-foco: 150ms; --dur-fechar: 180ms; --dur-item: 200ms; --dur-veu: 220ms; --dur-subir: 240ms; --dur-longa: 320ms; --dur-toque: 100ms; --esp-4: 4px; --esp-6: 6px; --esp-8: 8px; --esp-10: 10px; --esp-12: 12px; --esp-14: 14px; --esp-16: 16px; --esp-20: 20px; --esp-24: 24px; --esp-28: 28px; --esp-32: 32px; --alvo: 44px; } @font-face { font-family: 'Geist Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fontes/geist-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Geist Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fontes/geist-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Geist Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fontes/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Geist Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fontes/geist-mono-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { --largura: 1240px; --margem: max(clamp(16px, 4.4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right)); --topo: 76px; --secao: clamp(88px, 11vw, 160px); } *, *::before, *::after { box-sizing: border-box } [hidden] { display: none !important } html { color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; scroll-padding-top: 24px; background: var(--color-fundo); } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-fundo); color: var(--color-texto-1); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-synthesis: none; } img, svg { display: block; max-width: 100% } a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance } p { margin: 0; text-wrap: pretty } ul, ol { margin: 0; padding: 0 } cite { font-style: normal } button, input { font: inherit; color: inherit } ::selection { background: rgb(255 106 42 / 0.32); color: var(--color-texto-1) } :focus-visible { outline: 2px solid var(--color-destaque); outline-offset: 2px; border-radius: 6px } main:focus { outline: none } .a-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--atmosfera) } .fundo-grao { position: absolute; inset: 0; opacity: 0.03; mix-blend-mode: overlay; background-image: url(../img/grao.svg) } main { position: relative; flex: 1 0 auto; display: block } .dentro { width: min(var(--largura), 100% - 2 * var(--margem)); margin-inline: auto } .pular { position: absolute; left: var(--margem); top: -80px; z-index: 30; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--color-superficie-2); color: var(--color-texto-1); font-weight: 600; text-decoration: none; } .pular:focus-visible { top: 12px } .num { font-variant-numeric: tabular-nums } .mono { font-family: var(--font-numero); font-variant-numeric: tabular-nums; letter-spacing: -0.02em } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font: 600 14.5px/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-foco) var(--ease-foco), border-color var(--dur-foco) var(--ease-foco), color var(--dur-foco) var(--ease-foco), transform var(--dur-toque) var(--ease-foco); } .btn .ic { width: 16px; height: 16px; flex: none } .btn:active { transform: scale(0.98) } .btn-pri { background: var(--color-destaque); color: var(--color-sobre-destaque); border-top-color: var(--color-fio-principal) } .btn-pri .ic { stroke-width: 2.2 } .btn-pri:focus-visible { outline-offset: 3px } .btn-sec { background: rgb(255 255 255 / 0.05); border-color: var(--color-borda-2); color: var(--color-texto-1) } .btn-g { min-height: 52px; padding: 0 26px; font-size: 15.5px } .btn[disabled], .btn[aria-disabled="true"] { background: rgb(255 255 255 / 0.08); color: var(--color-texto-desligado); border-color: transparent; cursor: not-allowed; transform: none; } .btn[aria-busy="true"] { cursor: progress } @media (hover: hover) { .btn-pri:hover { background: var(--color-destaque-hover) } .btn-sec:hover { background: rgb(255 255 255 / 0.1); border-color: var(--color-borda-hover) } } .btn-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 1px solid var(--color-borda-2); background: rgb(255 255 255 / 0.04); color: var(--color-texto-1); transition: background-color var(--dur-foco) var(--ease-foco); } .btn-ic .ic { width: 18px; height: 18px } @media (hover: hover) { .btn-ic:hover { background: rgb(255 255 255 / 0.1) } } .ic { width: 18px; height: 18px; flex: none } .link-seta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--color-texto-1); } .link-seta .ic { width: 16px; height: 16px; transition: transform var(--dur-foco) var(--ease-saida) } @media (hover: hover) { .link-seta:hover .ic { transform: translateX(3px) } } @keyframes subir { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } @keyframes aparecer { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-property: opacity !important; transition-duration: var(--dur-fechar) !important; transition-delay: 0s !important; } .anima { animation-name: aparecer !important; animation-duration: var(--dur-fechar) !important; animation-delay: 0s !important } .btn:active { transform: none } } @media print { .fundo, .topo, .pular, .menu { display: none !important } body { background: #fff; color: #000 } .doc-corpo { border: 0 !important; background: none !important; padding: 0 !important } a { color: #000 } } .topo { position: relative; z-index: 20; padding-top: env(safe-area-inset-top) } .topo-in { width: min(var(--largura), 100% - 2 * var(--margem)); margin-inline: auto; height: var(--topo); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .marca { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 6px; font: 500 21px/1 var(--font-sans); letter-spacing: -0.035em; text-decoration: none; color: var(--color-texto-1); border-radius: 12px; } .marca .simbolo { width: 19px; height: 27px; overflow: visible } .nav { justify-self: center } .nav ul { display: flex; gap: 2px; list-style: none; padding: 4px; border-radius: 999px; background: var(--color-vidro); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--color-borda); box-shadow: var(--shadow-vidro); } .nav a { position: relative; display: flex; align-items: center; height: 38px; padding: 0 17px; border-radius: 999px; color: var(--color-texto-2); font: 500 14px/1 var(--font-sans); text-decoration: none; transition: color var(--dur-foco) var(--ease-foco), background-color var(--dur-foco) var(--ease-foco); } .nav a[aria-current="page"] { color: var(--color-texto-1); background: var(--color-pil); box-shadow: var(--shadow-pil) } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--color-destaque); box-shadow: var(--shadow-sublinhado); } @media (hover: hover) { .nav a:not([aria-current]):hover { color: var(--color-texto-1); background: rgb(255 255 255 / 0.05) } } .topo-entrar { justify-self: end } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav ul { background: var(--color-vidro-solido) } } @media (prefers-reduced-transparency: reduce) { .nav ul { background: var(--color-vidro-solido); backdrop-filter: none; -webkit-backdrop-filter: none } } html.sem-vidro .nav ul { background: var(--color-vidro-solido); backdrop-filter: none; -webkit-backdrop-filter: none } .menu { display: none } .menu summary { list-style: none } .menu summary::-webkit-details-marker { display: none } .menu .ic-fechar { display: none } .menu[open] .ic-fechar { display: block } .menu[open] summary .ic:not(.ic-fechar) { display: none } .menu-painel { position: absolute; right: 0; top: 54px; width: min(300px, 100vw - 2 * var(--margem)); padding: 8px; border-radius: 22px; background: var(--color-superficie-2); border: 1px solid var(--color-borda-2); box-shadow: var(--shadow-toast); animation: subir var(--dur-veu) var(--ease-saida); } .menu-painel ul { list-style: none; display: grid; gap: 2px } .menu-painel a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; font-weight: 500; text-decoration: none; color: var(--color-texto-1); } .menu-painel a[aria-current="page"] { background: rgb(255 255 255 / 0.06) } .menu-painel .btn { width: 100%; margin-top: 8px } @media (max-width: 860px) { .topo-in { grid-template-columns: 1fr auto; height: 64px } .nav, .topo-entrar { display: none } .menu { display: block; position: relative; justify-self: end } } .rodape { position: relative; margin-top: var(--secao); padding-bottom: calc(40px + env(safe-area-inset-bottom)) } .rodape-in { width: min(var(--largura), 100% - 2 * var(--margem)); margin-inline: auto } .rodape-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px } .rodape-sobre p { margin-top: 12px; max-width: 26ch; color: var(--color-texto-2); font-size: 15px; line-height: 1.5 } .rodape-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px } .rodape h2 { font: 600 13px/1.2 var(--font-sans); letter-spacing: 0; color: var(--color-texto-2); margin: 12px 0 8px } .rodape-links ul { list-style: none; display: grid } .rodape-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--color-texto-1); text-decoration: none; font-size: 15px; } @media (hover: hover) { .rodape-links a:hover { text-decoration: underline } } .rodape-legal { display: grid; gap: 8px; margin-top: clamp(40px, 5vw, 64px); max-width: 920px; color: var(--color-texto-2); font-size: 13.5px; line-height: 1.55; } .rodape-legal a { color: var(--color-texto-1) } @media (max-width: 760px) { .rodape-grade { grid-template-columns: minmax(0, 1fr); gap: 16px } .rodape-links { grid-template-columns: 1fr 1fr; gap: 8px 16px } .rodape-links a { min-height: 44px } .rodape-legal a { display: inline-block; padding-block: 12px; margin-block: -12px } } .heroi { position: relative; isolation: isolate; margin-top: calc(-1 * (var(--topo) + env(safe-area-inset-top))); min-height: max(660px, min(100svh, 940px)); display: flex; align-items: flex-end; padding-block: calc(var(--topo) + env(safe-area-inset-top) + 48px) clamp(56px, 9vh, 112px); } .heroi-foto { position: absolute; inset: 0; z-index: -1; overflow: hidden } .heroi-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28% } .heroi-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 7 12 / 0.6) 0, rgb(5 7 12 / 0) 18%, rgb(5 7 12 / 0) 46%, rgb(5 7 12 / 0.82) 80%, #05070c 100%), radial-gradient(70% 70% at 0% 100%, rgb(5 7 12 / 0.72), transparent 72%); } .heroi-texto { position: relative } .heroi h1 { max-width: 11.5em; font-size: clamp(46px, 6.6vw, 100px); line-height: 0.98; letter-spacing: -0.045em; } .heroi-sub { margin-top: 26px; max-width: 34em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--color-texto-1) } .heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px } .heroi-beta { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--color-texto-2); font-size: 14.5px; line-height: 1.45; } .heroi-beta .ic { width: 16px; height: 16px; color: var(--color-texto-1) } .heroi-credito { position: absolute; right: var(--margem); bottom: 18px; display: inline-block; padding-block: 13px; line-height: 18px; color: var(--color-texto-2); font-size: 12.5px; text-decoration: none; } @media (hover: hover) { .heroi-credito:hover { color: var(--color-texto-1); text-decoration: underline } } .heroi .anima { animation: subir var(--dur-subir) var(--ease-saida) both } .heroi .anima:nth-child(2) { animation-delay: 70ms } .heroi .anima:nth-child(3) { animation-delay: 140ms } .heroi .anima:nth-child(4) { animation-delay: 210ms } @media (max-width: 760px) { .heroi { min-height: 0; display: block; padding-block: calc(min(62svh, 520px) - 40px) 8px } .heroi-foto { bottom: auto; height: min(62svh, 520px) } .heroi-foto img { object-position: 46% 40% } .heroi-foto::after { background: linear-gradient(180deg, rgb(5 7 12 / 0.55) 0, rgb(5 7 12 / 0) 22%, rgb(5 7 12 / 0.1) 55%, #05070c 100%); } .heroi h1 { font-size: clamp(40px, 11.6vw, 52px) } .heroi-credito { position: static; display: block; width: min(var(--largura), 100% - 2 * var(--margem)); margin: 8px auto 0 } } .secao { padding-top: var(--secao) } .secao-cab h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.035em; max-width: 15em } .secao-cab p { margin-top: 18px; max-width: 36em; font-size: 17.5px; line-height: 1.6; color: var(--color-texto-1) } .faixa { margin-top: clamp(24px, 4vw, 56px); padding-block: clamp(64px, 8vw, 112px); background: var(--color-superficie-1) } .faixa + .secao { padding-top: var(--secao) } .fatos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start } .fatos-lista { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) } .fato { display: flex; flex-direction: column; gap: 16px } .fato-n { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 500; font-size: clamp(72px, 8.4vw, 128px); line-height: 0.86; letter-spacing: -0.055em; color: var(--color-texto-1); } .fato-t { max-width: 26ch; font-size: 18px; line-height: 1.5 } .fatos-nota { margin-top: clamp(28px, 3vw, 40px); color: var(--color-texto-2); font-size: 14.5px; line-height: 1.55 } @media (max-width: 960px) { .fatos { grid-template-columns: minmax(0, 1fr) } } @media (max-width: 560px) { .fatos-lista { grid-template-columns: minmax(0, 1fr) } .fato { gap: 10px } .fato-t { font-size: 17px } } .caminho { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start } .caminho .secao-cab { padding-top: clamp(0px, 4vw, 64px) } .caminho-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px } .cruz { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; justify-self: center } .cruz svg { position: absolute; inset: 0; width: 100%; height: 100% } .cruz-linha { stroke: rgb(237 240 245 / 0.2); stroke-width: 1.4; stroke-dasharray: 3 7; fill: none } .cruz-estrela { fill: var(--color-texto-1) } .cruz-acrux { fill: var(--color-destaque) } .cruz ol { list-style: none } .cruz li { position: absolute; width: 200px; transform: translateY(-50%) } .cruz li.esq { text-align: right; transform: translate(-100%, -50%) } .cruz li > strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em } .cruz li > span { display: block; margin-top: 4px; color: var(--color-texto-2); font-size: 15px; line-height: 1.45 } .cruz .p1 { left: calc(50.6% + 22px); top: 13.2% } .cruz .p2 { left: calc(28.5% - 24px); top: 46.7% } .cruz .p3 { left: calc(70.5% + 20px); top: 38.1% } .cruz .p4 { left: calc(62% + 18px); top: 64.5% } .cruz .p5 { left: calc(52.7% + 26px); top: 84.5% } @media (max-width: 960px) { .caminho { grid-template-columns: minmax(0, 1fr) } } @media (max-width: 760px) { .cruz { aspect-ratio: auto; max-width: none } .cruz svg { display: none } .cruz ol { display: grid; gap: 4px; padding-left: 8px } .cruz li, .cruz li[class] { position: relative; left: auto; top: auto; width: auto; transform: none; text-align: left; padding: 10px 0 18px 30px } .cruz li::before { content: ""; position: absolute; left: 0; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-texto-1); } .cruz li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 32px; bottom: -6px; border-left: 1.4px dashed rgb(237 240 245 / 0.22); } .cruz li.p5::before { background: var(--color-destaque) } } .docs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start } @media (max-width: 960px) { .docs { grid-template-columns: minmax(0, 1fr) } } .cab { padding-block: clamp(40px, 7vw, 96px) clamp(32px, 4.5vw, 56px) } .cab h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.04em; max-width: 15em } .cab .lead { margin-top: 20px; max-width: 38em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55 } .cab .lead a:not(.btn) { color: var(--color-texto-1) } .cab-nota { margin-top: 14px; color: var(--color-texto-2); font-size: 14.5px } .status-estado { display: flex; align-items: center; gap: 12px } .status-estado .ic { width: 22px; height: 22px } .contato-aviso { margin-top: 16px } .contato-dica { margin-top: 14px } .cookies-notas, .versoes-notas { margin-top: 20px } .creditos-ceu img { width: 100%; height: auto; border-radius: 14px } .cab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 22px; color: var(--color-texto-2); font-size: 14.5px } .texto { max-width: 68ch; font-size: 17px; line-height: 1.65 } .texto > * + * { margin-top: 1em } .texto h2 { margin-top: 2.2em; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em } .texto h3 { margin-top: 1.8em; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em } .texto h2 + *, .texto h3 + * { margin-top: 0.6em } @media (max-width: 760px) { .texto h2 { font-size: 20px } .texto h3 { font-size: 17.5px } } .texto ul, .texto ol { padding-left: 1.3em; display: grid; gap: 0.4em } .texto li::marker { color: var(--color-texto-2) } .texto strong { font-weight: 600 } .texto a:not(.btn) { color: var(--color-texto-1) } .tabela-rola { overflow-x: auto; border-radius: 14px; border: 1px solid var(--color-borda); background: rgb(255 255 255 / 0.02) } .tabela-rola:focus-visible { outline-offset: 3px } table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45 } th, td { padding: 12px 16px; text-align: left; vertical-align: top } thead th { font-size: 13px; font-weight: 600; color: var(--color-texto-2); background: rgb(255 255 255 / 0.03) } tbody tr + tr > * { border-top: 1px solid var(--color-borda) } tbody th { font-weight: 600 } @media (max-width: 760px) { table { font-size: 14.5px; min-width: 520px } th, td { padding: 10px 12px } } @media (max-width: 760px) { .texto a:not(.btn), .ficha a, td a, .cab .lead a { padding-block: 12px } td a { padding-block: 13px; padding-inline: 3px } } td.direita, th.direita { text-align: right; font-variant-numeric: tabular-nums } .solido { background: var(--color-superficie-1); border: 1px solid var(--color-borda); border-radius: var(--radius-cartao); box-shadow: var(--shadow-solido); } .linhas { list-style: none; overflow: hidden } .linhas > li + li { border-top: 1px solid var(--color-borda) } .linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; min-height: 76px; padding: 16px clamp(18px, 2.4vw, 28px); text-decoration: none; color: var(--color-texto-1); transition: background-color var(--dur-foco) var(--ease-foco); } .linha:focus-visible { outline-offset: -2px; border-radius: 0 } .linhas > li:first-child .linha:focus-visible { border-radius: var(--radius-cartao) var(--radius-cartao) 0 0 } .linha-t { font-size: 17px; font-weight: 600; letter-spacing: -0.01em } .linha-m { grid-column: 1; color: var(--color-texto-2); font-size: 14.5px; line-height: 1.45 } .linha .ic { grid-row: 1 / span 2; grid-column: 2; color: var(--color-texto-2); transition: transform var(--dur-foco) var(--ease-saida), color var(--dur-foco) var(--ease-foco) } @media (hover: hover) { .linha:hover { background: rgb(255 255 255 / 0.03) } .linha:hover .ic { color: var(--color-texto-1); transform: translateX(3px) } } .par { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); align-items: start } .par + .par, .tabela-rola + .par { margin-top: clamp(56px, 7vw, 96px) } .par > h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.025em } @media (max-width: 960px) { .par { grid-template-columns: minmax(0, 1fr); gap: 16px } } .perguntas { list-style: none; display: grid } .pergunta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 5vw, 80px); padding-block: 32px } .pergunta + .pergunta { border-top: 1px solid var(--color-borda) } .perguntas.solido .pergunta { padding-inline: clamp(20px, 3vw, 44px) } .pergunta h2 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.3; letter-spacing: -0.015em } .pergunta .texto { font-size: 17px } @media (max-width: 960px) { .pergunta { grid-template-columns: minmax(0, 1fr); padding-block: 26px } } .doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start } .doc-indice { position: sticky; top: 24px; max-height: calc(100dvh - 48px); overflow: auto; padding-right: 6px } .doc-indice h2 { font-size: 13px; letter-spacing: 0; color: var(--color-texto-2); margin-bottom: 8px } .doc-indice ol { list-style: none; display: grid } .doc-indice a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: 10px; font-size: 14px; line-height: 1.35; color: var(--color-texto-2); text-decoration: none; } @media (hover: hover) { .doc-indice a:hover { color: var(--color-texto-1); background: rgb(255 255 255 / 0.04) } } .doc-indice-cel { display: none } .doc-corpo { padding: clamp(22px, 4vw, 56px) } .doc-corpo .texto { max-width: 70ch } .doc-corpo .texto > p:first-child { color: var(--color-texto-2) } .resumo { margin-bottom: clamp(32px, 4vw, 48px); padding: 22px 24px; border-radius: 16px; background: rgb(255 255 255 / 0.035) } .resumo h2 { font-size: 17px; letter-spacing: -0.01em; margin: 0 } .resumo ul { margin-top: 12px; padding-left: 1.2em; display: grid; gap: 8px; font-size: 16px; line-height: 1.55 } .resumo a { color: var(--color-texto-2); display: inline-block; padding-block: 12px; margin-block: -12px } @media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr) } .doc-indice { display: none } .doc-indice-cel { display: block; margin-bottom: 16px } .doc-indice-cel summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; cursor: pointer; list-style: none; font-weight: 600; } .doc-indice-cel summary::-webkit-details-marker { display: none } .doc-indice-cel ol { list-style: none; padding: 0 8px 10px } .doc-indice-cel a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--color-texto-2); text-decoration: none; font-size: 15px } } .ficha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: 0 } .ficha dt, .ficha dd { margin: 0; padding: 16px 0 } .ficha dt { color: var(--color-texto-2); font-size: 15px } .ficha dd { font-size: 16.5px } .ficha dt:not(:first-of-type), .ficha dt:not(:first-of-type) + dd { border-top: 1px solid var(--color-borda) } @media (max-width: 760px) { .ficha { grid-template-columns: minmax(0, 1fr) } .ficha dd { padding-top: 0 } .ficha dt:not(:first-of-type) + dd { border-top: 0 } } .aviso { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-aviso); background: rgb(255 255 255 / 0.04); font-size: 15.5px; line-height: 1.5; } .aviso .ic { margin-top: 2px; color: var(--color-texto-1) } .aviso-erro { background: var(--color-erro-fundo) } .aviso-erro .ic { color: var(--color-erro-texto) } .aviso-ok .ic { color: var(--color-acerto) } .form { display: grid; gap: 10px; max-width: 580px } .form label { font-weight: 600; font-size: 15px } .campo-linha { display: flex; gap: 10px } .campo { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border-radius: var(--radius-campo); border: 1px solid var(--color-borda-2); background: rgb(255 255 255 / 0.04); font-size: 16px; color: var(--color-texto-1); transition: border-color var(--dur-foco) var(--ease-foco), background-color var(--dur-foco) var(--ease-foco); } .campo::placeholder { color: var(--color-texto-2); opacity: 1 } .campo:focus-visible { outline-offset: 0; border-radius: var(--radius-campo); border-color: transparent } .campo[aria-invalid="true"] { border-color: var(--color-erro-campo) } @media (hover: hover) { .campo:hover { border-color: var(--color-borda-hover) } } .campo-dica { color: var(--color-texto-2); font-size: 14px; line-height: 1.5 } .campo-erro { display: flex; gap: 8px; align-items: center; color: var(--color-erro-texto); font-size: 14.5px } .campo-erro .ic { width: 16px; height: 16px } .form .btn { height: 52px; min-width: 170px } @media (max-width: 560px) { .campo-linha { flex-direction: column } .campo-linha .campo { flex: none; width: 100% } .form .btn { align-self: flex-start } } .lista-caixa { padding: clamp(20px, 3vw, 36px); display: grid; gap: 16px } .lista-caixa .aviso { margin: 0 } .estado:focus { outline: none } .erro-404 { min-height: 52vh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center } .erro-cruz { opacity: 0.55 } .erro-cruz svg { width: 100%; max-width: 420px; height: auto; margin-inline: auto } .erro-cruz .cruz-linha { stroke: rgb(237 240 245 / 0.2); stroke-width: 1.4; stroke-dasharray: 3 7; fill: none } .erro-cruz .cruz-estrela { fill: var(--color-texto-1) } .erro-cruz .cruz-acrux { fill: var(--color-destaque) } @media (max-width: 760px) { .erro-404 { grid-template-columns: minmax(0, 1fr) } .erro-cruz { display: none } } .erro-404 .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px } .resumo-sec { white-space: nowrap } @media (max-width: 760px) { .resumo { padding: 18px } } .preco { margin-top: 24px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 10px; max-width: 560px; font-size: 17px } .preco-avista { font-size: 18px } .preco-v { font-size: clamp(40px, 5vw, 56px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums } .acoes-linha { display: flex; flex-wrap: wrap; gap: 12px } @media (max-width: 760px) { .empilha { overflow: visible } .empilha table { min-width: 0 } .empilha thead { display: none } .empilha tr, .empilha th, .empilha td { display: block } .empilha tr { padding: 14px 16px } .empilha th, .empilha td { padding: 2px 0 } .empilha th { padding-bottom: 6px; font-size: 15.5px } .empilha td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--color-texto-2) } .empilha th a, .empilha td a { display: inline-block; padding-block: 12px; margin-block: -7px } .empilha tbody tr + tr > * { border-top: 0 } .empilha tbody tr + tr { border-top: 1px solid var(--color-borda) } }