/* =========================================================
   CONFIGURAÇÕES GERAIS
========================================================= */

:root {
    --preto: #120d16;
    --preto-suave: #1d1522;
    --roxo-escuro: #2b1738;
    --roxo: #58316f;
    --vinho: #7a284c;
    --rosa: #b34772;
    --dourado: #e0b866;
    --dourado-claro: #f4d995;
    --branco: #ffffff;
    --fundo-claro: #f6f2f7;
    --texto: #29212d;
    --texto-suave: #6f6573;
    --verde: #3fd37c;
    --borda: rgba(70, 35, 82, 0.18);
    --sombra: 0 18px 42px rgba(26, 12, 31, 0.16);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at top right,
            rgba(179, 71, 114, 0.13),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #f8f4f8,
            #f2ecf3
        );
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    border: 0;
}

img {
    max-width: 100%;
    display: block;
}

main {
    width: 100%;
}


/* =========================================================
   MENU LATERAL
========================================================= */

.menu-lateral {
    width: 88px;
    height: 100vh;
    padding: 18px 12px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #180e1c 0%,
            #2a1530 55%,
            #160c1a 100%
        );

    border-right: 1px solid rgba(244, 217, 149, 0.22);
    box-shadow: 12px 0 32px rgba(18, 8, 22, 0.18);

    display: flex;
    flex-direction: column;

    transition: width 0.3s ease;
}

.menu-lateral:hover {
    width: 245px;
}

.topo-menu-lateral {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marca-menu-lateral {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;
}

.marca-menu-lateral img {
    width: 54px;
    height: 54px;
    min-width: 54px;

    object-fit: contain;

    border-radius: 17px;
    background: rgba(255, 255, 255, 0.07);
}

.texto-marca-lateral {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;

    transition: 0.25s ease;
}

.menu-lateral:hover .texto-marca-lateral {
    max-width: 160px;
    opacity: 1;
}

.texto-marca-lateral strong,
.texto-marca-lateral small {
    display: block;
}

.texto-marca-lateral strong {
    color: var(--dourado-claro);
    font-size: 16px;
}

.texto-marca-lateral small {
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

.fechar-menu {
    display: none;

    background: transparent;
    color: var(--branco);

    font-size: 28px;
    cursor: pointer;
}

.navegacao-lateral {
    margin-top: 26px;

    display: flex;
    flex-direction: column;
    gap: 7px;
}

.item-menu {
    min-height: 49px;
    padding: 6px 10px;

    border-radius: 15px;

    color: rgba(255, 255, 255, 0.78);

    display: flex;
    align-items: center;
    gap: 13px;

    transition: 0.2s ease;
}

.item-menu:hover,
.item-menu.ativo {
    color: var(--branco);

    background:
        linear-gradient(
            90deg,
            rgba(179, 71, 114, 0.88),
            rgba(88, 49, 111, 0.68)
        );

    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.2);
}

.icone-menu {
    width: 40px;
    min-width: 40px;
    height: 40px;

    border-radius: 13px;

    color: var(--dourado-claro);
    font-size: 19px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.texto-menu {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;

    font-size: 13px;
    font-weight: 800;

    transition: 0.25s ease;
}

.menu-lateral:hover .texto-menu {
    max-width: 170px;
    opacity: 1;
}

.rodape-menu-lateral {
    margin-top: auto;
    padding: 14px 11px;

    overflow: hidden;

    border: 1px solid rgba(244, 217, 149, 0.18);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.05);

    white-space: nowrap;
}

.rodape-menu-lateral span,
.rodape-menu-lateral strong {
    max-width: 0;
    overflow: hidden;
    opacity: 0;

    display: block;

    transition: 0.25s ease;
}

.menu-lateral:hover .rodape-menu-lateral span,
.menu-lateral:hover .rodape-menu-lateral strong {
    max-width: 180px;
    opacity: 1;
}

.rodape-menu-lateral span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

.rodape-menu-lateral strong {
    margin-top: 4px;

    color: var(--dourado-claro);
    font-size: 14px;
}


/* =========================================================
   ESTRUTURA GERAL DO SITE
========================================================= */

.estrutura-site {
    width: calc(100% - 88px);
    min-height: 100vh;
    margin-left: 88px;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.topo {
    min-height: 168px;
    padding: 18px 4%;

    position: relative;
    z-index: 1000;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 242, 248, 0.98)
        );

    border-bottom: 1px solid rgba(88, 49, 111, 0.12);
}

.topo-conteudo {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.abrir-menu {
    width: 44px;
    height: 44px;

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border-radius: 13px;

    background: var(--roxo-escuro);

    cursor: pointer;
}

.abrir-menu span {
    width: 21px;
    height: 2px;

    border-radius: 4px;

    background: var(--branco);
}

.marca {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 16px;
}

.logo img {
    width: 142px;
    height: 142px;

    object-fit: contain;
}

.nome-site h1 {
    color: var(--vinho);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
}

.nome-site p {
    margin-top: 8px;

    color: var(--texto-suave);

    font-size: 15px;
    line-height: 1.45;
}

.nome-site strong {
    display: block;

    margin-top: 6px;

    color: var(--vinho);

    font-size: 18px;
}


/* =========================================================
   LOGIN DO CLIENTE
========================================================= */

.login-cliente {
    width: 385px;
    min-width: 385px;
    padding: 15px 16px;

    border: 1px solid rgba(88, 49, 111, 0.18);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.82);

    box-shadow: 0 14px 30px rgba(38, 17, 44, 0.1);
}

.login-cabecalho {
    margin-bottom: 11px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.login-icone {
    width: 38px;
    height: 38px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--roxo),
            var(--vinho)
        );

    color: var(--dourado-claro);

    display: flex;
    align-items: center;
    justify-content: center;
}

