/* ============================================================================
   SITE.CSS — layout compartilhado das páginas públicas/de conta (landing,
   dashboard, perfil, equipamentos, fresas). Usa as mesmas variáveis de cor de
   css/style.css (carregado antes deste); aqui só ficam classes de layout que
   o editor não precisa (o editor usa .app com altura 100vh e overflow:hidden,
   essas páginas rolam normalmente).
   ============================================================================ */
/* fundo de marca (img/brand/hero-bg.jpg) no body inteiro, não só atrás do hero
   — fixed pra não repetir/cortar durante o scroll das páginas mais longas
   (planos, galeria etc). Só no tema escuro, mesmo motivo do .hero antigo: a
   imagem é escura, sem contraste nenhum atrás do texto escuro do tema claro. */
body.site{
  overflow:auto; min-height:100vh; display:flex; flex-direction:column;
  background-image:linear-gradient(rgba(10,15,28,.65), rgba(10,15,28,.65)), url('../img/brand/hero-bg.jpg');
  background-size:cover; background-position:center; background-attachment:fixed;
}
:root[data-theme="light"] body.site{ background-image:none; }
/* conteúdo de toda página pública/de conta centralizado verticalmente no espaço
   entre topbar e footer. Só tem efeito visível quando o conteúdo é mais baixo que
   o espaço disponível (telas grandes/pouco conteúdo) — quando o conteúdo já
   preenche ou passa da altura da tela, o comportamento é o mesmo de um fluxo
   normal (scroll do topo).
   <main> "simples" (landing/features/gallery/planos/login — só 1-2 filhos, sem
   grid auto-fit direto) vira container flex com justify-content:center. */
/* overflow:visible desfaz o main{overflow:hidden} base (style.css, pro editor) —
   sem isso, conteúdo mais alto que a tela (ex: planos com os botões do Stripe)
   ficava cortado em silêncio em vez de gerar barra de rolagem no body.site. */
body.site > main:not(.site-main){ flex:1; display:flex; flex-direction:column; justify-content:center; overflow:visible; }

/* workspace.html (editor embutido via iframe, ver js/workspace.js) — a página em
   si não deve rolar, quem rola/gerencia o próprio layout é o editor lá dentro. */
body.site:has(.workspace-frame){ overflow:hidden; height:100vh; }
.workspace-frame{ flex:1; width:100%; min-height:0; border:0; display:block; }
/* main.site-main (dashboard/perfil/equipamentos/fresas) tem conteúdo mais
   complexo (grid auto-fit dos .nav-cards) — em vez de virar container flex
   (o que transformaria os filhos em flex items e deixaria o cálculo de nº de
   colunas do CSS Grid instável entre navegadores), ele mesmo fica como flex
   item com margem automática nos 4 lados: centraliza na vertical (dentro do
   body.site) e na horizontal (dentro do próprio max-width), mantendo os
   filhos em fluxo de bloco normal — 100% previsível pro grid interno. */
/* css/style.css tem uma regra base main{flex:1;display:flex;overflow:hidden;
   min-height:0} pro <main> do editor (layout toolbar/canvas/sidebar em linha)
   — como esse arquivo carrega em toda página, main.site-main precisa desfazer
   TUDO isso explicitamente, senão herda um flex-row com overflow escondido. */
main.site-main{ flex:none; display:block; overflow:visible; min-height:auto; margin:auto; }

.site-topbar{
  display:flex; align-items:center; gap:20px; padding:12px 24px; background:var(--topbar-bg);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40;
}
.site-topbar .brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit}
.site-topbar .brand .logo{
  width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:7px; overflow:hidden;
}
.site-topbar .brand .logo img{ width:100%; height:100%; display:block; object-fit:cover; }
.site-topbar .brand b{font-size:14px; letter-spacing:.2px}
.site-nav{display:flex; align-items:center; gap:4px; margin-left:8px}
.site-nav a{font-size:12px; color:var(--text-dim); text-decoration:none; padding:6px 10px; border-radius:6px; cursor:pointer}
.site-nav a:hover{color:var(--text); background:var(--panel2)}
.site-nav a.active{color:var(--text); background:var(--panel2)}
.site-topbar .spacer{flex:1}

/* âncoras que precisam parecer botão (ex: CTA que navega pra outra página, tipo
   os cards de Planos linkando pro cadastro em index.html#auth) — mesmo visual
   de button.primary/button.ghost (css/style.css), só que pra <a>. */
