/* ==========================================================================
   1. Variáveis CSS (Custom Properties)
   ========================================================================== */
:root {
    --cor-primaria-cinza: #333333;
    --cor-secundaria-preto: #000000;
    --cor-destaque-vermelho: #CC0000;
    --cor-vermelho-hover: #a30000;
    --cor-fundo-header: #FFFFFF;
    --cor-fundo-claro: #FFFFFF;
    --cor-texto-claro: #FFFFFF;
    --cor-texto-escuro: #333333;
    --cor-cinza-medio: #707070;
    --cor-cinza-claro: #f4f4f4;
    --cor-borda-sutil: #e9ecef;
    --cor-verde-remineralizador: #2c6b2f;

    --fonte-titulos: 'Montserrat', sans-serif;
    --fonte-corpo: 'Open Sans', sans-serif;

    --largura-container: 1140px;
    --altura-cabecalho: 70px;
}

/* ==========================================================================
   2. Reset Básico e Estilos Globais
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cor-texto-escuro);
    background-color: var(--cor-fundo-claro);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Animação de entrada suave para todas as páginas */
    /* opacity: 0; */
    /* animation: fadeInPage 0.6s ease-out forwards; */
}

/* ==========================================================================
   3. Layout e Utilitários
   ========================================================================== */
.container {
    width: 90%;
    max-width: var(--largura-container);
    margin: 0 auto;
}

.texto-vermelho {
    color: var(--cor-destaque-vermelho);
}

.subtitulo-secao {
    color: var(--cor-cinza-medio);
    font-size: 1.1rem;
    margin-top: -1rem;
    margin-bottom: 2rem;
}

.titulo-secao-centralizado {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2.5rem;
    color: var(--cor-primaria-cinza);
}

/* ==========================================================================
   4. Tipografia (Títulos e Links)
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fonte-titulos);
    font-weight: 700;
    color: var(--cor-primaria-cinza);
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 {
    font-size: 2.8rem;
    font-weight: 900;
}

h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.5rem;
}

a {
    text-decoration: none;
    color: var(--cor-destaque-vermelho);
    transition: color 0.3s ease;
}

a:hover {
    text-decoration: underline;
    color: var(--cor-vermelho-hover);
}

/* ==========================================================================
   5. Botões (CTAs)
   ========================================================================== */
.cta-button,
.cta-button-secundario {
    display: inline-block;
    padding: 0.8em 1.8em;
    font-family: var(--fonte-titulos);
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
}

.cta-button {
    background-color: var(--cor-destaque-vermelho);
    color: var(--cor-texto-claro);
}

.cta-button:hover {
    background-color: var(--cor-vermelho-hover);
    color: var(--cor-texto-claro);
    text-decoration: none;
    transform: translateY(-2px);
}

.cta-button-secundario {
    background-color: transparent;
    color: var(--cor-destaque-vermelho);
    border: 2px solid var(--cor-destaque-vermelho);
}

.cta-button-secundario:hover {
    background-color: var(--cor-destaque-vermelho);
    color: var(--cor-texto-claro);
    text-decoration: none;
    transform: translateY(-2px);
}

/* ==========================================================================
   6. Header (Cabeçalho)
   ========================================================================== */
#cabecalho {
    background-color: var(--cor-fundo-header);
    color: var(--cor-primaria-cinza);
    padding: 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    height: var(--altura-cabecalho);
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#cabecalho.header-scrolled {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.85);
}

#cabecalho .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: height 0.3s ease;
}

/* Logo */
.logo a {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
}

#logo-imagem {
    height: 50px;
    /* Ajuste se necessário */
    width: auto;
    display: block;
}

/* Menu Principal (Desktop) */
.menu-principal ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.menu-principal ul li {
    margin-left: 2.2rem;
    position: relative;
}

.menu-principal ul li:first-child {
    margin-left: 0;
}

.menu-principal ul li a {
    color: var(--cor-primaria-cinza);
    font-family: var(--fonte-titulos);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0.2rem;
    display: flex;
    /* Mantém flex para link pai + seta */
    align-items: center;
    gap: 0.4em;
    position: relative;
}

.menu-principal ul li a:hover,
.menu-principal ul li a.active {
    color: var(--cor-destaque-vermelho);
    text-decoration: none;
}

/* Sublinhado item ativo */
.menu-principal ul li a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--cor-destaque-vermelho);
}

/* Seta Dropdown SVG */
.menu-principal ul li.dropdown>a .dropdown-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    stroke: currentColor;
    margin-top: 2px;
}

.menu-principal ul li.dropdown.submenu-aberto>a .dropdown-arrow {
    transform: rotate(180deg);
}

/* --- Submenu Container (Desktop) --- */
.submenu {
    list-style: none;
    padding: 0;
    /* Sem padding na UL */
    min-width: 250px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Transição Simplificada */
    position: absolute;
    top: calc(100% + 8px);
    /* Espaço do item pai */
    left: 0;
    background-color: var(--cor-fundo-header);
    border: 1px solid var(--cor-borda-sutil);
    overflow: hidden;
}

/* Visibilidade no Desktop (Hover ou JS) */
@media (min-width: 993px) {

    .menu-principal ul li.dropdown:hover .submenu,
    .menu-principal ul li.dropdown.submenu-aberto .submenu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* Visibilidade no Mobile (Controlado por JS) */
.menu-principal ul li.dropdown.submenu-aberto .submenu {
    opacity: 1;
    visibility: visible;
}

.submenu li {
    margin: 0;
    /* Reset */
    padding: 0;
    /* Reset */
    /* border-top: 1px solid var(--cor-borda-sutil); */
    /* Borda REMOVIDA para teste */
    vertical-align: top;
    /* Tentativa de alinhar LIs (geralmente não necessário para block) */
}

.submenu li:first-child {
    /* border-top: none; */
    /* Borda REMOVIDA para teste */
}

.submenu li a,
.submenu li:first-child a {
    display: block;
    position: relative;
    padding: 0.9rem 1.3rem 0.9rem 3.5em;
    /* Padding Esquerdo GRANDE e vertical aumentado */
    font-weight: 400;
    white-space: nowrap;
    color: var(--cor-primaria-cinza);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Submenu Ícones (ABORDAGEM: Absolute) --- */
.submenu li a i,
.submenu li:first-child a i {
    position: absolute;
    left: 1.3rem;
    /* Distância da esquerda */
    top: 50%;
    transform: translateY(-50%);
    /* Centraliza vertical */
    font-size: 1.1em;
    line-height: 1;
    color: var(--cor-destaque-vermelho);
    /* Cor padrão */
    transition: color 0.2s ease;
    width: 1.6em;
    /* <<< Vamos TENTAR manter a largura fixa do ícone da tentativa anterior */
    text-align: center;
    /* <<< E centralizar */
    /* Se a tentativa anterior com width:auto não funcionou, voltamos a esta */
}


/* --- Submenu Hover (Desktop) --- */
.submenu li a:hover {
    background-color: var(--cor-cinza-claro);
    /* Fundo cinza claro simples */
    color: var(--cor-destaque-vermelho);
    text-decoration: none;
}

.submenu li a:hover i {
    color: var(--cor-destaque-vermelho);
    /* Ícone vermelho no hover */
}

/* Link Discreto (Canal Denúncias) */
.link-discreto {
    font-size: 0.9em;
    color: var(--cor-cinza-medio);
    font-weight: 400;
}

.link-discreto:hover {
    opacity: 1;
    color: var(--cor-destaque-vermelho);
}

/* Botão Menu Mobile (Hamburguer) */
.menu-mobile-icone {
    display: none;
    background: none;
    border: none;
    color: var(--cor-primaria-cinza);
    /* Icon escuro */
    font-size: 1.8rem;
    cursor: pointer;
}


/* ==========================================================================
   7. Conteúdo Principal (Main)
   ========================================================================== */
main {
    padding-top: var(--altura-cabecalho);
}

/* ==========================================================================
   8. Seções Comuns a Várias Páginas
   ========================================================================== */
/* --- Hero Section para Páginas Internas --- */
.hero-pagina-interna {
    position: relative;
    color: var(--cor-texto-claro);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 0;
    overflow: hidden;
}

.hero-pagina-interna .hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

.hero-pagina-interna .hero-conteudo {
    position: relative;
    z-index: 2;
}

.hero-pagina-interna h1 {
    color: var(--cor-texto-claro);
    font-size: 2.8rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.hero-pagina-interna .subtitulo-hero {
    font-size: 1.3rem;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    line-height: 1.7;
}

/* Seção de conteúdo padrão para páginas internas */
.secao-conteudo-interno {
    padding: 4rem 0;
}

/* ==========================================================================
   9. Estilos Específicos da Homepage (index.html)
   ========================================================================== */
/* --- Seção Hero (Homepage) --- */
#hero-section {
    position: relative;
    /* Para posicionar o vídeo e o overlay absolutamente */
    overflow: hidden;
    /* Para cortar o excesso do vídeo */
    height: 100vh;
    /* FAZ A SEÇÃO OCUPAR A ALTURA TOTAL DA TELA */
    /* Ou, se você tem um cabeçalho fixo e quer descontar a altura dele: */
    /* height: calc(100vh - var(--altura-cabecalho)); */
    display: flex;
    /* Para centralizar o .hero-overlay */
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Para o conteúdo dentro do .container */
    color: var(--cor-texto-claro);
    /* Cor padrão do texto */
}

#hero-video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    /* Garante que cubra toda a largura da seção */
    min-height: 100%;
    /* Garante que cubra toda a altura da seção */
    width: auto;
    height: auto;
    z-index: 1;
    /* Camada mais ao fundo (dentro da #hero-section) */
    transform: translateX(-50%) translateY(-50%);
    /* Centraliza o vídeo */
    object-fit: cover;
    /* Cobre o espaço, mantendo proporção, pode cortar */
}

.hero-overlay {
    position: relative;
    /* Para o z-index funcionar corretamente */
    z-index: 2;
    /* Acima do vídeo, abaixo do conteúdo do .container */
    width: 100%;
    /* Ocupa toda a largura da #hero-section */
    height: 100%;
    /* Ocupa toda a altura da #hero-section */
    background-color: rgba(0, 0, 0, 0.65);
    /* OPACIDADE APLICADA AQUI. Ex: Preto com 60% de opacidade. AJUSTE CONFORME GOSTO (0.0 a 1.0) */
    display: flex;
    /* Para centralizar o .container */
    flex-direction: column;
    /* Empilha o conteúdo verticalmente */
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Espaçamento interno para não colar nas bordas em telas menores */
}

#hero-section .container {
    position: relative;
    /* Garante que o z-index funcione */
    z-index: 3;
    /* Conteúdo do container acima do overlay */
    max-width: 900px;
    /* Define uma largura máxima para o conteúdo central */
    width: 90%;
    /* Usa 90% da largura disponível, até o max-width */
}

