/* Variáveis de Cor */
:root {
    --azul-escuro: #0b4d73;
    --amarelo-dourado: #dfa933;
    --cor-texto-principal: #333333; /* Cor para texto comum */
    --cor-texto-claro: #ffffff;
    --cor-fundo-claro: #f4f4f4;
    --cor-fundo-alternativo: #e9ecef;
}

/* Reset básico e configurações globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Faz o padding e a borda não aumentarem o tamanho total do elemento */
}

body {
    font-family: 'Roboto', sans-serif; /* Usando a fonte importada */
    line-height: 1.6;
    color: var(--cor-texto-principal);
    background-color: #ffffff; /* Fundo branco padrão para o corpo */
    overflow-x: hidden; /* Evita scroll horizontal desnecessário */
}

html {
    scroll-behavior: smooth;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

section[id] {
    scroll-margin-top: 130px; /* Valor padrão para todas as seções */
}

#sobre-app {
    scroll-margin-top: 150px !important; /* Valor específico para esta seção */
    padding-top: 150px; /* Adiciona padding real se necessário */
}

.container {
    width: 90%; /* Largura do conteúdo principal */
    max-width: 1100px; /* Largura máxima */
    margin: 0 auto; /* Centraliza o container na página */
    padding: 20px 0; /* Espaçamento interno vertical */
}

h1, h2, h3 {
    margin-bottom: 1rem; /* Espaçamento abaixo dos títulos */
    color: var(--azul-escuro); /* Títulos com a cor azul escura principal */
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none; /* Remove sublinhado padrão dos links */
    color: var(--amarelo-dourado); /* Links com a cor amarela dourada */
}

img {
    max-width: 100%; /* Torna as imagens responsivas por padrão */
    height: auto;
}

/* Estilos do Cabeçalho */
.header {
    background-color: var(--azul-escuro);
    color: var(--cor-texto-claro);
    padding: 15px 0;
    position: fixed; /* Faz o cabeçalho ficar fixo no topo */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Garante que o cabeçalho fique sobre outros elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil */
}

.header .container {
    display: flex; /* Alinha a logo e o menu na mesma linha */
    justify-content: space-between; /* Espaça a logo para um lado e o menu para o outro */
    align-items: center; /* Centraliza verticalmente */
    padding-top: 0; /* Remove padding superior do container específico do header */
    padding-bottom: 0; /* Remove padding inferior */
}

.header .logo {
    font-size: 1.8rem; /* Tamanho da fonte da logo */
    font-weight: 700; /* Peso da fonte */
    color: var(--amarelo-dourado); /* Logo com a cor amarela */
}

.header .nav-menu a {
    color: var(--cor-texto-claro);
    margin-left: 20px; /* Espaçamento entre os itens do menu */
    font-weight: 500;
    transition: color 0.3s ease; /* Transição suave da cor ao passar o mouse */
}

.header .nav-menu a:hover {
    color: var(--amarelo-dourado); /* Muda a cor ao passar o mouse */
}

/* Estilos da Seção Hero */
.hero-section {
    background-color: var(--azul-escuro); /* Fundo azul escuro */
    color: var(--cor-texto-claro);
    /* Para o estilo "tela cheia" como Letterboxd, a primeira seção geralmente ocupa a altura da tela */
    min-height: 100vh; /* Altura mínima de 100% da altura da viewport (tela visível) */
    display: flex; /* Para centralizar o conteúdo verticalmente */
    align-items: center; /* Alinha itens no centro vertical */
    justify-content: center; /* Alinha itens no centro horizontal */
    text-align: center; /* Centraliza o texto dentro do container */
    padding-top: 80px; /* Espaçamento no topo para compensar o header fixo */
    padding-bottom: 40px;
}

.hero-section h1 {
    font-size: 2.8rem; /* Tamanho grande para o título principal */
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--cor-texto-claro); /* Título principal claro sobre fundo escuro */
}

.hero-section .subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85); /* Um pouco mais sutil que o branco puro */
}

.hero-section .cta-button {
    background-color: var(--amarelo-dourado);
    color: var(--azul-escuro); /* Texto escuro no botão amarelo */
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 5px; /* Cantos arredondados */
    text-transform: uppercase; /* Texto em maiúsculas */
    display: inline-block; /* Para que padding e margin funcionem corretamente */
    margin-bottom: 30px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transição suave */
}

.hero-section .cta-button:hover {
    background-color: #c89027; /* Um tom de amarelo um pouco mais escuro no hover */
    transform: translateY(-2px); /* Efeito de leve elevação */
}

.search-icon-mobile {
    display: none; /* Escondido por padrão (no desktop) */
    /* Estilos básicos para o botão ícone que serão usados no mobile: */
    background-color: var(--amarelo-dourado);
    color: var(--azul-escuro);
    border: none;
    padding: 0 15px; /* Ajuste conforme o tamanho do ícone e do input */
    cursor: pointer;
    border-radius: 0 8px 8px 0; /* Para arredondar o canto direito junto com o input */
    font-size: 1.2rem; /* Tamanho da lupa */
    height: 50px; /* Tente igualar à altura do .search-bar */
    align-self: stretch; /* Para esticar na altura do grid se for o caso */
}

.search-container {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo levemente transparente */
    padding: 20px;
    border-radius: 8px;
    margin-top: 2rem;
    display: flex; /* Para alinhar barra de busca, filtro e botão */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha em telas menores */
    gap: 15px; /* Espaçamento entre os itens */
    align-items: center;
    justify-content: center;
}

.search-bar {
    flex-grow: 1; /* Faz a barra de pesquisa ocupar o máximo de espaço possível */
    padding: 15px;
    font-size: 1rem;
    border: 1px solid var(--amarelo-dourado);
    border-radius: 5px;
    min-width: 300px; /* Largura mínima */
}

