/* ============================================
   MEXPLICA - style.css
   fontes: Nimbus Sans (titulos) + Inter (corpo)
   esse style.css é o arquivo principal de estilos do projeto, onde estao organizados os estilos globais, do layout e de cada seção da(s) pagina(s)
   ============================================ */

/* fonte inter importada do google fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


@font-face {
    font-family: 'Nimbus Sans';
    src: url('fonts/NimbusSanL-Bol.otf') format('otf');
    font-weight: 700;
}

@font-face {
    font-family: 'Nimbus Sans Regular';
    src: url('fonts/NimbusSans-Regular.otf') format('otf');
    font-weight: 400;
}

/* reset basico */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #111111;
    background: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.font-large {
    font-size: 19px;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* layout */
.container {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 32px;
}


/* HEADER // NAV */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid #e8e8e8;
}

.nav {
    display: flex;
    align-items: center;
    height: 58px;
    gap: 0;
}

.nav-logo {
    flex-shrink: 0;
    margin-right: 48px;
}

.logo-icon {
    height: 34px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 36px;
    flex: 1;
}

.nav-links a {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #111111;
    transition: color 0.18s ease;
}

.nav-links a:hover {
    color: #7B6EF6;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn-acessar {
    background: #7B6EF6;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.18s ease;
    border: 1px solid #111;
}

.btn-acessar:hover {
    background: #3a318a;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    margin-left: auto;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #111111;
    border-radius: 2px;
}


/* HERO SECTION */

.hero-section {
    padding: 36px 0 32px;
    text-align: center;
    background: #ffffff;
}

.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

/* BOTOES DE ACESSIBILIDADE */
.accessibility-bar {
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
    max-width: 780px;
}

.acc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 13px 20px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: opacity 0.18s ease;
    border: 1px solid #111;
}

.acc-btn:hover {
    opacity: 0.88;
}

.acc-btn img {
    width: 16px;
    height: 16px;
}

.acc-btn svg {
    flex-shrink: 0;
}

.acc-blue {
    background: #7B6EF6;
    color: #ffffff;
}

.acc-purple {
    background: #7B6EF6;
    color: #ffffff;
}

/* HERO LOGO */
.hero-logo {
    margin-top: 4px;
}

.hero-logo-img {
    width: 130px;
    height: 145px;
    object-fit: contain;
    margin: 0 auto;
}

/* TITULO HERO */
.hero-title {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 38px;
    font-weight: 500;
    color: #111111;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* SEARCH BOX */
.search-box {
    width: 100%;
    max-width: 780px;
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px solid #cccccc;
    overflow: hidden;
}

.search-box:focus-within {
    border-color: #7B6EF6;
    box-shadow: 0 0 0 3px rgba(123, 110, 246, 0.1);
}

.search-input-wrap {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    gap: 12px;
}

.search-icon-img {
    width: 20px;
    height: 20px;
    opacity: 0.45;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #111111;
    background: transparent;
}

.search-input::placeholder {
    color: #999999;
}

.search-voice-btn {
    color: #555555;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.18s;
}

.search-voice-btn:hover {
    color: #7B6EF6;
}

.search-options {
    display: flex;
    gap: 8px;
    padding: 8px 14px 12px;
    border-top: 1px solid #eeeeee;
}

.search-opt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid #cccccc;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #444444;
    background: #ffffff;
    transition: border-color 0.18s, color 0.18s;
}

.search-opt-btn:hover {
    border-color: #7B6EF6;
    color: #7B6EF6;
}

/* CARDS DE CONTATO */
.contact-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 780px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 24px;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    border: 1px solid #111;
}

.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-phone {
    background: #7B6EF6;
}

.card-chat {
    background: #7B6EF6;
}

.card-icon-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.card-text strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 3px;
}

.card-text p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}


/* SECTION MAIS PESQUISADOS */

.most-searched-section {
    background: #dddaf5;
    padding: 52px 0 56px;
    margin-top: 0;
}

.section-header {
    text-align: center;
    margin-bottom: 32px;
}

.section-icon-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin: 0 auto 16px;
}

.section-header h2 {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 36px;
    font-weight: 500;
    color: #111111;
    max-width: 780px;
    margin: 0 auto 10px;
    line-height: 1.2;
}

.section-subtitle {
    font-family: 'Inter', sans-serif;
    color: #333333;
    font-size: 15px;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.55;
}

/* LEGEND BAR */
.legend-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border-radius: 9999px;
    padding: 10px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #111111;
    border: 1.5px solid #e8e8e8;
    min-width: 200px;
    flex: 1;
    max-width: 340px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* FILTER BAR */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: transparent;
    color: #111111;
    border: 2px solid #111111;
    transition: all 0.18s ease;
}

.filter-btn:hover {
    background: #111111;
    color: #ffffff;
}

.filter-btn-outline {
    background: #7B6EF6;
    color: #ffffff;
    border: 2px solid #7B6EF6;
}

.filter-btn-outline:hover {
    background: #5A50C8;
    border-color: #5A50C8;
}

/* GRID DE TOPICOS */
.topic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.topic-card {
    border-radius: 24px;
    padding: 22px 24px 24px;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border: 1.5px solid #e8e8e8;
}

.topic-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.topic-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-bottom: 10px;

}

.topic-card h3 {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 23px;
    font-weight: 500;
    color: #111111;
    margin-bottom: 6px;
    line-height: 1.3;
}

.topic-card p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.45;
}

.topic-green { background: #ffffff; color: #000; }
.topic-red   { background: #ffffff; color: #000; }
.topic-blue  { background: #ffffff; color: #000; }


/* SECTION DE COLABORADORES */
.collab-section {
    padding: 56px 0 60px;
    background: #ffffff;
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 28px;
}

/* STEP CARDS */
.step-card {
    background: #ffffff;
    border: 1.5px solid #e8e8e8;
    border-radius: 16px;
    padding: 24px 24px 20px;
    color: #111111;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.step-blue,
.step-green,
.step-red {
    background: #ffffff;
}

.step-topic-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 4px;
}

.step-card h3 {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #111111;
    line-height: 1.3;
    margin-bottom: 2px;
}

.step-card p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #666666;
    line-height: 1.5;
}

/* ================================================
   PRINT DA TELA - container e imagem
   melhorias de qualidade: sem compressão extra,
   rendering otimizado, transição suave ao trocar tema
   ================================================ */
.step-print {
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 6px;
    background: #f5f5f7;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.step-print img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: opacity 0.3s ease;
    image-rendering: auto;
}


/* FOOTER */
.footer {
    background: #ffffff;
    color: #333333;
    padding: 48px 0 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 0;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 36px;
    gap: 32px;
}

/* LOGO MEXPLICA COMPLETA */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.footer-logo-icon {
    height: 80px;
    width: auto;
}

.footer-logo {
    display: none;
}

.footer-columns {
    display: flex;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-col h4 {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #333333;
    margin-bottom: 14px;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col a {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #555555;
    letter-spacing: 0.03em;
    transition: color 0.15s;
}

.footer-col a:hover {
    color: #7B6EF6;
}

.footer-copy {
    text-align: center;
    padding: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #aaaaaa;
    border-top: 1px solid #eeeeee;
    width: 100%;
}


/* PAGINA DE AUTENTICAÇÃO - CADASTRO.HTML */
/* =========================================== */

.auth-page {
    background: #f5f5f7;
    min-height: 100vh;
}

.auth-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 24px 80px;
}

.auth-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hidden {
    display: none !important;
}

/* BOTAO DE VOLT */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #7B6EF6;
    color: #ffffff;
    padding: 7px 16px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 28px;
    transition: background 0.18s, transform 0.18s;
    cursor: pointer;
    border: none;
}

.back-btn:hover {
    background: #5A50C8;
    transform: translateX(-2px);
}

/* LOGO AUTH */
.auth-logo {
    text-align: center;
    margin-bottom: 20px;
}

.auth-logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 auto;
}

.success-logo img {
    animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
    0%   { transform: scale(0.7); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* TITULO DA PAGINA DE AUTENTICAÇAO */
.auth-title {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.2;
    color: #111111;
}

.auth-subtitle {
    font-family: 'Inter', sans-serif;
    color: #666666;
    font-size: 15px;
    text-align: center;
    max-width: 380px;
    margin: 0 auto 28px;
    line-height: 1.5;
}

/* TOGGLE DE METODO DE AUTENTICAÇAO */
.auth-method-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    justify-content: center;
    flex-wrap: wrap;
}

.method-btn {
    padding: 9px 20px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #cccccc;
    color: #555555;
    background: #ffffff;
    transition: all 0.18s;
    cursor: pointer;
}

.method-btn:hover {
    border-color: #7B6EF6;
    color: #7B6EF6;
}

.method-active {
    background: #7B6EF6;
    border-color: #7B6EF6;
    color: #ffffff !important;
}

/* FORMULARIO DE AUTENTICAÇAO */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-input {
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    border: 1.5px solid #cccccc;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #111111;
    background: #ffffff;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    appearance: none;
}

.auth-input:focus {
    border-color: #7B6EF6;
    box-shadow: 0 0 0 3px rgba(123, 110, 246, 0.12);
}

.auth-input::placeholder {
    color: #999999;
}

.auth-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 40px;
}

.input-error {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #D94F4F;
    min-height: 16px;
    margin-top: -4px;
    padding-left: 8px;
}

.auth-continue-btn {
    width: 100%;
    padding: 15px;
    border-radius: 999px;
    background: #7B6EF6;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
    margin-top: 4px;
}

.auth-continue-btn:hover {
    background: #5A50C8;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(123, 110, 246, 0.3);
}

.auth-help-link {
    text-align: center;
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #555555;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
    margin-top: 4px;
}

.auth-help-link:hover {
    color: #7B6EF6;
}

.collab-info-link {
    color: #7B6EF6;
    font-weight: 700;
    text-decoration: none;
    border: none;
    margin-bottom: 0;
}

.collab-info-link:hover {
    text-decoration: underline;
}

/* ESCOLHA DO COLABORADOR */
.collab-choice {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 14px 0 22px;
    flex-wrap: wrap;
}

.collab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    border: none;
}