#hero-section h1 {
    color: var(--cor-texto-claro);
    font-size: 3.0rem;
    /* Ajuste conforme necessário */
    font-weight: 900;
    /* Ou 900 como no seu import */
    margin-bottom: 0.75rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Sombra para legibilidade */
    line-height: 1.2;
}

#hero-section .slogan {
    color: #e0e0e0;
    /* Um tom um pouco mais suave que o branco puro */
    font-size: 1.5rem;
    /* Ajuste conforme necessário */
    margin-bottom: 2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    /* Sombra para legibilidade */
    line-height: 1.5;
    max-width: 600px;
    /* Para o slogan não ficar muito largo */
    margin-left: auto;
    margin-right: auto;
}

#hero-section .cta-button {
    /* Seus estilos existentes de .cta-button. Exemplo: */
    background-color: #D9242B;
    /* Um vermelho similar ao da imagem */
    color: var(--cor-texto-claro);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    position: relative;
    /* Para garantir z-index */
    z-index: 3;
    /* Mesma camada do texto */
}

#hero-section .cta-button:hover {
    background-color: #b01d23;
    /* Um vermelho um pouco mais escuro no hover */
}

/* --- Seção Destaque Remineralizador (Homepage) --- */

/* --- Seção Destaque Remineralizador (Homepage) --- */
#destaque-remineralizador {
    padding: 3rem 0;
    /* Padding vertical pode ser um pouco menor */
    background-color: var(--cor-cinza-claro);
    text-align: center;
    /* Centraliza o conteúdo por padrão */
}

#destaque-remineralizador .destaque-remineralizador-texto p {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* REMOVA ou COMENTE estas regras antigas: */
/* .destaque-remineralizador-conteudo { 
    display: flex; align-items: center; gap: ...; justify-content: ...; 
}
.destaque-remineralizador-img { ... }
.destaque-remineralizador-texto { ... }
*/


.destaque-remineralizador-conteudo-simples {
    max-width: 650px;
    /* Limita a largura do bloco */
    margin: 0 auto;
    /* Centraliza o bloco na página */
}

/* ADICIONE esta nova regra para o container do texto/botão */
.destaque-remineralizador-conteudo-simples {
    max-width: 650px;
    /* Limita a largura do bloco */
    margin: 0 auto;
    /* Centraliza o bloco na página */
}

/* Estilo para o H2 (já deve usar .titulo-secao-centralizado) */
#destaque-remineralizador h2 {
    /* Garanta que não há cor branca ou sombra herdada/aplicada */
    color: var(--cor-primaria-cinza);
    text-shadow: none;
    /* margin-bottom: 1.5rem; /* Ajuste se necessário */
}

#destaque-remineralizador h2 .texto-vermelho {
    color: var(--cor-destaque-vermelho);
    /* Garante vermelho */
}

/* Estilo para o parágrafo */
#destaque-remineralizador .destaque-remineralizador-conteudo-simples p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    /* Espaço antes do botão */
    color: var(--cor-texto-escuro);
    /* Cor padrão escura */
    opacity: 1;
    /* Garante opacidade total */
    line-height: 1.7;
    /* text-align já é center devido ao container pai */
}

/* Estilo para o botão */
#destaque-remineralizador .destaque-remineralizador-conteudo-simples .cta-button {
    /* Como o container pai tem text-align: center, o botão (inline-block) 
        deve centralizar. Nenhuma regra extra necessária geralmente. */
    margin-top: 0;
    /* Reset */
}


/* --- Seção Produtos e Serviços - Cards (Homepage) --- */
#produtos-servicos-geral {
    padding: 4rem 0;
    text-align: center;
}

.cards-container {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.card {
    background-color: var(--cor-fundo-claro);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    flex: 1 1 300px;
    max-width: 350px;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-conteudo {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-conteudo h3 {
    margin-bottom: 0.8rem;
}

.card-conteudo p {
    font-size: 0.95rem;
    color: var(--cor-cinza-medio);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* --- Seção Sobre Nós Chamada (Homepage) --- */
#sobre-nos-chamada {
    padding: 4rem 0;
    background-color: var(--cor-fundo-claro);
}

.sobre-nos-grid {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.sobre-nos-imagem {
    flex: 1;
}

.sobre-nos-imagem img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 8px;
}

.sobre-nos-texto {
    flex: 1;
}

.sobre-nos-texto p {
    margin-bottom: 1.5rem;
}

/* --- Seção Empresas do Grupo Chamada (Homepage) --- */
#empresas-grupo-chamada {
    padding: 4rem 0;
    background-color: var(--cor-cinza-claro);
    text-align: center;
}

.logos-empresas-grupo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.logo-empresa-item {
    text-align: center;
    flex: 0 0 200px;
}

.logo-empresa-item img {
    max-width: 200px;
    /* <<< Aumentado de 150px (Ajuste este valor como preferir) */
    height: auto;
    margin-bottom: 0.5rem;
    filter: grayscale(50%);
    transition: filter 0.3s ease;
    border-radius: 8px;
    /* <<< ADICIONADO - Bordas arredondadas */
    display: block;
    /* Garante bom comportamento da imagem */
    margin-left: auto;
    /* Centraliza a imagem dentro do espaço do item */
    margin-right: auto;
}

.logo-empresa-item img:hover {
    filter: grayscale(0%);
}

.logo-empresa-item p {
    font-family: var(--fonte-titulos);
    font-weight: 700;
    color: var(--cor-cinza-medio);
    font-size: 0.9rem;
}

/* ==========================================================================
   10. Estilos Específicos da Página História (historia.html)
   ========================================================================== */
#hero-historia .hero-background-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('https://via.placeholder.com/1920x700/555555/ffffff?text=Foto+Histórica+Kerber');
}

#hero-historia-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 100% da altura da #hero-historia */
    object-fit: cover;
    z-index: 0;
}

#hero-historia {
    position: relative;
    /* Essencial para o posicionamento absoluto dos filhos */
    width: 100%;
    /* A ALTURA DESTA SEÇÃO (height ou min-height) 
       DEVE VIR DO SEU CSS EXISTENTE PARA A CLASSE .hero-pagina-interna 
       OU DE UM ESTILO ESPECÍFICO PARA #hero-historia.
       Por exemplo, poderia ser:
       min-height: 500px; 
       OU
       height: auto; (se o conteúdo definir a altura)
       etc.
    */
    overflow: hidden;
    color: #ffffff;
}

.hero-historia-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65);
    /* Preto com 50% de opacidade. Ajuste conforme necessário */
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.hero-historia-overlay .hero-conteudo.container {
    position: relative;
    z-index: 2;
}

#conteudo-principal-historia {
    /* Sem estilos específicos por enquanto */
}

/* --- Estilos da Linha do Tempo --- */
.linha-do-tempo-container {
    margin-top: 3rem;
    padding-bottom: 2rem;
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.timeline::before {
    /* Linha vertical */
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 15px;
    width: 4px;
    background-color: var(--cor-borda-sutil);
    border-radius: 2px;
    z-index: 0;
}

.timeline-item {
    padding: 10px 0 40px 60px;
    position: relative;
    z-index: 1;
}

.timeline-item:last-child {
    padding-bottom: 10px;
}

.timeline-marker {
    /* Círculo na linha */
    content: '';
    position: absolute;
    top: 15px;
    left: 0px;
    width: 30px;
    height: 30px;
    background-color: var(--cor-fundo-header);
    border: 4px solid var(--cor-destaque-vermelho);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px var(--cor-fundo-header);
}

.timeline-content {
    background-color: var(--cor-fundo-claro);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
}

.timeline-content::before {
    /* Seta apontando */
    content: '';
    position: absolute;
    top: 15px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--cor-fundo-claro);
}

.timeline-ano {
    background-color: var(--cor-destaque-vermelho);
    color: var(--cor-texto-claro);
    padding: 0.3rem 0.8rem;
    font-family: var(--fonte-titulos);
    font-weight: 700;
    border-radius: 15px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.timeline-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--cor-primaria-cinza);
}

.timeline-content p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--cor-cinza-medio);
}

.timeline-content img {
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
    border-radius: 4px;
}

.figura-fundador-timeline {
  margin-top: 0.5rem; 
  margin-bottom: 1.2rem; 
  max-width: 250px; 
  margin-left: auto;  
  margin-right: auto; 
}

.figura-fundador-timeline img {
  width: 100%; 
  height: auto; 
  display: block; 
  border-radius: 6px; 
  border: 1px solid var(--cor-borda-sutil); 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

.figura-fundador-timeline figcaption {
  font-size: 0.85rem; 
  color: var(--cor-cinza-medio);
  text-align: center; 
  margin-top: 0.6rem;
  font-style: italic; 
  line-height: 1.4;
}

/* ==========================================================================
   11. Estilos Específicos da Página Empresas (empresas.html)
   ========================================================================== */
#hero-empresas {
    position: relative;
    /* Essencial para o posicionamento absoluto dos filhos */
    overflow: hidden;
    /* Para garantir que o vídeo não "vaze" */
    /* A altura (height ou min-height) e cor do texto devem vir da classe .hero-pagina-interna 
       ou de estilos específicos para #hero-empresas se necessário. */
}

/* 3. Estilos para o overlay */
.hero-empresas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Garante que cubra toda a largura da seção */
    bottom: 0;
    /* Garante que cubra toda a altura da seção */
    background-color: rgba(0, 0, 0, 0.65);
    /* Exemplo: Preto com 50% de opacidade. Ajuste conforme necessário. */
    z-index: 1;
    /* Acima do vídeo, abaixo do conteúdo textual */

    /* Para centralizar o .hero-conteudo dentro do overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Espaçamento interno opcional */
    text-align: center;
    /* Para o caso do .container não ter largura total */
}

