/* =========================================================
   VETTURE — Homepage stylesheet
   Single-file, no framework. Mobile-first.
   ========================================================= */

/* ---------- Reset (modern, minimal) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- Tokens ---------- */
:root {
    /* color */
    --c-primary: #0024f6;
    --c-primary-hover: #405FF2;
    --c-ink: #050B20;
    --c-ink-muted: rgba(5, 11, 32, .58);
    --c-ink-soft: rgba(5, 11, 32, .12);
    --c-dark: #111835;
    --c-bg: #ffffff;
    --c-bg-soft: #f6f7f9;
    --c-bg-warm: #fbf7ef;
    --c-bg-yellow: #ffee02;
    --c-bg-yellow-soft: #fff7b0;
    --c-border: #e7e9ee;

    /* pills */
    --pill-antigo-bg: #ffee02;
    --pill-antigo-fg: #0a0a0a;
    --pill-moderno-bg: #111835;
    --pill-moderno-fg: #ffffff;
    --pill-neo-bg: #3d923a;
    --pill-neo-fg: #ffffff;
    --pill-preparado-bg: #0024f5;
    --pill-preparado-fg: #ffffff;

    /* spacing */
    --gutter: clamp(1rem, 2vw + 0.5rem, 2rem);
    --section-y: clamp(3.5rem, 6vw + 1rem, 6rem);

    /* type */
    --font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --fs-base: 15px;

    /* radius / shadow */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --shadow-card: 0 12px 30px -18px rgba(5, 11, 32, .25);
    --shadow-card-hover: 0 20px 40px -16px rgba(5, 11, 32, .28);

    /* header */
    --header-h: 85px;
}

/* ---------- Base ---------- */
html { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--c-ink); background: var(--c-bg); }
body { line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; color: var(--c-ink); line-height: 1.15; letter-spacing: -.01em; }

/* ---------- A11y ---------- */
.skip-link {
    position: absolute; left: 1rem; top: 1rem;
    background: var(--c-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm);
    transform: translateY(-200%); transition: transform .2s;
    z-index: 999;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Layout primitives ---------- */
.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--warm { background: var(--c-bg-warm); }
.section--soft { background: var(--c-bg-soft); }
@media (min-width: 1280px) {
    .section--wide > .container { max-width: 1480px; }
}
@media (min-width: 1600px) {
    .section--wide > .container { max-width: 1680px; }
}
.section--yellow { background: var(--c-bg-yellow); }
.section--cta-band { padding-bottom: var(--section-y); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 18px 25px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    transition: background .18s, color .18s, transform .18s;
    white-space: nowrap;
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-hover); }
.btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); }
.btn--ghost:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

/* ---------- Section heading ---------- */
.section-head { margin-bottom: 2rem; }
.section-foot {
    margin-top: 2.75rem;
    display: flex; flex-direction: column; align-items: center; gap: 1.05rem;
}
.section-foot__cta {
    padding: 20px 38px;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .005em;
    gap: .7rem;
    box-shadow: 0 8px 20px rgba(0, 36, 246, .24), 0 2px 5px rgba(0, 36, 246, .14);
    transition: transform .2s ease, box-shadow .2s ease, background .18s ease;
}
.section-foot__cta svg { width: 18px; height: 18px; transition: transform .2s ease; }
.section-foot__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 36, 246, .3), 0 3px 7px rgba(0, 36, 246, .18);
}
.section-foot__cta:hover svg { transform: translateX(3px); }
.section-foot__hint {
    margin: 0;
    color: var(--c-ink-muted);
    font-size: 1.02rem;
}
.section-foot__hint strong { color: var(--c-ink); font-weight: 700; }
.section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.section-head__title {
    /* font-size is fluid via clamp() at the end of the file */
    font-weight: 700;
    line-height: 1.4em;
    color: var(--c-ink);
}
.section-head__lede { color: var(--c-ink-muted); margin-top: .35rem; font-size: 15px; line-height: 1.5em; }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-primary);
}
.link-arrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 600; color: var(--c-ink);
    border-bottom: 1.5px solid transparent;
    padding-bottom: 2px;
    transition: color .18s, border-color .18s;
}
.link-arrow:hover { color: var(--c-primary); border-color: var(--c-primary); }
.link-arrow svg { transition: transform .18s; }
.link-arrow:hover svg { transform: translate(2px, -2px); }

/* =========================================================
   HEADER  — transparent over hero, white pill when scrolled
   ========================================================= */
.site-header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 90;
    background: transparent;
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    border-bottom: 1px solid transparent;
}
.site-header[data-transparent="false"] {
    background: #fff;
    border-bottom-color: var(--c-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
/* Logo swap — dark logo is sticky-state only */
.logo--dark  { display: none !important; }
.logo--light { display: block; }
.site-header[data-transparent="false"] .logo--light { display: none !important; }
.site-header[data-transparent="false"] .logo--dark  { display: block !important; }
/* Nav + toggle invert */
.site-header[data-transparent="false"] .primary-nav__list a { color: var(--c-ink); }
.site-header[data-transparent="false"] .primary-nav__list a:hover { color: var(--c-primary); }
.site-header[data-transparent="false"] .nav-toggle span { background: var(--c-ink); }
/* CTA inverts to brand blue */
.site-header[data-transparent="false"] .header-cta {
    background: var(--c-primary);
    color: #fff;
}
.site-header[data-transparent="false"] .header-cta:hover {
    background: var(--c-primary-hover);
}
/* Shrink slightly when sticky */
.site-header[data-transparent="false"] .site-header__inner {
    padding-top: 20px;
    padding-bottom: 20px;
}
.site-header[data-transparent="false"] .site-header__logo {
    margin-bottom: 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    padding: 42px 64px 10px;
    width: 100%;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: auto;
    min-width: 120px;
    margin-bottom: -9px;
}
.logo { height: 36px; width: auto; display: block; }

.site-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    flex: 1;
}

.primary-nav__list { display: flex; gap: 1.875rem; align-items: center; }
.primary-nav__list a {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    transition: color .15s;
    position: relative;
    padding: .25rem 0;
}
.primary-nav__list a:hover { color: var(--c-primary-hover); }
.primary-nav__list a.is-current::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 1.5px; background: currentColor; border-radius: 2px;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px 16px 29px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    background: #fff;
    color: #050B20;
    transition: background .18s, color .18s;
    white-space: nowrap;
}
.header-cta:hover { background: #173BE7; color: #fff; }

/* Mobile menu trigger */
.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    background: transparent; border: 0; padding: 0;
}
.nav-toggle span {
    display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform .25s, opacity .15s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    padding: 1rem var(--gutter) 1.5rem;
}
.mobile-menu ul { display: flex; flex-direction: column; gap: 0; }
.mobile-menu li a {
    display: block;
    padding: .85rem 0;
    border-bottom: 1px solid var(--c-border);
    font-weight: 500;
    color: var(--c-ink);
}
.mobile-menu li:last-child a { border-bottom: 0; padding-top: 1rem; }
.mobile-menu li a.btn { justify-content: center; padding-block: .85rem; color: #fff; }

/* CTA "Quero anunciar" dentro do menu hamburguer */
.mobile-menu .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: .75rem;
    padding: 14px 24px;
    border-radius: 999px;
    background: var(--c-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border-bottom: 0;
    box-shadow: 0 12px 24px -10px rgba(0, 36, 246, .45);
    transition: background .18s, transform .18s, box-shadow .18s;
}
.mobile-menu .header-cta:hover {
    background: var(--c-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -10px rgba(0, 36, 246, .55);
}
.mobile-menu .header-cta:active { transform: translateY(0); }

/* =========================================================
   HERO — full-bleed photo, centered content
   ========================================================= */
.hero {
    position: relative;
    min-height: 100svh;
    color: #fff;
    padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3rem));
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
    overflow: hidden;
    display: flex;
    align-items: center;
    text-align: center;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background: url("/assets/img/hero/hero-bg.jpg") center / cover no-repeat;
}
.hero::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: rgba(0, 0, 0, .18);
    pointer-events: none;
}
.hero::before { filter: brightness(1.06) saturate(1.05) contrast(1.03); }
.hero__inner {
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
    margin-top: -2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero__eyebrow {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.4em;
}
.hero__title {
    /* font-size is fluid via clamp() at the end of the file */
    font-weight: 800;
    color: #fff;
    line-height: 1.1em;
    letter-spacing: -.01em;
    margin-bottom: 2.5rem;
    max-width: none;
    text-align: center;
}

/* Hero search — single pill */
.hero-search {
    background: #fff;
    border-radius: 999px;
    padding: .4rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: stretch;
    width: 100%;
    max-width: 1040px;
    box-shadow: 0 24px 60px -22px rgba(0, 0, 0, .55);
}
.hero-search__field {
    display: flex; flex-direction: column;
    justify-content: center;
    padding: .9rem 1.4rem;
    min-width: 0;
    text-align: left;
}
.hero-search__field + .hero-search__field {
    border-left: 1px solid var(--c-border);
}
/* Combo "select" — variante que usa um span como display em vez de um input */
.combo--select .combo__trigger { cursor: pointer; }
.combo__input--display {
    display: block;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-search__submit {
    justify-content: center;
    padding: 1.15rem 2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    gap: .55rem;
    white-space: nowrap;
}

/* Custom combobox — typeahead */
.combo { position: relative; }
.combo__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    cursor: text;
}
.combo__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--c-ink);
    font-size: clamp(.9rem, 1vw + .75rem, 1.0625rem);
    font-weight: 600;
    padding: 0;
    outline: none;
    cursor: text;
}
.combo__input::placeholder {
    color: var(--c-ink);
    font-weight: 600;
    opacity: 1;
}
.combo__input:disabled {
    color: var(--c-ink-muted);
    cursor: not-allowed;
}
.combo__input:disabled::placeholder { color: var(--c-ink-muted); }
.combo__caret {
    flex-shrink: 0;
    color: var(--c-ink);
    transition: transform .2s;
    cursor: pointer;
}
.combo__trigger[aria-expanded="true"] .combo__caret { transform: rotate(180deg); }

.combo__panel {
    position: absolute;
    top: calc(100% + 18px);
    left: 0;
    min-width: 100%;
    max-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    padding: 14px 0;
    box-shadow: 0 24px 60px -22px rgba(5, 11, 32, .35), 0 4px 12px -4px rgba(5, 11, 32, .12);
    z-index: 5;
    display: block;
}
.combo__panel[hidden] { display: none; }
/* Floating panel: positioned via JS as `position: fixed` so it can
   render above any other element on the page, escaping ancestor
   stacking contexts and overflow clipping. */
