/* ============================================================
   NONON — página de marca
   RegenIA · ecossistema VALUX
   Paleta: preto / grafite / dourado champagne + azul-aço (eixo)
   ============================================================ */

:root{
  --fundo:        #0B0B0C;
  --fundo-suave:  #131315;
  --linha:        #26262A;
  --tinta:        #F2F0EC;
  --tinta-fraca:  #A8A49C;
  --ouro:         #C9A45C;
  --eixo:         #5B7FA6;   /* traços, linhas, elementos gráficos */
  --eixo-claro:   #7B9EC4;   /* texto e foco — contraste 7:1 sobre o fundo */

  --serifa: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --largura: 68rem;
  --margem:  clamp(1.5rem, 5vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.envelope{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--margem);
}

/* ---------- utilidades de acessibilidade ---------- */

.visualmente-oculto{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--tinta); color:var(--fundo);
  padding:.75rem 1.25rem; border-radius:0 0 .375rem 0;
  font-size:.9375rem; text-decoration:none;
}
.pular:focus{ left:0; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--eixo-claro);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(4rem,12vh,7rem);
  text-align:center;
  position:relative;
}

/* linha do eixo, discreta, atrás de tudo */
.hero::after{
  content:"";
  position:absolute; inset-block:18% 0; left:50%;
  width:1px;
  background:linear-gradient(to bottom, transparent, var(--eixo) 45%, transparent);
  opacity:.28;
  pointer-events:none;
}

.marca{ display:inline-block; margin-bottom:clamp(1.5rem,4vh,2.5rem); }

.assinatura{
  font-family:var(--serifa);
  font-weight:400;
  font-size:clamp(3.25rem, 19vw, 13.5rem);
  line-height:.92;
  letter-spacing:.03em;
  margin:0;
  white-space:nowrap;
  /* compensa o letter-spacing sobrando à direita, mantendo o eixo no centro óptico */
  text-indent:.03em;
}

.letra{ display:inline-block; }
.letra.eixo{ color:var(--ouro); }

.lema{
  font-family:var(--serifa);
  font-size:clamp(1.375rem, 1.05rem + 1.5vw, 2.125rem);
  font-weight:400;
  line-height:1.3;
  margin:clamp(1.25rem,3vh,2rem) 0 0;
}

.chamada{
  max-width:34rem;
  margin:1.25rem auto 0;
  color:var(--tinta-fraca);
  font-size:clamp(1rem,0.95rem + 0.3vw,1.125rem);
}

.descer{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:clamp(2.5rem,7vh,4.5rem);
  color:var(--tinta-fraca);
  text-decoration:none;
  font-size:.875rem;
  letter-spacing:.08em; text-transform:uppercase;
  transition:color .3s ease;
}
.descer:hover{ color:var(--tinta); }
.descer svg{ transition:transform .3s ease; }
.descer:hover svg{ transform:translateY(3px); }

/* ============================================================
   SEÇÕES
   ============================================================ */

.secao{
  padding-block:clamp(5rem,13vh,9rem);
  border-top:1px solid var(--linha);
}

.etiqueta{
  margin:0 0 1.25rem;
  color:var(--eixo-claro);
  font-size:.8125rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.titulo{
  font-family:var(--serifa);
  font-weight:400;
  font-size:clamp(2.125rem, 1.4rem + 3.2vw, 4rem);
  line-height:1.08;
  letter-spacing:.005em;
  margin:0 0 clamp(2rem,5vh,3rem);
}

.prosa{ max-width:38rem; }
.prosa p{ margin:0 0 1.25rem; color:var(--tinta-fraca); }
.prosa p:last-child{ margin-bottom:0; }
.prosa strong{ color:var(--tinta); font-weight:500; }
.prosa-solta{ margin-bottom:clamp(2.5rem,6vh,3.5rem); }

.prosa-final{
  font-family:var(--serifa);
  font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  line-height:1.4;
  color:var(--tinta) !important;
  padding-top:.5rem;
}

.destaque{ color:var(--ouro); }

/* ---------- o momento do espelhamento ---------- */

.palco{
  margin:0 0 clamp(2.5rem,6vh,4rem);
  text-align:center;
  padding-block:clamp(2rem,6vh,3.5rem);
  border-block:1px solid var(--linha);
  position:relative;
}

/* eixo vertical do palco */
.palco::before{
  content:"";
  position:absolute; inset-block:0; left:50%;
  width:1px; background:var(--eixo); opacity:.3;
}

.girador{
  display:block; width:100%;
  background:none; border:0; padding:0;
  color:inherit; cursor:pointer;
  perspective:900px;
}

.palavra{
  display:block;
  font-family:var(--serifa);
  font-weight:400;
  font-size:clamp(2.75rem, 14vw, 8rem);
  line-height:1;
  letter-spacing:.06em;
  text-indent:.06em;
  color:var(--tinta);
  transition:transform 1.15s cubic-bezier(.6,.02,.2,1), color 1.15s ease;
  transform-origin:50% 50%;
}

.girador:not(.girado):hover .palavra,
.girador:not(.girado):focus-visible .palavra,
.girador.girado .palavra{
  transform:rotate(180deg);
  color:var(--ouro);
}

/* já girada: continua o movimento no mesmo sentido, nunca desfaz na marra */
.girador.girado:hover .palavra,
.girador.girado:focus-visible .palavra{
  transform:rotate(360deg);
}

.legenda{
  margin-top:clamp(1.25rem,3vh,2rem);
  color:var(--tinta-fraca);
  font-size:.875rem;
  letter-spacing:.04em;
}
.legenda-estatica{ display:none; }

/* ============================================================
   CARTAS — o que ele faz
   ============================================================ */

.cartas{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  background:var(--linha);
  border:1px solid var(--linha);
  border-radius:.5rem;
  overflow:hidden;
  grid-template-columns:1fr;
}

.carta{
  background:var(--fundo-suave);
  padding:clamp(1.5rem,4vw,2.25rem);
}

.carta h3{
  font-family:var(--serifa);
  font-weight:600;
  font-size:1.375rem;
  line-height:1.2;
  margin:0 0 .625rem;
  color:var(--tinta);
}

.carta p{
  margin:0;
  color:var(--tinta-fraca);
  font-size:.9375rem;
  line-height:1.65;
}

/* ---------- faixa 1% / 99% ---------- */

.faixa{
  margin-top:clamp(2.5rem,6vh,3.5rem);
  padding:clamp(1.75rem,4.5vw,2.75rem);
  border:1px solid var(--linha);
  border-left:2px solid var(--ouro);
  border-radius:.5rem;
  background:var(--fundo-suave);
}

.faixa-numero{
  margin:0 0 .875rem;
  font-family:var(--serifa);
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.5rem);
  line-height:1.15;
}
.faixa-numero span{ color:var(--ouro); }
.faixa-mais{ color:var(--tinta-fraca) !important; padding-inline:.25rem; }

