/* === Apple White vocabulary v1 === */
*,::before,::after{box-sizing:border-box}

/* =========================================================
   Axis360 · landing "Apple White" (port do mockup design/novo-layout/index.html)
   Ordem: (0) box-sizing · (1) tokens · (2) mockup · (3) vocabulário · (4) shell · (5) movimento
   Tailwind (CDN) só para layout e espaçamento; cor sempre por token/classe.
   ========================================================= */

/* (1) tokens: :root do mockup verbatim + adições */
  :root{
    --bg:#fbfbfd;
    --text:#1d1d1f;
    --sec:#6e6e73;
    --gray:#f5f5f7;
    --black:#0b0b0d;
    --gold:#d7c49a;
    --gold-2:#bda36a;
    --gold-ink:#7d6534;
    --line:rgba(0,0,0,.08);
    --line-2:rgba(0,0,0,.14);
    --line-w:rgba(255,255,255,.14);
    --r:28px;
    --wrap:1120px;
    --nav:48px;
    --ease:cubic-bezier(.2,.7,.2,1);
    /* adições do port */
    --white:#fff;
    --gray-2:#e8e8ed;          /* só fundo de hover; nunca texto --sec sobre ele */
    --card-dark:#111113;
    --r-md:22px; --r-sm:18px; --r-xs:14px;
    --gold-soft:rgba(215,196,154,.14);
    --gold-line:rgba(215,196,154,.7);
    --on-dark:#f5f5f7; --on-dark-2:rgba(255,255,255,.66); --on-dark-3:rgba(255,255,255,.55);
    --shadow-card:0 1px 0 rgba(0,0,0,.02),0 20px 50px -40px rgba(0,0,0,.25);
    --shadow-mini:0 1px 0 rgba(0,0,0,.03),0 12px 30px -20px rgba(0,0,0,.25);
    --shadow-pop:0 50px 90px -40px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.06);
    --font-display:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
    --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --font-serif:"Playfair Display",Georgia,serif;
  }

