/* ============================================================
   LUSOBIT STUDIO - RESPONSIVIDADE CANONICA
   Este arquivo deve ser carregado DEPOIS de style.css.
   Ele substitui hacks antigos de zoom e estabiliza o layout.
   ============================================================ */

:root {
    --lb-gutter: clamp(0.75rem, 2vw, 1.75rem);
    --lb-content: 100rem;
}

html {
    zoom: 1 !important;
    font-size: 97% !important;
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
body[data-page="translators"] {
    zoom: 1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip !important;
}

*, *::before, *::after { box-sizing: border-box; }

.stage {
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
}

.seabed img {
    object-fit: cover !important;
    object-position: center !important;
}

.topbar,
.pages {
    width: min(100%, var(--lb-content)) !important;
    max-width: var(--lb-content) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding-inline: var(--lb-gutter) !important;
}

.page,
.page > *,
.about-grid,
.board,
.board-inner,
.quick-contact,
.team-board,
.roster,
.roster-list,
.portfolio-stage,
.shelf,
.deck,
.dev-note,
.pagina-vitrine,
.lista-parceiros,
.lista-criacoes,
.desk,
.form-card {
    min-width: 0;
}

img, svg, video, canvas, iframe { max-width: 100%; }

input, textarea, select, button { max-width: 100%; }

p, li, blockquote, .note, .work, .vitrine-ficha, .mail, .social {
    overflow-wrap: anywhere;
}

/* Cabecalho previsivel em notebooks e desktops medios. */
@media (max-width: 1180px) {
    .topbar {
        align-items: center !important;
        gap: 0.75rem !important;
    }

    .hud {
        position: relative !important;
        inset: auto !important;
        margin-left: auto !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .options {
        right: 0 !important;
        max-width: calc(100vw - 2 * var(--lb-gutter)) !important;
    }

    html body .brand-name b,
    html body .brand-name span,
    html body .brand-name > span,
    html body .brand-name > span > span,
    html body .brand-name > b + span {
        font-size: clamp(2.15rem, 3.8vw, 2.85rem) !important;
        line-height: 1 !important;
    }

    /* Sobre nos: evita duas colunas espremidas. */
    #page-about .about-grid,
    body[data-page="about"] .about-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.25rem !important;
    }

    #page-about .quick-contact,
    body[data-page="about"] .quick-contact {
        width: min(44rem, 100%) !important;
        margin-inline: auto !important;
    }

    /* Contato vira uma coluna antes de ficar apertado. */
    html body #page-contact .desk {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(48rem, 100%) !important;
        max-width: 48rem !important;
        margin-inline: auto !important;
        row-gap: 1.75rem !important;
    }

    #page-contact .contact-social-panel {
        border-left: 0 !important;
        border-top: 1px dashed currentColor !important;
        padding-left: 0 !important;
        padding-top: 1.5rem !important;
    }

    /* Parceiros: 3 -> 2 colunas. */
    .lista-parceiros {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(52rem, 100%) !important;
        gap: clamp(1rem, 2.5vw, 1.75rem) !important;
    }

    /* Equipe: pagina deixa de ter rolagem interna. */
    #page-translators .roster-list,
    body[data-page="translators"] .roster-list {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    body[data-page="translators"] .scroller,
    #page-translators .scroller {
        display: none !important;
    }

    /* Portfolio: mantem 3 quadros, mas reduz proporcionalmente. */
    body[data-page="portfolio"] .shelf,
    #page-portfolio .shelf {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 3rem minmax(0, 1fr) 3rem !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "prev deck next"
            ". chest ." !important;
        column-gap: 0.35rem !important;
        row-gap: 0.45rem !important;
        padding-inline: 0 !important;
        min-height: 0 !important;
    }

    body[data-page="portfolio"] .deck,
    #page-portfolio .deck {
        width: 100% !important;
        min-width: 0 !important;
        gap: clamp(0.35rem, 1.25vw, 0.9rem) !important;
        padding-inline: 0 !important;
        transform: none !important;
        left: auto !important;
    }

    body[data-page="portfolio"] .slot.main .cover,
    #page-portfolio .slot.main .cover {
        height: clamp(14rem, 26vw, 18rem) !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body[data-page="portfolio"] .slot.side .cover,
    #page-portfolio .slot.side .cover {
        height: clamp(9rem, 18vw, 12.5rem) !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body[data-page="portfolio"] .big-chest,
    #page-portfolio .big-chest {
        height: clamp(8rem, 16vw, 11rem) !important;
        width: auto !important;
        max-width: 70vw !important;
        filter: none !important;
        box-shadow: none !important;
    }

    body[data-page="portfolio"] .dev-note,
    #page-portfolio .dev-note {
        width: min(46rem, 100%) !important;
        max-width: 46rem !important;
        margin: 1rem auto 0 !important;
        transform: none !important;
        scale: 1 !important;
    }
}

/* Tablet / telas intermediarias. */
@media (max-width: 900px) {
    :root { --lb-gutter: clamp(0.7rem, 2.8vw, 1.2rem); }

    html { font-size: 100% !important; }

    .pages {
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }

    .page-title {
        max-width: 100% !important;
        font-size: clamp(2.35rem, 7.5vw, 4rem) !important;
        line-height: 1.04 !important;
        overflow-wrap: anywhere;
    }

    .topbar {
        padding-top: max(0.65rem, env(safe-area-inset-top)) !important;
        padding-left: max(var(--lb-gutter), env(safe-area-inset-left)) !important;
        padding-right: max(var(--lb-gutter), env(safe-area-inset-right)) !important;
        flex-wrap: wrap !important;
    }

    .brand { min-width: 0 !important; }

    .brand-mark,
    body[data-page="about"] .brand-mark {
        width: clamp(2.6rem, 7vw, 3.5rem) !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .hud-btn,
    .btn-lang,
    .btn-options,
    .shelf-arrow,
    .send,
    .social,
    .kofi-link {
        min-height: 44px !important;
        touch-action: manipulation;
    }

    .options {
        position: fixed !important;
        top: max(0.65rem, env(safe-area-inset-top)) !important;
        right: max(0.65rem, env(safe-area-inset-right)) !important;
        left: auto !important;
        width: min(22rem, calc(100vw - 1.3rem)) !important;
        max-height: calc(100dvh - 1.3rem) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .board-inner {
        padding-left: clamp(1rem, 4vw, 1.7rem) !important;
        padding-right: clamp(1rem, 4vw, 1.7rem) !important;
    }

    .chalk-heading { font-size: clamp(2.1rem, 7vw, 3.4rem) !important; }

    /* Equipe continua lado a lado no tablet. */
    body[data-page="translators"] .team-board,
    #page-translators .team-board,
    body[data-page="translators"] .roster,
    #page-translators .roster {
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-page="translators"] .mate,
    #page-translators .mate {
        grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) !important;
        gap: clamp(0.8rem, 3vw, 1.35rem) !important;
        align-items: center !important;
    }

    #page-translators .portrait {
        width: 100% !important;
        max-width: 9rem !important;
    }

    #page-translators .mate-card {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 1.15rem 1.55rem 1.8rem 1.1rem !important;
    }

    #page-translators .mate-card h3 {
        font-size: clamp(1.45rem, 4.6vw, 1.9rem) !important;
        overflow-wrap: anywhere;
    }

    #page-translators .pairs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    #page-translators .pair { white-space: normal !important; }

    /* Criacoes empilham antes de o quadro de texto for espremido. */
    html body .vitrine-item.criacao,
    html:not(.tema-escuro) .vitrine-item.criacao,
    html.tema-escuro .vitrine-item.criacao {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.4rem !important;
        width: 100% !important;
    }

    html body .vitrine-item.criacao .vitrine-imagem,
    html:not(.tema-escuro) .vitrine-item.criacao .vitrine-imagem,
    html.tema-escuro .vitrine-item.criacao .vitrine-imagem {
        flex: none !important;
        width: min(76%, 31rem) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    html body .vitrine-item.criacao .vitrine-ficha,
    html:not(.tema-escuro) .vitrine-item.criacao .vitrine-ficha,
    html.tema-escuro .vitrine-item.criacao .vitrine-ficha {
        flex: none !important;
        width: min(42rem, 100%) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Portfolio de tablet: so quadro principal para nao comprimir. */
    body[data-page="portfolio"] .slot.side,
    #page-portfolio .slot.side {
        display: none !important;
    }

    body[data-page="portfolio"] .slot.main .cover,
    #page-portfolio .slot.main .cover {
        height: clamp(13rem, 38vw, 18rem) !important;
    }

    body[data-page="portfolio"] .shelf-arrow,
    #page-portfolio .shelf-arrow {
        width: 2.8rem !important;
        height: 2.8rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-self: center !important;
    }
}

/* Celular grande / tablet estreito. */
@media (max-width: 700px) {
    :root { --lb-gutter: max(0.65rem, env(safe-area-inset-left)); }

    .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: stretch !important;
        gap: 0.45rem !important;
    }

    .brand {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    .hud {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: center !important;
        gap: 0.3rem !important;
    }

    html body .brand-name b,
    html body .brand-name span,
    html body .brand-name > span,
    html body .brand-name > span > span,
    html body .brand-name > b + span {
        font-size: clamp(1.65rem, 7vw, 2.1rem) !important;
    }

    .page-title { font-size: clamp(2.2rem, 11vw, 3.45rem) !important; }

    /* Parceiros: uma coluna. */
    .lista-parceiros {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(31rem, 100%) !important;
        gap: 1.75rem !important;
    }

    .parceiro .vitrine-imagem {
        width: min(68%, 19rem) !important;
        transform: none !important;
    }

    .parceiro:nth-child(even) .vitrine-imagem { transform: none !important; }

    .vitrine-ficha { min-height: 0 !important; }

    /* Equipe: foto em cima, texto embaixo. */
    body[data-page="translators"] .mate,
    #page-translators .mate {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.7rem !important;
    }

    #page-translators .portrait {
        width: min(9rem, 44vw) !important;
        margin-inline: auto !important;
    }

    #page-translators .mate-card {
        padding: 1rem 1.15rem 1.55rem 1rem !important;
    }

    #page-translators .team-group { gap: 1.5rem !important; }

    #page-translators .team-group-title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }

    /* Portfolio mobile. */
    body[data-page="portfolio"] .shelf,
    #page-portfolio .shelf {
        grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem !important;
        column-gap: 0.2rem !important;
    }

    body[data-page="portfolio"] .slot.main,
    #page-portfolio .slot.main { max-width: 100% !important; }

    body[data-page="portfolio"] .slot.main .cover,
    #page-portfolio .slot.main .cover {
        height: clamp(11.5rem, 56vw, 15rem) !important;
    }

    body[data-page="portfolio"] .slot.main > .cap,
    #page-portfolio .slot.main > .cap {
        width: min(72vw, 20rem) !important;
        height: auto !important;
        min-height: 1.8rem !important;
        max-height: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.9rem !important;
    }

    body[data-page="portfolio"] .big-chest,
    #page-portfolio .big-chest {
        height: clamp(6rem, 26vw, 8rem) !important;
        max-width: 72vw !important;
    }

    body[data-page="portfolio"] .dev-note,
    #page-portfolio .dev-note {
        margin-top: 0.65rem !important;
        overflow: hidden !important;
    }

    #page-portfolio .dev-head {
        justify-content: center !important;
        gap: 0.45rem !important;
    }

    #page-portfolio .dev-idiomas {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
    }

    #page-portfolio .dev-link { min-height: 44px !important; }

    /* Contato. */
    #page-contact .desk { padding-inline: 0 !important; }
    #page-contact form,
    #page-contact .contact-social-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    #page-contact input,
    #page-contact textarea,
    #page-contact select {
        width: 100% !important;
        font-size: 16px !important;
    }

    #page-contact textarea { min-height: 9rem !important; resize: vertical !important; }

    /* Criacoes menores. */
    html body .vitrine-item.criacao .vitrine-imagem,
    html:not(.tema-escuro) .vitrine-item.criacao .vitrine-imagem,
    html.tema-escuro .vitrine-item.criacao .vitrine-imagem {
        width: min(88%, 25rem) !important;
    }

    html body .vitrine-item.criacao .vitrine-ficha,
    html:not(.tema-escuro) .vitrine-item.criacao .vitrine-ficha,
    html.tema-escuro .vitrine-item.criacao .vitrine-ficha {
        padding: 2rem 1.25rem 2.5rem !important;
    }
}

/* Celulares pequenos. */
@media (max-width: 430px) {
    .pages {
        padding-left: max(0.55rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.55rem, env(safe-area-inset-right)) !important;
    }

    .brand-mark,
    body[data-page="about"] .brand-mark { width: 2.7rem !important; }

    html body .brand-name b,
    html body .brand-name span,
    html body .brand-name > span,
    html body .brand-name > span > span,
    html body .brand-name > b + span {
        font-size: clamp(1.45rem, 7.2vw, 1.8rem) !important;
    }

    .page-title { font-size: clamp(2rem, 12vw, 3rem) !important; }

    body[data-page="portfolio"] .shelf,
    #page-portfolio .shelf {
        grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem !important;
    }

    body[data-page="portfolio"] .shelf-arrow,
    #page-portfolio .shelf-arrow {
        width: 2.6rem !important;
        height: 2.6rem !important;
        padding: 0.3rem !important;
    }

    body[data-page="portfolio"] .slot.main .cover,
    #page-portfolio .slot.main .cover {
        height: clamp(10.5rem, 60vw, 13.8rem) !important;
    }

    #page-portfolio .dev-note { font-size: 1rem !important; }
}

/* Celular deitado e notebooks com pouca altura. */
@media (max-height: 620px) and (min-width: 701px) {
    .topbar { padding-top: 0.45rem !important; }
    .page-title { margin-bottom: 0.35rem !important; }

    body[data-page="portfolio"] .slot.main .cover,
    #page-portfolio .slot.main .cover {
        height: min(44dvh, 15rem) !important;
    }

    body[data-page="portfolio"] .slot.side .cover,
    #page-portfolio .slot.side .cover {
        height: min(32dvh, 10rem) !important;
    }

    body[data-page="portfolio"] .big-chest,
    #page-portfolio .big-chest {
        height: min(22dvh, 7rem) !important;
    }

    body[data-page="portfolio"] .dev-note,
    #page-portfolio .dev-note { margin-top: 0.5rem !important; }
}

@media (max-width: 900px) and (max-height: 520px) {
    body[data-page="portfolio"] .slot.side,
    #page-portfolio .slot.side { display: none !important; }

    body[data-page="portfolio"] .slot.main .cover,
    #page-portfolio .slot.main .cover { height: min(48dvh, 12rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Blindagem final do painel do desenvolvedor: limita pelo viewport,
   independentemente de larguras herdadas de blocos antigos. */
html body[data-page="portfolio"] #page-portfolio .portfolio-stage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html body[data-page="portfolio"] #page-portfolio .dev-note {
    width: min(46rem, calc(100vw - 2 * var(--lb-gutter))) !important;
    max-width: calc(100vw - 2 * var(--lb-gutter)) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 900px) {
    /* Especificidade alta para vencer os resets antigos do carrossel. */
    html body[data-page="portfolio"] #page-portfolio .deck > .slot.side,
    html body[data-page="portfolio"] #page-portfolio .deck > .slot.side:last-child {
        display: none !important;
    }

    html body[data-page="portfolio"] #page-portfolio .deck > .slot.main {
        display: flex !important;
        max-width: 100% !important;
    }
}





