/* --- BARRA DE PROGRESSO DE CARREGAMENTO --- */
#loadingBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: #7c3aed;
    z-index: 9999;
    animation: loading-fill 3s cubic-bezier(0.1, 0.05, 0.05, 1) forwards;
    transition: width 0.3s ease-out, opacity 0.4s ease;
}

@keyframes loading-fill {
    0%   { width: 0%; }
    50%  { width: 65%; }
    80%  { width: 80%; }
    100% { width: 86%; }
}

#loadingBar.loading-done {
    animation: none;
    width: 100% !important;
}

#loadingBar.loading-out {
    opacity: 0;
}

/* --- FADE-IN DO CONTEÚDO PRINCIPAL ---
   Os containers começam invisíveis e fadeiam quando o body recebe
   .content-ready (adicionado em core.js após o primeiro applyFilters).
   Evita o "aparecer do nada" quando os cards entram após o loading. */
#contentList,
#heroContainer,
#subAbaChipsContainer {
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.content-ready #contentList,
body.content-ready #heroContainer,
body.content-ready #subAbaChipsContainer {
    opacity: 1;
}

/* --- UTILITÁRIOS --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tamanho do conteúdo de leitura — variável compartilhada pelo reader
   (#contentPT) e Culto Mensal (#cultoMensalContent). Driven pela key
   localStorage 'modalFontSize' via setModalFontSize() em js/modal.js. */
#contentPT {
    font-size: var(--reading-fs, 18px);
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html {
    scroll-behavior: smooth;
}

