@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --amarelo: #f8e11a;
  --verde: #39b73e;
  --verde-marca: #309f3f;
  /* O verde escuro do sistema, com dois empregos. Mesmo matiz e mesma
     saturação do verde da marca (H 122,4 / S 52,5%), luminosidade 29% em vez
     de 47%. Como CAMPO carrega branco a 6,07; como TEXTO sobre o amarelo dá
     4,56. O verde da marca não serve para nenhum dos dois: sobre amarelo dá
     1,97, e branco sobre ele dá 2,62. */
  --verde-escuro: #237126;
  --azul: #244ca5;
  --azul-fundo: #1d3f8c;
  --tinta: #050607;
  --branco: #fff;

  /* profundidade do corte diagonal entre placas */
  --corte: clamp(1.75rem, 4.5vw, 5rem);
  --margem: clamp(1.25rem, 5vw, 5.5rem);

  /* O QUADRO. Largura máxima única da página: campo de cor sangra de borda a
     borda, mas nada de conteúdo passa daqui. Sem isso, em tela larga a foto
     foge para o canto da viewport e o texto fica na coluna central, cada um
     num lugar. Texto, lockup, faixa e foto compartilham este mesmo limite. */
  --limite: 82rem;
}

/* Quem é posicionado por absolute (as fotos, o arco) ancora na borda do quadro
   com `right: max(<sangria antiga>, calc(50% - var(--limite) / 2 - <folga>))`.
   O 50% resolve contra a própria placa, que tem a largura da viewport de
   layout: não precisa de 100vw nem de correção de barra de rolagem. O max()
   preserva o sangramento original enquanto a tela é menor que o quadro. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--amarelo);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* sem height:auto o atributo height="" do HTML trava a altura e o SVG
   renderiza encaixotado, a uma fração da largura pedida */
img, svg { display: block; max-width: 100%; height: auto; }
p { margin: 0; }

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

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--tinta);
  color: var(--branco);
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { left: 0; }

/* Anel de duas faixas, porque um anel de cor só não sobrevive a esta paleta:
   tinta sobre o azul do fecho dá 2,07 e some, e branco sobre o verde dá 2,62.
   Tinta de 0 a 3px, branco de 3 a 6px, encostados. Qualquer que seja o campo,
   uma das faixas passa: tinta no amarelo (15,2) e no verde (7,7), branco no
   azul (8,9) e no rodapé (20,3). O outline fica por fora do box-shadow e é o
   que sobrevive ao modo de alto contraste, onde sombra é descartada.
   Importa porque o botão do Instagram é o único controle da página, e está
   justamente sobre o azul. */
:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--branco);
}

/* o quadro, aplicado a todo bloco de conteúdo */
.miolo,
.abertura__marca,
.faixa__texto {
  display: block;   /* .faixa__texto é span: sem isso max-width e margin auto não pegam */
  width: 100%;
  max-width: var(--limite);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* ---------- a placa ---------- */

.placa {
  position: relative;
  isolation: isolate;
}

/* o corte diagonal é a geometria do impresso, herdada em cada emenda */
.placa--fala,
.placa--mandato,
.placa--dobra {
  clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--corte) * -1);
  padding-top: calc(var(--corte) + clamp(3.5rem, 7vw, 6.5rem));
}

.placa--compromissos,
.placa--fecho {
  clip-path: polygon(0 0, 100% var(--corte), 100% 100%, 0 100%);
  margin-top: calc(var(--corte) * -1);
  padding-top: calc(var(--corte) + clamp(3.5rem, 7vw, 6.5rem));
}

/* ---------- placa 1: abertura ---------- */

/* z-index acima das placas seguintes: sem isso a diagonal da seção da fala,
   que é puxada para cima por margin-top negativo, atravessava a faixa e
   partia "AGORA É FEDERAL" com um triângulo de azul mais escuro. A emenda
   diagonal não se perde, ela só muda de lugar: passa a ser o topo da faixa,
   cortando o amarelo, que é um contraste bem melhor que azul sobre azul. */