/* LUSOBIT-EQUIPE-80-INICIO */

/*
 * NOSSA EQUIPE
 * Conteudo visual 20% menor.
 *
 * Nao usa zoom no body inteiro para nao baguncar
 * os breakpoints responsivos.
 */

body[data-page="translators"] #page-translators .page-inner {
    font-size: 80% !important;
}

/* Titulo da pagina */
body[data-page="translators"] #page-translators .page-title {
    font-size: clamp(2.2rem, 5.6vw, 4.2rem) !important;
}

/* Quadro principal da equipe */
body[data-page="translators"] #page-translators .team-board {
    width: min(80%, 72rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Grupos */
body[data-page="translators"] #page-translators .team-group-title {
    font-size: clamp(1.35rem, 2.9vw, 1.92rem) !important;
}

/* Fotos */
body[data-page="translators"] #page-translators .portrait {
    transform: scale(0.80) !important;
    transform-origin: center center !important;
}

/* Cartoes */
body[data-page="translators"] #page-translators .mate-card {
    font-size: 0.80rem !important;
}

/* Nome */
body[data-page="translators"] #page-translators .mate-card h3 {
    font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
}

/* Mobile: ocupa a largura disponivel, mas elementos continuam menores */
@media (max-width: 900px) {

    body[data-page="translators"] #page-translators .team-board {
        width: 94% !important;
        max-width: 94% !important;
    }

    body[data-page="translators"] #page-translators .portrait {
        transform: scale(0.88) !important;
    }

    body[data-page="translators"] #page-translators .mate-card {
        font-size: 0.88rem !important;
    }
}

@media (max-width: 600px) {

    body[data-page="translators"] #page-translators .team-board {
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-page="translators"] #page-translators .portrait {
        transform: scale(0.90) !important;
    }
}

/* LUSOBIT-EQUIPE-80-FIM */


/* LUSOBIT-BIOS-120-SEGURO-INICIO */

/*
 * BIOS DA EQUIPE
 *
 * - Texto das bios 20% maior.
 * - Cartoes podem crescer verticalmente.
 * - Reserva espaco interno para impedir que o texto
 *   encoste nas bordas laranjas.
 * - Quebra palavras/URLs longas quando necessario.
 */

/* ------------------------------------------------------------
   CARTAO
   ------------------------------------------------------------ */

body[data-page="translators"] #page-translators .mate,
body[data-page="translators"] #page-translators .mate-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/*
 * Area segura interna.
 * O padding lateral e inferior mantem a bio afastada
 * da moldura laranja mesmo quando houver muito texto.
 */
body[data-page="translators"] #page-translators .mate-card {
    box-sizing: border-box !important;

    padding-top: clamp(1.45rem, 2vw, 1.9rem) !important;
    padding-right: clamp(2.8rem, 4.5vw, 4.1rem) !important;
    padding-bottom: clamp(2.8rem, 4vw, 3.8rem) !important;
    padding-left: clamp(2rem, 3.4vw, 3rem) !important;
}

/* ------------------------------------------------------------
   BIO
   ------------------------------------------------------------ */

body[data-page="translators"] #page-translators .mate-card .note {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    /*
     * O ajuste anterior da pagina deixava o cartao em 0.80rem.
     * 0.96rem = exatamente 20% a mais.
     */
    font-size: 0.96rem !important;
    line-height: 1.48 !important;

    margin-top: 0.65rem !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
}

/*
 * Nenhum elemento textual interno pode ultrapassar
 * a largura disponivel.
 */
body[data-page="translators"] #page-translators .mate-card h3,
body[data-page="translators"] #page-translators .mate-card p,
body[data-page="translators"] #page-translators .mate-card .note,
body[data-page="translators"] #page-translators .mate-card a {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Links e URLs muito grandes tambem quebram antes da borda */
body[data-page="translators"] #page-translators .mate-card .note a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* ------------------------------------------------------------
   NOTEBOOK / TABLET
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

    body[data-page="translators"] #page-translators .mate-card {
        padding:
            1.4rem
            clamp(2.3rem, 4vw, 3.2rem)
            2.6rem
            clamp(1.7rem, 3vw, 2.3rem) !important;
    }

    body[data-page="translators"] #page-translators .mate-card .note {
        font-size: 0.96rem !important;
        line-height: 1.46 !important;
    }
}

/* ------------------------------------------------------------
   CELULAR
   Mantem fonte confortavel, mas preserva uma faixa interna
   segura entre texto e moldura.
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    body[data-page="translators"] #page-translators .mate-card {
        padding-top: 1.25rem !important;
        padding-right: 1.65rem !important;
        padding-bottom: 2rem !important;
        padding-left: 1.65rem !important;
    }

    body[data-page="translators"] #page-translators .mate-card .note {
        font-size: 0.96rem !important;
        line-height: 1.45 !important;
    }
}

/* ------------------------------------------------------------
   CELULARES MUITO ESTREITOS
   Ainda existe margem de seguranca dos dois lados.
   ------------------------------------------------------------ */

@media (max-width: 380px) {

    body[data-page="translators"] #page-translators .mate-card {
        padding-top: 1.15rem !important;
        padding-right: 1.4rem !important;
        padding-bottom: 1.8rem !important;
        padding-left: 1.4rem !important;
    }

    body[data-page="translators"] #page-translators .mate-card .note {
        font-size: 0.94rem !important;
        line-height: 1.44 !important;
    }
}

/* LUSOBIT-BIOS-120-SEGURO-FIM */


/* LUSOBIT-PALAVRAS-INTEIRAS-INICIO */

/*
 * ==========================================================
 * NOSSA EQUIPE - PALAVRAS SEMPRE INTEIRAS
 * ==========================================================
 *
 * Impede:
 *
 * trad-
 * utor
 *
 * tradu
 * tor
 *
 * localiza
 * ção
 *
 * etc.
 *
 * A quebra acontece somente ENTRE palavras.
 */

/* ----------------------------------------------------------
   TODOS OS TEXTOS DOS CARTOES
   ---------------------------------------------------------- */

body[data-page="translators"] #page-translators .mate-card,
body[data-page="translators"] #page-translators .mate-card h3,
body[data-page="translators"] #page-translators .mate-card p,
body[data-page="translators"] #page-translators .mate-card span,
body[data-page="translators"] #page-translators .mate-card .note,
body[data-page="translators"] #page-translators .mate-card .role,
body[data-page="translators"] #page-translators .mate-card .pairs,
body[data-page="translators"] #page-translators .mate-card li {
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;

    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;

    text-wrap: pretty;
}

/* ----------------------------------------------------------
   BIO
   ---------------------------------------------------------- */

body[data-page="translators"] #page-translators .mate-card .note {
    width: 100% !important;
    max-width: 100% !important;

    /*
     * Mantem o tamanho aumentado anteriormente,
     * mas nunca sacrifica uma palavra para caber.
     */
    font-size: 0.96rem !important;
    line-height: 1.48 !important;

    padding: 0 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* ----------------------------------------------------------
   CARGO E IDIOMAS
   ---------------------------------------------------------- */

body[data-page="translators"] #page-translators .mate-card .role,
body[data-page="translators"] #page-translators .mate-card .pairs,
body[data-page="translators"] #page-translators .mate-card .pair,
body[data-page="translators"] #page-translators .mate-card .langs {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* ----------------------------------------------------------
   NOMES
   ---------------------------------------------------------- */

body[data-page="translators"] #page-translators .mate-card h3,
body[data-page="translators"] #page-translators .mate-card h3 a {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* ----------------------------------------------------------
   LINKS
   ----------------------------------------------------------
   URLs sao a unica excecao.

   Uma URL gigantesca sem espacos precisa poder quebrar para
   nao atravessar a moldura.
   ---------------------------------------------------------- */

body[data-page="translators"] #page-translators .mate-card .note a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: none !important;
}

/* ----------------------------------------------------------
   PROTECAO DAS BORDAS
   ----------------------------------------------------------
   Em vez de cortar palavras, damos espaco suficiente para
   o texto dentro da moldura.
   ---------------------------------------------------------- */

body[data-page="translators"] #page-translators .mate-card {
    box-sizing: border-box !important;

    padding-top:
        clamp(1.45rem, 2vw, 1.9rem) !important;

    padding-right:
        clamp(3rem, 4.8vw, 4.3rem) !important;

    padding-bottom:
        clamp(2.9rem, 4.2vw, 3.9rem) !important;

    padding-left:
        clamp(2.1rem, 3.6vw, 3.1rem) !important;

    height: auto !important;
    min-height: 0 !important;
}

/* O cartao cresce verticalmente quando a bio precisar */
body[data-page="translators"] #page-translators .mate {
    height: auto !important;
    min-height: 0 !important;
}

/* ----------------------------------------------------------
   TABLETS
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    body[data-page="translators"] #page-translators .mate-card {
        padding-top: 1.4rem !important;
        padding-right: 2.4rem !important;
        padding-bottom: 2.6rem !important;
        padding-left: 1.9rem !important;
    }

    body[data-page="translators"] #page-translators .mate-card .note {
        font-size: 0.96rem !important;
        line-height: 1.47 !important;
    }
}

/* ----------------------------------------------------------
   CELULARES
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    body[data-page="translators"] #page-translators .mate-card {
        padding-top: 1.3rem !important;
        padding-right: 1.75rem !important;
        padding-bottom: 2.1rem !important;
        padding-left: 1.75rem !important;
    }

    body[data-page="translators"] #page-translators .mate-card .note {
        font-size: 0.96rem !important;
        line-height: 1.46 !important;
    }
}

/* ----------------------------------------------------------
   CELULARES ESTREITOS
   ---------------------------------------------------------- */

@media (max-width: 380px) {

    body[data-page="translators"] #page-translators .mate-card {
        padding-top: 1.2rem !important;
        padding-right: 1.45rem !important;
        padding-bottom: 1.9rem !important;
        padding-left: 1.45rem !important;
    }

    /*
     * Uma reducao minima aqui e preferivel a quebrar
     * palavras ao meio.
     */
    body[data-page="translators"] #page-translators .mate-card .note {
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
    }
}

/* LUSOBIT-PALAVRAS-INTEIRAS-FIM */


/* LUSOBIT-BIOS-PARAGRAFOS-INICIO */

/*
 * BIOS DA EQUIPE
 * Melhor separacao visual entre frases/paragrafos.
 */

body[data-page="translators"] #page-translators .mate-card .note {
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    hyphens: none !important;
    -webkit-hyphens: none !important;

    line-height: 1.52 !important;
}

/*
 * Cada frase transformada em bloco recebe sua propria linha.
 */
body[data-page="translators"] #page-translators .mate-card .note .bio-sentence {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 0.48em 0 !important;
    padding: 0 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/*
 * Um pouco mais de espaco quando realmente ha varias frases.
 */
body[data-page="translators"] #page-translators .mate-card .note .bio-sentence:last-child {
    margin-bottom: 0 !important;
}

/*
 * URLs continuam protegidas contra overflow.
 */
body[data-page="translators"] #page-translators .mate-card .note a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Mobile */
@media (max-width: 600px) {

    body[data-page="translators"] #page-translators .mate-card .note {
        line-height: 1.48 !important;
    }

    body[data-page="translators"] #page-translators .mate-card .note .bio-sentence {
        margin-bottom: 0.42em !important;
    }
}

/* LUSOBIT-BIOS-PARAGRAFOS-FIM */


/* LUSOBIT-BIOS-PARAGRAFOS-COMPACTOS-INICIO */

/*
 * Paragrafos mais naturais e compactos.
 * Duas frases ficam juntas antes da proxima quebra.
 */

body[data-page="translators"]
#page-translators
.mate-card
.note
.bio-sentence {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0.32em !important;
    margin-left: 0 !important;

    padding: 0 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    hyphens: none !important;
    -webkit-hyphens: none !important;
}

body[data-page="translators"]
#page-translators
.mate-card
.note
.bio-sentence:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 600px) {

    body[data-page="translators"]
    #page-translators
    .mate-card
    .note
    .bio-sentence {
        margin-bottom: 0.28em !important;
    }
}

/* LUSOBIT-BIOS-PARAGRAFOS-COMPACTOS-FIM */


/* LUSOBIT-BIOS-ENTERS-INICIO */

/*
 * Cada grupo de frases ocupa sua propria linha.
 * Ha separacao perceptivel, mas sem exagero.
 */

body[data-page="translators"]
#page-translators
.mate-card
.note
.bio-sentence {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin:
        0
        0
        0.55em
        0 !important;

    padding: 0 !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/*
 * Ultimo paragrafo nao cria espaco vazio extra.
 */
body[data-page="translators"]
#page-translators
.mate-card
.note
.bio-sentence:last-child {
    margin-bottom: 0 !important;
}

/*
 * Mantem a leitura confortavel.
 */
body[data-page="translators"]
#page-translators
.mate-card
.note {
    line-height: 1.5 !important;
}

/*
 * Celular: um pouco menos de espaco,
 * porque a largura ja produz mais linhas.
 */
@media (max-width: 600px) {

    body[data-page="translators"]
    #page-translators
    .mate-card
    .note
    .bio-sentence {
        margin-bottom: 0.48em !important;
    }
}

/* LUSOBIT-BIOS-ENTERS-FIM */








/* LUSOBIT-ABOUT-3-FRASES-INICIO */

/*
 * ==========================================================
 * ABOUT US / SOBRE NOS
 *
 * 3 frases por paragrafo.
 * Sem palavras quebradas.
 * Espacamento claro entre paragrafos.
 * ==========================================================
 */

body[data-page="about"]
#page-about
#about-copy {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* PARAGRAFOS */

body[data-page="about"]
#page-about
#about-copy
.about-paragraph {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    /*
     * Mantem o aumento de texto solicitado anteriormente.
     */
    font-size:
        clamp(1.18rem, 0.42vw + 1.06rem, 1.33rem) !important;

    line-height: 1.48 !important;

    margin-top: 0 !important;
    margin-right: 0 !important;

    /*
     * Espaco entre os grupos de 3 frases.
     */
    margin-bottom: 1.05em !important;

    margin-left: 0 !important;

    padding: 0 !important;

    white-space: normal !important;

    /*
     * PALAVRAS SEMPRE INTEIRAS.
     */
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;

    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;

    text-wrap: pretty;
}

/*
 * Ultimo paragrafo nao deixa buraco no final.
 */
body[data-page="about"]
#page-about
#about-copy
.about-paragraph:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================
   NOTEBOOK
   ========================================================== */

@media (max-width: 1366px) {

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size: 1.22rem !important;
        line-height: 1.47 !important;

        margin-bottom: 0.95em !important;
    }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size:
            clamp(1.12rem, 2.8vw, 1.24rem) !important;

        line-height: 1.47 !important;

        margin-bottom: 0.9em !important;
    }
}

