/* ==========================================================
   eu komuniko, hub das comunidades de torcida
   Uma pagina escura, responsiva, sem dependencias externas
   ========================================================== */

/* tokens de cor e medidas */
:root{
  /* fundos */
  --preto: #0A0B0E;
  --preto-2: #0E1014;
  --grafite: #14161C;
  --grafite-2: #191C23;

  /* texto */
  --branco: #FFFFFF;
  --texto: #E6E7EB;
  --texto-suave: #A2A7B3;
  --texto-fraco: #757B88;

  /* linhas e vidros */
  --linha: rgba(255,255,255,0.10);
  --linha-forte: rgba(255,255,255,0.20);
  --vidro: rgba(255,255,255,0.05);

  /* destaque do hub */
  --destaque: #E4141E;

  /* cores por comunidade */
  --eurofla: #E4141E;
  --dallas: #2E6BE6;
  --gilvicente: #ED1C24;

  /* medidas */
  --largura: 1200px;
  --gutter: 20px;
  --topo-altura: 68px;
  --raio: 18px;
  --raio-pequeno: 999px;

  /* tipografia condensada dos titulos */
  --condensado: 66%;
}

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: "Saira", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a{ color: inherit; text-decoration: none; }

h1,h2,h3{
  margin: 0;
  font-weight: 900;
  font-stretch: var(--condensado);
  line-height: 1.02;
  letter-spacing: 0.005em;
}

/* foco visivel para teclado */
a:focus-visible{
  outline: 2px solid var(--branco);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ====================== topo fixo ====================== */
.topo{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--topo-altura);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: rgba(10,11,14,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}

.marca{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.marca-simbolo{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.marca-texto{
  font-weight: 800;
  font-stretch: 70%;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--branco);
  white-space: nowrap;
}

.marca-realce{ color: var(--destaque); }

/* ====================== hero ====================== */
.hero{
  position: relative;
  min-height: min(88vh, 760px);
  padding: calc(var(--topo-altura) + 56px) var(--gutter) 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--preto);
  background-image: url("../assets/fundo-hub.svg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* degrade que amarra o hero na secao seguinte */
.hero::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(10,11,14,0) 0%, var(--preto) 92%);
  pointer-events: none;
}

.hero-conteudo{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 840px;
  animation: sobe 600ms ease-out both;
}

@keyframes sobe{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

.badge{
  display: inline-block;
  margin: 0 0 22px;
  padding: 7px 16px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  background: var(--vidro);
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.titulo{
  font-size: clamp(2.9rem, 9.2vw, 6.6rem);
  font-stretch: 62%;
  text-transform: uppercase;
  color: var(--branco);
  text-shadow: 0 14px 40px rgba(0,0,0,0.55);
}

.titulo-linha{ display: block; }

/* segunda linha mais leve, para dar ritmo */
.titulo-linha + .titulo-linha{
  color: var(--texto);
  font-weight: 800;
}

.sub{
  margin: 24px auto 0;
  max-width: 62ch;
  color: var(--texto-suave);
  font-size: clamp(1rem, 2.4vw, 1.14rem);
}

/* traco decorativo com as tres cores */
.traco{
  display: block;
  width: 132px;
  height: 4px;
  margin: 34px auto 0;
  border-radius: var(--raio-pequeno);
  background: linear-gradient(90deg, var(--eurofla) 0 33%, var(--dallas) 33% 66%, var(--gilvicente) 66% 100%);
  box-shadow: 0 0 26px rgba(228,20,30,0.35);
}

/* ====================== titulos de secao ====================== */
.secao-titulo{
  margin: 0 0 34px;
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  font-stretch: 68%;
  text-transform: uppercase;
  color: var(--branco);
}

.secao-titulo::after{
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 14px;
  border-radius: var(--raio-pequeno);
  background: var(--destaque);
}

/* ====================== como funciona ====================== */
.funciona{
  max-width: var(--largura);
  margin: 0 auto;
  padding: 8px var(--gutter) 72px;
}

.funciona-lista{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.passo{
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--grafite) 0%, var(--preto-2) 100%);
}

.passo-numero{
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  font-stretch: 62%;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,0.28);
  margin-bottom: 14px;
}

.passo-titulo{
  font-size: 1.22rem;
  font-stretch: 72%;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 8px;
}

.passo-texto{
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.98rem;
}

/* ====================== cartoes das comunidades ====================== */
.comunidades{
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter) 84px;
}

