/* André Castro · Chapa 07 · Transforma Corinthians
   Identidade tirada do plano de governo: preto, branco, vermelho do coração (#E82828), Montserrat pesada.
   Números de camisa em Bebas Neue (o 27 nas costas do André = 27 compromissos). */

@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
/* números: a mesma Montserrat Black dos títulos (pedido do Bruno); a vaga "Camisa" aponta para ela */
@font-face { font-family: "Camisa"; src: url("assets/fonts/montserrat-latin-900-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --preto: #000000;
  --carvao: #141414;      /* superfícies elevadas */
  --grafite: #2b2b2b;     /* linhas e o "07" marca d'água */
  --cinza: #9a9a9a;       /* texto secundário */
  --branco: #ffffff;
  --vermelho: #e82828;    /* coração da chapa */
  --margem: clamp(20px, 5vw, 72px);
  --larg: 1320px;
  --fs-corpo: clamp(17px, 1.15vw, 19px);
  --fs-gigante: clamp(36px, 9.5vw, 168px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--preto); color: var(--branco);
  font-family: "Montserrat", system-ui, sans-serif; font-size: var(--fs-corpo); line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--branco); color: var(--preto); padding: 10px 16px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }

.titulo-gigante {
  font-weight: 900; font-size: var(--fs-gigante); line-height: .88; letter-spacing: -0.035em;
  text-transform: uppercase; margin: 0 0 .35em; overflow-wrap: break-word;
}
@media (max-width: 560px) { .titulo-gigante { font-size: 10.4vw; } }
.numero-camisa { font-family: "Camisa", "Montserrat", sans-serif; font-weight: 400; letter-spacing: -0.04em; }

/* ---------- topo ---------- */
.topo {
  position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--margem); transition: background .3s, transform .4s;
}
.topo.solido { background: rgba(0, 0, 0, .86); backdrop-filter: blur(8px); }
.topo__marca img { height: clamp(56px, 5vw, 78px); width: auto; }
.topo__nav { display: flex; gap: clamp(14px, 2.4vw, 34px); align-items: center; font-size: 14px; font-weight: 700; }
.topo__nav a { text-decoration: none; opacity: .85; }
.topo__nav a:hover { opacity: 1; }
.topo__pdf { border: 2px solid var(--branco); padding: 8px 14px; opacity: 1 !important; }
.topo__insta { display: inline-flex; padding: 4px; }
@media (max-width: 760px) {
  .topo__nav a:not(.topo__pdf):not(.topo__insta) { display: none; }
  .topo__marca img { height: 46px; }
  .topo__pdf { font-size: 13px; padding: 7px 12px; }
}

/* ---------- hero ---------- */
.hero { position: relative; }
.hero__palco { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--preto); }
/* computador: foto à direita, bordas se dissolvendo no preto; texto à esquerda */
.hero__foto { position: absolute; top: 0; bottom: 0; right: clamp(0px, 6vw, 120px); display: block; will-change: transform; }
.hero__foto img { height: 100%; width: auto; max-width: none; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 74%, transparent 100%);
  mask-composite: intersect; }
