/* ==========================================================================
   DolutechAI — Formulário de orçamento ISO/IEC 27001
   Regras específicas da aplicação. Tokens, tipografia, cabeçalho, rodapé e
   componentes dolu-* vêm de dolutech-base.css (extraído do site oficial),
   o mesmo usado no cybersec-forms. Prefixo iq- = "ISO quote".
   ========================================================================== */
:root { --iq-sidebar-w: 290px; --iq-ok: var(--color-success); --iq-warn: var(--color-warning); --iq-bad: var(--color-error); }

main { padding-top: var(--header-height); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--dolu-ink); color: #fff; padding: .5rem 1rem; z-index: 2000; }
.skip-link:focus { left: 1rem; top: 1rem; }
.hidden, [hidden] { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); }
#main-nav a[aria-current="page"] { color: var(--brand-accent); }
/* Logo: versão escura no tema claro e branca no tema escuro, trocada só por CSS (não depende de JavaScript). */
.logo .logo-dark { display: none; }
[data-theme="dark"] .logo .logo-light { display: none; }
[data-theme="dark"] .logo .logo-dark { display: inline-block; }
.iq-load-error { max-width: 1200px; margin: var(--space-6) auto; }
.header-controls .header-progress { display: flex; align-items: center; gap: .5rem; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); font-family: var(--font-mono); }
.header-progress .bar { width: 110px; }
@media (max-width: 1024px) { .header-controls .header-progress { display: none; } }

/* Campos */
input, select, textarea { font: inherit; color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--dolu-dove); border-radius: var(--radius-md); padding: .65rem .85rem; width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-accent-glow); }
textarea { min-height: 96px; resize: vertical; font-family: var(--font-ui); }
label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.dolu-btn-sm { padding: .5rem 1rem; font-size: var(--text-sm); }
.dolu-btn-primary:disabled, .dolu-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.req { color: var(--color-error); font-weight: 700; }
.opt-tag { font-weight: 400; color: var(--text-muted); font-size: var(--text-xs); }

/* Avisos */
.notice { border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--text-primary); background: var(--dolu-cream); }
.notice.ok { border-color: var(--color-success); background: var(--color-success-bg); }
.notice.bad { border-color: var(--color-error); background: var(--color-error-bg); }
.notice.warn { border-color: var(--color-warning); background: var(--color-warning-bg); display: grid; gap: var(--space-3); justify-items: start; }
.notice ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }

/* Barras */
.bar { height: 8px; background: var(--dolu-warm); border-radius: var(--radius-full); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-secondary), var(--brand-accent)); border-radius: inherit; transition: width .35s ease; }

/* Vistas */
.view { display: none; } .view.active { display: block; }

