/* ============================================================
   base.css · reset, tipografia, grade e estados globais
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
/* Sem isto o atributo height do HTML vence a largura definida no CSS. */
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

html{scroll-behavior:smooth}

/* Barra de rolagem na cor da marca. `scrollbar-color` cobre Firefox e
   os navegadores novos; o bloco -webkit- cobre Chrome, Edge e Safari,
   que ainda nao leem a propriedade padrao. */
html{scrollbar-color:var(--acento) var(--terreno);scrollbar-width:auto}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--terreno)}
::-webkit-scrollbar-thumb{
  background:var(--acento);
  border:3px solid var(--terreno);
  border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{background:var(--acento-claro)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  background:var(--terreno);
  color:var(--tinta);
  font-family:var(--fonte);
  font-size:var(--t-corpo);
  font-weight:var(--peso-normal);
  line-height:var(--altura-corpo);
  font-feature-settings:"ss01","cv01";
  -webkit-font-smoothing:antialiased;
  /* `clip`, nao `hidden`: corta o que passa da largura sem criar um
     contexto de rolagem, que quebraria o `position:sticky` da cena de
     construcao. Os raios dela nascem fora do quadro e param na borda
     da tela em vez de empurrar a pagina para o lado. */
  overflow-x:clip;
}

/* --- Tipografia ------------------------------------------- */
h1,h2,h3,h4{
  font-weight:var(--peso-medio);
  line-height:var(--altura-titulo);
  letter-spacing:var(--entre-titulo);
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.18}
h4{font-size:var(--t-h4);line-height:1.3;letter-spacing:-.015em}

p{max-width:var(--medida)}
strong{font-weight:var(--peso-forte)}

.display{
  font-size:var(--t-display);
  letter-spacing:var(--entre-display);
  font-weight:var(--peso-medio);
  line-height:.92;
}

.marcador{
  display:inline-flex;align-items:center;gap:var(--e-3);
  font-size:var(--t-marcador);
  font-weight:var(--peso-medio);
  letter-spacing:var(--entre-marcador);
  text-transform:uppercase;
  color:var(--tinta-media);
}
.marcador::before{
  content:"";width:24px;height:1px;background:var(--acento);
  transform-origin:left;
}

.apoio{color:var(--tinta-media)}

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

/* --- Grade e seções --------------------------------------- */
.env{
  width:100%;max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--margem);
}
.secao{padding-block:var(--secao)}
.secao--curta{padding-block:calc(var(--secao) * .6)}
/* A chamada final encosta na seção anterior: duas alturas de seção
   empilhadas abriam um vão que soltava o card do resto da página. */
.secao--colada{padding-top:0}
/* Depois de um bloco escuro a chamada precisa do respiro de volta:
   sem ele o card preto encosta no preto da seção e some. */
.escuro + .secao--colada{padding-top:var(--secao)}
.fio-topo{border-top:1px solid var(--fio)}

/* Cabeça de seção: marcador numerado à esquerda, título ocupando
   a maior parte da linha. A assimetria é do sistema, não do card. */
.cabeca{
  display:grid;
  grid-template-columns:repeat(12,var(--coluna));
  column-gap:clamp(16px,2.2vw,32px);
  row-gap:var(--e-5);
  align-items:end;
  padding-top:var(--e-6);
}
.cabeca__titulo{grid-column:1 / -1;max-width:18ch}
.cabeca__apoio{grid-column:1 / -1;color:var(--tinta-media);max-width:46ch}
@media (min-width:900px){
  .cabeca__titulo{grid-column:3 / 8}
  /* A linha de apoio encosta na margem direita e alinha por ela,
     fechando o bloco contra a borda da grade. A medida sai porque
     a quebra de linha é decidida na redação, não pelo limite. */
  .cabeca__apoio{grid-column:8 / 13;padding-bottom:var(--e-2);margin-left:auto;text-align:right;max-width:none}
  /* Sem o marcador numerado, título e apoio ocupam meia grade cada. */
  .cabeca__titulo:first-child{grid-column:1 / 7;max-width:18ch}
  .cabeca__titulo:first-child ~ .cabeca__apoio{grid-column:7 / 13}
}

/* --- Acessibilidade --------------------------------------- */
:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:3px;
  border-radius:var(--raio-1);
}
.escuro :focus-visible{outline-color:var(--acento-claro)}

.pular{
  position:absolute;left:var(--e-4);top:-100px;z-index:200;
  background:var(--tinta);color:var(--tinta-invertida);
  padding:var(--e-3) var(--e-5);
  transition:top var(--t-micro) var(--curva-rapida);
}
.pular:focus{top:var(--e-4)}

.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Entrada por scroll -----------------------------------
   Cada grupo define suas próprias variáveis, então irmãos nunca
   entram com a mesma distância, duração e curva. */
.entra{
  --entra-y:22px; --entra-t:var(--t-medio); --entra-d:0ms;
  --entra-e:var(--curva-saida);
  opacity:0;
  transform:translate3d(0,var(--entra-y),0);
  transition:opacity var(--entra-t) var(--entra-e) var(--entra-d),
             transform var(--entra-t) var(--entra-e) var(--entra-d);
}
.entra.vista{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .entra{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* --- Utilidades de ritmo ----------------------------------
   Existem para que nenhum style inline solto precise aparecer
   no HTML. Escala de espaço, nunca valor cru. */
/* Quebra de linha decidida na redação: vale só onde o bloco tem a
   largura prevista. Abaixo disso o texto volta a quebrar sozinho. */
br.quebra{display:none}
@media (min-width:900px){br.quebra{display:inline}}

.acima-5{margin-top:var(--e-5)}
.acima-6{margin-top:var(--e-6)}
.acima-7{margin-top:var(--e-7)}
.acima-8{margin-top:var(--e-8)}
.acima-9{margin-top:var(--e-9)}