a.primary, a.ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:6px; padding:6px 10px; border:1px solid var(--border); color:var(--text);
  background:var(--panel2); cursor:pointer; font-size:12px; text-decoration:none; white-space:nowrap;
}
a.primary:hover, a.ghost:hover{border-color:var(--accent)}
a.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); font-weight:600}
a.primary:hover{filter:brightness(1.08)}
a.ghost{background:transparent}

/* width:100% é necessário além do max-width+margin:auto: como .site-main (e o
   .hero abaixo) agora são filhos diretos de um <main> flex (pra centralização
   vertical acima), margin:auto no eixo cruzado desativa o stretch padrão do
   flexbox e o elemento encolhe pro tamanho do conteúdo em vez de ocupar a
   largura disponível — width:100% (limitado pelo max-width) evita isso. */
.site-main{width:100%; max-width:1080px; margin:0 auto; padding:0 24px}

/* HERO — editorial: rótulo pequeno + título serifado grande + bloco de
   estatística ao lado da chamada, sem cards/painéis (a paleta continua a
   mesma de sempre, só o formato muda pra algo mais "página de marca" e
   menos "app"). O fundo com a imagem de marca agora é do body.site inteiro
   (acima), não só desta faixa — .hero só limita a largura do conteúdo. */
.hero{ width:100%; }
.hero-inner{
  max-width:960px; margin:0 auto; padding:88px 24px 72px;
  display:grid; grid-template-columns:1fr auto; gap:48px; align-items:end;
}
.hero-main{grid-column:1; text-align:left}
.hero-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.hero h1{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:52px; line-height:1.08;
  margin:0 0 20px; letter-spacing:-.5px;
}
.hero h1 span{color:var(--accent)}
.hero-main > p{font-size:15.5px; color:var(--text-dim); margin:0 0 28px; line-height:1.65; max-width:480px}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}
.hero-cta button, .hero-cta a{padding:12px 22px; font-size:13px; border-radius:7px}

.hero-stat{grid-column:2; text-align:right; padding-bottom:6px; white-space:nowrap}
.hero-stat .num{
  display:block; font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:44px;
  color:var(--text); line-height:1;
}
.hero-stat .cap{
  display:block; font-size:11.5px; color:var(--text-dim); margin-top:8px; max-width:160px;
  margin-left:auto; line-height:1.5; white-space:normal;
}

/* faixa de tags — como uma linha de "materiais/recursos" corrida, sem cards */
.tag-strip{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:18px 24px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0;
}
.tag-strip span{
  font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--text-dim);
}
.tag-strip span:not(:last-child)::after{ content:'·'; margin:0 14px; color:var(--border); }

/* SECTIONS -------------------------------------------------------------- */
.site-section{padding:72px 0}
.site-section h2{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:30px; margin:0 0 10px; text-align:center;
}
.site-section .section-sub{font-size:13.5px; color:var(--text-dim); text-align:center; margin:0 0 40px}

