/* ============================================================
   SUBK — linha de entrada
   Sistema: moldura (bracket) do manual como estrutura da página.
   Uma família: Archivo variável (largura 75–125, peso 400–900).
   ============================================================ */

/* Archivo variável, servida pelo próprio site (só o subconjunto latino: cobre todo o português) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-afcb76aa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* base */
  --ink:      #050506;
  --ink-2:    #0b0b0f;
  --bone:     #f2f3f5;
  --ash:      #8e8e96;

  /* acentos — um por seção, nunca os três juntos */
  --cyan:     #5bc8f5;   /* vivo / interativo */
  --azure:    #409bf3;   /* estrutura */
  --violet:   #5b4fc4;   /* moldura — a cor assinatura do manual */
  --magenta:  #9b3fbf;   /* ênfase */

  /* medidas */
  --gut:      clamp(1rem, 4vw, 3.5rem);
  --rail:     clamp(2.5rem, 7vw, 6rem);
  --max:      78rem;
  --bar-h:    4.25rem;

  --t-fast:   160ms;
  --t-base:   280ms;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-h) + 1rem);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.6;
  font-variation-settings:'wdth' 100,'wght' 400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,canvas{ display:block; max-width:100%; }
a{ color:inherit; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:var(--ink);
  padding:.75rem 1.25rem; font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }

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

/* ---------- logo por máscara (permite tingir e deslocar) ---------- */
.bar__mark,.foot__mark,.glitch__l{
  display:block;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-position:left center; mask-position:left center;
}
.bar__mark{
  width:6.5rem; height:1.3rem; background:var(--bone);
  -webkit-mask-image:url(assets/logo.svg); mask-image:url(assets/logo.svg);
}
.foot__mark{
  width:5rem; height:2.2rem; background:var(--ash);
  -webkit-mask-image:url(assets/logo-full.svg); mask-image:url(assets/logo-full.svg);
}

/* ============================================================
   BARRA
   ============================================================ */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--bar-h);
  display:flex; align-items:center; gap:var(--gut);
  padding-inline:var(--gut);
  background:color-mix(in srgb,var(--ink) 72%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--violet) 32%,transparent);
}
/* progresso da leitura, colado na borda da barra */
.bar::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--cyan);
  transform:scaleX(var(--p,0)); transform-origin:left;
}
.bar__nav{ display:none; margin-left:auto; gap:1.75rem; font-size:.9rem; }
.bar__nav a{
  text-decoration:none; color:var(--ash);
  transition:color var(--t-fast) var(--ease);
}
.bar__nav a:hover{ color:var(--bone); }

.bar__cta{
  margin-left:auto;
  padding:.5rem 1.1rem;
  font-size:.875rem; font-weight:700; text-decoration:none;
  color:var(--ink); background:var(--cyan);
  transition:background var(--t-fast) var(--ease);
}
.bar__cta:hover{ background:var(--bone); }

@media (min-width:60rem){
  .bar__nav{ display:flex; }
  .bar__cta{ margin-left:0; }
}

/* ============================================================
   MOLDURA — o sistema estrutural
   ============================================================ */
.frame{
  position:absolute;
  inset:clamp(.6rem,2.2vw,1.6rem);
  pointer-events:none;
}
.frame__tl,.frame__br{ position:absolute; display:block; }

.frame--hero{
  inset:calc(var(--bar-h) + .5rem) clamp(.6rem,2.2vw,1.6rem) clamp(.6rem,2.2vw,1.6rem);
}

.frame__tl{
  top:0; left:0;
  width:min(40%,20rem); height:min(24%,8rem);
  border-top:2px solid var(--violet);
  border-left:2px solid var(--violet);
  transform-origin:left top;
}
.frame__br{
  bottom:0; right:0;
  width:min(40%,20rem); height:min(24%,8rem);
  border-bottom:2px solid var(--violet);
  border-right:2px solid var(--violet);
  transform-origin:right bottom;
}

/* estado inicial da animação de traço */
[data-frame] .frame__tl,
[data-frame] .frame__br{ transform:scale(0); opacity:0; }

