@charset "UTF-8";
/* =====================================================================
   FRANÇA SIMÕES ADVOCACIA — versão 2
   Direção: "noite e osso".

   A página é lida em três atos, e o fundo diz de quem é a voz:
     · fundo escuro  → o escritório e a pessoa que chega;
     · fundo claro   → a lei sendo explicada.
   As duas passagens entre os atos são degradês com uma frase — o corte de
   cena, não um enfeite.

   O ouro da marca aparece como latão: filete, régua, numeral e foco. Nunca
   como gradiente metálico. O sistema gráfico recorrente é a citação legal
   em fonte monoespaçada — é o que este escritório manuseia o dia inteiro.

   ÍNDICE
   01. Fontes
   02. Fichas técnicas (tokens)
   03. Reinício e base
   04. Tipografia
   05. Peças recorrentes
   06. Cabeçalho
   07. Ato I — a cena de abertura
   08. Ato I — o que chega ao escritório
   09. Passagens entre atos
   10. Ato II — o relógio do INSS
   11. Ato II — tabela de prazos
   12. Ato II — áreas em lajes empilhadas
   13. Ato II — dúvidas
   14. Ato III — o advogado
   15. Ato III — atendimento
   16. Ato III — contato
   17. Rodapé
   18. Movimento
   19. Telas menores
   20. Movimento reduzido, alto contraste e impressão
   ===================================================================== */

/* =====================================================================
   01. FONTES
   Do próprio domínio, recortadas por unicode-range, declaradas aqui no
   topo para não custar uma requisição a mais bloqueando a pintura.

   Libre Caslon Display — a Caslon é a letra da impressão jurídica de
   língua inglesa desde o século XVIII. Aqui ela faz o papel de voz: só
   em tamanho grande, onde o contraste do desenho aparece.
   Instrument Sans — grotesca contemporânea, ligeiramente estreita, para
   o texto corrido e a interface.
   IBM Plex Mono — a máquina: datas, contagens, artigos de lei, etiquetas.
   ===================================================================== */
@font-face {
  font-family: 'Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caslon-display-400-latin.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: 'Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caslon-display-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-400-700-latin.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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-latin.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: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =====================================================================
   02. FICHAS TÉCNICAS
   Cada cor foi medida contra o fundo real em que é usada. As razões
   anotadas são as verificadas (AA pede 4,5:1 no texto normal, 3:1 no
   texto grande e nos elementos gráficos).
   ===================================================================== */
:root {
  /* --- noite --- */
  --breu:      #060d13;
  --noite:     #0b141c;
  --noite-2:   #111e27;
  --claro:     #f4efe6;   /* 17,06:1 no breu */
  --claro-2:   #9eaeb9;   /*  8,57:1 no breu · 7,43:1 no noite-2 */

  /* --- osso --- */
  --osso:      #f4efe6;
  --osso-2:    #eae3d6;
  --osso-3:    #ded5c4;
  --tinta:     #0e1920;   /* 15,56:1 no osso */
  --tinta-2:   #4c5c67;   /*  6,04:1 no osso · 5,42:1 no osso-2 */

  /* --- latão --- */
  --latao:     #d6ae5a;   /*  9,36:1 no breu — texto e filete no escuro */
  --latao-2:   #7a5f17;   /*  5,27:1 no osso — texto no claro */
  --latao-3:   #b99433;   /* o ouro da marca, só preenchimento */

  /* --- sinal --- */
  --alerta:    #e8886a;   /*  6,59:1 no noite-2 */
  --alerta-2:  #9e3b1e;   /*  5,92:1 no osso */

  /* --- linhas --- */
  --fio-claro: rgba(244, 239, 230, .14);
  --fio-forte: rgba(244, 239, 230, .28);
  --fio-osso:  #ded5c4;

  /* --- tipografia --- */
  --voz:   'Caslon Display', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --texto: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --maq:   'Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  --d1:      clamp(2.85rem, 1.35rem + 5.6vw, 5.75rem);
  --d2:      clamp(2rem, 1.35rem + 2.8vw, 3.75rem);
  --d3:      clamp(1.7rem, 1.25rem + 1.9vw, 2.85rem);
  --h3:      clamp(1.125rem, 1.04rem + 0.42vw, 1.4rem);
  --corpo:   clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);
  --corpo-2: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --maq-tam: clamp(0.6875rem, 0.655rem + 0.14vw, 0.8125rem);

  /* --- medidas --- */
  --faixa:          78rem;
  --faixa-estreita: 50rem;
  --margem:         clamp(1.25rem, 4.2vw, 4rem);
  --respiro:        clamp(4rem, 2.4rem + 6vw, 9rem);
  --masto-h:        4.75rem;
  --masto-min:      4rem;

  /* --- movimento --- */
  --lento:  .9s cubic-bezier(.16, 1, .3, 1);
  --medio:  .5s cubic-bezier(.16, 1, .3, 1);
  --curto:  .25s cubic-bezier(.22, .61, .36, 1);

  --foco: var(--latao);
}