#hero-empresas-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ocupa 100% da altura da seção #hero-empresas */
    object-fit: cover;
    /* Cobre toda a área, cortando o excesso se necessário, sem distorcer */
    z-index: 0;
    /* Camada mais ao fundo (atrás do overlay) */
}

/* 4. Estilos para o conteúdo textual (para garantir que fique acima do overlay) */
.hero-empresas-overlay .hero-conteudo.container {
    position: relative;
    /* Ou certifique-se de que não precise de z-index específico aqui */
    z-index: 2;
    /* Garante que o conteúdo fique acima do overlay */
    /* A classe .container geralmente já lida com max-width e centralização do bloco. */
    /* A cor do texto deve ser definida para contrastar com o overlay (provavelmente já vem da .hero-pagina-interna). */
}

/* --- Estilos Seção Apresentação Empresas (Layout Empilhado) --- */
#apresentacao-empresas {
    padding: 3rem 0 1rem 0;
    background-color: var(--cor-fundo-claro);
}

.empresa-secao {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--cor-borda-sutil);
}

#apresentacao-empresas .container>.empresa-secao:last-of-type {
    margin-bottom: 0;
    padding-bottom: 1rem;
    border-bottom: none;
}

.empresa-imagem {
    flex: 1 1 45%;
    max-width: 45%;
}

.empresa-imagem img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    display: block;
}

.empresa-texto {
    flex: 1 1 55%;
    max-width: 55%;
}

.empresa-texto h3 {
    font-size: 1.8rem;
    color: var(--cor-secundaria-preto);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.empresa-texto .empresa-produtos {
    font-size: 1rem;
    color: var(--cor-cinza-medio);
    margin-bottom: 1.2rem;
    font-style: italic;
}

.empresa-texto .empresa-produtos strong {
    font-style: normal;
    color: var(--cor-secundaria-preto);
}

.empresa-texto .empresa-descricao {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cor-texto-escuro);
    margin-bottom: 1.5rem;
}

.empresa-texto .cta-button-secundario {
    margin-top: 1rem;
}

/* Layout Invertido */
.empresa-secao.layout-invertido .empresa-imagem {
    order: 2;
}

.empresa-secao.layout-invertido .empresa-texto {
    order: 1;
}

/* --- Estilos para Botão ao Lado da Descrição (Página Empresas) --- */
.descricao-com-botao {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.5rem;
    margin-top: 1rem;
}

.descricao-com-botao .empresa-descricao {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 60%;
}

.descricao-com-botao .cta-button-secundario.btn-ao-lado {
    flex-shrink: 0;
    align-self: flex-end;
    margin-top: 0;
    margin-bottom: 0;
}

/* Placeholders para futuras seções */
#secao-sinergia,
#secao-qualidade {
    padding: 4rem 0;
}

#secao-sinergia .container p,
#secao-qualidade .container p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ==========================================================================
   12. Animações e Efeitos
   ========================================================================== */
/* Animação de entrada da página */
@keyframes fadeInPage {
    to {
        opacity: 1;
    }
}

/* Animação de scroll das seções */
.secao-animar {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.secao-animar.visivel {
    opacity: 1;
    transform: translateY(0);
}

/* Aplicação da animação (não precisa repetir regras aqui, só garantir que a classe .secao-animar esteja no HTML) */

/* ==========================================================================
   13. Footer (Rodapé) 
   (Verifique se esta é a versão no seu style.css)
   ========================================================================== */
#rodape {
    background-color: var(--cor-secundaria-preto) !important;
    /* <<< DEVE SER PRETO (#000000) */
    color: var(--cor-texto-claro);
    /* Cor padrão do texto no rodapé */
    padding: 3rem 0 1.5rem 0;
}

.rodape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.rodape-coluna h4 {
    font-family: var(--fonte-titulos);
    color: var(--cor-texto-claro);
    /* Título da coluna branco */
    font-size: 1.2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cor-cinza-medio);
    /* Linha cinza abaixo do h4 */
    padding-bottom: 0.5rem;
}

.rodape-coluna ul {
    list-style: none;
    padding: 0;
    /* Garante sem padding padrão */
}

.rodape-coluna ul li a,
.rodape-coluna p,
.rodape-coluna p a {
    color: var(--cor-cinza-medio);
    /* Textos e links secundários cinza claro */
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    display: block;
    /* Garante que links ocupem linha */
}

.rodape-coluna ul li a:hover,
.rodape-coluna p a:hover {
    color: var(--cor-destaque-vermelho);
    /* Links ficam vermelhos no hover */
    text-decoration: underline;
}

/* Logo no Rodapé (Texto) */
#logo-texto-rodape {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--cor-texto-claro);
    /* Logo branca */
    display: block;
    margin-bottom: 0.5rem;
    text-decoration: none;
}

#logo-texto-rodape:hover {
    text-decoration: none;
    color: var(--cor-destaque-vermelho);
}

/* Ícones de Redes Sociais no Rodapé */
.redes-sociais-icones {
    margin-top: 0.5rem;
    /* Espaço acima dos ícones */
}

.redes-sociais-icones a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid var(--cor-cinza-medio);
    color: var(--cor-cinza-medio);
    /* Ícone cinza */
    border-radius: 50%;
    margin-right: 0.5rem;
    font-size: 1.2rem;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s ease;
    text-decoration: none;
}

.redes-sociais-icones a i {
    color: inherit;
    /* Herda a cor do link */
    vertical-align: middle;
    line-height: 1;
}

.redes-sociais-icones a:hover {
    background-color: var(--cor-destaque-vermelho);
    /* Fundo vermelho no hover */
    border-color: var(--cor-destaque-vermelho);
    color: var(--cor-texto-claro);
    /* Ícone branco no hover */
    text-decoration: none;
    transform: scale(0.9);
    /* Efeito de diminuir */
}

/* Barra Inferior do Rodapé */
.rodape-barra-inferior {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cor-cinza-medio);
    /* Linha separadora */
    font-size: 0.9rem;
    color: var(--cor-cinza-medio);
}

.rodape-barra-inferior p {
    margin-bottom: 0.3rem;
}

.rodape-barra-inferior a {
    color: var(--cor-cinza-medio);
    /* Links inferiores cinza */
}

.rodape-barra-inferior a:hover {
    color: var(--cor-destaque-vermelho);
}

/* ==========================================================================
   14. Estilos Específicos - Páginas de Produtos (Ex: Britagem)
   ========================================================================== */

/* --- Seção Tipos de Produto (Cards) --- */
.produto-cards-container {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
    /* Espaço abaixo do título da seção */

    /* Desktop: 4 colunas - Elas agora terão mais espaço para se expandir */
    grid-template-columns: repeat(4, 1fr);

    max-width: 1500px;
    /* Ex: Um pouco maior que o --largura-container padrão */
    margin-left: auto;
    /* Centraliza o .produto-cards-container se max-width for usado */
    margin-right: auto;
}

.disclaimer-texto {
    font-size: 0.85rem;
    /* Tamanho de fonte menor */
    color: var(--cor-cinza-medio);
    /* Cor cinza médio */
    text-align: center;
    /* Centralizado */
    margin-top: 2.5rem;
    /* Espaço acima do texto */
    font-style: italic;
    /* Texto em itálico */
}

.produto-card {
    background-color: var(--cor-fundo-claro);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    /* Para o conteúdo interno se comportar bem */
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    flex: 0 1 calc(25% - 1.5rem);
    /* 100%/4 = 25%. Subtrai o gap. */
    min-width: 260px;
    /* Ajuste conforme o conteúdo do seu card */
}

.produto-cards-container-wrapper {
    width: 100%;
}

.produto-cards-wrapper-fullwidth {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

.produto-cards-container {
    display: flex;
    /* <<< USA FLEXBOX */
    flex-wrap: wrap;
    /* <<< Permite quebra de linha */
    justify-content: center;
    /* <<< CENTRALIZA OS CARDS HORIZONTALMENTE */
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
}

.produto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.produto-card img {
    width: 100%;
    height: 200px;
    /* Altura fixa para imagem */
    object-fit: cover;
    /* Cobre a área sem distorcer */
    border-bottom: 1px solid var(--cor-borda-sutil);
}

.produto-card-conteudo {
    padding: 1.5rem;
    flex-grow: 1;
    /* Faz o conteúdo ocupar espaço */
}

.produto-card-conteudo .produto-detalhe {
    font-size: 1rem;
    /* Um pouco menor que o texto principal do card */
    color: var(--cor-primaria-cinza);
    /* Cor escura para boa leitura */
    margin-top: 0.75rem;
    /* Espaço acima desta informação */
    padding-top: 0.75rem;
    /* Espaço interno acima, se tiver borda */
    border-top: 1px solid var(--cor-borda-sutil);
    /* Linha separadora sutil (opcional) */
    font-style: normal;
    /* Garante que não seja itálico como a descrição de atuação */
}

.produto-card-conteudo .produto-detalhe strong {
    font-weight: 700;
    /* Ou 600, para destacar o rótulo */
}

.produto-card-conteudo h3 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    color: var(--cor-primaria-cinza);
}

.produto-card-conteudo p {
    font-size: 0.95rem;
    color: var(--cor-cinza-medio);
    line-height: 1.6;
}

/* --- Seção Aplicações (Grid de Ícones) --- */
#aplicacoes-brita {
    background-color: var(--cor-fundo-claro);
    /* Fundo diferente da seção anterior */
}

.aplicacoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
    text-align: center;
}

.aplicacao-item i {
    font-size: 3rem;
    /* Tamanho grande para o ícone */
    color: var(--cor-destaque-vermelho);
    margin-bottom: 1rem;
    display: inline-block;
}

.aplicacao-item h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--cor-primaria-cinza);
}

.aplicacao-item p {
    font-size: 0.9rem;
    color: var(--cor-cinza-medio);
}

/* --- Seção Call to Action (CTA) --- */
.cta-container {
    text-align: center;
}

.cta-container h2 {
    font-size: 1.8rem;
    /* Título um pouco menor */
}

