:root {
    --branco: #f8f8f8;
    --preto: #000000;
    --laranja: #ff5b04;
    --rosa-claro: #e900a2;
    --rosa-escuro: #db007c;
    --cinza-escuro: #808080;
    --cinza-claro: #eae5df;
}

body {
    background-color: var(--branco);
}

/* Header — nesta página o botão do topo fica com o fundo transparente,
   só com a borda gradiente. A técnica do geral.css (2 camadas de background)
   depende de a 1ª camada ser opaca para cobrir o interior, então aqui o
   gradiente vai no border-image, que pinta apenas a borda. */
.site-header .contato {
    background-image: none;
    border: 1px solid transparent;
    border-image: linear-gradient(to left, var(--rosa-claro), var(--laranja)) 1;
}

/* Ao rolar, o header volta ao botão branco sólido do geral.css */
.site-header.scrolled .contato {
    border-image: none;
}

#pagina-case-individual {
    background-color: var(--branco);
    overflow: hidden;
}

/* A cascata de entrada usa --reveal-delay (definida pelo JS) apenas nas
   transições de entrada, para o hover responder na hora em todos os cards. */
#pagina-case-individual .reveal {
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

/* ============================ BANNER ============================ */

#case-banner {
    background-color: var(--branco);
    background-image: url("../../images/cases/banner-fundo-individual.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#case-banner .banner-conteudo {
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
    padding: 231px 0 52px;
}

/* Breadcrumb usa o partial global .breadcrumb (estilizado no geral.css) */

#case-banner .banner-titulo {
    font-weight: 400;
    font-size: 50px;
    line-height: 1.24;
    margin-top: 2px;
}

/* Gradiente num span interno: o h1 é o elemento .reveal e o will-change da
   animação de entrada quebra o background-clip:text no mesmo elemento. */
#case-banner .banner-titulo span {
    background-image: linear-gradient(to right, var(--rosa-claro), var(--laranja));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ===================== INTRODUÇÃO (texto + logo) ===================== */

#case-intro .intro-conteudo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
    padding: 100px 0 110px;
}

#case-intro .intro-texto {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 23px;
}

#case-intro .intro-titulo {
    font-weight: 400;
    font-size: 45px;
    line-height: 1.24;
    color: var(--preto);
    max-width: 791px;
}

#case-intro .intro-descricao {
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: var(--cinza-escuro);
    max-width: 678px;
    margin-top: 25px;
}

/* A descrição vem de um WYSIWYG, que pode devolver mais de um parágrafo */

#case-intro .intro-descricao>p+p {
    margin-top: 18px;
}

/* Cartão branco com a logo do cliente */

#case-intro .intro-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 496px;
    height: 228px;
    background-color: #fff;
    border: 1px solid var(--cinza-escuro);
    border-radius: 5px;
}

/* Tamanho natural da logo enviada, limitado pelo cartão: cada cliente manda
   uma proporção diferente, então nada de largura/altura fixas aqui. */

#case-intro .intro-logo img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 70%;
    object-fit: contain;
}

/* ===================== QUEM É / NÚMERO DE DESTAQUE ===================== */

#case-quem {
    background-color: #fff;
}

#case-quem .quem-conteudo {
    position: relative;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    width: 1600px;
    max-width: 90%;
    min-height: 259px;
    margin: 0 auto;
    padding: 65px 0 49px;
}

#case-quem .quem-texto {
    flex: 0 1 758px;
    min-width: 0;
    padding-left: 55px;
}

#case-quem .quem-eyebrow {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--rosa-claro);
    max-width: 448px;
}

#case-quem .quem-descricao {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: var(--cinza-escuro);
    max-width: 703px;
    margin-top: 11px;
}

/* A descrição vem de um WYSIWYG, que pode devolver mais de um parágrafo.
   Mesmo espaço usado no .desafio-texto logo abaixo. */

#case-quem .quem-descricao>p+p {
    margin-top: 19px;
}

#case-quem .quem-divisor {
    flex: 0 0 3px;
    width: 3px;
    height: 173px;
    margin: -22px 0 0 119px;
    background-color: var(--cinza-escuro);
    opacity: 0.12;
}

