:root {
    --purple: #4235c7;
    --bg-claro: #fff9f6;
    --pink: #ff61b7;
    --lime: #d3ffa0;
    --orange: #f0a36b;
    --font-principal: 'Syne', sans-serif; 
}

body { 
font-family: var(--font-principal);    font-weight: 400; /* Regular */
    margin: 0; 
    background-color: var(--bg-claro);
    color: #1a1a1a; 
    overflow-x: hidden;
}

/* Bloqueio de scroll horizontal em todo o site */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100%;
}

/* Garante que nenhum elemento interno (como as faixas tortas) "empurre" a tela */
* {
    max-width: 100vw;
}



/* Força a troca em todos os títulos e textos de uma vez */
h1, h2, h3, h4, h5, h6, p, span, a, button, div {
    font-family: var(--font-principal) !important;
}
/* NAVBAR */
.navbar-toggler { filter: invert(1); }

/* HERO */
.hero { background-color: var(--purple);}

.destaque {
    position: relative;
    z-index: 1;
    padding: 2px 18px; /* Mais preenchimento lateral para arredondar */
    display: inline-block;
}


.destaque::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Bordas totalmente arredondadas (estilo pílula) */
    border-radius: 50px; 
}

.txt{
    font-size: 3.5em;
}

.destaque.pink::before {
    background-color: var(--pink);
    transform: rotate(-2deg); /* Apenas o fundo inclina */
}

.destaque.lime::before {
    background-color: var(--lime);
    transform: rotate(2deg); /* Inclinado para o lado oposto como no layout */
}


.destaque.roxo::before {
    background-color: #4235c7;
    transform: rotate(2deg); /* Inclinado para o lado oposto como no layout */
}





/* --- BOTÃO SAIBA MAIS (TEXTO RETO + FUNDO TORTO) --- */
.btn-beat-custom {
    position: relative;
    background: transparent;
    border: none;
    padding: 15px 60px;
    cursor: pointer;
    display: inline-block;
}

/* O fundo do botão (a barra despixelada) */
.btn-beat-custom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--purple);
    border-radius: 50px; /* Bordas perfeitamente arredondadas */
    transform: rotate(-2deg); /* Fundo desalinhado */
    z-index: 1;
    transition: all 0.3s ease; /* Transição para o hover */
}

/* O texto do botão (sempre reto) */
.btn-text {
    position: relative;
    z-index: 2; /* Fica acima do fundo roxo */
    color: white;
    font-family: 'Juturu', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: lowercase;
}

/* --- EFEITO HOVER --- */
.btn-beat-custom:hover::before {
    transform: rotate(0deg) scale(1.05); /* Endireita e aumenta levemente */
    background-color: #3529a6; /* Um roxo levemente mais escuro */
}

.btn-beat-custom:active::before {
    transform: scale(0.95); /* Efeito de clique */
}

/* Ajustes de tipografia para precisão */
.titulo-sobre {
    font-family: 'Juturu', sans-serif;
    font-weight: 400;
    font-size: 3.8rem;
    line-height: 1.1;
}

.texto-sobre {
    font-family: 'Juturu', sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #3a3a3a;
}


/* --- ESTILOS BIG NUMBERS --- */

.big-numbers-section {
    background-color: var(--bg-claro);
    padding: 60px 0;
    width: 100%;
}

/* Bloco Rosa Superior */
.pill-top {
    background-color: var(--pink);
    border-radius: 80px 80px 0 0; /* Curva larga no topo */
    padding: 60px 20px 100px 20px; /* Padding inferior maior para o overlap */
    text-align: center;
}

.title-big-numbers {
    font-weight: 700; /* Extrabold */
    color: var(--lime);
    font-size: 3.5rem;
    margin: 0;
}


.big-numbers-section .btn-beat-custom:hover::before {
    transform: rotate(0deg) scale(1.05); /* Endireita e aumenta levemente */
    background-color: #ff61b6; /* Um roxo levemente mais escuro */
}

.big-numbers-section .btn-beat-custom:active::before {
    transform: scale(0.95); /* Efeito de clique */
}



