/* ============================================================================
   material-gratuito.css — pagina "Nossos Entregaveis" (+ formulario de material).
   Migrada para o design-system por-secao (tokens --c-*). Os componentes
   compartilhados (card-grid, t-card, chip, section-head, eyebrow, h1/h2/lead)
   vem do base.css; aqui ficam so' os blocos unicos desta pagina e ajustes
   theme-aware para que tudo leia corretamente tanto em .sec-dark quanto
   em .sec-light. Carrega so' nesta pagina.
   ============================================================================ */

/* ---------- HERO (sempre escuro) ---------- */
.mg-hero .h1{ margin:18px 0 0; max-width:22ch; }
.mg-hero .lead{ margin:20px 0 0; }
.mg-hero .stats{ display:flex; gap:clamp(24px,4vw,40px); margin-top:36px; flex-wrap:wrap; }
.mg-hero .stat-item .big{ display:block; font-size:clamp(2rem,3.5vw,2.6rem); font-weight:900; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mg-hero .stat-item .label{ display:block; margin-top:8px; font-size:.72rem; color:var(--c-muted);
  text-transform:uppercase; letter-spacing:.16em; line-height:1.5; }

/* ---------- CARDS DE FILOSOFIA (t-card + icone + citacao) ---------- */
.t-card .t-ico{ margin-bottom:16px; }
.t-card .pquote{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--c-line);
  font-size:.9rem; font-style:italic; color:var(--c-muted); }

