/* Desenvolvido por MTHBARROS · mthbarros.com.br | Fellow Ship - agenciafellowship.com.br */
/* =====================================================================
   Eventos Dermalink (eventos.dermalink.com.br): vitrine dos eventos.
   Mesmas fontes do site oficial: Roboto nos textos, Forma Bold nos títulos.
   ===================================================================== */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); }
@font-face { font-family: "Forma DJR Display"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/forma-djr-display-bold.woff") format("woff"); }

:root {
  --noite: #070909;
  --noite-2: #0d1514;
  --turquesa: #00b8a9;
  --turquesa-vivo: #00cdb9;
  --turquesa-claro: #8ff0e4;
  --turquesa-forte: #00877c;
  --laranja: #f15a24;
  --vermelho: #ee1c25;
  --vermelho-escuro: #c20d14;
  --texto: #e8eeed;
  --texto-suave: #a7b3b1;
  --linha: rgb(255 255 255 / 10%);

  --fonte: "Roboto", Arial, sans-serif;
  --fonte-titulo: "Forma DJR Display", "Roboto", sans-serif;
  --suave: cubic-bezier(.22, 1, .36, 1);
  --margem: clamp(18px, 4.5vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--noite); color: var(--texto);
  font-family: var(--fonte); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--turquesa-vivo); }
h1, h2, p, ul { margin: 0; padding: 0; }
h1, h2 { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: 0; }
h1 em, h2 em { font-style: normal; }
ul { list-style: none; }
main { overflow-x: clip; }
:focus-visible { outline: 3px solid var(--turquesa-vivo); outline-offset: 3px; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fundo ---------- */
.ceu { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #0f1f1d 0%, var(--noite) 62%); }
.ceu-seda { position: absolute; inset: -8%; background: url("../../img/textura-seda.webp") center / cover no-repeat; opacity: .07; filter: invert(1); animation: seda 30s ease-in-out infinite alternate; }
@keyframes seda { from { transform: scale(1.02) translate3d(-1.5%, -1%, 0); } to { transform: scale(1.12) translate3d(1.5%, 1.5%, 0); } }
.aurora { position: absolute; border-radius: 50%; will-change: transform; }
.aurora-a { width: 70vmax; height: 70vmax; left: -26vmax; top: -30vmax; background: radial-gradient(closest-side, rgb(0 205 185 / 30%), transparent); animation: boia-a 18s ease-in-out infinite alternate; }
.aurora-b { width: 58vmax; height: 58vmax; right: -24vmax; top: 10vmax; background: radial-gradient(closest-side, rgb(241 90 36 / 17%), transparent); animation: boia-b 22s ease-in-out infinite alternate; }
.aurora-c { width: 54vmax; height: 54vmax; left: 20vw; bottom: -34vmax; background: radial-gradient(closest-side, rgb(0 184 169 / 20%), transparent); animation: boia-a 26s ease-in-out infinite alternate-reverse; }
@keyframes boia-a { to { transform: translate3d(10vw, 8vh, 0) scale(1.15); } }
@keyframes boia-b { to { transform: translate3d(-9vw, 12vh, 0) scale(.88); } }
.ceu-grao {
  position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* luz que segue o mouse (só no computador) */
.ceu-luz { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgb(0 205 185 / 11%), transparent 62%); }
.com-mouse .ceu-luz { opacity: 1; }

/* ---------- Topo ---------- */
.topo { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) var(--margem) 0; }
.topo-marca img { width: clamp(118px, 26vw, 148px); }
.topo-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--linha); border-radius: 999px; background: rgb(255 255 255 / 4%); color: var(--texto); font-weight: 500; font-size: 14px; text-decoration: none; transition: border-color .3s, background .3s; }
.topo-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--suave); }
.topo-link:hover { border-color: rgb(0 205 185 / 50%); background: rgb(0 205 185 / 8%); }
.topo-link:hover svg { transform: translate3d(2px, -2px, 0); }

