/* ==========================================================================
   SIMONE GLACI — MENTORIAS
   Direção visual: editorial executivo · grafite quente · acento brasa
   Tipografia: Archivo (títulos) + Instrument Sans (texto) — ambas SEM SERIFA
   ==========================================================================

   ►► TROCAR A IDENTIDADE VISUAL AQUI ◄◄
   Quando a designer entregar as cores da Simone, mude apenas o bloco :root
   abaixo. O site inteiro se adapta sozinho.
   ------------------------------------------------------------------------ */

:root{
  /* --- cores da marca ---------------------------------------------------- */
  --ink:        #0B0B0C;   /* fundo principal (preto quente)                 */
  --ink-2:      #121213;   /* superfícies elevadas                           */
  --ink-3:      #191919;   /* superfícies em destaque                        */
  --bone:       #EFEDE8;   /* texto principal (branco quente)                */
  --muted:      #8F8C86;   /* texto secundário                               */
  --accent:     #FF6A2B;   /* acento — brasa                                 */
  --accent-2:   #FFA46B;   /* acento claro, para degradês                    */
  --accent-ink: #120A05;   /* texto sobre o acento                           */

  /* --- derivadas (normalmente não precisa mexer) ------------------------- */
  --line:       rgba(239,237,232,.10);
  --line-2:     rgba(239,237,232,.06);
  --glass:      rgba(239,237,232,.03);

  /* --- tipografia -------------------------------------------------------- */
  /* Clash Display tem personalidade própria — não é a grotesca genérica que
     todo gerador cospe. Switzer é a neo-grotesca de texto que a acompanha.
     Nenhuma das duas tem serifa. */
  --display: "Clash Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- ritmo ------------------------------------------------------------- */
  --shell: 1220px;
  --gut:   clamp(20px, 5vw, 56px);
  --pad:   clamp(68px, 9vw, 124px);
  /* cantos quase retos: pílula e cartão arredondado são a cara de template.
     Reto lê como editorial e executivo — que é o que a Simone pediu. */
  --r:     3px;
  --r-sm:  2px;
  --r-bt:  4px;   /* botões */

  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-b:cubic-bezier(.34,1.56,.64,1);
  --out:   cubic-bezier(.16,1,.3,1);   /* saída longa, de abertura */
}

/* ---------- base ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.65;
  font-weight:400;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
/* o retângulo cinza que o celular pisca sobre qualquer coisa tocável */
a,button,summary,label,[role="tab"]{ -webkit-tap-highlight-color:transparent; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* Um "display" declarado aqui vence o display:none que o navegador aplica ao
   atributo hidden. Sem esta linha, o lightbox e o menu — que são hidden mas
   têm display:grid/flex — ficam invisíveis porém esticados sobre a página,
   engolindo todos os cliques do site. */
[hidden]{ display:none !important; }

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

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:fixed; left:16px; top:-100px; z-index:999;
  background:var(--accent); color:var(--accent-ink);
  padding:10px 18px; border-radius:999px; font-weight:600;
  transition:top .25s var(--ease);
}
.skip:focus{ top:16px; }

/* ---------- atmosfera: grão, luz do cursor, barra de leitura -------------- */
/* inset:-20% já cobre de sobra o deslocamento de 5% da animação. Com -120%
   o elemento ficava com 11x a área da tela, e o custo de pintura de um
   mix-blend-mode desse tamanho derruba o celular. */
.grain{
  position:fixed; inset:-20%; z-index:60; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.42'/></svg>");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }      16%{ transform:translate(-4%,-3%) }
  33%{ transform:translate(3%,-5%) }       50%{ transform:translate(-3%,4%) }
  66%{ transform:translate(5%,2%) }        83%{ transform:translate(-2%,-4%) }
}

.spotlight{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),
             rgba(255,106,43,.09), transparent 62%);
  opacity:0; transition:opacity .6s var(--ease);
}
body.has-pointer .spotlight{ opacity:1; }

.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:70; pointer-events:none;
  background:var(--line-2);
}
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px rgba(255,106,43,.75);
}

/* ---------- abertura ------------------------------------------------------ */
.boot{
  position:fixed; inset:0; z-index:200;
  display:grid; place-content:center; justify-items:center; gap:26px;
  background:var(--ink);
  transition:opacity .7s var(--ease), visibility .7s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__mark{
  display:flex; gap:2px;
  font-family:var(--display);
  font-size:clamp(44px,9vw,74px); font-weight:700;
  letter-spacing:-.016em; line-height:1;
}
.boot__mark span{ opacity:0; animation:bootIn .7s var(--ease-b) forwards; }
.boot__mark span:nth-child(2){ color:var(--accent); animation-delay:.13s; }
@keyframes bootIn{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
.boot__bar{ width:min(180px,44vw); height:2px; background:var(--line); overflow:hidden; }
.boot__bar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0); transform-origin:left;
  animation:bootBar 1.15s var(--ease) .18s forwards;
}
@keyframes bootBar{ to{ transform:scaleX(1) } }

/* ---------- tipografia ---------------------------------------------------- */
.h2{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px,4.4vw,48px);
  line-height:1.05; letter-spacing:-.012em; word-spacing:.05em;
  text-wrap:balance;
}
.h2 em{ font-style:normal; color:var(--accent); }

/* A Clash Display tem o espaço entre palavras curto, e o tracking negativo
   fecha mais ainda. Um respiro nos títulos evita palavras parecendo coladas. */
.hero__h1, .h2, .pane__h, .pick__q, .pick__fit b, .quote, .depo__card p,
.qa summary, .drawer__nav a, .step__nm, .svc__nm, .bk__ti, .frame__empty,
.foot__brand b, .boot__mark{ word-spacing:.05em; }
.h2--sm{ font-size:clamp(27px,3.7vw,42px); }

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 18px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.tick{
  width:22px; height:1px; background:var(--accent); flex:none;
  box-shadow:0 0 10px rgba(255,106,43,.8);
}

