/*
  Nome do arquivo: style2.css
  Autor: Eduardo
  Data: 18 de agosto de 2025
  Descrição: Estilos principais para o site.
*/

@charset "UTF-8";
img{max-width: 100%;}

/* Estilos gerais para a página */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*min-height: 100vh;*/
    /*flex-direction: column;*/
}

/* Container principal do banner */
.banner-container {
    /* Imagem de fundo (URL da imagem fornecida) */
    background-image: url('../imgs/bannerTopo.jpg');
    background-size: cover; /* Cobre todo o espaço do container */
    background-position: center; /* Centraliza a imagem */
    position: relative; /* Necessário para o posicionamento do overlay */
    /*border-top: 5px solid #a40000;*/
    /*border-bottom: 5px solid #a40000;*/
    color: white;
    overflow: hidden; /* Garante que nada saia dos limites do banner */
    max-width: 1300px; /* Largura máxima do banner */
    max-width: 100vw; /* Largura máxima do banner */
    width: 100%;
}

/* Overlay vermelho com gradiente */
.banner-container::before {
    content: ''; /* Pseudo-elemento obrigatório */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente linear da esquerda para a direita */
    background: linear-gradient(to right, 
        rgba(192, 0, 0, 1) 30%,   /* Vermelho sólido no início */
        rgba(192, 0, 0, 0.8) 50%, /* Vermelho semitransparente no meio */
        rgba(192, 0, 0, 0) 70%    /* Totalmente transparente no final */
    );
    z-index: 1; /* Garante que o overlay fique sobre a imagem de fundo */
}

/* Conteúdo do banner (texto) */
.banner-container .banner-content-top {
    position: relative; /* Posição relativa para ficar acima do overlay */
    z-index: 2;
    padding: 40px 60px; /* Espaçamento interno */
    max-width: 50%; /* Limita a largura do texto para não sobrepor o chef */
    max-width: 680px; /* Limita a largura do texto para não sobrepor o chef */
}

/* Título principal */
.banner-container .banner-title {
    font-size: 2.2em; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    line-height: 1.3; /* Espaçamento entre linhas */
    text-transform: uppercase; /* Tudo em maiúsculas */
    margin: 0;
}

/* Parágrafo de descrição */
.banner-container .banner-description {
    font-size: 1.1em; /* Tamanho da fonte */
    margin-top: 20px; /* Margem superior */
    line-height: 1.6; /* Espaçamento entre linhas */
    background-color: #a400005e;
}

/* Estilo para o texto em negrito dentro do parágrafo */
.banner-container .banner-description strong {
    font-weight: bold;
    text-transform: uppercase;
}

/* --- Estilos para telas menores (Responsividade) --- */
@media only screen and (max-width: 768px)  {
    .banner-content-top {
        max-width: 100%; /* Ocupa toda a largura */
        text-align: center; /* Centraliza o texto */
        padding: 30px;
    }

    .banner-container::before {
        /* Ajusta o gradiente para cobrir mais a imagem em telas pequenas */
        background: linear-gradient(to right, 
            rgba(192, 0, 0, 0.95) 50%, 
            rgba(192, 0, 0, 0.7) 100%
        );
    }

    .banner-title {
        font-size: 1.8em;
    }

    .banner-description {
        font-size: 1em;
    }
}

.top-lp{
    background-color: rgb(0, 0, 0);
    width: 100%;
    place-content: center;
    display: grid;
    padding: 20px 0;
}
.top-container {
    max-width: 1000px;
    display: inline-flex;
    align-items: center;
}
.top-container img{
    max-width: 450px;
    max-height: 105px;
}

