/* Estilos para a página Como Funciona */

/* Hero Section - Como Funciona */
.hero-como-funciona {
    background-color: #72C6E7; /* Azul claro de fundo */
    padding: 60px 0;
    color: #fff; /* Texto branco para contraste */
    overflow: hidden; /* Para conter a imagem que pode vazar */
}

.hero-como-funciona .container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-cf-image-container {
    flex-basis: 50%; /* Ajuste conforme necessário */
    position: relative; /* Para o texto sobreposto */
}

.hero-cf-image {
    max-width: 100%;
    border-radius: 10px;
    display: block;
}

.hero-cf-overlay-text {
    position: absolute;
    bottom: 20px; /* Ajuste a posição */
    left: 20px;  /* Ajuste a posição */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente para legibilidade */
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    max-width: calc(100% - 40px); /* Para não transbordar da imagem */
}

.hero-cf-overlay-text p {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.5;
}

.hero-cf-overlay-text strong {
    font-weight: bold; /* Já é bold, mas para garantir */
}

.hero-cf-text-content {
    flex-basis: 50%; /* Ajuste conforme necessário */
    padding-left: 30px; /* Espaço para não colar na imagem */
}

.hero-cf-text-content .breadcrumb-cf {
    font-size: 0.9em;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #f0f8ff; /* Um branco levemente azulado */
    font-weight: 600;
}

.hero-cf-text-content h1 {
    font-size: 2.8em; /* Ajuste conforme necessário */
    color: #fff;
    margin-bottom: 0;
    line-height: 1.3;
}

/* Ajustes para telas menores */
@media (max-width: 992px) {
    .hero-como-funciona .container {
        flex-direction: column;
        text-align: center;
    }
    .hero-cf-text-content {
        padding-left: 0;
        margin-top: 30px;
    }
    .hero-cf-overlay-text {
        position: relative; /* Tira da sobreposição absoluta */
        bottom: auto;
        left: auto;
        margin-top: -50px; /* Puxa para cima da imagem */
        margin-bottom: 20px;
        background-color: transparent; /* Pode precisar de ajuste */
        color: #003366; /* Cor escura se o fundo da seção for claro aqui */
    }
    .hero-cf-overlay-text p {
         color: #003366; /* Ajustar se necessário */
    }
}

/* Etapas do Tratamento Section */
.etapas-tratamento-section {
    padding: 80px 0;
    background-color: #fff; /* Fundo branco */
}

.etapa-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 60px;
}

.etapa-block:last-child {
    margin-bottom: 0;
}

.etapa-text,
.etapa-image {
    flex-basis: 48%; /* Aproximadamente metade, com espaço para o gap */
}

.etapa-text {
    padding-right: 20px; /* Espaçamento para não colar na imagem */
}

.etapa-block.etapa-reverse .etapa-text {
    order: 2; /* Move o texto para a direita */
    padding-right: 0;
    padding-left: 20px;
}

.etapa-block.etapa-reverse .etapa-image {
    order: 1; /* Move a imagem para a esquerda */
}

.etapa-numero {
    font-size: 0.9em;
    color: #007bff; /* Azul da marca */
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.etapa-text h2 {
    font-size: 2.2em;
    color: #007bff; /* Azul da marca, conforme padrão para fundos brancos */
    margin-bottom: 15px;
    line-height: 1.3;
}

.etapa-text p {
    font-size: 1em;
    color: #555;
    line-height: 1.7;
}

.etapa-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Ajustes para telas menores */
@media (max-width: 992px) {
    .etapa-text h2 {
        font-size: 1.8em;
    }
}

@media (max-width: 768px) {
    .etapa-block,
    .etapa-block.etapa-reverse {
        flex-direction: column;
        text-align: center;
    }

    .etapa-block.etapa-reverse .etapa-text,
    .etapa-text {
        order: 2; /* Texto sempre depois da imagem em mobile */
        padding-left: 0;
        padding-right: 0;
        margin-top: 20px;
    }

    .etapa-block.etapa-reverse .etapa-image,
    .etapa-image {
        order: 1; /* Imagem sempre antes do texto em mobile */
        margin: 0 auto; /* Centralizar imagem */
    }

    .etapa-text h2 {
        font-size: 1.6em;
    }

    .hero-cf-text-content h1 {
        font-size: 2.2em;
    }
    .hero-cf-overlay-text {
        margin-top: 20px; /* Ajuste para não sobrepor demais */
        background-color: rgba(0, 86, 179, 0.1); /* Fundo sutil se ainda sobrepõe imagem */
        color: #003366;
    }
}

/* FAQ Section */
.faq-section {
    padding: 80px 0;
    background-color: #f9f9f9; /* Um cinza bem claro para diferenciar um pouco */
}

.faq-section .container {
    max-width: 800px; /* Para centralizar e limitar a largura do FAQ */
    margin: 0 auto;
    text-align: center;
}

.faq-section .breadcrumb-faq {
    font-size: 0.9em;
    color: #007bff;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.faq-section h2 {
    font-size: 2.5em;
    color: #007bff; /* Azul da marca */
    margin-bottom: 15px;
}

.faq-section h2 .highlight-blue {
    color: #0056b3; /* Um azul um pouco mais escuro para o destaque, ou manter #007bff */
}

.faq-section .faq-subtitulo {
    font-size: 1.1em;
    color: #555;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.faq-accordion {
    text-align: left; /* Alinha o texto das perguntas e respostas à esquerda */
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    background-color: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 20px 0;
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    color: #007bff;
}

.faq-question span {
    flex-grow: 1;
    padding-right: 15px; /* Espaço para o ícone */
}

.faq-question .fa-minus {
    display: none; /* Esconde o ícone de menos inicialmente */
}

.faq-item.active .faq-question .fa-minus {
    display: inline-block;
}

.faq-item.active .faq-question .fa-plus {
    display: none;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 20px; /* Adiciona padding quando aberto */
}

.faq-answer p {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
    margin: 0 0 20px 0; /* Adiciona margin bottom para o parágrafo interno */
}

/* Ajustes para telas menores para FAQ */
@media (max-width: 768px) {
    .faq-section h2 {
        font-size: 2em;
    }
    .faq-question {
        font-size: 1.1em;
        padding: 15px 0;
    }
    .faq-answer p {
        font-size: 0.95em;
    }
}


/* Animações Básicas (Exemplo: Fade-in ao rolar) */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}