/* ============================================================
   JOTA — Design System (redesign)
   Padrão extraído da home. Compartilhado entre todas as páginas.
   Cores e medidas medidas do Figma (frame 1:28).
   ============================================================ */

/* ---------- FONTES ---------- */
@font-face{font-family:"Aeonik";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/aeonik-regular.woff2") format("woff2"),url("../fonts/aeonik-regular.woff") format("woff");}
@font-face{font-family:"Aeonik";font-weight:500;font-style:normal;font-display:swap;
  src:url("../fonts/aeonik-medium.woff2") format("woff2"),url("../fonts/aeonik-medium.woff") format("woff");}
@font-face{font-family:"Aeonik";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/aeonik-bold.woff2") format("woff2"),url("../fonts/aeonik-bold.woff") format("woff");}

/* ---------- TOKENS ---------- */
:root{
  --bg:#FFFFFF;
  --warm:#F5F3EF;
  --warm-2:#EFE9DA;
  --card:#FFFFFF;
  --ink:#17150F;
  --ink-soft:#57523F;
  --ink-faint:#8A8470;
  --yellow:#FFE84C;
  --yellow-deep:#F0D427;
  --wa-green:#25D366;
  --line:rgba(23,21,15,0.12);
  --line-soft:rgba(23,21,15,0.07);
  --font:"Aeonik","Helvetica Neue",Arial,sans-serif;

  /* escala tipográfica (8 passos, igual à home) */
  --t-display-1:clamp(44px,6.2vw,88px);
  --t-display-2:clamp(36px,4.6vw,60px);
  --t-display-3:clamp(28px,3.4vw,44px);
  --t-heading:clamp(20px,1.9vw,24px);
  --t-body-lg:clamp(17px,1.4vw,20px);
  --t-body:16px;
  --t-label:14px;
  --t-caption:12px;

  /* raio único universal + ritmo (igual à home) */
  --r:28px;
  --sec-pad:clamp(72px,9vw,120px);
  --head-gap:clamp(36px,5vw,56px);
  --gap-grid:clamp(16px,2.8vw,40px);

  --maxw:1126px;
  --gutter:clamp(20px,4.5vw,40px);
  --nav-h:80px;
  --img-r:28px; /* legado: mesmo valor do raio único */
}

/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--ink);color:var(--yellow);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

/* ---------- TIPOGRAFIA ---------- */
.kicker{font-size:var(--t-caption);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:10px;}
.kicker::before{content:"";width:22px;height:1.5px;background:currentColor;display:inline-block;}
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;}
.display-1{font-size:var(--t-display-1);line-height:1.02;letter-spacing:-.04em;}
.display-2{font-size:var(--t-display-2);line-height:1.06;letter-spacing:-.035em;}
.display-3{font-size:var(--t-display-3);line-height:1.08;letter-spacing:-.03em;}
.lede{font-size:var(--t-body-lg);line-height:1.5;color:var(--ink-soft);max-width:46ch;}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);
  font-size:15px;font-weight:500;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s;white-space:nowrap;}
.btn-solid{background:var(--ink);color:#fff;}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,21,15,.22);}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(23,21,15,.35);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-link{background:none;border:none;color:var(--ink);font-weight:500;padding:14px 6px;}
.btn-link:hover{opacity:.6;}

/* ============================================================ NAV */
.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);}
.nav .wrap{height:100%;display:flex;align-items:center;gap:20px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{width:34px;height:34px;}
.brand span{font-weight:700;font-size:21px;letter-spacing:-.04em;}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:14px;}
.nav-item{position:relative;}
/* ponte invisível: cobre o gap entre o gatilho e o painel pra não fechar no hover */
.nav-item::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px;}
.nav-trigger,.nav-link{font-family:var(--font);font-size:15px;font-weight:500;color:var(--ink-soft);
  background:none;border:none;cursor:pointer;padding:10px 12px;border-radius:9px;line-height:1;
  display:inline-flex;align-items:center;gap:6px;transition:color .2s,background .2s;}
.nav-trigger .chev{width:10px;height:10px;opacity:.55;transition:transform .25s;}
.nav-trigger:hover,.nav-link:hover,.nav-link.active,.nav-trigger.active,.nav-item.open .nav-trigger{color:var(--ink);}
.nav-item.open .nav-trigger{background:var(--warm);}
.nav-item.open .nav-trigger .chev{transform:rotate(180deg);}
.nav-trigger:focus-visible,.nav-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.nav-spacer{flex:1;}
.nav-cta{padding:11px 20px;font-size:var(--t-label);}
.nav-actions{display:flex;align-items:center;gap:10px;}