#case-quem .quem-numero {
    flex: 1 1 auto;
    min-width: 0;
    margin: 6px 0 0 150px;
}

/* O "7" é um pouco maior que a palavra, os dois no mesmo gradiente */
#case-quem .numero-valor {
    font-weight: 500;
    font-size: 55px;
    line-height: normal;
    white-space: nowrap;
    background-image: linear-gradient(to right, var(--rosa-claro), var(--laranja));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#case-quem .numero-digito {
    font-size: 60px;
}

#case-quem .numero-legenda {
    font-weight: 400;
    font-size: 38px;
    line-height: normal;
    color: var(--preto);
}

#case-quem .quem-scroll {
    position: absolute;
    right: 0;
    top: 112px;
    width: 11px;
    height: 35px;
}

/* ============================ O DESAFIO ============================ */

#case-desafio {
    padding: 120px 0 0;
}

#case-desafio .desafio-conteudo {
    position: relative;
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
}

#case-desafio .desafio-cabecalho {
    text-align: center;
}

#case-desafio .desafio-eyebrow {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--rosa-claro);
}

#case-desafio .desafio-titulo {
    font-weight: 400;
    font-size: 48px;
    line-height: 1.24;
    color: var(--preto);
    margin-top: 7px;
}

#case-desafio .desafio-texto {
    max-width: 1130px;
    margin: 25px auto 0;
}

#case-desafio .desafio-texto p {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: var(--cinza-escuro);
}

/* Espaço da linha em branco que separa os dois blocos de texto no layout */
#case-desafio .desafio-texto p+p {
    margin-top: 19px;
}

/* Cards — avançam 45px sobre a faixa preta da seção seguinte */

#case-desafio .desafio-cards {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    margin: 54px 0 -45px;
}

#case-desafio .desafio-card {
    box-sizing: border-box;
    flex: 0 0 361px;
    min-width: 0;
    min-height: 307px;
    padding: 37px 40px 45px;
    background-color: #fff;
    border: 1px solid var(--cinza-claro);
    border-top: 3px solid var(--rosa-escuro);
    border-radius: 5px;
}

#case-desafio .desafio-card-2 {
    border-top-color: var(--rosa-claro);
}

#case-desafio .desafio-card-3 {
    border-top-color: var(--laranja);
}

/* Altura fixa da área do ícone para os três cards alinharem o número */
#case-desafio .card-icone {
    display: flex;
    align-items: flex-start;
    height: 120px;
}

/* O ícone é SVG inline (textarea no painel), então o tamanho vem do próprio
   arquivo. O max-height impede que um SVG sem width/height próprios vaze
   da caixa de 120px. */

#case-desafio .card-icone svg {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#case-desafio .card-numero {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.24;
    color: var(--cinza-escuro);
    transition: color 0.3s ease;
}

#case-desafio .card-titulo {
    font-weight: 400;
    font-size: 26px;
    line-height: 1.24;
    color: var(--preto);
}

#case-desafio .card-texto {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: var(--cinza-escuro);
    margin-top: 15px;
}

/* Hover — realce mostrado no primeiro card do layout: o número assume a cor
   da borda do topo */

#case-desafio .desafio-card:hover .card-numero {
    color: var(--rosa-escuro);
}

#case-desafio .desafio-card-2:hover .card-numero {
    color: var(--rosa-claro);
}

#case-desafio .desafio-card-3:hover .card-numero {
    color: var(--laranja);
}

#case-desafio .desafio-scroll {
    position: absolute;
    right: 0;
    top: 377px;
    width: 11px;
    height: 35px;
}

/* ===================== DA ESTRATÉGIA À PRÁTICA (vídeo) ===================== */

#case-video {
    position: relative;
    padding: 200px 0 168px;
    background-color: var(--preto);
}

/* Símbolo Prosperi decorativo — a caixa recorta o desenho, por isso as duas
   partes usam o mesmo SVG em tamanho natural com deslocamentos diferentes */

#case-video .video-simbolo,
#case-video .video-simbolo-tira {
    position: absolute;
    right: -169px;
    width: 808px;
    overflow: hidden;
    pointer-events: none;
}

#case-video .video-simbolo {
    top: 350px;
    height: 486px;
}

