/* ============================================================
   MIDNIGHT DETAILING — DESIGN SYSTEM (preview)
   Standalone tokens. Will be ported to Django static/css/ later.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
    /* Color — confirmed by researcher */
    --c-black:           #000000;
    --c-obsidian:        #0A0A0A;  /* primary bg */
    --c-graphite:        #141414;  /* elevated surface */
    --c-charcoal:        #1F1F1F;  /* borders */
    --c-smoke:           #2A2A2A;  /* hover surface */

    --c-white:           #FFFFFF;
    --c-pearl:           #F5F5F5;  /* primary text */
    --c-silver:          #9A9A9A;  /* secondary text (research-confirmed) */
    --c-ash:             #6B6B6B;  /* muted */

    --c-champagne:       #C9A876;  /* primary accent (from logo) */
    --c-champagne-light: #D4B88C;
    --c-champagne-deep:  #A88858;
    --c-champagne-glow:  rgba(201, 168, 118, 0.18);

    /* Semantic */
    --bg:                var(--c-obsidian);
    --bg-elevated:       var(--c-graphite);
    --fg:                var(--c-pearl);
    --fg-muted:          var(--c-silver);
    --fg-dim:            var(--c-ash);
    --accent:            var(--c-champagne);
    --border:            var(--c-charcoal);
    --border-strong:     var(--c-smoke);

    /* Typography */
    --font-display:      'Michroma', 'Orbitron', sans-serif;
    --font-body:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif:        'Cormorant Garamond', 'Playfair Display', Georgia, serif;

    --tracking-tight:    -0.02em;
    --tracking-normal:    0;
    --tracking-wide:      0.08em;
    --tracking-wider:     0.16em;
    --tracking-widest:    0.28em;

    /* Type scale — fluid */
    --t-xs:   clamp(0.70rem, 0.68rem + 0.10vw, 0.78rem);
    --t-sm:   clamp(0.82rem, 0.80rem + 0.10vw, 0.90rem);
    --t-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
    --t-lg:   clamp(1.10rem, 1.05rem + 0.30vw, 1.25rem);
    --t-xl:   clamp(1.40rem, 1.30rem + 0.60vw, 1.75rem);
    --t-2xl:  clamp(1.90rem, 1.70rem + 1.00vw, 2.50rem);
    --t-3xl:  clamp(2.40rem, 2.10rem + 1.60vw, 3.50rem);
    --t-4xl:  clamp(3.00rem, 2.50rem + 2.80vw, 5.50rem);
    --t-5xl:  clamp(3.80rem, 3.00rem + 4.00vw, 7.50rem);

    /* Spacing — 8px base */
    --s-1:  0.25rem;
    --s-2:  0.50rem;
    --s-3:  0.75rem;
    --s-4:  1.00rem;
    --s-5:  1.50rem;
    --s-6:  2.00rem;
    --s-7:  3.00rem;
    --s-8:  4.00rem;
    --s-9:  6.00rem;
    --s-10: 8.00rem;

    /* Layout */
    --container:         1280px;
    --container-narrow:  880px;
    --gutter:            clamp(1.25rem, 4vw, 2.5rem);

    /* Radius */
    --r-sm:   2px;
    --r:      4px;
    --r-lg:   8px;
    --r-pill: 999px;

    /* Shadow */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow:      0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg:   0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 0 32px var(--c-champagne-glow);

    /* Motion */
    --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --d-fast:      180ms;
    --d:           320ms;
    --d-slow:      640ms;

    /* z-index */
    --z-header:  100;
    --z-overlay: 200;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--t-base);
    font-weight: 300;
    line-height: 1.6;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- TOUCH ---------- */
/* Remove o atraso de ~300ms e o realce azul nativo; garante que o toque
   é registado em toda a área do elemento (não só no texto/ícone). */
