/*
    IMPORTAÇÃO DA FONTE RALEWAY
    --------------------------
    Atenção: Você precisará dos arquivos da fonte (ex: .ttf) dentro da pasta 'fonts/'
    Ajuste os nomes dos arquivos (.ttf) e os pesos (font-weight) conforme a sua fonte.
    Recomenda-se também incluir formatos .woff e .woff2 se disponíveis para melhor compatibilidade e performance.
*/
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Regular.ttf') format('truetype'); /* Usando format('truetype') para .ttf */
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Raleway-SemiBold';
    src: url('../fonts/Raleway-SemiBold.ttf') format('truetype');
    font-weight: 600; /* SemiBold */
    font-style: normal;
}

@font-face {
    font-family: 'Raleway-Bold';
    src: url('../fonts/Raleway-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}
/* Adicione mais regras @font-face para outros pesos e estilos (ex: Italic) se você tiver os arquivos correspondentes */

/* ========================================
   VARIÁVEIS CSS GLOBAIS
   ======================================== */
:root {
    /* Cores principais do projeto */
    --primary-blue: #004c97;        /* Azul principal para títulos */
    --secondary-blue: #004c97;      /* Azul secundário para botões */
    --link-blue: #004c9774;           /* Azul para links especiais */
    --text-color: #333;             /* Cor de texto principal */
    --text-muted: #555;             /* Cor de texto secundário */
    --bg-light: #f8f9fa;            /* Cor de fundo clara */
    
    /* Tipografia base */
    --font-family-base: 'Raleway', sans-serif;
    --font-size-base: 1.125rem;     /* 18px - Tamanho padrão para p e p.lead */
    --line-height-base: 1.6;        /* Altura de linha para boa legibilidade */
    --font-weight-base: 400;        /* Peso normal */
    
    /* Tamanhos de fonte para títulos */
    --h1-font-size: 3.5rem;         /* 56px */
    --h2-font-size: 2.5rem;         /* 45px - Como "Últimos artigos" */
    --h3-font-size: 1.5rem;         /* 24px - Para títulos de cards */
    --h4-font-size: 1.25rem;        /* 20px */
    --h5-font-size: 1rem;           /* 16px */
    --h6-font-size: 0.875rem;       /* 14px */
    
    /* Pesos de fonte para títulos */
    --h-font-weight-light: 400;     /* Regular/Normal */
    --h-font-weight-medium: 600;    /* Semibold */
    --h-font-weight-bold: 700;      /* Bold */
    
    /* Espaçamentos */
    --spacing-xs: 0.5rem;           /* 8px */
    --spacing-sm: 1rem;             /* 16px */
    --spacing-md: 1.5rem;           /* 24px */
    --spacing-lg: 2rem;             /* 32px */
    --spacing-xl: 3rem;             /* 48px */

    /* Variáveis específicas para a seção ZRSOC */
    --zrsoc-bg-color: #f7f9fb; /* Fundo levemente azulado para a seção ZRSOC */
    --zrsoc-left-col-bg: #f5f6f7; /* Background para a coluna da esquerda (cinza mais claro) */
    --zrsoc-title-color: #3683be; /* Azul para o título principal na coluna da esquerda */
    --zrsoc-button-bg: #205c87; /* Azul escuro para o botão */
    --zrsoc-social-icon-color: #333; /* Cor para ícones sociais e texto */


    /* Variáveis específicas para a seção de Depoimentos */
    --testimonial-blue: #004C97; /* Azul mais vibrante para títulos, aspas e seta direita */
    --testimonial-light-blue-border: #add8e6; /* Azul claro para a borda do card */
    --testimonial-medium-gray-arrow: #666; /* Cor de fundo da seta esquerda */
    --testimonial-dark-gray-arrow: #e0e0e0; /* Cor da seta esquerda */

    /* NOVAS VARIÁVEIS PARA SEÇÃO EVENTOS */
    --blue-alquimia: #007bff; /* Ou o tom exato de azul que você deseja */
    --yellow-alquimia: #F9E244; /* Ou o tom exato de amarelo que você deseja */

    /* Cores específicas para a Seção Zulma Reyo */
    --zulma-yellow-bg: #F9E244; /* Amarelo do fundo */
    --zulma-blue-text: #0A6FB7; /* Azul do texto e botão */
    --zulma-dark-text: #333;    /* Cor dos parágrafos, se diferente de text-color */
}

/* ========================================
   RESET E ESTILOS BASE
   ======================================== */

/* Reset básico */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-family-base);
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ========================================
   TIPOGRAFIA PADRÃO
   ======================================== */

/* Parágrafo padrão - mesmo estilo do p.lead */
p {
    font-family: var(--font-family-base);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);        /* 18px */
    line-height: var(--line-height-base);    /* 1.6 */
    font-weight: var(--font-weight-base);    /* 400 */
    color: var(--text-color);                /* #333 */
}

/* Classe lead (mantida para compatibilidade, mas com mesmo estilo do p) */
.lead {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-base);
    color: var(--text-color);
}

/* Estilos para todos os títulos */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-family-base);
    font-weight: var(--h-font-weight-medium);  /* Semibold por padrão */
    line-height: 1.2;
    color: var(--primary-blue);                /* Azul por padrão */
}

/* Títulos específicos */
h1 {
    font-size: var(--h1-font-size);           /* 56px */
    font-weight: var(--h-font-weight-bold);   /* Bold */
    margin-bottom: var(--spacing-md);         /* Mais espaço abaixo */
}

h2 {
    font-size: var(--h2-font-size);           /* 45px */
    font-weight: var(--h-font-weight-light);  /* Regular - como "Últimos artigos" */
    margin-bottom: var(--spacing-lg);         /* Espaço generoso abaixo */
}

h3 {
    font-size: var(--h3-font-size);           /* 24px */
    font-weight: var(--h-font-weight-medium); /* Semibold */
}

h4 {
    font-size: var(--h4-font-size);           /* 20px */
    font-weight: var(--h-font-weight-medium); /* Semibold */
}

h5 {
    font-size: 1rem;                           /* 16px */
    font-weight: var(--h-font-weight-medium); /* Semibold */
}

h6 {
    font-size: 0.875rem;                       /* 14px */
    font-weight: var(--h-font-weight-medium); /* Semibold */
    text-transform: uppercase;                 /* Maiúsculas */
    letter-spacing: 0.05em;                   /* Espaçamento entre letras */
    color: var(--text-muted);                 /* Cor mais suave */
}

/* Estilos customizados para aplicar a fonte Raleway e ajustar unidades */
body {
    font-family: 'Raleway', sans-serif; /* Certifique-se que o nome da família da fonte está correto aqui */
    color: #333; /* Cor de texto base */
    line-height: 1.6;
    padding-top: 6rem; /* Adiciona padding ao body para compensar a navbar fixa (altura de 126px = 7.875rem) */
    background-image: url('../imagens/imagem-fixa.png');
    background-size: cover; /* ou contain, dependendo do efeito desejado */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Esta é a propriedade chave! */
    margin: 0;
    padding: 0;
}

body.interno {
    font-family: 'Raleway', sans-serif; /* Certifique-se que o nome da família da fonte está correto aqui */
    color: #333; /* Cor de texto base */
    line-height: 1.6;
    padding: 0; /* Adiciona padding ao body para compensar a navbar fixa (altura de 126px = 7.875rem) */
    margin: 0;
    background: #FAFAFA;
}

/* 1. Navbar Custom - Background e Altura */
.navbar-custom {
    background: #FFF !important;
    -webkit-box-shadow: 0px 3px 19px 2px rgba(0,0,0,0.2); 
    box-shadow: 0px 3px 19px 2px rgba(0,0,0,0.2);
    min-height: 6rem;
    transition: background-color 0.3s ease;
    padding: 0;
}

/* 2. Ajusta a cor do texto dos links da navbar para branco/claro */
.navbar-custom .nav-link,
.navbar-custom .navbar-brand {
    color:#004C97;
    font-weight: 500;
    border: 2px solid #ffffff00;
    box-sizing: border-box; /* Borda interna */
    padding-right: 0.85rem!important;
    padding-left: 0.85rem!important;
}

.navbar-brand img {
    width: 180px!important;
    height: auto!important;
}

/* 3. Estilo para links ativos e hover */
.navbar-custom .nav-link:hover {
    color: #004C97;
    border: 2px solid #004b9721;
    box-sizing: border-box; /* Borda interna */
    border-radius: 50px;
}

.navbar-custom .nav-link.active {
    color: #004C97;
    border: 2px solid #F9E244;
    box-sizing: border-box; /* Borda interna */
    border-radius: 50px;
}

/* 4. Ajustes para o toggler icon (ícone do menu hamburger) */
.navbar-custom .navbar-toggler-icon {
    background-image: url(../imagens/menu-toogle.png);
}

.navbar-custom .navbar-toggler {
    background:#004C97;
;
}

/* 5. Estilos para os dropdowns */
.navbar-custom .dropdown-menu {
    background-color: #004C97;
    border: none;
    padding: 0.5rem 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); /* Adiciona uma sombra sutil */
    
    /* Efeito fade - estado inicial */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: block !important; /* Sempre visível para permitir transição */
    pointer-events: none; /* Desabilita cliques quando invisível */
}

.navbar-custom .dropdown-item {
    color: #ffffff;
    padding: 0.5rem 1rem;
    background-color: transparent; /* Garante fundo transparente no item */
    transition: color 0.3s ease; /* Transição suave apenas para a cor */
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
    background-color: transparent !important; /* Mantém o fundo transparente no hover */
    color: #F9E244; /* Apenas a cor da fonte muda para amarelo */
}

/* 6. Estilos para o botão "whatsapp" */
a.btn-ico-whatsapp {
    max-width: 50px;
    height: auto;
     /* Transição suave aplicada ao transform */
    transition: transform 0.3s ease;
}

a.btn-ico-whatsapp:hover {
    /* Aumenta o tamanho visual em 1.2x (50px * 1.2 = 60px) */
    /* Sem alterar o espaço físico do botão no menu */
    transform: scale(1.2); 
}

/* 6. Estilos para o botão "ZRSOC" */
.btn-AIbZR{
    display: inline-flex;
    height: 2.75rem; /* 44px / 16px = 2.75rem */
    padding: 0.5rem 1.4rem; /* 12px 24px convertido para REM */
    border-radius: 1.5625rem; /* 25px / 16px = 1.5625rem */
    background-color: #004C97;
    color: #FFF;
    border: none;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    margin:2rem auto 0 auto;
}

.btn-AIbZR:hover {
    background-color: #ffffff;
    color: #004C97;
}

/* 7. Espaçamento entre os itens do menu */
.navbar-custom .navbar-nav .nav-item {
    margin-right: 0.25rem; /* 32px / 16px = 2rem */
}

.navbar-custom .navbar-nav .nav-item:last-child {
    margin-right: 0; /* Remove margem do último item */
}

/* 8. Oculta a seta padrão do Bootstrap nos dropdowns */
.navbar-custom .nav-link.dropdown-toggle::after {
    display: none !important;
}

/* 9. Estilos para as setas personalizadas do Font Awesome */
.navbar-custom .dropdown-arrow {
    font-size: 0.65rem; /* Tamanho menor para a seta */
    margin-left: 0.25rem; /* Espaço entre o texto e a seta */
    transition: all 0.3s ease; /* Animação suave */
}

/* 10. Cor do link quando o dropdown está aberto */
.navbar-custom .dropdown-toggle.dropdown-open {
    color: #004C97 !important; /* Mesma cor do hover */
}

/* 10.1. Submenu aparece no hover com fade */
.navbar-custom .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Reabilita cliques quando visível */
}

/* 10.2. Cor do link e seta quando hover no dropdown */
.navbar-custom .dropdown:hover .dropdown-toggle {
    color: #004C97 !important;
}

/* 10.3. Seta para cima quando hover no dropdown */
.navbar-custom .dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 0.5;
}

/* ========================================
   SEÇÃO DO CARROSSEL PRINCIPAL - #hero-carousel
   ======================================== */
/* Hero Carousel Section */
.hero-carousel {
    height: 100vh;
    background-color: #1b084e;
    position: relative;
    overflow: hidden;
}

/* Main Carousel Container */
#mainCarousel {
    position: relative;
    z-index: 1;
}

/* Estilo para os vídeos de fundo */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(70%); /* Escurece o vídeo para melhor leitura do texto */
}

/* Estilo para a Legenda do Carrossel */
.carousel-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    text-align: center;
    padding-bottom: 120px; /* Espaço para a onda */
    /* As classes d-flex, flex-column, justify-content-center, align-items-center e h-100 do Bootstrap
       já cuidam do posicionamento centralizado do conteúdo */
}

/* Define a animação de entrada de baixo para cima */
@keyframes slideUpFadeIn {
  from {
    opacity: 0; /* Começa invisível */
    transform: translateY(50px); /* Começa 50px abaixo da posição final */
  }
  to {
    opacity: 1; /* Termina totalmente visível */
    transform: translateY(0); /* Termina na posição final */
  }
}

.carousel-caption h1 {
  font-size: 2.75rem;
  font-weight: 300 !important;
  color: #FFFFFF;
  bottom: 11rem; /* Posição definida por você */
  position: absolute; /* Para controlar o bottom */
  /* Garante que o elemento comece invisível antes da animação */
  opacity: 0;
  /* Aplica a animação ao h1 */
  animation: slideUpFadeIn 0.8s ease-out 1.5s forwards; /* Duração de 0.8s, atraso de 1.5s, mantém estado final */
}

