/* ==========================================================================
   FORRÓ DE VERDADE — folha de estilo do site (versão 3, redesign out/2026)
   Identidade: Manual de Marca (Rebranding Forró de Verdade)
   Cores como aparecem na arte final do logo e do presskit:
     marrom #281e1b / areia #f6f0e0 / laranja #db7526 / amarelo #fcc64e
     azul #6dbacd / verde #52b26a / vermelho #d42c2b
   Fontes: Cortese W05 (títulos) + Poppins (texto)
   Linguagem: colagem sobre papel areia, como na capa do presskit
   ========================================================================== */

@font-face {
  font-family: 'Cortese';
  src: url('../fontes/Cortese.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --marrom: #281e1b;
  --marrom-2: #3a2c27;
  --areia: #f6f0e0;
  --areia-2: #ece3cc;
  --laranja: #db7526;
  --amarelo: #fcc64e;
  --azul: #6dbacd;
  --verde: #52b26a;
  --vermelho: #d42c2b;

  --texto: var(--marrom);
  --texto-suave: #5b4a41;
  --foco: var(--marrom);

  --marca: 'Cortese', 'Poppins', sans-serif; /* só no logo, na faixa e no lema */
  --titulo: 'Poppins', system-ui, sans-serif;
  --corpo: 'Poppins', system-ui, sans-serif;

  --largura: 1200px;
  --gutter: clamp(20px, 5vw, 56px);

  --sai: cubic-bezier(.16, 1, .3, 1);

  /* grão de papel, desenhado no próprio navegador */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  scrollbar-color: var(--marrom-2) var(--areia-2);
}

body {
  margin: 0;
  background: var(--areia);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--amarelo); color: var(--marrom); }

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }

.papel { background-color: var(--areia); background-image: var(--grao); }

.pular {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--marrom);
  color: var(--areia);
  border-radius: 12px;
  text-decoration: none;
}
.pular:focus { top: 16px; }

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- tipografia ---------- */

.titulo {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 28px;
  text-wrap: balance;
}

.secao-intro {
  max-width: 46ch;
  color: var(--texto-suave);
  font-size: 1.08rem;
  margin: 0 0 32px;
}

/* faixas coloridas, iguais às da capa do presskit */
.tag {
  display: inline-block;
  padding: .3em .85em .32em;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--marrom);
  border-radius: 8px;
}
.tag-azul { background: var(--azul); }
.tag-amarelo { background: var(--amarelo); }
.tag-verde { background: var(--verde); }

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--sai), box-shadow .25s var(--sai), background-color .2s ease, color .2s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(40,30,27,.6); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-escuro { background: var(--marrom); color: var(--areia); }
.btn-escuro:hover { background: var(--marrom-2); }

.btn-linha { background: transparent; border-color: var(--marrom); color: var(--marrom); }
.btn-linha:hover { background: var(--marrom); color: var(--areia); }

.btn-cheio { width: 100%; }

/* ---------- navegação ---------- */

.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 8px 8px 8px 22px;
  border-radius: 16px;
  background: rgba(40, 30, 27, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 30px -16px rgba(40,30,27,.7);
  color: var(--areia);
  --foco: var(--amarelo);
}

.nav-marca { display: flex; align-items: center; color: var(--areia); }
.nav-marca svg { height: 26px; width: auto; fill: currentColor; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(246,240,224,.78);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.nav-links a:hover, .nav-links a.ativo { color: var(--areia); background: rgba(246,240,224,.1); }

.nav-links .destaque {
  margin-left: 10px;
  background: var(--amarelo);
  color: var(--marrom);
  font-weight: 700;
}
.nav-links .destaque:hover { background: #ffd36e; color: var(--marrom); }

.nav-menu {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-menu span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--areia);
  transition: transform .3s var(--sai), opacity .2s ease;
}

.nav.aberto .nav-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.aberto .nav-menu span:nth-child(2) { opacity: 0; }
.nav.aberto .nav-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav {
    left: 12px;
    right: 12px;
    top: 12px;
    transform: none;
    justify-content: space-between;
    padding: 6px 6px 6px 18px;
  }
  .nav-menu { display: block; }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border-radius: 16px;
    background: var(--marrom);
    box-shadow: 0 20px 40px -18px rgba(40,30,27,.8);
    clip-path: inset(0 0 100% 0 round 16px);
    visibility: hidden;
    transition: clip-path .4s var(--sai), visibility 0s .4s;
  }
  .nav.aberto .nav-links {
    clip-path: inset(0 0 0 0 round 16px);
    visibility: visible;
    transition: clip-path .4s var(--sai), visibility 0s;
  }
  .nav-links a { padding: 14px 12px; font-size: 1rem; }
  .nav-links .destaque { margin: 8px 0 0; text-align: center; }
}

