/* ==========================================================
   NETWAVE — Páginas
   Camada 3 de 3. Estilos específicos de página (hero,
   console, painéis, produto, pricing, legal).
   ========================================================== */

/* ==========================================================
   HERO
   ========================================================== */

.hero { padding-block: clamp(4rem, 8vw, 7rem) var(--section-y); }

.hero-grid { align-items: center; gap: var(--s-7); }

.hero-title {
  margin-top: var(--s-5);
  font-size: var(--t-5xl);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  line-height: 1.04;
}

.hero-title .accent { color: var(--brand); }

.hero .lead { margin-top: var(--s-5); }

/* Console de status no hero */
.console {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
  overflow: hidden;
}

.console-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.console-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
  flex-shrink: 0;
}

.console-title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-secondary);
}

.console-meta {
  margin-left: auto;
  font-size: var(--t-2xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.console-body { padding: var(--s-2) var(--s-4) var(--s-4); }

.console-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.console-row:last-of-type { border-bottom: 0; }
.console-svc { font-size: var(--t-sm); font-weight: 500; }

.console-foot {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* ==========================================================
   PAINEL DIVIDIDO
   ========================================================== */

.split-panel {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-8);
  align-items: start;
  padding: var(--s-7);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(100% 120% at 100% 0%, rgba(79, 170, 255, 0.07) 0%, transparent 60%),
    var(--surface);
}

.split-aside {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.metric {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--surface-inset);
}

.metric-value {
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: 1;
}

.metric-label {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .split-panel { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-6) var(--s-5); }
}

/* ==========================================================
   PAGE HEAD
   ========================================================== */

.page-head {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--s-7);
  border-bottom: 1px solid var(--border);
}

.page-head .page-title {
  margin-top: var(--s-4);
  font-size: var(--t-4xl);
}

.page-head .page-desc {
  margin-top: var(--s-4);
  max-width: 66ch;
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.page-head .btn-row { margin-top: var(--s-6); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

.breadcrumb a { color: var(--text-muted); transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--text-secondary); }
.breadcrumb span { color: var(--text-faint); }

/* ==========================================================
   PRODUTO (página dedicada)
   ========================================================== */

.prod-head { padding-block: clamp(3rem, 6vw, 4.5rem) var(--s-7); }

.prod-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.prod-title { font-size: var(--t-4xl); }

.prod-lede {
  margin-top: var(--s-5);
  max-width: 62ch;
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.prod-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: var(--s-7);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.prod-fact { padding: var(--s-5); background: var(--surface); }

.prod-fact dt {
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

.prod-fact dd { font-size: var(--t-sm); color: var(--text); }

.prod-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-8); align-items: start; }

.prod-block + .prod-block { margin-top: var(--s-7); }
.prod-block h2 { font-size: var(--t-2xl); margin-bottom: var(--s-4); }
.prod-block p { color: var(--text-secondary); line-height: var(--lh-relaxed); }
.prod-block p + p { margin-top: var(--s-4); }

.prod-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.prod-aside h3 { font-size: var(--t-lg); }

@media (max-width: 900px) {
  .prod-body { grid-template-columns: 1fr; gap: var(--s-6); }
  .prod-aside { position: static; }
}

/* Índice de produtos */
.prod-index { display: grid; gap: 0; border-top: 1px solid var(--border); }

.prod-index-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
  transition: padding-left var(--t-base) var(--ease);
}

.prod-index-item:hover { padding-left: var(--s-3); }

.prod-index-name { font-size: var(--t-xl); font-weight: 600; letter-spacing: var(--tr-snug); }
.prod-index-tag { font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--text-muted); }
.prod-index-desc { margin-top: var(--s-2); max-width: 58ch; font-size: var(--t-sm); color: var(--text-secondary); }
.prod-index-arrow { flex-shrink: 0; color: var(--text-faint); }
.prod-index-item:hover .prod-index-arrow { color: var(--brand); }
.prod-index-arrow svg { width: 18px; height: 18px; }