a, button, label, summary, [role="button"], .btn, .plan, .addon,
.nav__link, .nav__cta, .nav-toggle, .segment, .mode-toggle__btn,
.period__btn, .plan__cta, .cal__day, .cal__nav, .fab-wa, .check {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* Os filhos (ícones/labels) não devem intercetar o toque do botão-pai. */
.btn > *, .nav__cta > *, .plan__cta > *, .addon *, .segment > *,
.period__btn > *, .mode-toggle__btn > * { pointer-events: none; }
ul { list-style: none; padding: 0; margin: 0; }
::selection { background: var(--c-champagne); color: var(--c-black); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-obsidian); }
::-webkit-scrollbar-thumb { background: var(--c-charcoal); border-radius: var(--r-pill); }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
    margin: 0 0 var(--s-4);
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
h1 { font-size: var(--t-4xl); letter-spacing: var(--tracking-wider); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }

p { margin: 0 0 var(--s-4); color: var(--fg-muted); max-width: 65ch; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--c-champagne);
    margin-bottom: var(--s-4);
}

.lead {
    font-size: var(--t-lg);
    color: var(--fg);
    font-weight: 300;
    max-width: 60ch;
}

.mark { color: var(--c-champagne); font-style: normal; }
.muted { color: var(--fg-muted); }

.serif {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
}

/* ---------- LAYOUT ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--s-9); }
.section--lg { padding-block: var(--s-10); }

@media (max-width: 720px) {
    .section { padding-block: var(--s-8); }
}

.rule {
    width: 64px;
    height: 1px;
    background: var(--c-champagne);
    border: 0;
    margin: var(--s-5) 0;
}

/* ---------- NAVBAR ---------- */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    padding-block: var(--s-4);
    transition: background var(--d) var(--ease-out), border-color var(--d) var(--ease-out), padding var(--d) var(--ease-out), backdrop-filter var(--d) var(--ease-out);
    border-bottom: 1px solid transparent;
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
}

.navbar__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.navbar__wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6em;
    font-family: var(--ff-display, var(--font-display));
    white-space: nowrap;
    transition: opacity var(--d) var(--ease-out);
}
.navbar__brand:hover .navbar__wordmark { opacity: 0.85; }
.navbar__wordmark-main {
    font-size: 0.95rem;
    letter-spacing: 0.25em;
    color: var(--fg);
}
.navbar__wordmark-sub {
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    color: var(--c-champagne);
}

.navbar.is-scrolled {
    background: rgba(10, 10, 10, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--border);
    padding-block: var(--s-3);
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--s-6);
}

.nav__link {
    position: relative;
    font-size: var(--t-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: var(--s-2) 0;
    transition: color var(--d) var(--ease-out);
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0;
    height: 1px;
    background: var(--c-champagne);
    transition: width var(--d) var(--ease-out);
}
.nav__link:hover, .nav__link.is-active { color: var(--fg); }
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }

.nav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.55rem 1rem;
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--c-black);
    background: var(--c-champagne);
    border-radius: var(--r-sm);
    transition: background var(--d) var(--ease-out);
}
.nav__cta:hover { background: var(--c-white); }

/* Mobile toggle */
.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--fg);
}
.nav-toggle__bar {
    display: block;
    width: 22px; height: 1px;
    background: currentColor;
    position: relative;
}
.nav-toggle__bar::before, .nav-toggle__bar::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px; height: 1px;
    background: currentColor;
    transition: transform var(--d) var(--ease-out);
}
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after  { top:  7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: center;
        gap: var(--s-6);
        background: rgba(10, 10, 10, 0.96);
        backdrop-filter: blur(24px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--d) var(--ease-out);
    }
    .nav.is-open { opacity: 1; pointer-events: auto; }
    .nav__link { font-size: var(--t-xl); font-family: var(--font-display); }
}

/* ---------- BUTTONS ---------- */
.btn {
    --_bg: transparent;
    --_fg: var(--fg);
    --_border: var(--fg);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: 1rem 1.85rem;
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--_fg);
    background: var(--_bg);
    border: 1px solid var(--_border);
    border-radius: var(--r-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--d) var(--ease-out), border-color var(--d) var(--ease-out), transform var(--d-fast) var(--ease-out);
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-champagne);
    transform: translateX(-101%);
    transition: transform var(--d) var(--ease-out);
    z-index: -1;
}