/* ---------- hero ---------- */

.hero {
  --logo-w: min(430px, 30vw);
  min-height: 100svh;
  display: grid;
  /* bloco de texto e trio juntos, centralizados na tela */
  grid-template-columns: auto minmax(0, 620px);
  justify-content: center;
  /* texto e trio apoiados na mesma base: o logo começa na altura dos chapéus */
  align-items: end;
  gap: 0 clamp(48px, 7vw, 110px);
  padding: 110px var(--gutter) 0;
  overflow: hidden;
}

.hero-texto {
  width: max-content;
  max-width: 100%;
  padding-bottom: clamp(56px, 9vh, 96px);
  /* espaço à esquerda para o sol: logo, frase e botões começam na mesma linha */
  padding-left: calc(var(--logo-w) * .2);
}

/* o logo montado em camadas, pra cada símbolo entrar no seu tempo */
.logo-composto {
  position: relative;
  width: var(--logo-w);
  margin: 0 0 calc(var(--logo-w) * .19);
  aspect-ratio: 608 / 293;
  color: var(--laranja);
  font-size: 1rem;
}

.logo-svg { position: relative; z-index: 2; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.logo-sol, .logo-onda, .logo-peixe { position: absolute; height: auto; }
.logo-sol   { z-index: 1; width: 42%; left: -26%; top: -2%; }
.logo-onda  { z-index: 1; width: 56%; left: 61%; top: 32%; }
.logo-peixe { z-index: 3; width: 28%; left: 72%; top: 92%; }

.hero-frase {
  margin: 0 0 30px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
  max-width: 22ch;
}

.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-trio {
  position: relative;
  align-self: end;
  width: 100%;
}

.hero-trio img {
  width: 100%;
  height: auto;
  max-height: calc(100svh - 120px);
  object-fit: contain;
  object-position: bottom;
  position: relative;
  z-index: 1;
}

/* sol da marca atrás do trio, no lugar dos raios da capa */
.hero-trio .hero-trio-sol {
  position: absolute;
  z-index: 0;
  width: 92%;
  left: 4%;
  top: -8%;
  animation: solEntra 1.4s var(--sai) .2s both;
}

/* entrada do topo: o logo é carimbado e os símbolos chegam um por um */
@keyframes carimbo { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } }
@keyframes solEntra { from { opacity: 0; transform: rotate(-140deg) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes solGira { to { transform: rotate(360deg); } }
@keyframes ondaEntra { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes peixeEntra { from { opacity: 0; transform: translateX(60%) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes trioSobe { from { opacity: 0; transform: translateY(8%); } to { opacity: 1; transform: none; } }

.logo-svg   { animation: carimbo .6s var(--sai) .15s both; }
.logo-sol   { animation: solEntra 1.1s var(--sai) .45s both, solGira 70s linear 1.55s infinite; }
.logo-onda  { animation: ondaEntra .9s var(--sai) .7s both; }
.logo-peixe { animation: peixeEntra 1s var(--sai) .9s both; }
.hero-frase { animation: sobe .8s var(--sai) 1s both; }
.hero-acoes { animation: sobe .8s var(--sai) 1.1s both; }
.hero-trio img { animation: trioSobe 1.2s var(--sai) .3s both; }

@media (max-width: 860px) {
  .hero {
    --logo-w: min(360px, 62vw);
    grid-template-columns: 1fr;
    padding-top: 104px;
    min-height: 0;
  }
  .hero-texto { width: auto; padding-bottom: 8px; }
  .hero-trio { justify-self: center; max-width: 560px; margin-top: 12px; }
  .hero-trio img { max-height: none; }
}

/* só no computador: trio maior e logo um pouco mais baixo e à esquerda */
@media (min-width: 861px) {
  .hero { grid-template-columns: auto minmax(0, 720px); }
  .hero-trio img { max-height: calc(100svh - 90px); }
  .hero .logo-composto { top: 28px; left: -24px; }
}

/* ---------- faixa que corre ---------- */

.faixa {
  position: relative;
  z-index: 5;
  margin: -26px -2vw 0;
  padding: 14px 0 12px;
  background: var(--azul);
  transform: rotate(-1.4deg);
  overflow: hidden;
  box-shadow: 0 10px 24px -16px rgba(40,30,27,.6);
}

.faixa-trilho {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: corre 48s linear infinite;
}

.faixa span {
  font-family: var(--marca);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--marrom);
}

.faixa img { height: 30px; width: auto; }

@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- release ---------- */

.release-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}

.release-abre .abre {
  margin: 0 0 20px;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 30ch;
}

.release-abre p { margin: 0; max-width: 46ch; color: var(--texto-suave); font-size: 1.08rem; }
.release-abre q { color: var(--marrom); font-weight: 600; }

.release-pontos { margin: 0; padding-top: 12px; display: grid; gap: 40px; }
.ponto dt { margin: 0 0 12px; }
.ponto dd { margin: 0; max-width: 44ch; color: var(--texto-suave); }

/* colagem: cada faixa entra um pouco torta, como recortada à mão */
.ponto:nth-child(1) .tag { transform: rotate(-1.5deg); }
.ponto:nth-child(2) .tag { transform: rotate(1deg); }
.ponto:nth-child(3) .tag { transform: rotate(-.8deg); }

@media (max-width: 860px) {
  .release-grade { grid-template-columns: 1fr; }
}

/* ---------- galeria ---------- */

.galeria {
  height: min(88vh, 900px);
  min-height: 460px;
  padding: 0;
  overflow: hidden;
  background: var(--marrom);
  color: var(--areia);
  --foco: var(--amarelo);
}

.galeria-pista {
  display: flex;
  height: 100%;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1);
  touch-action: pan-y;
}

.galeria-slide { flex: 0 0 100%; height: 100%; }
.galeria-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* ajuste fino de enquadramento por foto, pra não cortar o assunto principal */
.galeria-slide:nth-child(1) img  { object-position: center 32%; }
.galeria-slide:nth-child(2) img  { object-position: center 38%; }
.galeria-slide:nth-child(3) img  { object-position: center 42%; }
.galeria-slide:nth-child(4) img  { object-position: center 28%; }
.galeria-slide:nth-child(6) img  { object-position: center 25%; }
.galeria-slide:nth-child(7) img  { object-position: center 36%; }
.galeria-slide:nth-child(8) img  { object-position: center 26%; }
.galeria-slide:nth-child(11) img { object-position: center 26%; }

.galeria-barra {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 120px var(--gutter) 30px;
  background: linear-gradient(to top, rgba(28,20,18,.88), rgba(28,20,18,0));
}

.galeria-legenda {
  margin: 0;
  margin-right: auto;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
}

.galeria-controles { display: flex; align-items: center; gap: 12px; }

.galeria-seta {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(246,240,224,.5);
  background: transparent;
  color: var(--areia);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.galeria-seta:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--marrom); }

.galeria-contador {
  min-width: 64px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.galeria-banco {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--amarelo);
}
.galeria-banco:hover { color: var(--amarelo); }

@media (max-width: 640px) {
  .galeria { height: 72vh; }
  .galeria-barra { padding-bottom: 20px; }
  .galeria-legenda { flex-basis: 100%; }
  .galeria-banco { order: 3; }
}

/* ---------- integrantes ---------- */

.integrantes {
  background-color: var(--marrom);
  background-image: var(--grao);
  color: var(--areia);
  --foco: var(--amarelo);
}

.integrantes-topo { text-align: center; margin-bottom: 44px; }
.integrantes .titulo { margin-bottom: 0; }

.integrantes-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.integrante {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--marrom-2);
  cursor: pointer;
  text-align: left;
}

