/* ===========================================================
   FOLTY OFICIAL | Design System
   Referência: Linear.app
   Preto profundo · texto branco · movimento como linguagem
   =========================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Superfícies */
  --bg:         #08090a;
  --bg-2:       #0c0d0f;
  --surface:    #101113;
  --surface-2:  #16181b;
  --surface-hi: #1c1f23;

  /* Traços */
  --line:       rgba(255,255,255,.08);
  --line-soft:  rgba(255,255,255,.05);
  --line-hi:    rgba(255,255,255,.16);

  /* Texto */
  --text:       #f7f8f8;
  --text-2:     #8a8f98;
  --text-3:     #62666d;

  /* Acento */
  --accent:     #5e6ad2;
  --accent-hi:  #6f7ae3;
  --accent-dim: rgba(94,106,210,.16);
  --accent-glow:rgba(94,106,210,.45);
  --violet:     #9d7bea;
  --cyan:       #4cc9e8;

  --grad-brand: linear-gradient(135deg,#5e6ad2 0%,#9d7bea 50%,#4cc9e8 100%);
  --grad-text:  linear-gradient(180deg,#ffffff 0%,#b9bec7 100%);

  /* Formas */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Layout */
  --page-max: 1160px;
  --gutter: 24px;
  --nav-h: 64px;
  --section-gap: clamp(80px,10vw,140px);

  /* Movimento */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease:     cubic-bezier(.4,0,.2,1);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.1}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:6px}

/* ---------- 3. Textura e brilhos de fundo ---------- */
/* Granulado fixo: a assinatura da referência */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(100px);opacity:.5;
}
/* --py é ajustado na rolagem, criando um leve deslocamento de profundidade */
.orb--1{width:min(680px,94vw);height:560px;background:radial-gradient(circle,rgba(94,106,210,.55),transparent 70%);top:-200px;left:50%;transform:translateX(-50%) translateY(var(--py,0))}
.orb--2{width:min(420px,68vw);height:400px;background:radial-gradient(circle,rgba(157,123,234,.30),transparent 70%);top:120px;right:-130px;transform:translateY(var(--py,0))}
.orb--3{width:min(360px,58vw);height:360px;background:radial-gradient(circle,rgba(76,201,232,.20),transparent 70%);top:250px;left:-130px;transform:translateY(var(--py,0))}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.section{padding-block:var(--section-gap);position:relative}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- 5. Tipografia ---------- */
.t-hero{font-size:clamp(40px,6.6vw,74px);line-height:1.04;letter-spacing:-.035em;font-weight:600}
.t-h2  {font-size:clamp(30px,4.2vw,50px);line-height:1.08;letter-spacing:-.032em;font-weight:600}
.t-h3  {font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.024em;font-weight:600}
.t-h4  {font-size:17px;line-height:1.35;letter-spacing:-.018em;font-weight:600}
.t-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6;letter-spacing:-.014em;color:var(--text-2)}
.t-body{font-size:15px;line-height:1.65;letter-spacing:-.008em;color:var(--text-2)}
.t-sm  {font-size:13.5px;line-height:1.55;letter-spacing:-.004em;color:var(--text-3)}
.t-mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.c-text{color:var(--text)}
.balance{text-wrap:balance}
/* O texto é pintado com degradê recortado no formato das letras. A tinta só
   cobre a caixa do elemento, e com entrelinha apertada as descendentes (g, ç,
   j, p, q) passam do limite e ficariam invisíveis. O respiro abaixo estica a
   área pintada, e a margem negativa devolve o espaço para o layout. */