/* ---------- MEGA-MENU ---------- */
.mega{position:absolute;top:calc(100% + 12px);left:0;z-index:120;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:18px;
  box-shadow:0 28px 64px -28px rgba(23,21,15,.4),0 2px 8px rgba(23,21,15,.05);
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.mega.to-right{left:auto;right:0;}
.mega-cols{display:grid;gap:6px 24px;}
.mega-cols.c3{grid-template-columns:repeat(3,minmax(178px,1fr));}
.mega-cols.c1{grid-template-columns:minmax(248px,1fr);}
.mega-col .mh{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);padding:6px 10px 9px;}
.mega-link{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 10px;border-radius:11px;transition:background .15s;}
.mega-link:hover{background:var(--warm);}
.mega-link .nm{font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.2;}
.mega-link .sub{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:400;margin-top:2px;line-height:1.32;}
.mega-link .pf{font-size:10px;font-weight:600;color:var(--ink-faint);letter-spacing:.04em;
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap;align-self:center;}
.mega-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);}
.mega-foot .mlnk{font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;gap:6px;align-items:center;}
.mega-foot .mlnk .ar{color:var(--yellow-deep);}
.mega-foot .btn{padding:10px 18px;font-size:14px;}
.mega-foot .note{font-size:12.5px;color:var(--ink-soft);max-width:34ch;}

/* ---------- BURGER + SHEET MOBILE ---------- */
.nav-burger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;}
.nav-burger span{display:block;height:2px;width:22px;background:var(--ink);border-radius:2px;transition:.25s;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-sheet{position:fixed;inset:var(--nav-h) 0 0;background:var(--bg);z-index:90;
  transform:translateX(100%);transition:transform .3s ease;visibility:hidden;
  overflow-y:auto;padding:12px var(--gutter) 56px;display:flex;flex-direction:column;}
.nav-sheet.open{transform:translateX(0);visibility:visible;}
.sheet-group{border-bottom:1px solid var(--line-soft);}
.sheet-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:none;border:none;font-family:var(--font);font-size:20px;font-weight:600;color:var(--ink);
  padding:20px 2px;cursor:pointer;letter-spacing:-.01em;}
.sheet-trigger .chev{width:13px;height:13px;opacity:.5;transition:transform .25s;}
.sheet-group.open .sheet-trigger .chev{transform:rotate(180deg);}
.sheet-link{display:flex;justify-content:space-between;align-items:center;
  font-size:20px;font-weight:600;color:var(--ink);padding:20px 2px;border-bottom:1px solid var(--line-soft);letter-spacing:-.01em;}
.sheet-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.sheet-panel-inner{padding:2px 2px 18px;display:flex;flex-direction:column;}
.sheet-sub{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:10px 0 4px;}
.sheet-panel a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;font-size:16px;color:var(--ink-soft);}
.sheet-panel a .pf{font-size:10px;color:var(--ink-faint);border:1px solid var(--line);border-radius:5px;padding:1px 5px;}

/* ---------- CTA "Chama o Jota" (scrolly inline + sticky mobile) ----------
   Inline preenche o espaço vazio do .moment no desktop. Sticky aparece
   só no mobile depois do hero e some antes do .cta5 pra não competir
   com o "Abrir minha conta" da seção final. Reusa tokens do design system. */
.cj-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:#fff;font:500 16px/1 var(--font);
  border-radius:999px;padding:16px 28px;text-decoration:none;
  box-shadow:0 8px 24px rgba(23,21,15,.18);
  transition:transform .25s ease,box-shadow .25s ease;white-space:nowrap;}
.cj-btn svg{color:var(--wa-green);flex:0 0 auto;width:20px;height:20px;}
.cj-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(23,21,15,.26);}

/* desktop: fixo no stage pinado do scrolly (substitui o .wa-mark solto).
   Absoluto pro .scrolly-stage: não dança com o swap do .moment nem com o
   padding-top dinâmico do alignStage(). left = início da coluna de copy
   (116px rail + 51px gap do grid). */
.scrolly-stage{position:relative;}
.cj-inline{position:absolute;left:167px;top:clamp(470px,62vh,640px);}
.moment .wa-mark{display:none;}

/* nav CTA some enquanto o nosso CTA está na tela (choreografia dos 3) */
.nav-cta{transition:opacity .3s ease,transform .3s ease;}
.nav-cta.cj-hide{opacity:0;transform:translateY(-8px);pointer-events:none;}

/* mobile: sticky bottom.
   Escondido = descer a PRÓPRIA altura + o offset do bottom (que inclui o
   safe-area do iPhone) + folga pra sombra. 140% fixo quebrava no iOS:
   com home-indicator (~34px de inset) o botão não saía inteiro da tela.
   opacity+pointer-events de cinto e suspensório: mesmo se a conta do
   transform falhar em algum device, o botão fica invisível e inclicável. */