.integrante img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: scale(var(--img-escala, 1));
  transition: transform .7s var(--sai);
}
.integrante:hover img { transform: scale(calc(var(--img-escala, 1) * 1.05)); }

.integrante-info {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  padding: 48px 18px 16px;
  background: linear-gradient(to top, rgba(28,20,18,.92) 30%, rgba(28,20,18,0));
}

.integrante-funcao { font-size: .85rem; font-weight: 600; color: var(--amarelo); }
.integrante-nome {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--areia);
}

@media (max-width: 640px) {
  .integrantes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .integrante-info { padding: 40px 12px 12px; }
  .integrante-funcao { font-size: .78rem; }
}

/* ---------- modal do integrante ---------- */

.integrante-modal {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100svh - 48px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--marrom-2);
  color: var(--areia);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
  --foco: var(--amarelo);
}

.integrante-modal::backdrop { background: rgba(20, 14, 12, .82); backdrop-filter: blur(4px); }

.integrante-modal[open] { animation: modalEntra .45s var(--sai); }
@keyframes modalEntra { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }

.integrante-modal-caixa { position: relative; display: grid; grid-template-columns: 280px 1fr; }

.integrante-modal-caixa img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }

.integrante-modal-texto { padding: 40px 36px; align-self: center; }
.integrante-modal-texto h3 {
  margin: 4px 0 16px;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.integrante-modal-texto p { margin: 0; color: rgba(246,240,224,.86); }

.integrante-modal-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(40,30,27,.7);
  color: var(--areia);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.integrante-modal-fechar:hover { background: var(--amarelo); color: var(--marrom); }

@media (max-width: 640px) {
  .integrante-modal-caixa { grid-template-columns: 1fr; }
  .integrante-modal-caixa img { min-height: 0; max-height: 42svh; }
  .integrante-modal-texto { padding: 24px 22px 28px; }
  .integrante-modal-texto h3 { font-size: 1.75rem; }
}

/* ---------- presskit ---------- */

.presskit-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}