/* Bloco Roxo Inferior */
.pill-bottom {
    background-color: var(--purple);
border-radius: 80px 80px 0 0;    
padding: 80px 20px;
    margin-top: -60px; /* SOBREPOSIÇÃO: Puxa o bloco roxo para cima do rosa */
    position: relative;
    z-index: 2;
}

/* Estatística +500 marcas atendidas */
.main-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.main-stat .number {
    font-weight: 700; /* Extrabold */
    font-size: 8rem;
    color: var(--lime);
    line-height: 1;
}

.main-stat .label {
    font-family: 'Juturu', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 3.5rem;
    color: white;
    line-height: 0.9;
    text-align: left;
}

/* Descrição em Caps */
.description-stat {
    color: white;
    font-family: 'Juturu', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-bottom: 40px;
    line-height: 1.4;
}

/* Botão Confira (Estilo Desalinhado Lime) */
.btn-lime-stat {
    position: relative;
    background: transparent;
    border: none;
    padding: 10px 60px;
    cursor: pointer;
}

.btn-lime-stat::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--lime);
    border-radius: 50px;
    transform: rotate(-2deg); /* Fundo inclinado */
    z-index: 1;
    transition: 0.3s ease;
}

.btn-lime-stat .text-purple {
    color: #4235c7 !important;
    position: relative;
    z-index: 2;
    font-weight: 700;
}

.btn-lime-stat:hover::before {
    transform: rotate(0deg) scale(1.05);
}


/* --- SEÇÃO SERVIÇOS --- */

.servicos-section {
    background-color: #fff9f6; /* Cor exata solicitada */
    padding: 80px 0;
}

.card-servico {
    padding: 40px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: none;
    transition: transform 0.3s ease;

    /* BORDAS ASSIMÉTRICAS: Canto inferior direito super arredondado */
    border-radius: 15px 15px 100px 15px; 
}

.card-servico:hover {
    transform: translateY(-10px);
}

