* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #050505;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

/* CORES */

:root {
    --azul: #32b8f4;
    --cinza: #969696;
    --linha: #252525;
}

/* TOPO */

.topo {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 34px 0 24px;

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

    border-bottom: 1px solid var(--linha);
}

.nome {
    font-size: 13px;
    font-weight: 800;
}

.status {
    font-size: 12px;
    font-weight: 700;
    color: var(--azul);
}

/* HERO */

.hero {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 120px 0 110px;

    border-bottom: 1px solid var(--linha);
}

.subtitulo-azul {
    color: var(--azul);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 35px;
}

.hero h1 {
    margin: 0;
    max-width: 1250px;

    font-size: clamp(58px, 6.2vw, 105px);
    line-height: 0.94;
    letter-spacing: -5px;

    font-weight: 800;
}

.hero-inferior {
    margin-top: 70px;

    display: grid;
    grid-template-columns: 1.6fr 0.7fr;
    gap: 80px;

    align-items: end;
}

.descricao {
    max-width: 750px;
    margin: 0;

    font-size: 20px;
    line-height: 1.6;
    color: var(--cinza);
}

.card-area {
    border: 1px solid var(--azul);
    padding: 20px 22px;
    min-height: 90px;

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

.card-area span {
    color: var(--azul);
    font-size: 13px;
    font-weight: 800;
}

.card-area strong {
    font-size: 14px;
}

/* SOBRE */

.sobre {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 100px 0;

    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: 70px;

    align-items: center;
}

.foto-sobre {
    overflow: hidden;
    border: 1px solid var(--azul);
}

.foto-sobre img {
    display: block;
    width: 100%;
    height: 620px;
    object-fit: cover;
    filter: grayscale(30%);
}

.texto-sobre h2 {
    margin: 0 0 40px 0;

    font-size: clamp(42px, 4vw, 72px);
    line-height: 1;
    letter-spacing: -3px;
}

.sobre-descricao {
    max-width: 760px;

    font-size: 18px;
    line-height: 1.6;
    color: var(--cinza);
}

.competencias {
    margin-top: 40px;

    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.competencias span {
    font-size: 12px;
    font-weight: 800;
}

/* COMPETÊNCIAS */

.competencias-secao {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 110px 0;
    border-top: 1px solid var(--linha);
}

.competencias-cabecalho {
    margin-bottom: 45px;
}

.lista-competencias {
    border-top: 1px solid var(--linha);
}

.competencia-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;

    padding: 32px 0;
    border-bottom: 1px solid var(--linha);

    transition: padding 0.3s ease;
}

.competencia-item:hover {
    padding-left: 15px;
}

.numero {
    color: var(--azul);
    font-size: 13px;
    font-weight: 800;
}

.competencia-item h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
}

.competencia-item p {
    margin: 0;
    color: var(--cinza);
    font-size: 15px;
}

/* CASES */

.cases-secao {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 110px 0;
    border-top: 1px solid var(--linha);
}

.cases-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 60px;
}

.cases-topo h2 {
    margin: 0;
    font-size: clamp(42px, 4vw, 64px);
    line-height: 0.95;
    letter-spacing: -3px;

}