/* =====================================================================
   03. REINÍCIO E BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masto-min) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--breu);
  color: var(--claro);
  font-family: var(--texto);
  font-size: var(--corpo);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:where(h1, h2, h3, p, ul, ol, figure, table, fieldset) { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }

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

.visual-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: var(--margem); top: 0;
  z-index: 300;
  transform: translateY(-130%);
  padding: .8rem 1.4rem;
  background: var(--latao);
  color: var(--breu);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--curto);
}
.pular:focus { transform: translateY(.5rem); }


/* =====================================================================
   04. TIPOGRAFIA
   ===================================================================== */
.ato__titulo,
.cena__titulo,
.laje__titulo,
.passagem__frase,
.rodape__nome {
  font-family: var(--voz);
  font-weight: 400;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.cena__titulo { font-size: var(--d1); line-height: .96; }
.ato__titulo  { font-size: var(--d2); line-height: 1.02; }
.laje__titulo { font-size: var(--d3); line-height: 1.02; }

p { text-wrap: pretty; }
strong { font-weight: 700; }
em { font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }


/* =====================================================================
   05. PEÇAS RECORRENTES
   ===================================================================== */
.faixa {
  width: 100%;
  max-width: var(--faixa);
  margin-inline: auto;
  padding-inline: var(--margem);
}
.faixa--estreita { max-width: var(--faixa-estreita); }

/* --- etiqueta: o rótulo de máquina que abre cada bloco ---------------- */
.etiqueta {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.35rem;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--latao);
}
.etiqueta__marca {
  flex: none;
  width: 2.75rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
}
.ato--claro .etiqueta { color: var(--latao-2); }

/* --- botões ----------------------------------------------------------- */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .8rem 1.75rem;
  border: 1px solid transparent;
  font-size: var(--corpo-2);
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--curto), border-color var(--curto), background-color var(--curto);
}
/* A microinteração é um preenchimento que sobe: fica no pseudo-elemento
   para que só transform e opacity animem. */
.botao::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(100%);
  transition: transform var(--medio);
}
.botao--latao {
  background: var(--latao);
  border-color: var(--latao);
  color: var(--breu);            /* 9,36:1 */
}
.botao--latao::before { background: var(--claro); }
.botao--fantasma {
  border-color: var(--fio-forte);
  color: var(--claro);
}
.botao--fantasma::before { background: var(--claro); }
.ato--claro .botao--fantasma { border-color: var(--tinta); color: var(--tinta); }
.ato--claro .botao--fantasma::before { background: var(--tinta); }

@media (hover: hover) {
  .botao:hover::before { transform: translateY(0); }
  .botao--latao:hover { color: var(--breu); }
  .botao--fantasma:hover { color: var(--breu); border-color: var(--claro); }
  .ato--claro .botao--fantasma:hover { color: var(--osso); border-color: var(--tinta); }
}

/* --- tiras: lista horizontal de rótulos ------------------------------- */
.tiras {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--claro-2);
}
.tiras li { display: flex; align-items: center; gap: 1.5rem; }
.tiras li:not(:last-child)::after {
  content: '';
  width: 4px; height: 4px;
  background: var(--latao);
  transform: rotate(45deg);
  margin-right: -.75rem;
}
/* Em coluna estreita a lista horizontal quebrava deixando um losango
   solto no início da linha. Empilhada, cada selo ganha um filete. */
.tiras--empilhado {
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fio-claro);
}
.tiras--empilhado li { gap: .85rem; }
.tiras--empilhado li::before {
  content: '';
  flex: none;
  width: 1.1rem; height: 1px;
  background: var(--latao);
}
.tiras--empilhado li:not(:last-child)::after { display: none; }

/* --- lista com marcador de filete ------------------------------------- */
.lista { display: grid; gap: .75rem; margin-block: 1rem; }
.lista li { position: relative; padding-left: 1.6rem; }
.lista li::before {
  content: '';
  position: absolute;
  left: 0; top: .78em;
  width: .8rem; height: 1px;
  background: var(--latao-2);
}

/* --- aparte ----------------------------------------------------------- */
.aparte {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--osso);
  border-left: 2px solid var(--latao-3);
}
.aparte--corrige { border-left-color: var(--alerta-2); }
.aparte__titulo {
  margin-bottom: .5rem;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--latao-2);
}
.aparte--corrige .aparte__titulo { color: var(--alerta-2); }
.aparte p { font-size: var(--corpo-2); color: var(--tinta-2); }