.cta-container p {
    font-size: 1.1rem;
    color: var(--cor-cinza-medio);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Formatação de Texto Geral (Páginas Internas) --- */
.texto-geral-formatado p {
    margin-bottom: 1em;
    /* Espaçamento entre parágrafos */
    line-height: 1.7;
}

.texto-geral-formatado ul {
    list-style-position: inside;
    margin-left: 1em;
    margin-bottom: 1em;
}

.texto-geral-formatado li {
    margin-bottom: 0.5em;
}

/* Responsividade para Cards de Produto com Flexbox */
@media (max-width: 1300px) {

    /* Ponto de quebra um pouco antes do max-width do container */
    .produto-card {
        flex-basis: calc(33.333% - 1.5rem);
        /* Tenta 3 colunas */
    }
}

@media (max-width: 900px) {

    /* Ponto de quebra para tablets */
    .produto-card {
        flex-basis: calc(50% - 1.5rem);
        /* Tenta 2 colunas */
    }
}

@media (max-width: 600px) {

    /* Mobile */
    .produto-card {
        flex-basis: calc(100% - 1.5rem);
        /* 1 coluna (ou apenas 100% e o gap ajusta) */
        /* Se usar 100%, o gap fará com que não ocupe realmente 100% visualmente */
        /* flex-basis: 100%; */
    }

    .produto-cards-wrapper-fullwidth {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* ==========================================================================
   15. Estilos Específicos - Página Remineralizador (produto-remineralizador.html)
   ========================================================================== */

/* --- Hero Section Específica --- */
#hero-remineralizador .hero-background-image {
    /* Coloque o URL da sua imagem real aqui */
    background-image: linear-gradient(rgba(44, 107, 47, 0.6), rgba(0, 0, 0, 0.6)), url('https://via.placeholder.com/1920x800/2c6b2f/ffffff?text=Lavoura+Saudável');
}

#hero-remineralizador h1 {
    font-size: 3rem;
    /* Tamanho específico para esta página */
}

/* Estilo para botões na Hero */
.hero-cta-buttons {
    margin-top: 2rem;
}

.hero-cta-buttons a {
    /* Adiciona espaço entre botões se estiverem na mesma linha */
    margin: 0.5rem;
}

.hero-cta-buttons .cta-button-secundario {
    border-color: var(--cor-fundo-claro);
    /* Borda branca no overlay escuro */
    color: var(--cor-fundo-claro);
}

.hero-cta-buttons .cta-button-secundario:hover {
    background-color: rgba(255, 255, 255, 0.15);
    /* Efeito hover sutil */
}

/* --- Seção "O Que É" (Layout 2 Colunas) --- */
/* Reutiliza .secao-conteudo-interno */
.coluna-layout-imagem-texto {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.coluna-imagem {
    flex: 1 1 40%;
    max-width: 40%;
}

.coluna-imagem img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    display: block;
}

.coluna-texto {
    flex: 1 1 60%;
    max-width: 60%;
}

/* Título alinhado à esquerda para esta seção */
.coluna-texto .titulo-secao {
    text-align: left;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

/* Destaque para "Aprovado MAPA" */
.destaque-mapa {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #e4f8e4;
    /* Fundo verde claro */
    border-left: 4px solid var(--cor-verde-remineralizador);
    color: var(--cor-verde-remineralizador);
    font-weight: 700;
    border-radius: 0 4px 4px 0;
}

.destaque-mapa i {
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* --- Seção Benefícios (Grid) --- */
#beneficios-remineralizador {
    background-color: var(--cor-cinza-claro);
    /* Fundo diferente */
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

.beneficio-item {
    text-align: center;
    background-color: var(--cor-fundo-claro);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.beneficio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.beneficio-item i {
    font-size: 2.8rem;
    /* Ícones grandes */
    color: var(--cor-destaque-vermelho);
    margin-bottom: 1rem;
    display: inline-block;
}

.beneficio-item h3 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}

.beneficio-item p {
    font-size: 0.95rem;
    color: var(--cor-cinza-medio);
}

/* --- Seção Composição Mineral --- */
#composicao-mineral {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.composicao-grid {
    display: grid;
    /* Começa com 2 colunas por padrão (mobile-first) */
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    /* Gap menor para 2 colunas */
    max-width: 700px;
    margin: 1.5rem auto 0 auto;
    /* Margem ajustada */
}

.mineral-item {
    background-color: var(--cor-cinza-claro);
    padding: 1.2rem 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--cor-borda-sutil);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* ADICIONE ESTA LINHA */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ADICIONE ESTA NOVA REGRA para o hover */
.mineral-item:hover {
    transform: scale(1.05);
    /* Aumenta o tamanho em 5% */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    /* Sombra um pouco mais forte */
}

.mineral-formula {
    display: block;
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--cor-primaria-cinza);
    margin-bottom: 0.3rem;
}

.mineral-formula sub {
    font-size: 0.75em;
    vertical-align: sub;
    margin: 0 0.05em;
}

.mineral-valor {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cor-destaque-vermelho);
}

/* --- Seção Como Aplicar --- */
#como-aplicar {
    background-color: var(--cor-cinza-claro);
}

/* Adicionar estilos para .passos-aplicacao se necessário */

/* --- Seção Resultados/Depoimentos --- */
.placeholder-resultados {
    border: 2px dashed var(--cor-borda-sutil);
    padding: 40px;
    text-align: center;
    color: var(--cor-cinza-medio);
    border-radius: 8px;
    margin-top: 2rem;
}

/* Adicionar estilos para carrossel ou cards de depoimentos */

/* --- Seção FAQ --- */
#faq-remineralizador {
    background-color: var(--cor-cinza-claro);
}

.faq-lista {
    margin-top: 2rem;
}

.faq-item {
    background-color: var(--cor-fundo-claro);
    border: 1px solid var(--cor-borda-sutil);
    border-radius: 4px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.faq-item summary {
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-family: var(--fonte-titulos);
    cursor: pointer;
    position: relative;
    list-style: none;
    /* Remove marcador padrão (pode variar por navegador) */
    color: var(--cor-primaria-cinza);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Remove marcador no Chrome/Safari */
.faq-item summary::marker {
    display: none;
}

/* Remove marcador no Firefox (mais recente) */

.faq-item summary::after {
    /* Indicador +/- */
    content: '+';
    font-size: 1.5rem;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    /* Garanta que o transform inicial e a transition estejam aqui */
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    /* ESSENCIAL para animar a rotação */
    color: var(--cor-destaque-vermelho);
    font-weight: 400;
}

.faq-item[open]>summary::after {
    content: '-';
    /* Apenas muda o transform final, a transição definida acima fará a animação */
    transform: translateY(-50%) rotate(180deg);
    /* Roda o '+' para parecer '-' ou apenas rotaciona o '-' */
}

.faq-item p {
    padding: 0 1.5rem 1.5rem 1.5rem;
    /* Padding padrão quando visível */
    margin: 0;
    color: var(--cor-cinza-medio);
    border-top: 1px solid var(--cor-borda-sutil);
    /* Remova max-height, opacity e transition daqui */
    /* max-height: 0; */
    /* opacity: 0; */
    /* transition: ... ; */
    overflow: hidden;
    /* Mantém overflow hidden */
}

/* --- Seção CTA Final --- */
#cta-final-remineralizador {
    background-color: var(--cor-fundo-claro);
    /* Ou outra cor */
}

.cta-container {
    /* Pode ser reutilizado de outras páginas */
    text-align: center;
    padding: 2rem 0;
}

.cta-container h2 {
    font-size: 1.8rem;
}

.cta-container p {
    font-size: 1.1rem;
    color: var(--cor-cinza-medio);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons-final a {
    margin: 0.5rem;
}

/* --- Formatação de Texto Geral (para seções com mais texto) --- */
.texto-geral-formatado p {
    margin-bottom: 1em;
    line-height: 1.7;
}

.texto-geral-formatado ul {
    list-style-position: inside;
    margin-left: 1em;
    margin-bottom: 1em;
}

.texto-geral-formatado li {
    margin-bottom: 0.5em;
}

/* --- Seção Como Aplicar --- */
.passos-aplicacao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Colunas responsivas */
    gap: 2rem;
}

.passo-item {
    text-align: center;
    padding: 1.5rem;
}

.passo-item i {
    font-size: 2.5rem;
    /* Ícones um pouco menores que os de benefícios */
    color: var(--cor-destaque-vermelho);
    margin-bottom: 1rem;
    display: inline-block;
}

.passo-item h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    color: var(--cor-primaria-cinza);
}

.passo-item p {
    font-size: 0.9rem;
    color: var(--cor-cinza-medio);
    line-height: 1.6;
}

/* --- Seção Resultados / Depoimentos --- */
.depoimentos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* 1 a 3 colunas */
    gap: 2rem;
}

.depoimento-card {
    background-color: var(--cor-cinza-claro);
    /* Fundo cinza claro */
    border: 1px solid var(--cor-borda-sutil);
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza conteúdo */
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.depoimento-rating {
    margin-bottom: 1rem;
    color: #f0ad4e;
    /* Cor amarela/laranja para estrelas */
    font-size: 1.2rem;
}

.depoimento-rating .bi-star {
    /* Estilo para estrela vazia (se usar) */
    color: #dddddd;
}

.depoimento-texto {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cor-texto-escuro);
    margin-bottom: 1.5rem;
    flex-grow: 1;
    /* Para empurrar autor/local para baixo */
    position: relative;
    padding: 0 1rem;
    /* Espaço para as aspas */
}

/* Aspas estilizadas (Opcional) */
.depoimento-texto::before,
.depoimento-texto::after {
    content: '"';
    font-size: 2.5rem;
    color: var(--cor-destaque-vermelho);
    opacity: 0.3;
    position: absolute;
    line-height: 1;
}

.depoimento-texto::before {
    top: -0.2em;
    left: -0.2em;
}

.depoimento-texto::after {
    bottom: -0.2em;
    right: -0.2em;
}


.depoimento-autor {
    font-weight: 700;
    font-family: var(--fonte-titulos);
    color: var(--cor-primaria-cinza);
    margin-bottom: 0.25rem;
    margin-top: auto;
    /* Garante que fique abaixo do texto */
}

.depoimento-local {
    font-size: 0.85rem;
    color: var(--cor-cinza-medio);
}