@media only screen and (max-width: 768px) {
    .top-container{flex-direction: column;}
}

 /* --- Container da Seção --- */
        .audience-section {
            max-width: 1200px;
            width: 100%;
            text-align: center; /* Centraliza o título principal */
            padding: 30px 0 50px 0;
            margin: auto;
        }

        /* --- Título da Seção --- */
        .section-title {
            color: #9B2238; /* Cor vinho/vermelho escuro do texto */
            font-size: 1.8em;
            font-weight: normal; /* Deixa a fonte normal, pois usaremos <strong> para o negrito */
            margin-bottom: 40px; /* Espaço entre o título e os cards */
        }

        /* --- Container dos Cards --- */
        .cards-container {
            display: flex; /* ATIVA O FLEXBOX! */
            justify-content: center; /* Centraliza os cards no container */
            flex-wrap: wrap; /* Permite que os cards quebrem a linha em telas menores */
            gap: 25px; /* Espaço entre os cards */
        }

        /* --- Estilo Individual de Cada Card --- */
        .audience-card {
            background-color: #ffffff; /* Fundo branco */
            border-radius: 12px; /* Cantos arredondados */
            border: 1px solid #ebebeb; /* Borda sutil */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); /* Sombra suave */
            padding: 35px 25px; /* Espaçamento interno */
            text-align: center;
            
            /* Define o tamanho dos cards no layout flex */
            flex-basis: 250px; /* Largura base de cada card */
            flex-grow: 1; /* Permite que o card cresça se houver espaço */
            max-width: 280px; /* Largura máxima para não esticar demais */
            max-width: 225px; /* Largura máxima para não esticar demais */
        }

        /* --- Ícones dos Cards --- */
        .card-icon {
            height: 50px; /* Altura fixa para os ícones */
            margin-bottom: 20px; /* Espaço abaixo do ícone */
        }

        /* --- Título de Cada Card (H3) --- */
        .card-title {
            font-size: 1.2em;
            color: #333;
            margin: 0 0 10px 0; /* Margem apenas na parte inferior */
        }

        /* --- Descrição de Cada Card (P) --- */
        .card-description {
            font-size: 0.95em;
            color: #555;
            line-height: 1.5; /* Espaçamento entre as linhas do texto */
            margin: 0;
        }

        /* --- Media Query para telas pequenas (celulares) --- */
        @media (max-width: 600px) {
            .section-title {
                font-size: 1.5em;
            }
            .audience-card {
                /* Em telas pequenas, o card pode ocupar mais espaço */
                flex-basis: 100%;
                max-width: 100%;
            }
        }

 /* --- Container da Seção --- */
        .diferenciais-section {
            padding: 60px 20px; /* Espaçamento vertical e horizontal */
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #dedede; /* Fundo cinza claro para a seção */
            width: 100%;
            box-sizing: border-box;
        }

        /* --- Título da Seção --- */
        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-header .line {
            width: 50px;
            height: 3px;
            background-color: #9B2238; /* Cor vinho/vermelho escuro */
            margin: 0 auto 10px; /* Centraliza a linha */
        }

        .section-header h2 {
            color: #9B2238;
            text-transform: uppercase;
            font-size: 1.8em;
            margin: 0;
        }

        /* --- Container dos Cards --- */
        .cards-container {
            display: flex; /* ATIVA O FLEXBOX */
            justify-content: center; /* Centraliza os cards */
            flex-wrap: wrap; /* Permite que os cards quebrem a linha */
            gap: 30px; /* Espaço entre os cards */
            max-width: 1200px;
        }

        /* --- Estilo Individual de Cada Card --- */
        .diferencial-card {
            background-color: #ffffff;
            border-radius: 16px; /* Cantos arredondados */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Sombra suave */
            overflow: hidden; /* Garante que a imagem não ultrapasse os cantos arredondados */
            
            /* Define o tamanho dos cards */
            flex-basis: 320px; /* Largura base de cada card */
            flex-grow: 1; /* Permite que o card cresça se houver espaço */
            max-width: 360px; /* Largura máxima */

            display: flex;
            flex-direction: column;
        }

        /* --- Imagens dos Cards --- */
        .card-image-wrapper {
            position: relative; /* Necessário para posicionar a imagem pequena */
        }
        
        .card-image {
            width: 100%;
            height: auto;
            display: block; /* Remove espaço extra abaixo da imagem */
        }

        /* Imagem pequena sobreposta no primeiro card */
        .inset-image {
            position: absolute;
            bottom: 15px;
            left: 15px;
            width: 110px;
            border: 3px solid white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        /* --- Conteúdo de Texto dos Cards --- */
        .card-content {
            padding: 25px;
            flex-grow: 1; /* Faz o conteúdo ocupar o espaço restante */
        }

        .card-content h3 {
            text-align: center;
            color: #9B2238;
            text-transform: uppercase;
            margin-top: 0;
            margin-bottom: 15px;
        }

        .card-content p {
            color: #555;
            line-height: 1.6;
            margin: 0;
            text-align: left;
        }        

/*################        */

 /* --- Container Principal da Seção --- */
        .learn-by-doing-section {
            text-align: center; /* Centraliza todo o conteúdo interno */
            padding: 50px 20px; /* Espaçamento vertical e horizontal */
            max-width: 1140px; /* Largura máxima do conteúdo para boa legibilidade */            
            margin: auto;
        }

        /* --- Título da Seção --- */
        .learn-by-doing-section h2 {
            color: #9B2238; /* Cor vinho/vermelho escuro */
            text-transform: uppercase;
            font-size: 1.9em;
            margin-top: 0;
            margin-bottom: 25px;
        }

        /* --- Parágrafos da Seção --- */
        .learn-by-doing-section p {
            font-size: 1.1em;
            line-height: 1.7; /* Espaçamento entre linhas para facilitar a leitura */
            margin: 0 auto 20px auto; /* Adiciona espaço abaixo de cada parágrafo */
            max-width: 820px; /* Limita a largura do texto para não ficar muito extenso */
        }

        /* --- Estilo para o texto em negrito (<strong>) --- */
        .learn-by-doing-section strong {
            color: #333333; /* Deixa o texto em negrito um pouco mais escuro */
        }

        /* --- Imagem da Seção --- */
        .classroom-image {
            max-width: 100%; /* Garante que a imagem seja responsiva */
            height: auto; /* Mantém a proporção da imagem */
            margin-top: 20px; /* Espaço entre o texto e a imagem */
            border-radius: 8px; /* Cantos levemente arredondados */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidade */
            border: 1px solid #ddd; /* Borda sutil */
        }

        /* Ajustes para telas menores */
        @media only screen and (max-width: 768px)  {
            .learn-by-doing-section h2 {
                font-size: 1.6em;
            }
            .learn-by-doing-section p {
                font-size: 1em;
            }
        }




/* --- Container Principal do Banner --- */
        .visit-banner {
            /* Imagem de fundo a partir do seu upload */
            background-image: url('../imgs/fundo_cta.jpg');
            background-size: cover; /* Cobre todo o espaço */
            background-position: right center; /* Centraliza a imagem */
            position: relative; /* Necessário para o posicionamento do gradiente (overlay) */
            padding: 70px 40px; /* Espaçamento interno */
            color: white; /* Cor do texto */
            /*border-top: 3px solid #a40000;*/
            /*border-bottom: 3px solid #a40000;*/
            width: 100%;
            box-sizing: border-box;
        }


        /* --- Conteúdo do Banner (texto e botão) --- */
        .banner-content {
            position: relative; /* Para ficar acima do gradiente */
            z-index: 2;
            max-width: 1200px; /* Largura máxima para o conteúdo */
            margin: 0 auto; /* Centraliza o conteúdo */
            text-align: center;
        }

        .banner-content h2 {
            font-size: 1.9em;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 0;
            margin-bottom: 15px;
            text-align: center;
        }

        .banner-content p {
            font-size: 1.2em;
            line-height: 1.6;
            max-width: 550px; /* Limita a largura do parágrafo */
            margin-bottom: 30px;
            text-align: center;
            margin: auto;
        }

        /* --- Estilo do Botão --- */
        .cta-button {
            display: inline-block; /* Permite definir padding e margens */
            background-color: #ffffff;
            color: #212121; /* Cor do texto do botão */
            border: 1px solid #212121;
            padding: 14px 28px; /* Espaçamento interno do botão */
            font-weight: bold;
            text-decoration: none; /* Remove o sublinhado do link */
            text-transform: uppercase;
            border-radius: 8px; /* Cantos arredondados */
            transition: all 0.3s ease; /* Efeito suave para o hover */
        }

        .cta-button:hover {
            background-color: #f5f5f5; /* Cor de fundo ao passar o mouse */
            transform: scale(1.05); /* Efeito de zoom sutil */
            color: #000;
            border-color: #000;
        }
        
        /* --- Ajustes para telas menores (Responsividade) --- */
        @media only screen and (max-width: 768px)  {
            .visit-banner {
                padding: 50px 20px;
                text-align: center; /* Centraliza todo o texto em telas pequenas */
            }
            .banner-content p {
                margin-left: auto;
                margin-right: auto;
            }
            .banner-content h2 {
                font-size: 1.6em;
            }
             .banner-content p {
                font-size: 1.1em;
            }
        }        




        /* --- Container Principal --- */
        .container {
            max-width: 960px;
            margin: 0 auto; /* Centraliza o conteúdo */
            padding: 40px 20px;
        }

        /* --- Seção da Biografia --- */
        .chef-bio-section h2 {
            text-align: center;
            font-size: 2em;
            color: #2c2c2c;
            margin-bottom: 30px;
        }

        .chef-bio-section p {
            font-size: 1.1em;
            line-height: 1.7;
            color: #555;
            margin-bottom: 1em;
        }
        
        .chef-bio-section strong {
            color: #000;
        }

        /* --- Galeria de Imagens (CSS Grid) --- */
        .image-gallery {
            display: grid;
            /* Cria um grid com 12 colunas flexíveis */
            grid-template-columns: repeat(12, 1fr); 
            gap: 15px; /* Espaço entre as imagens */
            margin-top: 40px;
        }

        .gallery-item {
            overflow: hidden;
            border-radius: 8px;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
            display: block;
            transition: transform 0.4s ease;
        }

        .gallery-item img:hover {
            transform: scale(1.05); /* Efeito de zoom sutil ao passar o mouse */
        }
        
        /* Define quantas colunas cada item do grid irá ocupar */
        .item-1, .item-2, .item-3, .item-4, .item-5, .item-6 {
            grid-column: span 4; /* Ocupa 4 de 12 colunas */
        }

        .item-7, .item-8, .item-9, .item-10 {
            grid-column: span 4; /* Ocupa 3 de 12 colunas */
        }

        /* --- Ícone Flutuante do WhatsApp --- */
        .floating-whatsapp {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 30px;
            right: 30px;
            z-index: 100;
            transition: transform 0.3s ease;
        }
        
        .floating-whatsapp:hover {
            transform: scale(1.1);
        }

        /* --- Responsividade --- */
        @media only screen and (max-width: 768px)  {
            .chef-bio-section h2 {
                font-size: 1.8em;
            }
             /* Em tablets, as imagens maiores ocupam metade da tela */
            .item-1, .item-2, .item-3, .item-4, .item-5, .item-6, .item-7, .item-8, .item-9, .item-10 {
                grid-column: span 6;
            }
        }

        @media (max-width: 480px) {
             /* Em celulares, as imagens ocupam a tela inteira, uma abaixo da outra */
             .item-1, .item-2, .item-3, .item-4, .item-5, .item-6, .item-7, .item-8, .item-9, .item-10 {
                grid-column: span 12;
            }
        }        



/* --- Container Principal --- */
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 50px 20px;
        }

        /* --- Cabeçalho da Seção --- */
        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-header h2 {
            color: #9B2238; /* Cor vinho/vermelho escuro */
            text-transform: uppercase;
            font-size: 2em;
            margin-bottom: 15px;
        }

        .section-header p {
            font-size: 1.1em;
            line-height: 1.6;
            color: #555;
            max-width: 1140px;
            margin: 0 auto;
        }

        /* --- Galeria de Imagens (CSS Grid) --- */
        .structure-gallery {
            display: grid;
            /* Cria 3 colunas de largura igual */
            grid-template-columns: repeat(3, 1fr);
            gap: 20px; /* Espaçamento entre as imagens */
        }

        /* --- Item Individual da Galeria --- */
        .gallery-item {
            position: relative; /* Necessário para posicionar a legenda sobre a imagem */
            overflow: hidden; /* Garante que a imagem não saia dos cantos arredondados */
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cobre todo o espaço do container sem distorcer */
            display: block;
            transition: transform 0.3s ease;
        }
        
        .gallery-item:hover img {
            transform: scale(1.05); /* Efeito de zoom sutil */
        }

        /* --- Legenda Sobre a Imagem --- */
        .gallery-item .caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #9B2238;
            color: white;
            text-align: center;
            padding: 12px 10px;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.9em;
            box-sizing: border-box;
        }

        /* --- Responsividade --- */
        @media (max-width: 900px) {
            /* Em telas de tablet, o grid passa a ter 2 colunas */
            .structure-gallery {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .section-header h2 {
                font-size: 1.6em;
            }
            .section-header p {
                font-size: 1em;
            }
            /* Em telas de celular, o grid passa a ter 1 coluna */
            .structure-gallery {
                grid-template-columns: 1fr;
            }
        }        




/* --- Seção de Localização --- */
        .location-banner {
            /* Imagem de fundo a partir do seu upload */
            background-image: url('../imgs/fundo_endereco.jpg');
            background-size: cover; /* Cobre todo o espaço */
            background-position: center; /* Centraliza a imagem */
            
            height: 500px; /* Altura do banner, ajuste conforme necessário */
            position: relative; /* Necessário para o posicionamento do overlay */

            /* Centraliza o conteúdo (a faixa de endereço) vertical e horizontalmente */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
            background-attachment: fixed;
        }

        /* --- Overlay escuro sobre a imagem --- */
        /* Este pseudo-elemento escurece um pouco a imagem para dar mais contraste ao texto */
        .location-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3); /* Overlay preto semitransparente */
        }

        /* --- Faixa com o Endereço --- */
        .address-bar {
            position: relative; /* Para ficar acima do overlay */
            z-index: 2;
            background-color: rgba(155, 34, 56, 0.85); /* Cor vinho/vermelho escuro semitransparente */
            color: #ffffff;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 1.4em;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* --- Responsividade --- */
        @media only screen and (max-width: 768px)  {
            .location-banner {
                height: 300px; /* Diminui a altura em telas menores */
            }
            .address-bar {
                font-size: 1.1em;
                padding: 12px 25px;
                /* Ajusta a largura para não tocar nas bordas da tela */
                margin: 0 15px; 
            }
        }        



/* --- 1. Seção "Um Pouco de História" (Vídeo) --- */
        .history-video-section {
            background-color: #9B2238; /* Fundo vinho/vermelho escuro */
            padding: 50px 20px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }

        .history-video-section h2 {
            color: #ffffff; /* Cor branca para melhor contraste */
            font-size: 1.6em;
            margin-top: 0;
            margin-bottom: 25px;
        }

        /* Container do vídeo para criar as bordas */
        .video-player-wrapper {
            background-color: #ffffff; /* Borda branca externa */
            border: 1px solid #111; /* Borda preta fina interna */
            padding: 10px; /* Espessura da borda branca */
            border-radius: 8px;
            max-width: 800px; /* Largura máxima do player */
            margin: 0 auto;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }

        .video-player-wrapper iframe {
            width: 100%; /* O vídeo ocupa todo o espaço do container */
            height: 450px; /* Altura do vídeo, ajuste se necessário */
            display: block; /* Remove espaços indesejados */
            border: none; /* Remove a borda padrão do iframe */
        }
        
        /* --- 2. Seção "Formação em Gastronomia" (Banner) --- */
        .course-info-banner {
            /* Imagem de fundo do seu upload */
            background-image: url('../imgs/fundo_formacao.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
            padding: 80px 20px;
            color: #ffffff;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }
        
        /* Overlay escuro para melhorar a legibilidade do texto */
        .course-info-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85); /* Overlay preto semitransparente */
        }
        
        /* Conteúdo do banner */
        .banner-content {
            position: relative; /* Para ficar sobre o overlay */
            z-index: 2;
            max-width: 1140px;
            margin: 0 auto;
        }
        
        .banner-content h3 {
            color: #e52b34; /* Cor vermelha para o título */
            font-size: 2em;
            text-transform: uppercase;
            margin-top: 0;
            margin-bottom: 20px;
        }
        
        .banner-content p {
            font-size: 1.3em;
            line-height: 1.6;
            margin-bottom: 25px;
        }
        
        .banner-content .highlight {
            color: #e52b34; /* Cor vermelha para o texto destacado */
            font-weight: bold;
        }
        
        .banner-content .sub-text {
            font-size: 1.1em;
            font-style: italic;
        }

        /* --- Responsividade --- */
        @media only screen and (max-width: 768px)  {
            .video-player-wrapper iframe {
                height: 350px;
            }
            .banner-content h3 {
                font-size: 1.6em;
            }
            .banner-content p {
                font-size: 1.1em;
            }
            .banner-content .sub-text {
                font-size: 1em;
            }
        }        




 /* --- 1. Seção "Colagem de Fotos" --- */
        .photo-collage-section {
            width: 100%;
            line-height: 0; /* Remove espaços em branco entre os elementos da colagem */
        }
        
        .collage-container {
            display: grid;
            /* Grid com 2 colunas, a primeira com o dobro do tamanho da segunda */
            /*grid-template-columns: 2fr 1fr;*/
        }

        .collage-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cobre o espaço sem distorcer a imagem */
            display: block;
        }

        /* Container para o grid menor à direita */
        .collage-right-column {
            display: grid;
            grid-template-rows: 1fr 1fr; /* Duas linhas de altura igual */
            grid-template-columns: 1fr 1fr 1fr; /* Duas colunas de largura igual */
        }

        /* --- 2. Seção "E o que nós vamos ensinar?" --- */
        .teaching-section {
            background-color: #e9e9e9; /* Fundo cinza claro */
            padding: 60px 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .teaching-container {
            max-width: 1100px;
            margin: 0 auto;
        }

        .teaching-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .teaching-header h2 {
            color: #9B2238; /* Cor vinho/vermelho escuro */
            font-size: 2em;
            margin: 0;
        }
        
        /* Grid com os cards de aprendizado */
        .teaching-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 colunas */
            gap: 25px; /* Espaçamento entre os cards */
        }

        .teaching-card {
            background-color: #cccccc; /* Fundo cinza dos cards */
            border-radius: 15px;
            padding: 30px 25px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }
        
        .card-icon-wrapper {
            background-color: #ffffff;
            width: 70px;
            height: 70px;
            border-radius: 50%; /* Círculo perfeito */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            flex-shrink: 0; /* Impede que o ícone encolha */
        }

        .card-icon-wrapper svg {
            width: 36px;
            height: 36px;
            stroke: #9B2238; /* Cor dos ícones */
        }

        .teaching-card p {
            color: #333;
            font-size: 1em;
            line-height: 1.5;
            margin: 0;
        }

        /* --- Responsividade --- */
        @media (max-width: 900px) {
            .collage-container {
                /* Em telas menores, a colagem se torna uma única coluna */
                grid-template-columns: 1fr;
            }
            .teaching-grid {
                /* O grid de ensino passa para 2 colunas */
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .teaching-grid {
                /* Em celulares, o grid de ensino vira 1 coluna */
                grid-template-columns: 1fr;
            }
        }        





/* --- Seção dos Módulos --- */
        .modules-section {
            background-color: #1e1e1e; /* Fundo escuro */
            color: #ffffff;
            padding: 60px 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .modules-container {
            max-width: 1000px;
            margin: 0 auto;
        }

        /* --- Cabeçalho da Seção --- */
        .modules-header {
            margin-bottom: 30px;
            position: relative;
        }
        
        /* Linha decorativa azul */
        /*.modules-header::before {
            content: '';
            position: absolute;
            top: -15px;
            left: 0;
            width: 40px;
            height: 3px;
            background-color: #007bff; /* Cor azul */
        }*/

        .modules-header h2 {
            font-size: 2em;
            margin: 0 0 10px 0;
        }

        .modules-header .modules-highlight-red {
            color: #e52b34; /* Cor vermelha para o texto destacado */
        }
        
        .modules-header p {
            color: #cccccc;
            font-size: 1.1em;
            margin: 0;
        }

        /* --- Lista Sanfonada (Accordion) --- */
        .modules-accordion .modules-item {
            border-bottom: 1px solid #444; /* Linha divisória */
        }
        
        .modules-accordion .modules-item:last-child {
            border-bottom: none;
        }
        
        /* O cabeçalho clicável de cada item */
        .modules-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 0;
            cursor: pointer;
            list-style: none; /* Remove o marcador padrão (seta) */
        }
        
        /* Remove o marcador padrão no Chrome/Safari */
        .modules-summary::-webkit-details-marker {
            display: none;
        }

        .summary-title {
            font-size: 1.2em;
            font-weight: bold;
        }

        .summary-title::before {
            content: '→';
            margin-right: 15px;
            color: #e52b34;
        }

        .summary-duration {
            color: #e52b34;
            font-weight: 500;
            margin-left: 5px;
        }
        
        /* Ícone de + e - no final */
        .summary-toggle-icon {
            font-size: 2em;
            font-weight: 100;
            color: #fff;
        }

        .summary-toggle-icon::before {
            content: '+';
        }
        
        /* Quando o item está aberto, o ícone muda para - */
        .modules-item[open] .summary-toggle-icon::before {
            content: '−';
        }

        /* Conteúdo descritivo de cada módulo */
        .modules-description {
            color: #cccccc;
            padding: 0 15px 25px 40px; /* Padding para alinhar com o texto do título */
            line-height: 1.6;
        }
        
        .modules-description p {
            margin: 0;
        }
        
        /* --- Responsividade --- */
        @media (max-width: 600px) {
            .modules-header h2 {
                font-size: 1.6em;
            }
            .summary-title {
                font-size: 1em;
            }
        }        



