:root {
    /* Marlon Portela — paleta oficial (manual de identidade visual) */
    --brand-sage: #b3c589;      /* cor principal — confiança */
    --brand-olive: #373826;     /* secundária escura — segurança */
    --brand-cream: #efeee6;     /* secundária clara — paz */
    --brand-espresso: #281a06;  /* secundária escura — aconchego */
    --brand-charcoal: #23231f;  /* secundária escura — firmeza */

    /* Nomes de variável legados mantidos para que o CSS existente
       herde a nova paleta automaticamente */
    --meteorite-dark: var(--brand-olive);
    --deep-blue: var(--brand-charcoal);
    --primary-purple: #2b2c1d;
    --primary-light: var(--brand-cream);
    --gray-dark: #3a382f;
    --gray-secondary: #6f6c5f;
    --gray-light: #f5f4ef;
    --warning: #ffcd35;
    --success: #00b090;
    --danger: #c1443a;
    --azure: var(--brand-espresso);
    --white: #ffffff;

    /* Escala de raio — usada de forma consistente em todo o site:
       sharp = cards/blocos editoriais, sm = campos, botões e badges
       (inclusive CTAs — pill fica só para avatares/ícones circulares
       via border-radius:50%, nunca em botões/etiquetas de texto). */
    --radius-sharp: 0;
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.18s var(--ease);
    --transition-base: 0.28s var(--ease);

    --touch-target: 44px;
}

@font-face {
    font-family: 'Houstiq 2';
    src: url('/public/font/brand/Houstiq-2.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Poppins é carregado via <link> no <head> (partials/head-fonts) —
   um @import aqui forçaria o navegador a baixar e interpretar este
   arquivo inteiro antes de sequer descobrir a fonte do Google. */

html {
    /* Evita que o navegador aplique um "skin" nativo escuro por trás de
       controles de formulário customizados (ex: texto fantasma em <select>
       de tema escuro quando o SO está em dark mode) — o site não tem
       variante escura, então fixamos o color-scheme. */
    color-scheme: light;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--gray-dark);
    background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Houstiq 2', 'Poppins', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.eyebrow, .kicker {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.03em;
}

button, .btn {
    font-family: 'Poppins', sans-serif;
}

/* Evita zoom automático no iOS ao focar campos */
input, select, textarea {
    font-size: 16px;
}

/* ── Dropdowns — seta customizada consistente em todo o site ──
   Variante escura (padrão): fundos claros (sidebar de filtros, modais).
   Variante clara: fundos escuros — aplicada via .select-on-dark. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    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='%23373826' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6.25 8 10.75l4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 13px;
    padding-right: 20px !important;
    cursor: pointer;
}

select.select-on-dark,
.select-on-dark select {
    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='%23efeee6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6.25 8 10.75l4.5-4.5'/%3E%3C/svg%3E");
}

select::-ms-expand {
    display: none;
}

select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── Estado de foco visível e consistente (acessibilidade de teclado) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-sage);
    outline-offset: 2px;
}

/* ── Transições e alvos de toque consistentes ── */
a, button, .btn, input, select {
    transition: color var(--transition-fast), background-color var(--transition-fast),
        border-color var(--transition-fast), opacity var(--transition-fast),
        transform var(--transition-fast), box-shadow var(--transition-fast);
}

button, a[role="button"], .btn {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
    button, a.whatsapp-cta, .search-btn, .footer-whatsapp,
    .pagination a, .menu-toggle, .hero-search-submit {
        min-height: var(--touch-target);
    }

    .footer-social a {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

header {
    background-color: transparent;
    color: var(--white);
}

footer {
    background-color: var(--brand-olive);
    color: var(--brand-cream);
}

a {
    color: var(--azure);
}

a:hover {
    color: var(--brand-olive);
}

.btn-primary {
    background-color: var(--brand-olive);
    border-color: var(--brand-olive);
}

.btn-outline-primary {
    border-color: var(--brand-olive);
    color: var(--brand-olive);
}