/* ===== RESET E BASE ===== */

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

:root {
    --dourado: #c9a227;
    --dourado-claro: #e0b830;
    --preto: #0d0d0d;
    --preto-suave: #161616;
    --cinza-card: #1e1e1e;
    --cinza-borda: #2b2b2b;
    --texto-claro: #f5f5f5;
    --texto-secundario: #a8a8a8;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--preto);
    color: var(--texto-claro);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
    letter-spacing: 0.5px;
}


/* ===== NAVBAR ===== */

.navbar {
    background-color: rgba(13, 13, 13, 0.95) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cinza-borda);
    padding: 18px 0;
}

.navbar-brand {
    color: var(--texto-claro) !important;
    font-size: 1.4rem;
    letter-spacing: 1px;
    /* O nome da barbearia é dado do cliente e não tem limite de tamanho.
     * O Bootstrap traz `white-space: nowrap` aqui, então um nome longo
     * empurra a navbar inteira e cria rolagem horizontal no celular.
     * Quebrar a linha mostra o nome inteiro; truncar esconderia a identidade
     * da barbearia, que é justamente o que o cliente precisa ver.
     *
     * `min-width: 0` é o que permite o item encolher dentro do flex: sem
     * isso o padrão `auto` trava a largura no conteúdo e nenhuma quebra
     * acontece. */
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.navbar-brand span {
    color: var(--dourado);
}

.nav-link {
    color: var(--texto-claro) !important;
    font-weight: 500;
    margin-left: 10px;
    padding: 8px 18px !important;
    border-radius: 6px;
    transition: all 0.25s ease;
}

.nav-link:hover {
    color: var(--preto) !important;
    background-color: var(--dourado);
}


/* ===== BOTÃO PRINCIPAL ===== */

.btn-dourado {
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    border: none;
    color: var(--preto);
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(201, 162, 39, 0.25);
}

.btn-dourado:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(201, 162, 39, 0.4);
    color: var(--preto);
}


/* ===== HERO COM PARALLAX ===== */

.hero {
    position: relative;
    padding: 160px 20px 140px;
    text-align: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: calc(100% + 160px);
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.85) 100%), url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center 30%;
    will-change: transform;
    z-index: 0;
}

.hero-badge,
.hero h1,
.hero p,
.hero .btn-dourado {
    position: relative;
    z-index: 1;
}


/* ===== SEÇÃO DE SERVIÇOS ===== */

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

.section-title span.tag {
    color: var(--dourado);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 3px;
    font-weight: 600;
}

.section-title h2 {
    font-size: 2.2rem;
    margin-top: 8px;
}

.card-servico {
    background-color: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    color: var(--texto-claro);
    height: 100%;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.card-servico:hover {
    transform: translateY(-8px);
    border-color: var(--dourado);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.card-servico .icone {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 18px;
    color: var(--dourado);
}

.card-servico h5 {
    color: var(--dourado);
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.card-servico p {
    color: var(--texto-secundario);
    font-size: 0.95rem;
    margin-bottom: 0;
}


/* ===== FORMULÁRIO DE AGENDAMENTO ===== */

.pagina-agendamento {
    padding: 80px 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

.form-box {
    background-color: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: 14px;
    padding: 48px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.form-box .tag-topo {
    color: var(--dourado);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 3px;
    font-weight: 600;
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

.form-box h2 {
    text-align: center;
    margin-bottom: 8px;
    font-size: 1.8rem;
}

.form-box .subtitulo {
    text-align: center;
    color: var(--texto-secundario);
    font-size: 0.95rem;
    margin-bottom: 32px;
}

.form-label {
    color: var(--texto-secundario);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.form-control,
.form-select {
    background-color: var(--preto-suave);
    color: var(--texto-claro);
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--preto-suave);
    color: var(--texto-claro);
    border-color: var(--dourado);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.2);
}

.form-control::placeholder {
    color: #666;
}

.form-select option {
    background-color: var(--preto-suave);
}


/* ===== FOOTER ===== */

footer {
    background-color: var(--preto-suave);
    color: var(--texto-secundario);
    padding: 28px 0;
    border-top: 1px solid var(--cinza-borda);
    text-align: center;
    font-size: 0.9rem;
    margin-top: auto;
}


/* ===== RESPONSIVO ===== */

@media (max-width: 768px) {
    .hero {
        padding: 110px 20px 90px;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .form-box {
        padding: 32px 24px;
    }
}


/* ===== PÁGINAS DE LOGIN / CADASTRO ===== */

.pagina-auth {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #161616 0%, #0d0d0d 70%);
}


/* Blobs dourados flutuando no fundo */

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    z-index: 0;
    animation: flutuar 12s ease-in-out infinite;
}

.blob-1 {
    width: 350px;
    height: 350px;
    background: var(--dourado);
    top: -80px;
    left: -100px;
    animation-delay: 0s;
}

.blob-2 {
    width: 280px;
    height: 280px;
    background: var(--dourado-claro);
    bottom: -60px;
    right: -80px;
    animation-delay: 3s;
}

.blob-3 {
    width: 200px;
    height: 200px;
    background: var(--dourado);
    top: 60%;
    left: 55%;
    opacity: 0.2;
    animation-delay: 6s;
}

@keyframes flutuar {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -40px) scale(1.1);
    }
    66% {
        transform: translate(-25px, 25px) scale(0.95);
    }
}


/* Card com efeito 3D + brilho ao redor */

.form-box-auth {
    position: relative;
    z-index: 1;
    background-color: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: 18px;
    padding: 48px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.form-box-auth::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, var(--dourado), transparent 40%, transparent 60%, var(--dourado-claro));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    pointer-events: none;
    animation: girarBorda 4s linear infinite;
}

@keyframes girarBorda {
    to {
        filter: hue-rotate(20deg);
    }
}


/* Ícone/emoji decorativo girando no topo do card */

.icone-topo {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.12);
    animation: balancar 3s ease-in-out infinite;
}

@keyframes balancar {
    0%,
    100% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(8deg);
    }
}


/* Título com leve destaque */

.form-box-auth h2 {
    text-align: center;
    margin-bottom: 28px;
    font-size: 1.9rem;
}


/* Corrige o link azul padrão pra combinar com o tema */

.form-box-auth a {
    color: var(--dourado);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.form-box-auth a:hover {
    color: var(--dourado-claro);
    text-decoration: underline;
}

@media (max-width: 576px) {
    .blob {
        display: none;
    }
    /* some com os blobs em telas pequenas pra não pesar */
}


/* ===== EFEITO 3D (TILT) REUTILIZÁVEL ===== */

.tilt {
    transition: transform 0.15s ease;
    transform-style: preserve-3d;
    will-change: transform;
}


/* Brilho que segue o mouse dentro do card */

.tilt {
    position: relative;
    overflow: hidden;
}

.tilt::after {
    content: "";
    position: absolute;
    top: var(--brilho-y, 50%);
    left: var(--brilho-x, 50%);
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.25), transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tilt:hover::after {
    opacity: 1;
}


/* Profundidade extra nos elementos internos do card (efeito parallax leve) */

.tilt .icone {
    transform: translateZ(30px);
}

.tilt h5,
.tilt h2,
.tilt .tag-topo {
    transform: translateZ(20px);
}


/* Sombra dinâmica mais forte no hover pra reforçar a sensação de profundidade */

.card-servico.tilt:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(201, 162, 39, 0.15);
}

.form-box.tilt:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(201, 162, 39, 0.12);
}


/* ===== TABELAS (painel barbeiro / gerenciar barbeiros) ===== */

.tabela-box {
    background-color: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.table-dark {
    --bs-table-bg: transparent;
    color: var(--texto-claro);
}

.table-dark th {
    color: var(--dourado);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--cinza-borda);
    padding-bottom: 14px;
}

.table-dark td {
    border-bottom: 1px solid var(--cinza-borda);
    padding: 14px 8px;
    color: var(--texto-secundario);
}

.table-dark tr:last-child td {
    border-bottom: none;
}

.badge-servico {
    background: rgba(201, 162, 39, 0.15);
    color: var(--dourado);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-excluir {
    background: transparent;
    border: 1px solid #b03a3a;
    color: #e07777;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-excluir:hover {
    background: #b03a3a;
    color: #fff;
}

/* ===== AVISO DE PLANO ESGOTADO ===== */

.alert-plano-esgotado {
    border: 1px solid rgba(23, 162, 184, 0.28);
    border-radius: 8px;
    padding: 14px 16px;
}

.alert-plano-esgotado-conteudo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-plano-esgotado-texto {
    line-height: 1.65;
}

.alert-plano-esgotado-texto > strong:first-child {
    display: inline-block;
    margin-bottom: 2px;
}

.alert-plano-esgotado-acoes {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-top: 2px;
}

.btn-ok-plano {
    min-width: 56px;
    padding: 5px 14px;
    border: 1px solid rgba(108, 117, 125, 0.7);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);
    color: #4a4a4a;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.btn-ok-plano:hover,
.btn-ok-plano:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(108, 117, 125, 0.9);
    color: #2f2f2f;
    box-shadow: none;
    transform: translateY(-1px);
}

@media (max-width: 576px) {
    .alert-plano-esgotado-acoes {
        justify-content: stretch;
    }

    .btn-ok-plano {
        width: 100%;
    }
}


/* ===== NÚMEROS DE DESTAQUE (dashboard) ===== */

.numero-dashboard {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--texto-claro);
    margin: 0;
}

.section-title.text-start {
    text-align: left;
    margin-bottom: 35px;
}


/* ===== BADGES DE STATUS ===== */

.badge-pendente {
    background: rgba(224, 184, 48, 0.15);
    color: var(--dourado-claro);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.badge-concluido {
    background: rgba(60, 179, 113, 0.15);
    color: #4caf7d;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-filtro {
    background: transparent;
    border: 1px solid var(--cinza-borda);
    color: var(--texto-secundario);
    transition: all 0.2s ease;
}

.btn-filtro:hover {
    border-color: var(--dourado);
    color: var(--dourado);
}


/* ===== BADGE COM NOME DA EMPRESA (login/cadastro) ===== */

.empresa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(201, 162, 39, 0.12);
    color: var(--dourado);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
}


