.elementor-kit-5{--e-global-color-primary:#0B0B0C;--e-global-color-secondary:#F3F1EC;--e-global-color-text:#8B8B8B;--e-global-color-accent:#F5B82E;--e-global-color-2b2232c:#272729;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:600;--e-global-typography-f168d91-font-family:"IBM Plex Mono";--e-global-typography-f168d91-font-weight:400;background-color:var( --e-global-color-secondary );color:var( --e-global-color-primary );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================
   PORTFÓLIO SÓCRATES LEMOS
   HERO V1
======================================== */

.sl-hero {
    width: 100%;

    min-height: calc(100svh - 92px);

    background: #F3F1EC;
    color: #0B0B0C;

    overflow: hidden;
}


.sl-hero-inner {
    width: 100%;
    min-height: calc(100svh - 92px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        clamp(55px, 7vh, 100px)
        clamp(20px, 5vw, 80px)
        clamp(28px, 4vh, 52px);
}


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

.sl-hero-main {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;
}


/* META / 01
======================================== */

.sl-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: clamp(34px, 5vh, 70px);

    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    font-weight: 400;

    line-height: 1;
    letter-spacing: .13em;

    color: #8B8B8B;
}


.sl-meta-line {
    width: 32px;
    height: 1px;

    background: rgba(11, 11, 12, .28);
}


/* ========================================
   TÍTULO
======================================== */

.sl-hero-title {
    width: min(100%, 1120px);

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(56px, 6.5vw, 108px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;

    color: #0B0B0C;
}


.sl-title-line {
    display: block;
}


/* A última linha recebe uma diferença
   muito discreta de cor.
======================================== */

.sl-title-line:last-child {
    color: #8B8B8B;
}


/* ========================================
   ÁREA ABAIXO DO TÍTULO
======================================== */

.sl-hero-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    width: min(100%, 1120px);

    margin-top: clamp(40px, 6vh, 80px);
}


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

.sl-hero-info {
    font-family: "IBM Plex Mono", monospace;

    font-size: 9px;
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: .13em;

    color: #8B8B8B;
}


.sl-hero-info span {
    display: inline-block;

    margin: 0 7px;

    color: #F5B82E;
}


/* CTA
======================================== */

.sl-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 25px;

    color: #0B0B0C;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 600;

    line-height: 1;
    letter-spacing: .08em;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(11,11,12,.35);

    transition:
        border-color .25s ease,
        gap .3s ease;
}


.sl-hero-cta:hover {
    gap: 34px;
    border-color: #0B0B0C;
}


.sl-hero-arrow {
    font-size: 17px;
    line-height: 1;

    transition: transform .3s ease;
}


.sl-hero-cta:hover .sl-hero-arrow {
    transform: translateX(4px);
}


/* ========================================
   RODAPÉ DO HERO
======================================== */

.sl-hero-footer {
    width: 100%;
    max-width: 1440px;

    margin:
        clamp(70px, 10vh, 130px)
        auto
        0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}


/* AVAILABLE
======================================== */

.sl-availability {
    display: flex;
    align-items: center;
    gap: 9px;

    font-family: "IBM Plex Mono", monospace;
    font-size: 8px;
    font-weight: 400;

    line-height: 1;
    letter-spacing: .13em;

    color: #8B8B8B;
}


.sl-status-dot {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #F5B82E;

    box-shadow: 0 0 0 0 rgba(245,184,46,.35);

    animation: sl-pulse 2.4s ease-out infinite;
}


@keyframes sl-pulse {

    0% {
        box-shadow: 0 0 0 0 rgba(245,184,46,.38);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(245,184,46,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245,184,46,0);
    }

}


/* SCROLL
======================================== */

.sl-scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    text-decoration: none;

    color: #8B8B8B;

    font-family: "IBM Plex Mono", monospace;
    font-size: 7px;

    letter-spacing: .13em;
}