/* =========================================================
   (2) Mockup "Apple White": o <style> de design/novo-layout/index.html,
   copiado verbatim (sha1 c0cbc1ade1c2ffe0abdcd1d47e1fcb1adcc3461e), sem o :root (seção 1) e sem os blocos
   de movimento (seção 5). Edições documentadas (reaplicar num re-sync;
   tools: scratchpad port/build_css.py):
   1. footer{...} e footer a{...} viraram .site-footer{...} e .site-footer a{...}
      (a ficha tem o próprio <footer class="fx-foot">).
   2. .bubble time: .6875rem -> .75rem (texto >= 12px).
   3. .phone-screen: height:720px -> height:auto;min-height:720px; no <=640,
      height:780px -> min-height:780px (os telefones crescem para caber todos os balões).
   4. .chart-d/.chart-m trocam em min-width:1024px (era 640); + texto do .chart-d
      a 13.5 unidades entre 1024 e 1199 (>= 12px mesmo com barra de rolagem clássica de 17px); + .chart-m{max-width:640px;margin-inline:auto}.
   5. .chips .arrow: var(--gold-2) -> var(--gold-ink) (texto ouro sobre claro).
   6. .menu-panel a -> .menu-panel > a (a pílula .menu-cta não vira linha com borda)
      + .menu-panel{max-height:calc(100dvh - var(--nav));overflow-y:auto;overscroll-behavior:contain}.
   7. section[id]{scroll-margin-top:calc(var(--nav) + 12px)} -> html{scroll-padding-top:calc(var(--nav) + 12px)}
      (o foco do teclado não para mais embaixo do nav fixo, WCAG 2.4.11; as âncoras seguem a 60px do topo).
   8. (revogada no fix2) @media (max-width:1023px){.plans .plan-featured{order:-1}} voltou, como no mockup
      aprovado ("planos: Completo primeiro" no celular e no tablet). Os três planos são cards independentes.
   9. .menu-panel opaco (background:var(--bg), sem backdrop-filter): o blur do painel não funcionava porque
      o backdrop-filter do .nav vira a raiz do fundo, e o título do herói aparecia nítido atrás dos links.
   ========================================================= */
  /* =========================================================
     Axis360 — "Apple White" (mockup final)
     Tokens: 1 fundo, 1 tinta, 1 cinza, 1 acento (ouro champanhe)
     --gold      decorativo: pontos, hairlines, tinta de gráfico, brilho
     --gold-ink  texto ouro sobre branco (passa 4.5:1)
     ========================================================= */
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:17px;line-height:1.5;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    overflow-x:clip;
  }
  ::selection{background:rgba(215,196,154,.45);}
  a{color:inherit;text-decoration:none;}
  html{scroll-padding-top:calc(var(--nav) + 12px);}
  .wrap{max-width:var(--wrap);margin:0 auto;padding-left:16px;padding-right:16px;}
  @media (min-width:768px){.wrap{padding-left:32px;padding-right:32px;}}

  /* ---------- tipografia ---------- */
  .display{font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:0;}
  h1.display{font-size:clamp(2.75rem,7.6vw,5.75rem);letter-spacing:-.035em;}
  .display.sub{font-size:clamp(1.5rem,3.4vw,2.625rem);font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--sec);}
  h2.display{font-size:clamp(2.125rem,4.8vw,3.5rem);letter-spacing:-.03em;line-height:1.06;}
  h3.display{font-size:1.375rem;letter-spacing:-.02em;line-height:1.2;}
  .serif{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.01em;}
  .sec{color:var(--sec);}
  .lead{font-size:clamp(1.125rem,1.7vw,1.4375rem);line-height:1.42;color:var(--sec);letter-spacing:-.01em;margin:0;}
  .eyebrow{font-size:.9375rem;font-weight:600;color:var(--gold-ink);letter-spacing:-.005em;display:inline-flex;align-items:center;gap:8px;margin:0;}
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(215,196,154,.22);}
  .small{font-size:.875rem;line-height:1.45;}
  .tiny{font-size:.75rem;line-height:1.4;}
  .measure{max-width:640px;margin-left:auto;margin-right:auto;}
  .rule{display:block;width:72px;height:2px;border-radius:2px;margin:22px auto 0;background:linear-gradient(90deg,rgba(215,196,154,0),var(--gold),rgba(215,196,154,0));}
  .rule.left{margin-left:0;background:linear-gradient(90deg,var(--gold-2),var(--gold),rgba(215,196,154,0));}
  .head{text-align:center;}
  .head .lead{margin-top:22px;}
  .head.left{text-align:left;}
  .head.left .lead{margin-left:0;}

  /* ---------- botões e links ---------- */
  .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:48px;padding:0 26px;border-radius:999px;font-weight:500;font-size:1.0625rem;letter-spacing:-.01em;white-space:nowrap;border:0;cursor:pointer;transition:transform .25s var(--ease),background .2s ease,border-color .2s ease,box-shadow .2s ease;}
  .btn svg{width:17px;height:17px;flex:none;}
  .btn-black{background:var(--text);color:#fff;}
  .btn-black:hover{background:#000;transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(0,0,0,.5);}
  .btn-white{background:#fff;color:#000;}
  .btn-white:hover{background:var(--gray);transform:translateY(-1px);}
  .btn-ghost{border:1px solid var(--line-2);color:var(--text);background:transparent;}
  .btn-ghost:hover{border-color:rgba(0,0,0,.32);transform:translateY(-1px);}
  .btn-sm{height:34px;padding:0 14px;font-size:.8125rem;}
  .btn-sm::after{content:"";position:absolute;inset:-5px;border-radius:999px;} /* alvo de toque 44px */
  .link{color:var(--gold-ink);font-weight:500;display:inline-flex;align-items:center;gap:4px;}
  .link:hover{text-decoration:underline;text-underline-offset:3px;}
  .link .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-left:3px;margin-top:1px;transition:transform .2s ease;}
  .link:hover .chev{transform:rotate(-45deg) translate(1px,1px);}
  :focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:8px;}
  .btn:focus-visible{outline-offset:4px;border-radius:999px;}
  .on-dark :focus-visible{outline-color:var(--gold);}

  /* ---------- nav ---------- */
  .nav{position:sticky;top:0;z-index:60;height:var(--nav);background:rgba(251,251,253,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);}
  .nav-inner{max-width:var(--wrap);margin:0 auto;padding:0 8px 0 16px;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:16px;}
  @media (min-width:768px){.nav-inner{padding:0 32px;}}
  .brand{display:inline-flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1rem;letter-spacing:-.02em;color:var(--text);}
  .mark{width:30px;height:15px;color:var(--gold);flex:none;}
  .nav-links{display:none;align-items:center;gap:2px;}
  .nav-links a{font-size:.8125rem;color:rgba(29,29,31,.8);padding:6px 11px;border-radius:999px;transition:color .2s ease,background .2s ease;}
  .nav-links a:hover{color:var(--text);background:rgba(0,0,0,.05);}
  @media (min-width:1024px){.nav-links{display:flex;}}
  /* menu mobile: funciona sem JS (checkbox) */
  .menu-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
  .menu-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;position:relative;}
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:16px;height:1.5px;background:var(--text);border-radius:2px;position:absolute;content:"";transition:transform .25s var(--ease),opacity .2s ease;}
  .menu-btn span{position:relative;}
  .menu-btn span::before{top:-5px;} .menu-btn span::after{top:5px;}
  .menu-check:checked ~ .nav-inner .menu-btn span{background:transparent;}
  .menu-check:checked ~ .nav-inner .menu-btn span::before{transform:translateY(5px) rotate(45deg);}
  .menu-check:checked ~ .nav-inner .menu-btn span::after{transform:translateY(-5px) rotate(-45deg);}
  .menu-check:focus-visible ~ .nav-inner .menu-btn{outline:2px solid var(--text);outline-offset:2px;}
  @media (min-width:1024px){.menu-btn{display:none;}}
  .menu-panel{display:none;position:absolute;left:0;right:0;top:var(--nav);background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(0,0,0,.25);}
  .menu-check:checked ~ .menu-panel{display:block;}
  @media (min-width:1024px){.menu-check:checked ~ .menu-panel{display:none;}}
  .menu-panel > a{display:block;padding:14px 16px;min-height:44px;font-size:1.0625rem;border-top:1px solid var(--line);}
  .menu-panel > a:first-child{border-top:0;}
  .menu-panel{max-height:calc(100vh - var(--nav));max-height:calc(100dvh - var(--nav));overflow-y:auto;overscroll-behavior:contain;}

  /* ---------- seções ---------- */
  .section{padding:52px 0;}
  @media (min-width:768px){.section{padding:112px 0;}}
  @media (min-width:1024px){.section{padding:144px 0;}}
  .section-gray{background:var(--gray);}
  .section-dark{background:var(--black);color:#fff;}
  .section-dark .lead{color:rgba(255,255,255,.66);}
  .section-dark .eyebrow{color:var(--gold);}
  .section-dark .sec{color:rgba(255,255,255,.6);}
  .hairline{border-top:1px solid var(--line);}
  .stack{display:grid;gap:16px;}
  .stack-2{display:grid;gap:16px;}
  @media (min-width:1024px){.stack-2{grid-template-columns:1fr 1fr;}}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:56px 0 0;overflow:clip;}
  @media (min-width:768px){.hero{padding:80px 0 0;}}
  @media (min-width:1024px){.hero{padding:104px 0 0;}}
  .hero-glow{position:absolute;left:50%;top:60%;width:min(1100px,140vw);height:640px;transform:translate(-50%,-30%);pointer-events:none;
    background:radial-gradient(closest-side,rgba(215,196,154,.34),rgba(215,196,154,.10) 55%,rgba(215,196,154,0) 72%);filter:blur(30px);}
  .stats{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0;}
  .stat{grid-column:span 2;padding:18px 8px 16px;text-align:center;}
  .stat:nth-child(-n+2){grid-column:span 3;}
  .stat:nth-child(n+3){border-top:1px solid var(--line);}
  .stat:nth-child(2),.stat:nth-child(4),.stat:nth-child(5){border-left:1px solid var(--line);}
  .stat b{display:block;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:clamp(2.125rem,3.6vw,2.875rem);letter-spacing:-.045em;line-height:1;}
  .stat b.txt{font-size:clamp(1.5rem,2.6vw,2.125rem);letter-spacing:-.03em;padding-top:.2em;}
  .stat .lbl{display:block;margin-top:6px;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1rem;letter-spacing:-.02em;}
  .stat p{margin:6px auto 0;font-size:.8125rem;line-height:1.45;color:var(--sec);max-width:190px;}
  .stat p .long{display:none;}
  @media (min-width:768px){
    .stats{grid-template-columns:repeat(5,1fr);}
    .stat,.stat:nth-child(-n+2){grid-column:auto;border-top:0;border-left:0;padding:28px 12px 26px;}
    .stat+.stat{border-left:1px solid var(--line);}
    .stat p .long{display:inline;} .stat p .short{display:none;}
  }

  /* ---------- telefone ---------- */
  .phone{position:relative;width:min(360px,100%);margin:0 auto;border-radius:56px;background:#1d1d1f;padding:10px;
    box-shadow:0 50px 90px -40px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.08);}
  .phone-screen{position:relative;border-radius:47px;background:#fff;overflow:hidden;height:auto;min-height:720px;display:flex;flex-direction:column;}
  @media (max-width:640px){.phone{width:min(330px,100%);border-radius:50px;} .phone-screen{min-height:780px;border-radius:42px;}}
  .island{position:absolute;left:50%;top:12px;width:96px;height:28px;border-radius:999px;background:var(--black);transform:translateX(-50%);z-index:3;}
  .chat-head{padding:52px 18px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);background:rgba(251,251,253,.92);flex:none;}
  .avatar{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;}
  .avatar .mark{width:20px;height:10px;}
  .chat-name{font-size:.875rem;font-weight:600;line-height:1.1;letter-spacing:-.01em;}
  .chat-status{font-size:.75rem;color:var(--sec);display:inline-flex;align-items:center;gap:5px;margin-top:2px;}
  .chat-status::before{content:"";width:5px;height:5px;border-radius:50%;background:#34c759;}
  .chat-body{flex:1;min-height:0;padding:14px 12px 76px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background:var(--bg);overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px);mask-image:linear-gradient(180deg,transparent 0,#000 28px);}
  .chat-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(180deg,rgba(251,251,253,0),rgba(251,251,253,1) 60%);pointer-events:none;}
  .bubble{max-width:86%;padding:9px 12px 8px;border-radius:18px;font-size:.8125rem;line-height:1.38;position:relative;}
  .bubble p{margin:0;}
  .bubble time{display:block;font-size:.75rem;opacity:.7;margin-top:4px;text-align:right;}
  .b-in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;color:var(--text);}
  .b-out{align-self:flex-end;background:var(--text);color:#fff;border-bottom-right-radius:6px;}
  .b-out time{color:rgba(255,255,255,.7);opacity:1;}
  .attach{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;background:rgba(255,255,255,.12);margin-bottom:4px;font-size:.75rem;color:rgba(255,255,255,.92);}
  .attach i{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none;}
  .attach svg{width:14px;height:14px;}
  .wave{display:flex;align-items:center;gap:2.5px;height:22px;margin:2px 0 4px;}
  .wave i{display:block;width:2.5px;border-radius:2px;background:rgba(255,255,255,.85);}
  .chat-input{position:absolute;left:12px;right:12px;bottom:14px;height:40px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;padding:0 8px 0 16px;gap:8px;font-size:.8125rem;color:var(--sec);z-index:2;}
  .chat-input .mic{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--text);display:grid;place-items:center;}
  .chat-input .mic i{display:block;width:8px;height:12px;border-radius:4px;background:#fff;}
  .home-bar{position:absolute;left:50%;bottom:6px;width:110px;height:4px;border-radius:999px;background:rgba(0,0,0,.2);transform:translateX(-50%);z-index:3;}

  /* ---------- passos ---------- */
  .steps{position:relative;display:grid;gap:22px;margin:0;padding:0;list-style:none;}
  .step{position:relative;padding-left:52px;}
  .step-n{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;font-size:.8125rem;font-weight:600;font-family:"Plus Jakarta Sans",Inter,sans-serif;z-index:1;}
  .step:first-child .step-n{background:var(--text);color:#fff;border-color:var(--text);}
  .steps::before{content:"";position:absolute;left:16px;top:16px;bottom:16px;width:1px;background:var(--line-2);}
  .step h3{margin:0;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1.125rem;letter-spacing:-.02em;line-height:1.25;padding-top:4px;}
  .step p{margin:6px 0 0;font-size:.9375rem;line-height:1.5;color:var(--sec);}
  @media (min-width:1024px){
    .steps{grid-template-columns:repeat(5,1fr);gap:32px;}
    .steps::before{left:16px;right:16px;top:16px;bottom:auto;height:1px;width:auto;}
    .step{padding-left:0;padding-top:52px;}
    .step h3{padding-top:0;}
  }

  /* ---------- bento ---------- */
  .bento{display:grid;gap:16px;grid-template-columns:1fr;}
  @media (min-width:768px){.bento{grid-template-columns:repeat(6,1fr);} .c2{grid-column:span 2;} .c4{grid-column:span 4;} .c6{grid-column:span 6;}}
  .tile{background:var(--gray);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:22px;transition:transform .35s var(--ease);}
  @media (min-width:768px){.tile{min-height:300px;padding:32px;}}
  @media (min-width:1024px){.tile{padding:40px;}}
  .tile:hover{transform:translateY(-3px);}
  .tile h3{margin:0;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1.375rem;letter-spacing:-.022em;line-height:1.15;}
  .tile p{margin:8px 0 0;color:var(--sec);font-size:1rem;line-height:1.5;}
  .tile-viz{margin-top:auto;}
  .tile-sum{background:#fff;min-height:0;}
  @media (min-width:768px){.tile-sum{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;min-height:0;box-shadow:inset 0 0 0 1px var(--line);}}
  .mini{background:#fff;border-radius:20px;padding:16px 18px;box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 30px -20px rgba(0,0,0,.25);}
  .row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem;padding:8px 0;border-top:1px solid var(--line);}
  .row:first-child{border-top:0;padding-top:0;}
  .row:last-child{padding-bottom:0;}
  .dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;}
  .dot-g{background:#34c759;} .dot-y{background:#f5b800;} .dot-r{background:#ff3b30;} .dot-gold{background:var(--gold);}
  .chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 14px;border-radius:999px;background:#fff;font-size:.875rem;font-weight:500;letter-spacing:-.01em;box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 30px -20px rgba(0,0,0,.25);line-height:1.2;}
  .chip-dark{background:var(--text);color:#fff;}
  .chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .chips .arrow{color:var(--gold-ink);font-size:14px;}
  .chip-step{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
  .chips .lbl{font-size:.8125rem;color:var(--sec);margin-right:2px;}
  .range{position:relative;height:6px;border-radius:999px;background:rgba(0,0,0,.07);flex:1;}
  .range::before{content:"";position:absolute;left:30%;right:30%;top:0;bottom:0;border-radius:999px;background:rgba(215,196,154,.55);}
  .range i{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--text);transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);}
  .caption{font-size:.75rem;line-height:1.4;color:var(--sec);text-align:center;margin:20px 0 0;}

  /* ---------- trilhos horizontais no celular ---------- */
  .rail-hint{display:none;}
  @media (max-width:640px){
    .wrap .rail{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:-16px;margin-right:-16px;padding:4px 16px 10px;scroll-padding-left:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-start;}
    .wrap .rail::-webkit-scrollbar{display:none;}
    .wrap .rail>*{flex:0 0 74vw;max-width:340px;scroll-snap-align:start;min-height:0;}
    .rail-hint{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px;font-size:.875rem;color:var(--sec);}
    .rail-hint i{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);}
  }

  /* ---------- rotina (um dia) ---------- */
  .day{display:grid;gap:32px;grid-template-areas:"head" "phone" "list";}
  .day-head{grid-area:head;} .day-phone{grid-area:phone;} .day-list{grid-area:list;}
  @media (min-width:1024px){.day{grid-template-columns:1fr 1fr;grid-template-areas:"head phone" "list phone";column-gap:96px;row-gap:0;align-items:center;} .day-phone{align-self:center;}}
  .plist{display:grid;gap:14px;margin:0;padding:0;list-style:none;}
  .plist li{display:flex;gap:12px;font-size:.9375rem;line-height:1.5;color:var(--text);}
  .plist li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:9px;box-shadow:0 0 0 3px rgba(215,196,154,.2);}

  /* ---------- gráficos e cards ---------- */
  .card{background:#fff;border-radius:var(--r);padding:28px;box-shadow:0 1px 0 rgba(0,0,0,.02),0 20px 50px -40px rgba(0,0,0,.25);}
  @media (min-width:1024px){.card{padding:36px;}}
  .card h3{margin:0;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:-.02em;}
  .card-dark{background:#111113;color:#fff;box-shadow:inset 0 0 0 1px var(--line-w),0 60px 120px -60px rgba(215,196,154,.18);}
  .chart{width:100%;height:auto;display:block;}
  .chart text{font-family:Inter,system-ui,sans-serif;}
  .chart-d{display:none;} .chart-m{display:block;}
  .chart-wrap{position:relative;}
  .axl{position:absolute;font-size:.75rem;line-height:1;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .axl.y{left:0;width:9%;text-align:right;transform:translateY(-50%);}
  .axl.x{left:11.1%;right:2.8%;bottom:0;display:flex;justify-content:space-between;}
  .axl.m{top:70%;transform:translateX(-50%);color:rgba(255,255,255,.85);}
  .axl.tip{transform:translate(-50%,-50%);color:#f5f5f7;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 10px;}
  .xl{display:flex;justify-content:space-between;font-size:.75rem;line-height:1;color:var(--sec);margin-top:8px;padding:0 2px;}
  @media (min-width:1024px){.chart-d{display:block;} .chart-m{display:none;}}
  @media (min-width:1024px) and (max-width:1199px){#relatorios .chart-d text{font-size:13.5px;}}
  .chart-m{max-width:640px;margin-inline:auto;}
  .badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);font-size:.75rem;font-weight:500;color:var(--sec);white-space:nowrap;}
  .badge-gold{border-color:rgba(215,196,154,.7);color:var(--gold-ink);background:rgba(215,196,154,.14);}
  .card-dark .badge{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75);}
  .reports{display:grid;gap:16px;}
  @media (min-width:640px){.reports{grid-template-columns:1fr 1fr;}}
  @media (min-width:1024px){.reports{grid-template-columns:repeat(3,1fr);}}
  .report{background:#fff;border-radius:22px;padding:24px;}
  .report h3{margin:0;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;}
  .report p{margin:6px 0 0;font-size:.9375rem;color:var(--sec);line-height:1.5;}
  .duo{display:grid;gap:24px;}
  @media (min-width:640px){.duo{grid-template-columns:1fr 1fr;gap:32px;}}
  .duo .kpi{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.9375rem;}
  .duo .kpi b{font-weight:600;}
  .duo .kpi span{color:var(--sec);font-variant-numeric:tabular-nums;}

  /* ---------- visor (treino com câmera) ---------- */
  .viewfinder{position:relative;border-radius:36px;background:var(--black);overflow:hidden;color:#fff;aspect-ratio:4/5;
    box-shadow:0 60px 120px -60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06);}
  @media (min-width:768px){.viewfinder{aspect-ratio:16/9;}}
  .viewfinder::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(70% 70% at 50% 55%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 55%,#000 20%,transparent 100%);}
  .vf-glow{position:absolute;left:50%;top:58%;width:70%;height:80%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(215,196,154,.22),rgba(215,196,154,0));filter:blur(30px);}
  .vf-figure{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
  .vf-svg{position:relative;height:100%;aspect-ratio:720/460;flex:none;}
  .vf-svg svg{display:block;width:100%;height:100%;}
  .vf-label{position:absolute;white-space:nowrap;font-family:Inter,system-ui,sans-serif;line-height:1;}
  .vf-label.depth{right:26.4%;top:56.6%;font-size:.75rem;letter-spacing:.08em;color:rgba(215,196,154,.85);}
  .vf-label.angle{left:57%;top:64.6%;font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:rgba(245,242,234,.95);}
  @media (max-width:767px){.vf-label.depth{top:53%;}}
  .corner{position:absolute;width:26px;height:26px;border:1.5px solid rgba(215,196,154,.6);z-index:2;}
  .corner.tl{left:20px;top:20px;border-right:0;border-bottom:0;border-top-left-radius:8px;}
  .corner.tr{right:20px;top:20px;border-left:0;border-bottom:0;border-top-right-radius:8px;}
  .corner.bl{left:20px;bottom:20px;border-right:0;border-top:0;border-bottom-left-radius:8px;}
  .corner.br{right:20px;bottom:20px;border-left:0;border-top:0;border-bottom-right-radius:8px;}
  .vf-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.8125rem;font-weight:500;white-space:nowrap;line-height:1.2;color:#fff;}
  .vf-chip .rec{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(215,196,154,.95);}
  .vf-chip .ok{width:14px;height:14px;flex:none;}
  .vf-chip .mut{color:rgba(255,255,255,.6);}
  .vf-top,.vf-bottom{position:absolute;left:58px;right:58px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:3;}
  .vf-top{top:22px;}
  .vf-bottom{bottom:22px;align-items:flex-end;}
  .vf-bottom .chips{gap:8px;justify-content:flex-end;}
  .vf-count{line-height:1;}
  .vf-count b{display:block;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:clamp(3rem,6vw,4.5rem);letter-spacing:-.045em;font-variant-numeric:tabular-nums;}
  .vf-count b em{font-style:normal;font-size:.42em;color:rgba(255,255,255,.55);letter-spacing:-.02em;margin-left:4px;}
  .vf-count .lbl{display:block;margin-top:6px;font-size:.8125rem;color:rgba(255,255,255,.65);}
  @media (max-width:767px){
    .vf-top{left:20px;right:20px;top:58px;}
    .vf-bottom{left:20px;right:20px;bottom:58px;flex-direction:column;align-items:flex-start;gap:14px;}
    .vf-bottom .chips{justify-content:flex-start;}
    .vf-figure{top:44px;bottom:96px;}
  }
  .feat3{display:grid;gap:24px;}
  @media (min-width:768px){.feat3{grid-template-columns:repeat(3,1fr);gap:40px;}}
  .feat3 h3{margin:0;font-size:1.25rem;}
  .feat3 p{margin:10px 0 0;color:var(--sec);}

  /* ---------- planos ---------- */
  .plans{display:grid;gap:16px;}
  @media (max-width:1023px){.plans .plan-featured{order:-1;}}
  @media (min-width:1024px){.plans{grid-template-columns:repeat(3,1fr);align-items:start;}}
  .plan{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;}
  @media (min-width:1024px){.plan{padding:40px;}}
  .plan h3{margin:0;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1.75rem;letter-spacing:-.03em;}
  .plan .for{margin:8px 0 0;color:var(--sec);font-size:1rem;line-height:1.5;}
  .plan ul{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:12px;font-size:.9375rem;line-height:1.45;}
  .plan li{display:flex;gap:12px;align-items:flex-start;}
  .plan li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:9px;}
  .plan .btn{margin-top:32px;width:100%;}
  .plan-featured{background:var(--black);color:#fff;border-color:var(--black);box-shadow:0 40px 80px -50px rgba(0,0,0,.6);}
  .plan-featured .for{color:rgba(255,255,255,.68);}
  .plan-featured .badge{border-color:rgba(215,196,154,.5);color:var(--gold);background:rgba(215,196,154,.12);}
  .addons{display:grid;gap:16px;}
  @media (min-width:1024px){.addons{grid-template-columns:1fr 1fr;}}
  .addon{border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:16px;background:#fff;}
  @media (min-width:640px){.addon{flex-direction:row;align-items:center;justify-content:space-between;}}
  .addon h3{margin:0;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .addon p{margin:6px 0 0;font-size:.9375rem;color:var(--sec);line-height:1.5;}

  /* ---------- confiança ---------- */
  .trust{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line);}
  @media (min-width:768px){.trust{grid-template-columns:1fr 1fr;column-gap:48px;}}
  .trust li{border-bottom:1px solid var(--line);padding:22px 0;font-size:1rem;line-height:1.5;display:flex;gap:14px;align-items:flex-start;}
  .trust svg{flex:none;width:22px;height:22px;margin-top:1px;}
  .start{background:var(--gray);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:20px;}
  @media (min-width:768px){.start{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;padding:40px 44px;}}
  .start h3{margin:0;}
  .start p{margin:8px 0 0;color:var(--sec);max-width:560px;}
  .start .btn{flex:none;}
  @media (max-width:640px){.trust li{padding:16px 0;font-size:.9375rem;} .start{padding:28px 24px;}}

  /* ---------- FAQ ---------- */
  .faq details{border-top:1px solid var(--line);}
  .faq details:last-child{border-bottom:1px solid var(--line);}
  .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font-size:1.125rem;font-weight:500;letter-spacing:-.015em;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq .plus{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .3s var(--ease);}
  .faq .plus::before,.faq .plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--text);transform:translate(-50%,-50%);}
  .faq .plus::before{width:12px;height:1.5px;} .faq .plus::after{width:1.5px;height:12px;}
  .faq details[open] .plus{transform:rotate(45deg);}
  .faq .ans{padding:0 56px 24px 0;color:var(--sec);font-size:1.0625rem;line-height:1.55;}

  /* ---------- CTA final / rodapé ---------- */
  .badge-mark{width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto;box-shadow:0 20px 40px -30px rgba(0,0,0,.3);}
  .badge-mark .mark{width:34px;height:17px;}
  .site-footer{background:var(--gray);padding:48px 0 40px;font-size:.75rem;color:var(--sec);}
  .site-footer a{color:var(--sec);} .site-footer a:hover{color:var(--text);}
  .fnav{display:flex;flex-wrap:wrap;gap:8px 20px;}

/* =========================================================
   (3) Vocabulário compartilhado (shell + includes)
   Vem DEPOIS da seção (2): as variantes escuras de .badge dependem da ordem
   para vencer .card-dark .badge (mesma especificidade) e as neutras usam
   :not(.badge-gold) para nunca vencer .plan-featured .badge.
   ========================================================= */

/* eyebrow que quebra em 2 linhas: o ponto dourado fica ao lado da 1ª linha (não no meio das duas) e não encolhe.
   Numa linha só fica onde já estava: (altura da linha − 6px) / 2 do topo. */
.eyebrow::before{flex:none;align-self:flex-start;margin-top:.55em;margin-top:calc((1lh - 6px) / 2);}

/* cabeçalho de seção com selo ao lado do eyebrow */
.head-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;}
.head.left .head-meta{justify-content:flex-start;}

/* títulos */
h3.display.h3-lg{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.12;letter-spacing:-.025em;}
.title-sm{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;line-height:1.25;margin:0;}

/* superfícies */
.tile-sm{background:var(--gray);border-radius:var(--r-md);padding:24px;}
.card-sm{background:#fff;border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-card);}
.tile-dark{background:rgba(255,255,255,.06);border:1px solid var(--line-w);border-radius:20px;padding:18px 20px;}
.vf-card{background:var(--black);color:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 60px 120px -60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06);}
.card-dark .sec,.card-dark .caption{color:rgba(255,255,255,.6);}
.card-dark .eyebrow,.on-dark .eyebrow,.vf-card .eyebrow{color:var(--gold);}
.vf-card .sec,.on-dark .sec{color:var(--on-dark-2);}
.on-dark .caption,.vf-card .caption{color:rgba(255,255,255,.6);}

/* ícones */
/* o shell desenha os ícones como <svg><use href="#g-…"/></svg> (sprite do header.php); caractere solto (includes)
   sai a 20px numa pilha de fontes de símbolos, para o traço não ficar com 9–11px de tinta */
.glyph{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gray);color:var(--gold-ink);font-size:20px;line-height:1;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","Noto Sans Symbols",var(--font-body);}
.glyph svg{width:20px;height:20px;}
.tile .glyph,.tile-sm .glyph{background:#fff;}
.card-dark .glyph,.vf-card .glyph,.on-dark .glyph{background:rgba(255,255,255,.08);color:var(--gold);}

/* listas */
.plist.small li{font-size:.875rem;}
.card-dark .plist li,.on-dark .plist li,.vf-card .plist li{color:rgba(255,255,255,.85);}
.hlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.hlist>li{border-bottom:1px solid var(--line);padding:18px 0;}

/* faixa chave/valor: 2x2 (ou 2 + 1) abaixo de 640 */
.kv{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.kv>div{padding:16px 12px;}
.kv>div+div{border-left:1px solid var(--line);}
.kv dt{font-size:.8125rem;color:var(--sec);}
.kv dd{margin:4px 0 0;font-family:var(--font-display);font-weight:600;font-size:1.125rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
@media (max-width:639px){
  .kv{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kv>div:nth-child(odd){border-left:0;}
  .kv>div:nth-child(n+3){border-top:1px solid var(--line);}
  .kv>div:last-child:nth-child(odd){grid-column:1/-1;}
}
.on-dark .kv,.card-dark .kv,.vf-card .kv{border-top-color:var(--line-w);border-bottom-color:var(--line-w);}
.on-dark .kv>div,.card-dark .kv>div,.vf-card .kv>div{border-left-color:var(--line-w);border-top-color:var(--line-w);}
.on-dark .kv dt,.card-dark .kv dt,.vf-card .kv dt{color:var(--on-dark-3);}

/* passos: variantes */
.step h4{margin:0;font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;font-weight:600;font-size:1.125rem;letter-spacing:-.02em;line-height:1.25;padding-top:4px;}
@media (min-width:1024px){
  .step h4{padding-top:0;}
  .steps.steps-3{grid-template-columns:repeat(3,1fr);}
  .steps.steps-4{grid-template-columns:repeat(4,1fr);}
  .steps.steps-v{grid-template-columns:none;gap:22px;}
  .steps.steps-v::before{left:16px;right:auto;top:16px;bottom:16px;width:1px;height:auto;}
  .steps-v .step{padding-left:52px;padding-top:0;}
  .steps-v .step h3,.steps-v .step h4{padding-top:4px;}
}

/* chips de filtro e campo de busca */
button.fchip{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--gray);color:var(--text);font:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .2s ease,color .2s ease;}
button.fchip:hover{background:var(--gray-2);}
button.fchip[aria-pressed="true"]{background:var(--text);color:#fff;}
button.fchip small{font-size:.75rem;color:var(--gold-ink);}
button.fchip[aria-pressed="true"] small{color:var(--gold);}
button.fchip:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:999px;}
label.field{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--gray);border:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;}
/* foco visível >= 3:1 (anel de 2px na cor do texto, como o :focus-visible global) + brilho ouro por fora */
label.field:focus-within{border-color:var(--text);box-shadow:0 0 0 1px var(--text),0 0 0 5px rgba(215,196,154,.35);}
label.field input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:.9375rem;color:var(--text);}
label.field input::placeholder{color:var(--sec);opacity:1;}
/* botão de limpar da busca (Chrome/Safari): o × azul do navegador vira o círculo cinza do sistema, alvo de 24px */
label.field input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0 -6px 0 6px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%236e6e73'/%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;}
/* iOS Safari amplia a página ao focar campo com fonte < 16px */
@media (max-width:767px){label.field input{font-size:16px;}}

/* conversa em card (fora dos telefones) */
.chat-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-pop);}
.chat-card .chat-head{padding:14px 18px;}
.chat-card .chat-head .badge{margin-left:auto;}
.chat-sub{font-size:.75rem;color:var(--sec);margin-top:2px;}
.chat-thread{display:flex;flex-direction:column;gap:8px;padding:16px 12px 18px;background:var(--bg);}

/* "Tudo o que faz": lista completa dentro do card */
details.more{margin-top:18px;border-top:1px solid var(--line);}
.tile>details.more{margin-top:0;}
.more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;font-size:.9375rem;font-weight:500;color:var(--text);}
.more summary::-webkit-details-marker{display:none;}
.more .plus{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .3s var(--ease);}
.more .plus::before,.more .plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--text);transform:translate(-50%,-50%);}
.more .plus::before{width:10px;height:1.5px;} .more .plus::after{width:1.5px;height:10px;}
.more[open] .plus{transform:rotate(45deg);}
.more>.plist{margin-top:12px;}

