/* ======================== SISTEMA DE GRID (todas as cases) ======================== */
/* Referência Figma: frame 1440px, margem 115px, gutter 24px, 12 colunas.
   Quando um bloco precisar ocupar N colunas, usar .grid-span-N. */
:root {
    --grid-max: 1440px;
    --grid-margin: 115px;
    --grid-gutter: 24px;
    --grid-col: calc((var(--grid-max) - (var(--grid-margin) * 2) - (var(--grid-gutter) * 11)) / 12);
}

.grid-span-1  { width: calc(var(--grid-col) * 1); }
.grid-span-2  { width: calc(var(--grid-col) * 2  + var(--grid-gutter) * 1); }
.grid-span-3  { width: calc(var(--grid-col) * 3  + var(--grid-gutter) * 2); }
.grid-span-4  { width: calc(var(--grid-col) * 4  + var(--grid-gutter) * 3); }
.grid-span-5  { width: calc(var(--grid-col) * 5  + var(--grid-gutter) * 4); }
.grid-span-6  { width: calc(var(--grid-col) * 6  + var(--grid-gutter) * 5); }
.grid-span-7  { width: calc(var(--grid-col) * 7  + var(--grid-gutter) * 6); }
.grid-span-8  { width: calc(var(--grid-col) * 8  + var(--grid-gutter) * 7); }
.grid-span-9  { width: calc(var(--grid-col) * 9  + var(--grid-gutter) * 8); }
.grid-span-10 { width: calc(var(--grid-col) * 10 + var(--grid-gutter) * 9); }
.grid-span-11 { width: calc(var(--grid-col) * 11 + var(--grid-gutter) * 10); }
.grid-span-12 { width: calc(var(--grid-col) * 12 + var(--grid-gutter) * 11); }

/* Ver style.css: mesma trava de transição aplicada aos elementos desta página. */
html.preload .ca-slide,
html.preload .capitulos-overlay {
    transition: none !important;
}

/* ======================== SISTEMA DE SLIDES (case C&A e futuras cases) ======================== */
/* Cada ".ca-slide" é uma tela cheia; ao rolar o mouse, a próxima cobre a
   anterior (como camadas empilhadas). Rolar para cima desfaz a camada atual. */
.ca-slides {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 30;
}

body.slides-pinned {
    overflow: hidden;
}

html:has(body.slides-pinned) {
    overflow: hidden;
}

body.slides-pinned .navbar.case-page {
    display: none;
}

.ca-slide {
    /* Reserva o espaço ocupado pela barra de progresso (48px de bottom + ~27px
       de altura do bloco texto/track) mais 24px de margem de segurança acima
       do texto de porcentagem — nenhuma imagem ou texto pode entrar aqui. */
    --progress-reserve: 100px;
    --topbar-h: 60px;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.ca-slide.is-current {
    transform: translateY(0);
}

.ca-slide-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--grid-margin) 0;
}

.ca-slide-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Degitan', sans-serif;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.ca-slide-breadcrumb-back {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.ca-slide-breadcrumb img {
    width: 14px;
    height: 14px;
    display: block;
}

.ca-slide-hero .ca-slide-breadcrumb img {
    position: relative;
    top: -2px;
}

.ca-slide-desafio .ca-slide-breadcrumb img {
    position: relative;
    top: -2px;
}

.ca-slide-nav-actions {
    display: flex;
    align-items: center;
    gap: 26px;
}

.ca-slide-capitulos {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Degitan', sans-serif;
    font-size: 14px;
    padding: 0;
    color: inherit;
}

.ca-slide-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
}

.ca-slide-menu-btn img {
    width: 24px;
    height: 24px;
    display: block;
}

.ca-slide-main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 48px;
    padding: 0 var(--grid-margin) var(--progress-reserve);
    min-height: 0;
}

/* Distância do topo até o conteúdo, medida a partir da base da topbar
   (Figma: hero = 100-60, desafio = 112-60). */
.ca-slide-hero .ca-slide-main         { padding-top: 40px; }
.ca-slide-desafio .ca-slide-main      { padding-top: 52px; }
.ca-slide-consistencia .ca-slide-main { padding-top: 52px; }
.ca-slide-logica .ca-slide-main       { padding-top: 52px; }
.ca-slide-eficiencia .ca-slide-main   { padding-top: 52px; }
.ca-slide-arquitetura .ca-slide-main  { padding-top: 52px; }
.ca-slide-trust .ca-slide-main        { padding-top: 52px; }
.ca-slide-impacto .ca-slide-main      { padding-top: 52px; }
.ca-slide-galeria1 .ca-slide-main,
.ca-slide-galeria2 .ca-slide-main,
.ca-slide-galeria3 .ca-slide-main,
.ca-slide-galeria4 .ca-slide-main     { padding-top: 52px; }
.ca-slide-aprendi .ca-slide-main      { padding-top: 52px; }

/* Evita viúvas (palavra sozinha na última linha) em qualquer título ou
   parágrafo dos slides do case. */
.ca-slide-main h1,
.ca-slide-main h2,
.ca-slide-main p {
    text-wrap: pretty;
}

/* Tema escuro — slide Hero */
.ca-slide-hero {
    background-color: #2C2C5D;
}

.ca-slide-hero .ca-slide-breadcrumb,
.ca-slide-hero .ca-slide-capitulos {
    color: #FCFBFB;
}

.ca-slide-hero .ca-slide-breadcrumb .current {
    color: #58EDF5;
}

.ca-hero-col {
    width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.ca-hero-top {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ca-hero-logo {
    width: 103px;
    height: 103px;
    display: block;
}

.ca-hero-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #ffffff;
}

.ca-hero-text h1 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
}

.ca-hero-text p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
}

.ca-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 204px;
    align-content: flex-start;
}

