/* ============================================================
   dream factory — styles
   Paleta e tipografia herdadas do site atual (Webflow):
   Outfit + azul #0099ef / gradiente #00c2ff→#0047ff + espectro por marca.
   ponytail: sem build, um arquivo, tokens em :root.
   ============================================================ */

:root{
  --paper:#fff;
  --paper-2:#f3f5f9;
  --ink:#0d0e12;
  --ink-2:#5d6c7b;              /* cinza de texto do site original */
  --line:rgba(13,14,18,.14);
  --line-2:rgba(13,14,18,.07);

  --blue:#0099ef;               /* azul assinatura */
  --blue-2:#0047ff;
  --blue-3:#00c2ff;
  --grad:linear-gradient(19deg,#00c2ff,#0047ff);   /* gradiente original */
  --night:#06070f;

  /* faixa de contraste do placar: e o oposto do fundo da pagina, entao
     precisa de token proprio — no escuro ela vira clara para manter o ritmo */
  --band:#0d0e12;
  --band-ink:#fff;
  --band-muted:rgba(255,255,255,.6);
  --band-grad:linear-gradient(19deg,#00c2ff,#7fa0ff);
  --nav-bg:rgba(255,255,255,.88);

  --maxw:1360px;
  --pad:clamp(20px,4.5vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- tema escuro ----------
   Padrao e sempre o claro, inclusive para quem usa o sistema no escuro:
   a primeira visita abre clara. O escuro so entra por escolha explicita no
   botao, que fica salva em localStorage e volta nas proximas visitas. */
:root[data-theme="dark"]{
  --paper:#0b0c10;
  --paper-2:#14161d;
  --ink:#eef1f6;
  --ink-2:#98a2b0;
  --line:rgba(238,241,246,.16);
  --line-2:rgba(238,241,246,.08);
  --grad:linear-gradient(19deg,#5fd8ff,#4d7bff);
  --band:#f3f5f9;
  --band-ink:#0d0e12;
  --band-muted:rgba(13,14,18,.6);
  --band-grad:linear-gradient(19deg,#0088d8,#2f5ae0);
  --nav-bg:rgba(11,12,16,.88);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper)}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
body.is-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--blue);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%}

h1,h2,h3,h4{font-weight:600;line-height:1;letter-spacing:-.035em;text-transform:lowercase}
.big{font-size:clamp(30px,5vw,68px);text-wrap:balance}

/* texto com o gradiente azul da marca.
   background-attachment:fixed faz o degradê correr contínuo entre palavras
   separadas (cada .w é um elemento próprio). Safari iOS ignora e cai no
   degradê por palavra — degradação aceitável. */
.g{
  background:var(--grad) fixed;-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;flex:none;font-size:22px;letter-spacing:-.04em;line-height:1}
.logo img{width:28px;height:28px;flex:none;display:block}
.logo span{font-weight:300}
.logo b{font-weight:700}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
}
.loader__mark{width:76px;height:76px;will-change:transform;animation:heartbeat 1.1s ease-out infinite}
/* lub-dub: pulso forte, pulso fraco, pausa — ~55 bpm */
@keyframes heartbeat{
  0%,24%,46%,100%{transform:scale(1)}
  12%{transform:scale(1.17)}
  34%{transform:scale(1.08)}
}
.loader__bar{width:min(280px,54vw);height:2px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--blue)}

/* ---------- cursor ----------
   Seta desenhada substituindo a nativa, com a ponta ancorada no ponto real
   do mouse. Ela inclina para o lado do movimento e cresce sobre elementos
   clicaveis. */
.cur{display:none}
@media (hover:hover) and (pointer:fine){
  /* so esconde a seta se o JS confirmou que assumiu o cursor: sem isso,
     uma falha de script deixaria a pessoa sem ponteiro nenhum */
  html.has-cur,html.has-cur *{cursor:none}

  .cur{
    display:block;position:fixed;top:0;left:0;z-index:95;border-radius:50%;
    pointer-events:none;will-change:transform;opacity:0;transition:opacity .25s;
    color:var(--blue);
  }
  html.cur-on .cur{opacity:1}
  /* seta desenhada: ponta ancorada no ponto real do mouse (dai a margem
     negativa assimetrica). Contorno branco para ler tanto no branco da
     pagina quanto nas faixas escuras. */
  .cur--arrow{
    width:26px;height:26px;margin:-2px 0 0 -4px;border-radius:0;
    fill:currentColor;stroke:#fff;stroke-width:1.2;stroke-linejoin:round;
    transform-origin:4.3px 2px;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.25));
  }
  /* sem anel, o feedback de hover vem do proprio tamanho da seta */
}