/* =====================================================================
   NAVAFLOW - AJUSTES PARA CELULAR + ANIMAÇÕES
   Cole este bloco no FINAL do agendamento/static/style/style.css
   (precisa ficar depois de tudo, porque ele sobrescreve regras antigas)
   ===================================================================== */


/* ===== BASE ===== */

html {
    color-scheme: dark;
    /* calendário do <input type="date">, setas e barra de rolagem ficam escuros */
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    /* dvh = altura real da tela no celular (a barra do navegador não corta o layout) */
}

a,
button,
.btn,
.form-control,
.form-select {
    touch-action: manipulation;
    /* tira o atraso de toque e o zoom por toque duplo */
    -webkit-tap-highlight-color: transparent;
}


/* ===== NAVBAR ===== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow 0.3s ease;
    /* Ícone do menu (hambúrguer) e borda em dourado.
       O padrão do Bootstrap é escuro e some no fundo preto. */
    --bs-navbar-toggler-border-color: var(--cinza-borda);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c9a227' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.rolando {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.navbar-toggler {
    padding: 8px 12px;
    border-radius: 10px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.3);
}


/* "Olá, fulano" não é link: não pode acender dourado no hover */

.navbar span.nav-link {
    color: var(--texto-secundario) !important;
}

.navbar span.nav-link:hover {
    background: transparent;
}


/* Página atual (marcada pelo JS) */

.nav-link.active {
    color: var(--dourado) !important;
}

.nav-link.active:hover {
    color: var(--preto) !important;
}

@media (max-width: 991.98px) {
    .navbar {
        padding: 12px 0;
    }
    .navbar-brand {
        font-size: 1.2rem;
    }
    /* Menu aberto vira um painel, com links grandes pro dedo */
    .navbar-collapse {
        margin-top: 12px;
        padding: 8px;
        background-color: var(--cinza-card);
        border: 1px solid var(--cinza-borda);
        border-radius: 14px;
    }
    .navbar-nav {
        gap: 2px;
    }
    .navbar .nav-link {
        margin-left: 0;
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px 16px !important;
    }
    /* o botão "Sair" está dentro de um form com d-inline */
    .navbar .nav-item form {
        display: block !important;
    }
    .navbar .nav-item form .nav-link {
        width: 100%;
        text-align: left;
    }
    .navbar .nav-item:last-child {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--cinza-borda);
    }
}


/* ===== FORMULÁRIOS / SELECTS ===== */

.form-control,
.form-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


/* Seta do select em dourado (a padrão é escura e some no fundo preto)
   + espaço à direita pro texto não ficar por cima da seta */

.form-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9a227' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option {
    color: var(--texto-claro);
}


/* Autopreenchimento do navegador (aquele fundo azul-claro) combinando com o tema */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texto-claro);
    -webkit-box-shadow: 0 0 0 1000px var(--preto-suave) inset;
    caret-color: var(--texto-claro);
    transition: background-color 9999s ease-out;
}

@media (max-width: 768px) {
    .form-control,
    .form-select {
        min-height: 48px;
        font-size: 16px;
        /* abaixo de 16px o iPhone dá zoom sozinho ao tocar no campo */
    }
    textarea.form-control {
        min-height: 96px;
    }
    .btn {
        min-height: 44px;
        /* tamanho mínimo confortável pro toque */
    }
}


/* ===== TABELAS VIRAM CARDS NO CELULAR ===== */


/* O JS (tilt.js) copia o título de cada coluna pro atributo data-label das células */

@media (max-width: 767.98px) {
    .tabela-box {
        padding: 12px;
    }
    .tabela-box thead {
        display: none;
    }
    .tabela-box table,
    .tabela-box tbody,
    .tabela-box tr,
    .tabela-box td {
        display: block;
        width: 100%;
    }
    .tabela-box tr {
        background: var(--preto-suave);
        border: 1px solid var(--cinza-borda);
        border-radius: 12px;
        padding: 6px 14px;
        margin-bottom: 12px;
    }
    .tabela-box tr:last-child {
        margin-bottom: 0;
    }
    .tabela-box td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 10px 0 !important;
        border-bottom: 1px dashed var(--cinza-borda) !important;
        text-align: right;
    }
    .tabela-box td:last-child {
        border-bottom: none !important;
    }
    .tabela-box td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--dourado);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: left;
    }
    /* linha "Nenhum registro..." */
    .tabela-box td[colspan] {
        display: block;
        text-align: center !important;
    }
    /* coluna de botões: sem rótulo, botões dividem a largura */
    .tabela-box td.td-acao {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tabela-box td.td-acao::before {
        display: none;
    }
    .tabela-box td.td-acao .btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }
}


/* ===== LAYOUT EM TELA PEQUENA ===== */

@media (max-width: 576px) {
    .container.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .section-title {
        margin-bottom: 32px;
    }
    .section-title h2 {
        font-size: 1.6rem;
    }
    .hero {
        padding: 96px 16px 72px;
    }
    .hero h1 {
        font-size: 1.9rem;
    }
    .hero .btn-dourado {
        width: 100%;
    }
    .card-servico {
        padding: 18px;
    }
    .numero-dashboard {
        font-size: 1.8rem;
    }
    .form-box h2 {
        font-size: 1.5rem;
    }
    .pagina-auth {
        padding: 32px 0;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .form-box-auth {
        padding: 32px 22px;
        border-radius: 16px;
    }
    .form-box-auth h2 {
        font-size: 1.6rem;
    }
    /* filtros do dashboard (Todos / Pendentes / Concluídos) ocupam a largura toda */
    .btn-group {
        width: 100%;
    }
    .btn-group .btn {
        flex: 1;
    }
    footer {
        padding: 22px 12px;
        font-size: 0.8rem;
    }
    /* Em vez de esconder os blobs dourados, deixa 2 parados e mais leves */
    .blob {
        display: block;
        animation: none;
        filter: blur(50px);
        opacity: 0.22;
    }
    .blob-3 {
        display: none;
    }
}

@media (max-width: 767.98px) {
    /* sem parallax no celular: a imagem do hero não precisa de folga extra */
    .hero-bg {
        top: 0;
        height: 100%;
    }
}


/* ===== ANIMAÇÕES ===== */

@keyframes revelar {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}


/* Entrada do topo da página (um único momento, em sequência) */

.hero-badge {
    display: inline-block;
}

.hero-badge,
.hero h1,
.hero p,
.hero .btn-dourado {
    animation: revelar 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.hero h1 {
    animation-delay: 0.1s;
}

.hero p {
    animation-delay: 0.2s;
}

.hero .btn-dourado {
    animation-delay: 0.3s;
}


/* Cards entrando em sequência ao aparecer na tela (classes colocadas pelo JS) */

.reveal {
    opacity: 0;
}

.reveal-in {
    animation: revelar 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0ms) backwards;
}


/* Mensagens do Django (sucesso / erro) */

.alert {
    animation: revelar 0.4s ease backwards;
}


/* Onda ao tocar num botão dourado (resposta ao toque) */

.btn-dourado {
    position: relative;
    overflow: hidden;
}

.onda {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: onda 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes onda {
    to {
        transform: scale(1);
        opacity: 0;
    }
}


/* ===== TELAS DE TOQUE (sem mouse) ===== */


/* No celular o :hover "gruda" depois do toque. Aqui ele é desligado
   e no lugar entra o feedback de :active (enquanto o dedo está apertando). */

@media (hover: none) {
    .nav-link:hover {
        background-color: transparent;
        color: var(--texto-claro) !important;
    }
    .nav-link.active:hover {
        color: var(--dourado) !important;
    }
    .btn-dourado:hover {
        transform: none;
        box-shadow: 0 4px 14px rgba(201, 162, 39, 0.25);
    }
    .card-servico:hover {
        transform: none;
        border-color: var(--cinza-borda);
        box-shadow: none;
    }
    .btn-excluir:hover {
        background: transparent;
        color: #e07777;
    }
    .btn-filtro:hover {
        border-color: var(--cinza-borda);
        color: var(--texto-secundario);
    }
    .tilt::after {
        display: none;
        /* brilho que segue o mouse não faz sentido sem mouse */
    }
    .btn-dourado:active {
        transform: scale(0.97);
    }
    .card-servico:active {
        transform: scale(0.985);
        border-color: var(--dourado);
    }
    .btn-excluir:active {
        background: #b03a3a;
        color: #fff;
    }
}


/* ===== QUEM PREFERE MENOS MOVIMENTO ===== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal {
        opacity: 1;
    }
}


/* =====================================================================
   NAVAFLOW - CHIPS DE HORÁRIO (tela de agendamento)
   Cole no FINAL do agendamento/static/style/style.css
   ===================================================================== */

.chips-horario {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}


/* mensagem no lugar dos chips ("Escolha o barbeiro e a data...", "Nenhum horário livre...") */

.chips-aviso {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--cinza-borda);
    border-radius: 10px;
    text-align: center;
    color: var(--texto-secundario);
    font-size: 0.9rem;
}

.chip-horario {
    position: relative;
    margin: 0;
    cursor: pointer;
    animation: chipEntra 0.3s ease backwards;
    animation-delay: calc(var(--i, 0) * 30ms);
}


/* o radio fica por cima do chip, invisível, pra receber o toque e o foco do teclado */

.chip-horario input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.chip-horario span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    background-color: var(--preto-suave);
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    color: var(--texto-claro);
    font-size: 0.95rem;
    font-weight: 500;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.chip-horario input:checked+span {
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    border-color: var(--dourado);
    color: var(--preto);
    font-weight: 600;
}

.chip-horario input:focus-visible+span {
    border-color: var(--dourado);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.35);
}

.chip-horario:active span {
    transform: scale(0.96);
}

@media (hover: hover) {
    .chip-horario:hover input:not(:checked)+span {
        border-color: var(--dourado);
        color: var(--dourado);
    }
}


/* carregando: retângulos com brilho passando */

.chip-skeleton {
    min-height: 46px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--preto-suave) 25%, var(--cinza-borda) 50%, var(--preto-suave) 75%);
    background-size: 200% 100%;
    animation: chipBrilho 1.2s linear infinite;
}


/* tentou enviar sem escolher horário */

