/* 
  ========================================
  VARIÁVEIS DE PERSONALIZAÇÃO (CSS VARIABLES)
  ========================================
*/
:root {
    /* Cores da Identidade Visual (Baseado na Imagem) */
    --blue-primary: #0DA7FD;        /* Azul Vibrante (Fundo Hero, Diferencial, Captura) */
    --orange-cta: #FD990D;          /* Laranja (Botões de Ação) */
    --orange-hover: #e67a00;        /* Laranja Escuro (Hover) */
    --dark-bg: #0f1115;             /* Preto/Cinza muito escuro (Seção Gestão) */
    --text-white: #ffffff;          /* Texto sobre fundos escuros/azuis */
    --text-dark: #1e293b;           /* Texto sobre fundos claros */
    
    /* Cores dos Cards de Modalidade */
    --card-jiu: #282828;            /* Preto */
    --card-boxe: #D20000;           /* Vermelho */
    --card-judo: #0D6DFD;           /* Azul */
    --card-karate: #FD990D;         /* Amarelo/Laranja */
    --card-muay: #5DDF18;           /* Verde */
    --card-wrestling: #710DFD;      /* Roxo */

    /* Layout */
    --container-width: 1100px;
    --border-radius: 12px;
    --font-family: 'Inter', sans-serif;
}

/* RESET BÁSICO */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { 
    scroll-behavior: smooth; 
    font-family: var(--font-family);
    overflow-x: hidden; /* Garante que não haja scroll lateral no HTML */
    width: 100%;
}
body { 
    line-height: 1.5; 
    overflow-x: hidden; /* Garante que não haja scroll lateral no Body */
    background-color: #f5f5f5; 
    width: 100%;
    position: relative; /* Ajuda a conter elementos absolutos */
}

/* UTILITÁRIOS */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* Imagem mobile escondida no desktop */
.hero-image-mobile {
    display: none;
}

/* Label mobile escondida no desktop */
.cta-label {
    display: none;
}

/* =========================================
   ESTILOS DE UTILIDADE
   ========================================= */
h1, h2, h3, h4, h5, h6, .cta-label {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.mobile-break { display: none; }
.mobile-hidden { display: block; }

@media (max-width: 768px) {
    .mobile-break { display: inline; }
    .mobile-hidden { display: none !important; }
}

/* ==========================================================================
   CONFIGURAÇÃO DE IMAGENS (Edite aqui para ajustar cada imagem individualmente)
   ========================================================================== */

/* --- IMAGEM 1: HERO (Atletas) --- */
.hero-img {
    max-width: 120%; /* Um pouco maior para "sair" do container se precisar */
    width: 110%;
    margin-right: -10%; /* Compensar o width maior */
    filter: none; /* Removido drop-shadow conforme solicitado */
}

/* --- IMAGEM 2: O PROBLEMA (Background Escuro) --- */
.problem-bg-img {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    object-fit: cover;
    opacity: 0.5; /* Ajuste a opacidade para deixar mais escuro ou claro */
    z-index: 0;
}

/* --- IMAGEM 3: DIFERENCIAL (Celular App) --- */
.diff-img {
    width: 100%;
    display: block;
    transform: scale(1.1); /* Leve zoom apenas */
    transform-origin: bottom left;
}

/* --- IMAGEM 4: GESTÃO (Dashboard) --- */
/* (Esta classe será usada quando você substituir o placeholder pela imagem real) */
.mgmt-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: none; /* Removido sombra conforme solicitado */
    display: block;
}

/* --- LOGO (Header e Footer) --- */
.logo-img {
    width: 300px; /* Largura do logo */
    height: auto;
}

/* ========================================================================== */