/* ---------- botões (os que se mexem) -------------------------------------- */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:13px 26px;
  border:1px solid transparent;        /* iguala a altura do vazado, que tem borda */
  border-radius:var(--r-bt);
  font-family:var(--body); font-weight:600; font-size:15px;
  letter-spacing:.005em; white-space:nowrap;
  cursor:pointer; overflow:hidden;
  -webkit-tap-highlight-color:transparent;   /* sem a caixa cinza do toque */
  touch-action:manipulation;                 /* sem o atraso de 300ms */
  /* --mx/--my vêm do ímã, no JS. Todo transform do botão parte daqui, para que
     ímã, hover e clique se somem em vez de um apagar o outro. */
  transform:translate(var(--mx,0px), var(--my,0px));
  transition:transform .3s var(--ease-b), box-shadow .3s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn .ico{ width:19px; height:19px; flex:none; position:relative; z-index:2;
           transition:transform .35s var(--ease-b); }
.btn .ico--end{ transition:transform .35s var(--ease-b); }

.btn--lg{ min-height:58px; padding:16px 32px; font-size:16px; }
.btn--sm{ min-height:42px; padding:9px 20px; font-size:13.5px; }
.btn--wide{ width:100%; }

/* preenchido */
.btn--solid{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  box-shadow:0 10px 26px -14px rgba(255,106,43,.85);
}
.btn--solid::before{                     /* brilho que atravessa */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.5) 48%,transparent 74%);
  transform:translateX(-130%);
  transition:transform .75s var(--ease);
}

/* contorno */
.btn--ghost{
  border-color:var(--line);
  background:var(--glass); color:var(--bone);
}
.btn--ghost::before{                     /* preenchimento que sobe */
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--bone);
  transform:translateY(101%);
  transition:transform .42s var(--ease);
}

/* Enfeite de ponteiro fica trancado atrás de (hover:hover). Sem isso o
   navegador do celular mantém o :hover depois do toque e o botão vazado
   continua branco — era o "bug dos botões". */
@media (hover:hover) and (pointer:fine){
  .btn:hover .ico{ transform:translateX(-2px) rotate(-6deg); }
  .btn:hover .ico--end{ transform:translateX(4px); }
  .btn--solid:hover::before{ transform:translateX(130%); }
  .btn--solid:hover{
    transform:translate(var(--mx,0px), var(--my,0px)) translateY(-3px);
    box-shadow:0 20px 44px -14px rgba(255,106,43,.95), 0 0 0 5px rgba(255,106,43,.14);
  }
  .btn--ghost:hover{
    color:var(--ink); border-color:var(--bone);
    transform:translate(var(--mx,0px), var(--my,0px)) translateY(-3px);
  }
  .btn--ghost:hover::before{ transform:translateY(0); }
}

/* no toque a resposta é o próprio apertar — imediata e sem resíduo */
.btn:active{ transform:translate(var(--mx,0px), var(--my,0px)) scale(.975); }
@media (hover:none){
  .btn--solid:active{ background:#F05A1C; }
  .btn--ghost:active{ background:rgba(239,237,232,.1); border-color:rgba(239,237,232,.28); }
}

/* onda ao clicar */
.ripple{
  position:absolute; z-index:1; border-radius:50%;
  background:rgba(255,255,255,.4); transform:scale(0);
  animation:ripple .62s var(--ease) forwards; pointer-events:none;
}
.btn--ghost .ripple{ background:rgba(255,106,43,.35); }
@keyframes ripple{ to{ transform:scale(2.6); opacity:0 } }

/* botão redondo */
.rnd{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--glass); color:var(--bone);
  transition:transform .3s var(--ease-b), background-color .3s, color .3s, border-color .3s;
}
.rnd svg{ width:19px; height:19px; }
.rnd:hover{ background:var(--accent); color:var(--accent-ink);
            border-color:var(--accent); transform:scale(1.1); }
.rnd:active{ transform:scale(.95); }

/* ---------- cabeçalho ----------------------------------------------------- */
.head{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
             backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.head.is-stuck{
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-2);
}
.head__in{
  display:flex; align-items:center; gap:24px;
  height:76px;
  transition:height .4s var(--ease);
}
.head.is-stuck .head__in{ height:66px; }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand__mark{
  width:36px; height:36px; flex:none; color:var(--accent);
  transition:transform .55s var(--ease-b);
}
.brand__mark svg{ width:100%; height:100%; }
.brand:hover .brand__mark{ transform:rotate(180deg) scale(1.08); }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{
  font-family:var(--display); font-weight:700;
  font-size:16.5px; letter-spacing:-.006em;
}
.brand__txt i{
  font-style:normal; font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

.nav{ display:flex; gap:4px; }
.nav a{
  position:relative; padding:9px 14px; border-radius:var(--r-bt);
  font-size:14px; font-weight:500; color:#B9B5AE;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--bone); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a.is-here{ color:var(--bone); }
.nav a.is-here::after{ transform:scaleX(1); }

.burger{
  display:none; width:44px; height:44px; flex:none;
  border:1px solid var(--line); border-radius:12px;
  place-items:center; align-content:center; gap:5px;
  background:var(--glass);
}
.burger i{
  display:block; width:18px; height:1.6px; background:var(--bone); border-radius:2px;
  transition:transform .4s var(--ease-b), opacity .25s;
}
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

/* ---------- gaveta mobile ------------------------------------------------- */
.drawer{
  position:fixed; inset:0; z-index:85;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:96px var(--gut) 40px;
  background:var(--ink);
  opacity:0; transition:opacity .4s var(--ease);
}
.drawer.is-open{ opacity:1; }
.drawer__nav{ display:flex; flex-direction:column; margin-bottom:18px; }
.drawer__nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 4px; border-bottom:1px solid var(--line-2);
  font-family:var(--display); font-weight:700;
  font-size:clamp(23px,7vw,32px); letter-spacing:-.01em;
  opacity:0; transform:translateY(16px);
  transition:color .3s;
}
.drawer.is-open .drawer__nav a{ animation:drawIn .5s var(--ease) forwards; }
.drawer.is-open .drawer__nav a:nth-child(1){ animation-delay:.05s }
.drawer.is-open .drawer__nav a:nth-child(2){ animation-delay:.10s }
.drawer.is-open .drawer__nav a:nth-child(3){ animation-delay:.15s }
.drawer.is-open .drawer__nav a:nth-child(4){ animation-delay:.20s }
.drawer.is-open .drawer__nav a:nth-child(5){ animation-delay:.25s }
.drawer.is-open .drawer__nav a:nth-child(6){ animation-delay:.30s }
@keyframes drawIn{ to{ opacity:1; transform:none } }
.drawer__nav a svg{ width:22px; height:22px; color:var(--accent);
                    transition:transform .35s var(--ease-b); }
.drawer__nav a:active svg{ transform:translateX(6px); }
.drawer__foot{
  margin:18px 0 0; text-align:center;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

/* ==========================================================================
   ABERTURA
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(118px,15vh,152px) 0 clamp(60px,9vh,92px);
  overflow:hidden;
  border-bottom:1px solid var(--line-2);
}

/* o fundo é liso de propósito: um calor discreto embaixo e fios de grade.
   Borrão colorido grande é a assinatura de página genérica — fica de fora. */
.hero__field{ position:absolute; inset:0; z-index:0; }
.hero__warm{
  position:absolute; left:-16%; bottom:-42%;
  width:74%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,43,.11),transparent 62%);
  filter:blur(60px);
}
.hero__rules{
  position:absolute; inset:0; display:flex; justify-content:space-between;
  max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut);
}
.hero__rules i{ width:1px; height:100%; background:var(--line-2); }

