/* ============================================================
   UNA — tokens
   ============================================================ */
:root{
  --tinta:#171449;        /* violeta-tinta: fundos densos */
  --tinta-2:#2A2470;      /* variação para blocos internos */
  --papel:#F2F0F5;        /* papel frio, base do site */
  --rosa:#FF4A7D;         /* riso pink: carimbo de data, ações */
  --sol:#FFC93C;          /* amarelo: sinal de "vem aí" */
  --neutro:#6C6789;       /* texto secundário */

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --corpo:"Instrument Sans", system-ui, sans-serif;
  --dado:"DM Mono", ui-monospace, monospace;

  --max:1180px;
  --raio:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

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

.eyebrow{
  font-family:var(--dado);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--neutro);
}

/* ============================================================
   Topo
   ============================================================ */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(var(--papel-rgb),.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(var(--tinta-rgb),.1);
}
.topo-int{
  display:flex;align-items:center;justify-content:space-between;
  height:66px;
}
.marca{display:flex;align-items:center;text-decoration:none;line-height:0}
.marca img{width:40px;height:40px;display:block;transition:opacity .18s}
.marca:hover img{opacity:.72}
.menu{display:flex;gap:26px;align-items:center}
.menu a{
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  color:var(--neutro);
  transition:color .18s;
}
.menu a:hover{color:var(--tinta)}
.menu .insta{
  background:var(--tinta);color:var(--papel);
  padding:9px 16px;border-radius:100px;font-weight:600;
}
.menu .insta:hover{background:var(--rosa);color:#fff}

/* ============================================================
   Hero — vídeo em destaque
   ============================================================ */
.hero{
  background:var(--tinta);
  color:var(--papel);
  padding:56px 0 64px;
  position:relative;
  overflow:hidden;
}
.hero::after{ /* grão sutil */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size:4px 4px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:44px;
  align-items:center;
  position:relative;z-index:1;
}
.hero .eyebrow{color:var(--sol)}
.hero-txt h1{
  font-family:var(--display);
  font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
  margin:14px 0 16px;
}
.hero-txt p{color:var(--claro);max-width:42ch}
.hero-meta{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;
  font-family:var(--dado);font-size:.78rem;
}
.hero-meta span{
  border:1px solid rgba(255,255,255,.26);
  padding:6px 12px;border-radius:100px;
}

/* Fachada do player (só carrega o YouTube no clique) */
.player{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--raio);
  overflow:hidden;
  border:0;padding:0;width:100%;
  cursor:pointer;
  display:block;
  background:var(--tinta-2);
}
.player .capa{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 15% 12%, var(--rosa) 0%, transparent 58%),
    radial-gradient(110% 100% at 88% 85%, var(--sol) 0%, transparent 55%),
    linear-gradient(150deg,var(--tinta-2),var(--tinta));
  transition:filter .4s, transform .5s;
}
.player:hover .capa{transform:scale(1.03)}
.player .play{
  position:absolute;inset:0;display:grid;place-items:center;
}
.player .play i{
  width:76px;height:76px;border-radius:50%;
  background:var(--papel);
  display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.32);
  transition:transform .22s;
}
.player:hover .play i{transform:scale(1.09)}
.player .play i::before{
  content:"";
  border-left:20px solid var(--tinta);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:6px;
}
.player .selo{
  position:absolute;left:14px;bottom:14px;
  font-family:var(--dado);font-size:.7rem;letter-spacing:.1em;
  background:rgba(var(--tinta-rgb),.72);color:#fff;
  padding:6px 11px;border-radius:6px;text-transform:uppercase;
}
.player iframe{width:100%;height:100%;border:0;display:block}
.aviso-video{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:24px;font-family:var(--dado);font-size:.82rem;color:var(--claro);
  background:var(--tinta-2);
}

/* ============================================================
   Carimbo de data — elemento-assinatura
   ============================================================ */
.carimbo{
  flex:0 0 auto;
  width:74px;
  background:var(--rosa);
  color:var(--tinta);
  border-radius:10px;
  padding:9px 4px 7px;
  text-align:center;
  transform:rotate(-3deg);
  box-shadow:3px 3px 0 var(--tinta);
}
.carimbo .dia{
  font-family:var(--display);
  font-weight:800;font-size:1.85rem;line-height:.92;letter-spacing:-.04em;
  display:block;
}
.carimbo .mes{
  font-family:var(--dado);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-top:3px;
}
.carimbo.passado{
  background:transparent;
  color:var(--tinta);
  border:2px solid rgba(var(--tinta-rgb),.22);
  box-shadow:none;
  transform:rotate(0);
}
.carimbo.passado .mes{color:var(--neutro)}

/* ============================================================
   Cabeçalho de seção
   ============================================================ */