#case-video .video-simbolo-tira {
    z-index: 2;
    bottom: -24px;
    height: 24px;
}

#case-video .video-simbolo img,
#case-video .video-simbolo-tira img {
    position: absolute;
    left: 0;
    width: 808px;
    height: 510px;
    max-width: none;
}

#case-video .video-simbolo img {
    top: 0;
}

#case-video .video-simbolo-tira img {
    top: -485px;
}

#case-video .video-conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
}

#case-video .video-texto {
    flex: 0 1 576px;
    min-width: 0;
    margin-top: 114px;
}

#case-video .video-eyebrow {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--rosa-claro);
}

#case-video .video-titulo {
    font-weight: 400;
    font-size: 42px;
    line-height: normal;
    color: var(--branco);
    margin-top: 8px;
}

/* Capa do vídeo — abre o modal global pelo data-video */

#case-video .video-capa {
    position: relative;
    flex: 0 0 856px;
    height: 467px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--preto);
    overflow: hidden;
    cursor: pointer;
}

/* A arte vem da miniatura 4:3 do vídeo; o recorte do layout tira as tarjas */
#case-video .video-capa .capa-imagem {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

#case-video .video-capa .capa-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 122px;
    height: 122px;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

#case-video .video-capa:hover .capa-play {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Variante depoimento — mesmo espaço do #case-video, cabeçalho centralizado
   e card único (sem swiper), no padrão visual do #depoimentos da home. */

#case-video .depoimento-conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
}

#case-video .depoimento-cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 700px;
    text-align: center;
}

#case-video .depoimento-eyebrow {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--rosa-claro);
}

#case-video .depoimento-titulo {
    font-weight: 400;
    font-size: 42px;
    line-height: normal;
    color: var(--preto);
    margin-top: 8px;
    max-width: 567px;
}

/* Variante depoimento: sem símbolo decorativo, fundo branco em vez de preto */
#case-video.case-video--depoimento {
    background-color: #fff;
}

#case-video .depoimento-card {
    display: flex;
    width: 100%;
    max-width: 856px;
    background-color: #fff;
    border: 1px solid var(--cinza-claro);
    border-radius: 5px;
    overflow: hidden;
}

#case-video .depoimento-card .depoimento-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    padding: 40px;
}

#case-video .depoimento-card .depoimento-logo {
    max-height: 86px;
    max-width: 60%;
    object-fit: contain;
}

#case-video .depoimento-card .depoimento-frase {
    font-style: italic;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.24;
    color: var(--preto);
}

#case-video .depoimento-card .depoimento-descricao {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cinza-escuro);
}

#case-video .depoimento-card .depoimento-autor {
    display: flex;
    align-items: center;
    gap: 12px;
}

#case-video .depoimento-card .depoimento-avatar {
    width: 57px;
    height: 57px;
    border-radius: 50%;
    object-fit: cover;
}

#case-video .depoimento-card .depoimento-autor-info {
    display: flex;
    flex-direction: column;
}

#case-video .depoimento-card .depoimento-nome {
    font-weight: 400;
    font-size: 16px;
    color: var(--preto);
}

#case-video .depoimento-card .depoimento-cargo {
    font-weight: 400;
    font-size: 14px;
    color: var(--cinza-escuro);
}

/* ===================== A SOLUÇÃO (mockup + texto) ===================== */

#case-solucao {
    padding: 60px 0 40px;
}

#case-solucao .solucao-conteudo {
    position: relative;
    display: flex;
    align-items: center;
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
}

#case-solucao .solucao-scroll {
    position: absolute;
    left: 0;
    top: 50%;
    width: 11px;
    height: 35px;
    transform: translateY(-50%);
}

/* O mockup sai na proporção do próprio arquivo: a largura vem do flex (até
   638px, encurtando junto com a tela) e a altura acompanha a imagem. O
   overflow mantém os cantos de 14px do layout. */

#case-solucao .solucao-mockup {
    flex: 0 1 638px;
    margin-left: 55px;
    border-radius: 14px;
    overflow: hidden;
}

#case-solucao .solucao-mockup img {
    display: block;
    width: 100%;
    height: auto;
}