.login-cabecalho small {
    color: var(--texto-suave);

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login-cabecalho h2 {
    margin-top: 2px;

    color: var(--roxo-escuro);

    font-size: 15px;
}

.login-campos {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 8px;
}

.login-campos input {
    width: 100%;
    height: 39px;
    padding: 0 11px;

    border: 1px solid rgba(88, 49, 111, 0.17);
    border-radius: 11px;
    outline: none;

    background: #ffffff;
    color: var(--texto);

    font-size: 12px;
}

.login-campos input:focus {
    border-color: var(--rosa);

    box-shadow: 0 0 0 3px rgba(179, 71, 114, 0.1);
}

.campo-senha-topo {
    position: relative;
}

.campo-senha-topo input {
    padding-right: 36px;
}

.mostrar-senha {
    width: 32px;
    height: 32px;

    position: absolute;
    top: 4px;
    right: 4px;

    border-radius: 9px;

    background: transparent;
    color: var(--roxo);

    cursor: pointer;
}

.botao-login {
    height: 39px;
    padding: 0 14px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--vinho),
            var(--rosa)
        );

    color: var(--branco);

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.links-login {
    margin-top: 9px;

    display: flex;
    justify-content: flex-end;
    gap: 13px;
}

.links-login a {
    color: var(--texto-suave);

    font-size: 10px;
}

.links-login a:hover {
    color: var(--vinho);

    text-decoration: underline;
}


/* =========================================================
   CARROSSEL PRINCIPAL
========================================================= */

.banner {
    width: 100%;
    padding: 0;

    background: var(--preto);
}

.carrossel {
    width: 100%;
    height: 600px;

    position: relative;

    overflow: hidden;

    background: var(--preto);
}

.slide {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    object-fit: contain;
    object-position: center;

    background: var(--preto);

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

.slide.ativo {
    opacity: 1;
    visibility: visible;
}

.seta {
    width: 52px;
    height: 52px;

    position: absolute;
    top: 50%;
    z-index: 20;

    transform: translateY(-50%);

    border-radius: 50%;

    background: rgba(15, 7, 18, 0.66);
    color: var(--branco);

    font-size: 27px;

    cursor: pointer;

    backdrop-filter: blur(7px);
}

.seta:hover {
    background: rgba(122, 40, 76, 0.88);
}

.anterior {
    left: 20px;
}

.proxima {
    right: 20px;
}

.indicadores {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 20;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 8px;
}

.ponto {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.45);

    cursor: pointer;

    transition: 0.2s ease;
}

.ponto.ativo {
    width: 28px;

    border-radius: 10px;

    background: var(--dourado-claro);
}


/* =========================================================
   TÍTULOS DAS SEÇÕES
========================================================= */

.titulo-secao,
.titulo-trabalhos {
    max-width: 760px;
    margin: 0 auto 38px;

    text-align: center;
}

.titulo-secao span,
.titulo-trabalhos span {
    display: block;

    margin-bottom: 9px;

    color: var(--dourado);

    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.titulo-secao h2,
.titulo-trabalhos h2 {
    color: var(--roxo-escuro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;
}

.titulo-secao p,
.titulo-trabalhos p {
    margin-top: 13px;

    color: var(--texto-suave);

    font-size: 15px;
    line-height: 1.65;
}

/* =========================================================
   CONSULTORES
========================================================= */

.secao-consultores {
    padding: 68px 4% 76px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f8f4f8,
            #f1eaf3
        );
}

.carrossel-consultores {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;

    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;
}

.janela-consultores {
    width: 100%;

    overflow: hidden;
}

.grade-consultores {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    transition: transform 0.5s ease;

    will-change: transform;
}

.seta-consultor {
    width: 48px;
    min-width: 48px;
    height: 48px;

    border: 1px solid rgba(88, 49, 111, 0.18);
    border-radius: 16px;

    background: var(--branco);
    color: var(--roxo);

    font-size: 23px;

    cursor: pointer;

    box-shadow: 0 10px 24px rgba(39, 17, 45, 0.1);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.seta-consultor:hover {
    background: var(--roxo);
    color: var(--branco);

    transform: translateY(-2px);
}

.seta-consultor:disabled {
    opacity: 0.35;

    cursor: not-allowed;

    transform: none;
}

.card {
    width: 230px;
    min-width: 230px;

    overflow: hidden;

    border: 1px solid rgba(88, 49, 111, 0.13);
    border-radius: 24px;

    background: var(--branco);

    box-shadow: 0 15px 32px rgba(38, 16, 44, 0.1);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-7px);

    box-shadow: 0 22px 42px rgba(38, 16, 44, 0.16);
}

.foto-consultor {
    width: 100%;
    height: 205px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--roxo-escuro),
            var(--vinho)
        );
}

.imagem-consultor {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.card-conteudo {
    padding: 18px 17px;
}

.card h3 {
    color: var(--roxo-escuro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.2;
}

.estrelas {
    margin-top: 7px;

    color: var(--dourado);

    font-size: 13px;
    letter-spacing: 1px;
}

.status {
    margin-top: 8px;

    color: #257043;

    font-size: 11px;
    font-weight: 800;

    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ponto-online {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--verde);

    box-shadow: 0 0 7px rgba(63, 211, 124, 0.56);
}

.resumo-consultor {
    min-height: 52px;
    margin-top: 13px;

    color: var(--texto-suave);

    font-size: 12px;
    line-height: 1.5;
}

.perfil-detalhes {
    width: 100%;
    margin-top: 12px;
}

.perfil-detalhes summary {
    width: 100%;
    padding: 10px 11px;

    border: 1px solid rgba(88, 49, 111, 0.14);
    border-radius: 13px;

    background: #f8f4f9;
    color: var(--roxo);

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    list-style: none;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.perfil-detalhes summary::-webkit-details-marker {
    display: none;
}

.perfil-detalhes summary::after {
    content: "⌄";

    font-size: 16px;
}

.perfil-detalhes[open] summary::after {
    content: "⌃";
}

.descricao-completa {
    max-height: 190px;
    margin-top: 8px;
    padding: 12px;

    overflow-y: auto;

    border-radius: 13px;

    background: #f3edf5;
    color: var(--texto-suave);

    font-size: 11px;
    line-height: 1.55;
}

.descricao-completa p + p {
    margin-top: 8px;
}

.preco {
    margin-top: 13px;

    color: var(--vinho);

    font-size: 13px;
    font-weight: 900;
}

.botao-consultar {
    width: 100%;
    margin-top: 12px;
    padding: 12px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--vinho),
            var(--rosa)
        );

    color: var(--branco);

    font-size: 12px;
    font-weight: 800;
    text-align: center;

    display: block;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-consultar:hover {
    transform: translateY(-2px);

    box-shadow: 0 9px 20px rgba(122, 40, 76, 0.25);
}

.area-ver-consultores {
    margin-top: 32px;

    text-align: center;
}

.botao-ver-consultores {
    padding: 13px 22px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--roxo),
            var(--vinho)
        );

    color: var(--branco);

    font-size: 13px;
    font-weight: 800;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-ver-consultores:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 22px rgba(88, 49, 111, 0.24);
}