.cab{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:32px;flex-wrap:wrap;
}
.cab h2{
  font-family:var(--display);
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  letter-spacing:-.035em;font-weight:800;line-height:1.05;
  margin-top:8px;
}
.cab .conta{font-family:var(--dado);font-size:.8rem;color:var(--neutro)}

/* ============================================================
   Próximos
   ============================================================ */
.proximos{padding:70px 0 64px}
.lista-prox{display:flex;flex-direction:column;gap:14px}
.prox{
  display:flex;align-items:center;gap:20px;
  background:#fff;
  border:1px solid rgba(var(--tinta-rgb),.09);
  border-left:5px solid var(--sol);
  border-radius:var(--raio);
  padding:20px 24px;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
/* itens da agenda são informativos: não têm página própria, então
   não recebem realce de clique */
.prox-corpo{flex:1;min-width:0}
.prox-corpo h3{
  font-family:var(--display);font-weight:700;font-size:1.22rem;
  letter-spacing:-.02em;margin-bottom:3px;
}
.prox-corpo p{font-size:.92rem;color:var(--neutro)}
.contagem{
  font-family:var(--dado);font-size:.78rem;
  white-space:nowrap;
  background:var(--tinta);color:var(--papel);
  padding:8px 14px;border-radius:100px;
}
.contagem.perto{background:var(--rosa);color:#fff}

/* ============================================================
   Arquivo
   ============================================================ */
.arquivo{padding:20px 0 84px}
.anos{display:flex;gap:8px;margin-bottom:30px;flex-wrap:wrap}
.anos a{
  font-family:var(--dado);font-size:.8rem;
  background:transparent;color:var(--neutro);
  border:1px solid rgba(var(--tinta-rgb),.18);
  padding:8px 17px;border-radius:100px;cursor:pointer;
  text-decoration:none;display:inline-block;line-height:1.4;
  transition:all .18s;
}
.anos a:hover{border-color:var(--tinta);color:var(--tinta)}
.anos a[aria-current="true"]{
  background:var(--tinta);color:var(--papel);border-color:var(--tinta);
}

.grade{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px 24px;
}
.card{text-decoration:none;display:block;transition:transform .22s}
.card:hover{transform:translateY(-5px)}
.card .midia{
  display:block;
  aspect-ratio:4/3;border-radius:var(--raio);overflow:hidden;
  position:relative;margin-bottom:14px;
  background:linear-gradient(150deg,var(--tinta-2),var(--tinta));
}
.card .midia::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(100% 80% at 20% 15%, var(--rosa) 0%, transparent 60%),
    radial-gradient(90% 90% at 85% 90%, var(--sol) 0%, transparent 55%);
  opacity:.62;
  transition:opacity .35s;
}
.card:hover .midia::before{opacity:1}
.card:nth-child(3n+2) .midia::before{
  background:
    radial-gradient(100% 80% at 80% 20%, var(--sol) 0%, transparent 58%),
    radial-gradient(90% 90% at 15% 85%, var(--rosa) 0%, transparent 60%);
}
.card:nth-child(3n+3) .midia::before{
  background:
    radial-gradient(110% 90% at 50% 100%, var(--rosa) 0%, transparent 62%),
    radial-gradient(80% 80% at 10% 10%, var(--sol) 0%, transparent 55%);
}
.tags{
  position:absolute;right:11px;bottom:11px;z-index:2;
  display:flex;gap:6px;
}
.tag{
  font-family:var(--dado);font-size:.66rem;letter-spacing:.06em;
  background:rgba(var(--tinta-rgb),.8);color:#fff;
  padding:5px 9px;border-radius:6px;text-transform:uppercase;
}
.card-txt{display:flex;gap:14px;align-items:flex-start}
.card-txt h3{
  font-family:var(--display);font-weight:700;font-size:1.12rem;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:4px;
}
.card-txt p{font-size:.88rem;color:var(--neutro);line-height:1.45}

/* ============================================================
   Faixa "seja parte"
   ============================================================ */
.faixa{
  background:var(--sol);
  padding:52px 0;
}
.faixa-int{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.faixa h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.035em;line-height:1.05;
}
.faixa p{margin-top:8px;font-size:1rem;max-width:46ch}
.botao{
  background:var(--tinta);color:var(--papel);
  font-weight:600;text-decoration:none;
  padding:15px 30px;border-radius:100px;white-space:nowrap;
  transition:background .18s;
}
.botao:hover{background:var(--rosa);color:#fff}

/* ============================================================
   Rodapé
   ============================================================ */
.rodape{background:var(--tinta);color:var(--papel);padding:56px 0 30px}
.rod-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.rodape h4{
  font-family:var(--dado);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sol);margin-bottom:14px;font-weight:500;
}
.rodape p, .rodape li{color:var(--claro);font-size:.94rem}
.rodape ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.rodape a{text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rod-marca{margin-bottom:14px}
.rod-marca img{width:56px;height:56px}
.rod-fim{
  margin-top:38px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--dado);font-size:.72rem;color:var(--claro-2);
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-txt{order:2}
  .grade{grid-template-columns:repeat(2,1fr)}
  .rod-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .menu a:not(.insta){display:none}
  .hero{padding:38px 0 46px}
  .proximos{padding:52px 0 46px}
  .grade{grid-template-columns:1fr;gap:30px}
  .prox{flex-wrap:wrap;gap:14px;padding:18px}
  .prox-corpo{flex:1 1 60%}
  .contagem{order:3}
  .rod-grid{grid-template-columns:1fr;gap:28px}
  .carimbo{width:64px}
  .carimbo .dia{font-size:1.55rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   Fase 1 — capas reais vindas do banco
   ============================================================ */
.card .midia img, .player .capa img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.card .midia.com-foto::before{display:none}
.player .capa.com-foto{background:none}

/* ============================================================
   Pagina do evento
   ============================================================ */
.ev-topo{background:var(--tinta);color:var(--papel);padding:44px 0 52px;position:relative;overflow:hidden}
.ev-topo::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size:4px 4px;
}
.ev-int{position:relative;z-index:1}
.voltar{
  font-family:var(--dado);font-size:.78rem;letter-spacing:.08em;
  color:var(--claro);text-decoration:none;text-transform:uppercase;
}
.voltar:hover{color:var(--sol)}
.ev-cab{display:flex;gap:22px;align-items:flex-start;margin:22px 0 18px}
.ev-cab h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.03;letter-spacing:-.035em;
}
.ev-cab .carimbo{box-shadow:3px 3px 0 rgba(255,255,255,.3)}
.ev-info{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--dado);font-size:.78rem;margin-bottom:26px}
.ev-info span{border:1px solid rgba(255,255,255,.26);padding:6px 12px;border-radius:100px}
.ev-video{max-width:820px}