.sl-scroll-arrow {
    font-family: "Manrope", sans-serif;
    font-size: 16px;

    color: #0B0B0C;

    animation: sl-scroll 1.8s ease-in-out infinite;
}


@keyframes sl-scroll {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

}


/* ========================================
   ANIMAÇÃO DE ENTRADA
======================================== */

.sl-reveal {
    opacity: 0;
    transform: translateY(22px);

    animation: sl-hero-reveal .75s cubic-bezier(.2,.7,.2,1) forwards;
}


@keyframes sl-hero-reveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.sl-delay-1 {
    animation-delay: .05s;
}

.sl-delay-2 {
    animation-delay: .12s;
}

.sl-delay-3 {
    animation-delay: .20s;
}

.sl-delay-4 {
    animation-delay: .28s;
}

.sl-delay-5 {
    animation-delay: .40s;
}

.sl-delay-6 {
    animation-delay: .52s;
}


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

@media (max-width: 1024px) {

    .sl-hero {
        min-height: calc(100svh - 82px);
    }

    .sl-hero-inner {
        min-height: calc(100svh - 82px);

        padding:
            60px
            32px
            35px;
    }


    .sl-hero-title {
        font-size: clamp(50px, 7.8vw, 78px);
    }

}


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

@media (max-width: 767px) {

    .sl-hero {
        min-height: calc(100svh - 76px);
    }


    .sl-hero-inner {
        min-height: calc(100svh - 76px);

        padding:
            50px
            20px
            24px;
    }


    .sl-hero-meta {
        gap: 10px;

        margin-bottom: 42px;

        font-size: 7px;
    }


    .sl-meta-line {
        width: 24px;
    }


    .sl-hero-title {
        width: 100%;

        font-size: clamp(40px, 11.5vw, 54px);

        line-height: 1.02;
        letter-spacing: -.05em;
    }


    .sl-title-line {
        display: inline;
    }


    .sl-title-line::after {
        content: " ";
    }


    .sl-hero-bottom {
        width: 100%;

        margin-top: 38px;

        flex-direction: column;
        align-items: flex-start;

        gap: 27px;
    }


    .sl-hero-info {
        max-width: 270px;

        font-size: 7px;

        line-height: 1.75;
    }


    .sl-hero-info span {
        margin: 0 4px;
    }


    .sl-hero-cta {
        gap: 20px;

        font-size: 10px;
    }


    .sl-hero-footer {
        margin-top: 70px;

        align-items: flex-end;
    }


    .sl-availability {
        font-size: 7px;
    }


    .sl-scroll-down {
        font-size: 6px;
    }

}


/* ========================================
   ACESSIBILIDADE
   Usuário prefere movimento reduzido
======================================== */

@media (prefers-reduced-motion: reduce) {

    .sl-reveal {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .sl-status-dot,
    .sl-scroll-arrow {
        animation: none;
    }

}

/* ========================================
   PORTFÓLIO SÓCRATES LEMOS
   CAPABILITIES V1
======================================== */

.sl-capabilities {
    width: 100%;

    background: #0B0B0C;
    color: #F3F1EC;

    padding:
        clamp(48px, 7vw, 90px)
        clamp(20px, 5vw, 80px);
}


.sl-capabilities-inner {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;
}


/* ========================================
   LABEL DA SEÇÃO
======================================== */

.sl-section-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: clamp(38px, 5vw, 65px);

    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    font-weight: 400;

    line-height: 1;
    letter-spacing: .13em;

    color: #8B8B8B;
}


.sl-section-line {
    display: block;

    width: 32px;
    height: 1px;

    background: rgba(243, 241, 236, .22);
}


/* ========================================
   SCROLL / LISTA
======================================== */

.sl-capabilities-scroll {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
}


.sl-capabilities-scroll::-webkit-scrollbar {
    display: none;
}


