/* ============================================================
   MAESTRELLO TECH — Design System · components.css
   v1.0.0 · 2026-09-15 — componentes copiados do tech.maestrello.com.br
   e adaptados aos tokens de papel (funcionam nos dois temas).
   Requer: tokens.css antes.
   ============================================================ */

/* ---------- header (vidro, sticky) ---------- */
.app-header{position:sticky;top:0;z-index:var(--z-header);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:var(--header-bg);border-bottom:1px solid var(--line)}
.app-header .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px;padding-top:8px;padding-bottom:8px}
/* ATENÇÃO: .nav costuma dividir o elemento com .wrap — nunca use "padding" shorthand aqui, só top/bottom */
.nav-links{display:flex;align-items:center;gap:32px}
.nav-link{position:relative;font-size:14.5px;color:var(--ink-muted);font-weight:600;transition:color .2s}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--sapphire));box-shadow:var(--glow-gold);
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--accent-strong)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- atmosfera de fundo (opcional; só em telas "hero"/login) ---------- */
.bg-atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--ground)}
.bg-atmos .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.bg-atmos .g1{width:640px;height:640px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(124,40,65,.55),transparent 70%)}
.bg-atmos .g2{width:520px;height:520px;top:40%;left:-160px;background:radial-gradient(circle,rgba(75,123,255,.28),transparent 70%)}
.bg-atmos .g3{width:560px;height:560px;bottom:-180px;right:8%;background:radial-gradient(circle,rgba(184,134,11,.18),transparent 70%)}
.bg-atmos .grid{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:62px 62px;mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 78%)}

/* ---------- tipografia utilitária ---------- */
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.lead{font-size:19px;color:var(--ink-muted);max-width:35em}
.muted{color:var(--ink-faint)}
.mono{font-family:var(--font-mono)}
.section-head{max-width:740px;margin:0 auto 50px;text-align:center}
.section-head p{margin-top:16px;font-size:18px}

/* ---------- botões (sempre pill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:16px;
  padding:15px 30px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;line-height:1;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;text-decoration:none;white-space:nowrap}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none !important}
.btn-primary{color:var(--btn-primary-ink);background:var(--btn-primary-bg);box-shadow:var(--btn-primary-shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--btn-primary-shadow-hover)}
.btn-ghost{color:var(--ink);background:var(--glass);border-color:var(--line-strong);font-weight:600}
.btn-ghost:hover{background:var(--glass-hover);border-color:var(--accent)}
.btn-tech{color:var(--ink);background:color-mix(in srgb,var(--sapphire) 14%,transparent);border-color:color-mix(in srgb,var(--sapphire) 45%,transparent)}
.btn-tech:hover{background:color-mix(in srgb,var(--sapphire) 26%,transparent)}
.btn-whatsapp{color:#fff;background:var(--whatsapp)}
.btn-whatsapp:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-danger{color:#fff;background:var(--risk)}
.btn--sm{font-size:14.5px;padding:11px 22px}
.btn--xs{font-size:13px;padding:8px 16px}
.btn--block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- badge / eyebrow em pílula ---------- */
.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-strong);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:var(--radius-pill);padding:7px 15px}
.badge svg{width:14px;height:14px}

/* ---------- status (semânticos) ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 13px;border-radius:var(--radius-pill);border:1px solid;color:var(--pill,var(--ink));
  background:color-mix(in srgb,var(--pill,var(--ink)) 12%,transparent);border-color:color-mix(in srgb,var(--pill,var(--ink)) 40%,transparent)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.pill--ok{--pill:var(--ok)}
.pill--warn{--pill:var(--warn)}
.pill--risk{--pill:var(--risk)}
.pill--tech{--pill:var(--sapphire-soft)}
.pill--gold{--pill:var(--accent)}
.pill--muted{--pill:var(--ink-faint)}
.pill--muted::before{box-shadow:none}

/* ---------- chips (check-list) e tags ---------- */
.chip{display:flex;align-items:center;gap:12px;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:11px 18px;font-size:14.5px;color:var(--ink);max-width:max-content;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--line-strong);background:var(--glass-hover)}
.chk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--sapphire) 32%,transparent),color-mix(in srgb,var(--sapphire) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--sapphire) 50%,transparent)}
.chk svg{width:12px;height:12px;stroke:var(--sapphire-soft);fill:none;stroke-width:2.2}
.tag{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);border:1px solid var(--line-strong);border-radius:20px;padding:6px 13px;background:var(--glass)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;position:relative;overflow:hidden}
.card--accent::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-accent,var(--accent))}
.card--lift{transition:transform .25s,border-color .25s,box-shadow .25s}
.card--lift:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.card .idx{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);letter-spacing:.15em}
.card h4{margin:10px 0 8px}
.card p{font-size:14.5px;line-height:1.55}
.card .who{margin-top:14px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--card-accent,var(--accent))}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.panel > h3,.panel-title{font-size:15px;font-family:var(--font-mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.panel--tech{border-color:color-mix(in srgb,var(--sapphire) 40%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sapphire) 12%,transparent),0 18px 40px -26px color-mix(in srgb,var(--sapphire) 50%,transparent)}
.panel--brand{background:radial-gradient(560px 280px at 92% 6%,color-mix(in srgb,var(--sapphire) 26%,transparent),transparent 70%),
  linear-gradient(135deg,color-mix(in srgb,var(--marsala) 58%,transparent),var(--surface-2));border-color:var(--line-strong);
  box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.06)}