.btn:hover { color: var(--c-black); border-color: var(--c-champagne); }
.btn:hover::before { transform: translateX(0); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--c-champagne); outline-offset: 3px; }

.btn--primary {
    --_bg: var(--c-champagne);
    --_fg: var(--c-black);
    --_border: var(--c-champagne);
}
.btn--primary::before { background: var(--c-white); }
.btn--primary:hover { color: var(--c-black); border-color: var(--c-white); }

.btn--whatsapp {
    --_border: #1F1F1F;
    --_fg: var(--fg);
}
.btn--whatsapp::before { background: #25D366; }
.btn--whatsapp:hover { color: var(--c-black); border-color: #25D366; }

.btn__arrow { display: inline-block; transition: transform var(--d) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- HERO ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: var(--s-10) var(--gutter) var(--s-9);
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 50% 30%, #141414 0%, #0A0A0A 55%, #000 100%);
    text-align: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 20% 30%, rgba(201, 168, 118, 0.10) 0%, transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(201, 168, 118, 0.06) 0%, transparent 40%);
    filter: blur(40px);
    z-index: -2;
    animation: drift 24s ease-in-out infinite alternate;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 168, 118, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 118, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    z-index: -1;
    pointer-events: none;
}

@keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-3%, 2%) scale(1.08); }
}

.hero__inner {
    max-width: 980px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    margin-bottom: var(--s-5);
    line-height: 1;
    opacity: 0;
    transform: translateY(12px);
    animation: fade-up 0.9s var(--ease-out) 0.1s forwards;
}
.hero__wordmark-main {
    font-family: var(--ff-display, var(--font-display));
    font-size: clamp(2.4rem, 7vw, 5rem);
    letter-spacing: 0.18em;
    color: var(--fg);
}
.hero__wordmark-sub {
    font-family: var(--ff-display, var(--font-display));
    font-size: clamp(0.85rem, 1.4vw, 1.15rem);
    letter-spacing: 0.55em;
    color: var(--c-champagne);
}

.hero__eyebrow { opacity: 0; transform: translateY(12px); animation: fade-up 0.9s var(--ease-out) 0.25s forwards; }

.hero__title {
    font-family: var(--font-display);
    font-size: var(--t-5xl);
    line-height: 0.95;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin: 0 0 var(--s-5);
    opacity: 0;
    transform: translateY(16px);
    animation: fade-up 1.0s var(--ease-out) 0.4s forwards;
}
.hero__title-accent {
    display: block;
    color: var(--c-champagne);
    font-size: 0.45em;
    letter-spacing: var(--tracking-widest);
    margin-top: var(--s-3);
}

.hero__tagline {
    font-size: var(--t-lg);
    font-weight: 300;
    color: var(--fg-muted);
    max-width: 56ch;
    margin: 0 auto var(--s-7);
    opacity: 0;
    transform: translateY(16px);
    animation: fade-up 1.0s var(--ease-out) 0.6s forwards;
}

.hero__cta {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    animation: fade-up 1.0s var(--ease-out) 0.8s forwards;
}

@keyframes fade-up { to { opacity: 1; transform: none; } }

.hero__scroll {
    position: absolute;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    color: var(--fg-dim);
    text-transform: uppercase;
    opacity: 0;
    animation: fade-up 1s var(--ease-out) 1.2s forwards;
}
.hero__scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, var(--c-champagne), transparent);
    animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
    0%, 100% { transform: scaleY(1); opacity: 0.8; }
    50%      { transform: scaleY(0.4); opacity: 0.3; transform-origin: top; }
}

/* ---------- PILLARS (3 pilares) ---------- */
.pillars {
    background: var(--c-obsidian);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-7);
}
@media (max-width: 880px) { .pillars__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.pillar { display: flex; flex-direction: column; gap: var(--s-3); }

.pillar__icon {
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    color: var(--c-champagne);
    border: 1px solid var(--c-champagne);
    margin-bottom: var(--s-3);
}

.pillar__title {
    font-family: var(--font-display);
    font-size: var(--t-base);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 0;
}

.pillar__text {
    color: var(--fg-muted);
    font-size: var(--t-sm);
    line-height: 1.7;
    margin: 0;
}

/* ---------- SECTION HEAD ---------- */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-6);
    margin-bottom: var(--s-7);
}
.section-head__title { margin: 0; max-width: 16ch; }
.section-head__intro { max-width: 42ch; color: var(--fg-muted); margin: 0; }