/* ============================================================
   TOPO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--bar-h) + var(--rail)) var(--gut) var(--rail);
  overflow:hidden;
  isolation:isolate;
}
.hero__canvas{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero__canvas.on{ opacity:.82; }

/* fallback: se o WebGL falhar, a textura real entra por CSS */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-3;
  background:url(assets/holo.webp) center/cover no-repeat;
  filter:saturate(1.1) contrast(1.05);
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom,var(--ink) 0%,transparent 20%,transparent 74%,var(--ink) 100%),
    radial-gradient(85% 70% at 92% 48%,transparent 0%,color-mix(in srgb,var(--ink) 70%,transparent) 46%,var(--ink) 82%),
    linear-gradient(to right,var(--ink) 30%,color-mix(in srgb,var(--ink) 74%,transparent) 62%,color-mix(in srgb,var(--ink) 34%,transparent) 100%),
    color-mix(in srgb,var(--ink) 30%,transparent);
}

.hero__body{ position:relative; width:100%; max-width:var(--max); margin-inline:auto; }

/* --- logo em glitch (três camadas mascaradas) --- */
.glitch{
  position:relative;
  width:clamp(8rem,22vw,13rem); height:clamp(1.6rem,4.4vw,2.6rem);
  margin-bottom:clamp(1.75rem,5vw,3rem);
}
.glitch__l{
  position:absolute; inset:0;
  -webkit-mask-image:url(assets/logo.svg); mask-image:url(assets/logo.svg);
}
.glitch__l--c{ background:var(--cyan);    mix-blend-mode:screen; }
.glitch__l--m{ background:var(--magenta); mix-blend-mode:screen; }
.glitch__l--w{ background:var(--bone); }

.hero__h1{
  margin:0;
  font-size:clamp(2.6rem,10.5vw,7rem);
  line-height:.92;
  letter-spacing:-.025em;
  font-variation-settings:'wdth' 88,'wght' 800;
  text-wrap:balance;
}
/* telas baixas (notebook 1366×768, tablet deitado): o topo cabe numa tela */
@media (max-height:52rem) and (min-width:40rem){
  .hero{ padding-top:calc(var(--bar-h) + 1.75rem); padding-bottom:1.75rem; }
  .hero__h1{ font-size:clamp(2.6rem,min(10.5vw,12.5vh),7rem); }
  .glitch{ margin-bottom:1.25rem; }
  .hero__sub{ margin-top:1.25rem; }
  .hero__acts{ margin-top:1.4rem; }
  .hero__clock{ margin-top:1.2rem; }
}
.hero__kick{
  display:block; margin-bottom:.9rem;
  font-size:clamp(.72rem,.68rem + .25vw,.9rem); line-height:1.4;
  letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 600;
  color:color-mix(in srgb,var(--bone) 72%,transparent);
}
.hero__line{ display:block; }
.hero__line .w{ display:inline-block; white-space:nowrap; }
.hero__line .ch{ display:inline-block; }
.hero__line--price{
  font-variation-settings:'wdth' 118,'wght' 900;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
  margin-top:.08em;
}
.hero__line--price .cur{
  font-size:.42em; font-variation-settings:'wdth' 100,'wght' 600;
  vertical-align:.52em; margin-right:.12em; color:var(--bone);
}

.hero__sub{
  max-width:34ch;
  margin:clamp(1.5rem,4vw,2.25rem) 0 0;
  color:var(--ash);
  font-size:clamp(1rem,.95rem + .4vw,1.2rem);
}

.hero__acts{
  display:flex; flex-wrap:wrap; gap:.875rem;
  margin-top:clamp(1.75rem,4vw,2.5rem);
}

.hero__clock{
  margin:clamp(1.5rem,4vw,2.25rem) 0 0;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet);
  font-variation-settings:'wdth' 112,'wght' 600;
}
.hero__clock [data-days]{ color:var(--cyan); font-variant-numeric:tabular-nums; }