.hero__in{
  position:relative; z-index:2;
  display:grid;
  /* a coluna da esquerda tem que caber "o que precisa" numa linha só, no corpo
     máximo do título. Conta: Archivo esticada em 112% gasta ~7,9px de largura
     por px de corpo nessa frase — é isso que fixa a proporção e o clamp abaixo. */
  grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
}

/* legenda de topo, feita como chamada de revista: versalete e um fio */
.hero__meta{
  display:flex; align-items:center; gap:15px;
  margin:0 0 clamp(24px,3.4vw,38px);
  font-size:11px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.hero__meta i{ flex:none; width:clamp(26px,4vw,64px); height:1px; background:var(--line); }

.hero__h1{
  margin:0 0 clamp(24px,3vw,34px);
  font-family:var(--display);
  font-weight:700;
  /* Clash Display gasta 6,62px de largura por px de corpo na maior linha
     ("o que precisa"). O teto de 92px é o que ainda cabe na coluna a 1440px. */
  font-size:clamp(42px,6.6vw,92px);
  line-height:.94; letter-spacing:-.02em;
  word-spacing:.06em;   /* o espaço da Clash é curto; o tracking negativo fecha mais */
}
/* Cada linha é uma janela; o texto sobe por trás dela. O padding e a margem
   negativa existem para a janela não cortar o pé do "ç" e do "j". */
.hero__h1 .l{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.hero__h1 .l > i{ display:block; font-style:normal; }

/* ---------- entrada coreografada da abertura ------------------------------
   Só vale quando o JS está de pé (classe .js) e quando a cortina de abertura
   já saiu (.is-ready). Sem JS, tudo aparece normalmente, sem nada escondido.
   ------------------------------------------------------------------------- */
.js .hero [data-in]{ opacity:0; }
.js .hero .l > i[data-in]{ opacity:1; transform:translateY(106%); }

.js.is-ready .hero [data-in]{ animation:heroIn .85s var(--out) both; }
.js.is-ready .hero .l > i[data-in]{ animation:heroSobe .95s var(--out) both; }

@keyframes heroIn{ from{ opacity:0; transform:translateY(17px) } to{ opacity:1; transform:none } }
@keyframes heroSobe{ from{ transform:translateY(106%) } to{ transform:none } }

.hero [data-in="1"]{ animation-delay:.04s }
.hero [data-in="2"]{ animation-delay:.13s }
.hero [data-in="3"]{ animation-delay:.23s }
.hero [data-in="4"]{ animation-delay:.33s }
.hero [data-in="5"]{ animation-delay:.30s }
.hero [data-in="6"]{ animation-delay:.60s }
.hero [data-in="7"]{ animation-delay:.72s }
.hero [data-in="8"]{ animation-delay:.84s }

/* a virada: peso e corpo bem menores que a manchete.
   O contraste de escala é o que faz a composição parecer desenhada. */
.hero__h1 .l--turn{
  margin-top:.42em;
  font-weight:500;
  font-size:clamp(17px,1.95vw,25px);
  line-height:1.3; letter-spacing:-.008em; color:#B5B1AA;
}
.hero__h1 em{
  position:relative; font-style:normal;
  font-weight:700; color:var(--bone);
}
.hero__h1 em::after{                     /* o traço se desenha sozinho, por último */
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.115em;
  background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .85s var(--out) 1.25s;
}
.js.is-ready .hero__h1 em::after,
html:not(.js) .hero__h1 em::after{ transform:scaleX(1); }

.hero__lead{
  margin:0 0 clamp(20px,2.4vw,27px); max-width:46ch;
  font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.62; color:#B5B1AA;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; }

/* ---------- roteador da abertura ------------------------------------------
   Alvos largos, sem hover obrigatório e com resposta no :active — feito para
   o dedo, que é como quase todo mundo chega aqui pelo link da bio.
   ------------------------------------------------------------------------- */
.pick{ margin-top:clamp(18px,2.2vw,26px); }
.pick__q{
  display:flex; flex-direction:column; gap:7px; margin:0 0 14px;
  font-family:var(--display); font-weight:700;
  font-size:clamp(17px,1.7vw,21px); letter-spacing:-.01em;
}
.pick__k{
  font-family:var(--body); font-weight:600; font-size:10.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--accent);
}

.pick__list{ display:flex; flex-direction:column; border-top:1px solid var(--line-2); }
.pick__opt{
  position:relative; width:100%; min-height:56px;   /* alvo de dedo com folga */
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 12px 13px 18px; text-align:left;
  border-bottom:1px solid var(--line-2);
  touch-action:manipulation;
  transition:background-color .22s var(--ease), padding-left .28s var(--ease);
}
.pick__opt::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0);
  transition:transform .28s var(--ease);
}
.pick__tx{ font-size:15px; font-weight:500; line-height:1.35; color:#D2CEC7; }
.pick__ar{ width:18px; height:18px; flex:none; color:var(--muted);
           transition:transform .3s var(--ease-b), color .22s var(--ease); }
.pick__ar svg{ width:100%; height:100%; }

.pick__opt:active{ background:rgba(239,237,232,.055); }
.pick__opt:active::before{ transform:scaleY(1); }
.pick__opt:active .pick__ar{ transform:translateX(4px); color:var(--accent); }
@media (hover:hover) and (pointer:fine){
  .pick__opt:hover{ background:rgba(239,237,232,.04); padding-left:25px; }
  .pick__opt:hover::before{ transform:scaleY(1); }
  .pick__opt:hover .pick__ar{ transform:translateX(4px); color:var(--accent); }
}

.pick__out{ animation:pickIn .45s var(--ease) both; }
@keyframes pickIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.pick__say{
  margin:0 0 18px; padding-left:18px;
  border-left:2px solid var(--accent);
  font-size:clamp(15px,1.25vw,17px); line-height:1.6; color:#CFCBC4;
}
.pick__fit{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 11px; margin:0 0 18px; }
.pick__fit span{
  font-size:10.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.pick__fit b{
  font-family:var(--display); font-weight:700;
  font-size:clamp(18px,1.8vw,23px); letter-spacing:-.01em; color:var(--accent);
}
.pick__act{ display:flex; flex-direction:column; gap:6px; }
.pick__back{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:6px 2px;
  font-size:13.5px; color:var(--muted);
  touch-action:manipulation;
  transition:color .22s var(--ease);
}
.pick__back svg{ width:15px; height:15px; transition:transform .3s var(--ease-b); }
.pick__back:active{ color:var(--bone); }
.pick__back:active svg{ transform:translateX(-3px); }
@media (hover:hover) and (pointer:fine){
  .pick__back:hover{ color:var(--bone); }
  .pick__back:hover svg{ transform:translateX(-3px); }
}

/* ---------- painel de retrato --------------------------------------------- */
.frame{ position:relative; margin:0; }
.frame__box{
  position:relative; overflow:hidden;
  height:clamp(400px,62vh,620px);
  border:1px solid var(--line);
  background:var(--ink-2);
  transform:translateY(var(--py,0px));   /* paralaxe, vinda do JS */
}
.frame__mesh{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(82% 72% at 50% 44%,#000,transparent);
  -webkit-mask-image:radial-gradient(82% 72% at 50% 44%,#000,transparent);
}
/* sem foto nem vídeo, o painel vira monograma cortado pela moldura */
.frame__empty{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:center;
  padding-left:7%;
  font-family:var(--display); font-weight:700;
  font-size:clamp(46px,5.6vw,80px); line-height:.9; letter-spacing:-.018em;
  color:transparent; -webkit-text-stroke:1px rgba(239,237,232,.17);
  transition:opacity .7s var(--ease);
}
.frame__empty span:last-child{
  margin-left:.16em; -webkit-text-stroke-color:rgba(255,106,43,.45);
}
.frame__box.has-media .frame__empty,
.frame__box.has-media .frame__mesh{ opacity:0; }

.frame__media{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  filter:grayscale(.2) contrast(1.05);
  opacity:0; transition:opacity 1s var(--ease);
}
.frame__media--v{ z-index:3; }          /* o vídeo passa na frente da foto */
.frame__media.is-live{ opacity:1; }

.frame__edge{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(239,237,232,.05),
             inset 0 -130px 120px -80px rgba(11,11,12,.92);
}
/* a ficha que quebra a moldura — o detalhe que denuncia mão humana */
.frame__cap{
  position:absolute; left:-14px; bottom:26px; z-index:5;
  display:flex; flex-direction:column; gap:3px;
  padding:13px 20px;
  background:var(--ink);
  border:1px solid var(--line); border-left:2px solid var(--accent);
}
.frame__cap b{
  font-family:var(--display); font-weight:700;
  font-size:15.5px; letter-spacing:-.008em;
}
.frame__cap i{
  font-style:normal; font-size:10px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--muted);
}

/* ---------- faixa de áreas (grade fixa — não rola sozinha) ---------------- */
.strip{ border-block:1px solid var(--line-2); background:var(--ink-2); }
.strip__grid{
  display:grid; grid-template-columns:repeat(5,1fr);
}
.strip__grid span{
  padding:24px 12px; text-align:center;
  border-left:1px solid var(--line-2);
  font-family:var(--display); font-weight:600;
  font-size:clamp(11px,1.15vw,14px);
  letter-spacing:.1em; text-transform:uppercase; color:#A8A49D;
  transition:color .35s var(--ease), background-color .35s var(--ease);
}
.strip__grid span:first-child{ border-left:0; }
.strip__grid span:hover{ color:var(--accent); background:rgba(255,106,43,.05); }

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
.sec{ position:relative; padding-block:var(--pad); }
.sec--tight{ padding-block:calc(var(--pad) * .68); }
/* a largura vai em px: "ch" aqui calcularia pela fonte do texto,
   não pela do título, e quebraria os títulos cedo demais */
.sec__head{ margin-bottom:clamp(40px,5.5vw,68px); max-width:min(100%,940px); }
.sec__head--center{ margin-inline:auto; text-align:center; }
.sec__head--center .kicker{ justify-content:center; }
.sec__head--center .sec__sub{ margin-inline:auto; }
.sec__sub{ margin:18px 0 0; max-width:54ch; color:var(--muted); font-size:15.5px; }

/* ---------- serviços ------------------------------------------------------ */
.svc{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(20px,3vw,44px); }

.svc__list{ display:flex; flex-direction:column; gap:6px; }
.svc__item{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:15px;
  padding:19px 20px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  text-align:left; overflow:hidden;
  transition:border-color .35s var(--ease), background-color .35s var(--ease),
             transform .35s var(--ease-b);
}
.svc__item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s var(--ease);
}
.svc__item:hover{ background:var(--glass); border-color:var(--line); transform:translateX(5px); }
.svc__item.is-on{ background:var(--ink-3); border-color:var(--line); }
.svc__item.is-on::before{ transform:scaleY(1); transform-origin:top; }

.svc__ico{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px; color:var(--muted);
  transition:color .35s var(--ease), border-color .35s var(--ease),
             background-color .35s var(--ease), transform .45s var(--ease-b);
}
.svc__ico svg{ width:19px; height:19px; }
.svc__item.is-on .svc__ico,
.svc__item:hover .svc__ico{
  color:var(--accent); border-color:rgba(255,106,43,.4);
  background:rgba(255,106,43,.08); transform:rotate(-8deg) scale(1.06);
}
.svc__nm{
  font-family:var(--display); font-weight:700;
  font-size:clamp(16px,1.45vw,19px); letter-spacing:-.006em;
}
.svc__arw{ width:19px; height:19px; color:var(--muted); opacity:0;
           transform:translateX(-8px); transition:all .35s var(--ease); }
.svc__arw svg{ width:100%; height:100%; }
.svc__item.is-on .svc__arw,
.svc__item:hover .svc__arw{ opacity:1; transform:none; color:var(--accent); }

.svc__stage{
  position:relative;
  border:1px solid var(--line); border-radius:var(--r);
  background:
    linear-gradient(160deg,rgba(255,106,43,.055),transparent 46%),
    var(--ink-2);
  padding:clamp(26px,3.4vw,46px);
  overflow:hidden;
}
.svc__stage::after{
  content:""; position:absolute; right:-70px; top:-70px;
  width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,43,.085),transparent 66%);
  pointer-events:none;
}
.pane{ display:none; }
.pane.is-on{ display:block; animation:paneIn .5s var(--ease) both; }
@keyframes paneIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.pane__tag{
  display:inline-block; margin:0 0 14px; padding:6px 13px;
  border:1px solid rgba(255,106,43,.3); border-radius:var(--r-sm);
  background:rgba(255,106,43,.07);
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2);
}
.pane__h{
  margin:0 0 14px;
  font-family:var(--display); font-weight:700;
  font-size:clamp(25px,3.1vw,38px); line-height:1.05; letter-spacing:-.012em;
}
.pane__p{ margin:0 0 22px; color:#BFBBB4; font-size:15.5px; line-height:1.68; }
.pane__ul{ margin:0 0 30px; display:grid; gap:11px; }
.pane__ul li{
  position:relative; padding-left:26px;
  font-size:14.8px; color:#ADA9A2;
}
.pane__ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; border-radius:2px;
  border:1.5px solid var(--accent); transform:rotate(45deg);
}