/* Responsividade para Depoimentos (se necessário ajuste adicional) */
@media (max-width: 600px) {
    .depoimentos-container {
        grid-template-columns: 1fr;
        /* Uma coluna */
    }
}


/* ==========================================================================
   13. Estilos Específicos da Página Contato (contato.html)
   ========================================================================== */

/* --- Hero da Página de Contato --- */
#hero-contato {
    min-height: 35vh;
    /* Hero mais curta */
}

#hero-contato .hero-background-image {
    /* Ajuste a imagem de fundo conforme necessário */
    background-image: linear-gradient(rgba(51, 51, 51, 0.7), rgba(51, 51, 51, 0.7)), url('https://via.placeholder.com/1920x400/eeeeee/cccccc?text=Escritório+Kerber');
}

/* --- Layout Principal da Página de Contato --- */
#conteudo-contato .container {
    max-width: 1200px;
    /* Container um pouco maior para acomodar colunas */
}

.contato-layout-grid {
    display: grid;
    /* Começa com 1 coluna, muda para 2 em telas maiores (veja media query) */
    grid-template-columns: 1fr;
    gap: 2.5rem;
    /* Espaço entre form e infos quando empilhado */
}

/* Ativa 2 colunas em telas maiores */
@media (min-width: 993px) {
    .contato-layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        /* Duas colunas responsivas */
        gap: 3rem;
        /* Espaço maior entre as colunas */
    }
}


/* --- Coluna Formulário de Contato --- */
.contato-form-container .titulo-secao {
    text-align: left;
    /* Alinha título do form à esquerda */
    margin-bottom: 1.5rem;
}

.form-grupo {
    margin-bottom: 1.5rem;
}

.form-grupo label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--cor-primaria-cinza);
    font-size: 1rem;
    /* Tamanho padrão */
}

.form-grupo input[type="text"],
.form-grupo input[type="email"],
.form-grupo input[type="tel"],
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--cor-borda-sutil);
    border-radius: 4px;
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    /* Adicionada transição box-shadow */
}

.form-grupo input[type="text"]:focus,
.form-grupo input[type="email"]:focus,
.form-grupo input[type="tel"]:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: var(--cor-destaque-vermelho);
    box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.2);
    /* Efeito focus */
}

.form-grupo textarea {
    resize: vertical;
    /* Permite redimensionar apenas verticalmente */
    min-height: 120px;
    /* Altura mínima */
}

.form-grupo select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23CC0000' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

.form-grupo .obrigatorio {
    color: var(--cor-destaque-vermelho);
    margin-left: 0.25rem;
}

.form-grupo-checkbox {
    display: flex;
    align-items: flex-start;
    /* Alinha pelo topo para textos longos */
    gap: 0.5rem;
}

.form-grupo-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 0.25em;
    /* Ajuste fino vertical */
    flex-shrink: 0;
    /* Impede que o checkbox encolha */
}

.form-grupo-checkbox label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
    /* Melhora leitura se quebrar linha */
}

.form-grupo-checkbox label a {
    text-decoration: underline;
}

.form-grupo button[type="submit"] {
    /* Usa .cta-button */
    width: auto;
    /* Ou 100% */
}

.form-feedback-area {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
    display: none;
    font-size: 0.95rem;
}

.form-feedback-area.success {
    /* ... (estilos de sucesso) ... */
}

.form-feedback-area.error {
    /* ... (estilos de erro) ... */
}


/* --- Coluna Outras Informações de Contato --- */
.outros-contatos-container .titulo-secao {
    text-align: left;
    margin-bottom: 1.5rem;
}

.info-contato-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--cor-borda-sutil);
}

.info-contato-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.info-contato-item i {
    font-size: 1.5rem;
    color: var(--cor-destaque-vermelho);
    margin-top: 0.2rem;
    flex-shrink: 0;
    /* Impede que ícone encolha */
}

.info-contato-item div {
    /* Container do texto */
    flex-grow: 1;
    /* Permite que o texto ocupe espaço */
}

.info-contato-item strong {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
    color: var(--cor-primaria-cinza);
}

.info-contato-item a {
    color: var(--cor-primaria-cinza);
    text-decoration: none;
    word-break: break-word;
    /* Quebra emails/links longos */
}

.info-contato-item a:hover {
    color: var(--cor-destaque-vermelho);
    text-decoration: underline;
}

.redes-sociais-icones.redes-contato {
    margin-top: 0.5rem;
    /* Espaço acima dos ícones sociais */
}

.redes-sociais-icones.redes-contato a {
    color: var(--cor-primaria-cinza);
    border-color: var(--cor-primaria-cinza);
    /* Herda outros estilos de .redes-sociais-icones a */
}

.redes-sociais-icones.redes-contato a:hover {
    background-color: var(--cor-destaque-vermelho);
    border-color: var(--cor-destaque-vermelho);
    color: var(--cor-texto-claro);
    transform: scale(0.9);
}

/* Mapa */
.mapa-container {
    margin-top: 2.5rem;
    /* Mais espaço antes do mapa */
}

.mapa-container h3.subtitulo-contato {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-align: left;
    color: var(--cor-primaria-cinza);
}

.mapa-container iframe {
    width: 100%;
    /* Garante largura total */
    height: 300px;
    /* Altura padrão */
    border: none;
    /* Remove borda padrão do iframe */
    border-radius: 8px;
    filter: grayscale(20%);
    /* Efeito sutil opcional */
}

/* ==========================================================================
   Responsividade Específica - Página Contato
   (Adicione estas regras dentro das @media queries existentes no final)
   ========================================================================== */

/* --- Dentro de @media (max-width: 992px) --- */
@media (max-width: 992px) {
    #conteudo-contato .container {
        width: 95%;
    }

    .contato-layout-grid {
        grid-template-columns: 1fr;
        /* Força uma coluna */
        gap: 2.5rem;
    }

    .contato-form-container .titulo-secao,
    .outros-contatos-container .titulo-secao,
    .mapa-container h3.subtitulo-contato {
        text-align: center;
        /* Centraliza títulos */
    }

    .outros-contatos-container {
        margin-top: 2rem;
    }
}

/* --- Dentro de @media (max-width: 768px) --- */
@media (max-width: 768px) {
    .contato-layout-grid {
        gap: 2rem;
    }

    .mapa-container iframe {
        height: 250px;
    }

    .form-grupo label {
        font-size: 0.95rem;
    }

    .form-grupo input[type="text"],
    .form-grupo input[type="email"],
    .form-grupo input[type="tel"],
    .form-grupo select,
    .form-grupo textarea {
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
    }

    .form-grupo-checkbox {
        align-items: flex-start;
        gap: 0.4rem;
    }

    .form-grupo-checkbox label {
        font-size: 0.85rem;
    }

    .info-contato-item {
        gap: 0.8rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .info-contato-item i {
        font-size: 1.3rem;
        margin-top: 0.1rem;
    }

    .info-contato-item div {
        font-size: 0.95rem;
    }
}

/* --- Dentro de @media (max-width: 480px) --- */
@media (max-width: 480px) {
    .mapa-container iframe {
        height: 200px;
    }

    .form-grupo input[type="text"],
    .form-grupo input[type="email"],
    .form-grupo input[type="tel"],
    .form-grupo select,
    .form-grupo textarea {
        font-size: 0.9rem;
    }

    .form-grupo-checkbox label {
        font-size: 0.8rem;
    }

    .info-contato-item i {
        font-size: 1.2rem;
    }

    .info-contato-item div {
        font-size: 0.9rem;
    }
}


/* ==========================================================================
   1X. Estilos Específicos da Página Canal de Denúncias (canal-denuncias.html)
   ========================================================================== */

/* --- Hero Section da Página Canal de Denúncias --- */
#hero-canal-denuncias {
    /* A classe .hero-pagina-interna e o style inline já cuidam da altura e cor de fundo. */
    /* Se quiser uma imagem de fundo específica para esta hero:
    background-image: 
        linear-gradient(rgba(30,30,30,0.65), rgba(30,30,30,0.65)), 
        url('caminho/para/imagem_etica_justica.jpg');
    background-size: cover;
    background-position: center;
    */
}

/* --- Conteúdo Principal da Página Canal de Denúncias --- */
#conteudo-canal-denuncias .container {
    max-width: 800px; /* Para melhor legibilidade do texto longo */
}

/* A classe .texto-geral-formatado já deve cuidar dos parágrafos e espaçamentos básicos.
   Abaixo estão estilos adicionais para esta página. */

#conteudo-canal-denuncias h2 {
    font-size: 1.8rem; /* Ou use var(--h2-font-size) se tiver */
    margin-top: 2rem; /* Espaçamento acima dos títulos de seção */
    margin-bottom: 1rem;
    color: var(--cor-primaria-cinza);
    border-bottom: 2px solid var(--cor-destaque-vermelho); /* Linha de destaque abaixo do H2 */
    padding-bottom: 0.5rem;
    display: inline-block; /* Para a borda não ocupar a largura toda */
}

#conteudo-canal-denuncias h2:first-of-type {
    margin-top: 0; /* Remove margem do primeiro H2 da seção */
}

/* Linha divisória mais curta e sutil entre seções de texto */
.divisor-secao-curto {
    border: 0;
    height: 1px;
    background-color: var(--cor-borda-sutil);
    width: 100px; /* Largura da linha */
    margin: 2.5rem auto; /* Centraliza e dá espaçamento */
}

/* Estilos para a lista de exemplos do que pode ser denunciado */
.lista-denuncias {
    list-style-type: disc; /* Ou none se preferir sem marcadores e usar ícones */
    padding-left: 20px; /* Recuo para os marcadores */
    margin-bottom: 1.5rem;
}

.lista-denuncias li {
    margin-bottom: 0.6em;
    line-height: 1.6;
    color: var(--cor-texto-escuro);
}

/* Estilos para os blocos de contato (E-mail e WhatsApp) */
.canal-contato-item {
    background-color: var(--cor-cinza-claro);
    padding: 1.2rem 1.5rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border: 1px solid var(--cor-borda-sutil);
    transition: box-shadow 0.3s ease;
}

.canal-contato-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.canal-contato-item p {
    margin-bottom: 0.3rem; /* Menor margem para parágrafos dentro do item */
    display: flex; /* Para alinhar ícone e texto */
    align-items: center;
}