@media (max-width: 720px) {
    .section-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

/* ---------- TIERS ---------- */
.tiers { background: var(--c-obsidian); }

.tiers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    align-items: stretch;
}
@media (max-width: 880px) { .tiers__grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--s-7) var(--s-6);
    background: var(--c-graphite);
    border: 1px solid var(--border);
    isolation: isolate;
    transition: border-color var(--d) var(--ease-out), transform var(--d) var(--ease-out);
}
.tier:hover {
    border-color: var(--c-champagne-deep);
    transform: translateY(-2px);
}

/* Featured tier — Signature */
.tier--featured {
    background: linear-gradient(180deg, #15110a 0%, var(--c-graphite) 100%);
    border-color: var(--c-champagne);
}
.tier--featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--c-champagne-glow) 0%, transparent 55%);
    z-index: -1;
    pointer-events: none;
}

.tier__badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--c-champagne);
    color: var(--c-black);
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.tier__eyebrow {
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: var(--s-4);
}
.tier--featured .tier__eyebrow { color: var(--c-champagne); }

.tier__name {
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    line-height: 1;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin: 0 0 var(--s-4);
}

.tier__price {
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--c-champagne);
    margin-bottom: var(--s-5);
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
}

.tier__price-prefix {
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--fg-dim);
}

.tier__price--quote {
    font-size: var(--t-base);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.tier__desc {
    color: var(--fg-muted);
    font-size: var(--t-sm);
    line-height: 1.7;
    margin: 0 0 var(--s-5);
}

.tier__divider {
    height: 1px;
    background: var(--border);
    margin: var(--s-3) 0 var(--s-5);
    border: 0;
}
.tier--featured .tier__divider { background: var(--c-champagne-deep); }

.tier__list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
    flex: 1;
}

.tier__item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    font-size: var(--t-sm);
    color: var(--fg);
    line-height: 1.5;
}

.tier__item-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--c-champagne);
    margin-top: 3px;
}

.tier__cta {
    margin-top: auto;
    align-self: flex-start;
}

/* ---------- BEFORE/AFTER ---------- */
.beforeafter { background: var(--c-black); }

.compare {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--border);
    user-select: none;
    touch-action: none;
    cursor: ew-resize;
    background: var(--c-graphite);
}
.compare__pane { position: absolute; inset: 0; background-size: cover; background-position: center; }
.compare__pane--before {
    background-image:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.4)),
        url('https://images.unsplash.com/photo-1601362840469-51e4d8d58785?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    filter: saturate(.5) contrast(.92) brightness(.85);
}
.compare__pane--after {
    background-image:
        linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.3)),
        url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    clip-path: inset(0 50% 0 0);
    transition: clip-path 60ms linear;
}

.compare__label {
    position: absolute;
    bottom: var(--s-4);
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    padding: var(--s-2) var(--s-3);
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
}
.compare__label--before { left: var(--s-4); color: var(--c-silver); }
.compare__label--after  { right: var(--s-4); color: var(--c-champagne); border-color: var(--c-champagne); }

.compare__handle {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    background: var(--c-champagne);
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 24px rgba(201, 168, 118, 0.5);
}
.compare__knob {
    position: absolute;
    top: 50%; left: 50%;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--c-champagne);
    color: var(--c-black);
    transform: translate(-50%, -50%);
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.15) inset;
    pointer-events: none;
    transition: transform var(--d-fast) var(--ease-out);
}
.compare.is-dragging .compare__knob { transform: translate(-50%, -50%) scale(1.08); }

/* ---------- PROCESS (4 steps) ---------- */
.process { background: var(--c-obsidian); }

.process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
@media (max-width: 880px) { .process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process__grid { grid-template-columns: 1fr; } }

.step {
    padding: var(--s-6);
    background: var(--c-obsidian);
    position: relative;
}