/* =====================================================================
   06. CABEÇALHO
   Escuro em toda a página, inclusive sobre os atos claros: é o que
   mantém a marca legível e dá à barra o peso de um cabeçalho de jornal.
   Sem backdrop-filter — ele criaria bloco de contenção e prenderia o
   painel do menu (position: fixed) dentro da barra.
   ===================================================================== */
.masto {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--breu);
  transition: box-shadow var(--medio);
}
.masto.fixado { box-shadow: 0 1px 0 var(--fio-claro), 0 18px 40px -32px #000; }

.masto__trilho {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--fio-claro);
}
.masto__trilho span {
  display: block;
  height: 100%;
  background: var(--latao);
  transform: scaleX(0);
  transform-origin: left;
}

.masto__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: var(--masto-h);
  padding-block: .75rem;
  transition: min-height var(--medio), padding-block var(--medio);
}
.masto.fixado .masto__interno { min-height: var(--masto-min); padding-block: .45rem; }

.marca {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}
.marca img { width: clamp(9rem, 15vw, 12.5rem); height: auto; }
.marca__assinatura {
  display: none;
  padding-left: 1rem;
  white-space: nowrap;
  border-left: 1px solid var(--fio-claro);
  font-family: var(--maq);
  font-size: .625rem;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--claro-2);
}

.masto__acoes { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__lista { display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 1.75rem); }
.nav__lista a {
  position: relative;
  display: block;
  padding: .55rem 0;
  color: var(--claro);
  font-size: var(--corpo-2);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
/* Filete que se desenha da esquerda — a mesma gramática do botão. */
.nav__lista a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: var(--latao);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio);
}
@media (hover: hover) { .nav__lista a:hover::after { transform: scaleX(1); } }
.nav__lista a[aria-current='true'] { color: var(--latao); }
.nav__lista a[aria-current='true']::after { transform: scaleX(1); }

.nav__pe { display: none; }

.masto__tel {
  display: none;
  gap: .1rem;
  text-align: right;
  text-decoration: none;
  padding: .35rem 0;
}
.masto__tel-rotulo {
  font-family: var(--maq);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--claro-2);
}
.masto__tel-numero {
  white-space: nowrap;
  font-family: var(--maq);
  font-size: var(--corpo-2);
  font-weight: 500;
  color: var(--latao);
  transition: color var(--curto);
}
@media (hover: hover) { .masto__tel:hover .masto__tel-numero { color: var(--claro); } }

.sanduiche { display: none; }

/* A partir de 1184 px cabe o telefone; a partir de 1312 px, também a
   assinatura. Abaixo de 1056 px tudo vira painel de tela cheia. */
@media (min-width: 74rem) { .masto__tel { display: grid; } }
@media (min-width: 82rem) { .marca__assinatura { display: block; } }


/* =====================================================================
   07. ATO I — A CENA DE ABERTURA
   Sem altura em vh pura: o mínimo é limitado para caber em 1366×768.
   ===================================================================== */
.cena {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(32rem, calc(94svh - var(--masto-h)), 48rem);
  padding-block: clamp(1.75rem, 1rem + 2.4vw, 3.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  overflow: hidden;
}

/* Retrato: ocupa a metade direita e é dissolvido no breu por dois
   degradês, para que a imagem termine sem borda. */
.cena__retrato {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(50%, 44rem);
}
.cena__retrato img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 12%;
}
.cena__retrato::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--breu) 2%, rgba(6, 13, 19, .72) 26%, rgba(6, 13, 19, 0) 62%),
    linear-gradient(0deg,  var(--breu) 1%, rgba(6, 13, 19, 0) 34%),
    linear-gradient(180deg, rgba(6, 13, 19, .55) 0%, rgba(6, 13, 19, 0) 22%);
}

.cena__grade { position: relative; }
.cena__texto { max-width: 40rem; }

.cena__titulo { margin-block: .1rem 1.15rem; }
.linha { display: block; overflow: hidden; padding-bottom: .06em; }
.linha--latao { color: var(--latao); }

.cena__linha {
  max-width: 36rem;
  color: var(--claro-2);
  font-size: clamp(1.0625rem, 1.0rem + 0.34vw, 1.25rem);
}

.cena__acoes { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }

.cena__base {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--fio-claro);
}
.cena__rolar {
  flex: none;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--claro-2);
}
.cena__rolar span {
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--latao), transparent);
}


/* =====================================================================
   08. ATO I — O QUE CHEGA AO ESCRITÓRIO
   ===================================================================== */
.ato { padding-block: var(--respiro); }
.ato--sem-topo { padding-top: 0; }
/* Antes de uma passagem, o respiro inteiro somado ao degradê abria um vão
   vazio de quase 300 px. */
.ato--para-passagem { padding-bottom: clamp(2rem, 1.2rem + 2vw, 3.5rem); }
/* Dois atos claros seguidos são um só assunto: o vão entre eles é menor. */
.ato--claro + .ato--claro { padding-top: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }
.ato--escuro { background: var(--breu); color: var(--claro); }
.ato--claro  { background: var(--osso); color: var(--tinta); --foco: var(--latao-2); }