/* Placeholder de Imagem (Estilo para facilitar para o usuário) */
.img-placeholder {
    background-color: #ccc;
    border: 4px dashed #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    min-height: 300px;
    width: 100%;
    position: relative;
}
.img-placeholder span {
    background: #f5f5f5;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* BOTÕES */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 24px 32px;
    font-weight: 700;
    border-radius: 12px; /* Padrão quadrado arredondado */
    transition: all 0.3s ease;
    text-align: center;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: linear-gradient(135deg, #FD990D 0%, #FA732D 100%);
    color: white;
    box-shadow: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FA732D 0%, #FD990D 100%);
    transform: translateY(-3px);
    box-shadow: none;
}

.btn-block { display: flex; width: 100%; }

/* =========================================
   SEÇÕES
   ========================================= */

/* 1. HERO SECTION (Azul) */
.hero {
    background: radial-gradient(circle at 75% 50%, #0DA7FD 0%, #053B8C 70%); /* Gradiente radial ajustado para sair de trás da imagem (direita) */
    color: var(--text-white);
    min-height: 100vh; /* Ocupa 100% da altura da viewport */
    display: flex; /* Flex para centralizar verticalmente */
    align-items: center; /* Esticar para que o container possa ter 100% de altura */
    padding: 0; /* Remove padding fixo para usar flex */
    position: relative;
    overflow: hidden;
}

.hero .container {
    width: 100%; /* Garante que o container ocupe a largura disponível dentro do flex */
    height: 100%; /* Altura total para posicionamento absoluto funcionar em relação ao container */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o conteúdo (texto) verticalmente */
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 1;
    opacity: 0.07; /* Ruído bem suave e integrado */
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.nav-logo {
    margin-bottom: 16px; /* Ajuste para gap menor */
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    width: 300px; /* Largura fixa conforme solicitado */
    height: auto;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 16px;
    padding: 0; /* Remove padding inferior */
}

.hero-text h1 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 32px; /* Ajuste para 32px */
    font-weight: 800;
}

.hero-text h1 span { color: #80bfff; /* Azul mais claro para destaque */ }

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 40px; /* Ajuste para 40px */
    opacity: 0.9;
    max-width: 450px;
}

.hero-image-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.hero-img {
    max-width: 120%; /* Um pouco maior para "sair" do container se precisar, estilo "pop-out" */
    width: 110%;
    margin-right: -10%; /* Compensar o width maior */
    filter: none; /* Removido drop-shadow conforme solicitado */
}

/* 2. PROBLEMA (Fundo Escuro com Imagem) */
.problem {
    background-color: #000;
    color: white;
    padding: 100px 0;
    position: relative;
    text-align: center;
}

/* Overlay para escurecer a imagem de fundo do problema */
.problem-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Escurece a imagem */
    z-index: 1;
}

/* Container para a imagem de fundo (Usuário vai colocar aqui) */
.problem-bg-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.5;
    z-index: 0;
}

.problem .container { z-index: 2; } /* Texto acima do overlay */

.problem h2 {
    font-size: 2.5rem;
    max-width: 900px; /* Aumentado para permitir quebra em 2 linhas mais confortável */
    margin: 0 auto 40px;
    line-height: 1.2;
}

.problem-content-centered {
    display: flex;
    justify-content: center;
}

.problem-list {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 10px 60px;
    font-size: 1.2rem;
}

.problem-list li {
    margin-bottom: 15px;
    list-style: none;
    position: relative;
    padding-left: 30px;
}

.problem-list li::before {
    content: "•";
    color: var(--orange-cta);
    font-size: 2rem;
    position: absolute;
    left: 0;
    top: -10px;
}

/* 3. DIFERENCIAL (Azul) */
.differential {
    background: linear-gradient(135deg, #0DA7FD 0%, #053B8C 100%);
    color: white;
    padding-top: 100px;
    padding-bottom: 0; /* Removido padding inferior para a imagem colar na borda */
    overflow: hidden; /* Garante que nada vaze */
    position: relative; /* Contexto de posicionamento para a imagem absoluta */
}

.diff-grid {
    display: flex;
    justify-content: flex-end; /* Texto alinhado à direita */
    position: relative;
    padding-bottom: 100px; /* Espaço para o texto não colar no fundo, já que a seção não tem padding */
}

.diff-image-container {
    position: absolute;
    bottom: 0; /* Alinhado ao fundo (end) */
    left: 0; /* Alinhado à esquerda (start) */
    width: 55%; 
    max-width: 650px;
    z-index: 1;
}

.diff-text {
    width: 50%; /* Ocupa metade da largura */
    position: relative;
    z-index: 2; /* Garante que o texto fique sobre a imagem se houver sobreposição */
}



.diff-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.1;
    font-weight: 800; /* Peso extra bold */
}

.diff-text p { 
    margin-bottom: 30px; 
    font-size: 1.1rem; 
    font-weight: 400; /* Peso regular */
    opacity: 0.9; 
}