.combo__panel--floating {
    position: fixed !important;
    top: auto;
    left: auto;
    /* Cancel the base 100% min/max-width — now that the panel lives in
       <body>, "100%" would mean the full body width and the panel would
       stretch to the right edge of the page. The inline `width` set by
       JS must win. */
    min-width: 0 !important;
    max-width: none !important;
    z-index: 2147483000;
    max-height: min(60vh, 360px);
}
.combo__panel li {
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 400;
    color: var(--c-ink);
    cursor: pointer;
    line-height: 1.4;
    transition: color .12s, background .12s;
}
.combo__panel li:hover,
.combo__panel li[aria-selected="true"] {
    color: var(--c-primary);
    background: rgba(0, 36, 246, .04);
}
.combo__panel li.is-placeholder { color: var(--c-ink-muted); }
.combo__panel li.is-no-result { color: var(--c-ink-muted); font-style: italic; cursor: default; }
.combo__panel li:focus { outline: none; color: var(--c-primary); background: rgba(0,36,246,.04); }
.combo__panel::-webkit-scrollbar { width: 6px; }
.combo__panel::-webkit-scrollbar-thumb { background: var(--c-ink-soft); border-radius: 3px; }

/* Hero browse strip — dark translucent pills */
.hero__browse-label {
    margin-top: 2.5rem;
    margin-bottom: 1.1rem;
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
}
.body-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}
.body-strip a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(5, 11, 32, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    padding: .8rem 1.35rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 500;
    transition: background .18s, border-color .18s, transform .18s;
}
.body-strip a:hover {
    background: rgba(0, 36, 246, .65);
    border-color: rgba(255, 255, 255, .25);
}
.body-strip svg { width: 26px; height: 16px; color: #fff; }

/* =========================================================
   CAR CARD GRID
   ========================================================= */
.car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.car-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.car-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
}
.car-card__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.car-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.car-card:hover .car-card__media img { transform: scale(1.04); }
.car-card__pill {
    position: absolute;
    top: .85rem; left: .85rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    z-index: 1;
}
.car-card__pill--antigo { background: var(--pill-antigo-bg); color: var(--pill-antigo-fg); }
.car-card__pill--moderno { background: var(--pill-moderno-bg); color: var(--pill-moderno-fg); }
.car-card__pill--neo { background: var(--pill-neo-bg); color: var(--pill-neo-fg); }
.car-card__pill--preparado { background: var(--pill-preparado-bg); color: var(--pill-preparado-fg); }

.car-card__body {
    padding: 1.25rem 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .55rem;
}
.car-card__title { font-size: 1.15rem; font-weight: 700; }
.car-card__desc {
    color: var(--c-ink-muted);
    font-size: .88rem;
    line-height: 1.45;
}
.car-card__specs {
    display: flex; flex-wrap: wrap;
    gap: .25rem .9rem;
    color: var(--c-ink-muted);
    font-size: .82rem;
    padding-block: .35rem;
    border-top: 1px solid var(--c-border);
    margin-top: .35rem;
}
.car-card__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.car-card__specs svg { width: 14px; height: 14px; opacity: .6; }
.car-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--c-border);
}
.car-card__price { font-weight: 700; font-size: 1.1rem; color: var(--c-ink); }
.car-card__cta {
    font-weight: 600;
    font-size: .9rem;
    color: var(--c-primary);
    transition: color .15s;
}
.car-card__cta:hover { color: var(--c-primary-hover); }


/* =========================================================
   WHY-US PHOTO MOSAIC — masonry columns
   ========================================================= */
.why-mosaic {
    columns: 4;
    column-gap: .75rem;
}
.why-mosaic img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: .75rem;
    border-radius: var(--r-md);
    break-inside: avoid;
    transition: transform .35s, opacity .3s;
}
.why-mosaic img:hover {
    transform: scale(1.02);
    opacity: .88;
}

/* =========================================================
   MOSAIC TICKER — colunas de 3 fotos em loop horizontal infinito
   ========================================================= */
.section--mosaic-ticker {
    padding-bottom: 2rem;
    overflow: hidden;
}
.mosaic-ticker {
    margin-top: 2.5rem;
    /* padding vertical dá espaço para o scale no hover sem ser cortado */
    padding-block: 14px;
    overflow: hidden;
}
.mosaic-ticker__track {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: max-content;
    will-change: transform;
    /* animação controlada via JS — loop sem "travada" */
}

@media (prefers-reduced-motion: reduce) {
    .mosaic-ticker__track { transform: none !important; }
}

.mosaic-col {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex-shrink: 0;
    width: 240px;
    align-items: stretch;
}
.mosaic-col img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-md);
    object-fit: cover;
    flex-shrink: 0;
    transition: filter .35s ease, transform .35s ease, box-shadow .35s ease;
    box-shadow: 0 4px 14px -8px rgba(5, 11, 32, .25);
    cursor: pointer;
    transform-origin: center;
}
.mosaic-col img:hover {
    filter: brightness(1.12) saturate(1.08);
    transform: scale(1.04);
    box-shadow: 0 10px 28px -8px rgba(5, 11, 32, .45);
}

/* =========================================================
   DUAL CTA BAND
   ========================================================= */
.cta-band {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.cta-card {
    position: relative;
    border-radius: var(--r-xl);
    padding: 2.75rem 2.5rem;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 360px;
    transition: transform .35s ease, box-shadow .35s ease;
    will-change: transform;
}
.cta-card:hover { transform: translateY(-4px); }

/* Decorative glow blob behind content */
.cta-card__decor {
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
    transition: transform .6s ease, opacity .6s ease;
}
.cta-card:hover .cta-card__decor { transform: scale(1.08); opacity: .75; }

/* ---- Light card (Buying) ---- */
.cta-card--buy {
    background:
        radial-gradient(120% 80% at 0% 0%, #ffffff 0%, #f3f5ff 55%, #e6ebff 100%);
    color: var(--c-ink);
    border: 1px solid rgba(0, 36, 246, .08);
    box-shadow: 0 18px 40px -28px rgba(0, 36, 246, .35);
}
.cta-card--buy .cta-card__decor {
    right: -120px;
    top: -120px;
    background: radial-gradient(circle, rgba(0, 36, 246, .35) 0%, transparent 70%);
}
.cta-card--buy:hover { box-shadow: 0 26px 50px -22px rgba(0, 36, 246, .4); }

/* ---- Dark card (Selling) ---- */
.cta-card--sell {
    background:
        radial-gradient(120% 80% at 100% 0%, #1a2350 0%, #111835 55%, #0a0f24 100%);
    color: #fff;
    border: 1px solid rgba(255, 238, 2, .12);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}
.cta-card--sell .cta-card__decor {
    left: -120px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(255, 238, 2, .25) 0%, transparent 70%);
}
.cta-card--sell:hover { box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .6); }

/* ---- Card content ---- */
.cta-card__copy {
    position: relative;
    z-index: 1;
    max-width: 58%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.cta-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.cta-card--buy .cta-card__eyebrow {
    background: rgba(0, 36, 246, .08);
    color: var(--c-primary);
}
.cta-card--sell .cta-card__eyebrow {
    background: rgba(255, 238, 2, .12);
    color: var(--c-bg-yellow);
}
.cta-card h3 {
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: .9rem;
    color: inherit;
    letter-spacing: -.015em;
}
.cta-card h3 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-hover));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cta-card--sell h3 em {
    background: linear-gradient(90deg, var(--c-bg-yellow) 0%, #fff7b0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cta-card p {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1.4rem;
    color: inherit;
    opacity: .82;
    max-width: 38ch;
}
.cta-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.cta-card__features li {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .9rem;
    font-weight: 500;
    opacity: .9;
}
.cta-card__features svg {
    flex-shrink: 0;
    padding: 4px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
}
.cta-card--buy .cta-card__features svg {
    background: rgba(0, 36, 246, .1);
    color: var(--c-primary);
}
.cta-card--sell .cta-card__features svg {
    background: rgba(255, 238, 2, .15);
    color: var(--c-bg-yellow);
}
.cta-card__btn {
    margin-top: auto;
    align-self: flex-start;
}
.cta-card__btn svg { transition: transform .25s ease; }
.cta-card__btn:hover svg { transform: translateX(3px); }

/* Yellow accent button — for the sell card */
.btn--accent {
    background: var(--c-bg-yellow);
    color: var(--c-ink);
    font-weight: 600;
}
.btn--accent:hover {
    background: #fff7b0;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(255, 238, 2, .55);
}

/* Decorative illustration */
.cta-card__img {
    position: absolute;
    right: -1.5rem;
    bottom: -1rem;
    width: 240px;
    max-width: 42%;
    height: auto;
    opacity: .85;
    pointer-events: none;
    transition: transform .5s ease, opacity .5s ease;
    z-index: 0;
}
.cta-card--sell .cta-card__img { filter: brightness(1.1) saturate(.9); opacity: .7; }
.cta-card:hover .cta-card__img { transform: translate(-4px, -4px) rotate(-2deg); opacity: 1; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    background: #0d1120;
    border-top: 2px solid var(--c-primary);
    color: #fff;
    position: relative;
    isolation: isolate;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 50% at 100% 0%, rgba(0, 36, 246, .18) 0%, transparent 60%),
        radial-gradient(40% 40% at 0% 100%, rgba(255, 238, 2, .06) 0%, transparent 60%);
    pointer-events: none;
}