/* --- BOTÕES DE MODO (Switch) --- */
.btn-mode-active {
    background-color: #000;
    color: #fff;
    /* Nordic: Lighter, more diffuse shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dark .btn-mode-active {
    background-color: #fff;
    color: #000;
}

.btn-mode-inactive {
    color: #9ca3af;
}

.dark .btn-mode-inactive {
    color: #6b7280;
}

.btn-mode-inactive:hover {
    color: #000;
}

.dark .btn-mode-inactive:hover {
    color: #fff;
}

/* --- ABAS (Underline Style) --- */
.tab-btn {
    transition: all 0.3s ease;
    padding-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    border-bottom-width: 2px;
    border-color: transparent;
    color: #9ca3af;
    font-family: 'Outfit', sans-serif;
}

.tab-btn:hover {
    color: #000;
}

.dark .tab-btn:hover {
    color: #fff;
}

/* --- A-Z FILTRO --- */
.btn-swiss-active {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.dark .btn-swiss-active {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}

/* --- MAPA CORPORAL (SPOTLIGHT REFORÇADO) --- */

.body-point {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 1. ESTADO NORMAL (Mouse fora do mapa) */
/* Pontos são Pretos (ou Brancos no dark) */
.body-point circle.visual {
    fill: #000;
    transition: fill 0.2s ease, opacity 0.2s ease;
}

.dark .body-point circle.visual {
    fill: #fff;
}

/* 2. MOUSE EM CIMA DE UM PONTO (via :has): Todos os pontos viram CINZA CLARO */
.diagram-svg:has(.body-point:hover) .body-point circle.visual {
    fill: #e5e5e5;
    opacity: 0.5;
}

.dark .diagram-svg:has(.body-point:hover) .body-point circle.visual {
    fill: #333;
}

/* 3. MOUSE EM CIMA DE UM PONTO: Ele vira ROXO e Opaco (Vence a regra anterior) */
.diagram-svg .body-point:hover circle.visual {
    fill: #7c3aed !important;
    /* Murasaki */
    opacity: 1 !important;
}

/* 4. PONTO ATIVO (CLICADO): Mantém Roxo mesmo se tirar o mouse */
.body-point.active circle.visual {
    fill: #7c3aed !important;
    opacity: 1 !important;
}

/* TEXTO DO MAPA */
.body-point text {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    /* Mouse ignora o texto */
    font-weight: 800;
    text-transform: uppercase;
    font-size: 7px;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
    fill: #000;
    text-anchor: middle;
}

.dark .body-point text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
    fill: #fff;
}

/* Texto aparece no Hover */
.body-point:hover text {
    opacity: 1;
}

/* --- TAGS --- */


/* --- TIPOGRAFIA (MODAL) --- */
.rich-text h3 {
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    font-family: 'Crimson Pro', 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 1.333em;
    letter-spacing: 0.02em;
    color: #000;
}

.dark .rich-text h3 {
    color: #fff;
}

.rich-text p {
    margin-bottom: 0;
    font-size: inherit;
    color: #374151;
    line-height: 1.9;
    font-family: 'Outfit', sans-serif;
}

.dark .rich-text p {
    color: #d1d5db;
}

.rich-text strong.qa-label {
    color: #000;
    font-weight: 700;
    margin-right: 0.5rem;
}

.dark .rich-text strong.qa-label {
    color: #fff;
}

.search-highlight {
    background-color: var(--highlight-bg, #fef08a);
    color: var(--highlight-text, #000);
    padding: 0 4px;
    border-radius: 2px;
    font-weight: 600;
}

/* ============================================================
   SEARCH MODAL (dedicated full-screen search) — minimal & airy
   ============================================================ */

.search-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99990;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dark .search-modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-modal {
    background: #fff;
    width: 100%;
    max-width: 640px;
    border-radius: 4px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transform: translateY(-8px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .search-modal {
    background: #0f0f0f;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
}

.search-modal-overlay.active .search-modal {
    transform: translateY(0);
}

.search-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: color 0.15s;
}

.search-close:hover {
    color: #000;
}

.dark .search-close:hover {
    color: #fff;
}

.search-header {
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dark .search-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.search-modal-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    font-size: 1.15rem;
    color: #111;
    outline: none;
    font-family: inherit;
    padding: 4px 32px 4px 0;
    cursor: text;
    letter-spacing: normal;
    text-transform: none;
}

.dark .search-modal-input {
    color: #f3f4f6;
}

.search-modal-input::placeholder {
    color: #bfbfbf;
    font-weight: 300;
}

.dark .search-modal-input::placeholder {
    color: #4b5563;
}

.search-filters {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 0.72rem;
    color: #9ca3af;
    flex-wrap: wrap;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
}

.filter-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: color 0.15s;
    user-select: none;
}

.filter-label:hover {
    color: #111;
}

.dark .filter-label:hover {
    color: #fff;
}

.filter-label input[type="radio"],
.filter-label input[type="checkbox"] {
    accent-color: #000;
    cursor: pointer;
    width: 12px;
    height: 12px;
    margin: 0;
}

.dark .filter-label input[type="radio"],
.dark .filter-label input[type="checkbox"] {
    accent-color: #fff;
}

.filter-exact {
    margin-left: auto;
}

.search-modal-count {
    font-size: 0.7rem;
    color: #9ca3af;
    padding: 10px 24px 4px;
    min-height: 1em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.dark .search-modal-count {
    color: #6b7280;
}

.search-results {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 8px;
    margin: 0;
    list-style: none;
}

.search-result-item {
    display: block;
    padding: 14px 24px;
    border: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
}

.search-result-item + .search-result-item,
.search-results li + li .search-result-item {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.dark .search-result-item + .search-result-item,
.dark .search-results li + li .search-result-item {
    border-top-color: rgba(255, 255, 255, 0.05);
}

.search-result-item:hover,
.search-result-item.is-focused {
    background: rgba(0, 0, 0, 0.02);
}

.dark .search-result-item:hover,
.dark .search-result-item.is-focused {
    background: rgba(255, 255, 255, 0.03);
}

.search-result-title {
    font-family: Georgia, 'Playfair Display', serif;
    font-size: 1.02rem;
    font-weight: 500;
    color: #111;
    line-height: 1.3;
    margin-bottom: 4px;
}

.dark .search-result-title {
    color: #f3f4f6;
}

.search-result-context {
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.dark .search-result-context {
    color: #6b7280;
}

.search-result-meta {
    font-size: 0.62rem;
    color: #bfbfbf;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    margin-top: 4px;
}

.dark .search-result-meta {
    color: #4b5563;
}

/* Subtle underline highlight — lighter than the yellow default */
.search-modal mark.search-highlight,
.search-preview-panel mark.search-highlight {
    background-color: transparent;
    color: #111;
    padding: 0;
    border-radius: 0;
    font-weight: 500;
    border-bottom: 1.5px solid #111;
}

.dark .search-modal mark.search-highlight,
.dark .search-preview-panel mark.search-highlight {
    color: #f3f4f6;
    border-bottom-color: #f3f4f6;
}

.search-loading,
.search-empty {
    padding: 40px 24px;
    text-align: center;
    color: #bfbfbf;
    font-size: 0.9rem;
    list-style: none;
}

.dark .search-loading,
.dark .search-empty {
    color: #4b5563;
}

.search-load-more {
    padding: 14px 24px;
    text-align: center;
    list-style: none;
}

.btn-load-more {
    background: transparent;
    color: #6b7280;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 6px 16px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.btn-load-more:hover {
    color: #111;
    border-color: #111;
}

.dark .btn-load-more {
    color: #9ca3af;
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .btn-load-more:hover {
    color: #fff;
    border-color: #fff;
}

.load-more-hint {
    display: block;
    font-size: 0.65rem;
    color: #bfbfbf;
    margin-top: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dark .load-more-hint {
    color: #4b5563;
}

@media (max-width: 767px) {
    .search-modal-overlay {
        padding: 5vh 12px 12px;
    }

    .search-modal {
        max-width: 100%;
        max-height: 85vh;
        border-radius: 8px;
    }

    .search-header {
        padding: 16px 42px 12px 16px;
        gap: 10px;
    }

    .search-modal-input {
        font-size: 1rem;
    }

    .search-filters {
        gap: 10px;
        font-size: 0.66rem;
    }

    .search-result-item {
        padding: 12px 16px;
    }

    .search-result-title {
        font-size: 0.98rem;
    }

    .search-result-context {
        font-size: 0.82rem;
    }

    .search-modal-count {
        padding: 8px 16px 4px;
    }
}

/* ============================================================
   SEARCH PREVIEW MODAL — full-content peek with highlights
   ============================================================ */

.search-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000; /* Above the search modal (99990) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-preview-overlay.hidden {
    display: none;
}

.search-preview-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dark .search-preview-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.search-preview-panel {
    position: relative;
    background: #fff;
    width: 92%;
    max-width: 680px;
    max-height: 86vh;
    border-radius: 4px;
    box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(10px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.search-preview-overlay.active .search-preview-panel {
    transform: translateY(0);
}

.dark .search-preview-panel {
    background: #0f0f0f;
    border-color: rgba(255, 255, 255, 0.08);
}

.search-preview-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: color 0.15s;
}

.search-preview-close:hover {
    color: #111;
}

.dark .search-preview-close:hover {
    color: #fff;
}

.search-preview-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 42px 40px 28px;
}

.search-preview-category {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #9ca3af;
    margin-bottom: 10px;
    font-weight: 500;
}

.dark .search-preview-category {
    color: #6b7280;
}

.search-preview-title {
    font-family: Georgia, 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #111;
    line-height: 1.25;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}

.dark .search-preview-title {
    color: #f5f5f5;
}

.search-preview-body {
    font-family: Georgia, 'Playfair Display', serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4b5563;
}

.dark .search-preview-body {
    color: #9ca3af;
}

.search-preview-body p {
    margin: 0 0 14px;
}

.search-preview-body p:last-child {
    margin-bottom: 0;
}

.search-preview-body h3 {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #9ca3af;
    margin: 22px 0 8px;
}

.dark .search-preview-body h3 {
    color: #6b7280;
}

.search-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.015);
}

.dark .search-preview-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.search-preview-back,
.search-preview-open {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    cursor: pointer;
    padding: 8px 14px;
    transition: opacity 0.15s, color 0.15s;
}

.search-preview-back {
    color: #9ca3af;
}

.search-preview-back:hover {
    color: #111;
}

.dark .search-preview-back:hover {
    color: #fff;
}

.search-preview-open {
    background: #111;
    color: #fff;
    border-radius: 2px;
    padding: 10px 18px;
}

.search-preview-open:hover {
    opacity: 0.88;
}

.dark .search-preview-open {
    background: #fff;
    color: #000;
}

@media (max-width: 767px) {
    .search-preview-panel {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .search-preview-scroll {
        padding: 36px 22px 20px;
    }

    .search-preview-title {
        font-size: 1.25rem;
    }

    .search-preview-body {
        font-size: 0.95rem;
    }

    .search-preview-footer {
        padding: 12px 16px;
    }
}

.focus-point-span {
    background-color: var(--focus-point-bg, #f3f4f6);
    color: var(--focus-point-text, #1f2937);
    font-weight: 600;
    padding: 0 4px;
    border-radius: 4px;
}

/* Font Sizes para controle */
.text-sm-mode p {
    font-size: 1rem !important;
}

.text-lg-mode p {
    font-size: 1.25rem !important;
}

/* --- ANIMAÇÃO MODAL (Fade + Scale) --- */
#modalCard {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: scale(0.98);
    /* Less movement */
}

#modalCard.open {
    opacity: 1;
    transform: scale(1);
}

#modalBackdrop {
    transition: opacity 0.3s ease;
}

#modalBackdrop.open {
    opacity: 1;
}

/* --- SCROLLBAR CUSTOMIZADO (Subtil) --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    /* Thin styling */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    /* gray-200 */
    border-radius: 4px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #374151;
    /* gray-700 */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #d1d5db;
    /* gray-300 */
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #4b5563;
    /* gray-600 */
}

/* --- TOOLTIP COM SETA (Clean Swedish Design) --- */
#bodyPointTooltip {
    /* Tailwind equivalents: fixed z-50 px-3 py-1.5 bg-white dark:bg-[#111] border border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-100 text-[10px] font-bold uppercase tracking-[0.15em] shadow-sm pointer-events-none transform -translate-x-1/2 -translate-y-full mb-3 */
    position: fixed;
    z-index: 50;
    padding: 0.375rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: #111827;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    pointer-events: none;
    transform: translate(-50%, -100%);
    margin-bottom: 0.75rem;
    /* Space for arrow */
    border-radius: 2px;
}

/* Seta (Arrow) - Fundo Branco */
#bodyPointTooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

/* Seta (Arrow) - Borda (para match com border-gray-200) */
#bodyPointTooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    /* 1px maior que ::after para criar borda */
    border-style: solid;
    border-color: #e5e7eb transparent transparent transparent;
    z-index: -1;
}

/* Dark Mode overrides */
.dark #bodyPointTooltip {
    background-color: #111111;
    border-color: #1f2937;
    /* gray-800 */
    color: #f3f4f6;
}

.dark #bodyPointTooltip::after {
    border-color: #111111 transparent transparent transparent;
}