.filter-widget select,
.search-button {
    padding: 15px;
    font-size: 1rem;
    border: 1px solid var(--amarelo-dourado);
    border-radius: 5px;
    background-color: var(--cor-texto-claro);
    color: var(--cor-texto-principal);
}

.filter-widget select {
    padding: 18px;
    font-size: 1rem;
    border-radius: 8px;
    min-width: 180px;
}

.search-button {
    background-color: var(--amarelo-dourado);
    color: var(--azul-escuro);
    font-weight: 700;
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    transition: background-color 0.3s ease;
}

.search-button:hover {
    background-color: #c89027;
}

/* Estilos da Seção de Serviços */
.services-section {
    padding: 60px 0; /* Espaçamento interno vertical */
    background-color: var(--cor-fundo-claro); /* Um fundo levemente diferente para destacar a seção */
}

.services-section h2 {
    text-align: center; /* Centraliza o título da seção */
    font-size: 2.2rem;
    margin-bottom: 40px;
    overflow-wrap: break-word; 
    word-wrap: break-word; 
}

/* Substitua o estilo anterior da .services-grid por este */
.services-grid {
    display: flex; /* Muda de Grid para Flexbox */
    overflow-x: auto; /* Permite a rolagem horizontal */
    overflow-y: hidden; /* Esconde a rolagem vertical se houver */
    gap: 25px; /* Espaçamento entre os cards */
    padding: 20px 5px; /* Adiciona um pouco de padding para a barra de rolagem não cortar os cards */
    /* Para um efeito de "snap" (opcional, pode não funcionar em todos os navegadores perfeitamente): */
    /* scroll-snap-type: x mandatory; */
}

/* Estilo para a barra de rolagem (opcional, visual) */
.services-grid::-webkit-scrollbar {
    height: 8px; /* Altura da barra de rolagem */
}

.services-grid::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor da trilha */
    border-radius: 10px;
}

.services-grid::-webkit-scrollbar-thumb {
    background: #ccc; /* Cor do "polegar" da barra de rolagem */
    border-radius: 10px;
}

.services-grid::-webkit-scrollbar-thumb:hover {
    background: #bbb; /* Cor ao passar o mouse */
}

/* Substitua os estilos anteriores do .service-card por estes */
.service-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Borda um pouco mais suave */
    border-radius: 12px; /* Cantos um pouco mais arredondados */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    /* Para a rolagem horizontal, os cards precisam ter uma largura definida */
    min-width: 300px; /* Largura mínima do card */
    max-width: 320px; /* Largura máxima opcional */
    flex: 0 0 auto; /* Importante para flexbox em container com scroll */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.service-card .card-header-title {
    background-color: #f0f8ff; /* Um azul bem clarinho, tipo "AliceBlue" */
    padding: 12px 18px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.service-card .service-title {
    font-size: 1.15rem; /* Ajuste no tamanho da fonte do título */
    font-weight: 600; /* Um pouco menos pesado que 700 */
    color: var(--azul-escuro);
    margin-bottom: 0; /* Remove margem inferior padrão do h3 */
}

.service-card .card-body {
    padding: 15px 18px;
    flex-grow: 1; /* Faz o corpo do card ocupar o espaço restante */
}

.provider-info {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.provider-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%; /* Círculo perfeito */
    background-color: #e9ecef; /* Fundo cinza claro para a inicial */
    color: var(--cor-texto-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    margin-right: 12px;
}

.service-provider {
    font-size: 1rem;
    font-weight: 500;
    color: var(--cor-texto-principal);
}

.service-details p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 4px; /* Espaçamento menor entre as linhas de detalhes */
    line-height: 1.4;
}

.service-details .service-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--azul-escuro); /* Preço em azul escuro, como na imagem */
    margin-bottom: 8px; /* Um pouco mais de espaço abaixo do preço */
}