/* setas do manual, descendo a lateral */
.hero__rail{
  position:absolute; right:var(--gut); bottom:var(--rail);
  display:none; gap:.4rem;
}
.hero__rail span{
  width:1.1rem; height:1.5rem; background:var(--magenta);
  clip-path:polygon(0 0,62% 0,100% 50%,62% 100%,0 100%);
  opacity:.25;
  animation:pulse 2.4s var(--ease) infinite;
}
.hero__rail span:nth-child(2){ animation-delay:.18s; }
.hero__rail span:nth-child(3){ animation-delay:.36s; }
.hero__rail span:nth-child(4){ animation-delay:.54s; }
@keyframes pulse{ 0%,100%{opacity:.18} 45%{opacity:.9} }

@media (min-width:60rem){ .hero__rail{ display:flex; } }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:3rem; padding:.85rem 1.6rem;
  font:inherit; font-weight:700; font-size:.98rem;
  letter-spacing:.005em; text-decoration:none; cursor:pointer;
  border:2px solid transparent;
  transition:background var(--t-base) var(--ease),
             color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn--go{ background:var(--cyan); color:var(--ink); }
.btn--go:hover{ background:var(--bone); }
.btn--ghost{ border-color:color-mix(in srgb,var(--bone) 34%,transparent); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn--big{ min-height:3.75rem; padding:1.1rem 2.5rem; font-size:1.1rem; }

/* ============================================================
   SEÇÕES
   ============================================================ */
.sec{
  position:relative;
  padding:clamp(4.5rem,13vw,9rem) var(--gut);
}
.wrap{ position:relative; max-width:var(--max); margin-inline:auto; }

.h2{
  margin:0 0 clamp(2rem,5vw,3rem);
  font-size:clamp(1.9rem,5.5vw,3.4rem);
  line-height:1;
  letter-spacing:-.02em;
  font-variation-settings:'wdth' 86,'wght' 800;
}

/* títulos entram largos e finos e fecham na largura do manual */
.h2,.end__h{ transition:font-variation-settings 1.1s cubic-bezier(.16,1,.3,1); }
.js-ready .h2[data-scramble]:not(.in),
.js-ready .end__h:not(.in){ font-variation-settings:'wdth' 125,'wght' 300; }

/* ============================================================
   FAIXA CINÉTICA
   ============================================================ */
.band{
  position:relative; overflow:hidden;
  padding:clamp(1rem,2.6vw,1.75rem) 0;
  border-block:1px solid color-mix(in srgb,var(--violet) 32%,transparent);
  background:var(--ink);
}
.band__track{ display:flex; width:max-content; will-change:transform; }
.band__grp{
  display:flex; align-items:center; flex-shrink:0;
  gap:clamp(1.25rem,3vw,2.5rem); padding-right:clamp(1.25rem,3vw,2.5rem);
  font-size:clamp(1.6rem,5.2vw,3.8rem); line-height:1;
  text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap;
  font-variation-settings:'wdth' 125,'wght' 900;
}
.band__grp b{ font-weight:inherit; }
.band__grp .o{
  color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--bone) 62%,transparent);
}
.band__grp i{
  flex-shrink:0; width:.42em; height:.6em; background:var(--magenta);
  clip-path:polygon(0 0,62% 0,100% 50%,62% 100%,0 100%);
}

/* --- problema: corrente de três --- */
.chain{
  list-style:none; counter-reset:c;
  margin:0; padding:0;
  display:grid; gap:clamp(.75rem,2vw,1.25rem);
}
.chain li{
  position:relative;
  padding-left:2.25rem;
  font-size:clamp(1.35rem,4.5vw,2.4rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-variation-settings:'wdth' 92,'wght' 600;
  opacity:.6;
  transition:opacity 420ms var(--ease),color 420ms var(--ease);
}
.chain li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:1.1rem; height:2px; background:var(--magenta);
}
.chain li.lit{ opacity:1; }
.chain li.lit:last-child{ color:var(--magenta); }

.chain__out{
  max-width:52ch;
  margin:clamp(2.25rem,6vw,3.5rem) 0 0;
  padding-left:2.25rem;
  border-left:2px solid var(--cyan);
  color:var(--bone);
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
}

