/* Dravina 2 · site.css (parte A) · estilos da home.
   Tokens e fontes: css/base.css (não mexer). Aqui só layout. Nenhuma cor fora dos tokens.
   Celular primeiro; quebras pelo conteúdo: 700 (tablet), 900 (grade), 1100 (1ª tela em mostrador). */

:root {
  color-scheme: light;
  --cont: min(100% - 2 * var(--margem), 1312px);
  --h-cena: clamp(500px, calc(100vh - 250px), 640px);
  --f-fixa: 800;
}
:root[data-tema="noite"] { color-scheme: dark; }

html { scroll-behavior: smooth; scrollbar-color: var(--secundario) var(--fundo); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--sodio); color: var(--breu); }
input, button, select, textarea { font: inherit; color: inherit; caret-color: var(--texto); }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
button { cursor: pointer; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 12px 16px; border-radius: var(--raio);
  background: var(--texto); color: var(--fundo); font-weight: 500; text-decoration: none; }
.pular:focus { top: 8px; }
.cont { width: var(--cont); margin-inline: auto; }
.nota { font-size: var(--t-pequeno); line-height: 1.5; color: var(--secundario); }
.texto { max-width: 62ch; text-wrap: pretty; }
.rot { display: block; margin-bottom: 6px; font: 400 0.8125rem/1.25 var(--f-medida); font-stretch: 87.5%; color: var(--secundario); }

h1, h2, h3 { font-family: var(--f-frase); font-weight: 800; text-wrap: balance; }
h2 { font-size: var(--t-secao); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--t-grande); line-height: 1.25; }

/* ---------- símbolo D-24 e logo ---------- */
.d24 { display: inline-block; flex: none; width: calc(var(--px, 24px) * 0.715); height: var(--px, 24px); line-height: 0; }
.d24 svg { width: 100%; height: 100%; display: block; }
.marca { display: inline-flex; align-items: center; gap: calc(var(--px) * 0.2); min-height: 44px; --px: 24px; color: inherit; text-decoration: none; }
/* logotipo em curva: capitais = 50% da altura do D (DESIGN.md v2) */
.marca .nome { flex: none; height: calc(var(--px) * 0.5); width: calc(var(--px) * 0.5 * 7.07); fill: currentColor; }

/* ---------- botões ---------- */
.btn, .botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 20px; border: 1.5px solid var(--texto);
  border-radius: var(--raio); background: var(--texto); color: var(--fundo); font: 700 1.0625rem/1.25 var(--f-frase); text-align: center; text-decoration: none;
  transition: transform var(--d-micro) var(--e-entra), background-color var(--d-micro) linear, color var(--d-micro) linear; }