.collab-yes {
    background: #7B6EF6;
    color: #ffffff;
}

.collab-yes:hover {
    background: #5A50C8;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(123, 110, 246, 0.3);
}

.collab-no {
    background: #E05C5C;
    color: #ffffff;
}

.collab-no:hover {
    background: #C04040;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(224, 92, 92, 0.3);
}

/* ============================================
   MODO ESCURO
   dois niveis: dark-blue (tipo twitter antigamente)
   controlados por classes no body via JS
   todas as transiçoes sao suaves para nao agredir os olhos
   ============================================ */

body {
    transition: background 0.3s ease, color 0.3s ease;
}


/* ------------------------------------------
   NIVEL 1: DARK-BLUE
   fundo #0f1923, cards #1a2535
   ------------------------------------------ */

body.dark-blue {
    background: #0f1923;
    color: #e8eaf0;
}

body.dark-blue .header {
    background: #0f1923;
    border-bottom-color: #1e2d3d;
}

body.dark-blue .nav-links a {
    color: #c8d0dc;
}

body.dark-blue .btn-acessar {
    background: #7B6EF6;
    color: #e8eaf0;
}

body.dark-blue .btn-acessar:hover {
    background: #3a318a;
}

body.dark-blue .avatar-placeholder {
    background: #1e2d3d;
    border-color: #2a3f52;
}

body.dark-blue .nav-toggle span {
    background: #e8eaf0;
}

body.dark-blue .nav-links.open {
    background: #0f1923;
    border-bottom-color: #1e2d3d;
}

body.dark-blue .hero-section {
    background: #0f1923;
}

body.dark-blue .hero-title {
    color: #e8eaf0;
}

body.dark-blue .search-box {
    background: #1a2535;
    border-color: #2a3f52;
}

body.dark-blue .search-input {
    color: #e8eaf0;
    background: transparent;
}

body.dark-blue .search-input::placeholder {
    color: #5a7a96;
}

body.dark-blue .search-options {
    border-top-color: #2a3f52;
}

body.dark-blue .search-opt-btn {
    background: #1a2535;
    border-color: #2a3f52;
    color: #8eacc4;
}

body.dark-blue .search-opt-btn:hover {
    border-color: #7B6EF6;
    color: #a89ef8;
}

body.dark-blue .search-voice-btn {
    color: #5a7a96;
}

body.dark-blue .most-searched-section {
    background: #0d1720;
}

body.dark-blue .section-header h2 {
    color: #e8eaf0;
}

body.dark-blue .section-subtitle {
    color: #8eacc4;
}

body.dark-blue .legend-item {
    background: #1a2535;
    border-color: #2a3f52;
    color: #c8d0dc;
}

body.dark-blue .filter-btn {
    color: #c8d0dc;
    border-color: #4a6a84;
}

body.dark-blue .filter-btn:hover {
    background: #2a3f52;
    color: #e8eaf0;
}

body.dark-blue .topic-green { background: #0f1923; border: 1px solid #3d9e68; color: #ffffff; }
body.dark-blue .topic-red   { background: #0f1923; border: 1px solid #c44444; color: #ffffff; }
body.dark-blue .topic-blue  { background: #0f1923; border: 1px solid #2979C8; color: #ffffff; }
body.dark-blue .topic-card h3 { color: #ffffff; }

body.dark-blue .collab-section {
    background: #0f1923;
}

/* novo layout dos step-cards (card branco com print) adaptado ao escuro */
body.dark-blue .step-card {
    background: #1a2535;
    border-color: #7B6EF6;
    color: #e8eaf0;
}

body.dark-blue .step-card h3 {
    color: #e8eaf0;
}

body.dark-blue .step-card p {
    color: #8eacc4;
}

/* container do print no modo escuro */
body.dark-blue .step-print {
    border-color: #2a3f52;
    background: #0f1923;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.dark-blue .footer {
    background: #0a1118;
    border-top-color: #1e2d3d;
}

body.dark-blue .footer-col h4 {
    color: #5a7a96;
}

body.dark-blue .footer-col a {
    color: #8eacc4;
}

body.dark-blue .footer-col a:hover {
    color: #e8eaf0;
}

body.dark-blue .footer-copy {
    color: #3a5a74;
    border-top-color: #1e2d3d;
}

body.dark-blue .auth-page {
    background: #0a1118;
}

body.dark-blue .auth-card {
    background: #1a2535;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-blue .auth-title {
    color: #e8eaf0;
}

body.dark-blue .auth-subtitle {
    color: #8eacc4;
}

body.dark-blue .method-btn {
    background: #1a2535;
    border-color: #2a3f52;
    color: #8eacc4;
}

body.dark-blue .method-btn:hover {
    border-color: #7B6EF6;
    color: #a89ef8;
}

body.dark-blue .auth-input {
    background: #0f1923;
    border-color: #2a3f52;
    color: #e8eaf0;
}

body.dark-blue .auth-input::placeholder {
    color: #5a7a96;
}

body.dark-blue .auth-input:focus {
    border-color: #7B6EF6;
}

body.dark-blue .auth-help-link {
    color: #8eacc4;
}

body.dark-blue .auth-help-link:hover {
    color: #a89ef8;
}


/* sincroniza dark mode aplicado no <html> com o body, é baiscamente um anti-flash pra tela nao piscar em branco antes de entrar no tema */
html[data-tema="dark-blue"]  body.auth-page { background: #0a1118; }

/* RESPONSIVIDADE */
/* ================================== */

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-toggle { display: flex; }

    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 58px;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 24px;
        gap: 20px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        border-bottom: 1px solid #eeeeee;
        z-index: 99;
    }

    .accessibility-bar { flex-direction: column; }
    .acc-btn { width: 100%; }

    .contact-cards { grid-template-columns: 1fr; }
    .topic-grid    { grid-template-columns: 1fr; }
    .steps-grid    { grid-template-columns: 1fr; }

    .legend-bar { flex-direction: column; align-items: stretch; }
    .legend-item { max-width: 100%; }

    .footer-columns { flex-direction: column; gap: 28px; align-items: center; text-align: center; }

    .form-row { grid-template-columns: 1fr; }
    .collab-choice { flex-direction: column; }
    .collab-btn { width: 100%; justify-content: center; }

    .auth-card { padding: 28px 20px; }
    .auth-title { font-size: 26px; }

    .hero-title { font-size: 28px; }
    .section-header h2 { font-size: 26px; }
}

@media (max-width: 480px) {
    .container { padding: 0 18px; }
    .auth-method-toggle { flex-direction: column; }
    .method-btn { width: 100%; text-align: center; }
}

/* ============================================================
   MEXPLICA - BUSCA / MVC / DÚVIDAS / RANKING
   ============================================================ */


.mexp-search-results,
.mexp-question-form-box {
    width: 100%;
    max-width: 780px;
    margin-top: 14px;
    background: #ffffff;
    border: 1.5px solid #e8e8e8;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.mexp-search-results-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border-bottom: 1px solid #eeeeee;
    font-family: 'Inter', sans-serif;
}

.mexp-search-results-head strong {
    color: #111111;
    font-size: 15px;
}

.mexp-search-results-head span,
.mexp-search-loading {
    color: #666666;
    font-size: 13px;
}

.mexp-search-loading {
    padding: 20px;
    font-family: 'Inter', sans-serif;
}

.mexp-search-result {
    display: block;
    padding: 18px 20px;
    border-bottom: 1px solid #eeeeee;
    color: #111111;
    text-decoration: none;
    transition: background 0.18s ease;
}

.mexp-search-result:hover {
    background: #f8f7ff;
}

.mexp-search-result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mexp-search-result h3 {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 6px;
}

.mexp-search-result p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #666666;
    line-height: 1.5;
}

.mexp-search-result-count {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #777777;
}

.mexp-search-ask {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    background: #f8f7ff;
    font-family: 'Inter', sans-serif;
}

.mexp-search-ask strong {
    display: block;
    margin-bottom: 4px;
    color: #111111;
}

.mexp-search-ask p {
    color: #666666;
    font-size: 13px;
    line-height: 1.45;
}

.mexp-question-form-box {
    padding: 22px;
}

.mexp-question-form-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
}

.mexp-question-form-head strong {
    display: block;
    font-size: 17px;
    margin-bottom: 4px;
}

.mexp-question-form-head p {
    color: #666666;
    font-size: 13px;
}

.mexp-page {
    padding: 48px 0 72px;
    background: #f7f7f9;
    min-height: calc(100vh - 60px);
}

.mexp-page-hero {
    text-align: center;
    max-width: 820px;
    margin-bottom: 56px;
}

.mexp-page-hero h1,
.mexp-question-detail h1,
.mexp-profile-main h1 {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.15;
    color: #111111;
    margin: 10px 0 14px;
}

.mexp-page-hero p {
    max-width: 650px;
    margin: 0 auto 22px;
    font-family: 'Inter', sans-serif;
    color: #666666;
    line-height: 1.6;
}

.mexp-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #7B6EF6;
}