/* ---------- Abertura ---------- */
.abertura { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(calc(100svh - 76px), 900px); padding: clamp(40px, 8vh, 90px) var(--margem) clamp(30px, 6vh, 60px); text-align: center; }
.abertura-selo { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: 1px solid rgb(0 205 185 / 30%); border-radius: 999px; background: rgb(0 205 185 / 8%); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--turquesa-claro); }
.abertura-selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--turquesa-vivo); box-shadow: 0 0 0 4px rgb(0 205 185 / 20%), 0 0 14px var(--turquesa-vivo); }
.abertura-titulo { margin-top: clamp(18px, 3vh, 28px); font-size: clamp(54px, 13.5vw, 172px); line-height: .92; }
.linha { display: block; overflow: hidden; padding: .04em .06em .1em; margin: -.04em -.06em -.1em; }
.linha > span { display: inline-block; }
.js .linha > span { animation: sobe-linha 1.2s var(--suave) both; animation-delay: var(--d, 0s); }
@keyframes sobe-linha { from { transform: translate3d(0, 108%, 0) rotate(3deg); } }
.brilho {
  background: linear-gradient(100deg, var(--turquesa) 0%, var(--turquesa-claro) 22%, var(--turquesa-vivo) 40%, var(--turquesa) 60%, #c8fff7 78%, var(--turquesa) 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js .brilho { animation: sobe-linha 1.2s var(--suave) both, corre-brilho 7s linear 1.4s infinite; animation-delay: var(--d, 0s), 1.4s; }
@keyframes corre-brilho { to { background-position: -220% 0; } }
.abertura-texto { max-width: 560px; text-wrap: balance; margin-top: clamp(16px, 2.6vh, 26px); font-weight: 300; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.4; color: var(--texto-suave); }
.abertura-seta { position: relative; display: block; width: 30px; height: 50px; margin-top: clamp(34px, 7vh, 64px); border: 1.5px solid rgb(255 255 255 / 30%); border-radius: 999px; }
.abertura-seta i { position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 4px; background: var(--turquesa-vivo); animation: rola 1.8s var(--suave) infinite; }
@keyframes rola { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate3d(0, 16px, 0); } }
.js .ent { animation: aparece 1s var(--suave) both; animation-delay: var(--d, 0s); }
@keyframes aparece { from { opacity: 0; transform: translate3d(0, 22px, 0); } }

/* ---------- Revelação na rolagem ---------- */
.js [data-rv] { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .9s var(--suave), transform 1.1s var(--suave); transition-delay: var(--atraso, 0s); }
.js [data-rv].visto { opacity: 1; transform: none; }

/* ---------- Próximo evento ---------- */
.proximo { max-width: 1180px; margin: 0 auto; padding: clamp(30px, 6vw, 70px) var(--margem) clamp(60px, 9vw, 110px); }
.secao-rotulo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--turquesa-claro); }
.secao-rotulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(0 205 185 / 40%), transparent); }

@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.evento-palco { perspective: 1400px; }
.evento {
  position: relative; padding: 1.5px; border-radius: 34px;
  background: conic-gradient(from var(--giro), rgb(0 205 185 / 85%), rgb(0 205 185 / 0%) 22%, rgb(241 90 36 / 70%) 46%, rgb(0 205 185 / 0%) 70%, rgb(0 205 185 / 85%));
  box-shadow: 0 40px 100px -40px rgb(0 205 185 / 35%);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--suave);
  animation: gira-borda 9s linear infinite;
}
@keyframes gira-borda { to { --giro: 360deg; } }
.evento-dentro {
  position: relative; overflow: hidden; display: grid; gap: 10px; border-radius: 32.5px;
  background: radial-gradient(90% 70% at 85% 30%, rgb(0 205 185 / 14%), transparent 60%), linear-gradient(160deg, #10201e 0%, #0b1110 55%, #090c0c 100%);
}
/* brilho de vidro que acompanha o mouse dentro do cartão */
.evento-dentro::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--cx, 50%) var(--cy, 50%), rgb(255 255 255 / 7%), transparent 60%); }
.evento:hover .evento-dentro::before { opacity: 1; }

