/* --- RESET GERAL E CORREÇÃO DE ROLAGEM LATERAL --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que bordas e espaçamentos não aumentem o tamanho total do elemento */
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Esta é a regra mágica que proíbe a rolagem e a barra branca lateral */
}

/* Opcional, mas recomendado: Garante que as imagens nunca vazem a tela */
img {
    max-width: 100%;
    height: auto;
}


/*JANELA COOKIES*/


.cookie-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 300px;
    background-color: #2c3e50;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-family: sans-serif;
    z-index: 9999;
    display: none; /* Começa escondido até o JS verificar */
}

.cookie-container p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.cookie-container a {
    color: #12E1C3;
    text-decoration: none;
}

.cookie-btn {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}

.cookie-btn:hover {
    background-color: #2ecc71;
}



/*---------*/


/* SOBRE */


/* --- PREVENÇÃO DE CONFLITOS --- */
/* Não usamos * para não quebrar o Header (Bangers) */

.s-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    font-family: 'Inter', sans-serif;
}

/* --- HERO SECTION --- */
.s-hero {
    min-height: 85vh; /* Trocado 'height' por 'min-height' para evitar cortes de conteúdo */
    background: url('Image/image11.png') no-repeat center right / cover;
    display: flex;
    align-items: center;
    position: relative;
}

.s-hero-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    max-width: 40%;
    margin-left: 50px;
    margin-right: auto;
    border-radius: 20px;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.089); 
}

.s-hero-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.308);
}

.s-hero-card h2 { 
    font-size: 2.5rem; 
    font-weight: 900; 
    font-family: 'Bangers', cursive; 
    margin-bottom: 15px; 
}

.s-hero-card p {
    line-height: 1.5;
}

/* Seta Animada */
.s-scroll-arrow {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    animation: s-bounce 2s infinite;
}

@keyframes s-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
}

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 768px) {
    .s-hero {
        background-position: center; /* Centraliza a imagem de fundo no mobile */
        justify-content: center; /* Centraliza o conteúdo horizontalmente */
        padding: 60px 0; /* Dá um respiro no topo e na base */
    }

    .s-hero-card {
        max-width: 90%; /* Ocupa quase toda a tela do celular, em vez de apenas 40% */
        margin: 0 auto; /* Remove a margem esquerda de 50px e centraliza o card */
        padding: 25px; /* Reduz o espaçamento interno para não apertar o texto */
        text-align: center; /* Centraliza o texto para melhor leitura em telas pequenas */
    }

    .s-hero-card h2 { 
        font-size: 1.8rem; /* Reduz o tamanho da fonte do título para evitar quebras de linha excessivas */
    }

    .s-scroll-arrow {
        bottom: 15px; /* Puxa a seta um pouco para dentro da seção para não sobrepor o próximo bloco no mobile */
    }
}

/* --- CEO SECTION --- */

