/**
 * CÓPIA de design/styles.css (modo standalone previsto no README do design system).
 * Única diferença: os @import apontam para os arquivos locais desta pasta, com
 * fontes auto-hospedadas em ../fonts. Alterou design/styles.css? Replique aqui.
 */
/**
 * Estacionar Design System — Componentes CSS
 *
 * Classes .est-* implementam os padrões visuais da landing page
 * (resources/views/landing.blade.php) usando exclusivamente os tokens
 * de tokens/tokens.css. Podem ser usadas em qualquer stack: Blade,
 * React, HTML estático.
 */
@import './tokens.css';
@import './fonts.css';

/* ==================================================================== */
/* Base                                                                  */
/* ==================================================================== */
.est-root {
    background: var(--color-paper);
    color: var(--color-ink-800);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
}

.est-root *,
.est-root *::before,
.est-root *::after {
    box-sizing: border-box;
}

/* ==================================================================== */
/* Tipografia                                                            */
/* ==================================================================== */
.est-heading-hero {
    font-family: var(--font-display);
    font-size: var(--text-hero-mobile);
    font-weight: 700;
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-hero);
    color: var(--color-ink-900);
    margin: 0;
}

@media (min-width: 1024px) {
    .est-heading-hero {
        font-size: var(--text-hero);
    }
}

.est-heading-section {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: var(--leading-section);
    letter-spacing: -0.025em;
    color: var(--color-ink-900);
    margin: 0;
}

@media (min-width: 640px) {
    .est-heading-section {
        font-size: var(--text-section);
    }
}

.est-heading-card {
    font-family: var(--font-display);
    font-size: var(--text-card-title);
    font-weight: 600;
    color: var(--color-ink-800);
    margin: 0;
}

.est-lead {
    font-size: var(--text-lead);
    line-height: var(--leading-body);
    color: var(--color-ink-600);
    margin: 0;
}

.est-text {
    font-size: 14px;
    line-height: var(--leading-body);
    color: var(--color-ink-600);
    margin: 0;
}

.est-caption {
    font-size: var(--text-small);
    color: var(--color-ink-500);
}

.est-accent {
    color: var(--color-pine-500);
}

/* Destaque em texto corrido (ex.: "antes" no hero) */
.est-strong {
    font-weight: 600;
    color: var(--color-ink-800);
}

/* ==================================================================== */
/* Eyebrow e Badge                                                       */
/* ==================================================================== */
/* Rótulo de seção, mono, caixa alta: "O PROBLEMA", "RECURSOS"           */
.est-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-ink-400);
}

.est-eyebrow--brand {
    color: var(--color-pine-400);
}

/* Pílula de destaque: "CONFERÊNCIA CEGA DE CAIXA"                       */
.est-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-full);
    background: var(--color-pine-100);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-pine-800);
}

/* Tag mono discreta: "Turno · Op. Léo"                                  */
.est-tag {
    display: inline-block;
    border-radius: var(--radius-xs);
    background: var(--color-line-soft);
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    color: var(--color-ink-400);
}

/* ==================================================================== */
/* Botões                                                                */
/* ==================================================================== */
.est-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 9px 18px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.est-btn:focus-visible {
    outline: 2px solid var(--color-pine-500);
    outline-offset: 2px;
}

.est-btn--primary {
    background: var(--color-pine-500);
    color: #fff;
}

.est-btn--primary:hover {
    background: var(--color-pine-600);
}

.est-btn--outline {
    border-color: var(--color-line);
    background: transparent;
    color: var(--color-ink-700);
}

.est-btn--outline:hover {
    border-color: var(--color-pine-500);
}

/* Variante "Entrar" da nav: texto mais apagado                          */
.est-btn--ghost {
    border-color: var(--color-line);
    background: transparent;
    color: var(--color-ink-500);
    font-weight: 500;
    padding: 7px 15px;
}

.est-btn--ghost:hover {
    border-color: var(--color-pine-500);
    color: var(--color-pine-800);
}

/* Tamanho grande (CTAs do hero e do formulário)                         */
.est-btn--lg {
    border-radius: var(--radius-lg);
    padding: 15px 26px;
    font-size: 15.5px;
}

/* Largura total (submit do formulário)                                  */
.est-btn--block {
    display: flex;
    width: 100%;
    border-radius: 11px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 15px;
}

.est-btn[disabled],
.est-btn--loading {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================================================================== */
/* Logo                                                                  */
/* ==================================================================== */
.est-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    border-radius: 8px;
}

.est-logo:focus-visible {
    outline: 2px solid var(--color-pine-500);
    outline-offset: 4px;
}

.est-logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    border-radius: var(--radius-sm);
    background: var(--color-pine-500);
}