.step__num {
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    color: var(--c-champagne);
    line-height: 1;
    margin-bottom: var(--s-5);
    display: block;
}

.step__title {
    font-family: var(--font-display);
    font-size: var(--t-base);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 0 0 var(--s-3);
}

.step__text {
    color: var(--fg-muted);
    font-size: var(--t-sm);
    line-height: 1.65;
    margin: 0;
}

/* ---------- PHILOSOPHY ---------- */
.philosophy { background: var(--c-obsidian); }

.philosophy__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    align-items: center;
}
@media (max-width: 880px) { .philosophy__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.philosophy__title { font-size: var(--t-3xl); margin-bottom: var(--s-5); }

.philosophy__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.stat { padding: var(--s-6) var(--s-5); background: var(--c-graphite); }
.stat__num {
    font-family: var(--font-display);
    font-size: var(--t-3xl);
    color: var(--c-champagne);
    line-height: 1;
    margin-bottom: var(--s-3);
}
.stat__label {
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* ---------- TESTIMONIALS + BRANDS ---------- */
.testimonials { background: var(--c-black); }

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-bottom: var(--s-8);
}
@media (max-width: 880px) { .testi-grid { grid-template-columns: 1fr; } }

.testi {
    padding: var(--s-6);
    border: 1px solid var(--border);
    background: var(--c-obsidian);
    transition: border-color var(--d) var(--ease-out), transform var(--d) var(--ease-out);
}
.testi:hover { border-color: var(--c-champagne); transform: translateY(-2px); }

.testi__mark {
    font-family: var(--font-serif);
    font-size: var(--t-3xl);
    color: var(--c-champagne);
    line-height: 0.7;
    margin-bottom: var(--s-4);
}

.testi__text {
    font-family: var(--font-serif);
    font-size: var(--t-lg);
    line-height: 1.5;
    color: var(--fg);
    font-style: italic;
    font-weight: 400;
    margin: 0 0 var(--s-5);
}

.testi__author {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
}
.testi__name {
    font-family: var(--font-display);
    font-size: var(--t-sm);
    letter-spacing: var(--tracking-wide);
}
.testi__car {
    font-size: var(--t-xs);
    color: var(--fg-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-7);
    padding-top: var(--s-6);
    border-top: 1px solid var(--border);
}
.brands__label {
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--fg-dim);
    width: 100%;
    text-align: center;
    margin-bottom: var(--s-3);
}
.brand {
    font-family: var(--font-display);
    font-size: var(--t-sm);
    letter-spacing: var(--tracking-wider);
    color: var(--fg-muted);
    text-transform: uppercase;
    opacity: 0.65;
    transition: opacity var(--d) var(--ease-out), color var(--d) var(--ease-out);
}
.brand:hover { opacity: 1; color: var(--c-champagne); }

/* ---------- FAQ ---------- */
.faq { background: var(--c-obsidian); }

.faq__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}
.faq__item { border-bottom: 1px solid var(--border); }

.faq__trigger {
    width: 100%;
    text-align: left;
    padding: var(--s-5) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    font-family: var(--font-display);
    font-size: var(--t-base);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg);
    transition: color var(--d) var(--ease-out);
}
.faq__trigger:hover { color: var(--c-champagne); }

.faq__icon {
    width: 18px; height: 18px;
    position: relative;
    flex-shrink: 0;
}
.faq__icon::before, .faq__icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform var(--d) var(--ease-out);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1px; margin-top: -0.5px; }
.faq__icon::after  { left: 50%; top: 0; height: 100%; width: 1px; margin-left: -0.5px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }

.faq__panel {
    padding: 0 0 var(--s-5) 0;
    color: var(--fg-muted);
    font-size: var(--t-base);
    line-height: 1.7;
    max-width: 70ch;
}

/* ---------- CONTACT ---------- */
.contact { background: linear-gradient(180deg, var(--c-obsidian) 0%, var(--c-black) 100%); }

.contact__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-8);
}
@media (max-width: 880px) { .contact__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.field__label {
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--fg-muted);
}

