/* Variáveis CSS para cores e transições comuns */
:root {
    --primary-blue: #2196f3;
    --dark-blue: #1769aa;
    --navy-blue: #1e3c72;
    --light-blue-bg: #6ea7d8;
    --lighter-blue-bg: #33C3B7;
    --light-grey-bg: #69789c;
    --dark-text: #222;
    --shadow-light: rgba(33, 150, 243, 0.08);
    --shadow-medium: rgba(33, 150, 243, 0.18);
    --shadow-subtle: rgba(33, 150, 243, 0.06);
    --transition-speed: 0.22s;
    --transition-cubic: cubic-bezier(.4,2,.6,1);
}

/* Base Styles */
body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--light-grey-bg);
    color: var(--dark-text);
}

h1 {
    color: var(--navy-blue);
    margin-top: 0;
}

code {
    background: #e3e8f0;
    padding: 2px 6px;
    border-radius: 4px;
}

/* General Content Area */
.content {
    max-width: 700px;
    margin: 40px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    padding: 32px 28px;
}

/* CTA Button - Reutilizável */
.cta-btn {
    background: #fff;
    color: var(--primary-blue);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.10);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-btn:hover {
    background: var(--light-blue-bg);
    transform: translateY(-5px) scale(1.04) ;
}

/* Shared Section Styles */
.hero-als,
.servicos-als,
.tour-als,
.beneficios-als,
.publico-als,
.depoimentos-als,
.slogan-als {
    text-align: center;
}

.hero-als,
.cta-als,
.tour-als,
.slogan-als {
    background: var(--light-blue-bg);
}

.beneficios-als,
.depoimentos-als {
    background: #fff;
}

/* Estilos para a seção .publico-als (foco das mudanças) */
.publico-als {
    background: var(--light-blue-bg); /* Mantém o fundo azul suave */
    padding: 60px 20px; /* Aumentei o padding para mais respiro */
}

.servicos-als h2,
.tour-als h2,
.beneficios-als h2,
.publico-als h2, /* Estilo para o título da seção */
.depoimentos-als h2,
.slogan-als h2,
.hero-content h1 {
    color: var(--navy-blue);
    font-size: 2.2rem; /* Um pouco maior para destaque */
    margin-bottom: 40px; /* Mais espaço abaixo do título */
}

.als-blue {
    color: var(--primary-blue);
}

/* Hero Section */
.hero-als {
    background: linear-gradient(120deg, var(--light-blue-bg) 0%, var(--lighter-blue-bg) 100%);
    padding: 64px 0 48px 0;
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 18px;
    font-weight: 700;
}

.hero-sub {
    font-size: 1.25rem;
    color: var(--dark-text);
    margin-bottom: 32px;
}

/* Serviços ALS Section */
.servicos-als {
    padding-top: 250px; /* Mantido, mas parece um valor alto. Se quiser ajustar, pode diminuir. */
    margin-top: 0;
}

.servicos-als h2 {
    margin-bottom: 36px;
}

.servicos-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.servico-card {
    background: var(--light-grey-bg);
    border-radius: 14px;
    box-shadow: 0 2px 8px var(--shadow-light);
    padding: 32px 24px 28px 24px;
    flex: 0 1 calc(20% - 24px);
    transition: transform var(--transition-speed) var(--transition-cubic), box-shadow var(--transition-speed);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    margin-bottom: 30px;
}

.servico-card:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 8px 32px var(--shadow-medium);
    background: linear-gradient(120deg, var(--light-blue-bg) 0%, var(--lighter-blue-bg) 100%);
}

.servico-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
    color: var(--primary-blue);
    transition: color 0.2s;
}

.servico-card:hover .servico-icon {
    color: var(--dark-blue);
}

.servico-card h3 {
    color: var(--dark-blue);
    margin-bottom: 10px;
    font-size: 1.18rem;
}

.servico-card p {
    color: var(--dark-text);
    font-size: 1rem;
}