.cj-sticky{position:fixed;left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;
  transform:translate(-50%,calc(100% + 40px + env(safe-area-inset-bottom)));
  opacity:0;pointer-events:none;
  padding:17px 30px;font-size:16.5px;
  box-shadow:0 12px 34px rgba(23,21,15,.35);
  transition:transform .35s cubic-bezier(.32,.72,.28,1),opacity .25s ease;}
.cj-sticky.cj-show{transform:translate(-50%,0);opacity:1;pointer-events:auto;}

/* visibilidade por breakpoint (alinhado ao isStacked() do scrolly) */
@media (max-width:900px){.cj-inline{display:none;}}
@media (min-width:901px){.cj-sticky{display:none;}}
@media (prefers-reduced-motion:reduce){.cj-btn,.cj-sticky{transition:none;}}
.sheet-cta{display:flex;flex-direction:column;gap:11px;margin-top:28px;}
.sheet-cta .btn{width:100%;}
body.sheet-open{overflow:hidden;}

/* ============================================================ FOOTER */
.footer{background:var(--bg);border-top:1px solid var(--line-soft);}
.footer-partners{max-width:var(--maxw);margin:0 auto;padding:clamp(36px,5vh,56px) var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-bottom:1px solid var(--line-soft);}
.footer-partners .pi{display:flex;flex-direction:column;gap:12px;}
.footer-partners .logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:22px;}
.footer-partners .logos img{height:15px;width:auto;opacity:.7;}
.footer-partners p{font-size:12.5px;color:var(--ink-faint);line-height:1.5;max-width:32ch;}
/* selo RA: item de grid dentro de .footer-partners; linha própria centralizada por default
   (margin compensa o gap de 32 pra manter o ritmo vertical antigo de clamp(36,5vh,56)) */
.footer-seal{grid-column:1/-1;display:flex;justify-content:center;margin-bottom:calc(clamp(36px,5vh,56px) - 32px);}
.footer-main{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vh,72px) var(--gutter) clamp(30px,4vh,44px);
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;}
.footer-brand{display:flex;flex-direction:column;gap:18px;}
.footer-brand .smile{width:50px;}
.footer-brand .tagline{font-size:17px;font-weight:500;max-width:22ch;line-height:1.3;}
.footer-brand .tagline-sub{font-size:14px;font-weight:500;max-width:30ch;line-height:1.4;color:#858585;}
.footer-col{display:flex;flex-direction:column;}
.footer-sub{display:flex;flex-direction:column;gap:11px;}
.footer-sub+.footer-sub{margin-top:28px;}
.footer-col h4{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;}
.footer-col a{font-size:14.5px;color:var(--ink-soft);transition:color .2s;width:fit-content;display:inline-flex;align-items:center;}
.footer-col a:hover{color:var(--ink);}
.footer-col a .pf{font-size:9.5px;font-weight:600;color:var(--ink-faint);letter-spacing:.04em;
  border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:8px;}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:24px var(--gutter) 40px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);}
.footer-social{display:flex;gap:18px;}
.footer-social a{font-size:14px;color:var(--ink-soft);}
.footer-social a:hover{color:var(--ink);}
.footer-legal{display:flex;flex-direction:column;gap:8px;}
.footer-legal .links{display:flex;gap:18px;}
.footer-legal .links a{font-size:13px;color:var(--ink-soft);}
.footer-legal .cnpj{font-size:12.5px;color:var(--ink-faint);line-height:1.5;}

/* ============================================================ HELPERS DE PÁGINA */
.phero{padding:clamp(54px,8vh,100px) 0 clamp(40px,6vh,72px);}
.phero.center{text-align:center;}
.phero.center .lede{margin-left:auto;margin-right:auto;}
.phero h1{max-width:16ch;margin-bottom:22px;}
.phero.center h1{max-width:18ch;}
.phero .lede{margin-bottom:30px;}
.phero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.phero.center .phero-actions{justify-content:center;}

.sec{padding:var(--sec-pad) 0;}
.sec.warm{background:var(--warm);}
.sec.yellow{background:var(--yellow);}
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:var(--head-gap);}
.sec-head.center{align-items:center;text-align:center;}
.sec-head h2{max-width:20ch;}
.sec-head .lede{max-width:54ch;}
.sec-head.center .lede{margin:0 auto;}