.dark #bodyPointTooltip::before {
    border-color: #1f2937 transparent transparent transparent;
}


/* Expanded Clear Button Transitions */
/* Expanded Clear Button Transitions */
.clear-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Exit: ease-in */
    transition: all 0.4s ease-in;
}

.clear-search-btn .icon-wrapper {
    /* Exit: ease-in */
    transition: transform 0.4s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
}

.clear-search-btn .clear-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    /* Exit: ease-in */
    transition: all 0.4s ease-in;
    margin-left: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: translateX(20px);
}

.clear-search-btn.expanded {
    /* Enter: ease-out */
    transition: all 0.4s ease-out;
}

.clear-search-btn.expanded .icon-wrapper {
    transform: rotate(-180deg);
    /* Enter: ease-out */
    transition: transform 0.4s ease-out;
}

.clear-search-btn.expanded .clear-label {
    max-width: 120px;
    opacity: 1;
    margin-left: 0.5rem;
    transform: translateX(0);
    /* Enter: ease-out */
    transition: all 0.4s ease-out;
}

/* Clear Button Visibility Transition */
.clear-search-btn.btn-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Fast Exit for Tab Switching */
.clear-search-btn.fast-exit {
    transition: all 0.2s ease-out !important;
}

.clear-search-btn.fast-exit .icon-wrapper,
.clear-search-btn.fast-exit .clear-label {
    transition: all 0.2s ease-out !important;
}

/* Faded Input for Map Tab */
.input-faded {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Body Map Pulse Animation */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.animate-pulse-ring {
    animation: pulse-ring 2s infinite ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
}

/* Square Tooltips for Body Map */
.body-point-tooltip {
    border-radius: 0 !important;
    /* Square */
    position: relative;
    /* For triangle positioning */
    background-color: white !important;
    /* Force white background */
    color: black !important;
    /* Force black text */
    /* Nordic: Crisp border, minimal shadow */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Tooltip Triangle (Arrow) */
.body-point-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    /* At the bottom */
    left: 50%;
    margin-left: -5px;
    /* Center (half of width) */
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent;
    /* Match tooltip bg color (white) */
}

/* Ensure body map animations are not clipped */
#bodyMapContainer svg,
#bodyMapContainer div {
    overflow: visible !important;
}

/* Exception: condition list inside the sidebar must scroll */
#bodyMapContainer #bodyPointSidebarList {
    overflow-y: auto !important;
    max-height: 440px !important;
}

/* Tablet and Desktop: Use desktop layout for body maps (768px+) */
/* Tablet (768px+) Layout Adjustments */
@media (min-width: 768px) {

    /* Grid Structure for Tablet Body Map */
    #mobile-map-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.5rem;
        /* System spacing: gap-6 */
    }

    /* Helper Utilities */
    .tablet-show {
        display: block !important;
    }

}


/* Tablet Only (768px - 1023px) specific layouts if needed */
/* Handled by Tailwind arbitrary variants in ui-renderer.js now (min-[768px]) */

/* --- TTS HIGHLIGHT (Karaoke Mode) --- */
.highlight-speaking {
    background-color: #fef9c3;
    /* Yellow-100 */
    color: #000;
    border-radius: 4px;
    box-shadow: 0 0 0 4px #fef9c3;
    /* Expand highlight slightly */
    transition: background-color 0.2s ease;
}

.dark .highlight-speaking {
    background-color: #451a03;
    /* Amber-950/Brown */
    color: #fff;
    box-shadow: 0 0 0 4px #451a03;
}