.ca-hero-badges span {
    font-family: 'Degitan', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #A5A5F6;
    border: none;
    box-shadow: inset 0 0 0 1px #46468F;
    border-radius: 100px;
    padding: 6px 14px;
    line-height: 1;
}

.ca-hero-shot {
    width: auto;
    /* ~8 colunas do grid (mesma fórmula de .grid-span-8) */
    max-width: calc(var(--grid-col) * 8 + var(--grid-gutter) * 7);
    min-width: 0;
    height: auto;
    /* topbar + padding-top do main + margin-top da imagem + reserva da barra;
       o que sobra é o espaço vertical disponível antes da barra de progresso.
       width/height ambos "auto" (com os respectivos max-*) fazem o navegador
       encolher os dois juntos mantendo a proporção — sem letterbox, sempre
       encostada na borda direita real. */
    max-height: calc(100vh - var(--topbar-h) - 40px - 28px - var(--progress-reserve));
    display: block;
    flex-shrink: 1;
    align-self: flex-start;
    margin-top: 28px;
}

/* Tema claro — slide Desafio */
.ca-slide-desafio {
    background-color: #ffffff;
}

.ca-slide-desafio .ca-slide-breadcrumb,
.ca-slide-desafio .ca-slide-capitulos {
    color: #404040;
}

.ca-slide-desafio .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-desafio-col {
    position: relative;
    z-index: 1;
    width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-desafio-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #404040;
    margin-bottom: 16px;
}

.ca-desafio-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #656565;
}

.ca-desafio-col p strong {
    font-weight: 700;
}

p.ca-slide-fig-caption {
    margin-top: auto;
    padding-top: 40px;
    font-family: 'Degitan', sans-serif;
    font-size: 16px;
    font-style: italic;
    color: #9F9F9F;
    max-width: 157px;
    line-height: 1.15;
    text-wrap: pretty;
}

.ca-desafio-shot {
    /* ==== CONTROLE DE TAMANHO ====
       Mude só este número para aumentar/diminuir a imagem.
       100 = tamanho atual, 110 = 10% maior, 90 = 10% menor, etc. */
    --shot-scale: 70;

    position: absolute;
    z-index: 0;
    top: 40px;
    right: var(--grid-margin);
    width: calc(965px * var(--shot-scale) / 100);
    height: auto;
    display: block;
}

/* Tema escuro — slide Consistência (Design System) */
.ca-slide-consistencia {
    background-color: #252525;
}

.ca-slide-consistencia .ca-slide-breadcrumb,
.ca-slide-consistencia .ca-slide-capitulos {
    color: #FCFBFB;
}

.ca-slide-consistencia .ca-slide-breadcrumb img {
    position: relative;
    top: -2px;
}

.ca-slide-consistencia .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-consistencia-col {
    position: relative;
    z-index: 1;
    width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-consistencia-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #FCFBFB;
    margin-bottom: 16px;
}

.ca-consistencia-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #FCFBFB;
}

.ca-consistencia-col p strong {
    font-weight: 700;
}

.ca-consistencia-shot {
    /* ==== CONTROLE DE TAMANHO ====
       Mude só este número para aumentar/diminuir a imagem.
       100 = tamanho atual, 110 = 10% maior, 90 = 10% menor, etc. */
    --shot-scale: 85;

    position: absolute;
    z-index: 0;
    top: 60px;
    right: var(--grid-margin);
    width: calc(797px * var(--shot-scale) / 100);
    height: auto;
    display: block;
}

/* Tema claro — slide Lógica (só texto, 4 colunas lado a lado) */
.ca-slide-logica {
    background-color: #ffffff;
}

.ca-slide-logica .ca-slide-breadcrumb,
.ca-slide-logica .ca-slide-capitulos {
    color: #404040;
}

.ca-slide-logica .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-slide-logica .ca-slide-main {
    gap: var(--grid-gutter);
    align-items: flex-start;
}

.ca-logica-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-logica-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #404040;
    margin-bottom: 16px;
}

.ca-logica-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #404040;
}

.ca-logica-col p strong {
    font-weight: 700;
}

/* Tema escuro — slide Eficiência em Dados Densos */
.ca-slide-eficiencia {
    background-color: #252525;
}

.ca-slide-eficiencia .ca-slide-breadcrumb,
.ca-slide-eficiencia .ca-slide-capitulos {
    color: #FCFBFB;
}

.ca-slide-eficiencia .ca-slide-breadcrumb img {
    position: relative;
    top: -2px;
}

.ca-slide-eficiencia .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-eficiencia-col {
    position: relative;
    z-index: 1;
    width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-eficiencia-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #FCFBFB;
    margin-bottom: 16px;
}

.ca-eficiencia-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #FCFBFB;
}

.ca-eficiencia-col p strong {
    font-weight: 700;
}

.ca-eficiencia-shot {
    /* ==== CONTROLE DE TAMANHO ====
       Mude só este número para aumentar/diminuir a imagem.
       100 = tamanho atual, 110 = 10% maior, 90 = 10% menor, etc. */
    --shot-scale: 80;

    position: absolute;
    z-index: 0;
    top: var(--grid-margin);
    /* ==== CONTROLE DE POSIÇÃO HORIZONTAL ====
       Distância da borda direita. Diminuir o valor move a imagem mais pra
       DIREITA (mais perto da borda); aumentar move mais pra ESQUERDA. */
    right: var(--grid-margin);
    right: 95px;
    width: calc(668px * var(--shot-scale) / 100);
    height: auto;
    display: block;
}

/* Tema claro — slide Arquitetura de Navegação */
.ca-slide-arquitetura {
    background-color: #ffffff;
}

.ca-slide-arquitetura .ca-slide-breadcrumb,
.ca-slide-arquitetura .ca-slide-capitulos {
    color: #252525;
}