/* Service Card Footer (Info Link) */
.servico-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.servico-info-link {
    color: var(--dark-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease-in-out;
}

.servico-info-link:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Estilos para a nova seção de serviços detalhada */
.servicos-detalhados {
    max-width: 900px; /* Largura máxima para o conteúdo dos serviços */
    margin: 40px auto; /* Centraliza e adiciona espaço */
    text-align: left; /* Alinha o texto à esquerda */
}

.servico-item-detail {
    background: #fff; /* Fundo branco para cada item de serviço */
    border-radius: 12px; /* Bordas arredondadas */
    box-shadow: 0 4px 12px var(--shadow-light); /* Sombra suave */
    padding: 30px; /* Espaçamento interno */
    margin-bottom: 30px; /* Espaço entre os itens */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Borda sutil */
}

.servico-item-detail h3 {
    color: var(--navy-blue); /* Cor do título do serviço */
    font-size: 1.8rem; /* Tamanho maior para o título */
    margin-bottom: 15px; /* Espaço abaixo do título */
    display: flex; /* Para alinhar o emoji com o título, se desejar */
    align-items: center; /* Centraliza verticalmente */
}

.servico-item-detail h3 .emoji { /* Se for usar emojis no H3 */
    margin-right: 10px; /* Espaço entre o emoji e o texto do título */
}

.servico-item-detail p {
    color: var(--dark-text); /* Cor do texto principal */
    font-size: 1.2rem; /* Tamanho de fonte para o texto */
    line-height: 1.6; /* Espaçamento entre as linhas para melhor leitura */
    margin-bottom: 15px; /* Espaço entre parágrafos */
}

.servico-item-detail strong {
    color: var(--primary-blue); /* Cor para os destaques em negrito */
}

/* Linha horizontal para separar os serviços */
.servicos-detalhados hr {
    border: none;
    border-top: 1px dashed var(--light-grey-bg); /* Linha pontilhada sutil */
    margin: 50px 0; /* Espaçamento ao redor da linha */
}

/* Ajustes para a cor de fundo da seção de serviços, se necessário */
.servico-als {
    background: var(--light-blue-bg); /* Mantém o fundo azul suave */
    padding: 80px 20px; /* Aumentei o padding para mais respiro */
}


/* Tour ALS Section */
.tour-als {
    padding: 56px 0 32px 0;
}
.tour-als h2 {
    margin-bottom: 36px;
}
.tour-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}
.tour-item, .tour { /* Combined .tour-item and .tour as they have identical styles */
    background: var(--light-grey-bg);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow-subtle);
    padding: 28px 24px;
    max-width: 270px;
    min-width: 220px;
    flex: 1 1 220px;
}
.tour-item h3 {
    color: var(--dark-blue);
    margin-bottom: 10px;
}

/* Benefícios ALS Section */
.beneficios-als {
    padding: 56px 0 32px 0;
}

.beneficios-als h2 {
    margin-bottom: 36px;
}

.beneficios-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}

.beneficio {
    background: var(--light-grey-bg);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow-subtle);
    padding: 28px 24px;
    flex: 0 1 calc(20% - 24px);
}

.beneficio h3 {
    color: var(--dark-blue);
    margin-bottom: 10px;
}

.beneficio-banner {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 36px auto;
    max-height: 300px;
}

/* Estilos específicos para .publico-list e .publico-list li (com as melhorias) */
.publico-list {
    list-style: none; /* Remove os marcadores padrão da lista */
    padding: 0;
    margin: 0 auto;
    max-width: 900px; /* Aumentei a largura máxima para acomodar mais colunas */
    display: grid; /* Usa Grid Layout para um controle de colunas moderno */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colunas responsivas */
    gap: 20px; /* Espaçamento entre os itens */
}

.publico-list li {
    font-size: 1.15rem;
    color: var(--dark-text);
    background: #fff; /* Fundo branco para os itens se destacarem no azul */
    border-radius: 12px; /* Bordas mais arredondadas para um look moderno */
    box-shadow: 0 4px 12px var(--shadow-light); /* Sombra mais visível, mas ainda suave */
    padding: 20px 25px; /* Mais padding interno */
    text-align: left; /* Alinhamento do texto à esquerda para melhor legibilidade */
    display: flex; /* Para alinhar o ícone e o texto lado a lado */
    align-items: center; /* Centraliza verticalmente o ícone e o texto */
    border: 1px solid rgba(0, 0, 0, 0.03); /* Borda muito sutil para definir os "cards" */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para hover */
}