.grade{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cartao{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha);
  border-top: 3px solid var(--cor, var(--destaque));
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--grafite-2) 0%, var(--preto-2) 100%);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* cor propria de cada comunidade */
.cartao-eurofla{ --cor: #E4141E; }
.cartao-dallas{ --cor: #2E6BE6; }
.cartao-gilvicente{ --cor: #ED1C24; }

.cartao:hover,
.cartao:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 0 1px var(--cor), 0 0 38px -6px var(--cor);
}

/* capa com degrade escuro por cima */
.cartao-capa{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000000;
}

.cartao-capa img:not(.cartao-selo){
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

.cartao-capa::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,11,14,0.30) 0%, rgba(10,11,14,0.62) 55%, rgba(14,16,20,0.96) 100%);
}

/* selo sobreposto, a cavalo entre a capa e o corpo */
.cartao-selo{
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: -26px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.75));
}

.cartao-corpo{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 44px 24px 26px;
}

.cartao-nome{
  font-size: 1.5rem;
  font-stretch: 68%;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 10px;
}

.cartao-linha{
  margin: 0 0 16px;
  color: var(--texto-suave);
  font-size: 0.98rem;
}

/* etiqueta de idioma */
.pilula{
  align-self: flex-start;
  margin: 0 0 22px;
  padding: 4px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  background: var(--vidro);
  color: var(--texto-fraco);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* botao na cor da comunidade */
.botao{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--cor, var(--destaque));
  color: var(--branco);
  font-size: 0.98rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.02em;
  text-align: center;
  transition: filter 180ms ease, transform 180ms ease;
}

.botao:hover{ filter: brightness(1.12); }
.botao:active{ transform: translateY(1px); }

.botao-seta{
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.cartao:hover .botao-seta{ transform: translateX(4px); }

/* ====================== rodape ====================== */
.rodape{
  border-top: 1px solid var(--linha);
  padding: 34px var(--gutter) 46px;
  text-align: center;
  background: var(--preto);
}

.rodape-assinatura{
  margin: 0 0 12px;
  color: var(--texto);
  font-weight: 700;
  font-stretch: 78%;
  font-size: 1.02rem;
}

.rodape-aviso{
  margin: 0 auto;
  max-width: 72ch;
  color: var(--texto-fraco);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* ====================== tablet ====================== */
@media (max-width: 900px){
  .funciona-lista,
  .grade{ grid-template-columns: 1fr; }

  .funciona-lista{ gap: 16px; }
  .grade{ gap: 22px; }

  .passo{ padding: 22px 20px 24px; }
}

/* ====================== telemovel ====================== */
@media (max-width: 560px){
  :root{ --gutter: 16px; }

  body{ font-size: 16px; }

  .hero{
    min-height: 0;
    padding: calc(var(--topo-altura) + 44px) var(--gutter) 60px;
    background-position: center center;
  }

  .titulo{ font-size: clamp(2.5rem, 13vw, 3.6rem); }

  .badge{
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 6px 13px;
  }

  .marca-texto{ font-size: 1.12rem; }

  .cartao-selo{
    width: 84px;
    height: 84px;
    left: 18px;
    bottom: -22px;
  }

  .cartao-corpo{ padding: 38px 18px 22px; }
  .cartao-nome{ font-size: 1.34rem; }
}

/* ====================== movimento reduzido ====================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  *,
  *::before,
  *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .cartao:hover,
  .cartao:focus-within{ transform: none; }

  .cartao:hover .botao-seta{ transform: none; }
}