.field__input,
.field__textarea,
.field__select {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--c-graphite);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--t-base);
    transition: border-color var(--d) var(--ease-out), background var(--d) var(--ease-out);
}
.field__textarea { resize: vertical; min-height: 120px; }

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
    outline: 0;
    border-color: var(--c-champagne);
    background: var(--c-obsidian);
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--fg-dim); }

.contact__aside {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.info-card {
    display: block;
    padding: var(--s-5);
    border: 1px solid var(--border);
    background: var(--c-obsidian);
    text-decoration: none;
    transition: border-color var(--d) var(--ease-out), transform var(--d) var(--ease-out), background var(--d) var(--ease-out);
}
a.info-card:hover {
    border-color: var(--c-champagne-deep);
    transform: translateY(-2px);
}
.info-card--feature {
    border-color: var(--c-champagne);
    background: linear-gradient(180deg, #15110a 0%, var(--c-obsidian) 100%);
}
a.info-card--feature:hover {
    border-color: var(--c-champagne-light);
}
.info-card__label {
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--c-champagne);
    margin-bottom: var(--s-2);
    display: block;
}
.info-card__value {
    font-size: var(--t-lg);
    color: var(--fg);
}

/* ---------- FORM EXTRAS (AJAX feedback) ---------- */
.form__alert {
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--border);
    margin-bottom: var(--s-5);
    font-size: var(--t-sm);
    line-height: 1.5;
}
.form__alert--success {
    border-color: var(--c-champagne);
    color: var(--c-champagne);
    background: rgba(201, 168, 118, 0.06);
}
.form__alert--error {
    border-color: #C77E6A;
    color: #E7A799;
    background: rgba(199, 126, 106, 0.08);
}

.field__help {
    font-size: var(--t-xs);
    color: var(--fg-dim);
    letter-spacing: var(--tracking-wide);
}
.field__error {
    font-size: var(--t-xs);
    color: #E7A799;
    letter-spacing: var(--tracking-wide);
    margin-top: var(--s-1);
    display: block;
}
.field--has-error .field__input,
.field--has-error .field__textarea,
.field--has-error .field__select {
    border-color: #C77E6A;
}

/* ---------- TESTIMONIAL STARS ---------- */
.testi__stars {
    display: flex;
    gap: 2px;
    color: var(--c-champagne);
    font-size: var(--t-sm);
    letter-spacing: 0.1em;
    margin-bottom: var(--s-4);
}

/* ---------- FOOTER ---------- */
.footer {
    background: var(--c-black);
    border-top: 1px solid var(--border);
    padding-block: var(--s-8) var(--s-5);
}

.footer__grid {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1.5fr repeat(3, 1fr);
}
@media (max-width: 880px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.footer__logo { height: 36px; }
.footer__wordmark {
    font-family: var(--font-display);
    font-size: var(--t-sm);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}
.footer__tagline { color: var(--fg-muted); font-size: var(--t-sm); max-width: 32ch; }
.footer__heading {
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--c-champagne);
    margin-bottom: var(--s-4);
}
.footer__list { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__link {
    color: var(--fg-muted);
    font-size: var(--t-sm);
    transition: color var(--d) var(--ease-out);
}
.footer__link:hover { color: var(--c-champagne); }

.footer__bottom {
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--fg-dim);
    text-transform: uppercase;
}

/* ---------- UTILITY ---------- */
/* Reveal only kicks in when JS is enabled — the inline script in <head>
   adds `.js` to <html> before paint. Without JS, content is fully visible. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    background: var(--c-champagne);
    color: var(--c-black);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r);
    font-family: var(--font-display);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    z-index: 999;
    transition: top var(--d) var(--ease-out);
}
.skip-link:focus { top: var(--s-3); }

/* WhatsApp floating button */
.fab-wa {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #0A0A0A;
    display: grid;
    place-items: center;
    z-index: var(--z-overlay);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    transition: transform var(--d) var(--ease-out), box-shadow var(--d) var(--ease-out);
}
.fab-wa:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 16px 40px rgba(37, 211, 102, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- PREVIEW TOKEN GALLERY (preview only) ---------- */
.tokens {
    padding: var(--s-9) var(--gutter);
    background: var(--c-graphite);
    border-top: 1px solid var(--border);
}
.tokens__head {
    margin-bottom: var(--s-6);
    max-width: var(--container);
    margin-inline: auto;
}
.tokens__head h3 { font-size: var(--t-base); }

.tokens__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
}
@media (max-width: 720px) { .tokens__grid { grid-template-columns: 1fr; } }

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
@media (max-width: 520px) { .swatches { grid-template-columns: repeat(2, 1fr); } }