.hero__veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 26%); }
.hero__abertura { position: absolute; left: var(--margem); bottom: clamp(56px, 11vh, 120px); max-width: 640px; }
.hero__chapa { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 18px; font-size: 15px; font-weight: 700; }
.hero__07 { margin-right: 14px; }
.hero__chapa-a { margin-right: .3em; }
.hero__07 { font-family: "Camisa", sans-serif; letter-spacing: -0.04em; font-size: 38px; line-height: 1; color: var(--vermelho); }
.hero__nome { font-weight: 900; font-size: clamp(64px, 11vw, 190px); line-height: .84; letter-spacing: -0.045em; text-transform: uppercase; margin: 0; }
.hero__nome img { width: clamp(280px, 34vw, 600px); height: auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.5)); }
@media (max-width: 1000px) { .hero__rolar { display: none; } }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__acoes .botao { min-height: 48px; font-size: 14px; padding: 0 20px; }
.hero__rolar { position: absolute; left: var(--margem); bottom: 28px; font-size: 13px; font-weight: 700; color: var(--cinza); display: flex; align-items: center; gap: 12px; }
.hero__rolar span { width: 1px; height: 46px; background: linear-gradient(var(--vermelho), transparent); animation: descer 1.8s ease-in-out infinite; }
@keyframes descer { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-aspect-ratio: 4/5) {
  /* celular: foto na tela inteira, rosto no alto; o texto fica embaixo, sobre os braços */
  .hero__foto { inset: 0; right: 0; }
  .hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 100%); }
  .hero__veu { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,0) 52%); }
  .hero__abertura { bottom: 40px; right: var(--margem); }
  .hero__nome img { width: min(60vw, 270px); }
  /* "07 Chapa" na primeira linha, "Transforma Corinthians" na segunda */
  .hero__chapa { font-size: 14px; line-height: 1.25; margin-bottom: 14px; }
  .hero__07 { font-size: 26px; margin-right: 8px; }
  .hero__chapa-b { flex-basis: 100%; margin-top: 2px; }
  .hero__acoes { margin-top: 16px; gap: 10px; }
  .hero__acoes .botao { min-height: 44px; font-size: 13px; padding: 0 14px; flex: 1 1 auto; }
  .hero__rolar { display: none; }
}

/* ---------- manifesto ---------- */
.manifesto { position: relative; padding: clamp(110px, 16vw, 220px) var(--margem) clamp(90px, 12vw, 160px); overflow: hidden; }
.manifesto__marca {
  position: absolute; right: -0.06em; bottom: -0.18em; font-family: "Camisa", sans-serif; font-size: clamp(320px, 52vw, 900px);
  line-height: 1; color: var(--grafite); opacity: .55; pointer-events: none; user-select: none;
}
.manifesto__corpo { position: relative; max-width: var(--larg); margin: 0 auto; }
.manifesto__texto { max-width: 33em; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.45; font-weight: 500; }
.manifesto__texto p { margin: 0 0 1.1em; }
.manifesto__texto .palavra { opacity: .18; transition: opacity .2s; }
.manifesto__texto .palavra.acesa { opacity: 1; }
.manifesto__fecho { font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.15; }