.ver-todos {
    color: var(--azul);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

/* GRID DOS CASES */

.cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* CARD */

.case-card {
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    overflow: hidden;
    background: #0b0b0b;

    transition: transform 0.3s ease, border-color 0.3s ease;
}

.case-card:hover {
    transform: translateY(-6px);
    border-color: var(--azul);
}

/* CAPA */

.case-capa {
    height: 220px;

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

    overflow: hidden;
}


.case-capa img {
    max-width: 65%;
    max-height: 55%;
    object-fit: contain;
}

/* CORES DAS CAPAS */

.sacramento {
    background: #080808;
}

.basike {
    background: #ff6600;
}

.brasil {
    background: #e9edf2;
}

.owl {
    background: #d4ea00;
}

/* CONTEÚDO DO CARD */

.case-conteudo {
    padding: 22px;
}

.case-numero {
    display: block;
    margin-bottom: 12px;

    color: var(--azul);
    font-size: 14px;
    font-weight: 800;
}

.case-conteudo h3 {
    margin: 0 0 22px 0;
    font-size: 23px;
    line-height: 1.1;

    min-height: 52px;
    display: flex;
    align-items: flex-start;

}

/* TAGS */

.case-tags {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;

    min-height: 68px;
    margin-bottom: 24px;
}


.case-tags span {
    padding: 7px 10px;

    border: 1px solid #444;
    border-radius: 999px;

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

    white-space: nowrap;

}

/* LINK */

.case-link {
    display: block;

    padding-top: 22px;

    border-top: 1px solid #333;

    color: var(--azul);
    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
}
/* =========================
   PÁGINA DE CASE
   ========================= */

.voltar-home {
    color: var(--azul);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.case-hero {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 100px 0 90px;
    border-bottom: 1px solid var(--linha);
}

.case-hero-topo {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr;
    gap: 80px;
    align-items: end;
}

.case-hero h1 {
    margin: 0;
    max-width: 1100px;

    font-size: clamp(58px, 6vw, 100px);
    line-height: 0.95;
    letter-spacing: -5px;
}

.case-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.case-hero-tags span {
    padding: 8px 12px;
    border: 1px solid #444;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
}

.case-hero-info {
    margin-top: 70px;

    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
}

.case-hero-texto {
    max-width: 700px;

    font-size: 20px;
    line-height: 1.6;
    color: var(--cinza);
}

.case-hero-texto p {
    margin: 0;
}

.case-hero-dados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.case-hero-dados div {
    border-top: 1px solid var(--linha);
    padding-top: 15px;
}

.case-hero-dados span {
    display: block;
    margin-bottom: 8px;

    color: var(--cinza);
    font-size: 10px;
    font-weight: 700;
}

.case-hero-dados strong {
    font-size: 14px;
}

/* BLOCOS DO CASE */

.case-bloco {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 100px 0;

    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 40px;

    border-bottom: 1px solid var(--linha);
}

.case-bloco-numero {
    color: var(--azul);
    font-size: 14px;
    font-weight: 800;
}

.case-bloco-conteudo {
    max-width: 1100px;
}

.case-bloco-conteudo h2 {
    margin: 0 0 35px 0;

    max-width: 950px;

    font-size: clamp(42px, 4vw, 70px);
    line-height: 1;
    letter-spacing: -3px;
}

.case-texto {
    max-width: 760px;

    margin: 0;

    font-size: 18px;
    line-height: 1.7;
    color: var(--cinza);
}

/* ATUAÇÃO */

.atuacao-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.atuacao-item {
    min-height: 190px;

    padding: 25px;

    border: 1px solid var(--linha);
    border-radius: 18px;

    background: #0b0b0b;
}

.atuacao-item span {
    color: var(--azul);
    font-size: 12px;
    font-weight: 800;
}

.atuacao-item h3 {
    margin: 35px 0 10px 0;
    font-size: 24px;
}

.atuacao-item p {
    margin: 0;

    max-width: 420px;

    color: var(--cinza);
    font-size: 15px;
    line-height: 1.5;
}

/* GESTÃO DE CONTEÚDO */

.conteudo-fluxo {
    margin-top: 60px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}

.fluxo-item {
    min-height: 230px;

    padding: 28px 22px;

    border-right: 1px solid var(--linha);
}

.fluxo-item:last-child {
    border-right: none;
}

.fluxo-item span {
    color: var(--azul);
    font-size: 12px;
    font-weight: 800;
}

.fluxo-item h3 {
    margin: 50px 0 12px;

    font-size: 22px;
}

.fluxo-item p {
    margin: 0;

    color: var(--cinza);
    font-size: 14px;
    line-height: 1.5;
}

/* =========================
   BASIKE — GESTÃO DE CONTEÚDO
   ========================= */

.gestao-conteudo {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 110px 0;
    border-bottom: 1px solid var(--linha);
}

.gestao-intro {
    display: grid;
    grid-template-columns: 0.75fr 1.4fr;
    gap: 80px;
    align-items: stretch;
}

.gestao-texto h2 {
    margin: 0 0 30px;

    font-size: clamp(42px, 4vw, 68px);
    line-height: 0.98;
    letter-spacing: -3px;
}

.gestao-texto > p:not(.subtitulo-azul) {
    max-width: 520px;
    margin: 0;

    color: var(--cinza);
    font-size: 16px;
    line-height: 1.7;
}

.gestao-lista {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin-top: 35px;
}

.gestao-lista span {
    font-size: 14px;
}

.gestao-lista span::first-letter {
    color: #ff6600;
}


/* ESPAÇO DA PLANILHA */

.planilha-placeholder {
    min-height: 520px;

    padding: 50px;

    border: 1px dashed #3a3a3a;
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #0d0d0d,
            #080808
        );

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

    text-align: center;
}

.placeholder-icone {
    margin-bottom: 30px;

    color: #ff6600;
    font-size: 55px;
    font-weight: 300;
}

.planilha-placeholder strong {
    margin-bottom: 15px;

    font-size: 15px;
    letter-spacing: 1px;
}

.planilha-placeholder p {
    max-width: 450px;
    margin: 0;

    color: var(--cinza);
    font-size: 14px;
    line-height: 1.6;
}

.planilha-placeholder span {
    margin-top: 25px;

    color: #555;
    font-size: 11px;
}


/* =========================
   CONTEÚDO NA PRÁTICA
   ========================= */

.conteudo-pratica {
    width: min(90%, 1450px);
    margin: 0 auto;

    padding: 110px 0;

    border-bottom: 1px solid var(--linha);
}

.conteudo-pratica-topo {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 80px;
    align-items: end;

    margin-bottom: 50px;
}

.conteudo-pratica h2 {
    max-width: 750px;

    margin: 0;

    font-size: clamp(42px, 4vw, 68px);
    line-height: 0.98;
    letter-spacing: -3px;
}

.conteudo-pratica-descricao {
    max-width: 500px;
    margin: 0;

    color: var(--cinza);
    font-size: 16px;
    line-height: 1.7;
}


/* FILTROS */

.conteudo-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 25px;
}