.service-card .card-footer {
    display: flex;
    justify-content: space-between; /* Alinha avaliação à esquerda e status à direita */
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid #e0e0e0;
    background-color: #fdfdfd; /* Fundo do rodapé do card levemente diferente */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.btn-detalhes {
    background-color: rgba(223, 169, 51, 0.1); /* Fundo amarelo dourado bem sutil */
    color: var(--amarelo-dourado); /* Texto na cor dourada */
    padding: 6px 12px;
    border-radius: 20px; /* Formato de pílula */
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease; /* Transição suave para tudo */
    cursor: pointer; /* Garante que o cursor mude para 'mãozinha' */
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Efeito sutil no ícone de seta dentro do botão */
.btn-detalhes .arrow-icon {
    transition: transform 0.3s ease;
}

/* Melhorando o Hover do Card Inteiro */
.service-card:hover {
    transform: translateY(-8px) scale(1.02); /* Aumenta um pouco mais o efeito de elevação e dá um leve zoom */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/* Quando o usuário passa o mouse sobre o CARD INTEIRO, o botão "Detalhes" reage */
.service-card:hover .btn-detalhes {
    background-color: var(--amarelo-dourado); /* Fundo fica sólido */
    color: var(--azul-escuro); /* Texto muda para azul escuro */
}

/* E a seta se move para a direita */
.service-card:hover .btn-detalhes .arrow-icon {
    transform: translateX(4px);
}

 .card-servico {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #f9f9f9;
}

.service-rating {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cor-texto-principal);
}

.service-rating .star-icon {
    color: var(--amarelo-dourado); /* Estrela amarela */
    font-size: 1.1rem; /* Tamanho da estrela */
    margin-right: 6px;
    line-height: 1; /* Para alinhar melhor a estrela com o texto */
}

.status-badge {
    font-size: 0.75rem; /* Texto pequeno para o badge */
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px; /* Badge bem arredondado */
    color: #333;
}

.status-badge.disponivel {
    background-color: #fff8e1; /* Amarelo bem clarinho, similar ao da imagem */
    color: #856404; /* Texto mais escuro para contraste no amarelo */
    border: 1px solid #ffecb3; /* Borda sutil para o badge */
}

/* Remover o estilo da imagem antiga se ainda existir no seu CSS */
/* .service-card .service-image { ... }  Pode apagar esse bloco */

/* Estilos das Seções de Informação */
.info-section {
    padding: 50px 0;
    text-align: center; /* Centraliza o texto por padrão nestas seções */
}

.info-section h2 {
    font-size: 2rem;
    margin-bottom: 30px;
}

.info-section p {
    max-width: 700px; /* Limita a largura do parágrafo para melhor legibilidade */
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Estilo para a seção com fundo alternativo, se houver */
.info-section.alternate-bg {
    background-color: var(--cor-fundo-alternativo); /* Ex: #e9ecef */
}

/* Estilos do Rodapé CTA */
.footer-cta {
    background-color: var(--azul-escuro);
    color: var(--cor-texto-claro);
    padding: 50px 0;
    text-align: center;
}

.footer-cta h2 {
    font-size: 2rem;
    color: var(--cor-texto-claro);
    margin-bottom: 15px;
}

.footer-cta p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

.app-download-buttons {
    display: flex; /* Alinha os botões lado a lado */
    justify-content: center; /* Centraliza os botões */
    align-items: center;
    flex-wrap: wrap; /* Permite quebrar linha em telas menores */
    gap: 20px; /* Espaçamento entre os botões */
}

.app-button {
    background-color: #ffffff; /* Fundo branco */
    color: var(--azul-escuro); /* Texto azul escuro, para contraste com o fundo branco */
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: 1px solid var(--azul-escuro); /* Borda sutil na cor azul escuro */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra leve opcional */
}

.app-button:hover {
    background-color: #f0f0f0; /* Um cinza bem claro no hover para o fundo */
    /* Ou você pode manter o fundo branco e apenas escurecer a borda/texto ou aumentar a sombra */
    /* color: var(--amarelo-dourado); */ /* Exemplo: Mudar cor do texto no hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.app-button img {
    width: 36px; /* Tamanho do ícone placeholder */
    height: 36px;
    /* Quando você tiver ícones reais, pode ajustar isso */
}

/* Ajustes para a seção de serviços em destaque */
.services-section .container {
    max-width: 1310px; /* Aumenta a largura máxima para esta seção específica */
    /* Se você quiser que ocupe ainda mais da tela em resoluções muito largas,
       você pode também aumentar a porcentagem da largura, por exemplo:
       width: 95%;
       Mas geralmente, apenas aumentar o max-width já dá o efeito desejado
       para caber mais elementos.
    */
}

.search-bar-wrapper {
    position: relative; /* Mantém para o posicionamento das sugestões */
    display: flex;      /* Para o .search-bar interno poder usar flex-grow */
    flex-grow: 1;     /* FAZ O WRAPPER CRESCER para ocupar o espaço disponível no .search-container */
    /* min-width: 300px;  Se você quiser que a barra de busca tenha um mínimo,
                          pode ser aplicado aqui ou diretamente no .search-bar */
}

/*
   Lembre-se que a .services-grid já está configurada para rolagem horizontal
   e os .service-card têm uma largura mínima. Este ajuste no .container
   apenas dá mais espaço para a .services-grid exibir mais cards antes de rolar.
*/

/* ============================================ */
/* MEDIA QUERIES (Responsividade)   */
/* ============================================ */

/* Telas Médias (Tablets, etc. - a partir de 769px até 1024px) */
@media (max-width: 1024px) {
    .hero-section h1 {
        font-size: 2.5rem; /* Um pouco menor */
    }

    .hero-section .subtitle {
        font-size: 1.1rem;
    }

    /* Ajuste para o container da seção de serviços para tablets */
    .services-section .container {
        max-width: 95%; /* Ocupa mais da largura disponível */
    }
}


/* Telas Pequenas (Celulares em paisagem, tablets em retrato - até 768px) */
@media (max-width: 768px) {
    #servicos-section-title, /* Aplicando também aqui para garantir */
    .services-section h2, /* Se quiser ser mais geral */
    .info-section h2,
    .footer-cta h2 {
        font-size: 1.8rem; /* Seu estilo existente */
        overflow-wrap: break-word; /* Garantir quebra no mobile */
        word-wrap: break-word;
    }

    .search-button { /* Botão de texto "Buscar" original */
        display: none; /* ESCONDE o botão de texto no mobile */
    }

    .search-icon-mobile .search-svg-icon {
        fill: var(--azul-escuro); /* Cor da lupa (azul escuro do header) */
        width: 25px;  /* Ajuste o tamanho conforme necessário */
        height: 25px; /* Ajuste o tamanho conforme necessário */
    }

    .container {
        width: 90%; /* Mantém um bom padding lateral */
    }

    .header {
        position: static;
    }

    .header .container {
        flex-direction: column; /* Logo e menu um abaixo do outro */
        align-items: center;
        padding-bottom: 10px;
    }

    .header .logo {
        margin-bottom: 10px;
    }

    .header .logo img {
        height: 40px; /* Reduz a altura da logo no mobile */
    }

    .header .nav-menu {
        display: none; /* Esconde o menu de navegação do cabeçalho no mobile */
        width: 100%; /* Adicione isso para ver se ajuda o nav-menu a se comportar */
        text-align: center;
    }

    .header .nav-menu a {
        margin: 0 10px; /* Ajusta margens do menu */
        font-size: 0.9rem;
    }

    .hero-section {
        padding-top: 20px; /* REDUZIDO - Ajustado para altura do header mobile */
        min-height: auto; /* Altura automática para o conteúdo */
        padding-bottom: 30px;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-section .subtitle {
        font-size: 1rem;
    }

    .search-container {
        display: grid; /* MUITO IMPORTANTE: Usar Grid no Mobile */
        grid-template-columns: 1fr auto; /* Coluna para input, coluna para ícone/botão */
        grid-template-rows: auto auto auto auto;    /* Linhas para: 1.Cidade, 2.Barra+Ícone, 3.Sugestões, 4.Validação */
        gap: 15px; 
        column-gap: 0; /* <--- PARA NÃO HAVER ESPAÇO ENTRE COLUNAS (barra e ícone) */
        row-gap: 0; 
        
        background-color: transparent; /* Remove o visual de "caixa" no mobile */
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 25px;
        width: 100%;
        font-size: 0;
    }

    .search-bar-wrapper {
        order: 2; /* Ordem visual: Cidade (1), Barra de Busca (2), Botão (3), Mensagem (4) */
        width: 100%; /* Garante que o wrapper ocupe a largura */
        margin-bottom: 15px;
    }

    .search-bar-wrapper .search-bar {
        flex-grow: 1;
        width: 100%; /* Ocupa toda a largura do wrapper */
    }

    .search-bar {
        grid-column: 1 / 2;  /* Primeira coluna da segunda linha */
        grid-row: 2;         /* Segunda linha */
        width: 100%; 
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none; /* Remove a borda direita */
        border-top-left-radius: 8px;    /* Raio do canto superior esquerdo */
        border-bottom-left-radius: 8px; /* Raio do canto inferior esquerdo */
        border-top-right-radius: 0;     /* Sem raio no canto superior direito */
        border-bottom-right-radius: 0;  /* Sem raio no canto inferior direito */
        margin-right: 0; /* Garante que não haja margem empurrando o ícone */
        font-size: 1rem;
    }

    .search-suggestions-list { /* Lista de sugestões */
        grid-column: 1 / -1; /* Ocupa a largura total do grid */
        grid-row: 3;         /* Fica na linha abaixo da barra de busca/ícone */
        position: static;    /* Torna-se parte do fluxo do grid */
        margin-top: 0;       /* Remove qualquer margem de cima */
        border-top: 1px solid #ddd; 
        border-radius: 8px; 
        width: auto; /* Largura determinada pelo grid-column */
        left: auto;  /* Reset de posicionamento absoluto */
        right: auto; /* Reset de posicionamento absoluto */
        /* z-index, max-height, overflow-y podem ser mantidos */
    }


    .search-icon-mobile {
        display: flex; 
        align-items: center;
        justify-content: center;
        grid-column: 2 / 3;
        grid-row: 2;
        height: 50px; 
        padding: 15px;
        background-color: var(--amarelo-dourado);
        cursor: pointer;
        border: 1px solid var(--amarelo-dourado); /* Mantém a borda para cor e espessura consistentes */

        /* Ajustes para juntar com a barra de pesquisa */
        border-left: none; /* Remove a borda esquerda */
        border-top-left-radius: 0;      /* Sem raio no canto superior esquerdo */
        border-bottom-left-radius: 0;   /* Sem raio no canto inferior esquerdo */
        border-top-right-radius: 8px;     /* Raio do canto superior direito */
        border-bottom-right-radius: 8px;  /* Raio do canto inferior direito */
        margin-left: 0px; /* Garante que não haja margem */
        font-size: 1.2rem;
        /* font-size já definido para o ícone SVG */
    }

    .filter-widget { /* Dropdown de Cidade */
        grid-column: 1 / -1; 
        grid-row: 1;    
        width: 100%;
        margin-bottom: 15px; /* Adiciona espaço ANTES da próxima linha (barra de busca) */
    }

    .search-button {
        order: 3; /* Botão "Buscar" depois da barra de pesquisa */
        width: 100%; /* Botão ocupa toda a largura */
        padding: 15px; /* Ajusta padding para mobile se necessário */
        font-size: 1.1rem; /* Ajusta tamanho da fonte se necessário */
        margin-bottom: 15px; /* Espaço abaixo do botão */
    }

    .search-validation-message {
    width: 100%; /* Para ocupar a largura do .search-container no mobile quando empilhado */
    order: 4; /* Para garantir que fique entre o select e o botão no flex mobile */
    padding: 10px 15px;
    margin: 10px 0; /* Margem vertical */
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    background-color: rgba(223, 169, 51, 0.1); /* Fundo amarelo dourado bem sutil */
    color: var(--amarelo-dourado); /* Texto dourado */
    border: 1px solid rgba(223, 169, 51, 0.25);
    grid-column: 1 / -1; /* Ocupa todas as colunas */
    grid-row: 4;       /* Fica abaixo da lista de sugestões */
    }

    .filter-widget select {
        width: 100%;
        color: var(--cor-texto-principal); /* Texto escuro */
        background-color: #f0f0f0;     /* Fundo claro para contraste */
        border: 1px solid #ccc;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 18px;
        padding-right: 35px; 
        font-size: 1rem;
        border-radius: 8px;
    }
    .services-section h2,
    .info-section h2,
    .footer-cta h2 {
        font-size: 1.8rem;
    }

    .app-download-buttons {
        flex-direction: column; /* Botões de download um abaixo do outro */
        gap: 15px;
    }

    .app-button {
        width: 90%; /* Botões mais largos no mobile */
        justify-content: center; /* Centraliza conteúdo do botão */
        max-width: 300px; /* Uma largura máxima para não ficarem excessivos */
    }

    /* Mostrar e Estilizar Navegação no Rodapé Mobile */
    .footer-nav-mobile {
        display: flex;
        flex-direction: column; /* Links um abaixo do outro */
        align-items: center; /* Centraliza os links */
    }

    .footer-nav-mobile a {
        color: var(--cor-texto-claro); /* Mantém a cor do texto do rodapé */
        padding: 8px 15px; /* Espaçamento dos links */
        font-size: 1rem;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }

    .footer-nav-mobile a:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Leve destaque ao passar o mouse */
        color: var(--amarelo-dourado);
    }
}

/* Telas Muito Pequenas (Celulares em retrato - até 480px) */
@media (max-width: 480px) {
    .header .nav-menu {
        text-align: center; /* Centraliza os links do menu */
    }
    .header .nav-menu a {
        display: block; /* Links do menu um abaixo do outro */
        margin: 8px 0; /* Espaçamento vertical entre eles */
    }

    .hero-section {
        padding-top: 15px; /* Header pode ficar ainda maior se o menu quebrar em várias linhas */
    }

    .hero-section h1 {
        font-size: 1.8rem;
    }

    .hero-section .subtitle {
        font-size: 0.9rem;
    }

    .services-section h2,
    .info-section h2,
    .footer-cta h2 {
        font-size: 1.6rem;
    }

    .info-section p {
        font-size: 1rem;
    }
}

/* public/style.css - Adicionar este bloco */
.footer-nav-mobile {
    display: none; /* Escondido por padrão (em telas maiores) */
    margin-top: 30px; /* Espaço acima dos links no rodapé */
}

.header .logo img {
    height: 80px; /* Altura padrão da logo para desktop */
    width: auto; /* Para manter a proporção */
}

.como-funciona-section {
    background-color: var(--azul-escuro); /* Fundo azul escuro para a seção */
    padding: 70px 0; /* Espaçamento vertical generoso */
    text-align: center; /* Centraliza o título da seção e o grid por padrão */
}

.como-funciona-section .section-title h2 {
    color: var(--cor-texto-claro); /* Título "Como Funciona" em branco */
    font-size: 2.4rem; /* Tamanho do título da seção */
    margin-bottom: 50px; /* Espaço abaixo do título da seção */
    position: relative; /* Para possível pseudo-elemento decorativo */
    display: inline-block; /* Para que o ::after se posicione corretamente */
}

/* Opcional: Linha decorativa abaixo do título da seção */
.como-funciona-section .section-title h2::after {
    content: '';
    display: block;
    width: 70px; /* Largura da linha */
    height: 3px;  /* Espessura da linha */
    background-color: var(--amarelo-dourado); /* Cor da linha */
    margin: 15px auto 0; /* Centraliza a linha abaixo do título */
}

.como-funciona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Layout responsivo em colunas */
    gap: 30px; /* Espaçamento entre os cards */
    align-items: stretch; /* Faz os cards terem a mesma altura se o conteúdo variar */
}

.como-funciona-card {
    background-color: #ffffff; /* Fundo branco para os cards (destaque) */
    padding: 35px 30px; /* Espaçamento interno do card */
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Sombra sutil para efeito premium */
    text-align: center; /* Conteúdo do card centralizado */
    color: var(--cor-texto-principal); /* Texto escuro dentro do card branco */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    display: flex; /* Para alinhar conteúdo interno verticalmente */
    flex-direction: column; /* Conteúdo empilhado */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
}

.como-funciona-card:hover {
    transform: translateY(-8px); /* Efeito de elevação no hover */
    box-shadow: 0 12px 30px rgba(var(--azul-escuro-rgb, 11, 77, 115), 0.2); /* Sombra mais pronunciada no hover */
    /* Nota: --azul-escuro-rgb não existe, precisaria definir se quiser usar assim.
       Por enquanto, uma sombra escura genérica: 0 12px 30px rgba(0,0,0,0.15);
    */
}
/* Para a sombra com cor, adicione ao :root se for usar:
   --azul-escuro-rgb: 11, 77, 115;
   E no hover do card: box-shadow: 0 12px 30px rgba(var(--azul-escuro-rgb), 0.2);
   Por agora, usarei uma sombra preta mais simples: */
.como-funciona-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}