.placa--abertura {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--amarelo);
  overflow: hidden;
  padding-top: clamp(2rem, 5vw, 4rem);
  z-index: 2;
}

.abertura__cunha {
  position: absolute;
  inset: 0;
  background: var(--verde);
  clip-path: polygon(0 46%, 74% 100%, 0 100%);
  z-index: -2;
}

/* Colado no canto superior direito, como no flyer. Antes ficava pendurado em
   deslocamentos negativos em vw e aparecia como um pedaço cortado no meio da
   borda, o que lia como acidente; a partir de ~1900px sumia de vez. Agora o
   quarto de círculo encosta nas duas bordas e o corte é a própria geometria. */
.abertura__arco {
  position: absolute;
  /* Ancorado 2rem para fora e 2rem maior. O parallax desloca o arco até 26px,
     e com top/right em 0 isso abriria uma tira de amarelo no canto. Deslocar o
     centro e aumentar o raio na mesma medida faz a curva passar pelos mesmos
     dois pontos extremos, então a folga não custa nada no desenho. */
  top: -2rem;
  right: -2rem;
  width: calc(min(46vw, 27rem) + 2rem);
  aspect-ratio: 1;
  background: var(--azul);
  border-bottom-left-radius: 100%;
  z-index: -1;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.abertura__marca {
  position: relative;
  z-index: 2;
  justify-self: center;
  align-self: center;
  padding-bottom: clamp(1rem, 4vw, 3rem);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

/* proporções do lockup vertical do impresso: ADA MUNARETTO e 3000 têm a
   mesma largura, e o cargo corre menor acima */
.marca {
  margin: 0;
  display: grid;
  gap: clamp(0.45rem, 0.9vw, 0.85rem);
  justify-items: start;
  /* proporção do quadro, não da viewport: com 46vw o lockup continuava
     crescendo e encostava na foto em tela larga */
  width: min(46%, 34rem);
}
.marca__cargo  { width: 62%; }
.marca__nome   { width: 100%; }
.marca__numero { width: 100%; }

.abertura__foto {
  position: absolute;
  right: max(-3vw, calc(50% - var(--limite) / 2 - 2rem));
  bottom: 0;
  height: min(86svh, 50rem);
  width: auto;
  z-index: 1;
  filter: drop-shadow(-1.2rem 1.6rem 2.4rem rgb(5 6 7 / 0.22));
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.faixa {
  position: relative;
  z-index: 3;
  background: var(--azul);
  color: var(--branco);
  /* A diagonal da emenda agora mora aqui, cortando o amarelo por cima. Corte
     próprio, mais raso que o das placas: a faixa é uma tarja, e com os 5rem
     das placas ela virava um bloco alto demais no pé da abertura. */
  --corte-faixa: min(var(--corte), 2.75rem);
  clip-path: polygon(0 var(--corte-faixa), 100% 0, 100% 100%, 0 100%);
  margin: calc(var(--corte-faixa) * -1) 0 0;
  /* a faixa azul sangra, o texto dela não: alinha na mesma coluna do resto */
  padding: calc(var(--corte-faixa) + clamp(0.9rem, 2vw, 1.6rem)) 0 clamp(0.9rem, 2vw, 1.6rem);
  font-size: clamp(1.05rem, 1.1rem + 1.1vw, 2.4rem);
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.15;
}
.faixa strong {
  font-weight: 900;
  color: var(--amarelo);
  letter-spacing: 0.1em;
}

/* ---------- placa 2: a fala ---------- */

.placa--fala {
  background: var(--azul-fundo);
  color: var(--branco);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

.fala__titulo {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  max-width: 22ch;
  font-size: clamp(2rem, 1.1rem + 4.6vw, 5rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.fala__titulo em {
  display: block;
  margin-top: 0.18em;
  color: var(--amarelo);
  font-style: normal;
  font-weight: 900;
  font-stretch: 118%;
  letter-spacing: -0.035em;
}

.fala__corpo {
  display: grid;
  gap: 1.15em;
  max-width: 62ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.375rem);
  line-height: 1.62;
  color: #e9edf7;
}

/* ---------- placa 3: compromissos ---------- */

.placa--compromissos {
  background: var(--amarelo);
  color: var(--tinta);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

/* Verde em vez de tinta, a pedido do Jacques em 18/08/2026: preto sobre o
   campo amarelo pesava demais. É o --verde-escuro, não o da marca, e a
   diferença não é estética: o verde da marca sobre este amarelo dá 1,97,
   ilegível. O escuro dá 4,56, que passa em corpo, não só em título. */
.compromissos__titulo {
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  max-width: 20ch;
  color: var(--verde-escuro);
  font-size: clamp(1.6rem, 0.9rem + 3.4vw, 3.6rem);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.compromissos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--verde-escuro);
  max-width: 46rem;
}
.compromissos li {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.8vw, 1.15rem);
  border-bottom: 3px solid var(--verde-escuro);
  padding: clamp(0.85rem, 2.1vw, 1.5rem) 0;
  color: var(--verde-escuro);
  font-size: clamp(1.2rem, 0.85rem + 1.7vw, 2.25rem);
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.16;
  letter-spacing: -0.02em;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1),
              color 220ms linear;
}

.compromissos__bandeira {
  flex: none;
  width: clamp(1.55rem, 3.2vw, 2.3rem);
  aspect-ratio: 30 / 21;
  height: auto;
  transition: transform 260ms cubic-bezier(.2,.7,.3,1);
}

/* Só em ponteiro fino: no celular o hover fica preso depois do toque. */
@media (hover: hover) and (pointer: fine) {
  .compromissos li:hover {
    transform: translateX(0.5rem);
    color: var(--tinta);
  }
  .compromissos li:hover .compromissos__bandeira {
    transform: scale(1.12) rotate(-3deg);
  }
}

/* ---------- placa 4: o mandato ---------- */

/* Campo verde com texto branco. Era o verde da marca e dava 2,62:1, o único
   par da página que reprovava; resolvido em 18/08/2026 escurecendo o campo em
   vez de trocar a cor do texto, porque branco sobre verde é o par que a placa
   impressa usa. Com --verde-escuro o branco passa a 4,98:1, acima dos 4,5 de
   corpo, e o filete de 3px passa nos 3:1 de elemento não textual.
   O verde da marca continua intacto na cunha da abertura e na dobra. */
.placa--mandato {
  background: var(--verde-escuro);
  color: var(--branco);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

.numeros {
  margin: 0;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
/* Único bloco centralizado da página, a pedido do Jacques em 18/08/2026: o
   rótulo fica sob o número e no eixo dele, como placar. Colunas iguais (1fr),
   então os três filetes nascem do mesmo comprimento e formam uma linha só. */
.numero {
  display: grid;
  justify-items: center;
  text-align: center;
}
.numero dt {
  order: 2;
  width: 100%;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.35;
  padding-top: 0.8rem;
  border-top: 3px solid var(--branco);
  text-wrap: balance;
}
.numero dd { order: 1; margin: 0; }
/* "+1.000" é o mais largo dos três e define o teto: acima disso ele estoura
   a própria coluna e encosta no número vizinho */
.numero__valor {
  display: block;
  padding-bottom: 0.12em;   /* o -0.045em de tracking comia o pé do filete */
  font-size: clamp(3rem, 1rem + 5.4vw, 5rem);
  font-weight: 900;
  font-stretch: 104%;
  line-height: 0.86;
  letter-spacing: -0.045em;
}

/* ---------- placa 5: fecho ---------- */

.placa--fecho {
  background: var(--azul-fundo);
  color: var(--branco);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: min(84svh, 44rem);
}

.fecho {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  /* A calha da foto e a altura da foto precisam escalar juntas. Com a calha em
     vw e a foto em rem elas descolavam entre 740px e 900px: a foto ficava mais
     larga que a calha, invadia o texto e o título estourava a seção. */
  padding-right: calc(var(--margem) + min(27vw, 23rem));
}

.fecho__foto {
  position: absolute;
  right: max(-2vw, calc(50% - var(--limite) / 2 - 1.5rem));
  bottom: 0;
  /* 46vw x proporção 1140/2123 = 24,7vw de largura, sempre abaixo da calha */
  height: min(100%, 40rem, 46vw);
  width: auto;
  z-index: 1;
  filter: drop-shadow(-1rem 1.4rem 2.2rem rgb(5 6 7 / 0.3));
}

.fecho__titulo {
  margin: 0;
  font-size: clamp(2.2rem, 1.1rem + 5.4vw, 5.75rem);
  font-weight: 900;
  font-stretch: 114%;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.fecho__numero { width: clamp(11rem, 30vw, 20rem); }

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  background: var(--amarelo);
  color: var(--tinta);
  text-decoration: none;
  padding: 0.85em 1.35em;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 160ms cubic-bezier(.2,.7,.3,1), background-color 160ms linear;
}
.botao strong { font-weight: 900; }
.botao__icone { width: 1.35em; height: 1.35em; flex: none; }
.botao:hover, .botao:focus-visible {
  background: var(--branco);
  transform: translateY(-2px);
}

/* ---------- dobra: van Hattem, Senador 300 ---------- */

/* Reproduz o lado direito da placa do Comitê Central: campo verde, tipo em
   branco. Lockup e slogan são o vetor da própria placa, não recomposição. */
.placa--dobra {
  background: var(--verde);
  color: var(--branco);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: min(62svh, 32rem);
}

.dobra {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  /* duas fotos agora, então a calha é mais larga */
  padding-right: calc(var(--margem) + min(40vw, 32rem));
}

.dobra__lockup { width: min(100%, 34rem); }
.dobra__slogan { width: min(76%, 24rem); }

/* A dobra passou a mostrar os dois candidatos, a pedido do Jacques. Ada na
   frente e à esquerda, van Hattem atrás e à direita: é a página dela. Os dois
   apoiam na mesma linha de base, senão parecem recortes soltos. */
.dobra__dupla {
  position: absolute;
  right: max(-1vw, calc(50% - var(--limite) / 2 - 1rem));
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.dobra__foto {
  width: auto;
  filter: drop-shadow(-0.9rem 1.2rem 2rem rgb(5 6 7 / 0.28));
}
/* proporção 1140/1962 = 0,581 de largura por altura */
.dobra__foto--ada {
  height: min(29rem, 27vw);
  position: relative;
  z-index: 2;
  margin-right: -6%;   /* encosta um no outro, sem cobrir rosto */
}
/* proporção 840/1061 = 0,792 */
.dobra__foto--vh {
  height: min(23rem, 21vw);
}

/* ---------- rodapé ---------- */

/* Amarelo em vez de preto, a pedido do Jacques em 18/08/2026: no campo escuro
   a marca precisava de uma caixa amarela atrás e virava um retângulo colado no
   rodapé. Com o campo amarelo a caixa some e a marca respira. Ganha a mesma
   emenda diagonal das outras placas, senão o encontro com o verde da dobra
   fica sendo a única costura reta da página. */
.rodape {
  background: var(--amarelo);
  color: var(--tinta);
  clip-path: polygon(0 0, 100% var(--corte), 100% 100%, 0 100%);
  margin-top: calc(var(--corte) * -1);
  padding-top: calc(var(--corte) + clamp(2.75rem, 6vw, 4.5rem));
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  position: relative;
  font-size: 0.95rem;
}
.rodape__miolo { display: grid; gap: 1.25rem; justify-items: start; }
.rodape__marca { margin: 0; }
.rodape__marca img { width: clamp(13rem, 34vw, 19rem); }
.rodape__legal {
  font-weight: 700;
  color: var(--verde-escuro);
  letter-spacing: 0.02em;
}

/* Instagram e Facebook. São as duas redes que existem: não há TikTok nem
   YouTube da candidata, e o Instagram é o ativo principal (verificado). */
.redes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
}
.rede {
  display: grid;
  place-items: center;
  /* 2,75rem de alvo de toque: o mínimo confortável, e o público é mais velho */
  width: 2.75rem;
  height: 2.75rem;
  color: var(--verde-escuro);
  text-decoration: none;
  transition: color 180ms linear, transform 180ms cubic-bezier(.2,.7,.3,1);
}
.rede svg { width: 1.6rem; height: 1.6rem; }
.rede:hover, .rede:focus-visible {
  color: var(--tinta);
  transform: translateY(-2px);
}

/* ---------- movimento: a placa passando ---------- */

/* Quem entra são os FILHOS do miolo, não o miolo inteiro, e cada um com um
   atraso. Antes o bloco subia inteiro 1,9rem de uma vez, o que era discreto
   demais para se notar. Escalonado e com curso maior, a entrada se lê. */
.js .aguarda > * {
  opacity: 0;
  transform: translate3d(0, 2.75rem, 0);
}
.js .aguarda.passou > * {
  opacity: 1;
  transform: none;
  transition: opacity 560ms cubic-bezier(.16,1,.3,1),
              transform 760ms cubic-bezier(.16,1,.3,1);
}
.js .aguarda.passou > *:nth-child(2) { transition-delay: 100ms; }
.js .aguarda.passou > *:nth-child(3) { transition-delay: 190ms; }
.js .aguarda.passou > *:nth-child(4) { transition-delay: 270ms; }
.js .aguarda.passou > *:nth-child(5) { transition-delay: 340ms; }

/* os cinco compromissos entram um a um: é a lista mais longa da página e a
   que mais ganha com o escalonamento */
.js .aguarda .compromissos li {
  opacity: 0;
  transform: translate3d(-1.4rem, 0, 0);
}
.js .aguarda.passou .compromissos li {
  opacity: 1;
  transform: none;
  transition: opacity 480ms cubic-bezier(.16,1,.3,1),
              transform 620ms cubic-bezier(.16,1,.3,1);
}
.js .aguarda.passou .compromissos li:nth-child(1) { transition-delay: 190ms; }
.js .aguarda.passou .compromissos li:nth-child(2) { transition-delay: 275ms; }
.js .aguarda.passou .compromissos li:nth-child(3) { transition-delay: 360ms; }
.js .aguarda.passou .compromissos li:nth-child(4) { transition-delay: 445ms; }
.js .aguarda.passou .compromissos li:nth-child(5) { transition-delay: 530ms; }

/* e os três números do mandato, que são o outro bloco em série */
.js .aguarda .numero { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
.js .aguarda.passou .numero {
  opacity: 1;
  transform: none;
  transition: opacity 520ms cubic-bezier(.16,1,.3,1),
              transform 680ms cubic-bezier(.16,1,.3,1);
}
.js .aguarda.passou .numero:nth-child(1) { transition-delay: 120ms; }
.js .aguarda.passou .numero:nth-child(2) { transition-delay: 250ms; }
.js .aguarda.passou .numero:nth-child(3) { transition-delay: 380ms; }
/* backwards, não both: com `both` o estado final do keyframe continua valendo
   para sempre e congela o transform, o que mataria o parallax. Com
   `backwards` a animação solta o elemento ao terminar e a regra própria dele
   assume. O `to` já termina no mesmo par --px/--py da regra própria, então a
   troca não dá salto. */
.js .placa--abertura .abertura__marca,
.js .placa--abertura .abertura__foto,
.js .placa--abertura .abertura__arco,
.js .placa--abertura .faixa { animation: entra 780ms cubic-bezier(.16,1,.3,1) backwards; }
.js .placa--abertura .abertura__arco  { animation-delay: 0ms; }
.js .placa--abertura .abertura__marca { animation-delay: 60ms; }
.js .placa--abertura .abertura__foto  { animation-delay: 200ms; }
.js .placa--abertura .faixa           { animation-delay: 340ms; }

@keyframes entra {
  from { opacity: 0; transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + 1.6rem), 0); }
  to   { opacity: 1; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .js .aguarda > *,
  .js .aguarda .compromissos li,
  .js .aguarda .numero,
  .js .placa--abertura .abertura__marca,
  .js .placa--abertura .abertura__foto,
  .js .placa--abertura .abertura__arco,
  .js .placa--abertura .faixa {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .botao,
  .compromissos li,
  .compromissos__bandeira,
  .rede { transition: none; }
}

/* ---------- telas estreitas ---------- */

@media (max-width: 46.25em) {
  :root { --corte: 7vw; }

  .placa--abertura {
    min-height: auto;
    padding-top: clamp(1.5rem, 6vw, 3rem);
  }
  .abertura__cunha { clip-path: polygon(0 58%, 100% 100%, 0 100%); }
  .abertura__arco {
    top: calc(var(--corte) * -3);
    right: calc(var(--corte) * -2.5);
    width: 62vw;
  }
  .marca { width: 100%; }
  .marca__cargo  { width: min(92%, 20rem); }
  .marca__nome   { width: min(86%, 18rem); }
  .marca__numero { width: min(92%, 20rem); }

  /* As fotos têm que APOIAR na borda do campo, como no desktop. Em fluxo, com o
     padding-bottom da seção por baixo, cada uma fazia uma coisa: a da abertura
     era cortada no meio do corpo pela faixa, a do fecho e a da dobra flutuavam
     com a borda reta do retângulo à mostra. A margem inferior de --corte põe o
     pé da foto exatamente no ponto mais alto da diagonal seguinte: nada cobre
     a foto, e ela lê como figura em pé sobre a emenda. */
  .abertura__foto {
    position: relative;
    right: auto;
    height: auto;
    width: min(84%, 24rem);
    margin: clamp(1.5rem, 6vw, 3rem) 0 var(--corte) auto;
    filter: drop-shadow(-0.6rem 0.9rem 1.4rem rgb(5 6 7 / 0.2));
  }

  .faixa { letter-spacing: 0.16em; }

  /* padding-bottom zero: quem fecha a seção é a foto, não um vão de cor */
  .placa--fecho, .placa--dobra { min-height: 0; padding-bottom: 0; }
  .fecho, .dobra { padding-right: var(--margem); }
  .dobra__lockup { width: 100%; }
  .dobra__slogan { width: min(88%, 20rem); }
  /* as duas fotos saem do absolute e entram no fluxo, lado a lado no pé */
  .dobra__dupla {
    position: relative;
    right: auto;
    justify-content: flex-end;
    padding-inline: var(--margem);
    margin: clamp(1.25rem, 4vw, 2rem) 0 var(--corte);
  }
  .dobra__foto { filter: drop-shadow(-0.5rem 0.8rem 1.2rem rgb(5 6 7 / 0.26)); }
  .dobra__foto--ada { height: auto; width: min(38%, 11rem); }
  .dobra__foto--vh { height: auto; width: min(42%, 12rem); }
  .fecho__foto {
    position: relative;
    right: auto;
    height: auto;
    width: min(76%, 20rem);
    margin: clamp(1.5rem, 5vw, 2.5rem) 0 var(--corte) auto;
    filter: drop-shadow(-0.6rem 0.9rem 1.4rem rgb(5 6 7 / 0.28));
  }
}

@media (min-width: 46.3125em) and (max-width: 62em) {
  .abertura__foto { width: clamp(15rem, 42vw, 24rem); }
}