.gradient-text{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.55em;margin-bottom:-.55em;
}
.brand-text{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Etiqueta com brilho na borda */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:13px;letter-spacing:-.006em;color:var(--text-2);
  backdrop-filter:blur(12px);transition:border-color .3s var(--ease),background .3s var(--ease);
}
.eyebrow:hover{border-color:var(--line-hi);background:rgba(255,255,255,.05)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex:none;box-shadow:0 0 8px #4ade80}

.sec-head{max-width:640px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head .t-lead{margin-top:18px}
.sec-head .t-mono{color:var(--accent-hi);margin-bottom:18px;display:block}

/* ---------- 6. Botões ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:var(--r-sm);
  font-size:15px;font-weight:500;letter-spacing:-.011em;
  border:1px solid transparent;cursor:pointer;overflow:hidden;
  /* --tx e --ty vêm da atração pelo cursor, definida no JS */
  transform:translate(var(--tx,0),var(--ty,0));
  transition:transform .28s var(--ease-out),background .25s var(--ease),
             border-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
}
.btn:active{transform:translate(var(--tx,0),var(--ty,0)) scale(.965);transition-duration:.1s}
.btn--primary{
  background:var(--accent);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 8px 24px -10px var(--accent-glow);
}
.btn--primary:hover{background:var(--accent-hi);box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 34px -10px var(--accent-glow)}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:var(--line-hi)}
.btn--lg{height:50px;padding:0 28px;font-size:16px}
.btn--block{width:100%}
/* Brilho que varre o botão ao passar o mouse */
.btn--primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.26) 50%,transparent 75%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out);
}
.btn--primary:hover::after{transform:translateX(120%)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.link{
  display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--text-2);
  transition:color .22s var(--ease);
}
.link:hover{color:var(--text)}
.link svg{transition:transform .28s var(--ease-out)}
.link:hover svg{transform:translateX(4px)}

/* ---------- 7. Navegação ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,9,10,.72);backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__brand{display:flex;align-items:center;flex:none;transition:opacity .22s var(--ease)}
.nav__brand:hover{opacity:.75}
.nav__brand img{height:26px;width:auto}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__links a{
  position:relative;padding:7px 13px;border-radius:var(--r-sm);
  font-size:14px;color:var(--text-2);letter-spacing:-.008em;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.nav__links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav__links a.is-active{color:var(--text)}
.nav__links a.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;
  background:var(--grad-brand);
}
.nav__right{display:flex;align-items:center;gap:10px;flex:none}
.nav__right .btn{height:36px;padding:0 16px;font-size:14px}
.burger{
  display:none;width:38px;height:38px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  align-items:center;justify-content:center;cursor:pointer;
}
.burger span{display:block;width:16px;height:1.5px;background:var(--text);position:relative;transition:.3s var(--ease-out)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--text);transition:.3s var(--ease-out)}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:59;
  background:rgba(8,9,10,.96);backdrop-filter:blur(24px);
  padding:32px var(--gutter);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),visibility .3s,transform .3s var(--ease-out);
}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu a{
  font-size:24px;font-weight:500;letter-spacing:-.024em;color:var(--text-2);
  padding:16px 0;border-bottom:1px solid var(--line-soft);
  transition:color .22s var(--ease),padding-left .22s var(--ease-out);
}
.menu a:hover{color:var(--text);padding-left:8px}
.menu .btn{margin-top:28px}

/* Barra de progresso da rolagem */
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:61;width:0;
  background:var(--grad-brand);transition:width .1s linear;
}

/* ---------- 8. Topo ---------- */
.hero{
  position:relative;padding-top:calc(var(--nav-h) + clamp(76px,12vw,152px));
  padding-bottom:clamp(92px,13vw,172px);text-align:center;overflow:hidden;
}
.hero__inner{display:grid;justify-items:center;gap:0}
.hero h1{margin-top:26px;max-width:16ch}
.hero__sub{margin-top:24px;max-width:52ch}
.hero .btn-row{margin-top:34px;justify-content:center}
.hero__meta{margin-top:20px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.hero__meta span{font-size:13.5px;color:var(--text-3);display:inline-flex;align-items:center;gap:7px}
.hero__meta svg{color:var(--accent-hi);flex:none}

/* Vitrine: moldura com brilho para uma imagem de destaque.
   Fora de uso no momento (a foto do topo foi retirada). Continua aqui
   pronta para receber, por exemplo, uma captura de um site entregue. */
.showcase{position:relative;margin-top:clamp(48px,6vw,76px)}
.showcase__glow{
  position:absolute;left:50%;top:-40px;transform:translateX(-50%);
  width:82%;height:70%;border-radius:50%;
  background:var(--grad-brand);opacity:.28;filter:blur(90px);pointer-events:none;
}
.showcase__frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-hi);background:var(--surface);
  aspect-ratio:16/9;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04);
}
.showcase__frame img{width:100%;height:100%;object-fit:cover}
/* Reflexo sutil no topo da moldura */
.showcase__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 22%);
}