.sl-capabilities-list {
    display: flex;

    width: max-content;
    min-width: 100%;

    align-items: stretch;

    border-top: 1px solid rgba(243,241,236,.12);
}


/* ========================================
   ITEM
======================================== */

.sl-capability {
    position: relative;

    appearance: none;

    border: 0;
    border-right: 1px solid rgba(243,241,236,.12);

    background: transparent;
    color: #8B8B8B;

    min-width: 170px;
    flex: 1;

    padding:
        clamp(25px, 3vw, 38px)
        clamp(20px, 2.5vw, 34px)
        clamp(22px, 2.5vw, 32px);

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: space-between;

    gap: 36px;

    cursor: pointer;

    transition:
        color .3s ease,
        background .3s ease;
}


/* PRIMEIRO ITEM */

.sl-capability:first-child {
    border-left: 1px solid rgba(243,241,236,.12);
}


/* LINHA ATIVA */

.sl-capability::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: #F5B82E;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}


/* HOVER */

.sl-capability:hover {
    color: #F3F1EC;

    background: rgba(255,255,255,.025);
}


/* ATIVO */

.sl-capability.is-active {
    color: #F3F1EC;
}


.sl-capability.is-active::after {
    transform: scaleX(1);
}


/* ========================================
   ÍCONES
======================================== */

.sl-capability-icon {
    width: 28px;
    height: 28px;

    display: block;
}


.sl-capability-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .3s ease;
}


.sl-capability:hover .sl-capability-icon svg {
    transform: translateY(-3px);
}


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

.sl-capability-name {
    font-family: "Manrope", sans-serif;

    font-size: 13px;
    font-weight: 500;

    line-height: 1;

    letter-spacing: -.01em;
}


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

@media (max-width: 1024px) {

    .sl-capabilities {
        padding-left: 32px;
        padding-right: 32px;
    }


    .sl-capability {
        min-width: 155px;
    }

}


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

@media (max-width: 767px) {

    .sl-capabilities {
        padding:
            45px
            20px
            48px;
    }


    .sl-section-label {
        margin-bottom: 32px;

        font-size: 7px;
    }


    .sl-section-line {
        width: 24px;
    }


    .sl-capabilities-scroll {
        margin-right: -20px;

        width: calc(100% + 20px);

        padding-right: 20px;
    }


    .sl-capabilities-list {
        min-width: max-content;
    }


    .sl-capability {
        min-width: 125px;

        padding:
            22px
            17px
            20px;

        gap: 28px;
    }


    .sl-capability-icon {
        width: 24px;
        height: 24px;
    }


    .sl-capability-name {
        font-size: 11px;
    }

}


/* ========================================
   REDUÇÃO DE MOVIMENTO
======================================== */

@media (prefers-reduced-motion: reduce) {

    .sl-capability,
    .sl-capability::after,
    .sl-capability-icon svg {
        transition: none;
    }

}

/* ========================================
   AJUSTES CAPABILITIES V1
   Correção Elementor + Desktop Full Width
======================================== */


/* SEÇÃO PRETA DE PONTA A PONTA */

.sl-capabilities {
    box-sizing: border-box;

    width: 100vw;
    max-width: none;

    position: relative;
    left: 50%;

    margin-left: -50vw;
    margin-right: -50vw;
}


/* ========================================
   REMOVE ESTILOS NATIVOS DE BOTÃO
   DO ELEMENTOR / TEMA
======================================== */

.sl-capabilities .sl-capability,
.sl-capabilities .sl-capability:hover,
.sl-capabilities .sl-capability:focus,
.sl-capabilities .sl-capability:active {
    border-radius: 0 !important;
    box-shadow: none !important;

    background-color: transparent !important;

    outline: none;

    text-decoration: none !important;
}


/* ESTADO NORMAL */

.sl-capabilities .sl-capability {
    color: #8B8B8B !important;
}


/* HOVER */

