/* ooptIA · Web.App — base: fontes locais, reset, tipografia, foco, movimento reduzido e utilitários de layout.
   Depende de tokens.css. Doc 08: §2.2 (fontes), §3 (visões), §10 (movimento), §11 (foco), §12 (fontes embutidas).
   Utilitários g2, g3, split, col, rowx = mockups/base.css (→ OoDuasColunas, doc 08 §13). */

/* ---------- fontes (woff2, só latinos, só os pesos usados; nada de Google Fonts) ---------- */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-latin-600.woff2") format("woff2"); 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: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-latin-700.woff2") format("woff2"); 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: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/sora-latin-800.woff2") format("woff2"); 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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400.woff2") format("woff2"); 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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600.woff2") format("woff2"); 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: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700.woff2") format("woff2"); 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; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: var(--tipoCorpo);
    font-feature-settings: var(--numerosTabulares);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
svg { overflow: visible; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ---------- tipografia ---------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--fonteTitulo); font-weight: 700; line-height: var(--alturaLinhaTitulo); letter-spacing: var(--letraTitulo); }
h1 { font: var(--tipoSaudacao); letter-spacing: var(--letraTitulo); }
h2 { font: var(--tipoTituloTela); letter-spacing: var(--letraTitulo); }
h3 { font: var(--tipoTituloCartao); letter-spacing: var(--letraTitulo); }
a { color: var(--primariaTexto); }
small { font: var(--tipoLegenda); }
kbd {
    font: var(--tipoLegenda);
    border: var(--bordaPadrao); border-radius: var(--r5);
    padding: 0 var(--e6); background: var(--superficie); color: var(--textoSuave);
}
::selection { background: var(--primariaSuave); color: var(--texto); }

/* ---------- foco visível (§11): anel de 2px primária, afastado 2px ---------- */
:focus { outline: none; }
:focus-visible { outline: var(--anelFoco); outline-offset: var(--anelFocoAfastamento); }

/* ---------- acessibilidade ---------- */
/* top/left 0: sem eles o texto fica onde estaria no fluxo; fora de um bloco posicionado, ele se prende à página e a
   estica (segunda barra de rolagem no lado do Otto, com o menu indo embora ao rolar). Preso ao canto, nunca estica. */
.sr-only {
    position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--e12); top: -60px; z-index: var(--camadaAviso);
    background: var(--primaria); color: var(--sobrePrimaria); padding: var(--e8) var(--e16);
    border-radius: var(--r10); font: var(--tipoBotao); text-decoration: none;
}
.skip-link:focus { top: var(--e12); }

/* ---------- movimento reduzido (§10) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- utilitários de layout ---------- */
.muted { color: var(--textoSuave); }
.sp { margin-left: auto; }
.rowx { display: flex; align-items: center; gap: var(--e10); min-width: 0; }
.rowx.wrap { flex-wrap: wrap; }
.rowx > b { white-space: nowrap; }
.col { display: flex; flex-direction: column; gap: var(--entreBlocos); min-width: 0; }
.g2, .g3 { display: grid; gap: var(--entreBlocos); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) var(--colunaResumo); gap: var(--entreBlocos); align-items: start; }

/* tablet: coluna de resumo de 290 */
@media (min-width: 600px) and (max-width: 1099.98px) {
    .split { grid-template-columns: minmax(0, 1fr) var(--colunaResumoTablet); }
}
/* celular: uma coluna */
@media (max-width: 599.98px) {
    .g2, .g3, .split { grid-template-columns: minmax(0, 1fr); }
    .col, .g2, .g3, .split { gap: var(--entreBlocosCelular); }
}