/* Variáveis de Cores (para fácil modificação) */
:root {
    --color-primary-blue: #4682B4; /* Azul vibrante */
    --color-light-blue: #87CEEB; /* Azul mais claro */
    --color-yellow: #FFD700; /* Amarelo vibrante */
    --color-red: #FF4D4F; /* Vermelho vibrante */
    --color-green: #7FFF00; /* Verde vibrante */
    --color-dark-text: #333333;
    --color-light-text: #666666;
    --color-white: #FFFFFF;
    --color-off-white: #F0F8FF; /* Azul bem clarinho para fundo de imagem */
    --color-gray: #D3D3D3;
    --color-table-header-bg: #ADD8E6; /* Azul claro para cabeçalho da tabela */
    --color-table-border: #BCD4E6; /* Um azul mais suave para bordas */
    --color-primary-blue-rgb: 70, 130, 180; /* Versão RGB do azul principal para opacidade */
}

/* Reset Básico e Fontes */
.kids-page-content * {
    box-sizing: border-box;
}

/* Base para o conteúdo Kids: Aceitamos 1rem = 10px do tema.
   Todos os valores rem foram ajustados para essa base. */
.kids-page-content {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--color-dark-text);
    background-color: var(--color-white);
}

.kids-page-content .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Ajustar tamanhos para todos os cabeçalhos (1rem = 10px) */
.kids-page-content h1,
.kids-page-content h2,
.kids-page-content h3,
.kids-page-content h4,
.kids-page-content h5,
.kids-page-content h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
}
.kids-page-content h1 {
    margin-bottom: 2.5rem; /* ~25px */
    font-size: 6rem; /* Equivalente a 60px */
}
.kids-page-content h2 {
    margin-bottom: 2rem; /* ~20px */
    font-size: 5.1rem; /* Equivalente a 51px */
}
.kids-page-content h3 {
    margin-bottom: 1.8rem; /* ~18px */
    font-size: 3.8rem; /* Equivalente a 38px */
}
.kids-page-content h4 {
    margin-bottom: 1.5rem; /* ~15px */
    font-size: 2.8rem; /* Equivalente a 28px */
}
.kids-page-content h5 {
    margin-bottom: 1.5rem;
    font-size: 2.5rem; /* Equivalente a 25px */
}
.kids-page-content h6 {
    margin-bottom: 1.5rem;
    font-size: 2.2rem; /* Equivalente a 22px */
}

/* Ajustar tamanho para todos os parágrafos (1rem = 10px) */
.kids-page-content p {
    margin-bottom: 2rem; /* ~20px */
    font-size: 1.8rem; /* Equivalente a 18px */
    line-height: 1.8;
    color: var(--color-dark-text);
}

.kids-page-content .responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Botões */
.kids-page-content .read-more-button {
    background-color: var(--color-yellow);
    color: var(--color-dark-text);
    border: none;
    padding: 1.5rem 3rem; /* ~15px 30px */
    font-size: 1.7rem; /* Equivalente a 17px */
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.kids-page-content .read-more-button:hover {
    background-color: #e0bb00;
}

/* Seção 1: Hero com Cards de Informação */
.kids-page-content .hero-section {
    position: relative;
    padding-top: 0; /* Padrão desktop */
    padding-bottom: 8rem; /* ~80px */
    background-color: var(--color-off-white);
}

/* *** NOVO: Ajuste de padding-top para o hero-section em telas intermediárias *** */
@media (min-width: 769px) and (max-width: 1199px) {
    .kids-page-content .hero-section {
        padding-top: 15rem; /* Ajuste este valor (150px) conforme a altura do seu cabeçalho */
        /* Remova ou ajuste o margin-top do .info-blocks-wrapper se for o caso */
    }
}
/* *** FIM DO NOVO BLOCO *** */


.kids-page-content .hero-image-container {
    width: 100%;
    overflow: hidden;
    height: 40rem; /* ~400px */
}

.kids-page-content .hero-children-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom top;
}

.kids-page-content .info-blocks-wrapper {
    position: absolute; /* Posição absoluta para desktop */
    bottom: -8rem; /* ~-80px */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* ~20px */
    justify-content: center;
    padding: 0 2rem; /* ~0 20px */
    max-width: 1200px;
    z-index: 5; /* Garantir que fique acima da hero image, mas abaixo do header */
}