/* ---------- 9. Superfícies com brilho no cursor ---------- */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;padding:26px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease-out);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(94,106,210,.14),transparent 55%);
}
.card:hover{border-color:var(--line-hi);background:var(--surface-2);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card__ic{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--accent-dim);border:1px solid rgba(94,106,210,.28);color:var(--accent-hi);
}
.card h3{margin-bottom:9px}
.card__num{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--accent-hi);margin-bottom:14px;
}

/* Lista com marcador */
.ticks{display:grid;gap:11px}
.ticks li{
  position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--text-2);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--accent-dim);border:1px solid rgba(94,106,210,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236f7ae3' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.ticks strong{color:var(--text);font-weight:600}

/* ---------- 10. Sobre ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
.split__media{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/5;background:var(--surface);
}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.split__media:hover img{transform:scale(1.04)}
.split__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(8,9,10,.7) 100%);
}
.split p + p{margin-top:18px}

/* ---------- 11. Planos ---------- */
.included{
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:clamp(26px,3.2vw,40px);margin-bottom:16px;
}
.included__head{display:flex;align-items:center;gap:10px;margin-bottom:26px;color:var(--text)}
.included__head svg{color:var(--accent-hi)}
.included .ticks{grid-template-columns:repeat(2,1fr);gap:13px 36px}
.included__note{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:14.5px;color:var(--text);
}

.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.plan{
  position:relative;display:flex;flex-direction:column;gap:22px;
  padding:clamp(26px,3.2vw,38px);border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:border-color .35s var(--ease),transform .35s var(--ease-out);
}
.plan:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.plan--featured{border-color:rgba(94,106,210,.42)}
/* Fio de luz no topo do plano em destaque */
.plan--featured::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-hi),transparent);
}
.plan--featured::after{
  content:"";position:absolute;top:-70px;left:50%;transform:translateX(-50%);
  width:70%;height:140px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(94,106,210,.30),transparent 70%);filter:blur(36px);
}
.plan > *{position:relative;z-index:1}
.plan__badge{
  align-self:flex-start;padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid rgba(94,106,210,.34);background:var(--accent-dim);
  font-size:12px;letter-spacing:-.004em;color:var(--accent-hi);
  min-height:25px;display:inline-flex;align-items:center;
}
.plan__badge--empty{visibility:hidden}
.plan__name{font-size:15px;color:var(--text-2);margin-bottom:12px}
.plan__price{font-size:clamp(38px,4.6vw,50px);line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--text)}
.plan__price small{font-size:.42em;font-weight:500;vertical-align:.72em;margin-right:3px;color:var(--text-2)}
.plan__note{font-size:13.5px;color:var(--text-3);margin-top:10px}
.plan__rec{
  margin-top:18px;padding:12px 15px;border-radius:var(--r);
  background:rgba(255,255,255,.03);border:1px solid var(--line-soft);
  font-size:14px;color:var(--text);
}
.plan__rec span{display:block;color:var(--text-3);font-size:13px;margin-top:2px}
.plan__for{font-size:13.5px;color:var(--text-3);flex:1}