/* foto */
.photo{display:block;border-radius:var(--r);overflow:hidden;background:var(--gray);}
.photo img{display:block;width:100%;height:100%;object-fit:cover;}

/* links */
.ilink{color:var(--gold-ink);text-decoration:underline;text-decoration-color:rgba(125,101,52,.35);text-underline-offset:3px;}
.ilink:hover{text-decoration-color:currentColor;}
.on-dark .link,.card-dark .link,.vf-card .link{color:var(--gold);}
.on-dark .ilink,.card-dark .ilink,.vf-card .ilink{color:var(--gold);text-decoration-color:rgba(215,196,154,.45);}

/* botão com rótulo longo: pode quebrar a linha em qualquer largura (no tamanho normal o rótulo cabe numa linha e
   nada muda; com espaçamento de texto ampliado, WCAG 1.4.12, ou no celular estreito ele quebra em vez de vazar) */
.btn-wrap{white-space:normal;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;line-height:1.25;text-align:center;}
@media (max-width:479px){.btn-wrap{padding-left:20px;padding-right:20px;}}

/* selos em fundo escuro: neutro (nunca o dourado) e dourado */
.card-dark .badge:not(.badge-gold),.on-dark .badge:not(.badge-gold),.vf-card .badge:not(.badge-gold){border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75);background:transparent;}
.on-dark .badge-gold,.vf-card .badge-gold,.card-dark .badge-gold{border-color:rgba(215,196,154,.5);color:var(--gold);background:rgba(215,196,154,.12);}