/* ---------- tile (integrações / ícones 3D) ---------- */
.tile{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-strong);border-radius:16px;padding:22px 12px;text-align:center;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:13px;
  box-shadow:var(--shadow-tile);transition:border-color .2s,transform .2s,box-shadow .2s}
.tile:hover{border-color:var(--accent);transform:translateY(-5px)}
.tile .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 60%,rgba(0,0,0,.16));border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.85),inset 0 1.5px 1px rgba(255,255,255,.22),inset 0 -4px 9px rgba(0,0,0,.4)}
.tile .ic svg,.tile .ic img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
.icon-plate{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--marsala) 16%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.icon-plate svg{width:24px;height:24px;stroke:var(--accent-strong);fill:none;stroke-width:1.7}

/* ---------- formulários ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field > label,.label{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--ink)}
.hint{font-size:12.5px;color:var(--ink-faint)}
.input,.select,.textarea{width:100%;font-family:var(--font-body);font-size:15.5px;color:var(--ink);background:var(--glass);
  border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint)}
.input:hover,.select:hover,.textarea:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line-strong))}
.input:focus,.select:focus,.textarea:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent);background:var(--glass-hover)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--risk)}
.textarea{min-height:110px;resize:vertical}
.select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.check{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:5px;border:1px solid var(--line-strong);background:var(--glass);display:grid;place-items:center;margin:0}
.check input:checked{background:var(--sapphire);border-color:var(--sapphire)}
.check input:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.switch{position:relative;width:42px;height:24px;border-radius:var(--radius-pill);background:var(--line-strong);cursor:pointer;border:none;padding:0;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-checked="true"]{background:var(--sapphire)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}

/* ---------- tabela ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-strong);background:var(--ground-2);white-space:nowrap}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--glass)}
.table .num{font-variant-numeric:tabular-nums;text-align:right;font-family:var(--font-mono);font-size:13.5px}

/* ---------- utilidades ---------- */
.divider{height:1px;background:var(--line);border:none;margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.grid-4{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.btn{font-size:15px;padding:13px 24px}}

/* ---------- menu mobile (hambúrguer) ----------
   Markup no header, nesta ordem: .brand-lk · button.nav-toggle · nav.nav-links · a.nav-cta
   JS (3 linhas):
     document.querySelector('.nav-toggle').addEventListener('click',function(){
       var h=this.closest('.app-header'),o=h.classList.toggle('menu-open');this.setAttribute('aria-expanded',o)});
   ------------------------------------------------ */
.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:var(--glass);color:var(--ink);cursor:pointer;place-items:center;padding:0}
.nav-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.nav-toggle .ic-close{display:none}
.menu-open .nav-toggle .ic-open{display:none}
.menu-open .nav-toggle .ic-close{display:block}
@media (max-width:620px){
  .app-header .nav{flex-wrap:wrap;gap:12px}
  .nav-toggle{display:grid;margin-left:auto}
  .nav-links,.nav-cta{display:none;width:100%}
  .app-header.menu-open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 2px;border-top:1px solid var(--line)}
  .app-header.menu-open .nav-links .nav-link{padding:13px 4px;border-bottom:1px solid var(--line);font-size:15.5px}
  .app-header.menu-open .nav-links .nav-link::after{display:none}
  .app-header.menu-open .nav-cta{display:inline-flex;justify-content:center;margin:8px 0 6px}
}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:var(--z-float);width:58px;height:58px;border-radius:50%;background:var(--whatsapp);
  display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);color:#fff}
.wa-float svg{width:30px;height:30px}