.chips-horario.erro {
    animation: chipTremer 0.35s ease;
}

@keyframes chipEntra {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes chipBrilho {
    to {
        background-position: -200% 0;
    }
}

@keyframes chipTremer {
    25% {
        transform: translateX(-6px);
    }
    75% {
        transform: translateX(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chip-horario,
    .chip-skeleton,
    .chips-horario.erro {
        animation: none;
    }
}


/* =====================================================================
   NAVAFLOW - SELECTS PERSONALIZADOS + 3D NO TOQUE
   Cole no FINAL do agendamento/static/style/style.css
   (depois do style-mobile.css e do style-chips.css)
   ===================================================================== */


/* ===== SELECT PERSONALIZADO: peças em comum ===== */

.sel {
    position: relative;
}


/* o <select> original fica por cima, invisível: vale pro envio e pra validação */

.sel .sel-nativo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.sel-erro {
    border-color: #b03a3a !important;
}


/* ===== DROPDOWN: o campo (gatilho) ===== */

.form-select.sel-gatilho {
    position: relative;
    display: block;
    width: 100%;
    padding-right: 2.75rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: none;
}


/* seta desenhada aqui pra poder girar quando abre */

.sel-gatilho::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--dourado);
    border-bottom: 2px solid var(--dourado);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease;
}

.sel-gatilho[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(-135deg);
}

.sel-gatilho[aria-expanded="true"] {
    border-color: var(--dourado);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.2);
}

.sel-gatilho.sel-vazio {
    color: #666;
}


/* ===== DROPDOWN: painel no PC ===== */

.sel-painel {
    position: fixed;
    z-index: 2000;
    box-sizing: border-box;
    min-height: 0;
    padding: 6px;
    overflow-y: auto;
    background-color: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    transform-origin: top center;
    animation: selAbre 0.18s ease-out;
}

.sel-painel.sel-cima {
    transform-origin: bottom center;
}

.sel-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--texto-claro);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sel-item:focus-visible {
    outline: none;
    background-color: rgba(201, 162, 39, 0.14);
}

@media (hover: hover) {
    .sel-item:hover {
        background-color: rgba(201, 162, 39, 0.14);
    }
}

.sel-item.sel-marcado {
    color: var(--dourado);
    font-weight: 600;
}


/* "check" da opção escolhida */

.sel-item.sel-marcado::after {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--dourado);
    border-bottom: 2px solid var(--dourado);
    transform: rotate(45deg);
}

.sel-item.sel-desativado {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ===== DROPDOWN: folha que sobe no celular ===== */

html.sel-travado {
    overflow: hidden;
}

.sel-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.sel-fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    animation: selFade 0.2s ease-out;
}

.sel-folha {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75vh;
    max-height: 75dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    background-color: var(--cinza-card);
    border-top: 1px solid var(--cinza-borda);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5);
    animation: selSobe 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sel-alca {
    width: 40px;
    height: 4px;
    margin: 6px auto 14px;
    border-radius: 2px;
    background: var(--cinza-borda);
}

.sel-titulo {
    margin: 0 0 6px;
    padding: 0 12px;
    color: var(--dourado);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sel-folha .sel-item {
    min-height: 54px;
    font-size: 1rem;
}

.sel-folha .sel-item:active {
    background-color: rgba(201, 162, 39, 0.18);
}


/* saída */

.sel-saindo {
    pointer-events: none;
}

.sel-painel.sel-saindo {
    animation: selFecha 0.15s ease-in forwards;
}

.sel-saindo .sel-folha {
    animation: selDesce 0.2s ease-in forwards;
}

.sel-saindo .sel-fundo {
    animation: selFadeOut 0.2s ease-in forwards;
}

@keyframes selAbre {
    from {
        opacity: 0;
        transform: scaleY(0.92) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes selFecha {
    to {
        opacity: 0;
        transform: scaleY(0.94);
    }
}

@keyframes selSobe {
    from {
        transform: translateY(100%);
    }
    to {
        transform: none;
    }
}

@keyframes selDesce {
    to {
        transform: translateY(100%);
    }
}

@keyframes selFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes selFadeOut {
    to {
        opacity: 0;
    }
}


/* ===== SEGMENTADO (data-segmentado): pílula dourada que desliza ===== */

.sel-segmentado {
    position: relative;
    display: flex;
    padding: 4px;
    background-color: var(--preto-suave);
    border: 1px solid var(--cinza-borda);
    border-radius: 12px;
}

.sel-pilula {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--n, 2));
    border-radius: 8px;
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3);
    transform: translateX(calc(var(--idx, 0) * 100%));
    transition: transform 0.35s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.2s ease;
}

.sel-seg-vazio .sel-pilula {
    opacity: 0;
}

.sel-seg-op {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 44px;
    padding: 0 12px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--texto-secundario);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.25s ease;
}

.sel-seg-op.sel-seg-ativo {
    color: var(--preto);
    font-weight: 600;
}

.sel-seg-op:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .sel-seg-op {
        font-size: 1rem;
    }
}


/* ===== 3D NO CELULAR ===== */


/* No PC o card inclina seguindo o mouse. No celular:
   1) entra "levantando" do chão quando aparece na tela
   2) ao apertar, afunda do lado onde o dedo está e volta com um leve quique (feito pelo tilt.js) */

@keyframes revelar3d {
    from {
        opacity: 0;
        transform: perspective(700px) translateY(28px) rotateX(14deg);
        transform-origin: 50% 100%;
    }
    to {
        opacity: 1;
        transform: none;
        transform-origin: 50% 100%;
    }
}

@media (hover: none) {
    .card-servico.reveal-in,
    .form-box.reveal-in,
    .form-box-auth.reveal-in {
        animation-name: revelar3d;
    }
}


/* brilho dourado seguindo o dedo enquanto aperta */

.tilt.tocando::after {
    display: block;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sel-painel,
    .sel-folha,
    .sel-fundo,
    .sel-pilula {
        animation: none;
        transition: none;
    }
}


/* =====================================================================
   NAVAFLOW - CAMPO DE DATA + SEM BRILHO AMARELO NOS FORMULÁRIOS
   Cole no FINAL do agendamento/static/style/style.css
   ===================================================================== */


/* ===== CAMPO DE DATA (agendamento e data de nascimento no cadastro) ===== */

input[type="date"].form-control {
    display: block;
    width: 100%;
    min-width: 0;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}


/* vazio: "dd/mm/aaaa" em cinza; preenchido: texto normal */

input[type="date"].form-control:invalid::-webkit-datetime-edit {
    color: #666;
}


/* a parte que está sendo editada (dia, mês ou ano) acende em dourado */

input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background-color: var(--dourado);
    color: var(--preto);
    border-radius: 4px;
    outline: none;
}


/* ícone do calendário em dourado, maior e mais fácil de tocar */

input[type="date"]::-webkit-calendar-picker-indicator {
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.9;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2'/%3e%3cpath d='M16 2v4M8 2v4M3 10h18'/%3e%3c/svg%3e") center / 18px no-repeat;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(201, 162, 39, 0.15);
    opacity: 1;
}


/* =====================================================================
   NAVAFLOW - CARDS (serviços, números do dashboard, planos)
   Cole no FINAL do agendamento/static/style/style.css
   ===================================================================== */

.card-servico {
    position: relative;
    padding: 28px 22px;
    border-radius: 16px;
    /* leve luz vindo de cima + linha clara no topo, dá volume sem ficar "brilhante" */
    background: linear-gradient(180deg, #242424 0%, var(--cinza-card) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* fio dourado no topo, como o fio de uma navalha: cresce ao passar o mouse / apertar */

.card-servico::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 36%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--dourado), transparent);
    opacity: 0.6;
    transition: width 0.4s ease, opacity 0.3s ease;
}

.card-servico:hover::before,
.card-servico:active::before,
.card-servico.tocando::before {
    width: 84%;
    opacity: 1;
}


/* ícone com aro dourado */

.card-servico .icone {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    font-size: 1.7rem;
    background: radial-gradient(circle at 30% 30%, rgba(201, 162, 39, 0.22), rgba(201, 162, 39, 0.06));
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 0 26px rgba(201, 162, 39, 0.12);
}

.card-servico h5 {
    margin-bottom: 8px;
}


/* números do dashboard / finanças */

.numero-dashboard {
    line-height: 1.1;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}


/* ===== PLANO EM DESTAQUE (landing) ===== */


/* No card do plano Básico: envolva o card com <div class="card-plano-destaque">,
   coloque <span class="selo-destaque">Mais escolhido</span> ANTES do card e
   adicione a classe "destaque" no próprio card-servico. */

.card-servico.destaque {
    border-color: var(--dourado);
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.12) 0%, var(--cinza-card) 65%);
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25), 0 18px 44px rgba(0, 0, 0, 0.4);
}

.card-plano-destaque {
    position: relative;
    height: 100%;
}

.selo-destaque {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 4px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    color: var(--preto);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}


/* ===== TABELAS NO PC: linha acende de leve ao passar o mouse ===== */

@media (hover: hover) and (min-width: 768px) {
    .tabela-box tbody tr {
        transition: background-color 0.2s ease;
    }
    .tabela-box tbody tr:hover {
        background-color: rgba(201, 162, 39, 0.05);
    }
}

@media (max-width: 576px) {
    .card-servico {
        padding: 22px 18px;
    }
}


/* =====================================================================
   NAVAFLOW - DATEPICKER PERSONALIZADO
   Cole no FINAL do agendamento/static/style/style.css
   (usa as mesmas classes de painel/folha/overlay dos selects: sel-painel,
   sel-folha, sel-overlay, sel-fundo, sel-travado e as animações selAbre,
   selFecha, selSobe, selDesce, selFade, selFadeOut)
   ===================================================================== */

.dp {
    position: relative;
}

/* o <input type="date"> original fica invisível por cima: só existe pra validar e enviar o valor */

.dp .dp-nativo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.dp-erro {
    border-color: #b03a3a !important;
}


/* ===== GATILHO (campo que aparece no lugar do input) ===== */

