/*
  Tema Peça — a camada de IDENTIDADE. F-DV4 (ADR-11), celula base-3.

      base.css              primitivas da plataforma
      celulas/base-3.css      grade, ritmo, responsivo
      mm-peca.css        isto aqui

  A hierarquia Editorial tem picos e vales. A abertura ocupa a tela, o meio da
  rolagem tem um respiro que nao vende nada, e o fechamento reencontra o leitor.

  Nenhuma regra abaixo decide grade, largura, direcao de eixo ou posicao: o
  `ProvaDestrutivaTest` recusa cada uma pelo nome sobre as classes da celula.
*/

:root {
  /* Derivado, e por isso NAO e token: nao e decisao de ninguem.
     O que alguem escolhe e emitido (ver ThemeRaiz); o que se calcula fica aqui. */

  --filete: color-mix(in srgb, var(--tinta) 16%, transparent);
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 400;
  line-height: 1.7;
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
h3 { font-family: var(--texto); font-weight: 600; letter-spacing: 0; line-height: 1.35; }

.apoio {
  font-size: calc(.72rem * var(--escala-texto, 1));
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mm-text-eyebrow-color, var(--destaque-texto));
  margin: 0;
}
.conduz { font-size: calc(1.05rem * var(--escala-texto, 1)); color: var(--mm-text-subtitle-color, var(--tinta-fraca)); margin: 0; }
.item p { color: var(--tinta-fraca); margin: 0; font-size: calc(.95rem * var(--escala-texto, 1)); }
.item h3 { margin: 0; }

.topo { background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--filete); }
.marca { font-family: var(--display); font-size: calc(1.15rem * var(--escala-texto, 1)); }
.menu a { font-size: calc(.9rem * var(--escala-texto, 1)); color: var(--tinta-fraca); }
.menu a:hover, .menu a:focus-visible { color: var(--destaque-texto); }

.acao {
  background: var(--mm-cta-primary-default-background, var(--destaque));
  color: var(--mm-cta-primary-default-text, var(--papel));
  border: 1px solid var(--mm-cta-primary-default-border, var(--destaque));
  border-radius: 2px; padding: 14px 24px;
  font-size: calc(.9rem * var(--escala-texto, 1)); font-weight: 600; letter-spacing: .02em; text-align: center;
}
.acao:hover, .acao:focus-visible {
  background: var(--mm-cta-primary-hover-background, var(--escuro));
  border-color: var(--mm-cta-primary-hover-border, var(--escuro));
  color: var(--mm-cta-primary-hover-text, var(--mm-cta-primary-default-text, var(--papel)));
}
.acao--vazada { background: transparent; color: var(--destaque-texto); border-color: var(--filete); }
.acao--vazada:hover, .acao--vazada:focus-visible { background: transparent; color: var(--tinta); border-color: var(--tinta); }

.passo .marcador { font-family: var(--display); font-size: calc(1.5rem * var(--escala-texto, 1)); color: var(--destaque-texto); line-height: 1; }

.campo label { font-size: calc(.82rem * var(--escala-texto, 1)); font-weight: 600; letter-spacing: .04em; }
.campo input, .campo textarea { background: var(--papel); border: 1px solid var(--filete); border-radius: 2px; padding: 12px 14px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--destaque); }

.rodape { background: var(--escuro); color: var(--papel); padding-block: clamp(32px, 5vw, 56px); font-size: calc(.88rem * var(--escala-texto, 1)); }
.rodape a { color: var(--papel); }
.rodape a:hover, .rodape a:focus-visible { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }

h1 { font-size: calc(clamp(2.8rem, 8vw, 5.6rem) * var(--escala-texto, 1)); letter-spacing: -.03em; }
h2 { font-size: calc(clamp(1.9rem, 4.4vw, 3.2rem) * var(--escala-texto, 1)); }

/* A ABERTURA. A mascara e o que torna o texto sobre foto legivel — e o slot
   que a hierarquia 2 trouxe e que autoriza esta composicao. */
.hero--capa { color: var(--papel); }
.hero__mascara { background: linear-gradient(to top, color-mix(in srgb, var(--escuro) 88%, transparent), color-mix(in srgb, var(--escuro) 30%, transparent)); }
.hero--capa .apoio { color: color-mix(in srgb, var(--papel) 80%, transparent); }
.hero--capa .conduz { color: color-mix(in srgb, var(--papel) 82%, transparent); }

/* O VALE. Tipografia grande e nada mais: e o silencio do §3.4. */
.respiro { background: var(--papel-2); }
.respiro .cabeca { text-align: center; }
.respiro h2 { font-style: italic; }

/* O item em destaque do mosaico pesa mais tambem na tipografia — a mesma
   secao desenhada de duas formas na mesma pagina. */
.grade--mosaico > :first-child h3 { font-family: var(--display); font-weight: 500; font-size: calc(1.9rem * var(--escala-texto, 1)); }

.faixa { background: var(--escuro); color: var(--papel); }
.faixa .numero b { font-family: var(--display); font-size: calc(clamp(2.4rem, 5vw, 3.6rem) * var(--escala-texto, 1)); line-height: 1; }
.faixa .numero span { color: color-mix(in srgb, var(--papel) 70%, transparent); font-size: calc(.82rem * var(--escala-texto, 1)); }