#case-solucao .solucao-texto {
    flex: 0 1 744px;
    min-width: 0;
    margin-left: 112px;
}

#case-solucao .solucao-eyebrow {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--rosa-claro);
    max-width: 448px;
}

#case-solucao .solucao-titulo {
    font-weight: 400;
    font-size: 42px;
    line-height: normal;
    color: var(--preto);
    max-width: 622px;
    margin-top: 9px;
}

#case-solucao .solucao-descricao {
    margin-top: 27px;
}

#case-solucao .solucao-descricao p {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: var(--cinza-escuro);
}

#case-solucao .solucao-descricao p b{
    font-weight: 700;
    color: #000
}

/* Espaço da linha em branco que separa os dois blocos de texto no layout */
#case-solucao .solucao-descricao p+p {
    margin-top: 19px;
}

/* Link em gradiente: o texto vai num span porque o will-change da animação
   de entrada quebra o background-clip:text no próprio elemento .reveal */

#case-solucao .solucao-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
}

#case-solucao .solucao-link span {
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    text-decoration: underline;
    text-decoration-color: var(--rosa-escuro);
    text-underline-offset: 2px;
    background-image: linear-gradient(to left, var(--laranja) 18.75%, var(--rosa-claro) 57.7%, var(--rosa-escuro));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#case-solucao .solucao-link img {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    transition: transform 0.3s ease;
}

#case-solucao .solucao-link:hover img {
    transform: translateX(4px);
}

/* ============================================================ */
/* RESPONSIVO — todos os breakpoints reunidos, do maior p/ o menor */
/* ============================================================ */

@media (max-width: 1700px) {
    #case-video .video-capa {
        flex: 0 1 856px;
    }
}

@media (max-width: 1400px) {
    #case-intro .intro-conteudo {
        padding: 80px 0 90px;
    }

    #case-intro .intro-titulo {
        font-size: 40px;
    }

    #case-intro .intro-logo {
        flex-basis: 420px;
        height: 200px;
    }

    #case-quem .quem-texto {
        padding-left: 0;
    }

    #case-quem .quem-divisor {
        margin-left: 60px;
    }

    #case-quem .quem-numero {
        margin-left: 60px;
    }

    #case-desafio .desafio-card {
        flex: 1 1 0;
    }

    #case-video {
        padding: 140px 0 120px;
    }

    #case-video .video-texto {
        margin-top: 0;
    }

    #case-video .video-titulo {
        font-size: 36px;
    }

    #case-video .video-simbolo {
        top: auto;
        bottom: 0;
    }

    #case-video .depoimento-titulo {
        font-size: 36px;
    }

    #case-solucao .solucao-mockup {
        margin-left: 55px;
        flex: 0 1 520px;
    }

    #case-solucao .solucao-texto {
        margin-left: 60px;
    }

    #case-solucao .solucao-titulo {
        font-size: 36px;
    }
}

@media (max-width: 1100px) {
    #case-banner .banner-conteudo {
        padding: 200px 0 46px;
    }

    #case-intro .intro-titulo {
        font-size: 34px;
    }

    #case-intro .intro-logo {
        flex-basis: 340px;
        height: 170px;
    }

    #case-quem .quem-conteudo {
        padding: 55px 0 45px;
    }

    #case-quem .numero-valor {
        font-size: 44px;
    }

    #case-quem .numero-digito {
        font-size: 48px;
    }

    #case-quem .numero-legenda {
        font-size: 30px;
    }

    #case-desafio {
        padding-top: 90px;
    }

    #case-desafio .desafio-titulo {
        font-size: 40px;
    }

    #case-desafio .desafio-card {
        padding: 34px 28px 36px;
    }

    #case-desafio .card-titulo {
        font-size: 22px;
    }

    #case-video .video-titulo {
        font-size: 30px;
    }

    #case-video .video-capa {
        height: auto;
        aspect-ratio: 856 / 467;
    }

    #case-video .depoimento-titulo {
        font-size: 30px;
    }

    #case-solucao .solucao-mockup {
        flex: 0 1 45%;
        margin-left: 40px;
    }

    #case-solucao .solucao-texto {
        margin-left: 40px;
    }

    #case-solucao .solucao-titulo {
        font-size: 32px;
    }
}

