/* Skala Code — páginas comerciais (squads e planos). Depende de skala.css */

.phero{padding-top:clamp(120px,14vw,168px);padding-bottom:clamp(32px,5vw,60px);text-align:center}
.phero .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.6vw,30px)}
.phero h1{font-family:var(--f-d);font-weight:800;font-size:clamp(2.25rem,6.2vw,5rem);line-height:var(--lh-h1,1.04);letter-spacing:var(--track-d1);max-width:1040px}
.phero h1 .hl{color:var(--accent-text)}
.phero .lead{max-width:740px}
.phero .numbers{width:100%;margin-top:clamp(8px,2vw,24px);text-align:left}
.phero .stat .num{font-size:clamp(1.75rem,3.4vw,2.875rem)}
.pill strong{color:var(--text)}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}
.sec-head.center .lead{max-width:680px}
.ptag{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-text)}
/* comparação CLT x squad */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ccol{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px}
.ccol.good{background:var(--surface2);border-color:var(--accent)}
.ccol h3{font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.2;display:flex;justify-content:space-between;align-items:center;gap:12px}
.badge2{font-family:var(--f-b);font-size:0.75rem;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:999px;background:var(--surface2);color:var(--dim)}
.good .badge2{background:var(--accent);color:#fff}
.csub{color:var(--muted);font-size:1rem}
.citem{display:flex;gap:12px;font-size:1rem;line-height:1.5;color:#C7CEE3}
.citem .ic{flex:0 0 22px;font-weight:800}
.citem.no .ic{color:#FF9B9B}
.citem.yes .ic{color:#8BE7AE}
.citem strong{color:#fff}
.ctotal{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--muted)}
.ctotal .value{font-family:var(--f-d);font-weight:800;font-size:clamp(2.125rem,4vw,3rem);letter-spacing:var(--track-d1);color:#fff}
.good .ctotal .value{color:var(--accent-text)}
/* passos */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.step{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:2px solid var(--line2);position:relative}
.step::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--accent-text);transition:width 1.1s var(--ease) .3s}
.step.in::before{width:100%}
.step-n{width:46px;height:46px;border-radius:999px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:800;font-size:1rem;color:#fff}
.step h3{font-size:1.375rem;line-height:1.2}
.step p{color:var(--muted);font-size:1rem}
/* cards de plano (squads e planos) */
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.pl-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:14px;position:relative;transition:border-color .3s,transform .4s var(--spring),box-shadow .3s}
.pl-card.featured{border-color:var(--accent);background:var(--surface2)}
.pl-card.selected{border-color:var(--accent-text);box-shadow:0 0 0 1px var(--accent-text)}
.pl-card h3{font-size:clamp(1.5rem,2.4vw,1.875rem);line-height:1.15}
.pl-desc{color:var(--muted);font-size:1rem;line-height:1.55}
.pl-check{position:absolute;top:22px;right:22px;width:28px;height:28px;border-radius:999px;background:var(--accent-text);color:#06122B;font-weight:800;display:none;align-items:center;justify-content:center}
.pl-card.selected .pl-check{display:flex}
.pl-price{display:flex;flex-direction:column;gap:2px;padding:6px 0}
.pl-price .from{font-size:0.8125rem;color:var(--dim)}
.pl-price .price{font-family:var(--f-d);font-weight:800;font-size:clamp(2.375rem,4vw,3.125rem);letter-spacing:var(--track-d1);line-height:1.05}
.pl-price .price small{font-family:var(--f-b);font-weight:500;font-size:1rem;letter-spacing:0;color:var(--muted);margin-left:2px}
.pl-feats{display:flex;flex-direction:column;gap:10px;font-size:0.9375rem;line-height:1.45;color:#C7CEE3;margin:4px 0 12px}
.pl-feats li{display:flex;gap:10px}
.pl-feats li::before{content:"✓";flex:0 0 18px;color:var(--accent-text);font-weight:800}
.pl-feats li.off{color:var(--dim)}
.pl-feats li.off::before{content:"✗";color:var(--dim)}
.pl-card .btn{margin-top:auto;width:100%}
.plnote{text-align:center;margin-top:36px;color:var(--muted);font-size:0.9375rem}
.plnote a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
/* IA embutida */
.ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ai-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px}
.ai-card h4{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.875rem;color:var(--accent-text);font-weight:500}
.ai-card h3{font-size:1.375rem;line-height:1.2}
.ai-card p{color:var(--muted);font-size:1rem;line-height:1.6}
/* FAQ */
.faq2{max-width:900px;margin-inline:auto}
.faq2 details{border-top:1px solid var(--line)}
.faq2 details:last-child{border-bottom:1px solid var(--line)}
.faq2 summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--f-d);font-weight:600;font-size:clamp(1.0625rem,1.9vw,1.3125rem);line-height:1.35;letter-spacing:-.015em}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary::after{content:"+";font-size:1.875rem;line-height:1;color:var(--accent-text);transition:transform .22s var(--spring);flex-shrink:0}
.faq2 details[open] summary::after{transform:rotate(45deg)}
.faq2 .ans{padding:0 0 26px;color:var(--muted);max-width:780px;line-height:1.65}
/* planos: alternância, abas, especificações */
.toggle{display:inline-flex;position:relative;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--line2)}
.toggle button{position:relative;z-index:1;padding:12px 22px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:700;font-size:0.9375rem;cursor:pointer;display:flex;align-items:center;gap:10px;transition:color .25s}
.toggle button.active{color:#fff}
.toggle .pillbg{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:var(--accent);transition:transform .25s var(--spring),width .25s var(--spring);z-index:0}
.disc{font-size:0.75rem;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(141,187,255,.18);color:var(--accent-text)}
.toggle button.active .disc{background:rgba(255,255,255,.2);color:#fff}
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,4vw,48px)}
.tabs button{padding:12px 22px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:#C7CEE3;font-weight:600;font-size:0.9375rem;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tabpanel[hidden]{display:none}
.pl-head{text-align:center;margin-bottom:clamp(24px,3vw,40px)}
.pl-head h2{font-size:clamp(1.75rem,3.6vw,2.75rem);margin-bottom:10px}
.pl-head p{color:var(--muted);max-width:640px;margin-inline:auto}
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.spec{background:var(--surface2);border-radius:14px;padding:12px 6px;text-align:center}
.spec b{display:block;font-family:var(--f-d);font-weight:800;font-size:1.125rem;letter-spacing:-.02em}
.spec span{font-size:0.6875rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.compline{font-size:0.8125rem;color:var(--dim);line-height:1.5}
.compline strong{color:var(--muted)}
.hrs{display:inline-flex;align-self:flex-start;padding:7px 14px;border-radius:999px;background:var(--surface2);border:1px solid var(--line2);font-size:0.875rem;font-weight:600;color:var(--accent-text)}
.pblock{display:flex;flex-direction:column;gap:2px;padding:8px 0 4px;border-top:1px solid var(--line)}
.plabel{font-size:0.8125rem;color:var(--dim)}
.price-main{display:flex;align-items:baseline;gap:4px;font-family:var(--f-d);font-weight:800;font-size:clamp(2.125rem,3.6vw,2.75rem);letter-spacing:var(--track-d1);line-height:1.1}
.price-main b{font-weight:800}
.price-main span{font-family:var(--f-b);font-weight:500;font-size:1rem;letter-spacing:0;color:var(--muted)}
.price-old{font-size:0.875rem;color:var(--dim);text-decoration:line-through}
.price-saving{font-size:0.8125rem;color:#8BE7AE;font-weight:700}
.price-total{font-size:0.8125rem;color:var(--muted)}
.anual-only{display:none}
.is-anual .anual-only{display:block}
.pop{font-size:0.75rem;font-weight:700;letter-spacing:.06em;color:var(--accent-text)}
.compbox{margin-top:clamp(40px,6vw,72px);background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3vw,40px)}
.compbox h3{font-size:clamp(1.375rem,2.6vw,1.875rem);margin-bottom:6px}
.compbox .sub2{color:var(--muted);margin-bottom:20px}
.crow{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:0.9375rem;align-items:baseline}
.crow .l{color:#fff;font-weight:600}
.crow .h{color:var(--dim)}
.crow .s{color:var(--accent-text);font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(32px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:200;background:var(--surface2);border:1px solid var(--line2);border-radius:999px;padding:12px 22px;font-size:0.9375rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--spring)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1080px){
  .pl-grid,.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}
@media (max-width:720px){
  .compare,.pl-grid,.ai-grid,.steps{grid-template-columns:minmax(0,1fr)}
  .crow{grid-template-columns:1fr;gap:4px}
  .toggle button{padding:11px 16px}
  .phero .numbers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px;padding:16px 8px}
  .phero .stat,.phero .stat:nth-child(3){border-left:1px solid var(--line);border-top:0;padding:8px 14px}
  .phero .stat:nth-child(odd){border-left:0}
}
@media (prefers-reduced-motion:reduce){.step::before{width:100%}}

/* ---------- hover só em dispositivos com mouse ---------- */
@media (hover:hover) and (pointer:fine){
  .pl-card:hover{border-color:var(--line2);transform:translateY(-6px)}
  .tabs button:hover{border-color:var(--accent-text);color:var(--accent-text)}
}

/* ---------- squads: calculadora de custo e blocos dos modelos ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;align-items:start}
.calc-form{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:600;font-size:1rem}
.field label small{display:block;font-weight:400;font-size:.8125rem;color:var(--dim);margin-top:2px}
.field input{width:100%;padding:14px 18px;border-radius:14px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);font:inherit;font-size:1rem;font-variant-numeric:tabular-nums;transition:border-color .2s var(--spring)}
.field input:focus{outline:none;border-color:var(--accent-text)}
.hint{font-size:.8125rem;color:var(--dim);line-height:1.5}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:#C7CEE3;font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .2s var(--spring),border-color .2s var(--spring),color .2s var(--spring)}
.presets button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.calc-reset{align-self:flex-start;background:none;border:0;color:var(--accent-text);font-size:.875rem;font-weight:600;cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.calc-out{background:var(--surface2);border:1px solid var(--accent);border-radius:28px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.calc-out h3{font-size:1.375rem;line-height:1.2}
.lines{display:flex;flex-direction:column}
.ln{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.ln dt{color:var(--muted)}
.ln dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:6px}
.tot span{color:var(--muted)}
.tot b{font-family:var(--f-d);font-weight:800;font-size:clamp(2rem,3.4vw,2.75rem);letter-spacing:var(--track-d1);color:var(--accent-text);font-variant-numeric:tabular-nums}
.tot.sub b{font-size:1.5rem;color:#fff}
.calc-out .note{font-size:.9375rem;color:var(--muted);line-height:1.5}
.calc-out .btn{margin-top:6px;width:100%}
.calc-out .micro{font-size:.8125rem;color:var(--dim);line-height:1.5}
.pl-block{display:flex;flex-direction:column;gap:8px}
.pl-block h4{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pl-block>p{font-size:.9375rem;color:#C7CEE3;line-height:1.5}
@media (max-width:1080px){.calc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.ln{flex-direction:column;gap:2px}.ln dd{white-space:normal}}