/* ==========================================================================
   METANOIA 2026 — #MuitasLutasUmaLuta
   HTML puro + CSS. Cores extraídas dos PNGs exportados do layout (1440px).
   ========================================================================== */

:root {
  --laranja: #ff6332;
  --laranja-escuro: #ff4d23;
  --amarelo: #fbba18;
  --amarelo-vivo: #fddd00;
  --teal: #037a66;
  --teal-claro: #22a488;
  --azul: #3573fa;
  --azul-hero: #1a49f7;
  --azul-claro: #3daee6;
  --verde-claro: #ade095;
  --rosa: #f08fbc;
  --preto: #1a1a1a;
  --branco: #f2f2f2;
  --cinza-borda: #9a9a9a;

  --container: min(1880px, 94vw);
  --fonte: "Archivo", system-ui, -apple-system, sans-serif;
  --fonte-groovy: "Titan One", "Archivo", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fonte);
  background: #fff;
  color: var(--preto);
  line-height: 1.35;
  overflow-x: hidden;
}

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

a { color: inherit; }

.container {
  width: var(--container);
  margin-inline: auto;
}

/* Manchete itálica pesada (voz da campanha) */
.shout {
  font-style: italic;
  font-weight: 900;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Texto condensado em caixa alta (corpo da campanha) */
.cond {
  font-stretch: 82%;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--fonte);
  font-weight: 800;
  font-stretch: 95%;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 0.8em 1.5em;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn:hover { transform: translateY(2px); }
.btn:active { transform: translateY(4px); }

.btn-laranja {
  background: var(--laranja);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
}
.btn-laranja:hover { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }

.btn-laranja-borda {
  background: var(--laranja);
  border: 2.5px solid #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}
.btn-laranja-borda:hover { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }

.btn-azul-claro {
  background: var(--azul-claro);
  border: 2.5px solid var(--preto);
  box-shadow: 0 5px 0 var(--preto);
}
.btn-azul-claro:hover { box-shadow: 0 3px 0 var(--preto); }

.btn-azul {
  background: var(--azul);
  border: 2.5px solid #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}
.btn-azul:hover { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }

.btn-verde {
  background: var(--verde-claro);
  color: var(--preto);
  border: 2.5px solid var(--preto);
  box-shadow: 0 5px 0 var(--preto);
}
.btn-verde:hover { box-shadow: 0 3px 0 var(--preto); }

/* ==========================================================================
   Menu
   ========================================================================== */

.menu {
  background: var(--teal) url("../assets/img/fundo-menu.png") center / cover no-repeat;
}

.menu .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.menu-logo img { width: clamp(130px, 12vw, 175px); height: auto; }

.menu-nav {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.5rem);
}

.menu-nav a {
  color: #fff;
  font-weight: 800;
  font-stretch: 90%;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding-block: 0.3em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

.menu-nav a:hover { border-bottom-color: var(--amarelo-vivo); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--azul-hero) url("../assets/img/fundo-hero.png") center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.hero-badge {
  display: inline-block;
  font-weight: 800;
  font-stretch: 90%;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.14em;
  padding: 0.45em 1.1em;
  border: 2px solid #fff;
  border-radius: 6px;
  margin-bottom: 1.4rem;
}

.hero-title { width: min(100%, 580px); height: auto; }

.hero-sub {
  font-weight: 700;
  font-stretch: 88%;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 1.4rem 0 2rem;
}

/* Colagem de fotos dos participantes — rede de polaroids conectadas */
.hero-colagem {
  position: relative;
  aspect-ratio: 1 / 0.78;
  --base: clamp(78px, 12.6vw, 138px);
}

.colagem-linhas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.colagem-linhas line {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.colagem-linhas circle {
  fill: rgba(255, 255, 255, 0.85);
}

.polaroid {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: calc(var(--base) * var(--s, 1));
  aspect-ratio: 3 / 3.4;
  background: #fff;
  padding: 4px 4px 5px;
  border-radius: 10px;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: var(--z, 2);
}

.polaroid-link {
  display: block;
  width: 100%;
  height: 100%;
}

.polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

.polaroid:nth-of-type(1)  { --x: 1%;  --y: 2%;  --s: 1.05; --r: -8deg; --z: 3; }
.polaroid:nth-of-type(2)  { --x: 24%; --y: -1%; --s: 1.15; --r: 6deg;  --z: 4; }
.polaroid:nth-of-type(3)  { --x: 47%; --y: 3%;  --s: 1;    --r: -5deg; --z: 3; }
.polaroid:nth-of-type(4)  { --x: 69%; --y: 1%;  --s: 1.05; --r: 7deg;  --z: 3; }
.polaroid:nth-of-type(5)  { --x: 9%;  --y: 26%; --s: 1.1;  --r: 6deg;  --z: 5; }
.polaroid:nth-of-type(6)  { --x: 35%; --y: 30%; --s: 0.85; --r: -8deg; --z: 3; }
.polaroid:nth-of-type(7)  { --x: 55%; --y: 25%; --s: 0.95; --r: 5deg;  --z: 4; }
.polaroid:nth-of-type(8)  { --x: 77%; --y: 28%; --s: 1;    --r: -6deg; --z: 3; }
.polaroid:nth-of-type(9)  { --x: -1%; --y: 52%; --s: 1;    --r: -5deg; --z: 3; }
.polaroid:nth-of-type(10) { --x: 23%; --y: 54%; --s: 1.05; --r: 8deg;  --z: 4; }
.polaroid:nth-of-type(11) { --x: 47%; --y: 52%; --s: 0.9;  --r: -6deg; --z: 3; }
.polaroid:nth-of-type(12) { --x: 69%; --y: 50%; --s: 1.1;  --r: 5deg;  --z: 4; }
.polaroid:nth-of-type(13) { --x: 87%; --y: 7%;  --s: 1;    --r: -6deg; --z: 5; }

.polaroid .tag {
  position: absolute;
  left: 50%;
  bottom: -0.6em;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--preto);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.03em;
  padding: 0.25em 0.6em;
  border-radius: 3px;
  white-space: nowrap;
}

.polaroid .tag strong { text-transform: uppercase; }

.deco { position: absolute; width: clamp(18px, 2vw, 30px); height: auto; z-index: 10; }
.deco-1 { top: 6%;   left: 20%; }
.deco-2 { top: 44%;  right: -2%; width: clamp(22px, 2.4vw, 34px); }
.deco-3 { top: 56%;  left: 40%; }
.deco-4 { top: -3%;  right: 8%; }
.deco-5 { bottom: 4%; right: 10%; }

/* ==========================================================================
   Seção 2 — Somos todes
   ========================================================================== */

.sobre {
  background: #fff url("../assets/img/fundo-secao-2.png") center / cover no-repeat;
}

.sobre .container {
  display: grid;
  grid-template-columns: 1.35fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.sobre-titulo {
  font-weight: 900;
  font-stretch: 95%;
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.sobre-hashtag {
  color: var(--laranja);
  font-weight: 900;
  font-stretch: 95%;
  font-size: clamp(1.3rem, 2vw, 2.4rem);
  margin-top: 0.5rem;
}

.sobre-legenda {
  font-size: 1.6rem;
  margin-top: 0.9rem;
  max-width: 42ch;
}

.sobre-texto {
  font-size: clamp(1.15rem, 1.45vw, 1.3rem);
  max-width: 38ch;
}

.sobre-texto-hashtag {
  color: var(--azul);
  font-weight: 900;
  font-stretch: 95%;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  margin-bottom: 0.5rem;
}

.sobre-texto strong { color: var(--preto); font-style: italic; font-weight: 800; }

.sobre-texto .btn { margin-top: 1.5rem; font-size: 1.15rem; padding: 0.75em 1.4em; white-space: nowrap; }

/* Slot de embed do Instagram (reel vertical) */
.embed-slot {
  position: relative;
  width: clamp(180px, 18vw, 250px);
  aspect-ratio: 9 / 16;
  background: var(--preto);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.embed-slot::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Quando o embed for colado dentro do slot, o placeholder some */
.embed-slot:has(iframe)::after,
.embed-slot:has(blockquote)::after { display: none; }

.embed-slot iframe,
.embed-slot blockquote {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0;
}

/* ==========================================================================
   Seção 3 — Porque nenhuma luta acontece sozinha
   ========================================================================== */

.conexao {
  background: var(--teal) url("../assets/img/fundo-secao-3.png") center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}

.conexao-titulo {
  font-size: clamp(1.8rem, 4.6vw, 4rem);
  /* max-width: 18ch; */
  margin-inline: auto;
}

.conexao-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  margin-top: -14px;
}

.conexao-row p {
  font-size: 1.5rem;
  max-width: 30ch;
  margin-inline: auto;
}

.conexao-row img {
  width: clamp(280px, 38vw, 560px);
  height: auto;
}

/* ==========================================================================
   Blocos (acordeão)
   ========================================================================== */

.bloco summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  color: #fff;
  padding-block: clamp(0.9rem, 1.8vw, 1.4rem);
  background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.04));
}

.bloco summary::-webkit-details-marker { display: none; }

.bloco summary .container {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}

.bloco-1 summary { background-color: var(--laranja); }
.bloco-2 summary { background-color: var(--amarelo); }
.bloco-3 summary { background-color: var(--teal-claro); }
.bloco-4 summary { background-color: var(--azul); }
.bloco-5 summary { background-color: var(--preto); }

.chev {
  flex: 0 0 auto;
  width: clamp(32px, 3vw, 40px);
  height: clamp(32px, 3vw, 40px);
  border-radius: 50%;
  background: var(--branco);
  display: grid;
  place-items: center;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.chev svg { width: 55%; height: 55%; transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); }

.bloco-1 .chev svg { color: var(--laranja); }
.bloco-2 .chev svg { color: var(--amarelo); }
.bloco-3 .chev svg { color: var(--teal-claro); }
.bloco-4 .chev svg { color: var(--azul); }
.bloco-5 .chev svg { color: var(--preto); }

.bloco[open] .chev svg { transform: rotate(90deg); }

.bloco summary h2 {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  font-weight: 500;
  font-stretch: 95%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.bloco summary h2 strong {
  font-weight: 900;
  margin-right: 0.5em;
}

.bloco summary:hover .chev { transform: scale(1.08); }

.bloco-conteudo {
  background: #fff;
  padding-block: clamp(1.8rem, 3.5vw, 3rem);
}

.bloco-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.bloco-kicker {
  color: var(--laranja);
  font-weight: 900;
  font-stretch: 95%;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.bloco-header .cond {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 500;
  color: #767676;
  letter-spacing: 0.01em;
  margin-top: 0.35rem;
  max-width: 72ch;
}

/* Cards de participante */
.cards {
  display: grid;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.cards-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 14px;
  background: #fff;
  padding: clamp(0.8rem, 1.4vw, 1.2rem);
}

.card-info {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  align-items: start;
  gap: 0.45rem 0.9rem;
}

.card-foto {
  grid-column: 1;
  grid-row: 1 / 5;
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 10px;
}

.card-info > :not(.card-foto) { grid-column: 2; }

.card-info .card-video { margin-top: 0.5rem; }

.card-nome {
  font-family: var(--fonte-groovy);
  font-weight: 400;
  color: var(--laranja);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1;
}

.card-handle {
  font-weight: 600;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.card-handle a { text-decoration: none; }
.card-handle a:hover { text-decoration: underline; }

.card-video {
  color: var(--azul);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.15;
}

.card-tema {
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 85%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card .embed-slot {
  flex: 0 0 auto;
  align-self: center;
  width: clamp(120px, 10.5vw, 160px);
  border-radius: 12px;
  box-shadow: none;
}

.bloco-vazio {
  border: 1.5px dashed var(--cinza-borda);
  border-radius: 14px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-weight: 700;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
}

/* ==========================================================================
   Conheça a galera
   ========================================================================== */

.galera {
  background: var(--amarelo-vivo) url("../assets/img/fundo-conheca-a-galera.png") center / cover no-repeat;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.galera .container {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2.1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.galera-intro { position: relative; }

.galera-titulo { width: min(100%, 330px); height: auto; }

.galera-mascote {
  width: clamp(90px, 9vw, 130px);
  height: auto;
  margin-top: 1rem;
  margin-left: clamp(0.5rem, 4vw, 3.5rem);
}

.galera-carrossel {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0.5rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--preto) transparent;
}

.galera-card {
  flex: 0 0 clamp(280px, 26vw, 330px);
  scroll-snap-align: start;
  background: url("../assets/img/box-galera.png") center / 100% 100% no-repeat;
  display: grid;
  grid-template-columns: 43% 1fr;
  gap: 0.9rem;
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  aspect-ratio: 611 / 486;
  align-items: start;
}

.galera-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.galera-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  height: 100%;
}

.galera-card-info .card-nome { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }

.galera-bio {
  font-size: 0.7rem;
  font-weight: 600;
  font-stretch: 85%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #444;
}

.galera-card-info .btn {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.8rem;
  padding: 0.55em 1.2em;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Faixa hashtag + newsletter
   ========================================================================== */

.faixa {
  background: var(--laranja) url("../assets/img/fundo-veja-tudo-sobre.png") center / cover no-repeat;
  color: #fff;
}

.faixa .container {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-block: clamp(2rem, 4vw, 3.2rem);
}

.faixa h2 {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
}

.faixa p {
  font-size: 0.9rem;
  margin-block: 0.7rem 1.2rem;
}

.faixa p strong { font-weight: 800; }

.faixa-hashtag p strong { color: var(--amarelo-vivo); }

/* ==========================================================================
   Setas dos carrosséis
   ========================================================================== */

.carrossel-wrap { position: relative; min-width: 0; }

.carrossel-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(40px, 3.4vw, 48px);
  height: clamp(40px, 3.4vw, 48px);
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.carrossel-seta:hover { transform: translateY(-50%) scale(1.1); }
.carrossel-seta:active { transform: translateY(-50%) scale(0.95); }

.carrossel-seta svg { width: 45%; height: 45%; }

.seta-prev { left: clamp(-24px, -1.7vw, -12px); }
.seta-next { right: clamp(-24px, -1.7vw, -12px); }

/* ==========================================================================
   Vote
   ========================================================================== */

.vote {
  background: #fff;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}

.vote h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  font-weight: 400;
}

.vote h2 strong { font-weight: 900; }

.vote-sub {
  font-size: 0.95rem;
  color: #333;
  margin-top: 0.8rem;
  max-width: 75ch;
}

.vote-carrossel {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--azul) transparent;
}

.vote-carrossel .embed-post {
  flex: 0 0 clamp(200px, 18vw, 250px);
  scroll-snap-align: start;
  aspect-ratio: 589 / 736;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.vote-carrossel .embed-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.85);
}

.lightbox[hidden] { display: none; }

.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.6rem);
  right: clamp(0.8rem, 2vw, 1.6rem);
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* ==========================================================================
   CTA final
   ========================================================================== */

.cta {
  background: var(--laranja-escuro) url("../assets/img/fundo-muitas-lutas.png") center / cover no-repeat;
  color: #fff;
}

.cta .container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}

.cta-titulo { font-size: clamp(1.6rem, 3vw, 2.6rem); }

.cta-meio h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  font-weight: 900;
  font-stretch: 95%;
  text-transform: uppercase;
}

.cta-meio p {
  font-weight: 600;
  font-stretch: 88%;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin-block: 0.4rem 1.2rem;
}

.cta-botoes { display: flex; gap: 1rem; flex-wrap: wrap; }

.cta-mascote { width: clamp(110px, 11vw, 170px); height: auto; }

/* ==========================================================================
   Rodapé
   ========================================================================== */

.rodape {
  background: var(--preto);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.8rem;
}

.rodape-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 7vw, 8rem);
  flex-wrap: wrap;
}