.mexp-primary-link,
.mexp-primary-button,
.mexp-secondary-button,
.mexp-danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        background 0.16s ease;
}

.mexp-primary-link,
.mexp-primary-button {
    border: none;
    background: #7B6EF6;
    color: #ffffff;
}

.mexp-primary-link:hover,
.mexp-primary-button:hover {
    background: #5A50C8;
    transform: translateY(-1px);
}

.mexp-secondary-button {
    border: 1.5px solid #7B6EF6;
    background: #ffffff;
    color: #5A50C8;
}

.mexp-danger-button {
    border: 1.5px solid #D65A5A;
    background: #ffffff;
    color: #B74242;
}

.mexp-text-button {
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: #665BCB;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.mexp-section {
    margin-top: 44px;
}

.mexp-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 20px;
}

.mexp-section-heading h2 {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #111111;
    margin-top: 5px;
}

.mexp-section-heading > p {
    max-width: 440px;
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
}

.mexp-ranking-list {
    display: grid;
    gap: 10px;
}

.mexp-ranking-card {
    display: grid;
    grid-template-columns:
        48px 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1.5px solid #e8e8e8;
    color: #111111;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.mexp-ranking-card:hover {
    transform: translateY(-2px);
    border-color: #bdb7f8;
}

.mexp-ranking-position {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #7B6EF6;
}

.mexp-avatar,
.mexp-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dddaf5;
    color: #5A50C8;
    font-family: 'Nimbus Sans', sans-serif;
    font-weight: 700;
}

.mexp-avatar {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.mexp-profile-avatar {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    font-size: 38px;
}

.mexp-ranking-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'Inter', sans-serif;
}

.mexp-ranking-info strong {
    font-size: 15px;
}

.mexp-ranking-info span,
.mexp-ranking-info small {
    color: #666666;
    font-size: 12px;
}

.mexp-badge,
.mexp-tag,
.mexp-category {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.mexp-badge {
    padding: 7px 11px;
    background: #edeaff;
    color: #6559D4;
    font-size: 10px;
    letter-spacing: 0.06em;
}

.mexp-badge-platinum {
    background: #e8eef5;
    color: #49617a;
}

.mexp-tag {
    padding: 7px 12px;
    border: 1px solid #d9d9df;
    color: #555555;
    font-size: 11px;
}

.mexp-category {
    padding: 6px 10px;
    background: #edeaff;
    color: #6559D4;
    font-size: 10px;
    letter-spacing: 0.03em;
}

.mexp-question-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mexp-question-card {
    display: block;
    padding: 20px;
    border-radius: 18px;
    border: 1.5px solid #e8e8e8;
    background: #ffffff;
    color: #111111;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.mexp-question-card:hover {
    transform: translateY(-2px);
    border-color: #bdb7f8;
}

.mexp-question-card h3 {
    margin: 12px 0 8px;
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
}

.mexp-question-card p {
    font-family: 'Inter', sans-serif;
    color: #666666;
    font-size: 13px;
    line-height: 1.5;
}

.mexp-question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #777777;
}

.mexp-question-meta a {
    color: #6559D4;
    font-weight: 700;
}

.mexp-profile-card,
.mexp-question-detail {
    display: flex;
    gap: 24px;
    padding: 28px;
    border: 1.5px solid #e8e8e8;
    border-radius: 22px;
    background: #ffffff;
}

.mexp-profile-main {
    min-width: 0;
}

.mexp-profile-main h1 {
    font-size: 34px;
}

.mexp-profile-main > p {
    max-width: 680px;
    font-family: 'Inter', sans-serif;
    color: #666666;
    line-height: 1.6;
}

.mexp-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.mexp-stats-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.mexp-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px;
    border: 1.5px solid #e8e8e8;
    border-radius: 16px;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
}

.mexp-stat strong {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 26px;
    color: #111111;
}

.mexp-stat span {
    font-size: 12px;
    color: #777777;
}

.mexp-callout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #edeaff;
    font-family: 'Inter', sans-serif;
}

.mexp-callout strong {
    color: #302966;
}

.mexp-callout p {
    margin-top: 3px;
    color: #5f5982;
    font-size: 13px;
}

.mexp-form {
    display: grid;
    gap: 9px;
    padding: 22px;
    border-radius: 18px;
    border: 1.5px solid #e8e8e8;
    background: #ffffff;
}

.mexp-form label {
    margin-top: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #333333;
}

.mexp-form input,
.mexp-form textarea,
.mexp-form select {
    width: 100%;
    border: 1.5px solid #cccccc;
    border-radius: 14px;
    background: #ffffff;
    color: #111111;
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
}

.mexp-form textarea {
    min-height: 130px;
    resize: vertical;
}

.mexp-form input:focus,
.mexp-form textarea:focus,
.mexp-form select:focus {
    border-color: #7B6EF6;
    box-shadow:
        0 0 0 3px
        rgba(123, 110, 246, 0.1);
}

.mexp-form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}

.mexp-form-message {
    min-height: 18px;
    color: #B74242;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}

.mexp-question-detail {
    display: block;
}

.mexp-back-link {
    display: inline-block;
    margin-bottom: 22px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #6559D4;
}

.mexp-question-detail h1 {
    font-size: 36px;
}

.mexp-question-body {
    margin-top: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333333;
    white-space: pre-wrap;
}

.mexp-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.mexp-answer-list {
    display: grid;
    gap: 14px;
}

.mexp-answer-card,
.mexp-answer-preview {
    padding: 22px;
    border-radius: 18px;
    border: 1.5px solid #e8e8e8;
    background: #ffffff;
}

.mexp-answer-preview {
    display: block;
    text-decoration: none;
    color: #111111;
}

.mexp-answer-preview p,
.mexp-answer-text {
    font-family: 'Inter', sans-serif;
    line-height: 1.65;
    color: #333333;
}

.mexp-answer-preview span {
    display: block;
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    color: #777777;
    font-size: 12px;
}

.mexp-answer-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.mexp-answer-author > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mexp-answer-author a {
    color: #111111;
}

.mexp-answer-author span {
    color: #777777;
    font-size: 12px;
}

.mexp-media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.mexp-media-link {
    padding: 9px 12px;
    border-radius: 10px;
    background: #f0eefc;
    color: #5A50C8;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.mexp-rating-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: 'Inter', sans-serif;
}

.mexp-rating-summary strong {
    color: #6559D4;
}

.mexp-rating-summary span {
    color: #777777;
    font-size: 12px;
}

.mexp-rating-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8f7ff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}

.mexp-stars {
    display: inline-flex;
    gap: 2px;
}