/* --- CONFIGURAÇÃO DA SEÇÃO CEO --- */
.s-ceo-section {
    position: relative;
    padding-top: 100px;
    /* Background dividido: Branco até o queixo, Preto abaixo */
    background: linear-gradient(to bottom, #ffffff 180px, #333333 180px);
}

.s-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.s-ceo-layout {
    display: flex;
    align-items: flex-end; /* Faz o CEO "brotar" da barra */
    gap: 40px;
    position: relative;
}

/* --- BLOCO CEO --- */
.s-ceo-visual {
    flex: 1;
    position: relative;
    line-height: 0; /* Remove espaço extra abaixo da imagem */
}

.s-img-ceo {
    width: 100%;
    max-width: 600px;
    display: block;
    /* Garante que ele encoste na base */
    margin-bottom: 0;
}

.s-ceo-tag h3 {
    font-family: 'Bangers', cursive;
    color: #222;
    font-size: 1.8rem;
    letter-spacing: 1px;
}

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 768px) {
    .s-ceo-section {
        padding-top: 60px; /* Reduz o espaço no topo para o mobile */
        /* Ajusta o background dividido para acompanhar a imagem do CEO no celular */
        background: linear-gradient(to bottom, #ffffff 280px, #333333 280px);
    }

    .s-ceo-layout {
        flex-direction: column; /* Empilha a foto do CEO e a grade de serviços */
        align-items: center; /* Centraliza a imagem do CEO */
        gap: 40px;
    }

    .s-ceo-visual {
        text-align: center; /* Centraliza o nome e o cargo do CEO */
        width: 100%;
    }

    .s-ceo-tag {
        margin-top: 15px; /* Dá um respiro entre a imagem e o texto no mobile */
    }

    .s-ceo-tag h3 {
        color: #fff; /* Muda para branco no celular se o texto cair na área escura, ajuste se necessário */
    }
    
    .s-ceo-tag p {
        color: #ddd;
    }

    /* Regras para os cards de serviço no mobile */
    .s-services-grid {
        display: flex;
        flex-direction: column; /* Empilha os cards de serviços um embaixo do outro */
        gap: 20px;
        width: 100%;
    }

    /* Ajustes do Footer do CEO no mobile */
    .s-flex-footer {
        display: flex;
        flex-direction: column; /* Empilha a logo e o texto */
        align-items: center;
        text-align: center;
        gap: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .s-logo-footer {
        max-width: 180px; /* Limita o tamanho da logo para não estourar a tela */
    }
}





/*  #12E1C3 #00A99D > #12E1C3 */





.s-ceo-tag {
    position: absolute;
    bottom: 50px;
    right: 0;
    background: #12E1C3;
    padding: 15px 25px;
    color: #fff;
    z-index: 5;
    line-height: 1.5;
}

/* --- GRID DE SERVIÇOS --- */
.s-services-grid {
    flex: 1.2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-bottom: 80px; /* Espaço para não cobrir a barra */
}

.s-service-box {
    background: #fff;
    /* Boxes maiores */
    min-height: 220px; 
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    transition: 0.3s;
    /* Sombra preta conforme solicitado */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
}

.s-service-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.8);
}

.s-service-content h4 {
    font-family: 'Bangers', cursive;
    font-size: 1.8rem;
    color: #12E1C3;
    font-weight: 900;
    margin-bottom: 15px;
    letter-spacing: 1.2px;
}

/* --- FAIXA TURQUESA COM CADARÇO --- */
.s-ceo-footer-full {
    background: #12E1C3;
    width: 100%;
    padding: 20px 0;
    position: relative;
    z-index: 10;
}

.s-flex-footer {
    display: flex;
    align-items: center;
    gap: 20px;
}

.s-logo-footer {
    width: 100px; /* Tamanho menor conforme solicitado */
    height: auto;
    transition: 0.3s;
}


.s-logo-footer:hover {
    transform: translateY(-10px);
}

.s-footer-text {
    color: #fff;
    font-weight: 500;
    margin: 0;
}

/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 768px) {
    .s-ceo-section {
        /* No mobile, o fundo pode ser simplificado */
        background: #333333;
        padding-top: 50px;
    }

    .s-ceo-layout {
        flex-direction: column;
        align-items: center;
    }

    .s-services-grid {
        grid-template-columns: 1fr;
        width: 100%;
        /* Sobrepostos no CEO via margem negativa no mobile */
        margin-top: -80px; 
        z-index: 15;
    }

    .s-service-box {
        min-height: 120px; /* Formato retangular menor no mobile */
        padding: 20px;
    }

    .s-img-ceo {
        max-width: 300px;
    }

    .s-flex-footer {
        flex-direction: column;
        text-align: center;
    }
}


/* --- MVV SECTION (Diagonal) --- */
.s-mvw-section {
    padding: 140px 0;
    background: linear-gradient(165deg, #ffffff 52%, #f2f2f2 52.1%);
    position: relative;
}

.s-mvw-flex { 
    display: flex; 
    gap: 30px; 
}

.s-mvw-card {
    flex: 1;
    background: #fff;
    padding: 40px 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    position: relative;
    z-index: 1;
}

.s-mvw-card:hover { 
    transform: scale(1.05); 
}

.s-mvw-card h3 {  
    letter-spacing: 1.1px; 
    color: #12E1C3; 
    font-family: 'Bangers', cursive; 
    font-size: 1.8rem; 
    margin-bottom: 15px; 
}

.s-shoes-overlap {
    position: absolute;
    /* AJUSTE AQUI: Desceu para -130px para sair de cima do texto e ficar apenas na borda do card */
    bottom: -230px; 
    right: -5%;
    width: 450px;
    z-index: 2; 
}

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 768px) {
    .s-mvw-section {
        padding: 60px 0 40px; 
        background: linear-gradient(165deg, #ffffff 75%, #f2f2f2 75.1%); 
    }

    .s-mvw-flex { 
        flex-direction: column; 
        gap: 20px; 
    }

    .s-mvw-card:hover { 
        transform: none; 
    }

    .s-shoes-overlap {
        position: relative; 
        display: block; 
        width: 280px; 
        margin: 40px auto 0 auto; 
        bottom: auto; 
        right: auto; 
        transform: none; 
    }
}



/* --- GALERIA CARROSSEL (CENTRALIZADO) --- */
.s-gallery-section { padding: 100px 0; }

.s-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Centralização real */
    gap: 20px;
}