/* utilidades */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:12px;background:var(--text);color:#fff;font-size:.9375rem;font-weight:500;}
.skip:focus{top:12px;}

/* nav: seção atual (scroll-spy) */
.nav-links a.is-active{color:var(--text);background:rgba(0,0,0,.05);}
.menu-panel a.is-active{font-weight:600;}

/* =========================================================
   (4) Blocos só do shell (index.php, header.php, footer.php)
   ========================================================= */

/* menu mobile: pílula de WhatsApp no fim do painel */
.menu-cta{padding:16px;border-top:1px solid var(--line);}
.menu-cta .btn{width:100%;}

/* telefones: o primeiro balão fica inteiro abaixo da máscara de 28px do topo da conversa */
.phone-screen .chat-body{padding-top:30px;}

/* herói: dd sem recuo mesmo sem o preflight do Tailwind */
.stat dd{margin:0;}

/* Como funciona: "Visão 360°" em lista de linhas finas, 3 colunas a partir de 1024 (de 768 a 1023 as colunas
   de 235px espremiam os textos em 4 linhas; ali ficam as linhas empilhadas) */
.visao{margin-top:64px;}
@media (min-width:768px){.visao{margin-top:96px;}}
@media (min-width:1024px){.visao{margin-top:128px;}}
.visao-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
@media (min-width:768px){.visao-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;}}
.inputs{list-style:none;margin:28px 0 0;padding:0;display:grid;border-top:1px solid var(--line);}
.inputs>li{display:flex;gap:14px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line);}
.inputs p{margin:6px 0 0;}
@media (min-width:1024px){
  .inputs{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);}
  .inputs>li{border-bottom:0;padding:24px 24px 24px 0;}
  .inputs>li+li{border-left:1px solid var(--line);padding-left:24px;}
}