/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 600px) {

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size:
            clamp(1.08rem, 4.4vw, 1.18rem) !important;

        line-height: 1.46 !important;

        /*
         * No celular o proprio wrap cria mais altura,
         * entao o espaco pode ser um pouco menor.
         */
        margin-bottom: 0.82em !important;
    }
}

/* ==========================================================
   CELULAR ESTREITO
   ========================================================== */

@media (max-width: 380px) {

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size: 1.06rem !important;
        line-height: 1.45 !important;

        margin-bottom: 0.78em !important;
    }
}

/* LUSOBIT-ABOUT-3-FRASES-FIM */


/* LUSOBIT-MURAL-ABOUT-CSS-INICIO */

/* ==========================================================
   MURAL
   ========================================================== */

body[data-page="about"]
#page-about
.lusobit-art-wall {
    width: min(100%, 82rem) !important;

    margin:
        clamp(3.5rem, 7vw, 6rem)
        auto
        2rem
        auto !important;

    padding:
        0
        clamp(1.4rem, 3vw, 2.5rem)
        3rem
        clamp(1.4rem, 3vw, 2.5rem) !important;

    box-sizing: border-box !important;
}

/* ==========================================================
   CABECALHO
   ========================================================== */

body[data-page="about"]
#page-about
.art-wall-header {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

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

    gap: 0.75rem !important;

    margin-bottom:
        clamp(2.8rem, 5vw, 4.2rem) !important;

    padding:
        1.3rem
        1.5rem
        1.45rem
        1.5rem !important;

    text-align: center !important;

    border-top:
        2px solid
        var(--accent, #ff7a00) !important;

    border-bottom:
        2px solid
        var(--accent, #ff7a00) !important;
}

body[data-page="about"]
#page-about
.art-wall-title {
    margin: 0 !important;
    padding: 0 !important;

    font-size:
        clamp(1.8rem, 3.6vw, 2.75rem) !important;

    line-height: 1.05 !important;

    letter-spacing: 0.025em !important;
}

/* ==========================================================
   CREDITOS
   ========================================================== */

body[data-page="about"]
#page-about
.art-wall-credits {
    display: flex !important;

    flex-wrap: wrap !important;

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

    gap: 0.55rem !important;

    font-size:
        clamp(0.88rem, 1.4vw, 1.02rem) !important;

    line-height: 1.4 !important;
}

body[data-page="about"]
#page-about
.art-wall-credits-label {
    opacity: 0.72 !important;
}

body[data-page="about"]
#page-about
.art-wall-credits-label::after {
    content: ":" !important;
}

body[data-page="about"]
#page-about
.art-wall-artist {
    color:
        var(--accent, #ff7a00) !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    border-bottom:
        1px solid
        transparent !important;

    transition:
        transform 160ms ease,
        border-color 160ms ease !important;
}

body[data-page="about"]
#page-about
.art-wall-artist:hover {
    border-bottom-color:
        currentColor !important;

    transform:
        translateY(-1px) !important;
}

body[data-page="about"]
#page-about
.art-wall-credit-dot {
    opacity: 0.55 !important;
}

/* ==========================================================
   GRADE
   ========================================================== */

body[data-page="about"]
#page-about
.art-wall-grid {
    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 15rem), 1fr)
        ) !important;

    align-items: center !important;

    gap:
        clamp(2.8rem, 5vw, 4.8rem)
        clamp(2rem, 4vw, 3.5rem) !important;

    width: 100% !important;

    padding:
        1.5rem
        0
        2rem
        0 !important;

    box-sizing: border-box !important;
}

/* ==========================================================
   MOLDURAS
   ========================================================== */

body[data-page="about"]
#page-about
.art-wall-frame {
    --frame-rotation: 0deg;

    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        clamp(0.55rem, 0.9vw, 0.8rem) !important;

    box-sizing: border-box !important;

    cursor: zoom-in !important;

    background:
        linear-gradient(
            145deg,
            #ff9b3d 0%,
            var(--accent, #ff7a00) 38%,
            #d95700 100%
        ) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.22) !important;

    border-radius:
        0.22rem !important;

    box-shadow:
        0 0.35rem 0 rgba(0, 0, 0, 0.20),
        0 1rem 1.8rem rgba(0, 0, 0, 0.30),
        inset 0 0 0 2px rgba(0, 0, 0, 0.18),
        inset 0 0 0 5px rgba(255, 255, 255, 0.08) !important;

    transform:
        rotate(var(--frame-rotation)) !important;

    transform-origin:
        center center !important;

    transition:
        transform 190ms ease,
        box-shadow 190ms ease !important;
}

/*
 * Pequeno detalhe de moldura interna.
 */

body[data-page="about"]
#page-about
.art-wall-frame::before {
    content: "" !important;

    position: absolute !important;

    inset: 0.35rem !important;

    pointer-events: none !important;

    border:
        1px solid
        rgba(20, 10, 0, 0.45) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.14) !important;

    z-index: 2 !important;
}

/*
 * Cada obra preserva sua proporcao.
 * Nao existe mais corte forcado em 4:3.
 */

body[data-page="about"]
#page-about
.art-wall-frame-inner {
    position: relative !important;

    display: flex !important;

    width: 100% !important;

    min-height: 10rem !important;
    max-height: 28rem !important;

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

    overflow: hidden !important;

    background:
        #111 !important;

    box-shadow:
        inset 0 0 1rem
        rgba(0, 0, 0, 0.75) !important;
}

body[data-page="about"]
#page-about
.art-wall-frame img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-height: 28rem !important;

    object-fit: contain !important;
    object-position: center !important;

    user-select: none !important;

    transition:
        transform 240ms ease,
        filter 240ms ease !important;
}

/* ==========================================================
   ROTACOES
   ========================================================== */

body[data-page="about"]
#page-about
.art-wall-frame-1 {
    --frame-rotation: -2.5deg;
}

body[data-page="about"]
#page-about
.art-wall-frame-2 {
    --frame-rotation: 1.7deg;
}

body[data-page="about"]
#page-about
.art-wall-frame-3 {
    --frame-rotation: -1.2deg;
}

body[data-page="about"]
#page-about
.art-wall-frame-4 {
    --frame-rotation: 2.8deg;
}

body[data-page="about"]
#page-about
.art-wall-frame-5 {
    --frame-rotation: -1.8deg;
}

body[data-page="about"]
#page-about
.art-wall-frame-6 {
    --frame-rotation: 1deg;
}

body[data-page="about"]
#page-about
.art-wall-frame-7 {
    --frame-rotation: -3deg;
}

body[data-page="about"]
#page-about
.art-wall-frame-8 {
    --frame-rotation: 2.1deg;
}

/* ==========================================================
   HOVER
   ========================================================== */

@media (hover: hover) {

    body[data-page="about"]
    #page-about
    .art-wall-frame:hover {
        transform:
            rotate(0deg)
            translateY(-0.55rem)
            scale(1.035) !important;

        box-shadow:
            0 0.4rem 0 rgba(0, 0, 0, 0.20),
            0 1.5rem 2.5rem rgba(0, 0, 0, 0.40),
            inset 0 0 0 2px rgba(0, 0, 0, 0.18),
            inset 0 0 0 5px rgba(255, 255, 255, 0.10) !important;

        z-index: 5 !important;
    }

    body[data-page="about"]
    #page-about
    .art-wall-frame:hover img {
        transform:
            scale(1.018) !important;
    }
}

/* ==========================================================
   VISUALIZADOR EM TAMANHO REAL
   ========================================================== */

html.art-viewer-open,
body.art-viewer-open {
    overflow: hidden !important;
}

.art-viewer {
    position: fixed !important;

    inset: 0 !important;

    display: flex !important;

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

    padding:
        clamp(1rem, 3vw, 2.5rem) !important;

    box-sizing: border-box !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    z-index: 2147483000 !important;

    transition:
        opacity 180ms ease,
        visibility 180ms ease !important;
}

.art-viewer.is-open {
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
}

.art-viewer-backdrop {
    position: absolute !important;

    inset: 0 !important;

    background:
        rgba(0, 0, 0, 0.92) !important;

    backdrop-filter:
        blur(7px) !important;
}

/* ==========================================================
   PALCO
   ========================================================== */

.art-viewer-stage {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

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

    width: fit-content !important;
    max-width: 100% !important;

    max-height: 100% !important;

    z-index: 2 !important;
}

/* ==========================================================
   IMAGEM GRANDE
   ========================================================== */

.art-viewer-image-wrap {
    display: flex !important;

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

    max-width:
        calc(100vw - 3rem) !important;

    max-height:
        calc(100vh - 7rem) !important;

    padding:
        clamp(0.4rem, 0.8vw, 0.7rem) !important;

    box-sizing: border-box !important;

    background:
        var(--accent, #ff7a00) !important;

    box-shadow:
        0 1.5rem 4rem
        rgba(0, 0, 0, 0.65) !important;
}

.art-viewer-image {
    display: block !important;

    /*
     * Exibe na resolucao natural sempre que houver
     * espaco suficiente.
     *
     * Se for maior que a tela, reduz apenas o necessario.
     */
    width: auto !important;
    height: auto !important;

    max-width:
        calc(100vw - 4rem) !important;

    max-height:
        calc(100vh - 8rem) !important;

    object-fit: contain !important;

    background: #111 !important;
}

/* ==========================================================
   NOME DA ARTE
   ========================================================== */

.art-viewer-caption {
    max-width:
        min(90vw, 60rem) !important;

    margin-top: 0.8rem !important;

    color: #fff !important;

    font-size:
        clamp(0.82rem, 1.5vw, 1rem) !important;

    line-height: 1.3 !important;

    text-align: center !important;

    opacity: 0.82 !important;
}

/* ==========================================================
   BOTAO FECHAR
   ========================================================== */

.art-viewer-close {
    position: absolute !important;

    top: -1.25rem !important;
    right: -1.25rem !important;

    display: flex !important;

    width: 2.8rem !important;
    height: 2.8rem !important;

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

    padding: 0 !important;

    border:
        2px solid
        var(--accent, #ff7a00) !important;

    border-radius: 50% !important;

    background: #111 !important;

    color: #fff !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size: 2rem !important;
    line-height: 1 !important;

    cursor: pointer !important;

    box-shadow:
        0 0.5rem 1.3rem
        rgba(0, 0, 0, 0.5) !important;

    z-index: 10 !important;
}

.art-viewer-close:hover {
    transform: scale(1.08) !important;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    body[data-page="about"]
    #page-about
    .art-wall-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            2.8rem
            1.8rem !important;
    }
}

/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 560px) {

    body[data-page="about"]
    #page-about
    .lusobit-art-wall {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    body[data-page="about"]
    #page-about
    .art-wall-header {
        margin-bottom: 2.6rem !important;
    }

    body[data-page="about"]
    #page-about
    .art-wall-grid {
        grid-template-columns:
            1fr !important;

        width:
            min(100%, 22rem) !important;

        margin-right: auto !important;
        margin-left: auto !important;

        gap: 2.7rem !important;
    }

    body[data-page="about"]
    #page-about
    .art-wall-frame {
        --frame-rotation: -1deg;
    }

    body[data-page="about"]
    #page-about
    .art-wall-frame:nth-child(even) {
        --frame-rotation: 1deg;
    }

    .art-viewer {
        padding: 0.8rem !important;
    }

    .art-viewer-image-wrap {
        max-width:
            calc(100vw - 1.6rem) !important;

        max-height:
            calc(100vh - 5.5rem) !important;
    }

    .art-viewer-image {
        max-width:
            calc(100vw - 2.4rem) !important;

        max-height:
            calc(100vh - 6.5rem) !important;
    }

    .art-viewer-close {
        top: -1rem !important;
        right: -0.5rem !important;
    }
}

/* LUSOBIT-MURAL-ABOUT-CSS-FIM */


/* LUSOBIT-REPARO-SEM-STRETCH-INICIO */

/* ============================================================
   ABOUT US
   Preserva completamente:
   - texto
   - paragrafos
   - moldura
   - mural
   - galeria

   Apenas evita que as colunas do grid tenham a mesma altura.
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid {
    align-items: start !important;
}


/*
 * O quadro do About continua usando seu layout original.
 * Nao mexemos em height, flex, display ou position.
 */

html body[data-page="about"]
#page-about
.about-grid > .board {
    align-self: start !important;
}


/*
 * Caso exista o antigo painel amarelo na segunda coluna,
 * ele tambem termina no proprio conteudo.
 */

html body[data-page="about"]
#page-about
.about-grid > .quick-contact {
    align-self: start !important;
}


/* ============================================================
   TEXTO DO ABOUT
   Restaura comportamento normal de paragrafos.
   ============================================================ */

html body[data-page="about"]
#page-about
#about-copy {
    display: block !important;

    white-space: normal !important;

    width: 100% !important;
    max-width: 100% !important;
}


/*
 * Tanto os <p> normais quanto os .about-paragraph
 * permanecem blocos independentes.
 */

html body[data-page="about"]
#page-about
#about-copy > p,

html body[data-page="about"]
#page-about
#about-copy
.about-paragraph {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    hyphens: none !important;
    -webkit-hyphens: none !important;
}


/* ============================================================
   GALERIA
   GARANTE QUE O MURAL VOLTE A APARECER.
   ============================================================ */

html body[data-page="about"]
#page-about
.lusobit-art-wall {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: min(100%, 82rem) !important;

    height: auto !important;

    position: relative !important;

    overflow: visible !important;
}


/*
 * Preserva o grid próprio da galeria.
 */

html body[data-page="about"]
#page-about
.art-wall-grid {
    display: grid !important;

    visibility: visible !important;
    opacity: 1 !important;

    height: auto !important;
}


/*
 * Não deixa um override genérico esconder as obras.
 */

html body[data-page="about"]
#page-about
.art-wall-frame {
    visibility: visible !important;
    opacity: 1 !important;
}


/* ============================================================
   CONTACT US
   Aqui o elemento real e .contact-social-panel.
   ============================================================ */

html body[data-page="contact"]
#page-contact
.desk {
    align-items: start !important;
}


/*
 * A lateral termina no conteúdo dela.
 *
 * IMPORTANTE:
 * Não alteramos display:flex interno,
 * porque ele organiza Redes + Ko-fi.
 */

html body[data-page="contact"]
#page-contact
.contact-social-panel {
    align-self: start !important;

    height: auto !important;
    min-height: 0 !important;

    flex-grow: 0 !important;
}


/*
 * O formulário também começa no topo,
 * mas sua estrutura interna permanece intacta.
 */

html body[data-page="contact"]
#page-contact
#contact-form.form-card {
    align-self: start !important;
}


/* ============================================================
   DESKTOP
   Mantém exatamente as duas colunas existentes.
   ============================================================ */

@media (min-width: 1181px) {

    html body[data-page="contact"]
    #page-contact
    .contact-social-panel {
        align-self: start !important;
    }

}


/* ============================================================
   TABLET / CELULAR
   Não força largura nem altura nova.
   ============================================================ */

@media (max-width: 1180px) {

    html body[data-page="contact"]
    #page-contact
    .contact-social-panel {
        align-self: start !important;

        height: auto !important;
        min-height: 0 !important;
    }

}

/* LUSOBIT-REPARO-SEM-STRETCH-FIM */

/* LUSOBIT-ABOUT-LAYOUT-CONSOLIDADO-INICIO */