/* =========================================================
   BOAS-VINDAS
========================================================= */

.secao-boas-vindas {
    padding: 72px 5%;

    background: var(--branco);
}

.painel-boas-vindas {
    max-width: 1050px;
    margin: 0 auto;
    padding: 48px 42px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at top right,
            rgba(179, 71, 114, 0.28),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #1a1020,
            #3a1a48 58%,
            #25112e
        );

    color: var(--branco);

    text-align: center;

    box-shadow: var(--sombra);
}

.rotulo-boas-vindas {
    color: var(--dourado-claro);

    font-size: 15px;
    font-weight: 900;
}

.painel-boas-vindas h2 {
    max-width: 800px;
    margin: 18px auto 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
}

.painel-boas-vindas p {
    max-width: 760px;
    margin: 18px auto 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 15px;
    line-height: 1.7;
}

.lista-beneficios {
    margin-top: 27px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.lista-beneficios span {
    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.06);

    font-size: 12px;
}

.botao-boas-vindas {
    margin-top: 27px;
    padding: 14px 23px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--dourado),
            var(--dourado-claro)
        );

    color: #2a1725;

    font-size: 13px;
    font-weight: 900;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-boas-vindas:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(224, 184, 102, 0.25);
}


/* =========================================================
   NOSSOS ATENDIMENTOS
========================================================= */

.secao-atendimentos {
    padding: 72px 5%;

    background:
        linear-gradient(
            180deg,
            #f4eef5,
            #f8f4f8
        );
}