.sl-capabilities .sl-capability:hover {
    color: #F3F1EC !important;

    background-color: rgba(255,255,255,.025) !important;
}


/* ITEM SELECIONADO */

.sl-capabilities .sl-capability.is-active {
    color: #F3F1EC !important;

    background-color: transparent !important;
}


/* ========================================
   DESKTOP
   TODOS OS ITENS CABEM NA MESMA LINHA
======================================== */

@media (min-width: 1025px) {

    .sl-capabilities-list {
        width: 100%;
        min-width: 0;
    }

    .sl-capability {
        min-width: 0;

        flex: 1 1 0;
    }

}


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

@media (min-width: 768px) and (max-width: 1024px) {

    .sl-capabilities-list {
        width: 100%;
        min-width: 0;
    }

    .sl-capability {
        min-width: 0;

        flex: 1 1 0;

        padding-left: 14px;
        padding-right: 14px;
    }

    .sl-capability-name {
        font-size: 10px;
    }

}


/* ========================================
   MOBILE
   VOLTA A SER HORIZONTAL / SWIPE
======================================== */

@media (max-width: 767px) {

    .sl-capabilities-list {
        width: max-content;
        min-width: max-content;
    }

    .sl-capability {
        flex: 0 0 auto;

        min-width: 125px;
    }

}
/* ========================================
   GRID GLOBAL - AJUSTE DE CONSISTÊNCIA
======================================== */

/* Mantém o preto de ponta a ponta,
   mas centraliza o conteúdo interno */

.sl-capabilities-inner {
    width: calc(100% - 40px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}


/* Desktop grande */

@media (min-width: 768px) {

    .sl-capabilities-inner {
        width: calc(100% - 128px);
    }

}


/* ========================================
   COMPETÊNCIAS - DESKTOP
======================================== */

@media (min-width: 1025px) {

    .sl-capabilities-list {
        width: 100%;
        min-width: 0;
    }

    .sl-capability {
        min-width: 0;
        flex: 1 1 0;

        padding-left: 18px;
        padding-right: 18px;
    }

}


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

@media (max-width: 767px) {

    .sl-capabilities-inner {
        width: 100%;
        max-width: none;
    }

    .sl-capabilities-scroll {
        width: calc(100% + 20px);

        margin-right: -20px;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .sl-capabilities-scroll::-webkit-scrollbar {
        display: none;
    }

    .sl-capabilities-list {
        width: max-content;
        min-width: max-content;
    }

    .sl-capability {
        flex: 0 0 auto;

        width: 122px;
        min-width: 122px;
    }

}
/* ========================================
   INDICAÇÃO DE SWIPE MOBILE
======================================== */

.sl-capabilities-mobile-hint {
    display: none;
}


@media (max-width: 767px) {

    .sl-capabilities-mobile-hint {
        display: flex;

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

        margin:
            -12px
            0
            18px;

        font-family: "IBM Plex Mono", monospace;

        font-size: 6px;
        font-weight: 400;

        letter-spacing: .13em;

        color: #8B8B8B;
    }


    .sl-capabilities-mobile-hint span:last-child {
        font-family: "Manrope", sans-serif;

        font-size: 13px;

        color: #F5B82E;

        animation: sl-swipe-hint 1.8s ease-in-out infinite;
    }


    @keyframes sl-swipe-hint {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(5px);
        }

    }

}

/* ========================================
   HERO V2
   COMPOSIÇÃO MAIS COMPACTA
======================================== */


/* Hero deixa de ser obrigatoriamente
   uma tela inteira */

.sl-hero {
    min-height: 0;
}


.sl-hero-inner {
    min-height: 0;

    padding-top: clamp(65px, 7vw, 95px);
    padding-bottom: clamp(52px, 5vw, 72px);
}


/* aproxima a parte inferior
   do restante do conteúdo */

.sl-hero-footer {
    margin-top: clamp(48px, 5vw, 68px);

    align-items: center;
}


/* remove completamente o indicador
   de scroll */

.sl-scroll-down {
    display: none !important;
}


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

@media (max-width: 767px) {

    .sl-hero-inner {
        min-height: 0;

        padding-top: 48px;
        padding-bottom: 42px;
    }


    .sl-hero-footer {
        margin-top: 45px;
    }

}
/* ========================================
   PORTFÓLIO SÓCRATES LEMOS
   ARCHIVE / TRABALHOS V1
======================================== */

.sl-archive {
    width: 100%;
    background: #F3F1EC;
    color: #0B0B0C;
}

.sl-archive-inner {
    width: calc(100% - 40px);
    max-width: 1120px;
    margin: 0 auto;
}


/* HERO
======================================== */

.sl-archive-hero {
    padding:
        clamp(70px, 8vw, 115px)
        0
        clamp(65px, 7vw, 100px);
}

.sl-archive-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: clamp(40px, 5vw, 70px);

    font-family: "IBM Plex Mono", monospace;
    font-size: 8px;

    letter-spacing: .13em;

    color: #8B8B8B;
}