.como-funciona-card .card-icon {
    margin-bottom: 25px; /* Espaço abaixo do ícone */
    /* Se usar <img> para ícones: */
    /* O estilo da imagem já está no HTML (width:50px; height:50px;).
       Para melhor prática, remova o style inline do HTML e adicione aqui: */
}
.como-funciona-card .card-icon img { /* Estilo para a imagem do ícone se usar <img> */
    width: 50px;  /* Ou o tamanho que preferir */
    height: 50px; /* Ou o tamanho que preferir */
    /* Se seus ícones forem SVG e você quiser mudar a cor deles com CSS:
       fill: var(--amarelo-dourado); (não funciona para PNG/JPG) */
}

/* Se usar Font Awesome (exemplo): */
/* .como-funciona-card .card-icon .fas {
    font-size: 2.5rem;
    color: var(--amarelo-dourado);
} */


.como-funciona-card h3 {
    font-size: 1.5rem; /* Tamanho do título do card */
    color: var(--azul-escuro); /* Título do card na cor azul */
    margin-bottom: 15px;
}

.como-funciona-card p {
    font-size: 0.95rem; /* Tamanho do texto de descrição do card */
    line-height: 1.6;
    color: #555; /* Cor mais suave para a descrição */
    flex-grow: 1; /* Ajuda a alinhar botões/links no final se houver */
}