.btn:active, .botao:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"], .botao[aria-disabled="true"] { opacity: 0.5; cursor: progress; }
.btn.vazado, .botao.botao-secundario { background: transparent; color: var(--texto); }
@media (hover: hover) {
  .btn:hover, .botao:hover { background: transparent; color: var(--texto); text-decoration: none; }
  .btn.vazado:hover, .botao.botao-secundario:hover { background: var(--texto); color: var(--fundo); }
}
/* o anel de foco usa currentColor; nos botões cheios o texto tem a cor do fundo da página e o anel sumia */
.btn:focus-visible, .botao:focus-visible, .pular:focus-visible { outline-color: var(--texto); }
.btn-linha { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.tag { display: inline-block; padding: 1px 6px; border: 1px solid currentColor; border-radius: 2px; font: 400 0.75rem/1.4 var(--f-medida); font-stretch: 87.5%; color: var(--secundario); white-space: nowrap; }

/* ---------- topo ---------- */
.barra { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; padding-inline: var(--margem); }
.barra .marca { margin-right: auto; }
.acoes { display: flex; align-items: center; gap: 4px; }
.status { order: 3; flex: 0 0 100%; margin: -4px 0 6px; font: 400 0.8125rem/1.35 var(--f-medida); font-stretch: 87.5%; color: var(--secundario); }
.status .st-rec { display: none; }
.btn-tema { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 6px;
  border: 0; border-radius: var(--raio); background: none; color: var(--texto); }
.btn-tema svg { width: 18px; height: 18px; }
.btn-tema .tt { display: none; font: 400 0.8125rem/1 var(--f-medida); font-stretch: 87.5%; color: var(--secundario); }
:root[data-tema="noite"] .btn-tema .tt .n, :root:not([data-tema="noite"]) .btn-tema .tt .d {
  color: var(--texto); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.35em; }
.wa { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 500; font-size: 0.875rem; color: var(--texto); }
.wa .so-desk { display: none; }

/* ---------- 1ª tela ---------- */
.tela { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
#cena { position: relative; height: 160px; overflow: hidden; isolation: isolate; }
#cena > canvas, #cena > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* reserva sem JS: D-24 liso, só some quando o módulo da cena monta algo dentro */
#cena:empty { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.6 40'%3E%3Cg fill='%230E1114'%3E%3Crect width='8' height='40'/%3E%3Cpath d='M8.6 0A20 20 0 0 1 8.6 40V32A12 12 0 0 0 8.6 8Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: auto 62%; }
:root[data-tema="noite"] #cena:empty { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.6 40'%3E%3Cg fill='%23F1F2F3'%3E%3Crect width='8' height='40'/%3E%3Cpath d='M8.6 0A20 20 0 0 1 8.6 40V32A12 12 0 0 0 8.6 8Z'/%3E%3C/g%3E%3C/svg%3E"); }

.cabeca { width: min(100% - 2 * var(--margem), 720px); margin-inline: auto; padding-top: 14px; }
h1 { font-size: var(--t-titulo); line-height: 1.04; letter-spacing: -0.02em; }
@media (max-width: 480px) { h1 { font-size: 2rem; } .amostra-form .btn { font-size: 1rem; min-height: 56px; } }
.sub { margin-top: 8px; font-size: 1rem; line-height: 1.5; max-width: 52ch; text-wrap: pretty; }

.amostra-form, #amostra-lista, #amostra-saida { width: min(100% - 2 * var(--margem), 720px); margin-inline: auto; }
.amostra-form { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas: "ramo porte" "prob prob" "btn btn" "micro micro"; align-items: end; padding-top: 14px; }
.g-ramo { grid-area: ramo; } .g-porte { grid-area: porte; } .g-prob { grid-area: prob; }
.amostra-form .btn { grid-area: btn; width: 100%; }
.amostra-form .micro { grid-area: micro; font-size: 0.875rem; line-height: 1.4; color: var(--secundario); max-width: 60ch; }
.grupo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.grupo > label { font: 500 0.875rem/1.3 var(--f-frase); }
.campo { display: block; width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--texto); border-radius: var(--raio);
  background: var(--fundo); color: var(--texto); font: 500 1.0625rem/1.3 var(--f-frase); }
.campo::placeholder { color: var(--secundario); opacity: 1; }
.campo[aria-invalid="true"] { border-color: var(--ocorrencia); }
.sel { position: relative; display: block; }
.sel select { appearance: none; -webkit-appearance: none; padding-left: 12px; padding-right: 34px; text-overflow: ellipsis; }
.sel select:required:invalid { color: var(--secundario); }
.sel select option { color: var(--texto); background: var(--fundo); }
.sel svg { position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; color: var(--texto); }
textarea.campo { padding: 13px 14px; resize: vertical; min-height: 52px; max-height: 168px; field-sizing: content; }
/* celular: os dois selects dividem a linha por igual, para "De 50 a 200" e "Incorporadora" caberem sem reticências */
@media (max-width: 480px) {
  .amostra-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sel select { padding-right: 30px; font-size: 1rem; }
}

/* lista da amostra, na ordem em que o amostra.js escreve: li.lin > time.h + div.c > span.v + span.mini.dec */
#amostra-lista { margin-top: 20px; }
#amostra-lista:empty::before { content: "As tarefas das próximas 24 horas aparecem aqui, cada uma na hora em que acontece."; display: block;
  padding: 12px 0; border-top: 1px solid var(--linha); font-size: 0.9375rem; line-height: 1.45; color: var(--secundario); }
#amostra-lista > li { display: grid; grid-template-columns: 5.2ch minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha);
  font-size: 0.9375rem; line-height: 1.45; }
#amostra-lista > li:last-child { border-bottom: 1px solid var(--linha); }
:where(#amostra-lista > li > time) { color: var(--secundario); }
#amostra-lista > li > time { align-self: start; justify-self: start; font-size: 0.8125rem; line-height: 1.7; } /* a faixa do "agora" cobre só a hora, não a altura do cartão */
#amostra-lista .v { font-weight: 800; }
#amostra-lista .c { min-width: 0; }

/* estado e erro que o amostra.js acrescenta no fim do formulário */
.amostra-estado, .amostra-erro { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.45; }
.amostra-estado:empty, .amostra-erro:empty { display: none; }
.amostra-estado { color: var(--secundario); }
.amostra-erro { display: flex; gap: 8px; align-items: baseline; color: var(--ocorrencia); font-weight: 500; }
.amostra-erro::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; font: 800 0.75rem/1 var(--f-frase); }