.manifesto__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; position: relative; }
.manifesto__completo { max-width: 40em; margin-top: 44px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.65; color: #d8d8d8; position: relative; }
.manifesto__completo p { margin: 0 0 1em; }
.manifesto__completo .manifesto__fecho { color: var(--branco); }

/* ---------- motion: letras dos títulos sobem por trás de uma máscara ---------- */
.letras { display: inline-block; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em;
  clip-path: inset(-0.6em -0.25em 0 -0.25em); }  /* corta só embaixo: acentos (Ã, É) e bordas das letras grossas não somem */
.letras.solta { clip-path: none; }
.letras > span { display: inline-block; will-change: transform; }

/* ---------- números do plano ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--grafite); border-bottom: 2px solid var(--grafite); }
.numero { padding: clamp(28px, 4vw, 56px) var(--margem) clamp(28px, 4vw, 48px); border-right: 2px solid var(--grafite); display: flex; flex-direction: column; gap: 14px; }
.numero:last-child { border-right: 0; }
.numero__valor { font-family: "Camisa", sans-serif; letter-spacing: -0.05em; font-size: clamp(56px, 6.6vw, 118px); line-height: .85; color: var(--branco); font-variant-numeric: tabular-nums; }
.numero__barra { display: block; height: 4px; background: var(--grafite); overflow: hidden; }
.numero__barra i { display: block; height: 100%; background: var(--vermelho); transform-origin: left; transform: scaleX(1); }
.numero__rotulo { font-weight: 700; font-size: 16px; line-height: 1.3; max-width: 12em; }
@media (max-width: 860px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero:nth-child(2) { border-right: 0; }
  .numero:nth-child(-n+2) { border-bottom: 2px solid var(--grafite); }
}

/* ---------- faixa ---------- */
.faixa { overflow: hidden; padding: clamp(40px, 6vw, 90px) 0; border-bottom: 2px solid var(--grafite); }
.faixa__linha { display: flex; gap: .5em; white-space: nowrap; font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(54px, 9vw, 160px); line-height: 1.02; will-change: transform; }
.faixa__linha span::after { content: "07"; font-family: "Camisa", sans-serif; font-weight: 400; color: var(--vermelho); font-size: .8em; margin-left: .5em; letter-spacing: 0; }
.faixa__linha--b { margin-top: .12em; color: transparent; -webkit-text-stroke: 2px var(--branco); transform: translateX(-30%); }

/* ---------- vitrine dos eixos (rolagem horizontal no computador) ---------- */
.vitrine { position: relative; }
.vitrine__fixa { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 120px) 0 60px; }
.vitrine__titulo { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(36px, 5.6vw, 96px); line-height: .9; margin: 0 var(--margem) 40px; }
.vitrine__trilho { display: flex; gap: clamp(18px, 2vw, 32px); padding: 0 var(--margem); will-change: transform; }
.painel { flex: 0 0 auto; width: min(76vw, 1080px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--carvao); min-height: min(64vh, 620px); }
.painel__foto { position: relative; overflow: hidden; margin: 0; background: #222; }
.painel__foto img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.painel__credito { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: rgba(255,255,255,.75); text-shadow: 0 1px 4px #000; }
.painel__texto { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; }
.painel__eixo { font-family: "Camisa", sans-serif; letter-spacing: -0.05em; font-size: 76px; line-height: .8; color: var(--vermelho); }
.painel__eixo small { font-size: .32em; color: var(--cinza); margin-left: .25em; }
.painel h3 { font-weight: 900; font-size: clamp(24px, 2.4vw, 40px); line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; margin: 18px 0 18px; }
.painel ul { list-style: none; margin: 0 0 24px; padding: 0; font-size: 15px; }
.painel li { padding: 9px 0; border-top: 1px solid #2a2a2a; display: flex; gap: 12px; }
.painel li b { font-family: "Camisa", sans-serif; font-weight: 400; letter-spacing: -0.03em; font-size: 16px; line-height: 1; color: var(--cinza); min-width: 1.4em; }
.painel .botao { margin-top: auto; align-self: flex-start; }
.vitrine__progresso { height: 3px; background: var(--grafite); margin: 34px var(--margem) 0; }
.vitrine__progresso i { display: block; height: 100%; background: var(--vermelho); transform-origin: left; transform: scaleX(0); }
@media (max-width: 860px) {
  /* celular: mesma rolagem horizontal, foto em cima e texto embaixo, cabendo em uma tela */
  /* o título rola para fora e o card ocupa a tela inteira (a trava começa quando o card encosta no topo) */
  .vitrine__fixa { display: block; padding: 76px 0 0; }
  .vitrine__titulo { margin-bottom: 28px; }
  .vitrine__trilho { height: calc(100vh - 38px); height: calc(100svh - 38px); gap: 14px; }
  .painel { width: 86vw; grid-template-columns: 1fr; grid-template-rows: 48% minmax(0, 1fr); min-height: 0; height: 100%; }
  @media (max-height: 720px) { .painel { grid-template-rows: 42% minmax(0, 1fr); } }
  .painel li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .painel__foto { height: auto; }
  .painel__texto { padding: 14px 18px 14px; min-height: 0; overflow: hidden; }
  .painel__eixo { font-size: 44px; }
  .painel h3 { font-size: 19px; margin: 8px 0 10px; }
  .painel ul { font-size: 13px; margin-bottom: 6px; }
  .painel li { padding: 5px 0; gap: 10px; }
  .painel li b { font-size: 13px; }
  .painel .botao { min-height: 44px; font-size: 13px; padding: 0 16px; }
  .vitrine__progresso { margin: 12px var(--margem) 13px; }
}

/* ---------- trajetória ---------- */
.trajetoria { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; min-height: 100vh; }
.trajetoria__foto { margin: 0; height: 100%; max-height: 100vh; overflow: hidden;
  /* fundo cinza do estúdio se dissolve no preto do site (sem recorte reto) */
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 70%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 80%, transparent 100%);
  mask-composite: intersect; }
.trajetoria__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; will-change: transform, clip-path; }
.trajetoria__citacao { margin: 0; padding: var(--margem); }
.trajetoria__citacao p { font-size: clamp(34px, 4.6vw, 80px); line-height: 1.02; font-weight: 400; letter-spacing: -0.03em; margin: 0 0 .5em; }
.trajetoria__citacao p::before { content: "“"; display: block; font-family: "Montserrat"; font-weight: 900; color: var(--vermelho); font-size: 1.6em; line-height: .6; }
.trajetoria__citacao strong { font-weight: 900; }
.trajetoria__citacao footer { color: var(--cinza); font-size: 15px; font-weight: 700; }
@media (max-width: 860px) {
  .trajetoria { grid-template-columns: 1fr; min-height: 0; }
  .trajetoria__foto { max-height: 70vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 78%, transparent 100%); }
}