/* Ajustes de Responsividade para a Seção Como Funciona (se necessário) */
@media (max-width: 768px) {
    .como-funciona-section .section-title h2 {
        font-size: 2rem; /* Título da seção um pouco menor */
        margin-bottom: 40px;
    }

    .como-funciona-grid {
        gap: 20px; /* Espaçamento menor entre cards no mobile */
    }

    .como-funciona-card {
        padding: 25px 20px; /* Padding interno do card menor */
    }
}

@media (max-width: 480px) {
    .como-funciona-card h3 {
        font-size: 1.3rem;
    }
    .como-funciona-card p {
        font-size: 0.9rem;
    }
}

.sobre-app-section {
    background-color: #ffffff; /* Fundo branco para a seção */
    /* Ou se quiser um cinza bem claro: var(--cor-fundo-alternativo); */
    padding: 70px 0;
    overflow: hidden; /* Para evitar barras de rolagem inesperadas com animações ou imagens grandes */
}

.sobre-app-section .section-title {
    text-align: center; /* Centraliza o título da seção */
}

.sobre-app-section .section-title h2 {
    color: var(--azul-escuro); /* Título "Sobre o App" em azul escuro */
    font-size: 2.4rem;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
}

.sobre-app-section .section-title h2::after { /* Linha decorativa similar à seção anterior */
    content: '';
    display: block;
    width: 70px;
    height: 3px;
    background-color: var(--amarelo-dourado);
    margin: 15px auto 0;
}