/* legenda centrada com largura de leitura (no mockup .caption zera a margem lateral de .measure) */
.caption.measure{margin-left:auto;margin-right:auto;}
.feat3 .glyph{margin-bottom:16px;}

/* correções de estouro herdadas do mockup: o chip longo do bento (768) e o botão do plano (1024–1279)
   não podem alargar a coluna além da tela */
.chip-step{max-width:100%;}
.chip-step .chip{white-space:normal;min-width:0;}
.plans>.plan{min-width:0;}
@media (min-width:1024px) and (max-width:1279px){.plan{padding:32px;} .plan .btn{padding:0 16px;}}
/* bento c2 (Bioimpedância) abaixo de 1024: o título do score (nowrap no mockup) era cortado pela borda do tile */
@media (max-width:1023px){#recursos .tile-viz > .small{min-width:0;} #recursos .tile-viz > .small b{white-space:normal;}}
/* no tile estreito (768–1023) o texto do score desce para baixo do anel em vez de virar uma coluna de 3 palavras */
@media (min-width:768px) and (max-width:1023px){#recursos .tile-viz.flex.items-center{flex-wrap:wrap;row-gap:14px;} #recursos .tile-viz.flex.items-center > .small{flex:1 1 9rem;}}
/* "Tudo o que faz" numa linha só nos tiles estreitos do bento (768–819: coluna de 160px) */
#recursos .tile .more summary{gap:8px;white-space:nowrap;}

/* planos: o selo dentro do h3 do adicional herdava Plus Jakarta com tracking negativo ("Lista de espera" ficava espremido) */
.addon h3 .badge{font-family:var(--font-body);letter-spacing:0;}

/* bento: link da ficha logo abaixo do mini-painel */
.tile .ficha-link{align-self:flex-start;margin-top:-8px;}

/* Relatórios: os outros relatórios, em lista de linhas finas */
.report .link{margin-top:14px;font-size:.9375rem;}
.report-more{max-width:880px;margin:56px auto 0;}
.report-more-h{margin:0;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sec);text-align:center;}
.report-more ul{list-style:none;margin:18px 0 0;padding:0;display:grid;border-top:1px solid var(--line);}
.report-more li{padding:18px 0;border-bottom:1px solid var(--line);}
.report-more li p{margin:4px 0 0;}
@media (min-width:768px){
  .report-more ul{grid-template-columns:1fr 1fr;column-gap:48px;}
}

/* Execução com câmera */
#execucao .kv{text-align:center;}
/* contador do visor: "12 / 15" nunca quebra (no mockup o "/ 15" caía para a linha de baixo entre 641 e ~1000px) */
#execucao .vf-count{flex:none;} #execucao .vf-count b{white-space:nowrap;}
.ex-how{display:grid;gap:40px;grid-template-areas:"photo" "steps" "list";}
.ex-photo{grid-area:photo;} .ex-steps{grid-area:steps;} .ex-list{grid-area:list;}
.ex-steps .steps{margin-top:24px;}
@media (min-width:1024px){
  .ex-how{grid-template-columns:7fr 5fr;grid-template-areas:"photo steps" "list steps";column-gap:64px;row-gap:36px;align-items:start;}
}
/* figuras: 3 colunas só a partir de 1280 (gap 20 → cada card ≥ 334px, rótulos de 11,5 unidades ≥ 12px);
   de 768 a 1279 cada card vira uma linha com a figura fixa em 352px; abaixo de 768 empilham */
.vf-figs{display:grid;gap:16px;}
@media (min-width:1280px){.vf-figs{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}}
.vf-card{display:flex;flex-direction:column;}
.vf-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 0;}
.vf-card-head p{margin:0;font-size:.875rem;color:rgba(255,255,255,.7);}
.vf-card-svg svg{display:block;width:100%;height:auto;}
.vf-card-body{display:flex;gap:14px;align-items:flex-start;padding:6px 22px 26px;}
.vf-card-body h3{color:#fff;}
.vf-card-body p{margin:6px 0 0;color:var(--on-dark-2);font-size:.9375rem;line-height:1.5;}
@media (min-width:768px) and (max-width:1279px){
  .vf-card{display:grid;grid-template-columns:352px minmax(0,1fr);align-items:center;}
  .vf-card-body{padding:24px 32px 24px 8px;}
}
/* rótulos de 11,5 unidades: abaixo de 334px de card ficariam < 12px; até 383px de janela (cobre barra de rolagem
   clássica ou o scrollbar-gutter do modal da ficha) sobem para 12,4 unidades, sem tracking (>= 12,1px num card de 313px;
   com o tracking .06em dos arquivos o rótulo encostava na ponta direita do chip; sem ele sobram ~11–15 unidades, como em 390) */
@media (max-width:383px){#execucao .vf-card svg text[font-size="11.5"]{font-size:12.4px;letter-spacing:0;}}

/* Confiança: "Comece com uma foto" com a foto à esquerda (5/12) a partir de 768 */
.start.start-photo{display:grid;padding:0;gap:0;overflow:hidden;align-items:stretch;}
.start-photo .photo{border-radius:0;aspect-ratio:16/9;}
.start-photo .photo img{object-position:70% 50%;}
.start-body{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:28px 24px 32px;}
.start-body .tiny{margin:0;}
@media (min-width:768px){
  .start.start-photo{grid-template-columns:5fr 7fr;}
  .start-photo .photo{aspect-ratio:auto;height:100%;min-height:340px;}
  .start-body{justify-content:center;padding:40px 44px;}
}

/* rodapé */
.fgrid{display:grid;gap:36px;}
@media (min-width:1024px){.fgrid{grid-template-columns:5fr 7fr;gap:48px;}}
.fbrand p{margin:10px 0 0;max-width:420px;}
.fbrand .ftag{margin-top:6px;}
.fcols{display:grid;gap:28px 24px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:640px){.fcols{grid-template-columns:repeat(3,minmax(0,1fr));}}
.fcols .fh{margin:0;font-weight:600;color:var(--text);}
.fcols ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;}
.site-footer .fbottom p{margin:0;}
.site-footer .brand{color:var(--text);}

/* ---------------- revisão 1 (fix1) ---------------- */

/* links .link: inline-block em vez do inline-flex do mockup. Quando o rótulo quebra em duas linhas
   (tile Consultas em 768–900, link da glicemia em 360), a seta segue a última palavra em vez de ficar
   solta na borda direita. inline-block mantém as margens verticais (ex.: .link.mt-8 em Parcerias).
   A seta tem largura líquida zero (margin-right negativa) e mora no padding-right do link: nunca desce
   sozinha para a linha de baixo; se o texto não cabe com ela, desce a última palavra junto. */
.link{display:inline-block;position:relative;padding-right:12px;}
.link .chev{display:inline-block;vertical-align:middle;margin-right:-11px;}
/* alvos de toque >= 44px sem mexer no layout (como o .btn-sm) */
.link::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;min-height:calc(100% + 20px);transform:translateY(-50%);}
.brand{position:relative;}
.brand::after{content:"";position:absolute;inset:-10px -6px;}
.more summary{min-height:44px;}