#amostra-saida:not(:empty) { margin-top: 16px; }
.amostra-titulo { font-weight: 800; }
.amostra-resumo { font-size: var(--t-grande); line-height: 1.45; max-width: 60ch; }
.amostra-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.amostra-botoes .botao { flex: 1 1 220px; }

@media (min-width: 700px) {
  .barra { flex-wrap: nowrap; justify-content: space-between; }
  .barra .marca { margin-right: 0; }
  .status { order: 0; flex: 0 1 auto; margin: 0; }
  .btn-tema .tt { display: inline; }
  #cena { height: 300px; }
  .cabeca { padding-top: 24px; }
  .sub { font-size: 1.1875rem; line-height: 1.5; margin-top: 12px; }
  .amostra-form { padding-top: 24px; }
  .amostra-form .btn { width: auto; justify-self: start; }
  .campo { min-height: 56px; }
}

/* ---------- 1ª tela em mostrador: computador ---------- */
@media (min-width: 1100px) {
  :root { --h-cena: clamp(340px, calc(100vh - 440px), 480px); }
  .barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; width: var(--cont); margin-inline: auto; padding: 0; }
  .barra .marca { --px: 28px; justify-self: start; }
  .status { justify-self: center; font-size: 0.8125rem; text-align: center; }
  .status .st-rec { display: inline; }
  .acoes { justify-self: end; gap: 20px; }
  .wa { min-height: 40px; padding: 0 18px; border: 1.5px solid var(--texto); border-radius: var(--raio); }
  .wa .so-desk { display: inline; white-space: pre; }
  @media (hover: hover) { .wa:hover { background: var(--texto); color: var(--fundo); text-decoration: none; } }

  .tela { grid-template-rows: auto var(--h-cena) auto auto; }
  .cabeca { grid-row: 1; width: var(--cont); padding: 8px 0 24px; }
  h1 { font-size: clamp(2.5rem, 4.1vw, 4rem); }
  .sub { font-size: 1.1875rem; line-height: 1.45; max-width: none; margin-top: 8px; }
  #cena { grid-row: 2; grid-column: 1; height: auto; }

  /* tarefas em volta do D: coluna da esquerda e da direita, D no meio (46% da largura), por cima do palco */
  #amostra-lista { grid-row: 2; grid-column: 1; align-self: stretch; justify-self: center; width: var(--cont); margin: 0; z-index: 4; pointer-events: none;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-items: center; }
  #amostra-lista:empty::before { content: none; }
  #amostra-lista > li { pointer-events: auto; grid-column: 1; justify-self: end; width: min(100%, 320px); padding: 8px 12px; border: 1px solid var(--linha);
    background: var(--fundo); background: color-mix(in srgb, var(--fundo) 90%, transparent);
    grid-template-columns: minmax(0, 1fr) auto; text-align: right; font-size: 0.875rem; line-height: 1.4; }
  #amostra-lista > li:last-child { border-bottom: 1px solid var(--linha); }
  #amostra-lista > li > time { order: 2; }
  #amostra-lista > li > div { order: 1; }
  #amostra-lista > li:nth-child(even) { grid-column: 3; justify-self: start; text-align: left; grid-template-columns: auto minmax(0, 1fr); }
  #amostra-lista > li:nth-child(even) > time { order: 0; }

  /* o formulário é a faixa do chão do palco, colada na base da cena */
  .amostra-form { grid-row: 3; grid-column: 1; width: 100%; margin: 0; padding: 16px calc((100% - var(--cont)) / 2) 24px; gap: 12px;
    grid-template-columns: 220px 190px minmax(0, 1fr); grid-template-areas: "ramo porte prob" "btn btn micro"; border-top: 1px solid var(--linha); }
  .amostra-form .btn { width: 100%; min-height: 56px; white-space: nowrap; align-self: start; }
  .amostra-form .micro { align-self: center; max-width: 64ch; }
  textarea.campo { min-height: 56px; max-height: 120px; }

  #amostra-saida { grid-row: 4; justify-self: center; width: var(--cont); }
  #amostra-saida > * { max-width: 760px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  #amostra-lista > li { padding: 6px 10px; font-size: 0.8125rem; line-height: 1.3; }
  #amostra-lista > li > time { font-size: 0.75rem; line-height: 1.5; }
  #amostra-lista .mini { margin-top: 2px; font-size: 0.75rem; line-height: 1.4; }
}