.carousel-caption p {
  font-size: 1.25rem !important;
  color: #FFFFFF;
  bottom: 8rem; /* Posição definida por você */
  position: absolute; /* Para controlar o bottom */
  /* Garante que o elemento comece invisível antes da animação */
  opacity: 0;
  /* Aplica a animação ao p com um atraso */
  animation: slideUpFadeIn 0.8s ease-out 3s forwards; /* Duração de 0.8s, atraso de 3s, mantém estado final */
}

/* Indicadores de Paginação Vertical Customizados */
.custom-indicators {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 5;
    width: auto;
    height: auto;
    bottom: auto;
    left: auto;
}

/* Estilo padrão para todos os botões indicadores */
.custom-indicators button {
    width: 12px; /* Tamanho padrão */
    height: 12px; /* Tamanho padrão */
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    opacity: 1;
    transition: all 0.3s ease; /* Transição suave para tamanho e cor */
    text-indent: -9999px; /* Oculta texto padrão do botão */
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

/* Garante que o último botão não tenha margem inferior */
.custom-indicators button:last-child {
    margin-bottom: 0;
}

/* Estilo para o botão indicador ATIVO */
.custom-indicators button.active {
    background-color: #F9E244; /* Cor de destaque para o ativo */
    width: 12px; /* Tamanho MAIOR para o ativo */
    height: 12px; /* Tamanho MAIOR para o ativo */
    /* A borda será a mesma do estado padrão, criando um efeito de preenchimento/crescimento */
}   

/* Estilo para o hover dos botões indicadores */
.custom-indicators button:hover {
    background-color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Esta regra do Bootstrap pode ser mantida, mas não deve mais conter width/height para evitar conflito */
.carousel-indicators [data-bs-target] {
    border-top: 0;
    border-bottom: 0;
    width: 12px; /* Tamanho MAIOR para o ativo */
    height: 12px; /* Tamanho MAIOR para o ativo */
    /* Removido width e height daqui para que .custom-indicators button e .custom-indicators button.active controlem o tamanho */
}

/* Estilo para a Imagem da Onda no Rodapé */
.wave-footer {
    z-index: 3;
    pointer-events: none;
    display: block;
    height: auto;
    max-height: 150px;
    object-fit: cover;
}

/* Controles do Carrossel (setas) */
.carousel-control-prev,
.carousel-control-next {
    z-index: 4;
    width: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 30px;
    height: 30px;
    background-size: 100%;
}

/* Estilos gerais para seções */
.section-padding {
    padding: 5rem 0; /* Espaçamento vertical generoso para as seções */
}

.section-title {
    font-size: var(--h2-font-size); /* Usando REM */
    margin-bottom: 3.5rem; /* Usando REM */
    text-align: center;
    color: #004c97; /* Padrão do seu projeto, ajustado abaixo para ZRSOC */
}

/* Ajustes para títulos de seção à esquerda (como na biografia de Zulma) */
.section-title.text-start {
    text-align: left !important;
    margin-bottom: 2rem;
}

/* ========================================
   ESTILOS DA SEÇÃO ALQUIMIA INTERIOR BRASIL - #secao-alquimia-brasil
   ======================================== */
#secao-alquimia-brasil {
    background-color: #1571B2; /* Cor de fundo azul que se assemelha à imagem */
}

#secao-alquimia-brasil h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 400;
    color: #FFD700;
}

#secao-alquimia-brasil p {
    color: #FFFFFF;
}

/* Estilo para o botão azul escuro nesta seção */
.btn-dark-blue {
    display: inline-flex;
    height: 2.75rem;
    padding: 0.75rem 1.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.5625rem;
    background-color: #004c97;
    color: #fff !important;
    border: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-dark-blue:hover {
    background-color: #004b9774;
    color: #fff !important;
    text-decoration: none;
}
/* ========================================
   FIM DOS ESTILOS DA SEÇÃO ALQUIMIA INTERIOR BRASIL
   ======================================== */


/* ========================================
   ESTILOS DA SEÇÃO WORKSHOP - #secao-workshop
   ======================================== */

/* Cores e padding da seção */
#secao-workshop {
    padding-top: 2rem;
}
#secao-workshop h2 {
    text-align: left;
}


#secao-workshop.bg-custom-blue {
    background-color: #FFF!important; /* Um tom de azul similar ao da imagem */
}

#secao-workshop .text-custom-yellow {
    color: #FFD700; /* Um tom de amarelo similar ao da imagem */
}

/* Ajustes para o título principal */
#secao-workshop .workshop-title {
    font-size: 3.5rem; /* Tamanho maior para o título principal */
    line-height: 1.1; /* Espaçamento entre linhas reduzido */
    font-weight: 400;
}

#secao-workshop p {
    font-size: 2.5rem; /* Tamanho maior para o título principal */
    color: #FFF;
    font-weight: 300;
}

/* Estilo do link "CONFIRA O VÍDEO" */
#secao-workshop .text-white {
    transition: color 0.3s ease;
    font-size: 1rem!important;
}

#secao-workshop .text-white:hover {
    color: #FFD700 !important; /* Amarelo no hover */
}

/* ========================================
   FIM DOS ESTILOS DA SEÇÃO WORKSHOP
   ======================================== */

/* ========================================
   ESTILOS DA SEÇÃO "O LIVRO" - #secao-livro
   ======================================== */

#secao-livro {
    background: #FFF;
}

/* Título "O LIVRO" - 58px regular #004C97 */
#secao-livro .book-main-title {
    font-size: 2rem!important; /* 58px / 16px = 3.625rem */
    font-weight: normal!important;
    color: #004C97!important;
    margin-bottom: 0!important;
    line-height: 1.2!important;
}

/* Título "ALQUIMIA INTERIOR" - 45px regular #004C97 */
#secao-livro .book-subtitle {
    font-size: 2.75rem!important; /* 45px / 16px = 2.8125rem */
    font-weight: normal!important;
    color: #004C97!important;
    margin-bottom: 1rem!important;
    line-height: 1.2!important;
}

/* Texto dos parágrafos - 18px */
#secao-livro .livro {
    max-width: 100%;
}


/* Links dos prêmios - underline e cor #1A29FF */

#secao-livro .book-award-link {
    color: #1086da;
    transition: color 0.3s ease;
    text-decoration:underline!important;
}

#secao-livro .book-award-link:hover {
    color: #1086da;
    font-weight: 400;
    text-decoration:none!important;
}

/* Títulos "BAIXE GRÁTIS" e "LIVRO IMPRESSO" - 16px */
#secao-livro .book-section-title {
    font-size: 1rem; /* 16px / 16px = 1rem */
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: #333;
}

/* Botões de download - cor #004c97, tamanho ajustado */
#secao-livro .btn-book-download {
    display: inline-block;
    background-color: transparent;
    border: 1px solid #004c97;
    color: #004c97;
    padding: 0.75rem 1.5rem; /* 12px 24px convertido para REM */
    border-radius: 1.5625rem; /* 25px / 16px = 1.5625rem */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
    font-size: 1rem;
}

#secao-livro .btn-book-download:hover {
    background-color: #004c97;
    color: #fff;
    text-decoration: none;
}

#secao-livro .flex-shrink-0 {
    width: 50%;
    display: flex;
    justify-content: end;
}

/* ========================================
   FIM DOS ESTILOS DA SEÇÃO "O LIVRO"
   ======================================== */

/* ========================================
   ESTILOS DA SEÇÃO "ÚLTIMOS ARTIGOS" - #secao-artigos
   ======================================== */

/* Ajusta o título da seção para a cor azul e peso de fonte normal */
#secao-artigos {
    background: #F9F9F9;
}

#secao-artigos .section-title {
    color: var(--primary-blue); /* Azul do título, como no "O Livro" */
    font-weight: normal; /* Peso da fonte regular, conforme a imagem */
}

/* Estilo geral dos cards de artigo */
#secao-artigos .card {
    border: none; /* Remove a borda padrão do Bootstrap */
    border-radius: 1rem; /* Cantos mais arredondados, conforme a imagem */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.075); /* Sombra mais proeminente */
    background-color: #fff; /* Garante fundo branco para o card */
}

/* Estiliza o badge "ARTIGO" dentro dos cards - CLASSE CORRIGIDA */
#secao-artigos .badge-articles {
    background-color: transparent !important; /* Remove o fundo padrão do badge */
    color: #999 !important; /* Cor marrom/oliva para o texto "ARTIGO" */
    font-size: 0.8rem; /* Tamanho menor */
    padding: 0; /* Remove padding */
    border-radius: 0; /* Remove arredondamento */
    font-weight: 400; /* Semibold */
    text-transform: uppercase; /* Garante que o texto seja maiúsculas */
    display: inline-block; /* Para comportar-se como badge */
}

/* Estiliza o título dos artigos dentro dos cards */
#secao-artigos .card-title {
    color: var(--primary-blue); /* Cor azul para o título do artigo */
    font-weight: 500; /* Semibold */
    font-size: 1.5rem; /* Tamanho do título do artigo */
    margin-bottom: 0.75rem; /* Espaçamento abaixo do título */
}

/* Ajusta a cor e espaçamento do texto dos artigos */
#secao-artigos .card-text {
    color: #333; /* Cinza mais escuro para o texto do artigo */
    line-height: 1.5; /* Ajusta o espaçamento entre linhas */
    font-size: 1rem;    
    font-weight: 400;
}

#secao-artigos .card-body {
    padding: 2rem 2.5rem 3rem 2.5rem;
}

/* ========================================
   FIM DOS ESTILOS DA SEÇÃO "ÚLTIMOS ARTIGOS"
   ======================================== */

/* ========================================
   ESTILOS DA SEÇÃO ZULMA REYO SCHOOL OF CONSCIOUSNESS (ZRSOC)
   ======================================== */

/* Fundo da seção pai (seção inteira) */
#secao-zrsoc {
    background-color: #FFFFFF;
}

/* Título principal centralizado da seção (o título maior que aparece acima das duas colunas) */
#secao-zrsoc .section-title {
    color: var(--primary-blue);
    font-weight: var(--h-font-weight-bold);
    margin-bottom: 3.5rem;
}

/* Container principal para as duas colunas (o "card" grande) */
.zrsoc-main-container {
    display: flex; /* Habilita o layout flexbox para as colunas */
    border-radius: 8px; /* Cantos arredondados */
    overflow: hidden; /* Garante que o border-radius se aplique */
    margin: 0 auto; /* Centraliza o container na página */
    width: 100%; /* Permite que o container se ajuste à largura */
    flex-wrap: wrap; /* Permite que as colunas quebrem linha em telas menores */
}

/* Estilos base para ambas as colunas */
.zrsoc-column {
    flex: 1; /* Faz com que as colunas ocupem espaço igual */
    /*padding: 50px; /* Espaçamento interno das colunas */
    box-sizing: border-box; /* Inclui padding na largura total */
}

/* Coluna da Esquerda (Título e Imagem de Fundo ZRSOC) */
.zrsoc-left-column {
    display: flex;
    justify-content: center; /* Centraliza o h1 horizontalmente */
    align-items: center; /* Centraliza o h1 verticalmente */
    flex-direction: column;
    text-align: center;
    position: relative; /* Permite que o h1 seja posicionado acima do background */
}

/* Estilo do título H1 dentro da coluna da esquerda */
.zrsoc-left-column h1 {
    color: var(--primary-blue);
    font-size: var(--h2-font-size);
    font-weight: normal;
    text-align: center;
    line-height: 1.2;
}

.zrsoc-left-column img.marcadagua {
    max-width: 90%;
    padding: 2rem 2rem 0 0;
}

/* Coluna da Direita (Texto, Botão e Ícones Sociais) */
.zrsoc-right-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empurra o conteúdo inferior para o final */
    color: var(--text-color); /* Cor do texto padrão */
    /*padding: 50px; /* Padding para a coluna direita */
    margin-top: 2rem;
}

.zrsoc-right-column p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Seção Inferior (Botão e Ícones Sociais) */
.zrsoc-bottom-section {
    display: flex;
    align-items: center; /* Alinha verticalmente o botão e o grupo de ícones */
    gap: 30px; /* Espaçamento entre o botão e o grupo de ícones */
    margin-top: auto; /* Empurra esta seção para o final da coluna direita */
    padding-top: 30px; /* Espaço do texto acima */
    flex-wrap: wrap; /* Permite que os itens quebrem linha em telas menores */
}

/* Estilo do Botão Específico da ZRSOC */
.btn-zrsoc-school {
    display: inline-flex;
    height: 2.75rem;
    padding: 0.75rem 1.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.5625rem;
    background-color: #004c97;
    color: #fff !important;
    border: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-zrsoc-school:hover {
    background-color: #004b9774;
    color: #fff !important;
    text-decoration: none;
}

/* Grupo de Ícones Sociais da ZRSOC */
.zrsoc-social-icons {
    display: flex;
    gap: 20px; /* Espaçamento entre ícones individuais */
    flex-wrap: wrap; /* Permite que os ícones quebrem linha */
    align-items: flex-start; /* Alinha os itens ao topo (verticalmente) */
}

.zrsoc-social-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--zrsoc-social-icon-color); /* Cor para ícones e texto */
    font-size: 0.8em; /* Tamanho da fonte para as legendas (YOUTUBE, etc.) */
    white-space: nowrap; /* Impede que o texto da legenda quebre linha */
}