/* menu mobile: botão real (main.js troca o <label> por <button>); sem JS o checkbox não é parada de Tab no desktop */
button.menu-btn{border:0;background:transparent;padding:0;margin:0;color:inherit;font:inherit;}
@media (min-width:1024px){.menu-check{display:none;}}

/* Rotina (>= 1024): o telefone cresceu (todos os balões); o texto fica junto, centrado na altura dele,
   em vez de título no alto e lista embaixo com um buraco no meio */
@media (min-width:1024px){#whatsapp .day-head{align-self:end;} #whatsapp .day-list{align-self:start;padding-top:40px;}}

/* planos, adicionais: textos alinhados no topo (o do Profissional tem uma linha a mais), link no meio */
@media (min-width:640px){.addon{align-items:flex-start;} .addon>.link{align-self:center;}}

/* Execução, 768–1023: as 3 features viram linhas (ícone à esquerda) em vez de colunas de 208px com 13 linhas */
@media (min-width:768px) and (max-width:1023px){
  #execucao .feat3{grid-template-columns:1fr;gap:28px;max-width:720px;margin-left:auto;margin-right:auto;}
  #execucao .feat3>*{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;align-items:start;}
  #execucao .feat3 .glyph{grid-row:1 / span 2;margin-bottom:0;}
  #execucao .feat3>*>:not(.glyph){grid-column:2;}
}

/* visor abaixo de 390px: os 3 chips de baixo quebravam em 3 linhas e cobriam canela, pés e chão.
   Aqui o visor fica 3:4, a figura sobe (livra 150px embaixo), os chips de baixo ficam em .75rem
   para caberem numa linha e o 3º chip ("Vídeo enviado · Nenhum", repetido na faixa .kv logo abaixo) sai. */
@media (max-width:389px){
  #execucao .viewfinder{aspect-ratio:3/4;}
  #execucao .vf-figure{bottom:150px;}
  #execucao .vf-bottom .chips{gap:6px;flex-wrap:nowrap;}
  #execucao .vf-bottom .vf-chip{font-size:.75rem;padding:6px 10px;gap:6px;}
  #execucao .vf-bottom .chips>.vf-chip:nth-child(3){display:none;}
  /* "PROFUNDIDADE" não cresce com a figura menor: sai de cima da coxa, fica acima da linha tracejada e à direita do joelho */
  #execucao .vf-label.depth{top:51%;right:auto;left:55%;}
}

/* Relatórios no trilho do celular (<= 640): os cards fora da tela não ficam em opacidade 0 esperando
   entrar na viewport pelo lado (o foco do teclado chegava num card invisível) */
@media (max-width:640px){html.js .reports .report.reveal{opacity:1;transform:none;}}
.reports.rail:focus-visible{outline-offset:-2px;border-radius:var(--r-md);}

/* rodapé no celular: links com alvo de 44px (texto segue 12px) */
@media (max-width:767px){
  .fcols ul{gap:0;}
  .fcols ul a{display:inline-flex;align-items:center;min-height:44px;}
}

/* ---------------- revisão 2 (fix2) ---------------- */

/* bento: chip que quebra em 2–3 linhas (Exames, 768–1279) vira retângulo arredondado em vez de losango;
   numa linha só (altura 34px) o raio de 17px continua sendo a pílula do mockup */
#recursos .tile-viz .chip{border-radius:17px;}

/* visor de 768 a 879: os 3 chips de baixo quebravam em 2 linhas e cobriam canela, pés e chão. O 3º chip
   ("Vídeo enviado · Nenhum") repete a faixa .kv logo abaixo e sai; os outros dois ficam numa linha sob os pés */
@media (min-width:768px) and (max-width:879px){#execucao .vf-bottom .chips>.vf-chip:nth-child(3){display:none;}}

/* rodapé: © e aviso lado a lado só a partir de 1280 (os dois cabem numa linha); abaixo disso empilham */
@media (min-width:1280px){.site-footer .fbottom p:first-child{flex:none;white-space:nowrap;}}

/* ---------------- revisão 3 (integração 2) ---------------- */

/* nav de 1024 a 1123: o respiro lateral dos 9 links cresce com a janela (6px em 1024, os 11px do mockup a partir de
   ~1124). Com espaçamento de texto aumentado (WCAG 1.4.12), a pílula do WhatsApp passava ~34px da janela entre 1024
   e ~1060 com os 11px fixos. No espaçamento normal só muda o respiro entre os links nessa faixa. */
@media (min-width:1024px) and (max-width:1123.98px){.nav-links a{padding-left:clamp(6px,calc(6px + (100vw - 1024px) * .05),11px);padding-right:clamp(6px,calc(6px + (100vw - 1024px) * .05),11px);}}

/* .btn-wrap numa fileira flex (Rotina: botão + legenda): o botão não encolhe para a legenda caber, ele fica na largura
   do rótulo (numa linha só) e a legenda é que quebra; max-width:100% deixa o rótulo quebrar dentro da fileira quando
   ela é mais estreita que o botão (celular, espaçamento de texto aumentado). */
.btn-wrap{flex-shrink:0;max-width:100%;}

/* =========================================================
   (5) Movimento: blocos "movimento" e "dados em movimento" do mockup, verbatim, com UMA edição documentada
   (reaplicar num re-sync; tools: port/build_css.py, motion_edits):
   M1. Os laços infinitos do visor (.vf-chip .rec pulse, .joint-glow glow) só tocam sob .vf-live e 2 vezes
       (4,4 s e 5,2 s, dentro da janela do sonar); sem JS o visor fica parado. O brilho usa glow-live, que
       começa e termina na opacidade do atributo (.5), sem salto. WCAG 2.2.2 (nada pisca mais de 5 s sem parar).
   ========================================================= */
  /* ---------- movimento ---------- */
  @media (prefers-reduced-motion:no-preference){
    html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
    html.js .reveal.in{opacity:1;transform:none;}
    html.js .reveal.instant{transition:none;}
    .d1{transition-delay:.08s!important;} .d2{transition-delay:.16s!important;} .d3{transition-delay:.24s!important;}
    html.js .phone[data-anim] .bubble{animation:pop .4s var(--ease) both paused;animation-delay:calc(var(--i,0) * 90ms);}
    html.js .phone[data-anim].play .bubble{animation-play-state:running;}
    @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
    .vf-live .vf-chip .rec{animation:pulse 2.2s ease-in-out 2;}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
    .vf-live .joint-glow{animation:glow-live 2.6s ease-in-out 2;}
    @keyframes glow-live{0%,100%{opacity:.5}25%{opacity:.35}75%{opacity:.7}}
  }

  /* ---------- dados em movimento (score, curvas, visor, passos) ----------
     Tudo é ligado pelo JS no fim da página, uma vez, quando a peça entra na tela.
     Sem JS ou com prefers-reduced-motion: reduce nada disso existe e os valores finais já estão no HTML. */
  .fx-ring{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;}
  .fx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .jping{opacity:0;}
  @media (prefers-reduced-motion:no-preference){
    html.js .vf-count [data-count]{display:inline-block;transform-origin:50% 85%;}
    /* sonar das articulações: dois anéis fixos que só mudam de opacidade (sem layout), duas voltas e para (< 5 s) */
    .vf-live .jping{animation:jping 2.4s var(--ease) 2;animation-delay:var(--d,0s);}
    @keyframes jping{0%{opacity:0}10%{opacity:.6}45%,100%{opacity:0}}
    /* constelação: o brilho de cada articulação cintila uma vez, em sequência */
    .vf-live .joint-glow circle{animation:twinkle 1.2s ease-in-out 1;animation-delay:var(--d,0s);}
    @keyframes twinkle{0%,100%{opacity:1}45%{opacity:.35}}
    /* visor fora da tela: laços pausados */
    .fx-idle .joint-glow,.fx-idle .joint-glow circle,.fx-idle .jping,.fx-idle .rec{animation-play-state:paused;}
  }

  /* rede de segurança: nada anima com movimento reduzido */
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

  /* Time de atendimento (#confianca) */
  .team{display:grid;gap:32px;align-items:center;padding:32px;border-radius:var(--r);background:var(--gray);}
  @media (min-width:1024px){.team{grid-template-columns:minmax(0,1fr) auto;column-gap:56px;padding:40px 48px;}}
  .team-copy h3{font-size:clamp(1.5rem,2.6vw,2rem);}
  .team-copy p{margin:10px 0 0;color:var(--sec);max-width:520px;}
  .team-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:24px 32px;}
  .team-list li{display:flex;flex-direction:column;align-items:center;text-align:center;width:120px;}
  .team-list img{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;background:var(--white);box-shadow:0 0 0 3px var(--white),0 0 0 4px var(--gold-line);}
  .team-list b{margin-top:12px;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:1rem;letter-spacing:-.01em;}
  .team-list span{margin-top:2px;font-size:.8125rem;line-height:1.3;color:var(--sec);}
  @media (max-width:479px){.team{padding:24px 20px;}.team-list{justify-content:center;}}

/* flare do header (dono 14/10): ponto dourado percorre o infinito (SMIL, 3 s); reduced-motion = sem o ponto. */
.mark-flare{overflow:visible;}

@media (prefers-reduced-motion:reduce){.mark-flare .flare{display:none;}}

/* ---------------- menu do topo estilo apple.com (site-revisao 17/10) ----------------
   Desktop (>= 1024): poucos itens; cada grupo é um <button class="mega-btn"> que abre um painel largo (.mega-sub) sob a
   barra, com colunas (título pequeno + links; a 1ª coluna, .mega-col-g, em letra grande). Com JS a classe .open (main.js:
   mouse, foco do teclado, clique, Esc); sem JS :hover e :focus-within. O véu (.nav-veu) escurece e desfoca a página.
   Celular (< 1024): <details class="macc"> no painel do ☰, acordeão com um aberto por vez (name="menu-acc").
   Painel opaco (var(--bg)): o backdrop-filter do .nav impede o blur de um filho (ver a edição 9 acima). */
.mega-item{display:flex;align-items:center;}
.mega-btn{font:inherit;font-size:.8125rem;color:rgba(29,29,31,.8);padding:6px 11px;border:0;border-radius:999px;background:transparent;cursor:pointer;white-space:nowrap;transition:color .2s ease,background .2s ease;}
.mega-btn:hover,.mega-item.open .mega-btn,.mega-btn.is-active{color:var(--text);background:rgba(0,0,0,.05);}
.mega-btn:focus-visible,.mega-sub a:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
@media (min-width:1024px) and (max-width:1123.98px){.mega-btn{padding-left:clamp(6px,calc(6px + (100vw - 1024px) * .05),11px);padding-right:clamp(6px,calc(6px + (100vw - 1024px) * .05),11px);}}
.mega-sub{position:absolute;left:0;right:0;top:var(--nav);z-index:61;background:var(--bg);border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.25);visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .22s ease,transform .32s var(--ease),visibility 0s linear .32s;}
.mega-item.open .mega-sub,html:not(.js) .mega-item:hover .mega-sub,html:not(.js) .mega-item:focus-within .mega-sub{
  visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .32s var(--ease),visibility 0s;}