/* ---------- blocos de conteúdo ---------- */
.bloco { border-top: 1px solid var(--linha); padding: 64px 0; } /* degraus em px: o antes era clamp(64px, 9vw, 120px) */
@media (min-width: 700px) { .bloco { padding: 80px 0; } }
@media (min-width: 1000px) { .bloco { padding: 104px 0; } }
@media (min-width: 1330px) { .bloco { padding: 120px 0; } }
.cab-bloco { display: grid; gap: 16px 24px; margin-bottom: clamp(32px, 5vw, 56px); }
.cab-bloco .intro { max-width: 60ch; text-wrap: pretty; }
.cab-bloco .intro p + p { margin-top: 12px; }
@media (min-width: 900px) {
  .cab-bloco { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .cab-bloco h2 { grid-column: 1 / 8; }
  .cab-bloco .intro { grid-column: 8 / 13; }
}

/* 2 · Relatório das 7h */
#relatorio-app { min-height: 420px; }
#relatorio-app:empty::before { content: "Montando o relatório de exemplo…"; font: 400 0.8125rem/1.4 var(--f-medida); font-stretch: 87.5%; color: var(--secundario); }

/* 3 · A equipe */
.equipe { border-top: 1.5px solid var(--texto); }
.equipe-cab { display: none; }
.agente { display: grid; gap: 14px 24px; padding: 24px 0; border-bottom: 1px solid var(--linha); }
.verbo { font-size: clamp(1.625rem, 3vw, 1.875rem); line-height: 1.05; letter-spacing: -0.01em; }
.agente p + p { margin-top: 8px; }
.agente .faz p:first-of-type, .agente .chama p { max-width: 52ch; text-wrap: pretty; }
.agente .nota { max-width: 52ch; }
.legenda-equipe { margin-top: 24px; max-width: 62ch; }
.legenda-equipe .decisao { font-family: var(--f-medida); font-stretch: 87.5%; font-size: 0.875rem; color: var(--texto); }
@media (min-width: 900px) {
  .equipe-cab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--linha);
    font: 400 0.8125rem/1.25 var(--f-medida); font-stretch: 87.5%; color: var(--secundario); }
  .equipe-cab span:nth-child(1) { grid-column: 3 / 8; }
  .equipe-cab span:nth-child(2) { grid-column: 8 / 13; }
  .agente { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 28px 0; align-items: start; }
  .agente .verbo { grid-column: 1 / 3; }
  .agente .faz { grid-column: 3 / 8; }
  .agente .chama { grid-column: 8 / 13; }
  .agente .rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
}

/* 4 · Fábrica */
.fabrica-grade { display: grid; gap: 32px; }
.pecas { border-top: 1.5px solid var(--texto); }
.pecas li { padding: 14px 0; border-bottom: 1px solid var(--linha); font-weight: 500; }
.pecas li span { display: block; font-weight: 400; font-size: var(--t-pequeno); color: var(--secundario); }
@media (min-width: 900px) {
  .fabrica-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .fabrica-grade .fabrica-texto { grid-column: 1 / 7; }
  .fabrica-grade .pecas-bloco { grid-column: 8 / 13; }
}

/* 5 · Estúdio */
.estudio-grade { display: grid; gap: 32px; }
.fachada img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--linha); }
.fachada figcaption { margin-top: 12px; }
.caso h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.2; }
.medidas { margin-top: 16px; border-top: 1.5px solid var(--texto); }
.medidas li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.medidas .valor { font: 700 1.5rem/1.1 var(--f-medida); font-stretch: 100%; font-variant-numeric: tabular-nums; }
.caso .como { margin-top: 20px; }
@media (min-width: 900px) {
  .estudio-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .estudio-grade .fachada { grid-column: 1 / 8; }
  .estudio-grade .caso { grid-column: 9 / 13; }
}