/* ==========================================================
   VITRINE / VITALIS
   ========================================================== */

.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }

.vitalis-band {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(79, 170, 255, 0.13) 0%, transparent 60%),
    var(--surface);
}

.vitalis-band h2 { font-size: var(--t-3xl); max-width: 20ch; }
.vitalis-band .lead { margin-top: var(--s-4); max-width: 58ch; }

/* ==========================================================
   PRICING
   ========================================================== */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
  align-items: start;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  height: 100%;
}

.price-card.is-featured {
  border-color: var(--border-accent);
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--surface) 40%);
}

.price-card header { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.price-card h3 { font-size: var(--t-lg); }

.price-value {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-block: var(--s-4);
}

.price-amount {
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: 1;
}

.price-period { font-size: var(--t-sm); color: var(--text-muted); }

.price-note { font-size: var(--t-xs); color: var(--text-muted); margin-top: calc(var(--s-4) * -1 + var(--s-2)); }

.price-card .feat-list { margin-block: var(--s-5); }
.price-card .btn { margin-top: auto; }

/* ==========================================================
   LEGAL
   ========================================================== */

.legal { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-8); align-items: start; }

.legal-toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.legal-toc h2 { font-size: var(--t-2xs); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-4); }
.legal-toc li + li { margin-top: var(--s-3); }
.legal-toc a { font-size: var(--t-sm); color: var(--text-secondary); }
.legal-toc a:hover { color: var(--text); }

.legal-body section + section { margin-top: var(--s-7); }
.legal-body h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.legal-body h3 { font-size: var(--t-lg); margin-block: var(--s-5) var(--s-2); }
.legal-body p { color: var(--text-secondary); line-height: var(--lh-relaxed); }
.legal-body p + p { margin-top: var(--s-3); }
.legal-body ul { display: grid; gap: var(--s-2); margin-block: var(--s-3); }
.legal-body ul li { position: relative; padding-left: var(--s-5); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.legal-body ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); }
.legal-body ol { counter-reset: n; display: grid; gap: var(--s-2); margin-block: var(--s-3); }
.legal-body ol li { position: relative; padding-left: var(--s-6); color: var(--text-secondary); line-height: var(--lh-relaxed); counter-increment: n; }
.legal-body ol li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--text-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: var(--s-6); }
  .legal-toc { position: static; padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
}

/* ==========================================================
   STATUS
   ========================================================== */

.status-summary { margin-bottom: var(--s-5); }
.status-updated { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--text-muted); }

/* ==========================================================
   AUTH
   ========================================================== */

/* O shell centraliza verticalmente sem encolher o .container:
   `place-items: center` num grid faz o container de 1200px
   encolher até o conteúdo, e o card fica encostado à esquerda. */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - 200px);
  padding-block: var(--s-8);
}

.auth-shell > .container { width: 100%; }

.auth-shell .auth-card { margin-inline: auto; }

.auth-card {
  width: min(420px, 100%);
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.auth-card h1 { font-size: var(--t-2xl); }
.auth-sub { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--text-muted); }
.auth-card .form-grid { margin-top: var(--s-6); }

.auth-sep {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block: var(--s-5);
  font-size: var(--t-xs);
  color: var(--text-faint);
}

.auth-sep::before,
.auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth-foot { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--text-muted); text-align: center; }
.auth-foot a { color: var(--brand); }
.auth-foot a:hover { text-decoration: underline; }

/* ==========================================================
   404
   ========================================================== */

.err-page {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
}

.err-code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-strong);
}

/* ==========================================================
   CONTA — lista de benefícios
   ========================================================== */

.ent-list { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }

.ent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-inset);
}

.ent-name { font-size: var(--t-sm); font-weight: 500; }

/* Abas da página de entrada */
.auth-card [data-pane] { margin-top: var(--s-2); }
.auth-card [data-pane][hidden] { display: none; }
.auth-card .tabs { margin-top: var(--s-6); }
.auth-card .tab[aria-selected="true"] { color: var(--text); }