.mexp-star {
    border: none;
    background: transparent;
    padding: 2px;
    color: #c8c8cf;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.mexp-star:hover,
.mexp-star.is-active {
    color: #7B6EF6;
}

.mexp-login-hint {
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #777777;
}

.mexp-login-hint a {
    color: #6559D4;
    font-weight: 700;
}

.mexp-empty {
    padding: 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1.5px dashed #d8d8df;
    color: #777777;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.topic-card {
    display: block;
    text-decoration: none;
}


/* =============================
   MODO ESCURO
   ============================= */

body.dark-blue .mexp-page {
    background: #0d1720;
}

body.dark-blue .mexp-search-results,
body.dark-blue .mexp-question-form-box,
body.dark-blue .mexp-ranking-card,
body.dark-blue .mexp-question-card,
body.dark-blue .mexp-profile-card,
body.dark-blue .mexp-question-detail,
body.dark-blue .mexp-stat,
body.dark-blue .mexp-form,
body.dark-blue .mexp-answer-card,
body.dark-blue .mexp-answer-preview,
body.dark-blue .mexp-empty {
    background: #1a2535;
    border-color: #2a3f52;
}

body.dark-blue .mexp-page h1,
body.dark-blue .mexp-page h2,
body.dark-blue .mexp-page h3,
body.dark-blue .mexp-ranking-info strong,
body.dark-blue .mexp-question-card,
body.dark-blue .mexp-answer-author a,
body.dark-blue .mexp-answer-preview,
body.dark-blue .mexp-search-result,
body.dark-blue .mexp-search-results-head strong,
body.dark-blue .mexp-question-form-head strong,
body.dark-blue .mexp-stat strong {
    color: #e8eaf0;
}

body.dark-blue .mexp-page p,
body.dark-blue .mexp-page span,
body.dark-blue .mexp-ranking-info small,
body.dark-blue .mexp-form label,
body.dark-blue .mexp-question-body,
body.dark-blue .mexp-answer-text,
body.dark-blue .mexp-answer-preview p,
body.dark-blue .mexp-search-result p,
body.dark-blue .mexp-search-results-head span,
body.dark-blue .mexp-search-loading {
    color: #9aabba;
}

body.dark-blue .mexp-search-result {
    border-bottom-color: #2a3f52;
}

body.dark-blue .mexp-search-result:hover,
body.dark-blue .mexp-search-ask,
body.dark-blue .mexp-rating-box,
body.dark-blue .mexp-callout {
    background: #202e40;
}

body.dark-blue .mexp-form input,
body.dark-blue .mexp-form textarea,
body.dark-blue .mexp-form select {
    background: #0f1923;
    border-color: #2a3f52;
    color: #e8eaf0;
}

body.dark-blue .mexp-secondary-button,
body.dark-blue .mexp-danger-button {
    background: transparent;
}


/* =============================
   RESPONSIVO
   ============================= */

@media (max-width: 768px) {

    .mexp-search-ask,
    .mexp-section-heading,
    .mexp-callout {
        align-items: flex-start;
        flex-direction: column;
    }

    .mexp-section-heading > p {
        text-align: left;
    }

    .mexp-question-grid,
    .mexp-stats-grid,
    .mexp-form-row {
        grid-template-columns: 1fr;
    }

    .mexp-ranking-card {
        grid-template-columns:
            38px 46px minmax(0, 1fr);
    }

    .mexp-ranking-card .mexp-badge {
        grid-column: 2 / -1;
    }

    .mexp-profile-card {
        flex-direction: column;
    }

    .mexp-page-hero h1,
    .mexp-question-detail h1 {
        font-size: 30px;
    }

    .mexp-profile-main h1 {
        font-size: 28px;
    }

}

@media (max-width: 480px) {

    .mexp-page {
        padding-top: 28px;
    }

    .mexp-search-result-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .mexp-question-form-box,
    .mexp-question-detail,
    .mexp-profile-card,
    .mexp-answer-card {
        padding: 18px;
    }

}

/* ============================================================
   MEXPLICA - TUTORIAIS + BUSCA EXPANDIDA
   ============================================================ */


/* ============================================================
   ANIMACAO DO MODO DE BUSCA
   ============================================================ */

.search-box,
.mexp-search-results {
    transition:
        max-width 0.28s ease,
        transform 0.28s ease,
        border-radius 0.28s ease;
}


.search-tools-row {
    width: 100%;
}


.hero-section.search-mode .search-box,
.hero-section.search-mode .mexp-search-results {
    max-width: 980px;
}


.hero-section.search-mode .search-box {
    transform:
        translateY(-10px);
}


.hero-section.search-mode .search-input-wrap {
    padding:
        16px
        20px;
}


.hero-section.search-mode .search-tools-row {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    padding:
        10px
        14px
        14px;

    border-top:
        1px
        solid
        #eeeeee;

}


.hero-section.search-mode .search-options,
.hero-section.search-mode .accessibility-bar,
.hero-section.search-mode .contact-cards {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    width: auto;

    max-width: none;

    padding: 0;

    margin: 0;

    border: 0;

}


.hero-section.search-mode .contact-cards {
    grid-template-columns:
        none;
}


.hero-section.search-mode .acc-btn,
.hero-section.search-mode .search-opt-btn,
.hero-section.search-mode .contact-card {

    width: 42px;

    height: 42px;

    min-width: 42px;

    flex:
        0
        0
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding: 0;

    border-radius:
        50%;

    gap: 0;

}


.hero-section.search-mode .acc-btn {
    border-color:
        #6256db;
}


.hero-section.search-mode .search-opt-btn {

    border-color:
        #d0cdea;

    color:
        #665BCB;

}


.hero-section.search-mode .contact-card {

    border-color:
        #6256db;

    background:
        #7B6EF6;

    text-align:
        center;

}


.hero-section.search-mode .acc-label,
.hero-section.search-mode .acc-caret,
.hero-section.search-mode .search-opt-label,
.hero-section.search-mode .card-text {

    display:
        none
        !important;

}


.hero-section.search-mode .card-icon-img {

    width:
        19px;

    height:
        19px;

}


.hero-section.search-mode .search-opt-btn svg,
.hero-section.search-mode .acc-btn > svg:first-child {

    width:
        18px;

    height:
        18px;

}


/* ============================================================
   CATEGORIAS VISUAIS
   ============================================================ */

.mexp-theme-red {

    --mexp-accent:
        #F87777;

    --mexp-accent-soft:
        rgba(
            248,
            119,
            119,
            0.11
        );

}


.mexp-theme-green {

    --mexp-accent:
        #43A46F;

    --mexp-accent-soft:
        rgba(
            67,
            164,
            111,
            0.11
        );

}


.mexp-theme-blue {

    --mexp-accent:
        #4B7DB5;

    --mexp-accent-soft:
        rgba(
            75,
            125,
            181,
            0.11
        );

}


.mexp-question-card.mexp-theme-red,
.mexp-question-card.mexp-theme-green,
.mexp-question-card.mexp-theme-blue,
.mexp-search-result.mexp-theme-red,
.mexp-search-result.mexp-theme-green,
.mexp-search-result.mexp-theme-blue {

    border-left:
        5px
        solid
        var(
            --mexp-accent
        );

}


.mexp-question-card.mexp-theme-red:hover,
.mexp-question-card.mexp-theme-green:hover,
.mexp-question-card.mexp-theme-blue:hover,
.mexp-search-result.mexp-theme-red:hover,
.mexp-search-result.mexp-theme-green:hover,
.mexp-search-result.mexp-theme-blue:hover {

    border-color:
        var(
            --mexp-accent
        );

    background:
        var(
            --mexp-accent-soft
        );

}


.mexp-card-category-line,
.mexp-search-category,
.mexp-tutorial-category {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.mexp-card-category-line img,
.mexp-search-category img,
.mexp-tutorial-category img {

    width:
        28px;

    height:
        28px;

    object-fit:
        contain;

    flex-shrink:
        0;

}


.mexp-theme-red .mexp-category,
.mexp-theme-green .mexp-category,
.mexp-theme-blue .mexp-category {

    background:
        var(
            --mexp-accent-soft
        );

    color:
        var(
            --mexp-accent
        );

}


/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.mexp-search-result {

    border-left:
        5px
        solid
        transparent;

}


.mexp-search-result h3 {
    margin-top:
        9px;
}


.mexp-search-category .mexp-category {

    padding:
        5px
        9px;

}


/* ============================================================
   TUTORIAL
   ============================================================ */

.mexp-tutorial-detail {

    position:
        relative;

    overflow:
        hidden;

    padding:
        30px;

    border:
        1.5px
        solid
        #e8e8e8;

    border-top:
        6px
        solid
        var(
            --mexp-accent
        );

    border-radius:
        24px;

    background:
        #ffffff;

}


.mexp-tutorial-header {

    padding-bottom:
        28px;

    border-bottom:
        1px
        solid
        #eeeeee;

}


.mexp-tutorial-category {

    width:
        fit-content;

    padding:
        8px
        12px;

    border-radius:
        999px;

    background:
        var(
            --mexp-accent-soft
        );

    color:
        var(
            --mexp-accent
        );

    font-family:
        'Inter',
        sans-serif;

    font-size:
        12px;

    font-weight:
        800;

}


.mexp-tutorial-header h1 {

    max-width:
        900px;

    margin:
        18px
        0
        10px;

    font-family:
        'Nimbus Sans',
        sans-serif;

    font-size:
        42px;

    font-weight:
        500;

    line-height:
        1.15;

    color:
        #111111;

}


.mexp-tutorial-summary {

    max-width:
        820px;

    font-family:
        'Inter',
        sans-serif;

    font-size:
        17px;

    line-height:
        1.6;

    color:
        #555555;

}


.mexp-tutorial-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px
        18px;

    margin-top:
        18px;

    font-family:
        'Inter',
        sans-serif;

    font-size:
        12px;

    color:
        #777777;

}


.mexp-tutorial-meta a {

    color:
        var(
            --mexp-accent
        );

    font-weight:
        700;

}


.mexp-tutorial-content {

    padding:
        30px
        0
        4px;

}


.mexp-tutorial-content
+
.mexp-tutorial-content {

    border-top:
        1px
        solid
        #eeeeee;

    margin-top:
        26px;

}


.mexp-tutorial-content h2 {

    margin-bottom:
        12px;

    font-family:
        'Nimbus Sans',
        sans-serif;

    font-size:
        28px;

    font-weight:
        500;

    color:
        #111111;

}


.mexp-tutorial-content > p,
.mexp-section-description {

    max-width:
        900px;

    font-family:
        'Inter',
        sans-serif;

    font-size:
        15px;

    line-height:
        1.75;

    color:
        #444444;

}


.mexp-steps-list {

    display:
        grid;

    gap:
        12px;

    margin-top:
        18px;

}


.mexp-tutorial-step {

    display:
        grid;

    grid-template-columns:
        44px
        minmax(
            0,
            1fr
        );

    gap:
        14px;

    align-items:
        start;

    padding:
        16px;

    border-radius:
        16px;

    background:
        var(
            --mexp-accent-soft
        );

}


.mexp-step-number,
.mexp-image-order {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    border-radius:
        50%;

    background:
        var(
            --mexp-accent
        );

    color:
        #ffffff;

    font-family:
        'Inter',
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

}


.mexp-tutorial-step h3 {

    margin:
        1px
        0
        5px;

    font-family:
        'Inter',
        sans-serif;

    font-size:
        14px;

    color:
        #222222;

}


.mexp-tutorial-step p {

    font-family:
        'Inter',
        sans-serif;

    font-size:
        14px;

    line-height:
        1.6;

    color:
        #555555;

}


/* ============================================================
   IMAGENS DO TUTORIAL
   ============================================================ */

.mexp-tutorial-gallery {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        16px;

    margin-top:
        18px;

}


.mexp-tutorial-image {

    position:
        relative;

    padding:
        14px;

    border:
        1.5px
        solid
        #e8e8e8;

    border-radius:
        18px;

    background:
        #f9f9fb;

}


.mexp-tutorial-image img {

    display:
        block;

    width:
        100%;

    max-height:
        520px;

    object-fit:
        contain;

    border-radius:
        12px;

}


.mexp-image-order {

    position:
        absolute;

    top:
        22px;

    left:
        22px;

    z-index:
        1;

}


.mexp-tutorial-image figcaption {

    margin-top:
        10px;

    font-family:
        'Inter',
        sans-serif;

    font-size:
        12px;

    color:
        #666666;

}


.mexp-tutorial-tags {
    margin-top:
        28px;
}


/* ============================================================
   AVALIACAO
   ============================================================ */

.mexp-rating-panel {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        14px;

    padding:
        20px;

    border:
        1.5px
        solid
        var(
            --mexp-accent
        );

    border-radius:
        18px;

    background:
        var(
            --mexp-accent-soft
        );

}


.mexp-rating-panel .mexp-star {
    font-size:
        30px;
}


.mexp-rating-panel .mexp-star:hover,
.mexp-rating-panel .mexp-star.is-active {

    color:
        var(
            --mexp-accent
        );

}


/* ============================================================
   COMENTARIOS
   ============================================================ */

.mexp-comments-list {

    display:
        grid;

    gap:
        12px;

    margin-top:
        18px;

}


.mexp-comment-card {

    padding:
        18px;

    border:
        1.5px
        solid
        #e8e8e8;

    border-radius:
        16px;

    background:
        #ffffff;

}


.mexp-comment-text {

    font-family:
        'Inter',
        sans-serif;

    font-size:
        14px;

    line-height:
        1.65;

    color:
        #333333;

}


/* ============================================================
   EDITOR
   ============================================================ */

.mexp-editor-wrap {

    max-width:
        920px;

}


.mexp-editor-wrap
.mexp-section-heading {

    align-items:
        flex-start;

}


.mexp-editor-wrap
.mexp-section-heading
h1 {

    margin-top:
        5px;

    font-family:
        'Nimbus Sans',
        sans-serif;

    font-size:
        36px;

    font-weight:
        500;

    color:
        #111111;

}


.mexp-editor-form
textarea {

    min-height:
        150px;

}


.mexp-field-help {

    margin-top:
        -3px;

    font-family:
        'Inter',
        sans-serif;

    font-size:
        11px;

    color:
        #777777;

}


.mexp-publish-callout {

    border:
        1px
        solid
        #c9c5f5;

}


/* ============================================================
   DARK MODE
   ============================================================ */

body.dark-blue
.hero-section.search-mode
.search-tools-row {

    border-top-color:
        #2a3f52;

}


body.dark-blue
.hero-section.search-mode
.search-opt-btn {

    background:
        #1a2535;

    border-color:
        #3a5067;

    color:
        #a89ef8;

}


body.dark-blue
.mexp-tutorial-detail,

body.dark-blue
.mexp-comment-card,

body.dark-blue
.mexp-tutorial-image {

    background:
        #1a2535;

    border-color:
        #2a3f52;

}


body.dark-blue
.mexp-tutorial-detail {

    border-top-color:
        var(
            --mexp-accent
        );

}


body.dark-blue
.mexp-tutorial-header,

body.dark-blue
.mexp-tutorial-content
+
.mexp-tutorial-content {

    border-color:
        #2a3f52;

}


body.dark-blue
.mexp-tutorial-header
h1,

body.dark-blue
.mexp-tutorial-content
h2,

body.dark-blue
.mexp-tutorial-step
h3,

body.dark-blue
.mexp-editor-wrap
.mexp-section-heading
h1 {

    color:
        #e8eaf0;

}


body.dark-blue
.mexp-tutorial-summary,

body.dark-blue
.mexp-tutorial-content > p,

body.dark-blue
.mexp-section-description,

body.dark-blue
.mexp-tutorial-step
p,

body.dark-blue
.mexp-comment-text,

body.dark-blue
.mexp-field-help {

    color:
        #9aabba;

}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (
    max-width:
    768px
) {

    .hero-section.search-mode
    .search-box,

    .hero-section.search-mode
    .mexp-search-results {

        max-width:
            100%;

    }


    .hero-section.search-mode
    .search-box {

        transform:
            none;

    }


    .hero-section.search-mode
    .accessibility-bar,

    .hero-section.search-mode
    .contact-cards {

        flex-direction:
            row;

    }


    .mexp-tutorial-header
    h1 {

        font-size:
            31px;

    }


    .mexp-tutorial-gallery {

        grid-template-columns:
            1fr;

    }


    .mexp-editor-wrap
    .mexp-section-heading {

        flex-direction:
            column;

    }

}


@media (
    max-width:
    480px
) {

    .hero-section.search-mode
    .search-tools-row {

        gap:
            6px;

        padding-left:
            8px;

        padding-right:
            8px;

    }


    .hero-section.search-mode
    .acc-btn,

    .hero-section.search-mode
    .search-opt-btn,

    .hero-section.search-mode
    .contact-card {

        width:
            38px;

        height:
            38px;

        min-width:
            38px;

        flex-basis:
            38px;

    }


    .mexp-tutorial-detail {

        padding:
            20px;

    }


    .mexp-tutorial-step {

        grid-template-columns:
            36px
            minmax(
                0,
                1fr
            );

        padding:
            13px;

    }


    .mexp-step-number {

        width:
            32px;

        height:
            32px;

    }

}

/* ============================================================
   MEXPLICA - NOVA BUSCA EXPANDIDA + RESULTADOS FIGMA
   ============================================================ */

.hero-title,
.hero-logo,
.hero-logo-img,
.search-box,
.search-input-wrap,
.search-tools-row,
.mexp-search-results,
.most-searched-section,
.collab-section {
    transition: all 0.28s ease;
}

.search-tools-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 14px 12px;
    border-top: 1px solid #eeeeee;
}