.ato__cabeca { max-width: 44rem; margin-bottom: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); }
.ato__linha {
  margin-top: 1.25rem;
  font-size: var(--corpo);
  color: var(--claro-2);
}
.ato--claro .ato__linha { color: var(--tinta-2); }
.ato__fecho {
  max-width: 46rem;
  margin-top: 2.5rem;
  font-size: var(--corpo-2);
  color: var(--tinta-2);
}

/* As falas em fonte de máquina: são transcrições do que se ouve no
   atendimento, não citações decorativas. */
.falas { border-top: 1px solid var(--fio-claro); }

.fala {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 14rem;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--fio-claro);
  text-decoration: none;
  transition: background-color var(--medio), padding-inline var(--medio);
}
.fala__tag {
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--latao);
}
.fala__texto {
  font-family: var(--maq);
  font-size: clamp(.9375rem, .88rem + .34vw, 1.125rem);
  line-height: 1.55;
  color: var(--claro);
}
.fala__ir {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  font-size: var(--corpo-2);
  font-weight: 600;
  color: var(--claro-2);
  transition: color var(--curto);
}
.fala__seta {
  width: 1.5rem; height: 1px;
  background: currentColor;
  transition: width var(--medio);
}
@media (hover: hover) {
  .fala:hover { background: var(--noite); padding-inline: 1.25rem; }
  .fala:hover .fala__ir { color: var(--latao); }
  .fala:hover .fala__seta { width: 2.5rem; }
}


/* =====================================================================
   09. PASSAGENS ENTRE ATOS
   O degradê fica num pseudo-elemento no topo da faixa; a frase pousa
   sobre a cor sólida de destino, onde o contraste é medível.
   ===================================================================== */
.passagem {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(7rem, 5rem + 6vw, 11rem) var(--margem) clamp(3rem, 2rem + 3vw, 5rem);
  text-align: center;
}
.passagem::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(7rem, 5rem + 6vw, 11rem);
}
.passagem--amanhecer { background: var(--osso); }
.passagem--amanhecer::before { background: linear-gradient(180deg, var(--breu) 0%, var(--osso) 100%); }
.passagem--anoitecer { background: var(--breu); }
.passagem--anoitecer::before { background: linear-gradient(180deg, var(--osso) 0%, var(--breu) 100%); }

.passagem__frase {
  position: relative;
  max-width: 22ch;
  font-size: var(--d3);
  line-height: 1.1;
}
.passagem--amanhecer .passagem__frase { color: var(--tinta); }
.passagem--anoitecer .passagem__frase { color: var(--claro); }
.passagem__frase::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 1.75rem auto 0;
  background: var(--latao-2);
}
.passagem--anoitecer .passagem__frase::after { background: var(--latao); }


/* =====================================================================
   10. ATO II — O RELÓGIO DO INSS
   O instrumento só existe com JavaScript; sem ele seria um formulário
   sem função. A informação completa está na tabela, sempre visível.
   ===================================================================== */
.relogio { display: none; }
.js .relogio {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 1.8rem + 2vw, 3.75rem);
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  background: var(--osso-2);
  border-top: 2px solid var(--latao-3);
}

.relogio__entrada {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
  align-items: start;
}

.relogio__campo legend,
.relogio__rotulo {
  display: block;
  margin-bottom: .9rem;
  padding: 0;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--latao-2);
}

.relogio__opcoes { display: grid; gap: .5rem; }

.cheque { display: block; cursor: pointer; }
.cheque input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.cheque span {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 2.75rem;
  padding: .55rem .9rem;
  background: var(--osso);
  border: 1px solid var(--fio-osso);
  font-size: var(--corpo-2);
  line-height: 1.4;
  transition: border-color var(--curto), background-color var(--curto);
}
.cheque span::before {
  content: '';
  flex: none;
  width: .7rem; height: .7rem;
  margin-top: .45em;
  border: 1px solid var(--tinta-2);
  border-radius: 50%;
  transition: box-shadow var(--curto), border-color var(--curto);
}
.cheque input:checked + span {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--osso);
}
.cheque input:checked + span::before {
  border-color: var(--latao);
  box-shadow: inset 0 0 0 3px var(--latao);
}
.cheque input:focus-visible + span { outline: 2px solid var(--latao-2); outline-offset: 2px; }
@media (hover: hover) {
  .cheque:hover input:not(:checked) + span { border-color: var(--latao-2); }
}

.relogio__data {
  width: 100%;
  min-height: 3.25rem;
  padding: .6rem .9rem;
  background: var(--osso);
  border: 1px solid var(--fio-osso);
  border-radius: 0;
  font-family: var(--maq);
  font-size: var(--corpo);
  color: var(--tinta);
}
.relogio__data:focus-visible { outline: 2px solid var(--latao-2); outline-offset: 2px; }
.relogio__dica { margin-top: .7rem; font-size: var(--corpo-2); color: var(--tinta-2); }