/* Faixa de formas de pagamento */
.pay{
  display:flex;align-items:center;gap:16px;margin-top:16px;
  padding:20px 24px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.pay:hover{border-color:var(--line-hi);background:var(--surface-2)}
.pay__ic{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid rgba(94,106,210,.28);color:var(--accent-hi);
}
.pay__tx b{display:block;font-size:15.5px;font-weight:600;color:var(--text);margin-bottom:3px}
.pay__tx span{font-size:13.5px;color:var(--text-2);line-height:1.55}
@media (max-width:560px){
  .pay{flex-direction:column;align-items:flex-start;gap:14px;text-align:left}
}

/* ---------- 12. Portfólio ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.work{display:flex;flex-direction:column;gap:14px}
.work__thumb{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;
  border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;
  transition:border-color .35s var(--ease),transform .35s var(--ease-out);
}
.work:hover .work__thumb{border-color:var(--line-hi);transform:translateY(-3px)}
.work__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.work:hover .work__thumb img{transform:scale(1.05)}
.work__ph{
  display:grid;place-items:center;gap:10px;color:var(--text-3);text-align:center;padding:22px;
  width:100%;height:100%;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 8px,transparent 8px 16px),
    var(--surface);
}
.work__ph span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.work__off{font-size:13.5px;color:var(--text-3)}
/* Case publicado: etiqueta de segmento e chamada para abrir */
.work__tag{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-hi);margin-bottom:7px;
}
.work__link{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:14px;font-weight:500;color:var(--text);
  transition:color .25s var(--ease);
}
.work__link svg{transition:transform .28s var(--ease-out)}
a.work:hover .work__link{color:var(--accent-hi)}
a.work:hover .work__link svg{transform:translate(3px,-3px)}
/* Selo que marca o cartão como peça de demonstração */
.work__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(8,9,10,.72);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);
}

/* Aviso ao visitante de que os exemplos não são o site dele */
.works-nota{
  display:flex;gap:16px;align-items:flex-start;margin-top:26px;
  padding:22px 26px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
}
.works-nota__ic{
  width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid rgba(94,106,210,.28);color:var(--accent-hi);
}
.works-nota p{font-size:14.5px;line-height:1.65;color:var(--text-2)}
.works-nota strong{color:var(--text);font-weight:600}
@media (max-width:560px){
  .works-nota{flex-direction:column;gap:14px}
}

.note-admin{
  margin-top:16px;border:1px dashed rgba(94,106,210,.34);border-radius:var(--r-lg);
  background:rgba(94,106,210,.05);padding:18px 22px;font-size:14px;color:var(--text-2);
}
.note-admin strong{color:var(--accent-hi)}
.note-admin code{font-family:var(--mono);font-size:12.5px;color:var(--text)}

/* ---------- 13. Dúvidas ---------- */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.faq details:hover{border-color:var(--line-hi)}
.faq details[open]{background:var(--surface-2);border-color:rgba(94,106,210,.3)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 52px 20px 22px;position:relative;
  font-size:16px;font-weight:500;letter-spacing:-.016em;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:2px;border-radius:2px;
  background:var(--text-2);transform:translateY(-50%);transition:background .3s var(--ease);
}
.faq summary::before{
  content:"";position:absolute;right:26.5px;top:50%;width:2px;height:11px;border-radius:2px;
  background:var(--text-2);transform:translateY(-50%);
  transition:transform .35s var(--ease-out),background .3s var(--ease),opacity .3s var(--ease);
}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq details[open] summary::after,.faq details[open] summary::before{background:var(--accent-hi)}
.faq__a{padding:0 22px 22px;font-size:14.5px;line-height:1.65;color:var(--text-2);max-width:70ch}
/* Abertura suave */
.faq details[open] .faq__a{animation:faqIn .4s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

/* ---------- 14. Onde estamos ---------- */
.local{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.4vw,40px);align-items:start}
.map{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);min-height:380px;
}
.map iframe{
  width:100%;height:100%;min-height:420px;border:0;
  filter:invert(92%) hue-rotate(185deg) contrast(.88) saturate(.7) brightness(.95);
}
.rows{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.row{
  display:flex;align-items:center;gap:14px;padding:18px 22px;
  border-bottom:1px solid var(--line-soft);transition:background .25s var(--ease);
}
.row:last-child{border-bottom:0}
a.row:hover{background:var(--surface-2)}
a.row:hover .row__arw{transform:translateX(3px);color:var(--accent-hi)}
.row__ic{
  width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid rgba(94,106,210,.24);color:var(--accent-hi);
}
.row__tx b{display:block;font-size:12px;letter-spacing:.02em;color:var(--text-3);font-weight:500;margin-bottom:2px}
.row__tx span{font-size:14.5px;color:var(--text)}
.row__arw{margin-left:auto;color:var(--text-3);transition:transform .28s var(--ease-out),color .25s var(--ease)}

/* Horários */
.hours li{
  display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--text-2);
}
.hours li:last-child{border-bottom:0}
.hours li.is-today b{color:var(--accent-hi)}
.hours li.is-today span{color:var(--text)}
.hours b{font-weight:400}
.hours span{font-variant-numeric:tabular-nums}