.swatch {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-wide);
}
.swatch__hex { color: var(--fg-dim); font-family: var(--font-display); margin-top: var(--s-1); }

.type-sample { margin-bottom: var(--s-3); }
.type-sample__meta {
    font-size: var(--t-xs);
    color: var(--fg-dim);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--s-1);
    font-family: var(--font-display);
}

/* ---------- HONEYPOT ----------
   Off-screen rather than display:none — some bots skip non-rendered fields,
   so we keep it in the layout tree but invisible and unreachable. */
.honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none;
}
.honeypot, .honeypot * { visibility: hidden; }

/* ---------- CHECKBOX GRID (services field) ---------- */
.field--checkboxes .field__label {
    display: block;
    margin-bottom: var(--s-3);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}
@media (max-width: 520px) {
    .checkbox-grid { grid-template-columns: 1fr; }
}

.checkbox {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border);
    background: var(--c-graphite);
    cursor: pointer;
    transition: border-color var(--d) var(--ease-out), background var(--d) var(--ease-out);
}
.checkbox:hover {
    border-color: var(--c-champagne-deep);
    background: var(--c-smoke);
}
.checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--c-ash);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--d) var(--ease-out), background var(--d) var(--ease-out);
}
.checkbox input[type="checkbox"]:checked {
    border-color: var(--c-champagne);
    background: var(--c-champagne);
}
.checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px 4px;
    border-right: 2px solid var(--c-black);
    border-bottom: 2px solid var(--c-black);
    transform: rotate(40deg) translate(-1px, -2px);
}
.checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--c-champagne);
    outline-offset: 2px;
}
.checkbox:has(input:checked) {
    border-color: var(--c-champagne);
    background: rgba(201, 168, 118, 0.06);
}
.checkbox__label {
    font-size: var(--t-sm);
    color: var(--fg);
    letter-spacing: var(--tracking-wide);
}

/* ---------- THANKS PAGE ---------- */
.section.thanks {
    min-height: 70vh;
    display: grid;
    place-items: center;
}

.thanks__seal {
    color: var(--c-champagne);
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-champagne);
    border-radius: 50%;
    margin-bottom: var(--s-3);
    box-shadow: 0 0 32px var(--c-champagne-glow);
}

.thanks__title {
    font-family: var(--font-display);
    font-size: var(--t-3xl);
    line-height: 1;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin: var(--s-3) 0 0;
}

.thanks__cta {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--s-6);
}

/* ---------- CONTACT STANDALONE PAGE ---------- */
.contact--standalone {
    padding-top: calc(var(--s-10) + var(--s-6)); /* room for fixed navbar */
}
@media (max-width: 720px) {
    .contact--standalone { padding-top: calc(var(--s-9) + var(--s-5)); }
}

/* ====================================================================
   PERFORMANCE NO TELEMÓVEL
   Efeitos contínuos (blur enorme animado, backdrop-filter) são pesados
   no GPU de telemóveis e causam jank/sensação de lentidão. Aliviamos em
   ecrãs pequenos sem mudar o aspeto no desktop.
   ==================================================================== */
@media (max-width: 880px) {
    /* O brilho dourado do hero deixa de animar e usa menos blur. */
    .hero::before { animation: none; filter: blur(28px); }
    /* Grelha decorativa do hero — pintura desnecessária no telemóvel. */
    .hero::after { display: none; }
    /* backdrop-filter no scroll é caro a cada frame; fundo sólido chega. */
    .navbar.is-scrolled {
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* Menu mobile aberto: fundo quase opaco em vez de blur ao vivo. */
    .nav {
        background: rgba(10, 10, 10, 0.985);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Respeita quem pede menos movimento (acessibilidade + bateria). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}