.ca-slide-arquitetura .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-arquitetura-col {
    position: relative;
    z-index: 1;
    width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-arquitetura-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #252525;
    margin-bottom: 16px;
}

.ca-arquitetura-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #252525;
}

.ca-arquitetura-col p strong {
    font-weight: 700;
}

.ca-arquitetura-shot {
    /* ==== CONTROLE DE TAMANHO ====
       Mude só este número para aumentar/diminuir a imagem.
       100 = tamanho atual, 110 = 10% maior, 90 = 10% menor, etc. */
    --shot-scale: 80;

    position: absolute;
    z-index: 0;
    top: 62px;
    right: var(--grid-margin);
    right: 250apx;
    width: calc(464px * var(--shot-scale) / 100);
    height: auto;
    display: block;
}

/* Quadrado decorativo (cor de status solta, do lado do card) */
.ca-arquitetura-swatch {
    position: absolute;
    z-index: 1;
    top: 688px;
    right: 122px;
    width: 36px;
    height: 36px;
    background-color: #FF46D4;
}

/* Tema escuro — slide Trust & Consistência Visual */
.ca-slide-trust {
    background-color: #252525;
}

.ca-slide-trust .ca-slide-breadcrumb,
.ca-slide-trust .ca-slide-capitulos {
    color: #FCFBFB;
}

.ca-slide-trust .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-trust-col {
    position: relative;
    z-index: 1;
    width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-trust-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #FCFBFB;
    margin-bottom: 16px;
}

.ca-trust-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #FCFBFB;
}

.ca-trust-col p strong {
    font-weight: 700;
}

.ca-trust-shot {
    /* ==== CONTROLE DE TAMANHO ====
       Mude só este número para aumentar/diminuir a imagem.
       100 = tamanho atual, 110 = 10% maior, 90 = 10% menor, etc. */
    --shot-scale: 93;

    position: absolute;
    z-index: 0;
    top: 50%;
    right: var(--grid-margin);
    transform: translateY(-50%);
    width: calc(740px * var(--shot-scale) / 100);
    height: auto;
    display: block;
}

/* Tema claro — slide Impacto que Comunica Valor */
.ca-slide-impacto {
    background-color: #ffffff;
}

.ca-slide-impacto .ca-slide-breadcrumb,
.ca-slide-impacto .ca-slide-capitulos {
    color: #252525;
}

.ca-slide-impacto .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-impacto-col {
    position: relative;
    z-index: 1;
    width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-impacto-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #252525;
    margin-bottom: 16px;
}

.ca-impacto-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #252525;
}

.ca-impacto-col p strong {
    font-weight: 700;
}

.ca-impacto-shot {
    /* ==== CONTROLE DE TAMANHO ====
       Mude só este número para aumentar/diminuir a imagem.
       100 = tamanho atual, 110 = 10% maior, 90 = 10% menor, etc. */
    --shot-scale: 100;

    position: absolute;
    z-index: 0;
    top: 50%;
    right: var(--grid-margin);
    transform: translateY(calc(-50% - 24.5px));
    width: calc(823px * var(--shot-scale) / 100);
    height: auto;
    display: block;
}

/* Tema escuro — galeria "Impacto que comunica valor" (só imagem, sem coluna
   de texto — os 4 slides seguem o mesmo tema/fundo). */
.ca-slide-galeria1,
.ca-slide-galeria2,
.ca-slide-galeria3,
.ca-slide-galeria4 {
    background-color: #252525;
}

.ca-slide-galeria1 .ca-slide-breadcrumb,
.ca-slide-galeria1 .ca-slide-capitulos,
.ca-slide-galeria2 .ca-slide-breadcrumb,
.ca-slide-galeria2 .ca-slide-capitulos,
.ca-slide-galeria3 .ca-slide-breadcrumb,
.ca-slide-galeria3 .ca-slide-capitulos,
.ca-slide-galeria4 .ca-slide-breadcrumb,
.ca-slide-galeria4 .ca-slide-capitulos {
    color: #FCFBFB;
}

.ca-slide-galeria1 .ca-slide-breadcrumb .current,
.ca-slide-galeria2 .ca-slide-breadcrumb .current,
.ca-slide-galeria3 .ca-slide-breadcrumb .current,
.ca-slide-galeria4 .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-galeria-col {
    position: relative;
    z-index: 1;
    width: 285px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-galeria-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #FCFBFB;
    margin-bottom: 16px;
}

.ca-galeria-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #FCFBFB;
}

.ca-galeria-shot {
    --shot-scale: 100;
    position: absolute;
    z-index: 0;
    right: var(--grid-margin);
    display: block;
    height: auto;
}

.ca-galeria1-shot {
    top: 48%;
    transform: translateY(calc(-50% - 23px));
    width: calc(1123px * var(--shot-scale) / 132);
}

.ca-galeria2-shot {
    top: 44px;
    width: calc(1123px * var(--shot-scale) / 132);
}

.ca-galeria3-shot {
    top: 76px;
    width: calc(1123px * var(--shot-scale) / 132);
}

.ca-galeria4-shot {
    top: 48%;
    transform: translateY(calc(-50% - 31.5px));
    width: calc(1123px * var(--shot-scale) / 132);
}

/* Tema claro — slide O que aprendi com este projeto */
.ca-slide-aprendi {
    background-color: #ffffff;
}

.ca-slide-aprendi .ca-slide-breadcrumb,
.ca-slide-aprendi .ca-slide-capitulos {
    color: #6D4C3D;
}

.ca-slide-aprendi .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-aprendi-col {
    position: relative;
    z-index: 1;
    width: 387px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ca-aprendi-col h2 {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #404040;
    margin-bottom: 16px;
    text-wrap: balance;
}

.ca-aprendi-col p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.2;
    color: #404040;
    text-wrap: pretty;
}