/* ---------- objeto orbital ----------
   Tres circulos derivados da marca (furo grande, furo pequeno, ponto solto).
   z-index 3 = na FRENTE do conteudo (main e z-index 2), mas abaixo do nav (50).
   Atras ele sumia nas faixas opacas — placar, calendario, palco e contato —
   e parecia morrer logo depois da secao 01. A legibilidade fica por conta da
   opacidade baixa, nao da ordem de empilhamento. */
.orbit{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.orbit b{
  position:absolute;top:0;left:0;display:block;border-radius:50%;
  width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);
  color:var(--blue);background:currentColor;
  transform:scale(0);will-change:transform;
}
/* solidos: como ficam ATRAS do texto (z-index 1), a opacidade baixa nos maiores
   deixa o corpo de cor presente sem virar mancha por baixo da leitura */
.orbit b:nth-child(1){--s:clamp(54px,9vw,128px);opacity:.22}
.orbit b:nth-child(2){--s:clamp(26px,4.4vw,62px);opacity:.34}
.orbit b:nth-child(3){--s:clamp(11px,1.7vw,24px);opacity:.6}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:28px;padding:16px var(--pad);
  transition:transform .5s var(--ease),background .35s linear,box-shadow .35s linear;
}
.nav.is-stuck{background:var(--nav-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav.is-hidden{transform:translateY(-105%)}
.nav__links{display:flex;gap:24px;margin-left:auto;font-size:15px;font-weight:500}
.nav__links a{position:relative;padding:3px 0;transition:color .25s}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav__links a:hover{color:var(--blue)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{
  font-size:14px;font-weight:600;padding:10px 20px;border-radius:999px;
  background:var(--ink);color:var(--paper);white-space:nowrap;
  transition:background .3s;
}
.nav__cta:hover{background:var(--blue)}
/* botao de tema: visivel em qualquer largura, inclusive no mobile ao lado
   do burger — trocar de tema nao pode depender de abrir o menu */
.tema{
  position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;
  background:none;border:1px solid var(--line);border-radius:50%;cursor:pointer;
  color:var(--ink);transition:background .3s,color .3s,border-color .3s;
}
/* estende a area clicavel sem ocupar espaco no layout: sem isso, o botao sem
   borda no mobile viraria um alvo de ~20px, abaixo do minimo confortavel */
.tema::before{content:"";position:absolute;inset:-12px}
.tema svg{width:17px;height:17px}
.tema:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.burger{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  flex:none;                      /* sem isto o flex-shrink esmaga o botão a 0 em telas estreitas */
  width:44px;height:44px;align-items:center;justify-content:center;gap:6px;flex-direction:column;
}
.burger i{display:block;width:24px;height:2px;background:var(--ink);transition:transform .4s var(--ease)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1080px){
  .nav{gap:10px}                /* aproxima o icone do fim do wordmark */
  .nav__links,.nav__cta{display:none}
  .burger{display:flex;margin-left:auto}
  /* no mobile o icone vira so o glifo, na altura do texto do logo */
  .tema{width:auto;height:auto;border:0;margin-left:0}
  .tema svg{width:20px;height:20px}
  .tema:hover{background:none;color:var(--blue)}
}

/* ---------- menu mobile ---------- */
.menu{
  position:fixed;inset:0;z-index:45;background:var(--paper);
  display:grid;place-items:center;clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease);
}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu nav{display:flex;flex-direction:column;width:100%;max-width:560px;padding:var(--pad)}
.menu a{
  display:flex;align-items:baseline;gap:16px;
  font-size:clamp(28px,7.5vw,44px);font-weight:600;letter-spacing:-.04em;text-transform:lowercase;
  padding:12px 0;border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(20px);
}
.menu.is-open a{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.menu.is-open a:nth-child(1){transition-delay:.15s}
.menu.is-open a:nth-child(2){transition-delay:.20s}
.menu.is-open a:nth-child(3){transition-delay:.25s}
.menu.is-open a:nth-child(4){transition-delay:.30s}
.menu.is-open a:nth-child(5){transition-delay:.35s}
.menu.is-open a:nth-child(6){transition-delay:.40s}
.menu.is-open a:nth-child(7){transition-delay:.45s}
.menu.is-open a:nth-child(8){transition-delay:.50s}
.menu a span{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.06em}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;border:1.5px solid var(--ink);
  font-size:16px;font-weight:600;letter-spacing:-.01em;text-transform:lowercase;
  position:relative;overflow:hidden;isolation:isolate;will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:translateY(0)}
.btn b{font-weight:600;transition:transform .4s var(--ease)}
.btn:hover b{transform:translateX(4px)}
.btn--big{font-size:clamp(15px,2.2vw,21px);padding:19px 34px}
.btn--light{border-color:#fff;color:#fff}
.btn--light::before{background:#fff}
.btn--light:hover{color:var(--ink)}
.btn--ghost{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.75)}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:var(--ink);border-color:#fff}

/* ---------- tag / numeração editorial ---------- */
.tag{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);padding-top:10px;border-top:2px solid var(--blue);
}
.tag--light{color:#fff;border-top-color:#fff}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:130px 0 90px;overflow:hidden;
}
/* o "planeta" da hero: video da Dream Factory recortado em circulo.
   O gradiente fica como fundo, entao se o mp4 falhar o circulo continua de pe. */
/* o video roda DENTRO da marca: o alpha do logo1.png e a mascara.
   Os recortes internos do logo sao transparentes no PNG, entao viram furos
   de verdade. O gradiente fica de fundo: se o mp4 falhar, sobra a marca cheia. */
.orb{
  position:absolute;z-index:0;right:.5vw;
  width:min(55vw,672px);aspect-ratio:1;top:calc(48% - min(27.5vw,336px));
  overflow:hidden;will-change:transform;
  background:radial-gradient(circle at 34% 30%,#7fdcff,#00a6fe 38%,#0047ff 72%,#2f00e9 100%);
  -webkit-mask:url("img/logo1.png") center/contain no-repeat;
  mask:url("img/logo1.png") center/contain no-repeat;
}
/* sem veu de cor: o recorte do logo ja e a assinatura da marca, entao o
   video pode aparecer como e. Um tint por cima so lavava a imagem. */
.orb video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.18) contrast(1.08) brightness(1.05);
}
.hero__in{position:relative;z-index:1}
.hero__kicker{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:24px}
.hero__title{
  font-size:clamp(36px,6.6vw,104px);font-weight:600;line-height:.98;letter-spacing:-.045em;
  max-width:13ch;
}
/* máscara por palavra: quebra natural em qualquer largura */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.w > i{display:block;font-style:normal;will-change:transform}

/* alinhado a esquerda de proposito: com space-between o bloco "ao vivo em"
   encostava na marca de video, que muda de altura conforme a viewport. */
.hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;
  gap:clamp(36px,7vw,110px);
  margin-top:clamp(34px,5vw,60px);padding-top:26px;
}
.hero__foot p{max-width:min(44ch,100%);font-size:clamp(15px,1.4vw,18px);color:var(--ink-2)}
.hero__rotlabel{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.rot{display:block;height:1.1em;overflow:hidden;font-size:clamp(26px,3.4vw,44px);font-weight:700;letter-spacing:-.04em}
.rot b{
  display:block;height:1.1em;line-height:1.1;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__down{
  position:absolute;left:50%;bottom:30px;z-index:1;translate:-50% 0;
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:background .3s,border-color .3s;
}
.hero__down:hover{background:var(--blue);border-color:var(--blue)}
.hero__down i{width:1px;height:16px;background:var(--ink);position:relative}
.hero__down i::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:7px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);rotate:-45deg}
.hero__down:hover i,.hero__down:hover i::after{background:#fff;border-color:#fff}

.r{opacity:0;transform:translateY(20px)}
.reveal{opacity:0;transform:translateY(26px)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;background:var(--blue-2);color:#fff;padding:22px 0}
.marquee__track{display:flex;width:max-content;will-change:transform}
/* --gap controla o respiro entre marca e bolinha dos dois lados */
.marquee__track span{
  --gap:clamp(26px,3.4vw,58px);
  display:flex;align-items:center;gap:var(--gap);padding-right:var(--gap);
  font-size:clamp(20px,2.9vw,36px);font-weight:500;letter-spacing:-.015em;
}
.marquee__track i{font-style:normal;white-space:nowrap;display:inline-flex;align-items:center}
.marquee__track i::after{          /* separador: bolinha no lugar do · colado */
  content:"";flex:none;margin-left:var(--gap);
  width:.2em;height:.2em;border-radius:50%;background:rgba(255,255,255,.55);
}

/* ---------- rail editorial (tag à esquerda, conteúdo à direita) ---------- */
.sec{padding:clamp(70px,10vw,140px) 0}
.rail{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.rail .tag{position:sticky;top:96px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:36px}
.cols p{font-size:clamp(15px,1.4vw,18px);color:var(--ink-2)}
.cols p:first-child{color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}
.pills li{font-size:14px;font-weight:500;padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
@media (max-width:860px){
  /* no desktop a marca fica ao lado do texto em forca total. Na largura do
     celular nao cabe lado a lado, entao ela sobe para cima do titulo — assim
     mantem a mesma presenca em vez de virar uma aguada de 42% atras da leitura */
  /* right positivo: com -10vw a marca sangrava ~39px e o ponto solto do logo,
     que fica no canto inferior direito do quadrado, ficava fora da tela */
  .orb{width:min(72vw,300px);top:6vh;right:2vw;opacity:1}
  .hero{justify-content:flex-start;padding:clamp(320px,43vh,390px) 0 70px}  /* lavado: garante contraste do texto por cima */
  .rail{grid-template-columns:1fr;gap:22px}
  .rail .tag{position:static}
  .cols{grid-template-columns:1fr}
}

/* ---------- placar ---------- */
.score{background:var(--band);color:var(--band-ink);padding:clamp(34px,4.5vw,56px) 0}
.score__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.score b{
  display:block;font-size:clamp(30px,4vw,58px);font-weight:700;line-height:1;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--band-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.score span{display:block;margin-top:10px;font-size:14px;color:var(--band-muted);text-transform:lowercase}
@media (max-width:760px){.score__grid{grid-template-columns:1fr 1fr;gap:26px}}

/* ---------- índice de marcas ---------- */
.index{padding:clamp(70px,10vw,140px) 0 0}
.index .big{margin-top:26px}
.index__hint{margin-top:18px;font-size:14px;color:var(--ink-2)}

.idx{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
/* isolation cria o contexto de empilhamento: sem ele o ::before (z-index:-1)
   da summary pinta atrás do fundo do body e some. */
.idx__row{border-bottom:1px solid var(--line);position:relative;isolation:isolate}
.idx__row summary{
  display:grid;grid-template-columns:70px 1fr 150px 190px 34px;align-items:center;gap:16px;
  padding:clamp(16px,2.2vw,26px) var(--pad);cursor:pointer;list-style:none;
  position:relative;transition:color .35s var(--ease);
}
.idx__row summary::-webkit-details-marker{display:none}
.idx__row summary::before{           /* faixa de cor que preenche no hover/aberto */
  content:"";position:absolute;inset:0;z-index:-1;background:var(--c);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);
}
.idx__row summary::after{            /* + / − */
  content:"";justify-self:end;width:16px;height:16px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/16px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 16px no-repeat;
  transition:rotate .4s var(--ease),background-image .3s;
}
.idx__row summary:hover{color:#fff}
.idx__row summary:hover::before{transform:scaleY(1)}
.idx__row summary:hover::after{
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
}
.idx__n{font-size:13px;font-weight:600;color:var(--blue);transition:color .35s}
.idx__row summary:hover .idx__n{color:#fff}
.idx__name{font-size:clamp(26px,4.4vw,58px);font-weight:600;letter-spacing:-.045em;line-height:1}
.idx__cat,.idx__when{font-size:14px;color:var(--ink-2);transition:color .35s}
.idx__when{text-align:right}
.idx__row summary:hover .idx__cat,.idx__row summary:hover .idx__when{color:rgba(255,255,255,.8)}

.idx__row details[open] summary::before{transform:scaleY(1)}
.idx__row details[open] summary{color:#fff}
.idx__row details[open] summary .idx__n{color:#fff}
.idx__row details[open] summary .idx__cat,.idx__row details[open] summary .idx__when{color:rgba(255,255,255,.8)}
.idx__row details[open] summary::after{
  rotate:45deg;background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
}

/* abertura organica: o painel CRESCE de verdade em vez de pular de altura.
   interpolate-size libera a transicao ate height:auto; onde o
   ::details-content nao existir, a regra e ignorada e volta a abrir na hora. */
:root{interpolate-size:allow-keywords}
.idx__row details::details-content{
  block-size:0;overflow:hidden;content-visibility:hidden;
  /* allow-discrete segura o conteudo visivel ate o fim do recolhimento —
     sem ele a caixa colapsa ja vazia e o fechar nao acompanha o abrir */
  transition:block-size .55s var(--ease),content-visibility .55s allow-discrete;
}
/* estado aberto declarado explicito: se a transicao travar, o padrao e
   "visivel", nunca um painel preso sem altura e sem conteudo */
.idx__row details[open]::details-content{block-size:auto;content-visibility:visible}

.idx__panel{
  padding:clamp(22px,3vw,40px) var(--pad) clamp(30px,4vw,52px);
  background:var(--c);color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,4vw,56px);align-items:start;
}
/* conteudo entra escalonado enquanto a altura abre — e o que da a sensacao organica */
.idx__panel > *{opacity:0;animation:panelIn .5s var(--ease) forwards}
.idx__panel > p {animation-delay:.10s}
.idx__panel > dl{animation-delay:.16s}
.idx__panel > a {animation-delay:.34s}
.idx__panel dl > div{opacity:0;animation:panelIn .5s var(--ease) forwards}
.idx__panel dl > div:nth-child(1){animation-delay:.18s}
.idx__panel dl > div:nth-child(2){animation-delay:.24s}
.idx__panel dl > div:nth-child(3){animation-delay:.30s}
.idx__panel dl > div:nth-child(4){animation-delay:.36s}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.idx__panel p{font-size:clamp(17px,2vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.idx__panel dl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;opacity:1;animation:none}
.idx__panel dt{font-size:clamp(17px,1.8vw,24px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.idx__panel dd{margin-top:5px;font-size:13px;color:rgba(255,255,255,.75)}
.idx__panel > a{
  grid-column:1/-1;justify-self:start;font-weight:600;font-size:15px;
  padding-bottom:3px;border-bottom:1.5px solid rgba(255,255,255,.5);transition:border-color .3s;
}
.idx__panel > a:hover{border-color:#fff}

@media (max-width:980px){
  .idx__row summary{grid-template-columns:44px 1fr auto;gap:4px 12px}
  .idx__name{grid-column:2;grid-row:1}
  .idx__row summary::after{grid-row:1;grid-column:3;align-self:center}
  /* categoria estava escondida no mobile: some informacao que o desktop mostra */
  .idx__cat{grid-column:2;grid-row:2;text-align:left;font-size:13px}
  .idx__when{grid-column:3;grid-row:2;text-align:right;font-size:13px;white-space:nowrap}
  .idx__panel{grid-template-columns:1fr}
  .idx__panel dl{grid-template-columns:1fr 1fr}
}

/* ---------- calendário do ano ---------- */
.year{padding:clamp(70px,10vw,140px) 0 0;background:var(--paper-2)}
.year__head .big{margin-top:26px}
.year__lead{margin-top:18px;max-width:52ch;font-size:clamp(15px,1.4vw,18px);color:var(--ink-2)}

.year__pin{
  position:relative;margin-top:clamp(36px,5vw,64px);
  display:flex;align-items:center;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:clamp(60px,8vw,100px);
}
.year__pin::-webkit-scrollbar{display:none}
.year__track{display:flex;padding-inline:var(--pad)}
.mo{
  flex:0 0 min(64vw,240px);scroll-snap-align:center;
  border-left:1px solid var(--line);padding:0 18px;min-height:210px;
}
.mo:last-child{border-right:1px solid var(--line)}
.mo h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;color:var(--ink-2);margin-bottom:18px}
.mo ul{display:flex;flex-direction:column;gap:8px}
.mo li{
  font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.2;
  padding:12px 14px;border-radius:12px;background:var(--c);color:#fff;
  transition:transform .35s var(--ease);
}
.mo li:hover{transform:translateX(4px)}
.mo li.off{background:transparent;border:1px dashed var(--line);color:var(--ink-2);font-weight:400}
.year__bar{display:none}

@media (min-width:1024px){
  .year__pin{height:100svh;overflow:hidden;scroll-snap-type:none;padding-bottom:0}
  .year__track{will-change:transform}
  .mo{flex-basis:260px;min-height:360px}
  .year__bar{
    display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:56px;
    height:2px;background:var(--line);
  }
  .year__bar i{display:block;height:100%;width:0;background:var(--blue)}
}

/* ---------- palco (único momento escuro) ---------- */
.stage{
  position:relative;padding:clamp(80px,12vw,170px) 0;color:#fff;overflow:hidden;
  background:
    radial-gradient(60% 80% at 78% 20%,rgba(0,71,255,.55),transparent 70%),
    radial-gradient(50% 60% at 12% 85%,rgba(177,0,221,.35),transparent 70%),
    var(--night);
}
/* video de fundo + veu por cima: o texto e branco e precisa do contraste.
   O veu e mais denso a esquerda, onde mora o texto, e abre a direita. */
.stage__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:1;
  /* cena noturna: clarear so com brightness lava a imagem, entao vem
     acompanhado de contraste e saturacao para nao virar cinza */
  filter:brightness(1.32) contrast(1.06) saturate(1.1);
}
/* veu NEUTRO: so escurece, nao tinge. Denso a esquerda, onde mora o texto
   branco, e quase limpo a direita, onde a imagem pode aparecer. */
.stage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,7,15,.86) 0%,rgba(6,7,15,.5) 42%,rgba(6,7,15,.06) 100%);
}
/* respiro entre duas faixas de video em sequencia: coladas elas viram um
   bloco escuro so. O seletor irmao garante que a folga so aparece ai, e nao
   quando um .stage encosta numa secao clara. */
.stage + .stage{margin-top:clamp(40px,6vw,96px)}
.stage .wrap{position:relative;z-index:2}
/* espelhada: texto a direita e veu invertido. Duas faixas escuras de video
   em sequencia ficavam repetitivas demais lado a lado. */
.stage--flip::after{background:linear-gradient(270deg,rgba(6,7,15,.86) 0%,rgba(6,7,15,.5) 42%,rgba(6,7,15,.06) 100%)}
.stage--flip .wrap{text-align:right}
.stage--flip .big,.stage--flip .stage__lead{margin-left:auto}
/* o espelhamento pressupoe duas colunas: texto de um lado, imagem do outro.
   No celular o texto ocupa a largura toda, entao ele so quebraria o
   alinhamento a esquerda de todas as outras secoes. */
@media (max-width:860px){
  .stage--flip::after{background:linear-gradient(90deg,rgba(6,7,15,.86) 0%,rgba(6,7,15,.5) 42%,rgba(6,7,15,.06) 100%)}
  .stage--flip .wrap{text-align:left}
  .stage--flip .big,.stage--flip .stage__lead{margin-left:0}
}
.soon{
  display:inline-block;padding:11px 22px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.35);color:rgba(255,255,255,.75);
  font-size:14px;font-weight:600;text-transform:lowercase;letter-spacing:.02em;
}
.stage .big{margin-top:26px;max-width:16ch}
.stage__lead{margin:26px 0 40px;max-width:50ch;font-size:clamp(16px,1.6vw,20px);color:rgba(255,255,255,.72)}

/* ---------- serviços ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:clamp(36px,5vw,64px);background:var(--line)}
.svc li{
  position:relative;background:var(--paper);padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;gap:12px;isolation:isolate;
}
.svc li::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--c);
  opacity:0;transition:opacity .45s var(--ease);
}
.svc li:hover::before{opacity:1}
.svc li:hover,.svc li:hover p{color:#fff}
.svc li > span{font-size:13px;font-weight:600;color:var(--c);transition:color .35s}
.svc li:hover > span{color:rgba(255,255,255,.8)}
.svc h3{font-size:clamp(22px,2.8vw,36px)}
.svc p{font-size:15px;color:var(--ink-2);flex:1;transition:color .35s}
.svc li > a{
  align-self:start;margin-top:8px;font-size:15px;font-weight:600;text-transform:lowercase;
  padding-bottom:3px;border-bottom:1.5px solid currentColor;
}
@media (max-width:760px){.svc{grid-template-columns:1fr}}

/* ---------- contato ---------- */
.cta{background:var(--blue-2);color:#fff;padding:clamp(80px,12vw,180px) 0}
.cta__title{
  margin-top:28px;font-size:clamp(40px,8.4vw,132px);font-weight:600;line-height:.98;
  letter-spacing:-.05em;max-width:13ch;
}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4.5vw,56px)}

/* ---------- footer ---------- */
.foot{padding:clamp(48px,6vw,76px) 0 24px;border-top:1px solid var(--line)}
.foot__grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:36px}
.foot__grid > div p{margin-top:14px;font-size:15px;color:var(--ink-2);max-width:32ch}
.foot h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px;font-weight:600}
.foot nav{display:flex;flex-direction:column;gap:9px;font-size:15px}
.foot nav a{color:var(--ink-2);transition:color .25s}
.foot nav a:hover{color:var(--blue)}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  margin-top:clamp(36px,5vw,60px);padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2);
}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ---------- acessibilidade / fallbacks ---------- */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* sem GSAP/Lenis (CDN fora do ar): nada fica invisível */
.no-fx #loader,.no-fx .cur,.no-fx .orbit{display:none}
.no-fx .r,.no-fx .reveal{opacity:1;transform:none}
.no-fx .rot{height:auto}
.no-fx .rot b:not(:first-child){display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .r,.reveal{opacity:1!important;transform:none!important}
  .orbit{display:none}
  .year__pin{height:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .year__bar{display:none}
  .rot{height:auto}
  .rot b:not(:first-child){display:none}
}