/* --- pacotes: a seção mais calma da página --- */
.sec--plans{ background:var(--ink-2); }
.plans{
  display:grid; gap:1.25rem;
  grid-template-columns:1fr;
}
/* tablet: o pacote principal ocupa a linha inteira e os outros dois dividem a de baixo */
@media (min-width:40rem) and (max-width:59.99rem){
  .plans{ grid-template-columns:1fr 1fr; }
  .plan--lead{ grid-column:1 / -1; }
}
@media (min-width:60rem){ .plans{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }

.plan{
  --spot:var(--azure);
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,3.5vw,2.25rem);
  background:var(--ink);
  border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);
  transition:border-color var(--t-base) var(--ease);
}
.plan--lead{ --spot:var(--cyan); border-color:var(--cyan); }

/* efeito: luz que segue o ponteiro por dentro e acende a borda */
.plan::before,.plan::after{
  content:''; position:absolute; pointer-events:none;
  opacity:0; transition:opacity 400ms var(--ease);
}
.plan::before{
  inset:0; z-index:-1;
  background:radial-gradient(22rem circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--spot) 11%,transparent),transparent 70%);
}
.plan::after{
  inset:-1px; padding:1px;
  background:radial-gradient(16rem circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.plan.shown{ transition:border-color var(--t-base) var(--ease),transform 450ms cubic-bezier(.16,1,.3,1); }
@media (hover:hover) and (pointer:fine){
  .plan:hover::before,.plan:hover::after{ opacity:1; }
  .plan.shown:hover{ transform:translateY(-6px); }
}

.plan__name{
  margin:0;
  font-size:1rem; font-variation-settings:'wdth' 100,'wght' 600;
  color:var(--ash);
}
.plan__price{
  margin:.5rem 0 .25rem;
  font-size:clamp(2.4rem,7vw,3.1rem); line-height:1;
  letter-spacing:-.03em;
  font-variation-settings:'wdth' 112,'wght' 900;
  font-variant-numeric:tabular-nums;
}
.plan--lead .plan__price{ color:var(--cyan); }
.plan__price .cur{
  font-size:.38em; vertical-align:.56em; margin-right:.1em;
  font-variation-settings:'wdth' 100,'wght' 600; color:var(--ash);
}
.plan__terms{ margin:0 0 1.5rem; font-size:.85rem; color:var(--ash); }

.plan__list{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.6rem; align-content:start; flex:1; }
.plan__list li{ position:relative; padding-left:1.35rem; font-size:.95rem; line-height:1.45; }
.plan__list li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:.55rem; height:2px; background:var(--azure);
}
.plan__cta{ width:100%; margin-top:auto; }

/* --- como funciona: sequência real, numeração justificada --- */
.how{ position:relative; }
.how__rail{
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:color-mix(in srgb,var(--bone) 10%,transparent);
}
.how__rail i{
  display:block; width:100%; height:100%;
  background:var(--violet);
  transform:scaleY(0); transform-origin:top;
}
.steps{ list-style:none; counter-reset:s; margin:0; padding:0 0 0 1.75rem; display:grid; gap:clamp(2rem,5vw,3rem); }
@media (min-width:52rem){
  .steps{ grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); padding:0; }
  .how__rail{ top:-1.5rem; bottom:auto; right:0; width:auto; height:2px; }
  .how__rail i{ transform:scaleX(0); transform-origin:left; }
}

.step{ position:relative; padding-top:3.25rem; }
.step__n{
  position:absolute; top:0; left:0;
  font-size:2.25rem; line-height:1;
  font-variation-settings:'wdth' 118,'wght' 900;
  font-variant-numeric:tabular-nums;
  color:transparent;
  -webkit-text-stroke:1.5px var(--violet);
  transition:color 500ms var(--ease);
}
.step.on .step__n{ color:var(--violet); }
.step__t{
  margin:0 0 .5rem;
  font-size:1.2rem; font-variation-settings:'wdth' 96,'wght' 700;
}
.step p{ margin:0; color:var(--ash); font-size:.98rem; max-width:34ch; }

/* --- trabalhos --- */
.work{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:46rem){ .work{ grid-template-columns:repeat(3,1fr); } }

.card{
  position:relative; display:block; text-decoration:none;
  border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);
  overflow:hidden;
  transition:border-color var(--t-base) var(--ease);
}
.card:hover{ border-color:var(--cyan); }

