/* FITZONE — Comunidade, Etapa 2: fundos aprovados e alinhamento visual.
   Feito sem modificar JS de login, dados ou API Supabase.
   Fotos escolhidas: Perfis=2, Feed=1, Histórias=5. */
:root { --cor-comunidade-neon: #a3e635; }

/* Fundo fotográfico de cada pagina, mantendo leve sobreposicao para leitura. */
body.fitzone-perfis {
  background-color:#061006;
  background-image:
    linear-gradient(180deg, rgba(5,13,8,.42),rgba(5,13,8,.66) 78%,rgba(5,13,8,.79)),
    url("midia/comunidade-fundo-perfis.webp");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body.fitzone-feed {
  background-color:#061006;
  background-image:
    linear-gradient(180deg,rgba(3,12,5,.43),rgba(3,12,5,.70) 78%,rgba(3,12,5,.80)),
    url("midia/comunidade-fundo-feed.webp");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body.fitzone-historias {
  background-color:#061006;
  background-image:
    linear-gradient(180deg,rgba(3,13,5,.38),rgba(3,13,5,.65) 78%,rgba(3,13,5,.80)),
    url("midia/comunidade-fundo-historias-fz.webp");
  background-position:center -75px;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* Tema claro conserva a imagem, com contraste mais claro no resto da pagina. */
body.fitzone-perfis.tema-claro {
  background-image:linear-gradient(180deg,rgba(243,248,237,.87),rgba(243,248,237,.93)),url("midia/comunidade-fundo-perfis.webp");
}
body.fitzone-feed.tema-claro {
  background-image:linear-gradient(180deg,rgba(243,248,237,.87),rgba(243,248,237,.93)),url("midia/comunidade-fundo-feed.webp");
}
body.fitzone-historias.tema-claro {
  background-image:linear-gradient(180deg,rgba(243,248,237,.87),rgba(243,248,237,.93)),url("midia/comunidade-fundo-historias-fz.webp");
}

/* 1) Largura padronizada com a pagina de Perfis original. */
body.fitzone-feed .pagina-feed,
body.fitzone-historias .container {
  width:94%;
  max-width:1320px;
  margin-left:auto;
  margin-right:auto;
}
body.fitzone-historias .container { padding:25px 0 80px; }
body.fitzone-historias .cabecalho {
  width:calc(100% - 60px);
  max-width:1460px;
  min-height:100px;
  margin:14px auto 0;
  padding:13px 34px;
}

/* 2) Navegacao Perfis / Feed / Historias alinhada no centro. */
body.fitzone-perfis .fitzone-subnav,
body.fitzone-feed .fitzone-subnav,
body.fitzone-historias .fitzone-subnav {
  justify-content:center;
  background:rgba(10,22,10,.88);
  border-color:rgba(163,230,53,.53);
  box-shadow:0 8px 28px rgba(0,0,0,.23);
  backdrop-filter:blur(8px);
}
body.tema-claro .fitzone-subnav {
  background:rgba(251,255,249,.91);
  border-color:rgba(84,137,23,.42);
}

/* 3) Destaque fotografico maior para as 3 paginas. */
body.fitzone-perfis .apresentacao,
body.fitzone-feed .hero-social,
body.fitzone-historias .hero {
  position:relative;
  overflow:hidden;
  min-height:375px;
  padding:clamp(29px,4.3vw,52px);
  border:1px solid rgba(148,235,47,.53);
  border-radius:25px;
  box-shadow:0 22px 62px rgba(0,0,0,.25),inset 0 0 65px rgba(47,124,14,.10);
  color:#f7fff3;
}
body.fitzone-perfis .apresentacao {
  background:
    linear-gradient(90deg,rgba(5,14,9,.91),rgba(6,20,10,.75) 58%,rgba(7,18,8,.18)),
    url("midia/comunidade-fundo-perfis.webp") center center/cover no-repeat;
}
body.fitzone-feed .hero-social {
  background:
    linear-gradient(90deg,rgba(5,14,9,.94),rgba(7,19,10,.74) 58%,rgba(8,20,8,.18)),
    url("midia/comunidade-fundo-feed.webp") center center/cover no-repeat;
}
body.fitzone-historias .hero {
  background:
    linear-gradient(90deg,rgba(4,20,7,.94) 0%,rgba(12,38,10,.70) 57%,rgba(15,63,10,.15) 100%),
    url("midia/comunidade-fundo-historias-fz.webp") center center/cover no-repeat;
  border-color:rgba(149,255,57,.67);
  box-shadow:0 22px 65px rgba(0,0,0,.28),inset 0 0 70px rgba(102,220,16,.16);
}
body.fitzone-historias .hero::after {
  border-color:rgba(164,255,70,.34);
  box-shadow:0 0 0 65px rgba(145,255,50,.07),0 0 0 130px rgba(120,225,42,.05);
}
/* Verde mais forte, legivel em todos os banners — inclusive no tema claro. */
body.fitzone-perfis .apresentacao h1,
body.fitzone-feed .hero-social h1,
body.fitzone-historias .hero h1 { color:#fff; }
body.fitzone-perfis .apresentacao h1 span,
body.fitzone-feed .hero-social h1 span,
body.fitzone-historias .hero h1 span { color:#a3f22f; text-shadow:0 0 24px rgba(151,252,50,.17); }
body.fitzone-perfis .apresentacao p,
body.fitzone-feed .hero-social p,
body.fitzone-historias .hero p { color:#e0ecda; }
body.fitzone-historias .eyebrow { color:#bfff6e; background:rgba(91,161,26,.21);border-color:rgba(163,244,73,.7); }
body.fitzone-historias .hero .intro-nota { color:#d6ebcf; }

/* 4) Tema no canto superior direito dos tres banners. */
body .comunidade-tema {
  position:absolute;
  top:20px;
  right:22px;
  z-index:4;
  display:inline-flex;
  gap:7px;
  justify-content:center;
  align-items:center;
  min-height:43px;
  padding:10px 15px;
  border:1px solid rgba(151,234,58,.55);
  border-radius:999px;
  background:rgba(4,16,8,.89);
  color:#fff;
  font:700 14px/1.2 Inter,Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 5px 22px rgba(0,0,0,.22);
}
body .comunidade-tema:hover,
body .comunidade-tema:focus-visible { color:#baff5b; border-color:#a3e635; outline-offset:3px; }
body.fitzone-feed .hero-social .botao-tema-feed { /* preservar id e handler existente */
  position:absolute;
  top:20px;
  right:22px;
  margin:0;
}
body.fitzone-perfis .apresentacao h1,
body.fitzone-feed .hero-social h1,
body.fitzone-historias .hero h1 { padding-right:clamp(0px,12vw,105px); }

@media (max-width:760px) {
  body.fitzone-perfis,
  body.fitzone-feed,
  body.fitzone-historias { background-attachment:scroll; }
  body.fitzone-historias .cabecalho { width:calc(100% - 20px);padding:14px 17px; }
  body.fitzone-historias .container { width:94%;padding:18px 0 60px; }
  body.fitzone-perfis .apresentacao,
  body.fitzone-feed .hero-social,
  body.fitzone-historias .hero { min-height:0; padding:25px 21px; }
  body.fitzone-perfis .apresentacao h1,
  body.fitzone-feed .hero-social h1,
  body.fitzone-historias .hero h1 { padding-right:0; }
  body .comunidade-tema,
  body.fitzone-feed .hero-social .botao-tema-feed {
    position:relative;
    top:auto;right:auto;
    margin:0 0 14px;
  }
}
@media (max-width:420px) {
  body.fitzone-perfis .fitzone-subnav,
  body.fitzone-feed .fitzone-subnav,
  body.fitzone-historias .fitzone-subnav { gap:3px;padding:7px 4px; }
  .fitzone-subnav a { padding:10px 11px; }
}
@media (prefers-reduced-transparency:reduce) {
  body.fitzone-perfis .fitzone-subnav,
  body.fitzone-feed .fitzone-subnav,
  body.fitzone-historias .fitzone-subnav { backdrop-filter:none; }
}

/* Contraste correto ao usar Tema claro: barras claras, banner fotografico escuro. */
body.fitzone-perfis.tema-claro .fitzone-subnav,
body.fitzone-feed.tema-claro .fitzone-subnav,
body.fitzone-historias.tema-claro .fitzone-subnav { color:#1b2a16; }
body.tema-claro .fitzone-subnav a:not([aria-current="page"]) { color:#1b2a16; }
body.tema-claro .fitzone-subnav a:not([aria-current="page"]):hover { color:#24570d; }
body.fitzone-historias.tema-claro .cabecalho .nav a:not(.ativo) { color:#1c3018; }
body.fitzone-historias.tema-claro .cabecalho .nav a:hover { color:#4b8717; }
body.fitzone-perfis.tema-claro .apresentacao .botao-outline,
body.fitzone-feed.tema-claro .hero-social .botao-outline {
  color:#f3fff0;
  border-color:rgba(163,230,53,.35);
  background:rgba(8,18,8,.58);
}
body.fitzone-perfis.tema-claro .apresentacao .botao-outline:hover,
body.fitzone-feed.tema-claro .hero-social .botao-outline:hover {
  color:#baff53;
  border-color:#a3e635;
}
body.fitzone-perfis .apresentacao .marca-comunidade { color:#b1fa51; }
body.fitzone-feed .hero-social .sobrelinha { color:#b1fa51; }