/* ---------- 27 compromissos ---------- */
.compromissos { padding: clamp(100px, 12vw, 180px) var(--margem); max-width: calc(var(--larg) + 2 * var(--margem)); margin: 0 auto; }
.compromissos__cabeca { display: block; }
.compromissos__cabeca .titulo-gigante { font-size: clamp(36px, 8.6vw, 150px); overflow-wrap: normal; margin-bottom: .2em; }
.compromissos__sub { max-width: 34em; }
.compromissos__cabeca .numero-camisa { color: var(--vermelho); font-size: 1.18em; margin-right: .06em; }
.compromissos__sub { color: #cfcfcf; margin: 0 0 1.8em; }
@media (max-width: 560px) { .compromissos__cabeca .titulo-gigante { font-size: 10.4vw; } }

.eixos { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 40px; }
.eixo {
  font: 700 14px/1 "Montserrat", sans-serif; color: var(--branco); background: transparent; cursor: pointer;
  border: 2px solid var(--grafite); border-radius: 999px; padding: 11px 18px;
}
.eixo:hover { border-color: var(--cinza); }
.eixo.ativo { background: var(--branco); color: var(--preto); border-color: var(--branco); }

.placar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--grafite); border: 2px solid var(--grafite); }
.placar li { background: var(--preto); }
.placar li.oculto { display: none; }
.cartela {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: auto 1fr; gap: 10px; width: 100%; height: 100%;
  min-height: 230px; padding: 22px 22px 26px; position: relative; overflow: hidden;
}
.cartela__n { font-family: "Camisa", sans-serif; letter-spacing: -0.05em; font-size: 104px; line-height: .85; color: transparent; -webkit-text-stroke: 2px #4a4a4a; transition: color .25s, -webkit-text-stroke-color .25s; }
.cartela__t { font-size: 16px; font-weight: 700; line-height: 1.3; align-self: end; }
.cartela__e { font-size: 12px; color: var(--cinza); font-weight: 500; margin-top: 6px; display: block; }
.cartela:hover .cartela__n, .cartela:focus-visible .cartela__n { color: var(--vermelho); -webkit-text-stroke-color: var(--vermelho); }
.cartela:focus-visible { outline: 3px solid var(--vermelho); outline-offset: -3px; }
@media (max-width: 640px) {
  .eixos { flex-wrap: nowrap; overflow-x: auto; margin: 10px calc(-1 * var(--margem)) 28px; padding: 0 var(--margem) 6px; scrollbar-width: none; }
  .eixos::-webkit-scrollbar { display: none; }
  .eixo { flex: 0 0 auto; }
  .placar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartela { min-height: 170px; padding: 14px 14px 18px; }
  .cartela__n { font-size: 58px; -webkit-text-stroke-width: 1.5px; }
  .cartela__t { font-size: 14px; }
  .cartela__e { display: none; }
}

/* ---------- detalhe ---------- */
.detalhe { padding: 0; border: 0; max-width: none; max-height: none; width: min(680px, 100vw); height: 100vh; height: 100dvh; margin: 0 0 0 auto; background: var(--carvao); color: var(--branco); }
.detalhe::backdrop { background: rgba(0, 0, 0, .7); }
.detalhe[open] { animation: entrar .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes entrar { from { transform: translateX(40px); opacity: 0; } }
.detalhe__caixa { position: relative; padding: clamp(28px, 4vw, 56px); min-height: 100%; }
.detalhe__fechar { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; font-size: 34px; line-height: 1; background: none; border: 0; color: var(--branco); cursor: pointer; }
.detalhe__eixo { color: var(--cinza); font-size: 14px; font-weight: 700; margin: 0 56px 0 0; }
.detalhe__numero { font-size: 112px; line-height: .85; letter-spacing: -0.05em; color: var(--vermelho); margin: 14px 0 6px; }
.detalhe__titulo { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 28px; }
.detalhe h4 { font-size: 13px; color: var(--cinza); font-weight: 700; margin: 26px 0 8px; }
.detalhe p { margin: 0; }
.detalhe ul { margin: 0; padding-left: 1.1em; }
.detalhe li { margin: 0 0 .45em; }
.detalhe li::marker { color: var(--vermelho); }
.detalhe__resultado { font-weight: 700; }
.detalhe__nav { display: flex; gap: 12px; margin-top: 40px; }

/* ---------- linha do tempo ---------- */
.linha { padding: clamp(100px, 12vw, 180px) var(--margem); max-width: calc(var(--larg) + 2 * var(--margem)); margin: 0 auto; }
.linha__trilho { height: 3px; background: var(--grafite); position: relative; margin: 10px 0 0; }
.linha__progresso { position: absolute; inset: 0; background: var(--vermelho); transform-origin: left; transform: scaleX(0); }
.linha__etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.etapa { position: relative; padding-top: 34px; }
.etapa::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--preto); border: 3px solid var(--grafite); transition: background .3s, border-color .3s; }
.etapa.ativa::before { background: var(--vermelho); border-color: var(--vermelho); }
.etapa h3 { margin: 0 0 16px; font-weight: 900; font-size: clamp(38px, 4.4vw, 72px); line-height: .9; letter-spacing: -0.03em; text-transform: uppercase; }
.etapa ul { margin: 0; padding-left: 1.1em; color: #d4d4d4; font-size: 16px; }
.etapa li { margin-bottom: .55em; }
.etapa li::marker { color: var(--vermelho); }
.linha__nota { color: var(--cinza); font-size: 14px; margin: 44px 0 0; max-width: 46em; }
@media (max-width: 860px) {
  .linha__trilho { display: none; }
  .linha__etapas { grid-template-columns: 1fr; gap: 0; border-left: 3px solid var(--grafite); padding-left: 26px; }
  .etapa { padding: 0 0 44px; }
  .etapa::before { left: -36px; top: 8px; }
}

/* ---------- objetivos ---------- */
.objetivos { padding: clamp(80px, 10vw, 160px) var(--margem); max-width: calc(var(--larg) + 2 * var(--margem)); margin: 0 auto; }
.objetivos__lista { list-style: none; margin: 0; padding: 0; counter-reset: obj; }
.objetivos__lista li {
  counter-increment: obj; display: grid; grid-template-columns: clamp(64px, 9vw, 140px) minmax(0, 1fr); align-items: baseline;
  padding: 26px 0; border-top: 2px solid var(--grafite); font-size: clamp(22px, 2.6vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em;
}
.objetivos__lista li:last-child { border-bottom: 2px solid var(--grafite); }
.objetivos__lista li { position: relative; }
.objetivos__lista li::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--vermelho); transform-origin: left; transform: scaleX(var(--barra, 1)); }
.objetivos__lista li::before { transform: translateX(var(--num-x, 0)); opacity: var(--num-o, 1); display: inline-block; }
.objetivo__texto { display: block; }
.objetivos__lista li::before { content: counter(obj); font-family: "Camisa", sans-serif; font-weight: 400; color: var(--vermelho); font-size: 1.3em; line-height: .85; letter-spacing: -0.04em; }

