/* =========================================================
   CONDE DE SARZEDAS
   PAGINAS.CSS
   ESTILOS ESPECÍFICOS DAS PÁGINAS
========================================================= */

/* =========================================================
   01. PÁGINAS / ÁREA PRINCIPAL
========================================================= */

/* =========================================================
   02. BOTÃO VOLTAR
========================================================= */

/* =========================================================
   03. TÍTULO DA PÁGINA
========================================================= */

.titulo {

    margin-bottom: 22px;

}

.titulo h2 {

    margin: 0;

    font-size: 26px;

}

.titulo p {

    margin-top: 7px;

    color: #666666;

}

/* =========================================================
   04. LISTA DE EMPRESAS
========================================================= */

.lista {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

}

/* =========================================================
   05. INFORMAÇÃO DA CATEGORIA
========================================================= */

.categoria {

    color: #777777;

    font-size: 14px;

    margin-bottom: 15px;

}

/* =========================================================
   06. ENDEREÇO DO CARD
========================================================= */

.endereco {

    line-height: 1.6;

    margin-bottom: 18px;

}

/* =========================================================
   07. PÁGINA SEM RESULTADOS
========================================================= */

.vazio {

    width: 100%;

    background: #ffffff;

    padding: 35px;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .08);

}

.vazio h3 {

    margin-bottom: 10px;

}

.vazio p {

    margin: 0;

    color: #555555;

}

/* =========================================================
   08. EMPRESA — HERO
========================================================= */

.hero {

    position: relative;

    width: 100%;

    min-height: 295px;

    margin-bottom: 18px;

    background:
        linear-gradient(
            135deg,
            #222222,
            #444444
        );

    border-radius: 20px;

    overflow: hidden;

    color: #ffffff;

}

.hero-com-banner {

    background-size: cover;

    background-position: center;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, .55);

}

.hero-conteudo {

    position: relative;

    z-index: 2;

    min-height: 295px;

    padding: 40px;

    display: flex;

    align-items: center;

    gap: 24px;

}

/* =========================================================
   09. LOGO DA EMPRESA
========================================================= */

.empresa-logo {

    width: 112px;

    height: 112px;

    flex-shrink: 0;

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}

.empresa-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.logo-placeholder {

    font-size: 42px;

}

/* =========================================================
   10. TEXTO DO HERO
========================================================= */

.hero-texto {

    min-width: 0;

}

.hero-texto h1 {

    margin:
        10px 0 5px;

    color: #ffffff;

    font-size: 38px;

    line-height: 1.15;

}

.badge {

    display: inline-flex;

    align-items: center;

    padding:
        6px 12px;

    border-radius: 999px;

    background: #c99a4a;

    color: #151515;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

}

.local-resumo {

    margin: 0;

    color: #ffffff;

    font-size: 14px;

}

/* =========================================================
   11. AÇÕES DA EMPRESA
========================================================= */

.acoes {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 18px;

}

.acao {

    min-height: 48px;

    padding:
        10px 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #ffffff;

    color: #151515;

    border-radius: 12px;

    text-decoration: none;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .08);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;

}

.acao:hover {

    transform: translateY(-2px);

    background: #c99a4a;

    color: #151515;

}

.acao.destaque {

    background: #c99a4a;

}

/* =========================================================
   12. BLOCOS DA EMPRESA
========================================================= */

.bloco {

    width: 100%;

    margin-bottom: 18px;

    padding: 26px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .08);

}

.titulo-bloco {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

}

.titulo-bloco span {

    color: #c99a4a;

    font-size: 13px;

    font-weight: bold;

}

.titulo-bloco h2 {

    margin: 0;

    font-size: 21px;

}

.descricao {

    margin: 0;

    color: #555555;

    line-height: 1.7;

}

/* =========================================================
   13. SERVIÇOS / PRODUTOS
========================================================= */

.lista-servicos {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

}

.servico {

    padding:
        12px 14px;

    background: #f8f5ef;

    border-radius: 10px;

    color: #333333;

}

.servico span {

    margin-right: 6px;

    color: #c99a4a;

    font-weight: bold;

}

/* =========================================================
   14. LOCALIZAÇÃO DA EMPRESA
========================================================= */