/* --- CTA strip (acima do footer principal) --- */
.site-footer__cta {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-block: clamp(2rem, 3vw + 1rem, 3.5rem);
}
.site-footer__cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.site-footer__cta-copy {
    flex: 1 1 320px;
    min-width: 0;
}
.site-footer__cta-eyebrow {
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .55);
}
.site-footer__cta-title {
    margin: 0;
    font-size: clamp(1.35rem, 1.5vw + .8rem, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: #fff;
}
.site-footer__cta-title em {
    font-style: normal;
    background: linear-gradient(90deg, #fff 0%, var(--c-bg-yellow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site-footer__cta-actions {
    display: flex;
    gap: .75rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.site-footer__cta-actions .btn {
    padding: 14px 22px;
    font-size: .92rem;
}

/* --- Main content area --- */
.site-footer__inner {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    padding-top: clamp(3rem, 5vw, 5rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
}

/* --- Brand block --- */
.site-footer__brand {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.site-footer__brand > a img {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: 1.25rem;
}
.site-footer__brand > p {
    font-size: .875rem;
    line-height: 1.8;
    color: rgba(255,255,255,.55);
    margin-bottom: 2rem;
    max-width: 26ch;
}

/* WhatsApp button */
.site-footer__wa-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.25rem;
    background: #1db954;
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    margin-bottom: 2rem;
    transition: background .18s, transform .18s;
}
.site-footer__wa-btn:hover {
    background: #17a349;
    transform: translateY(-1px);
}
.site-footer__wa-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Social icons */
.site-footer__social {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.site-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.5);
    transition: border-color .18s, color .18s, background .18s;
}
.site-footer__social a:hover {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: #fff;
}
.site-footer__social svg { width: 16px; height: 16px; }

/* --- Nav columns --- */
.site-footer__cols {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
    padding-top: .1rem;
}
.site-footer__col h4 {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 1.5rem;
    line-height: 1;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.site-footer__col ul li a {
    font-size: .9rem;
    color: rgba(255,255,255,.68);
    font-weight: 500;
    transition: color .15s, padding-left .15s;
    line-height: 1;
    display: block;
    padding-left: 0;
}
.site-footer__col ul li a:hover {
    color: #fff;
    padding-left: .4rem;
}

/* Contact column — label + value stacked, no padding-left shift */
.site-footer__col--contact ul { gap: 1.1rem; }
.site-footer__col--contact ul li {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    line-height: 1.5;
}
.site-footer__col--contact ul li a,
.site-footer__col--contact ul li span:not(.site-footer__contact-label) {
    font-size: .9rem;
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    display: inline;
    padding-left: 0;
    line-height: 1.5;
}
.site-footer__col--contact ul li a:hover { color: #fff; padding-left: 0; }
.site-footer__contact-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

/* WhatsApp button dentro da coluna Atendimento */
.site-footer__col--contact .site-footer__wa-btn {
    margin-top: 1.25rem;
    margin-bottom: 0;
    align-self: flex-start;
}

/* --- Bottom bar --- */
.site-footer__bar {
    border-top: 1px solid rgba(255,255,255,.07);
}
.site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1.25rem;
    font-size: .8rem;
    color: rgba(255,255,255,.38);
}
.site-footer__tech { display: inline-flex; align-items: center; gap: .3rem; }
.site-footer__tech a {
    color: rgba(255,255,255,.65);
    font-weight: 600;
    transition: color .15s;
}
.site-footer__tech a:hover { color: #fff; }

/* =========================================================
   ANÚNCIE PAGE — page head, steps, form card
   ========================================================= */

/* ---- Page head (dark / brand hero) ---- */
.page-head {
    position: relative;
    padding: calc(var(--header-h) + 4rem) 0 4.5rem;
    background: linear-gradient(180deg, #050B20 0%, #0a1338 60%, #0c1640 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, var(--c-primary) 30%, var(--c-primary-hover) 50%, var(--c-bg-yellow) 80%, transparent 100%) 1;
}
/* Drifting glow orbs — slow, organic */
.page-head::before {
    content: '';
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(circle at 18% 28%, rgba(64, 95, 242, .55) 0%, transparent 40%),
        radial-gradient(circle at 80% 72%, rgba(0, 36, 246, .5) 0%, transparent 42%),
        radial-gradient(circle at 65% 18%, rgba(255, 238, 2, .14) 0%, transparent 24%);
    filter: blur(28px);
    animation: ph-orbs 38s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}
/* Tech grid lines that slowly drift — softly masked toward edges */
.page-head::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,  rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 64px 64px;
    mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 0%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 0%, transparent 85%);
    animation: ph-grid 60s linear infinite;
    z-index: -1;
    pointer-events: none;
}
@keyframes ph-orbs {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(3%, -2%, 0) scale(1.08); }
}
@keyframes ph-grid {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 64px 64px, 64px 64px; }
}
/* FX layer: floating particles, light sweep, large floating shapes */
.page-head__fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.ph-particle {
    position: absolute;
    bottom: -20px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(140,175,255,.55) 38%, transparent 72%);
    box-shadow: 0 0 8px rgba(160, 190, 255, .55), 0 0 18px rgba(80, 120, 240, .35);
    opacity: 0;
    will-change: transform, opacity;
    animation-name: ph-float;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--dur, 20s);
    animation-delay: var(--d, 0s);
}
.ph-particle--1  { left:  8%; --d:  0s;   --dur: 34s; --x:  8px;  width: 4px; height: 4px; }
.ph-particle--2  { left: 20%; --d: -6s;   --dur: 40s; --x: -10px; }
.ph-particle--3  { left: 32%; --d: -12s;  --dur: 32s; --x:  6px;  width: 6px; height: 6px; }
.ph-particle--4  { left: 44%; --d: -3s;   --dur: 44s; --x: -12px; }
.ph-particle--5  { left: 56%; --d: -16s;  --dur: 36s; --x:  10px; width: 5px; height: 5px; }
.ph-particle--6  { left: 68%; --d: -22s;  --dur: 42s; --x: -8px; }
.ph-particle--7  { left: 80%; --d: -8s;   --dur: 38s; --x:  10px; width: 4px; height: 4px; }
.ph-particle--8  { left: 92%; --d: -19s;  --dur: 46s; --x: -6px;  width: 5px; height: 5px; }
.ph-particle--3, .ph-particle--7 {
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,238,2,.45) 35%, transparent 72%);
    box-shadow: 0 0 8px rgba(255,238,2,.35), 0 0 18px rgba(255,210,40,.18);
}
@keyframes ph-float {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate3d(var(--x, 0), calc(-1 * 100% - 60px), 0); opacity: 0; }
}
/* Aurora — drifting gradient. Two long animations (transform + hue) with different periods
   never realign, so the visible pattern keeps changing organically. */
.ph-aurora {
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(ellipse 42% 36% at 22% 28%, rgba(64, 95, 242, .55) 0%, transparent 60%),
        radial-gradient(ellipse 52% 46% at 78% 68%, rgba(0, 36, 246, .50) 0%, transparent 60%),
        radial-gradient(ellipse 36% 32% at 62% 22%, rgba(140, 90, 230, .35) 0%, transparent 58%),
        radial-gradient(ellipse 28% 28% at 32% 82%, rgba(255, 230, 100, .18) 0%, transparent 55%);
    will-change: transform, filter;
    animation:
        ph-aurora-drift var(--drift-dur, 30s) ease-in-out infinite alternate,
        ph-aurora-hue   var(--hue-dur, 22s)   ease-in-out infinite alternate;
    animation-delay: var(--drift-delay, 0s), var(--hue-delay, 0s);
}
@keyframes ph-aurora-drift {
    0%   { transform: translate3d(-18%, -12%, 0) scale(1.00) rotate(-6deg); }
    25%  { transform: translate3d( 10%, -10%, 0) scale(1.14) rotate( 3deg); }
    50%  { transform: translate3d( 18%,   8%, 0) scale(1.22) rotate(-3deg); }
    75%  { transform: translate3d( -8%,  14%, 0) scale(1.08) rotate( 7deg); }
    100% { transform: translate3d(-16%,   4%, 0) scale(1.18) rotate(-7deg); }
}
@keyframes ph-aurora-hue {
    0%   { filter: hue-rotate(-30deg) blur(32px); }
    50%  { filter: hue-rotate( 15deg) blur(36px); }
    100% { filter: hue-rotate( 35deg) blur(28px); }
}
/* Large soft floating shapes — slow parallax shadows */
.ph-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .55;
    will-change: transform;
}
.ph-shape--1 {
    width: 360px; height: 360px;
    left: -80px; top: -60px;
    background: radial-gradient(circle, rgba(64, 95, 242, .55) 0%, transparent 65%);
    animation: ph-shape-a 48s ease-in-out infinite alternate;
}
.ph-shape--2 {
    width: 460px; height: 460px;
    right: -120px; bottom: -120px;
    background: radial-gradient(circle, rgba(0, 36, 246, .45) 0%, transparent 65%);
    animation: ph-shape-b 56s ease-in-out infinite alternate;
}
@keyframes ph-shape-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(60px, 40px, 0) scale(1.12); }
}
@keyframes ph-shape-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-50px, -30px, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .page-head::before,
    .page-head::after,
    .ph-particle,
    .ph-aurora,
    .ph-shape { animation: none; }
}
.page-head__inner {
    position: relative;
    z-index: 1;
}
.page-head__copy { max-width: 760px; }
.page-head .breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 1.25rem;
}
.page-head .breadcrumb a {
    color: rgba(255, 255, 255, .65);
    font-weight: 500;
    transition: color .15s;
}
.page-head .breadcrumb a:hover { color: var(--c-bg-yellow); }
.page-head .breadcrumb span[aria-current] {
    color: #fff;
    font-weight: 600;
}
.page-head .breadcrumb svg { color: rgba(255, 255, 255, .35); }

.page-head .eyebrow--chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 1.25rem;
}
.page-head .eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-bg-yellow);
    box-shadow: 0 0 0 4px rgba(255, 238, 2, .2);
    animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 36, 246, .15); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 36, 246, .05); }
}
@keyframes dotPulseYellow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 238, 2, .22); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 238, 2, .06); }
}
.page-head .eyebrow__dot { animation-name: dotPulseYellow; }

.page-head__title {
    font-size: clamp(1.875rem, 3vw + 1rem, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 1rem;
}
.page-head__title em {
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, var(--c-bg-yellow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-head__lede {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .72);
    max-width: 60ch;
    margin-bottom: 1.75rem;
}

.page-head__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-head__chips li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.page-head__chips li:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 238, 2, .35);
}
.page-head__chips svg {
    color: var(--c-bg-yellow);
    flex-shrink: 0;
}

/* ---- 404 page ---- */
.page-head--404 {
    padding: calc(var(--header-h) + 3rem) 0 5rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.page-head__copy--center {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page-head__copy--center .page-head__title { text-wrap: balance; }
.page-head__copy--center .page-head__lede   { margin-left: auto; margin-right: auto; }

.error-404__number {
    font-family: var(--boxcar-heading-font, 'DM Sans'), system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(7rem, 18vw, 14rem);
    line-height: 1;
    letter-spacing: -.06em;
    margin: 1rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: clamp(.2rem, 1vw, .6rem);
    background: linear-gradient(180deg, #ffffff 0%, rgba(160, 195, 255, .85) 60%, rgba(120, 160, 240, .45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .12);
    filter: drop-shadow(0 18px 40px rgba(64, 95, 242, .35));
}
.error-404__zero {
    display: inline-block;
    animation: err-zero-tilt 6s ease-in-out infinite alternate;
    transform-origin: 50% 55%;
    color: var(--c-bg-yellow);
    background: none;
    -webkit-text-fill-color: var(--c-bg-yellow);
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 14px 30px rgba(255, 238, 2, .35));
}
@keyframes err-zero-tilt {
    0%   { transform: rotate(-6deg) translateY(0); }
    50%  { transform: rotate(0deg)  translateY(-6px); }
    100% { transform: rotate(6deg)  translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .error-404__zero { animation: none; transform: rotate(0deg); }
}

.error-404__actions {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .25rem;
}
.error-404__universos {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.error-404__universos-label {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.error-404__universos-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}
.error-404__universos-list a {
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.error-404__universos-list a:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 238, 2, .45);
    color: #fff;
    transform: translateY(-2px);
}
@media (max-width: 600px) {
    .page-head--404 { min-height: auto; padding: calc(var(--header-h) + 2rem) 0 3.5rem; }
    .error-404__actions .btn { width: 100%; justify-content: center; }
}

/* ---- Anúncie layout ---- */
.anuncie-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}

/* ---- Steps column ---- */
.anuncie-steps .eyebrow { display: block; margin-bottom: .75rem; }
.anuncie-steps__title {
    font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--c-ink);
    margin-bottom: 2rem;
}
.anuncie-steps__title em {
    font-style: normal;
    color: var(--c-primary);
}

.step-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.step-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
}
.step-list li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: -1.5rem;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0, 36, 246, .25), transparent);
}
.step-num {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--c-ink);
    border: 1.5px solid var(--c-border);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .02em;
    box-shadow: 0 6px 18px -10px rgba(5, 11, 32, .25);
    position: relative;
    z-index: 1;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.step-list li:hover .step-num {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    transform: scale(1.05);
    box-shadow: 0 10px 22px -8px rgba(0, 36, 246, .55);
}
.step-list li:first-child .step-num {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    box-shadow: 0 6px 18px -8px rgba(0, 36, 246, .55);
}
.step-body b {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-ink);
    margin-bottom: .35rem;
    line-height: 1.3;
}
.step-body p {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--c-ink-muted);
    margin: 0;
}

