/* Customizador The Blade Arts: mesma linguagem visual da página inicial (grafite frio, prata, dourado de acento). */

:root {
  --bg: #171d21;
  --panel: #20282d;
  --panel-deep: #141a1e;
  --field: #11181c;
  --text: #e5e6df;
  --muted: #b3babd;
  --accent: #d1bd8c;
  --ember: #dd773d;
  --line: rgba(117, 130, 138, .48);
  --line-soft: rgba(83, 96, 103, .55);
  --danger: #f0a07a;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Manrope', Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 17px/1.65 var(--body); overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 82% 18%, rgba(221, 119, 61, .09), transparent 28%), radial-gradient(ellipse at 8% 60%, rgba(72, 91, 102, .3), transparent 58%);
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cz-skip { position: fixed; left: 16px; top: -100px; z-index: 99; padding: 12px 18px; background: var(--text); color: var(--bg); }
.cz-skip:focus { top: 12px; }

/* ---------- cabeçalho e abertura ---------- */
.site-head {
  height: 100px; max-width: 1440px; margin: auto; padding: 0 clamp(24px, 5vw, 76px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  border-bottom: 1px solid var(--line-soft); background: rgba(23, 29, 33, .94);
}
.wordmark img { width: 116px; height: 71px; object-fit: contain; }
.site-head nav { display: flex; gap: 35px; margin-left: auto; }
.site-head nav a { font-size: 16px; text-decoration: none; padding: 12px 0; transition: color .2s; }
.site-head nav a:hover { color: var(--accent); }
.langs { display: flex; align-items: center; color: var(--muted); font-size: 14px; }
.langs button { background: none; border: 0; min-width: 44px; min-height: 44px; padding: 8px; color: var(--muted); }
.langs button[aria-pressed=true] { color: var(--text); text-decoration: underline; text-underline-offset: 8px; }

.maker-hero { position: relative; min-height: 420px; display: grid; align-items: end; background: #0d1114; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.maker-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.72) contrast(1.08); }
.maker-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 17, 20, .95) 0%, rgba(12, 17, 20, .77) 48%, rgba(12, 17, 20, .34) 76%, rgba(12, 17, 20, .58) 100%); }
.maker-hero-copy { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: auto; padding: 64px clamp(24px, 5vw, 76px) 68px; }
.maker-hero-copy > p { margin: 0; font: 500 12px var(--body); letter-spacing: .18em; color: var(--accent); }
.maker-hero h1 { margin: 14px 0 28px; max-width: 760px; font: 400 clamp(44px, 5.4vw, 78px)/.98 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.reference-callout { max-width: 680px; padding: 2px 0 2px 18px; border-left: 1px solid var(--accent); color: var(--muted); font-size: 15px; line-height: 1.65; }
.reference-callout strong { display: block; color: var(--accent); font-weight: 500; }

/* ---------- estrutura: trilho | fluxo | resumo ---------- */
.cz { display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; align-items: start; max-width: 1440px; margin: 0 auto; border-inline: 1px solid var(--line-soft); background: rgba(23, 29, 33, .72); scroll-margin-top: 12px; }
.cz-rail, .cz-summary { position: sticky; top: 0; max-height: 100vh; overflow: auto; background: rgba(20, 26, 30, .94); padding: 38px 24px; }
.cz-rail { border-right: 1px solid var(--line-soft); min-height: 100vh; }
.cz-summary { border-left: 1px solid var(--line-soft); }
.cz-main { padding: 40px clamp(24px, 4vw, 64px) 80px; min-height: 760px; background: rgba(29, 36, 41, .46); min-width: 0; }

/* trilho */
.cz-rail-title { margin: 0 0 18px; font: 500 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cz-rail-list { list-style: none; margin: 0; padding: 0; }
.cz-rail-item button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(83, 96, 103, .42); background: none; color: var(--muted); font-size: 14px; text-align: left; transition: color .2s, padding .25s var(--ease); }
.cz-rail-item button:not(:disabled):hover { color: var(--text); padding-left: 6px; }
.cz-rail-item button:disabled { opacity: .4; cursor: default; }
.cz-rail-num { min-width: 22px; font: 500 11px var(--body); letter-spacing: .08em; color: var(--accent); }
.cz-rail-item.is-current button { color: var(--text); font-weight: 600; background: linear-gradient(90deg, rgba(209, 189, 140, .11), transparent); padding-left: 8px; }
.cz-rail-item.is-done .cz-rail-num { color: var(--muted); }

/* progresso */
.cz-progress { margin-bottom: 36px; scroll-margin-top: 12px; }
.cz-progress-text { display: flex; justify-content: space-between; gap: 16px; font: 500 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cz-progress-section { color: var(--muted); }
.cz-progress-bar { height: 3px; margin-top: 10px; background: rgba(117, 130, 138, .28); }
.cz-progress-bar span { display: block; height: 100%; background: var(--accent); transition: width .45s var(--ease); }
.cz-progress-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* etapa */
.cz-kicker { margin: 0 0 8px; font: 500 12px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.cz-title { margin: 0 0 14px; font: 400 clamp(36px, 3.6vw, 56px)/1.04 var(--display); letter-spacing: -.025em; text-wrap: balance; outline: none; }
.cz-title::after { content: ''; display: block; width: 52px; height: 1px; margin-top: 18px; background: var(--accent); }
.cz-help { margin: 0 0 26px; max-width: 62ch; color: var(--muted); }
.cz-note { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.cz-muted { color: var(--muted); font-style: italic; }
.cz-error { margin: 0 0 22px; padding: 12px 16px; border-left: 2px solid var(--ember); background: var(--field); color: var(--danger); font-size: 15px; }

/* cartões de escolha */
.cz-options { display: grid; gap: 14px; margin-top: 28px; }
.cz-options--cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cz-options--list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cz-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: transform .3s var(--ease), border-color .25s, background .25s, box-shadow .25s; }
.cz-card:hover { transform: translateY(-3px); border-color: var(--accent); background: #252e34; }
.cz-card.is-selected { border-color: var(--accent); background: #293238; box-shadow: 0 0 0 1px var(--accent), 0 15px 32px rgba(0, 0, 0, .22); }
.cz-card:has(.cz-card-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.cz-card-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cz-card-media { display: block; aspect-ratio: 4 / 3; background: #11181c; overflow: hidden; }
.cz-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.04); }
.cz-card-media.is-empty { display: grid; place-items: center; }
.cz-card-media.is-empty::before { content: ''; width: 46px; height: 46px; border: 1px dashed var(--line); border-radius: 50%; }
.cz-card-label { padding: 12px 40px 14px 14px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cz-card--text { flex-direction: row; align-items: center; min-height: 58px; }
.cz-card--text .cz-card-label { padding: 14px 46px 14px 18px; font-weight: 500; font-size: 15.5px; }
.cz-card-check { position: absolute; right: 10px; bottom: 12px; width: 20px; height: 20px; border: 1px solid var(--line); background: var(--field); display: grid; place-items: center; }
.cz-card--text .cz-card-check { bottom: auto; top: 50%; transform: translateY(-50%); }
.cz-card.is-selected .cz-card-check { background: var(--accent); border-color: var(--accent); }
.cz-card.is-selected .cz-card-check::after { content: '✓'; color: #20262a; font-size: 13px; font-weight: 700; line-height: 1; }

/* campos */
.cz-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 760px; margin-top: 28px; }
.cz-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cz-field label { font-size: 14px; color: var(--muted); }
.cz-field label span { color: var(--accent); }
.cz-field input, .cz-field select, .cz-field textarea { width: 100%; min-height: 52px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 0; background: var(--field); color: var(--text); }
.cz-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.cz-field input:focus, .cz-field select:focus, .cz-field textarea:focus { outline: none; border-color: var(--accent); }
.cz-field.has-error input, .cz-field.has-error select, .cz-field.has-error textarea { border-color: var(--ember); }
.cz-field-error { margin: 0; font-size: 13px; color: var(--danger); }
.cz-step > .cz-field { max-width: 760px; margin-top: 28px; }
.cz-field option { background: var(--panel); }

/* botões */
.cz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 26px; border: 1px solid var(--accent); background: var(--accent); color: #20262a; font: 600 15px var(--body); text-decoration: none; transition: transform .3s var(--ease), background .25s; }
.cz-btn:hover { background: #e0cfa8; transform: translateY(-2px); }
.cz-btn:disabled { opacity: .5; cursor: default; transform: none; }
.cz-btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.cz-btn--ghost:hover { background: rgba(209, 189, 140, .1); border-color: var(--accent); }
.cz-link { padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font-size: 14px; min-height: 36px; }
.cz-link:hover { border-color: var(--text); }
.cz-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.cz-actions-end { display: flex; align-items: center; gap: 22px; }

/* revisão */
.cz-review { margin: 30px 0; border-top: 1px solid var(--line-soft); }
.cz-review-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.cz-review-row dt { font: 500 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cz-review-row dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.cz-final-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* painel "Sua peça" */
.cz-summary h2 { margin: 0 0 12px; font: 400 34px/1.05 var(--display); letter-spacing: -.02em; }
.cz-summary-note { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.cz-summary-list { margin: 22px 0; }
.cz-summary-list > div { position: relative; padding: 12px 0; border-bottom: 1px solid rgba(83, 96, 103, .44); }
.cz-summary-list dt { font: 500 10px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cz-summary-list dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.cz-summary-list .cz-link { position: absolute; right: 0; top: 8px; font-size: 12px; min-height: 28px; padding: 2px; }
.cz-summary-list .is-set dd { padding-right: 52px; }
.cz-summary-toggle { display: none; }
.cz-restart { color: var(--muted); }

/* prévia por IA */
.cz-preview { margin-top: 40px; padding: 26px; border: 1px solid rgba(209, 189, 140, .25); background: var(--panel-deep); }
.cz-preview h3 { margin: 0 0 8px; font: 500 30px/1.05 var(--display); }
.cz-preview p { max-width: 60ch; color: var(--muted); font-size: 15px; }
.cz-preview .cz-btn { margin-top: 6px; }
.cz-code-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; max-width: 520px; margin-top: 16px; }
.cz-code-row .cz-field { flex: 1; min-width: 180px; }
.cz-code-row input { letter-spacing: .3em; font-weight: 600; }
.cz-turnstile { margin: 14px 0; max-width: 520px; }
.cz-preview-status { min-height: 1.6em; margin: 12px 0 0; }
.cz-preview-result { margin: 22px 0 0; }
.cz-preview-zoom { display: block; width: 100%; padding: 0; border: 0; background: #0f0e0d; cursor: zoom-in; }
.cz-preview-result figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cz-image-dialog { width: min(94vw, 1480px); max-height: 94vh; padding: 0; border: 1px solid var(--accent); background: #101518; }
.cz-image-dialog::backdrop { background: rgba(7, 10, 12, .85); }
.cz-image-dialog img { width: 100%; height: auto; }
.cz-image-close { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg); font-size: 26px; line-height: 1; }
.cz-forging { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(7, 10, 12, .76); backdrop-filter: blur(5px); }
.cz-forging-panel { min-width: min(86vw, 360px); padding: 28px; border: 1px solid var(--accent); background: var(--panel-deep); text-align: center; }
.cz-forging-panel p { margin: 0 0 16px; color: var(--text); }
.cz-forging-bar { height: 3px; background: rgba(117, 130, 138, .3); overflow: hidden; }
.cz-forging-bar span { display: block; width: 40%; height: 100%; background: var(--ember); animation: cz-slide 1.4s ease-in-out infinite; }
@keyframes cz-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  .cz { grid-template-columns: 200px minmax(0, 1fr); }
  .cz-summary { grid-column: 1 / -1; position: static; max-height: none; border-left: 0; border-top: 1px solid var(--line-soft); padding: 18px clamp(20px, 4vw, 40px); }
  .cz-summary-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 4px; border: 0; background: none; font: 600 15px var(--body); }
  .cz-summary-count { font: 500 12px var(--body); color: var(--accent); }
  .cz-summary-body { display: none; padding-top: 12px; }
  .cz-summary[data-open=true] .cz-summary-body { display: block; }
}
@media (max-width: 860px) {
  .cz { grid-template-columns: minmax(0, 1fr); border-inline: 0; }
  .cz-rail { display: none; }
  .cz-main { padding: 28px 20px 56px; min-height: 0; }
  .site-head { height: auto; min-height: 86px; padding: 0 20px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 76px auto; column-gap: 10px; }
  .wordmark { grid-column: 1; grid-row: 1; }
  .wordmark img { width: 96px; height: 60px; }
  .site-head nav { display: flex; grid-column: 1 / -1; grid-row: 2; margin: 0; gap: 0 20px; flex-wrap: wrap; padding-bottom: 12px; }
  .site-head nav a { font-size: 14px; padding: 5px 0; }
  .langs { grid-column: 2; grid-row: 1; margin-left: 0; }
  .maker-hero { min-height: 380px; }
  .cz-options--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cz-options--list { grid-template-columns: 1fr; }
  .cz-form { grid-template-columns: 1fr; }
  .cz-review-row { grid-template-columns: 1fr auto; }
  .cz-review-row dt { grid-column: 1 / -1; }
  .cz-actions { position: sticky; bottom: 0; margin-inline: -20px; padding: 14px 20px; background: rgba(23, 29, 33, .96); backdrop-filter: blur(8px); z-index: 5; }
  .cz-actions-end .cz-link { display: none; }
  .cz-btn { padding-inline: 20px; }
}
@media (max-width: 380px) {
  .cz-options--cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Animação "forjando": martelo bate na peça incandescente sobre a bigorna e as faíscas saem no impacto. Ciclo de 1,2 s. */
.cz-forging-panel { padding: 22px 22px 24px; }
.cz-forge { display: block; width: min(300px, 100%); height: auto; margin: 0 auto 6px; overflow: visible; }
.cz-forging-panel p { margin: 0; font: 500 19px var(--display); color: #e8d0a7; letter-spacing: .02em; }
.cz-forge .cz-hammer { transform-box: view-box; transform-origin: 255px 95px; animation: cz-strike 1.2s cubic-bezier(.5, 0, .75, .3) infinite; }
.cz-forge .cz-billet { filter: drop-shadow(0 0 6px #ff7a2e) drop-shadow(0 0 14px #e84a14); animation: cz-glow 1.2s ease-out infinite; }
.cz-forge .cz-anvil { animation: cz-jolt 1.2s ease-out infinite; }
.cz-forge .cz-sparks circle { opacity: 0; animation: cz-spark 1.2s ease-out infinite; }
.cz-forge .cz-sparks circle:nth-child(even) { animation-delay: .015s; }
@keyframes cz-strike { 0% { transform: rotate(40deg); } 46%, 56% { transform: rotate(0deg); } 100% { transform: rotate(40deg); } }
@keyframes cz-glow { 0%, 100% { filter: drop-shadow(0 0 5px #ff7a2e) drop-shadow(0 0 10px #e84a14) brightness(.9); } 46% { filter: drop-shadow(0 0 12px #ffb04a) drop-shadow(0 0 26px #ff5a1a) brightness(1.5); } }
@keyframes cz-jolt { 0%, 44%, 60%, 100% { transform: translateY(0); } 47% { transform: translateY(1.5px); } }
@keyframes cz-spark { 0%, 45% { opacity: 0; transform: translate(0, 0) scale(.4); } 47% { opacity: 1; transform: translate(calc(var(--dx) * .25), calc(var(--dy) * .6)) scale(1); } 80% { opacity: .9; transform: translate(var(--dx), calc(var(--dy) + 14px)) scale(.7); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.1), calc(var(--dy) + 34px)) scale(.2); } }
@media (prefers-reduced-motion: reduce) { .cz-forge .cz-hammer { animation: none; transform: rotate(20deg); } .cz-forge .cz-billet, .cz-forge .cz-anvil, .cz-forge .cz-sparks circle { animation: none; } }

/* Modelos e perfis de lâmina: fotos largas. O quadro segue o formato da foto para não cortar a ponta nem o cabo. */
.cz-options[data-step="model"] .cz-card-media,
.cz-options[data-step="blade_profile"] .cz-card-media,
.cz-options[data-step="tomahawk_head"] .cz-card-media { aspect-ratio: 2 / 1; }
.cz-options[data-step="model"] .cz-card-media img,
.cz-options[data-step="blade_profile"] .cz-card-media img,
.cz-options[data-step="tomahawk_head"] .cz-card-media img { object-position: center 55%; }