.grade-atendimentos {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cartao-atendimento {
    min-height: 112px;
    padding: 21px 18px;

    border: 1px solid rgba(88, 49, 111, 0.14);
    border-radius: 20px;

    background: var(--branco);

    box-shadow: 0 12px 26px rgba(42, 18, 49, 0.08);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.cartao-atendimento:hover {
    transform: translateY(-5px);

    border-color: rgba(179, 71, 114, 0.4);

    box-shadow: 0 17px 32px rgba(42, 18, 49, 0.12);
}

.cartao-atendimento span {
    color: var(--dourado);

    font-size: 20px;
}

.cartao-atendimento strong {
    color: var(--roxo-escuro);

    font-size: 14px;
    line-height: 1.35;
}


/* =========================================================
   NOSSOS TRABALHOS
========================================================= */

.secao-trabalhos {
    padding: 78px 5%;

    background:
        linear-gradient(
            145deg,
            #25112f,
            #4c215d 58%,
            #2b1434
        );
}

.titulo-trabalhos span,
.titulo-trabalhos h2,
.titulo-trabalhos p {
    color: var(--branco);
}

.titulo-trabalhos span {
    color: var(--dourado-claro);
}

.titulo-trabalhos p {
    color: rgba(255, 255, 255, 0.75);
}

.grade-trabalhos {
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.card-trabalho {
    min-height: 360px;
    padding: 30px 25px;

    border: 1px solid rgba(244, 217, 149, 0.34);
    border-radius: 25px;

    background: rgba(255, 255, 255, 0.08);
    color: var(--branco);

    backdrop-filter: blur(10px);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    transition:
        transform 0.24s ease,
        background 0.24s ease,
        box-shadow 0.24s ease;
}

.card-trabalho:hover {
    transform: translateY(-6px);

    background: rgba(255, 255, 255, 0.12);

    box-shadow: 0 18px 36px rgba(10, 3, 14, 0.2);
}

.icone-trabalho {
    width: 76px;
    height: 76px;

    border: 2px solid rgba(244, 217, 149, 0.66);
    border-radius: 50%;

    font-size: 31px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.card-trabalho h3 {
    margin-top: 23px;

    font-size: 21px;
    line-height: 1.35;
}

.card-trabalho p {
    margin-top: 17px;

    color: rgba(255, 255, 255, 0.76);

    font-size: 13px;
    line-height: 1.7;
}

.botao-trabalho {
    width: 100%;
    margin-top: auto;
    padding: 13px 16px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--dourado),
            var(--dourado-claro)
        );

    color: #2c1725;

    font-size: 12px;
    font-weight: 900;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-trabalho:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 22px rgba(224, 184, 102, 0.25);
}

.area-loja-trabalhos {
    margin-top: 30px;

    text-align: center;
}

.botao-loja-trabalhos {
    padding: 14px 24px;

    border: 1px solid rgba(244, 217, 149, 0.46);
    border-radius: 15px;

    color: var(--dourado-claro);

    font-size: 13px;
    font-weight: 800;

    display: inline-flex;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.botao-loja-trabalhos:hover {
    transform: translateY(-2px);

    background: var(--dourado-claro);
    color: #2c1725;
}
/* =========================================================
   POR QUE ESCOLHER
========================================================= */

.secao-escolher {
    padding: 72px 5%;

    background: var(--branco);
}

.painel-escolher {
    max-width: 1050px;
    margin: 0 auto;
    padding: 42px;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #19101f,
            #372044
        );

    color: var(--branco);

    text-align: center;

    box-shadow: var(--sombra);
}

.painel-escolher h2 {
    color: var(--dourado-claro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(27px, 4vw, 41px);
    line-height: 1.2;
}

.lista-motivos {
    margin-top: 28px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 18px;
}

.lista-motivos span {
    padding: 13px 15px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   DEPOIMENTOS
========================================================= */

.secao-depoimentos {
    padding: 72px 5% 82px;

    background:
        linear-gradient(
            180deg,
            #f3edf5,
            #f8f4f8
        );
}

.grade-depoimentos {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cartao-depoimento {
    padding: 26px 23px;

    border: 1px solid rgba(88, 49, 111, 0.13);
    border-radius: 22px;

    background: var(--branco);

    box-shadow: 0 13px 28px rgba(43, 18, 50, 0.08);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.cartao-depoimento:hover {
    transform: translateY(-5px);

    box-shadow: 0 18px 34px rgba(43, 18, 50, 0.13);
}

.cartao-depoimento .estrelas {
    margin-top: 0;

    color: var(--dourado);

    font-size: 15px;
}

.cartao-depoimento p {
    margin-top: 15px;

    color: var(--texto-suave);

    font-size: 14px;
    line-height: 1.7;
}

.cartao-depoimento strong {
    display: block;

    margin-top: 16px;

    color: var(--roxo-escuro);

    font-size: 13px;
}


/* =========================================================
   RODAPÉ PRINCIPAL
========================================================= */

.rodape-principal {
    width: 100%;
    margin-top: 0;
    padding: 42px 5% 20px;

    color: var(--branco);

    background:
        linear-gradient(
            135deg,
            #24142d,
            #4a285c 55%,
            #321b3d
        );
}

.rodape-conteudo {
    width: min(1180px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1.15fr;
    gap: 30px;
}

.rodape-coluna {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rodape-coluna h2,
.rodape-coluna h3 {
    margin: 0 0 10px;

    color: var(--dourado-claro);

    font-size: 15px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rodape-coluna p,
.rodape-coluna a {
    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;
    line-height: 1.6;
}

.rodape-coluna a {
    display: block;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.rodape-coluna a:hover {
    color: var(--dourado-claro);

    transform: translateX(3px);
}

.seguranca-rodape {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.08);
}

.seguranca-icone {
    width: 36px;
    min-width: 36px;
    height: 36px;

    border-radius: 50%;

    background: #38c986;
    color: var(--branco);

    font-size: 17px;
    font-weight: 900;

    display: grid;
    place-items: center;
}

.seguranca-rodape strong {
    color: var(--branco);

    font-size: 12px;
}

.seguranca-rodape p {
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 10px;
    line-height: 1.45;
}


/* =========================================================
   FORMAS DE PAGAMENTO
========================================================= */

.pagamentos {
    margin-top: 4px;

    display: grid;
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    gap: 10px;
}

.pagamento-logo {
    min-width: 0;
    height: 52px;
    padding: 8px;

    border-radius: 12px;

    background: var(--branco);

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.pagamento-logo:hover {
    transform: translateY(-3px);

    box-shadow: 0 11px 24px rgba(0, 0, 0, 0.24);
}

.pagamento-logo img,
.rodape-principal .pagamento-logo img,
.rodape-conteudo .pagamento-logo img {
    width: 100%;
    max-width: 68px;
    height: 30px;
    margin: 0;

    object-fit: contain;
}

.pagamento-aviso {
    margin-top: 12px;

    color: rgba(255, 255, 255, 0.65) !important;

    font-size: 10px !important;
    line-height: 1.45 !important;
}

.comprar-rodape {
    margin-top: 8px;

    color: var(--dourado-claro) !important;

    font-weight: 800;
}

.rodape-inferior {
    width: min(1180px, 100%);
    margin: 25px auto 0;
    padding-top: 16px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
}

.rodape-inferior p {
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   RODAPÉ DAS PÁGINAS INTERNAS
========================================================= */

footer:not(.rodape-principal) {
    width: 100%;
    padding: 34px 5% 20px;

    color: var(--branco);

    background:
        linear-gradient(
            135deg,
            #2b1738,
            #58316f
        );
}

footer:not(.rodape-principal) .conteudo-rodape {
    width: min(1150px, 100%);
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

footer:not(.rodape-principal) .marca-rodape {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 17px;
}

footer:not(.rodape-principal) .marca-rodape img {
    width: 82px;
    min-width: 82px;
    height: 82px;

    padding: 6px;

    object-fit: contain;

    border: 1px solid rgba(244, 217, 149, 0.35);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.08);
}

footer:not(.rodape-principal) .marca-rodape h2 {
    margin: 0;

    color: var(--dourado-claro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

footer:not(.rodape-principal) .marca-rodape p {
    max-width: 430px;
    margin: 6px 0 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 13px;
    line-height: 1.6;
}

footer:not(.rodape-principal) .links-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px 18px;
}

footer:not(.rodape-principal) .links-rodape a {
    color: rgba(255, 255, 255, 0.84);

    font-size: 12px;
    font-weight: 700;
}

footer:not(.rodape-principal) .links-rodape a:hover {
    color: var(--dourado-claro);
}

footer:not(.rodape-principal) > small {
    width: min(1150px, 100%);
    margin: 25px auto 0;
    padding-top: 16px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

    color: rgba(255, 255, 255, 0.58);

    font-size: 10px;
    line-height: 1.6;
    text-align: center;

    display: block;
}


/* =========================================================
   MENU INFERIOR DO CELULAR
========================================================= */

.menu-mobile {
    display: none;
}
/* =========================================================
   RESPONSIVIDADE — NOTEBOOK E TABLET
========================================================= */

@media screen and (max-width: 700px) {

    .topo-conteudo {
        gap: 22px;
    }

    .logo img {
        width: 115px;
        height: 115px;
    }

    .nome-site h1 {
        font-size: clamp(32px, 4vw, 46px);
    }

    .login-cliente {
        width: 340px;
        min-width: 340px;
    }

    .login-campos {
        grid-template-columns: 1fr;
    }

    .botao-login {
        width: 100%;
    }

    .links-login {
        justify-content: center;
    }

    .grade-atendimentos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rodape-conteudo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   RESPONSIVIDADE — TABLET
========================================================= */

@media screen and (max-width: 900px) {

    .menu-lateral {
        width: 76px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .menu-lateral:hover {
        width: 220px;
    }

    .estrutura-site {
        width: calc(100% - 76px);
        margin-left: 76px;
    }

    .topo {
        padding: 18px 24px;
    }

    .topo-conteudo {
        align-items: flex-start;
    }

    .marca {
        flex: 1;
    }

    .logo img {
        width: 96px;
        height: 96px;
    }

    .nome-site h1 {
        font-size: clamp(30px, 5vw, 42px);
    }

    .nome-site p {
        font-size: 13px;
    }

    .nome-site strong {
        font-size: 16px;
    }

    .login-cliente {
        width: 300px;
        min-width: 300px;
    }

    .carrossel {
        height: 430px;
    }

    .grade-trabalhos,
    .grade-depoimentos {
        grid-template-columns: 1fr;
    }

    .lista-motivos {
        grid-template-columns: 1fr;
    }

    .painel-boas-vindas,
    .painel-escolher {
        padding: 38px 28px;
    }

    footer:not(.rodape-principal) .conteudo-rodape {
        align-items: flex-start;
        flex-direction: column;
    }

    footer:not(.rodape-principal) .links-rodape {
        justify-content: flex-start;
    }
}


/* =========================================================
   RESPONSIVIDADE — CELULAR
========================================================= */

@media screen and (max-width: 700px) {

    body {
        padding-bottom: 72px;
    }

    .menu-lateral {
        width: 285px;
        height: 100vh;

        left: -310px;

        padding: 18px 14px;

        overflow-y: auto;

        transition: left 0.3s ease;
    }

    .menu-lateral:hover {
        width: 285px;
    }

    .menu-lateral.aberto {
        left: 0;
    }

    .texto-marca-lateral,
    .texto-menu,
    .rodape-menu-lateral span,
    .rodape-menu-lateral strong {
        max-width: 190px;
        opacity: 1;
        display: block;
    }

    .fechar-menu {
        display: block;
    }

    .estrutura-site {
        width: 100%;
        margin-left: 0;
    }

    .topo {
        width: 100%;
        min-height: 0;
        padding: 14px 14px 18px;
    }

    .topo-conteudo {
        width: 100%;

        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .abrir-menu {
        display: flex;

        position: absolute;
        top: 16px;
        left: 14px;
        z-index: 10;
    }

    .marca {
        width: 100%;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 8px;

        text-align: center;
    }

    .logo img {
        width: 78px;
        height: 78px;
    }

    .nome-site {
        width: 100%;
    }

    .nome-site h1 {
        font-size: clamp(28px, 10vw, 39px);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .nome-site p {
        max-width: 300px;
        margin: 7px auto 0;

        font-size: 12px;
        line-height: 1.4;
    }

    .nome-site strong {
        margin-top: 6px;

        font-size: 16px;
    }

    .login-cliente {
        width: 100%;
        min-width: 0;
        max-width: none;

        padding: 16px;
    }

    .login-cabecalho {
        justify-content: center;
    }

    .login-campos {
        width: 100%;

        grid-template-columns: 1fr;
        gap: 10px;
    }

    .campo-senha-topo {
        width: 100%;
    }

    .login-campos input,
    .botao-login {
        width: 100%;
        height: 46px;
    }

    .links-login {
        margin-top: 12px;

        justify-content: center;
        flex-wrap: wrap;

        gap: 8px 16px;
    }

    .links-login a {
        font-size: 11px;
    }


    /* =====================================================
       CARROSSEL PRINCIPAL NO CELULAR
    ===================================================== */

    .banner {
        width: 100%;
    }

    .carrossel {
        width: 100%;
        height: 230px;
        min-height: 0;
        max-height: none;
    }

    .carrossel .slide,
    .carrossel img.slide {
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }

    .carrossel .seta {
        width: 44px;
        height: 44px;

        font-size: 27px;
    }

    .carrossel .anterior {
        left: 9px;
    }

    .carrossel .proxima {
        right: 9px;
    }

    .indicadores {
        bottom: 14px;
    }


    /* =====================================================
       TÍTULOS
    ===================================================== */

    .titulo-secao,
    .titulo-trabalhos {
        margin-bottom: 28px;
    }

    .titulo-secao h2,
    .titulo-trabalhos h2 {
        font-size: clamp(30px, 10vw, 41px);
    }

    .titulo-secao p,
    .titulo-trabalhos p {
        font-size: 14px;
    }


    /* =====================================================
       CONSULTORES
    ===================================================== */

    .secao-consultores {
        padding: 52px 12px 62px;
    }

    .carrossel-consultores {
        width: 100%;

        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        align-items: center;
        gap: 7px;
    }

    .janela-consultores {
        width: 100%;
        min-width: 0;

        overflow: hidden;
    }

    .grade-consultores {
        width: max-content;

        gap: 14px;
    }

    .grade-consultores .card {
        width: calc(100vw - 126px);
        min-width: calc(100vw - 126px);
        max-width: 325px;
    }

    .foto-consultor {
        height: 245px;
    }

    .seta-consultor {
        width: 40px;
        min-width: 40px;
        height: 54px;

        border-radius: 14px;

        font-size: 28px;
    }

    .area-ver-consultores {
        margin-top: 28px;
    }

    .botao-ver-consultores {
        width: 100%;
        max-width: 320px;

        padding: 14px 18px;
    }


    /* =====================================================
       SEÇÕES PRINCIPAIS
    ===================================================== */

    .secao-boas-vindas,
    .secao-atendimentos,
    .secao-trabalhos,
    .secao-escolher,
    .secao-depoimentos {
        padding: 58px 15px;
    }

    .painel-boas-vindas,
    .painel-escolher {
        padding: 34px 20px;

        border-radius: 22px;
    }

    .painel-boas-vindas h2 {
        font-size: clamp(29px, 9vw, 40px);
    }

    .painel-boas-vindas p {
        font-size: 14px;
    }

    .lista-beneficios {
        flex-direction: column;
        align-items: stretch;
    }

    .lista-beneficios span {
        width: 100%;

        text-align: center;
    }

    .botao-boas-vindas {
        width: 100%;
        max-width: 290px;
    }

    .grade-atendimentos,
    .grade-trabalhos,
    .grade-depoimentos {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cartao-atendimento,
    .card-trabalho,
    .cartao-depoimento {
        width: 100%;
        min-width: 0;
    }

    .cartao-atendimento {
        min-height: 100px;

        padding: 18px;
    }

    .card-trabalho {
        min-height: 340px;

        padding: 26px 20px;
    }

    .painel-escolher h2 {
        font-size: clamp(27px, 9vw, 38px);
    }

    .lista-motivos {
        gap: 10px;
    }

    .lista-motivos span {
        padding: 12px 13px;
    }


    /* =====================================================
       RODAPÉ
    ===================================================== */

    .rodape-principal {
        padding: 40px 16px 24px;
    }

    .rodape-conteudo {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .rodape-coluna {
        width: 100%;

        text-align: center;
        align-items: center;
    }

    .rodape-coluna a {
        width: fit-content;
    }

    .seguranca-rodape {
        width: 100%;
        max-width: 360px;

        text-align: left;
    }

    .pagamentos {
        width: 100%;
        max-width: 320px;

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

    .pagamento-logo {
        width: 100%;
    }

    .rodape-inferior {
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    footer:not(.rodape-principal) {
        padding-left: 16px;
        padding-right: 16px;
    }

    footer:not(.rodape-principal) .marca-rodape {
        width: 100%;

        flex-direction: column;

        text-align: center;
    }

    footer:not(.rodape-principal) .links-rodape {
        width: 100%;

        justify-content: center;
    }


    /* =====================================================
       MENU INFERIOR DO CELULAR
    ===================================================== */

    .menu-mobile {
        width: 100%;
        height: 68px;

        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 1400;

        padding: 7px 5px calc(7px + env(safe-area-inset-bottom));

        border-top: 1px solid rgba(244, 217, 149, 0.22);

        background:
            linear-gradient(
                135deg,
                #1b0f21,
                #34173f
            );

        box-shadow: 0 -8px 24px rgba(18, 8, 22, 0.22);

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
    }

    .menu-mobile a {
        min-width: 0;
        height: 54px;

        border-radius: 13px;

        color: rgba(255, 255, 255, 0.7);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        transition:
            background 0.2s ease,
            color 0.2s ease;
    }

    .menu-mobile a span {
        color: var(--dourado-claro);

        font-size: 20px;
        line-height: 1;
    }

    .menu-mobile a small {
        max-width: 100%;

        overflow: hidden;

        font-size: 9px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-mobile a.ativo,
    .menu-mobile a:hover {
        background: rgba(179, 71, 114, 0.26);
        color: var(--branco);
    }
}
/* =========================================================
   RESPONSIVIDADE — CELULARES PEQUENOS
========================================================= */

@media screen and (max-width: 480px) {

    .topo {
        padding-left: 10px;
        padding-right: 10px;
    }

    .abrir-menu {
        top: 12px;
        left: 10px;

        width: 40px;
        height: 40px;
    }

    .logo img {
        width: 70px;
        height: 70px;
    }

    .nome-site h1 {
        font-size: clamp(26px, 10vw, 35px);
    }

    .nome-site p {
        max-width: 270px;

        font-size: 11px;
    }

    .nome-site strong {
        font-size: 15px;
    }

    .login-cliente {
        padding: 14px;

        border-radius: 17px;
    }

    .login-cabecalho {
        justify-content: flex-start;
    }

    .login-cabecalho h2 {
        font-size: 14px;
    }

    .login-campos input,
    .botao-login {
        height: 44px;
    }

    .links-login {
        flex-direction: column;
        align-items: center;
        gap: 7px;
    }


    /* =====================================================
       BANNER
    ===================================================== */

    .carrossel {
        height: 72vh;
        min-height: 460px;
        max-height: 620px;
    }

    .carrossel .seta {
        width: 40px;
        height: 40px;

        font-size: 23px;
    }

    .carrossel .anterior {
        left: 6px;
    }

    .carrossel .proxima {
        right: 6px;
    }

    .indicadores {
        bottom: 11px;

        gap: 6px;
    }

    .ponto {
        width: 8px;
        height: 8px;
    }

    .ponto.ativo {
        width: 23px;
    }


    /* =====================================================
       CONSULTORES
    ===================================================== */

    .secao-consultores {
        padding-left: 8px;
        padding-right: 8px;
    }

    .carrossel-consultores {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 5px;
    }

    .grade-consultores .card {
        width: calc(100vw - 102px);
        min-width: calc(100vw - 102px);
        max-width: 315px;
    }

    .seta-consultor {
        width: 36px;
        min-width: 36px;
        height: 50px;

        font-size: 24px;
    }

    .foto-consultor {
        height: 230px;
    }

    .card-conteudo {
        padding: 17px 15px;
    }

    .card h3 {
        font-size: 19px;
    }

    .resumo-consultor {
        min-height: auto;
    }


    /* =====================================================
       SEÇÕES
    ===================================================== */

    .secao-boas-vindas,
    .secao-atendimentos,
    .secao-trabalhos,
    .secao-escolher,
    .secao-depoimentos {
        padding: 50px 12px;
    }

    .titulo-secao,
    .titulo-trabalhos {
        margin-bottom: 25px;
    }

    .titulo-secao span,
    .titulo-trabalhos span {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .titulo-secao h2,
    .titulo-trabalhos h2 {
        font-size: clamp(28px, 9vw, 37px);
    }

    .titulo-secao p,
    .titulo-trabalhos p {
        font-size: 13px;
    }

    .painel-boas-vindas,
    .painel-escolher {
        padding: 30px 16px;

        border-radius: 20px;
    }

    .rotulo-boas-vindas {
        font-size: 13px;
    }

    .painel-boas-vindas h2 {
        font-size: clamp(27px, 9vw, 36px);
    }

    .painel-boas-vindas p {
        font-size: 13px;
    }

    .lista-beneficios span {
        padding: 10px 11px;

        font-size: 11px;
    }

    .botao-boas-vindas,
    .botao-ver-consultores,
    .botao-loja-trabalhos {
        width: 100%;
        max-width: 100%;

        justify-content: center;
    }

    .cartao-atendimento {
        min-height: 94px;
        padding: 17px 15px;
    }

    .cartao-atendimento strong {
        font-size: 13px;
    }

    .card-trabalho {
        min-height: 330px;
        padding: 24px 17px;
    }

    .icone-trabalho {
        width: 68px;
        height: 68px;

        font-size: 27px;
    }

    .card-trabalho h3 {
        margin-top: 20px;

        font-size: 19px;
    }

    .card-trabalho p {
        font-size: 12px;
    }

    .painel-escolher h2 {
        font-size: clamp(25px, 9vw, 34px);
    }

    .lista-motivos span {
        font-size: 12px;
    }

    .cartao-depoimento {
        padding: 22px 18px;
    }

    .cartao-depoimento p {
        font-size: 13px;
    }


    /* =====================================================
       RODAPÉ
    ===================================================== */

    .rodape-principal {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rodape-coluna h3 {
        font-size: 14px;
    }

    .rodape-coluna p,
    .rodape-coluna a {
        font-size: 12px;
    }

    .seguranca-rodape {
        padding: 12px;
    }

    .pagamentos {
        max-width: 290px;

        gap: 8px;
    }

    .pagamento-logo {
        height: 48px;
        padding: 7px;
    }

    .pagamento-logo img,
    .rodape-principal .pagamento-logo img,
    .rodape-conteudo .pagamento-logo img {
        max-width: 60px;
        height: 27px;
    }

    .rodape-inferior p {
        font-size: 9px;
    }


    /* =====================================================
       MENU INFERIOR
    ===================================================== */

    .menu-mobile {
        height: 65px;

        padding-left: 2px;
        padding-right: 2px;
    }

    .menu-mobile a {
        height: 51px;
    }

    .menu-mobile a span {
        font-size: 18px;
    }

    .menu-mobile a small {
        font-size: 8px;
    }
}


/* =========================================================
   CELULARES MUITO ESTREITOS
========================================================= */

@media screen and (max-width: 360px) {

    .nome-site h1 {
        font-size: 27px;
    }

    .nome-site p {
        max-width: 235px;
    }

    .login-cliente {
        padding: 12px;
    }

    .carrossel {
        height: 68vh;
        min-height: 430px;
    }

    .carrossel-consultores {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 4px;
    }

    .seta-consultor {
        width: 32px;
        min-width: 32px;
        height: 46px;

        font-size: 21px;
    }

    .grade-consultores .card {
        width: calc(100vw - 82px);
        min-width: calc(100vw - 82px);
    }

    .foto-consultor {
        height: 215px;
    }

    .titulo-secao h2,
    .titulo-trabalhos h2 {
        font-size: 28px;
    }

    .painel-boas-vindas h2,
    .painel-escolher h2 {
        font-size: 27px;
    }

    .pagamentos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 230px;
    }

    .menu-mobile a small {
        font-size: 7px;
    }
}


/* =========================================================
   ACESSIBILIDADE E FOCO
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(224, 184, 102, 0.85);
    outline-offset: 3px;
}

button:active,
.botao-consultar:active,
.botao-ver-consultores:active,
.botao-boas-vindas:active,
.botao-trabalho:active,
.botao-loja-trabalhos:active {
    transform: scale(0.98);
}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   CAMADA ESCURA DO MENU MOBILE
========================================================= */

.fundo-menu {
    position: fixed;
    inset: 0;
    z-index: 1450;

    opacity: 0;
    visibility: hidden;

    background: rgba(11, 5, 14, 0.68);

    backdrop-filter: blur(3px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.fundo-menu.ativo {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   MENSAGENS E AVISOS
========================================================= */

.mensagem-site {
    width: min(560px, calc(100% - 30px));
    padding: 15px 18px;

    position: fixed;
    top: 22px;
    left: 50%;
    z-index: 3000;

    transform: translate(-50%, -30px);

    opacity: 0;
    visibility: hidden;

    border-radius: 16px;

    background: var(--roxo-escuro);
    color: var(--branco);

    box-shadow: 0 18px 40px rgba(20, 8, 24, 0.28);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
}

.mensagem-site.ativa {
    transform: translate(-50%, 0);

    opacity: 1;
    visibility: visible;
}

.mensagem-site.sucesso {
    background: #287749;
}

.mensagem-site.erro {
    background: #a33346;
}

.mensagem-site.aviso {
    background: #8a6024;
}


/* =========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
========================================================= */

.botao-whatsapp {
    width: 58px;
    height: 58px;

    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1350;

    border-radius: 50%;

    background: #25d366;
    color: var(--branco);

    font-size: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 13px 28px rgba(17, 120, 61, 0.3);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-whatsapp:hover {
    transform: translateY(-4px) scale(1.04);

    box-shadow: 0 17px 34px rgba(17, 120, 61, 0.4);
}


/* =========================================================
   ESTADO DE CARREGAMENTO
========================================================= */

.carregando {
    min-height: 180px;

    color: var(--texto-suave);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    text-align: center;
}

.carregando::before {
    content: "";

    width: 38px;
    height: 38px;

    border: 4px solid rgba(88, 49, 111, 0.16);
    border-top-color: var(--vinho);
    border-radius: 50%;

    animation: girar 0.8s linear infinite;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   ESTADO SEM CONSULTORES
========================================================= */

.sem-consultores {
    width: 100%;
    min-height: 250px;
    padding: 35px;

    border: 1px dashed rgba(88, 49, 111, 0.3);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.65);

    color: var(--texto-suave);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    text-align: center;
}

.sem-consultores strong {
    color: var(--roxo-escuro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.sem-consultores p {
    max-width: 480px;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   ESTADO OFFLINE DO CONSULTOR
========================================================= */

.card.offline {
    opacity: 0.83;
}

.card.offline .status {
    color: #8c4653;
}

.card.offline .ponto-online {
    background: #bc6471;

    box-shadow: none;
}

.card.offline .botao-consultar {
    background: #9c929e;

    cursor: not-allowed;
}

.card.offline .botao-consultar:hover {
    transform: none;

    box-shadow: none;
}


/* =========================================================
   MODAL
========================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 2500;

    opacity: 0;
    visibility: hidden;

    background: rgba(15, 7, 18, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    backdrop-filter: blur(5px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.modal.ativo {
    opacity: 1;
    visibility: visible;
}

.modal-conteudo {
    width: min(560px, 100%);
    max-height: 90vh;
    padding: 28px;

    position: relative;

    overflow-y: auto;

    border: 1px solid rgba(88, 49, 111, 0.16);
    border-radius: 24px;

    background: var(--branco);

    box-shadow: 0 25px 65px rgba(10, 3, 13, 0.35);

    transform: translateY(22px) scale(0.97);

    transition: transform 0.3s ease;
}

.modal.ativo .modal-conteudo {
    transform: translateY(0) scale(1);
}

.fechar-modal {
    width: 38px;
    height: 38px;

    position: absolute;
    top: 14px;
    right: 14px;

    border-radius: 50%;

    background: #f3edf5;
    color: var(--roxo-escuro);

    font-size: 22px;

    cursor: pointer;
}

.modal-conteudo h2 {
    padding-right: 45px;

    color: var(--roxo-escuro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
}

.modal-conteudo p {
    margin-top: 14px;

    color: var(--texto-suave);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   FORMULÁRIOS GERAIS
========================================================= */

.formulario {
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 30px;

    border: 1px solid rgba(88, 49, 111, 0.14);
    border-radius: 24px;

    background: var(--branco);

    box-shadow: 0 16px 34px rgba(38, 16, 44, 0.09);
}

.grupo-campo {
    margin-bottom: 18px;
}

.grupo-campo label {
    margin-bottom: 7px;

    color: var(--roxo-escuro);

    font-size: 12px;
    font-weight: 800;

    display: block;
}

.grupo-campo input,
.grupo-campo select,
.grupo-campo textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;

    border: 1px solid rgba(88, 49, 111, 0.2);
    border-radius: 13px;
    outline: none;

    background: #ffffff;
    color: var(--texto);

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.grupo-campo textarea {
    min-height: 130px;

    resize: vertical;
}

.grupo-campo input:focus,
.grupo-campo select:focus,
.grupo-campo textarea:focus {
    border-color: var(--rosa);

    box-shadow: 0 0 0 4px rgba(179, 71, 114, 0.1);
}

.botao-formulario {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--vinho),
            var(--rosa)
        );

    color: var(--branco);

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-formulario:hover {
    transform: translateY(-2px);

    box-shadow: 0 11px 24px rgba(122, 40, 76, 0.25);
}


/* =========================================================
   PÁGINAS INTERNAS
========================================================= */

.pagina-interna {
    min-height: 70vh;
    padding: 65px 5%;

    background:
        linear-gradient(
            180deg,
            #f8f4f8,
            #f1eaf3
        );
}

.cabecalho-pagina {
    width: min(850px, 100%);
    margin: 0 auto 35px;

    text-align: center;
}

.cabecalho-pagina span {
    color: var(--dourado);

    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.cabecalho-pagina h1 {
    margin-top: 9px;

    color: var(--roxo-escuro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 5vw, 50px);
    line-height: 1.1;
}

.cabecalho-pagina p {
    margin-top: 13px;

    color: var(--texto-suave);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   CORREÇÕES FINAIS
========================================================= */

body.menu-aberto {
    overflow: hidden;
}

[hidden] {
    display: none !important;
}

.invisivel {
    display: none !important;
}

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

.largura-maxima {
    width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   AJUSTES MOBILE FINAIS
========================================================= */

@media screen and (max-width: 700px) {

    .botao-whatsapp {
        width: 52px;
        height: 52px;

        right: 14px;
        bottom: 82px;

        font-size: 25px;
    }

    .mensagem-site {
        top: 12px;

        font-size: 12px;
    }

    .modal {
        padding: 12px;
    }

    .modal-conteudo {
        padding: 24px 18px;

        border-radius: 20px;
    }

    .modal-conteudo h2 {
        font-size: 25px;
    }

    .formulario {
        padding: 22px 16px;

        border-radius: 20px;
    }

    .pagina-interna {
        padding: 48px 14px 58px;
    }

    .cabecalho-pagina {
        margin-bottom: 28px;
    }

    .cabecalho-pagina h1 {
        font-size: clamp(29px, 10vw, 40px);
    }
}


/* =========================================================
   FIM DO ARQUIVO STYLE.CSS
========================================================= */