.card__img{
  display:block; aspect-ratio:4/3;
  background-size:cover; background-position:center;
  transition:transform 600ms var(--ease);
}
.card:hover .card__img{ transform:scale(1.04); }

/* inclinação (JS escreve --rx/--ry) e brilho holográfico sob o ponteiro */
.card__glare{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity 400ms var(--ease);
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--cyan) 26%,transparent),transparent 42%),
    linear-gradient(115deg,transparent 35%,
      color-mix(in srgb,var(--cyan) 10%,transparent) 50%,transparent 65%);
}
.card.tilt .card__glare{ opacity:1; }

/* --- trabalhos reais: janela de navegador com a página rolando --- */
@media (min-width:46rem){ .work--sites{ grid-template-columns:repeat(2,1fr); gap:1.5rem; } }

/* conceitos: carrossel com encaixe no celular e no tablet, três colunas só no notebook */
@media (max-width:59.99rem){
  .work--concept{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(82%,24rem);
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) 1rem; scroll-padding-inline:var(--gut);
    scrollbar-width:thin; scrollbar-color:var(--violet) transparent;
  }
  .work--concept > .card{ scroll-snap-align:start; }
}

.site__win{ display:block; background:var(--ink-2); }
.site__bar{
  display:flex; align-items:center; gap:.4rem;
  height:2rem; padding:0 .75rem;
  background:#0e0e13;
  border-bottom:1px solid color-mix(in srgb,var(--bone) 9%,transparent);
}
.site__bar i{
  flex-shrink:0; width:.5rem; height:.5rem; border-radius:50%;
  background:color-mix(in srgb,var(--bone) 18%,transparent);
  transition:background var(--t-base) var(--ease);
}
.site:hover .site__bar i:first-child{ background:var(--cyan); }
.site__url{
  flex:1; min-width:0; margin:0 1.4rem 0 .6rem;
  padding:.15rem .6rem; border-radius:3px;
  background:color-mix(in srgb,var(--bone) 5%,transparent);
  font-size:.72rem; color:var(--ash); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.site__view{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/10; background:var(--ink-2);
}
.site__view img{
  display:block; width:100%; height:auto; max-width:none;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1);
}
@media (hover:hover) and (pointer:fine){
  .site:hover .site__view img{
    transform:translateY(calc(-1 * var(--shift,0px)));
    transition-duration:var(--dur,6s);
    transition-timing-function:cubic-bezier(.45,0,.55,1);
  }
}
.site__go{
  display:flex; align-items:center; gap:.5rem; width:max-content;
  margin-top:.7rem;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 700;
  color:var(--cyan);
}
.site__go::after{
  content:''; width:.45rem; height:.6rem; background:currentColor;
  clip-path:polygon(0 0,62% 0,100% 50%,62% 100%,0 100%);
  transition:transform var(--t-base) var(--ease);
}
.site:hover .site__go::after{ transform:translateX(4px); }

.card__tag{
  display:inline-block; margin-bottom:.55rem;
  padding:.2rem .6rem;
  font-size:.7rem; font-variation-settings:'wdth' 100,'wght' 700;
  background:var(--violet); color:var(--bone);
}
.card__meta{
  display:block; padding:1rem 1.1rem;
  font-size:.9rem; color:var(--ash);
}
.card__meta b{
  display:block; color:var(--bone);
  font-variation-settings:'wdth' 96,'wght' 700;
  margin-bottom:.15rem;
}

.sub-h{
  margin:clamp(3rem,7vw,4.5rem) 0 .5rem;
  font-size:1.35rem; font-variation-settings:'wdth' 90,'wght' 700;
}
.sub-p{ margin:0 0 1.75rem; color:var(--ash); font-size:.95rem; max-width:48ch; }