.canal-contato-item i {
    font-size: 1.6rem; /* Tamanho dos ícones de contato */
    color: var(--cor-destaque-vermelho);
    margin-right: 12px;
    min-width: 25px; /* Para garantir alinhamento se os ícones tiverem larguras diferentes */
    text-align: center;
}

.canal-contato-item strong {
    font-size: 1.05rem;
    color: var(--cor-primaria-cinza);
    font-weight: 600;
    margin-right: 0.5em;
}

.canal-contato-item a {
    font-weight: 600;
    color: var(--cor-destaque-vermelho); /* Cor do link igual à dos ícones */
    text-decoration: none;
    word-break: break-all; /* Para quebrar e-mails ou números longos */
}

.canal-contato-item a:hover {
    text-decoration: underline;
    color: var(--cor-vermelho-hover);
}

/* Responsividade para a página Canal de Denúncias */
@media (max-width: 768px) {
    #conteudo-canal-denuncias h2 {
        font-size: 1.6rem;
    }
    .canal-contato-item p {
        font-size: 0.95rem; /* Ajuste o tamanho da fonte nos itens de contato */
    }
    .canal-contato-item i {
        font-size: 1.4rem;
    }
}


/* ==========================================================================
   Responsividade Específica - Página Remineralizador
   (Adicione dentro das @media queries existentes no final do seu style.css)
   ========================================================================== */

/* Dentro de @media (max-width: 992px) {...} */
@media (max-width: 992px) {
    /* ... (outros estilos responsivos) ... */

    /* Ajusta Hero Interna */
    .hero-pagina-interna h1 {
        font-size: 2.5rem;
    }

    .hero-pagina-interna .subtitulo-hero {
        font-size: 1.1rem;
    }

    /* Ajusta Título Centralizado */
    .titulo-secao-centralizado {
        font-size: 1.8rem;
    }

    /* Ajusta layout de 2 colunas */
    .coluna-layout-imagem-texto {
        flex-direction: column;
        text-align: center;
    }

    .coluna-imagem,
    .coluna-texto {
        max-width: 100%;
        flex-basis: auto;
    }

    .coluna-texto .titulo-secao {
        text-align: center;
    }

    /* Centraliza título */
    .destaque-mapa {
        margin-top: 1.5rem;
    }

    /* Ajusta grid de benefícios */
    .beneficios-grid {
        gap: 1.5rem;
    }

    .beneficio-item {
        padding: 1.5rem 1rem;
    }

    /* Ajusta grid de composição */
    .composicao-grid {
        gap: 1rem;
    }

    .mineral-item {
        padding: 1rem 0.5rem;
    }

    .mineral-formula {
        font-size: 1rem;
    }

    .mineral-valor {
        font-size: 1.2rem;
    }

    /* Ajusta FAQ */
    .faq-item summary {
        padding: 0.8rem 1rem;
    }

    .faq-item summary::after {
        right: 1rem;
        font-size: 1.3rem;
    }

    .faq-item p {
        padding: 0 1rem 1rem 1rem;
    }
}

/* Dentro de @media (max-width: 480px) {...} */
@media (max-width: 480px) {
    /* ... (outros estilos responsivos) ... */

    #hero-remineralizador h1 {
        font-size: 2rem;
    }

    /* Título ainda menor */
    .hero-pagina-interna h1 {
        font-size: 2.2rem;
    }

    /* Garante que outros títulos não sejam afetados se não definidos */
    .hero-pagina-interna .subtitulo-hero {
        font-size: 1rem;
    }

    .titulo-secao-centralizado {
        font-size: 1.6rem;
    }

    .coluna-texto .titulo-secao {
        font-size: 1.6rem;
    }

    .beneficios-grid {
        grid-template-columns: 1fr;
    }

    /* Uma coluna */
    .composicao-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Duas colunas */
}

/* ==========================================================================
   . Botão Voltar ao Topo
   ========================================================================== */
#botao-voltar-topo {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--cor-destaque-vermelho);
    color: var(--cor-texto-claro);
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 1.8rem;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    padding: 0;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

#botao-voltar-topo.mostrar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#botao-voltar-topo:hover {
    background-color: var(--cor-vermelho-hover);
}


/* ==========================================================================
   . Botão Flutuante de Contato e Pop-up (ATUALIZADO)
========================================================================== */

/* Estilos para o Botão Flutuante de Contato */
.botao-contato-flutuante {
    position: fixed;
    bottom: 75px;
    /* Mantido da sua configuração anterior */
    right: 20px;
    /* Mantido da sua configuração anterior */
    background-color: var(--cor-destaque-vermelho);
    color: var(--cor-texto-claro);
    width: 50px;
    /* Mantido da sua configuração anterior */
    height: 50px;
    /* Mantido da sua configuração anterior */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    /* Ajustado ligeiramente para o ícone bi-chat-dots-fill */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 999;

    /* NOVOS ESTILOS PARA ANIMAÇÃO DE APARIÇÃO COM SCROLL */
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px) scale(0.8);
    /* Começa um pouco abaixo, menor e invisível */
    /* Transição para todas as propriedades que mudam */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s, background-color 0.3s ease;
}

/* NOVA CLASSE para mostrar o botão flutuante com scroll */
.botao-contato-flutuante.mostrar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
    /* Reseta o delay da visibilidade ao mostrar */
}

.botao-contato-flutuante:hover {
    background-color: var(--cor-vermelho-hover);
    transform: scale(1.1);
    /* Efeito de hover original */
}

/* Garante que o transform do hover não afete o translateY(0) quando visível */
.botao-contato-flutuante.mostrar:hover {
    transform: scale(1.1) translateY(0);
}

.botao-contato-flutuante i {
    pointer-events: none;
}

/* Estilos para o Pop-up de Contato (ANIMAÇÃO REFINADA) */
.popup-contato {
    position: fixed;
    /* Ajuste 'bottom' para ficar acima do botão flutuante + um espaço 
       Se o botão está em bottom: 75px e tem 50px de altura, o pop-up pode começar em 75+50+10 = 135px */
    bottom: 135px;
    right: 20px;
    /* Alinhado com o botão flutuante */
    width: 300px;
    /* Um pouco menor para um visual mais compacto, ajuste se necessário */
    background-color: #fff;
    border-radius: 8px;
    /* Borda um pouco menor */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    /* Sombra mais suave e difundida */
    z-index: 1000;
    /* Acima do botão flutuante */
    overflow: hidden;
    /* Mantém para cantos arredondados */

    display: flex;
    /* Usar flex e controlar com opacity/visibility/transform */
    flex-direction: column;

    /* Estado inicial da animação */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.95);
    /* Começa um pouco para baixo e menor */
    pointer-events: none;
    /* Não interage quando escondido */
    /* Transição mais suave para opacity e transform, e visibility atrasada */
    transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
        transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
        visibility 0s linear 0.25s;
}

.popup-contato.ativo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    /* Estado final da animação */
    pointer-events: auto;
    /* Permite interação */
    transition-delay: 0s;
    /* Remove delay da visibility ao mostrar */
}

.popup-contato-header {
    background-color: var(--cor-primaria-cinza);
    color: var(--cor-texto-claro);
    padding: 10px 15px;
    /* Padding um pouco menor */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: 0.95rem;
    /* Tamanho do título do header do pop-up */
}

/* Botão de fechar MELHORADO */
.fechar-popup-contato {
    background: none;
    border: none;
    color: var(--cor-texto-claro);
    font-size: 1.3rem;
    /* Tamanho do ícone Bootstrap bi-x-lg */
    line-height: 1;
    cursor: pointer;
    padding: 8px;
    /* Aumenta a área de clique */
    border-radius: 50%;
    /* Para efeito de hover circular */
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.fechar-popup-contato:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    /* Fundo sutil no hover */
    transform: scale(1.1);
    /* Leve aumento */
}

.fechar-popup-contato i {
    display: block;
    /* Para melhor alinhamento do ícone */
    pointer-events: none;
    /* Se o clique estiver no botão */
}


.popup-contato-body {
    padding: 15px;
    /* Padding um pouco menor */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popup-contato-body p {
    margin-bottom: 8px;
    font-size: 0.9rem;
    /* Texto um pouco menor */
    color: var(--cor-cinza-medio);
    text-align: center;
}

.botao-opcao-contato {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    /* Padding um pouco menor */
    background-color: var(--cor-fundo-claro);
    /* Usar o fundo claro padrão */
    color: var(--cor-texto-escuro);
    text-decoration: none;
    border-radius: 5px;
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: 0.9rem;
    /* Texto um pouco menor */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    text-align: left;
    border: 1px solid var(--cor-borda-sutil);
}

.botao-opcao-contato:hover {
    background-color: var(--cor-cinza-claro);
    /* Usar o cinza claro da paleta */
    text-decoration: none;
    color: var(--cor-destaque-vermelho);
    border-color: #d0d0d0;
    /* Borda um pouco mais escura no hover */
    transform: translateY(-1px);
    /* Leve elevação */
}

.botao-opcao-contato i {
    font-size: 1.1em;
    /* Ajustar tamanho do ícone dentro do botão */
    color: var(--cor-destaque-vermelho);
}

/* Responsividade simples para o pop-up (ajustado bottom) */
@media (max-width: 400px) {
    .popup-contato {
        width: calc(100% - 30px);
        /* Largura maior, menos margem */
        right: 15px;
        /* Se o botão flutuante está em right:20px e tem 50px, e o popup 135px de bottom...
           Talvez o bottom aqui precise ser maior se o botão flutuante mudar de 'bottom' */
        bottom: 130px;
        /* Ajustado em relação ao novo 'bottom' do botão flutuante */
    }

    .botao-contato-flutuante {
        bottom: 75px;
        /* Em telas muito pequenas, o botão de topo pode estar mais acima */
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .popup-contato {
        bottom: 125px;
        /* Ajustado para o novo bottom do botão flutuante em mobile */
    }
}

/* ==========================================================================
   . Componentes Adicionais / Efeitos
   ========================================================================== */

/* --- Barra de Progresso de Carregamento --- */
#page-load-progress-bar-container {
    position: fixed;
    /* Fica fixa no topo */
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    /* Altura fina para a barra */
    z-index: 9999;
    /* Garante que fique acima de todos */
    background-color: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    /* Não bloqueia cliques */
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
    /* Transição para desaparecer */
}

#page-load-progress-bar {
    height: 100%;
    width: 0%;
    /* Começa com largura 0 */
    background-color: var(--cor-destaque-vermelho);
    /* Cor vermelha */
    border-radius: 0 2px 2px 0;
    position: relative;
    /* Transição controlada via JS */
}