.mega-wrap{max-width:var(--wrap);margin:0 auto;padding:36px 32px 52px;display:flex;flex-wrap:wrap;gap:24px 72px;}
.mega-col{min-width:160px;}
.mega-col ul{list-style:none;margin:0;padding:0;}
.mega-h{margin:0 0 12px;font-size:.75rem;line-height:1.3;color:var(--sec);}
.mega-col li+li{margin-top:8px;}
.mega-col a{display:inline-block;font-size:.875rem;line-height:1.35;font-weight:600;color:var(--text);border-radius:6px;}
.mega-col a:hover{text-decoration:underline;text-underline-offset:3px;}
.mega-col-g a{font-family:var(--font-display);font-size:1.5rem;line-height:1.2;letter-spacing:-.015em;}
.mega-col-g li+li{margin-top:10px;}
.mega-col a.is-active{color:var(--gold-ink);}
.nav-veu{position:fixed;left:0;right:0;bottom:0;top:var(--nav);z-index:59;pointer-events:none;visibility:hidden;opacity:0;
  background:rgba(232,232,237,.4);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:opacity .25s ease,visibility 0s linear .25s;}
@media (min-width:1024px){
  .nav.mega-aberto + .nav-veu,html:not(.js) .nav:has(.mega-item:hover) + .nav-veu{visibility:visible;opacity:1;transition:opacity .25s ease,visibility 0s;}
}
/* celular: acordeão no painel do ☰ */
.macc{border-top:1px solid var(--line);}
.menu-panel > .macc:first-child{border-top:0;}
.macc > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;min-height:44px;font-size:1.0625rem;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;}
.macc > summary::-webkit-details-marker{display:none;}
.macc > summary:focus-visible{outline:2px solid var(--text);outline-offset:-2px;}
.macc-chev{flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease);opacity:.6;}
.macc[open] > summary{font-weight:600;}
.macc[open] .macc-chev{transform:translateY(2px) rotate(-135deg);}
.macc-body{padding:0 16px 16px 28px;}
.macc-h{margin:12px 0 4px;font-size:.75rem;color:var(--sec);}
.macc-h:first-child{margin-top:0;}
.macc-body ul{list-style:none;margin:0;padding:0;}
.macc-body a{display:flex;align-items:center;min-height:44px;font-size:1.0625rem;font-weight:500;color:var(--text);}
.macc-body a.is-active{color:var(--gold-ink);font-weight:600;}
.macc-body a:focus-visible{outline:2px solid var(--text);outline-offset:-2px;}
@media (prefers-reduced-motion:reduce){.mega-sub,.mega-item.open .mega-sub,.nav-veu,.macc-chev{transition:none;transform:none;}.macc[open] .macc-chev{transform:translateY(2px) rotate(-135deg);}}
/* escuro (tokens já trocam; aqui só os rgba fixos) */
:root[data-theme="dark"] .mega-btn{color:rgba(245,242,234,.8);}
:root[data-theme="dark"] .mega-btn:hover,:root[data-theme="dark"] .mega-item.open .mega-btn,:root[data-theme="dark"] .mega-btn.is-active{color:var(--text);background:rgba(255,255,255,.08);}
:root[data-theme="dark"] .mega-sub{box-shadow:0 30px 60px -30px rgba(0,0,0,.8);}
:root[data-theme="dark"] .nav-veu{background:rgba(13,13,16,.5);}
:root[data-theme="dark"] .mega-col a.is-active,:root[data-theme="dark"] .macc-body a.is-active{color:var(--gold);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mega-btn{color:rgba(245,242,234,.8);}
  :root:not([data-theme="light"]) .mega-btn:hover,:root:not([data-theme="light"]) .mega-item.open .mega-btn,:root:not([data-theme="light"]) .mega-btn.is-active{color:var(--text);background:rgba(255,255,255,.08);}
  :root:not([data-theme="light"]) .mega-sub{box-shadow:0 30px 60px -30px rgba(0,0,0,.8);}
  :root:not([data-theme="light"]) .nav-veu{background:rgba(13,13,16,.5);}
  :root:not([data-theme="light"]) .mega-col a.is-active,:root:not([data-theme="light"]) .macc-body a.is-active{color:var(--gold);}
}
@media print{.mega-sub,.nav-veu{display:none!important;}}
/* os links do painel moram dentro de .nav-links: tira a pílula do .nav-links a (e a cor fixa do escuro.css) */
:root .nav .nav-links .mega-sub a,:root .nav .nav-links .mega-sub a:hover{padding:0;background:none;color:var(--text);white-space:normal;}
:root .nav .nav-links .mega-sub a.is-active{background:none;color:var(--gold-ink);}
:root[data-theme="dark"] .nav .nav-links .mega-sub a.is-active{color:var(--gold);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav .nav-links .mega-sub a.is-active{color:var(--gold);}}
/* Hub de IA (onda-hub 18/10 tarde): o cartão da home que leva à /hub-ia/ */
.hub-card{display:flex;flex-direction:column;gap:22px;padding:28px;border-radius:var(--r-lg,28px);background:linear-gradient(135deg,rgba(215,196,154,.24),rgba(23,96,110,.12)),var(--bg,#fff);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:transform .2s,box-shadow .2s;}
.hub-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(0,0,0,.45);}
.hub-card:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;}
.hub-card-txt{display:flex;flex-direction:column;gap:10px;min-width:0;}
.hub-card-t{font-family:var(--font-display,inherit);font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:600;line-height:1.15;letter-spacing:-.015em;}
.hub-card-d{color:var(--sec);max-width:60ch;line-height:1.55;}
.hub-card-logos{display:flex;flex-wrap:wrap;gap:10px;}
.hub-card-logos img{width:52px;height:52px;padding:11px;border-radius:14px;background:#fff;border:1px solid var(--line);box-sizing:border-box;}
@media (min-width:860px){.hub-card{flex-direction:row;align-items:center;justify-content:space-between;padding:40px 44px;}.hub-card-logos{max-width:200px;justify-content:flex-end;}}
@media (prefers-reduced-motion:reduce){.hub-card{transition:none;}.hub-card:hover{transform:none;}}

/* P163 (LINGUAS-CONTRATO.md): o seletor PT · EN · ES no topo (no celular, no fim do menu ☰) e a faixa do Accept-Language */
.lang-sel{display:none;align-items:center;gap:2px;margin-right:4px;font-size:.75rem;font-weight:600;letter-spacing:.02em;}
@media (min-width:768px){.lang-sel{display:inline-flex;}}
.lang-sel a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 4px;border-radius:8px;color:inherit;opacity:.5;text-decoration:none;}
.lang-sel a:hover{opacity:.85;}
.lang-sel a[aria-current]{opacity:1;background:rgba(127,127,127,.14);}
.lang-sel a:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.menu-panel .lang-sel-menu{display:flex;justify-content:center;gap:8px;padding:14px 0 6px;font-size:.9375rem;}
.menu-panel .lang-sel-menu a{min-width:44px;height:40px;border-bottom:0;}
.axln-dica{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;margin:0;max-width:calc(100% - 32px);}
.axln-dica a{display:block;padding:10px 18px;border-radius:999px;background:rgba(29,29,31,.92);color:#fff;font-size:.875rem;font-weight:500;text-decoration:none;box-shadow:0 6px 24px rgba(0,0,0,.18);}

/* P189b: logotipo oficial do Uber em #uber (preto no claro, branco no escuro; proporção do arquivo) */
.uber-logo{margin:0;line-height:0;}
.uber-logo img{height:32px;width:auto;}
.uber-escuro{display:none;}
:root[data-theme="dark"] .uber-claro{display:none;}
:root[data-theme="dark"] .uber-escuro{display:inline;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .uber-claro{display:none;}
  :root:not([data-theme="light"]) .uber-escuro{display:inline;}
}
.attach i.uber-tile{background:#000;}
.attach i.uber-tile img{width:20px;height:auto;}

/* P194: logotipo oficial do iFood em #ifood (vermelho da marca nos dois temas; proporção do arquivo) */
.marca-logo{margin:0;line-height:0;}
.marca-logo img{height:32px;width:auto;}
.attach i.ifood-tile{background:#ea1d2c;}
.attach i.ifood-tile img{width:20px;height:auto;}

/* P196: as tarefas em laço (#tarefas) — o painel escuro do diferencial, com o brilho dourado do .card-dark */
.laco{border-radius:var(--r);padding:32px 20px;background:radial-gradient(120% 80% at 100% 0,rgba(215,196,154,.12),rgba(215,196,154,0) 60%),#111113;}
@media (min-width:768px){.laco{padding:56px 48px;}}
@media (min-width:1024px){.laco{padding:72px 64px;} .laco .day{column-gap:64px;}}
.laco .lead{color:var(--on-dark-2);}
.laco .phone-screen{color:var(--text);} /* o celular é claro no tema claro: o nome da conversa não herda o branco do painel */
.laco-meta{justify-content:flex-start;}
.laco-sub{margin-bottom:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.625rem);letter-spacing:-.02em;line-height:1.2;color:var(--gold);}
.laco-ex{display:grid;gap:12px;margin:0;padding:0;list-style:none;}
.laco-ex li{display:grid;gap:6px;}
.laco-ex p{margin:0;font-size:1rem;line-height:1.45;color:rgba(255,255,255,.9);}
.laco-tipo{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);}
.laco-gasto{margin-bottom:0;display:flex;gap:12px;font-size:.9375rem;line-height:1.5;color:var(--on-dark-2);}
.laco-gasto::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:9px;box-shadow:0 0 0 3px rgba(215,196,154,.2);}
.laco-dia{align-self:center;margin:6px 0;padding:3px 10px;border-radius:999px;background:rgba(127,127,127,.14);font-size:.6875rem;font-weight:500;color:var(--sec);}
/* P210 F3 (PLANOS-CONTRATO.md §7 item 1): o #planos com o preço, os 30 dias grátis e a chave Mensal | Anual.
   A chave são dois rádios de verdade (Tab entra, as setas trocam, o legend dá o nome ao grupo), sem JS: o #planos:has()
   troca os preços. Navegador sem :has não mostra a chave (fica o mensal). Cor sempre por token (o escuro.css vira junto). */
.pn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.pn-preco{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.plan-featured .pn-preco{border-top-color:var(--line-w);}
.pn-valor{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;}
.pn-num{font-family:var(--font-display);font-weight:600;font-size:clamp(2.125rem,3.2vw,2.625rem);line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
.pn-per{font-size:1rem;font-weight:500;color:var(--sec);}
.pn-eq{margin:6px 0 0;font-size:.9375rem;line-height:1.4;color:var(--sec);}
.plan-featured .pn-per,.plan-featured .pn-eq{color:var(--on-dark-2);}
.pn-gratis{display:inline-flex;align-items:center;gap:8px;height:28px;margin:16px 0 0;padding:0 12px;border-radius:999px;border:1px solid rgba(215,196,154,.55);background:var(--gold-soft);color:var(--gold-ink);font-size:.8125rem;font-weight:600;}
.pn-gratis::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);}
.plan-featured .pn-gratis{border-color:rgba(215,196,154,.5);background:rgba(215,196,154,.12);color:var(--gold);}
.plan .pn-preco + ul{margin-top:24px;}
.pn-cambio{margin-bottom:0;text-align:center;font-size:.8125rem;line-height:1.45;color:var(--sec);}
@media (min-width:1024px){.plans .plan .for{min-height:4.5em;}}   /* os preços na mesma altura nos três cartões (a frase tem até 3 linhas) */

/* ===== home-gatilhos (24/10): herói, "Peça à Fabi" em abas, CTAs de meio, barra fixa do celular, quem volta, novidades ===== */
.hero-micro{margin-bottom:0;}
.hero-foto{margin-bottom:0;font-size:.9375rem;color:var(--sec);}
.hero-foto .ilink{color:var(--text);}
.hero-volta{margin-bottom:0;}
html.voltou .hero-volta[hidden]{display:block;}
html.voltou .nav .btn-entrar{background:var(--text);color:#fff;border-color:transparent;}
html.voltou .nav .btn-entrar:hover{background:#000;}
.cta-meio .btn{flex-shrink:0;}
.pf-tabs-wrap{padding-top:40px;text-align:center;}
.pf-eyebrow{justify-content:center;}
.pf-tabs{display:flex;gap:8px;margin:18px auto 0;padding:4px 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.pf-tabs::-webkit-scrollbar{display:none;}
@media (min-width:1024px){.pf-tabs{flex-wrap:wrap;justify-content:center;overflow:visible;}}
.pf-tab{flex:none;scroll-snap-align:start;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--sec);font:inherit;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.pf-tab:hover{color:var(--text);border-color:rgba(0,0,0,.32);}
.pf-tab[aria-selected="true"]{background:var(--text);color:var(--bg);border-color:var(--text);}
.pf-tab:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px;}
html:not(.js) .pf-tabs-wrap{display:none;}
html.js .pf-pane:not(.is-on){display:none;}
html.js .pf-pane.section{padding-top:48px;}
html.js .pf-pane.section.hairline{border-top:0;}
.pf-cta{padding-bottom:64px;}
@media (min-width:1024px){.pf-cta{padding-bottom:96px;}}
.depo{display:flex;flex-direction:column;gap:14px;margin:0;}
.depo p{font-family:var(--font-display);font-size:1.125rem;line-height:1.45;letter-spacing:-.01em;}
.depo footer{font-size:.875rem;color:var(--sec);}
.cta-fixa{position:fixed;left:0;right:0;bottom:0;z-index:58;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(251,251,253,.86);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s;}
.cta-fixa .btn{width:100%;}
html.cta-on .cta-fixa{transform:none;visibility:visible;transition:transform .3s var(--ease);}
@media (min-width:1024px){.cta-fixa{display:none;}}
@media print{.cta-fixa,.pf-tabs-wrap{display:none!important;}}
@media (prefers-reduced-motion:reduce){.cta-fixa,.pf-tab{transition:none;}}
:root[data-theme="dark"] .cta-fixa{background:rgba(13,13,16,.86);}
:root[data-theme="dark"] .pf-tab:hover{border-color:rgba(255,255,255,.4);}
:root[data-theme="dark"] html.voltou .nav .btn-entrar,:root[data-theme="dark"].voltou .nav .btn-entrar{background:var(--text);color:var(--bg);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cta-fixa{background:rgba(13,13,16,.86);}
  :root:not([data-theme="light"]) .pf-tab:hover{border-color:rgba(255,255,255,.4);}
}

/* aviso de cookies (Google Analytics, LGPD; header.php) */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:560px;margin:0 auto;padding:16px 18px;border-radius:16px;background:var(--bg,#fbfbfd);color:var(--text,#1d1d1f);box-shadow:0 0 0 1px var(--line,rgba(0,0,0,.08)),0 18px 40px -18px rgba(0,0,0,.35);display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.cookies[hidden]{display:none;}
.cookies-txt{flex:1 1 260px;margin:0;font-size:.875rem;line-height:1.45;}
.cookies-bts{display:flex;gap:8px;}
.cookies-bts .btn{padding:10px 16px;font-size:.875rem;}