.ca-aprendi-col p + p {
    margin-top: 16px;
}

.ca-aprendi-col p strong {
    font-weight: 700;
}

.ca-aprendi-shot {
    /* ==== CONTROLE DE TAMANHO ====
       Mude só este número para aumentar/diminuir a imagem.
       100 = tamanho atual, 110 = 10% maior, 90 = 10% menor, etc. */
    --shot-scale: 100;

    position: absolute;
    z-index: 0;
    top: 100px;
    right: var(--grid-margin);
    width: calc(692px * var(--shot-scale) / 100);
    height: auto;
    display: block;
}

/* Tema escuro — slide Veja outros projetos (fecha o case) */
.ca-slide-outros {
    background-color: #252525;
}

.ca-slide-outros .ca-slide-breadcrumb,
.ca-slide-outros .ca-slide-capitulos {
    color: #FCFBFB;
}

.ca-slide-outros .ca-slide-breadcrumb .current {
    color: #1255D1;
}

.ca-outros-titulo {
    position: absolute;
    z-index: 1;
    top: 50px;
    left: var(--grid-margin);
    width: 309px;
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #FCFBFB;
    margin: 0;
    text-wrap: balance;
}

.ca-outros-cards {
    position: absolute;
    z-index: 1;
    top: 222px;
    left: var(--grid-margin);
    display: flex;
    gap: 49px;
}

.ca-outros-card {
    display: flex;
    flex-direction: column;
    gap: 42px;
    width: 260px;
}

.ca-outros-card-link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.ca-outros-card-icon {
    width: 38px;
    height: 38px;
    display: block;
}

.ca-outros-card-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ca-outros-card-title {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    text-wrap: balance;
}

.ca-outros-card-desc {
    font-family: 'Degitan', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    text-wrap: pretty;
}

.ca-outros-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ca-outros-card-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Degitan', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    border: none;
    box-shadow: inset 0 0 0 1px var(--outros-border);
    border-radius: 100px;
    padding: 8px 14px;
    color: var(--outros-tag);
}

.ca-outros-card--pet {
    --outros-border: #4D4D4D;
    --outros-tag: #989898;
}