/* ---------- final ---------- */
.final { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 0; padding: clamp(80px, 10vw, 140px) 0 0 var(--margem); background: linear-gradient(180deg, var(--preto), var(--carvao)); }
.final__texto { padding-bottom: clamp(60px, 8vw, 120px); padding-right: clamp(20px, 3vw, 48px); }
.final .titulo-gigante { font-size: clamp(34px, 5.6vw, 104px); overflow-wrap: normal; }
@media (max-width: 560px) { .final .titulo-gigante { font-size: 10.4vw; } }
.final blockquote { margin: 0; max-width: 34em; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; }
.final blockquote p { margin: 0 0 1em; }
.final__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.final__aviso { min-height: 1.5em; color: var(--cinza); font-size: 14px; }
.final__foto { margin: 0; align-self: end; overflow: hidden; }
/* bordas em degradê na própria imagem: a foto se dissolve no fundo em vez de terminar num recorte reto (acompanha o parallax) */
.final__foto img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-composite: intersect; }
@media (max-width: 860px) {
  .final__foto img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 86%, transparent 100%);
  }
}
.final { overflow: hidden; }
.final__foto img { width: 100%; height: auto; }
@media (max-width: 860px) { .final { grid-template-columns: 1fr; padding-right: var(--margem); } .final__foto { margin: 0 calc(-1 * var(--margem)); } }