/* --- a saída: o mostrador -------------------------------------------- */
.relogio__saida {
  display: grid;
  align-content: center;
  min-height: 12rem;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  background: var(--noite-2);
  color: var(--claro);
}
.relogio__vazio { color: var(--claro-2); font-size: var(--corpo-2); }

.mostrador { display: grid; gap: 1.1rem; }
.mostrador__barra {
  position: relative;
  height: 3px;
  background: var(--fio-claro);
  overflow: hidden;
}
.mostrador__barra span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--latao);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.mostrador--vencido .mostrador__barra span { background: var(--alerta); }

.mostrador__linha { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.mostrador__numero {
  font-family: var(--maq);
  font-size: clamp(3rem, 2rem + 5vw, 5.25rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--latao);
  font-variant-numeric: tabular-nums;
}
.mostrador--vencido .mostrador__numero { color: var(--alerta); }
.mostrador__un {
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--claro-2);
}
.mostrador__detalhe { font-size: var(--corpo-2); color: var(--claro-2); max-width: 46ch; }
.mostrador__detalhe strong { color: var(--claro); font-weight: 600; }

.relogio__aviso {
  font-size: var(--corpo-2);
  color: var(--tinta-2);
  padding-left: 1rem;
  border-left: 2px solid var(--fio-osso);
}


/* =====================================================================
   11. ATO II — TABELA DE PRAZOS
   ===================================================================== */