/* 6 · Casos */
.confid { font-size: var(--t-grande); line-height: 1.4; font-weight: 500; max-width: 46ch; }
.camadas { border-top: 1.5px solid var(--texto); }
.camada { display: grid; gap: 12px 24px; padding: 28px 0; border-bottom: 1px solid var(--linha); }
.camada h3 { font-size: 1.375rem; line-height: 1.15; }
.camada p { max-width: 60ch; text-wrap: pretty; }
.camada .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.subcasos > li + li { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linha); }
.subcasos h4 { font: 700 var(--t-corpo) / 1.3 var(--f-frase); }
.subcasos p { margin-top: 4px; }
.subcasos .em-breve { margin-top: 8px; }
@media (min-width: 900px) {
  .camada { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: 32px 0; }
  .camada h3 { grid-column: 1 / 4; }
  .camada .corpo { grid-column: 4 / 11; }
  .camada .link { grid-column: 11 / 13; justify-self: end; text-align: right; }
}

/* 7 · Método */
.passos { display: grid; gap: 0; }
.passo { position: relative; padding: 24px 0 28px; border-top: 1.5px solid var(--texto); }
.passo::before { content: ""; position: absolute; left: 0; top: -5px; width: 8px; height: 8px; background: var(--texto); }
.passo .duracao { display: block; font: 700 1.125rem/1.2 var(--f-medida); font-stretch: 100%; }
.passo h3 { margin-top: 8px; font-size: 1.625rem; line-height: 1.1; }
.passo p { margin-top: 10px; max-width: 46ch; text-wrap: pretty; }
.passo .preco { font-weight: 500; }
.passo .preco .medida { font-weight: 700; }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .passo { padding-right: 8px; }
}

/* 8 · Rede */
.rede-grade { display: grid; gap: 32px; }
.lockup { display: grid; gap: 14px; align-content: center; min-height: 220px; padding: 32px; border: 1px solid var(--texto); }
.lockup .marca-parceiro { font: 800 clamp(2rem, 5vw, 3.25rem) / 1 var(--f-frase); letter-spacing: -0.01em; }
.lockup .por { display: inline-flex; align-items: center; gap: 8px; font: 500 0.9375rem/1 var(--f-frase); color: var(--secundario); }
.lockup .por .d24 { --px: 14px; color: var(--secundario); }
.lockup .tag { justify-self: start; }
@media (min-width: 900px) {
  .rede-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .rede-grade .rede-texto { grid-column: 1 / 7; }
  .rede-grade .lockup { grid-column: 8 / 13; }
}

/* 9 · Confiança */
.regras { border-top: 1.5px solid var(--texto); }
.regra { display: grid; gap: 8px 24px; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.regra h3 { font-size: 1.5rem; line-height: 1.15; }
.regra p { max-width: 62ch; text-wrap: pretty; }
@media (min-width: 900px) {
  .regra { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 26px 0; }
  .regra h3 { grid-column: 1 / 4; }
  .regra p { grid-column: 4 / 11; }
}

/* ---------- rodapé: sempre escuro (a casa da marca é escura) ---------- */
.rodape { --fundo: var(--breu); --texto: var(--luz); --secundario: var(--passado-noite); --linha: var(--madrugada);
  background: var(--fundo); color: var(--texto); padding-block: clamp(56px, 8vw, 104px) 32px; }
.rodape ::selection { background: var(--sodio); color: var(--breu); }
.assinatura { font: 800 var(--t-titulo) / 1.04 var(--f-frase); letter-spacing: -0.02em; text-wrap: balance; }
.rodape .btn-linha { margin-top: 32px; }
.rodape-base { display: grid; gap: 32px; margin-top: clamp(48px, 7vw, 88px); padding-top: 32px; border-top: 1px solid var(--linha); }
.rodape-base .marca { --px: 32px; }
.rodape-base p, .rodape-base li { font-size: var(--t-pequeno); line-height: 1.5; }
.rodape-base ul { display: grid; gap: 4px; }
.rodape-base a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape-base .nota { color: var(--secundario); }
.rodape-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.rodape-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-pequeno); color: var(--secundario); }
@media (min-width: 900px) {
  .rodape-base { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .rodape-base .col-marca { grid-column: 1 / 5; }
  .rodape-base .col-links { grid-column: 5 / 9; }
  .rodape-base .col-contato { grid-column: 9 / 13; }
}
.caso .nota-caso { margin-top: 12px; }
.rodape-base .col-marca .nota { margin-top: 12px; }
.rodape-nav { margin-top: 24px; }
.assinatura span { white-space: nowrap; }
.status { visibility: hidden; }
:root[data-relogio] .status { visibility: visible; }