/* --- quem faz --- */
.sec--who{ background:var(--ink-2); }
.wrap--split{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
@media (min-width:52rem){
  .wrap--split{ grid-template-columns:minmax(0,18rem) minmax(0,1fr); align-items:start; }
}
/* foto em círculo, como no avatar do Instagram, com o anel índigo da marca */
.who__pic{
  position:relative; margin:1.25rem 0 0 1.25rem;
  width:min(100% - 2.5rem,14rem);
}
.who__pic img{
  position:relative; z-index:1;
  display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:50%;
  background:#8e8e96;
}
.who__pic::before,.who__pic::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none;
  aspect-ratio:1; left:50%; top:0; width:100%;
}
.who__pic::before{
  transform:translateX(-50%) scale(1.09);
  border:1px solid var(--violet);
}
.who__pic::after{
  transform:translateX(-50%) scale(1.18);
  border:1px dashed color-mix(in srgb,var(--violet) 55%,transparent);
  animation:orbit 40s linear infinite;
}
@keyframes orbit{ to{ transform:translateX(-50%) scale(1.18) rotate(360deg); } }
.who__handle{
  margin-top:1.6rem; text-align:center;
  font-size:.78rem; letter-spacing:.14em;
  font-variation-settings:'wdth' 110,'wght' 600;
  color:var(--ash);
}
.who__txt p{ max-width:54ch; color:var(--ash); }
.who__txt p:first-of-type{ color:var(--bone); font-size:1.1rem; }
.who__ig{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:.75rem;
  font-weight:700; text-decoration:none; color:var(--bone);
  border-bottom:2px solid var(--violet);
  padding-bottom:.2rem;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.who__ig::after{
  content:''; width:.55rem; height:.75rem; background:var(--violet);
  clip-path:polygon(0 0,62% 0,100% 50%,62% 100%,0 100%);
  transition:transform var(--t-base) var(--ease),background var(--t-fast) var(--ease);
}
.who__ig:hover{ color:var(--cyan); border-color:var(--cyan); }
.who__ig:hover::after{ background:var(--cyan); transform:translateX(4px); }
.who__legal{
  margin-top:2rem !important;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet) !important;
  font-variation-settings:'wdth' 108,'wght' 600;
}

/* --- dúvidas --- */
.faq{ max-width:52rem; border-top:1px solid color-mix(in srgb,var(--bone) 14%,transparent); }
.q{ border-bottom:1px solid color-mix(in srgb,var(--bone) 14%,transparent); }
.q summary{
  cursor:pointer; list-style:none;
  padding:1.3rem 2.5rem 1.3rem 0; position:relative;
  font-size:1.05rem; font-variation-settings:'wdth' 96,'wght' 600;
  transition:color var(--t-fast) var(--ease);
}
.q summary::-webkit-details-marker{ display:none; }
.q summary:hover{ color:var(--cyan); }
.q summary::after{
  content:''; position:absolute; right:.4rem; top:1.75rem;
  width:.7rem; height:.7rem;
  border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform:rotate(45deg);
  transition:transform var(--t-base) var(--ease);
}
.q[open] summary::after{ transform:rotate(-135deg); }

/* abre e fecha deslizando (Chrome 131+; nos outros abre seco, como antes) */
:root{ interpolate-size:allow-keywords; }
.q::details-content{
  block-size:0; overflow:hidden;
  transition:block-size 450ms var(--ease),content-visibility 450ms allow-discrete;
}
.q[open]::details-content{ block-size:auto; }
.q p{ margin:0 0 1.4rem; max-width:58ch; color:var(--ash); font-size:.98rem; }

/* --- fechamento --- */
.sec--end{
  position:relative; overflow:hidden;
  min-height:70svh; display:flex; align-items:center;
  text-align:left;
}
.end__canvas{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; opacity:0;
  transition:opacity 1.2s var(--ease);
}
.end__canvas.on{ opacity:.45; }
.frame--end .frame__tl,.frame--end .frame__br{ border-color:var(--cyan); }
.sec--end::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url(assets/holo-b.webp) center/cover;
  filter:brightness(.4) saturate(1.1);
}
.sec--end::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to right,var(--ink) 10%,color-mix(in srgb,var(--ink) 62%,transparent) 70%,transparent);
}
.end__h{
  margin:0 0 clamp(2rem,5vw,2.75rem);
  max-width:18ch;
  font-size:clamp(2rem,7vw,4.2rem); line-height:.98;
  letter-spacing:-.025em;
  font-variation-settings:'wdth' 86,'wght' 800;
}