/* ---------- vídeo --------------------------------------------------------- */
.player{
  position:relative; display:block; width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--ink-2);
  transition:transform .5s var(--ease-b), box-shadow .5s var(--ease),
             border-color .4s var(--ease);
}
.player:hover{
  border-color:rgba(255,106,43,.36);
  box-shadow:0 40px 90px -50px rgba(255,106,43,.75);
}
.player__art{ position:absolute; inset:0; overflow:hidden; }
.player__mesh{ position:absolute; inset:0; }
.player__mesh i{ position:absolute; display:block; }
.player__mesh i:first-child{
  inset:0;
  background:linear-gradient(118deg,rgba(255,106,43,.14),transparent 46%),var(--ink-2);
}
.player__mesh i:last-child{      /* um facho diagonal, em vez de borrão */
  width:140%; height:56%; left:-20%; top:22%;
  background:linear-gradient(97deg,transparent,rgba(239,237,232,.045) 45%,transparent);
  transform:rotate(-7deg);
}
.player__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent);
}
.player__body{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
}
.player__play{
  position:relative;
  width:clamp(64px,7.5vw,92px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 18px 46px -16px rgba(255,106,43,.95);
  transition:transform .45s var(--ease-b);
}
.player__play svg{ width:40%; height:40%; margin-left:9%; }
.player:hover .player__play{ transform:scale(1.12); }
.player:active .player__play{ transform:scale(1.02); }
.ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,106,43,.55);
  animation:ring 3s var(--ease) infinite;
}
.ring--b{ animation-delay:1.5s; }
@keyframes ring{
  0%{ transform:scale(1); opacity:.85 }
  100%{ transform:scale(2.1); opacity:0 }
}
.player__cap{
  font-family:var(--display); font-weight:600;
  font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#D6D2CB;
}
.player__edge{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(239,237,232,.05), inset 0 -80px 90px -60px rgba(11,11,12,.9);
}
.player__note{
  margin:20px 0 0; text-align:center;
  font-size:13px; color:var(--muted);
}

