/* ═══════════════════════════════════════════════════
   AFTERLIFE.RAW — shared.css
   Design tokens + componentes reutilizáveis
   ═══════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); transition: background 0.4s ease; }

/* ── DESIGN TOKENS: Dark (default) ── */
:root {
    /* Core */
    --bg:    #080706;
    --fg:    #f5f2ec;
    --gold:  #c5a059;

    /* Foreground alpha */
    --fg-05: rgba(245,242,236,0.05);
    --fg-07: rgba(245,242,236,0.07);
    --fg-1:  rgba(245,242,236,0.1);
    --fg-15: rgba(245,242,236,0.15);
    --fg-2:  rgba(245,242,236,0.2);
    --fg-25: rgba(245,242,236,0.25);
    --fg-3:  rgba(245,242,236,0.3);
    --fg-35: rgba(245,242,236,0.35);
    --fg-4:  rgba(245,242,236,0.4);
    --fg-45: rgba(245,242,236,0.45);
    --fg-5:  rgba(245,242,236,0.5);
    --fg-55: rgba(245,242,236,0.55);
    --fg-6:  rgba(245,242,236,0.6);
    --fg-7:  rgba(245,242,236,0.7);
    --fg-8:  rgba(245,242,236,0.8);

    /* Background alpha */
    --bg-97: rgba(8,7,6,0.97);
    --bg-95: rgba(8,7,6,0.95);
    --bg-5:  rgba(8,7,6,0.5);
    --faint: rgba(8,7,6,0.03);

    /* Gold alpha */
    --gold-1:   rgba(197,160,89,0.1);
    --gold-12:  rgba(197,160,89,0.12);
    --gold-15:  rgba(197,160,89,0.15);
    --gold-3:   rgba(197,160,89,0.3);
    --gold-4:   rgba(197,160,89,0.4);
    --gold-5:   rgba(197,160,89,0.5);
    --gold-border: rgba(197,160,89,0.3);

    /* Aliases */
    --dim:  var(--fg-45);
    --line: var(--fg-07);
}

/* ── DESIGN TOKENS: Light ── */
[data-theme="light"] {
    --bg:    #f4f1eb;
    --fg:    #1a1816;
    --gold:  #9a7235;

    --fg-05: rgba(26,24,22,0.05);
    --fg-07: rgba(26,24,22,0.07);
    --fg-1:  rgba(26,24,22,0.1);
    --fg-15: rgba(26,24,22,0.15);
    --fg-2:  rgba(26,24,22,0.2);
    --fg-25: rgba(26,24,22,0.25);
    --fg-3:  rgba(26,24,22,0.3);
    --fg-35: rgba(26,24,22,0.35);
    --fg-4:  rgba(26,24,22,0.4);
    --fg-45: rgba(26,24,22,0.45);
    --fg-5:  rgba(26,24,22,0.5);
    --fg-55: rgba(26,24,22,0.55);
    --fg-6:  rgba(26,24,22,0.6);
    --fg-7:  rgba(26,24,22,0.7);
    --fg-8:  rgba(26,24,22,0.8);

    --bg-97: rgba(244,241,235,0.97);
    --bg-95: rgba(244,241,235,0.95);
    --bg-5:  rgba(244,241,235,0.5);
    --faint: rgba(26,24,22,0.03);

    --gold-1:   rgba(154,114,53,0.1);
    --gold-12:  rgba(154,114,53,0.12);
    --gold-15:  rgba(154,114,53,0.15);
    --gold-3:   rgba(154,114,53,0.3);
    --gold-4:   rgba(154,114,53,0.4);
    --gold-5:   rgba(154,114,53,0.5);
    --gold-border: rgba(154,114,53,0.3);
}

/* ── BASE ── */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.4s ease, color 0.4s ease;
}

h1, h2, h3, .serif {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ── FILM GRAIN (global noise) ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 9000;
}

/* ── SCROLL REVEAL ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }

/* ── NAV (compartilhada) ── */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    padding: 28px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, var(--bg-97), transparent);
    backdrop-filter: blur(20px);
    transition: background 0.4s ease;
    animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.nav-logo svg { width: 22px; height: 22px; stroke: var(--fg); transition: stroke 0.4s; }