.rodape-logo { width: clamp(220px, 24vw, 340px); height: auto; }

.rodape-parceiros {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.8rem);
  flex-wrap: wrap;
}

.rodape-parceiros img { height: clamp(34px, 3.6vw, 48px); width: auto; }

.rodape-social {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.rodape-social a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.rodape-social a:hover { text-decoration: underline; }

.rodape-social img { width: 22px; height: 22px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
  .cards-3 { grid-template-columns: repeat(2, 1fr); }

  .sobre .container {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .sobre-legenda, .sobre-texto { max-width: 55ch; }

  .cta .container {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .cta-titulo { max-width: none; }
  .cta-botoes { justify-content: center; }
}

@media (max-width: 820px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-colagem {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.8rem, 1.6vw, 1.4rem);
    padding: 1rem 0.5rem;
  }
  .colagem-linhas { display: none; }
  .polaroid {
    position: relative;
    left: auto; top: auto; width: auto;
  }
  .hero-colagem .polaroid:nth-of-type(n + 13) { display: none; }

  .conexao-row { grid-template-columns: 1fr; margin-top: 1.5rem; gap: 1.5rem; }
  .conexao-row p { max-width: 46ch; font-size: 1.1rem; }
  .conexao-row img { order: 3; margin-inline: auto; }

  .cards-3 { grid-template-columns: 1fr; }

  .galera .container { grid-template-columns: 1fr; }
  .galera-intro { text-align: center; }
  .galera-titulo { margin-inline: auto; }

  .faixa { background-image: none; }
  .faixa .container {
    width: 100%;
    padding-block: 0;
  }
  .faixa-metade { padding: 2.2rem 6vw; }
  .faixa-hashtag { background: var(--teal); }

  .rodape-topo { justify-content: center; text-align: center; }
}

@media (max-width: 520px) {
  .card { flex-direction: column; }
  .card .embed-slot { width: 70%; margin-inline: auto; }
  .galera-card { flex-basis: 85vw; }
  .hero-colagem { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}