.anuncie-callout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--c-bg-yellow-soft);
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 238, 2, .55);
}
.anuncie-callout svg {
    flex-shrink: 0;
    color: var(--c-ink);
    margin-top: 2px;
}
.anuncie-callout b {
    display: block;
    font-weight: 700;
    color: var(--c-ink);
    margin-bottom: .25rem;
}
.anuncie-callout p {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--c-ink-muted);
    margin: 0;
}

/* ---- Form card ---- */
.form-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 2.5rem;
    box-shadow: 0 30px 60px -30px rgba(5, 11, 32, .28);
    position: relative;
    overflow: hidden;
}
.form-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(140% 60% at 50% 0%, rgba(0, 36, 246, .04) 0%, transparent 70%);
    pointer-events: none;
    border-radius: inherit;
}
.form-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-hover) 50%, var(--c-bg-yellow) 100%);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    opacity: .85;
}
.form-card > * { position: relative; }
.form-card .eyebrow { display: block; margin-bottom: .5rem; }
.form-card__title {
    font-size: clamp(1.375rem, 1vw + .9rem, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--c-ink);
    margin-bottom: .5rem;
}
.form-card__lede {
    color: var(--c-ink-muted);
    font-size: .95rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

/* ---- Form grid ---- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}
.form-section-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .75rem 0 .25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-border);
}
.form-section-head:first-of-type { padding-top: 0; border-top: 0; margin-top: 0; }
.form-section-head__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(0, 36, 246, .1);
    color: var(--c-primary);
    font-size: .7rem;
    font-weight: 700;
}
.form-section-head h3 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-ink);
    margin: 0;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}
.form-field--span-2 { grid-column: 1 / -1; }
.form-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: .01em;
}
.form-field__hint {
    font-weight: 400;
    color: var(--c-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: .3rem;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: .85rem 1rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    background: #fff;
    color: var(--c-ink);
    font-size: .95rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .18s, box-shadow .18s, background .18s;
    outline: none;
}
.form-field textarea { resize: vertical; min-height: 100px; line-height: 1.55; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(5, 11, 32, .35); }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: rgba(5, 11, 32, .22); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(0, 36, 246, .12);
}
.form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23050B20' stroke-width='1.6' stroke-linecap='round' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* ---- Field error state ---- */
.form-field.is-invalid label { color: #b00020; }
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
    border-color: #d63b3b;
    background: #fff7f7;
}
.form-field.is-invalid input:focus,
.form-field.is-invalid select:focus,
.form-field.is-invalid textarea:focus {
    box-shadow: 0 0 0 4px rgba(214, 59, 59, .14);
}

/* ---- Consent box ---- */
.consent-box {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    cursor: pointer;
    padding: 1rem 1.1rem;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color .18s, background .18s;
}
.consent-box:hover { border-color: rgba(0, 36, 246, .25); }
.consent-box input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.consent-mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #fff;
    border: 1.5px solid var(--c-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .15s, border-color .15s, transform .15s;
    margin-top: 1px;
}
.consent-mark svg {
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .15s;
}
.consent-box input:checked + .consent-mark {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.consent-box input:checked + .consent-mark svg {
    opacity: 1;
    transform: scale(1);
}
.consent-box input:focus-visible + .consent-mark {
    box-shadow: 0 0 0 4px rgba(0, 36, 246, .18);
}
.consent-text {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--c-ink-muted);
}
.consent-text strong { color: var(--c-ink); font-weight: 600; }
.consent-field.is-invalid .consent-box {
    border-color: #d63b3b;
    background: #fff7f7;
}

/* ---- Submit ---- */
.form-submit {
    width: 100%;
    justify-content: center;
    padding: 1.15rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
    color: #fff;
    box-shadow: 0 14px 30px -12px rgba(0, 36, 246, .5);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.form-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #25D366 0%, #1da851 100%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: -1;
}
.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -10px rgba(37, 211, 102, .55);
}
.form-submit:hover::before { opacity: 1; }
.form-submit svg { transition: transform .25s ease; }
.form-submit:hover svg { transform: scale(1.1) rotate(-3deg); }

.form-submit__hint {
    text-align: center;
    font-size: .82rem;
    color: var(--c-ink-muted);
    margin-top: 1rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.form-submit__hint::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .15);
    animation: dotPulse 2.4s ease-in-out infinite;
}

/* =========================================================
   SOBRE / ABOUT PAGE
   ========================================================= */

/* eyebrow variant que vive sobre fundo escuro */
.eyebrow--on-dark {
    color: rgba(255, 255, 255, .72);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .78rem;
}

/* ---------- Manifesto ---------- */
.about-manifesto__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}
.about-manifesto__copy .eyebrow { margin-bottom: 1rem; }
.about-manifesto__title {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 1.75rem;
}
.about-manifesto__title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-hover));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.about-manifesto__prose p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--c-ink-muted);
    margin-bottom: 1rem;
}
.about-manifesto__prose p:last-child { margin-bottom: 0; }
.about-manifesto__prose strong { color: var(--c-ink); font-weight: 600; }

.about-manifesto__quote {
    position: relative;
    background: linear-gradient(165deg, #050B20 0%, #111835 100%);
    color: #fff;
    border-radius: var(--r-xl);
    padding: 2.25rem 2rem 2rem;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 24px 50px -22px rgba(5, 11, 32, .35);
}
.about-manifesto__quote-decor {
    position: absolute;
    z-index: -1;
    inset: -40% -40% auto auto;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 36, 246, .55) 0%, transparent 70%);
    filter: blur(30px);
}
.about-manifesto__quote-icon {
    color: var(--c-bg-yellow);
    opacity: .85;
    margin-bottom: .75rem;
}
.about-manifesto__quote p {
    font-size: 1.15rem;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 1.25rem;
}
.about-manifesto__quote cite {
    font-style: normal;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------- O que fazemos ---------- */
.about-do__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.about-do__card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 2rem 1.75rem 1.75rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.about-do__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -22px rgba(5, 11, 32, .22);
    border-color: rgba(0, 36, 246, .25);
}
.about-do__num {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--c-ink-soft);
    letter-spacing: -.04em;
}
.about-do__icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(0, 36, 246, .08);
    color: var(--c-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: background .25s, color .25s;
}
.about-do__card:hover .about-do__icon {
    background: var(--c-primary);
    color: #fff;
}
.about-do__card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .55rem;
    letter-spacing: -.01em;
}
.about-do__card p {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--c-ink-muted);
}

/* ---------- Pilares ---------- */
.about-pillars__head { max-width: 720px; }
.about-pillars__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.about-pillars__list li {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem 1.5rem;
    background: #fff;
    border-left: 3px solid var(--c-primary);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease;
}
.about-pillars__list li:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}
.about-pillars__list li:nth-child(2) { border-left-color: var(--c-bg-yellow); }
.about-pillars__list li:nth-child(3) { border-left-color: #3d923a; }
.about-pillars__list li:nth-child(4) { border-left-color: var(--c-ink); }

.about-pillars__num {
    display: inline-flex;
    margin-bottom: .85rem;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .14em;
    color: var(--c-ink-muted);
}
.about-pillars__num span::before { content: ''; display: inline-block; width: 18px; height: 1px; background: currentColor; margin-right: .6rem; vertical-align: middle; opacity: .6; }
.about-pillars__list h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}
.about-pillars__list p {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--c-ink-muted);
}
.about-pillars__list p strong { color: var(--c-ink); font-weight: 600; }

/* ---------- Universo (4 tiles) ---------- */
.about-universe__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.universe-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 2rem 1.75rem 4rem;
    border-radius: var(--r-xl);
    background: #fff;
    border: 1px solid var(--c-border);
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.universe-tile::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -25%;
    bottom: -55%;
    width: 320px; height: 320px;
    border-radius: 50%;
    opacity: .12;
    filter: blur(8px);
    transition: transform .35s ease, opacity .35s ease;
}
.universe-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -22px rgba(5, 11, 32, .25);
}
.universe-tile:hover::after { transform: scale(1.1); opacity: .2; }
.universe-tile__pill {
    align-self: flex-start;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.universe-tile h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.universe-tile p {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--c-ink-muted);
}
.universe-tile__arrow {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--c-bg-soft);
    color: var(--c-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s, transform .25s;
}
.universe-tile:hover .universe-tile__arrow {
    background: var(--c-primary);
    color: #fff;
    transform: translateX(4px);
}

/* Cor por categoria — pill + glow */
.universe-tile--antigo .universe-tile__pill { background: var(--pill-antigo-bg); color: var(--pill-antigo-fg); }
.universe-tile--antigo::after { background: var(--pill-antigo-bg); }

.universe-tile--moderno .universe-tile__pill { background: var(--pill-moderno-bg); color: var(--pill-moderno-fg); }
.universe-tile--moderno::after { background: var(--pill-moderno-bg); }

.universe-tile--neo .universe-tile__pill { background: var(--pill-neo-bg); color: var(--pill-neo-fg); }
.universe-tile--neo::after { background: var(--pill-neo-bg); }

.universe-tile--preparado .universe-tile__pill { background: var(--pill-preparado-bg); color: var(--pill-preparado-fg); }
.universe-tile--preparado::after { background: var(--pill-preparado-bg); }

/* ---------- CTA final ---------- */
.about-cta-band { padding-block: var(--section-y); }
.about-cta__card {
    position: relative;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(64, 95, 242, .4) 0%, transparent 60%),
        radial-gradient(50% 80% at 0% 100%, rgba(255, 238, 2, .14) 0%, transparent 60%),
        linear-gradient(180deg, #050B20 0%, #0a1338 100%);
    color: #fff;
    border-radius: var(--r-xl);
    padding: 2.75rem 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}