/* "Bolinha" na ponta da barra */
#page-load-progress-bar::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 14px;
    height: 14px;
    background-color: var(--cor-destaque-vermelho);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.8), 0 0 5px rgba(204, 0, 0, 0.6);
    /* Brilho */
}

/* Estilo para esconder a barra via JS */
#page-load-progress-bar-container.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ==========================================================================
   1X. Estilos Específicos da Página Trabalhe Conosco (trabalhe-conosco.html)
   ========================================================================== */

/* --- Hero Section da Página Trabalhe Conosco --- */
#hero-trabalhe-conosco {
    /* A classe .hero-pagina-interna e o style inline 
       (min-height: 40vh; background-color: var(--cor-primaria-cinza);)
       já devem cuidar da altura e cor de fundo base. 
       O min-height: 40vh é bom para não ocupar demais a tela em mobile.
    */
}

/* --- Layout Principal do Conteúdo da Página --- */
#conteudo-trabalhe-conosco { /* ID da section que contém o grid */
    /* Herda padding de .secao-conteudo-interno (que é padding: 4rem 0;)
       Isso pode ser muito em telas pequenas. Podemos ajustar na media query.
    */
}

.trabalhe-conosco-grid {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna por padrão (mobile-first) */
    gap: 2.5rem;                /* Espaçamento inicial */
    align-items: start;         
}

/* Em telas maiores (tablets em paisagem e desktops pequenos) */
@media (min-width: 769px) { /* Ajustado de 992px para talvez pegar tablets em paisagem antes */
    .trabalhe-conosco-grid {
        grid-template-columns: 1fr 1.2fr; 
        gap: 3rem; 
    }
}

/* --- Bloco de Texto de Atração (esquerda) --- */
.texto-atracao h2 {
    font-size: 1.8rem; 
    margin-bottom: 1.2rem;
    color: var(--cor-primaria-cinza);
    font-weight: 700; 
}

.texto-atracao p {
    margin-bottom: 1.2rem;
    line-height: 1.7;
    color: var(--cor-texto-escuro);
}

.texto-atracao h3 { 
    font-size: 1.3rem; 
    margin-top: 2.5rem; 
    margin-bottom: 0.75rem;
    color: var(--cor-primaria-cinza);
    font-weight: 700;
}
.texto-atracao h3:first-of-type { 
    margin-top: 0; 
}

.texto-atracao p i { 
    margin-right: 0.6em;
    color: var(--cor-destaque-vermelho);
    vertical-align: middle; 
    font-size: 1.1em;
}
.texto-atracao p a { 
    color: var(--cor-destaque-vermelho);
    font-weight: 600;
    text-decoration: none;
    word-break: break-all; /* Para quebrar e-mails longos */
}
.texto-atracao p a:hover {
    color: var(--cor-vermelho-hover);
    text-decoration: underline;
}

/* --- Bloco do Formulário (direita) --- */
.form-trabalhe-conosco {
    background-color: var(--cor-cinza-claro); 
    padding: 2rem 2.5rem; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.form-trabalhe-conosco h3 { 
    font-size: 1.8rem; 
    margin-bottom: 0.75rem; 
    color: var(--cor-primaria-cinza);
    text-align: left; 
}

.form-trabalhe-conosco > p { /* Parágrafo de instrução */
    margin-bottom: 2rem; 
    font-size: 0.95rem;
    color: var(--cor-cinza-medio);
    line-height: 1.6;
}

/* Container para o JotForm */
.form-trabalhe-conosco .jotform-container {
    margin-top: 1rem; 
    border: 1px solid var(--cor-borda-sutil); 
    border-radius: 6px;
    overflow: hidden; 
    min-height: 600px; /* Altura mínima base, o script do Jotform tenta ajustar */
                       /* Verifique se o seu formulário Jotform tem um background próprio, 
                          senão pode ser útil adicionar background-color: #fff; aqui */
}

.form-trabalhe-conosco .jotform-container iframe { 
    display: block; 
    width: 100% !important; 
    border: none !important; 
    /* A altura será controlada pelo script do JotForm ou pelo min-height do container */
}

/* === Media Queries para Responsividade === */

/* Telas Médias (Tablets em retrato, celulares grandes em paisagem) */
@media (max-width: 991px) { /* Ponto de quebra antes do grid de 2 colunas */
    #conteudo-trabalhe-conosco {
        padding: 3rem 0; /* Reduz padding da seção */
    }
    .trabalhe-conosco-grid {
        gap: 2rem; 
    }
    .form-trabalhe-conosco {
        padding: 1.5rem 2rem; 
    }
    .texto-atracao h2,
    .form-trabalhe-conosco h3 {
        font-size: 1.6rem;
    }
    .texto-atracao h3 {
        font-size: 1.2rem;
        margin-top: 2rem;
    }
     .form-trabalhe-conosco .jotform-container {
        min-height: 700px; /* Pode precisar de mais altura quando o form se estica */
    }
}

/* Telas Pequenas (Celulares em paisagem e retrato) */
@media (max-width: 768px) {
    #conteudo-trabalhe-conosco {
        padding: 2.5rem 0; /* Mais redução no padding */
    }
    .form-trabalhe-conosco {
        padding: 1.5rem; 
    }
    .texto-atracao h2,
    .form-trabalhe-conosco h3 {
        font-size: 1.5rem; /* Títulos um pouco menores */
    }
    .texto-atracao p {
        font-size: 0.95rem; /* Texto do parágrafo um pouco menor */
    }
     .texto-atracao h3 {
        font-size: 1.1rem;
    }
     .form-trabalhe-conosco .jotform-container {
        min-height: 750px; /* Formulários geralmente ficam mais altos em telas estreitas */
    }
}

/* Telas Muito Pequenas (Celulares em retrato) */
@media (max-width: 480px) {
    #hero-trabalhe-conosco {
        min-height: 30vh; /* Hero ainda menor */
    }
    #hero-trabalhe-conosco h1 {
        font-size: 1.8rem; /* Título da hero menor */
    }
    #hero-trabalhe-conosco .subtitulo-hero {
        font-size: 1rem;
    }
    #conteudo-trabalhe-conosco {
        padding: 2rem 0;
    }
    .form-trabalhe-conosco {
        padding: 1rem; /* Padding mínimo */
    }
    .texto-atracao h2,
    .form-trabalhe-conosco h3 {
        font-size: 1.4rem;
    }
     .texto-atracao h3 {
        font-size: 1.1rem;
        margin-top: 1.5rem;
    }
    .texto-atracao p {
        font-size: 0.9rem;
    }
    .form-trabalhe-conosco > p { /* Instrução do formulário */
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    .form-trabalhe-conosco .jotform-container {
        min-height: 800px; /* Pode precisar de bastante altura se os campos do Jotform se empilharem muito */
        border: none; /* Remover borda em telas muito pequenas se preferir */
    }
}

/* ==========================================================================
   . Media Queries (Responsividade)
   ========================================================================== */

