/* ===================================================
   Enciclopédia iW4 — componentes específicos
   Carregado DEPOIS de /assets/css/theme.css, reaproveitando seus tokens
   (--navy-*, --clay-*, --sage-*, --honey-*, --color-*, --r-*, --shadow-*,
   --dur-*, --ease-*). Aqui ficam só busca, catálogo e os blocos didáticos
   das páginas de verbete. Nav, rodapé, botões e cards vêm do tema.
   =================================================== */

/* ===== Busca ao vivo (livesearch) ===== */
.enc-search { position: relative; max-width: 620px; margin: 32px auto 0; }

.enc-search-field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--white);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-md);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.enc-search-field:focus-within { border-color: var(--clay-400); box-shadow: var(--shadow-lg); }

.enc-search-field > .material-icons {
    margin-left: 18px;
    color: var(--clay-500);
    font-size: 22px;
    flex-shrink: 0;
}

.enc-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--ink);
    padding: 16px 14px;
}

.enc-search-input::placeholder { color: var(--grey-400); }

.enc-search-clear {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--grey-400);
    padding: 8px 16px 8px 4px;
    display: none;
}
.enc-search-clear:hover { color: var(--clay-500); }
.enc-search.has-text .enc-search-clear { display: inline-flex; }

.enc-search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xl);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 50;
    padding: 6px;
    display: none;
    text-align: left;
}
.enc-search.open .enc-search-results { display: block; }

.enc-search-item {
    display: block;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--dur-fast) var(--ease-out);
}
.enc-search-item:hover,
.enc-search-item.active { background: var(--clay-50); }

.enc-search-item-title { font-size: 15px; font-weight: 600; color: var(--ink); display: block; }
.enc-search-item-title mark { background: var(--honey-100, #f6e7c8); color: inherit; padding: 0 1px; border-radius: 3px; }
.enc-search-item-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-600); }
.enc-search-item-desc { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.5; }

.enc-search-empty { padding: 20px 16px; text-align: center; color: var(--grey-500); font-size: 14px; }

/* ===== Lista de 10 sorteados ===== */
.enc-shuffle { max-width: var(--max-content); margin: 0 auto; text-align: center; }
.enc-shuffle-head {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--clay-600); margin-bottom: 20px;
}
.enc-shuffle-head .material-icons { font-size: 18px; color: var(--clay-500); }

.enc-shuffle-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.enc-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px 9px 12px;
    background: var(--warm-white);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--r-full);
    text-decoration: none;
    color: var(--color-text);
    font-size: 14px; font-weight: 500;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.enc-chip .material-icons { font-size: 18px; color: var(--clay-500); }
.enc-chip:hover { transform: translateY(-2px); border-color: var(--clay-300); color: var(--clay-700, var(--clay-600)); }

/* ===== Catálogo por categoria ===== */
.enc-cat { margin-top: 56px; }
.enc-cat:first-of-type { margin-top: 0; }
.enc-cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.enc-cat-icon {
    width: 46px; height: 46px; border-radius: var(--r-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    box-shadow: var(--shadow-sm);
}
.enc-cat-icon .material-icons { color: var(--white); font-size: 24px; }
.enc-cat-title { font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.enc-cat-count { font-size: 13px; color: var(--grey-500); font-weight: 500; }

/* badge de categoria dentro do card do catálogo */
.enc-card-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-600); margin-bottom: 8px; display: block; }

/* ===== Página de verbete: trilha ===== */
.enc-breadcrumb { font-size: 13px; color: var(--grey-500); margin-bottom: 22px; }
.enc-breadcrumb a { color: var(--grey-600); text-decoration: none; }
.enc-breadcrumb a:hover { color: var(--clay-600); }
.enc-breadcrumb .sep { margin: 0 8px; color: var(--grey-300); }

/* badge de categoria no hero do verbete */
.enc-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px 6px 10px;
    border: 1px solid var(--clay-200); border-radius: var(--r-full);
    background: var(--clay-50);
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--clay-600); margin-bottom: 20px;
}
.enc-badge .material-icons { font-size: 16px; color: var(--clay-500); }

/* ===== Corpo do artigo ===== */
.enc-article { max-width: 760px; margin: 0 auto; padding: 8px 0 24px; }
.enc-article > * + * { margin-top: 22px; }