.faixa-texto{
  margin:0;
  max-width:42rem;
  color:var(--tinta-fraca);
  font-size:.9375rem;
}

/* ============================================================
   INSTÂNCIAS — quem usa
   ============================================================ */

.instancias{ display:grid; gap:1rem; }

.vagas{ display:grid; gap:1rem; grid-template-columns:1fr; }

.instancia{
  padding:clamp(1.5rem,4vw,2.25rem);
  border:1px solid var(--linha);
  border-radius:.5rem;
  background:var(--fundo-suave);
}

.instancia.viva{ border-color:rgba(201,164,92,.4); }

.instancia.vaga{
  background:transparent;
  border-style:dashed;
  display:flex; flex-direction:column; justify-content:center;
  min-height:9rem;
}

.selo{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 1rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro);
}
.selo-calmo{ color:var(--tinta-fraca); }

.ponto{
  width:.4375rem; height:.4375rem; border-radius:50%;
  background:var(--ouro);
  box-shadow:0 0 0 4px rgba(201,164,92,.16);
}

.instancia-nome{
  font-family:var(--serifa);
  font-weight:600;
  font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);
  line-height:1.05;
  margin:0;
  letter-spacing:.01em;
}

.instancia-area{
  margin:.375rem 0 1rem;
  color:var(--eixo-claro);
  font-size:.875rem;
  letter-spacing:.06em;
}

.instancia-texto{
  margin:0;
  color:var(--tinta-fraca);
  font-size:.9375rem;
  max-width:32rem;
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape{
  border-top:1px solid var(--linha);
  padding-block:clamp(3rem,8vh,4.5rem);
  text-align:center;
}

.marca-rodape{ display:inline-block; color:var(--tinta-fraca); opacity:.7; margin-bottom:1.25rem; }

.rodape-linha{
  margin:0 0 .375rem;
  color:var(--tinta-fraca);
  font-size:.875rem;
  letter-spacing:.04em;
}

.rodape-linha a{
  color:var(--tinta-fraca);
  text-decoration:none;
  border-bottom:1px solid var(--linha);
  padding-bottom:1px;
  transition:color .25s ease, border-color .25s ease;
}
.rodape-linha a:hover{ color:var(--tinta); border-color:var(--tinta-fraca); }

.rodape-fina{
  margin:1.5rem 0 0;
  color:#8A877E;   /* 5,5:1 sobre o fundo — folga sobre o mínimo AA */
  font-size:.8125rem;
}

/* ============================================================
   ENTRADA SUAVE (progressiva — sem JS, tudo já está visível)
   ============================================================ */

/* só esconde quando há JS para revelar de volta */
.js .surge{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.js .surge.visivel{ opacity:1; transform:none; }

/* ============================================================
   TELAS MAIORES
   ============================================================ */

@media (min-width:40rem){
  .cartas{ grid-template-columns:repeat(2,1fr); }
  .vagas{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:64rem){
  .cartas{ grid-template-columns:repeat(4,1fr); }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   Sem giro. A prova passa a ser estática: a palavra aparece
   já girada, lado a lado com a original.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .girador{ cursor:default; pointer-events:none; }
  .girador:hover .palavra,
  .girador:focus-visible .palavra,
  .girador.girado .palavra{ transform:none; color:var(--tinta); }

  /* a palavra girada vem logo abaixo da original, e a legenda por último */
  .palco{ display:flex; flex-direction:column; }
  .palco .girador{ order:1; }
  .palco::after{ order:2; }
  .palco .legenda{ order:3; }

  .palco::after{
    content:"NONON";
    display:block;
    margin-top:.75rem;
    font-family:var(--serifa);
    font-weight:400;
    font-size:clamp(2.75rem,14vw,8rem);
    line-height:1;
    letter-spacing:.06em;
    text-indent:.06em;
    color:var(--ouro);
    transform:rotate(180deg);
  }

  .legenda-movimento{ display:none; }
  .legenda-estatica{ display:inline; }

  .js .surge{ opacity:1; transform:none; }
}