.zrsoc-social-icon-item i {
    font-size: 1.8em; /* Tamanho dos ícones */
    margin-bottom: 5px; /* Espaço entre o ícone e a legenda */
}

.zrsoc-social-icon-item span {
    text-transform: uppercase;
    font-size: 0.7em; /* Tamanho menor para a legenda */
    letter-spacing: 0.5px;
}

/* ========================================
   FIM DOS ESTILOS DA SEÇÃO ZULMA REYO SCHOOL OF CONSCIOUSNESS (ZRSOC)
   ======================================== */

/* Imagens responsivas */
img {
    max-width: 100%; /* Porcentagem para imagens */
    height: auto; /* Mantém a proporção */
    display: block; /* Remove espaço extra abaixo de imagens em linha */
}

/* ========================================
   ESTILOS DA SEÇÃO EVENTOS - #secao-eventos
   ======================================== */

#secao-eventos {
    /* O background-image virá com parallax depois, então o background-color é transparente por enquanto */
    background-color: transparent;
    min-height: 350px; /* Altura mínima para a seção, ajuste conforme necessário */
    padding-top: 150px; /* Adiciona espaço para a curva azul acima do conteúdo */
    /* overflow-hidden já está no HTML */
    position: relative; /* Importante para o ::before funcionar */
}

#secao-eventos a {
    text-decoration: none;
}

/* Estilo para a curva azul no topo da seção de eventos */
#secao-eventos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background-image: url('../imagens/curva.png');
    background-size: 120% auto;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 0;
}

/* Estilos para os círculos amarelos */
.event-circle {
    width: 200px;
    height: 200px;
    background-color: var(--yellow-alquimia); /* Usando a variável de cor amarela */
    border-radius: 50%; /* Faz o elemento ser um círculo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidade */
    transition: transform 0.3s ease; /* Transição suave para o efeito de hover */
}

.event-circle:hover {
    transform: translateY(-5px); /* Pequeno efeito de elevação no hover */
}

/* Estilos para os ícones dentro dos círculos */
.event-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: .25rem !important;
}

/* Ajuste o tamanho do título para a nova seção se necessário */
#secao-eventos h2 {
    font-size: 2.75rem;
    line-height: 1.1;
    font-weight: 400;
    color: #FFD700;
    text-align: left;
}
#secao-eventos p {
    color: #004c97;
    font-weight: 400;
    line-height: 1rem;
    font-size: 1rem;
}

/* Garante que o conteúdo esteja acima da curva */
#secao-eventos .container {
    z-index: 1; /* Já adicionei no HTML, mas reconfirmo aqui */
    position: relative; /* Já adicionei no HTML, mas reconfirmo aqui */
}

/* ========================================
   FIM DOS ESTILOS DA SEÇÃO EVENTOS
   ======================================== */

/* ========================================
   ESTILOS DA SEÇÃO DE DEPOIMENTOS - #secao-depoimentos
   ======================================== */

    .top-depoimentos {
        background-image: url(../imagens/curva-white.png);
        width: 100%;
        height: 150px;
        background-position: bottom center;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    #secao-depoimentos {
        width: 100%;
        height: 320px;
        overflow: hidden;
        border-radius: 0.85rem;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        background: #F9F9F9;
        border: 1px solid #e9ecef;
    }

        .depoimentos-wrapper {
            display: flex;
            flex-direction: column;
            gap: 20px;
            animation: scrollUp 18s linear infinite;
            height: fit-content;
        }

        @keyframes scrollUp {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-50%);
            }
        }

        #secao-depoimentos:hover .depoimentos-wrapper {
            animation-play-state: paused;
        }

        .depoimento {
            flex: 0 0 65px;
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .cabecalho {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 4px;
            justify-content: right;
            font-family: 'Raleway-SemiBold';
            font-size: 12px;
        }   

        .icon {
            font-size: 20px;
            color: #ffc107;
        }

        .nome {
            color: #004c97;
        }

        .texto {
            font-size: 1rem;
            color: #555;
            line-height: 1.4;
            margin: 0;
            font-style: italic;
        }

        #secao-workshop video.videos-depoimentos {
            max-width: 100%;
        }
    

/* ========================================
   FIM DOS ESTILOS DA SEÇÃO DE DEPOIMENTOS
   ======================================== */

   /* ========================================
   ESTILOS DA SEÇÃO ZULMA REYO - #secao-zulma-reyo
   ======================================== */
#secao-zulma-reyo {
    /* min-height: 80vh; Garante que a seção tenha uma altura mínima, importante para a imagem */
    display: flex; /* Permite que as colunas se estiquem */
    align-items: stretch; /* Garante que as colunas tenham a mesma altura */
    /* O background-color não é definido aqui, é nas colunas */
}

/* Estilo da coluna de texto (esquerda) */
.col-text-content {
    background-color: var(--zulma-yellow-bg);
    color: var(--zulma-dark-text); /* Cor para o texto padrão dentro desta coluna */
    display: flex; /* Para centralizar o conteúdo verticalmente */
    align-items: center; /* Centraliza verticalmente */
    padding: 50px 0 70px 0; /* Padding vertical, o horizontal será dado pelo div interno */
}

.col-text-content .content-wrapper {
    padding: 0 80px; /* Padding interno para o conteúdo de texto */
    max-width: 700px; /* Limita a largura do texto para melhor leitura */
    margin: 0 auto; /* Centraliza o wrapper dentro da coluna */
}

/* Estilo do subtítulo "Conheça" */
#secao-zulma-reyo .section-subtitle {
    color: var(--primary-blue);
    font-size: var(--h2-font-size);
    font-weight: normal;
    text-align: left;
    line-height: 0.5;
    padding-top: 3rem;
}

/* Estilo do título "Zulma Reyo" */
#secao-zulma-reyo .section-title-zulma { /* Nova classe para evitar conflito com section-title */
    color: var(--primary-blue);
    font-size: var(--h1-font-size);
    font-weight: normal;
    text-align: left;
    margin-bottom: 2.5rem;
    line-height: 1;
}

/* Ajuste para parágrafos dentro desta seção */
#secao-zulma-reyo p.lead,
#secao-zulma-reyo p {
    color: var(--zulma-dark-text); /* Garante que os parágrafos tenham a cor certa */
    font-size: 1.125rem; /* Usando var(--font-size-base) ou um valor fixo */
    margin-bottom: 1rem;
}
#secao-zulma-reyo p:last-of-type {
    margin-bottom: 1.5rem; /* Mais espaço para o botão */
}


/* Estilo da coluna da imagem (direita) */
.col-image {
    overflow: hidden; /* Garante que a imagem não transborde */
    display: flex; /* Para alinhar a imagem dentro */
    align-items: center; /* Centraliza imagem verticalmente */
    justify-content: center; /* Centraliza imagem horizontalmente */
}

.col-image img {
    width: 100%;
    height: 100%; /* A imagem ocupa 100% da altura da coluna */
    object-fit: cover; /* Faz a imagem cobrir o espaço, cortando se necessário */
    object-position: center; /* Centraliza a imagem dentro do espaço */
    border-radius: 0; /* Remove rounded para preencher a coluna */
    box-shadow: none; /* Remove shadow */
}

/* Estilo do botão "Saiba mais sobre Zulma" */
.btn-custom-zulma {
    display: inline-flex;
    height: 2.75rem;
    padding: 0.75rem 1.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.5625rem;
    background-color: #004c97;
    color: #fff !important;
    border: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-custom-zulma:hover {
    background-color: #004b9774;
    color: #fff !important;
    text-decoration: none;
}

/* --- NOVA SEÇÃO: LINHA DO TEMPO - #timeline-section --- */
#timeline-section {
    background-color: #f8f9fa; /* Um fundo claro para a seção */
    padding-top: 0;
    padding-bottom: 50px;
}

#timeline-section .timeline-title {
    color: var(--primary-blue);
    font-size: var(--h1-font-size);
    font-weight: 300;
    padding: 4rem 0 3.125rem 0;
    margin-bottom: 0 !important;
}

/* Desktop Timeline Container */
.timeline-background {
    width: 100%;
    /* REMOVIDO: overflow-x: auto; - Para eliminar qualquer rolagem */
    overflow: visible; /* Garante que não haverá rolagem */
    padding-bottom: 1rem;
    display: block;
}

/* Container principal que contém a imagem de fundo e as 'tracks' de eventos */
.timeline-path-container {
    position: relative; /* Para posicionar as tracks */
    width: 1148px; /* Largura fixa da sua imagem de desktop */
    height: 793px; /* ALTURA FIXA reduzida para eliminar rolagem vertical */
    background-image: url('../imagens/linhadotempo-desktop.png'); /* Sua imagem de fundo com a linha e os pontos */
    background-repeat: no-repeat;
    background-size: 100% auto; /* Ajusta a imagem para preencher o container */
    margin: 0 auto; /* Centraliza a timeline na tela, se houver espaço */
    overflow: visible; /* Garante visibilidade total sem rolagem */
}

/* Estilo base para cada 'track' (linha de eventos) */
.timeline-track {
    position: relative;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around; /* Distribui os itens uniformemente */
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px; /* Padding lateral */
    height: 120px; /* ALTURA UNIFORME para todas as tracks */
}

/* ESPAÇAMENTO UNIFORME ENTRE AS LINHAS */
/* Linha 1: Itens acima da primeira linha */
.timeline-track-1 {
    top: 1.58rem;
    align-items: flex-end;
    width: 80.75%;
    margin: 0 auto;
}

/* Linha 2: Itens abaixo da linha do meio */
.timeline-track-2 {
    top: 7.75rem; /* ESPAÇAMENTO UNIFORME: 20px + 120px + 20px = 160px */
    align-items: flex-end; /* Alinha os cards na parte inferior da track */
    width: 90.75%;
    right: 0;
    margin: 0 0 0 4rem;
}

/* Linha 3: Itens acima da linha inferior */
.timeline-track-3 {
    top: 13.8rem;
    align-items: flex-end;
    margin: 0 0 0 7rem;
    width: 90.75%;
    right: 0;
}

/* Estilo para cada item individual na timeline */
.timeline-item {
    flex: 1; /* Permite que os itens cresçam e encolham */
    padding: 10px 8px; /* Padding reduzido para caber melhor */
    text-align: center;
    box-sizing: border-box;
    color: var(--primary-blue); /* Cor principal para o texto do evento */
    max-width: 25%; /* Para 4 colunas */
    height: auto; /* Altura automática */
}

/* Ajuste específico para a terceira linha com 5 colunas */
.timeline-track-3 .timeline-item {
    max-width: 20%; /* Para 5 colunas */
}

.timeline-item p.event-year {
    font-size: 1rem; /* Tamanho reduzido para caber melhor */
    color: #004C97;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.timeline-item p.event-description {
    font-size: 0.8rem; /* Tamanho reduzido para caber melhor */
    font-weight: 400;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: #004b97CC;
}

/* Botão "+ Mais" */
.btn-timeline-more {
    display: inline-flex;
    height: 1.6rem; /* Altura reduzida */
    padding: 0.1rem 0.6rem; /* Padding reduzido */
    justify-content: center;
    align-items: center;
    border-radius: 1rem; /* Mais arredondado */
    background-color: #dee6ee; /* Azul claro como na imagem */
    color: var(--primary-blue); /* Texto azul escuro */
    border: none;
    font-weight: 600;
    font-size: 0.7rem; /* Tamanho reduzido */
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn-timeline-more span {
    font-weight: 300;
    font-size: 1.25rem;
    padding-right: 0.125rem;
}

.btn-timeline-more:hover {
    background-color: #87CEEB; /* Azul um pouco mais escuro no hover */
    color: var(--primary-blue);
}

/* Customização do Tooltip do Bootstrap */
.tooltip {
    /* Define as variáveis CSS do Bootstrap diretamente para controlar cor do fundo e da seta */
    --bs-tooltip-bg: #FFE899;           /* Cor de fundo do tooltip (usado pelo inner e pela seta) */
    --bs-tooltip-arrow-color: #FFE899;  /* Cor da seta do tooltip */
    --bs-tooltip-offset: 0, 10px;       /* Margem de 10px entre o botão e o tooltip */
    opacity: 1 !important;              /* Garante que o tooltip inteiro seja completamente opaco */
    font-family: var(--bs-btn-font-family);
}

.tooltip-inner {
    background-color: var(--bs-tooltip-bg); /* Usa a variável para consistência com o fundo da seta */
    color: #332800;
    padding: 1.25rem;
    border-radius: 24px;
    font-size: 12px; /* Tamanho da fonte do texto do tooltip */
    line-height: 16px;   /* Altura da linha do texto do tooltip */
    
    /* PROPRIEDADES CORRIGIDAS PARA A LARGURA */
    width: 300px !important;        /* Força a largura para 300px */
    max-width: 300px !important;    /* Sobrescreve o max-width padrão do Bootstrap */
    text-align: left;               /* Alinha o texto à esquerda */
}

.tooltip-inner ul {
    margin-bottom: 0!important;
    padding-bottom:0!important;
    padding-left: 1rem!important;
}

/* Regras de especificidade para as bordas da seta do tooltip, caso as variáveis não sejam suficientes */
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-tooltip-arrow-color) !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-tooltip-arrow-color) !important;
}
.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: var(--bs-tooltip-arrow-color) !important;
}
.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: var(--bs-tooltip-arrow-color) !important;
}