/* ---------- método (sem numeração) --------------------------------------- */
.flow{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px); }
.flow__rail{
  position:absolute; left:0; right:0; top:27px; height:1px;
  background:var(--line);
}
.flow__rail i{
  display:block; height:100%; width:12.5%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px rgba(255,106,43,.8);
  transition:width .55s var(--ease);
}
.step{
  position:relative; text-align:left; padding:0 0 4px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.step__node{
  position:relative; z-index:2;
  width:56px; height:56px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background:var(--ink); color:var(--muted);
  transition:all .45s var(--ease-b);
}
.step__node svg{ width:23px; height:23px; }
.step:hover .step__node{ border-color:rgba(255,106,43,.45); color:var(--accent-2); transform:translateY(-4px); }
.step.is-on .step__node{
  border-color:var(--accent); color:var(--accent-ink);
  background:var(--accent);
  box-shadow:0 14px 34px -14px rgba(255,106,43,.95);
}
.step__nm{
  font-family:var(--display); font-weight:700;
  font-size:clamp(16px,1.6vw,20px); letter-spacing:-.008em;
  transition:color .35s var(--ease);
}
.step.is-on .step__nm{ color:var(--accent); }
.step__tx{
  font-size:14.4px; line-height:1.6; color:var(--muted);
  transition:color .35s var(--ease);
}
.step.is-on .step__tx{ color:#BFBBB4; }

/* ---------- guias --------------------------------------------------------- */
.guia{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(30px,4vw,60px); align-items:center;
  padding:clamp(30px,4.4vw,64px);
  border:1px solid var(--line); border-radius:calc(var(--r) + 6px);
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(255,106,43,.1),transparent 58%),
    var(--ink-2);
  overflow:hidden;
}
.guia__p{ margin:20px 0 30px; color:#BFBBB4; max-width:46ch; }
.guia__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.guia__art{ position:relative; aspect-ratio:1/.92; perspective:1100px; }
.bk{
  position:absolute; left:50%; top:50%;
  width:min(210px,54%); aspect-ratio:3/4.1; border-radius:6px 12px 12px 6px;
  transform-origin:center;
  transition:transform .8s var(--ease-b);
}
.bk--a{
  z-index:3; background:linear-gradient(150deg,var(--ink-3),#0E0E0F);
  border:1px solid rgba(255,106,43,.3);
  box-shadow:-10px 26px 60px -22px rgba(0,0,0,.95);
  transform:translate(-50%,-50%) rotate(-6deg);
  padding:22px 20px; display:flex; flex-direction:column;
}
.bk--b{
  z-index:2; background:var(--ink-3); border:1px solid var(--line);
  transform:translate(-44%,-52%) rotate(4deg); opacity:.7;
}
.bk--c{
  z-index:1; background:var(--ink-2); border:1px solid var(--line-2);
  transform:translate(-38%,-54%) rotate(13deg); opacity:.45;
}
.guia:hover .bk--a{ transform:translate(-50%,-50%) rotate(-9deg) translateY(-10px); }
.guia:hover .bk--b{ transform:translate(-40%,-52%) rotate(8deg); }
.guia:hover .bk--c{ transform:translate(-31%,-55%) rotate(18deg); }
.bk__sp{ position:absolute; left:0; top:0; bottom:0; width:7px;
         background:linear-gradient(180deg,var(--accent),rgba(255,106,43,.25)); border-radius:6px 0 0 6px; }
.bk__lg{ width:26px; height:26px; color:var(--accent); margin-bottom:auto; }
.bk__lg svg{ width:100%; height:100%; }
.bk__ti{
  font-family:var(--display); font-weight:700;
  font-size:19px; line-height:1.08; letter-spacing:-.01em;
}
.bk__by{
  margin-top:10px; font-size:9.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

/* ---------- sobre --------------------------------------------------------- */
.sobre{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(32px,5vw,74px); align-items:center;
}
.sobre__art{ position:relative; }
.pic{
  position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(155deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);
}
.pic img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
.pic__ph{
  position:absolute; inset:0; z-index:1;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--muted);
}
.pic--empty .pic__ph{ display:flex; }
.pic__ph svg{ width:54px; height:54px; opacity:.5; }
.pic__ph span{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; }
.pic__edge{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(239,237,232,.07),
             inset 0 -110px 120px -80px rgba(11,11,12,.95);
}
.sobre__badge{
  position:absolute; right:-14px; bottom:26px; z-index:4;
  padding:15px 20px; border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(18,18,19,.86); backdrop-filter:blur(14px);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.95);
  animation:hover 5.5s ease-in-out infinite;
}
@keyframes hover{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.sobre__badge-k{
  display:block; font-size:9.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:5px;
}
.sobre__badge-v{ display:block; font-size:12.5px; line-height:1.42; color:#C3BFB8; }

.sobre__p{ margin:0 0 17px; color:#BFBBB4; }
.sobre__p b{ color:var(--bone); font-weight:600; }
.quote{
  position:relative; margin:28px 0 30px; padding:20px 0 20px 26px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(17px,1.8vw,22px); line-height:1.35; letter-spacing:-.006em;
  color:var(--bone);
}
.quote__mk{
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--accent),transparent);
}

/* ---------- depoimentos --------------------------------------------------- */
.depo{
  position:relative; max-width:820px; margin-inline:auto;
  padding:clamp(28px,4vw,50px);
  border:1px solid var(--line); border-radius:var(--r);
  background:
    radial-gradient(80% 100% at 50% 0%,rgba(255,106,43,.06),transparent 60%),
    var(--ink-2);
  text-align:center;
}
.depo__card{ margin:0; animation:paneIn .45s var(--ease) both; }
.depo__card p{
  margin:0 0 24px;
  font-family:var(--display); font-weight:500;
  font-size:clamp(17px,2.1vw,25px); line-height:1.42; letter-spacing:-.008em;
  color:#DEDAD3;
}
.depo__card footer{ display:flex; flex-direction:column; gap:3px; }
.depo__card footer b{ font-size:14.5px; font-weight:600; }
.depo__card footer i{
  font-style:normal; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.depo__nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; }
.depo__pips{ display:flex; gap:7px; }
.depo__pips b{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--line); transition:all .35s var(--ease);
}
.depo__pips b.is-on{ background:var(--accent); width:22px; border-radius:999px; }

/* ---------- dúvidas ------------------------------------------------------- */
.faq{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,64px); }
.faq__head{ position:sticky; top:110px; align-self:start; }
.faq__head .btn{ margin-top:26px; }
.faq__list{ display:flex; flex-direction:column; }

.qa{ border-bottom:1px solid var(--line-2); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600;
  font-size:clamp(15.5px,1.55vw,19px); letter-spacing:-.008em;
  transition:color .3s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--accent); }