.about-cta__decor {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
    opacity: .6;
    pointer-events: none;
}
.about-cta__title {
    font-size: clamp(1.5rem, 2vw + .85rem, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
    margin: .65rem 0 .85rem;
}
.about-cta__title em {
    font-style: normal;
    background: linear-gradient(90deg, #fff 0%, var(--c-bg-yellow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.about-cta__lede {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .75);
    max-width: 56ch;
}
.about-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}
.about-cta__actions .btn { padding: 16px 26px; }

/* =========================================================
   UNIVERSO PAGES — 4 mundos, uma vitrine
   ========================================================= */

/* Per-universe accent (sobre data-universe no body) */
body[data-universe="antigo"]     { --universe-accent: #ffee02; --universe-ink: #050B20; }
body[data-universe="moderno"]    { --universe-accent: #c8d3ff; --universe-ink: #fff; }
body[data-universe="neo"]        { --universe-accent: #6bd167; --universe-ink: #fff; }
body[data-universe="preparado"]  { --universe-accent: #6b8eff; --universe-ink: #fff; }

/* ---------- Hero fullbleed ---------- */
.universe-hero {
    position: relative;
    min-height: 92svh;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--header-h) + 3rem) 0 4.5rem;
    overflow: hidden;
    isolation: isolate;
}
.universe-hero__bg {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: transform 8s ease;
}
.universe-hero.is-visible .universe-hero__bg { transform: scale(1); }
.universe-hero__overlay {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(5,11,32,.55) 0%, rgba(5,11,32,0) 30%, rgba(5,11,32,.8) 95%);
}
.universe-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.universe-hero__inner > * { max-width: 820px; }

.universe-hero__breadcrumb {
    display: flex; gap: .5rem; align-items: center;
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    margin-bottom: 1.5rem;
}
.universe-hero__breadcrumb a {
    color: rgba(255,255,255,.7);
    transition: color .15s;
}
.universe-hero__breadcrumb a:hover { color: var(--universe-accent, #fff); }
.universe-hero__breadcrumb [aria-current] { color: #fff; font-weight: 600; }
.universe-hero__breadcrumb svg { color: rgba(255,255,255,.35); }

.universe-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .78rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.75rem;
}
.universe-hero__eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--universe-accent, #fff);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--universe-accent, #fff) 22%, transparent);
    animation: dotPulseUniverse 2.4s ease-in-out infinite;
}
@keyframes dotPulseUniverse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

.universe-hero__title {
    font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: #fff;
    margin-bottom: 1.5rem;
}
.universe-hero__title em {
    font-style: normal;
    background: linear-gradient(90deg, #fff 0%, var(--universe-accent, #fff) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.universe-hero__lede {
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgba(255,255,255,.82);
    max-width: 60ch;
}

.universe-hero__credit {
    position: absolute;
    bottom: 1.2rem; right: var(--gutter);
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .02em;
}
.universe-hero__credit a {
    color: rgba(255,255,255,.7);
    border-bottom: 1px solid rgba(255,255,255,.2);
    transition: color .15s, border-color .15s;
}
.universe-hero__credit a:hover { color: var(--universe-accent, #fff); border-color: var(--universe-accent, #fff); }

/* ---------- Identity (3 traits) ---------- */
.universe-identity { padding-block: var(--section-y); }
.universe-section-head { max-width: 720px; margin-bottom: 2.25rem; }
.universe-section-head .eyebrow {
    color: var(--c-primary);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .78rem;
    margin-bottom: .85rem;
    display: inline-block;
}
.universe-section-head h2 {
    font-size: clamp(1.5rem, 2vw + .85rem, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}
.universe-section-head h2 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--c-ink), var(--c-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.universe-section-head p {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--c-ink-muted);
}

.universe-identity__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.universe-trait {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 2rem 1.75rem 1.75rem;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.universe-trait::before {
    content: '';
    position: absolute;
    top: 0; left: 1.75rem; right: 1.75rem;
    height: 3px;
    background: var(--universe-accent, var(--c-primary));
    border-radius: 0 0 3px 3px;
}
.universe-trait:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -22px rgba(5,11,32,.22);
}
.universe-trait__num {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--c-ink-muted);
    margin-bottom: .85rem;
}
.universe-trait__num::before {
    content: '';
    display: inline-block;
    width: 18px; height: 1px;
    background: currentColor;
    margin-right: .55rem;
    vertical-align: middle;
    opacity: .6;
}
.universe-trait h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: .55rem;
}
.universe-trait p {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--c-ink-muted);
}

/* ---------- Anatomia (5 items) ---------- */
.universe-anatomy {
    padding-block: var(--section-y);
    background: var(--c-bg-soft);
    position: relative;
    overflow: hidden;
}
.universe-anatomy::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(5,11,32,.05) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 60%);
    opacity: .8;
    pointer-events: none;
}
.universe-anatomy__list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.universe-anatomy__item {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: transform .2s, border-color .2s;
}
.universe-anatomy__item:hover {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--universe-accent, var(--c-primary)) 50%, var(--c-border));
}
.universe-anatomy__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--universe-accent, var(--c-primary));
    color: var(--universe-ink, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.02em;
}
.universe-anatomy__body h4 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: .25rem;
}
.universe-anatomy__body p {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--c-ink-muted);
    margin: 0;
}

/* ---------- Curadoria card ---------- */
.universe-curadoria { padding-block: var(--section-y); }
.universe-curadoria__card {
    position: relative;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(64, 95, 242, .35) 0%, transparent 60%),
        linear-gradient(180deg, #050B20 0%, #0a1338 100%);
    color: #fff;
    border-radius: var(--r-xl);
    padding: 3rem 2rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.universe-curadoria__card::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
    opacity: .55;
    pointer-events: none;
}
.universe-curadoria__eyebrow {
    color: rgba(255,255,255,.65);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .78rem;
    display: inline-block;
    margin-bottom: 1rem;
}
.universe-curadoria__title {
    font-size: clamp(1.4rem, 1.8vw + .85rem, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: #fff;
}
.universe-curadoria__title em {
    font-style: normal;
    background: linear-gradient(90deg, #fff, var(--universe-accent, var(--c-bg-yellow)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.universe-curadoria__lede {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(255,255,255,.78);
    max-width: 58ch;
    margin: 0 auto 2rem;
}
.universe-curadoria__actions {
    display: flex;
    gap: .85rem;
    justify-content: center;
    flex-wrap: wrap;
}
.universe-curadoria__actions .btn { padding: 14px 24px; }

/* =========================================================
   REVEAL ANIMATION (IntersectionObserver in JS)
   ========================================================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

/* =========================================================
   FLUID TYPOGRAPHY — replaces hard breakpoint jumps
   ========================================================= */
.hero__title {
    /* 29px → 74px, clamp across viewport width */
    font-size: clamp(1.8125rem, 4vw + 1rem, 4.625rem);
}
.hero__eyebrow {
    font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}
.section-head__title {
    /* 22px → 40px */
    font-size: clamp(1.375rem, 2vw + 0.875rem, 2.5rem);
}
.cta-card h3 {
    /* 22px → 34px */
    font-size: clamp(1.375rem, 1.6vw + 0.85rem, 2.125rem);
}

/* =========================================================
   BREAKPOINTS
   ========================================================= */

/* ≥ 768px: cta band side by side */
@media (min-width: 768px) {
    .cta-band { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ≥ 960px: anuncie 2-col layout */
@media (min-width: 960px) {
    .anuncie-layout {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        gap: 4rem;
    }
    .anuncie-steps { position: sticky; top: calc(var(--header-h) + 2rem); }

    /* Sobre / About */
    .about-manifesto__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 4.5rem;
    }
    .about-do__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .about-pillars__list { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .about-universe__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

    .about-cta__card {
        grid-template-columns: minmax(0, 1.3fr) auto;
        padding: 3rem 3rem;
        gap: 3rem;
    }
    .about-cta__actions { justify-content: flex-end; }

    /* Universo pages */
    .universe-identity__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .universe-anatomy__list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .universe-curadoria__card { padding: 4rem 3rem; }

    /* Contato page */
    .contato-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }
    .contato-channels { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* =========================================================
   CONTATO PAGE
   ========================================================= */
.contato-section { padding-block: var(--section-y); }
.contato-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.contato-channels { display: flex; flex-direction: column; gap: 1rem; }
.contato-channels__title {
    font-size: clamp(1.5rem, 1.8vw + .9rem, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: .25rem 0 .5rem;
}
.contato-channels__title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-hover));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.contato-channels__lede { color: var(--c-ink-muted); margin-bottom: 1rem; }

.contact-channel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--c-ink) 10%, transparent);
    border-radius: var(--r-lg);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.contact-channel:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--c-primary) 35%, transparent);
    box-shadow: 0 18px 30px -22px rgba(0, 36, 246, .35);
}
.contact-channel__icon {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-ink) 5%, transparent);
    color: var(--c-ink);
}
.contact-channel__icon svg { width: 24px; height: 24px; }
.contact-channel--whatsapp .contact-channel__icon { background: #25D366; color: #fff; }
.contact-channel--instagram .contact-channel__icon {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
}
.contact-channel--facebook .contact-channel__icon { background: #1877F2; color: #fff; }
.contact-channel__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.contact-channel__label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.contact-channel__value {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.2;
}
.contact-channel__hint { font-size: .85rem; color: var(--c-ink-muted); }
.contact-channel__arrow {
    flex: 0 0 auto;
    color: var(--c-ink-muted);
    transition: transform .2s ease, color .2s ease;
}
.contact-channel:hover .contact-channel__arrow {
    color: var(--c-primary);
    transform: translateX(4px);
}

.contato-note {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    margin-top: .5rem;
    background: color-mix(in srgb, var(--c-bg-yellow) 35%, #fff);
    border: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
    border-radius: var(--r-md);
    color: var(--c-ink);
}
.contato-note svg { flex: 0 0 auto; margin-top: 2px; }
.contato-note p { margin: 0; font-size: .95rem; line-height: 1.5; }
.contato-note a { color: var(--c-primary); font-weight: 600; }

/* ≤ 1024px: tablet — collapse nav to hamburger */
@media (max-width: 1024px) {
    :root { --header-h: 64px; }
    .site-header__inner { padding: 0 28px; height: var(--header-h); }
    .site-header__right { gap: 16px; }
    .primary-nav, .header-cta { display: none; }
    .nav-toggle { display: flex; }
    .mobile-menu { display: block; }
    .mobile-menu[hidden] { display: none; }
    .site-header__logo { width: auto; }
    .cta-card { padding: 2.25rem 2rem; min-height: 320px; }
    .cta-card__copy { max-width: 62%; }
    .cta-card__img { max-width: 38%; opacity: .75; }
}

/* ≤ 959px: tablet — footer stacks, mosaic 3 cols */
@media (max-width: 959px) {
    .site-footer__inner { flex-direction: column; gap: 2.5rem; }
    .site-footer__brand { flex: none; width: 100%; }
    .site-footer__brand > p { max-width: 100%; }
    .site-footer__cta { padding-block: 1.75rem; }
    .site-footer__cta-inner { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .site-footer__cta-copy { flex: none; width: 100%; }
    .site-footer__cta-title { line-height: 1.15; }
    .site-footer__cta-actions { width: 100%; margin-top: .4rem; }
    .site-footer__cta-actions .btn { flex: 1; justify-content: center; }
    .why-mosaic { columns: 3; }

    /* Anúncie page — stack columns */
    .page-head { padding: calc(var(--header-h) + 2.5rem) 0 2.5rem; }
    .form-card { padding: 1.75rem 1.5rem; }
}

/* ≤ 767px: large phone */
@media (max-width: 767px) {
    /* Hero: tighter vertical rhythm.
       Allow vertical overflow so the search dropdowns can extend
       beyond the hero section (kept clipped on X to avoid h-scroll). */
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-h) + 3rem);
        padding-bottom: 3rem;
        align-items: flex-start;
        overflow: visible;
        overflow-x: clip;
    }
    .hero__inner { align-items: center; }
    .hero__title { margin-bottom: 2rem; line-height: 1.15em; }
    .hero__browse-label { margin-top: 2rem; font-size: .9rem; }

    /* Search: stacked card */
    .hero-search {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: var(--r-xl);
        max-width: 100%;
    }
    .hero-search__field { padding: 1rem 1.25rem; }
    .hero-search__field + .hero-search__field {
        border-left: 0;
        border-top: 1px solid var(--c-border);
    }
    .hero-search__submit {
        margin-top: .5rem;
        border-radius: calc(var(--r-xl) - .4rem);
        width: 100%;
        justify-content: center;
        padding: 1rem;
    }

    /* Combos: prevent iOS zoom on focus, larger tap targets,
       and a dropdown that floats cleanly over the stacked fields. */
    .combo__input,
    .combo__input--display {
        font-size: 16px;
        line-height: 1.25;
    }
    .combo__trigger { min-height: 28px; }
    .combo__caret { width: 12px; height: 8px; }

    .combo__panel {
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
        width: auto;
        max-height: min(60vh, 360px);
        border-radius: var(--r-lg);
        padding: 8px 0;
        box-shadow: 0 18px 40px -16px rgba(5, 11, 32, .45),
                    0 4px 12px -4px rgba(5, 11, 32, .18);
        z-index: 20;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .combo__panel li {
        padding: 14px 18px;
        font-size: 15px;
    }

    /* Body strip: 2 per row */
    .body-strip { gap: .5rem; }
    .body-strip a {
        flex: 1 1 calc(50% - .5rem);
        justify-content: center;
        padding: .7rem .9rem;
        font-size: .85rem;
    }
    .body-strip svg { width: 22px; height: 14px; }

    /* Section headings */
    .section-head--row {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }

    /* Car grid: 2 columns */
    .car-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    /* Mosaic: 2 cols */
    .why-mosaic { columns: 2; }

    /* CTA cards: full-width stack */
    .cta-band { grid-template-columns: 1fr; gap: 1.25rem; }
    .cta-card {
        min-height: auto;
        padding: 2rem 1.75rem 7.5rem;
    }
    .cta-card__copy { max-width: 100%; }
    .cta-card p { max-width: 100%; }
    .cta-card__img {
        width: 150px;
        max-width: 42%;
        opacity: .35;
        right: .5rem;
        bottom: .5rem;
    }
    .cta-card__decor { width: 320px; height: 320px; opacity: .4; }

    /* Footer nav: 3 cols */
    .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
    .site-footer__bar-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .3rem;
    }

    /* Anúncie form — single column */
    .form-grid { grid-template-columns: 1fr; gap: .9rem; }
    .form-field--span-2 { grid-column: 1; }
}

/* ≤ 479px: small phone */
@media (max-width: 479px) {
    /* Hero: full-width*/
    .hero { padding-top: calc(var(--header-h) + 2rem); padding-bottom: 2.5rem; }
    .hero__title { margin-bottom: 1.5rem; }

    /* Search: single col pill-less */
    .hero-search { border-radius: var(--r-lg); padding: .3rem; }
    .hero-search__field { padding: .85rem 1rem; }
    .hero-search__submit { border-radius: calc(var(--r-lg) - .3rem); padding: .9rem 1rem; }

    /* Combos: even tighter, full-width dropdown */
    .combo__panel {
        left: -.3rem;
        right: -.3rem;
        border-radius: var(--r-md, 12px);
        max-height: min(55vh, 320px);
    }
    .combo__panel li { padding: 13px 16px; font-size: 14.5px; }

    /* Body strip: 2 per row, smaller */
    .body-strip a { font-size: .8rem; padding: .6rem .75rem; gap: .4rem; }

    /* Car grid: 1 column */
    .car-grid { grid-template-columns: 1fr; }

    /* Mosaic: 2 cols (small enough) */
    .why-mosaic { columns: 2; column-gap: .5rem; }
    .why-mosaic img { margin-bottom: .5rem; border-radius: var(--r-sm); }

    /* CTA card: copy full width, hide illustration */
    .cta-card { padding: 1.75rem 1.4rem; }
    .cta-card__copy { max-width: 100%; }
    .cta-card h3 { line-height: 1.25em; }
    .cta-card__img { display: none; }
    .cta-card__features li { font-size: .85rem; }

    /* Footer: single column nav */
    .site-footer__cols { grid-template-columns: 1fr; gap: 2rem; }
    .site-footer__wa-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   ESTOQUE (listing) — /nossos-carros
   ========================================================= */
.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; }

.estoque-section { padding-block: var(--section-y); }
@media (min-width: 1280px) {
    .estoque-section > .container { max-width: 1480px; }
}
@media (min-width: 1600px) {
    .estoque-section > .container { max-width: 1680px; }
}
.estoque-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

.estoque-filters {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    display: none;
    flex-direction: column;
    gap: 1.1rem;
    box-shadow: 0 1px 2px rgba(5, 11, 32, .04);
}
.estoque-filters.is-open { display: flex; }

.estoque-filters__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--c-border);
}
.estoque-filters__title { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-ink); }
.estoque-filters__title svg { color: var(--c-ink-muted); }
.estoque-filters__title h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.005em; }
.estoque-filters__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    background: var(--c-primary); color: #fff;
    border-radius: 999px;
    font-size: .72rem; font-weight: 700; line-height: 1;
}
.estoque-filters__clear {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 0; cursor: pointer;
    color: var(--c-ink-muted); font-weight: 600; font-size: .82rem;
    padding: 6px 10px; border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}