/* GALERIA (placeholder — sem fotos reais ainda) — cards achatados, sem
   borda/sombra, a textura + legenda fazem o trabalho visual. --------------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:28px 20px;
}
.gallery-card{ display:flex; flex-direction:column; gap:12px; }
.gallery-card .swatch{
  aspect-ratio:4/3; border-radius:4px; position:relative; overflow:hidden;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, var(--wood-a, #8a5a34), var(--wood-b, #c68a4e));
}
.gallery-card:nth-child(1) .swatch{ --wood-a:#6b4226; --wood-b:#a9723f; }
.gallery-card:nth-child(2) .swatch{ --wood-a:#5c3a21; --wood-b:#8a5a34; }
.gallery-card:nth-child(3) .swatch{ --wood-a:#7a4a24; --wood-b:#c08a4e; }
.gallery-card:nth-child(4) .swatch{ --wood-a:#4a3018; --wood-b:#8a5a34; }
.gallery-card .placeholder-tag{
  position:absolute; top:10px; right:10px; font-size:9px; font-weight:600; letter-spacing:.5px;
  background:rgba(0,0,0,.45); color:#fff; padding:3px 7px; border-radius:20px;
}
.gallery-card .caption{font-size:12.5px; color:var(--text-dim); line-height:1.5; padding:0 2px}

/* COMO FUNCIONA (ex-features) — lista numerada editorial, sem cards ------- */
.features-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:32px 40px; max-width:820px; margin:0 auto;
}
.feature-card{ display:flex; gap:16px; }
.feature-card .icon{
  flex-shrink:0; font-family:'Fraunces', Georgia, serif; font-size:20px; font-weight:600; color:var(--accent);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.feature-card h3{font-size:14px; margin:2px 0 6px}
.feature-card p{font-size:12.5px; color:var(--text-dim); margin:0; line-height:1.6}

/* PLANOS — comparação dos níveis de conta reais (trial/básico/avançado); sem
   preço (não existe fluxo de cobrança ainda, upgrade é manual) — só o que cada
   nível libera, com um CTA pra criar conta. ------------------------------- */
.plans-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; max-width:900px; margin:0 auto;
}
.plan-card{
  border:1px solid var(--border); border-radius:10px; padding:22px; display:flex; flex-direction:column; gap:14px;
}
.plan-card.featured{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan-card .plan-tag{ font-size:10.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--accent) }
.plan-card h3{ margin:0; font-size:17px }
.beta-badge{
  display:inline-block; vertical-align:middle; font-size:9px; font-weight:700; letter-spacing:.05em;
  color:var(--accent-contrast); background:var(--accent); padding:2px 6px; border-radius:10px;
}
.plan-card .plan-sub{ font-size:12px; color:var(--text-dim); margin:0 }
.plan-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:12.5px; color:var(--text); flex:1 }
.plan-card ul li{ padding-left:18px; position:relative }
.plan-card ul li::before{ content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700 }
.plan-card button{ width:100%; justify-content:center }
.plan-checkout{ display:flex; flex-direction:column; gap:8px }
.plan-checkout .hint{ margin:0; text-align:center }
.plan-checkout-buttons{ display:flex; flex-direction:column; gap:4px }
.plan-checkout-option{ display:flex; flex-direction:column; gap:2px; align-items:center }

/* formulário de cartão da assinatura mensal (Mercado Pago) — mesmo padrão
   visual dos outros modais do app (.modal-backdrop/.modal em style.css). */
.mp-card-form{ display:flex; flex-direction:column; gap:4px; padding:0 16px 16px }
.mp-card-form label{ font-size:11.5px; color:var(--text-dim); margin-top:8px }
.mp-card-form input{ width:100%; padding:8px 10px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:13px }
.mp-card-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.mp-card-form .modal-footer{ padding:16px 0 0; border-top:none; margin:0 }
/* o <stripe-buy-button> é um iframe isolado (segurança/PCI) — não dá pra
   estilizar o card por dentro. zoom encolhe tanto a exibição quanto o espaço
   ocupado (ao contrário de transform:scale, que só encolhe visualmente e
   deixaria um vão em branco); opacity deixa o card branco padrão do Stripe
   mais translúcido, se misturando com o fundo da página. zoom não tem suporte
   no Firefox antigo — nesse caso o botão só aparece no tamanho normal, sem
   quebrar nada. */
.plan-checkout-option stripe-buy-button{ zoom:0.8; opacity:.92; display:block }

/* AUTH CARD (login/registro em página, não dropdown) — mais discreto, sem
   sombra pesada. ----------------------------------------------------------- */
.auth-card{
  max-width:360px; margin:0 auto; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:26px;
}
.auth-card h4{margin:0 0 3px; font-size:15px}
.auth-card .sub{font-size:11.5px; color:var(--text-dim); margin-bottom:16px}
.auth-card label{display:block; font-size:10.5px; color:var(--text-dim); margin-bottom:4px; margin-top:10px}
.auth-card input{
  width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:9px 10px; font-size:12.5px;
}
.auth-card .account-submit{width:100%; justify-content:center; margin-top:16px}
.auth-card .account-alt{font-size:11.5px; color:var(--text-dim); text-align:center; margin-top:12px}
.auth-card .account-alt a{color:var(--accent2); text-decoration:none; cursor:pointer}