.conteudo-filtros span {
    padding: 10px 18px;

    border: 1px solid #292929;
    border-radius: 999px;

    color: var(--cinza);

    font-size: 10px;
    font-weight: 800;
}

.conteudo-filtros .ativo {
    border-color: #ff6600;
    background: #ff6600;
    color: #050505;
}


/* GALERIA */

.conteudo-galeria {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.conteudo-exemplo {
    overflow: hidden;

    border: 1px solid #252525;
    border-radius: 14px;

    background: #0b0b0b;
}

.conteudo-placeholder {
    aspect-ratio: 4 / 5;

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

    background:
        linear-gradient(
            145deg,
            #121212,
            #080808
        );

    color: #444;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* =========================
   BASIKE — RESULTADOS
   ========================= */

.resultados-basike {
    width: min(90%, 1450px);
    margin: 0 auto;

    padding: 110px 0;

    border-bottom: 1px solid var(--linha);
}

.resultados-topo {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 80px;
    align-items: end;

    margin-bottom: 55px;
}

.resultados-topo h2 {
    max-width: 700px;

    margin: 0;

    font-size: clamp(42px, 4vw, 68px);
    line-height: 0.98;
    letter-spacing: -3px;
}

.resultados-descricao {
    max-width: 520px;
    margin: 0;

    color: var(--cinza);

    font-size: 16px;
    line-height: 1.7;
}


/* CARDS */

.resultados-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.resultado-card {
    min-height: 310px;

    padding: 28px;

    border: 1px solid #292929;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #0d0d0d,
            #080808
        );

    display: flex;
    flex-direction: column;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.resultado-card:hover {
    transform: translateY(-5px);
    border-color: #ff6600;
}

.resultado-numero {
    color: #ff6600;

    font-size: 12px;
    font-weight: 800;
}

.resultado-card h3 {
    margin: 35px 0 18px;

    font-size: 18px;
}

.resultado-dado {
    display: block;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 48px;
    line-height: 1;
    letter-spacing: -2px;
}

.resultado-texto {
    max-width: 230px;

    color: #ff6600;

    font-size: 30px;
    line-height: 1.05;
}

.resultado-card p {
    margin: auto 0 0;

    color: var(--cinza);

    font-size: 14px;
    line-height: 1.6;
}
/* =========================
   TRABALHOS SELECIONADOS
   ========================= */

.trabalhos-selecionados {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 110px 0;
    border-bottom: 1px solid var(--linha);
}

.trabalhos-cabecalho {
    display: grid;
    grid-template-columns: 1fr 0.65fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 55px;
}

.trabalhos-cabecalho h2 {
    margin: 0;
    font-size: clamp(48px, 5vw, 78px);
    line-height: 0.95;
    letter-spacing: -4px;
}

.trabalhos-intro {
    max-width: 480px;
    margin: 0;
    color: var(--cinza);
    font-size: 16px;
    line-height: 1.7;
}


/* DESTAQUES */

.portfolio-destaques {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.portfolio-item {
    min-width: 0;
}

.portfolio-imagem {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 16px;
    background: #0d0d0d;
}

.portfolio-grande .portfolio-imagem {
    aspect-ratio: 16 / 10;
}


/* QUANDO COLOCARMOS AS IMAGENS REAIS */

.portfolio-imagem img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.5s ease;
}

.portfolio-item:hover .portfolio-imagem img {
    transform: scale(1.025);
}


/* PLACEHOLDER */

.placeholder-portfolio {
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #252525;

    color: #3d3d3d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* INFORMAÇÕES */

.portfolio-info {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 3px 5px;
}

.portfolio-info h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.portfolio-info span {
    color: var(--cinza);
    font-size: 11px;
}

.portfolio-numero {
    color: var(--azul) !important;
    font-weight: 800;

    
}




/* GALERIA */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 18px;
}


/* =========================
   E-COMMERCE & BANNERS
   ========================= */

.banners-secao {
    width: min(90%, 1450px);
    margin: 0 auto;
    padding: 110px 0;
    border-bottom: 1px solid var(--linha);
}

.banners-lista {
    display: flex;
    flex-direction: column;
    gap: 58px;
}

.banner-item {
    width: 100%;
}

.banner-full {
    width: 100%;
}

.banner-direita {
    width: 82%;
    margin-left: auto;
}

.banner-esquerda {
    width: 82%;
    margin-right: auto;
}

.banner-imagem {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #0d0d0d;
    border: 1px solid #202020;
}

.banner-imagem img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.banner-item:hover .banner-imagem img {
    transform: scale(1.015);
}

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

@media (max-width: 900px) {

    .hero {
        padding-top: 80px;
    }

    .hero h1 {
        letter-spacing: -3px;
    }

    .hero-inferior {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .card-area {
        max-width: 350px;
    }

    .sobre {
        grid-template-columns: 1fr;
    }

    .foto-sobre img {
        height: 500px;
    }

    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cases-topo {
        align-items: flex-start;
    }

    .case-capa {
        height: 220px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trabalhos-cabecalho {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .banner-direita,
    .banner-esquerda {
        width: 90%;
    }

}

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

@media (max-width: 600px) {

    .topo {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hero {
        padding: 70px 0;
    }

    .hero h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .descricao {
        font-size: 17px;
    }

    .sobre {
        padding: 70px 0;
        gap: 45px;
    }

    .foto-sobre img {
        height: 420px;
    }

    .texto-sobre h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .sobre-descricao {
        font-size: 16px;
    }

    /* COMPETÊNCIAS */

    .competencias-secao {
        padding: 70px 0;
    }

    .competencias-cabecalho {
        margin-bottom: 35px;
    }

    .competencia-item {
        grid-template-columns: 45px 1fr;
        padding: 25px 0;
    }

    .competencia-item h3 {
        font-size: 19px;
    }

    .competencia-item p {
        font-size: 14px;
        line-height: 1.5;
    }

    /* CASES */

    .cases-secao {
        padding: 70px 0;
    }

    .cases-topo {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 40px;
    }

    .cases-topo h2 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .cases-grid {
        grid-template-columns: 1fr;
    }

    .case-capa {
        height: 230px;
    }

    .case-conteudo h3 {
    font-size: 19px;
    line-height: 1.15;
}


/* TRABALHOS SELECIONADOS — CELULAR */

.trabalhos-selecionados {
    padding: 70px 0;
}

.trabalhos-cabecalho {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 40px;
}

.trabalhos-cabecalho h2 {
    font-size: 44px;
    letter-spacing: -2px;
}

.portfolio-destaques,
.portfolio-grid {
    grid-template-columns: 1fr;
}

.portfolio-grande .portfolio-imagem,
.portfolio-imagem {
    aspect-ratio: 4 / 5;
}



    .banners-secao {
        padding: 70px 0;
    }

    .banners-lista {
        gap: 38px;
    }

    .banner-full,
    .banner-direita,
    .banner-esquerda {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .banner-imagem {
        border-radius: 12px;
    }

    .portfolio-info {
        padding-top: 14px;
    }

}
/* GALERIA FINAL — PROPORÇÃO ORIGINAL */
.portfolio-grid.portfolio-grid-natural{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 18px;align-items:start}
.portfolio-card{min-width:0}
.portfolio-card>img{display:block;width:100%;height:auto;border:1px solid #202020;border-radius:14px;background:#0d0d0d;transition:transform .35s ease,border-color .35s ease}
.portfolio-card:hover>img{transform:translateY(-5px);border-color:var(--azul)}
.portfolio-card-info{padding:13px 2px 0}
.portfolio-card-info>span{display:block;margin-bottom:6px;color:var(--azul);font-size:10px;line-height:1.3;font-weight:800}
.portfolio-card-info h3{margin:0 0 5px;color:#fff;font-size:15px;line-height:1.2}
.portfolio-card-info p{margin:0;color:var(--cinza);font-size:11px;line-height:1.4}
.portfolio-placeholder-natural{width:100%;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:1px dashed #333;border-radius:14px;background:linear-gradient(145deg,#0d0d0d,#080808);text-align:center}
.portfolio-placeholder-natural strong{width:46px;height:46px;display:grid;place-items:center;border:1px solid #333;border-radius:50%;color:var(--azul);font-size:25px;font-weight:300}
.portfolio-placeholder-natural span{color:#777;font-size:10px;line-height:1.6;font-weight:800;letter-spacing:2px}
@media(max-width:1100px){.portfolio-grid.portfolio-grid-natural{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.portfolio-grid.portfolio-grid-natural{grid-template-columns:1fr;gap:34px}}

/* FORMATOS DEFINITIVOS */
.portfolio-formato{margin-top:58px}
.portfolio-formato:first-of-type{margin-top:0}
.portfolio-formato-titulo{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--linha)}
.portfolio-formato-titulo strong{font-size:15px;letter-spacing:1px}
.portfolio-formato-titulo span{color:var(--cinza);font-size:13px}
.portfolio-formato .portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.portfolio-formato .portfolio-card>img{width:100%;height:auto;display:block;object-fit:cover;border:1px solid #202020;border-radius:14px;background:#0d0d0d}
.formato-stories .portfolio-card>img,.formato-stories .portfolio-placeholder-natural{aspect-ratio:9/16}
.formato-feed .portfolio-card>img,.formato-feed .portfolio-placeholder-natural{aspect-ratio:4/5}
.formato-quadrado .portfolio-card>img,.formato-quadrado .portfolio-placeholder-natural{aspect-ratio:1/1}
@media(max-width:1100px){.portfolio-formato .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.portfolio-formato .portfolio-grid{grid-template-columns:1fr;gap:32px}}


/* ==================================================
   E-COMMERCE — DESKTOP + MOBILE
   ================================================== */

.ecommerce-lista {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.ecommerce-projeto {
    padding-bottom: 55px;
    border-bottom: 1px solid var(--linha);
}

.ecommerce-projeto:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ecommerce-midias {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(150px, 1fr);
    gap: 22px;
    align-items: stretch;
}

.ecommerce-desktop,
.ecommerce-mobile {
    min-width: 0;
}

.ecommerce-label {
    display: block;
    margin-bottom: 10px;
    color: var(--cinza);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ecommerce-desktop img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #202020;
    border-radius: 14px;
    background: #0d0d0d;
}

.mobile-placeholder {
    height: calc(100% - 19px);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    border: 1px dashed #343434;
    border-radius: 14px;
    background: linear-gradient(145deg, #0d0d0d, #080808);
    text-align: center;
}

.mobile-placeholder > span {
    color: var(--azul);
    font-size: 11px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.mobile-placeholder small {
    max-width: 150px;
    color: #555;
    font-size: 8px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ecommerce-info {
    padding-top: 16px;
}

@media (max-width: 900px) {
    .ecommerce-midias {
        grid-template-columns: minmax(0, 3fr) minmax(130px, 1fr);
        gap: 16px;
    }

    .ecommerce-lista {
        gap: 60px;
    }
}

@media (max-width: 600px) {
    .ecommerce-midias {
        grid-template-columns: 1fr;
    }

    .ecommerce-mobile {
        width: 55%;
    }

    .mobile-placeholder {
        min-height: 360px;
        aspect-ratio: 9 / 16;
        height: auto;
    }

    .ecommerce-projeto {
        padding-bottom: 42px;
    }
}


/* ==================================================
   VÍDEO & MOTION — RESTAURADO
   ================================================== */

.videos-secao {
    padding: 110px 0;
    border-top: 1px solid var(--linha);
}

.video-formato {
    margin-top: 58px;
}

.video-formato + .video-formato {
    margin-top: 85px;
}

.videos-grid {
    display: grid;
    gap: 28px 18px;
}

.reels-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.youtube-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.video-card {
    min-width: 0;
}

.video-placeholder {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px dashed #343434;
    border-radius: 14px;
    background: linear-gradient(145deg, #0e0e0e, #080808);
}

.video-reel {
    aspect-ratio: 9 / 16;
}

.video-youtube {
    aspect-ratio: 16 / 9;
}

.video-play {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding-left: 3px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    background: rgba(255,255,255,.05);
}

.video-placeholder-text {
    color: var(--azul);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.video-placeholder small {
    color: #555;
    font-size: 8px;
    letter-spacing: 1px;
}

.video-info {
    padding-top: 14px;
}

.video-info > span {
    display: block;
    margin-bottom: 7px;
    color: var(--azul);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.video-info h3 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 15px;
}

.video-info p {
    margin: 0;
    color: var(--cinza);
    font-size: 10px;
}

/* Os 8 reels reais */
.video-card-clean .portfolio-video {
    width: 100%;
    display: block;
    object-fit: cover;
    border: 1px solid #202020;
    border-radius: 14px;
    background: #000;
}

.reels-grid .video-card-clean .portfolio-video {
    aspect-ratio: 9 / 16;
}

/* Único vídeo horizontal do YouTube */
.youtube-grid-unico {
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
}

.youtube-grid-unico .portfolio-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    border: 1px solid #202020;
    border-radius: 14px;
    background: #000;
}

@media (max-width: 1100px) {
    .reels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .videos-secao {
        padding: 80px 0;
    }

    .reels-grid,
    .youtube-grid,
    .youtube-grid-unico {
        grid-template-columns: 1fr;
    }

    .video-formato + .video-formato {
        margin-top: 65px;
    }
}


/* ==========================================================
   CORREÇÃO DEFINITIVA DA GALERIA DE VÍDEOS
   ========================================================== */

/* O grid fica preso em 4 colunas no desktop */
.videos-secao .reels-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    align-items: start !important;
}

/* Impede qualquer vídeo de usar a largura/tamanho nativo do arquivo */
.videos-secao .reels-grid .video-card,
.videos-secao .reels-grid .video-card-real,
.videos-secao .reels-grid .video-card-clean {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Vale para TODOS os 8 vídeos, inclusive os 4 primeiros */
.videos-secao .reels-grid video.portfolio-video,
.videos-secao .reels-grid video.video-reel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    background: #000 !important;
}

/* YouTube: um único vídeo horizontal controlado */
.videos-secao .youtube-grid-unico {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 900px !important;
}

.videos-secao .youtube-grid-unico .video-card {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.videos-secao .youtube-grid-unico video.portfolio-video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
}

/* Só muda a quantidade de colunas em telas realmente pequenas.
   Assim o zoom normal do desktop não desmonta a galeria. */
@media (max-width: 700px) {
    .videos-secao .reels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 430px) {
    .videos-secao .reels-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================
   VÍDEO & MOTION — ALINHAMENTO COM O RESTANTE DO SITE
   ========================================================== */

/* A seção passa a respeitar a mesma largura visual das demais */
.videos-secao {
    width: min(1180px, calc(100% - 80px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Reduz a largura total da galeria de Reels para eles não ficarem gigantes */
.videos-secao .reels-grid {
    width: 100% !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 22px !important;
}

/* Mantém o cabeçalho e títulos alinhados à margem principal da seção */
.videos-secao .trabalhos-cabecalho,
.videos-secao .video-formato,
.videos-secao .portfolio-formato-titulo {
    box-sizing: border-box !important;
}

/* O vídeo horizontal também fica um pouco mais contido */
.videos-secao .youtube-grid-unico {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 900px) {
    .videos-secao {
        width: min(100% - 40px, 1180px) !important;
    }

    .videos-secao .reels-grid {
        max-width: 760px !important;
    }
}

@media (max-width: 600px) {
    .videos-secao {
        width: calc(100% - 32px) !important;
    }
}


/* ==========================================================
   E-COMMERCE — ADAPTAÇÕES QUADRADAS 1000x1000
   ========================================================== */

.ecommerce-midias {
    align-items: start !important;
}

/* Coluna lateral agora é quadrada, não vertical/mobile */
.ecommerce-mobile {
    min-width: 0 !important;
}

.ecommerce-mobile > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* Mantém desktop como peça principal e o quadrado menor ao lado */
@media (min-width: 901px) {
    .ecommerce-midias {
        display: grid !important;
        grid-template-columns: minmax(0, 2.15fr) minmax(220px, .85fr) !important;
        gap: 22px !important;
    }
}

/* Em telas menores, empilha sem deformar nenhuma arte */
@media (max-width: 900px) {
    .ecommerce-midias {
        grid-template-columns: 1fr !important;
    }

    .ecommerce-mobile {
        width: min(100%, 520px) !important;
    }
}


/* ==========================================================
   03 — E-COMMERCE & BANNERS — VERSÃO MAIS COMPACTA
   ========================================================== */

/* Menos espaço vertical da seção */
.ecommerce-secao {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
}

/* Aproxima os projetos entre si */
.ecommerce-projeto {
    margin-top: 42px !important;
    margin-bottom: 0 !important;
}

.ecommerce-projeto + .ecommerce-projeto {
    margin-top: 52px !important;
}

/* Conjunto desktop + 1:1 um pouco menor e centralizado */
.ecommerce-midias {
    width: 92% !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 16px !important;
}

/* Reduz espaço entre imagem e identificação */
.ecommerce-info {
    padding-top: 12px !important;
}

/* Mantém proporções sem esticar as artes */
.ecommerce-desktop img,
.ecommerce-mobile img {
    max-width: 100% !important;
    height: auto !important;
}

/* Tablet/mobile: não comprime demais */
@media (max-width: 900px) {
    .ecommerce-secao {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .ecommerce-midias {
        width: 100% !important;
        max-width: none !important;
        gap: 14px !important;
    }

    .ecommerce-projeto + .ecommerce-projeto {
        margin-top: 44px !important;
    }
}


/* ==========================================================
   03 — E-COMMERCE — REDUÇÃO FORTE DOS ESPAÇOS VAZIOS
   ========================================================== */

/* Aproxima a primeira peça do cabeçalho da seção */
.ecommerce-lista {
    margin-top: 28px !important;
}

/* Cada projeto passa a ocupar somente o necessário */
.ecommerce-projeto {
    padding-top: 0 !important;
    padding-bottom: 26px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Distância curta e consistente entre projetos */
.ecommerce-projeto + .ecommerce-projeto {
    margin-top: 28px !important;
    padding-top: 28px !important;
}

/* Tira margens verticais excessivas do bloco das imagens */
.ecommerce-midias {
    margin-top: 18px !important;
    margin-bottom: 14px !important;
}

/* Informações ficam próximas das imagens */
.ecommerce-info {
    margin-top: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 0 !important;
}

/* Linha divisória sem criar uma faixa enorme */
.ecommerce-projeto {
    border-bottom: 1px solid var(--linha) !important;
}

.ecommerce-projeto:last-child {
    border-bottom: 0 !important;
}

/* Compacta também o espaço geral da seção 03 */
.ecommerce-secao {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

@media (max-width: 900px) {
    .ecommerce-lista {
        margin-top: 24px !important;
    }

    .ecommerce-projeto {
        padding-bottom: 24px !important;
    }

    .ecommerce-projeto + .ecommerce-projeto {
        margin-top: 24px !important;
        padding-top: 24px !important;
    }

    .ecommerce-midias {
        margin-top: 14px !important;
        margin-bottom: 10px !important;
    }
}


/* ==========================================================
   HOME — FOCO EM PORTFÓLIO VISUAL
   Ordem visível:
   Hero → Artes → E-commerce → Vídeo
   As demais seções continuam no HTML, apenas ocultas.
   ========================================================== */

.sobre,
.sobre-secao,
#sobre,
.competencias,
.competencias-secao,
#competencias,
.cases,
.cases-secao,
#cases {
    display: none !important;
}

/* Seções visuais permanecem visíveis */
.social-secao,
.ecommerce-secao,
.videos-secao {
    display: block !important;
}