.estoque-filters__clear:hover { color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 7%, transparent); }

.filter-group { display: flex; flex-direction: column; gap: .55rem; }
.filter-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-ink-muted);
}
/* Inputs ------------------------------------------------- */
.filter-input {
    position: relative;
    display: flex; align-items: center;
    background: var(--c-bg-soft);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.filter-input:focus-within {
    background: #fff;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 16%, transparent);
}
.filter-input input,
.filter-input select {
    width: 100%;
    padding: .7rem .9rem;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--c-ink);
    outline: none;
}
.filter-input input::placeholder { color: var(--c-ink-muted); }
.filter-input--icon > svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-left: .85rem;
    color: var(--c-ink-muted);
}
.filter-input--icon input { padding-left: .55rem; }
.filter-input--select { padding-right: .65rem; }
.filter-input--select select {
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    padding-right: 1.75rem;
}
.filter-input--select > svg {
    position: absolute; right: .85rem; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--c-ink-muted);
    pointer-events: none;
}

/* Pills --------------------------------------------------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-pill {
    border: 1px solid var(--c-border);
    background: #fff;
    color: var(--c-ink);
    padding: .5rem .9rem;
    border-radius: 999px;
    font: inherit; font-size: .85rem; font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.filter-pill:hover { border-color: color-mix(in srgb, var(--c-ink) 35%, var(--c-border)); color: var(--c-ink); transform: translateY(-1px); }
.filter-pill.is-active {
    background: var(--c-ink);
    color: #fff;
    border-color: var(--c-ink);
    font-weight: 600;
}
.filter-pill.is-active:hover { transform: none; }

/* Range --------------------------------------------------- */
.filter-range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .5rem;
    align-items: stretch;
}
.filter-range__field {
    display: flex; align-items: center;
    background: var(--c-bg-soft);
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.filter-range__field:focus-within {
    background: #fff;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 16%, transparent);
}
.filter-range__prefix {
    padding: 0 .2rem 0 .6rem;
    color: var(--c-ink-muted);
    font-weight: 600; font-size: .82rem;
    pointer-events: none;
}
.filter-range__field input {
    width: 100%;
    min-width: 0;
    padding: .7rem .6rem .7rem .3rem;
    border: 0; outline: none;
    background: transparent;
    font: inherit; color: var(--c-ink);
}
.filter-range__field:not(:has(.filter-range__prefix)) input { padding-left: .8rem; }
.filter-range__field input::placeholder { color: var(--c-ink-muted); }
.filter-range__sep {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-ink-muted);
    font-size: .9rem;
}

/* Footer apply (mobile-only by default) ------------------- */
.estoque-filters__foot {
    display: flex;
    padding-top: .5rem;
}
.estoque-filters__apply {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 600;
    gap: .5rem;
}
.estoque-filters__apply-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    background: rgba(255,255,255,.22);
    border-radius: 999px;
    font-size: .78rem; font-weight: 700; line-height: 1;
}

.estoque-results { display: flex; flex-direction: column; gap: 1.25rem; }
.estoque-results__head {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--c-bg-soft);
    padding: .85rem 1rem;
    border-radius: var(--r-md);
}
.estoque-results__count { font-size: .95rem; color: var(--c-ink-muted); }
.estoque-results__count strong { color: var(--c-ink); font-size: 1.15rem; margin-right: .25rem; }
.estoque-results__sort { margin-left: auto; }
.estoque-results__sort select {
    padding: .55rem .85rem;
    border: 1px solid var(--c-border);
    background: #fff;
    border-radius: var(--r-sm);
    font: inherit; color: var(--c-ink); cursor: pointer;
}
.estoque-results__filters-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1rem;
    border: 1px solid var(--c-ink);
    background: var(--c-ink); color: #fff;
    border-radius: 10px;
    font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.estoque-results__filters-toggle:hover { background: #000; transform: translateY(-1px); }
.filters-toggle__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    background: var(--c-primary); color: #fff;
    border-radius: 999px;
    font-size: .72rem; font-weight: 700; line-height: 1;
}

.estoque-empty {
    text-align: center;
    padding: 3rem 1rem;
    border: 1px dashed var(--c-border);
    border-radius: var(--r-lg);
}
.estoque-empty h3 { margin: 0 0 .5rem; }
.estoque-empty p { color: var(--c-ink-muted); margin: 0 0 1.25rem; }

/* ---------- Car grid + card ---------- */
.car-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

/* ---------- Loading skeleton (shimmer) ---------- */
@keyframes vt-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.car-skeleton {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.car-skeleton__cover,
.car-skeleton__line,
.car-skeleton__price,
.car-skeleton__cta {
    background: linear-gradient(
        90deg,
        rgba(5, 11, 32, .045) 0%,
        rgba(5, 11, 32, .085) 50%,
        rgba(5, 11, 32, .045) 100%
    );
    background-size: 200% 100%;
    animation: vt-shimmer 1.6s ease-in-out infinite;
}
.car-skeleton__cover {
    aspect-ratio: var(--card-aspect, 4 / 3);
    border-bottom: 1px solid var(--c-border);
}
.car-skeleton__body {
    padding: 1.4rem 1.5rem 1.25rem;
    display: flex; flex-direction: column; gap: .75rem;
}
.car-skeleton__line { height: 14px; border-radius: 6px; }
.car-skeleton__line--title { height: 20px; width: 72%; }
.car-skeleton__line--meta  { height: 12px; width: 52%; }
.car-skeleton__foot {
    margin-top: .6rem;
    display: flex; justify-content: space-between; align-items: center;
}
.car-skeleton__price { width: 42%; height: 30px; border-radius: 8px; }
.car-skeleton__cta   { width: 36px; height: 36px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
    .car-skeleton__cover,
    .car-skeleton__line,
    .car-skeleton__price,
    .car-skeleton__cta { animation: none; }
}

.car-card {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .25s ease;
    will-change: transform;
}
.car-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--c-ink) 22%, var(--c-border));
    box-shadow:
        0 1px 0 rgba(5, 11, 32, .04),
        0 26px 50px -22px rgba(5, 11, 32, .28),
        0 6px 16px -8px rgba(5, 11, 32, .14);
}
/* Marca-d'água sutil no canto inferior do card no hover — toque Vetture */
.car-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow .3s ease;
}
.car-card:hover::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 12%, transparent); }