.tabela-envolucro { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; text-align: left; }
.tabela caption {
  margin-bottom: 1rem;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--latao-2);
}
.tabela th, .tabela td {
  padding: 1.1rem 1rem 1.1rem 0;
  border-bottom: 1px solid var(--fio-osso);
  vertical-align: baseline;
}
.tabela thead th {
  padding-block: .5rem .8rem;
  border-bottom: 1px solid var(--tinta);
  font-family: var(--maq);
  font-size: var(--maq-tam);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.tabela tbody th { font-weight: 400; font-size: var(--corpo); color: var(--tinta); padding-right: 2rem; }
.tabela td { width: 1%; min-width: 11rem; white-space: nowrap; }
.prazo {
  font-family: var(--maq);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--latao-2);
  font-variant-numeric: tabular-nums;
}
.prazo__un { font-family: var(--maq); font-size: var(--maq-tam); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.prazo__obs { display: block; margin-top: .5rem; font-size: var(--corpo-2); color: var(--tinta-2); white-space: normal; }


/* =====================================================================
   12. ATO II — ÁREAS EM LAJES EMPILHADAS
   Cada laje gruda no topo e a seguinte desliza por cima, como folhas de
   um mesmo processo. Nenhum ancestral pode ter overflow diferente de
   visible, sob pena de o sticky deixar de funcionar.
   ===================================================================== */
.ato--areas { padding-bottom: 0; }

.pilha { padding-bottom: var(--respiro); }

.laje {
  position: sticky;
  top: calc(var(--masto-min) + 1.25rem + var(--n) * 1.1rem);
  padding-block: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  background: var(--osso-2);
  border-top: 1px solid var(--tinta);
  box-shadow: 0 -18px 40px -30px rgba(14, 25, 32, .55);
}
.laje:nth-child(even) { background: var(--osso); }
.laje + .laje { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* Lombada: o nome da frente, de pé na borda esquerda, como numa pilha
   de pastas. Decorativa — o mesmo texto está no <h3>. */
.laje__lombada {
  position: absolute;
  left: max(.75rem, calc((100vw - var(--faixa)) / 2 + .5rem));
  top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  writing-mode: vertical-rl;
  font-family: var(--maq);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Sem opacity: a 11 px o texto reduzido a 60% cai para 2,5:1. A
     lombada é decorativa, mas continua sendo texto na tela. */
  color: var(--tinta-2);
}

.laje__grade {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.laje__base {
  margin-bottom: .9rem;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--latao-2);
}
.laje__titulo { margin-bottom: 1rem; }
.laje__resumo { color: var(--tinta-2); }
.laje__resumo strong { color: var(--tinta); }
.laje__sub { font-weight: 700; }
.laje__corpo p + p { margin-top: .85rem; }
.laje__corpo > p { color: var(--tinta-2); }
.laje__corpo > p strong { color: var(--tinta); }


/* =====================================================================
   13. ATO II — DÚVIDAS
   <details> nativo: abre e fecha sem JavaScript, sem controle morto.
   ===================================================================== */
.faq { border-top: 1px solid var(--fio-osso); }
.faq__item { border-bottom: 1px solid var(--fio-osso); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--voz);
  font-size: var(--h3);
  line-height: 1.28;
  color: var(--tinta);
  transition: color var(--curto);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '';
  flex: none;
  width: 1.1rem; height: 1.1rem;
  margin-top: .28em;
  background:
    linear-gradient(var(--latao-2), var(--latao-2)) center / 100% 1px no-repeat,
    linear-gradient(var(--latao-2), var(--latao-2)) center / 1px 100% no-repeat;
  transition: transform var(--medio);
}
.faq__item[open] > .faq__q { color: var(--latao-2); }
.faq__item[open] > .faq__q::after { transform: rotate(90deg); background-size: 100% 1px, 0 100%; }
@media (hover: hover) { .faq__q:hover { color: var(--latao-2); } }

.faq__r { padding: 0 3rem 1.6rem 0; max-width: 64ch; color: var(--tinta-2); }


/* =====================================================================
   14. ATO III — O ADVOGADO
   ===================================================================== */
.perfil {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.perfil__retrato { position: relative; }
.perfil__retrato img { width: 100%; height: auto; }
/* Filete de latão deslocado: a moldura não encosta na foto. */
.perfil__retrato::after {
  content: '';
  position: absolute;
  inset: 2rem -1.5rem -1.5rem 2rem;
  border: 0;
  border-right: 1px solid var(--latao);
  border-bottom: 1px solid var(--latao);
  pointer-events: none;
}
.perfil__texto p { color: var(--claro-2); }
.perfil__texto p + p { margin-top: .9rem; }
.perfil__oab {
  margin-block: .6rem 1.4rem;
  font-family: var(--maq);
  font-size: var(--corpo-2);
  letter-spacing: .12em;
  color: var(--latao) !important;
}


/* =====================================================================
   15. ATO III — ATENDIMENTO
   A numeração aqui é legítima: é uma sequência, e a ordem importa.
   ===================================================================== */
.etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.etapa { padding-top: 1.5rem; border-top: 1px solid var(--fio-claro); }
.etapa__n {
  margin-bottom: 1.1rem;
  font-family: var(--maq);
  font-size: var(--corpo-2);
  letter-spacing: .18em;
  color: var(--latao);
}
.etapa__titulo {
  margin-bottom: .6rem;
  font-family: var(--texto);
  font-size: var(--h3);
  font-weight: 600;
  letter-spacing: -.005em;
}
.etapa p:not(.etapa__n) { font-size: var(--corpo-2); color: var(--claro-2); }


/* =====================================================================
   16. ATO III — CONTATO
   ===================================================================== */
.contato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.contato__texto p { color: var(--claro-2); }
.contato__texto h2 { margin-bottom: 1.25rem; }
.contato__acoes { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.canais { display: grid; border-top: 1px solid var(--fio-claro); }
.canal {
  display: grid;
  gap: .35rem;
  padding-block: 1.3rem;
  border-bottom: 1px solid var(--fio-claro);
}
.canal__rotulo {
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--claro-2);
}
.canal__valor {
  font-family: var(--maq);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  font-weight: 500;
  color: var(--claro);
  text-decoration: none;
  width: fit-content;
}
.canal__valor--menor { font-size: var(--corpo-2); font-weight: 400; line-height: 1.55; }
a.canal__valor { border-bottom: 1px solid var(--latao); padding-bottom: .15rem; transition: color var(--curto); }
@media (hover: hover) { a.canal__valor:hover { color: var(--latao); } }
.canal__extra {
  margin-top: .5rem;
  font-size: var(--corpo-2);
  color: var(--latao);
  width: fit-content;
}


/* =====================================================================
   17. RODAPÉ
   ===================================================================== */
.rodape { background: var(--breu); color: var(--claro-2); padding-top: var(--respiro); }
.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-bottom: 3rem;
}
.rodape__marca img { width: 3.5rem; height: auto; margin-bottom: 1.1rem; }
.rodape__nome { font-size: var(--h3); color: var(--claro); line-height: 1.2; }
.rodape__assinatura {
  margin-top: .35rem;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--latao);
}
.rodape__oab { margin-top: .9rem; font-size: var(--corpo-2); }