.ev-corpo{padding:56px 0}
.ev-texto{max-width:62ch;font-size:1.06rem}
.ev-texto p{margin-bottom:1.1em}

.galeria{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px;
}
.galeria a{
  display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:linear-gradient(150deg,var(--tinta-2),var(--tinta));
}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.galeria a:hover img{transform:scale(1.06)}

.vazio{
  border:2px dashed rgba(var(--tinta-rgb),.18);border-radius:var(--raio);
  padding:38px 24px;text-align:center;color:var(--neutro);
  font-family:var(--dado);font-size:.86rem;
}

.vizinhos{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:52px;
  padding-top:26px;border-top:1px solid rgba(var(--tinta-rgb),.12)}
.vizinhos a{text-decoration:none;max-width:46%}
.vizinhos .eyebrow{margin-bottom:4px}
.vizinhos strong{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.vizinhos a:hover strong{color:var(--rosa)}

@media (max-width:900px){ .galeria{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){
  .galeria{grid-template-columns:repeat(2,1fr);gap:9px}
  .ev-cab{gap:16px}
  .vizinhos a{max-width:100%}
}

/* ============================================================
   Fase 4 — página de arquivo
   ============================================================ */
.arquivo-topo{padding:48px 0 8px}
.arquivo-topo h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,4.6vw,3rem);letter-spacing:-.035em;line-height:1.03;
  margin:8px 0 10px;
}
.conta-grande{font-family:var(--dado);font-size:.86rem;color:var(--neutro)}
.conta-grande .limpar{margin-left:12px;color:var(--rosa)}

.anos.tipos{margin-top:-16px}

.ver-tudo{margin-top:38px;text-align:center}
.ver-tudo a{
  display:inline-block;text-decoration:none;font-weight:600;
  border:1px solid rgba(var(--tinta-rgb),.2);padding:13px 30px;border-radius:100px;
  transition:all .18s;
}
.ver-tudo a:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

.paginacao{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:44px;flex-wrap:wrap;
}
.paginacao a,.paginacao .desligado{
  font-family:var(--dado);font-size:.82rem;text-decoration:none;
  border:1px solid rgba(var(--tinta-rgb),.2);padding:10px 20px;border-radius:100px;
}
.paginacao a:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.paginacao .desligado{opacity:.32;border-style:dashed}
.paginacao .onde{font-family:var(--dado);font-size:.78rem;color:var(--neutro)}

/* marca sem logo enviada: o nome em tipografia, como no desenho original */
.marca.so-texto{
  font-family:var(--display);font-weight:800;font-size:1.6rem;
  letter-spacing:-.04em;line-height:1;padding-bottom:3px;
  border-bottom:4px solid var(--rosa);color:var(--tinta);
}
.rod-nome{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.04em}