.presskit-itens { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 10px; justify-items: start; }

/* mesmo desencontro das faixas da capa */
.presskit-itens li:nth-child(even) { margin-left: clamp(24px, 6vw, 72px); }
.presskit-itens li:nth-child(1) .tag { transform: rotate(-1deg); }
.presskit-itens li:nth-child(3) .tag { transform: rotate(.8deg); }
.presskit-itens li:nth-child(4) .tag { transform: rotate(-.6deg); }

.presskit-capa {
  position: relative;
  display: block;
  border-radius: 12px;
  transform: rotate(-3deg);
  transition: transform .6s var(--sai);
}
.presskit-capa > img:first-child {
  border-radius: 12px;
  box-shadow: 0 30px 50px -24px rgba(40,30,27,.55);
}
.presskit-capa:hover { transform: rotate(0) translateY(-6px); }

.presskit-peixe {
  position: absolute;
  width: 34%;
  left: -14%;
  bottom: 10%;
  transform: rotate(-12deg);
  filter: drop-shadow(0 8px 10px rgba(40,30,27,.25));
}

@media (max-width: 860px) {
  .presskit-grade { grid-template-columns: 1fr; }
  .presskit-capa { max-width: 300px; margin: 0 auto; }
}

/* ---------- redes ---------- */

.redes { padding-top: 0; }

.redes-grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding-top: clamp(64px, 9vw, 110px);
  border-top: 2px solid rgba(40,30,27,.12);
}

.redes-texto p { margin: 0 0 28px; max-width: 36ch; color: var(--texto-suave); font-size: 1.08rem; }

.instagram-mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.instagram-mosaico img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  transition: transform .5s var(--sai);
}
.instagram-mosaico:hover img { transform: scale(.97); }
.instagram-mosaico:hover img:hover { transform: scale(1.03); }