/* ============================================================
   ABOUT US
   LAYOUT CONSOLIDADO

   Este e o UNICO bloco responsavel pela geometria do About.
   ============================================================ */


/* PAGINA */

html body[data-page="about"] #page-about {
    position: relative !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    overflow-anchor: none !important;
}


/* GRID */

html body[data-page="about"]
#page-about
.about-grid {

    position: relative !important;

    align-items: start !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    overflow-anchor: none !important;
}


/* ============================================================
   MOLDURA
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    align-self: start !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    border: 6px solid #f05a00 !important;
    border-radius: 1.35rem !important;

    overflow: hidden !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    overflow-anchor: none !important;

    box-shadow:
        0 4px 0 rgba(94, 54, 24, 0.16) !important;
}


/* ============================================================
   CONTEUDO DA MOLDURA
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board
.board-inner {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    padding-top: 2.5rem !important;
    padding-right: 2.5rem !important;
    padding-bottom: 2.2rem !important;
    padding-left: 2.5rem !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    overflow-anchor: none !important;

    contain: none !important;
}


/* ============================================================
   TITULO

   Mantem:
   - 11 graus
   - escala 81%
   - posicao dentro do amarelo
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board
.page-title,

html body[data-page="about"]
#page-about
.about-grid > .board
.chalk-heading,

html body[data-page="about"]
#page-about
.about-grid > .board
h1 {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    transform:
        translateY(17%)
        rotate(11deg)
        scale(0.81) !important;

    translate: none !important;

    transform-origin:
        center center !important;

    animation: none !important;
    transition: none !important;

    will-change: auto !important;

    z-index: 10 !important;
}


/* ============================================================
   TEXTO

   POSICAO TOTALMENTE DETERMINISTICA.

   Nao usa:
   - vw
   - vh
   - clamp
   - translate
   - transform
   - top
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board
#about-copy {

    display: block !important;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    margin-top: 6.75rem !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding: 0 !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    contain: none !important;

    overflow: visible !important;
    overflow-anchor: none !important;

    will-change: auto !important;
}


/* ============================================================
   PARAGRAFOS

   O bloco ABOUT-3-FRASES continua definindo fonte,
   line-height e espacamento entre paragrafos.

   Aqui controlamos apenas POSICAO.
   ============================================================ */

html body[data-page="about"]
#page-about
#about-copy > p,

html body[data-page="about"]
#page-about
#about-copy
.about-paragraph {

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    will-change: auto !important;
}


/* ============================================================
   MURAL
   ============================================================ */

html body[data-page="about"]
#page-about
.lusobit-art-wall,

html body[data-page="about"]
#page-about
.art-wall-header,

html body[data-page="about"]
#page-about
.art-wall-grid {

    position: relative !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    overflow-anchor: none !important;

    contain: none !important;

    will-change: auto !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .board-inner {

        padding-top: 2.2rem !important;
        padding-right: 1.8rem !important;
        padding-bottom: 2rem !important;
        padding-left: 1.8rem !important;
    }


    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .page-title,

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .chalk-heading,

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    h1 {

        transform:
            translateY(15%)
            rotate(11deg)
            scale(0.81) !important;
    }


    html body[data-page="about"]
    #page-about
    #about-copy {

        margin-top: 5.8rem !important;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .board-inner {

        padding-top: 1.9rem !important;
        padding-right: 1.45rem !important;
        padding-bottom: 1.8rem !important;
        padding-left: 1.45rem !important;
    }


    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .page-title,

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .chalk-heading,

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    h1 {

        transform:
            translateY(14%)
            rotate(11deg)
            scale(0.81) !important;
    }


    html body[data-page="about"]
    #page-about
    #about-copy {

        margin-top: 4.8rem !important;
    }
}


/* CELULAR PEQUENO */

@media (max-width: 380px) {

    html body[data-page="about"]
    #page-about
    #about-copy {

        margin-top: 4.5rem !important;
    }
}

/* LUSOBIT-ABOUT-LAYOUT-CONSOLIDADO-FIM */

/* LUSOBIT-ABOUT-QUADRO-AMARELO-INICIO */

/* ============================================================
   ABOUT US
   QUADRO AMARELO/LARANJA

   - remove a board-art ondulada
   - remove a borda laranja fina antiga
   - cria quadro proprio
   - titulo reto
   - titulo alinhado ao texto
   - nao interfere no mural
   ============================================================ */


/* ------------------------------------------------------------
   QUADRO PRINCIPAL
   ------------------------------------------------------------ */

html body[data-page="about"]
#page-about
.about-grid > .board {

    position: relative !important;

    isolation: isolate !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    /*
       A borda antiga desaparece completamente.
    */
    border: 0 !important;
    outline: 0 !important;

    /*
       Fundo inspirado nos quadros amarelos/laranja
       usados no restante do site.
    */
    background:
        linear-gradient(
            180deg,
            #ffd36b 0%,
            #ffc85a 48%,
            #f7b744 100%
        ) !important;

    border-radius: 1.35rem !important;

    /*
       Moldura em camadas sem criar uma linha fina
       em volta do quadro.
    */
    box-shadow:
        0 0 0 0.42rem #f47a00,
        0 0 0 0.68rem #a94b19,
        0.42rem 0.52rem 0 #743918,
        0 0.8rem 1.4rem rgba(72, 39, 16, 0.18)
        !important;

    overflow: hidden !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;
}


/* ------------------------------------------------------------
   REMOVE COMPLETAMENTE A ARTE ONDULADA

   Ela estava sendo esticada junto com os milhares de pixels
   de altura criados pelo mural.
   ------------------------------------------------------------ */

html body[data-page="about"]
#page-about
.about-grid > .board
> img.board-art {

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ------------------------------------------------------------
   FAIXA SUPERIOR DO QUADRO

   Criada em CSS.
   Nao depende da altura do mural.
   ------------------------------------------------------------ */

html body[data-page="about"]
#page-about
.about-grid > .board::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    height: 0.72rem !important;

    background:
        linear-gradient(
            90deg,
            #a94b19 0%,
            #e96500 18%,
            #ff8b00 50%,
            #e96500 82%,
            #a94b19 100%
        ) !important;

    z-index: 4 !important;

    pointer-events: none !important;
}


/* ------------------------------------------------------------
   DETALHE INTERNO LARANJA

   Em vez da linha laranja fina antiga, temos uma pequena
   faixa decorativa somente no topo.
   ------------------------------------------------------------ */

html body[data-page="about"]
#page-about
.about-grid > .board::after {

    content: "" !important;

    position: absolute !important;

    top: 0.72rem !important;
    left: 0 !important;
    right: 0 !important;

    height: 0.22rem !important;

    background: #ff9a18 !important;

    opacity: 0.72 !important;

    z-index: 4 !important;

    pointer-events: none !important;
}


/* ------------------------------------------------------------
   CONTEUDO
   ------------------------------------------------------------ */

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner {

    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    /*
       Um unico eixo horizontal para titulo, texto e mural.
    */
    padding:
        3.2rem
        3rem
        3rem
        3rem
        !important;

    background: transparent !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;
}


/* ============================================================
   TITULO
   RETO E ALINHADO AO TEXTO
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board
.chalk-heading,

html body[data-page="about"]
#page-about
.about-grid > .board
.page-title,

html body[data-page="about"]
#page-about
.about-grid > .board
h1 {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    /*
       Sem inclinacao.
       Sem escala.
       Sem deslocamento vertical.
    */
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;

    transform-origin: center !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    /*
       Mesmo inicio horizontal do texto.
    */
    margin:
        0
        0
        2.25rem
        0
        !important;

    padding: 0 !important;

    text-align: left !important;

    animation: none !important;
    transition: none !important;

    z-index: 3 !important;
}


/* ============================================================
   TEXTO
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board
#about-copy {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    /*
       O titulo agora ocupa espaco real no fluxo.
       Portanto nao precisamos mais dos antigos
       104px / 6.75rem de compensacao.
    */
    margin:
        0
        0
        0
        0
        !important;

    padding: 0 !important;

    transform: none !important;
    translate: none !important;

    animation: none !important;
    transition: none !important;

    contain: none !important;

    overflow: visible !important;

    z-index: 2 !important;
}


/* ------------------------------------------------------------
   PARAGRAFOS

   Mantem a separacao existente.
   Corrige tambem o espacamento exagerado entre palavras.
   ------------------------------------------------------------ */

html body[data-page="about"]
#page-about
#about-copy > p,

html body[data-page="about"]
#page-about
#about-copy
.about-paragraph {

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    translate: none !important;

    /*
       Evita aqueles buracos enormes entre palavras.
    */
    text-align: left !important;

    word-spacing: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    hyphens: none !important;

    animation: none !important;
    transition: none !important;
}


/* Primeiro paragrafo nao precisa de margem superior. */

html body[data-page="about"]
#page-about
#about-copy > p:first-child {

    margin-top: 0 !important;
}


/* ============================================================
   MURAL
   ============================================================ */

html body[data-page="about"]
#page-about
.lusobit-art-wall {

    position: relative !important;

    width: 100% !important;

    /*
       Separacao clara entre texto institucional e mural.
    */
    margin-top: 3.2rem !important;

    transform: none !important;
    translate: none !important;

    z-index: 2 !important;
}


/* ------------------------------------------------------------
   Separador discreto antes do mural.
   ------------------------------------------------------------ */

html body[data-page="about"]
#page-about
.lusobit-art-wall::before {

    content: "" !important;

    display: block !important;

    width: 100% !important;
    height: 0.18rem !important;

    margin:
        0
        0
        2.4rem
        0
        !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #e86c00 12%,
            #a94b19 50%,
            #e86c00 88%,
            transparent 100%
        ) !important;

    opacity: 0.68 !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    > .board-inner {

        padding:
            2.8rem
            2rem
            2.4rem
            2rem
            !important;
    }


    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .chalk-heading,

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .page-title,

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    h1 {

        transform: none !important;

        margin-bottom: 2rem !important;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board {

        border-radius: 1rem !important;

        box-shadow:
            0 0 0 0.30rem #f47a00,
            0 0 0 0.48rem #a94b19,
            0.28rem 0.36rem 0 #743918,
            0 0.6rem 1rem rgba(72, 39, 16, 0.16)
            !important;
    }


    html body[data-page="about"]
    #page-about
    .about-grid > .board
    > .board-inner {

        padding:
            2.4rem
            1.35rem
            2rem
            1.35rem
            !important;
    }


    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .chalk-heading,

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    .page-title,

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    h1 {

        transform: none !important;

        margin-bottom: 1.7rem !important;
    }


    html body[data-page="about"]
    #page-about
    .lusobit-art-wall {

        margin-top: 2.5rem !important;
    }
}


/* ============================================================
   CELULAR PEQUENO
   ============================================================ */

@media (max-width: 380px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board
    > .board-inner {

        padding-left: 1.1rem !important;
        padding-right: 1.1rem !important;
    }
}

/* LUSOBIT-ABOUT-QUADRO-AMARELO-FIM */

/* LUSOBIT-ABOUT-CORES-UNIFICADAS-INICIO */

/* ============================================================
   ABOUT
   CORES UNIFICADAS COM OS PAINEIS AMARELOS DO SITE
   ============================================================ */


/*
   Remove totalmente as duas faixas artificiais que foram
   adicionadas no topo do About.
*/

html body[data-page="about"]
#page-about
.about-grid > .board::before,

html body[data-page="about"]
#page-about
.about-grid > .board::after {

    content: none !important;
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/*
   ABOUT

   Mesmo amarelo-base dos paineis do site.
   Sem gradiente que altera o tom entre topo e fundo.
*/

html body[data-page="about"]
#page-about
.about-grid > .board {

    background: #f8ca62 !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 1.35rem !important;

    /*
       Moldura inspirada nos paineis existentes:
       laranja externo + marrom de profundidade.
    */
    box-shadow:
        0 0 0 0.34rem #e86c00,
        0 0 0 0.52rem #a94b19,
        0.34rem 0.42rem 0 #743918
        !important;

    overflow: hidden !important;
}


/*
   Garante que nenhuma camada interna altere o amarelo.
*/

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner {

    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
}


/*
   A board-art antiga continua totalmente desativada.
*/

html body[data-page="about"]
#page-about
.about-grid > .board
> img.board-art {

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    opacity: 0 !important;
}


/*
   Remove qualquer linha criada por pseudo-elementos
   internos da board.
*/

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner::before,

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner::after {

    content: none !important;
    display: none !important;
}


/*
   TITULO
   Continua reto e alinhado ao texto.
*/

html body[data-page="about"]
#page-about
.about-grid > .board
.chalk-heading,

html body[data-page="about"]
#page-about
.about-grid > .board
.page-title,

html body[data-page="about"]
#page-about
.about-grid > .board
h1 {

    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;

    text-align: left !important;
}


/*
   MOBILE
*/

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board {

        border-radius: 1rem !important;

        box-shadow:
            0 0 0 0.26rem #e86c00,
            0 0 0 0.40rem #a94b19,
            0.26rem 0.32rem 0 #743918
            !important;
    }
}

/* LUSOBIT-ABOUT-CORES-UNIFICADAS-FIM */

/* LUSOBIT-ABOUT-CONTACT-UNIFICADOS-INICIO */

/* ============================================================
   ABOUT + CONTACT US

   MESMA COR
   MESMA BORDA
   BORDA MAIS FINA
   ============================================================ */


/* ------------------------------------------------------------
   VARIAVEIS VISUAIS
   ------------------------------------------------------------ */

html body {

    --lusobit-panel-yellow: #f8ca62;
    --lusobit-panel-orange: #d86616;
    --lusobit-panel-shadow: #8f451e;
}


/* ============================================================
   ABOUT
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board {

    background:
        var(--lusobit-panel-yellow)
        !important;

    /*
       Remove qualquer borda antiga.
    */
    border:
        2px solid
        var(--lusobit-panel-orange)
        !important;

    outline: 0 !important;

    border-radius:
        0.9rem
        !important;

    /*
       Profundidade pequena.
       Bem mais fina que a anterior.
    */
    box-shadow:
        3px 3px 0
        var(--lusobit-panel-shadow)
        !important;

    overflow: hidden !important;
}


/* ============================================================
   CONTACT US

   O painel lateral do About recebe exatamente
   o mesmo acabamento.
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .contact-card,

html body[data-page="about"]
#page-about
.about-grid > .contact-panel,

html body[data-page="about"]
#page-about
.contact-card,

html body[data-page="about"]
#page-about
.contact-panel {

    background:
        var(--lusobit-panel-yellow)
        !important;

    border:
        2px solid
        var(--lusobit-panel-orange)
        !important;

    outline: 0 !important;

    border-radius:
        0.9rem
        !important;

    box-shadow:
        3px 3px 0
        var(--lusobit-panel-shadow)
        !important;
}


/* ============================================================
   FALLBACK PARA O PAINEL DE CONTATO

   No caso de ele usar a classe .contact.
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .contact {

    background:
        var(--lusobit-panel-yellow)
        !important;

    border:
        2px solid
        var(--lusobit-panel-orange)
        !important;

    outline: 0 !important;

    border-radius:
        0.9rem
        !important;

    box-shadow:
        3px 3px 0
        var(--lusobit-panel-shadow)
        !important;
}


/* ============================================================
   REMOVE CAMADAS ANTIGAS DO ABOUT
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board::before,

html body[data-page="about"]
#page-about
.about-grid > .board::after {

    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}


/*
   Board-art antiga permanece desligada.
*/