.kids-page-content .info-block {
    flex: 1 1 calc(25% - 20px); /* calc() com px para evitar problemas com rem */
    min-width: 25rem; /* ~250px */
    padding: 3rem; /* ~30px */
    border-radius: 8px;
    text-align: center;
    color: var(--color-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kids-page-content .info-block.blue { background-color: var(--color-primary-blue); }
.kids-page-content .info-block.green { background-color: var(--color-green); }
.kids-page-content .info-block.red { background-color: var(--color-red); }
.kids-page-content .info-block.yellow { background-color: var(--color-yellow); color: var(--color-dark-text); }

/* Aumentar textos dos ícones */
.kids-page-content .info-block h3 {
    margin-top: 1.5rem; /* ~15px */
    margin-bottom: 1rem; /* ~10px */
    font-size: 3.5rem; /* Equivalente a 35px */
    line-height: 1.3;
}

.kids-page-content .info-block p {
    font-size: 1.9rem; /* Equivalente a 19px */
    line-height: 1.6;
    margin-bottom: 0;
}

.kids-page-content .icon-circle {
    width: 7.5rem; /* ~75px */
    height: 7.5rem; /* ~75px */
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1.5rem auto; /* ~15px */
}

.kids-page-content .icon {
    font-size: 4.8rem; /* Equivalente a 48px */
    line-height: 1;
}

/* Ajuste para mobile na seção 1 */
@media (max-width: 768px) {
    .kids-page-content .hero-image-container {
        height: 25rem; /* ~250px */
    }
    .kids-page-content .info-blocks-wrapper {
        position: static; /* ESSENCIAL: Remove posição absoluta para mobile */
        transform: none; /* Remove transform */
        margin-top: 2rem; /* Ajustar conforme necessário para espaçamento com o header */
        padding-top: 2rem; /* ~20px */
        border-top: 1px solid var(--color-gray);
        z-index: auto; /* Reset z-index */
    }
    .kids-page-content .info-block {
        flex: 1 1 calc(50% - 20px);
        min-width: unset;
        padding: 2.5rem; /* ~25px */
    }
    .kids-page-content .info-block h3 {
        font-size: 3.2rem; /* Equivalente a 32px */
    }
    .kids-page-content .info-block p {
        font-size: 1.7rem; /* Equivalente a 17px */
    }
    .kids-page-content .icon-circle {
        width: 6.5rem; /* ~65px */
        height: 6.5rem; /* ~65px */
    }
    .kids-page-content .icon {
        font-size: 4rem; /* Equivalente a 40px */
    }

    /* Ajuste de espaçamento para a seção abaixo dos boxes */
    .kids-page-content .education-section {
        padding-top: 8rem; /* Aumentar o padding superior para empurrar o conteúdo para baixo */
    }
}

@media (max-width: 480px) {
    .kids-page-content .info-block {
        flex: 1 1 100%;
        padding: 2rem; /* ~20px */
    }
    .kids-page-content .info-block h3 {
        font-size: 2.8rem; /* Equivalente a 28px */
    }
    .kids-page-content .info-block p {
        font-size: 1.6rem; /* Equivalente a 16px */
    }
    .kids-page-content .icon-circle {
        width: 5.5rem; /* ~55px */
        height: 5.5rem; /* ~55px */
    }
    .kids-page-content .icon {
        font-size: 3.5rem; /* Equivalente a 35px */
    }
    .kids-page-content .education-section {
        padding-top: 10rem; /* Ainda mais padding para telas muito pequenas, se necessário */
    }
}


/* Seção 2: Educação e Treinamento */
.kids-page-content .education-section {
    background-color: var(--color-white);
    padding: 12rem 0 6rem 0; /* ~120px 0 60px 0 */
}

.kids-page-content .education-grid {
    display: grid;
    gap: 2rem; /* ~20px */
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); /* ~280px */
    grid-template-rows: auto;
}

/* Definições de grid específicas para desktop */
@media (min-width: 992px) {
    .kids-page-content .education-grid {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .kids-page-content .training-block {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .kids-page-content .education-grid > div:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .kids-page-content .education-grid > div:nth-child(3) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
    .kids-page-content .education-grid > div:nth-child(4) {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }
    .kids-page-content .education-grid > div:nth-child(5) {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
    .kids-page-content .education-grid > div:nth-child(6) {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .kids-page-content .education-grid > div:nth-child(7) {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
}

.kids-page-content .grid-item {
    padding: 2.5rem; /* ~25px */
    border-radius: 8px;
    min-height: 20rem; /* ~200px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.kids-page-content .grid-item.text-centered-block {
    text-align: center;
    align-items: center;
}

.kids-page-content .yellow-bg { background-color: var(--color-yellow); color: var(--color-dark-text); }
.kids-page-content .red-bg { background-color: var(--color-red); color: var(--color-white); }
.kids-page-content .blue-bg { background-color: var(--color-light-blue); color: var(--color-white); }

.kids-page-content .training-block h2 {
    font-size: 4.4rem; /* Equivalente a 44px */
    line-height: 1.2;
}

.kids-page-content .text-centered-block h3 {
    font-size: 3.5rem; /* Equivalente a 35px */
    line-height: 1.3;
}

.kids-page-content .info-text-block h4 {
    font-size: 2.5rem; /* Equivalente a 25px */
    line-height: 1.4;
}

.kids-page-content .image-block {
    padding: 0;
    background-color: var(--color-gray);
    overflow: hidden;
    min-height: 15rem; /* ~150px */
}
.kids-page-content .image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nova Seção: Tabela de Cursos */
.kids-page-content .courses-section {
    background-color: var(--color-off-white);
    padding: 6rem 0; /* ~60px */
    text-align: center;
}

.kids-page-content .courses-section h2 {
    margin-bottom: 4rem; /* ~40px */
    font-size: 5.1rem; /* Equivalente a 51px */
    color: var(--color-dark-text);
}

.kids-page-content .courses-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kids-page-content .courses-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    min-width: 60rem; /* ~600px */
    max-width: 90rem; /* ~900px */
}

.kids-page-content .courses-table th,
.kids-page-content .courses-table td {
    padding: 1.8rem; /* ~18px */
    border: 1px solid var(--color-table-border);
    text-align: left;
    font-size: 1.7rem; /* Equivalente a 17px */
    line-height: 1.6;
}

.kids-page-content .courses-table thead th {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.9rem; /* Equivalente a 19px */
}

.kids-page-content .courses-table tbody tr:nth-child(even) {
    background-color: rgba(var(--color-primary-blue-rgb), 0.1);
}

.kids-page-content .courses-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

.kids-page-content .courses-table tbody tr:hover {
    background-color: var(--color-light-blue);
    color: var(--color-white);
    cursor: default;
}
.kids-page-content .courses-table tbody tr:hover td {
    color: var(--color-white);
}


/* Seção: FAQ Moderna */
.kids-page-content .faq-section {
    background-color: var(--color-yellow);
    padding: 6rem 0; /* ~60px */
    color: var(--color-dark-text);
}

.kids-page-content .faq-container {
    max-width: 80rem; /* ~800px */
}

.kids-page-content .faq-section h2 {
    text-align: center;
    margin-bottom: 4rem; /* ~40px */
    font-size: 5.1rem; /* Equivalente a 51px */
    color: var(--color-dark-text);
}

.kids-page-content .faq-item {
    margin-bottom: 1.5rem; /* ~15px */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ajustar texto da pergunta do FAQ */
.kids-page-content .faq-question {
    background-color: transparent;
    color: var(--color-dark-text) !important; /* FORÇAR a cor do texto da pergunta */
    padding: 2.5rem 0; /* ~25px */
    width: 100%;
    text-align: left;
    border: none;
    font-size: 2.2rem; /* Equivalente a 22px */
    font-weight: 700;
    cursor: pointer;
    display: flex; /* ESSENCIAL para alinhar o texto e o + */
    justify-content: space-between; /* Texto à esquerda, + à direita */
    align-items: center; /* Alinha verticalmente */
    transition: color 0.3s ease;
    line-height: 1.4;
    position: relative; /* Garante que os pseudo-elementos fiquem dentro */
}

.kids-page-content .faq-question:hover {
    color: var(--color-primary-blue);
}

/* Ajustes para o símbolo '+' do FAQ */
.kids-page-content .faq-toggle {
    min-width: 30px !important; /* Usar PX e !important para forçar o tamanho em todas as telas */
    min-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
    position: relative !important; /* FORÇAR: Crucial para os pseudo-elementos */
    flex-shrink: 0 !important; /* Impede que ele encolha a todo custo */
    margin-left: 15px !important; /* Garante espaçamento à esquerda */
    box-sizing: border-box !important; /* Garante que padding/border não comprometam o tamanho */
    z-index: 10 !important; /* Aumentar z-index para garantir que não esteja atrás de nada */
    display: inline-block !important; /* Forçar display: inline-block */
    overflow: visible !important; /* Garante que nada esteja escondido dentro dele */
}

.kids-page-content .faq-toggle::before,
.kids-page-content .faq-toggle::after {
    content: '' !important; /* Força o conteúdo */
    position: absolute !important; /* Força o posicionamento */
    background-color: var(--color-dark-text) !important; /* Força a cor */
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    box-sizing: border-box !important;
    z-index: 11 !important; /* Para garantir que estejam acima do próprio toggle */
    display: block !important; /* Forçar display: block para os pseudo-elementos */
}

.kids-page-content .faq-toggle::before {
    width: 100% !important; /* A barra horizontal deve ocupar 100% da largura do toggle */
    height: 4px !important; /* Espessura da barra */
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
}

.kids-page-content .faq-toggle::after {
    width: 4px !important; /* Espessura da barra */
    height: 100% !important; /* A barra vertical deve ocupar 100% da altura do toggle */
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.kids-page-content .faq-question.active .faq-toggle::after {
    transform: translateX(-50%) rotate(90deg) !important;
    opacity: 0 !important; /* Oculta a linha vertical quando a FAQ está ativa (para mostrar apenas o traço) */
}

.kids-page-content .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0 1.5rem; /* ~15px */
    border-radius: 5px;
    margin-bottom: 1rem; /* ~10px */
}

/* Ajustar texto da resposta do FAQ */
.kids-page-content .faq-answer p {
    padding: 1.5rem 0; /* ~15px */
    font-size: 1.7rem; /* Equivalente a 17px */
    line-height: 1.7;
    color: var(--color-dark-text);
}


/* Responsividade Geral */
@media (max-width: 768px) {
    .kids-page-content .container {
        padding: 1.5rem;
    }
    .kids-page-content h1 { font-size: 5rem; } /* ~50px */
    .kids-page-content h2 { font-size: 4rem; } /* ~40px */
    .kids-page-content h3 { font-size: 3.2rem; } /* ~32px */
    .kids-page-content h4 { font-size: 2.5rem; } /* ~25px */
    .kids-page-content p { font-size: 1.6rem; margin-bottom: 1.5rem; } /* ~16px */
    .kids-page-content .read-more-button { font-size: 1.6rem; padding: 1rem 2rem;} /* ~16px */
    
    /* Icon Section Mobile */
    .kids-page-content .info-block h3 { font-size: 2.8rem; } /* ~28px */
    .kids-page-content .info-block p { font-size: 1.6rem; } /* ~16px */
    .kids-page-content .icon-circle { width: 6.5rem; height: 6.5rem; } /* ~65px */
    .kids-page-content .icon { font-size: 4rem; } /* ~40px */

    /* Table Section Mobile */
    .kids-page-content .courses-table th,
    .kids-page-content .courses-table td {
        padding: 1.2rem;
        font-size: 1.6rem; /* ~16px */
    }
    .kids-page-content .courses-table thead th {
        font-size: 1.7rem; /* ~17px */
    }

    /* FAQ Section Mobile */
    .kids-page-content .faq-question {
        font-size: 1.9rem; /* ~19px */
        padding: 2rem 0;
    }
    .kids-page-content .faq-toggle {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        min-height: 25px !important;
        margin-left: 10px !important;
    }
    .kids-page-content .faq-toggle::before,
    .kids-page-content .faq-toggle::after {
        height: 3px !important;
        width: 100% !important; /* para ::before */
        width: 3px !important; /* para ::after */
    }
    .kids-page-content .faq-answer p {
        font-size: 1.6rem; /* ~16px */
    }
}

@media (max-width: 480px) {
    .kids-page-content h1 { font-size: 4rem; } /* ~40px */
    .kids-page-content h2 { font-size: 3.2rem; } /* ~32px */
    .kids-page-content h3 { font-size: 2.5rem; } /* ~25px */
    .kids-page-content h4 { font-size: 2.2rem; } /* ~22px */
    .kids-page-content p { font-size: 1.5rem; margin-bottom: 1rem; } /* ~15px */
    .kids-page-content .read-more-button { font-size: 1.4rem; padding: 0.8rem 1.5rem;} /* ~14px */
    
    /* Icon Section Mobile */
    .kids-page-content .info-block h3 { font-size: 2.4rem; } /* ~24px */
    .kids-page-content .info-block p { font-size: 1.5rem; } /* ~15px */
    .kids-page-content .icon-circle { width: 5rem; height: 5rem; } /* ~50px */
    .kids-page-content .icon { font-size: 3.2rem; } /* ~32px */

    /* Table Section Mobile */
    .kids-page-content .courses-table th,
    .kids-page-content .courses-table td {
        padding: 1rem;
        font-size: 1.5rem; /* ~15px */
    }
    .kids-page-content .courses-table thead th {
        font-size: 1.6rem; /* ~16px */
    }

    /* FAQ Section Mobile */
    .kids-page-content .faq-question {
        font-size: 1.7rem; /* ~17px */
        padding: 1.8rem 0;
    }
    .kids-page-content .faq-toggle {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        margin-left: 8px !important;
    }
    .kids-page-content .faq-toggle::before,
    .kids-page-content .faq-toggle::after {
        height: 2px !important;
        width: 100% !important; /* para ::before */
        width: 2px !important; /* para ::after */
    }
    .kids-page-content .faq-answer p {
        font-size: 1.5rem; /* ~15px */
    }
}