@media (max-width: 860px) {
  .redes-grade { grid-template-columns: 1fr; }
}

/* ---------- contato ---------- */

.contato {
  overflow: hidden;
  background: var(--amarelo);
  color: var(--marrom);
}

.contato-sol {
  position: absolute;
  width: min(620px, 90vw);
  right: -12%;
  top: -18%;
  opacity: .5;
  filter: saturate(1.6) brightness(.92);
  animation: solGira 90s linear infinite;
  pointer-events: none;
}

.contato-centro { position: relative; text-align: center; }
.contato-centro .titulo { margin-bottom: 18px; }
.contato-centro p { margin: 0 auto 34px; max-width: 40ch; font-size: 1.12rem; }

.btn-grande { min-height: 62px; padding: 16px 36px; font-size: 1.1rem; }

/* ---------- parceiros ---------- */

.parceiros { padding: 56px 0 64px; text-align: center; }

.parceiros-legenda {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto-suave);
}

.parceiros-grade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px clamp(20px, 4vw, 48px);
}

.parceiro { display: flex; align-items: center; height: 120px; border-radius: 12px; }
.parceiro img { max-height: 110px; width: auto; transition: transform .4s var(--sai); }
.parceiro:hover img { transform: scale(1.05); }

@media (max-width: 600px) {
  .parceiro { height: 80px; }
  .parceiro img { max-height: 70px; }
}

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

.rodape {
  background-color: var(--marrom);
  background-image: var(--grao);
  color: var(--areia);
  padding: 64px 0 28px;
  --foco: var(--amarelo);
}

.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  gap: 40px clamp(32px, 6vw, 90px);
  align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(246,240,224,.14);
}

.rodape-marca svg { width: 220px; height: auto; fill: var(--laranja); }
.rodape-marca p { margin: 14px 0 0; font-family: var(--marca); font-size: 1.6rem; line-height: 1; color: var(--amarelo); }

.rodape-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rodape-links a { text-decoration: none; color: rgba(246,240,224,.78); transition: color .2s ease; }
.rodape-links a:hover { color: var(--amarelo); }

.rodape-fim { padding-top: 22px; font-size: .85rem; color: rgba(246,240,224,.62); }

@media (max-width: 640px) {
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
}

/* ---------- ajustes gerais no celular ---------- */