@media (max-width: 991px) {
    #case-banner .banner-conteudo {
        padding: 170px 0 40px;
    }

    #case-banner .banner-titulo {
        font-size: 40px;
    }

    /* Empilhado: texto em cima, cartão da logo embaixo */
    #case-intro .intro-conteudo {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
        padding: 60px 0 70px;
    }

    #case-intro .intro-texto {
        padding-top: 0;
    }

    #case-intro .intro-titulo,
    #case-intro .intro-descricao {
        max-width: 100%;
    }

    #case-intro .intro-logo {
        flex: 0 0 auto;
        width: 100%;
    }

    #case-quem .quem-conteudo {
        flex-direction: column;
        min-height: 0;
    }

    #case-quem .quem-texto {
        flex: 0 0 auto;
    }

    #case-quem .quem-eyebrow,
    #case-quem .quem-descricao {
        max-width: 100%;
    }

    /* Divisor deitado entre os dois blocos */
    #case-quem .quem-divisor {
        flex: 0 0 3px;
        width: 100%;
        height: 3px;
        margin: 36px 0;
    }

    #case-quem .quem-numero {
        flex: 0 0 auto;
        margin: 0;
    }

    #case-quem .quem-scroll {
        display: none;
    }

    #case-desafio .desafio-cards {
        flex-wrap: wrap;
    }

    #case-desafio .desafio-card {
        flex: 1 1 300px;
        min-height: 0;
    }

    #case-desafio .desafio-scroll {
        display: none;
    }

    #case-video {
    padding: 120px 0 90px;
    }

    #case-video .video-conteudo {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
    }

    #case-video .video-texto {
        flex: 0 0 auto;
    }

    #case-video .video-capa {
        flex: 0 0 auto;
        width: 100%;
    }

    #case-video .video-simbolo,
    #case-video .video-simbolo-tira {
        display: none;
    }

    #case-video .depoimento-conteudo {
        gap: 36px;
    }

    #case-video .depoimento-card .depoimento-texto {
        padding: 32px;
    }

    /* Empilhado: mockup em cima, texto embaixo */
    #case-solucao {
        padding: 50px 0 20px;
    }

    #case-solucao .solucao-conteudo {
        flex-direction: column;
        align-items: stretch;
    }

    #case-solucao .solucao-mockup {
        flex: 0 0 auto;
        width: 100%;
        margin-left: 0;
    }

    #case-solucao .solucao-texto {
        flex: 0 0 auto;
        margin: 36px 0 0;
    }

    #case-solucao .solucao-eyebrow,
    #case-solucao .solucao-titulo {
        max-width: 100%;
    }

    #case-solucao .solucao-scroll {
        display: none;
    }
}

@media (max-width: 620px) {
    #case-banner .banner-conteudo {
        padding: 140px 0 34px;
    }

    #case-banner .banner-titulo {
        font-size: 32px;
    }

    #case-intro .intro-titulo {
        font-size: 28px;
    }

    #case-intro .intro-descricao {
        font-size: 16px;
    }

    #case-intro .intro-logo {
        height: 140px;
    }

    #case-quem .numero-valor {
        font-size: 38px;
    }

    #case-quem .numero-digito {
        font-size: 42px;
    }

    #case-quem .numero-legenda {
        font-size: 26px;
    }

    #case-desafio {
        padding-top: 60px;
    }

    #case-desafio .desafio-titulo {
        font-size: 32px;
    }

    #case-desafio .desafio-cards {
        gap: 16px;
        margin-top: 40px;
    }

    #case-desafio .desafio-card {
        flex: 1 1 100%;
        padding: 28px 24px 32px;
    }

    #case-desafio .card-icone {
        height: 96px;
    }

    #case-video .video-titulo {
        font-size: 26px;
    }

    #case-video .video-capa .capa-play {
        width: 72px;
        height: 72px;
    }

    #case-video .depoimento-titulo {
        font-size: 26px;
    }

    #case-video .depoimento-card .depoimento-texto {
        padding: 24px;
    }

    #case-solucao .solucao-titulo {
        font-size: 26px;
    }

    #case-solucao .solucao-descricao {
        margin-top: 20px;
    }
}