.steps-mini { margin-bottom: 30px; }
.steps-mini h4 { 
    margin-bottom: 5px; 
    color: white; /* Alterado de laranja para branco conforme pedido */
    font-weight: 700; /* Peso bold para destaque */
    font-size: 1.1rem;
}
.steps-mini p { 
    margin-bottom: 20px; 
    font-size: 1rem;
    font-weight: 400; /* Peso regular */
    opacity: 0.8; /* Leve transparência para hierarquia */
}

/* 4. GESTÃO COMPLETA (Escuro) */
.management {
    background-color: var(--dark-bg);
    color: white;
    padding: 100px 0;
}

.mgmt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    position: relative; /* Referência para o posicionamento absoluto da imagem */
}

.mgmt-text h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.mgmt-list li {
    list-style: none;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mgmt-list li span { color: var(--blue-primary); font-weight: bold; }

/* Ajuste da Imagem da Gestão (Breakout) */
.mgmt-image-container {
    position: absolute;
    top: -220px; /* Sobe sobre a seção anterior */
    right: 0px; /* Vaza para a direita */
    width: 60%; /* Tamanho controlado */
    z-index: 10; /* Fica acima de tudo */
}

.mgmt-img {
    width: 100%;
    transform: rotate(-3deg); /* Leve inclinação */
    display: block;
}

/* 5. PARA QUEM É (Modalidades) */
.modalities {
    background-color: #f5f5f5;
    padding: 100px 0;
    text-align: center;
}

.modalities h2 {
    color: var(--text-dark);
    font-size: 2.2rem;
    max-width: 700px;
    margin: 0 auto 50px;
}

.mod-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    max-width: 100%;
    margin: 0 auto;
}

.mod-card {
    padding: 30px 10px;
    border-radius: 15px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-weight: 700;
    transition: transform 0.3s;
}

.mod-card:hover { transform: translateY(-5px); }

.mod-icon { font-size: 2rem; }

/* Cores Específicas dos Cards */
.bg-jiu { background-color: var(--card-jiu); }
.bg-boxe { background-color: var(--card-boxe); }
.bg-judo { background-color: var(--card-judo); }
.bg-karate { background-color: var(--card-karate); }
.bg-muay { background-color: var(--card-muay); }
.bg-wrestling { background-color: var(--card-wrestling); }