html body[data-page="about"]
#page-about
.about-grid > .board
> img.board-art {

    display: none !important;
}


/* ============================================================
   CAMADAS INTERNAS

   Nenhuma delas cria outra borda.
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner {

    background:
        transparent
        !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   MOBILE

   Mantem a mesma espessura visual.
   ============================================================ */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board,

    html body[data-page="about"]
    #page-about
    .about-grid > .contact-card,

    html body[data-page="about"]
    #page-about
    .about-grid > .contact-panel,

    html body[data-page="about"]
    #page-about
    .about-grid > .contact {

        border-width:
            2px
            !important;

        border-radius:
            0.8rem
            !important;

        box-shadow:
            2px 2px 0
            var(--lusobit-panel-shadow)
            !important;
    }
}

/* LUSOBIT-ABOUT-CONTACT-UNIFICADOS-FIM */

/* LUSOBIT-ABOUT-CONTACT-CORES-REAIS-INICIO */

/* ============================================================
   ABOUT + CONTACT
   USAM A COR REAL DO PAINEL LATERAL
   ============================================================ */

body[data-page="about"] #page-about {
    --lusobit-about-panel-bg:
        var(--lusobit-contact-real-bg, #f8ca62);

    --lusobit-about-panel-border:
        var(--lusobit-contact-real-border, #a65b2c);
}


/* ABOUT */

html body[data-page="about"]
#page-about
.about-grid > .board {

    background:
        var(--lusobit-about-panel-bg)
        !important;

    background-image:
        none
        !important;

    border:
        2px solid
        var(--lusobit-about-panel-border)
        !important;

    outline: none !important;

    /*
       Sombra minima.
       Nao cria outra moldura grossa.
    */
    box-shadow:
        2px 2px 0
        color-mix(
            in srgb,
            var(--lusobit-about-panel-border) 78%,
            #000 22%
        )
        !important;

    border-radius:
        0.9rem
        !important;
}


/* CONTACT US */

html body[data-page="about"]
#page-about
#contact-card,

html body[data-page="about"]
#page-about
.contact-card,

html body[data-page="about"]
#page-about
.contact-panel,

html body[data-page="about"]
#page-about
.about-contact,

html body[data-page="about"]
#page-about
.contact {

    background:
        var(--lusobit-about-panel-bg)
        !important;

    background-image:
        none
        !important;

    border:
        2px solid
        var(--lusobit-about-panel-border)
        !important;

    outline: none !important;

    box-shadow:
        2px 2px 0
        color-mix(
            in srgb,
            var(--lusobit-about-panel-border) 78%,
            #000 22%
        )
        !important;

    border-radius:
        0.9rem
        !important;
}


/* Nenhuma camada interna muda a cor do About. */

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner {

    background:
        transparent
        !important;

    background-image:
        none
        !important;

    border: 0 !important;
    outline: 0 !important;
}


/* Remove definitivamente decoracoes antigas. */

html body[data-page="about"]
#page-about
.about-grid > .board::before,

html body[data-page="about"]
#page-about
.about-grid > .board::after,

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner::before,

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner::after {

    content: none !important;
    display: none !important;
}


/* A antiga onda continua fora. */

html body[data-page="about"]
#page-about
.about-grid > .board
> img.board-art {

    display: none !important;
}


/* Mobile: mesma paleta, moldura ainda mais delicada. */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board,

    html body[data-page="about"]
    #page-about
    #contact-card,

    html body[data-page="about"]
    #page-about
    .contact-card,

    html body[data-page="about"]
    #page-about
    .contact-panel,

    html body[data-page="about"]
    #page-about
    .about-contact,

    html body[data-page="about"]
    #page-about
    .contact {

        border-width:
            1.5px
            !important;

        box-shadow:
            1.5px 1.5px 0
            var(--lusobit-about-panel-border)
            !important;
    }
}

/* LUSOBIT-ABOUT-CONTACT-CORES-REAIS-FIM */

/* LUSOBIT-ABOUT-BORDA-LARANJA-INICIO */

/*
   Apenas o About recebe uma borda um pouco mais laranja.
   Fundo, Contact Us e demais elementos permanecem iguais.
*/

html body[data-page="about"]
#page-about
.about-grid > .board {

    border-color: #e87518 !important;

    box-shadow:
        2px 2px 0 #a94b19
        !important;
}


/* Tema escuro:
   mantem o laranja vivo sem ficar claro demais.
*/

html body.dark[data-page="about"]
#page-about
.about-grid > .board,

html[data-theme="dark"]
body[data-page="about"]
#page-about
.about-grid > .board,

html body[data-theme="dark"][data-page="about"]
#page-about
.about-grid > .board {

    border-color: #e87518 !important;

    box-shadow:
        2px 2px 0 #8f451e
        !important;
}


/* Mobile */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board {

        border-color: #e87518 !important;

        box-shadow:
            1.5px 1.5px 0 #a94b19
            !important;
    }
}

/* LUSOBIT-ABOUT-BORDA-LARANJA-FIM */

/* LUSOBIT-ABOUT-CORES-NAVIGATE-INICIO */

/* ============================================================
   ABOUT + CONTACT US
   EXATAMENTE A PALETA COMPUTADA DO BOTAO NAVIGATE
   ============================================================ */

html body[data-page="about"] #page-about {

    --lusobit-navigate-bg: var(--sand-lite);
    --lusobit-navigate-border: var(--flame);
    --lusobit-navigate-shadow: none;
}


/* ABOUT + CONTACT */

html body[data-page="about"]
#page-about
.about-grid > .board,

html body[data-page="about"]
#page-about
#contact-card,

html body[data-page="about"]
#page-about
.contact-card,

html body[data-page="about"]
#page-about
.contact-panel,

html body[data-page="about"]
#page-about
.about-contact,

html body[data-page="about"]
#page-about
.contact,

html body[data-page="about"]
#page-about
.quick-contact {

    background:
        var(--lusobit-navigate-bg)
        !important;

    background-color:
        var(--lusobit-navigate-bg)
        !important;

    background-image:
        none
        !important;

    border-style:
        solid
        !important;

    border-width:
        2px
        !important;

    border-color:
        var(--lusobit-navigate-border)
        !important;

    outline:
        none
        !important;

    box-shadow:
        var(--lusobit-navigate-shadow)
        !important;
}


/* ============================================================
   ABOUT
   Nenhuma camada interna altera a cor do painel.
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner {

    background:
        transparent
        !important;

    background-image:
        none
        !important;

    border:
        0
        !important;

    box-shadow:
        none
        !important;
}


/* Remove restos da antiga moldura/onda. */

html body[data-page="about"]
#page-about
.about-grid > .board::before,

html body[data-page="about"]
#page-about
.about-grid > .board::after,

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner::before,

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner::after {

    content:
        none
        !important;

    display:
        none
        !important;
}


html body[data-page="about"]
#page-about
.about-grid > .board
> img.board-art {

    display:
        none
        !important;
}


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

   Tudo que anteriormente ficava branco dentro dos dois
   quadros passa a usar exatamente --sand do projeto.
   ============================================================ */

html.tema-escuro body[data-page="about"]
#page-about
.about-grid > .board,

html.tema-escuro body[data-page="about"]
#page-about
.about-grid > .board *,

html.tema-escuro body[data-page="about"]
#page-about
#contact-card,

html.tema-escuro body[data-page="about"]
#page-about
#contact-card *,

html.tema-escuro body[data-page="about"]
#page-about
.contact-card,

html.tema-escuro body[data-page="about"]
#page-about
.contact-card *,

html.tema-escuro body[data-page="about"]
#page-about
.contact-panel,

html.tema-escuro body[data-page="about"]
#page-about
.contact-panel *,

html.tema-escuro body[data-page="about"]
#page-about
.about-contact,

html.tema-escuro body[data-page="about"]
#page-about
.about-contact *,

html.tema-escuro body[data-page="about"]
#page-about
.contact,

html.tema-escuro body[data-page="about"]
#page-about
.contact *,

html.tema-escuro body[data-page="about"]
#page-about
.quick-contact,