/* celular: compacto e centralizado, pra leitura correr solta (o PC não muda) */
@media (max-width: 640px) {
  body { font-size: .875rem; line-height: 1.6; }
  section { padding: 48px 0; }
  .container { padding: 0 28px; }

  .titulo { font-size: 1.5rem; line-height: 1.15; margin-bottom: 12px; letter-spacing: -.02em; }
  .secao-intro { font-size: .875rem; margin-bottom: 18px; text-wrap: balance; }
  .release .container { padding: 0 32px; }
  .contato-centro p, .redes-texto p { text-wrap: balance; }
  .tag { font-size: .75rem; padding: .3em .75em; }

  .btn { min-height: 40px; padding: 8px 14px; gap: 7px; font-size: .8rem; border-width: 1.5px; }
  .btn .icone { width: 1.1em; height: 1.1em; }
  .btn-grande { min-height: 44px; padding: 10px 20px; font-size: .875rem; }

  /* menu */
  .nav { padding: 4px 4px 4px 14px; }
  .nav-marca svg { height: 20px; }
  .nav-menu { width: 38px; height: 38px; }
  .nav-menu span { width: 18px; }
  .nav-links a { padding: 10px 12px; font-size: .875rem; }

  /* topo: tudo centralizado */
  .hero { --logo-w: min(210px, 54vw); padding-top: 104px; text-align: center; }
  .hero-texto { width: 100%; padding: 0 0 4px; }
  .hero .logo-composto { margin: 0 auto 20px; left: 4%; }
  .hero .logo-peixe { top: 84%; width: 25%; }
  .hero-frase { font-size: .9rem; max-width: none; margin: 0 auto 14px; }
  .hero-acoes { justify-content: center; gap: 8px; flex-wrap: nowrap; }
  .hero-trio { max-width: 280px; margin-top: 10px; }

  /* faixa */
  .faixa { margin-top: -12px; padding: 7px 0 6px; }
  .faixa-trilho { gap: 14px; }
  .faixa span { font-size: .95rem; }
  .faixa img { height: 14px; }

  /* release */
  .release-grade { gap: 28px; }
  .release-abre .abre { font-size: .95rem; line-height: 1.55; margin-bottom: 10px; }
  .release-abre p { font-size: .85rem; }
  .release-pontos { gap: 18px; padding-top: 0; }
  .ponto dt { margin-bottom: 6px; }
  .ponto dd { font-size: .85rem; }

  /* fotos */
  .galeria { height: 52vh; min-height: 320px; }
  .galeria-barra { padding: 70px 18px 14px; gap: 8px 12px; }
  .galeria-legenda { font-size: 1.1rem; }
  .galeria-controles { gap: 6px; }
  .galeria-seta { width: 30px; height: 30px; border-width: 1.5px; }
  .galeria-seta .icone { width: 15px; height: 15px; }
  .galeria-contador { min-width: 38px; font-size: .72rem; }
  .galeria-banco { font-size: .72rem; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

  /* quem somos */
  .integrantes-topo { margin-bottom: 18px; }
  .integrantes-grade { max-width: 280px; gap: 7px; }
  .integrante { border-radius: 10px; }
  .integrante-info { padding: 24px 8px 7px; }
  .integrante-funcao { font-size: .62rem; }
  .integrante-nome { font-size: .78rem; }
  .integrante-modal { width: min(300px, calc(100% - 48px)); }
  /* foto baixa e larga: enquadra pelo rosto, não pelo meio */
  .integrante-modal-caixa img { max-height: 24svh; object-position: center 22%; }
  .integrante-modal-texto { padding: 14px 24px 20px; }
  .integrante-modal-texto .integrante-funcao { font-size: .64rem; }
  .integrante-modal-texto h3 { font-size: .95rem; margin: 1px 0 6px; }
  .integrante-modal-texto p { font-size: .74rem; line-height: 1.55; }
  .integrante-modal-fechar { width: 34px; height: 34px; top: 8px; right: 8px; }

  /* presskit: coluna central */
  .presskit-grade { gap: 30px; text-align: center; }
  .presskit .secao-intro { max-width: 30ch; margin-left: auto; margin-right: auto; }
  .presskit-itens { justify-items: center; gap: 6px; margin-bottom: 20px; }
  .presskit-itens li:nth-child(even) { margin-left: 0; }
  .presskit-capa { max-width: 160px; }
  .presskit .titulo { font-size: 2.2rem; }

  /* redes */
  .redes-grade { gap: 22px; padding-top: 44px; text-align: center; }
  .redes-texto p { font-size: .875rem; margin: 0 auto 14px; }
  .instagram-mosaico { max-width: 280px; margin: 0 auto; gap: 4px; }
  .instagram-mosaico img { border-radius: 8px; }

  /* contato */
  .contato-centro p { font-size: .875rem; margin-bottom: 18px; max-width: 30ch; }
  .contato-sol { width: 260px; right: -32%; top: -10%; }

  /* parceiros */
  .parceiros { padding: 32px 0 36px; }
  .parceiros-legenda { font-size: .78rem; margin-bottom: 10px; }
  .parceiros-grade { gap: 8px 14px; flex-wrap: nowrap; }
  .parceiro { height: 44px; }
  .parceiro img { max-height: 40px; max-width: 60px; object-fit: contain; }

  /* rodapé: tudo centralizado */
  .rodape { padding: 36px 0 20px; text-align: center; }
  .rodape-grade { grid-template-columns: 1fr; justify-items: center; gap: 16px; padding-bottom: 20px; }
  .rodape-marca svg { width: 64px; }
  .rodape-marca p { font-size: .9rem; margin-top: 6px; }
  .rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: .78rem; }
  .rodape-fim { font-size: .7rem; padding-top: 14px; text-align: center; }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .faixa-trilho { animation: none; }
}