.rodape__titulo {
  margin-bottom: 1.1rem;
  font-family: var(--maq);
  font-size: var(--maq-tam);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--latao);
}
.rodape__nav ul { display: grid; gap: .1rem; }
.rodape__nav a, .rodape__contato a {
  display: inline-block;
  padding: .4rem 0;
  color: var(--claro-2);
  font-size: var(--corpo-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: color var(--curto), border-color var(--curto);
}
@media (hover: hover) {
  .rodape__nav a:hover, .rodape__contato a:hover, .rodape__base a:hover {
    color: var(--latao); border-bottom-color: currentColor;
  }
}
.rodape__end { margin-top: .6rem; font-size: var(--corpo-2); line-height: 1.6; }
.rodape__legal p { font-size: var(--corpo-2); }
.rodape__mini { margin-top: .9rem; font-size: var(--maq-tam); line-height: 1.6; color: #8494a0; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--fio-claro);
  font-family: var(--maq);
  font-size: var(--maq-tam);
}
.rodape__base a { color: var(--claro-2); text-decoration: none; border-bottom: 1px solid transparent; padding-block: .3rem; display: inline-block; }


/* =====================================================================
   18. MOVIMENTO
   Tudo depende da classe .anima, posta no <html> antes da primeira
   pintura. Sem ela — JavaScript desligado ou movimento reduzido — nada
   se move e nada nasce invisível.
   ===================================================================== */

/* --- sequência de abertura ------------------------------------------- */
.anima [data-abrir] { opacity: 0; transform: translateY(14px); }
.anima .linha > span { display: block; transform: translateY(105%); }
.anima .etiqueta__marca { transform: scaleX(0); }
.anima .cena__retrato { opacity: 0; transform: scale(1.05); }

.anima.abriu [data-abrir] {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease var(--atraso, 0ms), transform .8s cubic-bezier(.16, 1, .3, 1) var(--atraso, 0ms);
}
.anima.abriu .linha > span {
  transform: none;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) var(--atraso, 0ms);
}
.anima.abriu .etiqueta__marca {
  transform: none;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1) 150ms;
}
.anima.abriu .cena__retrato {
  opacity: 1;
  transform: none;
  transition: opacity 1.4s ease 100ms, transform 1.8s cubic-bezier(.16, 1, .3, 1) 100ms;
}
[data-abrir='1'] { --atraso: 60ms; }
[data-abrir='2'] { --atraso: 120ms; }
[data-abrir='3'] { --atraso: 230ms; }
[data-abrir='4'] { --atraso: 340ms; }
[data-abrir='5'] { --atraso: 460ms; }
[data-abrir='6'] { --atraso: 570ms; }
[data-abrir='7'] { --atraso: 680ms; }

/* --- revelações ao rolar --------------------------------------------- */
.anima [data-revelar] { opacity: 0; transform: translateY(18px); }
.anima [data-revelar].dentro {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease var(--atraso, 0ms), transform .7s cubic-bezier(.16, 1, .3, 1) var(--atraso, 0ms);
}
/* Escada curta dentro de listas, para a leitura acompanhar. */
.anima .falas li:nth-child(2) [data-revelar], .anima .falas li:nth-child(2)[data-revelar] { --atraso: 60ms; }
.anima .falas li:nth-child(3)[data-revelar] { --atraso: 120ms; }
.anima .falas li:nth-child(4)[data-revelar] { --atraso: 180ms; }
.anima .falas li:nth-child(5)[data-revelar] { --atraso: 240ms; }
.anima .falas li:nth-child(6)[data-revelar] { --atraso: 300ms; }
.anima .etapas li:nth-child(2)[data-revelar] { --atraso: 90ms; }
.anima .etapas li:nth-child(3)[data-revelar] { --atraso: 180ms; }
.anima .etapas li:nth-child(4)[data-revelar] { --atraso: 270ms; }

/* --- parallax --------------------------------------------------------
   will-change só nas duas imagens que realmente se movem. Em captura de
   página inteira, elementos com will-change: transform podem sair pretos:
   é artefato da captura, não do site. */
@media (min-width: 56rem) {
  .anima .cena__retrato img,
  .anima .perfil__retrato img { will-change: transform; }
}


/* =====================================================================
   19. TELAS MENORES
   ===================================================================== */