.sl-archive-line {
    width: 32px;
    height: 1px;

    background: rgba(11,11,12,.22);
}

.sl-archive-intro {
    display: grid;
    grid-template-columns: 1.6fr .7fr;

    gap: clamp(50px, 8vw, 130px);

    align-items: end;
}

.sl-archive-intro h1 {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 6vw, 92px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;

    color: #0B0B0C;
}

.sl-archive-intro p {
    max-width: 320px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 13px;

    line-height: 1.6;

    color: #8B8B8B;
}


/* FERRAMENTAS
======================================== */

.sl-archive-tools {
    border-top: 1px solid rgba(11,11,12,.10);
    border-bottom: 1px solid rgba(11,11,12,.10);

    padding: 24px 0;
}

.sl-project-search {
    position: relative;

    max-width: 420px;

    margin-bottom: 25px;
}

.sl-project-search input {
    width: 100%;

    padding:
        14px
        18px
        14px
        42px;

    border: 1px solid rgba(11,11,12,.15);

    border-radius: 0;

    background: transparent;

    color: #0B0B0C;

    font-family: "Manrope", sans-serif;
    font-size: 12px;

    outline: none;

    transition: border-color .25s ease;
}

.sl-project-search input:focus {
    border-color: #0B0B0C;
}

.sl-project-search input::placeholder {
    color: #8B8B8B;
}

.sl-search-icon {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 18px;

    color: #8B8B8B;

    pointer-events: none;
}


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

.sl-project-filters {
    width: 100%;

    display: flex;

    overflow-x: auto;

    scrollbar-width: none;
}

.sl-project-filters::-webkit-scrollbar {
    display: none;
}

.sl-project-filters button {
    appearance: none;

    border: 0;
    border-right: 1px solid rgba(11,11,12,.10);

    background: transparent;

    padding: 10px 18px;

    flex: 0 0 auto;

    color: #8B8B8B;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 500;

    cursor: pointer;

    transition:
        color .25s ease,
        background .25s ease;
}

.sl-project-filters button:first-child {
    padding-left: 0;
}

.sl-project-filters button:hover,
.sl-project-filters button.is-active {
    color: #0B0B0C;
}

.sl-project-filters button.is-active::before {
    content: "●";

    margin-right: 7px;

    font-size: 7px;

    color: #F5B82E;
}


/* PROJETOS
======================================== */

.sl-archive-projects {
    padding:
        clamp(60px, 7vw, 100px)
        0
        clamp(100px, 10vw, 160px);
}

.sl-archive-count {
    display: flex;
    gap: 9px;

    margin-bottom: 30px;

    font-family: "IBM Plex Mono", monospace;
    font-size: 7px;

    letter-spacing: .12em;

    color: #8B8B8B;
}

