/* ================================================= */
/* 1. VARIÁVEIS E FONTES                 */
/* ================================================= */

:root {
    /* Cores */
    --cor-verde: #051F14;
    --cor-bege: #E7DAD0;
    --cor-claro: #FDF6ED;
    --cor-card: #E6D8CD;
    /* Cor próxima ao bege para cards */

    /* Novas cores para os cards da Sessão 02 */
    --cor-card-02-1: #DCD0C7;
    /* Bege um pouco mais escuro */
    --cor-card-02-2: #D0C3BB;
    /* Outro tom de bege/marrom claro */
    --cor-card-02-3: #C4B6B0;
    /* Mais um tom diferente */

    /* Fontes */
    --fonte-principal: 'FS Meridian', sans-serif;

    /* Tamanhos de Fonte */
    --tamanho-titulo: 2.3rem;
    --tamanho-descricao: 1.3rem;
    --tamanho-paragrafo-destaque: 1.5rem;
    --tamanho-h3: 1.5rem;
}

/* Fontes Grotta - CAMINHO CORRIGIDO */
@font-face {
    font-family: 'FS Meridian';
    src: url('../_fontes/_grotta/FSMeridian-Regular.woff2') format('woff2'),
        url('../_fontes/_grotta/FSMeridian-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'FS Meridian';
    src: url('../_fontes/_grotta/FSMeridian-Medium.woff2') format('woff2'),
        url('../_fontes/_grotta/FSMeridian-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'FS Meridian';
    src: url('../_fontes/_grotta/FSMeridian-Bold.woff2') format('woff2'),
        url('../_fontes/_grotta/FSMeridian-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* Opcional: Se precisar do peso Light (300) */
@font-face {
    font-family: 'FS Meridian';
    src: url('../_fontes/_grotta/FSMeridian-Light.woff2') format('woff2'),
        url('../_fontes/_grotta/FSMeridian-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fonte-principal);
    line-height: 1.6;
    color: var(--cor-verde);
    background-color: var(--cor-claro);
}

/* Contêiner Centralizador */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    text-align: center;
}

/* Títulos e Textos */
.sessao .titulo {
    font-size: var(--tamanho-titulo);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.sessao .subtitulo {
    font-size: var(--tamanho-descricao);
    font-weight: 500;
    margin-bottom: 30px;
    line-height: 1.4;
}

.sessao .descricao,
.sessao .paragrafo-destaque {
    font-size: var(--tamanho-descricao);
    font-weight: 400;
    margin-bottom: 25px;
    line-height: 1.5;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.sessao .paragrafo-destaque {
    font-weight: 600;
    margin-top: 20px;
}

/* ================================================= */
/* 2. ESTILO DOS BOTÕES                  */
/* ================================================= */

.btn {
    display: inline-block;
    padding: 15px 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    border-radius: 15px;
    transition: all 0.3s ease;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
}

/* Botão Principal (Sessão 01, 06, 09, 10) */
.btn-whatsapp {
    background-color: var(--cor-verde);
    color: var(--cor-bege);
    border-color: var(--cor-verde);
}

.btn-whatsapp:hover {
    background-color: var(--cor-bege);
    color: var(--cor-verde);
}

/* Botão Secundário (Sessão 02, 04, 07 - Fundo Bege, Borda Verde) */
.btn-secundario {
    background-color: transparent;
    color: var(--cor-verde);
    border-color: var(--cor-verde);
}

.btn-secundario:hover {
    background-color: var(--cor-verde);
    color: var(--cor-bege);
}

/* Botão Escuro (Sessão 03 - Fundo Claro, Borda Verde) */
.btn-whatsapp-escuro {
    background-color: var(--cor-claro);
    color: var(--cor-verde);
    border-color: var(--cor-verde);
}

.btn-whatsapp-escuro:hover {
    background-color: var(--cor-verde);
    color: var(--cor-claro);
}

/* Botão Formação (Sessão 05, 11 - Fundo Invertido com Efeito) */
.btn-formacao {
    background-color: var(--cor-bege);
    color: var(--cor-verde);
    border-color: var(--cor-bege);
    box-shadow: 0 0 0 rgba(5, 31, 20, 0.4);
}

.btn-formacao:hover {
    background-color: var(--cor-verde);
    color: var(--cor-bege);
    /* Efeito sutil de 'pulse' no hover */
    box-shadow: 0 0 10px rgba(231, 218, 208, 0.8), 0 0 20px rgba(231, 218, 208, 0.5);
}

/* ================================================= */
/* 3. ESTILO GERAL DAS SESSÕES           */
/* ================================================= */

.sessao {
    padding: 30px 0;
}

/* Sessão 01: Hero */
.sessao01 {
    background-image: url('../_img/03-pilates/fundo_teste.webp');
    background-size: 100%;
    background-position: center 05%;
    /* Centraliza a imagem no centro horizontal e verticalmente */
    background-repeat: no-repeat;
    /* MUITO IMPORTANTE: Garante que a imagem não se repita */

    position: relative;
    padding: 100px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.sessao01 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 31, 20, 0.6);
    /* cor-verde com 50% de transparência */
    z-index: 1;
}

.sessao01 .container {
    position: relative;
    z-index: 2;
}

.sessao01 .btn-whatsapp {
    margin-top: 40px;
    /* Adiciona 30px de espaço acima do botão */
}

#sessao01 .btn-whatsapp {
    background-color: var(--cor-bege);
    color: var(--cor-verde);
    border-color: var(--cor-verde);
}

#sessao01 .btn-whatsapp:hover {
    /* Inverte o fundo e a cor do texto para o verde escuro */
    background-color: var(--cor-verde);
    color: var(--cor-bege);

    /* A borda pode manter a cor verde escura ou ser invertida (neste caso, mantive o verde escuro) */
    border-color: var(--cor-verde);
}

.sessao11 .btn-formacao {
    margin-top: 40px;
    /* Adiciona 30px de espaço acima do botão */
}

.sessao01 .titulo,
.sessao01 .subtitulo,
.sessao01 .descricao,
.sessao01 .paragrafo-destaque {
    color: var(--cor-bege);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.sessao01 .titulo {
    font-size: 3rem;
}

.sessao02 .titulo {
    font-size: 3rem;
}

/* Sessão 02, 04, 06, 09, 10 - Fundo Bege */
.sessao02,
.sessao04,
.sessao06,
.sessao08,
.sessao10 {
    background-color: var(--cor-bege);
}

/* Sessão 03, 07, 08 - Fundo Claro */
.sessao03,
.sessao07,
.sessao09 {
    background-color: var(--cor-claro);
}

/* NOVO ESTILO: Reduzindo o espaçamento inferior da Sessão 07 */
.sessao07 {
    /* O padding: 30px 0; vem do .sessao. 
       Vamos reduzir o padding inferior (bottom) para, por exemplo, 10px ou 0px. */
    padding-bottom: 0;
    /* Remove completamente o padding inferior da Sessão 07 */
}

/* Se você precisar de um pouco de espaço, use: 
.sessao07 {
    padding-bottom: 10px; 
}
*/

/* Sessão 08 */
.sessao08 {
    /* Se a sessão 08 também precisar ser mais 'colada', podemos reduzir o padding-top dela */
    padding-top: 10px;
    /* Reduzindo um pouco o padding superior da Sessão 08 */
}

/* Sessão 05, 11 - Fundo Verde */
.sessao05,
.sessao11 {
    background-color: var(--cor-verde);
}

.sessao05 .titulo,
.sessao05 .descricao,
.sessao11 .titulo,
.sessao11 .descricao {
    color: var(--cor-bege);
}

.sessao05 .destaque-formacao {
    font-weight: 700;
    margin-top: 30px;
}

/* NOVO ESTILO: Container para o texto com borda na Sessão 05 */
.sessao05 .descricao-box {
    /* Centraliza o bloco na página, limitando a largura */
    max-width: 900px;
    margin: 0 auto 30px auto;

    /* Estilo da Borda */
    border: 2px solid var(--cor-bege);
    /* Borda na cor do texto */
    border-radius: 10px;
    /* Cantos arredondados */
    padding: 30px 40px;
    /* Espaçamento interno para o texto não colar na borda */

    /* Alinha o conteúdo interno à esquerda, conforme solicitado */
    text-align: left;
}

/* Garante que os parágrafos dentro da caixa de descrição não tenham margem inferior extra */
.sessao05 .descricao-box .descricao {
    text-align: left;
    /* Garante que o texto fique à esquerda */
    margin-bottom: 15px;
    /* Reduz a margem inferior entre os parágrafos */
    max-width: none;
    /* Remove a limitação de largura que estava no .descricao geral */
}

.sessao05 .descricao-box .descricao:last-child {
    margin-bottom: 0;
    /* Remove a margem do último parágrafo dentro da caixa */
}

/* ------------------------------------------------ */
/* NOVO ESTILO: Ícone de Check INVERTIDO (Sessão 05) */
/* ------------------------------------------------ */

.icone-check-inverted {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* INVERSÃO DE COR: Fundo do círculo na cor BEGE (clara) */
    background-color: var(--cor-bege);
    margin-right: 15px;
    position: relative;
    flex-shrink: 0;
}

/* O checkmark dentro do círculo */
.icone-check-inverted::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 4px;
    width: 12px;
    height: 6px;
    /* INVERSÃO DE COR: Cor do check na cor VERDE (escura) */
    border: solid var(--cor-verde);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
}


/* Ajustes na Sessão 05 para o alinhamento do ícone e texto */
.sessao05 .descricao-box .descricao-com-icone {
    display: flex;
    /* Habilita flexbox para alinhar ícone e texto */
    align-items: flex-start;
    /* Alinha o ícone no topo do texto */
    text-align: left;
    margin-bottom: 20px;
    /* Aumenta a margem para separar os itens com ícone */
    max-width: none;
    /* Garante que o texto use a largura total da caixa */
}

/* Remove a margem do último item para não ter espaço extra no final da caixa */
.sessao05 .descricao-box .descricao-com-icone:last-child {
    margin-bottom: 0;
}

/* ================================================= */
/* 4. CARDS E GRIDS                      */
/* ================================================= */

.card-grid {
    display: grid;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.card-grid.tres-colunas {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card-grid.duas-colunas {
    grid-template-columns: 1fr 1fr;
    text-align: left;
}

/* Sessão 02: Cards Check */
.card-item-check {
    /* Removido background-color aqui para ser definido nas classes específicas */
    padding: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para dar profundidade */
}

.card-item-check p {
    font-size: var(--tamanho-descricao);
    font-weight: 500;
    color: var(--cor-verde);
    margin: 0;
}

/* Estilos para o NOVO ícone de check customizado */
.icone-check-custom {
    display: inline-block;
    width: 24px;
    /* Tamanho do círculo */
    height: 24px;
    border-radius: 50%;
    /* Faz o círculo */
    background-color: var(--cor-verde);
    /* Cor de fundo do círculo do check */
    margin-right: 15px;
    position: relative;
    flex-shrink: 0;
    /* Impede que o círculo diminua */
}

/* Adiciona o "check" branco dentro do círculo */
.icone-check-custom::after {
    content: '';
    /* Conteúdo vazio para o pseudo-elemento */
    position: absolute;
    top: 6px;
    /* Ajuste a posição vertical do check */
    left: 4px;
    /* Ajuste a posição horizontal do check */
    width: 12px;
    /* Largura da perna horizontal do check */
    height: 6px;
    /* Altura da perna vertical do check */
    border: solid var(--cor-bege);
    /* Cor do check */
    border-width: 0 0 2px 2px;
    /* Apenas as bordas inferior e esquerda para formar o L */
    transform: rotate(-45deg);
    /* Gira para formar o formato de check */
}

/* Cores de fundo individuais para cada card da Sessão 02 */
.card-item-check-1 {
    background-color: var(--cor-card-02-2);
}

.card-item-check-2 {
    background-color: var(--cor-card-02-2);
}

.card-item-check-3 {
    background-color: var(--cor-card-02-2);
}

.sessao02 .btn-secundario {
    margin-top: 40px;
    /* Adiciona 40px de espaço acima do botão, separando-o dos cards */
}

/* Sessão 03: Cards com Ícone */
.card-item-icone {
    background-color: var(--cor-card);
    padding: 30px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    text-align: center;
}

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

.card-item-icone img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.card-item-icone h3 {
    font-size: var(--tamanho-h3);
    color: var(--cor-verde);
    font-weight: 700;
    margin-bottom: 10px;
}

.card-item-icone p {
    font-size: 1.1rem;
    color: var(--cor-verde);
    margin: 0;
}

.sessao03 .btn-whatsapp-escuro {
    margin-top: 30px;
    /* Adiciona 40px de espaço acima do botão, separando-o dos cards */
}

/* Sessão 06: Colunas de Resultados */
.colunas-resultados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 700px;
    margin: 40px auto;
    text-align: left;
    gap: 20px;
}

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

.lista-check li {
    font-size: var(--tamanho-descricao);
    color: var(--cor-verde);
    margin-bottom: 15px;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.icone-check-verde {
    font-size: 1.5rem;
    color: var(--cor-verde);
    margin-right: 15px;
    font-weight: 700;
}

/* Sessão 07: Estrutura */
.duas-colunas-estrutura {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.texto-estrutura {
    /* Centraliza o botão e garante que o bloco de texto em si fique justificado se for o caso */
    text-align: center;
}

.texto-estrutura p {
    font-size: var(--tamanho-descricao);
    color: var(--cor-verde);
    margin-bottom: 30px;
    max-width: 400px;
    /* Exemplo: Um pouco menos que a metade da coluna */
    margin-left: auto;
    /* Centraliza o parágrafo dentro da sua div pai */
    margin-right: auto;
    /* Centraliza o parágrafo dentro da sua div pai */
    text-align: left;
    /* Mantém o alinhamento do texto à esquerda para leitura */
}

.imagem-estrutura img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Sessão 08: Profissionais */

.sessao08 .card-grid.duas-colunas {
    /* NOVO ESTILO: Limita a largura máxima do grid e centraliza */

    /* Sugestão de largura: 850px é um bom tamanho para dois cards grandes */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    /* Adiciona um espaço superior ao grid */

    /* Garante que o grid original continue a funcionar */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.card-profissional {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Sombra discreta */
    transition: all 0.3s ease;
    text-align: left;
}

.card-profissional:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    /* Efeito ao passar o mouse */
    transform: translateY(-3px);
}

.card-profissional .imagem-perfil {
    width: 100%;
    height: 350px;
    /* Altura fixa para as imagens */
    overflow: hidden;
}

.card-profissional img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-profissional .info-perfil {
    padding: 25px;
}

.card-profissional h3 {
    font-size: var(--tamanho-h3);
    color: var(--cor-verde);
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

.card-profissional p {
    font-size: 1.1rem;
    color: var(--cor-verde);
    margin: 0;
    text-align: justify;
}

/* Sessão 09: Vídeos */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Sessão 10: FAQ/Acordeão */
.faq {
    max-width: 800px;
    margin: 40px auto 50px auto;
    text-align: left;
}

.faq-item {
    border: 3px solid #DCD0C7;
    /* Cor da borda que pode ser ajustada */
    border-radius: 15px;
    margin-bottom: 15px;
    padding: 15px 20px;
    text-align: left;
    cursor: pointer;
    /* Note: Se o fundo da sessão já for bege claro, você pode remover o background-color */
    background-color: var(--cor-bege);
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item summary {
    padding: 20px 25px;
    font-size: var(--tamanho-descricao);
    font-weight: 600;
    color: var(--cor-verde);
    list-style: none;
    /* Remove a seta padrão do details */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-item[open] summary {
    background-color: var(--cor-bege);
}

.faq-item p {
    padding: 10px 25px 20px 25px;
    font-size: 1.1rem;
    color: var(--cor-verde);
    border-top: 1px solid rgba(5, 31, 20, 0.1);
}

/* Seta customizada */
.seta-faq {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--cor-verde);
    transition: transform 0.3s ease;
}

.faq-item[open] .seta-faq {
    transform: rotate(180deg);
}

.sessao10 .faq {
    max-width: 700px;
    /* Limita a largura do bloco FAQ */
    margin: 40px auto;
    /* Centraliza */
}



/* ================================================= */
/* 5. RODAPÉ E EXTRAS                    */
/* ================================================= */

.footer {
    background-color: var(--cor-verde);
    color: var(--cor-bege);
    padding: 10px 0;
    text-align: center;
    font-size: 1rem;
}

.footer .container {
    padding: 10px;
}

.contato-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.contato-info img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.contato-info p {
    margin: 0;
    font-size: 1.1rem;
}

.copy {
    margin-top: 15px;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* =========================================================================
   7. BOTÃO FLUTUANTE WHATSAPP (Específico)
   ========================================================================= */

/* Posição e estilo base */
#whatsapp-fixed-cta {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    /* Fixo no topo da pilha */
    background-color: #25D366;
    color: #fff;
    width: 56px;
    height: 56px;
    padding: 14px;
    border-radius: 50%;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Estilo Hover */
#whatsapp-fixed-cta:hover {
    background-color: #20BA5A;
    transform: scale(1.1);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* --- ANIMAÇÃO PULSE (PISCANDO) --- */

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Aplica a animação */
#whatsapp-fixed-cta {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Estilos do Banner de Cookies/LGPD */
#cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    /* Fundo escuro */
    color: #fff;
    /* Texto claro */
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    /* Garante que fique acima de outros elementos */
    font-family: sans-serif;
    line-height: 1.4;
    box-sizing: border-box;
}

.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    /* Limita a largura em telas grandes */
    margin: 0 auto;
    flex-wrap: wrap;
    /* Permite que os elementos quebrem em telas pequenas */
}

#cookie-consent-banner p {
    margin: 0;
    font-size: 14px;
    flex-grow: 1;
    padding-right: 20px;
    /* Espaço entre o texto e o botão */
}

#cookie-consent-banner a {
    color: #a8e6cf;
    /* Cor de link que destaque no fundo escuro */
    text-decoration: underline;
    font-weight: bold;
}

#aceitar-cookies {
    background-color: #6fb06e;
    /* Cor do botão (verde Prolong) */
    color: #fff;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
    flex-shrink: 0;
    /* Impede o botão de encolher */
}

#aceitar-cookies:hover {
    background-color: #5d925d;
}

/* ================================================= */
/* 6. MEDIA QUERIES - RESPONSIVIDADE       */
/* ================================================= */

/* --- AJUSTES GERAIS PARA TABLETS (Largura até 991px) --- */
@media (max-width: 991px) {

    /* Container e Textos */
    .container {
        /* Reduz o padding horizontal para dar mais espaço */
        padding: 40px 15px;
    }

    /* Tamanhos de Fonte */
    :root {
        --tamanho-titulo: 2.1rem;
        --tamanho-descricao: 1.4rem;
        --tamanho-paragrafo-destaque: 1.4rem;
        --tamanho-h3: 1.4rem;
    }

    /* Botões */
    .btn {
        padding: 12px 18px;
        font-size: 1.1rem;
    }

    /* GERAL: Layouts de Múltiplas Colunas */

    /* Sessão 06: Colunas de Resultados (Vira 1 coluna) */
    .colunas-resultados {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Sessão 08: Profissionais (Ajusta a largura do grid) */
    .sessao08 .card-grid.duas-colunas {
        max-width: 700px;
        /* Reduz ligeiramente para caber melhor */
        gap: 20px;
    }

    /* Sessão 07: Estrutura (Ajusta a largura do conjunto) */
    .duas-colunas-estrutura {
        max-width: 700px;
    }
}


/* --- AJUSTES PARA CELULARES (Largura até 576px) --- */
@media (max-width: 576px) {

    /* Tamanhos de Fonte */
    :root {
        --tamanho-titulo: 1.8rem;
        --tamanho-descricao: 1.3rem;
        --tamanho-paragrafo-destaque: 1.2rem;
        --tamanho-h3: 1.3rem;
    }

    /* Títulos da Sessão 01 e 02 */
    .sessao01 .titulo,
    .sessao02 .titulo {
        font-size: 2.2rem;
    }

    /* Sessão Geral */
    .sessao {
        /* Reduz o padding vertical genérico para compactar */
        padding: 25px 0;
    }

    /* ------------------------------------------------ */
    /* Sessão 01: Hero */
    /* ------------------------------------------------ */
    .sessao01 {
        /* Garante que o texto fique legível */
        padding: 60px 0;
        /* NOVO: Aplica o zoom de 110% SÓ no celular */
        background-image: url('../_img/03-pilates/fundo_testemob.webp');
        background-size: 120%;
        background-position: center 25%;
    }

    .sessao01 .titulo {
        font-size: 2.5rem;
    }

    .sessao01 .btn-whatsapp {
        margin-top: 25px;
        /* Reduz margem do botão */
    }

    /* ------------------------------------------------ */
    /* Sessões de Grid (02, 03, 08, 09) */
    /* ------------------------------------------------ */

    /* Quebra todos os grids de Múltiplas Colunas para 1 COLUNA */
    .card-grid.tres-colunas,
    .card-grid.duas-colunas,
    .sessao08 .card-grid.duas-colunas,
    .duas-colunas-estrutura {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Sessão 08: Cards Profissionais */
    .sessao08 .card-grid.duas-colunas {
        max-width: 400px;
        /* Limita a largura para ficar mais estreito no celular */
    }

    .card-profissional .imagem-perfil {
        height: 250px;
        /* Reduz a altura da imagem no mobile */
    }

    /* Sessão 07: Estrutura */
    .duas-colunas-estrutura {
        /* Remove a limitação de largura no mobile para que o conteúdo use a tela */
        max-width: 100%;
    }

    .texto-estrutura p {
        /* Remove a largura máxima do parágrafo para que ocupe a coluna inteira */
        max-width: none;
    }

    .imagem-estrutura img {
        /* Adiciona um espaço superior na imagem para separar do texto que veio para cima */
        margin-top: 20px;
    }


    /* ------------------------------------------------ */
    /* Sessão 05: Formação com Borda e Ícones */
    /* ------------------------------------------------ */
    .sessao05 .descricao-box {
        padding: 20px;
        /* Reduz o padding interno da caixa */
    }

    .sessao05 .descricao-box .descricao-com-icone {
        margin-bottom: 15px;
        /* Reduz a margem entre os itens */
    }

    .icone-check-inverted {
        width: 20px;
        /* Reduz levemente o ícone */
        height: 20px;
    }

    .icone-check-inverted::after {
        top: 5px;
        /* Ajusta o checkmark se necessário */
        left: 3px;
        width: 10px;
        height: 5px;
    }

    #sessao05 .btn-formacao {
        font-size: 1rem;
    }

    /* ------------------------------------------------ */
    /* Sessão 10: FAQ/Acordeão */
    /* ------------------------------------------------ */
    .faq-item {
        padding: 10px;
        /* Reduz padding do item */
    }

    .faq-item summary {
        padding: 15px 15px;
        /* Reduz padding interno */
        font-size: 1.1rem;
    }

    .faq-item p {
        padding: 10px 15px 15px 15px;
        /* Reduz padding interno do conteúdo */
    }

    /* ------------------------------------------------ */
    /* Rodapé (Footer) - Ajuste de Alinhamento e Tamanho */
    /* ------------------------------------------------ */

    /* 1. Alinha o ícone com o TOPO do texto */
    .footer .contato-info {
        /* Muda o alinhamento vertical para o topo */
        align-items: flex-start;

        /* Reduz a margem inferior para compactar o rodapé */
        margin-bottom: 15px;
        /* Reduzida de 25px para 15px */
    }

    /* 2. Reduz o tamanho da fonte do endereço no mobile */
    .contato-info p {
        /* Reduz o tamanho da fonte para o mobile */
        font-size: 0.9rem;
        /* Reduz de 1.1rem para 1rem */
        /* Garante que o texto tenha o tamanho ideal para o mobile */
        margin: 0;
    }

    .footer .copy {
        font-size: 0.5rem;
    }
}

/* Ajuste para Mobile */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
    }

    #cookie-consent-banner p {
        padding-right: 0;
        margin-bottom: 10px;
    }

    #aceitar-cookies {
        width: 100%;
        /* Botão ocupa toda a largura em mobile */
        padding: 10px 15px;
    }
}