/* Cores dos Cards */
.card-pink { background-color: var(--pink); }
.card-purple { background-color: var(--purple); }
.card-orange { background-color: #f0a36b; } /* Laranja do layout */

/* TAGS (ESTRATÉGIA, CURADORIA...) */
.tag-servico {
    display: inline-block;
    padding: 6px 20px;
    font-weight: 700; /* Extrabold */
    font-size: 1.5rem;
    width: fit-content;
    margin-bottom: 25px;
    border-radius: 50px;
}


/* Cores das Tags */
.tag-purple { background-color: var(--purple); color: white; }
.tag-pink { background-color: var(--pink); color: var(--lime); }
.tag-lime { background-color: var(--lime); color: var(--purple); }

/* Texto dentro do Card */
.texto-card {
    font-family: 'Juturu', sans-serif;
    font-weight: 400; /* Regular */
    color: white;
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0;

}

/* --- CONFIGURAÇÃO DA FAIXA COM OVERLAP --- */

.faixa-evolucao-overlap {
    width: 100%;
    overflow: visible; /* Importante para o overlap aparecer */
    position: relative;
    z-index: 10; /* Garante que fique acima de tudo */
    background-color: transparent; /* Para ver a seção de baixo */
}

.barra-verde-diagonal {
    background-color: #ff61b7; /* Verde Lima */
    width: 110%;
    margin-left: -5%;
    padding: 30px 0;
    
    /* INCLINAÇÃO DA BARRA */
    transform: rotate(-2deg);
    
    /* OVERLAP: Empurra a barra para baixo, sobrepondo a seção seguinte */
    margin-bottom: -50px; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.verde2 span{
    color: red;
}

.wrapper-texto-reto {
    /* COMPENSAÇÃO: Deixa o texto reto */
    transform: rotate(2deg);
}

.texto-faixa {
    font-family: 'Juturu', sans-serif;
    font-weight: 400;
    font-size: 3.5rem;
    color: #4235c7; /* Roxo */
    margin: 0;
    text-transform: lowercase;
    white-space: nowrap;
}

.texto-faixa span{
        color: #d3ffa0;

}
.pill-rosa {
    background-color: #ff61b7; /* Rosa */
    color: white;
    padding: 2px 25px;
    border-radius: 50px;
    display: inline-block;
    line-height: 1.1;
    margin: 0 5px;
}

/* AJUSTE NA SEÇÃO DO CASTING (PARA NÃO FICAR ESCONDIDA) */
.casting-section {
    padding-top: 120px !important; /* Aumente o padding superior para compensar o overlap */
    position: relative;
    z-index: 1;
}

/* Mobile */
@media (max-width: 991px) {
    .texto-faixa { font-size: 2rem; }
    .barra-verde-diagonal { margin-bottom: -30px;}
}

/* --- AJUSTES SEÇÃO CASTING (PIXEL PERFECT) --- */

.casting-section {
    background-color: var(--lime); /* #d3ffa0 */
    padding: 100px 0;
    width: 100%;
    margin-top: -1px; /* Remove frestas se a seção de cima for de outra cor */
}

/* Título H2 (Juturu Regular, cor Roxo) */
.titulo-casting {
    font-family: 'Juturu', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 3.8rem;
    line-height: 1.1;
    color: var(--purple); /* #4235c7 */
    margin: 0;
}

.badge-categoria {
            background-color: #D4FF91 !important; /* Verde limão do layout */
            color: #4B39D7 !important; /* Roxo padrão do texto/identidade */
            font-weight: 700;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 6px 16px;
            border-radius: 50px !important; /* Bordas arredondadas completas */
            display: inline-block;
            margin-top: 4px;
            margin-bottom: 25px;
        }
        .user-casting-inline {
            font-size: 0.85rem;
            opacity: 0.6;
            font-weight: 400;
            display: block;
            margin-top: 1px;
}



/* Efeito de Destaque Orgânico (igual à seção anterior) */
.destaque-casting {
    position: relative;
    z-index: 1;
    padding: 2px 18px;
    display: inline-block;
}

.destaque-casting::before {
    content: "";
    position: absolute;
    top: 10px; left: 0; width: 100%; height: 100%;
    z-index: -1;
    border-radius: 50px; 
}

.destaque-casting.pink {
    color: white; /* Cor da fonte específica neste destaque */
}

.destaque-casting.pink::before {
    background-color: var(--pink); /* #ff61b7 */
    transform: rotate(-2deg);
}

/* --- ESTRUTURA DO SLIDER NATIVO (CSS Scroll Snap) --- */

/* O Container Externo: Aplica a rotação e o arredondamento do layout */
.slider-casting-wrapper {
    width: 100%;
    max-width: 450px; /* Largura máxima provisória */
    margin: 0 auto;
    overflow: hidden; /* Corta as imagens que sobrarem */
    
    transform: rotate(15deg); 

}

/* CONTAINER DO SCROLL */
.slider-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: scroll; /* Força a barra de rolagem horizontal */
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ESCONDER BARRA DE ROLAGEM */
.slider-container::-webkit-scrollbar {
    display: none;
}

/* CADA SLIDE */
.slide {
    flex: 0 0 100%; /* O slide deve ocupar exatamente 100% da largura pai */
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    position: relative;
    transition: opacity 1.5s ease-in-out; /* Velocidade do Fade In */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Evita que o arraste da imagem interfira no scroll */
}

/* Reutilizando a animação floating que definimos na hero */
.floating {
    animation: float 6s ease-in-out infinite;
}

/* Ajustes Responsivos */
@media (max-width: 991px) {
    .titulo-casting { font-size: 2.8rem; }
    .slider-casting-wrapper { max-width: 300px; }
}
/* Ajuste específico para a tag Influência (cor da fonte) */
.card-orange .texto-card { color: white; }


/* --- AJUSTES SEÇÃO CASTING (PIXEL PERFECT) --- */

.casting-section {
    background-color: var(--lime); /* #d3ffa0 */
    padding: 100px 0;
    width: 100%;
    margin-top: -1px; /* Remove frestas se a seção de cima for de outra cor */
}




/* BADGES ORGÂNICOS */
.badge-org {
    display: inline-block;
    padding: 0 12px;
    border-radius: 40% 10% 45% 15% / 15% 45% 15% 40%;
    transform: rotate(-1.5deg);
}
.bg-pink { background-color: var(--pink) !important; }
.bg-lime { background-color: var(--lime) !important; }
.bg-purple { background-color: var(--purple) !important; }
.bg-orange { background-color: var(--orange) !important; }

/* BOTÕES */
.btn-beat {
    border: none;
    padding: 14px 45px;
    border-radius: 50px;
    font-family: 'Juturu';
    font-weight: 700;
    text-transform: lowercase;
    transition: 0.3s;
}
.btn-purple { background: var(--purple); color: white; }
.btn-lime { background: var(--lime); color: var(--purple); }

/* BIG NUMBERS */
.pill-outer { padding: 35px; border-radius: 100px 100px 0 0; text-align: center; }
.pill-inner { padding: 85px 20px; border-radius: 0 0 100px 100px; margin-top: -2px; }
.text-lime { color: var(--lime) !important; }

/* CARDS SERVIÇOS */
.card-beat { padding: 40px; color: white; min-height: 300px; border-radius: 45px 12px 85px 12px; }
.tag { display: inline-block; background: rgba(255,255,255,0.25); padding: 6px 16px; border-radius: 20px; font-size: 0.75rem; margin-bottom: 25px; font-weight: 700; }

/* FAIXAS E CASTING */
.faixa-evolucao { background-color: #ff61b7; }
.highlight-pink { background-color: var(--pink); color: white; padding: 2px 18px; border-radius: 12px; }
.casting { background-color: var(--lime); margin-top: -1px; }

.box-pink-tilted {
    width: 280px; height: 280px; background: var(--pink); border-radius: 45px;
    transform: rotate(12deg); margin: 0 auto;
}

/* ANIMAÇÕES */
.floating { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* RESPONSIVIDADE */
@media (max-width: 991px) {
    .navbar-collapse { background: var(--purple); padding: 20px; border-radius: 20px; margin-top: 10px; }
    h1 { font-size: 3.2rem; }
}

/* --- ESTILOS EXCLUSIVOS DA PÁGINA SOBRE --- */

/* --- AJUSTES PIXEL PERFECT SOBRE --- */

/* Fundo Roxo de base */
.main-wrapper {
    background-color: var(--purple);
    padding-top: 20px;
}

/* O "Card" Branco que sobe */
.content-white-card {
    border-radius: 80px 80px 0 0; /* Arredondamento largo do topo conforme layout */
    min-height: 100vh;
    margin-top: 20px;
}

/* Tipografia do Título (Juturu Medium) */
.titulo-sobre-layout {
    font-family: 'Juturu';
    font-weight: 500;
    font-size: 3rem;
    line-height: 1;
    color: #1a1a1a;
}

/* --- BIG NUMBERS VERSÃO SOBRE --- */

.bg-white-card { background-color: #ffffff; }

/* Bloco Rosa Superior */
.pill-top-pink {
    border-radius: 80px 80px 0 0;
    padding: 60px 40px 100px 40px;
}

.title-big-numbers-sm {
    font-weight: 700;
    font-size: 3.5rem;
}

.description-big-numbers {
    font-family: 'Juturu';
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Bloco Roxo Inferior */
.pill-bottom-purple {
    border-radius: 80px 80px 0 0 ;
    padding: 80px 20px;
    margin-top: -60px; /* Sobreposição */
    position: relative;
    z-index: 2;
}

.main-stat-sobre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.main-stat-sobre .number {
    font-weight: 700;
    font-size: 8rem;
    color: var(--lime);
}

.main-stat-sobre .label {
    font-family: 'Juturu';
    font-weight: 400;
    font-size: 3.5rem;
    color: white;
    line-height: 0.9;
    text-align: left;
}

/* Mini Cards (Rosa, Laranja, Verde) */
.mini-card-stat {
    padding: 25px 15px;
    border-radius: 30px;
    height: 100%;
}

.stat-val {
    display: block;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
}

.stat-desc {
    display: block;
    font-weight: 400;
    font-size: 0.9rem;
    margin-top: 5px;
}

/* Cores específicas dos cards */
.bg-orange { background-color: #f0a36b; }

/* Destaques (Pílulas arredondadas) */
.destaque-p {
    display: inline-block;
    padding: 0 15px;
    border-radius: 50px;

}
.p-pink { background-color: var(--pink); color: #000; }
.p-lime { background-color: var(--lime); color: #000; }

/* Texto do Corpo (Juturu Regular) */

.texto-corpo-sobre p {
    font-family: 'Juturu';
    font-weight: 400;
    font-size: 1.2rem;
    color: #4235c7;
    margin-bottom: 25px;
    line-height: 1.3;
}

.text-purple-dark {
    color: #4235c7 !important;
    font-size: 1.3em;
}



/* Cards Visão e Valores */

.vv{
    padding: 40px;

}
.card-v-v {
    padding: 50px 40px;
    border-radius: 60px; /* Bordas bem redondas conforme layout */
    height: 100%;
}

.bg-orange-beat { background-color: #f0a36b; }
.bg-lime-beat { background-color: var(--lime); }

.title-v-v {
    font-family: 'Juturu';
    font-weight: 600; /* ExtraBold */
    font-size: 3rem;
    margin-bottom: 20px;
}

.lista-v-v {
    list-style: none;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 400;
}

.lista-v-v li { margin-bottom: 5px; }

/* Mobile */
@media (max-width: 768px) {
    .content-white-card { border-radius: 40px 40px 0 0; }
    .titulo-sobre-layout { font-size: 2.5rem; }
    .card-v-v { border-radius: 30px; padding: 30px; }
}

/* Cards Visão e Valores */
.bg-orange-beat { background-color: #f0a36b !important; }

.card-sobre-box {
    padding: 50px;
    border-radius: 40px;
    height: 100%;
    color: white;
}

.title-v {
    font-weight: 700; /* ExtraBold conforme solicitado para h3 */
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.lista-valores {
    list-style: none;
    padding: 0;
}

.lista-valores li {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 10px;
}

/* Big Numbers Versão Sobre */
.pill-top-sobre { border-radius: 80px 80px 0 0; }
.pill-bottom-sobre { border-radius: 0 0 80px 80px; margin-top: -2px; }

.stat-main-sobre {
    font-weight: 700;
    font-size: 7rem;
}

.mini-card-white {
    background-color: white;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
}

.mini-card-white .num {
    display: block;
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--purple);
    line-height: 1;
}

.mini-card-white small {
    font-family: 'Juturu';
    font-weight: 400;
    color: var(--purple);
    opacity: 0.8;
}

/* --- SEÇÃO FUNDADORA & TIME --- */

.bg-lime-fundadora {
    background-color: var(--lime);
    width: 100%;
}

.titulo-fundadora {
    font-family: 'Juturu';
    font-weight: 500;
    font-size: 4rem;
    color: var(--purple);
    line-height: 0.9;
}

.texto-fundadora {
    font-family: 'Juturu';
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--purple);
    max-width: 450px;
}

.foto-inclinada-rosa {
  
}

/* FAIXA TIME */
.faixa-time {
    background-color: var(--lime);
    padding-bottom: 0;
    margin-bottom: -40px; /* Overlap com a seção laranja */
    position: relative;
    z-index: 1110;
}

.barra-rosa-inclinada {
    background-color: var(--pink);
    width: 110%;
    margin-left: -5%;
    padding: 20px 0;
    transform: rotate(-2deg);
    display: flex;
    justify-content: center;
}

.texto-faixa-time {
    font-family: 'Juturu';
    font-weight: 400;
    color: var(--purple);
    font-size: 3.5rem;
    transform: rotate(2deg); /* Deixa o texto reto */
}

/* GRADE DO TIME */
.secao-time-grade {
    background-color: #f0a36b;
    padding-top: 80px;
}

.membro-avatar {
    width: 180px;
    height: 180px;
    background-color: #000; /* Preto conforme layout */
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
}

.membro-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.membro-info p {
    font-family: 'Juturu';
    font-size: 1.1rem;
}

/* Mobile */
@media (max-width: 768px) {
    .titulo-fundadora { font-size: 3rem; }
    .membro-avatar { width: 130px; height: 130px; }
    .texto-faixa-time { font-size: 2rem; }
}


/* --- SEÇÃO FINAL SOBRE --- */

.secao-final-sobre {
    background-color: #d3ffa0; /* Fundo laranja da seção anterior */
}

.container-rosa-final {
    background-color: var(--pink); /* #ff61b7 */
    border-radius: 80px 80px 0 0;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.frase-final {
    font-family: 'Juturu';
    font-weight: 500; /* Medium */
    font-size: 5.5rem;
    line-height: 0.9;
}

/* Estilo da pílula "a batida" */
.pill-batida {
    background-color: var(--purple); /* #4235c7 */
    color: white;
    padding: 5px 40px;
    border-radius: 100px;
    display: inline-block;
    font-size: 4.5rem;
    margin-top: 10px;
    /* Leve inclinação para bater com o layout */
    transform: rotate(-2deg);
}

/* Wrapper da Ilustração */
.wrapper-ilustracao {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.img-mascote {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    /* Animação suave para dar vida ao mascote */
    animation: floating 4s ease-in-out infinite;
}


/* --- CASTING GRID --- */

.content-white-card {
    background-color: #ff61b6;
}

.container-pink-card {
    background-color: var(--pink); /* Rosa vibrante */
    border-radius: 80px 80px 0 0; /* Arredondamento largo no topo */
    padding-top: 60px;
    padding-bottom: 100px;
}

.titulo-casting-page {
    font-family: 'Juturu';
    font-weight: 400; /* Regular */
    font-size: 3.8rem;
    color: white;
    line-height: 1.1;
}

.pill-exclusivos {
    background-color: var(--lime);
    color: var(--purple);
    padding: 0 20px;
    border-radius: 50px;
    display: inline-block;
}


.card-casting {
    cursor: pointer;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

.card-casting:hover {
    transform: translateY(-10px);
}

.wrapper-foto-casting {
    background-color: #f0a36b; /* Cor laranja fictícia do layout */
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 35px; /* Bordas bem arredondadas conforme o print */
    overflow: hidden;
    transition: transform 0.3s ease;
}

.wrapper-foto-casting img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-casting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(66, 53, 199, 0.7); /* Roxo com transparência */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay-casting span {
    color: var(--lime);
    font-weight: 700;
    border: 2px solid var(--lime);
    padding: 5px 15px;
    border-radius: 50px;
    text-transform: uppercase;
}


.nome-casting {
    font-family: 'Juturu';
    font-weight: 300;
    color: white;
    margin-top: 15px;
    font-size: 1.3rem;
}

/* --- LIGHTBOX MODAL --- */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content-beat {
    background-color: #fff;
    border-radius: 50px;
    width: 100%;
    max-width: 900px;
    position: relative;
    overflow: hidden;
}

.close-modal {
    position: absolute;
    right: 25px;
    top: 15px;
    font-size: 40px;
    color: var(--purple);
    cursor: pointer;
    z-index: 10;
}

.modal-img-container {
    height: 100%;
    min-height: 400px;
}

.modal-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-pink { color: var(--pink); }

/* Ajuste do botão custom para versão menor */
.btn-beat-custom.small {
    font-size: 0.9rem;
    padding: 10px 20px;
}


/* Faixa Final Casting */
.faixa-casting {
    background-color: var(--pink);
}

.barra-verde-casting {
    background-color: var(--lime);
    width: 100%;
    padding: 30px 0;
    text-align: center;
    transform: rotate(-2deg); /* Leve inclinação */
}

.texto-barra-casting {
    font-family: 'Juturu';
    font-weight: 400;
    font-size: 3.5rem;
    margin: 0;
}

/* Cores específicas da faixa final */
.text-pink { color: var(--pink) !important; }
.text-orange { color: #f0a36b !important; }

/* Ajuste Responsivo */
@media (max-width: 768px) {
    .titulo-casting-page { font-size: 2.2rem; }
    .container-pink-card { border-radius: 40px 40px 0 0; }
    .texto-barra-casting { font-size: 1.8rem; }
}


/* --- PÁGINA DE MARCAS --- */


.main-marcas {
    background-color: var(--purple);
}


/* Estilo do Título igual ao Layout */
.titulo-marcas-layout {
    font-weight: 700; /* ExtraBold */
    font-size: 5.5rem;
    line-height: 0.9;
    margin-bottom: 40px;
}

.container-fluid.px-0 {
    margin: 0;
    padding: 0;
}

.text-pink { color: var(--pink) !important; }

.text-purple{
    color: #4235c7;
}
/* Blocos de Marcas */
/* RESET DE ESPAÇAMENTO PARA MARCAS */
.bloco-marcas-full {
    width: 100% !important;
    margin-bottom: 0 !important; /* Zera a margem inferior */
    margin-top: 0 !important;    /* Zera a margem superior */
    padding: 0 !important;       /* Remove qualquer respiro interno */
    line-height: 0;              /* Remove o espaço de respiro de fontes/inline */
    display: block;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.img-marca-bloco {
    width: 100% !important;
    height: auto !important;
    display: block !important;   /* Remove o espaço "ghost" que imagens geram na base */
    margin: 0 !important;
}

/* Removendo o gap da Row do Bootstrap caso você esteja usando uma */
.row.g-4, .row.gy-4 {
    --bs-gutter-y: 0 !important; /* Zera o espaçamento vertical entre colunas da Row */
}


.main-marcas .pill-bottom {
    background-color: white;
    position: relative;
    z-index: 2;
}

/* Estatística +500 marcas atendidas */
.main-marcas .main-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.main-marcas .main-stat .number {
    font-weight: 700; /* Extrabold */
    font-size: 8rem;
    color: #ff61b7;
    line-height: 1;
}

.main-marcas .main-stat .label {
    font-weight: 400; /* Regular */
    font-size: 3.5rem;
    color: #4235c7;
    line-height: 0.9;
    text-align: left;
}

/* Descrição em Caps */
.main-marcas .description-stat {
    color: #4235c7;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    opacity: 0.9;
    line-height: 1.4;
}


/* INTERAÇÃO: 100% OPACITY NO HOVER OU CLIQUE */
.bloco-marcas-full:hover,
.bloco-marcas-full.active {
    opacity: 1;
}

/* Responsividade */
@media (max-width: 768px) {
    .titulo-marcas-layout {
        font-size: 3rem;
    }
    .content-white-card {
        border-radius: 40px 40px 0 0;
    }
}

/* --- PÁGINA SERVIÇOS FIDELIDADE --- */

.main-wrapper-servicos {
    background-color: var(--purple);
    margin-top:40px;
}

.content-white-card-servicos {
    background-color: #ffffff;
    border-radius: 80px 80px 0 0;
}

.titulo-intro-servicos {
        font-weight: 400;
    font-size: 3.5rem;
    line-height: 1.1;
    color: #1a1a1a;
}

.badge-conectam {
    background-color: var(--pink);
    color: var(--purple);
    padding: 0 15px;
    border-radius: 50px;
    font-weight: 500;
}

/* Estilo das Pílulas de Serviço */
.secao-pill {
    border-radius: 80px 80px 0 0;
    padding: 80px 20px;
    margin-top: -80px !important; 
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    z-index: 1;
    padding-bottom: 200px;
}

.bg-purple-beat { background-color: var(--purple) !important; }
.bg-orange-beat { background-color: #f0a36b !important; }

.titulo-servico-pill {
    display: inline-block;
    font-family: 'Juturu';
    font-weight: 500;
    font-size: 3rem;
    padding: 10px 40px;
    border-radius: 50px;
    margin-bottom: 30px;
    color: white;
}

.badge-purple-pill { background-color: var(--purple); color: white; }
.badge-pink-pill { background-color: var(--pink); color: white; }
.badge-lime-pill { background-color: var(--lime); color: var(--purple); }

.texto-servico-pill {
    font-family: 'Juturu';
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.5;
    max-width: 95%;
}

/* Frase Final */
.frase-final-servicos {
    font-family: 'Juturu';
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.9;
}

.pill-batida-purple {
    background-color: var(--purple);
    color: white;
    padding: 5px 40px;
    border-radius: 100px;
    display: inline-block;
    margin-top: 10px;
}

.wrapper-ilustracao-servicos {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fundo-lime-servicos {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: var(--lime);
    border-radius: 40px;
    transform: rotate(-15deg);
}

.mascot-float {
    position: relative;
    z-index: 2;
    max-width: 250px;
}


/* footer */

footer {
    /* Cria a curva no topo para casar com o resto do site */
    /* Garante que ele suba um pouco para não sobrar espaço branco */
    margin-top: -60px; 
    position: relative;
    z-index: 10;
    letter-spacing: 1px;
}

.social-footer a {
    transition: all 0.3s ease;
    display: inline-block;
}

/* Cada ícone brilha com uma cor da agência ao passar o mouse */
.social-footer a:hover {
    transform: translateY(-5px); /* Ele dá um pulinho */
}

.social-footer a:nth-child(1):hover { color: var(--pink) !important; } /* Instagram */
.social-footer a:nth-child(2):hover { color: var(--lime) !important; } /* Facebook */
.social-footer a:nth-child(3):hover { color: #f0a36b !important; }    /* LinkedIn (Laranja) */


/* Container que segura a imagem no modal */
.modal-img-container {
    padding: 10px; /* Isso cria o respiro visual de 5px em cada lado da imagem */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: transparent; /* Garante que não haja fundo estranho */
}

/* A imagem propriamente dita */
#modalImg {
    width: 100%;
    height: auto;
    border-radius: 20px; /* Bordas arredondadas de 20px conforme pedido */
    object-fit: cover;
    display: block;
}



@media (max-width: 991px) {
    /* 1. Diminui a largura total do modal no mobile */
    .modal-content-beat {
        width: 80% !important; /* Deixa uma margem maior nas laterais */
        max-width: 450px;      /* Define um limite máximo para não ficar gigante */
        margin: 0 auto;
        border-radius: 10px;
    }

    /* 2. Ajusta a altura da imagem para o modal ficar mais curto */
    .modal-img-wrapper {
        height: 250px !important; /* Diminui a foto para o texto subir */
    }

    /* 3. Reduz os paddings internos para compactar o texto */
    .modal-body-text {
        padding: 20px !important; 
    }

    /* 4. Diminui os textos internos para caber em telas pequenas */
    #modalNome { font-size: 1.5rem !important; }
    #modalDesc { font-size: 0.85rem !important; line-height: 1.4; }
}


/* Ajustes Responsivos */
@media (max-width: 768px) {
    .main-stat { flex-direction: column; gap: 0; }
    .main-stat .number { font-size: 5rem; }
    .main-stat .label { font-size: 2rem; text-align: center; }
    .title-big-numbers { font-size: 2.5rem; }
    .pill-top, .pill-bottom { border-radius: 40px 40px 0 0;}
    .txt{ font-size: 3.0em; padding: 40px;}
    .titulo-sobre{ font-size: 3.0em; padding: 40px;}
    .texto-sobre{padding: 0px 40px 0px 40px;}
    .texto-corpo-sobre{padding: 0px 40px 0px 40px;}
    .card-v-v {top: 10px}
    .main-stat-sobre { flex-direction: column; }
    .main-stat-sobre .number { font-size: 5rem; }
    .main-stat-sobre .label { font-size: 2rem; text-align: center; }
    .pill-top-pink, .pill-bottom-purple { border-radius: 40px 40px 0 0;}
    .bg-lime-fundadora{padding: 40px;}
    .frase-final{padding: 40px;}
    .texto-servico-pill {padding: 40px;}
    .titulo-servico-pill {margin-left: 40px;}
    .faixa-evolucao-overlap{display: none;}
    .frase-final{font-size: 3em}
    .pill-batida{font-size: 1em}

}
}