.qa summary i{
  position:relative; width:20px; height:20px; flex:none;
}
.qa summary i::before,
.qa summary i::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--accent); border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .4s var(--ease-b), opacity .3s;
}
.qa summary i::before{ width:14px; height:1.7px; }
.qa summary i::after{ width:1.7px; height:14px; }
.qa[open] summary i::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.qa[open] summary{ color:var(--accent); }
.qa__b{ overflow:hidden; }
.qa[open] .qa__b{ animation:qaIn .42s var(--ease) both; }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
.qa__b p{ margin:0; padding:0 4px 24px; max-width:62ch; color:var(--muted); font-size:15px; }

/* ---------- contato ------------------------------------------------------- */
.sec--cta{ position:relative; overflow:hidden; border-top:1px solid var(--line-2); }
/* calor só o bastante para puxar o olho ao ponto de conversão — não um facho */
.cta__glow{
  position:absolute; left:50%; top:-22%; transform:translateX(-50%);
  width:min(880px,120vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,43,.095),transparent 62%);
  filter:blur(56px); pointer-events:none;
}
.cta{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,72px); align-items:start;
}
.cta__p{ margin:18px 0 34px; color:#BFBBB4; max-width:42ch; }

/* 185px é o mínimo que segura o telefone inteiro numa linha só */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; }
.card a{
  display:flex; flex-direction:column; gap:5px;
  height:100%; padding:19px 18px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--glass);
  transition:border-color .35s var(--ease), background-color .35s var(--ease),
             transform .4s var(--ease-b);
}
.card a:hover{
  border-color:rgba(255,106,43,.38); background:rgba(255,106,43,.06);
  transform:translateY(-5px);
}
.card__ico{ width:24px; height:24px; color:var(--accent); margin-bottom:7px;
            transition:transform .45s var(--ease-b); }