.enc-article p { font-size: 17px; line-height: 1.8; color: var(--color-text); }
.enc-article h2 {
    font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; color: var(--ink);
    letter-spacing: -0.02em; margin-top: 48px; line-height: 1.25;
    padding-bottom: 10px; border-bottom: 1px solid var(--color-border);
}
.enc-article h3 { font-size: 20px; font-weight: 700; color: var(--navy-800); margin-top: 32px; }
.enc-article ul, .enc-article ol { padding-left: 22px; }
.enc-article li { font-size: 17px; line-height: 1.75; color: var(--color-text); margin-top: 8px; }
.enc-article a:not(.enc-chip):not(.btn-primary):not(.btn-ghost) { color: var(--clay-600); text-decoration: underline; text-underline-offset: 2px; }
.enc-article strong { color: var(--navy-900); font-weight: 700; }

/* "Em resumo" (TL;DR para leigos) */
.enc-resumo {
    background: linear-gradient(135deg, var(--clay-50), var(--off-white));
    border: 1px solid var(--clay-100);
    border-left: 4px solid var(--clay-400);
    border-radius: var(--r-md);
    padding: 22px 26px;
}
.enc-resumo-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--clay-600); margin-bottom: 8px;
}
.enc-resumo-label .material-icons { font-size: 16px; }
.enc-resumo p { font-size: 16.5px; line-height: 1.7; color: var(--grey-700); margin: 0; }

/* Definição técnica (callout-citação) */
.enc-defina {
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--r-md);
    padding: 22px 26px;
}
.enc-defina-term { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-600); margin-bottom: 6px; }
.enc-defina p { font-size: 17px; line-height: 1.75; color: var(--navy-900); margin: 0; }