.form-control.dp-gatilho {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.dp-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-gatilho.dp-vazio .dp-texto {
    color: #666;
}

.dp-icone {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2'/%3e%3cpath d='M16 2v4M8 2v4M3 10h18'/%3e%3c/svg%3e") center / 18px no-repeat;
}

.dp-gatilho[aria-expanded="true"] {
    border-color: var(--dourado);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.2);
}

.dp-gatilho:focus-visible {
    outline: none;
    border-color: var(--dourado);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.2);
}


/* ===== PAINEL (PC) / FOLHA (celular) ===== */

.dp-painel {
    padding: 14px;
    min-width: 300px;
}

.dp-folha {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.dp-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 4px;
}

.dp-mes-nome {
    color: var(--dourado);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: capitalize;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .dp-mes-nome:hover {
        background-color: rgba(201, 162, 39, 0.1);
    }
}

.dp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--preto-suave);
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    color: var(--dourado);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dp-nav::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--dourado);
    border-bottom: 2px solid var(--dourado);
}

.dp-nav-anterior::before {
    transform: rotate(135deg) translate(1px, 1px);
}

.dp-nav-proximo::before {
    transform: rotate(-45deg) translate(1px, 1px);
}

@media (hover: hover) {
    .dp-nav:hover {
        border-color: var(--dourado);
        background-color: rgba(201, 162, 39, 0.1);
    }
}

.dp-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.dp-semana span {
    display: block;
    text-align: center;
    color: var(--texto-secundario);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dp-grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-dia {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--texto-claro);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .dp-dia:not(:disabled):hover {
        border-color: var(--dourado);
        color: var(--dourado);
    }
}

.dp-dia-fora {
    color: #555;
}

.dp-dia-hoje {
    border-color: var(--cinza-borda);
    font-weight: 600;
}

.dp-dia-selecionado {
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    border-color: var(--dourado);
    color: var(--preto);
    font-weight: 700;
}

.dp-dia-desabilitado {
    color: #444;
    cursor: not-allowed;
}

/* grades de mês/ano (navegação rápida, ao clicar no cabeçalho) */

.dp-grade-meses,
.dp-grade-anos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.dp-celula {
    padding: 12px 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--texto-claro);
    font-size: 0.9rem;
    text-transform: capitalize;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .dp-celula:hover {
        border-color: var(--dourado);
        color: var(--dourado);
    }
}

.dp-celula-selecionada {
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    border-color: var(--dourado);
    color: var(--preto);
    font-weight: 700;
}

.dp-folha .dp-celula {
    padding: 14px 4px;
    font-size: 1rem;
}

.dp-rodape {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px 4px 0;
    border-top: 1px solid var(--cinza-borda);
}

.dp-link {
    background: none;
    border: 0;
    color: var(--dourado);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
}

.dp-link:hover {
    color: var(--dourado-claro);
    text-decoration: underline;
}

.dp-link:disabled {
    color: #555;
    cursor: not-allowed;
    text-decoration: none;
}

/* no celular os dias ficam maiores, mais fáceis de tocar */

.dp-folha .dp-dia {
    min-height: 44px;
    font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .dp-painel,
    .dp-folha {
        animation: none;
    }
}


/* =====================================================================
   NAVAFLOW - DISPONIBILIDADE DO BARBEIRO
   Cole no FINAL do agendamento/static/style/style.css
   (reaproveita os chips de horário já usados em agendamentos.html)
   ===================================================================== */

/* cada chip de disponibilidade é um <form> com um <button> dentro —
   zera o estilo padrão de botão pra ele ficar idêntico ao chip original */

.chip-horario-form {
    margin: 0;
}