/* passos numerados (padrão dos pilares da home) */
.steps-num{display:flex;flex-direction:column;}
.num-step{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.4fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,56px);padding:clamp(30px,4.5vh,48px) 0;align-items:start;}
.num-step+.num-step{border-top:1px solid var(--line-soft);}
.num-step .num{font-size:var(--t-display-3);font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--ink-faint);}
.num-step h3{font-size:var(--t-heading);line-height:1.18;letter-spacing:-.02em;}
.num-step p{color:var(--ink-soft);font-size:var(--t-body);align-self:center;}

/* grid de cards (padrão S2/S3) */
.cards{display:grid;gap:var(--gap-grid);}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c2{grid-template-columns:repeat(2,1fr);}
.card{background:var(--warm);border-radius:var(--r);padding:clamp(26px,2.8vw,36px);
  display:flex;flex-direction:column;gap:12px;}
.card.on-warm{background:#fff;}
.card h3{font-size:var(--t-heading);line-height:1.15;}
.card p{color:var(--ink-soft);font-size:var(--t-body);}
.card .tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:8px 15px;border-radius:999px;background:var(--warm-2);color:var(--ink-soft);margin-bottom:6px;}
.card .tag.yes{background:var(--yellow);color:var(--ink);}

/* ============================================================ PROSE (documentos legais) */
.prose{max-width:740px;margin:0 auto;}
.prose h2{font-size:clamp(21px,2.3vw,29px);margin:46px 0 14px;letter-spacing:-.02em;line-height:1.12;}
.prose h3{font-size:clamp(17px,1.7vw,21px);margin:26px 0 8px;}
.prose p{color:var(--ink-soft);line-height:1.7;margin-bottom:14px;}
.prose p:first-of-type{font-size:18px;color:var(--ink);}
.prose ul{margin:0 0 14px 22px;color:var(--ink-soft);line-height:1.7;}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}

/* lista de itens (notícias / vagas) */
.list-rows{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.list-row{padding:24px 4px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;align-items:baseline;}
.list-row h3{font-size:clamp(17px,1.7vw,21px);line-height:1.25;max-width:60ch;}
.list-row .meta{font-size:13px;color:var(--ink-faint);white-space:nowrap;}

/* ============================================================ PRICING (Zero Grátis R$0 Nada) */
.pricing{background:var(--yellow);padding:var(--sec-pad) 0 clamp(40px,5vh,64px);position:relative;overflow:hidden;}
.pricing .wrap{position:relative;z-index:2;}
.pricing .words{font-size:clamp(64px,12vw,176px);font-weight:700;letter-spacing:-.045em;line-height:.92;color:var(--ink);}
.pricing-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(34px,5vh,52px);}
.pricing .smile{position:absolute;right:clamp(0px,4vw,100px);top:43%;transform:translateY(-50%);width:clamp(210px,30vw,460px);z-index:1;}

/* ============================================================ FAQ */
.faq{padding:clamp(48px,6vw,80px) 0 var(--sec-pad);}
.faq.yellow{background:var(--yellow);}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:start;}
.faq h2{font-size:var(--t-display-3);max-width:10ch;letter-spacing:-.03em;}
.faq-list{border-top:1.5px solid rgba(23,21,15,.3);}
.faq-item{border-bottom:1px solid rgba(23,21,15,.18);}
.faq-q{width:100%;background:none;border:none;font-family:var(--font);text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;
  font-size:var(--t-body-lg);font-weight:500;color:var(--ink);}
.faq-q .pm{flex:none;width:22px;height:22px;position:relative;}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--ink);border-radius:2px;}
.faq-q .pm::before{left:0;top:10px;width:22px;height:2px;}
.faq-q .pm::after{left:10px;top:0;width:2px;height:22px;transition:transform .25s;}
.faq-item.open .pm::after{transform:scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 4px 24px;color:var(--ink-soft);max-width:48ch;font-size:var(--t-body);}

/* ============================================================ RESPONSIVO */
@media(max-width:860px){
  .nav-links{display:none;}
  .nav-cta{padding:9px 14px;}
  .nav-burger{display:flex;}
  .num-step{grid-template-columns:1fr;gap:10px;}
  .cards.c3,.cards.c2{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;}
  .footer-partners{grid-template-columns:1fr 1fr;}
  .footer-main{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .footer-partners,.footer-main{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}
/* landscape de celular: parceiros em 3 colunas — [Celcoin+WhatsApp | Meta+Unico | selo RA],
   selo alinhado ao topo da linha do Meta. Depois dos blocos de largura pra vencer o 1fr 1fr. */
@media (orientation:landscape) and (max-height:520px){
  .footer-partners{grid-template-columns:repeat(3,1fr);}
  .footer-seal{grid-column:3;grid-row:1/span 2;align-self:start;justify-content:flex-start;margin-bottom:0;}
}