:root{
  /* base clara */
  --bg:#eef0f2;
  --bg-soft:#f6f7f8;
  --fg:#1a1c22;
  --muted:#6b7280;
  --card-radius:20px;

  /* marcas */
  --yt:#ff0000;
  --ig1:#feda75; --ig2:#fa7e1e; --ig3:#d62976; --ig4:#962fbf; --ig5:#4f5bd5;
  --tt-dark:#010101; --tt-pink:#ff0050; --tt-cyan:#00f2ea;
  --fb:#1877f2;
  --twitch:#9146ff;
  --kick:#53fc18;
  --x:#000000;

  /* acento */
  --accent:#e8b34a;
  --maxw:600px;
}

*{box-sizing:border-box}
html,body{
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  color:var(--fg);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  position:relative;
  /* Vermelho vivo com halo dourado central atrás da foto — cores vivas */
  background-color:#cf1c23;
  background-image:
    radial-gradient(680px 680px at 50% 4%, rgba(250,208,90,.60), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(226,60,45,.55), transparent 60%),
    linear-gradient(180deg, #e12a2c 0%, #a81419 100%);
  background-attachment:fixed;
}

/* Textura grunge sutil por cima do fundo — dá aspereza orgânica sem
   competir com o conteúdo. Fixa, atrás de tudo (z-index 0). */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("../img/grunge.png");
  background-size:200px 200px;
  background-repeat:repeat;
  opacity:.08;
  mix-blend-mode:overlay;
}
/* garante que o conteúdo fique acima da textura */
.lt{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:36px 18px 56px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---- Avatar com anel em degradê ---- */
.lt__header{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.lt__avatar{margin-bottom:22px}
.lt__ring{
  --ring:5px;
  --d:200px;
  width:min(var(--d), 72vw);
  height:min(var(--d), 72vw);
  border-radius:50%;
  padding:var(--ring);
  background:conic-gradient(from 210deg,
    var(--ig1), var(--ig2), var(--yt), var(--ig3), var(--ig4), var(--ig5), var(--ig1));
  box-shadow:0 14px 34px rgba(214,41,118,.18);
}
.lt__photo{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  background:#fff;
  border:4px solid var(--bg-soft);
}

/* ---- Ícones sociais ---- */
.lt__social{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(6px, 2.2vw, 16px);
  margin-bottom:34px;
  width:100%;
  max-width:100%;
  padding:0 4px;
}
.social{
  --brand:#333;
  /* 7 ícones + 6 gaps precisam caber na largura útil.
     min() garante que nunca estourem: ~10.5vw por ícone no estreito,
     limitado a 52px no desktop. */
  --sz:min(52px, 10.5vw);
  display:grid;place-items:center;
  width:var(--sz);height:var(--sz);
  flex:0 0 auto;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.social svg{width:50%;height:50%}
.social svg path,.social svg circle{fill:#fff}
.social[data-net="tiktok"] svg path{fill:revert-layer}
/* TikTok mantém as cores inline do próprio SVG */
.social[data-net="tiktok"] svg path:nth-child(1){fill:#00f2ea}
.social[data-net="tiktok"] svg path:nth-child(2){fill:#ff0050}
.social[data-net="tiktok"] svg path:nth-child(3){fill:#fff}
.social:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 12px 24px rgba(0,0,0,.24)}

.social[data-net="youtube"]{--brand:var(--yt)}
.social[data-net="facebook"]{--brand:var(--fb)}
.social[data-net="twitch"]{--brand:var(--twitch)}
.social[data-net="x"]{--brand:var(--x)}
.social[data-net="kick"]{--brand:var(--kick)}
/* Kick tem fundo claro (verde-limão), então o ícone fica escuro */
.social[data-net="kick"] svg path{fill:#0e1016}
.social[data-net="instagram"]{
  background:radial-gradient(circle at 30% 107%,
    var(--ig1) 0%, var(--ig2) 25%, var(--ig3) 55%, var(--ig4) 78%, var(--ig5) 100%);
}
.social[data-net="tiktok"]{
  background:var(--tt-dark);
  position:relative;
}
/* leve glow ciano/rosa do tiktok no hover */
.social[data-net="tiktok"]:hover{
  box-shadow:0 0 0 2px rgba(0,242,234,.4), 4px 4px 14px rgba(255,0,80,.35),
             -4px -4px 14px rgba(0,242,234,.35);
}

/* ---- Cards ---- */
.lt__cards{width:100%;display:flex;flex-direction:column;gap:18px}
.lt__card{
  display:block;
  line-height:0;
  transition:transform .2s ease, filter .2s ease;
}
/* Card de imagem: PNG já tem cantos e transparência — sem fundo/moldura.
   Sombra segue o formato da imagem (drop-shadow), não a caixa. */
.lt__card:has(.card-img){
  filter:drop-shadow(0 8px 18px rgba(24,28,40,.22));
}

/* Wrapper em camadas: borda animada + glow + imagem */
.card-img{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:793/250;
  isolation:isolate;
  --card-radius:20px;   /* raio dos cantos do banner, p/ o trajeto da luz */
}
.card-img > img{
  position:relative;
  z-index:2;
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}

/* Ponto de luz caminhando pela borda: um degradê radial suave percorre o
   perímetro arredondado do card via offset-path, criando um glow que dá a
   volta lentamente. O resto da borda fica apagado. */
.card-img__border,
.card-img__glow{
  position:absolute;
  inset:-2px;
  z-index:3;
  pointer-events:none;
  border-radius:calc(var(--card-radius) + 2px);
  padding:3px;
  /* recorta só a moldura (anel arredondado) */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  overflow:hidden;
}
/* Ponto de luz girando via transform:rotate — repinta de forma confiável
   em todos os navegadores (diferente de conic com custom prop animada,
   que não repinta em alguns engines). O ::before é um cônico grande que
   roda; a máscara acima deixa só a borda visível. */
.card-img__border::before,
.card-img__glow::before{
  content:"";
  position:absolute;
  width:250%;
  height:900%;
  top:-400%;
  left:-75%;
  animation:card-ring-rot 8s linear infinite;
}
.card-img__border::before{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    transparent 270deg,
    rgba(255,215,130,.85) 325deg,
    #fff 348deg,
    rgba(255,215,130,.85) 356deg,
    transparent 360deg);
}
/* segundo ponto de luz, defasado meia volta (lado oposto) */
.card-img__glow::before{
  background:conic-gradient(from 180deg,
    transparent 0deg,
    transparent 285deg,
    rgba(255,200,110,.6) 330deg,
    rgba(255,235,170,.9) 348deg,
    rgba(255,200,110,.6) 358deg,
    transparent 360deg);
  filter:blur(1px);
}

@keyframes card-ring-rot{
  to{ transform:rotate(360deg); }
}

/* Card HTML mantém fundo, cantos e sombra de caixa. */
.lt__card:has(> .htmlcard){
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:0 10px 26px rgba(24,28,40,.10), 0 2px 6px rgba(24,28,40,.06);
}
.lt__card:hover{
  transform:translateY(-4px);
}
.lt__card:has(.card-img):hover{
  filter:drop-shadow(0 14px 26px rgba(24,28,40,.30));
}
.lt__card:has(> .htmlcard):hover{
  box-shadow:0 18px 40px rgba(24,28,40,.16), 0 4px 10px rgba(24,28,40,.08);
}

/* ============ Cards HTML estilizados ============ */
.htmlcard{
  position:relative;
  width:100%;
  aspect-ratio:793/250;
  border-radius:inherit;
  overflow:hidden;
  display:flex;
}
.htmlcard__inner{
  position:relative;z-index:2;
  margin:auto auto;
  padding:0 34px;
  width:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  gap:6px;
  line-height:1.12;
}
.htmlcard__heading{
  font-weight:800;
  font-size:clamp(24px,6.2vw,40px);
  letter-spacing:.5px;
  text-transform:uppercase;
}
.htmlcard__subtitle{
  font-weight:600;
  font-size:clamp(13px,3.2vw,17px);
  opacity:.92;
}

/* 1) Sólido */
.htmlcard--solido{background:var(--c-base)}
.htmlcard--solido .htmlcard__heading,
.htmlcard--solido .htmlcard__subtitle{color:var(--c-ink)}

/* 2) Degradê */
.htmlcard--degrade{
  background:linear-gradient(120deg,
    var(--c-base) 0%,
    color-mix(in srgb, var(--c-base) 55%, #000) 100%);
}
.htmlcard--degrade .htmlcard__heading,
.htmlcard--degrade .htmlcard__subtitle{color:var(--c-ink)}

/* 3) Contorno / outline (fundo branco, borda e texto na cor) */
.htmlcard--outline{
  background:#fff;
  box-shadow:inset 0 0 0 3px var(--c-base);
}
.htmlcard--outline .htmlcard__heading{color:var(--c-base)}
.htmlcard--outline .htmlcard__subtitle{color:#4b5563}

/* 4) Vidro (glass sobre a cor, com blur) */
.htmlcard--vidro{
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.05)),
    var(--c-base);
}
.htmlcard--vidro::before{
  content:"";position:absolute;inset:10px;border-radius:14px;z-index:1;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.35);
}
.htmlcard--vidro .htmlcard__heading,
.htmlcard--vidro .htmlcard__subtitle{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.25)}

/* 5) Neon (fundo escuro, texto e glow na cor) */
.htmlcard--neon{
  background:#0e1016;
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c-base) 70%, transparent);
}
.htmlcard--neon .htmlcard__heading{
  color:#fff;
  text-shadow:0 0 6px var(--c-base), 0 0 18px var(--c-base);
}
.htmlcard--neon .htmlcard__subtitle{color:color-mix(in srgb, var(--c-base) 60%, #fff)}

/* 6) Listrado (faixas diagonais na cor) */
.htmlcard--listrado{
  background:
    repeating-linear-gradient(-45deg,
      var(--c-base) 0 22px,
      color-mix(in srgb, var(--c-base) 78%, #000) 22px 44px);
}
.htmlcard--listrado .htmlcard__inner{
  background:rgba(0,0,0,.28);
  border-radius:14px;
  padding:14px 30px;
  width:auto;
  backdrop-filter:blur(1px);
}
.htmlcard--listrado .htmlcard__heading,
.htmlcard--listrado .htmlcard__subtitle{color:#fff}

/* Fallback para navegadores sem color-mix (degrada com elegância) */
@supports not (background: color-mix(in srgb, red, blue)){
  .htmlcard--degrade{background:linear-gradient(120deg,var(--c-base),#111)}
  .htmlcard--listrado{background:repeating-linear-gradient(-45deg,var(--c-base) 0 22px,#0006 22px 44px)}
  .htmlcard--neon .htmlcard__subtitle{color:#fff}
}

/* ---- Footer ---- */
.lt__footer{margin-top:40px;color:#f7e3cf;font-size:13px;font-weight:600;text-align:center}
.lt__legal{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.lt__legal a{color:#f7e3cf;text-decoration:none;opacity:.9;transition:opacity .15s}
.lt__legal a:hover{opacity:1;text-decoration:underline}
.lt__legal span{opacity:.6}

/* ---- Páginas legais (privacidade / termos) ---- */
.legal{max-width:760px;margin:0 auto;padding:32px 20px 64px}
.legal__doc{background:var(--bg-soft);border-radius:var(--card-radius);
  padding:clamp(22px,5vw,44px);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.legal__back{display:inline-block;margin-bottom:20px;color:var(--muted);
  text-decoration:none;font-size:14px;font-weight:600}
.legal__back:hover{color:var(--fg)}
.legal h1{font-size:clamp(24px,5vw,32px);font-weight:800;margin:0 0 6px;line-height:1.2}
.legal__updated{color:var(--muted);font-size:13px;margin:0 0 28px}
.legal h2{font-size:clamp(17px,3.5vw,20px);font-weight:700;margin:30px 0 10px}
.legal p{margin:0 0 14px;line-height:1.65;color:#2b2f38}
.legal ul{margin:0 0 16px;padding-left:22px;line-height:1.65;color:#2b2f38}
.legal li{margin-bottom:8px}
.legal a{color:var(--ig4);font-weight:600;text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:6px;
  font-size:.92em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.legal strong{font-weight:700}
.legal__foot{margin-top:36px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.legal__foot span{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  /* Não desligamos a borda: é um brilho pequeno e periférico. Apenas
     deixamos bem mais lento e suave para não incomodar sensibilidade
     a movimento, em vez de parar (que deixava o card "morto"). */
  .card-img__border::before,.card-img__glow::before{
    animation-duration:14s;
  }
}