.sl-archive-grid {
    display: grid;

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

    gap:
        clamp(55px, 6vw, 85px)
        clamp(20px, 3vw, 40px);
}

.sl-archive-placeholder {
    aspect-ratio: 4 / 5;

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

    position: relative;

    overflow: hidden;

    background: #E2E0DB;
}

.sl-archive-placeholder::after {
    content: "↗";

    position: absolute;

    right: 16px;
    bottom: 16px;

    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    background: #F3F1EC;

    color: #0B0B0C;
}

.sl-archive-placeholder > span {
    font-family: "IBM Plex Mono", monospace;

    font-size: 7px;

    letter-spacing: .13em;

    color: #8B8B8B;
}

.sl-archive-card-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-top: 15px;
}

.sl-archive-card-meta h2 {
    margin: 0 0 5px;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 500;

    letter-spacing: -.025em;

    color: #0B0B0C;
}

.sl-archive-card-meta p,
.sl-archive-card-meta > span {
    margin: 0;

    font-family: "IBM Plex Mono", monospace;
    font-size: 7px;

    letter-spacing: .10em;

    color: #8B8B8B;
}


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

@media (min-width: 768px) {

    .sl-archive-inner {
        width: calc(100% - 128px);
    }

}


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

@media (max-width: 767px) {

    .sl-archive-hero {
        padding:
            52px
            0
            55px;
    }

    .sl-archive-label {
        margin-bottom: 35px;

        font-size: 7px;
    }

    .sl-archive-intro {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .sl-archive-intro h1 {
        font-size: clamp(40px, 12vw, 54px);
    }

    .sl-archive-intro p {
        max-width: 280px;

        font-size: 12px;
    }

    .sl-archive-tools {
        padding: 20px 0;
    }

    .sl-project-search {
        max-width: none;

        margin-bottom: 20px;
    }

    .sl-project-filters {
        width: calc(100% + 20px);

        padding-right: 20px;
    }

    .sl-project-filters button {
        padding:
            9px
            14px;

        font-size: 9px;
    }

    .sl-archive-projects {
        padding:
            55px
            0
            90px;
    }

    .sl-archive-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .sl-archive-card-meta h2 {
        font-size: 16px;
    }

}

/* =========================================================
   SÓCRATES LEMOS — TIPOGRAFIA GLOBAL V2
   LEGIBILIDADE DESKTOP + MOBILE
========================================================= */



/* =========================================================
   HOME — HERO / MICROINFORMAÇÕES
========================================================= */

.sl-availability {
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .11em !important;
}

.sl-scroll-down {
    font-size: 9px !important;
}


/* =========================================================
   LABELS DE SEÇÃO
   01 / 02 / 03 — SOBRE — COMPETÊNCIAS ETC.
========================================================= */

.sl-section-label,
.sl-archive-label,
.sl-about-label,
.sl-about-section-label {
    font-size: 10px !important;
    line-height: 1.35 !important;
}


/* =========================================================
   HOME — COMPETÊNCIAS
========================================================= */

.sl-capability-name {
    font-size: 13px !important;
    line-height: 1.3 !important;
}


/* =========================================================
   HOME — PROJETOS SELECIONADOS
========================================================= */

.sl-work-all {
    font-size: 11px !important;
}

.sl-project-meta h3 {
    font-size: 18px !important;
}

.sl-project-meta p {
    font-size: 10px !important;
    line-height: 1.45 !important;
}

.sl-project-year {
    font-size: 10px !important;
}


/* =========================================================
   PÁGINA TRABALHOS
========================================================= */

.sl-archive-intro p {
    font-size: 15px !important;
    line-height: 1.65 !important;
}

.sl-project-search input {
    font-size: 14px !important;
}

.sl-project-filters button {
    font-size: 11px !important;
}

.sl-archive-count {
    font-size: 10px !important;
}

.sl-archive-card-meta h2 {
    font-size: 18px !important;
}

.sl-archive-card-meta p,
.sl-archive-card-meta > span {
    font-size: 10px !important;
    line-height: 1.45 !important;
}


/* =========================================================
   PÁGINA SOBRE — TEXTO PRINCIPAL
========================================================= */

.sl-about-copy {
    font-size: 16px !important;
    line-height: 1.65 !important;
}


/* =========================================================
   SOBRE — BASE / ATUAÇÃO / FOCO / PROJETOS
========================================================= */

.sl-about-data-item small {
    font-size: 10px !important;
    line-height: 1.4 !important;
}

.sl-about-data-item strong {
    font-size: 14px !important;
    line-height: 1.4 !important;
}


/* =========================================================
   SOBRE — CAPACIDADES
========================================================= */

.sl-about-service span:first-child {
    font-size: 10px !important;
}

.sl-about-service span:last-child {
    font-size: 15px !important;
    line-height: 1.3 !important;
}


/* =========================================================
   SOBRE — FERRAMENTAS
========================================================= */

.sl-about-tools-title {
    font-size: 10px !important;
}

.sl-about-tool {
    font-size: 10px !important;
    line-height: 1.2 !important;

    padding:
        10px
        13px !important;
}


/* =========================================================
   SOBRE — DOWNLOADS
========================================================= */

.sl-about-download-label small {
    font-size: 10px !important;
}

.sl-about-download-button {
    font-size: 11px !important;
}


/* =========================================================
   FOOTER
   Usa maior especificidade porque o Footer possui CSS próprio
========================================================= */

#sl-global-footer .sl-footer-brand strong {
    font-size: 12px !important;
}