/* --- Breakpoint Principal (Tablet e Mobile Grande) --- */
@media (max-width: 992px) {

    /* --- Header Responsivo --- */
    .menu-principal {
        /* display: none; <-- REMOVIDO */
        position: absolute;
        top: var(--altura-cabecalho);
        /* Abaixo do header */
        left: 0;
        width: 100%;
        background-color: var(--cor-fundo-header);
        /* <<< FUNDO CLARO */
        border-top: 1px solid var(--cor-borda-sutil);
        /* Borda superior sutil */
        flex-direction: column;
        padding-bottom: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        /* Sombra um pouco mais forte */

        /* --- ANIMAÇÃO DE ENTRADA --- */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        /* Começa um pouco acima */
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
        /* --- FIM ANIMAÇÃO --- */
    }

    .menu-principal.ativo {
        /* display: flex; <-- REMOVIDO */
        /* --- ESTADO ATIVO DA ANIMAÇÃO --- */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        /* Desliza para a posição correta */
        /* --- FIM ESTADO ATIVO --- */
        display: flex;
        /* Garante o layout flex quando visível */
    }

    /* Itens Principais do Menu Mobile */
    .menu-principal ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .menu-principal ul li {
        margin-left: 0;
        width: 100%;
        text-align: left;
        /* Alinhado à esquerda */
        border-bottom: 1px solid var(--cor-borda-sutil);
        /* Borda sutil clara */
    }

    .menu-principal ul li:last-child {
        border-bottom: none;
    }

    /* Links Principais do Menu Mobile */
    .menu-principal ul li a {
        padding: 1rem 1.5rem;
        width: 100%;
        color: var(--cor-primaria-cinza);
        /* <<< TEXTO ESCURO */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
    }

    .menu-principal ul li.dropdown>a {
        justify-content: space-between;
        /* Seta na direita */
    }

    .menu-principal ul li.dropdown>a .dropdown-arrow {
        stroke: var(--cor-primaria-cinza);
        /* <<< SETA ESCURA */
        margin-left: 0.5rem;
    }

    /* Link Ativo */
    .menu-principal ul li a.active {
        color: var(--cor-destaque-vermelho);
        /* Mantém vermelho */
    }

    .menu-principal ul li a.active::after {
        display: none;
    }

    /* Link Pai do Dropdown Aberto */
    .menu-principal ul li.dropdown.submenu-aberto>a {
        color: var(--cor-destaque-vermelho);
        /* Mantém vermelho */
    }

    .menu-principal ul li.dropdown.submenu-aberto>a .dropdown-arrow {
        stroke: var(--cor-destaque-vermelho);
        /* Seta vermelha quando aberto */
    }

    /* --- ESTILOS DO SUBMENU MOBILE (Fundo Claro) --- */
    .menu-principal ul li.dropdown .submenu {
        display: none;
        position: static;
        width: 100%;
        background-color: var(--cor-cinza-claro);
        /* <<< Fundo Cinza Claro */
        padding: 0;
        box-shadow: none;
        border-top: 1px solid var(--cor-borda-sutil);
        /* Borda sutil */
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        border-radius: 0;
    }

    .menu-principal ul li.dropdown.submenu-aberto .submenu {
        display: block;
    }

    /* Links do Submenu no Mobile */
    .submenu li a {
        display: block;
        position: relative;
        padding: 0.8rem 1rem 0.8rem 3em;
        /* Padding para ícone */
        color: var(--cor-primaria-cinza);
        /* <<< TEXTO ESCURO */
        text-align: left;
        white-space: normal;
    }

    /* Ícones do Submenu no Mobile */
    .submenu li a i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--cor-destaque-vermelho);
        /* Ícone vermelho */
        font-size: 1.1em;
        line-height: 1;
        transition: color 0.2s ease;
    }

    /* Hover no Submenu Mobile */
    .submenu li a:hover {
        background-color: var(--cor-borda-sutil);
        /* <<< Hover CINZA MAIS CLARO */
        color: var(--cor-destaque-vermelho);
        /* Texto vermelho */
    }

    .submenu li a:hover i {
        color: var(--cor-destaque-vermelho);
    }

    /* Ícone vermelho */
    /* Borda no Submenu Mobile */
    .submenu li {
        border-top-color: var(--cor-borda-sutil);
        /* Borda sutil */
        margin: 0;
        padding: 0;
    }

    .submenu li:first-child {
        border-top: none;
    }

    /* --- FIM DOS ESTILOS DO SUBMENU MOBILE --- */

    /* Mostra o botão hamburguer */
    .menu-mobile-icone {
        display: block;
        color: var(--cor-primaria-cinza);
        /* Cor escura */
    }

    /* --- Outras Seções Responsivas (sem mudanças aqui) --- */
    /* Hero Sections Responsivas */
    #hero-section h1,
    .hero-pagina-interna h1 {
        font-size: 2.5rem;
    }

    #hero-section .slogan,
    .hero-pagina-interna .subtitulo-hero {
        font-size: 1.1rem;
    }

    .hero-pagina-interna {
        min-height: 50vh;
        padding: 3rem 0;
    }

    /* Seções Homepage Responsivas */
    .destaque-remineralizador-conteudo,
    .sobre-nos-grid {
        flex-direction: column;
        text-align: center;
    }

    #destaque-remineralizador {
        padding: 2.5rem 0;
        /* <<< Reduz o padding vertical da seção */
    }

    .destaque-remineralizador-conteudo {
        flex-direction: column;
        text-align: center;
        /* Garante centralização horizontal */
        gap: 1.5rem;
        /* Define o espaço entre imagem e bloco de texto */
    }

    .destaque-remineralizador-img {
        flex-basis: auto;
        /* Reset flex-basis */
        width: 90%;
        /* Controla largura da imagem */
        max-width: 400px;
        /* Limita largura máxima */
        margin: 0 auto;
        /* Centraliza container da imagem */
    }

    .destaque-remineralizador-img img {
        max-width: 100%;
        margin-bottom: 0;
        /* Remove margem inferior da imagem (gap controla) */
    }

    .destaque-remineralizador-texto {
        max-width: 100%;
        /* Garante largura total */
        flex-basis: auto;
        /* Reset flex-basis */
        /* Remover flex se adicionamos antes */
        /* display: block; */
        /* flex-direction: initial; */
        /* justify-content: initial; */
    }

    /* Garante que o parágrafo e o botão estejam centralizados */
    #destaque-remineralizador .destaque-remineralizador-texto p {
        text-align: center;
        max-width: 500px;
        /* Limita largura do texto para leitura */
        margin-left: auto;
        margin-right: auto;
        font-size: 1.1rem;
        /* Tamanho um pouco menor no mobile */
    }

    #destaque-remineralizador .destaque-remineralizador-texto .cta-button {
        margin-top: 1.5rem;
        /* Espaço acima do botão */
        /* Já é inline-block e text-align:center no pai deve centralizar */
    }

    .destaque-remineralizador-img img,
    .sobre-nos-imagem img {
        max-width: 100%;
        margin-bottom: 1.5rem;
    }

    .card {
        flex-basis: 100%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Timeline Responsiva */
    .timeline::before {
        left: 8px;
        width: 2px;
    }

    .timeline-item {
        padding-left: 40px;
        padding-bottom: 20px;
    }

    .timeline-marker {
        left: -7px;
        width: 20px;
        height: 20px;
        top: 18px;
        border-width: 3px;
        box-shadow: 0 0 0 3px var(--cor-fundo-header);
    }

    .timeline-content {
        padding: 1rem;
    }

    .timeline-content::before {
        top: 18px;
        left: -8px;
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-right-width: 8px;
    }

    .timeline-ano {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }

    .timeline-content h3 {
        font-size: 1.2rem;
    }

    .timeline-content p {
        font-size: 0.9rem;
    }

    /* Empresas Empilhadas Responsivas */
    .empresa-secao {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 3rem;
        padding: 1rem 0 2.5rem 0;
        border-bottom-width: 2px;
    }

    #apresentacao-empresas .container>.empresa-secao:last-of-type {
        padding-bottom: 1rem;
    }

    .empresa-imagem,
    .empresa-texto {
        flex-basis: auto;
        max-width: 100%;
    }

    .empresa-secao.layout-invertido .empresa-imagem,
    .empresa-secao.layout-invertido .empresa-texto {
        order: initial;
    }

    .empresa-texto {
        text-align: center;
    }

    .empresa-texto h3 {
        font-size: 1.6rem;
    }

    /* Título Seção Responsivo */
    .titulo-secao-centralizado {
        font-size: 1.8rem;
    }

    /* Contato Page Responsiva (Tablet) */
    #conteudo-contato .container {
        width: 95%;
    }

    .contato-layout-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .contato-form-container .titulo-secao,
    .outros-contatos-container .titulo-secao,
    .mapa-container h3.subtitulo-contato {
        text-align: center;
    }

    .outros-contatos-container {
        margin-top: 2rem;
    }

    /* Remineralizador - Responsivo */
    .coluna-layout-imagem-texto {
        flex-direction: column;
        text-align: center;
    }

    .coluna-imagem,
    .coluna-texto {
        max-width: 100%;
        flex-basis: auto;
    }

    .coluna-texto .titulo-secao {
        text-align: center;
    }

    .destaque-mapa {
        margin-top: 1.5rem;
    }

    .beneficios-grid {
        gap: 1.5rem;
    }

    .beneficio-item {
        padding: 1.5rem 1rem;
    }

    .composicao-grid {
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .mineral-item {
        padding: 1rem 0.5rem;
    }

    .mineral-formula {
        font-size: 1rem;
    }

    .mineral-valor {
        font-size: 1.2rem;
    }

    .faq-item summary {
        padding: 0.8rem 1rem;
    }

    .faq-item summary::after {
        right: 1rem;
        font-size: 1.3rem;
    }

    .faq-item p {
        padding: 0 1rem 1rem 1rem;
    }

}

/* Fim @media 992px */


/* --- Breakpoint Mobile Médio/Pequeno --- */
@media (max-width: 768px) {

    /* Ajustes Gerais */
    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    /* Contato Page Adjustments */
    .contato-layout-grid {
        gap: 2rem;
    }

    .mapa-container iframe {
        height: 250px;
    }

    .form-grupo label {
        font-size: 0.95rem;
    }

    .form-grupo input[type="text"],
    .form-grupo input[type="email"],
    .form-grupo input[type="tel"],
    .form-grupo select,
    .form-grupo textarea {
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
    }

    .form-grupo-checkbox {
        align-items: flex-start;
        gap: 0.4rem;
    }

    .form-grupo-checkbox label {
        font-size: 0.85rem;
    }

    .info-contato-item {
        gap: 0.8rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .info-contato-item i {
        font-size: 1.3rem;
        margin-top: 0.1rem;
    }

    .info-contato-item div {
        font-size: 0.95rem;
    }

    .descricao-com-botao {
        flex-direction: column;
        /* Empilha texto e botão */
        align-items: center;
        /* Centraliza horizontalmente os itens empilhados */
        gap: 1.5rem;
        /* Espaço vertical entre texto e botão */
    }

    .descricao-com-botao .empresa-descricao {
        text-align: center;
        /* Centraliza o texto do parágrafo */
        min-width: 100%;
        /* Ocupa a largura disponível */
        flex-basis: auto;
        /* Reseta a base flex */
    }

    .descricao-com-botao .cta-button-secundario.btn-ao-lado {
        align-self: center;
        /* Garante centralização do botão */
    }

}

/* Fim @media 768px */


/* --- Breakpoint Mobile Pequeno --- */
@media (max-width: 576px) {

    /* Empresas: Botão ao Lado da Descrição */
    .descricao-com-botao {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .descricao-com-botao .empresa-descricao {
        text-align: center;
        min-width: 100%;
    }

    .descricao-com-botao .cta-button-secundario.btn-ao-lado {
        align-self: center;
        width: auto;
    }
}

/* Fim @media 576px */


/* --- Breakpoint Mobile Muito Pequeno --- */
@media (max-width: 480px) {

    /* Ajustes Gerais */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    #hero-section h1,
    .hero-pagina-interna h1 {
        font-size: 2.2rem;
    }

    #hero-remineralizador h1 {
        font-size: 2rem;
    }

    #hero-section .slogan,
    .hero-pagina-interna .subtitulo-hero {
        font-size: 1rem;
    }

    .cta-button,
    .cta-button-secundario {
        padding: 0.7em 1.5em;
        font-size: 0.9rem;
    }

    /* Timeline */
    .timeline-item {
        padding-left: 35px;
    }

    .timeline-marker {
        left: -9px;
    }

    /* Remineralizador */
    .beneficios-grid {
        grid-template-columns: 1fr;
    }

    .composicao-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contato */
    .mapa-container iframe {
        height: 200px;
    }

    .form-grupo input[type="text"],
    .form-grupo input[type="email"],
    .form-grupo input[type="tel"],
    .form-grupo select,
    .form-grupo textarea {
        font-size: 0.9rem;
    }

    .form-grupo-checkbox label {
        font-size: 0.8rem;
    }

    .info-contato-item i {
        font-size: 1.2rem;
    }

    .info-contato-item div {
        font-size: 0.9rem;
    }
}

/* Fim @media 480px */