@media (max-width: 74rem) {         /* 1184 px */
  .fala { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .fala__ir { grid-column: 2; justify-content: flex-start; margin-top: .5rem; }
  .relogio__entrada { grid-template-columns: minmax(0, 1fr); }
  .laje__lombada { display: none; }
}

@media (max-width: 66rem) {         /* 1056 px */
  :root { --masto-h: 4.25rem; --masto-min: 3.75rem; }

  .sanduiche { display: none; }
  .js .sanduiche {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    padding: .5rem .9rem;
    background: transparent;
    border: 1px solid var(--fio-forte);
    color: var(--claro);
    font-family: var(--maq);
    font-size: var(--maq-tam);
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .sanduiche__barras { display: grid; gap: 5px; width: 1.125rem; }
  .sanduiche__barras span { display: block; height: 1px; background: currentColor; transition: transform var(--curto), opacity var(--curto); }
  .sanduiche[aria-expanded='true'] .sanduiche__barras span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
  .sanduiche[aria-expanded='true'] .sanduiche__barras span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

  /* Painel em tela cheia. `visibility` só entra na transição com atraso no
     fechamento — se participasse da abertura, no primeiro instante ainda
     valeria `hidden` e o foco não conseguiria entrar no painel. */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 250;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--masto-h) + 2rem) var(--margem) 2.5rem;
    background: var(--breu);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.75rem);
    transition: opacity var(--medio), transform var(--medio), visibility 0s .5s;
  }
  .nav.aberto {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--medio), transform var(--medio), visibility 0s 0s;
  }
  .nav:not(.aberto) { pointer-events: none; }

  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--fio-claro); }
  .nav__lista li { border-bottom: 1px solid var(--fio-claro); }
  .nav__lista a {
    padding: 1.15rem 0;
    font-family: var(--voz);
    font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -.01em;
  }
  .nav__lista a::after { display: none; }

  .nav__pe { display: grid; gap: 1rem; margin-top: 2.25rem; justify-items: start; }
  .nav__tel a {
    font-family: var(--maq);
    font-size: 1.25rem;
    color: var(--latao);
    text-decoration: none;
  }
  .nav__end { font-family: var(--maq); font-size: var(--maq-tam); line-height: 1.7; color: var(--claro-2); }

  /* Sem JavaScript não há painel: a navegação desce como lista comum. */
  html:not(.js) .masto__interno { flex-wrap: wrap; }
  html:not(.js) .masto__acoes { width: 100%; }
  html:not(.js) .nav {
    position: static;
    width: 100%;
    padding: 0 0 1rem;
    background: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    pointer-events: auto;
    display: block;
  }
  html:not(.js) .nav__pe { display: none; }

  /* As lajes deixam de empilhar: em tela estreita o empilhamento esconde
     conteúdo em vez de organizá-lo. */
  .laje { position: static; box-shadow: none; }
  .laje__grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 56rem) {         /* 896 px */
  /* A cena vira uma capa vertical: título primeiro, retrato em seguida,
     dissolvendo-se no breu que leva à próxima seção. */
  .cena { min-height: 0; padding-bottom: 0; overflow: visible; }
  .cena__retrato {
    position: relative;
    inset: auto;
    width: auto;
    margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0;
    aspect-ratio: 4 / 3;
  }
  .cena__retrato img { object-position: 62% 8%; }
  .cena__retrato::after {
    background:
      linear-gradient(0deg, var(--breu) 2%, rgba(6, 13, 19, 0) 46%),
      linear-gradient(180deg, rgba(6, 13, 19, .35) 0%, rgba(6, 13, 19, 0) 30%);
  }
  .cena__base { margin-top: 2rem; }
  .cena__rolar { display: none; }

  .perfil, .contato { grid-template-columns: minmax(0, 1fr); }
  .perfil__retrato { max-width: 22rem; }
  .perfil__retrato::after { inset: 1.5rem -1rem -1rem 1.5rem; }

  .rodape__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rodape__legal { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {         /* 640 px */
  .fala { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding-block: 1.4rem; }
  .fala__ir { grid-column: 1; }

  .tabela, .tabela caption, .tabela tbody, .tabela tbody tr,
  .tabela tbody th, .tabela tbody td { display: block; width: auto; }
  .tabela caption { min-width: 100%; }
  .tabela tbody tr { border-bottom: 1px solid var(--fio-osso); padding-block: .4rem; }
  .tabela tbody th { border-bottom: 0; padding: .9rem 0 .4rem; }
  .tabela tbody td { border-bottom: 0; padding: 0 0 .9rem; white-space: normal; min-width: 0; }
  .tabela thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .faq__r { padding-right: 1rem; }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .cena__acoes .botao, .contato__acoes .botao { width: 100%; }
}

@media (max-width: 30rem) {         /* 480 px */
  .sanduiche__texto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}


/* =====================================================================
   20. MOVIMENTO REDUZIDO, ALTO CONTRASTE E IMPRESSÃO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .nav { transition: none; }
  .laje { position: static; }
}

@media (forced-colors: active) {
  .cheque input:checked + span { border: 2px solid CanvasText; }
  .laje, .relogio, .relogio__saida { border: 1px solid CanvasText; }
  .masto__trilho, .cena__rolar span { display: none; }
}

@media print {
  .masto, .pular, .sanduiche, .cena__retrato, .cena__acoes,
  .contato__acoes, .rodape__nav, .relogio, .cena__rolar { display: none !important; }
  body, .ato--escuro, .rodape, .passagem--anoitecer { background: #fff !important; color: #000 !important; }
  .ato, .cena { padding-block: 1.25rem; }
  .passagem { padding-block: 1.5rem; }
  .ato__linha, .fala__texto, .fala__tag, .canal__valor, .canal__rotulo,
  .perfil__texto p, .perfil__oab, .rodape__nome, .rodape__oab, .etapa p,
  .contato__texto p, .passagem__frase, .tiras { color: #000 !important; }
  .laje { position: static; box-shadow: none; }
  .faq__item > .faq__r { display: block !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}