/*==============================================================================
  AgendaZ — landing page

  A landing tem arte propria: fundo escuro, secoes com imagem, gradientes. Este
  arquivo nao mexe nisso. Ele padroniza so o que precisa falar a mesma lingua do
  produto — botoes, campos, selos, cartoes e foco — usando os mesmos tokens do
  sistema.

  Por isso ela carrega `tokens.css` + este arquivo, e nao o `theme.css`: aquele
  fixa o fundo da pagina no canvas do app e apagaria a arte da landing.

  Carregar depois do <style> da propria pagina e proposital: e o que permite
  padronizar sem precisar caçar e reescrever as regras que ja existem la.
==============================================================================*/

/*==============================================================================
  Botoes

  As regras proprias da pagina usam `!important` numa cor lavanda que nao existe
  na paleta do produto. Padronizar aqui exige a mesma forca — dai o `!important`
  nesta secao, que e a excecao e nao a regra do design system.

  A chamada principal usa o roxo da marca no tom 500: o 700 (#130a78) e a cor do
  produto, mas contra o fundo quase preto da landing ele some. Mesma familia,
  brilho suficiente para funcionar sobre escuro.
==============================================================================*/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--w-radius-lg);
    font-family: var(--w-font-sans);
    font-size: var(--w-text-md);
    font-weight: var(--w-weight-semibold);
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
                border-color var(--w-duration-fast) var(--w-ease-out),
                color var(--w-duration-fast) var(--w-ease-out),
                transform var(--w-duration-instant) var(--w-ease-out),
                box-shadow var(--w-duration-fast) var(--w-ease-out);
}

.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--w-shadow-focus); outline: none; }

.btn-primary,
.az-planos .btn-primary,
.btn-success {
    background-color: var(--w-brand-500) !important;
    background-image: none !important;
    border: 1px solid var(--w-brand-500) !important;
    border-radius: var(--w-radius-lg) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(91, 72, 194, 0.35);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.az-planos .btn-primary:hover,
.btn-success:hover {
    background-color: var(--w-brand-400) !important;
    border-color: var(--w-brand-400) !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(122, 106, 211, 0.45);
}

/* Acao secundaria: contorno claro, para nao disputar com a chamada principal. */
.btn-outline-primary,
.btn-outline-light,
.btn-secondary {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    box-shadow: none;
}

.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-secondary:hover,
.btn-outline-primary:focus,
.btn-secondary:focus {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: var(--w-amber-500) !important;
    border-color: var(--w-amber-500) !important;
    color: #1f1300 !important;
}

.btn-lg { padding: 0.9rem 1.9rem; font-size: var(--w-text-lg); border-radius: var(--w-radius-lg) !important; }
.btn-sm { padding: 0.45rem 1rem; font-size: var(--w-text-sm); }

/*==============================================================================
  Superficies e texto
==============================================================================*/

.card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--w-radius-xl);
    color: #eef0f6;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.card-header,
.card-footer { background: transparent; border-color: rgba(255, 255, 255, 0.1); }

.badge {
    border-radius: var(--w-radius-full);
    font-weight: var(--w-weight-semibold);
    letter-spacing: 0.02em;
}

.bg-primary { background-color: var(--w-brand-500) !important; }
.text-primary { color: var(--w-brand-300) !important; }

a:not(.btn) { color: var(--w-brand-300); transition: color var(--w-duration-fast) var(--w-ease-out); }
a:not(.btn):hover { color: var(--w-emerald-400); }

/*==============================================================================
  Formularios (captura de contato)
==============================================================================*/

.form-control,
.form-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--w-radius-md);
    color: #fff;
    font-family: var(--w-font-sans);
    min-height: 46px;
}

.form-control::placeholder { color: rgba(255, 255, 255, 0.45); }

.form-control:focus,
.form-select:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--w-emerald-400);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    color: #fff;
}

.form-label { color: rgba(255, 255, 255, 0.78); font-weight: var(--w-weight-medium); }
.form-control.is-invalid { border-color: var(--w-rose-400); }
.invalid-feedback { color: var(--w-rose-400); }

/*==============================================================================
  Modais
==============================================================================*/

.modal-content {
    background: #14172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--w-radius-xl);
    color: #eef0f6;
    box-shadow: var(--w-shadow-xl);
}

.modal-header,
.modal-footer { border-color: rgba(255, 255, 255, 0.1); }
.modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/*==============================================================================
  Acessibilidade
==============================================================================*/

:focus-visible { outline: 2px solid var(--w-emerald-400); outline-offset: 2px; }

/* O alvo de toque minimo vale tambem para a landing: os botoes aqui sao o
   caminho inteiro da conversao. */
@media (max-width: 575.98px) {
    .btn { min-height: 46px; }
    .btn-lg { width: 100%; }
}