/* ============================================================================
   MemóriaViva — style.css
   Versão: 1.1.0  (tipografia sem serifa)
   ----------------------------------------------------------------------------
   Sumário:
     1. Reset & base
     2. Variáveis de tema (dark / light)
     3. Tipografia (sans-serif global)
     4. Utilitários temáticos
     5. Layout: header
     6. Componente: glows de fundo
     7. Componente: slider antes/depois
     8. Componente: FAQ (acordeão)
     9. Componente: badges de comparação
    10. Botão voltar ao topo (opcional)
    11. Scrollbar customizada
    12. Acessibilidade (focus, reduced-motion)
    13. Utilitários finais
   ============================================================================ */

/* ============================================================================
   1. RESET & BASE
   ============================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-page);
    color: var(--text);
    transition: background-color .3s ease, color .3s ease;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

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

/* ============================================================================
   2. VARIÁVEIS DE TEMA
   ============================================================================ */

/* ---------- TEMA ESCURO ---------- */
html.theme-dark {
    --bg-page:      #0B0F17;
    --bg-section:   rgba(15, 23, 42, 0.40);   /* slate-900/40 */
    --bg-card:      rgba(15, 23, 42, 0.60);   /* slate-900/60 */
    --bg-card-alt:  rgba(15, 23, 42, 0.80);   /* slate-900/80 */
    --bg-input:     rgba(15, 23, 42, 0.60);

    --border:       #1E293B;                  /* slate-800 */
    --border-soft:  rgba(30, 41, 59, 0.60);

    --text:         #FFFFFF;
    --text-muted:   #CBD5E1;                  /* slate-300 */
    --text-soft:    #94A3B8;                  /* slate-400 */

    --brand:        #16A34A;                  /* green-600 */
    --brand-soft:   rgba(22, 163, 74, 0.10);
    --brand-glow:   rgba(22, 163, 74, 0.25);

    --shadow-color: rgba(0, 0, 0, 0.40);
    --overlay:      rgba(15, 23, 42, 0.85);
}

/* ---------- TEMA CLARO ---------- */
html.theme-light {
    --bg-page:      #F8FAFC;                  /* slate-50  */
    --bg-section:   #FFFFFF;                  /* branco    */
    --bg-card:      #FFFFFF;
    --bg-card-alt:  #F1F5F9;                  /* slate-100 */
    --bg-input:     #FFFFFF;

    --border:       #E2E8F0;                  /* slate-200 */
    --border-soft:  #E2E8F0;

    --text:         #0F172A;                  /* slate-900 */
    --text-muted:   #334155;                  /* slate-700 */
    --text-soft:    #64748B;                  /* slate-500 */

    --brand:        #16A34A;
    --brand-soft:   #DCFCE7;                  /* brand-100 */
    --brand-glow:   rgba(22, 163, 74, 0.18);

    --shadow-color: rgba(15, 23, 42, 0.08);
    --overlay:      rgba(15, 23, 42, 0.85);   /* badges continuam escuros */
}

/* ============================================================================
   3. TIPOGRAFIA (SANS-SERIF GLOBAL)
   ----------------------------------------------------------------------------
   Estratégia:
   - Toda a página usa Plus Jakarta Sans.
   - O hero (h1) ganha peso 800 e tracking negativo para presença.
   - H2/H3/H4 usam peso 700 com tracking levemente negativo.
   - Qualquer .font-serif remanescente no HTML é sobrescrito para sans.
   ============================================================================ */

/* Base para títulos */
h1, h2, h3, h4, h5, h6,
.font-serif,
.font-display {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: -0.02em;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

/* Hero e títulos muito grandes: peso extra */
h1,
h1.font-serif,
h1.font-display,
.text-hero {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* Subtítulos com menos tracking agressivo */
h4, h5, h6 {
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* Itálico editorial (ex: "merecem." no hero) */
.italic,
em,
i {
    font-style: italic;
    font-weight: 700; /* mantém presença em sans */
}

/* Logo textual */
.font-logo {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Corpo do texto: line-height confortável */
p {
    line-height: 1.65;
}

/* ============================================================================
   4. UTILITÁRIOS TEMÁTICOS
   ============================================================================ */

/* Superfícies */
.theme-surface   { background-color: var(--bg-section); }
.theme-card      { background-color: var(--bg-card);     border: 1px solid var(--border); }
.theme-card-alt  { background-color: var(--bg-card-alt); border: 1px solid var(--border); }

/* Bordas */
.theme-border      { border-color: var(--border); }
.theme-border-soft { border-color: var(--border-soft); }

/* Texto */
.theme-text        { color: var(--text); }
.theme-text-muted  { color: var(--text-muted); }
.theme-text-soft   { color: var(--text-soft); }

/* Hover padrão para cards interativos */
.theme-card:hover,
.theme-card-alt:hover {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
}

/* ============================================================================
   5. HEADER
   ============================================================================ */
#main-header {
    background-color: color-mix(in srgb, var(--bg-page) 80%, transparent);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

#main-header.is-scrolled {
    box-shadow: 0 10px 30px -10px var(--shadow-color);
}

/* Links de navegação por tema */
#main-header nav a {
    transition: color .2s ease;
}

html.theme-dark #main-header nav a {
    color: var(--text-muted);
}
html.theme-dark #main-header nav a:hover,
html.theme-dark #main-header nav a:focus-visible {
    color: #FFFFFF;
}