html.tema-escuro body[data-page="about"]
#page-about
.quick-contact * {

    color:
        var(--sand, #f5e3b0)
        !important;
}


/*
   Placeholder tambem deixa de ficar branco no escuro.
*/

html.tema-escuro body[data-page="about"]
#page-about
input::placeholder,

html.tema-escuro body[data-page="about"]
#page-about
textarea::placeholder {

    color:
        var(--sand, #f5e3b0)
        !important;

    opacity:
        0.72
        !important;
}


/*
   Inputs continuam legiveis.
   Nao forca fundo sand sobre os campos.
*/

html.tema-escuro body[data-page="about"]
#page-about
input,

html.tema-escuro body[data-page="about"]
#page-about
textarea {

    caret-color:
        var(--sand, #f5e3b0)
        !important;
}


/* Mobile */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board,

    html body[data-page="about"]
    #page-about
    #contact-card,

    html body[data-page="about"]
    #page-about
    .contact-card,

    html body[data-page="about"]
    #page-about
    .contact-panel,

    html body[data-page="about"]
    #page-about
    .about-contact,

    html body[data-page="about"]
    #page-about
    .contact,

    html body[data-page="about"]
    #page-about
    .quick-contact {

        border-width:
            1.5px
            !important;
    }
}

/* LUSOBIT-ABOUT-CORES-NAVIGATE-FIM */

/* LUSOBIT-ABOUT-NAVIGATE-FINAL-INICIO */

/* ============================================================
   ABOUT + CONTACT
   PALETA DO NAVIGATE

   CLARO:
   fundo amarelo do Navigate
   borda laranja/marrom

   ESCURO:
   fundo laranja/ocre do Navigate
   borda marrom escura

   TEXTO ESCURO:
   sempre SAND
   ============================================================ */


/* ============================================================
   MODO CLARO
   ============================================================ */

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.about-grid > .board,

html:not(.tema-escuro)
body[data-page="about"]
#page-about
#contact-card,

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.contact-card,

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.contact-panel,

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.about-contact,

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.contact,

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.quick-contact {

    /*
       Amarelo do conjunto visual do Navigate.
    */
    background:
        #ffca63
        !important;

    background-color:
        #ffca63
        !important;

    background-image:
        none
        !important;

    /*
       Contorno laranja/marrom do Navigate.
    */
    border:
        2px solid #a94b24
        !important;

    outline:
        none
        !important;

    box-shadow:
        3px 3px 0 #74391f
        !important;
}


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

   IMPORTANTE:
   O fundo NAO e sand.
   O fundo passa a ser o laranja/ocre visto no Navigate.
   ============================================================ */

html.tema-escuro
body[data-page="about"]
#page-about
.about-grid > .board,

html.tema-escuro
body[data-page="about"]
#page-about
#contact-card,

html.tema-escuro
body[data-page="about"]
#page-about
.contact-card,

html.tema-escuro
body[data-page="about"]
#page-about
.contact-panel,

html.tema-escuro
body[data-page="about"]
#page-about
.about-contact,

html.tema-escuro
body[data-page="about"]
#page-about
.contact,

html.tema-escuro
body[data-page="about"]
#page-about
.quick-contact {

    /*
       Laranja/ocre do Navigate no tema escuro.
    */
    background:
        #dc8b4c
        !important;

    background-color:
        #dc8b4c
        !important;

    background-image:
        none
        !important;

    border:
        2px solid #8d3f25
        !important;

    outline:
        none
        !important;

    box-shadow:
        3px 3px 0 #572c1e
        !important;
}


/* ============================================================
   CAMADA INTERNA DO ABOUT
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner {

    background:
        transparent
        !important;

    background-color:
        transparent
        !important;

    background-image:
        none
        !important;

    border:
        0
        !important;

    outline:
        0
        !important;

    box-shadow:
        none
        !important;
}


/* ============================================================
   REMOVE DECORACOES ANTIGAS
   ============================================================ */

html body[data-page="about"]
#page-about
.about-grid > .board::before,

html body[data-page="about"]
#page-about
.about-grid > .board::after,

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner::before,

html body[data-page="about"]
#page-about
.about-grid > .board
> .board-inner::after {

    content:
        none
        !important;

    display:
        none
        !important;
}


html body[data-page="about"]
#page-about
.about-grid > .board
> img.board-art {

    display:
        none
        !important;
}


/* ============================================================
   TEXTO NO MODO ESCURO
   TODO TEXTO QUE ESTAVA BRANCO -> SAND
   ============================================================ */

html.tema-escuro
body[data-page="about"]
#page-about
.about-grid > .board,

html.tema-escuro
body[data-page="about"]
#page-about
.about-grid > .board h1,

html.tema-escuro
body[data-page="about"]
#page-about
.about-grid > .board h2,

html.tema-escuro
body[data-page="about"]
#page-about
.about-grid > .board h3,

html.tema-escuro
body[data-page="about"]
#page-about
.about-grid > .board p,

html.tema-escuro
body[data-page="about"]
#page-about
.about-grid > .board span,

html.tema-escuro
body[data-page="about"]
#page-about
.about-grid > .board a,

html.tema-escuro
body[data-page="about"]
#page-about
.chalk-heading,

html.tema-escuro
body[data-page="about"]
#page-about
.chalk-heading span,

html.tema-escuro
body[data-page="about"]
#page-about
.chalk-body,

html.tema-escuro
body[data-page="about"]
#page-about
.chalk-body p,

html.tema-escuro
body[data-page="about"]
#page-about
#contact-card,

html.tema-escuro
body[data-page="about"]
#page-about
#contact-card *,

html.tema-escuro
body[data-page="about"]
#page-about
.contact-card,

html.tema-escuro
body[data-page="about"]
#page-about
.contact-card *,

html.tema-escuro
body[data-page="about"]
#page-about
.contact-panel,

html.tema-escuro
body[data-page="about"]
#page-about
.contact-panel *,

html.tema-escuro
body[data-page="about"]
#page-about
.quick-contact,

html.tema-escuro
body[data-page="about"]
#page-about
.quick-contact * {

    color:
        var(--sand, #f5e3b0)
        !important;
}


/* ============================================================
   CAMPOS DO FORMULARIO NO ESCURO

   Fundo permanece laranja claro.
   Texto digitado e placeholder ficam sand.
   ============================================================ */

html.tema-escuro
body[data-page="about"]
#page-about
input,

html.tema-escuro
body[data-page="about"]
#page-about
textarea {

    color:
        var(--sand, #f5e3b0)
        !important;

    caret-color:
        var(--sand, #f5e3b0)
        !important;
}


html.tema-escuro
body[data-page="about"]
#page-about
input::placeholder,

html.tema-escuro
body[data-page="about"]
#page-about
textarea::placeholder {

    color:
        var(--sand, #f5e3b0)
        !important;

    opacity:
        0.85
        !important;
}


/* ============================================================
   GARANTE QUE O CLARO CONTINUE COM TEXTO ESCURO
   ============================================================ */

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.about-grid > .board,

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.about-grid > .board p,

html:not(.tema-escuro)
body[data-page="about"]
#page-about
.about-grid > .board .chalk-heading {

    color:
        var(--ink-azul, #050c21)
        !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-grid > .board,

    html body[data-page="about"]
    #page-about
    #contact-card,

    html body[data-page="about"]
    #page-about
    .contact-card,

    html body[data-page="about"]
    #page-about
    .contact-panel,

    html body[data-page="about"]
    #page-about
    .about-contact,

    html body[data-page="about"]
    #page-about
    .contact,

    html body[data-page="about"]
    #page-about
    .quick-contact {

        border-width:
            1.5px
            !important;

        box-shadow:
            2px 2px 0 #74391f
            !important;
    }


    html.tema-escuro
    body[data-page="about"]
    #page-about
    .about-grid > .board,

    html.tema-escuro
    body[data-page="about"]
    #page-about
    #contact-card,

    html.tema-escuro
    body[data-page="about"]
    #page-about
    .contact-card,

    html.tema-escuro
    body[data-page="about"]
    #page-about
    .contact-panel,

    html.tema-escuro
    body[data-page="about"]
    #page-about
    .quick-contact {

        box-shadow:
            2px 2px 0 #572c1e
            !important;
    }
}

/* LUSOBIT-ABOUT-NAVIGATE-FINAL-FIM */

/* LUSOBIT-PALETA-PAGINAS-ABOUT-INICIO */

/* ============================================================
   PALETA COMPARTILHADA

   CLARO
   fundo: amarelo
   borda: laranja/marrom
   texto: escuro

   ESCURO
   fundo: laranja/ocre
   borda: marrom
   texto: sand
   ============================================================ */

:root {
    --lusobit-painel-claro: #ffca63;
    --lusobit-borda-clara: #a94b24;
    --lusobit-sombra-clara: #74391f;

    --lusobit-painel-escuro: #dc8b4c;
    --lusobit-borda-escura: #8d3f25;
    --lusobit-sombra-escura: #572c1e;
}


/* ============================================================
   NOSSOS PARCEIROS
   ============================================================ */

/*
   Abrange os containers normalmente usados pela pagina,
   sem alterar o layout ou tamanho dos cards.
*/

html:not(.tema-escuro)
body[data-page="partners"]
#page-partners .board,

html:not(.tema-escuro)
body[data-page="partners"]
#page-partners .card,

html:not(.tema-escuro)
body[data-page="partners"]
#page-partners .partner-card,

html:not(.tema-escuro)
body[data-page="parceiros"]
#page-partners .board,

html:not(.tema-escuro)
body[data-page="parceiros"]
#page-partners .card,

html:not(.tema-escuro)
body[data-page="parceiros"]
#page-partners .partner-card {

    background:
        var(--lusobit-painel-claro)
        !important;

    background-image:
        none
        !important;

    border:
        2px solid
        var(--lusobit-borda-clara)
        !important;

    outline:
        none
        !important;

    box-shadow:
        3px 3px 0
        var(--lusobit-sombra-clara)
        !important;
}


/* PARCEIROS - ESCURO */

html.tema-escuro
#page-partners .board,

html.tema-escuro
#page-partners .card,

html.tema-escuro
#page-partners .partner-card {

    background:
        var(--lusobit-painel-escuro)
        !important;

    background-image:
        none
        !important;

    border:
        2px solid
        var(--lusobit-borda-escura)
        !important;

    outline:
        none
        !important;

    box-shadow:
        3px 3px 0
        var(--lusobit-sombra-escura)
        !important;
}


/* Texto da pagina Parceiros no escuro */

html.tema-escuro
#page-partners,

html.tema-escuro
#page-partners h1,

html.tema-escuro
#page-partners h2,

html.tema-escuro
#page-partners h3,

html.tema-escuro
#page-partners h4,

html.tema-escuro
#page-partners p,

html.tema-escuro
#page-partners span,

html.tema-escuro
#page-partners li,

html.tema-escuro
#page-partners a,

html.tema-escuro
#page-partners .page-title,

html.tema-escuro
#page-partners .chalk-heading {

    color:
        var(--sand, #f5e3b0)
        !important;
}


/* ============================================================
   FALE CONOSCO
   FORMULARIO + PAINEL DE REDES
   ============================================================ */

html:not(.tema-escuro)
#page-contact
#contact-form.form-card,

html:not(.tema-escuro)
#page-contact
.contact-social-panel {

    background:
        var(--lusobit-painel-claro)
        !important;

    background-image:
        none
        !important;

    border:
        2px solid
        var(--lusobit-borda-clara)
        !important;

    outline:
        none
        !important;

    box-shadow:
        3px 3px 0
        var(--lusobit-sombra-clara)
        !important;

    border-radius:
        0.9rem
        !important;
}


/* CONTATO - ESCURO */

html.tema-escuro
#page-contact
#contact-form.form-card,

html.tema-escuro
#page-contact
.contact-social-panel {

    background:
        var(--lusobit-painel-escuro)
        !important;

    background-image:
        none
        !important;

    border:
        2px solid
        var(--lusobit-borda-escura)
        !important;

    outline:
        none
        !important;

    box-shadow:
        3px 3px 0
        var(--lusobit-sombra-escura)
        !important;

    border-radius:
        0.9rem
        !important;
}


/* ============================================================
   FALE CONOSCO
   TEXTO SAND NO ESCURO
   ============================================================ */

html.tema-escuro
#page-contact
#contact-form.form-card,

html.tema-escuro
#page-contact
#contact-form.form-card h1,

html.tema-escuro
#page-contact
#contact-form.form-card h2,

html.tema-escuro
#page-contact
#contact-form.form-card h3,

html.tema-escuro
#page-contact
#contact-form.form-card p,

html.tema-escuro
#page-contact
#contact-form.form-card label,

html.tema-escuro
#page-contact
.contact-social-panel,

html.tema-escuro
#page-contact
.contact-social-panel h1,

html.tema-escuro
#page-contact
.contact-social-panel h2,

html.tema-escuro
#page-contact
.contact-social-panel h3,

html.tema-escuro
#page-contact
.contact-social-panel p,

html.tema-escuro
#page-contact
.contact-social-panel a,

html.tema-escuro
#page-contact
.contact-social-panel span,

html.tema-escuro
#page-contact
.contact-social-heading h2 {

    color:
        var(--sand, #f5e3b0)
        !important;
}


/* ============================================================
   CAMPOS DO FORMULARIO
   ============================================================ */

html.tema-escuro
#page-contact input,

html.tema-escuro
#page-contact textarea {

    color:
        var(--sand, #f5e3b0)
        !important;

    caret-color:
        var(--sand, #f5e3b0)
        !important;
}


html.tema-escuro
#page-contact input::placeholder,

html.tema-escuro
#page-contact textarea::placeholder {

    color:
        var(--sand, #f5e3b0)
        !important;

    opacity:
        0.82
        !important;
}


/* ============================================================
   KO-FI

   EXCECAO:
   no modo escuro o texto do BOTAO nao fica sand.
   Fica laranja escuro.
   ============================================================ */

html.tema-escuro
#page-contact
.kofi-link,

html.tema-escuro
#page-contact
.kofi-link:link,

html.tema-escuro
#page-contact
.kofi-link:visited,

html.tema-escuro
#page-contact
.kofi-link:hover,

html.tema-escuro
#page-contact
.kofi-link:active,

html.tema-escuro
.quick-contact
.kofi-link,

html.tema-escuro
.quick-contact
.kofi-link:link,

html.tema-escuro
.quick-contact
.kofi-link:visited,

html.tema-escuro
.quick-contact
.kofi-link:hover,

html.tema-escuro
.quick-contact
.kofi-link:active {

    color:
        #8d3f25
        !important;
}


/*
   Texto interno do botao tambem recebe a excecao.
*/

html.tema-escuro
#page-contact
.kofi-link span:not(.kofi-heart),

html.tema-escuro
.quick-contact
.kofi-link span:not(.kofi-heart) {

    color:
        #8d3f25
        !important;
}


/*
   Coracao continua vermelho/laranja proprio.
*/

html.tema-escuro
#page-contact
.kofi-link .kofi-heart,

html.tema-escuro
.quick-contact
.kofi-link .kofi-heart {

    color:
        #ac4129
        !important;
}


/* ============================================================
   DIVISORES DA PAGINA DE CONTATO
   ============================================================ */

html:not(.tema-escuro)
#page-contact
.contact-social-panel {

    border-left-color:
        var(--lusobit-borda-clara)
        !important;
}


html.tema-escuro
#page-contact
.contact-social-panel {

    border-left-color:
        var(--lusobit-borda-escura)
        !important;
}


html.tema-escuro
#page-contact
.contact-social-panel
.support-block-contact {

    border-top-color:
        var(--lusobit-borda-escura)
        !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 860px) {

    html:not(.tema-escuro)
    #page-contact
    .contact-social-panel {

        border-top-color:
            var(--lusobit-borda-clara)
            !important;
    }


    html.tema-escuro
    #page-contact
    .contact-social-panel {

        border-top-color:
            var(--lusobit-borda-escura)
            !important;
    }
}


@media (max-width: 600px) {

    html body
    #page-contact
    #contact-form.form-card,

    html body
    #page-contact
    .contact-social-panel,

    html body
    #page-partners
    .board,

    html body
    #page-partners
    .card,

    html body
    #page-partners
    .partner-card {

        border-width:
            1.5px
            !important;
    }
}

/* LUSOBIT-PALETA-PAGINAS-ABOUT-FIM */

/* LUSOBIT-CONTACT-SEM-BORDA-KOFI-DARK-INICIO */

/* ============================================================
   FALE CONOSCO
   Remove SOMENTE a borda externa dos dois blocos.
   Mantem fundo, espacamento e campos internos.
   ============================================================ */

html body #page-contact #contact-form.form-card,
html body #page-contact .contact-social-panel {

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;
}


/*
   Remove tambem qualquer borda lateral/superior antiga
   do painel de redes.
*/

html body #page-contact .contact-social-panel {

    border-left:
        0 !important;

    border-right:
        0 !important;

    border-top:
        0 !important;

    border-bottom:
        0 !important;
}


/* ============================================================
   KO-FI - MODO ESCURO
   Texto laranja escuro em QUALQUER botao Ko-fi do site,
   inclusive o existente na barra lateral do About.
   ============================================================ */

html.tema-escuro .kofi-link,
html.tema-escuro .kofi-link:link,
html.tema-escuro .kofi-link:visited,
html.tema-escuro .kofi-link:hover,
html.tema-escuro .kofi-link:focus,
html.tema-escuro .kofi-link:active {

    color:
        #8d3f25 !important;
}


/*
   Garante a mesma cor caso o texto esteja dentro de span.
   O coracao fica fora desta regra.
*/

html.tema-escuro .kofi-link span:not(.kofi-heart),
html.tema-escuro .kofi-link strong,
html.tema-escuro .kofi-link b {

    color:
        #8d3f25 !important;
}


/*
   Mantem o coracao com sua cor propria.
*/

html.tema-escuro .kofi-link .kofi-heart {

    color:
        #ac4129 !important;
}


/* Mobile: continua sem moldura externa. */

@media (max-width: 860px) {

    html body #page-contact #contact-form.form-card,
    html body #page-contact .contact-social-panel {

        border:
            0 !important;

        outline:
            0 !important;

        box-shadow:
            none !important;
    }
}

/* LUSOBIT-CONTACT-SEM-BORDA-KOFI-DARK-FIM */

/* LUSOBIT-CONTACT-REMOVE-MOLDURAS-INICIO */

/* ============================================================
   FALE CONOSCO

   Remove SOMENTE a moldura externa retangular:
   - formulario
   - Our Social Media

   NAO remove:
   - bordas dos inputs
   - borda do textarea
   - divisores internos
   - fundo dos paineis
   ============================================================ */


/* FORMULARIO */

html body #page-contact #contact-form,
html body #page-contact #contact-form.form-card,
html body #page-contact .form-card {

    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    outline: none !important;

    box-shadow: none !important;
}


/* OUR SOCIAL MEDIA */

html body #page-contact .contact-social-panel {

    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;

    outline: none !important;

    box-shadow: none !important;
}


/* ============================================================
   REMOVE PSEUDO-ELEMENTOS QUE POSSAM DESENHAR A MOLDURA
   ============================================================ */

html body #page-contact #contact-form::before,
html body #page-contact #contact-form::after,
html body #page-contact .form-card::before,
html body #page-contact .form-card::after,
html body #page-contact .contact-social-panel::before,
html body #page-contact .contact-social-panel::after {

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================
   IMPORTANTE:
   CAMPOS INTERNOS CONTINUAM COM SUAS BORDAS.
   ============================================================ */

html body #page-contact input,
html body #page-contact textarea {

    /*
       Nao sobrescrevemos border aqui.
       As regras originais dos campos continuam valendo.
    */

    outline-offset: 0;
}


/* ============================================================
   MOBILE
   Impede regras responsivas antigas de recriarem a moldura.
   ============================================================ */

@media (max-width: 860px) {

    html body #page-contact #contact-form,
    html body #page-contact #contact-form.form-card,
    html body #page-contact .form-card,
    html body #page-contact .contact-social-panel {

        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;

        outline: none !important;

        box-shadow: none !important;
    }
}

/* LUSOBIT-CONTACT-REMOVE-MOLDURAS-FIM */

/* LUSOBIT-CONTACT-ZERAR-MOLDURA-EXTERNA-INICIO */

/* ============================================================
   FALE CONOSCO
   ZERA SOMENTE AS MOLDURAS EXTERNAS DAS DUAS COLUNAS
   ============================================================ */


/* FORMULARIO - elemento e wrappers diretos */

html body #page-contact #contact-form,
html body #page-contact #contact-form.form-card,
html body #page-contact .desk > #contact-form,
html body #page-contact .desk > .form-card {

    border: 0 none transparent !important;

    border-top: 0 none transparent !important;
    border-right: 0 none transparent !important;
    border-bottom: 0 none transparent !important;
    border-left: 0 none transparent !important;

    outline: 0 !important;

    box-shadow: none !important;
}


/* PAINEL OUR SOCIAL MEDIA */

html body #page-contact .contact-social-panel,
html body #page-contact .desk > .contact-social-panel {

    border: 0 none transparent !important;

    border-top: 0 none transparent !important;
    border-right: 0 none transparent !important;
    border-bottom: 0 none transparent !important;
    border-left: 0 none transparent !important;

    outline: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   PSEUDO-ELEMENTOS

   Caso alguma moldura esteja sendo desenhada por ::before
   ou ::after, elimina somente a parte visual da moldura.
   ============================================================ */

html body #page-contact #contact-form::before,
html body #page-contact #contact-form::after,
html body #page-contact .form-card::before,
html body #page-contact .form-card::after,
html body #page-contact .contact-social-panel::before,
html body #page-contact .contact-social-panel::after {

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background-image: none !important;
}


/* ============================================================
   IMPORTANTE
   PRESERVA OS CAMPOS DO FORMULARIO
   ============================================================ */

html body #page-contact #contact-form input,
html body #page-contact #contact-form textarea,
html body #page-contact .form-card input,
html body #page-contact .form-card textarea {

    /*
       Deliberadamente vazio.
       As bordas originais dos campos continuam valendo.
    */
}