.search-tools-left,
.search-tools-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-tools-left {
    flex: 1;
}

.search-tools-right {
    margin-left: auto;
}

.search-tools-right:empty {
    display: none;
}

.search-options {
    padding: 0;
    border-top: 0;
}

.mexp-search-results.hidden {
    display: none !important;
}

.mexp-search-results {
    width: 100%;
    max-width: 1120px;
    margin-top: 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.mexp-search-results-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0 0 18px;
    border-bottom: 0;
    font-family: 'Inter', sans-serif;
}

.mexp-search-results-title {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    color: #111111;
    margin: 0;
}

.mexp-results-count {
    color: #3A78D8;
}

.mexp-search-results-subtitle {
    margin: 0;
    font-size: 16px;
    color: #333333;
    line-height: 1.5;
}

.mexp-search-category-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px;
    font-weight: 700;
}

.mexp-search-category-line img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.mexp-search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.mexp-search-card {
    border-radius: 24px;
    border: 1.5px solid #b7c8dc;
    padding: 14px 14px 16px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mexp-search-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.mexp-search-card-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}

.mexp-search-card-category img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.mexp-search-card-title {
    font-family: 'Nimbus Sans', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    margin: 0 0 8px;
}

.mexp-search-card-summary {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: inherit;
    opacity: 0.92;
    margin: 0;
    min-height: 54px;
}