.car-card__cover {
    position: relative;
    /* O ratio é detectado a partir da 1ª foto real e injetado em --card-aspect
     * (app.js). Como o cliente padroniza dimensões, o card vira EXATAMENTE
     * da forma da foto — sem letterbox e sem corte. Fallback 4/3 cobre o
     * primeiro paint antes da detecção. */
    aspect-ratio: var(--card-aspect, 4 / 3);
    background: var(--c-bg-soft);
    overflow: hidden;
    /* fio fino na cor da marca — separa imagem do body com identidade */
    border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 14%, var(--c-border));
}
.car-card__cover-placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--c-ink-muted);
    font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
    background: var(--c-bg-soft);
}
.car-card__track { position: absolute; inset: 0; }
.car-card__slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .14s linear;
    will-change: opacity;
}
.car-card__slide.is-active { opacity: 1; }

/* Backdrop desfocado — preenche o card mesmo quando a foto é
 * retrato/quadrada. A própria foto, esticada e em blur, vira o
 * "papel de parede" do card. Browser reusa o cache da foto principal. */
.car-card__blur {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(22px) saturate(1.2) brightness(.85);
    transform: scale(1.18);  /* esconde os edges do blur */
    pointer-events: none;
}

/* Foto principal — sempre inteira (contain), sem corte */
.car-card__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform .55s ease;
    will-change: transform;
}
.car-card:hover .car-card__slide.is-active .car-card__photo { transform: scale(1.03); }

/* gradiente sutil pra contraste com a pill / counter */
.car-card__shade {
    position: absolute; inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(180deg, rgba(5,11,32,0) 0%, rgba(5,11,32,.32) 100%);
    pointer-events: none;
    opacity: .85;
}

.car-card__badges {
    position: absolute; top: 12px; left: 12px;
    display: flex; flex-wrap: wrap; gap: 6px;
    max-width: calc(100% - 24px);
    z-index: 2;
}
.car-card__badge {
    display: inline-flex; align-items: center;
    font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    line-height: 1;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: var(--c-ink);
    border: 1px solid rgba(255,255,255,.6);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    box-shadow: 0 1px 2px rgba(5,11,32,.08), 0 4px 12px rgba(5,11,32,.12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.car-card:hover .car-card__badge {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(5,11,32,.1), 0 6px 16px rgba(5,11,32,.16);
}
.car-card__badge[data-tag="antigo"]    { background: var(--pill-antigo-bg);    color: var(--pill-antigo-fg); border-color: rgba(0,0,0,.08); }
.car-card__badge[data-tag="moderno"]   { background: var(--pill-moderno-bg);   color: var(--pill-moderno-fg); border-color: rgba(255,255,255,.12); }
.car-card__badge[data-tag^="neo"]      { background: var(--pill-neo-bg);       color: var(--pill-neo-fg); border-color: rgba(255,255,255,.18); }
.car-card__badge[data-tag="preparado"] { background: var(--pill-preparado-bg); color: var(--pill-preparado-fg); border-color: rgba(255,255,255,.18); }

/* setas inline */
.car-card__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--c-ink);
    cursor: pointer;
    display: grid; place-items: center;
    padding: 0;
    opacity: 0;
    transition: opacity .18s ease, background .18s ease, transform .15s ease;
    box-shadow: 0 4px 14px rgba(5,11,32,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3;
}
.car-card__nav--prev { left: 10px; }
.car-card__nav--next { right: 10px; }
.car-card__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.car-card:hover .car-card__nav,
.car-card:focus-within .car-card__nav { opacity: 1; }
@media (hover: none) {
    .car-card__nav { opacity: .85; }
}

/* contador discreto */
.car-card__counter {
    position: absolute; bottom: 10px; right: 10px;
    font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    color: #fff;
    background: rgba(5, 11, 32, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 3px 9px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 3;
}
/* ---- Card body — typography & rhythm ---- */
.car-card__body {
    padding: 1.25rem 1.25rem 1.1rem;
    display: flex; flex-direction: column;
    gap: 1rem;
    flex: 1;
    border: 0;
    min-width: 0;
}

.car-card__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Slug editorial: BRAND ─── YEAR — assinatura tipográfica que substitui
 * o decorador bullet+barra. Hairline em var(--c-primary) só no hover. */
.car-card__slug {
    display: flex;
    align-items: center;
    gap: .55rem;
    align-self: stretch;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    line-height: 1;
    min-width: 0;
}
.car-card__brand {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.car-card__slug-sep { flex-shrink: 0; }
.car-card__year { flex-shrink: 0; }
.car-card__brand {
    color: var(--c-ink);
}
.car-card__slug-sep {
    width: 18px;
    height: 1px;
    background: color-mix(in srgb, var(--c-ink) 22%, transparent);
    transition: width .3s cubic-bezier(.2,.7,.2,1);
}
.car-card__year {
    font-variant-numeric: tabular-nums;
}
.car-card:hover .car-card__slug-sep { width: 26px; }

.car-card__model {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--c-ink);
    line-height: 1.08;
    letter-spacing: -.032em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car-card__version {
    font-size: .95rem;
    color: var(--c-ink-muted);
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Meta — linha única com separadores · estilo legenda editorial ---- */
.car-card__meta {
    list-style: none;
    margin: 0;
    padding: .85rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .8rem;
    font-size: .92rem;
    color: var(--c-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid color-mix(in srgb, var(--c-ink) 8%, transparent);
}
.car-card__meta li {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
.car-card__meta li + li::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-ink) 28%, transparent);
    margin-right: .8rem;
}

/* ---- Foot — plinto neutro cool, discreto e profissional ---- */
.car-card__foot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: #e8eaee;
    color: var(--c-ink);
    overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
}

.car-card__foot-price {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    z-index: 1;
}
.car-card__price-label {
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.car-card__price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--c-ink);
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: .32rem;
}
.car-card__price-currency {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--c-ink-muted);
}

/* CTA "ver detalhes" — pill ink fixa que apenas expande e ganha sombra no hover */
.car-card__arrow {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    height: 36px;
    min-width: 36px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0;
    border-radius: 999px;
    background: var(--c-ink);
    color: #fff;
    border: 1px solid var(--c-ink);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(5, 11, 32, .12);
    transition: padding .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, transform .25s ease;
}
.car-card__arrow-label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: max-width .35s cubic-bezier(.2,.7,.2,1), opacity .2s ease .05s, margin-right .35s ease;
}
.car-card__arrow svg { transition: transform .25s ease; flex-shrink: 0; }

.car-card:hover .car-card__arrow {
    padding: 0 4px 0 12px;
    box-shadow: 0 6px 14px rgba(5, 11, 32, .2);
}
.car-card:hover .car-card__arrow-label {
    max-width: 120px;
    opacity: 1;
    margin-right: 5px;
}
.car-card:hover .car-card__arrow svg { transform: translateX(2px); }

/* =========================================================
   VEÍCULO DETAIL — /veiculo
   ========================================================= */
.veiculo-main { padding-bottom: var(--section-y); }
.veiculo-top { padding-top: calc(var(--header-h) + 1.25rem); padding-bottom: .75rem; }
.breadcrumb--ink a { color: var(--c-ink-muted); }
.breadcrumb--ink a:hover { color: var(--c-primary); }

.veiculo-loading { padding: 1.5rem 0 3rem; }
.veiculo-empty[hidden] { display: none; }
.veiculo-empty {
    padding: 3.5rem 0 5rem;
    display: flex;
    justify-content: center;
}
.veiculo-empty__card {
    width: 100%;
    max-width: 640px;
    padding: 3rem 2.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border: 1px solid rgba(64, 95, 242, .08);
    border-radius: 24px;
    box-shadow:
        0 1px 2px rgba(5, 11, 32, .04),
        0 24px 64px -24px rgba(64, 95, 242, .25);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.veiculo-empty__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-hover) 50%, var(--c-bg-yellow) 100%);
}
.veiculo-empty__icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    background: radial-gradient(circle at 30% 25%, rgba(64, 95, 242, .14) 0%, rgba(64, 95, 242, .06) 60%, transparent 100%);
    border: 1px solid rgba(64, 95, 242, .14);
}
.veiculo-empty__icon svg { width: 48px; height: 48px; }
.eyebrow--chip-light {
    background: rgba(64, 95, 242, .08);
    color: var(--c-primary);
    border: 1px solid rgba(64, 95, 242, .14);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.eyebrow--chip-light .eyebrow__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(64, 95, 242, .14);
}
.veiculo-empty__title {
    font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--c-ink);
    margin: 0 0 .75rem;
    text-wrap: balance;
}
.veiculo-empty__lede {
    color: var(--c-ink-muted);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 460px;
    margin: 0 auto 1.75rem;
}
.veiculo-empty__actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.veiculo-empty__hint {
    color: var(--c-ink-muted);
    font-size: .92rem;
    margin: 0 0 2.25rem;
}
.veiculo-empty__hint strong { color: var(--c-ink); font-weight: 700; }
.veiculo-empty__universos {
    border-top: 1px solid rgba(5, 11, 32, .06);
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    align-items: center;
}
.veiculo-empty__universos-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.veiculo-empty__universos-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}
.veiculo-empty__universos-list a {
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--c-ink);
    background: #fff;
    border: 1px solid rgba(5, 11, 32, .1);
    transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.veiculo-empty__universos-list a:hover {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    transform: translateY(-2px);
}
@media (max-width: 600px) {
    .veiculo-empty { padding: 2rem 0 3rem; }
    .veiculo-empty__card { padding: 2.25rem 1.25rem; border-radius: 20px; }
    .veiculo-empty__actions .btn { width: 100%; justify-content: center; }
}

.veiculo-skeleton {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.veiculo-skeleton__gallery {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
}
.veiculo-skeleton__info {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
}
.veiculo-skeleton__gallery,
.veiculo-skeleton__line,
.veiculo-skeleton__price,
.veiculo-skeleton__spec,
.veiculo-skeleton__cta {
    background: linear-gradient(
        90deg,
        rgba(5, 11, 32, .045) 0%,
        rgba(5, 11, 32, .085) 50%,
        rgba(5, 11, 32, .045) 100%
    );
    background-size: 200% 100%;
    animation: vt-shimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
}
.veiculo-skeleton__line--badge { height: 22px; width: 90px; border-radius: 999px; }
.veiculo-skeleton__line--title { height: 28px; width: 70%; }
.veiculo-skeleton__line--sub   { height: 16px; width: 50%; }
.veiculo-skeleton__price       { height: 64px; border-radius: var(--r-md); }
.veiculo-skeleton__specs {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
}
.veiculo-skeleton__spec { height: 38px; }
.veiculo-skeleton__cta  { height: 52px; border-radius: 12px; margin-top: .35rem; }
@media (min-width: 960px) {
    .veiculo-skeleton { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .veiculo-skeleton__gallery,
    .veiculo-skeleton__line,
    .veiculo-skeleton__price,
    .veiculo-skeleton__spec,
    .veiculo-skeleton__cta { animation: none; }
}

.veiculo-detail[hidden] { display: none; }
.veiculo-detail { display: flex; flex-direction: column; gap: 2.5rem; padding-top: .5rem; }
.veiculo-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

/* Gallery */
.veiculo-gallery { display: flex; flex-direction: column; gap: .75rem; }
.vg-main {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0a1024;
}
.vg-main img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
}
.vg-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(5, 11, 32, .55); color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s ease, transform .15s ease;
}
.vg-arrow:hover { background: var(--c-ink); transform: translateY(-50%) scale(1.05); }
.vg-arrow--prev { left: 12px; }
.vg-arrow--next { right: 12px; }
.vg-counter {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(5, 11, 32, .65); color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    backdrop-filter: blur(4px);
}