/* ============================================================
   PRESERVA O DIVISOR INTERNO DO KO-FI

   Esta linha NAO e a moldura externa.
   ============================================================ */

html body #page-contact
.contact-social-panel
.support-block-contact {

    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;

    border-top:
        2px dashed rgba(135, 55, 31, 0.55)
        !important;

    box-shadow:
        none
        !important;
}


/* Escuro: divisor interno acompanha a paleta */

html.tema-escuro body #page-contact
.contact-social-panel
.support-block-contact {

    border-top-color:
        rgba(125, 47, 29, 0.65)
        !important;
}


/* ============================================================
   TABLET / MOBILE

   O style.css possui regra que recria border-top no painel
   social abaixo de 860px. Aqui ela fica definitivamente zerada.
   ============================================================ */

@media (max-width: 860px) {

    html body #page-contact #contact-form,
    html body #page-contact #contact-form.form-card,
    html body #page-contact .desk > .form-card,
    html body #page-contact .contact-social-panel,
    html body #page-contact .desk > .contact-social-panel {

        border: 0 none transparent !important;

        border-top: 0 none transparent !important;
        border-right: 0 none transparent !important;
        border-bottom: 0 none transparent !important;
        border-left: 0 none transparent !important;

        outline: 0 !important;

        box-shadow: none !important;
    }
}

/* LUSOBIT-CONTACT-ZERAR-MOLDURA-EXTERNA-FIM */

/* LUSOBIT-CONTACT-FORM-MOLDURA-FINAL-INICIO */

/* ============================================================
   REMOVE A MOLDURA EXTERNA VISIVEL DO FORMULARIO
   ============================================================ */

html body[data-page="contact"] #page-contact form#contact-form,
html body[data-page="contact"] #page-contact #contact-form.form-card,
html body[data-page="contact"] #page-contact form.form-card,
html body #page-contact form#contact-form,
html body #page-contact #contact-form.form-card {

    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    outline: none !important;

    box-shadow: none !important;

    /*
       Mantem exatamente o fundo atual.
       Nao altera a paleta.
    */
}


/* Mata qualquer segunda linha criada pelo proprio card */

html body[data-page="contact"] #page-contact form#contact-form::before,
html body[data-page="contact"] #page-contact form#contact-form::after,
html body[data-page="contact"] #page-contact #contact-form.form-card::before,
html body[data-page="contact"] #page-contact #contact-form.form-card::after {

    content: none !important;
    display: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================
   REMOVE A MESMA MOLDURA DO PAINEL SOCIAL
   ============================================================ */

html body[data-page="contact"] #page-contact .contact-social-panel,
html body #page-contact .contact-social-panel {

    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    outline: none !important;
    box-shadow: none !important;
}


html body[data-page="contact"] #page-contact .contact-social-panel::before,
html body[data-page="contact"] #page-contact .contact-social-panel::after {

    content: none !important;
    display: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================
   CAMPOS INTERNOS
   NAO SAO ALTERADOS
   ============================================================ */

/*
   input e textarea ficam fora das regras acima.
   Portanto suas bordas continuam exatamente como estao.
*/


/* ============================================================
   KO-FI
   Mantem o divisor interno, que NAO e a moldura externa.
   ============================================================ */

html body[data-page="contact"]
#page-contact
.contact-social-panel
.support-block-contact {

    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;

    border-top:
        2px dashed rgba(135, 55, 31, 0.55)
        !important;

    box-shadow: none !important;
}


html.tema-escuro body[data-page="contact"]
#page-contact
.contact-social-panel
.support-block-contact {

    border-top-color:
        rgba(125, 47, 29, 0.65)
        !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 860px) {

    html body[data-page="contact"] #page-contact form#contact-form,
    html body[data-page="contact"] #page-contact #contact-form.form-card,
    html body[data-page="contact"] #page-contact .contact-social-panel {

        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
}

/* LUSOBIT-CONTACT-FORM-MOLDURA-FINAL-FIM */

/* LUSOBIT-KOFI-LATERAL-MARROM-INICIO */

/*
   Botao Ko-fi da barra lateral.
   Fundo e borda permanecem como estao.
   Apenas o conteudo fica marrom.
*/

html.tema-escuro .quick-contact .kofi-link,
html.tema-escuro .quick-contact .kofi-link:link,
html.tema-escuro .quick-contact .kofi-link:visited,
html.tema-escuro .quick-contact .kofi-link:hover,
html.tema-escuro .quick-contact .kofi-link:focus,
html.tema-escuro .quick-contact .kofi-link:active,

html.tema-escuro .quick-contact .kofi-link span,
html.tema-escuro .quick-contact .kofi-link strong,
html.tema-escuro .quick-contact .kofi-link b,
html.tema-escuro .quick-contact .kofi-link i,
html.tema-escuro .quick-contact .kofi-link .kofi-heart {

    color: #74391f !important;
}


/* Caso o botao esteja dentro do bloco de suporte sem quick-contact */

html.tema-escuro .support-block .kofi-link,
html.tema-escuro .support-block .kofi-link:link,
html.tema-escuro .support-block .kofi-link:visited,
html.tema-escuro .support-block .kofi-link:hover,
html.tema-escuro .support-block .kofi-link:focus,
html.tema-escuro .support-block .kofi-link:active,

html.tema-escuro .support-block .kofi-link span,
html.tema-escuro .support-block .kofi-link i,
html.tema-escuro .support-block .kofi-link .kofi-heart {

    color: #74391f !important;
}

/* LUSOBIT-KOFI-LATERAL-MARROM-FIM */

/* LUSOBIT-ABOUT-DESTAQUES-CSS-INICIO */

/*
 * Destaques exclusivos do texto do About.
 */

body[data-page="about"]
#page-about
#about-copy
.about-highlight {

    font-weight: 800 !important;

    color:
        var(--rust, #8f2f12) !important;

    background:
        rgba(255, 255, 255, 0.24) !important;

    padding:
        0.01em 0.12em !important;

    border-radius:
        0.16em !important;

    box-decoration-break:
        clone;

    -webkit-box-decoration-break:
        clone;
}

/*
 * MODO ESCURO
 */

html.tema-escuro
body[data-page="about"]
#page-about
#about-copy
.about-highlight {

    color:
        var(--gold, #ffca63) !important;

    background:
        rgba(255, 202, 99, 0.10) !important;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(255, 202, 99, 0.55);

    text-decoration-thickness:
        0.08em;

    text-underline-offset:
        0.12em;
}

/* LUSOBIT-ABOUT-DESTAQUES-CSS-FIM */

/* LUSOBIT-ABOUT-VISUAL-SUAVE-INICIO */

/*
 * ABOUT US
 * Retorna ao tamanho normal do texto do site.
 * Mantem os destaques discretos e sem bold.
 */

/* DESKTOP */

body[data-page="about"]
#page-about
#about-copy
.about-paragraph {
    font-size:
        clamp(0.91rem, 0.32vw + 0.82rem, 1.02rem) !important;

    line-height: 1.32 !important;

    font-weight: 400 !important;
}

/* NOTEBOOK */

@media (max-width: 1366px) {

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size: 0.94rem !important;
        line-height: 1.29 !important;
    }
}

/* TABLET */

@media (max-width: 900px) {

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size:
            clamp(0.93rem, 2.25vw, 1rem) !important;

        line-height: 1.34 !important;
    }
}

/* CELULAR */

@media (max-width: 600px) {

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size:
            clamp(0.91rem, 3.8vw, 0.98rem) !important;

        line-height: 1.33 !important;
    }
}

/*
 * DESTAQUES
 * Sem negrito.
 * Sem fundo.
 * Sem sublinhado.
 * Apenas mudanca sutil de cor.
 */

body[data-page="about"]
#page-about
#about-copy
.about-highlight {
    font-weight: inherit !important;

    background: none !important;

    padding: 0 !important;

    border-radius: 0 !important;

    text-decoration: none !important;

    color:
        var(--rust, #8f4b32) !important;
}

/*
 * MODO ESCURO
 * Marrom quente e suave.
 */




/* LUSOBIT-ABOUT-DARK-INVERTIDO-INICIO */

/*
 * MODO ESCURO DO ABOUT
 *
 * Texto normal = marrom usado como referencia no modo claro.
 * Highlights   = sand.
 */

/* TEXTO NORMAL */

html.tema-escuro
body[data-page="about"]
#page-about
#about-copy
.about-paragraph {
    color:
        var(--ink-azul, #050c21)
        !important;
}


/* HIGHLIGHTS */

html.tema-escuro
body[data-page="about"]
#page-about
#about-copy
.about-paragraph
.about-highlight {

    color:
        var(--sand, #f5e3b0)
        !important;

    font-weight:
        inherit !important;

    background:
        none !important;

    text-decoration:
        none !important;
}

/* LUSOBIT-ABOUT-DARK-INVERTIDO-FIM */
/* LUSOBIT-ABOUT-VISUAL-SUAVE-FIM */



/* LUSOBIT-PORTFOLIO-REVIEW-LATERAL-INICIO */

/*
 * ============================================================
 * PORTFOLIO - REVIEW LATERAL
 *
 * Desktop:
 *
 *   [ QUADROS + BAU ]   [ REVIEW ]
 *
 * A altura minima da review acompanha visualmente
 * a altura do quadro principal.
 *
 * Review curta:
 * permanece na altura dos quadros.
 *
 * Review longa:
 * cresce naturalmente SOMENTE para baixo.
 * ============================================================
 */

@media (min-width: 1180px) {

    html body[data-page="portfolio"]
    #page-portfolio
    .portfolio-stage {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            clamp(20rem, 27vw, 27rem)
            !important;

        grid-template-rows:
            auto !important;

        align-items:
            start !important;

        justify-content:
            center !important;

        column-gap:
            clamp(1.25rem, 2.2vw, 2.75rem) !important;

        row-gap:
            0 !important;

        width:
            min(100%, 96rem) !important;

        max-width:
            96rem !important;

        min-width:
            0 !important;

        margin:
            0 auto !important;

        padding:
            0 !important;
    }


    /*
     * ========================================================
     * LADO ESQUERDO
     * Mantem quadros, setas e bau juntos.
     * ========================================================
     */

    html body[data-page="portfolio"]
    #page-portfolio
    .portfolio-stage
    > .shelf {

        grid-column:
            1 !important;

        grid-row:
            1 !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        justify-self:
            stretch !important;

        align-self:
            start !important;
    }


    /*
     * ========================================================
     * REVIEW
     *
     * Quadro principal:
     * cover = clamp(13rem, 30vh, 18rem)
     *
     * Somamos o espaco do titulo e acabamento do deck.
     *
     * IMPORTANTE:
     * usamos MIN-HEIGHT e nao HEIGHT.
     *
     * Assim ela possui uma altura inicial bonita,
     * mas continua podendo crescer para baixo.
     * ========================================================
     */

    html body[data-page="portfolio"]
    #page-portfolio
    .portfolio-stage
    > #dev-note.dev-note {

        grid-column:
            2 !important;

        grid-row:
            1 !important;

        width:
            100% !important;

        max-width:
            27rem !important;

        min-width:
            0 !important;


        /*
         * Altura inicial equivalente ao quadro principal.
         */

        min-height:
            calc(
                clamp(13rem, 30vh, 18rem)
                + 3.1rem
            ) !important;


        /*
         * Nunca trava a altura.
         * Texto maior aumenta o painel naturalmente.
         */

        height:
            auto !important;

        max-height:
            none !important;

        overflow:
            visible !important;


        /*
         * O shelf possui 1rem de padding superior.
         * Isso alinha o topo da review com os quadros.
         */

        margin-top:
            1rem !important;

        margin-right:
            0 !important;

        margin-bottom:
            0 !important;

        margin-left:
            0 !important;


        justify-self:
            end !important;

        align-self:
            start !important;

        box-sizing:
            border-box !important;
    }
}


/*
 * ============================================================
 * TELAS MENORES
 *
 * Volta para o layout vertical.
 * Aqui nao forcamos altura minima.
 * ============================================================
 */

@media (max-width: 1179px) {

    html body[data-page="portfolio"]
    #page-portfolio
    .portfolio-stage {

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }


    html body[data-page="portfolio"]
    #page-portfolio
    .portfolio-stage
    > #dev-note.dev-note {

        width:
            min(
                46rem,
                calc(100vw - 2 * var(--lb-gutter))
            ) !important;

        max-width:
            calc(
                100vw - 2 * var(--lb-gutter)
            ) !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        height:
            auto !important;

        max-height:
            none !important;

        overflow:
            visible !important;

        margin-top:
            0.65rem !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }
}

/* LUSOBIT-PORTFOLIO-REVIEW-LATERAL-FIM */


/* LUSOBIT-PORTFOLIO-REVIEW-ALTURA-FIXA-INICIO */

/*
 * REVIEW DO PORTFOLIO
 *
 * Desktop:
 * altura sempre fixa em 25.2rem.
 *
 * Review longa:
 * scroll somente dentro do painel.
 *
 * Tablet/celular:
 * altura volta a ser automatica.
 */

@media (min-width: 1180px) {

    html body[data-page="portfolio"]
    #page-portfolio
    .portfolio-stage
    > #dev-note.dev-note {

        height: 25.2rem !important;
        min-height: 25.2rem !important;
        max-height: 25.2rem !important;
        box-sizing: border-box !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        align-self: start !important;

        /*
         * Mantem o topo alinhado com os quadros.
         */
        margin-top: 1rem !important;
        margin-bottom: 0 !important;
    }
}


/*
 * Em telas menores nao usamos altura fixa.
 */

@media (max-width: 1179px) {

    html body[data-page="portfolio"]
    #page-portfolio
    .portfolio-stage
    > #dev-note.dev-note {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }
}

/* LUSOBIT-PORTFOLIO-REVIEW-ALTURA-FIXA-FIM */

/* LUSOBIT-HEADER-MOBILE-GLOBAL-INICIO */

/*
   Cabecalho mobile global.
   Vale para TODAS as paginas do site.

   Linha 1 = logo + LusoBit Studio
   Linha 2 = botoes de navegacao
*/