/* FOOTER -------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--border); padding:20px 24px; text-align:center;
  font-size:11.5px; color:var(--text-dim);
}
.site-footer .footer-contact{margin-top:4px}
.site-footer a{color:var(--accent2); text-decoration:none}
.site-footer a:hover{text-decoration:underline}

@media (max-width:760px){
  .hero-inner{grid-template-columns:1fr; gap:28px; padding:56px 20px 48px;}
  .hero-main{text-align:center}
  .hero-main > p{margin-left:auto; margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-stat{grid-column:1; text-align:center}
  .hero-stat .cap{margin-left:auto; margin-right:auto}
  .hero h1{font-size:36px}
  .site-nav{display:none}
  .features-grid{grid-template-columns:1fr}
  .tag-strip span:not(:last-child)::after{margin:0 8px}
}

/* ============================================================================
   PÁGINAS DE CONTA (dashboard, perfil, equipamentos, fresas) — logadas, gate
   de sessão igual ao editor (#authGateOverlay já vem de style.css).
   ============================================================================ */
.acct-topbar-user{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim)}
.acct-topbar-user .account-avatar{
  width:22px; height:22px; border-radius:50%; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600;
}

.page-header{padding:40px 0 28px; border-bottom:1px solid var(--border)}
.page-header h1{font-size:24px; margin:0 0 8px; letter-spacing:-.3px}
.page-header .sub{font-size:12.5px; color:var(--text-dim); margin:0}
/* linha de nível de acesso (dashboard) vira um badge — as outras páginas de
   conta usam .page-header .sub pra frase descritiva normal, então isso é
   escopado só ao id, não à classe .sub compartilhada. */
#dashRoleLine{
  display:inline-flex; align-items:center; gap:6px; margin:10px 0 0;
  background:var(--accent-dim); color:var(--accent); border:1px solid var(--border);
  padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600;
}

.dash-section-title{font-size:13px; font-weight:600; margin:0 0 14px}

.nav-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; margin:32px 0 44px}
.nav-card{
  display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit;
  border:1px solid var(--border); background:var(--panel); border-radius:12px; padding:20px;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.nav-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 24px var(--shadow)}
.nav-card .icon{
  width:38px; height:38px; border-radius:9px; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.nav-card b{font-size:14px; font-weight:600}
.nav-card span{font-size:11.5px; color:var(--text-dim); line-height:1.5}

.recent-list{display:flex; flex-direction:column; gap:8px; margin-bottom:48px}
.recent-item{
  display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--border);
  background:var(--panel); border-radius:9px; text-decoration:none; color:inherit; font-size:12.5px;
  transition:border-color .15s;
}
.recent-item:hover{border-color:var(--accent)}
.recent-item .name{flex:1; font-weight:600}
.recent-item .date{color:var(--text-dim); font-size:11px; font-family:'JetBrains Mono',monospace}
.recent-empty{
  font-size:12.5px; color:var(--text-dim); padding:32px 16px; text-align:center;
  border:1px dashed var(--border); border-radius:10px; background:var(--panel);
}

/* CRUD genérico (equipamentos/fresas): lista + formulário no mesmo padrão de
   .modal usado no editor, mas em página cheia em vez de modal. */
.crud-layout{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; margin-bottom:48px}
@media (max-width:820px){ .crud-layout{grid-template-columns:1fr} }
.crud-list{display:flex; flex-direction:column; gap:8px}
.crud-item{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border);
  background:var(--panel); border-radius:8px; font-size:12.5px;
}
.crud-item .name{flex:1}
.crud-item .name b{display:block; font-size:12.5px}
.crud-item .name span{display:block; font-size:11px; color:var(--text-dim); margin-top:2px}
.crud-item .row-actions{display:flex; gap:4px}
.crud-empty{font-size:12.5px; color:var(--text-dim); padding:16px 0}
.crud-form{
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px;
  position:sticky; top:80px;
}
.crud-form h4{margin:0 0 14px; font-size:13.5px}
.crud-form label{display:block; font-size:10.5px; color:var(--text-dim); margin-bottom:4px; margin-top:10px}
.crud-form input, .crud-form select, .crud-form textarea{
  width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:8px 10px; font-size:12.5px; font-family:inherit; resize:vertical;
}
.crud-form .form-actions{display:flex; gap:8px; margin-top:16px}
.crud-form .form-actions button{flex:1; justify-content:center}
/* .crud-form label{display:block} (acima) empata em especificidade com
   .checkbox-row{display:flex} (style.css) e vence por vir depois — sem isso
   o checkbox e o texto ficam empilhados em vez de lado a lado. */
.crud-form label.checkbox-row{display:flex; align-items:center}