.mexp-search-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(28, 56, 92, 0.18);
}

.mexp-search-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mexp-search-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}

.mexp-search-card-author-meta {
    min-width: 0;
}

.mexp-search-card-author-meta strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mexp-search-card-stars {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    font-size: 13px;
}

.mexp-search-card-stars span {
    color: #a7b6ca;
}

.mexp-search-card-stars span.is-filled {
    color: #245eaa;
}

.mexp-search-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mexp-search-card-action,
.mexp-search-card-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    background: rgba(255, 255, 255, 0.55);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: inherit;
}

.mexp-search-card-share {
    width: 34px;
    padding: 0;
    cursor: pointer;
    transition: transform 0.18s ease;
}

.mexp-search-card-share:hover {
    transform: scale(1.05);
}

.mexp-search-card-share.is-copied {
    transform: scale(1.05);
}

.mexp-search-card-action-icon {
    font-size: 14px;
    line-height: 1;
}

.mexp-search-empty {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    background: #ffffff;
    border: 1.5px solid #e6e6e6;
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    font-family: 'Inter', sans-serif;
}

.mexp-search-empty strong {
    display: block;
    color: #111111;
    font-size: 18px;
    margin-bottom: 8px;
}

.mexp-search-empty p {
    color: #666666;
    font-size: 14px;
    line-height: 1.55;
}

.mexp-search-loading {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #666666;
    padding: 22px 0;
}

/* THEMES DOS CARDS */
.mexp-search-card.mexp-theme-blue {
    background: #edf5ff;
    border-color: #88a7cb;
    color: #1d3d67;
}

.mexp-search-card.mexp-theme-blue .mexp-search-card-category,
.mexp-search-results[data-theme="blue"] .mexp-results-count,
.mexp-search-results[data-theme="blue"] .mexp-search-category-line {
    color: #2f6fb5;
}

.mexp-search-card.mexp-theme-blue .mexp-search-card-avatar {
    background: #3f7ac0;
    color: #ffffff;
}

.mexp-search-card.mexp-theme-green {
    background: #edf8f1;
    border-color: #8db89b;
    color: #234d35;
}

.mexp-search-card.mexp-theme-green .mexp-search-card-category,
.mexp-search-results[data-theme="green"] .mexp-results-count,
.mexp-search-results[data-theme="green"] .mexp-search-category-line {
    color: #2d8a58;
}

.mexp-search-card.mexp-theme-green .mexp-search-card-avatar {
    background: #3d9b63;
    color: #ffffff;
}

.mexp-search-card.mexp-theme-red {
    background: #fff1f1;
    border-color: #d8a2a2;
    color: #6d2d2d;
}

.mexp-search-card.mexp-theme-red .mexp-search-card-category,
.mexp-search-results[data-theme="red"] .mexp-results-count,
.mexp-search-results[data-theme="red"] .mexp-search-category-line {
    color: #d05353;
}

.mexp-search-card.mexp-theme-red .mexp-search-card-avatar {
    background: #de6a6a;
    color: #ffffff;
}

/* MODO DE BUSCA */
.hero-section.search-mode {
    padding-bottom: 60px;
}

.hero-section.search-mode .hero-title {
    opacity: 0;
    transform: translateY(-16px);
    max-height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-section.search-mode .search-box {
    max-width: 1120px;
    transform: translateY(-24px);
    border-radius: 26px;
}

.hero-section.search-mode .search-input-wrap {
    padding: 16px 18px 10px;
    gap: 12px;
}

.hero-section.search-mode .hero-logo {
    margin: 0 2px 0 0;
    width: 28px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-section.search-mode .hero-logo-img {
    width: 28px;
    height: 38px;
    object-fit: contain;
}

.hero-section.search-mode .search-tools-row {
    padding: 0 14px 14px;
    border-top: 0;
}

.hero-section.search-mode .search-tools-left {
    flex: 1;
}

.hero-section.search-mode .search-tools-right {
    margin-left: auto;
}

.hero-section.search-mode .contact-cards,
.hero-section.search-mode .accessibility-bar {
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    border: 0;
}

.hero-section.search-mode .contact-cards {
    grid-template-columns: none;
}

.hero-section.search-mode .contact-card,
.hero-section.search-mode .acc-btn {
    width: auto;
    min-width: 58px;
    height: 40px;
    padding: 0 14px;
    flex: 0 0 auto;
    border-radius: 999px;
    box-shadow: none;
}

.hero-section.search-mode .contact-card {
    justify-content: center;
    gap: 0;
}

.hero-section.search-mode .contact-card .card-text,
.hero-section.search-mode .acc-label {
    display: none !important;
}

.hero-section.search-mode .acc-caret {
    display: block !important;
}

.hero-section.search-mode .card-icon-img {
    width: 18px;
    height: 18px;
    margin: 0;
}

.hero-section.search-mode .acc-btn > svg:first-child {
    width: 18px;
    height: 18px;
}

.hero-section.search-mode .search-opt-btn {
    background: #ececec;
    border-color: #d4d4d4;
    color: #444444;
}

.hero-section.search-mode .search-opt-btn:hover {
    border-color: #7B6EF6;
    color: #7B6EF6;
}

.hero-section.search-mode ~ .most-searched-section,
.hero-section.search-mode ~ .collab-section {
    display: none;
}

/* DARK MODE */
body.dark-blue .mexp-search-results-title {
    color: #f0f4f8;
}

body.dark-blue .mexp-search-results-subtitle {
    color: #b7c6d4;
}

body.dark-blue .mexp-search-empty {
    background: #162538;
    border-color: #29435d;
}

body.dark-blue .mexp-search-empty strong {
    color: #f0f4f8;
}

body.dark-blue .mexp-search-empty p,
body.dark-blue .mexp-search-loading {
    color: #b7c6d4;
}

body.dark-blue .mexp-search-card {
    box-shadow: none;
}

body.dark-blue .mexp-search-card.mexp-theme-blue {
    background: #18283a;
    border-color: #34506c;
    color: #edf2f7;
}

body.dark-blue .mexp-search-card.mexp-theme-green {
    background: #182e25;
    border-color: #3c6b50;
    color: #edf2f7;
}

body.dark-blue .mexp-search-card.mexp-theme-red {
    background: #331f24;
    border-color: #70414b;
    color: #edf2f7;
}

body.dark-blue .mexp-search-card-summary,
body.dark-blue .mexp-search-card-author-meta strong {
    color: inherit;
}

body.dark-blue .mexp-search-card-action,
body.dark-blue .mexp-search-card-share {
    background: rgba(17, 29, 43, 0.55);
}

body.dark-blue .hero-section.search-mode .search-opt-btn {
    background: #1b2637;
    border-color: #30485f;
    color: #d8e1ea;
}

/* RESPONSIVO */
@media (max-width: 1024px) {
    .mexp-search-results-grid {
        grid-template-columns: 1fr;
    }

    .hero-section.search-mode .search-box {
        max-width: 100%;
        transform: translateY(-12px);
    }
}

@media (max-width: 768px) {
    .search-tools-row,
    .hero-section.search-mode .search-tools-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-tools-left,
    .search-tools-right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .hero-section.search-mode .contact-cards,
    .hero-section.search-mode .accessibility-bar {
        flex-wrap: wrap;
    }

    .mexp-search-results-title {
        font-size: 24px;
    }

    .mexp-search-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .mexp-search-card-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .mexp-search-card-title {
        font-size: 20px;
    }

    .mexp-search-results-subtitle {
        font-size: 14px;
    }

    .hero-section.search-mode .search-input-wrap {
        padding: 14px 14px 10px;
    }

    .hero-section.search-mode .contact-card,
    .hero-section.search-mode .acc-btn {
        min-width: 52px;
        padding: 0 12px;
    }
}

/* Corrige o número de resultados para herdar
   exatamente o estilo do restante do título */

.mexp-search-results-title .mexp-results-count {
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* ============================================================
   SEARCH BOX - AJUSTE DARK MODE
   ============================================================ */

body.dark-blue .search-box {
    border-color: #30485f;
}


/* Divisão entre input e ferramentas */
body.dark-blue .search-tools-row {
    border-top-color: rgba(80, 108, 135, 0.55);
}


/* Quando a barra está expandida no modo de pesquisa,
   não precisamos dessa divisão */
body.dark-blue .hero-section.search-mode .search-tools-row {
    border-top-color: transparent;
}

/* ============================================================
   FILTRO DA BUSCA
   ============================================================ */

.search-filter-wrap {
    position: relative;
    display: inline-flex;
}


/*
    A search-box originalmente usa overflow hidden.
    Precisamos liberar o dropdown para ele poder
    aparecer para fora da barra.
*/
.search-box {
    overflow: visible;
}


.search-filter-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 0;

    z-index: 50;

    width: 220px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 8px;

    border: 1.5px solid #dedede;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.13);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-6px);

    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
}


.search-filter-menu.is-open {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


.search-filter-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #333333;

    font-family:
        'Inter',
        sans-serif;

    font-size: 13px;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.search-filter-option:hover {
    background: #f2f1ff;
}


.search-filter-option.is-selected {
    background: #eceaff;

    color: #6256db;

    font-weight: 700;
}


.search-filter-option img {
    width: 21px;

    height: 21px;

    object-fit: contain;

    flex-shrink: 0;
}


.search-filter-all-icon {
    width: 21px;

    height: 21px;

    display: inline-flex;

    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background: #7B6EF6;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    flex-shrink: 0;
}


/* Indica visualmente que existe filtro ativo */

#filterSearchBtn.is-filtered {
    border-color: #7B6EF6;

    background: #efedff;

    color: #6256db;
}


/* ============================================================
   FILTRO - DARK MODE
   ============================================================ */

body.dark-blue .search-filter-menu {
    background: #182638;

    border-color: #30485f;

    box-shadow:
        0 14px 36px
        rgba(0, 0, 0, 0.35);
}


body.dark-blue .search-filter-option {
    color: #dce6ef;
}


body.dark-blue .search-filter-option:hover {
    background: #22364b;
}


body.dark-blue .search-filter-option.is-selected {
    background: #29395b;

    color: #a99fff;
}


body.dark-blue #filterSearchBtn.is-filtered {
    background: #29395b;

    border-color: #8176f4;

    color: #c0baff;
}

/* ============================================================
   MEXPLICA - PERFIL V2
   ============================================================ */

.profile-page {
    min-height: 100vh;
    background: #ffffff;
    color: #172947;
}


/* ============================================================
   CAPA
   ============================================================ */

.profile-hero {
    position: relative;
    background: #ffffff;
}


.profile-cover {
    width: 100%;
    height: 190px;

    background-color: #7B6EF6;

    background-image:
        url('/icons/banner-padrao.png');

    background-position: center;

    background-size: cover;

    background-repeat: repeat-x;
}


.profile-shell {
    position: relative;

    padding-top: 74px;
    padding-bottom: 22px;
}


/* ============================================================
   AVATAR
   ============================================================ */

.profile-avatar-large {
    position: absolute;

    top: -48px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 96px;
    height: 96px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1.5px
        solid
        #3e4f76;

    border-radius: 50%;

    background:
        #7B7CF2;

    color:
        #ffffff;

    font-family:
        'Inter',
        sans-serif;

    font-size: 26px;

    font-weight: 800;

    letter-spacing:
        0.03em;

    box-shadow:
        0
        0
        0
        5px
        #ffffff;
}


/* ============================================================
   IDENTIDADE
   ============================================================ */

.profile-identity {
    text-align: center;
}


.profile-identity h1 {
    margin: 0;

    font-family:
        'Nimbus Sans',
        sans-serif;

    font-size: 30px;

    font-weight: 600;

    line-height: 1.15;

    color:
        #172947;
}


.profile-handle {
    display: block;

    margin-top: 4px;

    font-family:
        'Inter',
        sans-serif;

    font-size: 14px;

    color:
        #687792;
}


.profile-bio {
    max-width: 650px;

    margin:
        24px
        auto
        0;

    font-family:
        'Inter',
        sans-serif;

    font-size: 15px;

    line-height: 1.55;

    color:
        #172947;
}


/* ============================================================
   LOCAL / NÍVEL / DATA
   ============================================================ */

.profile-meta-row {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    align-items: center;

    gap: 22px;

    margin-top: 30px;
}


.profile-meta-item,
.profile-role-pill {
    min-height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    font-family:
        'Inter',
        sans-serif;

    font-size: 14px;

    color:
        #6674ff;
}


.profile-meta-location {
    justify-content: flex-start;
}


.profile-meta-date {
    justify-content: flex-end;
}


.profile-role-pill {
    padding:
        7px
        18px;

    border:
        1.3px
        solid
        #6f84af;

    border-radius: 999px;

    background:
        #e9f2fb;

    color:
        #172947;

    font-weight: 600;
}


.profile-role-pill img {
    width: 22px;
    height: 22px;

    object-fit: contain;
}


/* ============================================================
   ESTATÍSTICAS
   ============================================================ */

.profile-stats-row {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    margin-top: 22px;

    border-top:
        1px
        solid
        #e4e7ed;

    border-bottom:
        1px
        solid
        #e4e7ed;
}


.profile-stat-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding:
        16px
        12px
        14px;

    font-family:
        'Inter',
        sans-serif;

    text-align: center;
}