/* ============================================================
   RODAPÉ E DOCK
   ============================================================ */
.foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem;
  padding:2.5rem var(--gut) 7rem;
  border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent);
}
.foot p{ margin:0; font-size:.85rem; color:var(--ash); }
.foot a{ color:var(--cyan); text-decoration:none; }
.foot a:hover{ text-decoration:underline; }

/* botão flutuante do WhatsApp: o verde e o logo que todo mundo reconhece */
.dock{
  position:fixed; z-index:85;
  right:max(1.25rem, env(safe-area-inset-right));
  bottom:calc(1.25rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none;
  opacity:0; pointer-events:none;
  transform:translateY(1rem) scale(.85);
  transition:transform 450ms cubic-bezier(.16,1,.3,1),opacity 300ms var(--ease);
}
.dock.up{ opacity:1; pointer-events:auto; transform:none; }
.dock__btn{
  display:grid; place-items:center;
  width:3.75rem; height:3.75rem; border-radius:50%;
  background:#25d366;
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);
  transition:transform 300ms cubic-bezier(.16,1,.3,1),background 200ms;
}
.dock__btn svg{ width:2rem; height:2rem; fill:#fff; }
.dock:hover .dock__btn,.dock:focus-visible .dock__btn{ transform:scale(1.08); background:#1ebe5b; }
.dock:focus-visible{ outline:none; }
.dock:focus-visible .dock__btn{ outline:2px solid var(--cyan); outline-offset:3px; }
.dock__tip{
  position:relative;
  padding:.55rem .9rem; border-radius:.6rem;
  background:#fff; color:#111;
  font-size:.85rem; font-weight:600; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  opacity:0; transform:translateX(.5rem);
  transition:opacity 250ms var(--ease),transform 350ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.dock__tip::after{
  content:''; position:absolute; right:-5px; top:50%; width:10px; height:10px;
  background:#fff; transform:translateY(-50%) rotate(45deg);
}
.dock:hover .dock__tip,.dock:focus-visible .dock__tip,.dock.open .dock__tip{ opacity:1; transform:none; }
@media (max-width:30rem){ .dock__tip{ display:none; } }

/* ============================================================
   GRÃO
   ============================================================ */
.grain{
  position:fixed; inset:-50%; z-index:120; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:drift 6s steps(5) infinite;
}
@keyframes drift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* ============================================================
   ESTADOS DE ENTRADA (o JS remove)
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(14px); }
.js-ready [data-reveal]{ will-change:opacity,transform; }
[data-reveal].shown{ opacity:1; transform:none; will-change:auto; }
.card.shown{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }

/* ============================================================
   CURSOR — os cantos da moldura
   ============================================================ */
.cursor{
  position:fixed; left:0; top:0; z-index:150; pointer-events:none;
  width:22px; height:22px;
  opacity:0; transition:opacity 300ms var(--ease);
}
.cursor.on{ opacity:1; }
.cursor i{
  position:absolute; width:8px; height:8px;
  border:0 solid var(--violet);
  transition:border-color 250ms var(--ease),width 250ms var(--ease),height 250ms var(--ease);
}
.cursor i:first-child{ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.cursor i:last-child{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }
.cursor.lock i{ border-color:var(--cyan); width:14px; height:14px; }
.cursor-label{
  position:fixed; left:0; top:0; z-index:151; pointer-events:none;
  padding:.35rem .7rem;
  background:var(--cyan); color:var(--ink);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 800;
  opacity:0; scale:.6;
  transition:opacity 220ms var(--ease),scale 320ms cubic-bezier(.16,1,.3,1);
}
.cursor-label.on{ opacity:1; scale:1; }

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .grain{ animation:none; }
  .hero__rail span{ opacity:.6; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-frame] .frame__tl,[data-frame] .frame__br{ transform:none !important; opacity:1 !important; }
  .chain li{ opacity:1; }
  .dock{ transform:none; opacity:1; pointer-events:auto; }
  .h2,.end__h{ font-variation-settings:'wdth' 86,'wght' 800 !important; }
  .how__rail i{ transform:none !important; }
  .step__n{ color:var(--violet); }
  .site:hover .site__view img{ transform:none !important; }
}