/* --- COMPARE MODE: collapse to stacked on mobile --- */
@media (max-width: 639px) {
    #contentCompare {
        flex-direction: column !important;
    }
    #contentComparePT,
    #contentCompareJP {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--n-border);
        padding-bottom: 1.5rem;
    }
    #contentCompareJP {
        border-bottom: none;
    }
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    #modalCard {
        transition: none !important;
    }
    #modalBackdrop {
        transition: none !important;
    }
    .search-modal {
        transition: none !important;
        transform: none !important;
    }
    .body-point {
        transition: none !important;
    }
    .highlight-speaking {
        transition: none !important;
    }
    @keyframes pulse-ring {
        from, to { opacity: 0; }
    }
}

/* Sidebar search clear button (X) — consistent across browsers */
#guiaSidebarSearch::-webkit-search-cancel-button,
#guiaModalSearch::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 4l6 6M10 4l-6 6' stroke='%23999' stroke-width='1.5' stroke-linecap='round' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    opacity: .55;
    margin-left: 4px;
}
#guiaSidebarSearch::-webkit-search-cancel-button:hover,
#guiaModalSearch::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* ── Estudo Aprofundado — Q&A formatting ────────────────────────────────── */
.estudo-header {
    padding: 12px 0 16px;
    border-bottom: 1px solid #e8e4da;
    margin-bottom: 20px;
}
.estudo-section {
    padding: 16px 20px;
    border-radius: 8px;
    margin: 12px 0;
}
.estudo-pergunta {
    background: #f5f5f4;
}
.estudo-resposta {
    background: #fafaf8;
    border: 1px solid #e8e4da;
    font-style: italic;
    color: #555;
}
.estudo-section-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #888;
    margin-bottom: 8px;
    font-style: normal;
}
.dark .estudo-pergunta { background: #1a1a1a; }
.dark .estudo-resposta { background: #161616; border-color: #2a2520; color: #ccc; }
.dark .estudo-section-label { color: #888; }
.dark .estudo-header { border-bottom-color: #2a2520; }
.estudo-secao-heading {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e8e4da;
}
.estudo-secao-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.dark .estudo-secao-heading { border-top-color: #2a2520; }

/* ── Sub-aba separator in content list ─────────────────────────────── */
.sub-aba-heading {
    grid-column: 1 / -1;
    margin: 56px 0 4px;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    gap: 16px;
}
.sub-aba-heading::before {
    content: '';
    flex-shrink: 0;
    width: 3px;
    height: 22px;
    background: #b8963e;
    border-radius: 2px;
}
.sub-aba-heading span {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #1c1917;
}
.sub-aba-heading:first-child { margin-top: 8px; }
.dark .sub-aba-heading::before { background: #c9a84c; }
.dark .sub-aba-heading span { color: #e5e0d8; }

/* ── Categoria header (I., II., III. …) ─────────────────────── */
.categoria-header {
    grid-column: 1 / -1;
    margin: 40px 0 10px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.categoria-header-bar {
    flex-shrink: 0;
    width: 2px;
    height: 18px;
    background: #b8963e;
    border-radius: 2px;
    opacity: 0.85;
}
.categoria-header-text {
    font-family: 'Crimson Pro', 'Noto Serif JP', serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--n-text);
}
.categoria-header:first-child { margin-top: 12px; }
.dark .categoria-header-bar { background: #c9a84c; opacity: 0.9; }

@media (min-width: 768px) {
    .categoria-header { margin: 48px 0 12px; gap: 14px; }
    .categoria-header-bar { width: 3px; height: 22px; }
    .categoria-header-text { font-size: 1.25rem; }
}

/* ── Apostila: indicador sutil no menu mobile ────────────── */
.apostila-mobile-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(184, 150, 62, 0.1);
    color: #b8963e;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0.85;
}
.apostila-mobile-indicator:hover { background: rgba(184, 150, 62, 0.18); opacity: 1; }
.apostila-mobile-indicator.hidden { display: none; }
.apostila-mobile-indicator svg { opacity: 0.8; }
.dark .apostila-mobile-indicator { background: rgba(201, 168, 76, 0.12); color: #c9a84c; }
.dark .apostila-mobile-indicator:hover { background: rgba(201, 168, 76, 0.2); }
@media (min-width: 768px) { .apostila-mobile-indicator { display: none !important; } }

/* ── Apostila badge (legacy, kept for desktop tab) ───────── */
#apostilaBadge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: #b8963e;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--n-bg, #ffffff);
    pointer-events: none;
}
#apostilaBadge.hidden { display: none; }


/* Show source tab label when list contains cross-tab results (mapa, multi-tab search) */
#contentList.cross-tab-list .ci-cat {
    display: inline !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
#contentList.cross-tab-list .ci-header {
    justify-content: space-between;
}

/* === Essência — destaque editorial =================================== */
#essenciaCard {
    margin: 12px auto 16px;
    max-width: 1100px;
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(218, 165, 32, 0.06) 0%, rgba(218, 165, 32, 0.02) 100%);
    border: 1px solid rgba(218, 165, 32, 0.35);
    border-radius: 10px;
    position: relative;
    transition: padding 0.2s ease;
}
.dark #essenciaCard {
    background: linear-gradient(180deg, rgba(218, 165, 32, 0.10) 0%, rgba(218, 165, 32, 0.03) 100%);
    border-color: rgba(218, 165, 32, 0.45);
}
#essenciaCard.collapsed {
    padding: 8px 16px;
}
#essenciaCard .essencia-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b8860b;
    font-weight: 700;
    margin-bottom: 6px;
}
.dark #essenciaCard .essencia-label { color: #d4a843; }
#essenciaCard .essencia-title {
    font-size: 18px;
    font-weight: 600;
    margin: 4px 0 8px;
    line-height: 1.3;
}
#essenciaCard .essencia-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-color, #333);
    margin-bottom: 12px;
    white-space: pre-wrap;
}
.dark #essenciaCard .essencia-excerpt { color: #ccc; }
#essenciaCard .essencia-actions {
    display: flex;
    justify-content: flex-end;
}
#essenciaCard .essencia-cta {
    background: transparent;
    border: 1px solid rgba(218, 165, 32, 0.55);
    color: #b8860b;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
