/* Marca do 1o Tabeliao de Notas e Protesto de Sao Caetano do Sul. Paleta da prancha da cliente:
   bronze #54442D (links), marrom cafe #423525 (rodape) e dourado #836A4B so nos icones. */

:root {
    --marca: #54442D;
    --marca-escura: #2e2518;
    --icone: #836A4B;
    --rodape: #423525;
}

.brand-logo {
    display: block;
    width: min(280px, 70%);
    height: auto;
    margin-bottom: 18px;
}

/* o titulo virou h1 (o modelo usava h2); mesmos tamanhos do tema */
.herobannerarea__title .herobannerarea__title__heading__2.herobannerarea__title__heading__3 .brand-titulo {
    margin: 0;
    font-size: 65px;
    line-height: 72px;
    color: #000;
}

@media (min-width: 992px) and (max-width: 1365px) {
    .herobannerarea__title .herobannerarea__title__heading__2.herobannerarea__title__heading__3 .brand-titulo {
        font-size: 48px;
        line-height: 60px;
    }
}

@media (max-width: 767px) {
    .herobannerarea__title .herobannerarea__title__heading__2.herobannerarea__title__heading__3 .brand-titulo {
        font-size: 35px;
        line-height: 42px;
    }
}

.brand-chamada {
    margin: 22px 0 14px;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: #000;
}

.brand-contato {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.brand-contato li {
    position: relative;
    padding-left: 32px;
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: #000;
}

.brand-contato li i {
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    font-size: 20px;
    line-height: 1;
    color: var(--icone);
}

.brand-contato .rotulo {
    color: #000;
}

.brand-contato a,
.brand-crc a {
    color: var(--marca);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.brand-contato a:hover,
.brand-contato a:focus-visible,
.brand-crc a:hover,
.brand-crc a:focus-visible {
    color: var(--marca-escura);
}

.brand-crc {
    margin: 0;
}

/* rodape na cor da marca */
.footerarea__copyright__wrapper__2 {
    background: var(--rodape);
}

.footerarea__copyright__content__2 p,
.footerarea__copyright__content__2 a {
    color: #fff;
}

.footerarea__copyright__content__2 a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* razao social e CNPJ, como no cartao do CNPJ */
.footerarea__copyright__wrapper .footerarea__copyright__content__2 p.brand-razao {
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
}

.brand-sep {
    margin: 0 6px;
    color: #fff !important;
}

.brand-cnpj {
    white-space: nowrap;
}

/* no celular o CNPJ desce para a linha de baixo, sem a barra sobrando */
@media (max-width: 575px) {
    .brand-sep {
        display: none;
    }

    .brand-cnpj {
        display: block;
    }
}

/* a ilustracao nunca passa da coluna (celular) */
.aboutarea__img__2 img {
    max-width: 100%;
    height: auto;
}

/* modal "Como chegar" (o endereco abre este modal; sem JS o link abre o Google Maps) */
.rota-modal {
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    width: min(420px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;
    color: #1f1b19;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.rota-modal::backdrop {
    background: rgba(0, 0, 0, .65);
}

.rota-corpo {
    position: relative;
    padding: 26px 24px 24px;
}

.rota-corpo h2 {
    margin: 0 0 6px;
    padding-right: 36px;
    font-size: 26px;
    line-height: 32px;
    color: var(--rodape);
}

.rota-end {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 22px;
}

.rota-fechar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    color: var(--marca);
    cursor: pointer;
}

.rota-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rota-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid #c6b7a2;
    border-radius: 10px;
    background: #f6f5f3;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--marca);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.rota-opcao svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    fill: var(--icone);
}

.rota-opcao:hover,
.rota-opcao:focus-visible {
    background: #ecdfcd;
    color: var(--marca-escura);
}

.rota-fechar:focus-visible,
.rota-opcao:focus-visible {
    outline: 3px solid var(--marca);
    outline-offset: 2px;
}

@media (max-width: 380px) {
    .rota-grade {
        grid-template-columns: 1fr;
    }
}

/* o celular (iOS) pode tratar o CNPJ como telefone e pintar de azul: fica branco como o resto do rodape */
.brand-cnpj,
.brand-cnpj a,
.brand-razao a[x-apple-data-detectors] {
    color: #fff !important;
    text-decoration: none !important;
    font: inherit !important;
}