@media (max-width: 700px) {

    /* ========================================================
       CABECALHO
       ======================================================== */

    html body .topbar,
    html body[data-page] .topbar {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;

        grid-template-areas:
            "brand"
            "hud" !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        align-items: start !important;
        justify-items: center !important;

        margin: 0 auto !important;

        padding-top: max(1rem, env(safe-area-inset-top)) !important;
        padding-right: max(0.65rem, env(safe-area-inset-right)) !important;
        padding-bottom: 1.25rem !important;
        padding-left: max(0.65rem, env(safe-area-inset-left)) !important;

        /*
           Espaco entre LusoBit Studio e os botoes.
        */
        column-gap: 0 !important;
        row-gap: 1.15rem !important;
    }


    /* ========================================================
       LOGO + LUSOBIT STUDIO
       ======================================================== */

    html body .topbar > .brand,
    html body[data-page] .topbar > .brand {
        grid-area: brand !important;

        position: relative !important;
        inset: auto !important;

        display: flex !important;
        flex-wrap: nowrap !important;

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

        width: auto !important;
        max-width: calc(100vw - 1.3rem) !important;

        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        gap: clamp(0.42rem, 2vw, 0.58rem) !important;

        transform: none !important;
        z-index: 1 !important;
    }


    html body .topbar .brand-mark,
    html body[data-page] .topbar .brand-mark {
        width: clamp(2.75rem, 12vw, 3.15rem) !important;
        min-width: clamp(2.75rem, 12vw, 3.15rem) !important;

        height: auto !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        transform: none !important;
    }


    html body .topbar .brand-name,
    html body[data-page] .topbar .brand-name {
        display: flex !important;
        flex-wrap: nowrap !important;

        align-items: baseline !important;
        justify-content: center !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        column-gap: 0.4rem !important;
        row-gap: 0 !important;

        margin: 0 !important;

        white-space: nowrap !important;
    }


    html body .topbar .brand-name b,
    html body .topbar .brand-name span,
    html body .topbar .brand-name > span,
    html body .topbar .brand-name > span > span,
    html body .topbar .brand-name > b + span {
        font-size: clamp(1.8rem, 8.7vw, 2.25rem) !important;
        line-height: 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    /* ========================================================
       LINHA DOS BOTOES
       ======================================================== */

    html body .topbar > .hud,
    html body[data-page] .topbar > .hud {
        grid-area: hud !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        inset: auto !important;

        display: flex !important;
        flex-wrap: nowrap !important;

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

        width: 100% !important;
        max-width: 22rem !important;

        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        gap: clamp(0.18rem, 1vw, 0.32rem) !important;

        transform: none !important;
    }


    /* Botao Navegar */

    html body .topbar .hud > .btn-options {
        width: clamp(7rem, 33vw, 8.4rem) !important;
        height: clamp(2.8rem, 13vw, 3.15rem) !important;

        min-height: 44px !important;

        flex: 0 1 auto !important;
    }


    /* Idioma, som e tema */

    html body .topbar .hud > .hud-btn:not(.btn-options) {
        width: clamp(3.5rem, 15.5vw, 4.15rem) !important;
        height: clamp(2.8rem, 13vw, 3.15rem) !important;

        min-width: 0 !important;
        min-height: 44px !important;

        flex: 0 1 auto !important;
    }


    /* ========================================================
       ESPACO ENTRE CABECALHO E CONTEUDO DA PAGINA
       ======================================================== */

    html body .pages {
        padding-top: 0.35rem !important;
    }


    /* ========================================================
       ABOUT
       Mantem apenas as proporcoes boas do quadro que ajustamos.
       ======================================================== */

    html body[data-page="about"] .about-grid {
        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns: minmax(0, 1fr) !important;

        margin: 0 auto !important;
    }


    html body[data-page="about"] .board {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
    }


    html body[data-page="about"] .board-inner {
        padding-top: 1.2rem !important;
        padding-right: clamp(1.05rem, 5vw, 1.35rem) !important;
        padding-bottom: 1.4rem !important;
        padding-left: clamp(1.05rem, 5vw, 1.35rem) !important;
    }


    html body[data-page="about"] .chalk-heading {
        font-size: clamp(1.85rem, 8.8vw, 2.3rem) !important;
        line-height: 1.05 !important;

        gap: clamp(0.35rem, 2vw, 0.55rem) !important;

        margin-top: 0 !important;
        margin-bottom: 1.15rem !important;
    }


    html body[data-page="about"] #about-copy p,
    html body[data-page="about"] #about-copy .lead {
        font-size: clamp(0.91rem, 3.8vw, 0.98rem) !important;
        line-height: 1.38 !important;

        margin-bottom: 0.72rem !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}


/* ============================================================
   CELULARES MUITO ESTREITOS
   ============================================================ */

@media (max-width: 390px) {

    html body .topbar,
    html body[data-page] .topbar {
        row-gap: 0.95rem !important;
    }

    html body .topbar .brand-mark {
        width: 2.65rem !important;
        min-width: 2.65rem !important;
    }

    html body .topbar .brand-name b,
    html body .topbar .brand-name span,
    html body .topbar .brand-name > span,
    html body .topbar .brand-name > span > span,
    html body .topbar .brand-name > b + span {
        font-size: clamp(1.65rem, 8.5vw, 1.95rem) !important;
    }

    html body .topbar > .hud {
        gap: 0.12rem !important;
    }

    html body .topbar .hud > .btn-options {
        width: clamp(6.5rem, 32vw, 7.3rem) !important;
    }

    html body .topbar .hud > .hud-btn:not(.btn-options) {
        width: clamp(3.2rem, 15vw, 3.6rem) !important;
    }
}

/* LUSOBIT-HEADER-MOBILE-GLOBAL-FIM */

/* LUSOBIT-NAVEGAR-MOBILE-CONTIDO-INICIO */

@media (max-width: 700px) {

    /*
       Diminui SOMENTE o conteudo interno do botao Navegar.
       O tamanho da placa permanece exatamente igual.
    */

    html body .topbar .btn-options .label,
    html body[data-page] .topbar .btn-options .label {
        width: 82% !important;
        max-width: 82% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 0.28rem !important;

        margin: 0 auto !important;
        padding: 0 !important;

        font-size: clamp(0.78rem, 3.7vw, 0.92rem) !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        transform: translateY(-18%) !important;
    }

    /* Palavra Navegar */

    html body .topbar .btn-options .label span,
    html body[data-page] .topbar .btn-options .label span {
        font-size: inherit !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Icone das tres linhas */

    html body .topbar .btn-options .bars,
    html body[data-page] .topbar .btn-options .bars {
        width: 0.82em !important;
        height: 0.82em !important;

        min-width: 0.82em !important;

        flex: 0 0 0.82em !important;

        margin: 0 !important;
    }
}

/* Celulares mais estreitos */

@media (max-width: 390px) {

    html body .topbar .btn-options .label,
    html body[data-page] .topbar .btn-options .label {
        width: 80% !important;
        max-width: 80% !important;

        gap: 0.22rem !important;

        font-size: clamp(0.72rem, 3.6vw, 0.84rem) !important;
    }

    html body .topbar .btn-options .bars,
    html body[data-page] .topbar .btn-options .bars {
        width: 0.76em !important;
        height: 0.76em !important;
        min-width: 0.76em !important;

        flex-basis: 0.76em !important;
    }
}

/* LUSOBIT-NAVEGAR-MOBILE-CONTIDO-FIM */

/* LUSOBIT-ABOUT-LANG-GRID-CSS-INICIO */

body[data-page="about"]
#page-about
#about-copy {
    width: 100% !important;
    max-width: 100% !important;
}

body[data-page="about"]
#page-about
#about-copy
.about-paragraph {
    margin: 0 0 1.15rem 0 !important;

    font-size:
        clamp(0.91rem, 0.32vw + 0.82rem, 1.02rem) !important;

    line-height: 1.48 !important;

    font-weight: 400 !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

body[data-page="about"]
#page-about
#about-copy
.about-highlight {
    font-weight: inherit !important;
    background: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: var(--rust, #8f4b32) !important;
}


/* ============================================================
   BLOCO DE IDIOMAS
   ============================================================ */

body[data-page="about"]
#page-about
.about-languages-block {
    width: 100% !important;

    margin:
        1.25rem 0
        1.45rem 0 !important;

    padding:
        1rem
        clamp(0.8rem, 2vw, 1.2rem)
        1.1rem !important;

    box-sizing: border-box !important;

    border-top:
        1px dashed
        rgba(72, 38, 23, 0.34) !important;

    border-bottom:
        1px dashed
        rgba(72, 38, 23, 0.34) !important;
}

body[data-page="about"]
#page-about
.about-languages-label {
    margin:
        0 0
        0.85rem 0 !important;

    padding: 0 !important;

    font-size: 0.94rem !important;
    line-height: 1.35 !important;

    font-weight: 400 !important;
}


/* Desktop: 4 colunas */

body[data-page="about"]
#page-about
.about-languages-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap:
        0.72rem
        clamp(0.75rem, 1.8vw, 1.35rem) !important;

    width: 100% !important;
}


/* Cada idioma */

body[data-page="about"]
#page-about
.about-language {
    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 0.45rem !important;

    min-width: 0 !important;

    font-size:
        clamp(0.78rem, 0.22vw + 0.74rem, 0.9rem) !important;

    line-height: 1.25 !important;

    font-weight: 600 !important;
}


/* Bandeira real em SVG */

body[data-page="about"]
#page-about
.about-language-flag {
    display: block !important;

    width: 1.35rem !important;
    height: 0.9rem !important;

    min-width: 1.35rem !important;

    object-fit: cover !important;

    border-radius: 0.08rem !important;

    box-shadow:
        0 0 0 1px
        rgba(0, 0, 0, 0.16) !important;
}


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

html.tema-escuro
body[data-page="about"]
#page-about
#about-copy
.about-paragraph,

html.tema-escuro
body[data-page="about"]
#page-about
.about-languages-label,

html.tema-escuro
body[data-page="about"]
#page-about
.about-language {
    color:
        var(--ink-azul, #050c21) !important;
}

html.tema-escuro
body[data-page="about"]
#page-about
#about-copy
.about-highlight {
    color:
        var(--sand, #f5e3b0) !important;
}

html.tema-escuro
body[data-page="about"]
#page-about
.about-languages-block {
    border-color:
        rgba(245, 227, 176, 0.34) !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    body[data-page="about"]
    #page-about
    .about-languages-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size:
            clamp(0.93rem, 2.25vw, 1rem) !important;

        line-height: 1.46 !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    body[data-page="about"]
    #page-about
    .about-languages-block {
        padding:
            0.9rem
            0.45rem
            1rem !important;
    }

    body[data-page="about"]
    #page-about
    .about-languages-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            0.7rem
            0.55rem !important;
    }

    body[data-page="about"]
    #page-about
    .about-language {
        font-size:
            clamp(0.74rem, 3.1vw, 0.86rem) !important;

        gap: 0.35rem !important;
    }

    body[data-page="about"]
    #page-about
    .about-language-flag {
        width: 1.2rem !important;
        min-width: 1.2rem !important;
        height: 0.8rem !important;
    }

    body[data-page="about"]
    #page-about
    #about-copy
    .about-paragraph {
        font-size:
            clamp(0.91rem, 3.8vw, 0.98rem) !important;

        line-height: 1.44 !important;
    }
}


/* Muito estreito: 1 coluna */

@media (max-width: 380px) {

    body[data-page="about"]
    #page-about
    .about-languages-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }
}


/* ============================================================
   BOTAO STEAM
   ============================================================ */

#page-portfolio
.dev-link[href*="steampowered.com"] {
    white-space: nowrap !important;
}

/* LUSOBIT-ABOUT-LANG-GRID-CSS-FIM */

/* LUSOBIT-TITULOS-SYNC-FINAL-INICIO */

/*
 * Todos os titulos principais seguem a cor
 * computada de LusoBit Studio.
 *
 * JS atualiza esta variavel imediatamente
 * quando o tema muda.
 */

body
.page-title,

body
.chalk-heading,

body
.board-title,

body
.about-title {

    color:
        var(
            --lusobit-titulo-sync,
            currentColor
        )
        !important;

    transition:
        color 0.12s ease !important;
}


/*
 * A galeria permanece independente.
 */

body
#lusobit-art-wall
.page-title,

body
#lusobit-art-wall
.chalk-heading,

body
#lusobit-art-wall
.board-title,

body
#lusobit-art-wall
.about-title {

    color:
        revert !important;
}

/* LUSOBIT-TITULOS-SYNC-FINAL-FIM */

/* LUSOBIT-IDIOMAS-MAIORES-FINAL-INICIO */

/*
 * Lista de idiomas maior e mais legivel.
 * Cada item permanece inteiro, evitando:
 *
 * latino-
 * americano
 */

html body[data-page="about"]
#page-about
.about-languages-grid {

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    column-gap:
        clamp(1rem, 2.2vw, 2rem) !important;

    row-gap:
        1rem !important;
}


html body[data-page="about"]
#page-about
.about-language {

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 0.58rem !important;

    min-width: 0 !important;

    /*
     * Aumento geral dos caracteres.
     */
    font-size:
        clamp(0.96rem, 0.34vw + 0.88rem, 1.12rem)
        !important;

    line-height:
        1.2 !important;

    white-space:
        nowrap !important;

    word-break:
        keep-all !important;

    overflow-wrap:
        normal !important;

    hyphens:
        none !important;
}


html body[data-page="about"]
#page-about
.about-language > span {

    display: inline-block !important;

    white-space:
        nowrap !important;

    word-break:
        keep-all !important;

    overflow-wrap:
        normal !important;

    hyphens:
        none !important;
}


/*
 * Bandeiras ligeiramente maiores para acompanhar
 * o novo tamanho dos nomes.
 */

html body[data-page="about"]
#page-about
.about-language-flag {

    width:
        1.55rem !important;

    min-width:
        1.55rem !important;

    height:
        1.03rem !important;

    flex:
        0 0 1.55rem !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    html body[data-page="about"]
    #page-about
    .about-languages-grid {

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

        column-gap:
            1.4rem !important;
    }


    html body[data-page="about"]
    #page-about
    .about-language {

        font-size:
            clamp(0.94rem, 2vw, 1.08rem)
            !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-languages-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;

        row-gap:
            0.82rem !important;
    }


    html body[data-page="about"]
    #page-about
    .about-language {

        font-size:
            clamp(0.94rem, 4vw, 1.05rem)
            !important;

        gap:
            0.55rem !important;
    }


    html body[data-page="about"]
    #page-about
    .about-language-flag {

        width:
            1.5rem !important;

        min-width:
            1.5rem !important;

        height:
            1rem !important;

        flex:
            0 0 1.5rem !important;
    }
}

/* LUSOBIT-IDIOMAS-MAIORES-FINAL-FIM */

/* LUSOBIT-IDIOMAS-4-COLUNAS-FINAL-INICIO */

html body[data-page="about"]
#page-about
.about-languages-grid {

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    column-gap:
        clamp(1rem, 2vw, 1.8rem) !important;

    row-gap:
        1rem !important;
}


html body[data-page="about"]
#page-about
.about-language {

    grid-column:
        span 1 !important;

    min-width:
        0 !important;

    white-space:
        nowrap !important;
}


/*
 * Tablet: duas colunas.
 */

@media (max-width: 1000px) {

    html body[data-page="about"]
    #page-about
    .about-languages-grid {

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


/*
 * Mobile: uma coluna.
 */

@media (max-width: 600px) {

    html body[data-page="about"]
    #page-about
    .about-languages-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;
    }
}

/* LUSOBIT-IDIOMAS-4-COLUNAS-FINAL-FIM */

/* LUSOBIT-ART-GALLERY-FONTE-FINAL-INICIO */

/*
 * O titulo dinamico do mural volta a usar a mesma
 * fonte desenhada dos demais titulos do site.
 */

html body[data-page="about"]
#page-about
#lusobit-art-wall
.art-wall-title {

    font-family:
        "Pappnp", sans-serif !important;

    font-weight:
        400 !important;

    font-style:
        normal !important;

    letter-spacing:
        normal !important;
}

/* LUSOBIT-ART-GALLERY-FONTE-FINAL-FIM */