#essenciaCard .essencia-cta:hover {
    background: rgba(218, 165, 32, 0.12);
}
.dark #essenciaCard .essencia-cta { color: #d4a843; }
#essenciaCard .essencia-toggle {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    width: 28px;
    height: 28px;
    line-height: 1;
    border-radius: 4px;
}
#essenciaCard .essencia-toggle:hover {
    background: rgba(0,0,0,0.05);
    color: #555;
}
.dark #essenciaCard .essencia-toggle:hover { background: rgba(255,255,255,0.08); color: #ccc; }
#essenciaCard.collapsed .essencia-title,
#essenciaCard.collapsed .essencia-excerpt,
#essenciaCard.collapsed .essencia-actions {
    display: none;
}
#essenciaCard.collapsed .essencia-collapsed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 32px;
}
#essenciaCard:not(.collapsed) .essencia-collapsed-row {
    display: none;
}
#essenciaCard.collapsed .essencia-collapsed-row .label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b8860b;
    font-weight: 700;
    flex-shrink: 0;
}
#essenciaCard.collapsed .essencia-collapsed-row .title {
    font-size: 13px;
    color: var(--text-color, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
#essenciaCard.collapsed .essencia-collapsed-row .title:hover { text-decoration: underline; }
.dark #essenciaCard.collapsed .essencia-collapsed-row .title { color: #ccc; }

@media (max-width: 640px) {
    #essenciaCard {
        margin: 10px 12px 12px;
        padding: 14px 16px;
    }
    #essenciaCard .essencia-title { font-size: 16px; }
    #essenciaCard .essencia-excerpt { font-size: 13px; }
}

/* === Essência — modal de boas-vindas (welcome) ======================== */
#essenciaWelcomeOverlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.55);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 60px 16px;
    backdrop-filter: blur(8px);
    animation: essFadeIn 0.2s ease;
}
.dark #essenciaWelcomeOverlay {
    background: rgba(20,20,20,0.55);
}
@keyframes essFadeIn { from { opacity: 0; } to { opacity: 1; } }
#essenciaWelcomeCard {
    background: #fff;
    color: #1a1a1a;
    max-width: 1024px;
    width: 100%;
    border-radius: 12px;
    padding: 48px 64px 36px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    font-family: 'Crimson Pro', Georgia, serif;
    margin-bottom: 60px;
}
.dark #essenciaWelcomeCard {
    background: #161616;
    color: #ddd;
}
#essenciaWelcomeCard .ess-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
#essenciaWelcomeCard .ess-close:hover { background: rgba(0,0,0,0.06); color: #555; }
.dark #essenciaWelcomeCard .ess-close:hover { background: rgba(255,255,255,0.08); color: #ccc; }
#essenciaWelcomeCard .ess-logo {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 14px;
}
#essenciaWelcomeCard .ess-title {
    font-size: 1.75rem; /* ~28px @ 16, escala com slider global */
    font-weight: 600;
    text-align: center;
    margin: 8px auto 8px;
    line-height: 1.3;
    text-wrap: balance; /* auto-balanceia para evitar "viúvas" como uma palavra solta na última linha */
    max-width: 42ch; /* força quebra em ~2 linhas para títulos longos */
}
#essenciaWelcomeCard .ess-author {
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b8963e;
    font-family: system-ui, sans-serif;
    text-align: center;
    margin: 0 0 4px;
    font-weight: 600;
}
.dark #essenciaWelcomeCard .ess-author { color: #c9a84c; }
#essenciaWelcomeCard .ess-source {
    font-size: 0.8125rem; /* ~13px */
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #999;
    font-family: system-ui, sans-serif;
    text-align: center;
    margin: 0 0 28px;
}
.dark #essenciaWelcomeCard .ess-source { color: #888; }
#essenciaWelcomeCard .ess-content {
    font-size: 1.1875rem; /* ~19px */
    line-height: 1.75;
    text-align: justify;
}
#essenciaWelcomeCard .ess-content p {
    margin: 0 0 16px;
}
#essenciaWelcomeCard .ess-content p:last-child { margin-bottom: 0; }
#essenciaWelcomeCard .ess-content strong {
    font-weight: 700;
}
#essenciaWelcomeCard .ess-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.dark #essenciaWelcomeCard .ess-footer {
    border-top-color: rgba(255,255,255,0.08);
}
#essenciaWelcomeCard .ess-skip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: system-ui, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #888;
    user-select: none;
    transition: color 0.15s;
    min-height: 44px;
}
#essenciaWelcomeCard .ess-skip:hover { color: #555; }
.dark #essenciaWelcomeCard .ess-skip { color: #888; }
.dark #essenciaWelcomeCard .ess-skip:hover { color: #ccc; }
#essenciaWelcomeCard .ess-skip input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #b8b8b8;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
    margin: 0;
}
#essenciaWelcomeCard .ess-skip input[type="checkbox"]:hover { border-color: #888; }
#essenciaWelcomeCard .ess-skip input[type="checkbox"]:checked {
    background: #b8963e;
    border-color: #b8963e;
}
#essenciaWelcomeCard .ess-skip input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.dark #essenciaWelcomeCard .ess-skip input[type="checkbox"] { border-color: #555; }
.dark #essenciaWelcomeCard .ess-skip input[type="checkbox"]:hover { border-color: #888; }
.dark #essenciaWelcomeCard .ess-skip input[type="checkbox"]:checked {
    background: #c9a84c;
    border-color: #c9a84c;
}
#essenciaWelcomeCard .ess-close-bottom {
    background: transparent;
    border: none;
    color: #777;
    font-family: system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 12px 8px;
    min-height: 44px;
    cursor: pointer;
    transition: color 0.15s;
}
#essenciaWelcomeCard .ess-close-bottom:hover { color: #000; }
.dark #essenciaWelcomeCard .ess-close-bottom { color: #999; }
.dark #essenciaWelcomeCard .ess-close-bottom:hover { color: #fff; }

@media (max-width: 640px) {
    #essenciaWelcomeOverlay { padding: 30px 8px; }
    #essenciaWelcomeCard { padding: 36px 24px 28px; margin-bottom: 30px; }
    #essenciaWelcomeCard .ess-title { font-size: 1.5rem; /* ~24px */ }
    #essenciaWelcomeCard .ess-content { font-size: 1.125rem; /* ~18px */ line-height: 1.7; }
    #essenciaWelcomeCard .ess-source { font-size: 0.75rem; /* ~12px */ }
    #essenciaWelcomeCard .ess-footer {
        flex-direction: column-reverse;
        gap: 4px;
        align-items: center;
    }
    #essenciaWelcomeCard .ess-skip {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        min-height: 32px;
        opacity: 0.85;
    }
}