.vg-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .55rem;
    margin-top: .25rem;
}
.vg-thumb {
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0; background: none;
    aspect-ratio: 4 / 3;
    opacity: .55;
    filter: saturate(.92);
    transition: opacity .2s ease, border-color .2s ease, transform .15s ease, filter .2s ease;
}
.vg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-thumb:hover { opacity: 1; transform: translateY(-1px); filter: saturate(1); }
.vg-thumb.is-active {
    opacity: 1;
    filter: saturate(1);
    border-color: var(--c-ink);
    box-shadow: 0 4px 14px rgba(5,11,32,.16);
}

@media (max-width: 880px) {
    .vg-thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
    .vg-thumbs { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
}

/* Info column */
.veiculo-info {
    position: relative;
    align-self: start;
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(64, 95, 242, .045) 0%, transparent 60%),
        #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 1.85rem 1.6rem 1.6rem;
    display: flex; flex-direction: column; gap: 1.15rem;
    box-shadow:
        0 1px 2px rgba(5, 11, 32, .04),
        0 24px 48px -28px rgba(5, 11, 32, .18);
    overflow: hidden;
}
.veiculo-info::before {
    content: '';
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #405ff2 0%, #0024f6 50%, #25D366 100%);
}
.veiculo-info::after {
    content: '';
    position: absolute; top: -120px; right: -120px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(64, 95, 242, .08) 0%, transparent 65%);
    pointer-events: none;
    border-radius: 50%;
}
.veiculo-info__badges {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: -.25rem;
}
.veiculo-info__badge {
    display: inline-flex; align-items: center;
    font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    line-height: 1;
    padding: 7px 13px; border-radius: 999px;
    background: var(--c-bg-soft); color: var(--c-ink);
    border: 1px solid var(--c-border);
    box-shadow: 0 1px 2px rgba(5,11,32,.04);
}
.veiculo-info__badge[data-tag="antigo"]    { background: var(--pill-antigo-bg);    color: var(--pill-antigo-fg); border-color: rgba(0,0,0,.08); }
.veiculo-info__badge[data-tag="moderno"]   { background: var(--pill-moderno-bg);   color: var(--pill-moderno-fg); border-color: rgba(255,255,255,.12); }
.veiculo-info__badge[data-tag^="neo"]      { background: var(--pill-neo-bg);       color: var(--pill-neo-fg); border-color: rgba(255,255,255,.18); }
.veiculo-info__badge[data-tag="preparado"] { background: var(--pill-preparado-bg); color: var(--pill-preparado-fg); border-color: rgba(255,255,255,.18); }

.veiculo-info__title {
    font-size: clamp(1.45rem, 1.5vw + .95rem, 1.95rem);
    line-height: 1.12;
    margin: 0;
    letter-spacing: -.02em;
    font-weight: 700;
}
.veiculo-info__version { color: var(--c-ink-muted); margin: 0; font-size: .95rem; line-height: 1.4; }

.veiculo-info__price-block {
    position: relative;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(135deg, rgba(64, 95, 242, .07) 0%, rgba(0, 36, 246, .02) 100%);
    border: 1px solid rgba(64, 95, 242, .16);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.veiculo-info__price-block::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    background: linear-gradient(180deg, #405ff2, #0024f6);
    border-radius: 0 3px 3px 0;
}
.veiculo-info__price-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-muted); font-weight: 600; }
.veiculo-info__price { font-size: clamp(1.7rem, 1.8vw + 1rem, 2.25rem); color: var(--c-primary); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }

.veiculo-specs {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem;
}
.veiculo-specs li {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .85rem;
    background: var(--c-bg-soft);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.veiculo-specs li:hover {
    background: #fff;
    border-color: rgba(64, 95, 242, .2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -6px rgba(5, 11, 32, .12);
}
.veiculo-specs__icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    color: var(--c-primary);
    transition: background .2s ease, color .2s ease;
}
.veiculo-specs__icon svg { width: 16px; height: 16px; }
.veiculo-specs li:hover .veiculo-specs__icon {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.veiculo-specs__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.veiculo-specs__meta span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-muted); font-weight: 600; }
.veiculo-specs__meta strong { font-size: .92rem; color: var(--c-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.veiculo-info__actions {
    display: flex; flex-direction: column; gap: .55rem;
    margin-top: .45rem;
    padding-top: 1.15rem;
    border-top: 1px dashed var(--c-border);
}
.veiculo-info__actions .btn {
    width: 100%; justify-content: center;
    padding: 14px 18px;
    gap: .55rem;
    font-weight: 600;
    letter-spacing: -.005em;
}
.veiculo-info__actions .btn svg { width: 18px; height: 18px; }

/* btn--ghost lives inside a white card here — override to ink palette */
.veiculo-info__actions .btn--ghost {
    color: var(--c-ink);
    border-color: rgba(5, 11, 32, .22);
    background: transparent;
}
.veiculo-info__actions .btn--ghost:hover {
    background: var(--c-ink);
    color: #fff;
    border-color: var(--c-ink);
}

.veiculo-cta {
    position: relative;
    background: linear-gradient(180deg, #2bdb6d 0%, #1ebf5b 100%) !important;
    color: #fff !important;
    border-color: #1ebf5b !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .25) inset,
        0 6px 18px -6px rgba(37, 211, 102, .55);
    transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.veiculo-cta:hover {
    background: linear-gradient(180deg, #1ebf5b 0%, #18a64d 100%) !important;
    border-color: #18a64d !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .25) inset,
        0 10px 22px -6px rgba(37, 211, 102, .65);
}
.veiculo-cta:active { transform: translateY(0); }

.veiculo-info__actions .veiculo-cta--outline {
    background: #fff !important;
    color: #18a64d !important;
    border: 1.5px solid #25D366 !important;
    box-shadow: 0 1px 2px rgba(37, 211, 102, .12);
}
.veiculo-info__actions .veiculo-cta--outline:hover {
    background: rgba(37, 211, 102, .08) !important;
    color: #18a64d !important;
    border-color: #1ebf5b !important;
    box-shadow: 0 6px 16px -6px rgba(37, 211, 102, .3);
    transform: translateY(-1px);
}

.veiculo-info__advertise {
    display: inline-flex; align-items: center; gap: .35rem;
    align-self: center;
    margin-top: .4rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--c-ink-muted);
    text-decoration: none;
    transition: color .2s ease;
}
.veiculo-info__advertise svg {
    width: 14px; height: 14px;
    transition: transform .2s ease;
}
.veiculo-info__advertise:hover {
    color: var(--c-primary);
}
.veiculo-info__advertise:hover svg {
    transform: translateX(3px);
}


/* Content blocks */
.veiculo-content { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.vc-block {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
}
.vc-block h2 { font-size: 1.15rem; margin: 0 0 .85rem; letter-spacing: -.01em; }
.vc-block p { margin: 0; color: var(--c-ink); line-height: 1.6; }
#vc-description { white-space: pre-wrap; }

.veiculo-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.veiculo-related__head h2 { margin: 0; font-size: 1.25rem; }
.veiculo-related__all { color: var(--c-primary); font-weight: 600; }

/* ≥ 600px: 2-col car grid */
@media (min-width: 600px) {
    .car-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 960px: filtros como sidebar fixa à esquerda */
@media (min-width: 960px) {
    .estoque-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
    }
    .estoque-filters {
        display: flex;
        position: sticky;
        top: calc(var(--header-h) + 1rem);
        max-height: calc(100vh - var(--header-h) - 2rem);
        overflow-y: auto;
        padding: 1.4rem 1.5rem;
    }
    .estoque-filters__foot { display: none; }
    .estoque-results__filters-toggle { display: none; }
    .estoque-results .car-grid { grid-template-columns: repeat(2, 1fr); }
    .car-grid { grid-template-columns: repeat(3, 1fr); }

    /* Veículo detail */
    .veiculo-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
    .veiculo-info { position: sticky; top: calc(var(--header-h, 85px) + 16px); }
}
@media (min-width: 1280px) {
    .car-grid { grid-template-columns: repeat(4, 1fr); }
    .estoque-results .car-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1600px) {
    .estoque-results .car-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   VEÍCULO — full-page lightbox
   ========================================================= */
body.is-modal-open { overflow: hidden; }

.vg-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(4, 8, 22, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    outline: none;
}
.vg-modal.is-open { opacity: 1; pointer-events: all; }

.vg-modal__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 72px 84px;
    box-sizing: border-box;
}
.vg-modal__img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    border-radius: var(--r-sm);
    user-select: none;
    pointer-events: none;
    transition: opacity .14s ease;
    display: block;
    box-shadow: 0 14px 60px rgba(0, 0, 0, .5);
}
.vg-modal__img.is-fading { opacity: 0; }

.vg-modal__close {
    position: fixed;
    top: 20px; right: 20px;
    width: 44px; height: 44px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 9001;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s ease, transform .18s ease;
}
.vg-modal__close:hover { background: rgba(255, 255, 255, .18); transform: scale(1.08); }

.vg-modal__arrow {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    width: 54px; height: 54px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    padding: 0;
    z-index: 9001;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s ease, transform .15s ease;
}
.vg-modal__arrow--prev { left: 22px; }
.vg-modal__arrow--next { right: 22px; }
.vg-modal__arrow:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-50%) scale(1.08);
}

.vg-modal__counter {
    position: fixed;
    bottom: 24px;
    left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, .65);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    pointer-events: none;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .vg-modal__stage { padding: 64px 14px; }
    .vg-modal__arrow { width: 44px; height: 44px; }
    .vg-modal__arrow--prev { left: 10px; }
    .vg-modal__arrow--next { right: 10px; }
    .vg-modal__close { top: 12px; right: 12px; width: 40px; height: 40px; }
}

/* ≤ 479px: veiculo page mobile adjustments */
@media (max-width: 479px) {
    .veiculo-top { padding-top: calc(var(--header-h) + .75rem); }
    .vg-main { aspect-ratio: 4 / 3; }
    .vg-thumbs { grid-template-columns: repeat(3, 1fr) !important; gap: .35rem; }
    .veiculo-info { padding: 1.4rem 1.15rem 1.15rem; }
    .veiculo-info__title { font-size: 1.4rem; }
    .veiculo-info__price { font-size: 1.6rem; }
    .veiculo-specs { grid-template-columns: 1fr 1fr; gap: .45rem; }
    .veiculo-specs li { padding: .55rem .65rem; gap: .55rem; }
    .veiculo-specs__icon { width: 28px; height: 28px; border-radius: 7px; }
    .veiculo-specs__icon svg { width: 14px; height: 14px; }
    .veiculo-specs__meta strong { font-size: .85rem; }
}