.ca-outros-card--pet .ca-outros-card-title { color: #876F56; }
.ca-outros-card--pet .ca-outros-card-desc  { color: #D7B693; }

.ca-outros-card--control {
    --outros-border: #453C89;
    --outros-tag: #7298DF;
}

.ca-outros-card--control .ca-outros-card-title { color: #3F3FCC; }
.ca-outros-card--control .ca-outros-card-desc  { color: #9797DD; }

.ca-outros-card--medican {
    --outros-border: #1D6C37;
    --outros-tag: #54B253;
}

.ca-outros-card--medican .ca-outros-card-title { color: #3D9C3B; }
.ca-outros-card--medican .ca-outros-card-desc  { color: #D3E7C0; }

/* Barra de progresso — compartilhada, sobrepõe o slide ativo */
.ca-progress-bar {
    position: absolute;
    left: var(--grid-margin);
    right: var(--grid-margin);
    bottom: 48px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.ca-progress-label {
    font-family: 'Degitan', sans-serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2.8px;
}

.ca-progress-track {
    width: 100%;
    height: 1.5px;
    /* Testado no Figma: essa cor funciona bem em cima de todos os fundos
       desta case, então fica fixa — não muda mais com o tema do slide
       (era isso que piscava escuro no meio da transição entre slides). */
    background-color: #CACACA;
}

.ca-progress-fill {
    height: 100%;
    width: 0%;
    background-color: #1255D1;
    transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.ca-progress-bar.theme-dark .ca-progress-label { color: #FCFBFB; }
.ca-progress-bar.theme-light .ca-progress-label { color: #404040; }

/* ======================== SUPER MENU DE CAPÍTULOS (compartilhado — cores por case) ======================== */
/* Mesmo mecanismo do super menu principal (overlay fixo + transform + is-open),
   descendo de cima para baixo. */
.capitulos-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform 0.52s cubic-bezier(0.87, 0, 0.13, 1);
}

.capitulos-overlay.is-open {
    pointer-events: auto;
    transform: translateY(0);
}

.capitulos-close {
    position: absolute;
    top: 36px;
    right: var(--grid-margin);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    line-height: 0;
}

.capitulos-close img {
    width: 23px;
    height: 24px;
    display: block;
}

.capitulos-grid {
    position: absolute;
    top: 112px;
    left: var(--grid-margin);
    display: flex;
    gap: 96px;
}

.capitulos-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 422px;
}

.capitulos-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-family: 'Degitan', sans-serif;
}

button.capitulos-item {
    cursor: pointer;
}

.capitulos-num {
    flex-shrink: 0;
    width: 64px;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.capitulos-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.capitulos-title {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.capitulos-desc {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

/* ======================== INÍCIO: CASE C&A ======================== */

body {
    background-color: #2C2C5D;
}

/* Super menu de capítulos — cores desta case */
#capitulos-overlay {
    background-color: #44448F;
}

.capitulos-num,
.capitulos-title,
.capitulos-desc {
    color: #7A7AC9;
}

.capitulos-item.is-current .capitulos-num,
.capitulos-item.is-current .capitulos-title,
.capitulos-item.is-current .capitulos-desc {
    color: #FCFBFB;
}

button.capitulos-item:hover .capitulos-num,
button.capitulos-item:hover .capitulos-title,
button.capitulos-item:hover .capitulos-desc {
    color: #FCFBFB;
}

.ca-hero {
    padding: 36px 48px 192px 48px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.case-breadcrumb {
    display: inline-block;
    font-family: 'Degitan', sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.45;
    text-decoration: none;
    margin-bottom: 32px;
    transition: opacity 0.2s ease, padding-left 0.2s ease;
}

.case-breadcrumb:hover {
    opacity: 1;
    padding-left: 6px;
}

.ca-logo {
    width: 122px;
    height: 122px;
    display: block;
    margin-bottom: 16px;
}

.ca-titulo {
    font-family: 'Degitan', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
    line-height: 140%;
    max-width: 320px;
    text-wrap: pretty;
    margin-bottom: 16px;
    text-transform: uppercase !important;
}

.ca-descricao {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #ffffff;
    line-height: 140%;
    max-width: 280px;
    text-wrap: pretty;
}

/* BLOCO EDITÁVEL - IMAGEM CEA TELA TOPO */
.ca-tela-imagem {
    position: relative;
    top: 80px;        /* move para baixo */
    right: 0;         /* move para esquerda/direita */
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.ca-hero::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../imagens/logo-eficiencia-financeira-bg.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: -1;
}

.ca-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 312px;
    margin-top: 80px;
}

.ca-badge {
    font-family: 'Degitan', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #DCC9B6;
    padding: 8px 14px;
    border: 1px solid #494967;
    border-radius: 100px;
    text-transform: uppercase;
    align-items: center;
}

.ca-complexidade {
    padding: 112px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.ca-complexidade .ca-desafio-texto {
    max-width: 650px;
}

.ca-complexidade .ca-titulo-secao {
    max-width: 100%;
}

.ca-complexidade .ca-descricao-secao {
    max-width: 100%;
}

.ca-desafio {
    padding: 112px 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.ca-titulo-secao {
    font-family: 'Degitan', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #000000;
    line-height: 140%;
    max-width: 320px;
    margin-bottom: 16px;
    text-wrap: pretty;
    text-transform: uppercase !important;
}

.ca-descricao-secao {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #656565;
    line-height: 140%;
    max-width: 280px;
    text-wrap: pretty;
}

.ca-descricao-secao strong {
    font-weight: 700;
}

.ca-desafio-imagem img {
    display: block;
    width: 100%;
}

.ca-fig-caption {
    font-family: 'Degitan', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    color: #9F9F9F;
    line-height: 140%;
    margin-top: 8px;
}

.ca-etapa {
    padding: 112px 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ca-etapa-num {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 200;
    color: #876F56;
    display: block;
    margin-bottom: 16px;
}

.ca-etapa .ca-titulo-secao {
    max-width: 600px;
}

.ca-etapa .ca-descricao-secao {
    max-width: 600px;
}

.ca-etapa-img-wrap {
    margin-top: 80px;
}

.ca-etapa-img-wrap img {
    display: block;
    width: 100%;
}

.ca-dashboard-3 {
    padding: 112px 48px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #DCC9B6;
}

.ca-dashboard-3-img {
    display: block;
    width: auto;
}

.ca-dashboard-3 .ca-descricao-secao {
    text-align: center;
    max-width: 600px;
    margin-top: 24px;
}

.ca-eficiencia {
    padding: 112px 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.ca-eficiencia .ca-desafio-texto {
    max-width: 336px;
    flex-shrink: 0;
}

.ca-eficiencia .ca-titulo-secao,
.ca-eficiencia .ca-descricao-secao {
    max-width: 100%;
}

.ca-eficiencia-imagem {
    flex-shrink: 0;
    margin-right: 62px;
}

.ca-eficiencia-imagem img {
    display: block;
    width: auto;
}

.ca-design-system {
    padding: 112px 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.ca-design-system .ca-desafio-texto {
    max-width: 336px;
    flex-shrink: 0;
}

.ca-design-system .ca-titulo-secao {
    max-width: 100%;
}

.ca-design-system .ca-descricao-secao {
    max-width: 100%;
}

.ca-design-system-imagem {
    flex-shrink: 0;
}

.ca-design-system-imagem img {
    display: block;
    width: auto;
}

.ca-dashboard-2 {
    padding: 112px 48px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #DCC9B6;
}

.ca-dashboard-2-img {
    display: block;
    width: 100%;
}

.ca-dashboard-2 .ca-fig-caption {
    text-align: center;
    margin-top: 8px;
}

.ca-arquitetura {
    padding: 112px 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.ca-arquitetura .ca-desafio-texto {
    max-width: 336px;
    flex-shrink: 0;
}

.ca-arquitetura .ca-titulo-secao,
.ca-arquitetura .ca-descricao-secao {
    max-width: 100%;
}

.ca-arquitetura-imagem {
    flex-shrink: 0;
    margin-right: 60px;
}

.ca-arquitetura-imagem img {
    display: block;
    width: auto;
}

.ca-trust {
    padding: 112px 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.ca-trust .ca-desafio-texto {
    max-width: 336px;
    flex-shrink: 0;
}

.ca-trust .ca-titulo-secao,
.ca-trust .ca-descricao-secao {
    max-width: 100%;
}

.ca-trust-imagem {
    flex-shrink: 0;
    margin-right: 80px;
}

.ca-trust-imagem img {
    display: block;
    width: auto;
}

.ca-impacto {
    padding: 112px 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ca-impacto .ca-titulo-secao {
    max-width: 800px;
}

.ca-impacto .ca-descricao-secao {
    max-width: 800px;
    margin-bottom: 80px;
}

.ca-impacto-imagens {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
}

.ca-impacto-imagens img {
    display: block;
    width: auto;
    max-width: 100%;
}

.ca-aprendi {
    padding: 112px 48px 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ca-aprendi .ca-titulo-secao {
    max-width: 840px;
}

.ca-aprendi .ca-descricao-secao {
    max-width: 840px;
    margin-bottom: 16px;
}

.ca-aprendi-icone {
    margin-top: 40px;
    display: block;
}

.ca-proximos-projetos {
    padding: 112px 0 0;
    background-color: #ffffff;
}

.ca-proximos-projetos .section-title {
    color: #DCC9B6;
    margin-left: 48px;
}

.ca-proximos-projetos .project-card {
    border-top: 1px solid #DCC9B6;
    border-bottom: 1px solid #DCC9B6;
    border-left: none;
    border-right: none;
    cursor: none;
}

.ca-proximos-projetos .project-card:first-child {
    border-bottom: none;
}

.ca-proximos-projetos .project-card:last-child {
    border-top: none;
}

.ca-proximos-projetos .project-card .arrow {
    filter: brightness(0) saturate(100%) invert(83%) sepia(15%) saturate(400%) hue-rotate(340deg) brightness(105%);
}

.project-card {
    text-decoration: none;
    color: inherit;
}

.btn-topo {
    position: fixed;
    bottom: 48px;
    right: 48px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #6D4C3D;
    border: none;
    cursor: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 99999;
}

.btn-topo.is-visible {
    opacity: 1;
    pointer-events: auto;
}

#btn-topo {
    background-color: #6D4C3D;
}

.btn-topo-seta {
    color: #DCC9B6;
    font-size: 14px;
    line-height: 1;
}

.btn-topo-texto {
    font-family: 'Degitan', sans-serif;
    font-size: 8px;
    font-weight: 400;
    color: #DCC9B6;
    letter-spacing: 1.5px;
}

.ca-footer {
    background-color: #ffffff;
}

.ca-footer .status-block {
    padding-top: 112px;
}

/* ======================== FIM: CASE C&A ======================== */


/* ======================== INÍCIO: CASE PET YOU GO ======================== */

.pyg-page {
    background-color: #432818;
}

.pyg-hero {
    padding: 36px 48px 112px 48px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pyg-hero::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../imagens/loog-bg-texto-petyougo.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: -1;
}

.pyg-hero .ca-logo {
    width: 260px;
    height: auto;
}

.ca-badge.pyg-badge {
    border-color: #62422F;
}

.pyg-page .ca-tela-imagem {
    top: -4px;
    right: 60px;
}

.pyg-hero .ca-descricao {
    max-width: 360px;
}

.pyg-hero .ca-badges {
    width: 408px;
}


.pyg-bg-creme {
    background-color: #F9F4EF;
    border: none;
    margin-top: -1px;
}

.pyg-video-celular {
    display: block;
    border: 5px solid #252525;
    border-radius: 16px;
    width: 280px;
    height: auto;
}

.pyg-bg-creme {
    justify-content: flex-start;
    gap: 340px;
}

.pyg-page .ca-desafio .ca-desafio-texto {
    max-width: 420px;
    flex-shrink: 0;
}

.pyg-page .ca-desafio .ca-titulo-secao,
.pyg-page .ca-desafio .ca-descricao-secao {
    max-width: 100%;
}

.pyg-page .ca-etapa .ca-titulo-secao,
.pyg-page .ca-etapa .ca-descricao-secao {
    max-width: 863px;
}

.pyg-page .ca-desafio .ca-desafio-imagem {
    flex-shrink: 0;
    margin-right: 60px;
}

.pyg-fig-caption {
    text-align: right;
    margin-top: 16px;
    width: 100%;
}

.pyg-bg-creme {
    align-items: stretch;
}

.pyg-bg-creme .ca-titulo-secao {
    color: #6D4C3D;
}

.pyg-bg-creme .ca-descricao-secao {
    color: #876F56;
}

.pyg-video-wrap {
    position: relative;
    left: 80px;
}

.pyg-video-wrap .pyg-cachorrinho {
    position: absolute;
    left: 174px;
    bottom: -112px;
    width: 300px;
    height: auto;
    z-index: 2;
}

.ca-etapa.pyg-etapa-restricao .ca-titulo-secao,
.ca-etapa.pyg-etapa-restricao .ca-descricao-secao {
    max-width: 1063px;
}

.pyg-etapa-restricao .ca-fig-caption {
    margin-top: 26px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.pyg-impacto-icone {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 64px;
}

.pyg-impacto-icone .ca-desafio-texto {
    text-align: left;
    max-width: 600px;
}

.pyg-impacto-icone .ca-titulo-secao,
.pyg-impacto-icone .ca-descricao-secao {
    max-width: 100%;
    margin-bottom: 0;
}

.pyg-icone-apoio {
    width: 160px;
    height: auto;
    flex-shrink: 0;
    margin-left: 336px;
}

.pyg-etapa-doc {
    border-bottom: none;
}

.pyg-bg-varias-telas {
    padding-left: 0;
    padding-right: 0;
    border-bottom: none;
}

.pyg-bg-varias-telas-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ======================== FIM: CASE PET YOU GO ======================== */

/* ======================== INÍCIO: CASE EASY CONTROL ======================== */

.ec-page {
    background-color: #3e1d4b;
}

.ec-page .ca-titulo-secao,
.ec-page .ca-titulo {
    text-transform: uppercase;
}

.ec-page .ca-titulo-secao {
    margin-bottom: 18px;
}

.ec-page .ca-desafio .ca-desafio-texto {
    max-width: 480px;
    flex-shrink: 0;
}

.ec-page .ca-desafio .ca-titulo-secao,
.ec-page .ca-desafio .ca-descricao-secao {
    max-width: 100%;
}

.ec-page .ca-desafio .ca-desafio-imagem {
    flex-shrink: 0;
}

.ec-etapa-transicao .ca-titulo-secao,
.ec-etapa-transicao .ca-descricao-secao {
    max-width: 800px;
}

.ec-etapa-transicao-img {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ca-etapa-img-wrap .ec-etapa-transicao-img img {
    width: 100%;
}

.ec-etapa-transicao .ca-fig-caption {
    margin-top: 24px;
}

.ec-hero {
    padding: 36px 48px 112px 48px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #3e1d4b;
}

.ec-hero::before {
    content: '';
    position: absolute;
    top: -42px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../imagens/texto-atras-easycontrol.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: 0;
}

.ec-hero .ca-hero-texto,
.ec-hero .ec-tela-imagem {
    position: relative;
    z-index: 1;
}

.ec-logo.ec-logo {
    width: 304px;
    height: auto;
}

.ec-hero .ca-titulo {
    max-width: 420px;
}

.ec-hero .ca-descricao {
    max-width: 340px;
}

.ca-badge.ec-badge {
    border-color: #773D8E;
    color: #FF1DB0;
}

.ec-tela-imagem {
    width: 602px;
    height: auto;
    flex-shrink: 0;
    position: relative;
    top: -26px;
    left: -40px;
}

.ec-fig-caption-01 {
    text-align: right;
    margin-top: 28px;
    max-width: 360px;
    margin-left: auto;
}

.ca-desafio-imagem img.ec-pesquisa-concorrentes {
    width: 824px;
    max-width: 100%;
    height: auto;
}

.ec-fluxo {
    padding: 112px 48px;
    background-color: #7D96C6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ec-fluxo-2 {
    background-color: #5274B4;
}

.ec-fluxo .ca-titulo-secao,
.ec-fluxo .ca-descricao-secao {
    color: #ffffff;
    max-width: 860px;
}

.ec-fluxo .ca-descricao-secao {
    margin-bottom: 40px;
}

.ec-grupo-telas {
    width: 1213px;
    height: auto;
}

.ec-impacto-icone {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 48px;
}

.ec-impacto-icone .ca-desafio-texto {
    max-width: 600px;
}

.ec-impacto-icone .ca-titulo-secao,
.ec-impacto-icone .ca-descricao-secao {
    max-width: 100%;
    margin-bottom: 0;
}

.ec-icone-abordagem {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.ec-conjunto-elementos {
    width: 666px;
    height: auto;
    flex-shrink: 0;
}

.ec-etapa-icone-wrap {
    display: flex;
    justify-content: center;
}

.ec-etapa-icone-wrap img {
    width: 76px;
    height: auto;
}

.ec-etapa-03 {
    border-bottom: none;
}

.ec-bg-varias-telas {
    background-color: #581A8B;
    padding: 0;
    border-bottom: none;
}

.ec-bg-varias-telas-img {
    display: block;
    width: 100%;
    height: auto;
}

.ec-aprendi-icones {
    height: 67px;
    width: auto;
    margin-top: 40px;
}

/* ======================== INÍCIO: CASE MEDICAN ======================== */

.mc-page {
    background-color: #0A0F15;
}

/* HERO — nav dentro da section para o gradiente cobrir tudo */
.mc-hero {
    padding: 0 48px 192px 48px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at 79% 24%, #222631 0%, #161B23 50%, #0A0F15 100%);
    overflow: hidden;
}

.mc-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../imagens/img-bg-topo-medican.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: 0;
    pointer-events: none;
}

/* Navbar dentro do hero */
.mc-nav {
    position: relative;
    z-index: 2;
    margin-top: 32px;
    margin-bottom: 0;
    padding: 0;
}

/* Conteúdo hero: texto + imagem lado a lado */
.mc-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 60px;
}

.mc-hero-texto {
    position: relative;
    z-index: 1;
}

.mc-logo-img {
    display: block;
    height: auto;
    max-width: 180px;
    margin-bottom: 32px;
}

.mc-titulo {
    max-width: 420px;
    color: #ffffff;
}

.mc-descricao {
    max-width: 360px;
    color: #ffffff;
}

.mc-badges {
    width: auto;
    max-width: 380px;
}

.ca-badge.mc-badge {
    color: #a1cacc;
    border-color: #373e4e;
}

.mc-tela-imagem {
    position: relative;
    z-index: 1;
    top: 60px;
    width: auto;
    max-width: 56%;
    flex-shrink: 0;
    display: block;
}

/* TEXTO LADO ESQUERDO LARGO (padrão) */
.mc-desafio-texto {
    max-width: 560px;
    flex-shrink: 0;
}

/* TEXTO AINDA MAIS LARGO para seções que precisam */
.mc-desafio-texto-wide {
    flex: 1;
    max-width: none;
    flex-shrink: 1;
    padding-right: 48px;
}

.mc-titulo-secao-wide {
    max-width: 100%;
}

.mc-desc-wide {
    max-width: 100%;
}

/* NUANCES — texto + imagem abaixo full-width */
.mc-nuances {
    flex-direction: column;
    align-items: flex-start;
}

.mc-nuances-img-full {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 60px;
}

/* ETAPAS DO FLUXO */
.mc-etapas-fluxo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 48px 112px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.mc-etapa-card {
    border: 1px solid #e0e5eb;
    border-radius: 4px 26px 26px 4px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    background-color: #ffffff;
}

.mc-etapa-label {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #697487;
    display: block;
    margin-bottom: auto;
}

.mc-etapa-titulo {
    font-family: 'Degitan', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #657084;
    line-height: 140%;
    margin-top: 48px;
}

/* PESQUISA */
.mc-pesquisa-section {
    padding: 112px 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.mc-pesquisa-img {
    display: block;
    width: 100%;
    border-radius: 16px;
}

.mc-fig-caption-center {
    text-align: center;
    margin-top: 16px;
}

/* INVESTIGAÇÃO */
.mc-investigacao {
    align-items: center;
    gap: 120px;
}

.mc-investigacao .mc-desafio-texto-wide {
    max-width: 620px;
    flex: none;
}

.mc-apoio-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-apoio-img {
    display: block;
    width: 200px;
    height: 200px;
    object-fit: contain;
}

/* FUNIL */
.mc-funil-section {
    padding: 112px 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mc-titulo-centro {
    text-align: center;
    max-width: 700px;
}

.mc-descricao-centro {
    text-align: center;
    max-width: 720px;
    margin-bottom: 60px;
}

.mc-funil-img {
    display: block;
    max-width: 860px;
    width: 100%;
}

/* ECOSSISTEMA */
.mc-ecossistema {
    padding: 112px 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mc-diagnostico-img {
    display: block;
    max-width: 1000px;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 16px;
}

/* LEGENDA */
.mc-legenda {
    align-items: center;
}

.mc-legendas-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.mc-legendas-img {
    display: block;
    width: auto;
    max-width: 580px;
}

/* OPERAÇÃO */
.mc-operacao {
    align-items: center;
}

.mc-operacao .mc-desafio-texto-wide {
    max-width: 620px;
    flex: none;
}

/* TÉCNICA DE IMERSÃO + CARDS — bloco único sem borda interna */
.mc-tecnica {
    padding: 112px 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
}

.mc-titulo-tec {
    text-align: left;
    max-width: 520px;
    margin-bottom: 60px;
}

.mc-tecnica-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
}

.mc-tecnica-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mc-tec-icone {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex-shrink: 0;
}

/* CARDS IMERSÃO 2×2 — dentro do mc-tecnica, sem borda separadora */
.mc-imersao-cards {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 44px;
}

.mc-imersao-card {
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 340px;
}

.mc-card-num {
    font-family: 'Degitan', sans-serif;
    font-size: 16px;
    font-weight: 400;
    display: block;
}

.mc-card-body {
    margin-top: auto;
}

.mc-card-titulo {
    font-family: 'Degitan', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #000000;
    line-height: 140%;
    margin-bottom: 24px;
}

.mc-card-lista {
    font-family: 'Degitan', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #000000;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 160%;
}

.mc-card-lista li {
    padding-left: 12px;
    position: relative;
}

.mc-card-lista li::before {
    content: '•';
    position: absolute;
    left: 0;
}

/* Card color variants */
.mc-card-azul    { background-color: #eff1f9; }
.mc-num-azul     { color: #0834e4; }
.mc-card-verde   { background-color: #e7fdf0; }
.mc-num-verde    { color: #07c84d; }
.mc-card-laranja { background-color: #f6f9ef; }
.mc-num-laranja  { color: #e48508; }
.mc-card-rosa    { background-color: #fcecf5; }
.mc-num-rosa     { color: #ad07aa; }

/* SEÇÕES LADO A LADO (acolhimento, fluxo-saida, whatsapp, crm) */
.mc-lado {
    align-items: center;
}

.mc-lado-img {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-side-img {
    display: block;
    width: auto;
    max-width: 420px;
}

/* PRIORIZAÇÃO */
.mc-priorizacao {
    padding: 112px 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mc-priorizacao .mc-titulo-centro {
    max-width: 860px;
}

.mc-priorizacao .mc-descricao-centro {
    max-width: 860px;
}

.mc-matriz-img {
    display: block;
    max-width: 1027px;
    width: 100%;
    border-radius: 10px;
}

/* VISÃO ESTRATÉGICA */
.mc-visao-estrategica {
    padding: 112px 48px;
    background-color: #ffffff;
    border-bottom: 1px solid #DCC9B6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mc-visao-titulo {
    width: 100%;
    max-width: 807px;
    margin-bottom: 48px;
    text-align: left;
}

.mc-relatorio {
    max-width: 807px;
    width: 100%;
}

.mc-relatorio p {
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #656565;
    line-height: 160%;
    margin-bottom: 24px;
}

.mc-relatorio p strong {
    font-weight: 700;
}

.mc-relatorio-intro {
    font-weight: 700 !important;
    color: #000000 !important;
}

/* O QUE APRENDI */
.mc-aprendi .ca-titulo-secao {
    max-width: 840px;
}

.mc-aprendi .ca-descricao-secao {
    max-width: 840px;
}

.mc-aprendi-icone {
    display: block;
    margin-top: 40px;
    width: 60px;
    height: auto;
}

/* POPUP LGPD */
@keyframes popup-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes popup-overlay-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes popup-card-in {
    from { opacity: 0; transform: translateY(-28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes popup-card-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-28px); }
}

.popup-lgpd {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(0, 0, 0, 0.55);
    animation: popup-overlay-in 0.3s ease forwards;
}

.popup-lgpd.is-closing {
    animation: popup-overlay-out 0.28s ease forwards;
}

.popup-lgpd.is-closing .popup-lgpd-card {
    animation: popup-card-out 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.popup-lgpd-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 48px;
    max-width: 480px;
    width: 100%;
    position: relative;
    animation: popup-card-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.popup-lgpd-fechar {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #767676;
    line-height: 1;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

.popup-lgpd-fechar:hover {
    color: #000000;
}

.popup-lgpd-titulo {
    font-family: 'Degitan', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    line-height: 130%;
    text-transform: uppercase;
    margin-bottom: 24px;
    max-width: 340px;
}

.popup-lgpd-texto {
    font-family: 'Degitan', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #656565;
    line-height: 160%;
    margin-bottom: 36px;
}

.popup-lgpd-cta {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Degitan', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #DCC9B6;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0;
    transition: opacity 0.2s ease;
}

.popup-lgpd-cta:hover {
    opacity: 0.75;
}

/* ======================== FIM: CASE MEDICAN ======================== */

/* ======================== FIM: CASE EASY CONTROL ======================== */