.profile-stat-item strong {
    font-size: 12px;

    font-weight: 800;

    letter-spacing:
        0.04em;

    color:
        #111111;
}


.profile-stat-item span {
    font-size: 13px;

    color:
        #666666;
}


/* ============================================================
   BOTÕES
   ============================================================ */

.profile-actions-row {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 24px;
}


.profile-action-btn,
.profile-action-circle {
    min-height: 48px;

    border:
        1.3px
        solid
        #8581ff;

    background:
        #f4f4ff;

    color:
        #696be6;

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease;
}


.profile-action-btn {
    flex:
        1
        1
        0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        11px
        18px;

    border-radius:
        999px;

    font-family:
        'Inter',
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;
}


.profile-action-btn:hover,
.profile-action-circle:hover {
    transform:
        translateY(-1px);

    background:
        #ebebff;
}


.profile-action-primary {
    background:
        #7B7CF2;

    border-color:
        #30355d;

    color:
        #ffffff;
}


.profile-action-primary:hover {
    background:
        #6668e8;
}


.profile-action-circle {
    width: 48px;
    min-width: 48px;

    padding: 0;

    border-radius:
        50%;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-family:
        'Inter',
        sans-serif;

    font-size: 16px;

    font-weight: 800;
}


/* ============================================================
   MENUS ...
   ============================================================ */

.profile-action-menu-wrap {
    position: relative;

    flex:
        0
        0
        auto;
}


.profile-action-dropdown {
    position: absolute;

    right: 0;

    top:
        calc(
            100%
            +
            10px
        );

    z-index: 80;

    min-width: 210px;

    padding: 7px;

    border:
        1px
        solid
        #e0e3ea;

    border-radius: 14px;

    background:
        #ffffff;

    box-shadow:
        0
        14px
        38px
        rgba(
            28,
            39,
            65,
            0.15
        );
}


.profile-action-dropdown[hidden] {
    display:
        none
        !important;
}


.profile-action-dropdown button {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px
        11px;

    border-radius: 9px;

    color:
        #263650;

    font-family:
        'Inter',
        sans-serif;

    font-size: 13px;

    text-align: left;
}


.profile-action-dropdown button:hover {
    background:
        #f4f5f9;
}


.profile-action-dropdown
.profile-danger-menu-item {
    color:
        #c43e4b;
}


.profile-action-dropdown
.profile-danger-menu-item:hover {
    background:
        #fff0f1;
}


/* ============================================================
   CONTEÚDO
   ============================================================ */

.profile-content-section {
    padding-top: 18px;

    padding-bottom: 80px;
}


/* ============================================================
   FILTROS
   ============================================================ */

.profile-post-filters {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 28px;
}


.profile-filter-icon {
    width: 34px;
    height: 34px;

    display:
        inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        #e6e6e6;

    color:
        #9c9c9c;
}


.profile-filter-btn {
    min-height: 34px;

    display:
        inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        7px
        13px;

    border:
        1px
        solid
        #cfd4dc;

    border-radius:
        999px;

    background:
        #f2f2f2;

    color:
        #8a929b;

    opacity: 0.48;

    filter:
        grayscale(
            0.68
        );

    font-family:
        'Inter',
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.02em;

    transition:
        opacity 0.16s ease,
        filter 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}


.profile-filter-btn:hover {
    opacity: 0.78;
}


.profile-filter-btn img {
    width: 18px;
    height: 18px;

    object-fit: contain;
}


.profile-filter-btn.is-active {
    opacity: 1;

    filter: none;
}


.profile-filter-all.is-active {
    background:
        #7B7CF2;

    border-color:
        #5f62de;

    color:
        #ffffff;
}


.profile-filter-blue.is-active {
    background:
        #e7f1fb;

    border-color:
        #6e92b7;

    color:
        #2d6398;
}


.profile-filter-green.is-active {
    background:
        #e9f8ee;

    border-color:
        #70ad87;

    color:
        #32805a;
}


.profile-filter-red.is-active {
    background:
        #fff0f0;

    border-color:
        #d39090;

    color:
        #b25757;
}


