/* ---------- 9 · MARCA OTAHSTUDIO ·  correções sobre o kit -----------------
   Carrega DEPOIS de 8-a11y.css. Só existe porque duas decisões da marca
   contrariam o padrão do kit:

   1. O kit assume marca escura com texto branco por cima. O lima da OTAH dá
      1,2:1 com branco — todo botão, dot e preenchimento precisa inverter para
      tinta preta. Fica tudo neste arquivo, e não espalhado pelo kit.
   2. O kit acende três auroras coloridas por tela. Aqui o verde é tempero:
      as auroras são grafite quase neutro e o lima entra em alfa baixo, uma
      fonte por tela.
   -------------------------------------------------------------------------- */

/* ---- 0 · o que o kit não precisava declarar -----------------------------
   No site de origem todo <a> mora dentro de um componente que já define cor e
   sublinhado. Aqui o card inteiro é um link, e sem esta regra ele volta ao
   azul sublinhado do navegador. */
a{color:inherit;text-decoration:none;}

/* ---- 1 · fundo: grafite, não violeta ------------------------------------ */
nav{background:rgba(12,12,12,.62);}
@media(max-width:620px){nav{background:rgba(12,12,12,.74);}}
::selection{background:var(--vio);color:#0d0d0d;}
footer{background:#070707;}

/* a malha de 12 colunas some para trás: branco puro em alfa baixo, sem tinta */
section::before{background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);}
section.light::before{background-image:linear-gradient(90deg,rgba(16,16,16,.06) 1px,transparent 1px);}

/* ---- 2 · auroras · lima forte, apoio neutro -----------------------------
   O kit acende três fontes coloridas por tela (violeta + magenta + azul).
   Aqui a fonte principal é lima e vai fundo — é ela que dá o brilho —, mas a
   segunda e a terceira continuam neutras. Assim a tela tem luz sem virar
   parede verde: uma cor só manda, as outras duas só dão volume. */
.a1::after{background:
  radial-gradient(64vw 48vw at 76% 14%,rgb(var(--m-luz) / .24),transparent 62%),
  radial-gradient(52vw 44vw at 12% 82%,rgb(var(--m-apoio) / .10),transparent 66%),
  radial-gradient(90vw 40vw at 50% 112%,rgb(var(--m-frio) / .14),transparent 70%);}
.a2::after{background:
  radial-gradient(58vw 44vw at 14% 12%,rgb(var(--m-apoio) / .09),transparent 64%),
  radial-gradient(46vw 40vw at 92% 84%,rgb(var(--m-luz) / .17),transparent 68%);}
.a3::after{background:
  radial-gradient(70vw 40vw at 50% -8%,rgb(var(--m-luz) / .19),transparent 66%),
  radial-gradient(40vw 40vw at 88% 60%,rgb(var(--m-frio) / .12),transparent 68%);}
.a4::after{background:
  radial-gradient(50vw 44vw at 84% 22%,rgb(var(--m-luz) / .18),transparent 64%),
  radial-gradient(60vw 40vw at 10% 92%,rgb(var(--m-apoio) / .09),transparent 68%);}
.a5::after{background:
  radial-gradient(96vw 46vw at 50% 104%,rgb(var(--m-luz) / .26),transparent 68%),
  radial-gradient(40vw 36vw at 16% 8%,rgb(var(--m-frio) / .11),transparent 68%);}
.a6::after{background:
  radial-gradient(56vw 42vw at 24% 16%,rgb(var(--m-apoio) / .09),transparent 66%),
  radial-gradient(62vw 44vw at 82% 88%,rgb(var(--m-luz) / .22),transparent 68%);}
.light .aur::after{background:
  radial-gradient(78vw 30vw at 50% 118%,rgb(var(--m-nucleo) / .22),transparent 66%),
  radial-gradient(40vw 30vw at 88% -6%,rgb(var(--m-escuro) / .05),transparent 66%);}
.horizon{background:radial-gradient(100% 56% at 50% 0%,rgb(var(--m-luz) / .34),
  rgb(var(--m-apoio) / .10) 40%,transparent 66%);}

/* ---- 3 · tinta preta sobre o lima --------------------------------------
   Todo preenchimento cheio da marca inverte o texto. Lima sobre #0d0d0d
   fecha em 15,4:1; era 1,2:1 com o branco que o kit assume. */
.btn{color:#0d0d0d;
  background:linear-gradient(140deg,rgb(var(--m-vivo)),rgb(var(--m-nucleo)) 58%,rgb(var(--m-profundo)));
  box-shadow:0 10px 34px rgb(var(--m-nucleo) / .22),inset 0 1px 0 rgba(255,255,255,.5);}
.btn:hover{box-shadow:0 18px 48px rgb(var(--m-nucleo) / .34),inset 0 1px 0 rgba(255,255,255,.6);}
.btn::after{background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);}
.btn.ghost{color:#f4f2ee;}
.light .btn.ghost{color:#101010;border-color:#cfcfc6;}

/* a coluna da direita é curta (aqui não há formulário): sem isto ela encosta
   no topo e deixa meio painel vazio */
#cta .box{align-items:center;}
/* #7d78a0 é o cinza-violeta do kit; sobre o painel aceso da OTAH ele some */
.fine{color:#8f8f85;}

#cta button{color:#0d0d0d;
  background:linear-gradient(140deg,rgb(var(--m-vivo-cta)),rgb(var(--m-nucleo)) 56%,rgb(var(--m-profundo)));
  box-shadow:0 14px 40px rgb(var(--m-nucleo) / .3),inset 0 1px 0 rgba(255,255,255,.55);}

/* balão de rótulo do cursor */
#curring span{color:#0d0d0d;border-color:rgba(0,0,0,.2);font-weight:700;}
#curring span::after{border-right-color:rgba(0,0,0,.2);border-bottom-color:rgba(0,0,0,.2);}
#curring.baixo span::after{border-left-color:rgba(0,0,0,.2);border-top-color:rgba(0,0,0,.2);}

/* ---- 3b · a marca no lugar do triângulo -------------------------------
   O kit desenha o "A" da Accellera com clip-path em três lugares: o
   preloader, a cortina do menu e o selo do topo. Aqui quem aparece é o anel
   da OTAH. Usa máscara em vez de <img> para a forma continuar herdando cor:
   lima acesa no preloader, tinta preta sobre a cortina. */
#pre .ptri,
#curtain .ctri,
.tri{
  clip-path:none;
  -webkit-mask:url("../../assets/img/logo-symbol.png") center/contain no-repeat;
  mask:url("../../assets/img/logo-symbol.png") center/contain no-repeat;
}
#pre .ptri{width:66px;height:66px;}
#curtain .ctri{width:54px;height:54px;margin:-27px 0 0 -27px;
  background:#0d0d0d;opacity:.85;}
.tri{width:21px;height:21px;}
@media(max-width:620px){.tri{width:18px;height:18px;}}

/* barra de progresso: lima que abre para branco, sem terceira cor */
#prog{background:linear-gradient(90deg,rgb(var(--m-profundo)),var(--vio),#fbffe4);
  box-shadow:0 0 14px rgb(var(--m-nucleo) / .55);}

/* CTA gigante · a frase da OTAH tem 27 caracteres contra os 20 da frase de
   origem. Com os 7.2vw do kit ela passava da guia direita e era cortada pelo
   overflow da seção; 5.3vw devolve a mesma folga lateral. */
.giant{font-size:clamp(30px,5.3vw,94px);}
/* o preenchimento sobe e o texto vira tinta */
.giant:hover{color:#0d0d0d;}
.giant:hover em,.giant:hover .garrow{color:#0d0d0d;filter:none;}

/* ---- 4 · o beat claro (método) -----------------------------------------
   Lima sobre papel é ilegível. No claro quem fala é a oliva --m-escuro. */
.step.act .dot{color:#0d0d0d;
  background:linear-gradient(140deg,rgb(var(--m-vivo)),rgb(var(--m-profundo)));
  box-shadow:0 14px 36px rgb(var(--m-sombra) / .3),0 0 0 8px rgb(var(--m-nucleo) / .18);}
.step .tag{color:rgb(var(--m-escuro));background:#e6f2bd;}
.tl::after{background:linear-gradient(90deg,rgb(var(--m-escuro)),rgb(var(--m-profundo)));
  box-shadow:0 0 18px rgb(var(--m-nucleo) / .45);}

/* ---- 5 · marca no topo e no rodapé -------------------------------------
   A OTAH tem símbolo próprio: o triângulo genérico do kit sai de cena. */
.logo{gap:12px;letter-spacing:0;}
.logo .sym{width:26px;height:26px;flex:0 0 auto;object-fit:contain;
  filter:drop-shadow(0 0 12px rgb(var(--m-nucleo) / .35));}
.logo .type{height:13px;width:auto;flex:0 0 auto;}
/* no rodapé a marca empilha: símbolo em cima, tipografia embaixo */
footer .flogo{flex-direction:column;align-items:flex-start;gap:0;}
footer .flogo .sym{width:34px;height:34px;}
footer .flogo .type{height:16px;margin-top:12px;}
@media(max-width:620px){.logo .sym{width:22px;height:22px;}.logo .type{height:11px;}}

/* ---- 6 · faixa fantasma (ocupa o lugar dos logos de cliente) ------------
   Mesmo seletor #logos .mq que o motor dirige pelo scroll, mas com texto em
   outline no lugar das marcas — a OTAH ainda não publica carteira. */
#logos .mq{gap:0;}
.ghostw{flex:0 0 auto;display:flex;align-items:center;gap:clamp(24px,3vw,48px);
  padding-right:clamp(24px,3vw,48px);font-family:var(--f-disp);font-weight:700;
  font-size:clamp(30px,4.4vw,62px);letter-spacing:.01em;color:transparent;
  white-space:nowrap;-webkit-text-stroke:1px rgb(var(--m-claro) / .22);}
.ghostw i{font-style:normal;font-size:.3em;color:rgb(var(--m-nucleo) / .5);
  -webkit-text-stroke:0;vertical-align:middle;}

/* ---- 7 · trabalhos · os slots de case ----------------------------------
   Proporção 4:5 travada pelo aspect-ratio para o layout não pular quando a
   imagem real entrar no lugar do placeholder. */
.workgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--blk);}
.wcard{padding:var(--s5);}
.wframe{position:relative;aspect-ratio:4/5;border-radius:var(--r2);overflow:hidden;
  background:linear-gradient(152deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;}
.wframe img{width:100%;height:100%;object-fit:cover;}
.wframe .wsize{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vios);opacity:.7;}
.wframe .wdim{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:#7f7f76;}
.wmeta{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5);}
.wmeta .n{margin:0;}
.wmeta h3{flex:1 1 auto;}
.wmeta .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8b8b80;}
@media(max-width:760px){.workgrid{grid-template-columns:1fr;}}

/* ---- 8 · manifesto · o painel de vidro que fecha o argumento ------------ */
.manif{padding:var(--padL);text-align:center;}
.manif p{font-family:var(--f-disp);font-weight:500;
  font-size:clamp(21px,2.6vw,38px);line-height:1.28;letter-spacing:-.02em;
  color:#f4f2ee;max-width:26ch;margin:0 auto;text-wrap:balance;}
.manif p em{font-style:normal;color:var(--vios);
  text-shadow:0 0 44px rgb(var(--m-luz) / .4);}
.manif .sign{display:flex;align-items:center;justify-content:center;gap:var(--s3);
  margin-top:var(--s7);font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#8b8b80;}
.manif .sign img{width:22px;height:22px;object-fit:contain;opacity:.8;}

/* ---- 9 · dois ajustes de peso ------------------------------------------
   O símbolo da OTAH é um anel cheio, bem mais pesado que o triângulo fino do
   kit: no mesmo alfa ele briga com a headline em vez de ficar de marca d'água. */
#hero .mark{opacity:.07;}
@media(max-width:620px){#hero .mark{opacity:.045;}}

/* No celular o método perde o pin e vira lista: o índice gigante deixa de ter
   a tela cheia para ocupar e cai em cima do próprio título. */
@media(pointer:coarse){#metodo .sidx{display:none;}}
html.semmov #metodo .sidx{display:none;}

/* ---- 10 · anotações técnicas do rodapé --------------------------------- */
.annot{display:flex;align-items:center;justify-content:center;gap:var(--s4);
  flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#7f7f76;margin-top:var(--s7);}
.annot i{display:block;width:22px;height:1px;background:rgba(255,255,255,.16);}
.annot b{color:var(--vios);font-weight:500;}