/* ==========================================================================
   dio/base.css — Reset do documento, base tipográfica e utilitários de layout

   1) Reset global (html, body, elementos de formulário…): com o CSS legado
      (site_bundle/Bootstrap) fora dos layouts, é esta seção que dá o fundo
      escuro, zera margens e normaliza controles em TODAS as páginas.
   2) Base do conteúdo, escopada em `.dio-page` (raiz de uma página migrada).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Reset global (no lugar do reboot do Bootstrap 4 + site_geral_dark.css)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--dio-bg);
    color: var(--dio-text);
    font-family: var(--dio-font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* herança do tema anterior: todo <div> é contexto de posicionamento (vários
   componentes posicionam filhos absolutos contando com isso) */
div {
    position: relative;
}

[hidden],
template {
    display: none !important;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin: var(--dio-space-5) 0;
    border: 0;
    border-top: 1px solid var(--dio-border-soft);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom: 0;
}

ul {
    list-style: none; /* como no tema anterior: listas com marcador pedem a classe da própria página */
}

b, strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }

a {
    text-decoration: none;
    background-color: transparent;
    color: inherit;
}

img {
    vertical-align: middle;
    border-style: none;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
}

caption { text-align: left; caption-side: bottom; }
th { text-align: inherit; }

label {
    display: inline-block;
    margin-bottom: .5rem;
}

button {
    border-radius: 0;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

input, button, select, optgroup, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

button, input { overflow: visible; }
button, select { text-transform: none; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

textarea {
    overflow: auto;
    resize: vertical;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal;
}

progress { vertical-align: baseline; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

summary {
    display: list-item;
    cursor: pointer;
}

code, kbd, pre, samp {
    font-family: var(--dio-font-mono);
    font-size: 1em;
}

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
}

figure, blockquote {
    margin: 0 0 1rem;
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
    text-decoration-skip-ink: none;
}

/* raiz do layout (antigo .super_container): corta o que vazar na horizontal */
.dio-app {
    width: 100%;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   2) Base do conteúdo (.dio-page)
   -------------------------------------------------------------------------- */
.dio-page {
    background: var(--dio-bg);
    color: var(--dio-text);
    font-family: var(--dio-font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.dio-page *,
.dio-page *::before,
.dio-page *::after {
    box-sizing: border-box;
}

/* :where() zera a especificidade dos seletores de tag: a regra fica com peso de
   uma classe só, então qualquer componente (.dio-eyebrow, .dio-parceiros__label...)
   aplicado a um heading vence sem precisar de seletores compostos. */
.dio-page :where(h1, h2, h3, h4) {
    font-family: var(--dio-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--dio-text);
    margin: 0;
}

.dio-page :where(p) {
    margin: 0;
}

/* Herança da convivência com o CSS legado (que tinha `p, h1..h6 { color: #fff !important }`):
   headings ficam no token de texto e <p> herda a cor do pai. Os componentes que colorem um <p>
   ou <hN> diretamente usam `!important` (ex.: .dio-hero__lead, .dio-card__text) — regra mantida
   para não precisar revisar todas as folhas de página de uma vez. */
.dio-page :where(h1, h2, h3, h4, h5, h6) {
    color: var(--dio-text) !important;
}

.dio-page :where(p) {
    color: inherit !important;
}

/* Links "soltos" (sem classe) ficam no accent. Links que são componentes
   (.dio-btn, .dio-card, .dio-pill...) definem a própria cor, por isso o :not([class])
   — evita que esta regra (mais específica) vença a do componente. */
.dio-page a {
    text-decoration: none;
    transition: color var(--dio-dur) var(--dio-ease);
}

.dio-page a:not([class]) {
    color: var(--dio-accent);
}

.dio-page a:hover {
    text-decoration: none;
}

.dio-page a:not([class]):hover {
    color: var(--dio-accent-strong);
}

.dio-page :focus-visible {
    outline: 2px solid var(--dio-accent);
    outline-offset: 3px;
    border-radius: var(--dio-radius-sm);
}

.dio-page :where(img, svg) {
    max-width: 100%;
}

/* --- container ------------------------------------------------------------
   Mesmos breakpoints, larguras e padding de 15px do .container que o site sempre
   teve (header, rodapé e páginas usam este). */
.dio-container {
    width: 100%;
    max-width: var(--dio-container);
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 576px)  { .dio-container { max-width: 540px; } }
@media (min-width: 768px)  { .dio-container { max-width: 720px; } }
@media (min-width: 992px)  { .dio-container { max-width: 960px; } }
@media (min-width: 1200px) { .dio-container { max-width: var(--dio-container); } }

/* --- seção ------------------------------------------------------------ */
.dio-section {
    padding: var(--dio-space-8) 0;
}

.dio-section--tight {
    padding: var(--dio-space-7) 0;
}

.dio-section--band {
    background: var(--dio-bg-elev);
    border-top: 1px solid var(--dio-border-soft);
    border-bottom: 1px solid var(--dio-border-soft);
}

.dio-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--dio-space-3);
    margin-bottom: var(--dio-space-6);
}

.dio-section__head--center {
    align-items: center;
    text-align: center;
}

.dio-section__head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--dio-space-5);
}

/* text-wrap: balance distribui as linhas por igual quando o título quebra,
   evitando uma última linha com uma palavra só (no markup, ligar também a
   última palavra com &nbsp;). */
.dio-section__title {
    font-size: clamp(26px, 3vw, 34px);
    max-width: 760px;
    text-wrap: balance;
}

.dio-section__subtitle {
    color: var(--dio-text-dim) !important; /* ver nota sobre !important em base.css */
    font-size: 15.5px;
    max-width: 560px;
}

@media (max-width: 767px) {
    .dio-section { padding: var(--dio-space-7) 0; }
    .dio-section--tight { padding: var(--dio-space-6) 0; }
    .dio-section__head { margin-bottom: var(--dio-space-5); }
    .dio-section__head--split {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- acessibilidade / movimento ------------------------------------------- */
.dio-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dio-page *,
    .dio-page *::before,
    .dio-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}