.publico-list li:hover {
    transform: translateY(-8px); /* Levanta o item no hover */
    box-shadow: 0 10px 25px var(--shadow-medium); /* Sombra mais pronunciada no hover */
}

.publico-icon {
    font-size: 1.8rem; /* Tamanho maior para os emojis */
    margin-right: 15px; /* Espaçamento entre o emoji e o texto */
    line-height: 1; /* Ajuda no alinhamento vertical do emoji */
}

/* CTA ALS Section */
.cta-als {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    background: var(--primary-blue);
    color: #fff;
    padding: 48px 0 36px 0;
}

.cta-als h2 {
    font-size: 2rem;
    margin-bottom: 18px;
}

/* Depoimentos ALS Section */
.depoimentos-als {
    padding: 56px 0 32px 0;
}

.depoimentos-als h2 {
    margin-bottom: 36px;
}

.depoimentos-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}

.depoimento {
    background: var(--light-grey-bg);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow-subtle);
    padding: 24px 20px;
    max-width: 320px;
    min-width: 220px;
    flex: 1 1 220px;
    font-style: italic;
}

.depoimento span {
    display: block;
    margin-top: 12px;
    color: var(--dark-blue);
    font-style: normal;
    font-weight: 600;
}

/* Slogan ALS Section */
.slogan-als {
    padding: 40px 0 32px 0;
}

.slogan-als h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.slogan-als p {
    font-size: 1.2rem;
    font-weight: 600;
}

/* --- Estilos Específicos para a Página "Sobre" (ALS Web Code) --- */

.about-als-section {
    padding: 60px 20px;
    background: #fff; /* Fundo branco para a seção principal da página Sobre */
    text-align: left; /* Alinhamento padrão do texto */
}

.about-als-container {
    max-width: 900px; /* Largura máxima para o conteúdo da página Sobre */
    margin: 40px auto; /* Centraliza o container */
    background: #fff; /* Garante fundo branco se a section tiver outra cor */
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    padding: 32px 28px;
}

.about-als-title {
    font-family: 'Poppins', sans-serif; /* Usando Poppins para títulos, como no seu brand book */
    color: var(--navy-blue);
    font-size: 2.5rem;
    margin-bottom: 25px;
    text-align: center;
}

.about-als-subtitle {
    font-family: 'Inter', Arial, sans-serif; /* Usando Inter para subtítulos/parágrafos, como no seu brand book */
    font-size: 1.25rem;
    color: var(--dark-text);
    margin-bottom: 32px;
    text-align: center;
}

.about-als-paragraph {
    font-family: 'Inter', Arial, sans-serif; /* Usando Inter para parágrafos */
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--dark-text);
    line-height: 1.6;
}

.about-als-paragraph strong {
    color: var(--primary-blue); /* Destaque em azul primário para o texto em negrito */
}

.about-als-heading-secondary {
    font-family: 'Poppins', sans-serif;
    color: var(--navy-blue);
    font-size: 2rem;
    margin-top: 40px; /* Espaçamento acima do subtítulo */
    margin-bottom: 25px;
    text-align: center;
}

.about-als-hr {
    border: none;
    border-top: 1px solid var(--light-grey-bg);
    margin: 50px auto;
    max-width: 700px; /* Largura da linha horizontal */
}

.about-als-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-top: 40px;
}

.about-als-highlight-card {
    background: var(--light-grey-bg);
    border-radius: 10px;
    padding: 25px;
    flex: 0 1 calc(33% - 25px); /* Três colunas */
    box-shadow: 0 2px 8px var(--shadow-subtle);
    text-align: center;
    min-width: 250px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-als-highlight-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 16px var(--shadow-medium);
}

