/* Base styles compartilhados entre todas as páginas do preview Qualit */

html { scroll-behavior: smooth; }
body { font-family: 'Roboto', system-ui, sans-serif; color: #333; background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', system-ui, sans-serif; color: #0A2342; text-wrap: balance; }

/* ===========================================================
   Escala tipográfica fluida (Major Third ~1.25 / Perfect Fourth no topo)
   Definida em CSS puro porque o Tailwind Play CDN não registra de forma
   confiável tokens custom de fontSize. !important garante prioridade
   sobre o reset de preflight do CDN.
   16 → 20 → 25 → 31 → 40 → 56px (desktop)
   =========================================================== */
.text-display { font-size: clamp(2.5rem, 1.85rem + 2.6vw, 3.5rem) !important; line-height: 1.08 !important; letter-spacing: -0.015em; }
.text-h1 { font-size: clamp(1.875rem, 1.5rem + 1.55vw, 2.5rem) !important; line-height: 1.15 !important; }
.text-h2 { font-size: clamp(1.5rem, 1.28rem + 0.9vw, 2rem) !important; line-height: 1.25 !important; }
.text-h3 { font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem) !important; line-height: 1.35 !important; }
::selection { background: #FF8304; color: #fff; }
*:focus-visible { outline: 2px solid #FF8304; outline-offset: 3px; border-radius: 4px; }

/* Botões */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.875rem 1.75rem; border-radius:10px; font-family:'Poppins',sans-serif; font-weight:600; font-size:1rem; line-height:1; transition:all .2s ease; cursor:pointer; text-decoration:none; }
.btn-lg { padding: 1rem 2rem; }
.btn-primary { background: #FF8304; color: #fff; }
.btn-primary:hover { background: #E66E00; box-shadow: 0 8px 20px rgba(255,131,4,.25); }
.btn-outline { background: transparent; color: #FF8304; border: 1.5px solid #FF8304; }
.btn-outline:hover { background: #FFF5EC; }
.btn-white-on-orange { background: #fff; color: #FF8304; }
.btn-white-on-orange:hover { background: #F7F8FA; }
.btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.8); }
.btn-outline-white:hover { background: rgba(255,255,255,.1); }

/* Badges
   Contraste: #FF8304 sobre #FFF5EC dava ~2.2:1 (reprova WCAG AA).
   #B85800 (orange-700) sobre #FFF5EC ≈ 5.2:1. */
.badge-eyebrow { display:inline-block; background:#FFF5EC; color:#B85800; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:6px 12px; border-radius:9999px; }
.badge-tag { display:inline-block; background:#EEF0F4; color:#0A2342; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:6px 12px; border-radius:9999px; }

/* Cards */
.card { background:#fff; border-radius:16px; border:1px solid #E1E5EB; padding:2rem; box-shadow:0 1px 3px rgba(10,35,66,.06); transition:all .2s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 16px 32px rgba(10,35,66,.10); }

/* Feedback de clique (filtro de manuais) */
@keyframes cardFlash { 0%{box-shadow:0 0 0 0 rgba(255,131,4,.0);border-color:#E1E5EB;} 25%{box-shadow:0 0 0 4px rgba(255,131,4,.25);border-color:#FF8304;} 100%{box-shadow:0 1px 3px rgba(10,35,66,.06);border-color:#E1E5EB;} }
.card-flash { animation: cardFlash 1s ease; }

/* Chips de filtro (manuais / blog) */
.chip-manual { display:inline-block; padding:6px 12px; border-radius:9999px; background:#EEF0F4; color:#0A2342; font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer; border:0; transition:background .15s, color .15s; text-decoration:none; }
.chip-manual:hover { background:#FFF5EC; color:#B85800; }
.chip-manual.is-active { background:#0A2342; color:#fff; }

/* Links com seta
   Contraste: #FF8304 sobre branco ≈ 2.4:1 (reprova). #E66E00 ≈ 3.3:1 (AA large/bold),
   hover #B85800 ≈ 5.1:1. */
.link-arrow { display:inline-flex; align-items:center; gap:.25rem; color:#E66E00; font-weight:600; transition:color .2s; text-decoration:none; }
.link-arrow:hover { color:#B85800; }
.link-arrow .arrow { transition:transform .2s ease; display:inline-block; }
.link-arrow:hover .arrow { transform:translateX(4px); }

/* Nav */
.nav-link { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; font-family:'Poppins',sans-serif; font-size:14px; font-weight:500; color:#0A2342; border-radius:6px; transition:color .2s; text-decoration:none; }
.nav-link:hover { color:#FF8304; }
.nav-link .chev { width:12px; height:12px; transition:transform .2s ease; }

/* Trigger de dropdown (button): visualmente igual a link, mas não-clicável (só hover) */
.nav-trigger {
  background: transparent;
  border: 0;
  cursor: default;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
.nav-trigger:focus { outline: none; }
.nav-trigger:focus-visible { outline: 2px solid #FF8304; outline-offset: 3px; border-radius: 6px; }

/* Dropdown */
.nav-item { position:relative; }
.nav-item .dropdown {
  position:absolute; top:100%; left:0;
  padding-top:14px;
  visibility:hidden; opacity:0; transform:translateY(8px);
  transition: visibility .15s, opacity .15s ease, transform .2s ease;
  z-index:50; pointer-events:none;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;
}
.nav-item:hover .chev,
.nav-item:focus-within .chev { transform: rotate(180deg); }

.dropdown-panel {
  background:#fff; border:1px solid #E1E5EB; border-radius:14px;
  box-shadow: 0 16px 32px rgba(10,35,66,.10), 0 2px 6px rgba(10,35,66,.04);
  padding:.5rem; min-width:300px;
}
.dropdown-panel.wide { min-width:520px; padding:1rem; }
.dropdown-panel.wide-2col { display:grid; grid-template-columns: 1fr 1fr; gap:.25rem 1rem; min-width:560px; padding:1rem; }

.dropdown-item { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem; border-radius:10px; transition: background .15s ease; text-decoration:none; }
.dropdown-item:hover { background:#FFF5EC; }
.dropdown-item .di-icon { flex-shrink:0; width:36px; height:36px; border-radius:8px; background:#FFF5EC; display:flex; align-items:center; justify-content:center; color:#FF8304; }
.dropdown-item:hover .di-icon { background:#FF8304; color:#fff; }
.dropdown-item .di-title { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:#0A2342; line-height:1.2; display:block; }
.dropdown-item .di-desc  { font-size:12px; color:#6B7280; margin-top:2px; display:block; line-height:1.4; }

.dropdown-footer {
  border-top: 1px solid #E1E5EB; margin-top:.5rem; padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between;
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; color:#E66E00; border-radius: 0 0 14px 14px;
}
.dropdown-footer:hover { color:#B85800; }

/* Footer */
.footer-heading { font-family:'Poppins',sans-serif; font-weight:600; color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; }
.social-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9999px; border:1px solid #15315A; color:#CBD0DA; transition:all .2s ease; }
.social-icon:hover { color:#FF8304; border-color:#FF8304; }

/* FAQ */
details[data-faq] > summary::-webkit-details-marker { display:none; }
details[data-faq] > summary { list-style:none; }
details[data-faq][open] summary .plus { transform:rotate(45deg); }

/* Header sticky scroll shadow */
.site-header.scrolled { box-shadow:0 1px 3px rgba(10,35,66,.06); }

/* Mobile menu accordion */
.mobile-link { display:block; padding:14px 4px; font-family:'Poppins',sans-serif; font-weight:500; color:#0A2342; border-bottom:1px solid #EEF0F4; text-decoration:none; }
.mobile-link:hover { color:#FF8304; }
.mobile-acc { border-bottom: 1px solid #EEF0F4; }
.mobile-acc > summary { display:flex; align-items:center; justify-content:space-between; padding:14px 4px; font-family:'Poppins',sans-serif; font-weight:500; color:#0A2342; cursor:pointer; list-style:none; }
.mobile-acc > summary::-webkit-details-marker { display:none; }
.mobile-acc > summary .chev { width:14px; height:14px; transition:transform .2s ease; }
.mobile-acc[open] > summary .chev { transform: rotate(180deg); }
.mobile-acc[open] > summary { color:#FF8304; }
.mobile-acc-body { display:flex; flex-direction:column; padding: 0 0 12px 16px; }
.mobile-acc-body a { padding: 10px 4px; font-size:15px; color:#4B5563; text-decoration:none; border-left: 2px solid #EEF0F4; padding-left: 14px; }
.mobile-acc-body a:hover { color:#FF8304; border-left-color:#FF8304; }

/* Mobile menu */
body.menu-open { overflow:hidden; }
#mobile-menu.is-open { display:flex; }

/* Patterns úteis */
.bg-blueprint { background-image: url('/assets/freepik/technical-grid.jpg'); background-size: cover; background-position: center; }
.bg-wave-dark { background-image: url('/assets/freepik/dark-blue-wave.jpg'); background-size: cover; background-position: center; }

/* Form fields */
.field { display:block; }
.field label { display:block; font-family:'Poppins',sans-serif; font-size:14px; font-weight:500; color:#0A2342; margin-bottom:6px; }
.field input, .field select, .field textarea { width:100%; padding:12px 14px; border:1px solid #E1E5EB; border-radius:10px; font-family:'Roboto',sans-serif; font-size:15px; color:#333; background:#fff; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:#FF8304; box-shadow: 0 0 0 3px rgba(255,131,4,.12); }
.field textarea { resize: vertical; min-height: 120px; }

/* Prose */
.prose-qualit { color:#333; line-height:1.7; }
.prose-qualit p { margin-bottom:1.25em; }
.prose-qualit h2 { font-family:'Poppins'; font-size:32px; margin:2em 0 .8em; color:#0A2342; }
.prose-qualit h3 { font-family:'Poppins'; font-size:22px; margin:1.8em 0 .6em; color:#0A2342; }
.prose-qualit ul { list-style: none; padding: 0; margin: 1.25em 0; }
.prose-qualit ul li { padding-left: 1.75em; position: relative; margin-bottom: .75em; }
.prose-qualit ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 1em; height: 1em; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8304' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center; }

/* ===========================================================
   Manual interno (.prose-manual) — formatação rica de tutorial
   =========================================================== */
.prose-manual {
  color: #2A2F3A;
  line-height: 1.75;
  font-size: 16px;
  max-width: 760px;
  font-family: 'Roboto', system-ui, sans-serif;
}
.prose-manual p,
.prose-manual li,
.prose-manual div,
.prose-manual span,
.prose-manual blockquote,
.prose-manual td,
.prose-manual th,
.prose-manual figcaption {
  font-family: 'Roboto', system-ui, sans-serif;
}

/* Parágrafos */
.prose-manual p {
  margin: 0 0 1.15em 0;
}
.prose-manual p:empty { display: none; }

/* Hierarquia de headings */
.prose-manual h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #0A2342;
  font-size: 28px;
  line-height: 1.25;
  margin: 2.5em 0 .8em;
  padding-bottom: .4em;
  border-bottom: 2px solid #E1E5EB;
  scroll-margin-top: 8rem;
}
.prose-manual h2:first-child { margin-top: 0; }
.prose-manual h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #0A2342;
  font-size: 21px;
  line-height: 1.3;
  margin: 2em 0 .6em;
  scroll-margin-top: 8rem;
}
.prose-manual h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #15315A;
  font-size: 17px;
  margin: 1.6em 0 .5em;
}

/* Strong com destaque sutil */
.prose-manual strong, .prose-manual b {
  color: #0A2342;
  font-weight: 600;
}

/* Listas com bullets laranja */
.prose-manual ul, .prose-manual ol {
  margin: 1em 0 1.5em;
  padding-left: 0;
}
.prose-manual ul {
  list-style: none;
}
.prose-manual ul li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: .55em;
}
.prose-manual ul li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF8304;
}
.prose-manual ol {
  counter-reset: ol-counter;
  list-style: none;
}
.prose-manual ol li {
  position: relative;
  padding-left: 2em;
  margin-bottom: .6em;
  counter-increment: ol-counter;
}
.prose-manual ol li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: .15em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #FFF5EC;
  color: #FF8304;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prose-manual li ul, .prose-manual li ol { margin: .5em 0; }
.prose-manual li > p { margin-bottom: .4em; }

/* Imagens em figure (geradas pelo extrator) */
.prose-manual figure {
  margin: 2em 0;
  text-align: center;
}
.prose-manual figure img,
.prose-manual > img,
.prose-manual p > img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #E1E5EB;
  box-shadow: 0 4px 16px rgba(10, 35, 66, .08);
  display: block;
  margin: 0 auto;
}
.prose-manual figcaption {
  font-size: 13px;
  color: #6B7280;
  margin-top: .6em;
  font-style: italic;
}

/* Links inline */
.prose-manual a {
  color: #B85800;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 88, 0, .3);
  transition: border-color .15s ease;
  word-break: break-word;
}
.prose-manual a:hover {
  border-bottom-color: #B85800;
}
.prose-manual a[target="_blank"]::after {
  content: " ↗";
  font-size: .85em;
  color: #9CA3AF;
}

/* Divisores e quebras */
.prose-manual hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #E1E5EB, transparent);
  margin: 2.5em 0;
}
.prose-manual br + br { display: none; }

/* Tabelas (com rolagem horizontal no mobile para não estourar o layout) */
.prose-manual table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E1E5EB;
}
@media (max-width: 640px) {
  .prose-manual table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.prose-manual th {
  background: #F7F8FA;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #0A2342;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #E1E5EB;
}
.prose-manual td {
  padding: 12px 16px;
  border-bottom: 1px solid #EEF0F4;
}
.prose-manual tr:last-child td { border-bottom: 0; }
.prose-manual tr:hover td { background: #F7F8FA; }

/* Blockquote */
.prose-manual blockquote {
  border-left: 4px solid #FF8304;
  background: #FFF5EC;
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #4B5563;
}

/* Inline code se tiver */
.prose-manual code {
  background: #F7F8FA;
  border: 1px solid #E1E5EB;
  padding: 2px 6px;
  border-radius: 5px;
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: #15315A;
}
.prose-manual pre {
  background: #0A2342;
  color: #E1E5EB;
  padding: 1em 1.25em;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 13px;
  margin: 1.5em 0;
}
.prose-manual pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

/* Limpa wrappers órfãos vindos do Elementor */
.prose-manual div:empty,
.prose-manual span:empty { display: none; }

/* ===========================================================
   Sumário lateral (TOC)
   =========================================================== */
[data-toc] a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid #EEF0F4;
  color: #6B7280;
  text-decoration: none;
  transition: color .15s, border-color .15s;
  line-height: 1.4;
}
[data-toc] a:hover,
[data-toc] a.is-active {
  color: #FF8304;
  border-left-color: #FF8304;
}
[data-toc] a.toc-h3 {
  padding-left: 24px;
  font-size: 13px;
}


/* Container mais largo em telas grandes (evita coluna estreita/"comprimida") — container-wide-fix */
@media (min-width: 1280px) { .container { max-width: 1360px !important; } }