button.chip-horario {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* bloqueado: vermelho, indicando que não dá pra agendar ali */

.chip-horario-bloqueado span {
    background: rgba(176, 58, 58, 0.15);
    border-color: #b03a3a;
    color: #e07777;
    font-weight: 600;
}

@media (hover: hover) {
    .chip-horario-bloqueado:hover span {
        border-color: #e07777;
        color: #e07777;
    }
}

/* agendado: não é clicável, só informativo */

.chip-horario-agendado {
    cursor: not-allowed;
}

.chip-horario-agendado span {
    background: var(--preto-suave);
    border-style: dashed;
    color: var(--texto-secundario);
}

/* legenda de cores abaixo da grade */

.legenda-cor {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.legenda-livre {
    background: var(--preto-suave);
    border: 1px solid var(--cinza-borda);
}

.legenda-bloqueado {
    background: rgba(176, 58, 58, 0.15);
    border: 1px solid #b03a3a;
}

.legenda-agendado {
    background: var(--preto-suave);
    border: 1px dashed var(--cinza-borda);
}

/* ===== SERVIÇOS / CATÁLOGO ===== */

.servicos-acoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 110px;
}

.btn-servico-editar,
.btn-servico-alternar {
    width: 100%;
    border-radius: 8px;
    font-weight: 600;
    padding: 7px 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-servico-editar {
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    border: none;
    color: var(--preto);
}

.btn-servico-editar:hover {
    color: var(--preto);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(201, 162, 39, 0.28);
}

.btn-servico-alternar {
    background: transparent;
    border: 1px solid #b03a3a;
    color: #e07777;
}

.btn-servico-alternar:hover {
    background: #b03a3a;
    color: #fff;
}

.btn-servico-alternar.ativar {
    border-color: rgba(76, 175, 125, 0.65);
    color: #4caf7d;
}

.btn-servico-alternar.ativar:hover {
    background: rgba(76, 175, 125, 0.15);
    color: #64c98f;
}

.servico-ajuda {
    display: block;
    margin-top: 6px;
    color: var(--texto-secundario);
    font-size: 0.78rem;
    line-height: 1.45;
}

.servico-ordem-ajuda {
    margin-top: 5px;
    color: var(--texto-secundario);
    font-size: 0.75rem;
    line-height: 1.4;
}

.servico-modal .modal-content {
    background: #1b1b1b;
    border: 1px solid var(--cinza-borda);
    border-radius: 16px;
    color: var(--texto-claro);
}

.servico-modal .modal-header,
.servico-modal .modal-footer {
    border-color: var(--cinza-borda);
}

.servico-modal .btn-close {
    filter: invert(1) grayscale(1);
}

.servico-modal .form-label {
    color: var(--texto-claro);
    font-weight: 600;
}

@media (max-width: 767px) {
    .servicos-acoes {
        min-width: 100px;
    }

    .servico-modal .modal-dialog {
        margin: 12px;
    }
}


/* Gerenciamento de planos de assinatura */
.planos-tabela td,
.planos-tabela th {
    vertical-align: middle;
}

.plano-ajuda {
    display: block;
    margin-top: .35rem;
    color: var(--texto-secundario, #999);
    font-size: .78rem;
}


/* =====================================================================
   FINANÇAS - ABAS E SELECTS COMPACTOS
   ===================================================================== */

.finance-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.finance-tab {
    appearance: none;
    border: 1px solid var(--cinza-borda);
    border-radius: 9px;
    padding: 9px 16px;
    background: var(--preto-suave);
    color: var(--texto-claro);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.finance-tab:hover {
    border-color: rgba(201, 162, 39, 0.65);
    color: var(--texto-claro);
}

.finance-tab.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    color: var(--preto);
    box-shadow: 0 4px 14px rgba(201, 162, 39, 0.25);
}

.finance-tab:focus-visible {
    outline: none;
    border-color: var(--dourado);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.2);
}

.finance-tab-content {
    min-height: 0;
}

.finance-pane.active {
    animation: revelar 0.22s ease;
}

/* Dropdown de dias do mês: grade de calendário, evitando uma lista vertical enorme. */
.sel-painel.sel-grid-days {
    min-width: 350px;
    max-width: calc(100vw - 16px);
}

.sel-painel.sel-grid-days .sel-lista {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.sel-painel.sel-grid-days .sel-item {
    position: relative;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    min-height: 46px;
    padding: 6px 4px;
    text-align: center;
    line-height: 1.1;
}

.sel-dia-prefixo {
    color: var(--texto-secundario);
    font-size: 0.72rem;
    font-weight: 500;
}

.sel-dia-numero {
    margin-top: 2px;
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.sel-painel.sel-grid-days .sel-item.sel-marcado::after,
.sel-painel.sel-grid-alerta .sel-item.sel-marcado::after {
    position: absolute;
    top: 8px;
    right: 9px;
    margin: 0;
}

/* Avisos compactos: opções em cartões curtos, sem uma lista vertical enorme. */
.sel-painel.sel-grid-alerta {
    width: 360px;
    min-width: 320px;
    max-width: calc(100vw - 16px);
    height: auto !important;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: visible !important;
    opacity: 1 !important;
}

.sel-painel.sel-grid-alerta .sel-lista {
    display: grid !important;
    width: 100%;
    height: auto !important;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(54px, auto);
    gap: 6px;
    align-items: stretch;
}

.sel-painel.sel-grid-alerta .sel-item {
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 54px;
    padding: 8px 6px;
    text-align: center;
    font-size: 0.84rem;
    line-height: 1.15;
    visibility: visible !important;
}

.sel-alerta-numero {
    color: inherit;
    font-size: 0.95rem;
    font-weight: 700;
}

.sel-alerta-legenda {
    color: var(--texto-secundario);
    font-size: 0.72rem;
}

@media (max-width: 900px) and (min-width: 769px) {
    .sel-painel.sel-grid-days,
    .sel-painel.sel-grid-alerta {
        min-width: 320px;
    }
}

@media (max-width: 768px) {
    .finance-tab {
        flex: 1 1 auto;
        min-width: 150px;
    }
}

@media (hover: none) {
    .finance-tab:hover {
        border-color: var(--cinza-borda);
        color: var(--texto-claro);
    }

    .finance-tab.active:hover {
        color: var(--preto);
    }
}


/* ===== GERENCIAMENTO DE ASSINATURAS ===== */
.assinatura-pagamento {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.assinatura-pago { background: rgba(46, 160, 67, 0.14); color: #73d58a; border: 1px solid rgba(46, 160, 67, 0.35); }
.assinatura-pendente { background: rgba(224, 119, 119, 0.12); color: #e07777; border: 1px solid rgba(176, 58, 58, 0.35); }
.assinatura-aguardando { background: rgba(201, 162, 39, 0.14); color: var(--dourado-claro); border: 1px solid rgba(201, 162, 39, 0.35); }
.assinatura-isento { background: rgba(120, 120, 130, 0.14); color: #c9c9cf; border: 1px solid rgba(150, 150, 160, 0.25); }
.assinatura-resumo-pagamento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--preto-suave);
    border: 1px solid var(--cinza-borda);
}
.assinatura-resumo-pagamento span { color: var(--texto-secundario); }
.assinatura-resumo-pagamento strong { color: var(--dourado); font-size: 1.05rem; }


/* =====================================================================
   NAVAFLOW - ETAPA 6: tokens, foco, estados e componentes de interface
   Fica no fim do arquivo de propósito: as telas internas ainda trazem
   <style> próprio, e esta seção vem depois para poder ajustar o resultado
   sem reescrever o CSS antigo.
   ===================================================================== */

/* Cores de status. Antes cada tela repetia o seu próprio verde/vermelho/
   amarelo em hexadecimal, e o mesmo estado tinha tons diferentes em telas
   diferentes. Agora existe uma fonte só. */
:root {
    --status-ok: #66d39e;
    --status-ok-fundo: rgba(46, 160, 67, 0.14);
    --status-ok-borda: rgba(46, 160, 67, 0.35);
    --status-espera: #f0c84b;
    --status-espera-fundo: rgba(201, 162, 39, 0.14);
    --status-espera-borda: rgba(201, 162, 39, 0.35);
    --status-erro: #ff7b7f;
    --status-erro-fundo: rgba(176, 58, 58, 0.14);
    --status-erro-borda: rgba(176, 58, 58, 0.38);
    --raio: 12px;
    --sombra-suave: 0 8px 24px rgba(0, 0, 0, 0.28);
    --transicao: 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* ===== FOCO VISÍVEL (teclado) ===== */

/* Sem isto, quem navega por teclado perdia a posição: o tema escuro
   esconde o outline padrão em fundo preto. O foco só aparece quando o
   foco vem do teclado (tecla), nunca depois de um clique com o mouse. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 2px;
    border-radius: 6px;
}

/* A aba de finanças é a exceção: o padrão ARIA de abas usa o próprio
   indicador de aba ativa, e o outline em volta só duplicaria a informação. */
.finance-tab:focus-visible {
    outline: none;
}


/* ===== MENSAGENS DO DJANGO ===== */

/* Um bloco só para todas as telas (includes/mensagens.html). No mobile a
   mensagem ocupa a largura toda, sem o texto espremido. */
.mensagens-bloco {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.mensagens-bloco .alert {
    margin-bottom: 0;
    border: 1px solid transparent;
    border-radius: var(--raio);
    box-shadow: var(--sombra-suave);
    color: var(--texto-claro);
}

.mensagens-bloco .alert-success {
    background-color: var(--status-ok-fundo);
    border-color: var(--status-ok-borda);
    color: var(--status-ok);
}

.mensagens-bloco .alert-warning {
    background-color: var(--status-espera-fundo);
    border-color: var(--status-espera-borda);
    color: var(--status-espera);
}

.mensagens-bloco .alert-info {
    background-color: rgba(70, 130, 180, 0.16);
    border-color: rgba(70, 130, 180, 0.38);
    color: #8ec5f0;
}

.mensagens-bloco .alert-danger {
    background-color: var(--status-erro-fundo);
    border-color: var(--status-erro-borda);
    color: var(--status-erro);
}


/* ===== ESTADO VAZIO ===== */

/* Uma caixa só para "não há nada aqui ainda", com o motivo e o que
   acontece depois. Antes cada tela escrevia o próprio texto solto. */
.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
    border: 1px dashed var(--cinza-borda);
    border-radius: var(--raio);
    background: rgba(30, 30, 30, 0.45);
    color: var(--texto-secundario);
}

.estado-vazio strong {
    color: var(--texto-claro);
    font-size: 1rem;
}

.estado-vazio .estado-vazio-icone {
    font-size: 1.9rem;
    line-height: 1;
    opacity: 0.85;
}


/* ===== AVISO DE PLANO DO CLIENTE ===== */

/* Estas classes eram usadas no formulário de agendamento sem existir no
   CSS: a caixa de "corte do plano" saía sem fundo, borda ou respiro. */
.plano-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid var(--status-espera-borda);
    background: var(--status-espera-fundo);
    color: var(--texto-claro);
    font-size: 0.9rem;
}

.plano-aviso strong {
    color: var(--status-espera);
}

.plano-aviso-ativo {
    border-color: var(--status-ok-borda);
    background: var(--status-ok-fundo);
}

.plano-aviso-ativo strong {
    color: var(--status-ok);
}

.plano-aviso-esgotado {
    border-color: var(--status-erro-borda);
    background: var(--status-erro-fundo);
}

.plano-aviso-esgotado strong {
    color: var(--status-erro);
}


/* ===== VALIDAÇÃO NO CADASTRO ===== */

/* A tela de cadastro usava .verificacao-status / .ok / .erro sem nenhuma
   regra: o texto de "Esse usuário já existe" saía incolor. */
.verificacao-status {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    min-height: 1.2em;
    color: var(--texto-secundario);
}

.verificacao-status.ok {
    color: var(--status-ok);
}

.verificacao-status.erro {
    color: var(--status-erro);
}

.verificacao-status.verificando {
    color: var(--status-espera);
}


/* ===== GRADE DE HORÁRIOS VAZIA ===== */

.grade-vazia {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    text-align: center;
    border: 1px dashed var(--cinza-borda);
    border-radius: var(--raio);
    color: var(--texto-secundario);
    font-size: 0.9rem;
}

.grade-vazia strong {
    color: var(--texto-claro);
}


/* ===== LARGURA RESTRITA DE PÁGINA ===== */

/* Substitui o style="max-width: 760px" solto no HTML: a largura acompanha
   a janela e nunca vira barra de rolagem horizontal no celular. */
.pagina-estreita {
    max-width: 760px;
}


/* ===== TABELAS: HOVER E ALINHAMENTO ===== */

/* Zebra e hover só onde há linha de verdade. A linha "nenhum registro"
   (colspan) fica intacta para não parecer clicável. */
.tabela-box tbody tr:not(:has(td[colspan])) {
    transition: background-color var(--transicao);
}

.tabela-box tbody tr:not(:has(td[colspan])):hover {
    background-color: rgba(201, 162, 39, 0.045);
}

.tabela-box thead th {
    color: var(--texto-secundario);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}


/* ===== BADGES DE STATUS ===== */

/* Mesmo vocabulário de status do resto da tela, em vez do badge padrão do
   Bootstrap (que traz cor de fundo clara incompatível com o tema). */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-pill-ok {
    background: var(--status-ok-fundo);
    color: var(--status-ok);
    border-color: var(--status-ok-borda);
}

.status-pill-espera {
    background: var(--status-espera-fundo);
    color: var(--status-espera);
    border-color: var(--status-espera-borda);
}

.status-pill-erro {
    background: var(--status-erro-fundo);
    color: var(--status-erro);
    border-color: var(--status-erro-borda);
}

.status-pill-neutro {
    background: rgba(120, 120, 130, 0.14);
    color: #c9c9cf;
    border-color: rgba(150, 150, 160, 0.25);
}


/* ===== FORMULÁRIOS NO MOBILE ===== */

/* Rotulo e campo no mesmo bloco, com respiro entre um campo e outro. */
@media (max-width: 576px) {
    .form-box {
        padding: 28px 18px;
    }
    .form-box h2 {
        font-size: 1.5rem;
    }
    .form-label {
        font-size: 0.85rem;
    }
    .messages-bloco {
        margin-bottom: 1.25rem;
    }
    .estado-vazio {
        padding: 28px 16px;
    }
}


/* ===== IMAGENS QUE NÃO DEVEM ESTOURAR A TELA ===== */

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}


/* =====================================================================
   NAVAFLOW - LANDING PAGE
   Só a página pública usa estas classes. Ficam aqui (e não em <style>
   dentro do template) para o arquivo de estilo continuar sendo a fonte
   única do visual do produto.
   ===================================================================== */

/* Animação de entrada. Só opacity e transform: nada que mude a altura da
   página enquanto o bloco entra. O JS (reveal.js) adiciona a classe que
   esconde; sem JS o bloco já aparece. */
.revelar {
    opacity: 0;
    transform: translateY(22px);
}

.revelar-visivel {
    animation: revelar-bloco 0.7s cubic-bezier(0.2, 0.7, 0.2, 1)
        var(--reveal-delay, 0ms) forwards;
}

@keyframes revelar-bloco {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .revelar {
        opacity: 1;
        transform: none;
    }
    .revelar-visivel {
        animation: none;
    }
}


/* ===== HERO ===== */

.landing-hero {
    position: relative;
    padding: 130px 20px 110px;
    overflow: hidden;
}

/* Brilho dourado difuso atrás do texto. Só `radial-gradient`, sem imagem:
   pesa zero no carregamento e não depende de CDN. */
.landing-hero::before {
    content: '';
    position: absolute;
    top: -220px;
    left: 50%;
    width: 1100px;
    height: 700px;
    transform: translateX(-50%);
    background: radial-gradient(
        closest-side,
        rgba(201, 162, 39, 0.22),
        rgba(201, 162, 39, 0) 70%
    );
    pointer-events: none;
    z-index: 0;
}

.landing-hero .container {
    position: relative;
    z-index: 2;
}

.landing-hero h1 {
    font-size: clamp(2.2rem, 5.4vw, 4.1rem);
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

/* O degradê no texto é luxo: se o navegador não souber recortar o
   background na letra, o texto continuaria invisível com `color:
   transparent`. Por isso a cor normal vem primeiro e só é substituída
   quando o recurso existe. */
.landing-hero h1 .destaque {
    color: var(--dourado-claro);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .landing-hero h1 .destaque {
        background: linear-gradient(120deg, var(--dourado-claro), var(--dourado));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.landing-hero .lead-hero {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: var(--texto-secundario);
    max-width: 620px;
    margin: 0 auto 34px;
}

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.landing-cta .btn {
    padding: 14px 30px;
    font-size: 1rem;
}

.landing-cta .btn-outline-ouro {
    color: var(--texto-claro);
    border: 1px solid var(--cinza-borda);
    background: rgba(30, 30, 30, 0.6);
    transition: border-color var(--transicao), transform var(--transicao),
        background-color var(--transicao);
}

.landing-cta .btn-outline-ouro:hover {
    color: var(--preto);
    background: var(--dourado);
    border-color: var(--dourado);
    transform: translateY(-2px);
}

/* Faixa de números da hero.
 *
 * Substitui o card 3D, que mostrava números que o NavaFlow não produzia. O
 * formato é o de landing SaaS — número grande e rótulo curto —, mas os
 * valores são os únicos que o código usa de verdade: 7 dias é a duração do
 * teste, 100% no navegador é o fato de não existir app desktop, e "3 em 1"
 * conta agenda, assinaturas e caixa. Nenhum deles é métrica da barbearia de
 * quem está lendo, então não inventam prova social.
 *
 * Os três cards ficam no mesmo plano para manter tamanho e texto nítidos.
 *
 * `data-entrada` e a classe `animacao-pronta` são a chave da entrada por
 * rolagem: o estado escondido só é aplicado quando o JavaScript confirma que
 * vai animar. Sem JavaScript, ou com ele bloqueado, nenhum card some. */
.landing-metricas {
    list-style: none;
    margin: 46px auto 0;
    padding: 30px 0 0;
    max-width: 880px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    border-top: 1px solid var(--cinza-borda);
}

.landing-metrica-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 156px;
    text-align: center;
    padding: 24px 20px 22px;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.012)
    );
    overflow: hidden;
    /* `isolate` cria um contexto de empilhamento próprio. Sem ele, o brilho
       que segue o mouse passaria por cima do texto do card. */
    isolation: isolate;
    transition:
        transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.5s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.landing-metrica-card strong {
    display: block;
    position: relative;
    z-index: 1;
    font-size: clamp(2rem, 3vw, 2.65rem);
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--dourado);
    margin-bottom: 8px;
}

.landing-metrica-card span {
    display: block;
    position: relative;
    z-index: 1;
    color: var(--texto-secundario);
    font-size: 0.94rem;
    line-height: 1.45;
    max-width: 220px;
    margin: 0 auto;
}

/* Brilho que segue o ponteiro. Só o JavaScript escreve `--mx`/`--my`; sem
   ele, o gradiente fica parado no centro e nada aparece. */
.landing-metrica-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
        240px circle at var(--mx, 50%) var(--my, 50%),
        rgba(201, 162, 39, 0.20),
        transparent 62%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.landing-metrica-card.brilho-ativo::before {
    opacity: 1;
}

/* ---------- Entrada por rolagem do bloco de métricas ---------- */

/* O estado escondido vive sob `.animacao-pronta`, que só o JavaScript
   aplica. A classe `is-visible` no container é o que dispara a entrada. */
.landing-metricas.animacao-pronta .landing-metrica-card {
    opacity: 0;
    transform: translateY(30px);
}

.landing-metricas.animacao-pronta.is-visible .landing-metrica-card {
    opacity: 1;
    transform: none;
}

/* Escalonamento: os três cards entram em sequência, e não juntos. */
.landing-metricas.is-visible .landing-metrica-card:nth-child(1) {
    transition-delay: 0ms;
}

.landing-metricas.is-visible .landing-metrica-card:nth-child(2) {
    transition-delay: 130ms;
}

.landing-metricas.is-visible .landing-metrica-card:nth-child(3) {
    transition-delay: 260ms;
}

/* Microanimação contínua: um brilho que atravessa o card e um pulso na borda.
   Só em ponteiro fino e sem movimento reduzido. no celular esses dois
   efeitos ficam desligados porque são os mais caros de manter ligado e o
   ganho visual é quase nenhum numa coluna única. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .landing-metrica-card::after {
        content: '';
        position: absolute;
        top: -40%;
        bottom: -40%;
        left: -60%;
        width: 45%;
        z-index: 0;
        background: linear-gradient(
            100deg,
            transparent,
            rgba(201, 162, 39, 0.20),
            transparent
        );
        transform: skewX(-18deg);
        pointer-events: none;
        animation: varrer-brilho 7s ease-in-out infinite;
    }

    .landing-metrica-card:nth-child(2)::after {
        animation-delay: 2.4s;
    }

    .landing-metrica-card:nth-child(3)::after {
        animation-delay: 4.8s;
    }

    /* Borda dourada que respira devagar, para o card não parecer parado. */
    .landing-metrica-card {
        animation: respirar-borda 5.5s ease-in-out infinite;
    }

    .landing-metrica-card:nth-child(2) {
        animation-delay: 1.8s;
    }

    .landing-metrica-card:nth-child(3) {
        animation-delay: 3.6s;
    }
}

@keyframes varrer-brilho {
    0%,
    62% {
        transform: translateX(0) skewX(-18deg);
        opacity: 0;
    }

    68% {
        opacity: 1;
    }

    92%,
    100% {
        transform: translateX(360%) skewX(-18deg);
        opacity: 0;
    }
}

/* O pulso anima só a borda e a sombra, sem afetar a nitidez do texto. */
@keyframes respirar-borda {
    0%,
    100% {
        border-color: var(--cinza-borda);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
    }

    50% {
        border-color: rgba(201, 162, 39, 0.42);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.44),
            0 0 0 1px rgba(201, 162, 39, 0.10);
    }
}

/* O hover destaca os três cards da mesma forma, sem perspectiva 3D. */
@media (hover: hover) and (pointer: fine) {
    .landing-metrica-card:hover {
        border-color: rgba(201, 162, 39, 0.5);
        transform: translateY(-6px);
        box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(201, 162, 39, 0.18);
    }
}

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


.landing-secao {
    position: relative;
    padding: 90px 0;
}

.landing-secao-alt {
    background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.85) 12%, rgba(22, 22, 22, 0.85) 88%, rgba(22, 22, 22, 0) 100%);
}

.landing-recurso {
    position: relative;
    height: 100%;
    padding: 22px 22px 24px;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    background: var(--cinza-card);
    transition: transform var(--transicao), border-color var(--transicao),
        box-shadow var(--transicao);
}

/* Linha dourada que acende no hover: o card ganha um acento sem mudar
   de tamanho, então não empurra a grade. */
.landing-recurso::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 22px;
    right: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--dourado), transparent);
    opacity: 0;
    transition: opacity var(--transicao);
}