/* ========================================= */
/* ESTILOS DA MODAL PARA SIMULAR O TOOLTIP   */
/* ========================================= */

/* Container principal da modal */
#timelineDetailModal .modal-content {
    background-color: var(--bs-tooltip-bg, #FFE899); /* Fundo da modal, usando a variável do tooltip */
    color: #332800; /* Cor do texto geral na modal */
    border-radius: 24px; /* Borda arredondada como no tooltip */
    font-family: var(--bs-btn-font-family); /* Fonte da modal */
    border: none; /* Remove a borda padrão da modal do Bootstrap */
}

/* Header da Modal */
#timelineDetailModal .modal-header {
    background-color: var(--bs-tooltip-bg, #FFE899); /* Mesmo fundo do tooltip */
    border-bottom: none; /* Remove a borda inferior padrão do Bootstrap */
    padding: 1.25rem 1.25rem 0.5rem 1.25rem; /* Ajusta padding para o título */
    /* Garante que os cantos superiores do header também fiquem arredondados */
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#timelineDetailModal .modal-header .modal-title {
    color: #332800; /* Cor do título */
    font-size: 14px; /* Um pouco maior que o corpo para destaque, mas ainda pequeno */
    font-weight: 600; /* Título um pouco mais negrito */
}

/* Botão de Fechar no Header */
#timelineDetailModal .modal-header .btn-close {
    filter: invert(10%); /* Ajusta a cor do ícone "x" para ser visível no fundo amarelo */
    opacity: 0.7; /* Levemente transparente */
}
#timelineDetailModal .modal-header .btn-close:hover {
    filter: invert(0%); /* Remove o filtro no hover para escurecer */
    opacity: 1; /* Totalmente opaco */
}

/* Corpo da Modal */
#timelineDetailModal .modal-body {
    background-color: var(--bs-tooltip-bg, #FFE899); /* Mesmo fundo do tooltip */
    color: #332800; /* Cor do texto */
    padding: 0.5rem 1.25rem 1.25rem 1.25rem; /* Padding do corpo da modal */
    font-size: 12px; /* Tamanho da fonte do texto do tooltip */
    line-height: 16px; /* Altura da linha do texto do tooltip */
    text-align: left; /* Alinhamento do texto */
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Estilo para listas (ul) dentro do corpo da modal, como no tooltip */
#timelineDetailModal .modal-body ul {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 1rem !important; /* Recuo para listas */
}
/* ========================================
   FIM DOS ESTILOS DA SEÇÃO ZULMA REYO
   ======================================== */


  /* ========================================
   ESTILOS DA SEÇÃO O QUE É ALQUIMIA INTERIOR - #secao-alquimia-interior
   ======================================== */
        #secao-alquimia-interior {
            background-color: #fbfbfb; /* Cor de fundo da seção (quase branco) */
            /* section-padding is already handled by the class */
            padding-top: 2rem;
            padding-bottom: 1rem;
        }

        .alquimia-header {
            text-align: center;
            margin-bottom: 60px; /* Espaço abaixo do cabeçalho */
        }

        .alquimia-main-title {
            color: var(--primary-blue);
            font-size: var(--h1-font-size);
            font-weight: normal;
            text-align: left;
            margin-bottom: 0;
            line-height: 1;
        }

        .alquimia-subtitle-text {
            color: var(--primary-blue);
            font-size: var(--h2-font-size);
            font-weight: 300;
            text-align: left;
            line-height: 0.5;
            padding-top: 1rem;
        }

        .alquimia-text-columns {
            margin-bottom: 60px; /* Espaço abaixo das colunas de texto */
        }

        .alquimia-text-columns p.subtitulo {
            font-size: 1.55rem;
            line-height: 1.45;
        }

        .alquimia-text-columns p {
            font-size: var(--font-size-base); /* Tamanho do texto */
            color: var(--text-color); /* Cor mais escura para o texto */
            line-height: var(--line-height-base);
        }

        .alquimia-bottom-section {
            margin-top: 40px; /* Espaço acima da seção de botão/redes sociais */
        }

        /* Novo grupo de ação para o botão e ícones sociais */
        .alquimia-action-group {
            display: flex;
            justify-content: right;
            align-items: center;
            gap: 30px;
        }

   /* ========================================
   FIM DA SEÇÃO O QUE É ALQUIMIA INTERIOR - #secao-alquimia-interior
   ======================================== */        


/* ========================================
   ESTILOS DO FOOTER - #footer-principal
   ======================================== */
#footer-principal {
    background-color: #004C97!important; /* Nova cor de fundo */
    color: #FFF; /* Cor do texto claro */
    padding: 4rem 0 2rem 0; /* Reduzido para acomodar a altura específica */
    font-size: 0.9rem; /* Usando REM */
    min-height: 9.5rem; /* 152px / 16px = 9.5rem */
    display: flex;
    align-items: center;
}

#footer-principal p {
    color: #FFF; /* Cor do texto claro */
    opacity: 0.5;
}


#footer-principal a {
    color: #ffffff; /* Cor dos links no footer */
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 1rem!important; /* Usando REM */
}

#footer-principal a:hover {
    color: #fff; /* Cor dos links ao passar o mouse */
}

#footer-principal h5 {
    color: #fff;
    margin-bottom: 1.5rem; /* Usando REM */
    font-size: 1.2rem; /* Usando REM */
}

/* Estilos específicos do rodapé */
#footer-principal .footer-top {
    margin-bottom: 1rem;
    align-items: center;
}

#footer-principal .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer-principal .footer-bottom-item {
    float: left;
}

#footer-principal .footer-bottom-item p {
    font-size: 0.75rem!important; /* 12px / 16px = 0.75rem */
    color:#FFF;
    opacity: 0.5;
}

#footer-principal .footer-bottom-item p a {
    font-size: 0.75rem!important; /* 12px / 16px = 0.75rem */
    opacity: 1;
}

#footer-principal .footer-bottom-left {
    text-align: left;
}

#footer-principal .footer-bottom-center {
    text-align: center;
}

#footer-principal .footer-bottom-right {
    text-align: right;
}

/* Links da segunda linha também com a cor #CCCCCC */
#footer-principal .footer-bottom a {
    color: #CCCCCC;
    text-decoration: underline;
    transition: color 0.3s ease;
    opacity: 0.75;
}

#footer-principal .footer-bottom a:hover {
    color: #fff;
}

/* Botão Fale Conosco - igual ao ZRSOC mas com cores diferentes */
.btn-fale-conosco {
    display: inline-flex;
    height: 2.75rem; /* 44px / 16px = 2.75rem */
    padding: 0.75rem 1.5rem; /* 12px 24px convertido para REM */
    justify-content: center;
    align-items: center;
    border-radius: 1.5625rem; /* 25px / 16px = 1.5625rem */
    background-color: #F9E244;
    color: #004c97!important;
    border:2px solid #F9E244;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-fale-conosco:hover {
    background-color: transparent;
    color: #F9E244!important;
    text-decoration: none;
    border:2px solid #F9E244;
    box-sizing: border-box; /* Borda interna */
}

/* Logo do rodapé */
#footer-principal .footer-logo {
    max-height: 5rem; /* Ajuste conforme necessário */
    width: auto;
}

/* Linha divisória */
#footer-principal .footer-divider {
    border: none;
    border-top: 1px solid #fff;
    margin: 3rem 0 2rem 0;
    opacity: 0.35;
}

/* ===========================
   INÍCIO DOS ESTILOS DO TOPO
   =========================== */

/* --- Seção de Cabeçalho da Página de Contato (Contact Hero) --- */
.topo-interno {
    background-image: url(../imagens/topo-interno.png);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    padding: 150px 0 130px 0;
    position: relative;
}

.topo-interno h1 {
    font-size: 3.5em; /* Tamanho do título "Contato" */
    font-weight: 300; /* Pode ser mais fino que o padrão */
    margin-top: 0px;
    margin-bottom: 0;
    color: #FFFFFF;
    text-align: center;
}

.topo-interno button {
    position: relative;
    top: 0; /* Ajuste a posição vertical */
    left: 0;
    color: #fff;
    background: transparent;
    border: none;
    border-radius: 40px;
    text-decoration: none;
    font-size: 1.1em;
    padding: 10px 20px; /* Para facilitar o clique, se quiser que ele seja um "botão" */
    z-index: 900;
}

.topo-interno button:hover {
    color: #ffffffc0;
    background: #004c97;

}

.pg-interna {
    margin-bottom: 3rem!important;
}

.pg-interna h1 {
    color: var(--primary-blue)!important;
    font-size: var(--h2-font-size)!important;
    font-weight: normal!important;
    line-height: 1.2!important;
}

.pg-interna h3 {
    color: var(--primary-blue)!important;
    font-size: var(--h3-font-size)!important;
    font-weight: normal!important;
    line-height: 1!important;
    margin: 2rem 0 0.25rem 0;
}

.pg-interna p {
    font-family: 'Raleway', sans-serif!important;
    font-size: var(--font-size-base)!important;
    line-height: 1.6!important;
}

.pg-interna ul li {
    font-family: 'Raleway', sans-serif!important;
    font-size: var(--font-size-base)!important;
    line-height: 1.6!important;
}

.pg-interna .card-category {
    background-color: transparent !important;
    color: #999 !important;
    font-size: 0.8rem;
    padding: 0;
    border-radius: 0;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
}

.pg-interna .card-title {
    color: var(--primary-blue)!important;
    font-weight: 400!important;
    font-size: 1.5rem!important;
    margin-bottom: 0.75rem!important;
}

.pg-interna .card-description {
    color: #000;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
}

.pg-interna span {
    color: #999;
    font-size: 1.25rem;
    padding-bottom: 3rem;
    display: block;
}

.pg-interna .img-workshop {
    margin: 2rem 0;
}


/* =========================================================================
   ESTILOS DA TABELA DE AGENDAMENTO (DESKTOP FIRST)
   ========================================================================= */

/* Container da "tabela" de agendamento */
.pg-interna .schedule-container {
    width: 100%;
    max-width: 900px; /* Largura máxima para a "tabela" */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* Para que as bordas arredondadas sejam aplicadas corretamente */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave */
}

/* Estilo para o cabeçalho no desktop */
.pg-interna .schedule-header {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Coluna da Data ocupa 1 parte, Atividades 2 partes */
    background-color: #f9f9f9;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}

.pg-interna .header-item {
    font-family: var(--font-family-base);
    padding: 15px 20px;
    text-align: left;
    color: var(--text-dark, #343a40);
}

.pg-interna .header-item:first-child {
    border-right: 1px solid #ddd; /* Borda vertical entre as colunas */
}

/* Estilo para as linhas de dados no desktop */
.pg-interna .schedule-row {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Mesma proporção do cabeçalho */
    border-bottom: 1px solid #eee; /* Borda horizontal entre as linhas */
    align-items: start; /* Alinha o conteúdo ao topo das células */
}

/* Remove a última borda inferior */
.pg-interna .schedule-row:last-child {
    border-bottom: none;
}

.pg-interna .schedule-date,
.pg-interna .schedule-activities {
    font-family: var(--font-family-base);
    padding: 15px 20px;
    text-align: left;
    word-wrap: break-word; /* Para garantir que o texto longo quebre */
    line-height: 1.6;
}

.pg-interna .schedule-date {
    font-family: var(--font-family-base);
    border-right: 1px solid #eee; /* Borda vertical entre as colunas */
    font-weight: 500; /* Data um pouco mais destacada */
    color: var(--text-dark, #343a40);
}

.pg-interna .schedule-activities {
    font-family: var(--font-family-base);
    color: var(--text-medium, #6c757d);
}

/* Ocultar labels de mobile no desktop */
.pg-interna .mobile-label {
    display: none;
}

/* ========================
   FIM DOS ESTILOS DO TOPO
   ======================== */


/* ==============================================
   INÍCIO DOS ESTILOS DE SOBRE ALQUIMIA INTERRIOR
   ============================================== */     

.hero-image-alquimiainterior {
    height: 100vh;
    background-image: url(../imagens/img-alquimia-interior.jpg);
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    position: relative;
    z-index: 0;
}

/* 4. Seção de Conteúdo Principal com Imagem */
.main-content-alquimia {
    padding: 60px 0 20px 0;
    background-color: white; /* Garante que tenha um fundo para rolar sobre a imagem fixa */
    position: relative;
    z-index: 1;
}

.main-content-alquimia .pg-interna {
    margin-bottom: 1rem !important;
}

.main-content-alquimia p {
    margin-bottom: 1rem!important;
    font-size: 1.1rem!important;
    text-align: left; /* Texto justificado como na imagem */
}

.main-content-alquimia .pg-interna span.highlight {
    font-family: 'Raleway-Bold', sans-serif;
}

.main-content-alquimia span {
    color: #004C97;
    font-size: 1.1rem;
    padding-bottom: 0;
    display: inline;
}

/* Limpa o float após o conteúdo para garantir que o layout flua corretamente */
.main-content-alquimia .container::after {
    content: "";
    display: table;
    clear: both;
}

#secao-alquimia {
    /* min-height: 80vh; Garante que a seção tenha uma altura mínima, importante para a imagem */
    display: flex; /* Permite que as colunas se estiquem */
    align-items: stretch; /* Garante que as colunas tenham a mesma altura */
    /* O background-color não é definido aqui, é nas colunas */
}

.alquimia-content .quote-yellow div {
    max-width: 90%;
    margin: 0 auto;
}

.livro-video {
    margin: 2rem auto;
    height: auto;
}

video.video-livro {
    max-width: 50%;
}

/* Estilo da coluna de texto (esquerda) */
#secao-alquimia .col-text-content {
    background-color: #1571B2;
    color: #FFFFFF; /* Cor para o texto padrão dentro desta coluna */
    display: flex; /* Para centralizar o conteúdo verticalmente */
    align-items: center; /* Centraliza verticalmente */
    padding: 50px 0 30px 0; /* Padding vertical, o horizontal será dado pelo div interno */
}

#secao-alquimia .col-text-content .content-wrapper {
    padding: 0 80px; /* Padding interno para o conteúdo de texto */
    max-width: 700px; /* Limita a largura do texto para melhor leitura */
    margin: 0 auto; /* Centraliza o wrapper dentro da coluna */
}

/* Estilo do subtítulo "Conheça" */
#secao-alquimia .section-subtitle {
    color: var(--primary-blue);
    font-size: var(--h2-font-size);
    font-weight: normal;
    text-align: left;
    line-height: 0.5;
    padding-top: 3rem;
}

/* Estilo do título */
#secao-alquimia .section-title-alquimia { /* Nova classe para evitar conflito com section-title */
    color: var(--primary-blue);
    font-size: var(--h1-font-size);
    font-weight: normal;
    text-align: left;
    margin-bottom: 2.5rem;
    line-height: 1;
}

/* Ajuste para parágrafos dentro desta seção */
#secao-alquimia p.lead,
#secao-alquimia p {
    color: #FFFFFF; /* Garante que os parágrafos tenham a cor certa */
    font-size: 1.125rem; /* Usando var(--font-size-base) ou um valor fixo */
    margin-bottom: 1rem;
}
#secao-alquimia p:last-of-type {
    margin-bottom: 1.5rem; /* Mais espaço para o botão */
}

.azul-content-alquimia {
    background:#004C97!important;
    padding: 3rem 0 0 0;
}
.azul-content-alquimia .col-image {
    display: flex;
    align-items: end;
    width: 100%;
    height: auto;
}

.azul-content-alquimia .pg-interna p {
    /*display: flex;
    align-items: end;*/
    color: #FFFFFF;
}
.azul-content-alquimia .pg-interna span.highlight {
    font-family: 'Raleway-Bold', sans-serif;
    color: #FFFFFF;
    display: inline;
    font-size: 1.125rem;
}

/* #secao-livro-interno */

#secao-livro-interno {
    background: #F9F9F9;
}

/* Título "O LIVRO" - 58px regular #004C97 */
#secao-livro-interno .book-main-title {
    font-size: 2rem!important; /* 58px / 16px = 3.625rem */
    font-weight: normal!important;
    color: #004C97!important;
    margin-bottom: 0!important;
    line-height: 1.2!important;
}

/* Título "ALQUIMIA INTERIOR" - 45px regular #004C97 */
#secao-livro-interno .book-subtitle {
    font-size: 2.75rem!important; /* 45px / 16px = 2.8125rem */
    font-weight: normal!important;
    color: #004C97!important;
    margin-bottom: 1rem!important;
    line-height: 1.2!important;
}

/* Texto dos parágrafos - 18px */
#secao-livro-interno .livro {
    max-width: 100%;
}


/* Links dos prêmios - underline e cor #1A29FF */

#secao-livro-interno -interno  .book-award-link {
    color: #1086da;
    transition: color 0.3s ease;
    text-decoration:underline!important;
}

#secao-livro-interno  .book-award-link:hover {
    color: #1086da;
    font-weight: 400;
    text-decoration:none!important;
}

/* Títulos "BAIXE GRÁTIS" e "LIVRO IMPRESSO" - 16px */
#secao-livro-interno  .book-section-title {
    font-size: 1rem; /* 16px / 16px = 1rem */
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: #333;
}

/* Botões de download - cor #004c97, tamanho ajustado */
#secao-livro-interno  .btn-book-download {
    display: inline-block;
    background-color: transparent;
    border: 1px solid #004c97;
    color: #004c97;
    padding: 0.75rem 1.5rem; /* 12px 24px convertido para REM */
    border-radius: 1.5625rem; /* 25px / 16px = 1.5625rem */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
    font-size: 1rem;
}

#secao-livro-interno  .btn-book-download:hover {
    background-color: #004c97;
    color: #fff;
    text-decoration: none;
}

#secao-livro-interno  .flex-shrink-0 {
    width: 50%;
    display: flex;
    justify-content: end;
}

/* 4. Seção de Conteúdo Principal com Imagem */
.main-content-livro-interno {
    padding: 60px 0 20px 0;
    background-color: white; /* Garante que tenha um fundo para rolar sobre a imagem fixa */
    position: relative;
    z-index: 1;
}

.main-content-livro-interno .pg-interna {
    margin-bottom: 1rem !important;
}

.main-content-livro-interno p {
    margin-bottom: 3rem!important;
    font-size: 1.5rem !important;
    text-align: center;
}

.main-content-livro-interno span {
    color: #004C97;
    font-size: 1.1rem;
    padding-bottom: 0;
    display: inline;
}

/* ===========================================
   FIM DOS ESTILOS DE SOBRE ALQUIMIA INTERIOR
   =========================================== */


   /* ==============================================
   INÍCIO DOS ESTILOS DE SOBRE ALINHAMENTO ALQUIMICO
   ============================================== */     

.hero-image-alinhamentoalquimico {
    height: 100vh;
    background-image: url(../imagens/img-mulher-bracos-abertos.png);
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    position: relative;
    z-index: 0;
}

/* 4. Seção de Conteúdo Principal com Imagem */
.main-content-alinhamento {
    padding: 60px 0 20px 0;
    background-color: white; /* Garante que tenha um fundo para rolar sobre a imagem fixa */
    position: relative;
    z-index: 1;
}

.main-content-alinhamento .pg-interna {
    margin-bottom: 1rem !important;
}

.main-content-alinhamento p {
    margin-bottom: 1rem!important;
    font-size: 1.1rem!important;
    text-align: left; /* Texto justificado como na imagem */
}

.video-pratica {
    margin: 3rem auto!important;
    text-align: center;
}

.alinhamento-content .img-1 {
    display: block!important;
    width: 100%!important;
    padding: 0 0 3rem 0;
}

.alinhamento-content .img-2 {
    padding: 0!important;
}

.alinhamento-orientacoes {
    margin-top: 3rem;
    background: #f4f4f4;
    width: 100%;
    padding-bottom: 3rem;
}

.orientacoes-passos h2 {
    text-align: left;
}

.orientacoes-passos h3 {
    text-align: left;
}

.orientacoes-passos span {
    text-align: left;
}

.orientacoes-passos .col-1 {
    width: 75%;
    padding: 0;
    float: left;
}

.orientacoes-passos .col-1 span {
    padding-bottom: 2rem;
}

.orientacoes-passos .col-2 {
    width: 20%;
    margin-right: 2rem;
    float: left;
}

.orientacoes-passos .sequencia {
    border-top: 30px solid #FFFFFF;
}

.orientacoes-passos .passos {
    margin: 0 0 48px 0;
}

.orientacoes-passos .passos span {
    text-align: left;
}

.orientacoes-passos .passos h3 {
    text-align: left;
}

.orientacoes-passos .passos p {
    text-align: left;
}

.orientacoes-passos span.passo-individual {
    color: #004c97;
    font-size: 1rem;
    padding: 0.5rem 1.25rem;
    display: unset;
    background: #dee2e6;
    border-radius: 50px;
}

.orientacoes-passos h3 {
    margin: 1.25rem 0 0.5rem 0;
}


/* ===========================================
   FIM DOS ESTILOS DE SOBRE ALINHAMENTO ALQUIMICO
   =========================================== */


/* ======================================
   INÍCIO DOS ESTILOS DE SOBRE ZULMA REYO
   ====================================== */  

/* 2. Seção da Imagem Hero com Fundo Fixo */
.hero-image-zulma {
    height: 100vh; /* Altura da imagem hero, ajuste conforme necessário */
    background-image: url('../imagens/slide-zulma.jpg');
    background-size: cover;
    background-position: center top; /* Centraliza horizontalmente, alinha no topo verticalmente */
    background-attachment: fixed; /* IMAGEM FIXA: O conteúdo rola por cima dela */
    position: relative; /* Para z-index funcionar */
    z-index: 0; /* Garante que o conteúdo role por cima */
}

/* Seções de Citação */
.quote-section {
    padding: 60px 0; /* Preenchimento vertical generoso */
    text-align: center;
    position: relative; /* Para posicionar as aspas */
    overflow: hidden; /* Garante que elementos absolutamente posicionados não causem overflow */
    z-index: 1; /* Garante que esta seção fique acima da imagem fixa */
    position: relative; /* Necessário para z-index */
}

.quote-section .container {
    display: flex;
    justify-content: space-between;
    max-width: 950px;
}

.quote-section p {
    font-size: 1.4em; /* Fonte grande para a citação */
    font-weight: 300;
    max-width: 90%;
    margin: 0 auto;
}

.quote-section cite {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 10px;
    font-style: normal;
}

/* Ícones de Aspas (aplicado a ambas as seções de citação) */
.quote-section .quote-icon {
    width: 100px!important; /* Tamanho dos ícones de aspas */
    height: auto;
    opacity: 0.6; /* Deixa as aspas mais sutis */
    z-index: -1; /* Fica atrás do texto */
}

/* 3. Seção de Citação Amarela */
.quote-yellow {
    background-color: #F9E244; /* Fundo amarelo */
    color: #333; /* Texto escuro para contraste */
}

/* 4. Seção de Conteúdo Principal com Imagem */
.main-content-zulma {
    padding: 60px 0 20px 0;
    background-color: white; /* Garante que tenha um fundo para rolar sobre a imagem fixa */
    position: relative;
    z-index: 1;
}

.main-content-zulma p {
    margin-bottom: 1rem!important;
    font-size: 1.1rem!important;
    text-align: justify; /* Texto justificado como na imagem */
}

.main-content-zulma span {
    color: #004C97;
    font-size: 1.1rem;
    padding-bottom: 0;
    display: inline;
}
.zulma-photo-wrapper {
    float: left; /* Imagem flutua à esquerda, permitindo que o texto a envolva */
    margin: 10px 20px 0 0; /* Margem à direita para o texto, e inferior para parágrafos */
    max-width: 100%; /* Largura máxima da imagem */
    /* Garante que o texto comece após a imagem se o parágrafo for curto */
    clear: none;
}

.zulma-inline-photo {
    width: 100%;
    height: auto;
    display: block; /* Garante que a imagem se ajuste à wrapper */
}

/* Limpa o float após o conteúdo para garantir que o layout flua corretamente */
.main-content-zulma .container::after {
    content: "";
    display: table;
    clear: both;
}

/* 5. Seção Dividida ao Meio */
.split-section-wrapper {
    display: flex;
    min-height: 400px; /* Altura mínima para a seção */
    color: white; /* Cor do texto padrão para esta seção */
    position: relative;
    z-index: 1;
}

.split-left,
.split-right {
    flex: 1; /* Cada div ocupa metade da largura */
    display: flex; /* Para centralizar o conteúdo verticalmente */
    align-items: center;
    padding: 40px 0; /* Preenchimento vertical */
}

.split-left {
    background-color: #1571B2; /* Azul */
    display: flex;
    justify-content: end;
}

.split-left .container {
    width: 80%;
    display: flex;
    align-items: end;
    margin: 0 30px;
}

.split-left .container p {
    color: #FFFFFF;
    font-size: 1.35rem;
    line-height: 1.5;
    font-weight: 300;
}

.split-right {
    background-color: #F9E244; /* Amarelo */
    color: #333; /* Texto escuro para o fundo amarelo */
}

.split-right .container {
    width: 80%;
    display: flex;
    align-items: baseline;
    margin: 0 0 0 20px;
}

.split-section-wrapper h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.split-section-wrapper p {
    font-size: 1.1em;
    line-height: 1.8;
}

/* 6. Seção de Citação com Imagem de Fundo (Aspas Brancas) */
.quote-white-bg-image {
    background-image: url('../imagens/img-horizontal-zulma.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* Essa imagem rola normalmente com o conteúdo */
    color: white;
    padding: 100px 0; /* Mais preenchimento para esta citação */
    z-index: 1;
    position: relative;
}

.quote-white-bg-image .container {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 25%;
}

.quote-white-bg-image .container p {
    color: #FFFFFF;
    font-weight: 300;
    font-size: 1.7rem;
    line-height: normal;
}

/* Ajustes para as aspas brancas */
.quote-white-bg-image .quote-icon {
    opacity: 0.4; /* Um pouco mais visível no fundo de imagem */
}
/* ======================================
   FIM DOS ESTILOS DE SOBRE ZULMA REYO
   ====================================== */     

/* =====================================================
   INÍCIO DOS ESTILOS DE QUEM SOMOS ALQUIMIA INTERIOR BR
   ===================================================== */     

.hero-image-alquimiainteriorbr {
    height: 100vh;
    background-image: url(../imagens/img-alquimia-br.png);
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    position: relative;
    z-index: 0;
}

#quem-somos .quote-section p {
    max-width: none;
    font-size: 18px;
}

#quem-somos .quote-section .container {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    text-align: left;
}

#quem-somos .quote-section span {
    font-family: 'Raleway-Bold', sans-serif;
}

.hero-image-alquimiainteriorbr img {
    width: 80%;
    opacity: 0.35;
    position: absolute;
    bottom: 20px;
    left: 10%;
}

#quem-somos .btn-participar {
    display: inline-block;
    background-color: transparent;
    border: 1px solid #004c97;
    color: #004c97;
    padding: 0.75rem 1.5rem;
    border-radius: 1.5625rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
    font-size: 1rem;
    margin-top:2rem;
}

#quem-somos .btn-participar:hover {
    background-color: #004c97;
    color: #fff;
    text-decoration: none;
}

.azul-content-alquimiabr {
    background:#004C97!important;
    padding: 3rem 0 0 0;
}

.azul-content-alquimiabr .pg-interna p {
    color: #FFFFFF;
}
.azul-content-alquimiabr .pg-interna span.highlight {
    font-family: 'Raleway-Bold', sans-serif;
    color: #FFFFFF;
    display: inline;
    font-size: 1.125rem;
}

.azul-content-alquimiabr .pg-interna h2 {
    color: #fff!important;
}

#secao-equipe {
    background: #FFFFFF;
    padding: 3rem 0;
}

.equipe span.cargo {
    COLOR: #004C97;
    font-size: 14px;
}

.equipe p {
    margin-top:1rem;
}

.equipe hr {
    color: #999999;
    margin: 2rem 0;
}

/* =====================================================
   FIM DOS ESTILOS DE QUEM SOMOS ALQUIMIA INTERIOR BR
   ===================================================== */    
   
/* ==============================
   INÍCIO DOS ESTILOS PG DEPOIMENTOS
   ============================== */ 

   #secao-depoimentos-interno {
        width: 100%;
        height: AUTO;
        overflow: hidden;
        border-radius: 0.85rem;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        background: #F9F9F9;
    }

    #secao-depoimentos-interno .depoimento {
        flex: 0 0 65px;
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 0 10px 0;
    }

   
/* ==============================
   FIM DOS ESTILOS PG DEPOIMENTOS
   ============================== */       


/* ==============================
   INÍCIO DOS ESTILOS DO ARTIGOS
   ============================== */   

.lista-de-artigos .colunas {
    margin: 1rem 0;
}

.lista-de-artigos .card-item {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s 
    ease-in-out, box-shadow 0.3s 
    ease-in-out;
}

.lista-de-artigos .card-item a {
    text-decoration: none;
}

.lista-de-artigos .card-item a:hover {
    opacity: 0.35;
}

.lista-de-artigos .card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Paginação */
.lista-de-artigos .pagination-container {
    display: flex;
    justify-content: center; /* Centraliza a paginação horizontalmente */
    align-items: center;    /* Alinha os itens verticalmente */
    margin-top: 40px;       /* Espaçamento superior */
    margin-bottom: 40px;    /* Espaçamento inferior */
    font-family: 'Arial', sans-serif; /* Usar uma fonte similar à do design */
}

.lista-de-artigos .pagination-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px; /* Largura do círculo */
    height: 32px; /* Altura do círculo */
    border-radius: 50%; /* Torna o elemento circular */
    text-decoration: none; /* Remove sublinhado dos links */
    font-size: 18px; /* Tamanho da seta */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave para hover */
    margin: 0 8px; /* Espaçamento entre os elementos da paginação */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
}

/* Estilo para a seta de página anterior (cinza) */
.lista-de-artigos .pagination-arrow.prev-page {
    background-color: #e0e0e0; /* Cor de fundo cinza claro */
    color: #616161;           /* Cor do texto/seta cinza escuro */
}

/* Estilo para a seta de próxima página (azul, ativa) */
.lista-de-artigos .pagination-arrow.next-page {
    background-color: #2196F3; /* Cor de fundo azul */
    color: #ffffff;           /* Cor do texto/seta branco */
}

/* Estado hover para as setas */
.lista-de-artigos .pagination-arrow:hover {
    opacity: 0.8; /* Pequena opacidade para indicar interatividade */
}

/* Informações da paginação (e.g., "1 de 4") */
.lista-de-artigos .pagination-info {
    font-size: 16px;
    color: #424242; /* Cor do texto cinza escuro */
    margin: 0 10px; /* Espaçamento ao redor do texto de informação */
    padding-bottom: 0;
    font-family: var(--font-family-base);
}

/* ==============================
   FIM DOS ESTILOS DO ARTIGOS
   ============================== */   


/* ==========================================================
   INÍCIO DOS ESTILOS DA PÁGINA EVENTOS ATIVIDADES REGULARES
   ========================================================== */  

.atividades-regulares {
    padding: 3rem 0; /* Espaçamento superior e inferior */
    font-family: 'Roboto', sans-serif; /* Fonte padrão */
    color: #343a40; /* Cor de texto padrão */
}

/* Estilo para o título principal (h2) */
.atividades-regulares .section-title {
    color: #2196F3; /* Azul da imagem */
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 2rem;
    line-height: 1.2;
}

/* Estilo para parágrafos */
.atividades-regulares p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Estilo para a lista personalizada (pontos) */
.atividades-regulares .custom-list {
    list-style-type: none; /* Remove o marcador padrão */
    padding-left: 0;
    margin-bottom: 2rem;
}

.atividades-regulares .custom-list li {
    position: relative;
    padding-left: 1.5rem; /* Espaço para o marcador customizado */
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.atividades-regulares .custom-list li::before {
    content: '\2022'; /* Código Unicode para um bullet point */
    color: #343a40; /* Cor do bullet point */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1.5em; /* Ajusta a posição do bullet point */
    position: absolute;
    left: 0;
    top: 0;
}

/* Estilo para o título da agenda (h3) */
.atividades-regulares .agenda-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 2rem;
    color: #343a40;
}

/* Estilo para o item do card */
.atividades-regulares .card-item {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Garante que os cantos arredondados sejam aplicados corretamente */
    height: 100%; /* Para que ambos os cards tenham a mesma altura em desktop */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.atividades-regulares .card-item:hover {
    transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.atividades-regulares .card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Wrapper da imagem com overlay */
.atividades-regulares .card-image-wrapper {
    position: relative;
    width: 100%;
    height: 250px; /* Altura fixa para a área da imagem, ajuste conforme necessário */
    display: flex;
    justify-content: center;
    align-items: center;
}

.atividades-regulares .card-image-wrapper img {
    width: 100%;
    height: 100%; /* A imagem preenche o wrapper */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    display: block;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.atividades-regulares .card-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    z-index: 1; /* Garante que o texto fique acima da imagem */
    pointer-events: none; /* Permite clicar através do overlay para o link do card */
}

.atividades-regulares .overlay-text {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.atividades-regulares .overlay-year {
    font-size: 4.5rem; /* Tamanho grande para o ano */
    font-weight: 700;
    line-height: 1;
}

/* Conteúdo do card abaixo da imagem */
.atividades-regulares .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espaço entre título, categoria e descrição */
}

.atividades-regulares .card-category {
    font-size: 0.8rem;
    color: #6c757d; /* Cinza mais claro */
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.atividades-regulares .card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2196F3; /* Azul da imagem */
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.atividades-regulares .card-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0; /* Remover margin-bottom do último elemento do card */
}
   
/* ==========================================================
   FIM DOS ESTILOS DA PÁGINA EVENTOS ATIVIDADES REGULARES
   ========================================================== */   


/* ========================================
   INÍCIO DOS ESTILOS DA PÁGINA CONTATO
   ======================================== */

/* --- Seção Principal do Formulário de Contato --- */
.contact-form-section {
    padding: 30px 0 60px 0; /* Espaçamento interno */
    background-color: #f9f9f9; /* Um cinza bem claro para o fundo da seção */
}

.container {
    max-width: 1200px; /* Exemplo: limite a largura do container */
    margin: 0 auto; /* Centraliza o container */
    padding: 0 15px; /* Adiciona algum padding nas laterais */
}

.contact-content {
    display: flex;
    /*flex-direction: column;*/ /* Colunas empilhadas por padrão (mobile first) */
    gap: 40px; /* Espaço entre as colunas */
    align-items: flex-start; /* Alinha o conteúdo ao topo de cada coluna */
}

.contact-form-wrapper {
    flex: 1; /* Permite que o formulário ocupe o espaço disponível */
    padding-right: 20px; /* Espaço para não colar na imagem no desktop */
}

.contact-form-wrapper h2 {
    font-size: 2.2em;
    color: #004C97;
    margin-bottom: 15px;
}

.contact-form-wrapper p {
    font-size: 1.1em;
    color: var(--text-medium); /* Presumindo que 'var(--text-medium)' esteja definido */
    margin-bottom: 30px;
}

/* Estilo do Formulário */
.contact-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #888888;
    border-radius: 5px;
    font-size: 1em;
    color: var(--text-dark); /* Presumindo que 'var(--text-dark)' esteja definido */
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: var(--light-blue); /* Presumindo que 'var(--light-blue)' esteja definido */
    box-shadow: 0 0 5px rgba(48, 160, 229, 0.3);
}

.form-group textarea {
    resize: vertical; /* Permite redimensionar apenas verticalmente */
    min-height: 120px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #555555;
    opacity: 0.7; /* Para que o placeholder seja um pouco mais claro */
}

/* Checkbox group */
.checkbox-group {
    display: flex;
    align-items: flex-start; /* Alinha o texto com o topo do checkbox */
    margin-bottom: 15px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    min-width: 16px; /* Garante que o checkbox tenha um tamanho mínimo */
    min-height: 16px;
    margin-top: 3px; /* Pequeno ajuste para alinhar com o texto */
    accent-color: var(--light-blue); /* Altera a cor do checkbox (modern browsers) */
}

.checkbox-group label {
    font-size: 0.95em;
    color: var(--text-medium); /* Presumindo que 'var(--text-medium)' esteja definido */
}

.checkbox-group label a {
    color: #1A29FF;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.checkbox-group label a:hover {
    color: #1a6aff;
}

/* Botão Enviar - ESTADO DESATIVADO (PADRÃO) */
.submit-button {
    background-color: #CCCCCC;
    color: #555555;
    border: none;
    padding: 8px 30px;
    border-radius: 30px;
    font-size: 1.1em;
    cursor: not-allowed; /* Indica que não está clicável por padrão */
    align-self: flex-start; /* Alinha o botão à esquerda */
    transition: background-color 0.3s ease, color 0.3s ease;
    pointer-events: none; /* Impede cliques no estado desativado */
}

/* Botão Enviar - ESTADO ATIVO */
.submit-button.active {
    background-color: #004b9774;
    color: #FFFFFF;
    cursor: pointer; /* Indica que está clicável */
    pointer-events: auto; /* Permite cliques */
}

/* Botão Enviar - HOVER NO ESTADO ATIVO */
.submit-button.active:hover {
    background-color: #082D47;
}


/* --- Cartão de Informação de Contato (Direita) --- */
/*.contact-info-card {*/
    /* Este bloco está comentado no seu CSS original, mantive assim */
    /*flex: 1;
    background-image: url('../imagens/img-contato.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 776px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 30px;
    border-radius: 8px;
    overflow: hidden;
}*/

.contact-info-card p {
    font-size: 1.2em;
    margin-bottom: 15px;
    line-height: 1.4;
    max-width: 80%;
}

.contact-info-card .email-link {
    color: #fff;
    font-size: 1.1em;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.contact-info-card .email-link:hover {
    color: var(--light-blue);
}
/* ========================================
   FIM DOS ESTILOS DA PÁGINA CONTATO
   ======================================== */


/* ========================================
   INÍCIO DAS QUEBRAS
   ======================================== */

/* 1299 */
@media (max-width: 1299px) {
    #timeline-section .timeline-title {
        padding: 3rem 0 4rem 0;
    }
    /* Container principal que contém a imagem de fundo e as 'tracks' de eventos */
    .timeline-path-container {
        width: 890px;
        height: 635px;
    }
    .timeline-track-1 {
        top: -2.75rem;
    }
    .timeline-track-2 {
        top: 0.35rem;
        margin: 0 0 0 3.15rem;
    }
    .timeline-track-3 {
        top: 3.45rem;
        margin: 0 0 0 5.5rem;
    }
}

/* 992 */
@media (max-width: 992px) {
    /* 4. Foto Zulma no meio do texto */
    .zulma-photo-wrapper {
        float: none; /* Remove o float */
        margin: 40px auto; /* Centraliza a foto e adiciona margem vertical */
        display: block; /* Garante que seja um elemento de bloco */
        max-width: 80%; /* Ajusta a largura máxima da foto para tablets */
        clear: both; /* Garante que nenhum texto flutue ao lado dela */
    }
    .main-content-zulma p {
        text-align: left; /* Alinha o texto à esquerda, pois o justificado pode ficar estranho com a imagem centralizada */
    }

    /* 5. Seção Dividida - Empilhar colunas */
    .split-section-wrapper {
        flex-direction: column; /* Colunas empilhadas verticalmente */
    }

    .split-left,
    .split-right {
        min-height: auto; /* Remove altura mínima fixa */
        padding: 40px 20px; /* Ajusta preenchimento */
        text-align: center; /* Centraliza o texto nas seções empilhadas */
    }

    .split-left .container,
    .split-right .container {
        max-width: 90%;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
    }
    
    .split-left .container p {
        font-size: 1.125rem;
        line-height: 1.5;
    }

    .alinhamento-orientacoes {
        margin-top: 2rem;
        background: #f4f4f4;
        width: 100%;
        padding-bottom: 3rem;
    }

    .orientacoes-passos .col-1 {
        width: 60%;
        /*padding: 2rem 1.5rem 0 1rem;*/
        float: left;
    }

    .orientacoes-passos .col-2 {
        width: 30%;
        float: left;
    }  

}


/* 991.98 */
@media (max-width: 991.98px) {
  .navbar-custom .navbar-nav .nav-item {
      margin-right: 0; /* Remove espaçamento lateral em mobile */
      margin-bottom: 0.5rem; /* Adiciona espaçamento vertical em mobile */
  }
    
  .navbar-custom .navbar-nav .nav-item:last-child {
    margin-bottom: 0;
  }

  /* SEÇÃO DEPOIMENTOS */
   #secao-depoimentos .section-title {
        font-size: 2.5rem;
    }
    .testimonial-content-wrapper {
        padding: 0 3.5rem;
    }
    .testimonial-card {
        padding: 1.5rem;
        min-height: 220px;
    }
    .testimonial-card::before {
        font-size: 5rem;
        top: 0.3rem;
        left: 0.5rem;
    }
    .testimonial-text {
        margin-top: 1.5rem;
        font-size: 0.95rem;
    }
    .author-name {
        font-size: 0.85em;
    }
    .carousel-arrow {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1em;
    }
    

  /* SEÇÃO ZULMA REYO */
    #secao-zulma-reyo {
        min-height: auto; /* Desabilita min-height em telas menores para permitir rolagem */
    }
    .col-text-content {
        padding: 40px 0; /* Ajusta padding */
    }
    .col-text-content .content-wrapper {
        padding: 0 40px; /* Ajusta padding interno */
    }
    #secao-zulma-reyo .section-subtitle {
        font-size: 1.5rem;
    }
    #secao-zulma-reyo .section-title-zulma {
        font-size: 2.8rem;
    }
    /* A imagem vai para baixo do texto automaticamente com as classes Bootstrap */
    .col-image {
        /* Para telas menores, certifique-se que o elemento da imagem não seja um flex item */
        width: 41.66666667%;
    }
    .col-image img {
        width: 100%;
        height: 100%;
        object-position: top center;
    }
    /* Container principal que contém a imagem de fundo e as 'tracks' de eventos */

    #timeline-section {
    padding-bottom: 0px;
    }
    .timeline-path-container {
        width: 90%;
        height: 1342px;
        background-image: url('../imagens/linhadotempo-tablet.png'); /* Sua imagem de fundo com a linha e os pontos */
        background-size: auto 1342px;
        background-repeat: no-repeat;
        background-position: top left;
    }
    #timeline-section .timeline-title {
        font-size: 2.45rem;
        padding-left: 4rem;
        text-align: left !important;
        padding-bottom: 4.85rem;
    }
    .timeline-track {
        display: block;
        padding: 0;
        height: auto; 
    }
    .timeline-item {
        padding: 10px 0 44.25px 0;
        text-align: left;
        max-width: 100%!important;
        display: flex;
        align-items: center;
    }
    .timeline-item p.event-year {
        margin-bottom: 0;
        margin-right: 0.5rem;
    }
    .timeline-item p.event-description {
        margin-bottom: 0;
        font-size: 1rem;
    }
    .btn-timeline-more {   
        margin-left: 0.5rem;
    }
    .timeline-track-1 {
        top: -0.45rem;
        margin-left: 4rem;
    }
    .timeline-track-2 {
        top: -0.4rem;
        margin-left: 4rem;
    }
    .timeline-track-3 {
        top: -0.125rem;
        margin-left: 4rem;
    }

    /* SEÇÃO DE ATIVIDADES REGULARES */
    .atividades-regulares .section-title {
        font-size: 2.2rem;
    }
    .atividades-regulares .overlay-year {
        font-size: 3.5rem;
    }
    .atividades-regulares .card-title {
        font-size: 1.3rem;
    }
    .atividades-regulares .card-image-wrapper {
        height: 220px;
    }

        
    a.btn-ico-whatsapp {
        display: none;
    }
    
}

/* 991 */
@media (max-width: 991px) {
  .navbar-nav { flex-direction: column !important; padding: 0 !important; margin: 0 !important; color: #004C97;}
  .nav-item { margin: 0 !important; padding: 12px 20px !important; border-bottom: 1px solid #004b9721!important; width: 100% !important; }
  .nav-link, .dropdown-toggle { padding: 0 !important; margin: 0 !important; color: inherit !important; }
  .dropdown-arrow { margin-left: 5px !important; transition: none !important; }

  .dropdown-menu {
    position: static !important; top: auto !important; left: auto !important; width: 100% !important; min-width: auto !important;
    box-shadow: none !important; border: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important;
    max-height: 0 !important; overflow: hidden !important;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; will-change: none !important; /* Anti-tremor reflow */
    transition: max-height 0.2s ease-out !important; /* Só height, curta */
    display: block !important;
    pointer-events: none !important; /* Bloqueia mouse fechado */
  }

  .dropdown-item { padding-left: 30px !important; opacity: 1 !important; transition: none !important; }

  .navbar-custom .nav-link.active {
    color: #004C97;
    border: 2px solid transparent;
    font-weight:600;
  }

  .navbar-custom .nav-link:hover {
      border: 2px solid transparent;
  }

  .navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus {
      color: #004C97;
  }

  .navbar-custom .dropdown-item {
      color: #004C97;
      border-bottom: 1px solid #004b9721;
  }

  /* Aberto: ativa mouse */
  .dropdown-menu.show,
  .nav-item.active .dropdown-menu {
    max-height: 500px !important;
    padding: 10px 0 !important;
    pointer-events: auto !important;
  }

  /* Hover forçado fecha (override total) */
  .nav-item:hover .dropdown-menu:not(.show),
  .dropdown:hover .dropdown-menu:not(.show) {
    max-height: 0 !important;
  }

  .btn-zrsoc {
    margin: 30px 0;
  }

  /* RESPONSIVIDADE PARA A SEÇÃO O LIVRO */
  #secao-livro .gap-4 {
      margin-top: 2rem;
  }

  /* PG INTERNA */
  .topo-interno {
        padding: 150px 0 80px 0;
        text-align: left;
    }

  .topo-interno h1 {
        font-size: 2.8em; /* Tamanho do título "Contato" */
        text-align: right!important;
        padding-right: 2rem !important;
    }

    #timelineDetailModal .modal-body {
        font-size: 0.85rem;
    }

    .tooltip-inner {
        font-size: 0.85rem;
    } 

}  

/* 900 */
@media (max-width: 900px) {
    .zrsoc-main-container {
        flex-direction: column; /* Colunas empilham em telas menores */
        box-shadow: none; /* Remove sombra em telas menores, se preferir */
    }

    .zrsoc-column {
        flex: none; /* Remove flex-grow */
        width: 100%; /* Ocupa largura total */
        padding: 30px; /* Ajusta padding */
        min-height: auto; /* Remove altura mínima fixa */
    }

    .zrsoc-left-column h1 {
        font-size: 2.5em; /* Ajusta tamanho do título */
    }

    .zrsoc-bottom-section {
        flex-direction: column; /* Botão e ícones sociais empilham */
        align-items: center; /* Centra os itens */
        gap: 20px; /* Ajusta espaçamento */
        width: 100%; /* Ensure it takes full width for centering */
    }

    .btn-zrsoc-school {
        width: 100%; /* Botão ocupa largura total */
        text-align: center; /* Centraliza texto do botão */
    }

    .zrsoc-social-icons {
        justify-content: center; /* Centraliza ícones sociais */
        width: 100%; /* Ocupa largura total */
    }

    .orientacoes-passos .col-1 {
        padding-top:0;
    }

    .orientacoes-passos span {
        padding-bottom: 1.5rem;
        font-size: 1.125rem;
    }

}

/* 768 */
@media (max-width: 768px) {

    :root {
        --h1-font-size: 2.5rem;      /* 40px em mobile */
        --h2-font-size: 2rem;        /* 32px em mobile */
        --h3-font-size: 1.25rem;     /* 20px em mobile */
        --font-size-base: 1rem;      /* 16px em mobile */
    }



    .navbar-custom {
        min-height: auto; 
    }

    .navbar-brand {
        width: 200px;
    }



    .carousel-caption h1 {
        font-size: 2.5rem;
    }

    .carousel-caption p {
        font-size: 1.2rem;
    }

    .custom-indicators {
        right: 20px;
    }

    .custom-indicators button {
        width: 10px; /* Ajusta o tamanho padrão para telas menores */
        height: 10px;
        margin-bottom: 12px;
    }

    .custom-indicators button.active {
        width: 10px; /* Ajusta o tamanho ativo para telas menores */
        height: 10px;
    }

    .carousel-caption {
        padding-bottom: 80px;
    }

    .container {
        max-width: 100%;
    }

    video.pratica-mestra {
        width: 90%;
    }

    #secao-workshop .text-md-start { /* Reseta o alinhamento para o mobile */
        text-align: center !important;
    }
    #secao-workshop .mb-md-0 { /* Adiciona margem inferior nas colunas para mobile */
        margin-bottom: 30px !important;
    }
    #secao-workshop .workshop-title {
        font-size: 2.5rem; /* Menor em mobile */
    }

    /* RESPONSIVIDADE PARA A SEÇÃO O LIVRO */
    #secao-livro .book-main-title {
        font-size: 3rem; /* Menor em mobile */
    }
    
    #secao-livro .book-subtitle {
        font-size: 2.2rem; /* Menor em mobile */
    }
    
    #secao-livro .book-description {
        font-size: 1rem; /* Menor em mobile */
    }
    
    #secao-livro .col-md-6 .d-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    #secao-livro .flex-shrink-0 {
        margin-bottom: 1.5rem;
    }
    
    #secao-livro .btn-book-download {
        width: 100%;
        margin-bottom: 0.5rem;
    }


    #secao-zulma-reyo .col-image {
        width: 100%;
    }

    /* VERSÃO RESPONSIVA */
    .wave-container {
        height: 150px;
    }

    /* SEÇÃO ALQUIMIA INTERIOR */
    .alquimia-main-title {
        font-size: 2.8em;
    }
    .alquimia-subtitle-text {
        font-size: 1.25rem;
    }
    .alquimia-header {
        margin-bottom: 40px;
    }
    .alquimia-text-columns {
        margin-bottom: 40px;
    }
    .alquimia-text-columns p.subtitulo {
        line-height: 1.3;
    }

    .alquimia-action-group {
        flex-direction: column; /* Empilha o botão e os ícones sociais */
        align-items: center; /* Centraliza os itens empilhados */
        gap: 20px; /* Ajusta o espaçamento quando empilhado */
    }
    .alquimia-action-group .btn-zrsoc-school {
        width: 100%; /* Botão ocupa largura total em mobile */
        text-align: center;
    }
    .alquimia-action-group .zrsoc-social-icons {
        justify-content: center; /* Centraliza os ícones sociais em mobile */
        width: 100%; /* Garante que ocupem a largura total para centralizar */
    }

    /* SEÇÃO RODAPE */
    #footer-principal {
        min-height: auto;
        padding: 1.5rem 0;
    }
    
    #footer-principal .footer-top,
    #footer-principal .footer-bottom {
        text-align: center !important;
        margin-bottom: 1rem;
    }
    
    #footer-principal .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #footer-principal .footer-bottom-item {
        text-align: center !important;
        margin-bottom: 0.5rem;
    }
    
    #footer-principal .footer-top .col-md-4 {
        margin-bottom: 1rem;
    }
    
    #footer-principal .footer-top .col-md-4:last-child {
        margin-bottom: 0;
    }
    
    .btn-fale-conosco {
        margin-bottom: 1rem;
    }
    
    #footer-principal .footer-logo {
        max-height: 4rem;
    }



    /* Esta regra é específica para o container DENTRO do contact-hero */
    .topo-interno .container {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alinha conteúdo à esquerda */
        position: relative;
        padding-top: 0; /* Reset */
    }    
    
    .topo-interno h1 {
        position: absolute; /* Posiciona o título de forma independente */
        top: 0px; /* Ajuste para o centro vertical */
        left: 50%;
        transform: translateX(-50%);
        width: 100%; /* Permite centralizar o texto */
        text-align: center;
    }
    /* Estilos de agendamento permanecem como padrão (desktop) */



    .topo-interno .container {
        flex-direction: column; /* Botão e título empilham */
        gap: 15px;
    }
    .topo-interno h1 {
        font-size: 2rem;
        padding-top: 2rem;
    }
    .topo-interno button {
        width: 80px;
        font-size: 10px;
        margin-top: 20px;
        display: none;
    }

    .hero-image-zulma {
        height: 80vh; /* Reduz a altura da imagem hero para telas menores */
    }

    .quote-section {
        padding: 40px 0;
    }
    .quote-section p {
        font-size: 1.25em;
        max-width: 90%; /* Mais espaço para o texto */
    }

    .quote-section .quote-icon {
        width: 40px; /* Reduz o tamanho das aspas */
        /* Ajusta o posicionamento das aspas para não ficarem "fora" da tela */
        left: 5%;
        right: 5%;
        transform: translateY(-50%); /* Remove o translateX, já que o left/right foi ajustado */
    }

    .main-content-zulma {
        padding: 40px 0;
    }
    .main-content-zulma p {
        font-size: 1em;
    }

    .zulma-photo-wrapper {
        max-width: 90%;
        margin: 30px auto;
    }

    .split-section-wrapper h2 {
        font-size: 1.8em;
    }
    .split-section-wrapper p {
        font-size: 1em;
    }

    .quote-white-bg-image {
        padding: 80px 0;
    }
    .quote-white-bg-image p {
        font-size: 1.4em;
    }

    #timeline-section .timeline-title {
        font-size: 2.1rem;
        padding: 4rem 0 !important;
        padding-left: 4rem !important;
        padding-bottom: 4.85rem;
    }




    .contact-content {
        flex-direction: row; /* Colunas lado a lado em telas maiores */
    }

    .contact-form-wrapper {
        flex: 2; /* Formulário um pouco maior que o card de info (ex: 60% vs 40%) */
        max-width: 100%; /* Limita a largura do formulário */
        padding-right: 0px; /* Mais espaço entre formulário e card */
    }

    .contact-info-card {
        display: none;
    }

    #secao-alquimia .col-image {
        width: 100%;
    }

    .livro-video {
    margin: 3.5rem auto 2rem auto!important;
    width: 500px;
    height: 281px;
    }


    .orientacoes-passos h2 {
        font-size: 1.5rem;
    }

}

/* 767.98 */
@media (max-width: 767.98px) {
    #secao-depoimentos .section-title {
        font-size: 2rem;
        margin-bottom: 2.5rem;
    }
    
    .testimonial-content-wrapper {
        padding: 0 3rem;
    }
    
    /* Em mobile, mostra apenas 1 card por vez */
    .testimonial-card-wrapper {
        flex: 0 0 100%;
    }
    
    .testimonial-card {
        padding: 1.25rem;
        min-height: 200px;
    }
    
    .testimonial-card::before {
        font-size: 4rem;
        top: 0.2rem;
        left: 0.5rem;
    }
    
    .testimonial-text {
        margin-top: 1.25rem;
        font-size: 0.9rem;
    }
    
    .author-name {
        font-size: 0.8em;
    }
    
    .carousel-arrow {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.9em;
    }
    
    .arrow-left { left: 0.3rem; }
    .arrow-right { right: 0.3rem; }

    /* SEÇÃO ZULMA REYO */
    .col-text-content .content-wrapper {
        padding: 0 20px;
    }
    #secao-zulma-reyo .section-subtitle {
        font-size: 1.2rem;
    }
    #secao-zulma-reyo .section-title-zulma {
        font-size: 2.2rem;
    }
    #secao-zulma-reyo p.lead,
    #secao-zulma-reyo p {
        font-size: 1rem;
    }
    .btn-custom-zulma {
        padding: 12px 25px;
        font-size: 1rem;
    }

    /* SEÇÃO DE ATIVIDADES REGULARES */
    .atividades-regulares .section-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    .atividades-regulares p,
    .atividades-regulares .custom-list li {
        font-size: 1rem;
    }
    .atividades-regulares .agenda-title {
        font-size: 1.4rem;
        margin-top: 2.5rem;
    }
    .atividades-regulares .overlay-year {
        font-size: 3rem;
    }
    .atividades-regulares .card-title {
        font-size: 1.2rem;
    }
    .atividades-regulares .card-image-wrapper {
        height: 200px;
    }
}

/* 767 */
@media (max-width: 767px) {
    .pg-interna .schedule-container {
        border-radius: 0; /* Remover bordas arredondadas em telas pequenas */
        box-shadow: none; /* Remover sombra em mobile */
        margin-left: 0;
        margin-right: 0;
        width: 100%; /* Ocupa toda a largura disponível no container pai */
        border: none; /* Remove a borda principal do container em mobile */
        padding: 0; /* Remove default padding se existir */
    }

    .topo-interno {
        height: 0rem;
        padding: 85px 0 135px 0;
    }

    .topo-interno h1 {
        font-size: 2.5em;
        text-align: center !important;
        padding-right: 0rem !important;
        padding-top: 2rem;
    }

    .topo-interno button {
    color: #fff;
    background: #004c97;
    }

    .topo-interno button:hover {
        color: #ffffff;
        background: #004c97;

    }

    /* Ocultar o cabeçalho no mobile */
    .pg-interna .schedule-header {
        display: none;
    }

    /* Cada linha (schedule-row) se torna um bloco */
    .pg-interna .schedule-row {
        display: block; /* Remove o grid, empilha elementos */
        padding: 15px; /* Ajustar padding para mobile */
        border-bottom: 1px solid #ddd;
        background-color: #fff; /* Fundo branco para cada 'card' */
        margin-bottom: 10px; /* Espaço entre as linhas empilhadas */
        border-radius: 8px; /* Opcional: cantos arredondados para cada item */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Opcional: sombra para cada item */
    }

    .pg-interna .schedule-row:last-child {
        border-bottom: 1px solid #ddd; /* Mantém a borda no último item para consistência com sombra */
        margin-bottom: 0; /* Remove a margem extra do último item */
    }

    .pg-interna .schedule-date,
    .pg-interna .schedule-activities {
        border-right: none; /* Remove a borda vertical */
        padding: 0; /* Ajustar padding para mobile, pois o padding do pai (schedule-row) já cobre */
    }

    .pg-interna .schedule-date {
        margin-bottom: 8px; /* Espaço entre Data e Atividades */
        font-weight: bold; /* Destaca a data no mobile */
        color: var(--text-dark, #343a40); /* Garante cor do texto para Data */
    }

    .pg-interna .schedule-activities {
        color: var(--text-medium, #6c757d); /* Garante cor do texto para Atividades */
    }

    /* Mostrar labels para mobile */
    .pg-interna .mobile-label {
        display: inline; /* ou 'inline-block' */
        font-weight: bold;
        margin-right: 5px;
        color: #555; /* Cor um pouco mais escura para o label */
    }
}

/* 576 */
@media (max-width: 576px) {
    :root {
        --h1-font-size: 2rem;        /* 32px em mobile pequeno */
        --h2-font-size: 1.75rem;     /* 28px em mobile pequeno */
    }



    .carousel-caption h1 {
        font-size: 2rem;
        padding: 0 1rem 1rem 1rem;
    }

    .carousel-caption p {
        line-height: 1.2;
        padding: 0 1.5rem;
    }

    .custom-indicators {
        right: 15px;
    }

    .custom-indicators button.active {
        background-color: #F9E244;
        width: 12px;
        height: 12px;
    }


    #secao-alquimia-interior .container {
    padding: 0 20px;
    }

    .orientacoes-passos span {
        padding-bottom: 2.5rem;
        font-size: 1rem;
        line-height: 1.3;
    }

    .orientacoes-passos .col-2 span {
        text-align: center!important;
    }

    .atividades-regulares {
        padding: 3rem 0 0 0;
    }

    #secao-zulma-reyo .col-text-content {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    #secao-zulma-reyo .section-subtitle {
        padding-top: 1.5rem;
    }



    .img-livro {
        display: none;
    }

    #secao-livro {
        padding: 2rem 0 3rem 0;
    }

    #secao-livro .gap-4 {
        margin-top: 2rem;
        display: block !important;
    }

    #secao-livro .gap-4 .flex-grow-1 {
        padding: 0 1rem;
    }

    #secao-livro .book-main-title {
        font-size: 1.2rem !important;
    }

    #secao-livro .book-subtitle {
        font-size: 2.2rem !important;
    }

    #secao-livro .flex-shrink-0 {
        margin: 0 auto 1.5rem auto;
        width: 80%;
        justify-content: center;
    }

    #secao-livro h4.book-section-title {
        text-align: center;
    }




    #secao-alquimia-brasil {
        padding: 3rem 0;
    }    

    #secao-alquimia-brasil h2 {
        font-size: 2.2rem;
        text-align: left;
    }



    #secao-eventos h2 {
        font-size: 2.2rem;
        text-align: center;
        color: #004C97;
    }

    #secao-eventos .col-auto {
        margin: 1rem auto;
    }

    #secao-eventos .container {
        margin-top: 2rem;
    }



    .top-depoimentos {
        height: 50px;
    }



    #secao-workshop {
        padding: 2rem 0 3rem 0;
    }




    #secao-artigos {
        padding: 3rem 0;
    }

    #secao-artigos .bt-artigos {
        width: 100%;
        text-align: right;
        display: block !important;
    }

    #secao-artigos h2.section-title .text-start {
        width: 100%;
    }

    #secao-artigos .bt-artigos .btn-fale-conosco {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    


    #footer-principal {
        padding: 3rem 0 1.5rem 0;
    }

    #footer-principal .footer-bottom {
        gap: 0;
    }





    .topo-interno h1 {
        font-size: 2rem;
    }
    .pg-interna .schedule-row {
        padding: 12px;
    }
    .pg-interna .schedule-date {
        margin-bottom: 6px; /* Ajuste para telas ainda menores */
    }



    .contact-form-wrapper h2 {
        font-size: 1.8em;
    }
    .contact-info-card {
        min-height: 350px;
        padding: 20px;
    }



   .livro-video {
        margin: 3.5rem auto 2rem auto!important;
        width: 350px;
        height: 197px;
    }

    .orientacoes-passos .col-1 {
        width: 100%;
    }

    .orientacoes-passos .col-2 {
        width: 100%;
    }

    .orientacoes-passos .col-2 img {
        width: 60%;
        margin: 0 auto;
    }

    .hero-image-alquimiainteriorbr img {
        bottom: 30%;
    }

}

/* 575.98 */

/* Media Query para aplicar a largura do tooltip à modal SOMENTE em mobile */
/* A modal é ativada apenas para telas abaixo de 576px */
@media (max-width: 575.98px) { /* Corresponde ao breakpoint 'xs' ou 'sm' do Bootstrap */
    .timeline-path-container {
        width: 90%;
        height: 2330px;
        background-image: url(../imagens/linhadotempo-mobile.png);
        background-size: 360px 2330px;
    }
    /* Estilo para cada item individual na timeline */
    .timeline-item {
        text-align: left;
        display: block;
        padding: 32px 0 35px 1rem;
    }

    #timeline-section .timeline-title {
        padding: 3rem 0 4rem 4rem;
        text-align: left !important;
        font-size: 2rem !important;
    }

    .timeline-track {
        margin-right: 0;
    }

    .timeline-track-1 {
        top: -2rem;
        margin-left: 3rem;
    }

    .timeline-track-2 {
        top: -2rem;
        margin-left: 3rem;
    }
    
    .timeline-track-3 {
        top: -0.85rem;
        margin-left: 3rem;
    }

    .timeline-item p.event-year {
        margin-bottom: 0.25rem;
        margin-right: 0;
    }

    .timeline-item p.event-description {
        margin-bottom: 0.25rem;
    }

    .btn-timeline-more {
        margin-left: 0;
    }
    
    #timelineDetailModal .modal-dialog {
        width: 300px !important; /* Largura fixa como no tooltip */
        max-width: 90% !important; /* Garante que a modal não exceda a largura da tela em dispositivos muito pequenos */
        margin: 1.75rem auto !important; /* Centraliza a modal na tela */
    }


    /* SEÇÃO DE ATIVIDADES REGULARES */
    .atividades-regulares .overlay-year {
        font-size: 2.5rem;
    }
}

/* 500 */
@media (max-width: 500px) {
    .zrsoc-left-column h1 {
        font-size: 2em; /* Ajusta ainda mais o tamanho do título */
    }

    .btn-zrsoc-school {
        padding: 12px 20px; /* Ajusta padding do botão */
        font-size: 0.9em;
    }

    .zrsoc-social-icon-item i {
        font-size: 1.5em; /* Reduz tamanho dos ícones */
    }
}

/* 480 */
@media (max-width: 480px) {
    .alquimia-main-title {
        font-size: 2em;
    }

    .alquimia-text-columns p {
        font-size: 0.9em;
    }


    .pg-interna .schedule-row {
        padding: 10px;
    }
    .pg-interna .schedule-date {
        margin-bottom: 5px;
    }



    .quote-section p {
        font-size: 0.875rem;
        line-height: 1.2;
    }

    .quote-section cite {
    font-size: 0.75rem;
    }

    .quote-section .quote-icon {
        display: none; /* Esconde os ícones de aspas em telas muito pequenas para evitar poluição visual */
    }
    .quote-white-bg-image p {
        font-size: 1.2em;
    }

    .hero-image-zulma {
    height: 80vh;
    background-position: -370px -60px;
    }   
}


/* ========================================
   FIM DAS QUEBRAS
   ======================================== */