/* Callouts temáticos */
.enc-callout { border-radius: var(--r-md); padding: 18px 22px; border: 1px solid; display: flex; gap: 14px; align-items: flex-start; }
.enc-callout .material-icons { flex-shrink: 0; font-size: 22px; margin-top: 1px; }
.enc-callout p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.enc-callout-title { font-weight: 700; display: block; margin-bottom: 3px; }
.enc-callout--nota { background: var(--dusty-50, #eef2f8); border-color: var(--navy-100); color: var(--navy-800); }
.enc-callout--nota .material-icons { color: var(--dusty-500); }
.enc-callout--evidencia { background: var(--sage-100); border-color: #cdddcc; color: #34503a; }
.enc-callout--evidencia .material-icons { color: var(--sage-600); }
.enc-callout--atencao { background: #fbf2dd; border-color: #ecd9ab; color: #6e5215; }
.enc-callout--atencao .material-icons { color: var(--honey-600); }

/* Figura / ilustração SVG */
.enc-figure {
    margin: 12px 0;
    background: var(--warm-white);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-xs);
    text-align: center;
}
.enc-figure svg { max-width: 100%; height: auto; }
.enc-figcaption { font-size: 13px; color: var(--grey-500); margin-top: 14px; line-height: 1.6; }

/* Chips de termos-chave inline */
.enc-termos { display: flex; flex-wrap: wrap; gap: 8px; }
.enc-termo {
    display: inline-flex; align-items: center;
    padding: 5px 13px; border-radius: var(--r-full);
    background: var(--off-white); border: 1px solid var(--color-border-strong);
    font-size: 13px; color: var(--grey-700);
}

/* ===== Quiz ===== */
.enc-quiz {
    background: var(--warm-white);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px 28px;
}
.enc-quiz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.enc-quiz-head .material-icons { color: var(--clay-500); }
.enc-quiz-head h3 { margin: 0; font-size: 19px; color: var(--ink); }
.enc-quiz-sub { font-size: 14px; color: var(--color-text-muted); margin-bottom: 20px; }

.enc-quiz-progress { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 14px; }
.enc-quiz-question { font-size: 18px; font-weight: 600; color: var(--navy-900); line-height: 1.5; margin-bottom: 18px; }

.enc-quiz-opts { display: grid; gap: 12px; }
.enc-quiz-opt {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    padding: 15px 18px;
    background: var(--white);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--r-md);
    font-family: var(--font-sans); font-size: 15.5px; color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.enc-quiz-opt:hover:not(:disabled) { border-color: var(--clay-300); transform: translateY(-1px); }
.enc-quiz-opt .marker {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    background: var(--off-white); color: var(--grey-600);
    font-size: 13px; font-weight: 700;
}
.enc-quiz-opt .material-icons { font-size: 20px; margin-left: auto; opacity: 0; }
.enc-quiz-opt.correct { border-color: var(--sage-500); background: var(--sage-100); color: #2f4a35; }
.enc-quiz-opt.correct .marker { background: var(--sage-500); color: #fff; }
.enc-quiz-opt.correct .material-icons { opacity: 1; color: var(--sage-600); }
.enc-quiz-opt.wrong { border-color: #d98c7a; background: #f7e3da; color: #7a3322; }
.enc-quiz-opt.wrong .marker { background: var(--clay-500); color: #fff; }
.enc-quiz-opt.wrong .material-icons { opacity: 1; color: var(--clay-600); }
.enc-quiz-opt:disabled { cursor: default; }

.enc-quiz-feedback {
    margin-top: 16px; padding: 14px 18px; border-radius: var(--r-md);
    font-size: 14.5px; line-height: 1.65; display: none;
}
.enc-quiz-feedback.show { display: block; }
.enc-quiz-feedback.ok { background: var(--sage-100); color: #34503a; border: 1px solid #cdddcc; }
.enc-quiz-feedback.no { background: #fbf2dd; color: #6e5215; border: 1px solid #ecd9ab; }

.enc-quiz-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 12px; }
.enc-quiz-result { text-align: center; }
.enc-quiz-result .score { font-size: 44px; font-weight: 800; color: var(--clay-500); line-height: 1; }
.enc-quiz-result .label { font-size: 14px; color: var(--color-text-muted); margin-top: 8px; }

/* ===== Flashcards (vira-vira) ===== */
.enc-flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.enc-flip {
    background: transparent; border: none; padding: 0; cursor: pointer;
    perspective: 1000px; height: 150px; font-family: var(--font-sans); text-align: left;
}
.enc-flip-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform var(--dur-slow) var(--ease-spring); transform-style: preserve-3d;
}
.enc-flip.flipped .enc-flip-inner { transform: rotateY(180deg); }
.enc-flip-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: var(--r-md); padding: 20px; display: flex; flex-direction: column; justify-content: center;
    border: 1px solid var(--color-border); box-shadow: var(--shadow-xs);
}
.enc-flip-front { background: var(--warm-white); }
.enc-flip-front .term { font-size: 17px; font-weight: 700; color: var(--navy-900); }
.enc-flip-front .hint { font-size: 12px; color: var(--grey-500); margin-top: auto; display: inline-flex; align-items: center; gap: 5px; }
.enc-flip-front .hint .material-icons { font-size: 15px; }
.enc-flip-back { background: linear-gradient(135deg, var(--navy-800), var(--navy-700)); color: #fff; transform: rotateY(180deg); }
.enc-flip-back .def { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.94); }

/* ===== Explorador por abas ===== */
.enc-toggle { background: var(--warm-white); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.enc-toggle-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; background: var(--off-white); border-bottom: 1px solid var(--color-border); }
.enc-toggle-tab {
    flex: 1; min-width: 90px; padding: 10px 14px; border: none; background: transparent; cursor: pointer;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--grey-600);
    border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.enc-toggle-tab:hover { color: var(--clay-600); }
.enc-toggle-tab.active { background: var(--white); color: var(--navy-900); box-shadow: var(--shadow-xs); }
.enc-toggle-panel { padding: 24px 26px; display: none; }
.enc-toggle-panel.active { display: block; animation: enc-fade var(--dur-mid) var(--ease-out); }
.enc-toggle-panel h4 { font-size: 16px; color: var(--navy-900); margin-bottom: 8px; }
.enc-toggle-panel p { font-size: 15.5px; line-height: 1.7; color: var(--color-text); }

@keyframes enc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Referências e aviso ===== */
.enc-refs { background: var(--off-white); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 22px 26px; }
.enc-refs h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-600); margin-bottom: 12px; }
.enc-refs ol { padding-left: 20px; }
.enc-refs li { font-size: 13.5px; line-height: 1.6; color: var(--grey-600); margin-top: 8px; }

.enc-disclaimer {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 13px; line-height: 1.65; color: var(--grey-500);
    background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--r-md);
    padding: 16px 18px;
}
.enc-disclaimer .material-icons { font-size: 19px; color: var(--grey-400); flex-shrink: 0; }

/* ===== Verbetes relacionados ===== */
.enc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ===== Banner / carrossel (em todas as páginas de verbete) ===== */
.enc-banner-section { padding: 16px 32px 8px; }
.enc-banner { max-width: var(--max-content); margin: 0 auto; }
.enc-banner-eyebrow {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--clay-600); margin-bottom: 14px;
}
.enc-banner-eyebrow .material-icons { font-size: 17px; color: var(--clay-500); }

.enc-carousel { position: relative; border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.enc-carousel-viewport { overflow: hidden; border-radius: var(--r-xl); }
.enc-carousel-track { display: flex; transition: transform var(--dur-slow) var(--ease-out); will-change: transform; }

.enc-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 40px 52px;
    display: flex; align-items: center; gap: 28px;
    color: #fff;
}
.enc-slide--navy  { background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); }
.enc-slide--clay  { background: linear-gradient(135deg, var(--clay-600), var(--clay-400)); }
.enc-slide--sage  { background: linear-gradient(135deg, var(--sage-600), #5f7a64); }
.enc-slide--honey { background: linear-gradient(135deg, var(--honey-600), #b98a3e); }

.enc-slide-icon {
    flex-shrink: 0;
    width: 76px; height: 76px; border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.enc-slide-icon .material-icons { font-size: 38px; color: #fff; }

.enc-slide-body { flex: 1; min-width: 0; }
.enc-slide-tag {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-bottom: 6px;
}
.enc-slide-title { font-size: clamp(19px, 2.6vw, 24px); font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -0.01em; }
.enc-slide-text { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); margin-top: 8px; max-width: 56ch; }
.enc-slide-cta {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
    padding: 11px 22px; border-radius: var(--r-full);
    background: #fff; color: var(--navy-900);
    font-size: 14px; font-weight: 700; text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.enc-slide-cta .material-icons { font-size: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.enc-slide-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.enc-slide-cta:hover .material-icons { transform: translateX(3px); }

.enc-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: var(--r-full);
    border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.9); color: var(--navy-900);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.enc-carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.enc-carousel-arrow.prev { left: 14px; }
.enc-carousel-arrow.next { right: 14px; }

.enc-carousel-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.enc-carousel-dot {
    width: 9px; height: 9px; border-radius: var(--r-full); border: none; cursor: pointer; padding: 0;
    background: rgba(255, 255, 255, 0.5); transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.enc-carousel-dot.active { background: #fff; width: 22px; }

@media (max-width: 640px) {
    .enc-banner-section { padding: 12px 20px 4px; }
    .enc-slide { flex-direction: column; text-align: center; gap: 16px; padding: 32px 28px 44px; }
    .enc-slide-text { margin-left: auto; margin-right: auto; }
    .enc-carousel-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .enc-carousel-track { transition: none; }
}

/* ===== Animações utilitárias ===== */
.enc-draw path, .enc-draw line, .enc-draw circle, .enc-draw rect, .enc-draw polyline {
    stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
    animation: enc-draw 1.8s var(--ease-out) forwards;
}
@keyframes enc-draw { to { stroke-dashoffset: 0; } }

.enc-pulse { animation: enc-pulse 2.4s var(--ease-out) infinite; transform-origin: center; }
@keyframes enc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(1.06); } }

/* ===== Responsivo ===== */
@media (max-width: 900px) {
    .enc-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .enc-article p, .enc-article li { font-size: 16px; }
    .enc-related-grid { grid-template-columns: 1fr; }
    .enc-flip-grid { grid-template-columns: 1fr 1fr; }
    .enc-search-input { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .enc-draw path, .enc-draw line, .enc-draw circle, .enc-draw rect, .enc-draw polyline { animation: none; stroke-dashoffset: 0; }
    .enc-pulse { animation: none; }
    .enc-flip-inner { transition: none; }
}