/* --- Seção de Depoimentos --- */
        .testimonials-section {
            background-color: #1e1e1f; /* Fundo cinza bem escuro */
            padding: 60px 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .testimonials-container {
            max-width: 1100px;
            margin: 0 auto;
        }

        /* Grid que contém os cards */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Cria 2 colunas de largura igual */
            gap: 30px; /* Espaçamento entre os cards */
        }

        /* Card de depoimento individual */
        .testimonial-card {
            background-color: #ffffff;
            border-radius: 20px; /* Cantos bem arredondados */
            padding: 35px;
            display: flex;
            flex-direction: column;
        }
        
        /* Ícone de aspas */
        .testimonial-quote-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 20px;
            color: #e52b34; /* Cor vermelha */
        }

        /* Texto do depoimento (usando a tag semântica <blockquote>) */
        .testimonial-text {
            color: #333;
            font-size: 1.05em;
            line-height: 1.6;
            margin: 0;
            flex-grow: 1; /* Faz o texto ocupar o espaço disponível, alinhando os nomes */
        }

        /* Nome do autor (usando a tag semântica <cite>) */
        .testimonial-author {
            color: #e52b34;
            font-weight: bold;
            font-style: normal; /* Remove o itálico padrão da tag <cite> */
            margin-top: 25px;
            display: block;
        }

        /* --- Responsividade --- */
        @media (max-width: 900px) {
            /* Em telas de tablet e celular, o grid passa a ter 1 coluna */
            .testimonials-grid {
                grid-template-columns: 1fr;
            }
        }        