[data-theme="light"] .nav-logo svg { stroke: var(--gold); }
.nav-logo-text {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--fg-35);
    transition: color 0.4s;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-link {
    font-size: 9px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--fg-35);
    text-decoration: none;
    border: 1px solid var(--fg-07);
    padding: 10px 20px;
    transition: all 0.4s ease;
}
.nav-link:hover {
    color: var(--gold);
    border-color: var(--gold-3);
}

/* ── THEME TOGGLE ── */
#theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    padding: 9px 16px;
    background: none;
    border: 1px solid var(--fg-07);
    color: var(--fg-35);
    cursor: pointer;
    transition: all 0.4s ease;
    font-family: inherit;
    outline: none;
    border-radius: 0;
    flex-shrink: 0;
}
#theme-toggle:hover { color: var(--gold); border-color: var(--gold-3); }
[data-theme="light"] #theme-toggle { border-color: var(--fg-15); color: var(--fg-45); }
[data-theme="light"] #theme-toggle:hover { color: var(--gold); border-color: var(--gold-3); }

/* ── LANGUAGE SELECTOR — definido por cada página individualmente ── */

/* Google Translate — esconder barra nativa */
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-gadget { display: none !important; }

/* ── FOOTER ── */
.site-footer {
    position: relative;
    z-index: 10;
    padding: 32px;
    text-align: center;
    border-top: 1px solid var(--fg-07);
    transition: border-color 0.4s;
}
.footer-copy {
    font-size: 9px;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.4em;
}
.footer-sub {
    font-size: 8px;
    color: var(--fg-1);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-top: 8px;
}
.footer-links a {
    color: var(--fg-2);
    text-decoration: none;
    transition: color 0.3s;
}
.footer-links a:hover { color: var(--gold); }

/* ── FLOATING BUTTONS (cinema, drawer, lang, backToTop) ── */
.fab {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--fg-05);
    backdrop-filter: blur(12px);
    border: 1px solid var(--fg-1);
    color: var(--fg-5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.35s ease;
    position: fixed;
    z-index: 150;
}
.fab:hover, .fab.active {
    background: var(--gold-12);
    border-color: var(--gold-4);
    color: var(--gold);
}

#drawer-btn  { bottom: 36px; right: 36px; }
#cinema-btn  { bottom: 88px; right: 36px; }

#backToTop {
    bottom: 32px; left: 32px;
    background: var(--gold-12);
    border: 1px solid var(--gold-3);
    color: var(--gold);
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
#backToTop.visible { opacity: 1; visibility: visible; }

/* ── SECTION / CARD shared styles ── */
section, footer, .full-quote, .glossary-row {
    border-color: var(--fg-07);
}

.editorial-block, .tip-card, .culture-card, .insight-cell,
.product-card, .widget, .quick-link, .content-block,
.chapter-card, .dest-page { background: var(--bg); }

.editorial-grid, .tips-grid, .insight-strip, .families-grid,
.brands-list, .chapters, .widgets-row, .quick-links, .house-grid { background: var(--fg-07); }

/* ── ANIMATIONS ── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── LIGHT MODE OVERRIDES ── */
[data-theme="light"] .editorial-block,
[data-theme="light"] .tip-card,
[data-theme="light"] .culture-card,
[data-theme="light"] .insight-cell,
[data-theme="light"] .product-card,
[data-theme="light"] .widget,
[data-theme="light"] .quick-link,
[data-theme="light"] .content-block,
[data-theme="light"] .chapter-card,
[data-theme="light"] .dest-page { background: var(--bg); }

[data-theme="light"] .editorial-grid,
[data-theme="light"] .tips-grid,
[data-theme="light"] .insight-strip,
[data-theme="light"] .families-grid,
[data-theme="light"] .brands-list,
[data-theme="light"] .chapters,
[data-theme="light"] .widgets-row,
[data-theme="light"] .quick-links { background: var(--line); }

[data-theme="light"] .rich-block  { background: rgba(26,24,22,0.02) !important; border-left-color: rgba(154,114,53,0.3) !important; }
[data-theme="light"] .smart-block { background: rgba(26,24,22,0.02) !important; border-left-color: rgba(26,100,60,0.2) !important; }