/* 6. BETA / CAPTURA (Azul) */
.capture-section {
    background: radial-gradient(circle at 75% 50%, #0DA7FD 0%, #053B8C 70%);
    padding: 100px 0;
    text-align: center;
    color: white;
    position: relative;
    z-index: 10; /* Garante que o dropdown fique sobre o rodapé */
}

.capture-section h2 {
    font-size: 2rem;
    margin-bottom: 16px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.capture-section p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.form-wrapper {
    background: transparent;
    padding: 0;
    box-shadow: none;
    max-width: 700px;
    margin: 0 auto;
    color: var(--text-dark);
}

.input-group label {
    text-align: left;
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #64748b;
}

.input-group input, .input-group select {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    margin-bottom: 20px;
    font-family: inherit;
}

.privacy-note {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 20px;
}

/* FOOTER */
footer {
    background-color: #f5f5f5;
    padding: 40px 0;
    text-align: center;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
}

.footer-logo {
    margin-bottom: 20px;
    display: inline-block;
}

/* Ajuste para o logo no fundo claro do footer */
/* .footer-logo-img removido pois o logo do footer será outro */

/* RESPONSIVIDADE (Mobile e Tablet) */
@media (max-width: 1024px) {
    .hero {
        padding-top: 20px; /* Reduzido de 40px */
        align-items: flex-start; /* Permite rolar se o conteúdo for maior que a tela */
        min-height: auto; /* Remove altura mínima fixa para mobile */
        padding-bottom: 40px;
    }

    .hero-content, .diff-grid, .mgmt-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px; /* Reduzido gap */
    }
    
    .hero-text h1 { 
        font-size: 1.8rem; /* Reduzido de 2rem */
        margin-bottom: 12px;
        line-height: 1.1;
    }

    .hero-text p {
        font-size: 0.95rem; /* Levemente reduzido */
        margin-bottom: 16px;
        line-height: 1.4;
    }
    
    .problem-list { 
        text-align: left; 
        grid-template-columns: 1fr; /* 1 coluna no mobile */
        grid-auto-flow: row; /* Volta ao fluxo normal */
        grid-template-rows: auto;
    }
    
    .hero-image-container, .diff-image-container, .mgmt-image-container {
        order: -1;
        margin-bottom: 20px;
    }
    
    /* Esconde container original da imagem no mobile */
    .hero-image-container { 
        display: none;
    }

    /* Exibe e estiliza a imagem mobile */
    .hero-image-mobile {
        display: block;
        width: 100%;
        max-width: 380px; /* Reduzido max-width */
        margin: 10px auto; /* Reduzido margin */
    }

    .hero-image-mobile img {
        width: 100%;
        height: auto;
    }

    /* Centralização do Hero */
    .hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .nav-logo {
        margin: 0 auto 10px auto; /* Reduzido margin */
        justify-content: center;
    }
    
    .nav-logo img {
        width: 180px; /* Reduzido tamanho do logo */
    }

    .cta-label {
        margin-bottom: 8px;
        font-size: 0.85rem;
        display: block; /* Exibe no mobile */
    }
    
    .hero .btn {
        width: 100%;
        max-width: 100%;
        padding: 14px 20px; /* Reduzido padding */
        /* Mantém display flex e alinhamento centralizado do desktop */
    }
    
    .hero .btn span {
        text-align: center;
        line-height: 1.2;
    }

    .hero-img {
        width: 100%;
        max-width: 400px; /* Limitar tamanho no mobile */
        margin-right: 0;
    }
    
    .diff-image-container {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%; /* Largura total */
        max-width: none; /* Remove limitação para ficar grande como na imagem */
        margin: 0;
        order: 2;
        display: flex;
        justify-content: center;
        overflow: hidden; /* Corta o excesso se necessário */
    }
    
    .diff-img {
        width: 140%; /* Aumenta a imagem para vazar as bordas (efeito zoom) */
        max-width: 600px; /* Limite de segurança aumentado */
        transform: none; /* Centraliza pelo flexbox */
    }

    /* Ajustes específicos da Seção 3 (Diferencial) Mobile */
    .differential {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
        padding-top: 60px; /* Mais espaço no topo */
    }

    .differential .container {
        order: 1; 
    }

    .diff-grid {
        padding-bottom: 20px; 
        gap: 20px;
    }
    
    .diff-text h2 {
        font-size: 2rem; /* Título grande */
        line-height: 1.1;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .diff-text p {
        font-size: 1.1rem;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 30px;
        padding: 0 10px; /* Margem lateral para não colar na borda */
        opacity: 0.9;
    }

    /* Exibe elementos no mobile (Steps e Botão) */
    .diff-text .steps-title {
        display: block;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 800;
        margin-bottom: 20px;
        text-decoration: underline;
        text-decoration-color: var(--blue-primary); /* Azul claro se possível, ou branco */
        text-underline-offset: 4px;
    }

    .diff-text .steps-mini {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
        text-align: center;
    }

    .diff-text .step-col {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .diff-text .step-item h4 {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }
    
    .diff-text .step-item p {
        margin-bottom: 0;
        font-size: 1rem;
    }

    .diff-text .btn {
        display: inline-flex; /* Volta a exibir o botão */
        width: 100%; /* Largura total no mobile */
        margin-bottom: 0; /* Cola na imagem */
    }

    .diff-text { width: 100%; }

    .mgmt-grid {
        display: flex;
        flex-direction: column;
        padding-top: 60px; /* Ajustado padding */
        gap: 40px; /* Gap entre texto e imagem */
    }

    .mgmt-image-container {
        position: relative; 
        top: auto; 
        right: auto;
        width: 100%;
        margin-bottom: 0;
        order: 2; /* Imagem depois */
        display: flex;
        justify-content: center;
        z-index: 10;
        overflow: visible;
    }

    .mgmt-img {
        width: 120%; /* Imagem grande */
        max-width: 500px;
        margin: 0 auto;
        transform: rotate(-3deg);
        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
    }
    
    .mgmt-text {
        order: 1; /* Texto primeiro */
        text-align: center;
        width: 100%;
    }
    
    .mgmt-text h2 {
        font-size: 2rem;
        margin-bottom: 30px;
        line-height: 1.1;
    }
    
    .mgmt-list {
        display: inline-block; /* Para centralizar o bloco da lista */
        text-align: left; /* Mantém itens alinhados à esquerda visualmente */
        margin: 0 auto;
    }
    
    .mgmt-list li {
        justify-content: flex-start; /* Ícone e texto alinhados */
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .mod-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no mobile */
    }
}

/* =========================================
   ESTILOS EXTRAÍDOS DO HTML (FORMULÁRIO BREVO)
   (Originalmente estavam inline nas tags HTML)
   ========================================================================== */

/* Container Geral do Formulário */
.sib-form {
    text-align: center;
}

/* Mensagens de Erro e Sucesso (Topo) */
.sib-form-message-panel {
    font-size: 16px;
    text-align: left;
    font-family: 'Helvetica', sans-serif;
    color: #661d1d;
    background-color: #ffeded;
    border-radius: 3px;
    border-color: #ff4949;
    max-width: 540px;
}

#success-message {
    color: #085229;
    background-color: #e7faf0;
    border-color: #13ce66;
}

/* Container Principal do Formulário (sib-container) */
/* Nota: Alguns destes estilos são sobrescritos nas regras abaixo com !important */
#sib-container {
    text-align: center;
    background-color: rgba(255,255,255,1);
    max-width: 540px;
    border-radius: 16px;
    border-width: 0px;
    border-color: #C0CCD9;
    border-style: solid;
    direction: ltr;
}

/* Wrappers dos Inputs (Espaçamento) */
.sib-input-wrapper {
    padding: 8px 0;
}

/* Labels dos Campos */
.entry__label {
    font-weight: 700;
    text-align: left;
    font-size: 16px;
    font-family: 'Helvetica', sans-serif;
    color: #3c4858;
}

/* Mensagens de Erro dos Campos (Abaixo do input) */
.entry__error {
    font-size: 16px;
    text-align: left;
    font-family: 'Helvetica', sans-serif;
    color: #661d1d;
    background-color: #ffeded;
    border-radius: 3px;
    border-color: #ff4949;
}

/* Input Multiselect (Texto Centralizado) */
.input--centerText {
    padding-right: 0px !important;
}

/* Menu Dropdown (Multiselect) */
.sib-menu {
    text-align: left;
}

/* Itens do Menu (Choices) */
.entry__choice {
    text-indent: 0px;
}

/* Wrapper do Botão */
.sib-btn-wrapper {
    text-align: center;
}

/* Botão de Envio (Estilos Base do Brevo) */
/* Nota: Estilos visuais são sobrescritos pelo tema do site mais abaixo */
.sib-form-block__button-with-loader {
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    font-family: 'Helvetica', sans-serif;
    color: #FFFFFF;
    background-color: #fca203;
    border-radius: 3px;
    border-width: 0px;
}

/* =========================================
   FIXES E OVERRIDES (Brevo Form & Design)
   ========================================= */

/* Dropdown Menu Fix */
.sib-menu {
    z-index: 9999 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.sib-menu__apply {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

.sib-menu__item .checkbox {
    border-radius: 4px !important;
}

/* Form Container & Inputs */
#sib-container {
    background-color: #ffffff !important; /* Fundo branco (Card) */
    border-radius: 20px !important; /* Arredondamento moderno */
    padding: 50px 40px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important; /* Sombra mais suave e difusa */
    border: 1px solid rgba(255,255,255,0.1) !important; /* Borda sutil */
    font-family: 'Inter', sans-serif !important;
    max-width: 100% !important; /* Ocupa a largura do wrapper */
    width: 100% !important; /* Força largura total */
    margin: 0 auto !important;
    text-align: left !important; /* Alinha labels à esquerda */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    box-sizing: border-box !important; /* Garante que padding não estoure largura */
}

/* Força largura total em todos os containers internos */
.sib-input-wrapper,
.sib-form-block,
.form__entry,
.entry_block,
.entry__field,
.form__label-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.sib-input-wrapper {
    padding: 0 !important; /* Remove padding extra do wrapper */
}

#sib-container:hover {
    transform: translateY(-5px) !important; /* Leve flutuação ao passar o mouse no form */
    box-shadow: 0 30px 60px rgba(0,0,0,0.2) !important;
}

.form__label-row {
    display: block !important;
}

.sib-form-block {
    padding: 0 !important;
    margin-bottom: 24px !important; /* Mais espaço entre os blocos */
}

/* Labels Visíveis e Estilizadas */
.entry__label {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important; /* Peso regular/médio conforme imagem */
    color: #1e293b !important; /* Texto escuro */
    font-size: 1rem !important; /* Tamanho levemente maior */
    margin-bottom: 8px !important;
    text-align: left !important;
    letter-spacing: normal !important;
    text-transform: none !important; /* Remove uppercase */
}

/* Asterisco oculto (conforme imagem 2) */
.entry__label::after {
    display: none !important;
}

/* Remove borda do container do campo (solicitado pelo usuário) */
.sib-form .entry__field {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Estilo dos Inputs (Borda Simples e Limpa) */
.input {
    background-color: #ffffff !important; /* Fundo branco */
    border: 1px solid #cbd5e1 !important; /* Borda simples de 1px */
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-family: 'Inter', sans-serif !important;
    color: #334155 !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    width: 100% !important;
    outline: none !important; /* Garante sem outline do navegador */
    box-shadow: none !important; /* Garante sem sombra/borda extra */
}

.input:focus {
    background-color: #ffffff !important;
    border: 1px solid var(--blue-primary) !important; /* Apenas muda a cor da borda */
    box-shadow: none !important; /* Sem sombra extra */
    outline: none !important;
}

.input:hover {
    background-color: #ffffff !important;
    border-color: #94a3b8 !important; /* Escurece levemente a borda no hover */
}

.input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* Ajuste específico para o multiselect (Modalidade) */
.sib-multiselect .input {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    color: #94a3b8 !important; /* Cor de placeholder para o texto inicial */
}

/* Quando houver seleção (Brevo muda o texto), mudar a cor para escuro */
/* Nota: Isso pode exigir JS se o Brevo não adicionar classes, mas tentaremos estilizar o padrão */

/* Seta do dropdown (Lado direito) - REMOVIDO PARA EVITAR DUPLICIDADE */
/* .sib-multiselect .input::after {
    content: "▼" !important; 
    font-size: 0.8rem !important;
    color: #64748b !important;
    margin-left: 10px !important;
    font-weight: bold !important;
    transform: none !important;
} */

/* Botão do Formulário (Estilo Hero - Full Width) */
.sib-form-block__button {
    background: linear-gradient(135deg, #FD990D 0%, #FA732D 100%) !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important; /* Texto maior */
    text-transform: none !important; /* Texto normal, não uppercase */
    letter-spacing: normal !important;
    border-radius: 8px !important;
    padding: 18px 20px !important;
    width: 100% !important; /* Full width */
    min-width: unset !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 10px 0 0 0 !important; /* Margem reduzida */
    height: auto !important;
    box-shadow: 0 4px 15px rgba(253, 153, 13, 0.3) !important;
}

.sib-form-block__button:hover {
    background: linear-gradient(135deg, #FA732D 0%, #FD990D 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(253, 153, 13, 0.4) !important;
}

.sib-form-block__button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(253, 153, 13, 0.3) !important;
}

/* Container do botão ocupa 100% */
.sib-form-block:has(.sib-form-block__button) {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

.sib-btn-wrapper {
    width: 100% !important;
    text-align: center !important;
}

/* Responsividade do Formulário */
@media (max-width: 768px) {
    /* Reseta restrições do container do formulário Brevo */
    .sib-form-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Força o card a ter a largura da tela menos 16px (8px de cada lado) */
    body #sib-container {
        padding: 30px 20px !important;
        border-radius: 16px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        /* Centraliza baseando-se na viewport para ignorar padding do pai */
        margin-left: calc(50% - 50vw + 8px) !important;
        margin-right: calc(50% - 50vw + 8px) !important;
        box-sizing: border-box !important;
    }
    
    .sib-form-block__button {
        width: 100% !important; /* Botão full width no mobile */
        padding: 16px 20px !important;
    }
}

/* Ajuste de altura da Hero para telas maiores que notebook (Desktop Large) */
@media (min-width: 1441px) {
    .hero {
        min-height: 85vh; /* Reduz altura em telas grandes para não ocupar 100% da viewport */
    }
}