/* Hero */
.iq-hero { position: relative; overflow: hidden; padding-top: var(--space-16); }
.iq-orb { right: -80px; top: -120px; }
.iq-hero-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
@media (max-width: 960px) { .iq-hero-inner { grid-template-columns: 1fr; gap: var(--space-8); } }
.iq-hero-content { display: grid; gap: var(--space-5); justify-items: start; }
.iq-hero .dolu-section-title { color: var(--brand-white); margin: 0; }
.iq-lead { font-size: var(--text-lg); max-width: 58ch; }
.iq-hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.iq-hero-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); font-family: var(--font-mono); color: rgba(255,255,255,.8); }
.iq-note { font-size: var(--text-sm); color: rgba(255,255,255,.6) !important; }
.iq-hero .dolu-tag { background: rgba(0, 188, 212, .18); color: #fff; }
.iq-hero .dolu-btn-primary { background: var(--dolu-cyan); color: var(--dolu-ink); }
.iq-hero .dolu-btn-primary:hover { background: #26c6da; color: var(--dolu-ink); }
.iq-hero .dolu-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.iq-hero .dolu-btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); }
.iq-hero-visual { position: relative; z-index: 1; }
.iq-hero .dolu-browser-frame { background: var(--dolu-paper); }
.iq-frame .dolu-browser-frame__body { padding: var(--space-5); }
.iq-frame-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--dolu-ink) !important; margin: 0 0 var(--space-3); }
.iq-frame-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); counter-reset: sec; }
.iq-frame-list li { counter-increment: sec; display: flex; align-items: center; gap: var(--space-3); padding: .5rem .7rem; border: 1px solid var(--dolu-dove-light); border-radius: var(--radius-md); background: var(--dolu-paper); font-size: 13px; color: var(--dolu-ink); }
.iq-frame-list li::before { content: counter(sec, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--brand-accent-text); }
.iq-frame-list .n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
[data-theme="dark"] .iq-hero .dolu-browser-frame { background: #0f1f3d; }
[data-theme="dark"] .iq-frame-title, [data-theme="dark"] .iq-frame-list li { color: #fff !important; }
[data-theme="dark"] .iq-frame-list li { background: rgba(255,255,255,.04); }
.dolu-promise-strip .dolu-stat { align-items: center; text-align: center; }
.dolu-promise-strip .dolu-stat__value { font-size: 28px; font-weight: 600; }

/* Cartões */
.iq-stack { display: grid; gap: var(--space-6); }
.iq-card-paper { background: var(--card-bg); }
.iq-card-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-6); }
.iq-card-lead { color: var(--text-muted); font-size: var(--text-sm); max-width: 60ch; }
.iq-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -.02em; margin: 0; }
.iq-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); margin: 0; }
.section-label { margin-bottom: var(--space-1); }
.iq-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.iq-steps li { display: flex; gap: var(--space-4); align-items: flex-start; }
.iq-steps h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.iq-steps p { font-size: var(--text-sm); margin: 0; }
.iq-step-n { flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; background: var(--dolu-cyan-soft); color: var(--brand-accent-text); }
.iq-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }
.iq-service { padding: var(--space-4) var(--space-5); border: 1px solid var(--dolu-dove-light); border-radius: var(--radius-lg); background: var(--card-bg); display: grid; gap: var(--space-1); align-content: start; }
.iq-service h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); margin: 0; display: flex; gap: var(--space-2); align-items: center; }
.iq-service h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); flex: none; }
.iq-service p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* Formulário: layout com navegação lateral (como o cybersec-forms) */
.iq-form-section { padding-top: var(--space-6); padding-bottom: var(--space-16); }
.layout { display: grid; grid-template-columns: var(--iq-sidebar-w) minmax(0, 1fr); gap: var(--space-6); max-width: 1200px; margin: 0 auto; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }
.sidebar { position: sticky; top: calc(var(--header-height) + var(--space-4)); align-self: start; max-height: calc(100vh - var(--header-height) - var(--space-8)); overflow: auto; padding: var(--space-4); }
@media (max-width: 960px) { .sidebar { position: static; max-height: none; } }
.nav-cat { display: flex; align-items: flex-start; gap: .5rem; width: 100%; text-align: left; background: transparent; border: 0; padding: .55rem .5rem; border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; font-family: inherit; }
.nav-cat:hover { background: var(--dolu-cream); color: var(--text-primary); }
.nav-cat[aria-current="true"] { background: var(--dolu-cyan-soft); color: var(--text-primary); font-weight: 600; }
.nav-cat .id { font-family: var(--font-mono); font-size: 11px; color: var(--brand-accent-text); min-width: 1.8em; }
.nav-cat .name { min-width: 0; line-height: 1.35; }
.nav-cat .id, .nav-cat .n { line-height: 1.6; }
.nav-cat .n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.nav-cat .n.done { color: var(--iq-ok); }
.nav-select { display: none; }
@media (max-width: 960px) { #nav-tree { display: none; } .nav-select { display: grid; gap: var(--space-1); } }

#form-panel { margin: 0; }
.q-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); align-items: flex-end; margin-bottom: var(--space-2); }
.q-head .path { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--brand-accent-text); margin: 0; }
.q-head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -.02em; margin: var(--space-1) 0 0; }
.q-lead { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); max-width: 70ch; }
.q-legend { font-size: var(--text-xs); color: var(--text-muted); margin: 0 0 var(--space-2); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .q-block.wide { grid-column: 1 / -1; }
.field { display: grid; gap: var(--space-1); min-width: 0; }
.q-block { padding: var(--space-5) 0; border-top: 1px solid var(--border-color); min-width: 0; }
.q-block:first-child { border-top: 0; padding-top: var(--space-2); }
.form-grid .q-block { border-top: 0; padding: 0; }
.q-label { display: block; font-weight: 600; font-size: var(--text-base); color: var(--text-primary); max-width: 78ch; margin-bottom: var(--space-1); }
.form-grid .q-label { font-size: var(--text-sm); color: var(--text-secondary); }
.q-help { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.form-grid .q-help { margin: var(--space-1) 0 0; font-size: var(--text-xs); }
.q-block.answered > .q-label::before, .q-block.answered > fieldset > legend.q-label::before { content: "●"; color: var(--iq-ok); margin-right: .45rem; font-size: .6rem; vertical-align: middle; }
.form-grid .q-block.answered > .q-label::before, .form-grid .q-block.answered > fieldset > legend.q-label::before { content: none; }
.q-block.invalid input, .q-block.invalid textarea { border-color: var(--color-error); }
.q-block.invalid .q-label { color: var(--color-error-strong); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.q-details { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.q-details label { font-weight: 500; }

/* Opções em "pílula" (radio e checkbox) */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.choices label { position: relative; font-weight: 500; }
.choices input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.choices .opt { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: var(--radius-full); border: 1px solid var(--dolu-dove); background: var(--card-bg); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; cursor: pointer; user-select: none; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.choices.multi .opt::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--dolu-dove); flex: none; box-sizing: border-box; }
.choices label:hover .opt { border-color: var(--brand-accent); }
.choices input:checked + .opt { background: var(--dolu-ink); border-color: var(--dolu-ink); color: #fff; }
.choices.multi input:checked + .opt::before { border-color: var(--brand-accent); background: var(--brand-accent); box-shadow: inset 0 0 0 2px var(--dolu-ink); }
[data-theme="dark"] .choices input:checked + .opt { background: var(--dolu-cyan-on-dark); border-color: var(--dolu-cyan-on-dark); color: var(--dolu-ink); }
[data-theme="dark"] .choices.multi input:checked + .opt::before { border-color: var(--dolu-ink); background: var(--dolu-ink); box-shadow: none; }
.choices input:focus-visible + .opt { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.choices .opt.soft { border-style: dashed; }

.pager { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.pager .dolu-btn-ghost, .iq-submit .dolu-btn-ghost, .iq-thanks .dolu-btn-ghost { border-color: var(--dolu-dove); }
.pager .dolu-btn-ghost:hover, .iq-submit .dolu-btn-ghost:hover, .iq-thanks .dolu-btn-ghost:hover { border-color: var(--dolu-ink); }
[data-theme="dark"] .pager .dolu-btn-ghost, [data-theme="dark"] .iq-submit .dolu-btn-ghost, [data-theme="dark"] .iq-thanks .dolu-btn-ghost { color: var(--text-primary); }

/* Revisão e envio (última seção) */
.iq-submit { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-color); display: grid; gap: var(--space-4); }
.iq-jumps { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.iq-jump { font-size: 12px; padding: .3rem .65rem; border-radius: var(--radius-full); border: 1px solid var(--dolu-dove); background: var(--card-bg); color: var(--text-primary); cursor: pointer; font-family: inherit; text-align: left; }
.iq-jump:hover { border-color: var(--brand-accent); color: var(--brand-accent-text); }
.iq-jump.invalid { border-color: var(--color-error); }
.iq-jump .sec { font-family: var(--font-mono); color: var(--brand-accent-text); margin-right: .35rem; }
.iq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.iq-consent { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 400; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }
.iq-consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand-accent); }
.iq-consent a { color: var(--brand-accent-text); text-decoration: underline; }
.iq-turnstile { min-height: 65px; }
#submit-errors:empty { display: none; }
.iq-submit-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.iq-submit-row .iq-reset { margin-left: auto; }
.is-confirm { border-color: var(--color-error) !important; color: var(--color-error-strong) !important; }

/* Confirmação */
.iq-thanks-section { padding-top: var(--space-16); padding-bottom: var(--space-20); }
.iq-thanks { max-width: 720px; display: grid; gap: var(--space-4); justify-items: start; }
.iq-thanks-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); letter-spacing: -.03em; margin: 0; }
.iq-thanks .dolu-card-icon--brand { background: var(--dolu-ink); color: var(--brand-accent); border-color: var(--dolu-ink); width: 48px; height: 48px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--dolu-ink); color: #fff; padding: .75rem 1.1rem; border-radius: var(--radius-full); box-shadow: var(--shadow-xl); font-size: var(--text-sm); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 1100; max-width: calc(100vw - 2rem); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Seletor de idioma (variante com <button>, mesmo visual do site) */
.lang-switch { background: transparent; color: var(--text-primary); cursor: pointer; font-family: var(--font-ui); }
.lang-switch .lang-code { display: inline; }
.lang-dropdown { z-index: 1200; }
.lang-option { width: 100%; background: none; border: 0; cursor: pointer; font-family: var(--font-ui); text-align: left; }
.lang-option.active { color: var(--brand-accent); }
.lang-option .lang-code { font-family: var(--font-mono); font-size: 12px; min-width: 2.2em; }

@media (max-width: 768px) {
  .iq-hero { padding-top: var(--space-10); }
  .pager .btn-row { order: 3; width: 100%; justify-content: center; }
  .iq-submit-row .iq-reset { margin-left: 0; }
  #main-nav { background: var(--bg-primary); box-shadow: var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print {
  main { padding-top: 0; }
  header, footer, .sidebar, .pager, .toast, .skip-link, .iq-submit-row, .iq-turnstile { display: none !important; }
  .dolu-card { box-shadow: none; }
}