.card__ico svg{ width:100%; height:100%; }
.card a:hover .card__ico{ transform:scale(1.15) rotate(-8deg); }
.card__k{ font-size:10.5px; font-weight:600; letter-spacing:.22em;
          text-transform:uppercase; color:var(--muted); }
.card__v{ font-family:var(--display); font-weight:700;
          font-size:14.5px; letter-spacing:-.006em; white-space:nowrap; }

/* formulário */
.form{
  padding:clamp(24px,3.2vw,38px);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2);
  display:grid; gap:14px;
}
.fld{ position:relative; }
.fld input,.fld select,.fld textarea{
  width:100%; padding:23px 16px 9px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:15px; line-height:1.5;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  appearance:none; -webkit-appearance:none;
}
.fld textarea{ resize:vertical; min-height:108px; }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:rgba(255,106,43,.55);
  box-shadow:0 0 0 3px rgba(255,106,43,.1);
}
.fld label{
  position:absolute; left:17px; top:16px;
  font-size:15px; color:var(--muted); pointer-events:none;
  transform-origin:left top;
  transition:transform .28s var(--ease), color .28s var(--ease);
}
.fld label em{ font-style:normal; opacity:.6; }
.fld input:focus + label,
.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,
.fld textarea:not(:placeholder-shown) + label,
.fld select:focus + label,
.fld select:valid + label{
  transform:translateY(-9px) scale(.74); color:var(--accent-2);
}
.fld select{ cursor:pointer; padding-right:44px; }
.fld select option{ background:var(--ink-2); color:var(--bone); }
.fld__caret{ position:absolute; right:15px; top:50%; transform:translateY(-50%);
             width:19px; height:19px; color:var(--muted); pointer-events:none; }
.fld__caret svg{ width:100%; height:100%; }
.form .btn{ margin-top:4px; }
.form__fine{ margin:2px 0 0; text-align:center; font-size:12px; color:var(--muted); }

/* ---------- rodapé -------------------------------------------------------- */
.foot{
  position:relative;
  border-top:1px solid var(--line-2); background:var(--ink-2);
  padding-block:clamp(44px,6vw,72px);
}
.foot__in{ display:grid; gap:30px; justify-items:center; text-align:center; }
.foot__brand{ display:grid; justify-items:center; gap:9px; }
.foot__brand .brand__mark{ width:40px; height:40px; color:var(--accent); }
.foot__brand b{
  font-family:var(--display); font-weight:700;
  font-size:21px; letter-spacing:-.008em;
}
.foot__brand i{
  font-style:normal; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px; }
.foot__nav a{
  padding:7px 13px; border-radius:var(--r-bt); font-size:13.5px; color:var(--muted);
  transition:color .3s, background-color .3s;
}
.foot__nav a:hover{ color:var(--bone); background:var(--glass); }
.foot__soc{ display:flex; gap:10px; }
.foot__soc a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:12px; color:var(--muted);
  transition:all .35s var(--ease-b);
}
.foot__soc a svg{ width:19px; height:19px; }
.foot__soc a:hover{ color:var(--accent); border-color:rgba(255,106,43,.4);
                    transform:translateY(-4px) rotate(-6deg); }
.foot__legal{
  display:grid; gap:4px; margin:0;
  font-size:11.5px; letter-spacing:.06em; color:#6E6B66;
}

.totop{
  position:absolute; right:var(--gut); top:-22px;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--ink-3); color:var(--bone);
  transition:transform .35s var(--ease-b), background-color .3s, color .3s;
}
.totop svg{ width:19px; height:19px; }
.totop:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-4px); }

/* ---------- botão flutuante ----------------------------------------------- */
.float{
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:80;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 16px 40px -14px rgba(255,106,43,.95);
  opacity:0; transform:translateY(26px) scale(.7); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease-b),
             width .4s var(--ease);
}
.float.is-in{ opacity:1; transform:none; pointer-events:auto; }
.float svg{ width:27px; height:27px; position:relative; z-index:2;
            animation:nudge 4.5s var(--ease) infinite; }
@keyframes nudge{
  0%,88%,100%{ transform:rotate(0) scale(1) }
  91%{ transform:rotate(-13deg) scale(1.1) }
  94%{ transform:rotate(11deg) scale(1.1) }
  97%{ transform:rotate(-6deg) scale(1.05) }
}
.float__pulse{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--accent);
  animation:ring 2.8s var(--ease) infinite;
}
.float__tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(8px);
  padding:9px 15px; border-radius:999px; white-space:nowrap;
  background:var(--ink-3); color:var(--bone);
  border:1px solid var(--line);
  font-size:13px; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease-b);
}
.float:hover{ transform:scale(1.08); }
.float:hover .float__tip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ---------- lightbox ------------------------------------------------------ */
.lb{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center; padding:clamp(16px,4vw,48px);
  background:rgba(6,6,7,.92); backdrop-filter:blur(12px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lb.is-open{ opacity:1; }
.lb__box{
  width:min(1080px,100%); aspect-ratio:16/9;
  border-radius:var(--r); overflow:hidden;
  background:#000; border:1px solid var(--line);
  box-shadow:0 50px 120px -40px rgba(0,0,0,1);
  transform:scale(.94); transition:transform .45s var(--ease-b);
}
.lb.is-open .lb__box{ transform:none; }
.lb__box iframe,.lb__box video{ width:100%; height:100%; border:0; display:block; }
.lb__fallback{
  display:grid; place-content:center; justify-items:center; gap:14px;
  height:100%; padding:30px; text-align:center; background:var(--ink-2);
}
.lb__fallback svg{ width:46px; height:46px; color:var(--accent); }
.lb__fallback b{
  font-family:var(--display); font-weight:700;
  font-size:19px; letter-spacing:-.008em;
}
.lb__fallback span{ font-size:14px; color:var(--muted); max-width:44ch; }
.lb__fallback code{
  font-size:12.5px; color:var(--accent-2);
  background:rgba(255,106,43,.1); padding:5px 11px; border-radius:7px;
}
.lb__x{
  position:absolute; top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px); z-index:2;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--ink-2); color:var(--bone);
  transition:transform .35s var(--ease-b), background-color .3s, color .3s;
}
.lb__x svg{ width:20px; height:20px; }
.lb__x:hover{ background:var(--accent); color:var(--accent-ink); transform:rotate(90deg); }