.localizacao {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

.localizacao .endereco {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin: 0;

}

.endereco-icone {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f5efe4;

    border-radius: 10px;

}

.localizacao .endereco strong {

    display: block;

    margin-bottom: 4px;

}

.localizacao .endereco span {

    display: block;

    color: #666666;

    line-height: 1.5;

}

/* =========================================================
   15. BOTÃO MAPA
========================================================= */

.botao-mapa {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding:
        10px 18px;

    background: #151515;

    color: #ffffff;

    border-radius: 9px;

    font-weight: bold;

    text-decoration: none;

    white-space: nowrap;

}

.botao-mapa:hover {

    background: #c99a4a;

    color: #151515;

}

/* =========================================================
   16. HORÁRIOS
========================================================= */

.horarios {

    display: flex;

    flex-direction: column;

}

.horario {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        12px 0;

    border-bottom:
        1px solid #eeeeee;

}

.horario:last-child {

    border-bottom: none;

}

.horario strong {

    color: #222222;

}

.horario span {

    color: #666666;

    text-align: right;

}

/* =========================================================
   17. REDES SOCIAIS
========================================================= */

.redes {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.redes a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding:
        9px 15px;

    background: #f5f5f5;

    color: #222222;

    border-radius: 9px;

    text-decoration: none;

    font-weight: 600;

}

.redes a:hover {

    background: #c99a4a;

    color: #151515;

}

/* =========================================================
   18. GALERIA
========================================================= */

.galeria {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

}

.galeria img {

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 12px;

}

/* =========================================================
   19. SOBRE
========================================================= */

.pagina-sobre {

    max-width: 1000px;

    margin:
        25px auto 80px;

    padding:
        0 15px;

}

.sobre-bloco {

    background: #ffffff;

    padding: 28px;

    margin-bottom: 18px;

    border-radius: 16px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .08);

}

.sobre-bloco h2 {

    margin-bottom: 14px;

}

.sobre-bloco p {

    line-height: 1.7;

}

/* =========================================================
   20. POLÍTICA DE PRIVACIDADE
========================================================= */

.pagina-politica {

    max-width: 900px;

    margin:
        25px auto 80px;

    padding:
        0 15px;

}

.politica-bloco {

    background: #ffffff;

    padding: 28px;

    margin-bottom: 18px;

    border-radius: 16px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .08);

}

.politica-bloco h2 {

    margin-bottom: 12px;

}

.politica-bloco h3 {

    margin:
        20px 0 8px;

}

.politica-bloco p {

    margin-bottom: 12px;

    line-height: 1.7;

}

.politica-bloco ul {

    margin:
        10px 0 15px 20px;

}

.politica-bloco li {

    margin-bottom: 8px;

    line-height: 1.6;

}

/* =========================================================
   21. COMPONENTES DE CONTEÚDO
========================================================= */

.destaque-pagina {

    background: #151515;

    color: #ffffff;

    padding: 30px;

    border-radius: 18px;

    margin-bottom: 20px;

}

.destaque-pagina h1,
.destaque-pagina h2,
.destaque-pagina h3 {

    color: #ffffff;

}

.destaque-pagina p {

    color: #dddddd;

}

/* =========================================================
   22. IFRAME RESPONSIVO
========================================================= */

.responsive-iframe-container {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding-top: 56.25%;

    border-radius: 12px;

}

.responsive-iframe-container iframe {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border: 0;

}

/* =========================================================
   23. RESPONSIVIDADE
========================================================= */

@media (max-width: 900px) {

    .lista {

        grid-template-columns: 1fr;

    }

    .hero-texto h1 {

        font-size: 32px;

    }

    .localizacao {

        align-items: flex-start;

        flex-direction: column;

    }

    .lista-servicos {

        grid-template-columns: 1fr;

    }

    .galeria {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}

/* =========================================================
   24. CELULAR
========================================================= */

@media (max-width: 600px) {

    .pagina-sobre,
    .pagina-politica {

        margin:
            20px auto 80px;

        padding:
            0 12px;

    }

    

    .titulo h2 {

        font-size: 24px;

    }

    .hero {

        min-height: 260px;

        border-radius: 16px;

    }

    .hero-conteudo {

        min-height: 260px;

        padding: 24px;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

    }

    .empresa-logo {

        width: 82px;

        height: 82px;

    }

    .hero-texto h1 {

        font-size: 28px;

    }

    .acoes {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .acao {

        width: 100%;

        padding:
            10px;

    }

    .bloco {

        padding: 20px;

        border-radius: 14px;

    }

    .titulo-bloco h2 {

        font-size: 19px;

    }

    .horario {

        align-items: flex-start;

        flex-direction: column;

        gap: 4px;

    }

    .horario span {

        text-align: left;

    }

    .redes {

        flex-direction: column;

    }

    .redes a {

        width: 100%;

    }

    .galeria {

        grid-template-columns: 1fr;

    }

    .sobre-bloco,
    .politica-bloco {

        padding: 20px;

    }

}

/* =========================================================
   25. CELULAR PEQUENO
========================================================= */

@media (max-width: 420px) {

    .hero-texto h1 {

        font-size: 25px;

    }

    .acoes {

        grid-template-columns: 1fr;

    }

    .hero-conteudo {

        padding: 20px;

    }

    .bloco {

        padding: 18px;

    }

}

/* =========================================================
   FIM DO PAGINAS.CSS
========================================================= */