/* chips de tipo de relatorio (par com .chip.ataque/.defesa do base) */
.chip.tec{ color:#8fc4ff; background:rgba(4,107,210,.16); border-color:rgba(4,107,210,.4); }
.chip.exe{ color:#c084fc; background:rgba(168,85,247,.16); border-color:rgba(168,85,247,.4); }

/* ---------- ANATOMIA (imagem + corpo) ---------- */
.anatomy{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,44px); align-items:center; }
.anatomy.rev .a-media{ order:2; }
.a-media{ border:1px solid var(--c-line); border-radius:18px; overflow:hidden; line-height:0; box-shadow:var(--c-shadow); }
.a-media img{ width:100%; height:auto; display:block; }
.a-body .chip{ margin-bottom:14px; }
.a-body .who{ color:var(--c-muted); font-size:.95rem; margin:0 0 18px; }

/* lista de topicos (base = _service.css; replicado aqui para nao carregar a familia) */
/* riskbar (dashboard ilustrativo no corpo do exec) */
.riskbar{ display:flex; gap:12px; flex-wrap:wrap; margin:20px 0 4px; }
.riskbar .rchip{ border:1px solid var(--c-line); border-radius:12px; padding:12px 16px; min-width:104px; background:var(--c-card2); }
.riskbar .rchip .n{ display:block; font-size:24px; font-weight:800; line-height:1; }
.riskbar .rchip .l{ display:block; margin-top:6px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--c-muted); }
.n-crit{ color:#f87171; } .n-high{ color:#fb923c; } .n-med{ color:#fbbf24; } .n-low{ color:#4ade80; }

.fw-line{ margin-top:8px; font-size:.82rem; color:var(--c-muted); }
.fw-line b{ color:var(--c-fg); font-weight:600; }

/* rotulos compartilhados por .sample e .exectbl */
.s-kicker{ display:block; margin-bottom:4px; font-family:var(--mono); font-size:11px; letter-spacing:.5px;
  text-transform:uppercase; color:var(--c-muted); }
.s-name{ font-weight:800; font-size:16px; color:var(--c-fg); letter-spacing:-.01em; }

/* ---------- AMOSTRA DE ACHADO (chrome escuro; vive em secao escura) ----------
   As janelas de browser/terminal sao "screenshots" propositalmente escuros; suas
   cores internas ficam fixas. O envolucro usa tokens --c-* (na secao escura,
   resolvem para os mesmos valores do design anterior). */
.sample{ margin-top:26px; border:1px solid var(--c-line); border-radius:14px; overflow:hidden; box-shadow:var(--c-shadow);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.sample .s-head{ padding:15px 18px; border-bottom:1px solid var(--c-line); }
.sample .s-rows{ display:grid; grid-template-columns:158px 1fr; }
.sample .s-rows .k{ padding:11px 16px; text-align:right; font-weight:700; font-size:13px; color:#cbd5e1;
  border-bottom:1px solid var(--c-line); border-right:1px solid var(--c-line); background:rgba(255,255,255,.025); }
.sample .s-rows .v{ padding:11px 16px; font-size:13.5px; color:#e5e7eb; border-bottom:1px solid var(--c-line);
  display:flex; align-items:center; min-width:0; }
.sample .s-rows .v.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:#cbd5e1; word-break:break-all; }
.sample .s-rows .v.sev{ color:#fff; font-weight:700; }
.sample .s-rows .v.sev-crit{ background:#e03535; }
.sample .s-band{ padding:9px 16px; text-align:center; font-weight:700; font-size:13px; color:#e5e7eb;
  background:rgba(255,255,255,.06); border-bottom:1px solid var(--c-line); }
.sample .s-content{ padding:13px 18px; border-bottom:1px solid var(--c-line); font-size:13.5px; color:#cbd5e1; line-height:1.55; }
.sample .s-content ul{ margin:0; padding-left:18px; }
.sample .s-content p{ margin:0; }
.sample .s-note{ padding:12px 18px; font-size:12px; color:var(--c-muted); }

.s-content .ev{ margin:12px 0; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.12); }
.s-content .ev-label{ padding:5px 12px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  background:rgba(255,255,255,.06); color:#94a3b8; border-bottom:1px solid rgba(255,255,255,.1); }
.s-content .ev-body{ padding:10px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  line-height:1.65; color:#cbd5e1; background:#080d14; overflow-x:auto; white-space:pre; }
.s-content .ev-body .hi{ color:#f87171; }
.s-content .ev-body .ok{ color:#4ade80; }
.s-content .ev-body .key{ color:#63b3ff; }
.s-content .ev-body .dim{ color:#64748b; }
.s-content .ev-step{ font-weight:700; font-size:12px; color:#e2e8f0; margin:14px 0 4px; display:flex; align-items:center; gap:8px; }
.s-content .ev-step::before{ content:attr(data-n); display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:rgba(4,107,210,.7); color:#fff; font-size:10px; font-weight:700; flex-shrink:0; }
.s-content code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
  background:rgba(255,255,255,.1); padding:1px 5px; border-radius:3px; color:#93c5fd; }

.s-content .bw{ margin:12px 0; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.12); }
.s-content .bw-bar{ display:flex; align-items:center; gap:8px; padding:7px 12px; background:#252525; border-bottom:1px solid rgba(0,0,0,.4); }
.s-content .bw-dots{ display:flex; gap:5px; flex-shrink:0; }
.s-content .bw-dot{ width:10px; height:10px; border-radius:50%; }
.s-content .bw-dot.r{ background:#ff5f56; }
.s-content .bw-dot.y{ background:#ffbd2e; }
.s-content .bw-dot.g{ background:#27c93f; }
.s-content .bw-url{ flex:1; background:rgba(255,255,255,.1); border-radius:20px; padding:3px 12px; font-size:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.s-content .uf{ padding:14px 18px; background:#f0f2f5; font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; color:#2d3748; }
.s-content .uf-title{ font-size:14px; font-weight:700; color:#1a202c; margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid #dde3ec; }
.s-content .uf-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; flex-wrap:wrap; }
.s-content .uf-lbl{ min-width:130px; font-size:12px; font-weight:600; color:#4a5568; }
.s-content .uf-fbtn{ padding:3px 10px; background:#f7f7f7; border:1px solid #b0b0b0; border-radius:3px; font-size:11px; color:#333; }
.s-content .uf-fn{ font-size:11px; color:#999; }
.s-content .uf-sub{ padding:5px 16px; background:#357abd; color:#fff; border:none; border-radius:3px; font-size:12px; font-weight:700; cursor:default; }
.s-content .uf-foot{ font-size:10px; color:#999; margin-top:10px; padding-top:7px; border-top:1px solid #dde3ec; text-align:right; }

.s-content .ws-head{ background:#1a1a2e; color:#f6ad55; padding:8px 14px; font-size:13px; font-weight:700; letter-spacing:.02em; }
.s-content .ws-bar{ display:flex; gap:8px; align-items:center; padding:7px 14px; background:#e8ebf0; border-bottom:1px solid #d1d8e0; font-family:ui-sans-serif,system-ui,sans-serif; }
.s-content .ws-bar label{ font-size:12px; font-weight:700; color:#333; flex-shrink:0; }
.s-content .ws-inp{ flex:1; padding:3px 8px; border:1px solid #aaa; border-radius:3px; font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#1a202c; background:#fff; }
.s-content .ws-run{ padding:3px 10px; background:#c0392b; color:#fff; border:none; border-radius:3px; font-size:11px; font-weight:700; cursor:default; }
.s-content .ws-out{ padding:9px 14px; background:#0d1117; color:#4ade80; font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre; overflow-x:auto; }
.s-content .ws-out .whi{ color:#f87171; }

/* ---------- TABELA "PANORAMA DE RISCO" (theme-aware; vive em secao clara) ---------- */
.exectbl{ margin-top:26px; border:1px solid var(--c-line); border-radius:14px; overflow:hidden; box-shadow:var(--c-shadow); background:var(--c-card); }
.exectbl .et-cap{ padding:15px 18px; border-bottom:1px solid var(--c-line); }
.exectbl .et-scroll{ overflow-x:auto; }
.exectbl table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.exectbl thead th{ background:#0b1220; color:#fff; text-align:left; padding:11px 16px; font-size:12px; letter-spacing:.03em; font-weight:700; text-transform:uppercase; }
.exectbl thead th:last-child{ width:42%; }
.exectbl tbody td{ padding:10px 16px; border-bottom:1px solid var(--c-line); color:var(--c-fg); white-space:nowrap; }
.exectbl tbody td:first-child{ color:var(--c-muted); white-space:normal; }
.exectbl tbody td:last-child{ font-weight:600; }
.exectbl tbody tr:nth-child(even) td{ background:var(--c-card2); }
.exectbl tbody tr:last-child td{ border-bottom:none; }
.exectbl .sev-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.exectbl .et-note{ padding:12px 18px; font-size:12px; color:var(--c-muted); border-top:1px solid var(--c-line); }

/* ---------- METODOLOGIA (steps) ---------- */
.steps{ counter-reset:st; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.steps li{ counter-increment:st; border:1px solid var(--c-line); border-radius:16px; padding:24px; background:var(--c-card2); box-shadow:var(--c-shadow); }
.steps li::before{ content:counter(st,decimal-leading-zero); display:block; margin-bottom:10px;
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--c-accent); }
.steps li h4{ margin:0 0 6px; font-size:15px; color:var(--c-fg); }
.steps li p{ margin:0; color:var(--c-muted); font-size:13.5px; }

/* ---------- FORMULARIO (theme-aware; vive em secao clara) ---------- */
.material-form-section .wrapper{ }
.form-card{ max-width:640px; margin:0 auto; padding:clamp(28px,4vw,44px); border:1px solid var(--c-line);
  border-radius:22px; background:var(--c-card); box-shadow:var(--c-shadow); }
.form-card h2{ margin:0 0 8px; font-size:clamp(22px,2.6vw,28px); font-weight:800; text-align:center; color:var(--c-fg); }
.form-card .form-sub{ margin:0 0 28px; color:var(--c-muted); text-align:center; font-size:15px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--c-fg); }
.form-group input{ width:100%; padding:12px 16px; border:1px solid var(--c-line2); border-radius:12px;
  background:var(--c-card2); color:var(--c-fg); font-family:inherit; font-size:15px; transition:border-color .2s, box-shadow .2s; }
.form-group input:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(99,179,255,.18); }
.form-group input::placeholder{ color:var(--c-faint); }
.form-submit{ width:100%; padding:14px; border:none; border-radius:100px; background:var(--grad); color:#fff;
  font-family:inherit; font-size:16px; font-weight:600; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(106,79,181,.7); transition:transform .15s, box-shadow .2s; }
.form-submit:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(106,79,181,.85); }
.form-submit:active{ transform:translateY(0); opacity:.95; }
.form-note{ margin-top:14px; text-align:center; font-size:13px; color:var(--c-muted); }

/* ---------- RESPONSIVO ---------- */
@media (max-width:960px){
  .anatomy, .anatomy.rev{ grid-template-columns:1fr; }
  .anatomy.rev .a-media{ order:0; }
}
@media (max-width:560px){
  .mg-hero .stats{ gap:22px; }
  .sample .s-rows{ grid-template-columns:1fr; }
  .sample .s-rows .k{ text-align:left; border-right:none; padding-bottom:2px; border-bottom:none; background:transparent; }
  .sample .s-rows .v{ padding-top:2px; }
}