/* ---------- 15. Formulário ---------- */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px;align-items:start}
.contact__aside,.contact__form{
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:clamp(26px,3.2vw,38px);
}
.field{display:grid;gap:7px;margin-bottom:18px;position:relative}
.field label{font-size:13.5px;color:var(--text-2)}
.field .opt{color:var(--text-3)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border-radius:var(--r);
  background:var(--bg-2);border:1px solid var(--line);color:var(--text);
  font-size:15px;letter-spacing:-.008em;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.field textarea{min-height:110px;resize:vertical}
.field select{
  appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
.field select option{background:#101113;color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface-2);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field--err input,.field--err select,.field--err textarea{border-color:#e5484d}
.field--err input:focus,.field--err select:focus,.field--err textarea:focus{box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.field__err{font-size:12.5px;color:#ff9fa2;display:none}
.field--err .field__err{display:block;animation:shake .35s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-note{font-size:12.5px;line-height:1.55;color:var(--text-3);margin-top:16px}
.form-note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.form-note a:hover{color:var(--text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 16. Faixa de chamada final ---------- */
.cta{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);padding:clamp(40px,5vw,64px);text-align:center;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:70%;height:200px;border-radius:50%;pointer-events:none;
  background:var(--grad-brand);opacity:.22;filter:blur(70px);
}
.cta > *{position:relative;z-index:1}
.cta .btn-row{justify-content:center;margin-top:28px}

/* ---------- 17. Rodapé ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-2);position:relative;z-index:2}
.footer__grid{
  display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:clamp(28px,4vw,56px);
  padding-block:clamp(48px,6vw,68px) 40px;
}
.footer__brand img{height:28px;width:auto;margin-bottom:16px}
.footer h4{font-size:12px;letter-spacing:.02em;color:var(--text-3);font-weight:500;margin-bottom:14px}
.footer ul{display:grid;gap:11px}
.footer li,.footer a{font-size:14px;color:var(--text-2);transition:color .2s var(--ease)}
.footer a:hover{color:var(--text)}
.footer__bottom{
  border-top:1px solid var(--line-soft);padding-block:22px 32px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;color:var(--text-3);
}
.footer__bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.socials{display:flex;gap:8px;margin-top:18px}
.socials a{
  width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text-2);
  transition:.25s var(--ease-out);
}
.socials a:hover{color:var(--text);border-color:var(--line-hi);background:rgba(255,255,255,.07);transform:translateY(-2px)}

/* ---------- 18. Barra fixa no celular ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:58;display:none;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,9,10,.88);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .38s var(--ease-out);
}
.mobile-bar.is-visible{transform:none}

/* ---------- 19. Migalhas e páginas internas ---------- */
.crumbs{padding-block:22px;font-size:13px;color:var(--text-3)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--text-3);opacity:.5}
.crumbs a{color:var(--text-2);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--text)}

.page-head{padding-block:clamp(36px,5vw,60px) clamp(20px,3vw,32px)}
.prose{max-width:70ch;display:grid;gap:18px}
.prose h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.024em;margin-top:22px;color:var(--text)}
.prose h3{font-size:16px;letter-spacing:-.016em;margin-top:6px;color:var(--text)}
.prose p,.prose li{font-size:15px;line-height:1.7;color:var(--text-2)}
.prose ul{display:grid;gap:9px}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:4px;height:4px;border-radius:50%;background:var(--accent-hi)}
.prose a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--text);font-weight:600}
.prose .box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:22px 26px;display:grid;gap:10px}