.about-als-highlight-card h3 {
    font-family: 'Poppins', sans-serif;
    color: var(--dark-blue);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.about-als-highlight-card p {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1rem;
    margin-bottom: 0;
    color: var(--dark-text);
}

/* Responsividade específica para a página Sobre */
@media (max-width: 768px) {
    .about-als-container {
        margin: 20px auto;
        padding: 20px;
    }

    .about-als-title {
        font-size: 2rem;
    }

    .about-als-paragraph,
    .about-als-heading-secondary {
        font-size: 1rem;
    }

    .about-als-highlight-card {
        flex: 0 1 calc(50% - 20px); /* Duas colunas em telas menores */
    }
}


@media (max-width: 480px) {
    .about-als-highlight-card {
        flex: 0 1 100%; /* Uma coluna em telas muito pequenas */
    }
}

/* Ajustes nas variáveis de cor para corresponder ao seu briefing exato */
:root {
    --navy-blue: #1B365D; /* Ajustado para o Azul Profundo exato do briefing */
    --lighter-blue-bg: #33C3B7; /* Verde Água exato do briefing */
    --light-grey-bg: #EEEEEE; /* Cinza Neutro exato do briefing */
    --dark-text: #333333; /* Preto Leve exato do briefing */
    /* Mantenha as outras variáveis como --primary-blue, --dark-blue, --light-blue-bg, etc., conforme seu estilo. */
}

/* Media Queries */
@media (max-width: 900px) {
    /* List Centralization for Mobile (mantida para outras seções, mas ajustada para publico-list) */
    .servicos-list,
    .tour-list,
    .beneficios-list,
    .depoimentos-list {
        flex-direction: column;
        gap: 18px;
        align-items: center;
        justify-content: center;
    }

    /* Service Card Sizing for Mobile (mantida) */
    .servico-card {
        width: 90vw;
        max-width: 300px;
        min-width: unset;
        flex: unset;
    }

    /* Ajustes específicos para a publico-list em mobile */
    .publico-list {
        grid-template-columns: 1fr; /* Uma única coluna em telas muito pequenas */
        max-width: 350px; /* Limita a largura em dispositivos móveis para não ficar muito largo */
        padding: 0 15px; /* Adiciona um padding nas laterais */
    }

    .publico-list li {
        font-size: 1.05rem; /* Fonte um pouco menor em mobile */
        padding: 15px 20px; /* Ajusta o padding */
    }

    .publico-icon {
        font-size: 1.5rem; /* Emojis um pouco menores em mobile */
        margin-right: 12px;
    }
}

.content-section {
    max-width: 900px;
    margin: 40px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    padding: 32px 28px;
    text-align: left;
}

.content-section h2 {
    color: var(--navy-blue);
    font-size: 2rem;
    margin-bottom: 24px;
    text-align: center;
}

.content-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5em;
}

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

.content-section ul li {
    font-size: 1.1rem;
    color: var(--dark-text);
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.content-section ul li::before {
    content: '✔️';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-weight: bold;
}

.cta-section {
    background: var(--primary-blue);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    margin-top: 40px;
}

.cta-section h2 {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 20px;
}


p.paragrafo-indentado {
            text-indent: 2rem;
}

.vantagens-list {
  list-style: none;
  padding-left: 0;
}

.vantagens-list li {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.vantagens-list i {
  margin-right: 0.75rem;
  stroke: #2c7be5;
  stroke-width: 2.2;
  width: 24px;
  height: 24px;
}


@media (max-width: 768px) {
    .content-section {
        margin: 20px auto;
        padding: 24px 20px;
    }

    p.paragrafo-indentado {
                text-indent: 1.5rem; /* A indentação será 1.5 vezes o novo tamanho da fonte raiz (21px) */
    }

    .content-section h2 {
        font-size: 1.8rem;
    }

    .content-section p, .content-section ul li {
        font-size: 1rem;
    }

    .cta-section h2 {
        font-size: 2rem;
    }
}

/* Media query adicional para tablets e desktops menores */
@media (min-width: 768px) and (max-width: 1199px) {
    .publico-list {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas em tablets maiores e desktops menores */
    }
}