.evento-info { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 4.4vw, 54px); padding-bottom: clamp(30px, 4.4vw, 54px); }
.evento-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.selo-live {
  display: inline-flex; align-items: center; gap: .55em; padding: .45em 1.05em; border-radius: 999px;
  background: linear-gradient(180deg, #ff4a48 0%, var(--vermelho) 48%, var(--vermelho-escuro) 100%);
  box-shadow: 0 8px 22px rgb(238 28 37 / 35%), inset 0 1px 0 rgb(255 255 255 / 38%);
  color: #fff; font-family: var(--fonte-titulo); font-weight: 700; font-size: 14px; letter-spacing: .14em; line-height: 1;
}
.selo-live i { position: relative; width: .62em; height: .62em; border-radius: 50%; background: #fff; }
.selo-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: pulso 1.7s var(--suave) infinite; }
@keyframes pulso { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
.evento-data { font-weight: 500; font-size: 15px; color: var(--texto-suave); }
.evento-logo { width: clamp(130px, 18vw, 168px); margin-top: clamp(22px, 3vw, 30px); opacity: .92; }
.evento-titulo { margin-top: 12px; font-size: clamp(36px, 5.6vw, 66px); line-height: 1; color: #fff; text-wrap: balance; }
.evento-titulo em { color: var(--turquesa-vivo); }
.evento-produto { margin-top: 10px; font-weight: 300; font-size: clamp(18px, 2vw, 22px); color: var(--texto-suave); }
.evento-pessoa { display: flex; align-items: center; gap: 14px; margin-top: clamp(20px, 3vw, 28px); padding: 8px 20px 8px 8px; border: 1px solid var(--linha); border-radius: 999px; background: rgb(255 255 255 / 4%); }
.evento-pessoa img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--turquesa); }
.evento-pessoa strong { display: block; font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; line-height: 1.15; color: #fff; }
.evento-pessoa span { font-size: 14px; color: var(--texto-suave); }

/* Contagem */
.contagem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(100%, 420px); margin-top: clamp(22px, 3vw, 30px); }
.contagem-bloco { display: flex; flex-direction: column; align-items: center; padding: 12px 4px 10px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 16px; background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%)); }
.contagem-num { display: flex; font-weight: 200; font-size: clamp(32px, 4.4vw, 44px); line-height: 1; color: #fff; }
.contagem-bloco small { margin-top: 6px; font-weight: 500; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--turquesa-claro); }
.dig { position: relative; display: block; width: .57em; height: 1em; }
.dig b { position: absolute; inset: 0; font-weight: inherit; text-align: center; }
.dig .sai { animation: dig-sai .75s var(--suave) forwards; }
.dig .entra { animation: dig-entra .75s var(--suave) backwards; }
@keyframes dig-sai { to { opacity: 0; filter: blur(8px); transform: translate3d(0, -.3em, 0) scale(1.06); } }
@keyframes dig-entra { from { opacity: 0; filter: blur(8px); transform: translate3d(0, .3em, 0) scale(.94); } }

.evento-nota { margin-top: 16px; font-size: 14.5px; color: var(--texto-suave); }
.botao {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  min-height: 56px; padding: 14px 28px; border-radius: 999px;
  background: linear-gradient(135deg, var(--turquesa-vivo), var(--turquesa-forte));
  box-shadow: 0 16px 36px -12px rgb(0 205 185 / 60%);
  color: #fff; font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; line-height: 1.1; text-decoration: none;
  transition: transform .4s var(--suave), box-shadow .4s var(--suave);
}
.botao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 40%) 50%, transparent 62%); transform: translateX(-110%); animation: brilho-botao 5s var(--suave) 2s infinite; }
@keyframes brilho-botao { 0%, 62% { transform: translateX(-110%); } 88%, 100% { transform: translateX(110%); } }
.botao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--suave); }
.botao:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 22px 44px -12px rgb(0 205 185 / 75%); }
.botao:hover svg { transform: translate3d(4px, 0, 0); }

/* Caixa do produto */
.evento-cena { position: relative; display: grid; place-items: center; min-height: 250px; padding: 20px 0 34px; order: -1; }
.evento-halo { position: absolute; width: min(78%, 360px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(241 90 36 / 38%), rgb(0 205 185 / 12%) 60%, transparent); filter: blur(10px); animation: respira 6s ease-in-out infinite alternate; }
@keyframes respira { from { transform: scale(.9); opacity: .75; } to { transform: scale(1.08); opacity: 1; } }
.evento-caixa { position: relative; width: auto; height: clamp(190px, 34vw, 400px); transform: rotate(-7deg); filter: drop-shadow(0 30px 40px rgb(0 0 0 / 55%)); animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: translate3d(0, -8px, 0) rotate(-8deg); } 50% { transform: translate3d(0, 10px, 0) rotate(-5deg); } }
.evento-sombra { position: absolute; bottom: 26px; width: 120px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 70%), transparent); animation: sombra 6s ease-in-out infinite; }
@keyframes sombra { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }

/* Fases: ao vivo e depois da live */
body[data-fase="ao-vivo"] .contagem, body[data-fase="encerrada"] .contagem { display: none; }
body[data-fase="encerrada"] .selo-live { background: #2a3332; box-shadow: none; }
body[data-fase="encerrada"] .selo-live i::after { animation: none; }

/* ---------- Faixa ---------- */
.faixa { overflow: hidden; padding: 14px 0; background: linear-gradient(90deg, var(--turquesa-forte), var(--turquesa) 50%, var(--turquesa-forte)); color: #fff; transform: skewY(-1.4deg) scale(1.02); box-shadow: 0 20px 50px -20px rgb(0 205 185 / 50%); }
.faixa-trilho { display: flex; width: max-content; align-items: center; gap: 24px; font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.1; text-transform: uppercase; white-space: nowrap; animation: anda 32s linear infinite; }
.faixa b { font-weight: 400; font-size: .64em; opacity: .85; }
@keyframes anda { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Em breve ---------- */
.breve { max-width: 1180px; margin: 0 auto; padding: clamp(80px, 11vw, 140px) var(--margem) clamp(70px, 10vw, 120px); text-align: center; }
.breve-titulo { font-size: clamp(38px, 6.4vw, 78px); line-height: 1; color: #fff; }
.breve-titulo em { color: var(--turquesa-vivo); }
.breve-texto { max-width: 520px; margin: 18px auto 0; font-weight: 300; font-size: clamp(17px, 1.9vw, 20px); color: var(--texto-suave); }
.redes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 900px; margin: clamp(30px, 4vw, 44px) auto 0; text-align: left; }
.rede { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 18px; background: rgb(255 255 255 / 3%); color: var(--texto); text-decoration: none; transition: border-color .3s, background .3s, transform .4s var(--suave); }
.rede svg { flex: none; width: 24px; height: 24px; color: var(--turquesa-claro); transition: color .3s, transform .4s var(--suave); }
.rede span { display: flex; flex-direction: column; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.2; }
.rede small { font-weight: 400; font-size: 13px; color: var(--texto-suave); }
.rede:hover { transform: translate3d(0, -3px, 0); border-color: color-mix(in srgb, var(--cor-rede) 55%, transparent); background: color-mix(in srgb, var(--cor-rede) 9%, transparent); }
.rede:hover svg { color: var(--cor-rede); transform: scale(1.12); }

/* ---------- Rodapé ---------- */
.rodape { position: relative; padding: 44px var(--margem) calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: rgb(0 0 0 / 45%); }
.rodape::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--turquesa-vivo), var(--laranja), transparent); }
.rodape-dentro { display: grid; gap: 18px; justify-items: center; max-width: 1180px; margin: 0 auto; text-align: center; }
.rodape-logo { width: 132px; }
.rodape-contato { font-size: 15px; color: var(--texto-suave); }
.rodape-contato span { display: block; }
.rodape-contato a, .rodape-site { color: var(--texto); text-decoration: none; }
.rodape-contato a:hover, .rodape-site:hover { color: var(--turquesa-vivo); }
.rodape-site { font-weight: 700; font-size: 15px; }
.rodape-legal { max-width: 1180px; margin: 30px auto 0; padding-top: 18px; border-top: 1px solid var(--linha); font-size: 12.5px; line-height: 1.5; text-align: center; color: rgb(167 179 177 / 75%); }

/* ---------- Telas maiores ---------- */
@media (min-width: 620px) {
  .redes { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .evento-dentro { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
  .evento-cena { order: 0; min-height: 100%; padding: 40px 20px; }
  .rodape-dentro { grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; }
  .rodape-contato { justify-self: center; text-align: center; }
  .rodape-legal { text-align: left; }
}
@media (max-width: 619px) {
  .abertura { min-height: 78svh; }
}
@media (max-width: 380px) {
  .evento-pessoa { padding-right: 14px; }
  .evento-pessoa img { width: 46px; height: 46px; }
  .rede { padding: 12px; gap: 10px; }
  .rede small { font-size: 12px; }
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-rv] { opacity: 1; transform: none; }
}