/* ---------- revelação ao rolar -------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s } .reveal[data-d="2"]{ transition-delay:.14s }
.reveal[data-d="3"]{ transition-delay:.21s } .reveal[data-d="4"]{ transition-delay:.28s }
.reveal[data-d="5"]{ transition-delay:.35s }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1080px){
  .nav{ display:none; }
  .head__cta{ display:none; }
  .burger{ display:grid; }
  .faq{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .svc{ grid-template-columns:1fr; }
  .cta{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }
  .flow__rail{ display:none; }
}

/* a abertura em duas colunas precisa de largura para respirar */
@media (max-width:980px){
  .hero{ min-height:0; padding:clamp(104px,16vh,132px) 0 clamp(52px,7vh,74px); }
  .hero__in{ grid-template-columns:1fr; gap:clamp(32px,6vw,46px); }
  .hero__rules i:nth-child(2){ display:none; }
  .hero__lead{ max-width:54ch; }
  .frame__box{ height:clamp(280px,38vh,370px); }
  .frame__empty{ font-size:clamp(44px,9vw,66px); }
}

@media (max-width:820px){
  .sobre{ grid-template-columns:1fr; }
  .sobre__art{ max-width:400px; margin-inline:auto; width:100%; }
  .sobre__badge{ right:0; }
  .guia{ grid-template-columns:1fr; }
  .guia__art{ order:-1; aspect-ratio:1/.78; max-width:330px; margin-inline:auto; width:100%; }
  .strip__grid{ grid-template-columns:repeat(2,1fr); }
  .strip__grid span{ border-top:1px solid var(--line-2); }
  .strip__grid span:nth-child(-n+2){ border-top:0; }
  .strip__grid span:nth-child(odd){ border-left:0; }
  .strip__grid span:last-child{ grid-column:1/-1; }
}

@media (max-width:560px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .hero__meta{ gap:11px; font-size:10px; letter-spacing:.2em; }
  .frame__cap{ left:-8px; bottom:18px; padding:11px 16px; }
  .flow{ grid-template-columns:1fr; gap:22px; }
  .step{ flex-direction:row; align-items:flex-start; gap:16px; flex-wrap:wrap; }
  .step__node{ width:46px; height:46px; }
  .step__nm{ align-self:center; }
  .step__tx{ width:100%; padding-left:62px; margin-top:-6px; }
  .depo__nav{ gap:12px; }
  .float{ width:54px; height:54px; }
  .float__tip{ display:none; }
  .totop{ right:50%; transform:translateX(50%); }
  .totop:hover{ transform:translateX(50%) translateY(-4px); }
  .cards{ grid-template-columns:1fr 1fr; }
}

@media (max-width:380px){
  .cards{ grid-template-columns:1fr; }
}

/* ---------- celular: menos pintura ----------------------------------------
   Quase todo o público chega pelo link da bio, no celular. Desfoques grandes
   e mistura de camadas animada são caros; aqui eles ficam parados.
   ------------------------------------------------------------------------- */
@media (hover:none), (max-width:820px){
  .grain{ inset:0; animation:none; opacity:.42; }
  .hero__warm{ filter:blur(40px); }
  .cta__glow{ filter:blur(36px); }
}

/* ---------- toque: nada de :hover grudado ---------------------------------
   O celular mantém o :hover depois do toque. Tudo que se desloca ou muda de
   cor no hover precisa voltar ao normal aqui, senão o elemento fica preso no
   estado de "mouse em cima" até tocarem em outro lugar da tela.
   ------------------------------------------------------------------------- */
@media (hover:none){
  .svc__item:hover{ transform:none; background:transparent; border-color:var(--line-2); }
  .svc__item:hover .svc__ico{ color:var(--muted); border-color:var(--line);
                              background:transparent; transform:none; }
  .svc__item:hover .svc__arw{ opacity:0; transform:translateX(-8px); }
  .svc__item.is-on{ background:var(--ink-3); border-color:var(--line); }   /* o escolhido continua valendo */
  .svc__item.is-on .svc__ico{ color:var(--accent); border-color:rgba(255,106,43,.4);
                              background:rgba(255,106,43,.08); transform:none; }
  .svc__item.is-on .svc__arw{ opacity:1; transform:none; color:var(--accent); }

  .card a:hover{ transform:none; background:var(--glass); border-color:var(--line-2); }
  .card a:hover .card__ico{ transform:none; }
  .rnd:hover{ transform:none; background:var(--glass); color:var(--bone); border-color:var(--line); }
  .foot__soc a:hover{ transform:none; color:var(--muted); border-color:var(--line-2); }
  .foot__nav a:hover{ background:transparent; color:var(--muted); }
  .strip__grid span:hover{ color:#A8A49D; background:transparent; }
  .qa summary:hover{ color:inherit; }
  .qa[open] summary{ color:var(--accent); }
  .totop:hover{ transform:none; background:var(--ink-3); color:var(--bone); }
  .float:hover{ transform:none; }
  .player:hover{ box-shadow:none; border-color:var(--line); }
  .player:hover .player__play{ transform:none; }
  .guia:hover .bk--a{ transform:translate(-50%,-50%) rotate(-6deg); }
  .guia:hover .bk--b{ transform:translate(-44%,-52%) rotate(4deg); }
  .guia:hover .bk--c{ transform:translate(-38%,-54%) rotate(13deg); }
  .brand:hover .brand__mark{ transform:none; }
  .nav a:hover::after{ transform:scaleX(0); }
  .nav a.is-here::after{ transform:scaleX(1); }
}

/* ---------- acessibilidade: menos movimento ------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .grain{ display:none; }
}