section.depoimentos-imagens div {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}        
section.depoimentos-imagens {
    background-color: #1e1e1f;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 0 0 50px 0;
}



/* --- 1. Seção de Preços e Inscrições --- */
        .enrollment-pricing-section {
            padding: 50px 20px;
            text-align: center;
            position: relative;
            /* Para o padrão de utensílios no fundo, você usaria algo como: */
             background-image: url('../imgs/bg_ut.jpg'); 
             background-repeat: no-repeat; 
            background-color: #fff; /* Cor de fundo caso não tenha a imagem */
            background-position: center bottom;
            background-size: contain;
            width: 100%;
            box-sizing: border-box;
        }
        
        .enrollment-pricing-section::before {
            /*content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #9B2238; /* Linha vermelha no topo */*/
        }

        .pricing-container {
            max-width: 1140px;
            margin: 0 auto;
        }

        .pricing-container h2 {
            font-size: 37px;
            color: #333;
            margin-top: 0;
        }

        .pricing-container .pricing-subtitle {
            font-size: 1.1em;
            color: #555;
        }
        
        .pricing-container .pricing-highlight-red {
            color: #9B2238;
            font-weight: bold;
        }

        .pricing-fee {
            color: #888;
            text-transform: uppercase;
            font-size: 0.9em;
            margin-top: 30px;
        }

        .pricing-main-value {
            color: #333;
            font-weight: bold;
            margin: 10px 0 30px 0;
        }

        .pricing-main-value .pricing-intro {
            font-size: 70px;
            display: block;
        }

        .pricing-main-value .pricing-original {
            text-decoration: line-through;
            font-size: 43px;
            font-weight: normal;
            color: #777;
        }
        
        .pricing-main-value .pricing-final {
            font-size: 70px;
            display: block;
            line-height: 1.1;
        }
        
        .pricing-cta-box {
            background-color: #9B2238;
            color: white;
            padding: 20px;
            border-radius: 8px;
            max-width: 450px;
            margin: 20px auto 0;
            font-weight: bold;
            text-transform: uppercase;
            line-height: 1.6;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        
        /* --- 2. Seção de Chamada Final (CTA) --- */
        .final-cta-section {
            background-color: #9B2238;
            padding: 50px 20px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }

        .final-cta-container h2 {
            color: white;
            font-size: 2em;
            margin-top: 0;
            margin-bottom: 30px;
        }

        .final-cta-button {
            display: inline-block;
            background-color: white;
            color: #333;
            padding: 15px 35px;
            border-radius: 50px; /* Deixa o botão em formato de pílula */
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1em;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .final-cta-button:hover {
            background-color: #f0f0f0;
            transform: scale(1.05);
        }

        .pricing-cta-box:hover{
            transform: scale(1.05);
        }

        /* --- Responsividade --- */
        @media (max-width: 600px) {
            .pricing-container h2 { font-size: 1.5em; }
            .pricing-main-value .pricing-intro { font-size: 1.8em; }
            .pricing-main-value .pricing-original { font-size: 1.0em; }
            .pricing-main-value .pricing-final { font-size: 2.8em; }
            .final-cta-container h2 { font-size: 1.6em; }
        }


/* --- Seção de Bônus --- */
        .bonus-section {
            padding: 60px 20px;
        }

        .bonus-container {
            display: flex; /* Ativa o Flexbox para o layout de duas colunas */
            align-items: center; /* Alinha verticalmente o texto e a imagem */
            gap: 40px; /* Espaço entre as colunas de texto e imagem */
            max-width: 1100px;
            margin: 0 auto;
        }
        
        /* Coluna do Texto (Esquerda) */
        .bonus-text-content {
            flex: 1; /* Permite que a coluna se ajuste ao espaço */
        }

        .bonus-text-content h2 {
            font-size: 2em;
            color: #333;
            margin-top: 0;
            margin-bottom: 10px;
        }

        .bonus-subtitle {
            font-size: 1.3em;
            color: #9B2238; /* Cor vinho/vermelho escuro */
            font-weight: bold;
            margin-bottom: 20px;
        }

        .bonus-description {
            color: #555;
            font-size: 1.1em;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .bonus-cta-button {
            display: inline-block;
            background-color: #9B2238;
            color: white;
            padding: 14px 28px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 8px;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .bonus-cta-button:hover {
            background-color: #7c1b2d; /* Tom de vermelho mais escuro */
            transform: scale(1.05);
        }

        /* Coluna da Imagem (Direita) */
        .bonus-image-content {
            flex: 1;
        }

        .bonus-image-content img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        /* --- Responsividade --- */
        @media only screen and (max-width: 768px)  {
            .bonus-container {
                /* Em telas menores, as colunas se empilham */
                flex-direction: column;
                text-align: center;
            }
            .bonus-text-content h2 {
                font-size: 1.8em;
            }
            .bonus-subtitle {
                font-size: 1.2em;
            }
        }        


/* --- Seção de Certificados --- */
        .certification-section {
            padding: 60px 20px;
            background-color: #e8e7e7;
            width: 100%;
            box-sizing: border-box;
        }

        .certification-container {
            max-width: 1100px;
            margin: 0 auto;
        }

        .certification-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .certification-header h2 {
            font-size: 2em;
            color: #9B2238; /* Cor vinho/vermelho escuro */
            margin-top: 0;
            margin-bottom: 15px;
        }

        .certification-header p {
            font-size: 1.1em;
            line-height: 1.6;
            color: #555;
            max-width: 700px;
            margin: 0 auto;
        }

        /* --- Galeria de Imagens em Grid --- */
        .certification-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 colunas de largura igual */
            gap: 15px; /* Espaçamento entre os itens */
            align-items: stretch;
        }

        .certification-grid-item {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .certification-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cobre todo o espaço sem distorcer */
            display: block;
        }
        
        /* Bloco vermelho com ícones */
        .certification-icon-box {
            background-color: #9B2238;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .certification-icon-box img {
            width: 80%;
            max-width: 150px;
            height: auto;
        }

        /* --- Responsividade --- */
        @media only screen and (max-width: 768px)  {
            /* Em tablets, o grid passa a ter 2 colunas */
            .certification-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .certification-header h2 {
                font-size: 1.6em;
            }
            /* Em celulares, o grid vira 1 coluna */
            .certification-grid {
                grid-template-columns: 1fr;
            }
        }        



/* --- 1. Seção "Satisfação Garantida" --- */
        .satisfaction-banner {
            background-color: #a40000; /* Fundo vermelho escuro */
            color: #ffffff;
            padding: 40px 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .satisfaction-container {
            display: flex;
            align-items: center;
            gap: 30px; /* Espaço entre o selo e o texto */
            max-width: 1000px;
            margin: 0 auto;
        }
        
        /* Contêiner do selo */
        .satisfaction-seal {
            flex-basis: 150px; /* Largura base do selo */
            flex-shrink: 0; /* Impede que o selo encolha */
        }

        .satisfaction-seal img {
            width: 100%;
            height: auto;
        }

        /* Contêiner do texto */
        .satisfaction-text h2 {
            font-size: 1.8em;
            margin-top: 0;
            margin-bottom: 10px;
        }

        .satisfaction-text p {
            font-size: 1.1em;
            line-height: 1.6;
            margin: 0;
        }

        .satisfaction-highlight {
            color: #ffd700; /* Cor amarela/dourada para o destaque */
            font-weight: bold;
        }

        /* --- 2. Seção "Uma Oportunidade Única" --- */
        .opportunity-section {
            background-color: #e9e9e9; /* Fundo cinza claro */
            padding: 60px 20px;
            width: 100%;
            box-sizing: border-box;
        }
        
        .opportunity-container {
            display: flex;
            align-items: center;
            gap: 50px; /* Espaço entre a imagem e o texto */
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Contêiner da imagem com a borda vermelha */
        .opportunity-image {
            flex-basis: 40%;
            flex-shrink: 0;
            background-color: #c51d23; /* Cor da borda */
            padding: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .opportunity-image img {
            width: 100%;
            display: block;
        }
        
        /* Contêiner do texto */
        .opportunity-text {
            flex: 1;
        }

        .opportunity-text h2 {
            color: #c51d23;
            font-size: 2em;
            font-weight: bold;
            margin-top: 0;
        }

        .opportunity-text p {
            color: #555;
            font-size: 1.1em;
            line-height: 1.7;
        }
        
        /* --- Responsividade --- */
        @media only screen and (max-width: 768px)  {
            /* Seção de Satisfação */
            .satisfaction-container {
                flex-direction: column; /* Empilha o selo e o texto */
                text-align: center;
            }
            .satisfaction-seal {
                margin-bottom: 20px;
            }
            .satisfaction-text h2 {
                font-size: 1.6em;
            }

            /* Seção de Oportunidade */
            .opportunity-container {
                flex-direction: column; /* Empilha a imagem e o texto */
                text-align: center;
            }
            .opportunity-text h2 {
                font-size: 1.8em;
                margin-top: 20px;
            }
        }        



/* --- 1. Seção "Ainda tem alguma dúvida?" --- */
        .final-questions-section {
            background-color: #f0f0f0; /* Fundo cinza bem claro */
            padding: 50px 20px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }

        .final-questions-container h2 {
            font-size: 1.8em;
            color: #333;
            margin-top: 0;
            margin-bottom: 25px;
        }

        .contact-consultant-button {
            display: inline-block;
            background-color: #b5192a; /* Tom de vermelho do botão */
            color: white;
            padding: 15px 30px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 1.1em;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }
        
        .contact-consultant-button:hover {
            background-color: #9c1523; /* Tom mais escuro no hover */
            transform: scale(1.05);
        }

        /* --- 2. Seção "Rodapé" --- */
        .site-footer {
            background-color: #dcdcdc; /* Fundo cinza do rodapé */
            padding: 40px 20px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }
        
        .footer-logo {
            max-width: 180px; /* Largura máxima do logo */
            margin-bottom: 20px;
        }

        .footer-copyright {
            color: #555;
            font-size: 0.9em;
            margin: 0;
        }
        
        /* --- Responsividade --- */
        @media (max-width: 600px) {
            .final-questions-container h2 {
                font-size: 1.5em;
            }
            .contact-consultant-button {
                font-size: 1em;
                padding: 12px 25px;
            }
        }        



 /* --- Seção de Perguntas Frequentes (FAQ) --- */
        .faq-section {
            background-color: #1e1e1f; /* Fundo cinza bem escuro */
            color: #ffffff;
            padding: 60px 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .faq-container {
            max-width: 850px;
            margin: 0 auto;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }
        
        /* Linha decorativa vermelha */
        .faq-header::before {
            content: '';
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background-color: #9B2238; /* Cor vermelha */
        }

        .faq-header h2 {
            font-size: 2em;
            margin: 0;
        }
        
        /* Contêiner da lista sanfonada */
        .faq-accordion {
            display: flex;
            flex-direction: column;
            gap: 15px; /* Espaço entre os itens */
        }
        
        /* Item individual da lista */
        .faq-item {
            background-color: #9B2238;
            border-radius: 8px;
            padding: 5px 25px;
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            cursor: pointer;
            list-style: none; /* Remove a seta padrão */
            font-weight: bold;
            text-transform: uppercase;
            font-size: 1.1em;
        }

        /* Remove a seta padrão no Chrome/Safari */
        .faq-question::-webkit-details-marker {
            display: none;
        }
        
        /* Ícone de toggle (+/-) */
        .faq-toggle-icon {
            border: 2px solid white;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0; /* Impede que o ícone encolha */
            margin-left: 15px;
            transition: transform 0.3s ease;
        }
        
        .faq-item[open] .faq-toggle-icon {
            transform: rotate(180deg);
        }

        .faq-answer {
            padding: 0 0 20px 0;
            line-height: 1.7;
            color: #f0f0f0;
        }

        .faq-answer p {
            margin: 0;
        }
        
        /* --- Responsividade --- */
        @media (max-width: 600px) {
            .faq-header h2 {
                font-size: 1.8em;
            }
            .faq-question {
                font-size: 1em;
            }
            .faq-answer {
                font-size: 0.95em;
            }
        }        


 /* --- Seção de Parceiros --- */
        .partners-section {
            background-color: #ffffff;
            padding: 60px 20px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }

        .partners-container {
            max-width: 1100px;
            margin: 0 auto;
        }
        
        /* Título da Seção */
        .partners-title {
            font-size: 1.8em;
            color: #555; /* Cor para o texto secundário do título */
            margin-top: 0;
            margin-bottom: 40px;
            font-weight: normal;
        }

        .partners-highlight {
            color: #9B2238; /* Cor vermelha para "PARCEIROS" */
            font-weight: bold;
        }

        /* Contêiner da imagem com os logos */
        .partners-logo-collection {
            max-width: 100%;
        }

        .partners-logo-collection img {
            max-width: 100%; /* Garante que a imagem dos logos seja responsiva */
            height: auto;
        }
        
        /* --- Responsividade --- */
        @media only screen and (max-width: 768px)  {
            .partners-title {
                font-size: 1.5em;
            }
            .partners-section {
                padding: 40px 20px;
            }
        }        


@media only screen and (max-width: 768px) {
    .top-container{flex-direction: column;}
    section.audience-section {max-width: 90vw; }
    .opportunity-container {flex-direction: column-reverse;}
    .top-container img{width: 100%; }
    .banner-container .banner-title {font-size: 22px;}
    .visit-banner {background-position: left center;}
    .collage-right-column {grid-template-columns: 1fr;}
}