/* ============================================================
   GRID DOS POSTS
   ============================================================ */

.profile-posts-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 18px;
}


.profile-post-card[hidden] {
    display:
        none
        !important;
}


.profile-post-card {
    min-width: 0;
}


/* ============================================================
   PERFIL VAZIO
   ============================================================ */

.profile-empty-state {
    min-height: 420px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding-top: 110px;

    text-align: center;
}


.profile-empty-icon {
    width: 92px;
    height: 92px;

    object-fit: contain;

    margin-bottom: 22px;
}


.profile-empty-state p {
    max-width: 760px;

    margin: 0;

    font-family:
        'Nimbus Sans',
        sans-serif;

    font-size: 27px;

    line-height: 1.25;

    font-weight: 400;

    color:
        #151515;
}


/* ============================================================
   MODAIS
   ============================================================ */

.profile-modal[hidden] {
    display:
        none
        !important;
}


.profile-modal {
    position: fixed;

    inset: 0;

    z-index: 500;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;

    transition:
        opacity
        0.18s
        ease;
}


.profile-modal.is-open {
    opacity: 1;
}


.profile-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            10,
            17,
            31,
            0.56
        );

    backdrop-filter:
        blur(
            4px
        );
}


.profile-modal-card {
    position: relative;

    z-index: 1;

    width:
        min(
            100%,
            480px
        );

    max-height:
        calc(
            100vh
            -
            48px
        );

    overflow: auto;

    padding: 30px;

    border:
        1px
        solid
        #e1e4eb;

    border-radius: 24px;

    background:
        #ffffff;

    box-shadow:
        0
        28px
        70px
        rgba(
            14,
            24,
            45,
            0.22
        );

    transform:
        translateY(
            10px
        )
        scale(
            0.98
        );

    transition:
        transform
        0.18s
        ease;
}


.profile-modal.is-open
.profile-modal-card {
    transform:
        translateY(0)
        scale(1);
}


.profile-modal-close {
    position: absolute;

    top: 14px;

    right: 16px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    color:
        #6d7788;

    font-size: 24px;
}


.profile-modal-close:hover {
    background:
        #f1f2f6;
}


.profile-modal-logo {
    display: block;

    width: 96px;

    height: auto;

    margin:
        0
        auto
        18px;
}


.profile-modal-card h2 {
    margin:
        0
        0
        22px;

    text-align: center;

    font-family:
        'Nimbus Sans',
        sans-serif;

    font-size: 27px;

    font-weight: 500;

    color:
        #172947;
}


.profile-modal-card form {
    display: grid;

    gap: 9px;
}


.profile-modal-card label {
    margin-top: 4px;

    font-family:
        'Inter',
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    color:
        #35445c;
}


.profile-modal-card input,
.profile-modal-card textarea {
    width: 100%;

    padding:
        12px
        14px;

    border:
        1.5px
        solid
        #cfd5df;

    border-radius: 13px;

    background:
        #ffffff;

    color:
        #172947;

    font-family:
        'Inter',
        sans-serif;

    font-size: 14px;

    outline: none;
}


.profile-modal-card textarea {
    min-height: 130px;

    resize: vertical;
}


.profile-modal-card input:focus,
.profile-modal-card textarea:focus {
    border-color:
        #7B7CF2;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            123,
            124,
            242,
            0.12
        );
}


.profile-modal-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    margin-top: 14px;
}


.profile-modal-primary,
.profile-modal-secondary,
.profile-modal-danger {
    min-height: 44px;

    padding:
        10px
        14px;

    border-radius:
        999px;

    font-family:
        'Inter',
        sans-serif;

    font-size: 13px;

    font-weight: 700;
}


.profile-modal-primary {
    background:
        #7B7CF2;

    color:
        #ffffff;
}


.profile-modal-secondary {
    border:
        1.3px
        solid
        #c9cfda;

    background:
        #f6f7fa;

    color:
        #45536b;
}


.profile-modal-danger {
    background:
        #c84450;

    color:
        #ffffff;
}


.profile-modal-danger:disabled {
    opacity: 0.65;

    cursor: wait;
}


.profile-delete-copy {
    margin:
        0
        auto
        20px;

    max-width: 360px;

    text-align: center;

    font-family:
        'Inter',
        sans-serif;

    font-size: 14px;

    line-height: 1.55;

    color:
        #58657a;
}


.profile-modal-message {
    min-height: 18px;

    margin:
        3px
        0
        0;

    font-family:
        'Inter',
        sans-serif;

    font-size: 12px;

    color:
        #bf3c48;

    text-align: center;
}


body.profile-modal-open {
    overflow: hidden;
}


/* ============================================================
   PERFIL - DARK MODE
   ============================================================ */

body.dark-blue .profile-page,
body.dark-blue .profile-hero {
    background:
        #0d1720;

    color:
        #e7edf4;
}


body.dark-blue
.profile-avatar-large {
    box-shadow:
        0
        0
        0
        5px
        #0d1720;
}


body.dark-blue
.profile-identity h1,

body.dark-blue
.profile-bio,

body.dark-blue
.profile-stat-item strong {
    color:
        #edf2f7;
}


body.dark-blue
.profile-handle,

body.dark-blue
.profile-stat-item span {
    color:
        #95a6b8;
}


body.dark-blue
.profile-stats-row {
    border-color:
        #24364a;
}


body.dark-blue
.profile-role-pill {
    background:
        #192a3d;

    border-color:
        #45627f;

    color:
        #e4edf5;
}


body.dark-blue
.profile-action-btn,

body.dark-blue
.profile-action-circle {
    background:
        #17263a;

    border-color:
        #4d5ed1;

    color:
        #b5b7ff;
}


body.dark-blue
.profile-action-primary {
    background:
        #6e70e9;

    color:
        #ffffff;
}


body.dark-blue
.profile-action-dropdown,

body.dark-blue
.profile-modal-card {
    background:
        #17263a;

    border-color:
        #2d435b;
}


body.dark-blue
.profile-action-dropdown button {
    color:
        #e2eaf2;
}


body.dark-blue
.profile-action-dropdown button:hover,

body.dark-blue
.profile-modal-close:hover {
    background:
        #20344b;
}


body.dark-blue
.profile-action-dropdown
.profile-danger-menu-item {
    color:
        #ff8d96;
}


body.dark-blue
.profile-filter-icon {
    background:
        #253548;

    color:
        #8093a7;
}


body.dark-blue
.profile-filter-btn {
    background:
        #1b293a;

    border-color:
        #33475c;

    color:
        #8395a8;
}


body.dark-blue
.profile-empty-state p,

body.dark-blue
.profile-modal-card h2 {
    color:
        #edf2f7;
}


body.dark-blue
.profile-modal-card label,

body.dark-blue
.profile-delete-copy {
    color:
        #aebdca;
}


body.dark-blue
.profile-modal-card input,

body.dark-blue
.profile-modal-card textarea {
    background:
        #0e1a28;

    border-color:
        #344a61;

    color:
        #e7edf4;
}


body.dark-blue
.profile-modal-secondary {
    background:
        #203146;

    border-color:
        #3a516a;

    color:
        #d6e0e9;
}


/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

@media (
    max-width:
    900px
) {

    .profile-meta-row {
        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .profile-meta-location,
    .profile-meta-date {
        justify-content:
            center;
    }


    .profile-actions-row {
        flex-wrap: wrap;
    }


    .profile-action-btn {
        min-width:
            calc(
                50%
                -
                10px
            );
    }


    .profile-posts-grid {
        grid-template-columns:
            1fr;
    }

}


@media (
    max-width:
    600px
) {

    .profile-cover {
        height: 145px;
    }


    .profile-shell {
        padding-top: 66px;
    }


    .profile-avatar-large {
        top: -42px;

        width: 84px;

        height: 84px;

        font-size: 22px;
    }


    .profile-identity h1 {
        font-size: 26px;
    }


    .profile-bio {
        margin-top: 18px;

        font-size: 14px;
    }


    .profile-stat-item strong {
        font-size: 10px;
    }


    .profile-actions-row {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .profile-action-btn {
        width: 100%;

        min-width: 0;
    }


    .profile-action-menu-wrap {
        width: 100%;
    }


    .profile-action-circle {
        width: 100%;

        min-height: 44px;

        height: 44px;

        border-radius:
            999px;
    }


    .profile-post-filters {
        gap: 7px;
    }


    .profile-filter-btn {
        width: 100%;

        justify-content:
            flex-start;
    }


    .profile-filter-icon {
        display: none;
    }


    .profile-empty-state {
        min-height: 330px;

        padding-top: 70px;
    }


    .profile-empty-state p {
        font-size: 22px;
    }


    .profile-modal {
        padding: 14px;
    }


    .profile-modal-card {
        padding:
            24px
            18px;

        border-radius:
            20px;
    }


    .profile-modal-actions {
        grid-template-columns:
            1fr;
    }

}