html.theme-light #main-header nav a {
    color: var(--text-soft);
}
html.theme-light #main-header nav a:hover,
html.theme-light #main-header nav a:focus-visible {
    color: var(--text);
}

/* ============================================================================
   6. GLOWS DE FUNDO
   ============================================================================ */
.glow {
    pointer-events: none;
    will-change: opacity;
    transition: opacity .4s ease;
}

html.theme-light .glow { opacity: .35; }
html.theme-dark  .glow { opacity: 1; }

/* ============================================================================
   7. SLIDER ANTES/DEPOIS
   ============================================================================ */
#comparison-container {
    position: relative;
    isolation: isolate;
    touch-action: pan-y;            /* permite scroll vertical, captura horizontal */
    user-select: none;
    -webkit-user-select: none;
}

#comparison-container:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
    border-radius: 24px;
}

#comparison-before {
    transition: width .08s linear;
    will-change: width;
}

#comparison-handle {
    transition: left .08s linear;
    will-change: left;
}

/* Alça central — feedback ao hover/focus */
#comparison-handle > div {
    transition: transform .2s ease, box-shadow .2s ease;
}

#comparison-container:hover #comparison-handle > div,
#comparison-container:focus-visible #comparison-handle > div {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

/* ============================================================================
   8. FAQ — ACORDEÃO
   ============================================================================ */
.faq-toggle {
    transition: color .2s ease, background-color .2s ease;
}

.faq-toggle:hover {
    color: var(--brand);
}

/* Chevron — o Lucide substitui <i> por <svg>; cobrimos ambos */
.faq-toggle i,
.faq-toggle svg {
    transition: transform .3s ease;
    color: var(--text-soft);
}

.faq-content {
    animation: faqFadeIn .25s ease-out;
}

@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   9. BADGES DE COMPARAÇÃO (legibilidade sobre imagens)
   ============================================================================ */
.comparison-badge {
    background-color: var(--overlay);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================================================
   10. BOTÃO VOLTAR AO TOPO (opcional)
   ============================================================================ */
#back-to-top {
    transition: opacity .3s ease, transform .3s ease;
}

#back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#back-to-top:not(.is-visible) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

/* ============================================================================
   11. SCROLLBAR CUSTOMIZADA
   ============================================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--border) 60%, var(--text-soft));
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-page);
}

/* ============================================================================
   12. ACESSIBILIDADE
   ============================================================================ */

/* Focus visível padronizado */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

    #comparison-before,
    #comparison-handle {
        transition: none;
    }
}

/* Classe auxiliar aplicada via JS (initReducedMotion) */
html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* ============================================================================
   13. UTILITÁRIOS FINAIS
   ============================================================================ */

/* Fallback para text-balance em navegadores antigos */
@supports not (text-wrap: balance) {
    .text-balance {
        text-wrap: normal;
    }
}

/* Esconde visualmente mas mantém para leitores de tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Container centralizado opcional */
.container-mv {
    width: 100%;
    max-width: 80rem; /* 1280px */
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .container-mv { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
    .container-mv { padding-inline: 2rem; }
}

/* Melhora renderização de imagens grandes */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* Evita "flash" de texto sem estilo durante o carregamento da fonte */
html.fonts-loading body {
    visibility: hidden;
}


/* ============================================================
   LOGO — troca automática por tema
   ============================================================ */

/* Padrão: mostra versão preta (tema claro), esconde branca */
.logo-light { display: block; }
.logo-dark  { display: none; }

/* Tema escuro: inverte */
html.theme-dark .logo-light { display: none; }
html.theme-dark .logo-dark  { display: block; }

/* Tema claro: garante o estado padrão */
html.theme-light .logo-light { display: block; }
html.theme-light .logo-dark  { display: none; }