.landing-recurso:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 162, 39, 0.4);
    box-shadow: var(--sombra-suave);
}

.landing-recurso:hover::before {
    opacity: 1;
}

.landing-recurso h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.landing-recurso p {
    color: var(--texto-secundario);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Passos numerados: o número é o elemento visual, não um título. */
.landing-passo {
    display: flex;
    gap: 18px;
    padding: 22px;
    height: 100%;
    border-radius: var(--raio);
    border: 1px solid var(--cinza-borda);
    background: var(--cinza-card);
}

.landing-passo-num {
    flex: 0 0 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    color: var(--preto);
    font-weight: 700;
    font-size: 1.1rem;
}

.landing-passo h3 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.landing-passo p {
    color: var(--texto-secundario);
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* ===== PLANOS ===== */

.landing-plano {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    border: 1px solid var(--cinza-borda);
    border-radius: 16px;
    background: var(--cinza-card);
    transition: transform var(--transicao), border-color var(--transicao),
        box-shadow var(--transicao);
}

.landing-plano:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 162, 39, 0.42);
    box-shadow: var(--sombra-suave);
}

.landing-plano h3 {
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.landing-plano-preco {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 6px;
}

.landing-plano-preco strong {
    font-size: 2.3rem;
    color: var(--dourado);
    letter-spacing: -0.5px;
    line-height: 1;
}

.landing-plano-preco span {
    color: var(--texto-secundario);
    font-size: 0.9rem;
}

.landing-plano p {
    color: var(--texto-secundario);
    font-size: 0.92rem;
    flex: 1;
}

.landing-plano .btn {
    margin-top: 20px;
    width: 100%;
}

.landing-plano-destaque {
    border-color: rgba(201, 162, 39, 0.55);
    background: linear-gradient(165deg, #232018, #17160f 65%, var(--cinza-card));
    box-shadow: 0 22px 55px rgba(201, 162, 39, 0.14);
}

.landing-plano-selo {
    position: absolute;
    top: -12px;
    left: 26px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
    color: var(--preto);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.landing-plano-lista {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 0.9rem;
    color: var(--texto-secundario);
}

.landing-plano-lista li::before {
    content: '✓';
    color: var(--status-ok);
    font-weight: 700;
    margin-right: 9px;
}


/* ===== CHAMADA FINAL ===== */

.landing-cta-final {
    position: relative;
    padding: 58px 34px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid rgba(201, 162, 39, 0.35);
    background: linear-gradient(150deg, #201d14, #131313 70%);
    overflow: hidden;
}

.landing-cta-final::before {
    content: '';
    position: absolute;
    bottom: -180px;
    left: 50%;
    width: 620px;
    height: 320px;
    transform: translateX(-50%);
    background: radial-gradient(
        closest-side,
        rgba(201, 162, 39, 0.22),
        transparent 70%
    );
    pointer-events: none;
}

.landing-cta-final h2 {
    position: relative;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    margin-bottom: 12px;
}

.landing-cta-final p {
    position: relative;
    color: var(--texto-secundario);
    max-width: 520px;
    margin: 0 auto 26px;
}


/* ===== FORMULÁRIO DE CONTATO ===== */

.landing-contato .form-label {
    color: var(--texto-secundario);
    font-size: 0.88rem;
}


/* ===== POR QUE: ABAS DE CENÁRIO ===== */

/* "Agenda genérica marca horário. NavaFlow organiza a operação." é o
   argumento em uma linha. Fica entre o subtítulo e as abas para o visitante
   ler o motivo antes de escolher o cenário, e não depois. */
.landing-lema {
    max-width: 640px;
    margin: 0 auto 34px;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--texto-secundario);
}

.landing-lema strong {
    color: var(--texto-claro);
}

/* Container das abas.
   Sem JavaScript os três painéis aparecem empilhados, que é o estado que
   o HTML descreve sozinho. Com JavaScript, `hidden` resolve a exibição e o
   JavaScript cuida do estado. */
.landing-abas {
    display: flex;
    flex-direction: column;
    gap: 18px;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Seletor: três botões em linha no desktop. O `hidden` do HTML é removido
   pelo JavaScript só depois de ele confirmar que existem pares
   aba/painel, então ninguém vê botão que não responde. */
.landing-abas-seletor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 26px;
}

.landing-abas-seletor[hidden] {
    display: none;
}

.landing-aba {
    padding: 12px 22px;
    border: 1px solid var(--cinza-borda);
    border-radius: 999px;
    background: transparent;
    color: var(--texto-secundario);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transicao), border-color var(--transicao),
        background-color var(--transicao), transform var(--transicao);
}

.landing-aba:hover {
    color: var(--texto-claro);
    border-color: rgba(201, 162, 39, 0.45);
    transform: translateY(-2px);
}

/* Aba selecionada: fundo dourado sólido e `transform: translateZ` para
   puxar a aba à frente. O depth é de 12px, o suficiente para ler como
   elevação sem o texto perder nitidez. */
.landing-aba[aria-selected="true"] {
    background: var(--dourado);
    border-color: var(--dourado);
    color: var(--preto);
    font-weight: 600;
    transform: translateZ(12px);
}

.landing-aba:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 3px;
}

/* Painel de um cenário.
   `tabindex="0"` no painel permite que quem navega por teclado chegue nele
   depois das abas; sem isso o conteúdo do painel ficaria inalcançável pelo
   Tab, já que as abas usam roving tabindex.

   Os parâmetros das duas animações do painel moram aqui porque ele recebe as
   duas ao mesmo tempo, e `animation` é atalho: cada declaração zera o
   `animation-name` anterior no mesmo elemento. Ver a regra que junta
   `entrar-cenario` e `respirar-painel` na media query do movimento aceito. */
.landing-abas-painel {
    --duracao-entrada-cenario: 0.52s;
    --curva-entrada-cenario: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duracao-respiracao-painel: 5.8s;
    position: relative;
    padding: 26px;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    background: var(--cinza-card);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform var(--transicao), border-color var(--transicao),
        box-shadow var(--transicao);
}

.landing-abas-painel::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 0;
    background:
        radial-gradient(
            520px circle at var(--painel-x, 50%) var(--painel-y, 20%),
            rgba(201, 162, 39, 0.16),
            transparent 58%
        );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.landing-abas-painel:hover::before,
.landing-abas-painel:focus-within::before {
    opacity: 1;
}

.landing-abas-painel > * {
    position: relative;
    z-index: 1;
}

.landing-abas-painel:hover {
    border-color: rgba(201, 162, 39, 0.35);
    transform:
        translateZ(18px)
        rotateX(var(--painel-tilt-x, 0deg))
        rotateY(var(--painel-tilt-y, 0deg));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(201, 162, 39, 0.10);
}

.landing-abas-painel:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 3px;
}

