/* ==========================================================================
   Estilo da landing page Simônia 2201.
   O cabeçalho do tema fica em style.css, na raiz; aqui é só folha de estilo.
   ========================================================================== */

/* Fontes locais do tema. Baixadas do Google Fonts (SIL Open Font License 1.1)
   e servidas pelo próprio domínio — nenhuma requisição a terceiros. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-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: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-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;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-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: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-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: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/oswald-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;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/oswald-600-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: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/oswald-600-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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-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;
}


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--azul: #0061a5;
	--azul-escuro: #005592;
	--azul-noite: #10344f;
	--verde: #539452;
	--amarelo: #e7c32d;
	--amarelo-forte: #fabf02;
	--rosa: #d7a1c5;
	--rosa-claro: #f5e2ef;
	--branco: #fff;
	--tinta: #2c2c34;

	--display: "Anton", "Arial Narrow", "Helvetica Neue", sans-serif;
	--condensada: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
	--texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Em rem, não em px: acima de 1920 o root cresce e a medida do palco tem de
	   crescer junto, senão o conteúdo trava e a tela grande só ganha vazio. */
	--largura: 87.5rem;
	--gutter: clamp(1.25rem, 4.2vw, 4.5rem);
	--transicao: 180ms ease;
}

/* Até ~1728px os clamp() ainda estão crescendo e é o responsivo que ajusta a
   página à tela. Passado esse ponto todos eles bateram no teto: o desenho
   congela em pixels e uma tela maior só ganha vazio — é a diferença entre o
   notebook e o monitor grande. Daí em diante a página passa a escalar em
   bloco. Como o layout inteiro está em rem, % e clamp() com teto em rem,
   mexer só no root escala tudo junto e a proporção chega igual nas duas telas.

   0,9259vw = 16px em 1728, então a escala entra sem degrau. O teto de 24px
   trava em 1,5x a partir de 2592px — cobre proporcionalmente até os 2560 de
   um monitor 5K e só então para, senão em ultrawide o texto viraria cartaz.
   Os media queries continuam em em, que o navegador mede sempre em 16px —
   mudar o root aqui não desloca nenhum ponto de quebra. */