.sobre-app-layout {
    display: flex;
    align-items: center; /* Alinha verticalmente as colunas */
    gap: 50px; /* Espaço entre a coluna de texto e a de imagem */
}

.sobre-app-coluna.texto {
    flex: 1; /* Ocupa o espaço disponível, ajustável */
    /* Ou para uma divisão mais específica: flex-basis: 55%; */
    padding-right: 20px; /* Pequeno espaço caso as colunas fiquem muito próximas */
}

.sobre-app-coluna.imagem {
    flex: 1; /* Ocupa o espaço disponível */
    /* Ou para uma divisão mais específica: flex-basis: 45%; */
    text-align: center; /* Centraliza a imagem se ela for menor que a coluna */
}

.sobre-app-coluna.imagem img {
    max-width: 80%; /* Garante que a imagem não ultrapasse a coluna */
    height: auto;
    border-radius: 12px; /* Cantos arredondados para a imagem/mockup */
}

.sobre-app-descricao {
    font-size: 1.1rem; /* Texto descritivo um pouco maior */
    line-height: 1.8;
    color: #444; /* Cor de texto um pouco mais escura que o padrão #555 */
    margin-bottom: 30px;
}

.sobre-app-coluna.texto h3 { /* "Principais Vantagens:" */
    font-size: 1.5rem;
    color: var(--azul-escuro);
    margin-bottom: 20px;
}

.vantagens-lista {
    list-style: none; /* Remove marcadores padrão da lista */
    padding-left: 0;
}

.vantagens-lista li {
    display: flex; /* Alinha ícone e texto na mesma linha */
    align-items: flex-start; /* Alinha no topo se o texto tiver múltiplas linhas */
    font-size: 1rem;
    color: var(--cor-texto-principal);
    margin-bottom: 18px; /* Espaço entre os itens da lista */
    line-height: 1.6;
}

.vantagens-lista .vantagem-icone {
    color: var(--amarelo-dourado); /* Cor do ícone (se for de fonte) */
    margin-right: 12px; /* Espaço entre o ícone e o texto */
    flex-shrink: 0; /* Evita que o ícone encolha */
    /* Estilo para a imagem do ícone de check, se usar <img> */
}
.vantagens-lista .vantagem-icone img {
    width: 22px; /* Ajuste o tamanho do seu ícone de check */
    height: 22px;
    vertical-align: middle; /* Alinhamento vertical melhor */
}

/* Opcional: Botão CTA dentro da seção Sobre */
/* .sobre-app-cta {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
} */
/* .btn.btn-dourado { (Defina estilos para este botão se for usar)
    background-color: var(--amarelo-dourado);
    color: var(--azul-escuro);
    border-radius: 5px;
} */


/* Ajustes de Responsividade para a Seção Sobre o App */
@media (max-width: 992px) { /* Ajuste para telas médias antes de quebrar totalmente */
    .sobre-app-layout {
        gap: 30px; /* Reduz o espaço entre colunas */
    }
    .sobre-app-coluna.texto {
        padding-right: 0; /* Remove padding extra em telas menores */
    }
}


@media (max-width: 768px) {
    .sobre-app-section .section-title h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    .sobre-app-layout {
        flex-direction: column; /* Empilha as colunas */
        text-align: center; /* Centraliza o texto da coluna quando empilhado */
    }

    .sobre-app-coluna.texto {
        margin-bottom: 40px; /* Espaço entre o texto e a imagem quando empilhados */
        /* text-align: left;  Ou mantenha centralizado como acima */
    }
     .sobre-app-coluna.texto h3, .sobre-app-descricao {
        text-align: left; /* Alinha textos da coluna à esquerda no mobile */
    }

    .sobre-app-coluna.imagem img {
        max-width: 80%; /* Imagem pode ocupar menos da largura no mobile */
        margin: 0 auto; /* Centraliza a imagem */
    }
}

/* Seção Para Prestadores                       */
/* Seção Para Prestadores                       */
.prestadores-section {
    padding: 80px 0;
    background-color: var(--cor-fundo-alternativo);
}

.prestadores-section .section-title {
    text-align: center;
    margin-bottom: 60px;
}