.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; font: 800 15px/1 "Montserrat", sans-serif; text-decoration: none; cursor: pointer; border: 2px solid var(--branco); }
.botao--cheio { background: var(--vermelho); border-color: var(--vermelho); color: var(--branco); }
.botao--cheio:hover { background: #c81d1d; border-color: #c81d1d; }
.botao--linha { background: transparent; color: var(--branco); }
.botao--linha:hover { background: var(--branco); color: var(--preto); }

/* ---------- rodapé ---------- */
.rodape { padding: 60px var(--margem) 64px; border-top: 2px solid var(--grafite); display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; color: var(--cinza); font-size: 14px; }
.rodape img { height: clamp(54px, 5vw, 72px); width: auto; }
.rodape p { margin: 0; }
.rodape__insta { display: inline-flex; align-items: center; gap: 10px; color: var(--branco); font-weight: 700; font-size: 15px; text-decoration: none; }
.rodape__insta:hover { color: var(--vermelho); }

/* ---------- Fiel por Elas ---------- */
.fiel { padding: clamp(90px, 11vw, 170px) var(--margem); max-width: calc(var(--larg) + 2 * var(--margem)); margin: 0 auto; }
.fiel__topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.fiel__logo { width: min(100%, 520px); margin: 0 0 clamp(28px, 3vw, 44px); }
.fiel .titulo-gigante { font-size: clamp(34px, 5.4vw, 96px); overflow-wrap: normal; }
.fiel .titulo-gigante .letras:last-child { color: var(--vermelho); }
.fiel__intro { color: #d6d6d6; max-width: 34em; margin: 0; }
.fiel__foto { margin: 0; overflow: hidden; }
.fiel__foto img { width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect; }
.fiel__sub { font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(20px, 2vw, 30px); line-height: 1.1; margin: clamp(56px, 7vw, 100px) 0 24px; }
.fiel__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; background: var(--grafite); counter-reset: fiel; }
.fiel__lista li { counter-increment: fiel; background: var(--carvao); padding: clamp(22px, 2.4vw, 34px); }
.fiel__lista li::before { content: counter(fiel); display: block; font-family: "Camisa", sans-serif; letter-spacing: -0.04em; font-size: 54px; line-height: .85; color: var(--vermelho); margin-bottom: 16px; }
.fiel__lista h4 { margin: 0 0 10px; font-weight: 900; font-size: 19px; line-height: 1.15; text-transform: uppercase; letter-spacing: -0.01em; }
.fiel__lista p { margin: 0; font-size: 15px; line-height: 1.55; color: #cfcfcf; }
.fiel__depto { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 2px solid var(--grafite); }
.fiel__depto p { margin: 0; max-width: 46em; color: #d6d6d6; }
.fiel__depto strong { color: var(--branco); }
@media (max-width: 1180px) {
  .fiel__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiel__lista li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .fiel__lista { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .fiel__topo { grid-template-columns: 1fr; }
  .fiel__foto { max-width: 460px; }
}
@media (max-width: 560px) { .fiel .titulo-gigante { font-size: 10.4vw; } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__palco { position: relative; }
  .hero__rolar span { animation: none; }
  .manifesto__texto .palavra { opacity: 1; }
  .detalhe[open] { animation: none; }
}

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }