/* Estilos para a Landing Page ONIX */

:root {
    --onix-orange: #FF6600; /* Laranja da identidade visual */
    --onix-blue: #0056b3; /* Azul da identidade visual */
    --onix-gray: #333333; /* Cinza escuro para texto */
    --onix-light-gray: #f8f8f8; /* Cinza claro para fundos */
    --onix-white: #ffffff; /* Branco */
    --onix-dark-gray: #555555; /* Cinza mais escuro, baseado no visual maxiVIP ONIX */
    --onix-black: #000000; /* Preto para os números dos cards */
    --onix-dark: #1a1a1a; /* Preto/Cinza muito escuro para a caixa de texto dos propósitos */
}

body {
    font-family: 'Open Sans', sans-serif; /* Tentando Open Sans, com fallback */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--onix-light-gray); /* Usando variável */
    color: var(--onix-gray); /* Usando variável */
}

.container {
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centralizar na página */
    padding: 0 20px; /* Espaçamento interno nas laterais */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--onix-blue); /* Títulos em azul */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
}

p {
    text-align: center;
    margin-bottom: 15px;
}

/* Estilos para botões (CTA) baseados no site */
.cta-button {
    display: inline-block;
    background-color: var(--onix-orange); /* Botão laranja */
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    border: none; /* Remover borda padrão */
    cursor: pointer; /* Indicar que é clicável */
}

.cta-button:hover {
    background-color: #E65C00; /* Tom de laranja ligeiramente mais escuro para o hover */
}

/* Estilos para o Cabeçalho (Header) */
.site-header {
    background-color: var(--onix-white); /* Fundo branco */
    padding: 10px 0; /* Espaçamento superior e inferior */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.header-content {
    display: flex; /* Usar flexbox para alinhar logo e navegação */
    justify-content: space-between; /* Espaço entre logo e navegação */
    align-items: center; /* Alinhar verticalmente ao centro */
}

.site-logo img {
    height: 50px; /* Altura da logo, ajustar conforme necessário */
}

.site-nav ul {
    list-style: none; /* Remover marcadores de lista */
    margin: 0;
    padding: 0;
    display: flex; /* Itens do menu em linha */
}

.site-nav li {
    margin-left: 20px; /* Espaço entre os itens do menu */
}

.site-nav a {
    text-decoration: none; /* Remover sublinhado */
    color: var(--onix-gray); /* Cor do texto dos links */
    font-weight: bold;
    transition: color 0.3s ease;
}

.site-nav a:hover {
    color: var(--onix-orange); /* Mudar cor no hover */
}

/* Estilos para o botão de menu mobile (inicialmente escondido no desktop) */
.menu-toggle {
    display: none; /* Esconder no desktop por padrão */
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: var(--onix-gray);
}

/* Media query para mobile: ajustar layout do header e mostrar menu toggle */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column; /* Empilhar logo e navegação no mobile */
        align-items: flex-start; /* Alinhar itens à esquerda */
    }

    .site-nav {
        margin-top: 10px; /* Espaço entre logo e menu no mobile */
        width: 100%; /* Ocupar largura total */
    }

    .site-nav ul {
        flex-direction: column; /* Itens do menu em coluna */
        align-items: flex-start; /* Alinhar itens à esquerda */
        display: none; /* Esconder o menu por padrão no mobile */
    }

    .site-nav ul.show {
        display: flex; /* Mostrar o menu quando a classe 'show' estiver ativa (via JS) */
    }

    .site-nav li {
        margin: 5px 0; /* Espaço vertical entre os itens */
    }

    .menu-toggle {
        display: block; /* Mostrar o botão de menu no mobile */
        position: absolute;
        top: 15px;
        right: 20px;
    }
}

/* Estilos para a seção Hero (baseada nas novas imagens) */
.hero-section-onix {
    position: relative;
    height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    background-image: url('../images/IMG_01_DESKTOP.png');
}

/* Media query para mobile */
@media (max-width: 768px) {
    .hero-background {
        background-image: url('../images/IMG_01_MOBILE.png');
    }

    .hero-section-onix {
        height: 400px;
    }

    .hero-content-onix h1 {
        font-size: 1em;
    }

    .hero-content-onix p {
         font-size: 1.2em;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 102, 0, 0.6); /* Laranja com 60% de opacidade */
    z-index: 2;
}

.hero-content-onix {
    position: relative;
    z-index: 3;
    text-align: center;
}

.hero-content-onix h1 {
    color: white;
    font-size: 2em;
    margin-bottom: 10px;
    text-align: center;
}

.hero-content-onix p {
    color: white;
    font-size: 1.5em;
    margin-bottom: 5px;
    text-align: center;
}

.maxi-vip-onix {
    font-size: 2em !important;
    font-weight: bold;
}

.saude-onix-text {
    font-size: 1.2em !important;
}

/* Estilos para o texto destacado com animação */
.highlight-text {
    color: #FFFF00; /* Amarelo brilhante ou outra cor de destaque */
    font-weight: bold;
    /* Adicionar animação */
    animation: pulse-highlight 2s infinite ease-in-out;
    display: inline-block; /* Essencial para aplicar transform scale */
    position: relative; /* Para posicionar os giroflexes absolutamente */
    font-size: 35px;
}

/* Estilos para os elementos de giroflex */
.giroflex {
    display: inline-block;
    width: 15px; /* Tamanho do giroflex */
    height: 15px; /* Tamanho do giroflex */
    border-radius: 50%; /* Formato circular */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    animation: spin 1s linear infinite; /* Animação de rotação */
}

.giroflex.left {
    left: -20px; /* Posição à esquerda do texto */
    background-color: blue; /* Cor azul */
}

.giroflex.right {
    right: -20px; /* Posição à direita do texto */
    background-color: red; /* Cor vermelha */
}

/* Animação de rotação para os giroflexes */
@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

@keyframes pulse-highlight {
    0% {
        opacity: 1;
        transform: scale(1); /* Tamanho normal */
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1); /* Aumenta ligeiramente o tamanho */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Retorna ao tamanho normal */
    }
}

/* Estilos para a Seção de Card de Informação */
.info-card-section {
    padding: 40px 0;
    background-color: var(--onix-light-gray);
}

.info-card {
    background-color: var(--onix-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: block; /* Alterado para block para o vídeo ocupar o espaço */
    gap: 0; /* Removido gap */
    margin-top: -80px;
    position: relative;
    z-index: 4;
    align-items: center;
    text-align: center; /* Centraliza o conteúdo inline/inline-block, incluindo o botão */
}

.info-card video {
    width: 100%; /* Vídeo ocupa a largura total do contêiner */
    height: auto; /* Mantém a proporção */
    display: block; /* Remove espaço extra abaixo do vídeo */
    border-radius: 4px; /* Cantos levemente arredondados para combinar com o card */
    max-width: 400px; /* Limita a largura máxima em desktop */
    margin: 0 auto; /* Centraliza o vídeo */
}

.info-card-left, .info-card-right {
    flex: 1;
    padding: 20px;
}

.info-card-left {
     background-color: rgba(255, 102, 0, 0.1);
     border-radius: 4px;
}

.info-card-left h2, .info-card-right h2 {
    color: var(--onix-gray);
    font-size: 1.6em;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}

.info-card-left span {
    color: var(--onix-orange);
    font-weight: bold;
}

/* Media query para empilhar colunas no mobile do info card */
@media (max-width: 768px) {
    .info-card {
        flex-direction: column;
        gap: 20px;
        margin-top: -40px;
        padding: 20px;
    }

    .info-card-left, .info-card-right {
         padding: 15px;
    }

     .info-card-left h2, .info-card-right h2 {
        font-size: 1.4em;
        text-align: center;
     }

     .info-card-left {
        background-color: transparent;
     }
}

/* Estilos para a Seção Quem é a Onix */
.quem-onix-section {
    background-color: var(--onix-orange);
    color: var(--onix-white);
    padding: 40px 0;
    text-align: center;
}

.quem-onix-section h2 {
    color: var(--onix-white);
    margin-bottom: 30px;
}

.quem-onix-content {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
}

.quem-onix-left, .quem-onix-right {
    flex: 1;
    max-width: 500px;
}

.quem-onix-content p {
    text-align: left;
    margin-bottom: 15px;
}

/* Estilos para a Seção O que oferecemos / Serviços opcionais */
.oferecemos-servicos-section {
    background-color: var(--onix-white);
    padding: 40px 0;
}

.oferecemos-servicos-content {
    display: flex;
    gap: 40px;
}

.oferecemos-left, .servicos-right {
    flex: 1;
}

.oferecemos-left h2, .servicos-right h2 {
    color: var(--onix-orange);
    text-align: left;
    margin-bottom: 20px;
}

.oferecemos-servicos-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.oferecemos-servicos-content li {
    margin-bottom: 10px;
    line-height: 1.4;
    color: var(--onix-gray);
}

/* Estilos para a Seção Agora com Ressonância e Tomografia */
.novos-servicos-section {
    background-color: var(--onix-dark-gray);
    color: var(--onix-white);
    padding: 10px 10px; /* Reduzindo espaçamento interno */
    text-align: center;
}

.novos-servicos-section h2 {
    color: var(--onix-white);
    font-size: 1.8em; /* Reduzindo tamanho da fonte para desktop */
    line-height: 1.2;
    margin-bottom: 0; /* Removendo margem inferior se o texto estiver em uma linha */
}

/* Estilos para a Seção de Cards Expansíveis */
.expandable-cards-section {
    background-color: var(--onix-light-gray); /* Fundo levemente cinza */
    padding: 40px 0; /* Espaçamento interno */
}

.expandable-cards-list {
    display: flex; /* Usar flexbox para os cards */
    flex-direction: column; /* Cards empilhados por padrão */
    gap: 15px; /* Espaço entre os cards */
}

.card-item {
    background-color: var(--onix-white); /* Fundo branco para o card */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
    overflow: hidden; /* Esconder conteúdo extra quando fechado */
}

.card-header {
    background-color: var(--onix-orange); /* Fundo laranja para o cabeçalho */
    color: var(--onix-white); /* Texto branco */
    padding: 15px 20px; /* Espaçamento interno */
    display: flex; /* Alinhar número e título */
    align-items: center;
    cursor: pointer; /* Indicar que é clicável */
    transition: background-color 0.3s ease;
}

.card-header:hover {
    background-color: #E65C00; /* Laranja ligeiramente mais escuro no hover */
}

.item-number {
    background-color: var(--onix-black); /* Fundo preto para o número */
    color: var(--onix-white);
    padding: 8px 12px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos levemente arredondados */
    font-weight: bold;
    margin-right: 15px; /* Espaço entre o número e o título */
    /* Para o formato hexagonal, seria necessário algo mais complexo */
}

.card-header h3 {
    color: var(--onix-white); /* Título em branco */
    margin: 0; /* Remover margens padrão */
    font-size: 1.2em; /* Tamanho da fonte do título */
    text-align: left; /* Alinhar texto à esquerda */
}

.card-content {
    background-color: var(--onix-white); /* Fundo branco para o conteúdo */
    padding: 0 20px;
    max-height: 0; /* Conteúdo escondido por padrão */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out; /* Transição suave */
}

.card-content p {
    padding: 20px 0; /* Espaçamento interno superior e inferior do parágrafo */
    margin: 0; /* Remover margens do parágrafo */
    text-align: left; /* Alinhar texto do conteúdo à esquerda */
    color: var(--onix-gray); /* Cor do texto do conteúdo */
}

.card-item.active .card-content {
    padding-bottom: 20px; /* Adicionar padding inferior quando ativo */
}

/* Media Queries para as novas seções */
@media (max-width: 768px) {
    .quem-onix-content, .oferecemos-servicos-content {
        flex-direction: column;
        gap: 20px;
    }

    .quem-onix-left, .quem-onix-right, .oferecemos-left, .servicos-right {
        max-width: 100%;
        text-align: center;
    }

    .quem-onix-content p, .oferecemos-servicos-content li {
         text-align: center;
    }

    .oferecemos-left h2, .servicos-right h2 {
        text-align: center;
    }

    .novos-servicos-section {
        padding: 30px 20px;
    }

    .novos-servicos-section h2 {
         font-size: 1.5em;
         margin-bottom: 10px;
    }

    .expandable-cards-section {
        padding: 20px 0; /* Ajustar padding no mobile */
    }

    .card-header {
        padding: 10px 15px; /* Ajustar padding do cabeçalho do card */
    }

    .item-number {
         padding: 5px 8px; /* Ajustar padding do número */
         margin-right: 10px; /* Ajustar espaço */
    }

    .card-header h3 {
        font-size: 1.1em; /* Ajustar tamanho da fonte do título do card */
    }

    .card-content {
        padding: 0 15px; /* Ajustar padding do conteúdo do card */
    }

     .card-content p {
         padding: 15px 0; /* Ajustar padding do parágrafo */
     }

     .card-item.active .card-content {
         padding-bottom: 15px;
     }
}

/* Estilos para a Seção Propósitos */
.propositos-section {
    background-color: var(--onix-white); /* Fundo branco */
    padding: 40px 0;
    text-align: center;
}

.propositos-section h2 {
    color: var(--onix-orange); /* Título PROPÓSITOS em laranja */
    margin-bottom: 30px;
}

.propositos-content {
    display: flex;
    gap: 30px; /* Espaço entre os itens de propósito */
    justify-content: center;
    align-items: stretch; /* Esticar itens para terem a mesma altura */
}

.proposito-item {
    flex: 1;
    display: flex; /* Usar flexbox para a caixa de título e texto */
    flex-direction: column; /* Empilhar título e texto */
    max-width: 350px; /* Largura máxima para cada item */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra similar aos cards */
    border-radius: 8px;
    overflow: hidden;
}

.proposito-title-box {
    background-color: var(--onix-orange); /* Fundo laranja */
    color: var(--onix-white); /* Texto branco */
    padding: 15px 20px;
    text-align: center;
    flex-shrink: 0; /* Não diminuir a altura */
}

.proposito-title-box h3 {
    color: var(--onix-white); /* Título em branco */
    margin: 0;
    font-size: 1.3em;
}

.proposito-text-box {
    background-color: var(--onix-dark); /* Fundo cinza/preto escuro */
    color: var(--onix-white); /* Texto branco */
    padding: 20px;
    flex-grow: 1; /* Preencher o espaço restante na coluna */
    display: flex; /* Para alinhar o conteúdo dentro */
    flex-direction: column;
    justify-content: center; /* Centralizar verticalmente o conteúdo */
}

.proposito-text-box p, .proposito-text-box ul {
    text-align: left;
    margin: 0;
    padding: 0;
    color: var(--onix-white);
}

.proposito-text-box ul {
    list-style: disc inside; /* Bolinhas para os valores */
    padding-left: 20px;
}

.proposito-text-box li {
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Media query para mobile: empilhar os itens de propósito */
@media (max-width: 768px) {
    .propositos-content {
        flex-direction: column;
        gap: 20px;
        align-items: center; /* Centralizar os itens empilhados */
    }

    .proposito-item {
        max-width: 90%; /* Ocupar mais largura no mobile */
    }

    .proposito-title-box h3 {
        font-size: 1.2em;
    }

    .proposito-text-box p, .proposito-text-box ul {
        font-size: 0.95em;
    }

     .proposito-text-box ul {
        padding-left: 15px;
     }

     .proposito-text-box li {
        margin-bottom: 8px;
     }
}

/* Estilos para a Seção Coberturas */
.coberturas-section {
    background-color: var(--onix-orange); /* Fundo laranja */
    padding: 40px 0;
    text-align: center;
    color: var(--onix-white); /* Texto branco */
}

.coberturas-section h2 {
    color: var(--onix-white); /* Título Coberturas em branco */
    margin-bottom: 30px;
}

/* Estilo para o título clicável da seção Coberturas */
.coberturas-title-toggle {
    color: var(--onix-white); /* Título Coberturas em branco */
    margin-bottom: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
}

.coberturas-title-toggle .toggle-arrow {
    margin-left: 10px; /* Espaço entre o texto e a seta */
    transition: transform 0.3s ease; /* Transição suave para a rotação */
    /* Removendo estilos de fundo e padding */
    display: inline-block;
    /* padding: 5px; */
    /* border-radius: 4px; */
    /* background-color: rgba(0, 0, 0, 0.1); */
    color: var(--onix-white);
}

.coberturas-title-toggle .toggle-arrow:hover {
     /* Removendo estilo de fundo no hover */
     /* background-color: rgba(0, 0, 0, 0.2); */
}

/* A rotação será controlada pelo JavaScript adicionando/removendo uma classe no span da seta */
.coberturas-title-toggle .toggle-arrow.rotated {
     transform: rotate(180deg);
}

.coberturas-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Inicialmente ocultar a lista */
    max-height: 0; /* Conteúdo escondido por padrão */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.coberturas-list.show {
    /* Quando a classe 'show' é adicionada, expandir */
    max-height: 5000px; /* Aumentado para garantir espaço suficiente para todos os textos */
}

/* Estilos para os itens de cobertura estáticos (não individualmente expansíveis) */
.cobertura-item-static {
    background-color: var(--onix-white); /* Fundo branco para cada item */
    color: var(--onix-gray); /* Texto do conteúdo em cinza */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px 20px; /* Padding similar ao header anterior */
    display: flex; /* Manter layout flex para carência e grupo info */
    gap: 20px;
    align-items: center;
}

.carencia-static {
    flex-shrink: 0;
    font-weight: bold;
    text-align: right;
    width: 120px;
    color: var(--onix-black); /* Texto da carência em preto */
}

.grupo-info-static {
    flex-grow: 1;
    text-align: left;
    min-width: 0; /* Permite que o item diminua em layouts flexbox */
}

.grupo-info-static h3 {
    color: var(--onix-orange); /* Título do grupo em laranja */
    margin: 0 0 5px 0;
    font-size: 1.2em;
}

.grupo-info-static p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.3;
    color: var(--onix-gray);
    text-align: left;
}

/* Media query para mobile da seção Coberturas */
@media (max-width: 768px) {
    .coberturas-section {
        padding: 30px 0;
    }

    .coberturas-title-toggle {
        margin-bottom: 20px;
    }

    .cobertura-item-static {
        flex-direction: column; /* Empilhar carência e grupo */
        gap: 10px;
        text-align: center; /* Centralizar texto no mobile */
        padding: 15px;
    }

    .carencia-static {
        width: 100%; /* Ocupar largura total */
        text-align: center;
    }

    .grupo-info-static {
        width: 100%;
        text-align: center;
    }

     .grupo-info-static p {
         text-align: center;
     }
}

/* Estilos para a Seção Rede Credenciada */
.rede-credenciada-section {
    background-color: var(--onix-dark);
    color: var(--onix-white);
    padding: 40px 0;
    text-align: center;
}

/* Estilo para o título principal clicável da seção Rede Credenciada */
.rede-credenciada-title-toggle {
    color: var(--onix-white);
    margin-bottom: 30px;
    font-size: 1.8em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rede-credenciada-title-toggle .toggle-arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.rede-credenciada-content {
    /* Inicialmente ocultar o conteúdo */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    /* Removendo display flex daqui para desktop, será no wrapper interno */
    display: block; /* Alterado para block para controlar melhor o max-height */
}

.rede-credenciada-content.show {
     max-height: 4000px;
}

.rede-credenciada-columns-wrapper {
    display: flex; /* Usar flexbox para as duas colunas principais */
    gap: 30px;
    justify-content: center;
    align-items: flex-start; /* Alinhar colunas no topo */
    width: 100%;
}

.municipios-list-rio, .municipios-list-outros {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
}

.outros-municipios-title {
     color: var(--onix-white); /* Título Outros Municípios em branco */
     margin: 0 0 20px 0; /* Espaço abaixo do título */
     font-size: 1.5em;
     text-align: center;
}

.municipio-card-static {
    background-color: var(--onix-orange);
    color: var(--onix-white);
    padding: 15px 20px;
    border-radius: 8px;
    text-align: center;
}

.municipio-card-static h3 {
    color: var(--onix-white);
    margin: 0 0 5px 0;
    font-size: 1.2em;
}

.municipio-card-static p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.3;
    color: var(--onix-white);
}

/* Media query para mobile da seção Rede Credenciada */
@media (max-width: 768px) {
    .rede-credenciada-section {
        padding: 30px 0;
    }

    .rede-credenciada-title-toggle {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    .rede-credenciada-columns-wrapper {
        flex-direction: column; /* Empilhar colunas no mobile */
        gap: 20px;
        align-items: center;
    }

    .outros-municipios-title {
        font-size: 1.3em;
        margin-bottom: 15px;
    }

    .municipios-list-rio, .municipios-list-outros {
        max-width: 90%;
    }

    .municipio-card-static {
        padding: 10px 15px;
    }

    .municipio-card-static h3 {
        font-size: 1.1em;
    }

    .municipio-card-static p {
        font-size: 0.9em;
    }
}

/* Media Queries para as outras seções */

/* Estilos para a Seção Orientações e Descontos */
.orientacoes-descontos-section {
    background-color: var(--onix-white);
    padding: 40px 0;
    text-align: center;
}

.orientacoes-atendimento-container {
    background-color: var(--onix-orange); /* Fundo laranja */
    color: var(--onix-white); /* Texto branco */
    padding: 40px 0 0 0; /* Padding inferior 0 para encostar na imagem */
}

.orientacoes-atendimento-content {
    display: flex;
    gap: 30px; /* Espaço entre as duas colunas */
    justify-content: center;
    align-items: flex-start; /* Alinhar no topo */
    margin-bottom: 0; /* Remover margem inferior para encostar na imagem */
}

.orientacao-medica, .atendimento-pre-hospitalar {
    flex: 1;
    max-width: 500px; /* Largura máxima para cada coluna */
    text-align: left;
}

.orientacao-medica h2, .atendimento-pre-hospitalar h2 {
    color: var(--onix-white); /* Títulos em branco */
    margin: 0 0 15px 0;
    font-size: 1.8em;
    line-height: 1.2;
    text-align: left;
}

.orientacao-medica p, .atendimento-pre-hospitalar p {
    margin: 0;
    font-size: 1em;
    line-height: 1.5;
    color: var(--onix-white);
    text-align: left;
}

.atendimento-image-container {
    position: relative;
    width: 100%;
    margin-top: 0; /* Encostar na seção superior */
}

.atendimento-image-container img {
    display: block;
    width: 100%;
    height: auto;
}

.atendimento-info-box {
    position: absolute;
    bottom: 20px; /* Distância do fundo da imagem */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro semi-transparente */
    color: var(--onix-white);
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1.1em;
    text-align: center;
    line-height: 1.4;
}

.desconto-medicamentos-container {
    background-color: var(--onix-white); /* Fundo branco */
    padding: 40px 0;
}

.desconto-medicamentos-container h2 {
    color: var(--onix-orange); /* Título em laranja */
    margin-bottom: 20px;
    text-align: center;
}

.desconto-medicamentos-container p {
    margin-bottom: 30px;
    text-align: center;
}

.farmacias-logos {
    display: flex;
    justify-content: center; /* Centralizar logos */
    gap: 30px; /* Espaço entre as logos */
    flex-wrap: wrap; /* Quebrar linha se necessário */
}

.farmacias-logos img {
    max-height: 50px; /* Altura máxima das logos */
    width: auto; /* Manter proporção */
}

/* Media query para mobile da seção Orientações e Descontos */
@media (max-width: 768px) {
    .orientacoes-atendimento-content {
        flex-direction: column; /* Empilhar colunas no mobile */
        gap: 20px;
        align-items: center;
        padding: 0 20px; /* Adicionar padding lateral no mobile */
    }

     .orientacao-medica, .atendimento-pre-hospitalar {
         max-width: 100%;
         text-align: center;
     }

     .orientacao-medica h2, .atendimento-pre-hospitalar h2 {
         text-align: center;
     }

     .orientacao-medica p, .atendimento-pre-hospitalar p {
         text-align: center;
     }

     .atendimento-image-container {
         margin-top: 20px; /* Espaço acima da imagem no mobile */
     }

     .atendimento-info-box {
        bottom: 10px;
        padding: 10px 15px;
        font-size: 1em;
     }

     .desconto-medicamentos-container {
        padding: 30px 0;
     }

     .desconto-medicamentos-container h2 {
        font-size: 1.5em;
     }

     .desconto-medicamentos-container p {
        margin-bottom: 20px;
     }

     .farmacias-logos {
        gap: 20px;
        padding: 0 20px;
     }

     .farmacias-logos img {
        max-height: 40px;
     }
}

/* Media Queries para as outras seções */

/* Estilos para a Seção Benefícios Adicionais */
.beneficios-adicionais-section {
    background-color: var(--onix-orange); /* Fundo laranja */
    color: var(--onix-white); /* Texto branco */
    padding: 40px 0;
}

.beneficios-adicionais-content {
    display: flex;
    gap: 30px; /* Espaço entre as colunas */
    justify-content: center;
    align-items: flex-start; /* Alinhar no topo */
}

.auxilio-funeral, .capitalizacao-seguro {
    flex: 1;
    max-width: 500px; /* Largura máxima para cada coluna */
}

.auxilio-funeral h2, .capitalizacao-seguro h2 {
     color: var(--onix-white); /* Títulos em branco */
     margin: 0 0 15px 0;
     font-size: 1.8em;
     line-height: 1.2;
     text-align: left;
}

.auxilio-funeral h3 {
    color: var(--onix-white); /* Subtítulo em branco */
    margin: 20px 0 10px 0;
    font-size: 1.2em;
    text-align: left;
}

.auxilio-funeral p, .capitalizacao-seguro p {
    margin: 0;
    font-size: 1em;
    line-height: 1.5;
    color: var(--onix-white);
    text-align: left;
}

.auxilio-funeral ul {
    list-style: disc inside; /* Bolinhas para a lista */
    padding-left: 20px;
    margin: 10px 0 0 0;
}

.auxilio-funeral li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.capitalizacao {
     margin-bottom: 30px; /* Espaço entre Capitalização e Seguro */
}

/* Media query para mobile da seção Benefícios Adicionais */
@media (max-width: 768px) {
    .beneficios-adicionais-content {
        flex-direction: column; /* Empilhar colunas no mobile */
        gap: 30px;
        align-items: center;
        padding: 0 20px; /* Adicionar padding lateral */
    }

     .auxilio-funeral, .capitalizacao-seguro {
         max-width: 100%;
         text-align: center;
     }

     .auxilio-funeral h2, .capitalizacao-seguro h2, .auxilio-funeral h3 {
         text-align: center;
     }

     .auxilio-funeral p, .capitalizacao-seguro p, .auxilio-funeral li {
         text-align: center;
     }

     .auxilio-funeral ul {
         padding-left: 0;
         list-style-position: inside;
     }

     .capitalizacao {
         margin-bottom: 20px;
     }
}

/* Media Queries para as outras seções */

/* Estilos para a Seção Final CTA (agora um card de imagem) */
.final-cta-section {
    background-color: var(--onix-light-gray); /* Fundo claro para a seção */
    padding: 40px 0; /* Espaçamento interno */
    display: flex;
    justify-content: center;
    align-items: center;
}

.final-cta-content-card {
    /* Estilos para o contêiner do card de imagem */
    max-width: 700px; /* Largura máxima do card, ajustar conforme necessário */
    border-radius: 15px; /* Cantos arredondados (borda radial) */
    overflow: hidden; /* Esconder partes da imagem que ultrapassem a borda arredondada */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra para destacar o card */
    margin: 0 auto; /* Centralizar o card */
}

.final-cta-content-card img {
    display: block; /* Remover espaço extra abaixo da imagem */
    width: 100%; /* Imagem ocupa a largura total do contêiner */
    height: auto; /* Manter a proporção da imagem */
}

/* Media query para mobile da seção Final CTA */
@media (max-width: 768px) {
    .final-cta-section {
        padding: 30px 0; /* Ajustar padding no mobile */
    }

     .final-cta-content-card {
         max-width: 90%; /* Ajustar largura máxima para mobile */
         border-radius: 10px; /* Ajustar arredondamento no mobile */
     }
}

/* Media Queries para as outras seções */

/* Estilos para o Rodapé (Footer) */
.site-footer {
    background-color: var(--onix-dark-gray); /* Fundo cinza escuro */
    color: var(--onix-white); /* Texto branco */
    padding: 30px 0 15px 0; /* Espaçamento superior e inferior */
    font-size: 0.9em;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Espaço entre logo e info */
    align-items: center;
    margin-bottom: 20px;
}

.footer-left-column {
    display: flex;
    flex-direction: column; /* Empilha logo e info */
    align-items: flex-start; /* Alinha itens à esquerda */
}

.footer-cnpj-policy {
    margin-top: 10px; /* Espaço entre a logo e o CNPJ/Política */
    text-align: left;
}

.footer-cnpj-policy p {
    margin: 3px 0; /* Espaço menor entre CNPJ e Política */
    font-size: 0.9em;
    color: var(--onix-white);
}

.footer-cnpj-policy a {
    color: var(--onix-white);
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

.footer-cnpj-policy a:hover {
    text-decoration: underline;
}

.footer-logo img {
    height: 50px; /* Altura da logo no rodapé */
}

.footer-info {
    text-align: left; /* Alinha texto à esquerda */
}

.footer-info p {
    margin: 5px 0;
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--onix-white);
    text-align: left;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.8em;
    opacity: 0.8; /* Texto de copyright um pouco menos proeminente */
}

/* Estilos para a Modal de Política de Privacidade e Cookies */
.privacy-modal {
    display: none; /* Escondido por padrão */
    position: fixed; /* Posição fixa na tela */
    bottom: 0; /* Alinhar na parte inferior */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fundo escuro semi-transparente */
    color: var(--onix-white);
    padding: 15px 0; /* Espaçamento interno */
    z-index: 1000; /* Garantir que fique acima de outros elementos */
    justify-content: center; /* Centralizar conteúdo horizontalmente */
    align-items: center; /* Centralizar conteúdo verticalmente */
}

.privacy-modal-content {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre o texto e o botão */
    max-width: 1000px; /* Largura máxima do conteúdo da modal */
    padding: 0 20px; /* Padding lateral */
}

.privacy-modal p {
    margin: 0;
    font-size: 0.9em;
    text-align: left;
    flex-grow: 1; /* Texto ocupa o máximo de espaço possível */
}

.privacy-modal a {
    color: var(--onix-orange); /* Link laranja */
    text-decoration: underline;
}

.privacy-modal .cta-button {
    /* Reutilizando estilos do botão CTA, mas ajustando */
    background-color: var(--onix-orange);
    color: white;
    padding: 8px 15px; /* Padding menor */
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    border: none;
    cursor: pointer;
    flex-shrink: 0; /* Não diminuir o botão */
}

.privacy-modal .cta-button:hover {
    background-color: #E65C00;
}

/* Media query para mobile do Rodapé e Modal */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Empilhar logo e info */
        gap: 15px;
    }

    .footer-info {
        text-align: center; /* Centralizar no mobile */
    }

    .footer-left-column {
        align-items: center; /* Centraliza itens no mobile */
    }

    .footer-cnpj-policy {
        text-align: center; /* Centraliza no mobile */
    }

    .footer-cnpj-policy p {
        text-align: center;
    }

    .starcorp-info {
        text-align: center; /* Centralizar no mobile */
        padding-top: 15px;
        margin-top: 15px;
    }
}

/* Media Queries para as outras seções */

/* Estilos para o Botão Flutuante do WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #FFFFFF;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-float img {
    width: 35px; /* Ajuste o tamanho do ícone conforme necessário */
    height: 35px; /* Ajuste o tamanho do ícone conforme necessário */
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }

    .whatsapp-float img {
        width: 30px;
        height: 30px;
    }
}

/* Media Queries para as outras seções */

/* Estilos para a Seção CTA Pulsante */
.pulsating-cta-section {
    position: relative;
    padding: 60px 0;
    background-color: var(--onix-orange); /* Cor base para o fundo */
    text-align: center;
    overflow: hidden; /* Esconder o pseudo-elemento que ultrapassa */
}

.pulsating-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%; /* Tamanho inicial maior */
    height: 150%;
    background-color: rgba(255, 255, 255, 0.1); /* Fundo semi-transparente */
    border-radius: 50%; /* Formato circular */
    transform: translate(-50%, -50%);
    animation: pulse 3s infinite ease-in-out; /* Animação de pulsação */
    z-index: 1; /* Ficar atrás do conteúdo */
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8); /* Começa menor */
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2); /* Expande */
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8); /* Retorna ao tamanho original */
        opacity: 0.6;
    }
}

.pulsating-cta-section .container.cta-content {
    position: relative;
    z-index: 2; /* Ficar acima do fundo pulsante */
}

.pulsating-cta-section h2 {
    color: var(--onix-white); /* Título em branco */
    margin-bottom: 30px;
    font-size: 2.2em;
}

/* Estilos para o botão Contrate Agora! */
.pulsating-cta-section .cta-button {
    /* Reutilizando estilos base do botão CTA */
    margin-top: 0;
    background-color: var(--onix-white); /* Fundo branco */
    color: var(--onix-orange); /* Texto laranja */
    border: 2px solid var(--onix-white); /* Borda branca */
    font-weight: bold;
    font-size: 1.3em;
}

.pulsating-cta-section .cta-button:hover {
    background-color: var(--onix-light-gray); /* Fundo levemente cinza no hover */
    color: var(--onix-orange); /* Texto laranja */
    border-color: var(--onix-light-gray); /* Borda levemente cinza */
}

/* Estilos para a Modal de Cadastro */
.cadastro-modal {
    display: none; /* Escondida por padrão */
    position: fixed; /* Posição fixa */
    z-index: 1001; /* Acima de outros elementos, incluindo a modal de privacidade */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Adicionar scroll se necessário */
    background-color: rgba(0, 0, 0, 0.6); /* Fundo semi-transparente escuro */
    justify-content: center; /* Centralizar conteúdo */
    align-items: center; /* Centralizar conteúdo */
}

.cadastro-modal .modal-content {
    background-color: var(--onix-white);
    margin: 15% auto; /* 15% do topo e centralizado */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 500px; /* Largura máxima da modal */
    position: relative;
    width: 90%; /* Ocupar 90% da largura em telas menores */
}

.cadastro-modal .close-button {
    color: var(--onix-gray);
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

.cadastro-modal .close-button:hover, .cadastro-modal .close-button:focus {
    color: var(--onix-orange);
    text-decoration: none;
}

.cadastro-modal h3 {
    color: var(--onix-orange);
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
}

.cadastro-modal p {
    text-align: center;
    margin-bottom: 20px;
}

.cadastro-modal .form-group {
    margin-bottom: 15px;
    text-align: left;
}

.cadastro-modal .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--onix-gray);
}

.cadastro-modal .form-group input[type="text"], .cadastro-modal .form-group input[type="number"], .cadastro-modal .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Incluir padding e border no cálculo da largura */
}

.cadastro-modal .cta-button {
    width: 100%;
    text-align: center;
}

.form-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-message.loading {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Media Query para ajustar modal no mobile */
@media (max-width: 768px) {
    .cadastro-modal .modal-content {
        margin: 10% auto; /* Ajustar margem superior no mobile */
        padding: 20px;
        width: 95%;
    }

     .pulsating-cta-section {
         padding: 40px 0;
     }

     .pulsating-cta-section h2 {
         font-size: 1.8em;
     }

     .pulsating-cta-section .cta-button {
         font-size: 1.1em;
     }
}

/* Media Queries para as outras seções */

/* Estilos para a Seção Starcorp no Rodapé */
.starcorp-info {
    margin-top: 20px; /* Espaço acima das informações da Starcorp */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Linha separadora sutil */
    padding-top: 20px; /* Espaço acima do conteúdo */
    text-align: left; /* Alinhar texto à esquerda (no desktop) */
}

.starcorp-info h3 {
    color: var(--onix-orange); /* Título em laranja */
    margin: 0 0 10px 0;
    font-size: 1.1em;
    text-align: left; /* Alinhar título à esquerda */
}

.starcorp-info p {
    margin: 5px 0;
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--onix-white);
    text-align: left; /* Alinhar parágrafos à esquerda */
}

.starcorp-info a {
    color: var(--onix-white);
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

.starcorp-info a:hover {
    text-decoration: underline;
}

/* Media query para mobile */
@media (max-width: 768px) {
    .starcorp-info {
        text-align: center; /* Centralizar no mobile */
        padding-top: 15px;
        margin-top: 15px;
    }

    .starcorp-info h3, .starcorp-info p {
        text-align: center; /* Centralizar texto no mobile */
    }

    .starcorp-info h3 {
        font-size: 1em;
    }
}

/* Media Queries para as outras seções */

/* Estilos para a Seção Indique e Ganhe */
.indique-ganhe-section {
    background-color: var(--onix-light-gray); /* Fundo levemente cinza */
    padding: 40px 0;
    text-align: center; /* Centraliza o conteúdo */
}

.indique-ganhe-section h2 {
    color: #000000; /* Título em preto */
    margin-bottom: 30px;
}

.indique-ganhe-section img {
    max-width: 100%; /* Garante que a imagem não ultrapasse a largura do contêiner */
    height: auto; /* Mantém a proporção da imagem */
    display: block; /* Para remover qualquer espaço extra abaixo da imagem e permitir margin: auto */
    margin: 0 auto 30px auto; /* Centraliza a imagem e adiciona margem inferior, ajustável conforme necessário */
    border-radius: 8px; /* Opcional: cantos levemente arredondados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Opcional: sombra suave */
}

.indique-ganhe-section .cta-button {
    /* Reutilizando estilos base do botão CTA */
    margin-top: 0;
    /* A cor será definida pelos estilos base do cta-button */
    /* Se precisar de cor específica, pode sobrescrever aqui */
}

/* Estilos para a seção de planos */
.planos-info {
    margin-top: 40px;
    text-align: left;
}

.planos-info h3 {
    color: var(--onix-black);
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8em;
}

.planos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.plano-card {
    background-color: var(--onix-white);
    border: 2px solid var(--onix-black);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plano-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.plano-card h4 {
    color: var(--onix-orange);
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.2em;
    border-bottom: 2px solid var(--onix-orange);
    padding-bottom: 10px;
}

.plano-details p {
    text-align: left;
    margin-bottom: 8px;
    font-size: 0.9em;
    line-height: 1.4;
}

.plano-details strong {
    color: var(--onix-black);
    font-weight: 600;
}

/* Estilos para a seção de benefícios slider */
.beneficios-section {
    background-color: var(--onix-light-gray);
    padding: 50px 0;
    text-align: center;
}

.beneficios-section h2 {
    color: var(--onix-black);
    margin-bottom: 40px;
    font-size: 2.2em;
}

.beneficios-slider {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    margin-bottom: 30px;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 400px;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 15px;
    background-color: #f8f9fa;
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: var(--onix-black);
    transform: scale(1.2);
}

.dot:hover {
    background-color: var(--onix-orange);
    transform: scale(1.1);
}

/* Media query para mobile */
@media (max-width: 768px) {
    .indique-ganhe-section {
        padding: 30px 0;
    }

    .indique-ganhe-section h2 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    .indique-ganhe-section img {
        margin-bottom: 20px;
    }
    
    /* Estilos responsivos para a seção de planos */
    .planos-info {
        margin-top: 30px;
    }
    
    .planos-info h3 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }
    
    .planos-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .plano-card {
        padding: 15px;
    }
    
    .plano-card h4 {
        font-size: 1.1em;
    }
    
    .plano-details p {
        font-size: 0.85em;
    }
    
    /* Estilos responsivos para o slider de benefícios */
    .beneficios-section {
        padding: 30px 0;
    }
    
    .beneficios-section h2 {
        font-size: 1.8em;
        margin-bottom: 25px;
    }
    
    .slider-container {
        height: 200px;
    }
    
    .slider-dots {
        bottom: 15px;
        gap: 8px;
    }
    
    .beneficios-slider {
        margin-bottom: 30px;
    }
    
    .slide img {
        object-fit: contain;
        background-color: #f8f9fa;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
}

/* Media Queries para as outras seções */

/* Estilos para o texto destacado com animação */
.highlight-text {
    color: #FFFF00; /* Amarelo brilhante ou outra cor de destaque */
    font-weight: bold;
    /* Adicionar animação */
    animation: pulse-highlight 2s infinite ease-in-out;
}

@keyframes pulse-highlight {
    0% {
        opacity: 1;
        transform: scale(1); /* Tamanho normal */
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1); /* Aumenta ligeiramente o tamanho */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Retorna ao tamanho normal */
    }
}

/* Media Query para mobile */
@media (max-width: 768px) {
    .hero-background {
        background-image: url('../images/IMG_01_MOBILE.png');
    }
}