.center-stage{
  min-height:calc(100svh - var(--nav-h) - 100px);display:grid;place-items:center;
  text-align:center;padding-block:clamp(48px,7vw,90px);position:relative;
}
.center-stage .wrap{display:grid;justify-items:center;gap:18px}
.glyph{
  font-size:clamp(84px,17vw,170px);line-height:1;letter-spacing:-.05em;font-weight:600;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.check{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid rgba(94,106,210,.4);color:var(--accent-hi);
  box-shadow:0 0 50px -10px var(--accent-glow);
  animation:pop .7s var(--ease-out) both;
}
@keyframes pop{from{transform:scale(.7);opacity:0}}

/* Página de links */
.links-stack{display:grid;gap:10px;max-width:520px;margin-inline:auto;width:100%}
.link-row{
  display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);
  transition:.28s var(--ease-out);
}
.link-row:hover{background:var(--surface-2);border-color:var(--line-hi);transform:translateY(-2px)}
.link-row:hover .arw{transform:translateX(4px);color:var(--accent-hi)}
.link-row b{display:block;font-size:15px;font-weight:500;color:var(--text)}
.link-row span{font-size:13px;color:var(--text-3)}
.link-row .arw{margin-left:auto;color:var(--text-3);transition:transform .28s var(--ease-out),color .25s var(--ease)}

/* ---------- 20. Movimento ---------- */

/* Holofote discreto que acompanha o cursor pela página inteira */
.spotlight{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .6s var(--ease);
  background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(94,106,210,.08),transparent 65%);
}
.spotlight.is-on{opacity:1}

/* Fio de luz girando na borda do plano em destaque */
@property --beam-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.beam{
  position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--beam-a),transparent 0deg,transparent 300deg,var(--accent-hi) 340deg,transparent 360deg);
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:beamSpin 7s linear infinite;opacity:.85;
}
@keyframes beamSpin{to{--beam-a:360deg}}

/* Título revelado palavra por palavra */
.word{display:inline-block;white-space:pre}
.js [data-words] .word{
  opacity:0;transform:translateY(.42em);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);
  transition-delay:calc(var(--w,0) * 42ms);
}
.js [data-words].is-in .word{opacity:1;transform:none}

/* Filhos de uma grade entrando um a um */
.js [data-stagger] > [data-reveal]{transition-delay:calc(var(--s,0) * 90ms)}

@keyframes riseIn{
  from{opacity:0;transform:translateY(22px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
/* Entrada no carregamento da página, em sequência */
.js [data-anim]{opacity:0;animation:riseIn .9s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 90ms + 80ms)}
/* Entrada ao rolar */
.js [data-reveal]{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none;filter:blur(0)}
.js [data-reveal-d="1"]{transition-delay:.08s}
.js [data-reveal-d="2"]{transition-delay:.16s}
.js [data-reveal-d="3"]{transition-delay:.24s}

/* Onda de clique */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.35);transform:scale(0);opacity:.7;
  animation:ripple .6s var(--ease-out) forwards;
}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}

/* ---------- 21. Responsivo ---------- */
@media (max-width:1040px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .local,.contact{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .nav__links{display:none}
  .nav__right .btn--ghost{display:none}
  .burger{display:flex}
  .split{grid-template-columns:1fr}
  .split__media{aspect-ratio:16/10;order:-1}
  .works,.grid-3{grid-template-columns:1fr 1fr}
  .included .ticks{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan--featured{order:-1}
  .showcase__frame{aspect-ratio:4/3}
}
@media (max-width:720px){
  :root{--gutter:20px;--nav-h:58px}
  .mobile-bar{display:block}
  body{padding-bottom:78px}
  .grid-2,.grid-3,.grid-4,.works{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:34px}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .hero .btn-row{flex-direction:column;align-items:stretch;width:100%}
  .hero .btn-row .btn{width:100%}
  .showcase__frame{aspect-ratio:1/1}
  .orb{filter:blur(70px)}
}
@media (max-width:400px){:root{--gutter:16px}}

/* ---------- 22. Acessibilidade e impressão ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-anim]{opacity:1;animation:none}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
  .js [data-words] .word{opacity:1;transform:none}
  .grain,.orb,.showcase__glow,.spotlight,.beam{display:none}
  .btn{transform:none}
}
@media print{
  .nav,.mobile-bar,.grain,.orb,.progress,.showcase__glow{display:none!important}
  body{background:#fff;color:#000}
}