#sl-global-footer .sl-footer-brand span {
    font-size: 9px !important;
}

#sl-global-footer .sl-footer-location {
    font-size: 9px !important;
}

#sl-global-footer .sl-footer-links a {
    font-size: 10px !important;
}

#sl-global-footer .sl-footer-bottom {
    font-size: 8px !important;
}


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

@media (max-width: 767px) {

   

    /* Labels pequenas */

    .sl-section-label,
    .sl-archive-label,
    .sl-about-label,
    .sl-about-section-label {
        font-size: 9px !important;
    }


    /* Home */

    .sl-availability {
        font-size: 9px !important;
    }

    .sl-capability-name {
        font-size: 12px !important;
    }


    /* Trabalhos */

    .sl-archive-intro p {
        font-size: 15px !important;
    }

    .sl-project-search input {
        font-size: 14px !important;
    }

    .sl-project-filters button {
        font-size: 11px !important;
    }

    .sl-archive-card-meta h2 {
        font-size: 17px !important;
    }

    .sl-archive-card-meta p,
    .sl-archive-card-meta > span {
        font-size: 10px !important;
    }


    /* Sobre */

    .sl-about-copy {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .sl-about-data-item small {
        font-size: 9px !important;
    }

    .sl-about-data-item strong {
        font-size: 13px !important;
    }

    .sl-about-service span:first-child {
        font-size: 9px !important;
    }

    .sl-about-service span:last-child {
        font-size: 14px !important;
    }

    .sl-about-tools-title {
        font-size: 9px !important;
    }

    .sl-about-tool {
        font-size: 9px !important;
    }

    .sl-about-download-label small {
        font-size: 9px !important;
    }

    .sl-about-download-button {
        font-size: 11px !important;
    }


    /* Footer */

    #sl-global-footer .sl-footer-brand strong {
        font-size: 11px !important;
    }

    #sl-global-footer .sl-footer-brand span,
    #sl-global-footer .sl-footer-location {
        font-size: 9px !important;
    }

    #sl-global-footer .sl-footer-links a {
        font-size: 11px !important;
    }

    #sl-global-footer .sl-footer-bottom {
        font-size: 8px !important;
        line-height: 1.5 !important;
    }

}/* End custom CSS */