.est-logo__check {
    height: 6px;
    width: 11px;
    transform: translateY(-1px) rotate(-45deg);
    border-bottom: 2.6px solid #fff;
    border-left: 2.6px solid #fff;
}

.est-logo__name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink-800);
}

/* Variante grande do check (sucesso do formulário)                      */
.est-success-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    border-radius: 14px;
    background: var(--color-pine-100);
}

.est-success-mark__check {
    height: 8px;
    width: 15px;
    transform: translateY(-2px) rotate(-45deg);
    border-bottom: 3px solid var(--color-pine-500);
    border-left: 3px solid var(--color-pine-500);
}

/* ==================================================================== */
/* Cards                                                                 */
/* ==================================================================== */
/* Card de recurso (bg paper-soft, ex.: grade RECURSOS)                  */
.est-card {
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-xl);
    background: var(--color-paper-soft);
    padding: 24px;
}

/* Card branco (ex.: grade O PROBLEMA, sobre fundo paper-mist)           */
.est-card--white {
    background: #fff;
    padding: 22px;
}

/* Painel flutuante com sombra (mock de fechamento de caixa)             */
.est-panel {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-3xl);
    background: var(--color-paper-soft);
    padding: 26px;
    box-shadow: var(--shadow-panel);
}

/* Painel claro sobre seção escura (wrapper do formulário de contato)    */
.est-panel--form {
    border: none;
    border-radius: var(--radius-2xl);
    background: var(--color-paper);
    box-shadow: none;
    color: var(--color-ink-800);
}

/* Chip numerado dos cards de recurso ("01", "02"…)                      */
.est-chip-number {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    border-radius: var(--radius-md);
    background: var(--color-pine-200);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-pine-700);
}

/* Título rust dos cards de problema                                     */
.est-card-title--danger {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-rust-500);
}

/* ==================================================================== */
/* Destaque tracejado (caixa "Conferência cega" do mock)                 */
/* ==================================================================== */
.est-highlight {
    border: 1px dashed var(--color-pine-300);
    border-radius: var(--radius-lg);
    background: var(--color-pine-50);
    padding: 14px 16px;
}

.est-highlight__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-pine-800);
}

/* ==================================================================== */
/* Estatísticas (hero)                                                   */
/* ==================================================================== */
.est-stat__value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-ink-800);
}

.est-stat__label {
    font-size: var(--text-small);
    color: var(--color-ink-500);
}

.est-stat-divider {
    width: 1px;
    align-self: stretch;
    background: var(--color-line);
}

/* ==================================================================== */
/* Formulário                                                            */
/* ==================================================================== */
.est-input {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: #fff;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-ink-800);
}

.est-input::placeholder {
    color: var(--color-ink-400);
}

.est-input:focus {
    border-color: var(--color-pine-500);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-pine-200);
}

.est-input--error {
    border-color: var(--color-rust-500);
}

.est-field-error {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-rust-500);
}

/* ==================================================================== */
/* Alerta (divergência, erros de formulário)                             */
/* ==================================================================== */
.est-alert {
    border-radius: var(--radius-md);
    background: var(--color-rust-50);
    padding: 11px 13px;
    font-size: var(--text-small);
    color: var(--color-rust-600);
}

/* ==================================================================== */
/* FAQ (accordion)                                                       */
/* ==================================================================== */
.est-faq-item {
    border-bottom: 1px solid var(--color-line-soft);
}

.est-faq-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--text-card-title);
    font-weight: 600;
    color: var(--color-ink-800);
}

.est-faq-trigger:focus-visible {
    outline: 2px solid var(--color-pine-500);
    outline-offset: 2px;
}

.est-faq-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-pine-500);
}

.est-faq-answer {
    margin: 0 0 18px;
    max-width: 640px;
    font-size: var(--text-body);
    line-height: 1.625;
    color: var(--color-ink-600);
}

/* ==================================================================== */
/* Seções                                                                */
/* ==================================================================== */
.est-section--mist {
    border-top: 1px solid var(--color-line-soft);
    background: var(--color-paper-mist);
}

.est-section--dark {
    background: var(--color-ink-800);
    color: #fff;
}

.est-section--dark .est-heading-section {
    color: #fff;
}

.est-section--dark .est-lead,
.est-section--dark .est-text {
    color: var(--color-ink-300);
}

.est-container {
    margin: 0 auto;
    max-width: var(--container-max);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

@media (min-width: 640px) {
    .est-container {
        padding-left: var(--container-pad-lg);
        padding-right: var(--container-pad-lg);
    }
}

/* ==================================================================== */
/* Animação                                                              */
/* ==================================================================== */
@keyframes est-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.est-float {
    animation: est-float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .est-float {
        animation: none;
    }
}