.s-gallery-track {
    display: flex;
    overflow-x: hidden;
    scroll-behavior: smooth;
    gap: 20px;
    max-width: 1000px; /* Largura centralizada */
}

.s-gallery-item {
    min-width: calc(33.333% - 14px); /* 3 fotos por vez */
    height: 350px;
    transition: 0.3s;
    border-radius: 15px;
    overflow: hidden;
}

.s-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.s-gallery-item:hover { filter: brightness(0.8); cursor: pointer; }

/* Botões do Carrossel */
.s-arrow {
    background: #12E1C3;
    border: none;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 20px;
    transition: 0.3s;
}

.s-arrow:hover { background: #169b8e; transform: scale(1.1); }

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
    .s-ceo-grid, .s-services-grid, .s-mvw-flex { flex-direction: column; }
    .s-gallery-item { min-width: 100%; } /* 1 foto por vez no mobile */
    .s-shoes-overlap { width: 280px; bottom: -30px; }
}

/* -----*/



/*HEADER*/


/* Reset de Estilos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header Principal */
.navbar {
    font-family: 'Bangers', cursive;
    background-color: #12E1C3; /* Verde água da marca */
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
}

/* Container com Simetria nas Bordas */
.container {
    width: 100%;
    max-width: 1400px; /* Largura máxima confortável */
    margin: 0 auto;
    padding: 0 5%; /* Garante mesma distância na esquerda e direita */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Agrupamento Logo + Menu */
.nav-group {
    display: flex;
    align-items: center;
    gap: 40px; /* Distância entre logo e textos */
}

.logo img {
    height: 55px; /* Ajuste conforme necessário */
    width: auto;  /* Mantém a proporção */
    display: block;
}

/* Menu de Links (Desktop) */
.menu ul {
    display: flex;
    list-style: none;
    gap: 15px;
}

.menu ul li a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 0;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.menu ul li a:hover {
    color: #000; /* Cor ao passar o mouse */
}

/* Botão CTA (Direita) */
.btn-clean {
    background-color: white;
    color: #12E1C3;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 0;
    transition: all 0.3s ease;
    border: 2px solid white;
    white-space: nowrap; /* Impede o texto de quebrar linha */
}

.btn-clean:hover {
    background-color: transparent;
    color: white;
}

/* --- MENU MOBILE (TRACINHOS) --- */
.menu-toggle {
    display: none; /* Escondido no Desktop */
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 5px;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
    /* Mostra o hambúrguer e centraliza o logo */
    .menu-toggle { display: flex; }
    
    .cta { display: none; } /* Esconde o botão no celular para caber o logo */

    .container {
        justify-content: space-between;
    }

    .nav-group {
        width: 100%;
        justify-content: space-between;
    }

    /* Estilo do Menu Dropdown no Mobile */
    .menu {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #12E1C3;
        padding: 20px 0;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .menu.active { display: block; }

    .menu ul {
        flex-direction: column;
        align-items: center;
    }

    /* Animação para o X */
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/*---------*/



/* BANNERS*/



/* --- CONFIGURAÇÃO DO CARROSSEL --- */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa a tela inteira */
    min-height: 550px;
    overflow: hidden;
    margin-top: 80px; /* Ajuste conforme a altura do seu Header */
    background-color: #000;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background-size: cover;
    background-position: center;
    text-decoration: none; /* Remove sublinhado por ser um link <a> */
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide.active { opacity: 1; z-index: 1; }

/* --- CONTEÚDO DO BANNER --- */
.banner-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o botão e o texto horizontalmente */
}

/* Faixas Verdes Inclinadas */
.tag-text {
    background-color: #12E1C3; /* Cor oficial Sneaker Clean */
    color: white;
    font-family: Arial, sans-serif;
    font-weight: 900;
    padding: 10px 30px;
    font-size: clamp(22px, 5vw, 40px);
    display: inline-block;
    margin-bottom: 8px;
    transform: skew(-15deg); /* Inclinação lateral do design */
}

/* --- BOTÃO CENTRALIZADO --- */
.btn-banner-container {
    margin-top: 45px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-franqueado-visual {
    background-color: white;
    color: #12E1C3;
    padding: 18px 50px;
    border-radius: 50px;
    font-family: 'Bangers', cursive;
    font-weight: 0;
    font-size: 1.4rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    border: 2px solid white;
}

/* Efeito Hover: Inverte as cores igual ao Header */
.btn-franqueado-visual:hover {
    background-color: transparent;
    color: white;
    transform: scale(1.05);
}

/* --- INTERATIVIDADE DAS SETAS --- */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 0 25px;
    opacity: 0.6;
    transition: transform 0.1s ease, opacity 0.3s;
}

.arrow:hover { opacity: 1; }

/* Efeito de clique: Sensação de botão físico sendo pressionado */
.arrow:active {
    transform: translateY(-50%) scale(0.8);
    color: #12E1C3;
}

.arrow.left { left: 15px; }
.arrow.right { right: 15px; }

/* --- BOLINHAS (INDICADORES) --- */
.dots-container {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 15px;
}

.dot {
    width: 5px;
    height: 5px;
    background-color: rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active { 
    background-color: white; 
    transform: scale(1.3); 
}

/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 768px) {
    
    /* Ajusta o tamanho do container para não ocupar a tela toda */
    .carousel-container {
        height: auto; 
        aspect-ratio: 4 / 3; /* Cria uma proporção retangular. Pode testar 16/9 também */
        min-height: 400px; /* Altura mínima segura para caber os textos */
        margin-top: 60px; /* Ajuste se o seu header de celular for mais fino */
    }

    /* Reduz o impacto das faixas verdes para não engolir a tela */
    .tag-text {
        padding: 6px 20px;
        font-size: clamp(16px, 4.5vw, 24px); /* Tamanho reduzido, mas ainda flexível */
        margin-bottom: 5px;
    }

    /* Ajusta o botão central para não ficar desproporcional */
    .btn-banner-container {
        margin-top: 25px; /* Aproxima o botão do texto */
    }

    .btn-franqueado-visual {
        padding: 12px 35px;
        font-size: 1.1rem;
    }

    /* Reduz as setas laterais para não encavalar com o texto */
    .arrow {
        font-size: 1.5rem;
        padding: 0 10px;
    }

    /* Sobe um pouco os pontinhos para não ficarem escondidos na borda */
    .dots-container {
        bottom: 15px;
    }
}

/*-----*/



/* BUSCAR LOJAS e SAIBA MAIS */

/* --- CONFIGURAÇÕES GERAIS --- */
.container-respiro {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px; /* Respiro lateral */
}

/* --- SEÇÃO LOJAS (Papel Rasgado) --- */
.secao-lojas-sneaker {
    background-image: url('Image/BGpaper.png'); /* Dimensão sugerida: 1920x800px */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 120px 0; /* Respiro vertical interno no papel */
    display: flex;
    align-items: center;
}

.flex-lojas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.col-texto { flex: 1; }

.col-imagem-loja {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Alinha a imagem totalmente à direita */
}

.img-loja-composta {
    max-width: 600px; /* Ajuste conforme o tamanho do seu PNG */
    width: 100%;
    height: auto;
}

.titulo-maiusculo {    
    font-family: 'Bangers', cursive, sans-serif; /* Ou sua fonte padrão bold */
    font-size: 2.8rem;
    line-height: 1.2;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
}

.botao-padrao-sneaker {
    font-family: 'Bangers', cursive, sans-serif;
    font-size: 1.6rem;
    background-color: #12E1C3;
    color: #fff;
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(32, 178, 170, 0.3);
}

.botao-padrao-sneaker:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(32, 178, 170, 0.5);
}

/* --- SEÇÃO IDENTIDADE --- */
.secao-identidade {
    text-align: center;
    padding: 60px 0;
}

.wrapper-marca-dagua {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.logo-fundo {
    position: absolute;
    width: 500px;
    opacity: 0.1; /* Logo transparente ao fundo */
    z-index: -1;
}

.frase-impacto {
    font-family: 'Bangers', cursive, sans-serif;
    font-size: 3rem;
    font-weight: 0;
    letter-spacing: 1.5px;
}

.destaque-verde {
    background-color: #12E1C3;
    color: white;
    padding: 0 10px;
}

.grupo-pilulas {
    font-family: 'Bangers', cursive, sans-serif;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    transition: 0.3s;
    letter-spacing: 1px;
}

.grupo-pilulas:hover {
    transform: translateY(-5px);
}

.tag-valor {
    background-color: #12E1C3;
    border: 1px solid #e0e0e0;
    padding: 10px 35px;
    border-radius: 30px;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
    color: #ffffff;
}

/* --- SEÇÃO ESPECIALIZADA & CARROSSEL --- */
.flex-servicos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 0;
    gap: 60px;
}

.descricao-curta{
    margin-top: 3px;
    font-size: 1.5rem;
    color: #666666;
}

.titulo-servico {
    font-family: 'Bangers', cursive, sans-serif; /* Ou sua fonte padrão bold */
    font-size: 2.8rem;
    line-height: 1.2;
    letter-spacing: 1.5px;
}

.col-servicos-texto { 
    flex: 1;
    font-family: 'Bangers', cursive, sans-serif;
}

.lista-beneficios {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0;
}

.lista-beneficios li {
    font-family: 'Arial rounded', sans-serif;
    color: #666666;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.lista-beneficios li::before {
    font-family: 'Bangers', cursive, sans-serif;
    content: "•";
    color: #12E1C3;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* CARROSSEL TÉCNICO */
.sneaker-slider-box {
    flex: 1;
    position: relative;
    max-width: 500px;
    border-radius: 15px;
    overflow: hidden;
}

.sneaker-item {
    display: none;
}

.sneaker-item.active {
    display: block;
    animation: fadeEffect 0.6s;
}

@keyframes fadeEffect { from { opacity: 0.4; } to { opacity: 1; } }

.nav-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
}

.proximo { right: 15px; }
.anterior { left: 15px; }

.indicadores-dots {
    text-align: center;
    margin-top: -30px;
    position: relative;
    z-index: 11;
}

.ponto {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.ponto.active { background-color: #12E1C3; }

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .flex-lojas, .flex-servicos { flex-direction: column; text-align: center; }
    .col-imagem-loja { justify-content: center; margin-top: 40px; }
    .titulo-maiusculo { font-size: 2rem; }
    .grupo-pilulas { flex-direction: column; align-items: center; }
}


/*-----*/



/* SEJA FRANQUEADO */



/* Configuração da Seção com a imagem de fundo */
.junte-se-secao {
    background-image: url('Image/lojabghome2.jpg'); /* Substitua pelo seu caminho */
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    color: #fff;
}

/* Overlay para escurecer a imagem e destacar o texto */
.overlay-escuro {
    background: rgba(0, 0, 0, 0.4); /* Ajuste a opacidade conforme necessário */
    width: 100%;
    height: 100%;
    padding: 80px 0;
}

.junte-se-conteudo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.info-franquia h2 {
    font-family: 'Bangers', cursive, sans-serif; /* Ou sua fonte padrão bold */
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: 1.2px;
}

.lista-franquia {
    font-family: 'Arial Rounded', sans-serif;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.lista-franquia li {
    font-size: 1.1rem;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.lista-franquia li::before {
    content: "•";
    color: #fff;
    position: absolute;
    left: 0;
}

/* --- O BOTÃO PADRÃO SNEAKER COM ANIMAÇÃO --- */
.btn-sneaker-animated {
    display: inline-block;
    background-color: #fff; /* Fundo inicial branco conforme imagem */
    color: #12E1C3;        /* Letras no verde padrão Sneaker Clean */
    padding: 15px 30px;
    border: px solid #fff; /* Borda branca para não "pular" no hover */
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: 1.2px;
    font-size: 1.8rem;
    font-family: 'Bangers', cursive, sans-serif;
    transition: all 0.4s ease; /* Transição suave para todas as propriedades */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra leve inicial */
}

/* --- EFEITO AO PASSAR O MOUSE (HOVER) --- */
.btn-sneaker-animated:hover {
    background-color: transparent; /* Fundo fica transparente */
    color: #fff;                  /* Letras ficam brancas */
    border-color: #fff;           /* Borda continua branca */
    transform: translateY(-8px);  /* Botão se move para cima */
    box-shadow: 0 12px 20px rgba(0,0,0,0.3); /* Sombra fica mais intensa e profunda */
}

/* Responsividade */
@media (max-width: 768px) {
    .info-franquia { text-align: center; }
    .info-franquia h2 { font-size: 2.2rem; }
    .lista-franquia li { text-align: left; display: inline-block; width: 100%; }
}



/*---------*/



/*FOOTER*/



/* Estilo Base do Footer */
.main-footer {
    background-color: #000;
    color: #fff;
    padding: 60px 0 20px 0;
    font-family: Arial, sans-serif; /* Texto geral em Arial */
}

.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* Títulos h3 em Bangers */
.footer-column h3 {
    font-family: 'Bangers', cursive;
    font-size: 24px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: normal;
}

/* Textos e Parágrafos em Arial */
.brand-info p {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #fff;
}

/* Listas e Links */
.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    font-family: Arial, sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center; /* Alinha ícone e texto */
    transition: 0.3s;
}

.footer-column ul li a:hover {
    color: #12E1C3;
}

/* Estilo dos Ícones */
.icon {
    width: 18px; /* Ajuste o tamanho conforme seus arquivos */
    height: 18px;
    margin-right: 10px;
    object-fit: contain;
}

.sac-title {
    margin-top: 30px;
}

/* Linha Inferior */
.footer-bottom {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.footer-bottom p {
    font-family: Arial, sans-serif;
    font-size: 12px;
}

/* Responsivo */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-column ul li a {
        justify-content: center;
    }
}



/*---------*/



/*PÁGINA OBRIGADO*/



/* --- ESTILOS DA PÁGINA DE OBRIGADO --- */

.body-obrigado {
    background-color: #f9f9f9;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Arial', sans-serif;
}

.sessao-obrigado {
    width: 100%;
    padding: 20px;
}

.container-obrigado {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.logo-obrigado {
    width: 150px;
    margin-bottom: 30px;
}

.card-agradecimento {
    background: #12E1C3;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

.card-agradecimento h1 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 20px;
}

.card-agradecimento p {
    color: #ffffff;
    line-height: 1.6;
    font-size: 1.1rem;
}

.divisor-verde {
    width: 50px;
    height: 4px;
    background-color: #12E1C3;
    margin: 30px auto;
    border-radius: 2px;
}

.instrucao {
    font-weight: bold;
    margin-bottom: 25px;
}

/* Reutilizando a animação do botão que fizemos */
.btn-sneaker-animated {
    display: inline-block;
    background-color: #ffffff;
    color: #12E1C3;
    padding: 15px 40px;
    border: 2px solid #ffffff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 900;
    transition: all 0.4s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Responsividade */
@media (max-width: 480px) {
    .card-agradecimento {
        padding: 30px 20px;
    }
}



/*---------*/



/* LOJAS */

/* https://images.unsplash.com/photo-1552346154-21d32810aba3?q=80&w=1920  
(Imagem que eu que veio no template de background em buscar lojas)*/

:root {
    --primary-color: #12E1C3; /* Verde Sneaker Clean */
    --text-dark: #222;
    --bg-gray: #f4f4f4;
}

body { 
    font-family: 'Arial', sans-serif; 
    margin: 0; 
    color: var(--text-dark); 
    background-color: #fff; 
}

/* Banner Hero */
.hero-banner {
    width: 100%;
    height: 80vh;
    background: url('Image/image10.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Efeito de fusão branca no fundo do banner */
.hero-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(transparent, white);
}

/* Caixa de Busca */
.search-box {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 60px 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;    
}

.search-box h2 { 
    font-family: 'Bangers', cursive;
    text-transform: uppercase; 
    font-size: 2.0rem;
    margin-bottom: 25px; 
    line-height: 1.2; 
    letter-spacing: 0.8px;
}

.search-box select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    background: white;
}

/* Grid e Cards */
.container-lojas { 
    max-width: 1100px; 
    margin: -50px auto 50px; 
    padding: 0 20px; 
    position: relative; 
    z-index: 20; 
}

.grid-lojas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.card-loja {
    background: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

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

.card-loja img { width: 100%; height: 200px; object-fit: cover; }

.card-content { padding: 20px; flex-grow: 1; }
.card-content h3 { letter-spacing: 0.8px; margin: 0 0 10px; font-size: 22px; text-transform: uppercase; font-family: 'Bangers', cursive;}
.card-content p { font-size: 13px; color: #555; margin: 5px 0; }

.btn-saiba-mais {
    font-family: 'Bangers', cursive;
    background: var(--primary-color);
    color: white;
    border: none;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 15px;
    text-transform: uppercase;
    float: right;
    margin-top: 10px;
    transition: 0.3s;
}

.btn-saiba-mais:hover { background: #008c82; }

/* Botão Ver Mais */
.btn-ver-mais-container { text-align: center; margin-top: 40px; }
.btn-ver-mais {
    font-family: 'Bangers', cursive;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 15px 80px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    display: none;
    letter-spacing: 1px;
}

.btn-ver-mais:hover { background: #008c82; }


/*---------*/


/* CARDS LOJAS */


/* --- SEÇÃO DE DOWNLOADS --- */
.downloads-franqueado {
    padding: 80px 0;
    background-color: #ffffff; /* Fundo limpo para destacar os cards */
    text-align: center;
}

.downloads-franqueado h3 {
    font-family: 'Bangers', cursive, sans-serif;
    font-size: 2.5rem;
    color: #12E1C3;
    margin-bottom: 10px;
}

.downloads-franqueado p {
    color: #666;
    margin-bottom: 40px;
}

/* GRID DOS CARDS */
.grid-assets {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* Ajusta para mobile automaticamente */
    max-width: 1200px;
    margin: 0 auto;
}

/* CARD INDIVIDUAL */

.card-asset {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 40px 30px;
    border-radius: 20px;
    width: 320px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.card-asset:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #12E1C3;
}

/* ESTILO DOS ÍCONES (Font Awesome) */
.card-asset i {
    font-size: 3rem;
    color: #12E1C3;
    margin-bottom: 20px;
    opacity: 0.8;
}

.card-asset h4 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 700;
}

.card-asset p {
    font-size: 0.95rem;
    color: #888;
    line-height: 1.5;
    margin-bottom: 25px;
    min-height: 50px; /* Mantém os botões alinhados */
}

/* BOTÃO DE DOWNLOAD ESPECÍFICO */
.btn-download {
    background-color: #12E1C3;
    color: white;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.85rem;
    transition: 0.3s;
    border: 2px solid #12E1C3;
}

.btn-download:hover {
    background-color: transparent;
    color: #12E1C3;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .grid-assets {
        flex-direction: column;
        align-items: center;
    }
    .card-asset {
        width: 90%;
    }
}


/* ----- */



/* PÁGINA PARA SE TORNAR FRANQUEADO */


/* CONTAINER PAI */
.franquia-hero-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff; /* Fundo branco da metade de baixo */
}

/* BANNER QUE TERMINA NA METADE DO BOX (SINALIZADO EM VERMELHO) */
.banner-topo-metade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 650px; /* Ajuste para terminar na metade do seu box */
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('Image/image17.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.content-vertical-grid {
    position: relative;
    z-index: 2;
    padding-top: 100px;
    width: 100%;
    max-width: 1200px;
}

/* FAIXA PRETA QUE COMEÇA NO CANTO ESQUERDO (SINALIZADO EM AMARELO) */
.faixa-preta-faturamento {
    background-color: #000;
    width: 45vw; /* Diminui a largura da faixa (era 100vw) */
    margin-left: -15vw; /* Ajusta o quanto ela "sai" para a esquerda */
    padding: 30px 0;
    margin-bottom: 70px;
    margin-top: 250px;
    border-radius: 0 10px 10px 0; /* Arredonda apenas o canto direito se quiser um charme */
}

.texto-faturamento {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 200px; /* Diminua este valor (estava 20px ou mais) para o texto "colar" mais na esquerda */
}

.texto-faturamento p { color: #f2f2f2; margin-top: 10px;}

.texto-faturamento h1 {
    color: #fff;
    font-size: clamp(28px, 5vw, 50px);
    font-weight: 900;
    letter-spacing: 1.5px;
    font-family: 'Bangers', cursive;
}

.texto-faturamento h1 span {
    color: #00c3a5; /* Verde Sneaker Clean */
}

/* --- AJUSTES EXCLUSIVOS PARA O MOBILE --- */
@media (max-width: 992px) {
    .banner-topo-metade {
        height: 500px; /* Reduz um pouco o fundo da imagem no celular */
    }

    .faixa-preta-faturamento {
        width: 85vw; /* No celular, a faixa ocupa quase toda a largura da tela */
        margin-left: 0; /* Cola a faixa na borda esquerda */
        margin-top: 100px; /* Sobe um pouco a faixa para não ficar um buraco em cima */
        padding: 20px 0;
    }

    .texto-faturamento {
        padding-left: 20px; /* Remove os 200px que estavam esmagando o texto */
        padding-right: 20px; /* Dá uma margem de respiro na direita */
    }
}



/* BOX FORMULÁRIO (SOBREPOSTO AO CORTE) */
.card-formulario-sobreposto {
    background: #f5f5f5;
    padding: 40px;
    border-radius: 30px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto; /* Centraliza horizontalmente */
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.card-formulario-sobreposto h2 {
    color: #00c3a5;
    font-size: 38px;
    font-weight: 900;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.9px;
    margin-bottom: 25px;
    text-align: center;
}

/* INPUTS E GRIDS */
input, select {
    width: 100%;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.grid-localizacao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* BOTÃO WHATSAPP */
.btn-franqueado-zap {
    width: 100%;
    background-color: #00c3a5;
    color: white;
    border: none;
    padding: 20px;
    border-radius: 40px;
    font-size: 25px;
    font-weight: 800;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
}

.btn-franqueado-zap:hover {
    background-color: #00a88e;
    transform: scale(1.02);
}

.aviso-legal-lgpd {
    font-size: 11px;
    color: #666;
    margin-top: 20px;
    text-align: justify;
    line-height: 1.4;
}

/* ESPAÇO DE RESPIRO FINAL */
.respiro-final-pagina {
    height: 150px;
    width: 100%;
}

/* AJUSTES MOBILE */
@media (max-width: 768px) {
    .faixa-preta-faturamento {
        padding: 30px 20px;
    }
    .card-formulario-sobreposto {
        width: 90%;
        padding: 25px;
    }
}



/* ----- */



/* NOTICIAS */


:root { --tiffany: #1eb4a5; --dark: #1a1a1a; --gray: #f4f4f4; }
body { font-family: 'Inter', sans-serif; background: #fff; margin: 0; }
.n-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* BANNER */
.n-banner { padding: 40px 0; }
.n-banner-img { 
    height: 400px; border-radius: 20px; background-size: cover; background-position: center; 
    display: flex; align-items: flex-end; padding: 40px;
}
.n-banner-content h1 { color: #fff; background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 10px; }

/* LAYOUT GRID */
.n-main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 30px; margin-top: 30px; }

/* CARDS DE NOTÍCIAS */
.n-card { border-bottom: 1px solid #ddd; padding-bottom: 20px; margin-bottom: 30px; }
.n-card img, .n-card iframe { width: 100%; border-radius: 15px; margin-bottom: 15px; }
.n-card h2 { color: var(--dark); margin: 10px 0; }
.n-card span { color: var(--tiffany); font-weight: bold; font-size: 0.8rem; }

/* ANÚNCIOS (SHAPES COLORIDOS) */
.ad-placeholder { 
    background: #ff5722; color: #fff; display: flex; align-items: center; 
    justify-content: center; font-weight: 900; border-radius: 10px; margin: 20px 0;
}
.ad-horizontal { height: 120px; width: 100%; }
.ad-sidebar { height: 400px; width: 100%; margin-bottom: 30px; }

@media (max-width: 768px) { .n-main-grid { grid-template-columns: 1fr; } }


/* ----- */



/* FRANQUEADO */