[data-theme="light"] footer { border-color: var(--line) !important; }
[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-links a { color: var(--fg-2); }

[data-theme="light"] .glossary-row { border-color: var(--line) !important; }
[data-theme="light"] .map-container iframe { filter: invert(0.9) hue-rotate(180deg); }

[data-theme="light"] .brand-row { border-left-color: transparent; }
[data-theme="light"] .brand-row:hover { background: var(--gold-1) !important; border-left-color: var(--gold) !important; }

[data-theme="light"] section { border-top-color: var(--line) !important; }
[data-theme="light"] .section-hero img { filter: brightness(0.35) saturate(0.7) !important; }

[data-theme="light"] .month-fill.peak { background: var(--gold) !important; }
[data-theme="light"] .month-fill.good { background: var(--gold-4) !important; }
[data-theme="light"] .month-fill.off  { background: var(--fg-1) !important; }
[data-theme="light"] .month-name,
[data-theme="light"] .month-label { color: var(--fg-3) !important; }

[data-theme="light"] .currency-input,
[data-theme="light"] .currency-select {
    background: var(--faint) !important;
    color: var(--fg) !important;
    border-color: var(--line) !important;
}

[data-theme="light"] .dest-hero img,
[data-theme="light"] .section-hero img,
[data-theme="light"] .page-hero img { filter: brightness(0.4) saturate(0.7) !important; }

[data-theme="light"] .dest-hero-overlay,
[data-theme="light"] .page-hero-overlay { background: linear-gradient(to top, var(--bg) 0%, transparent 55%) !important; }

[data-theme="light"] .map-container iframe { filter: invert(0.88) hue-rotate(180deg) saturate(0.9); }
[data-theme="light"] .hero-bg { opacity: 0.03 !important; }

[data-theme="light"] .nav-link { color: var(--fg-3) !important; border-color: var(--line) !important; }
[data-theme="light"] .nav-link:hover { color: var(--gold) !important; border-color: var(--gold-border) !important; }

[data-theme="light"] .product-image { filter: brightness(0.95) saturate(0.85); }
[data-theme="light"] .cat-badge { background: var(--gold-1) !important; color: var(--gold) !important; }

[data-theme="light"] .chapter-nav-btn.active,
[data-theme="light"] .cat-btn.active,
[data-theme="light"] .region-btn.active,
[data-theme="light"] .dest-tab.active { color: var(--gold) !important; }

[data-theme="light"] .full-quote { border-color: var(--line) !important; }
[data-theme="light"] .full-quote-text { color: var(--dim) !important; }

/* ── BRAND ROW ── */
.brand-row {
    border-left: 2px solid transparent;
    background: var(--fg-05);
    transition: background 0.3s, border-color 0.3s;
}
.brand-row:hover { background: var(--gold-1); border-left-color: var(--gold); }

/* ── NAV/BAR shared bg ── */
nav, .chapter-nav-bar, .cat-nav, .region-bar, .dest-tabs,
.chapter-nav-btn, .cat-btn {
    background: var(--bg-97);
    backdrop-filter: blur(20px);
    transition: background 0.4s;
}

/* Text tiers */
.editorial-body, .brand-row-body, .tip-body, .culture-text,
.chapter-intro, .chapter-desc, .tip-desc, .philosophy-body,
.hero-sub, .dest-tagline, .page-hero-sub, .section-intro,
.widget-sub, .block-body, .block-intro, .dest-country,
.insight-label, .footer-copy, .footer-sub,
.brand-row-origin, .editorial-price, .coming-label {
    color: var(--fg-45);
}

.chapter-nav-btn, .dest-tab, .cat-btn, .region-btn { color: var(--fg-3); }
.chapter-nav-btn.active, .dest-tab.active,
.cat-btn.active, .region-btn.active { color: var(--gold); }

.nav-logo-text { color: var(--fg-35); }

.month-fill.off  { background: var(--fg-1); }
.month-name, .month-label { color: var(--fg-3); }

.currency-input, .currency-select {
    background: var(--fg-05);
    color: var(--fg);
    border-color: var(--fg-07);
}

/* ── INLINE STYLES SPLASH: migrado para :hover CSS ── */
#splash-close:hover {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.7) !important;
}
#splash-enter:hover {
    color: #c5a059 !important;
    border-color: rgba(197,160,89,0.5) !important;
    background: rgba(197,160,89,0.05) !important;
}

/* ── RESPONSIVE NAV ── */
@media (max-width: 768px) {
    nav { padding: 20px 24px; }
    .nav-link { font-size: 8px; padding: 8px 14px; }
}
@media (max-width: 480px) {
    nav { padding: 16px 20px; }
    .nav-logo-text { font-size: 9px; }
    .nav-link { font-size: 8px; padding: 8px 14px; }
}