/* `hidden` do JavaScript precisa continuar valendo. Hoje não é estritamente
   necessário: o painel não declara `display`, então o `[hidden] { display:
   none }` do navegador já resolve. Esta regra existe para o dia em que
   alguém declarar `display` no painel — uma classe de layout é exatamente o
   que se acrescenta aqui, e o `display: none` do painel passaria a vencer o
   `[hidden]` do navegador, abrindo os três cenários de uma vez sem erro
   nenhum no console. */
.landing-abas-painel[hidden] {
    display: none;
}

.landing-abas-painel h3 {
    font-size: 1.18rem;
    margin-bottom: 18px;
    text-align: center;
}

/* Animação de troca de cenário. Só `opacity` e `transform`: animar `height`
   empurraria a página inteira e causaria layout shift, que é o defeito
   mais visível de animação em página comprida. */
@keyframes entrar-cenario {
    from {
        opacity: 0;
        transform: translateY(18px) translateZ(-36px) rotateX(4deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.landing-cenario-entra {
    animation: entrar-cenario var(--duracao-entrada-cenario)
        var(--curva-entrada-cenario) both;
}

.landing-cenario-entra .landing-cenario-rotina,
.landing-cenario-entra .landing-cenario-seta,
.landing-cenario-entra .landing-cenario-solucao {
    animation: entrar-cenario-item 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.landing-cenario-entra .landing-cenario-seta {
    animation-delay: 90ms;
}

.landing-cenario-entra .landing-cenario-solucao {
    animation-delay: 180ms;
}

@keyframes entrar-cenario-item {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Entrada do conjunto de abas por rolagem. Mesmo caminho das métricas:
   `animacao-pronta` é aplicada pelo JavaScript e `is-visible` pelo
   observador, então sem JavaScript o conjunto já aparece pronto.
   A translação é só em Y porque a perspectiva do container vale para os
   filhos, não para ele próprio — um `translateZ` aqui não teria de onde
   projetar. */
.landing-abas.animacao-pronta {
    opacity: 0;
    transform: translateY(34px) translateZ(-80px) rotateX(5deg);
}

.landing-abas.animacao-pronta.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease, transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .landing-abas.is-visible .landing-abas-painel:not([hidden]) {
        animation: respirar-painel var(--duracao-respiracao-painel) ease-in-out infinite;
    }

    /* Entrada e respiração convivem no mesmo elemento, então precisam sair na
       mesma declaração. `animation` é atalho: cada regra zera o
       `animation-name` da anterior, e a de cima tem especificidade maior que
       `.landing-cenario-entra`. Sem esta regra, `respirar-painel` apagava
       `entrar-cenario` do painel e a troca de cenário deixava de animar — o
       defeito era invisível, porque os blocos internos continuavam animando.
       As duas animações mexem em propriedades diferentes (a entrada em
       `opacity` e `transform`, a respiração em `box-shadow` e `border-color`),
       então não há disputa. */
    .landing-abas.is-visible .landing-abas-painel.landing-cenario-entra:not([hidden]) {
        animation:
            entrar-cenario var(--duracao-entrada-cenario) var(--curva-entrada-cenario) both,
            respirar-painel var(--duracao-respiracao-painel) ease-in-out infinite;
    }
}

@keyframes respirar-painel {
    0%,
    100% {
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
        border-color: var(--cinza-borda);
    }

    50% {
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42),
            0 0 0 1px rgba(201, 162, 39, 0.12);
        border-color: rgba(201, 162, 39, 0.36);
    }
}

/* O pulso da seta fica no glifo interno, e não na span da seta: no celular a
   span recebe a rotação de 90deg, e se o movimento contínuo usasse a mesma
   propriedade as duas animações brigariam pelo `transform`. */
@keyframes pulsar-seta {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.75;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .landing-cenario-seta-glifo {
        display: inline-block;
        animation: pulsar-seta 2.4s ease-in-out infinite;
    }
}

/* Comparação dentro do painel: rotina à esquerda, solução à direita, seta
   no meio. No celular vira uma coluna e a seta gira para baixo. */
.landing-cenario {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 18px;
}

.landing-cenario-seta {
    align-self: center;
    color: var(--dourado);
    font-size: 1.3rem;
    line-height: 1;
}

/* O bloco "rotina" fica apagado e o "solução" ganha acento dourado. O
   contraste entre os dois é o argumento, então eles precisam pesar
   diferente sem precisar de cor extra. */
.landing-cenario-bloco {
    padding: 20px;
    border-radius: var(--raio);
    border: 1px solid transparent;
    text-align: left;
}

.landing-cenario-bloco span {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.landing-cenario-bloco p {
    font-size: 0.97rem;
    line-height: 1.5;
    margin-bottom: 0;
    color: var(--texto-claro);
}

.landing-cenario-rotina {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--cinza-borda);
}

.landing-cenario-rotina span {
    color: var(--texto-secundario);
}

.landing-cenario-rotina p {
    color: var(--texto-secundario);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.28);
}

.landing-cenario-solucao {
    background: rgba(201, 162, 39, 0.08);
    border-color: rgba(201, 162, 39, 0.28);
    box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.04);
}

.landing-cenario-solucao span {
    color: var(--dourado);
}

/* ===== PERGUNTAS FREQUENTES ===== */

/* O accordion do Bootstrap vem claro (fundo branco) e a landing é escura, então
 * cada parte é remapeada para as variáveis do tema. Sem isso o bloco de
 * respostas aparecia como um retângulo branco no meio da página.
 *
 * Usa o componente nativo do Bootstrap em vez de `<details>`: o collapse já
 * tem `aria-expanded`, teclado e o bloco global de `prefers-reduced-motion`
 * desliga a transição da abertura. */
.landing-faq .accordion-item {
    background-color: var(--preto-suave);
    border: 1px solid var(--cinza-borda);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.landing-faq .accordion-button {
    background-color: var(--preto-suave);
    color: var(--texto-claro);
    font-weight: 600;
    padding: 18px 20px;
    box-shadow: none;
}

.landing-faq .accordion-button:not(.collapsed) {
    color: var(--dourado-claro);
    background-color: var(--cinza-card);
    box-shadow: none;
}

.landing-faq .accordion-button:focus {
    box-shadow: none;
    border-color: var(--dourado);
    outline: 2px solid var(--dourado);
    outline-offset: -2px;
}

.landing-faq .accordion-button::after {
    filter: invert(1) grayscale(1);
}

.landing-faq .accordion-body {
    background-color: var(--preto-suave);
    color: var(--texto-secundario);
    padding: 4px 20px 20px;
    font-size: 0.95rem;
}

/* Nota curta de rodapé de seção: o aviso de cenário ilustrativo e a regra
 * dos planos. Fica fora do card, em texto pequeno, para não competir com o
 * conteúdo nem parecer citação de cliente. */
.landing-nota {
    max-width: 720px;
    margin: 26px auto 0;
    text-align: center;
    color: var(--texto-secundario);
    font-size: 0.82rem;
    line-height: 1.5;
}


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

.landing-rodape {
    border-top: 1px solid var(--cinza-borda);
    padding: 34px 0;
    color: var(--texto-secundario);
    font-size: 0.88rem;
}

.landing-rodape-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
}

.landing-rodape-links a {
    color: var(--texto-secundario);
    text-decoration: none;
    transition: color var(--transicao);
}

.landing-rodape-links a:hover,
.landing-rodape-links a:focus-visible {
    color: var(--dourado);
}


/* ----- Movimento reduzido na landing: rede de segurança -----
 *
 * As animações contínuas já estão em `@media (prefers-reduced-motion:
 * no-preference)` e o `entrada.js` não escreve classe nenhuma quando a
 * preferência está em `reduce`. Este bloco fecha o resto: se a preferência
 * mudar com a página já aberta, ou se alguém escrever `.animacao-pronta`
 * direto no HTML, nada fica preso em `opacity: 0` nem deslocado.
 *
 * A posição no arquivo é o que faz esta regra funcionar. `@media` não
 * aumenta especificidade, então um bloco aqui só vence o que vier depois
 * dele no arquivo. Este bloco já foi escrito antes da entrada das abas, e
 * por isso a regra `opacity: 0` de `.landing-abas.animacao-pronta`, mais
 * adiante, vencia e deixava o conjunto de abas invisível justamente para
 * quem pediu menos movimento. A ordem é conferida por teste, e não só a
 * existência das regras. */
@media (prefers-reduced-motion: reduce) {
    .landing-metricas.animacao-pronta .landing-metrica-card,
    .landing-abas.animacao-pronta {
        opacity: 1;
        transform: none;
    }

    .landing-metricas.is-visible .landing-metrica-card strong,
    .landing-metrica-card::before,
    .landing-metrica-card::after,
    .landing-cenario-seta-glifo,
    .landing-cenario-entra,
    .landing-cenario-entra .landing-cenario-rotina,
    .landing-cenario-entra .landing-cenario-seta,
    .landing-cenario-entra .landing-cenario-solucao,
    .landing-abas.is-visible .landing-abas-painel:not([hidden]) {
        animation: none;
    }

    .landing-abas-painel,
    .landing-abas-painel:hover,
    .landing-metrica-card,
    .landing-metrica-card:hover {
        transform: none;
    }
}


/* ===== RESPONSIVO DA LANDING ===== */

@media (max-width: 991.98px) {
    .landing-hero {
        padding: 92px 18px 84px;
    }
    .landing-secao {
        padding: 68px 0;
    }
}

@media (max-width: 767.98px) {
    /* Um número por linha: em 390px três colunas deixam o rótulo quebrando
       em quatro palavras, e a faixa deixa de ler como número. */
    .landing-metricas {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 22px;
    }

    .landing-metricas strong {
        margin-bottom: 6px;
    }

    .landing-metricas span {
        max-width: 260px;
    }

    .landing-cta .btn {
        width: 100%;
    }
    .landing-plano {
        padding: 26px 20px;
    }

    /* Abas em coluna cheia: em 390px três botões na mesma linha ficam com
       alvo de toque pequeno e o rótulo quebra. Empilhados, cada um ocupa a
       largura toda e não existe link rolável horizontal. */
    .landing-abas-seletor {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .landing-aba {
        padding: 13px 18px;
        width: 100%;
    }

    /* A aba selecionada é elevada com `translateZ` no desktop. No celular o
       `transform` competiria com a linha de base do texto do botão, então a
       elevação vira só cor e peso. */
    .landing-aba[aria-selected="true"] {
        transform: none;
    }

    .landing-abas-painel {
        padding: 20px 18px;
    }

    /* Comparação vira uma coluna e a seta gira para baixo: em 390px, dois
       blocos de texto lado a lado ficam ilegíveis. A leitura continua
       problema e depois solução. */
    .landing-cenario {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* A rotação fica na span e o pulso no glifo, nunca o contrário: o pulso
       anima `transform` continuamente, e uma animação ganha de um valor
       estático na cascata. Se os dois vivessem no mesmo elemento, a rotação
       seria perdida em toda janela estreita com ponteiro fino. */
    .landing-cenario-seta {
        justify-self: center;
        transform: rotate(90deg);
    }

    .landing-cenario-bloco {
        padding: 16px 18px;
    }
}

@media (max-width: 575.98px) {
    .landing-secao {
        padding: 54px 0;
    }
    .landing-cta-final {
        padding: 40px 22px;
    }
    .landing-lema {
        margin-bottom: 26px;
        font-size: 0.97rem;
    }
    .landing-abas-painel h3 {
        font-size: 1.08rem;
    }
}

/* Landing: o progresso responde à posição real do scroll, não a um timer. */
.landing-page .landing-scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    background: var(--dourado-claro);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 1100;
    pointer-events: none;
}

.landing-page .navbar {
    position: sticky;
    z-index: 20;
}

.landing-page .landing-hero {
    min-height: min(880px, 100svh);
    display: flex;
    align-items: center;
    padding-block: 96px 72px;
}

.landing-page .landing-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 26%;
    background: linear-gradient(transparent, var(--preto));
    pointer-events: none;
}

.landing-page .landing-hero .hero-bg {
    will-change: auto;
}

.landing-page .landing-hero h1 {
    max-width: 880px;
    margin-inline: auto;
    letter-spacing: 0;
    text-wrap: balance;
}

.landing-page .landing-hero .lead-hero {
    max-width: 560px;
}

.landing-scroll-motion .landing-hero .container {
    transform: translateY(calc(var(--hero-scroll, 0) * -75px));
    opacity: calc(1 - var(--hero-scroll, 0) * .65);
}

.landing-page .landing-metricas {
    border-top-color: rgba(201, 162, 39, .35);
}

.landing-page .landing-metrica-card,
.landing-page .landing-recurso,
.landing-page .landing-passo,
.landing-page .landing-plano,
.landing-page .landing-abas-painel,
.landing-page .landing-cenario-bloco,
.landing-page .landing-cta-final {
    border-radius: 8px;
}

.landing-page .landing-recurso {
    min-height: 174px;
    padding-top: 30px;
    background: #1b1b1b;
}

.landing-page .landing-recurso::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--dourado);
    opacity: .9;
    transform: scaleX(var(--card-scroll-reveal, 1));
    transform-origin: left center;
}