@media (min-width: 108em) {
	:root {
		font-size: min(0.9259vw, 24px);
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--branco);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

picture {
	display: contents;
}

h1,
h2,
h3 {
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

:where(a, button, input, textarea):focus-visible {
	outline: 3px solid var(--amarelo-forte);
	outline-offset: 3px;
}

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

.pular-para-conteudo {
	position: absolute;
	left: -9999px;
	z-index: 200;
}

.pular-para-conteudo:focus {
	left: 1rem;
	top: 1rem;
	padding: 0.75rem 1.25rem;
	background: var(--branco);
	color: var(--azul);
	font-family: var(--condensada);
	font-weight: 600;
	text-decoration: none;
}

/* ==========================================================================
   3. Peças reaproveitadas
   ========================================================================== */

/* Títulos em Anton com a sombra chapada do material de campanha. */
.titulo-arte {
	font-family: var(--display);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
}

.titulo-arte--azul {
	color: var(--branco);
	text-shadow: 0.055em 0.06em 0 var(--azul);
}

.titulo-arte--rosa {
	color: var(--branco);
	text-shadow: 0.055em 0.06em 0 var(--rosa);
}

.titulo-arte--chapado {
	color: var(--azul);
}

.titulo-arte .destaque {
	background: var(--rosa);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0.06em 0.12em 0.02em;
}

.botao {
	display: inline-block;
	padding: 0.62em 1.9em 0.52em;
	border: 0;
	border-radius: 999px;
	background: var(--rosa);
	color: var(--azul);
	font-family: var(--condensada);
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	/* Sombra chapada deslocada, como no material de campanha. Sobre o painel
	   azul da capa ela se confunde com o fundo — é assim na arte também. */
	box-shadow: 0.18em 0.26em 0 var(--azul);
	transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

/* No hover o botão anda na direção da sombra, como se afundasse. */
.botao:hover,
.botao:focus-visible {
	background: var(--branco);
	transform: translate(0.06em, 0.09em);
	box-shadow: 0.12em 0.17em 0 var(--azul);
}

.botao[disabled] {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

.redes {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.redes__link {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--azul);
	color: var(--branco);
	transition: background var(--transicao);
}

.redes__link:hover,
.redes__link:focus-visible {
	background: var(--azul-escuro);
}

.icone-rede {
	width: 60%;
	height: 60%;
	fill: currentColor;
}

/* ==========================================================================
   4. Topo
   ========================================================================== */

.topo {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: clamp(0.75rem, 1.6vw, 1.6rem) var(--gutter);
	transition: padding var(--transicao), background var(--transicao);
}

.topo--fixo {
	padding-block: 0.5rem;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(8px);
}

.topo__barra {
	display: flex;
	align-items: stretch;
	gap: clamp(1rem, 2vw, 2.5rem);
	max-width: 100rem;
	margin-inline: auto;
	background: var(--branco);
	box-shadow: 0 2px 18px rgba(16, 52, 79, 0.14);
}

.topo__marca {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0.6rem clamp(0.9rem, 1.6vw, 1.6rem);
	background: var(--azul);
}

.topo__marca img {
	width: clamp(9rem, 15vw, 13.5rem);
	height: auto;
}

.topo__gatilho {
	position: relative;
	flex: 0 0 auto;
	width: 3rem;
	margin-left: auto;
	border: 0;
	background: none;
	cursor: pointer;
}

.topo__gatilho-traco,
.topo__gatilho-traco::before,
.topo__gatilho-traco::after {
	position: absolute;
	left: 0.75rem;
	width: 1.5rem;
	height: 3px;
	background: var(--azul);
	transition: transform var(--transicao), opacity var(--transicao);
}

.topo__gatilho-traco {
	top: calc(50% - 1.5px);
}

.topo__gatilho-traco::before,
.topo__gatilho-traco::after {
	content: "";
	left: 0;
}

.topo__gatilho-traco::before {
	top: -0.5rem;
}

.topo__gatilho-traco::after {
	top: 0.5rem;
}

.topo__gatilho[aria-expanded="true"] .topo__gatilho-traco {
	background: transparent;
}

.topo__gatilho[aria-expanded="true"] .topo__gatilho-traco::before {
	transform: translateY(0.5rem) rotate(45deg);
}

.topo__gatilho[aria-expanded="true"] .topo__gatilho-traco::after {
	transform: translateY(-0.5rem) rotate(-45deg);
}

.topo__navegacao {
	display: none;
	flex: 1 1 auto;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 3rem);
	padding-right: clamp(0.5rem, 1vw, 1rem);
}

.topo__navegacao.esta-aberto {
	display: flex;
	position: absolute;
	inset: 100% 0 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem var(--gutter) 1.75rem;
	background: var(--branco);
	box-shadow: 0 12px 24px rgba(16, 52, 79, 0.18);
}

.topo__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 2.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.topo__navegacao.esta-aberto .topo__menu {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
}

.topo__link {
	color: var(--azul);
	font-family: var(--condensada);
	font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.1rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.topo__link:hover,
.topo__link[aria-current="true"] {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

.topo__redes {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.topo__redes-rotulo {
	color: var(--azul);
	font-family: var(--condensada);
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
}

.redes--topo .redes__link {
	width: 2.9rem;
	height: 2.9rem;
}

@media (min-width: 64em) {
	.topo__gatilho {
		display: none;
	}

	.topo__navegacao {
		display: flex;
	}
}

/* ==========================================================================
   5. Capa
   ========================================================================== */

.capa {
	position: relative;
	background: var(--verde);
	margin-top: calc(-1 * (clamp(0.75rem, 1.6vw, 1.6rem) * 2 + 4.4rem));
	padding-top: calc(clamp(0.75rem, 1.6vw, 1.6rem) * 2 + 4.4rem);
}

.capa__grade {
	position: relative;
	display: grid;
	max-width: 120rem;
	margin-inline: auto;
}

/* Medidas tiradas da arte (1620x957): o selo tem 62x66 e fica a 59px da borda
   direita. A largura vai em rem, para acompanhar a escala do root; o recuo em
   %, para acompanhar a caixa em que ele está ancorado.

   Essa caixa muda com o layout, e só pelo `position` do pai: no celular a
   `.capa__arte` é relativa e o selo pousa no canto dela, que é onde o fundo
   colorido está — abaixo dali só existe o painel azul do formulário. No
   desktop ela volta a ser estática e o selo sobe para o canto da grade, na
   faixa amarela que a margem do painel abre. */
.capa__selo {
	--selo-largura: clamp(2.75rem, 4vw, 4.1rem);
	--selo-altura: calc(var(--selo-largura) * 66 / 62);

	position: absolute;
	right: 3.6%;
	bottom: 4%;
	z-index: 2;
	width: var(--selo-largura);
	height: auto;
}

/* No celular a marca é centrada e ocupa 88% da arte: no rodapé dela o selo
   cairia em cima do "2201". Vai para o alto, onde a arte é só fundo. */
@media (max-width: 61.99em) {
	.capa__arte {
		position: relative;
	}

	.capa__selo {
		top: 1.25rem;
		bottom: auto;
	}
}

.capa__arte {
	display: flex;
	align-items: flex-end;
	min-height: min(58vh, 30rem);
	padding: 3rem var(--gutter) 2rem;
	background: var(--verde) url("../img/hero-simonia-fundo.jpg") 22% top / cover no-repeat;
}

.capa__marca {
	width: 100%;
}

.capa__marca img {
	width: min(100%, 34rem);
}

/* Abaixo do layout de duas colunas a marca é a única peça do bloco: fica
   centrada, com uma folga nas laterais. Sem o teto de 88% ela encosta nos dois
   gutters e o "2201", que é a linha mais larga da arte, lê como cortado. */
@media (max-width: 61.99em) {
	.capa__marca img {
		width: min(88%, 34rem);
		margin-inline: auto;
	}
}

.capa__cadastro {
	padding: clamp(2rem, 3.4vw, 3.4rem) var(--gutter) clamp(2.5rem, 4vw, 4rem);
	background: var(--azul);
	color: var(--branco);
}

.capa__titulo {
	font-family: var(--display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--rosa);
}

.capa__texto {
	margin-top: 0.9rem;
	font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.12rem);
	line-height: 1.5;
	text-align: justify;
}

@media (min-width: 62em) {
	.capa {
		background: var(--verde) url("../img/hero-simonia-fundo.jpg") center top / cover no-repeat;
	}

	.capa__grade {
		/* Faixa amarela sob o painel do formulário, onde o selo se encaixa. */
		--faixa-selo: clamp(3.5rem, 6vw, 6rem);

		grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
	}

	.capa__selo {
		bottom: calc((var(--faixa-selo) - var(--selo-altura)) / 2);
	}

	.capa__arte {
		min-height: min(78vh, 52rem);
		padding-bottom: clamp(6rem, 8vw, 8.5rem);
		background: none;
	}

	.capa__cadastro {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* Assimétrica de propósito: a margem de baixo é a faixa amarela onde
		   mora o selo do partido. Na arte ela tem 12% da altura da capa; com a
		   margem simétrica de antes sobravam 4,8% e o painel cobria o selo. */
		margin-block: clamp(0.75rem, 1.2vw, 1.2rem) var(--faixa-selo);
		padding-block: clamp(1.5rem, 2.2vw, 2.2rem) clamp(1.6rem, 2.4vw, 2.4rem);
		/* A borda esquerda é um arco de elipse: perto do topo ela avança para
		   dentro do painel. Raio e recuo saem os dois da largura do painel,
		   senão o título escapa pela curva quando a tela estreita. */
		padding-left: 23%;
		border-radius: 30% 0 0 30% / 50% 0 0 50%;
	}

	/* A capa é a única seção que precisa caber na tela de uma vez, e quem manda
	   na altura dela é este painel: a coluna da arte só acompanha a linha da
	   grade. O resto do aperto vertical está no bloco do formulário, mais
	   abaixo — tem de ficar lá porque as regras-base dos campos vêm depois
	   desta media query no arquivo e, com a mesma especificidade, venceriam.

	   A margem de baixo (--faixa-selo) fica de fora de propósito: é ela que
	   reserva a faixa amarela onde o selo do PL se encaixa, e encolhê-la
	   desloca o selo em relação à arte de fundo. */
	.capa__texto {
		margin-top: 0.6rem;
	}

}

/* --------------------------------------------------------------------------
   Faixa do lema

   Linha divisória de largura inteira entre a capa e o corpo da página. A arte
   é uma tira de 1620x75, então na proporção natural ela já entra como filete.
   -------------------------------------------------------------------------- */

.faixa-slogan {
	/* line-height zerado tira o vão de linha que a imagem herdaria do texto e
	   deixaria uma fresta branca entre a faixa e a seção de baixo. */
	line-height: 0;
	background: var(--amarelo);
}

/* Proporção natural em qualquer largura. Foi tentado dar um piso de altura no
   celular com object-fit: cover, para o lema não ficar pequeno demais — mas
   numa tira de 21,6:1 o corte necessário come "FORÇA E" e "POR MINAS", e as
   pontas cortadas leem pior que a tira inteira e fina. */
.faixa-slogan img {
	width: 100%;
	height: auto;
}

/* Formulário de cadastro. */
.cadastro {
	margin-top: clamp(1.1rem, 2vw, 1.8rem);
}

.cadastro__isca {
	position: absolute;
	left: -9999px;
}

.cadastro__campos {
	display: grid;
	gap: clamp(0.5rem, 1vw, 0.85rem);
}

.cadastro__campo {
	margin: 0;
}

.cadastro input,
.cadastro textarea {
	width: 100%;
	padding: 0.85em 1.4em;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--branco);
	color: var(--azul-noite);
	font-family: var(--texto);
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	line-height: 1.3;
}

.cadastro textarea {
	border-radius: 1.75rem;
	min-height: 7.5rem;
	resize: vertical;
}

.cadastro ::placeholder {
	color: #5c6b7a;
	opacity: 1;
}

.cadastro input:user-invalid,
.cadastro textarea:user-invalid {
	border-color: #d64545;
}

.cadastro__acao {
	margin-top: clamp(1rem, 2vw, 1.8rem);
	text-align: right;
}

.cadastro__aviso {
	margin-top: 0.85rem;
	font-size: 0.98rem;
	font-weight: 500;
	text-align: right;
}

.cadastro__aviso:empty {
	display: none;
}

.cadastro__aviso--ok {
	color: var(--amarelo-forte);
}

.cadastro__aviso--erro {
	color: #ffd9d9;
}

/* No desktop o formulário é o que define a altura da capa — a coluna da arte
   só acompanha a linha da grade. Como a capa é a única seção que precisa
   caber na tela de uma vez, aqui os campos ficam mais baixos e os respiros
   mais curtos do que no celular, onde a coluna é empilhada e a página rola.

   Este bloco tem de vir DEPOIS das regras-base acima: a media query da capa
   fica antes delas no arquivo e, com a mesma especificidade, perderia. */
@media (min-width: 62em) {
	.cadastro {
		margin-top: clamp(0.8rem, 1.2vw, 1.1rem);
	}

	.cadastro__campos {
		gap: clamp(0.45rem, 0.65vw, 0.6rem);
	}

	.cadastro input,
	.cadastro textarea {
		padding: 0.62em 1.4em;
	}

	.cadastro textarea {
		min-height: 5.25rem;
	}

	.cadastro__acao {
		margin-top: clamp(0.75rem, 1.2vw, 1.1rem);
	}

	.cadastro__aviso {
		margin-top: 0.5rem;
	}
}

/* ==========================================================================
   6. Quem sou eu
   ========================================================================== */

.quem {
	position: relative;
	overflow: hidden;
	background: var(--rosa);
}

.quem__estrela {
	fill: var(--azul);
}

/* Onde as pontas azuis entram no cartão, a arte usa um azul mais claro. */
.quem__fagulha {
	fill: #a9c5da;
}

.quem__grafismo--secao {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.quem__grafismo--cartao {
	display: none;
}

.quem__grade {
	--quem-respiro: clamp(2.5rem, 5vw, 5rem);

	position: relative;
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	max-width: var(--largura);
	margin-inline: auto;
	padding: var(--quem-respiro) var(--gutter);
}

.quem__cartao {
	position: relative;
	isolation: isolate;
	padding: clamp(1.75rem, 3.4vw, 3.6rem) clamp(1.5rem, 3vw, 3.4rem);
	/* Só os cantos superior-esquerdo e inferior-direito são arredondados. */
	border-radius: clamp(1.75rem, 6.8vw, 6rem) 0;
	background-color: var(--rosa-claro);
}

.quem__cartao > * {
	position: relative;
	z-index: 2;
}

.quem__cartao > .quem__grafismo {
	z-index: 0;
}

/* O grão do layout cobre o cartão inteiro, fagulhas azuis inclusive. */
.quem__cartao::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: url("../img/textura-grao.jpg") repeat;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.quem__titulo,
.quem .titulo-arte {
	font-size: clamp(2.4rem, 1.3rem + 5.2vw, 6rem);
}

.quem__texto {
	display: grid;
	gap: 1.15em;
	margin-top: clamp(1.25rem, 2.4vw, 2.4rem);
	color: #3b3b45;
	font-size: clamp(0.98rem, 0.92rem + 0.28vw, 1.14rem);
	line-height: 1.55;
	text-align: justify;
	hyphens: auto;
}

/* A foto é um recorte cortado na altura do tronco. Com o respiro da seção
   embaixo dela a candidata fica flutuando; encostada na borda inferior, o
   corte passa a ser o limite da seção. No desktop o mesmo efeito vem do
   margin-block negativo mais abaixo, que sobrescreve este. */
.quem__foto {
	display: flex;
	justify-content: center;
	margin-bottom: calc(-1 * var(--quem-respiro));
}

.quem__foto img {
	width: min(100%, 22rem);
}

@media (min-width: 62em) {
	/* O cartão vai de 7,4% a 58,33% da seção, como na arte — é o que faz o
	   grafismo do cartão e o da seção coincidirem na borda direita. */
	.quem__grade {
		grid-template-columns: 58.33% 41.67%;
		align-items: center;
		gap: 0;
		max-width: none;
		padding-inline: 0;
	}

	.quem__cartao {
		margin-left: 12.7%;
	}

	.quem__grafismo--secao {
		display: none;
	}

	.quem__grafismo--cartao {
		display: block;
		position: absolute;
		top: calc(-1 * var(--quem-respiro));
		bottom: calc(-1 * var(--quem-respiro));
		left: 0;
		/* 675/825: da borda direita do cartão até a direita da seção. */
		right: -81.82%;
	}

	/* Em telas muito largas o cartão cresce; a linha de texto, não. */
	.quem__texto {
		max-width: 46rem;
	}

	/* A candidata ocupa a altura inteira da seção, como na arte. Fora do
	   fluxo, senão a altura natural da foto é que passaria a mandar na seção. */
	.quem__foto {
		position: relative;
		z-index: 1;
		align-self: stretch;
		margin-block: calc(-1 * var(--quem-respiro));
	}

	/* O PNG tem margem transparente no topo e nas laterais; os deslocamentos
	   compensam isso para o enquadramento bater com o da arte. */
	.quem__foto img {
		position: absolute;
		top: -7.4%;
		left: -3%;
		width: auto;
		height: 107.6%;
		max-width: none;
	}
}

/* ==========================================================================
   7. Pilares
   ========================================================================== */

.pilares {
	padding: clamp(2rem, 3.6vw, 3.4rem) var(--gutter);
	background: var(--amarelo);
}

.pilares__lista {
	display: grid;
	gap: clamp(0.75rem, 1vw, 0.9rem);
	max-width: var(--largura);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.pilar {
	position: relative;
	display: grid;
	/* Mesma proporcao da arte (506x871): sem ela o object-fit: cover corta a
	   diagonal amarela e o enquadramento das fotos na coluna unica. O teto de
	   largura impede que o painel vire uma torre em telas medias. */
	width: 100%;
	max-width: 22rem;
	margin-inline: auto;
	aspect-ratio: 506 / 871;
}

.pilar__foto {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pilar__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pilar__conteudo {
	position: relative;
	z-index: 1;
	align-self: end;
	padding: clamp(1rem, 2vw, 1.75rem);
}

.pilar__titulo {
	font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.6rem);
}

.pilar__texto {
	max-width: 32ch;
	margin-top: 0.5rem;
	padding: 0.5em 0.75em;
	background: var(--azul);
	color: var(--branco);
	font-family: var(--condensada);
	font-size: clamp(0.82rem, 0.78rem + 0.22vw, 0.98rem);
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
}

@media (min-width: 55em) {
	.pilares__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pilar {
		max-width: none;
		margin-inline: 0;
		aspect-ratio: 500 / 871;
	}

	/* Os títulos passam por cima dos painéis vizinhos, como na arte original. */
	.pilar__conteudo {
		padding-inline: 0;
	}

	.pilar--1 .pilar__foto {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 81% 100%, 0 74.5%);
	}

	.pilar--3 .pilar__foto {
		clip-path: polygon(0 0, 12.8% 0, 100% 26.6%, 100% 100%, 0 100%);
	}

	.pilar--1 .pilar__conteudo {
		margin: 0 -12% 22% -8%;
	}

	.pilar--2 .pilar__conteudo {
		align-self: center;
		margin: 0 -14% 0 -14%;
		text-align: right;
	}

	.pilar--3 .pilar__conteudo {
		margin: 0 -8% 6% -14%;
		text-align: right;
	}

	.pilar--2 .pilar__texto,
	.pilar--3 .pilar__texto {
		margin-left: auto;
		text-align: left;
	}
}

/* ==========================================================================
   8. O que eu já fiz
   ========================================================================== */

.feito {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
	background: var(--azul);
	color: var(--branco);
}

/* A seta chapada que atravessa o fundo. Elemento real, não pseudo-elemento,
   para poder ser animada. */
.feito__seta {
	position: absolute;
	inset: 0;
	background: var(--azul-escuro);
	clip-path: polygon(0 0, 65% 47%, 0 98%);
	pointer-events: none;
}

.feito__interno {
	position: relative;
	max-width: var(--largura);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.feito__titulo {
	font-size: clamp(2.4rem, 1.1rem + 6vw, 6.2rem);
	text-align: center;
}

.feito__lista {
	position: relative;
	display: grid;
	gap: clamp(1rem, 2.2vw, 2.2rem);
	max-width: var(--largura);
	margin: clamp(2rem, 4vw, 4rem) auto 0;
	padding: 0 var(--gutter);
	list-style: none;
}

.feito__faixa {
	display: flex;
	align-items: center;
	min-height: clamp(5rem, 9vw, 9.25rem);
	border-radius: 2.5rem;
	background: var(--amarelo);
	color: var(--tinta);
}

.feito__icone {
	flex: 0 0 auto;
	width: clamp(5rem, 9vw, 9.25rem);
	align-self: stretch;
}

.feito__icone img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.feito__conteudo {
	flex: 1 1 auto;
	padding: clamp(0.9rem, 1.6vw, 1.5rem) 1.75rem clamp(0.9rem, 1.6vw, 1.5rem) 1.25rem;
}

@media (min-width: 55em) {
	.feito__conteudo {
		padding-inline: clamp(1.25rem, 2.4vw, 2.75rem);
	}
}

.feito__item-titulo {
	color: var(--azul);
	font-family: var(--condensada);
	font-size: clamp(1rem, 0.9rem + 0.55vw, 1.4rem);
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
}

.feito__item-texto {
	margin-top: 0.35em;
	font-size: clamp(0.9rem, 0.86rem + 0.28vw, 1.08rem);
	line-height: 1.45;
}

@media (min-width: 55em) {
	.feito__faixa {
		border-radius: 999px;
	}

	/* As faixas passam do gutter da lista, mas só até onde a tela permite: os
	   2rem extras existem enquanto sobra margem fora do palco de --largura.
	   Sem esse limite, entre 880px e 1600px a faixa saía da viewport e levava
	   a primeira letra do título junto. */
	.feito__lista {
		--sangria: clamp(0px, calc((100vw - var(--largura)) / 2), 2rem);
	}

	/* Faixas ímpares: ícone à direita, barra sangrando pela esquerda. */
	.feito__item--direita .feito__faixa {
		flex-direction: row-reverse;
		margin-left: calc(-1 * var(--gutter) - var(--sangria));
		margin-right: 7%;
	}

	.feito__item--direita .feito__conteudo {
		padding-left: clamp(1.5rem, 2.6vw, 3.25rem);
	}

	/* Faixas pares: ícone à esquerda, barra sangrando pela direita. */
	.feito__item--esquerda .feito__faixa {
		margin-left: 13%;
		margin-right: calc(-1 * var(--gutter) - var(--sangria));
	}
}

/* ==========================================================================
   9. Propostas
   ========================================================================== */

.propostas {
	display: grid;
	background: var(--rosa);
}

.propostas__cabecalho {
	display: flex;
	align-items: center;
	padding: clamp(2rem, 4vw, 4rem) var(--gutter) clamp(1rem, 2vw, 2rem);
}

.propostas__titulo {
	font-size: clamp(2.2rem, 1.2rem + 4.6vw, 5rem);
	line-height: 0.92;
}

.propostas__palco {
	position: relative;
	background: var(--rosa);
}

.propostas__trilho {
	margin: 0;
	padding: 0;
	list-style: none;
}

.proposta {
	display: grid;
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: center;
	padding: clamp(2rem, 4vw, 4.5rem) var(--gutter) clamp(2.5rem, 5vw, 5rem);
	background: var(--rosa) var(--fundo) center / cover no-repeat;
}

.proposta[hidden] {
	display: none;
}

.polaroide {
	position: relative;
	margin: 0;
	width: min(100%, 20rem);
	justify-self: center;
	background: var(--branco);
	box-shadow: 0 10px 30px rgba(16, 52, 79, 0.18);
}

.polaroide img {
	width: 100%;
}

/* A arte do polaroide (348x417) já vem com a tarja branca embaixo: 110px, ou
   26,4% da altura. A legenda ocupa essa tarja e se centra nela — fora do
   fluxo, senão ela entra depois da imagem e estica o cartão para além da foto,
   somando a tarja vazia da arte à altura do próprio texto. */
.polaroide__legenda {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	align-content: center;
	height: 26.4%;
	padding-inline: 8%;
	color: var(--azul);
	font-family: var(--condensada);
	font-size: clamp(0.68rem, 0.62rem + 0.24vw, 0.82rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-align: justify;
	text-align-last: center;
	text-transform: uppercase;
}

.proposta__numero {
	color: var(--azul);
	font-family: var(--display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
	line-height: 1;
}

.proposta__titulo {
	margin-top: 0.4em;
	color: var(--azul);
	font-family: var(--condensada);
	font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	font-weight: 600;
	line-height: 1.12;
	text-transform: uppercase;
}

.proposta__descricao {
	margin-top: 0.8em;
	max-width: 34ch;
	color: #33333c;
	font-size: clamp(0.92rem, 0.88rem + 0.28vw, 1.08rem);
	line-height: 1.5;
}

/* No celular a seta ficaria por cima do polaroide: entra no fluxo, abaixo. */
.propostas__controles {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 0 var(--gutter) clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 62em) {
	.propostas__controles {
		position: absolute;
		top: clamp(1rem, 2.5vw, 2.5rem);
		right: var(--gutter);
		padding: 0;
	}
}

.propostas__seta {
	display: grid;
	place-items: center;
	width: clamp(2.5rem, 4vw, 3.5rem);
	height: clamp(2.5rem, 4vw, 3.5rem);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform var(--transicao);
}

.propostas__seta img {
	width: 100%;
	/* A arte é branca e o fundo rosa varia de proposta para proposta. */
	filter: drop-shadow(0 2px 6px rgba(16, 52, 79, 0.5));
}

.propostas__seta:hover {
	transform: translateX(0.2rem);
}

@media (min-width: 62em) {
	.propostas {
		grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
	}

	.propostas__cabecalho {
		padding-block: clamp(3rem, 6vw, 6rem);
	}

	.propostas__titulo {
		margin-left: auto;
		padding-right: clamp(1rem, 2vw, 2rem);
	}

	/* A coluna do polaroide é medida, não `auto`: com `auto` ela encolhia até o
	   tamanho natural da arte (348px) e o cartão ficava preso nesse número
	   enquanto o resto da seção escalava, virando um selo perdido no monitor
	   grande. Em rem ele acompanha a escala do root como as outras peças. */
	.proposta {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 4rem);
		min-height: clamp(24rem, 34vw, 32rem);
		padding-inline: clamp(2rem, 5vw, 6rem) var(--gutter);
	}

	.polaroide {
		width: min(100%, 22rem);
	}
}

/* ==========================================================================
   10. Encerramento
   ========================================================================== */

.encerramento {
	background: var(--verde) url("../img/encerramento-fundo.jpg") 76% center / cover no-repeat;
	color: var(--branco);
}

@media (min-width: 62em) {
	.encerramento {
		background-position: center;
	}
}

.encerramento__interno {
	max-width: var(--largura);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 5.5rem) var(--gutter) clamp(3rem, 6vw, 6rem);
}

.encerramento__titulo {
	font-size: clamp(2.4rem, 1rem + 6.6vw, 7rem);
	text-align: center;
}

.encerramento__texto {
	display: grid;
	gap: 1.1em;
	max-width: 46rem;
	margin: clamp(1.75rem, 3.5vw, 3.5rem) 0 0 auto;
	font-size: clamp(0.95rem, 0.9rem + 0.28vw, 1.12rem);
	line-height: 1.5;
	text-align: justify;
}

.encerramento__chamada {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	max-width: 46rem;
	margin: clamp(1.75rem, 3.5vw, 3rem) 0 0 auto;
}

.encerramento__chamada img {
	width: min(100%, 18rem);
}

.encerramento__acao {
	margin: 0;
}

/* ==========================================================================
   11. Rodapé
   ========================================================================== */

.rodape {
	padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);
	background: var(--azul-noite);
	color: #cdd8e2;
	font-size: 0.9rem;
}

.rodape__interno {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--largura);
	margin-inline: auto;
}

.rodape__legal {
	flex: 1 1 24rem;
	line-height: 1.45;
}

.rodape__credito {
	flex: 1 1 100%;
	color: #93a5b6;
	font-size: 0.82rem;
}

.redes--rodape .redes__link {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 4px;
}

/* ==========================================================================
   12. Animação
   ==========================================================================

   Tudo aqui só vale sob `html.anima`, classe que o script do <head> aplica
   quando há JavaScript e o sistema NÃO pede movimento reduzido. Sem ela, os
   elementos ficam no estado final e a página funciona normalmente — é o que
   acontece com JS desligado, com o GSAP fora do ar ou com "reduzir movimento".
   ========================================================================== */

/* Cortina de abertura. */
.abertura {
	display: none;
}

.anima .abertura {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--verde);
	will-change: transform;
}

.abertura__cunha {
	position: absolute;
	inset: -10% -30% -10% 0;
	background: var(--amarelo);
	clip-path: polygon(0 0, 42% 0, 100% 100%, 0 100%);
	transform: translateX(-115%);
}

.abertura__marca {
	position: relative;
	width: min(74vw, 30rem);
	padding-inline: 1rem;
}

.trava-rolagem {
	overflow: hidden;
}

/* Estados iniciais. Só entram com a classe: se o GSAP não rodar, nada some. */
.anima .anima-surge {
	opacity: 0;
}

.anima .topo__barra {
	opacity: 0;
}

.anima .capa__cadastro {
	opacity: 0;
}

.anima .faixa-slogan {
	opacity: 0;
}

.anima .capa__marca,
.anima .quem__grafismo,
.anima .quem__cartao,
.anima .quem__foto,
.anima .pilar,
.anima .feito__seta,
.anima .feito__titulo,
.anima .feito__item,
.anima .propostas__cabecalho,
.anima .propostas__palco,
.anima .encerramento__titulo,
.anima .encerramento__texto p,
.anima .encerramento__chamada {
	opacity: 0;
}

/* Folga para a paralaxe deslocar a foto sem descobrir a base do painel. */
.anima .pilar__foto img {
	height: 108%;
}

/* A candidata tem o mesmo problema: a paralaxe sobe 6% da altura dela e, sem
   folga, a base descola do fim da seção e ela fica flutuando sobre o azul.
   107,6% + os 6,5% que a paralaxe consome. Só no desktop, que é onde a foto
   é posicionada em absoluto e onde a paralaxe roda. */
@media (min-width: 62em) {
	.anima .quem__foto img {
		height: 114.5%;
	}
}

/* O estado inicial das fagulhas é só a opacidade: o encolhimento é transform
   de SVG e fica por conta do GSAP, que precisa da origem em coordenadas do
   desenho. Misturar os dois faz o triângulo ir parar no lugar errado. */
.anima .quem__fagulha {
	opacity: 0;
}

/* O rodapé não é escondido por nenhum pai; sem estes estados ele apareceria
   inteiro antes de o gatilho de rolagem chegar nele. */
.anima .rodape__legal,
.anima .rodape__credito,
.anima .redes--rodape li {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   Palavras dos títulos

   O script quebra os títulos em <span class="palavra"> e sobe uma a uma. A
   quebra só acontece com o GSAP no ar: sem ele o título continua um texto
   comum, e estas regras não encontram ninguém.
   -------------------------------------------------------------------------- */

.palavra {
	display: inline-block;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* O pai guarda a perspectiva do giro que cada palavra faz no eixo X. */
[data-divide] {
	perspective: 800px;
	transform-style: preserve-3d;
}

/* --------------------------------------------------------------------------
   Peças criadas pelo script

   .barra-progresso, .dica-rolagem e .anel-pulso só existem quando o GSAP roda.
   Nada aqui esconde conteúdo: são camadas de enfeite, sempre por cima.
   -------------------------------------------------------------------------- */

/* Fio no topo da janela com o quanto da página já foi lido. */
.barra-progresso {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--amarelo-forte), var(--rosa));
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

/* Dica de rolagem no canto da capa (só desktop, some ao primeiro scroll). */
.dica-rolagem {
	position: fixed;
	/* À direita: na capa o canto esquerdo de baixo é da barra de slogan. */
	right: 1.6rem;
	bottom: 1.6rem;
	z-index: 40;
	width: 22px;
	height: 38px;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 12px;
	pointer-events: none;
}

.dica-rolagem__traco {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 3px;
	height: 8px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--amarelo-forte);
}

/* Anel que pulsa em volta da seta do carrossel, convidando ao clique. */
.propostas__seta {
	position: relative;
}

/* Fica por fora da seta, não por baixo: um z-index negativo aqui mandaria o
   anel para trás do fundo da seção, que não abre contexto de empilhamento. */
.anel-pulso {
	position: absolute;
	inset: -14%;
	border: 3px solid var(--branco);
	border-radius: 50%;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reações ao ponteiro
   -------------------------------------------------------------------------- */

/* O deslocamento do botão magnético é do GSAP: a transition do CSS só
   atrasaria o acompanhamento do cursor, e o transform do hover brigaria com
   ele. A sombra continua reagindo normalmente. */
.botao.magnetico {
	transition: background var(--transicao), box-shadow var(--transicao);
}

.botao.magnetico:hover,
.botao.magnetico:focus-visible {
	transform: none;
}

/* Sem isto o navegador achata o giro em Y do polaroide. */
.polaroide {
	transform-style: preserve-3d;
}

/* A faixa sobe um fio quando o ponteiro passa por cima dela. */
.feito__faixa {
	transition: transform var(--transicao), box-shadow var(--transicao);
}

@media (hover: hover) and (pointer: fine) {
	.feito__item:hover .feito__faixa {
		transform: translateY(-3px);
		box-shadow: 0 10px 24px rgba(16, 52, 79, 0.28);
	}
}

/* ==========================================================================
   13. Preferências do sistema
   ========================================================================== */

/* A página anima para todo mundo (ver simonia_pl_interruptor_animacao no
   functions.php), então estas regras ficam guardadas atrás de `html:not(.anima)`
   e só voltam a valer com ?anim=0. Sem a guarda elas apagariam também as
   transições de hover no Linux, onde o Chrome liga o "reduzir movimento"
   sozinho — e o botão, o topo e as faixas parariam de responder ao ponteiro. */
@media (prefers-reduced-motion: reduce) {
	html:not(.anima) {
		scroll-behavior: auto;
	}

	html:not(.anima) *,
	html:not(.anima) *::before,
	html:not(.anima) *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}