.prestadores-section .section-title h2 {
    color: var(--azul-escuro);
    font-size: 2.4rem;
    margin-bottom: 15px;
}

.prestadores-section .section-title .section-subtitle {
    font-size: 1.1rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.prestador-feature-item {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 70px;
}

.prestador-feature-item:last-of-type {
    margin-bottom: 50px;
}

.prestador-feature-coluna.texto {
    flex: 1;
}

.prestador-feature-coluna.imagem {
    flex: 1;
    text-align: center;
}

.prestador-feature-coluna.imagem img {
    max-width: 70%;
    border-radius: 10px;
}

/* Layout reverso (imagem à esquerda, texto à direita) */
.prestador-feature-item.layout-reverso {
    flex-direction: row-reverse;
}

/* Layout com imagem empilhada abaixo do texto */
.prestador-feature-item.layout-stacked-image {
    flex-direction: column;
    text-align: center;
    gap: 30px;
}

.prestador-feature-item.layout-stacked-image .prestador-feature-coluna.texto {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.prestador-feature-item.layout-stacked-image .prestador-feature-coluna.imagem {
    width: 100%;
    margin-top: 20px;
}

.prestador-feature-item.layout-stacked-image .prestador-feature-coluna.imagem img {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: block;
}

.prestador-feature-coluna .feature-numero {
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--amarelo-dourado);
    background-color: rgba(223, 169, 51, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.prestador-feature-coluna h3 {
    font-size: 1.1rem;
    color: var(--azul-escuro);
    margin-bottom: 15px;
}

.prestador-feature-coluna p {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
}

.prestador-feature-coluna ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.prestador-feature-coluna ul li {
    font-size: 1.1rem;
    color: var(--cor-texto-principal);
    margin-bottom: 10px;
    padding-left: 25px; /* Reduzi o padding para deixar o check mais próximo */
    position: relative;
}

.prestador-feature-coluna ul li::before {
    content: '\2713';
    position: absolute;
    left: 5px; /* Ajustei a posição do check */
    top: 1px;
    color: var(--amarelo-dourado);
    font-weight: bold;
    font-size: 1.1rem;
}

.prestador-cta {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #ddd;
    margin-top: 40px;
}

.prestador-cta p {
    font-size: 1.2rem;
    color: var(--azul-escuro);
    font-weight: 500;
    margin-bottom: 25px;
}

.btn.btn-outline-azul {
    background-color: transparent; /* Fundo transparente */
    color: var(--azul-escuro);      /* Texto na cor azul escuro */
    border: 2px solid var(--azul-escuro); /* Borda azul escuro */
    box-shadow: none; /* Remove a sombra para um visual mais limpo */
}

/* Efeito de hover para o botão de contorno */
.btn.btn-outline-azul:hover {
    background-color: var(--azul-escuro); /* Fundo preenche com azul no hover */
    color: #ffffff; /* Texto fica branco */
    transform: translateY(-2px); /* Mantém o efeito de elevação */
    box-shadow: 0 4px 15px rgba(11, 77, 115, 0.2); /* Sombra sutil azul */
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.btn.btn-dourado {
    background-color: var(--amarelo-dourado);
    color: var(--azul-escuro);
    border: 1px solid var(--amarelo-dourado);
}

.btn.btn-dourado:hover {
    background-color: var(--amarelo-dourado-hover);
    border-color: var(--amarelo-dourado-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(223, 169, 51, 0.25);
}

/* Responsividade para Seção Prestadores */
@media (max-width: 992px) {
    .prestador-feature-item,
    .prestador-feature-item.layout-reverso {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .prestadores-section .section-title h2 {
        font-size: 2rem;
    }
    .prestadores-section .section-title .section-subtitle {
        font-size: 1rem;
    }

    .prestador-feature-item {
        flex-direction: column;
        text-align: center;
        margin-bottom: 50px;
    }

    /* CORREÇÃO: Garante que no mobile o layout-reverso mantenha a imagem embaixo */
    .prestador-feature-item.layout-reverso {
        flex-direction: column;
    }
    
    /* CORREÇÃO: Garante que a imagem venha depois do texto no layout-reverso */
    .prestador-feature-item.layout-reverso .prestador-feature-coluna.imagem {
        order: 1; /* Coloca a imagem depois do texto */
    }

    .prestador-feature-item.layout-stacked-image .prestador-feature-coluna.texto h3,
    .prestador-feature-coluna h3 {
        text-align: center;
    }

    .prestador-feature-coluna.texto,
    .prestador-feature-coluna.imagem {
        flex-basis: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }
    
    .prestador-feature-coluna.imagem {
        margin-bottom: 25px;
        text-align: center;
    }
    
    .prestador-feature-coluna.imagem img {
        max-width: 90%;
    }

    .prestador-feature-coluna .feature-numero {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }
    
    /* Ajuste para os checks no mobile */
    .prestador-feature-coluna ul li {
        padding-left: 22px; /* Reduz um pouco mais no mobile */
    }
    
    .prestador-feature-coluna ul li::before {
        left: 3px; /* Ajusta posição do check no mobile */
    }
}

.search-validation-message {
    width: 100%; /* Para ocupar a largura do .search-container no mobile quando empilhado */
    order: 2; /* Para garantir que fique entre o select e o botão no flex mobile */
    padding: 10px 15px;
    margin: 10px 0; /* Margem vertical */
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    background-color: rgba(223, 169, 51, 0.1); /* Fundo amarelo dourado bem sutil */
    color: var(--amarelo-dourado); /* Texto dourado */
    border: 1px solid rgba(223, 169, 51, 0.25);
}

.search-suggestions-list {
    position: absolute; 
    top: 100%; /* Relativo ao .search-bar se estiverem num wrapper, ou ao .search-container */
    left: 0;
    right: 0; 
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-top: none; 
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000; 
    max-height: 250px;
    overflow-y: auto;
    text-align: left; 
}


.search-suggestions-list .suggestion-item {
    padding: 10px 15px;
    font-size: 0.95rem;
    color: var(--cor-texto-principal);
    cursor: pointer;
    border-bottom: 1px solid #eee; /* Linha separadora sutil */
    text-align: left;
}

.search-suggestions-list .suggestion-item:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

.search-suggestions-list .suggestion-item:hover {
    background-color: #f0f0f0; /* Cor de fundo no hover */
}

.search-suggestions-list .suggestion-item strong { /* Para destacar o termo buscado na sugestão */
    font-weight: 700;
    color: var(--azul-escuro);
}

.service-dialog {
    border: none;
    border-radius: 12px;
    padding: 0; /* O padding será no .dialog-content */
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    width: 90%;
    max-width: 700px; /* Um pouco maior para mais detalhes */
    margin: auto; /* Centraliza o dialog quando aberto */
    /* Animação de entrada */
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete; /* 'display' para animação de saída */
}

/* Quando o dialog está aberto (tem o atributo 'open') */
.service-dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
    /* Para o 'display' na animação de saída */
    /* transition: display 0.3s allow-discrete; */ /* Esta linha já está no de cima */
}

/* Animação de saída - experimental com @starting-style */
/* Se não funcionar bem em todos os navegadores, a transição de opacity/transform já dá um bom efeito */
/* @starting-style {
    .service-dialog[open] {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
} */


/* Backdrop (fundo) do dialog */
.service-dialog::backdrop {
    background-color: rgba(11, 77, 115, 0.5); /* Tom do seu azul escuro com transparência */
    backdrop-filter: blur(3px); /* Efeito de desfoque sutil no fundo */
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease, display 0.3s allow-discrete;
}

.service-dialog[open]::backdrop {
    opacity: 1;
    /* transition: display 0.3s allow-discrete; */ /* Já está no de cima */
}
/* Animação de saída para o backdrop - experimental */
/* @starting-style {
    .service-dialog[open]::backdrop {
        opacity: 0;
    }
} */


.dialog-content {
    padding: 30px 35px;
    color: var(--cor-texto-principal);
    max-height: 85vh; /* Altura máxima */
    overflow-y: auto; /* Scroll se o conteúdo for maior */
}

.dialog-close-btn {
    position: absolute;
    top: 12px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5rem; /* Maior para melhor clique */
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.dialog-close-btn:hover {
    color: var(--azul-escuro);
    transform: rotate(90deg);
}

.dialog-header {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 25px;
    text-align: left;
    position: relative; /* Para o botão de fechar */
}

.dialog-header h2 { /* #dialog-service-title */
    color: var(--azul-escuro);
    font-size: 2rem; /* Consistente */
    margin-bottom: 6px;
    padding-right: 30px; /* Espaço para o botão de fechar não sobrepor */
}

.dialog-provider { /* #dialog-provider-name */
    font-size: 1rem;
    color: #555;
    font-weight: 500;
}

.dialog-body {
    text-align: left;
}

.dialog-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px 28px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f0f0f0;
}

.dialog-info-grid strong {
    display: block;
    font-size: 0.9rem; /* Um pouco maior */
    color: #666; /* Um pouco mais escuro */
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dialog-info-grid p {
    font-size: 1.05rem; /* Um pouco maior */
    color: var(--cor-texto-principal);
    margin-bottom: 0;
    font-weight: 500;
}

.dialog-info-grid #dialog-service-rating .star-icon {
    color: var(--amarelo-dourado);
    margin-right: 4px;
}

.dialog-section {
    margin-bottom: 28px;
}

.dialog-section h3 {
    font-size: 1.4rem; /* Um pouco maior */
    color: var(--azul-escuro);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--amarelo-dourado);
    display: inline-block;
}

.dialog-section p {
    font-size: 1rem;
    line-height: 1.75; /* Melhor legibilidade */
    color: #444;
}

#dialog-service-phone {
    font-weight: 600;
    color: var(--azul-escuro);
    background-color: #f0f8ff; /* Fundo sutil para destacar */
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
}

.dialog-footer {
    text-align: right;
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end; /* Alinha botões à direita */
    align-items: center;
    gap: 15px; /* Espaço entre os botões */
    flex-wrap: wrap; /* Permite que os botões quebrem linha em telas menores */
}

#dialog-contratar-button { /* Mesmo estilo do .btn.btn-dourado */
    padding: 14px 35px; 
    font-size: 1.1rem;
}

/* Responsividade do Dialog */
@media (max-width: 768px) {
    .dialog-content {
        padding: 25px 20px;
    }
    .dialog-header h2 {
        font-size: 1.7rem;
    }
    .dialog-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .dialog-info-grid {
        grid-template-columns: 1fr;
    }
    .dialog-footer {
    text-align: center;
    flex-direction: column; /* Empilha os botões verticalmente */
    align-items: stretch; /* Faz os botões esticarem para ocupar a largura */
    /* O 'gap: 15px' que adicionamos na regra principal já cuidará do espaçamento vertical */
    }
    .dialog-footer .btn { /* Aplica a todos os botões dentro do footer do dialog */
        width: 100%; /* Faz os botões ocuparem toda a largura no mobile */
        margin: 0; /* Remove margens extras se houver */
    }
    #dialog-contratar-button {
        width: 100%;
    }
}

@media (min-width: 900px) {
    html {
        cursor: url('image/chave.png') 4 4, auto;
    }
}