.landing-scroll-motion .landing-recurso {
    transform: translateY(var(--card-scroll-y, 0px))
        rotate(var(--card-scroll-rotate, 0deg))
        scale(var(--card-scroll-scale, 1));
    opacity: var(--card-scroll-opacity, 1);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.landing-scroll-motion .landing-recurso:hover {
    transform: translateY(-6px) rotate(0);
    transition: transform var(--transicao), border-color var(--transicao),
        box-shadow var(--transicao);
}

.landing-page .section-title h2 {
    max-width: 770px;
    margin-inline: auto;
    text-wrap: balance;
    letter-spacing: 0;
}

.landing-page .landing-story {
    background: #111;
    border-block: 1px solid rgba(201, 162, 39, .16);
}

.landing-page .landing-story-stage {
    position: relative;
}

.landing-page .landing-story-stage::before {
    content: attr(data-step);
    position: absolute;
    top: 2%;
    right: 1%;
    color: rgba(201, 162, 39, .09);
    font-size: clamp(9rem, 23vw, 21rem);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transform: translateY(calc(var(--story-progress, 0) * -45px));
}

.landing-page .landing-story-stage > * {
    position: relative;
    z-index: 1;
}

.landing-page .landing-story .landing-lema {
    margin-bottom: 22px;
}

.landing-page .landing-story .landing-abas {
    max-width: 950px;
    margin-inline: auto;
}

.landing-page .landing-story .landing-abas-seletor {
    margin-bottom: 12px;
}

.landing-page .landing-story .landing-abas-painel {
    min-height: 250px;
    padding: 28px;
    background: #1d1d1d;
    border-color: rgba(201, 162, 39, .36);
}

.landing-page .landing-story .landing-abas-painel h3 {
    color: var(--dourado-claro);
}

.landing-story-timeline {
    width: min(950px, 100%);
    height: 2px;
    margin: 30px auto 0;
    background: rgba(201, 162, 39, .2);
    overflow: hidden;
}

.landing-story-timeline span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--dourado-claro);
    transform: scaleX(var(--story-progress, 0));
    transform-origin: left;
}

@media (min-width: 992px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
    .landing-page .landing-story {
        height: 255vh;
        padding-block: 0;
    }

    .landing-page .landing-story-stage {
        position: sticky;
        top: 78px;
        height: calc(100vh - 78px);
        min-height: 630px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .landing-page .landing-story .section-title {
        margin-bottom: 16px;
    }

    .landing-page .landing-story .section-title h2 {
        margin-top: 2px;
    }

    .landing-page .landing-story .landing-nota {
        margin-top: 14px;
    }
}

@media (max-width: 991.98px) {
    .landing-page .landing-story-stage::before {
        display: none;
    }
    .landing-page .landing-story-timeline {
        display: none;
    }

    .landing-page .landing-hero {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    .landing-scroll-motion .landing-recurso {
        transform: translateY(var(--card-scroll-y, 0px))
            scale(var(--card-scroll-scale, 1));
    }
}

@media (max-width: 575.98px) {
    .landing-page .landing-hero {
        padding: 80px 18px 60px;
    }

    .landing-page .landing-hero h1 {
        font-size: clamp(2.1rem, 10vw, 3.1rem);
    }

    .landing-page .landing-metricas {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 16px;
        margin-top: 38px;
    }

    .landing-page .landing-metrica-card {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        min-height: 76px;
        padding: 16px 18px;
        text-align: left;
    }

    .landing-page .landing-metrica-card strong {
        flex: 0 0 88px;
        font-size: 1.55rem;
        white-space: nowrap;
        letter-spacing: 0;
        margin-bottom: 0;
    }

    .landing-page .landing-metrica-card span {
        font-size: .88rem;
        line-height: 1.4;
        max-width: none;
        margin: 0;
    }

    .landing-page .landing-story .landing-abas-painel {
        min-height: 0;
        padding: 20px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-page .landing-scroll-progress { display: none; }
    .landing-page .landing-hero .container,
    .landing-page .landing-recurso { transform: none; opacity: 1; }
}

@media (max-height: 699px), (prefers-reduced-motion: reduce) {
    .landing-page .landing-story-timeline,
    .landing-page .landing-story-stage::before { display: none; }
}