/* ── Hero block — citação editorial de abertura ───────── */
@keyframes hero-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-fade-in {
    animation: hero-reveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    background: #F5F1EA;
    padding: 1.75rem 2rem 1.5rem;
}
.dark .hero-fade-in {
    background: var(--n-surface, #181816);
}
.hero-deco-quote {
    display: block;
    font-family: 'Crimson Pro', 'Noto Serif JP', serif;
    font-size: 5.5rem;
    line-height: 0.72;
    color: var(--n-border, #E4E4E0);
    margin-bottom: -1.6rem;
    user-select: none;
    pointer-events: none;
}
.hero-body { position: relative; }
.hero-attr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1.2rem;
}
.hero-attr-line {
    display: block;
    width: 18px;
    height: 1px;
    background: var(--n-border2, #D4D4D0);
    flex-shrink: 0;
}

/* ── Veja Também — estilo nórdico ────────────────────── */
.related-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
}
.related-header::before,
.related-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--n-border, #E4E4E0);
}
.related-header span {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--n-muted, #8C8A86);
    white-space: nowrap;
}
.related-item {
    position: relative;
    padding: 0.85rem 0;
    border-top: 1px solid var(--n-border, #E4E4E0);
    overflow: hidden;
}
.related-item:last-child { border-bottom: 1px solid var(--n-border, #E4E4E0); }
.related-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--n-accent, #B8860B);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.related-item:hover::before { transform: scaleX(1); }
.related-title {
    font-family: 'Crimson Pro', 'Noto Serif JP', serif;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--n-text, #1C1C1A);
    transition: color 0.15s;
}
.related-arrow {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--n-border2, #D4D4D0);
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
    margin-top: 0.1rem;
}
.related-item:hover .related-arrow {
    color: var(--n-accent, #B8860B);
    transform: translateX(3px);
}
.related-cat {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--n-muted, #8C8A86);
    margin-top: 0.25rem;
    display: block;
}

/* ── Sub-aba dropdown editorial ─────────────────────── */
.sub-aba-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--n-text, #1C1C1A);
    padding: 0;
    transition: color 0.15s;
}
.sub-aba-trigger:hover { color: var(--n-accent, #B8860B); }
.sub-aba-chevron { color: var(--n-muted); transition: transform 0.2s ease; }

.sub-aba-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--n-surface, #FFFFFF);
    border: 1px solid var(--n-border, #E4E4E0);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    z-index: 150;
}
.sub-aba-dropdown.hidden { display: none; }

.sub-aba-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--n-border, #E4E4E0);
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--n-muted, #8C8A86);
    transition: color 0.15s, background 0.15s;
}
.sub-aba-opt:last-child { border-bottom: none; }
.sub-aba-opt:hover { color: var(--n-text, #1C1C1A); background: var(--n-accent-soft, rgba(155,114,9,0.04)); }
.sub-aba-opt.is-active { color: var(--n-accent, #B8860B); }

/* ════════════════════════════════════════════════════
   SUB-ABAS & MAPA — Editorial Hairline (nórdico)
   Sem caixas: numeração tabular + serif italic + linha
   1px que cresce sob o item ativo. Tipografia editorial
   pareada (Outfit + Crimson Pro) para contraste sans/serif.
   ════════════════════════════════════════════════════ */
.scope-tab {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: inherit;
}
.scope-tab-num {
    font: 600 11px/1 'Outfit', sans-serif;
    letter-spacing: 0.18em;
    color: var(--n-border2, #C9C2B8);
    font-variant-numeric: tabular-nums;
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.scope-tab-label {
    font: italic 400 16px/1.1 'Crimson Pro', serif;
    color: var(--n-muted, #8C8A86);
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.scope-tab:hover .scope-tab-label {
    color: var(--n-text, #1C1C1A);
}
.scope-tab.is-active .scope-tab-num {
    color: var(--n-accent, #B8860B);
}
.scope-tab.is-active .scope-tab-label {
    color: var(--n-text, #1C1C1A);
}
/* Desktop: super-aba já carrega seu próprio indicador (border-bottom 2px na
   cor da categoria). A regra adicional sob a sub-aba competia com aquele
   marcador e o usuário lia "a linha está sob o sub-aba" — mantemos só o
   contraste tipográfico (numeral âncora em accent + label em peso normal). */

/* Sub-aba desktop/tablet — labels editoriais em italic Crimson Pro
   com underline dourado fino sob o ativo. Sem pill, sem fundo —
   mesmo idioma do underline da super-aba, só refinado pra sub-nível. */
@media (min-width: 768px) {
    /* Min-height pra evitar pills/labels (absolutos) colarem na borda
       inferior do sticky chrome. */
    #tabScopeSwitcher {
        min-height: 50px;
    }
    #tabScopeSwitcher .scope-tab {
        padding: 6px 0;
        gap: 0;
        flex-shrink: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        position: relative;
        transition: color 160ms ease;
    }
    #tabScopeSwitcher .scope-tab-num {
        display: none;
    }
    #tabScopeSwitcher .scope-tab-label {
        font: italic 400 17px/1.1 'Crimson Pro', Georgia, serif;
        letter-spacing: 0;
        text-transform: none;
        color: var(--n-muted, #8C8A86);
        transition: color 160ms ease;
    }
    #tabScopeSwitcher .scope-tab:hover .scope-tab-label {
        color: var(--n-text, #1C1A17);
    }
    #tabScopeSwitcher .scope-tab.is-active .scope-tab-label {
        color: var(--n-text, #1C1A17);
    }
    .dark #tabScopeSwitcher .scope-tab.is-active .scope-tab-label {
        color: rgba(255, 252, 245, 0.94);
    }
    /* Underline dourado abaixo do label ativo — mesma família visual
       do indicador da super-aba, mais fino. */
    #tabScopeSwitcher .scope-tab.is-active::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 1.5px;
        background: var(--n-accent, #B8860B);
        display: block;
    }
}

/* Sub-aba mobile — sticky + headroom hide.
   top é setado por JS via --sub-tab-sticky-top (mede a altura real do
   header + main tabs). Scroll down → .is-hidden anima translateY(-100%)
   atrás do chrome. Scroll up → volta. */
@media (max-width: 767px) {
    #tabScopeSwitcherMobile {
        position: sticky;
        top: var(--sub-tab-sticky-top, 108px);
        z-index: 49;
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.08);
        transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
        will-change: transform;
    }
    .dark #tabScopeSwitcherMobile {
        background: rgba(10, 10, 10, 0.95);
        box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.4);
    }
    #tabScopeSwitcherMobile.is-hidden {
        transform: translateY(-100%);
    }
}

/* Mobile: botões retangulares com cantos sutis — clareza tátil sem perder o
   registro discreto. Numeração tabular preservada como acento, label em
   sans-serif semibold. Ativo: fundo dark, texto branco. */
@media (max-width: 767px) {
    #tabScopeSwitcherMobile {
        /* Padding em vez de margens — necessário pra que o bg/blur do
           estado sticky cubra a área toda (margens são transparentes). */
        padding: 1rem 0 0.5rem;
        margin: 0;
    }
    #tabScopeSwitcherMobile > div {
        gap: 0.5rem !important;
        padding: 0 1rem;
        justify-content: flex-start !important;
    }
    #tabScopeSwitcherMobile .scope-tab {
        padding: 10px 18px;
        gap: 0;
        flex-shrink: 0;
        border: 1px solid var(--n-border, #E5E1D8);
        border-radius: 3px;
        /* Theme-aware: usa surface; em tema escuro fica dark, em claro fica white */
        background: var(--n-bg, #fff);
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    }
    /* Mobile: numeral editorial vira ruído num botão retangular — esconde */
    #tabScopeSwitcherMobile .scope-tab-num {
        display: none;
    }
    #tabScopeSwitcherMobile .scope-tab-label {
        font: 600 13px/1 'Outfit', sans-serif;
        font-style: normal;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--n-text, #1C1C1A);
    }
    /* Light mode: pill ativo dark com texto invertido (alto contraste) */
    #tabScopeSwitcherMobile .scope-tab.is-active {
        background: var(--n-text, #1C1C1A);
        border-color: var(--n-text, #1C1C1A);
    }
    #tabScopeSwitcherMobile .scope-tab.is-active .scope-tab-num,
    #tabScopeSwitcherMobile .scope-tab.is-active .scope-tab-label {
        color: var(--n-bg, #fff);
    }
    /* Dark mode (Quiet/paper/etc): inversão pra branco fica gritante.
       Usa surface ligeiramente diferenciada + borda accent + texto normal. */
    .dark #tabScopeSwitcherMobile .scope-tab.is-active {
        background: var(--n-surface) !important;
        border-color: var(--n-accent) !important;
    }
    .dark #tabScopeSwitcherMobile .scope-tab.is-active .scope-tab-label {
        color: var(--n-text) !important;
    }
    /* Remove o sublinhado original — botão retangular não precisa */
    #tabScopeSwitcherMobile .scope-tab.is-active::after {
        display: none;
    }
}

/* Seta "↓ N ensinamentos" pulsando abaixo do mapa após filtrar um ponto */
@keyframes map-hint-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50%      { transform: translateY(3px); opacity: 1; }
}
.map-results-hint {
    animation: map-hint-bounce 1.4s ease-in-out infinite;
    cursor: pointer;
}
.map-results-hint:hover { opacity: 0.7; }
@keyframes scope-rule-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Botão Mapa — link tipográfico com hairline e seta animada */
.map-link {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    border-bottom: 1px solid var(--n-border, #DDD8CE);
    color: var(--n-muted, #8C8A86);
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.map-link:hover {
    color: var(--n-text, #1C1C1A);
    border-color: var(--n-text, #1C1C1A);
}
.map-link-label {
    font: italic 400 13px/1.1 'Crimson Pro', serif;
}
.map-link-arrow {
    font: 400 13px/1.1 'Outfit', sans-serif;
    font-style: normal;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.map-link:hover .map-link-arrow {
    transform: translateX(3px);
}


/* ════════════════════════════════════════════════════
   MOBILE NAV — Paleta nórdica: linho, pedra, grafite.
   Sem dourado no menu (mantido no conteúdo do site).
   Acessível: tipografia ≥18px, contraste real, hairlines
   visíveis, sem itálico em pontos de navegação.

   Vars locais (Nordic):
     --nv-paper:   #F2EFE8  fundo do sheet (linho-papel)
     --nv-card:    #FAF8F2  fundo dos cartões (paper white)
     --nv-stone:   #EAE5DC  fundo do item ativo (pedra clara)
     --nv-ink:     #1C1A17  texto primário (tinta quente)
     --nv-graph:   #3A3633  ícones / metalessência grafite
     --nv-mute:    rgba(28,26,23,0.62)  texto secundário
     --nv-line:    rgba(28,26,23,0.10)  hairline borders
   ════════════════════════════════════════════════════ */
.mobile-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    background: #F5F2EC;
    border: 1px solid rgba(28, 26, 23, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    color: #1C1A17;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s;
}
.dark .mobile-nav-trigger {
    background: #1F1E1B;
    border-color: rgba(255, 252, 245, 0.10);
    color: rgba(255, 252, 245, 0.94);
}
.mobile-nav-trigger:active {
    transform: translateY(0.5px);
    background: #ECE7DD;
    border-color: rgba(28, 26, 23, 0.20);
}
.dark .mobile-nav-trigger:active {
    background: #26241F;
    border-color: rgba(255, 252, 245, 0.18);
}

.mobile-nav-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3A3633;
    flex-shrink: 0;
}
.dark .mobile-nav-trigger-icon { color: rgba(255, 252, 245, 0.78); }

/* Sem mais .mobile-nav-trigger-word / .mobile-nav-trigger-divider;
   breadcrumb é agora o único texto do trigger. */
.mobile-nav-trigger-current {
    flex: 1;
    text-align: left;
    font: 400 17px/1.1 'Crimson Pro', Georgia, serif;
    letter-spacing: 0.005em;
    color: #1C1A17;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.dark .mobile-nav-trigger-current { color: rgba(255, 252, 245, 0.94); }

.mobile-nav-chevron {
    color: #3A3633;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    opacity: 0.75;
}
.dark .mobile-nav-chevron { color: rgba(255, 252, 245, 0.7); }

#mobileNavSheet {
    position: fixed;
    inset: 0;
    z-index: 200;
}
#mobileNavSheet.hidden { display: none; }

.mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.28s ease;
}
#mobileNavSheet.is-open .mobile-nav-backdrop {
    background: rgba(0,0,0,0.5);
}

.mobile-nav-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #F2EFE8;
    border-radius: 20px 20px 0 0;
    padding: 8px 22px max(24px, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 rgba(28, 26, 23, 0.06), 0 -20px 50px rgba(28, 26, 23, 0.12);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.dark .mobile-nav-panel {
    background: #16161A;
    box-shadow: 0 -1px 0 rgba(255, 252, 245, 0.06), 0 -20px 50px rgba(0,0,0,0.55);
}

#mobileNavSheet.is-open .mobile-nav-panel {
    transform: translateY(0);
}

.mobile-nav-handle {
    width: 32px; height: 3px;
    background: rgba(28, 26, 23, 0.16);
    border-radius: 2px;
    margin: 8px auto 4px;
}
.dark .mobile-nav-handle { background: rgba(255, 252, 245, 0.22); }

/* Header: "Sumário" hard-left em display serif + X discreto no canto
   superior direito. Sem decoração — quebra padrão de menu de app. */
.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 14px;
    margin-bottom: 0;
}

/* Título em italic display serif — personalidade tipográfica pura,
   sem decoração. Movimento Aesop / Norm Architects. */
.mobile-nav-title {
    font: italic 400 27px/1 'Crimson Pro', Georgia, serif;
    letter-spacing: 0.005em;
    color: #1C1A17;
    text-transform: none;
    margin: 0;
}
.dark .mobile-nav-title { color: rgba(255, 252, 245, 0.96); }

.mobile-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(28, 26, 23, 0.14);
    border-radius: 50%;
    color: #3A3633;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}
.mobile-nav-close:active {
    background: rgba(28, 26, 23, 0.06);
    border-color: rgba(28, 26, 23, 0.24);
}
.dark .mobile-nav-close {
    border-color: rgba(255, 252, 245, 0.16);
    color: rgba(255, 252, 245, 0.82);
}
.dark .mobile-nav-close:active {
    background: rgba(255, 252, 245, 0.06);
    border-color: rgba(255, 252, 245, 0.26);
}

/* iOS Settings style com paleta editorial. Cabeçalho de seção em
   CAPS small caps muted ACIMA do cartão (não dentro), inset à esquerda. */
.mobile-nav-group-label {
    font: 600 11px/1 'Outfit', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(28, 26, 23, 0.52);
    margin: 22px 14px 8px;
    padding: 0;
    border: none;
}
.mobile-nav-group-label:first-of-type { margin-top: 6px; }
.dark .mobile-nav-group-label {
    color: rgba(255, 252, 245, 0.55);
}
.mobile-nav-group-label.is-active-group {
    color: rgba(28, 26, 23, 0.78);
}
.dark .mobile-nav-group-label.is-active-group {
    color: rgba(255, 252, 245, 0.78);
}

/* Cartão paper-white sobre o linho do panel. Contraste sutil
   carrega o agrupamento; hairlines internos separam itens. */
.mobile-nav-group-items {
    display: flex;
    flex-direction: column;
    background: #FAF8F2;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 4px;
}
.dark .mobile-nav-group-items {
    background: #1B1B1F;
}

/* Item: linha tipográfica, sem card, com numeral romano à esquerda
   gerado via counter. Marca de bookmark (filete vertical) à esquerda
   quando ativo, sem fundo colorido. */
/* Item como linha dentro do cartão; hairline 1px entre itens
   (não no último). Padrão iOS Settings. */
.mobile-nav-item {
    position: relative;
    display: flex;
    align-items: baseline;
    width: 100%;
    min-height: 48px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(28, 26, 23, 0.06);
    padding: 13px 16px;
    cursor: pointer;
    text-align: left;
    color: #1C1A17;
    transition: background 0.15s ease, color 0.15s ease;
}
.dark .mobile-nav-item {
    color: rgba(255, 252, 245, 0.90);
    border-bottom-color: rgba(255, 252, 245, 0.06);
}
.mobile-nav-group-items > .mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-item:active {
    background: rgba(28, 26, 23, 0.05);
}
.dark .mobile-nav-item:active {
    background: rgba(255, 252, 245, 0.06);
}

/* Esconde o slot de check antigo — agora a marca é o filete lateral
   + peso do texto. Mantém o nó pra não quebrar o HTML render. */
.mobile-nav-item-check-slot {
    display: none;
}

.mobile-nav-item-label {
    flex: 1;
    font: 400 20px/1.25 'Crimson Pro', Georgia, serif;
    letter-spacing: 0.005em;
    color: inherit;
    min-width: 0;
}

/* Ativo: bolinha grafite à direita + label em peso 600. Sem bg
   tint nem stripe — sinaliza atual sem competir com o cartão. */
.mobile-nav-item.is-active .mobile-nav-item-label {
    color: #1C1A17;
    font-weight: 600;
}
.dark .mobile-nav-item.is-active .mobile-nav-item-label {
    color: rgba(255, 252, 245, 0.96);
}

.mobile-nav-item-check { display: none; }

.mobile-nav-item-current-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1C1A17;
    flex-shrink: 0;
    margin-left: 12px;
    align-self: center;
}
.dark .mobile-nav-item-current-dot { background: rgba(255, 252, 245, 0.88); }

.mobile-nav-item-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 7px;
    background: transparent;
    color: rgba(28, 26, 23, 0.55);
    border: 1px solid rgba(28, 26, 23, 0.18);
    border-radius: 999px;
    font: 500 10.5px/1 'Outfit', sans-serif;
    font-style: normal;
    letter-spacing: 0.06em;
    vertical-align: middle;
    transform: translateY(-2px);
}
.dark .mobile-nav-item-badge {
    color: rgba(255, 252, 245, 0.62);
    border-color: rgba(255, 252, 245, 0.20);
}