/* ============================================================
   Velit Motéis — theme override
   Loaded AFTER assets/css/style.css to retheme the Moonlit
   template without touching its source. Targets existing
   template classes and adds .velit-* helpers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@200;300;400;500&family=Inter:wght@300;400;500&display=swap');

/* ---- 1. Tokens ---- */
:root {
    --velit-bg-dark: #0A0A0A;
    --velit-bg-dark-2: #111111;
    --velit-bg-dark-3: #1A1A1A;
    --velit-text-on-dark: #FFFFFF;
    --velit-text-on-dark-2: #AAAAAA;
    --velit-text-on-dark-3: #666666;
    --velit-border-dark: #2A2A2A;

    --velit-bg-light: #F5F3EF;
    --velit-bg-light-2: #FFFFFF;
    --velit-bg-light-3: #F9F7F4;
    --velit-text-on-light: #0A0A0A;
    --velit-text-on-light-2: #777777;
    --velit-text-on-light-3: #AAAAAA;
    --velit-border-light: #E8E4DC;

    --velit-gold: #C9A84C;

    --velit-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --velit-font-label: 'Montserrat', system-ui, -apple-system, sans-serif;
    --velit-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* revisão: escala de espaçamento canônica (8px base, mais 4/12 para granularidade) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* revisão: tokens de tipografia para labels/UI uppercase */
    --ls-tight: 0.08em;     /* nav links, body labels */
    --ls-default: 0.16em;   /* eyebrows, CTAs */
    --ls-wide: 0.22em;      /* section eyebrows, breadcrumbs */
    --ls-xwide: 0.32em;     /* logo subtitles, headings ornamentais */

    --label-xs: 0.7rem;     /* tags pequenas, counters */
    --label-sm: 0.75rem;    /* eyebrows secundárias */
    --label-md: 0.82rem;    /* eyebrows primárias, CTAs */
    --label-lg: 0.9rem;     /* labels destacadas */

    /* revisão: sombras padronizadas */
    --velit-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.10);
    --velit-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.18);
    --velit-shadow-lg: 0 14px 28px rgba(0, 0, 0, 0.28);
    --velit-shadow-xl: 0 18px 32px rgba(10, 10, 10, 0.34);

    /* revisão: cor WhatsApp tokenizada */
    --velit-wa-bg: #25D366;
    --velit-wa-bg-hover: #1ebe57;

    /* revisão tipo: cor neutra com contraste suficiente para WCAG AA em texto pequeno
       (5.5:1 sobre #0A0A0A; substitui --velit-text-on-dark-3 onde necessário) */
    --velit-text-muted: #999999;
}

/* =================================================================
 * Hierarquia tipográfica Velit Motéis
 * -----------------------------------------------------------------
 * Display (--velit-font-display, Cormorant Garamond):
 *   - H1, H2, H3 — títulos editoriais
 *   - Preços (destaque numérico)
 *   - Nomes de unidades nos cards (.unit-name, .cat-card-title)
 *
 * Label (--velit-font-label, Montserrat):
 *   - Eyebrows uppercase (.velit-eyebrow, .cat-card-eyebrow, etc.)
 *   - CTAs (botões "Ver detalhes →", "Reservar")
 *   - Breadcrumbs e menu de navegação
 *   - REGRA: quando size < 0.8rem, weight mínimo 400 (legibilidade)
 *   - REGRA: letter-spacing máximo 0.22em para size < 0.8rem
 *
 * Body (--velit-font-body, Inter):
 *   - Body global + parágrafos + descrições
 *   - Listas de amenidades, addresses, copy editorial
 *   - REGRA: line-height mínimo 1.5; ideal 1.6
 *   - REGRA: jamais usar font-style: italic em texto longo
 * ================================================================= */

/* ---- 2. Tipografia global ---- */
body {
    font-family: var(--velit-font-body);
    color: var(--velit-text-on-light);
    background-color: var(--velit-bg-light);
    /* revisão tipo: line-height explícito p/ leitura confortável de parágrafos */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: inherit;
}

p {
    font-family: var(--velit-font-body);
    font-weight: 300;
}

.theme-btn,
.btn-style {
    font-family: var(--velit-font-label) !important;
    font-weight: 300 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
}

/* ---- 3. Header e footer sempre escuros ---- */
.header__top,
.main__header,
.rts__footer {
    background-color: var(--velit-bg-dark) !important;
    color: var(--velit-text-on-dark);
    border-bottom: 1px solid var(--velit-border-dark);
}

.rts__footer {
    border-bottom: none;
    border-top: 1px solid var(--velit-border-dark);
}

.header__top a,
.main__header a,
.main__header .navigation__menu--item__link,
.rts__footer a,
.rts__footer p,
.rts__footer span {
    color: var(--velit-text-on-dark) !important;
}

.main__header .navigation__menu--item__link {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.82rem;
    /* revisão: evita que "Premium Motel"/"Prime Motel" quebrem em 2 linhas */
    white-space: nowrap;
}

.main__header .navigation__menu--item__link:hover {
    color: var(--velit-gold) !important;
}

/* ---- 4. Modos por página ---- */
body.velit-home {
    background-color: var(--velit-bg-dark);
    color: var(--velit-text-on-dark);
}

body.velit-catalog {
    background-color: var(--velit-bg-light);
    color: var(--velit-text-on-light);
}

body.velit-catalog .page__hero__bg,
body.velit-catalog .page__hero__content {
    background-color: var(--velit-bg-dark);
    color: var(--velit-text-on-dark);
}

body.velit-catalog .page__hero__content h1,
body.velit-catalog .page__hero__content p,
body.velit-catalog .page__hero__content span {
    color: var(--velit-text-on-dark) !important;
}

/* ---- 5. Home: hero e cards de unidade ---- */
.velit-home-hero {
    background-color: var(--velit-bg-dark);
    padding: 80px 0 60px;
    text-align: center;
}

.velit-eyebrow {
    font-family: var(--velit-font-label);
    /* revisão tipo: weight 300 → 400 + tracking 0.32 → 0.22 (frase ganha clustering) */
    font-weight: 400;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-text-on-dark-2);
    display: block;
    margin-bottom: 20px;
}

.velit-home-hero h1 {
    color: var(--velit-text-on-dark);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 300;
    margin-bottom: 32px;
}

.velit-divider {
    height: 1px;
    background: var(--velit-gold);
    width: 60px;
    margin: 0 auto 48px;
    border: 0;
}

.velit-units {
    padding: 0 0 80px;
    background-color: var(--velit-bg-dark);
}

.velit-unit-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--velit-bg-dark-2);
    border: 1px solid var(--velit-border-dark);
    /* revisão: padding consolidado com tokens (era 64px 32px → 64×32) */
    padding: var(--space-8) var(--space-6);
    min-height: 380px;
    text-align: center;
    text-decoration: none !important;
    color: var(--velit-text-on-dark) !important;
    transition: border-color .35s ease, transform .35s ease, background-color .35s ease;
}

.velit-unit-card:hover {
    border-color: var(--velit-gold);
    background: var(--velit-bg-dark-3);
    transform: translateY(-4px);
}

.velit-unit-card[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.velit-unit-card .unit-eyebrow {
    font-family: var(--velit-font-label);
    /* revisão tipo: weight 300 → 400 + size 0.7 → 0.75 + tracking 0.32 → 0.22 (legibilidade) */
    font-weight: 400;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-size: var(--label-sm);
    color: var(--velit-gold);
    margin-bottom: 20px;
}

.velit-unit-card .unit-name {
    font-family: var(--velit-font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    margin: 0 0 8px;
    color: var(--velit-text-on-dark);
}

.velit-unit-card .unit-logo {
    display: block;
    max-width: 80%;
    max-height: 90px;
    width: auto;
    height: auto;
    margin: 0 auto 28px;
    object-fit: contain;
}

.velit-unit-card .unit-motel {
    font-family: var(--velit-font-label);
    /* revisão tipo: weight 300 → 400 + tracking 0.4 → 0.24 (replica logo, mas legível) */
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-text-on-dark-2);
    margin-bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.velit-unit-card .unit-motel::before,
.velit-unit-card .unit-motel::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--velit-text-on-dark-3);
    display: inline-block;
}

.velit-unit-card .unit-loc {
    font-family: var(--velit-font-body);
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--velit-text-on-dark-2);
    margin-bottom: 36px;
    line-height: 1.6;
}

.velit-unit-card .unit-cta {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-gold);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--velit-gold);
}

.velit-unit-card[aria-disabled="true"] .unit-cta {
    color: var(--velit-text-on-dark-3);
    border-bottom-color: var(--velit-text-on-dark-3);
}

/* ---- 6. Footer minimalista ---- */
.velit-footer {
    background: var(--velit-bg-dark);
    padding: 48px 0 36px;
    text-align: center;
    color: var(--velit-text-on-dark-2);
    border-top: 1px solid var(--velit-border-dark);
}

.velit-footer .velit-social {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 28px;
}

.velit-footer .velit-social a {
    color: var(--velit-text-on-dark-2) !important;
    transition: color .25s ease;
    display: inline-flex;
}

.velit-footer .velit-social a:hover {
    color: var(--velit-gold) !important;
}

.velit-footer .velit-social svg {
    width: 22px;
    height: 22px;
}

.velit-footer .velit-copyright {
    font-family: var(--velit-font-label);
    /* revisão tipo: cor #666 → #999 (passa WCAG AA 5.5:1; era 2.5:1) + weight 300 → 400 */
    font-weight: 400;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--velit-text-muted);
    margin: 0;
}

/* ---- 7. Catálogo: hero (apenas quando .velit-hero-immersive NÃO foi aplicado) ---- */
body.velit-catalog .page__hero__bg:not(.velit-hero-immersive) {
    min-height: 360px;
    display: flex;
    align-items: center;
    background-image: none !important;
    background-color: var(--velit-bg-dark) !important;
    border-bottom: 1px solid var(--velit-border-dark);
}

body.velit-catalog .page__hero__content {
    text-align: center;
    padding: 80px 0;
}

body.velit-catalog .page__hero__content h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    margin-bottom: 16px;
}

/* ---- 8. Banner regra das 4h ---- */
.velit-rule-banner {
    background: var(--velit-bg-dark);
    color: var(--velit-text-on-dark);
    /* revisão: padding via tokens (era 22×28 → 24×32) */
    padding: var(--space-5) var(--space-6);
    text-align: center;
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    font-size: var(--label-md);
    border-left: 3px solid var(--velit-gold);
    border-right: 3px solid var(--velit-gold);
    margin: 0;
}

/* revisão: media query mobile que faltava — ajusta padding e font para telas pequenas */
@media (max-width: 576px) {
    .velit-rule-banner {
        padding: var(--space-3) var(--space-4);
        font-size: var(--label-xs);
        letter-spacing: var(--ls-tight);
    }
}

.velit-rule-banner strong {
    color: var(--velit-gold);
    font-weight: 500;
    letter-spacing: 0.18em;
}

/* ---- 9. Catálogo: cards de categoria ---- */
.velit-catalog-section {
    background-color: var(--velit-bg-light);
    /* revisão: padding com tokens (era 100×120 → 96×128) */
    padding: var(--space-9) 0 var(--space-10);
}

.velit-category-card {
    background-color: var(--velit-bg-light-2);
    border: 1px solid var(--velit-border-light);
    border-radius: 4px;
    padding: 56px 48px;
    margin-bottom: 64px;
    position: relative;
}

.velit-category-card .cat-eyebrow {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--velit-gold);
    display: block;
    margin-bottom: 12px;
}

.velit-category-card h2 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--velit-text-on-light);
    margin: 0 0 8px;
}

.velit-category-card .cat-description {
    font-family: var(--velit-font-body);
    /* revisão tipo: removido italic + weight 300 → 400 (italic+light em parágrafo prejudica leitura) */
    font-weight: 400;
    color: var(--velit-text-on-light-2);
    margin: 12px 0 0;
    max-width: 640px;
    line-height: 1.6;
}

.velit-category-card .cat-photo-placeholder {
    background: var(--velit-bg-light-3);
    border: 1px dashed var(--velit-border-light);
    color: var(--velit-text-on-light-3);
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.78rem;
    text-align: center;
    padding: 60px 16px;
    margin-bottom: 32px;
}

.velit-category-card .cat-photo {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 32px;
    border-radius: 2px;
}

.velit-category-card h3 {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--velit-text-on-light);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--velit-border-light);
}

.velit-category-card h3::before {
    content: '— ';
    color: var(--velit-gold);
    margin-right: 6px;
}

/* ---- 10. Pills de número de suíte ---- */
.velit-room-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 8px;
    padding: 0;
    list-style: none;
}

.velit-room-numbers li {
    font-family: var(--velit-font-label);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    background: var(--velit-bg-light-3);
    border: 1px solid var(--velit-border-light);
    color: var(--velit-text-on-light);
}

/* ---- 11. Lista de amenidades tipográfica ---- */
.velit-amenities {
    columns: 2;
    column-gap: 40px;
    padding: 0;
    list-style: none;
    margin: 0 0 12px;
}

.velit-amenities li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--velit-border-light);
    break-inside: avoid;
    font-family: var(--velit-font-body);
    font-weight: 300;
    font-size: 0.96rem;
    color: var(--velit-text-on-light);
}

.velit-amenities li::before {
    content: '— ';
    color: var(--velit-gold);
    margin-right: 8px;
}

@media (min-width: 992px) {
    .velit-amenities { columns: 3; }
}

/* ---- 12. Bloco de diferenciais por suíte ---- */
.velit-differentials {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.velit-differentials li {
    padding: 14px 0;
    border-bottom: 1px dashed var(--velit-border-light);
    font-family: var(--velit-font-body);
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--velit-text-on-light);
}

.velit-differentials li:last-child {
    border-bottom: none;
}

.velit-differentials .suites-tag {
    display: inline-block;
    font-family: var(--velit-font-label);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--velit-gold);
    margin-right: 14px;
    padding: 4px 10px;
    background: var(--velit-bg-light);
    border: 1px solid var(--velit-border-light);
    vertical-align: middle;
}

/* ---- 13. Tabela de preços ---- */
.velit-price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 0;
    font-family: var(--velit-font-body);
}

.velit-price-table th,
.velit-price-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--velit-border-light);
}

.velit-price-table th {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.76rem;
    color: var(--velit-text-on-light-2);
    background: var(--velit-bg-light-3);
}

.velit-price-table td {
    font-weight: 300;
    color: var(--velit-text-on-light);
}

.velit-price-table td.price-cell {
    color: var(--velit-gold);
    font-family: var(--velit-font-display);
    font-weight: 500;
    font-size: 1.2rem;
    text-align: right;
    letter-spacing: 0.02em;
}

.velit-price-table td.price-consulte {
    color: var(--velit-text-on-light-3);
    font-style: italic;
    text-align: right;
}

.velit-price-table tr:nth-child(even) td:not(.price-cell):not(.price-consulte) {
    background: var(--velit-bg-light-3);
}

/* ---- 13b. Overview cards (premium.html catalog grid) ---- */
.velit-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--velit-bg-light-2);
    border: 1px solid var(--velit-border-light);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--velit-text-on-light) !important;
    height: 100%;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    position: relative;
}

.velit-cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 32px rgba(10, 10, 10, 0.12);
    border-color: var(--velit-gold);
}

.velit-cat-card .cat-card-image {
    aspect-ratio: 4 / 3;
    background: var(--velit-bg-light-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--velit-text-on-light-3);
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.74rem;
    border-bottom: 1px solid var(--velit-border-light);
    overflow: hidden;
}

.velit-cat-card .cat-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.velit-cat-card:hover .cat-card-image img {
    transform: scale(1.04);
}

.velit-cat-card .cat-card-body {
    /* revisão: padding com tokens (era 28×28×32 → padronizado para 32×32×32) */
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.velit-cat-card .cat-card-eyebrow {
    font-family: var(--velit-font-label);
    /* revisão tipo: weight 300 → 400 + size 0.7 → 0.75 + tracking 0.28 → 0.22 (legibilidade) */
    font-weight: 400;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-size: var(--label-sm);
    color: var(--velit-gold);
    display: block;
    margin-bottom: 12px;
}

.velit-cat-card .cat-card-title {
    font-family: var(--velit-font-display);
    font-weight: 400;
    font-size: 1.65rem;
    color: var(--velit-text-on-light);
    margin: 0 0 12px;
    line-height: 1.15;
}

.velit-cat-card .cat-card-meta {
    font-family: var(--velit-font-body);
    font-weight: 300;
    font-size: 0.92rem;
    color: var(--velit-text-on-light-2);
    margin-bottom: 22px;
    line-height: 1.5;
}

.velit-cat-card .cat-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--velit-border-light);
    gap: 12px;
}

.velit-cat-card .cat-card-price-block {
    display: flex;
    flex-direction: column;
}

.velit-cat-card .cat-card-price-sub {
    font-family: var(--velit-font-label);
    /* revisão tipo: weight 300 → 400 + size 0.66 → 0.75 (legibilidade no limiar) */
    font-weight: 400;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: var(--label-sm);
    color: var(--velit-text-on-light-2);
    margin-bottom: 2px;
}

.velit-cat-card .cat-card-price {
    font-family: var(--velit-font-display);
    font-weight: 500;
    color: var(--velit-gold);
    font-size: 1.4rem;
    line-height: 1;
}

.velit-cat-card .cat-card-price.is-consulte {
    font-style: italic;
    font-size: 1rem;
    color: var(--velit-text-on-light-2);
}

.velit-cat-card .cat-card-cta {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--velit-gold);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
    white-space: nowrap;
}

.velit-cat-card:hover .cat-card-cta {
    border-bottom-color: var(--velit-gold);
}

/* Premium variant for overview cards */
.velit-cat-card.is-premium {
    border: 2px solid var(--velit-gold) !important;
}

.velit-cat-card.is-premium .cat-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--velit-bg-light-2);
    color: var(--velit-gold);
    padding: 5px 12px;
    font-family: var(--velit-font-label);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.68rem;
    border: 1px solid var(--velit-gold);
    z-index: 2;
}

/* Detail page: back link + breadcrumb */
.velit-back-link {
    display: inline-block;
    margin: 0 0 40px;
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-text-on-light-2);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--velit-border-light);
    transition: color .25s, border-color .25s;
}

.velit-back-link:hover {
    color: var(--velit-gold) !important;
    border-bottom-color: var(--velit-gold);
}

.velit-breadcrumb {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--velit-text-on-dark-2);
    margin: 14px 0 4px;
    text-align: center;
}

.velit-breadcrumb a {
    color: var(--velit-text-on-dark-2) !important;
    text-decoration: none;
    transition: color .25s ease;
}

.velit-breadcrumb a:hover {
    color: var(--velit-gold) !important;
}

.velit-breadcrumb .sep {
    margin: 0 10px;
    color: var(--velit-text-on-dark-3);
}

.velit-breadcrumb .current {
    color: var(--velit-gold);
}

/* Responsive tweaks for overview cards */
@media (max-width: 768px) {
    .velit-cat-card .cat-card-body { padding: 24px 20px 26px; }
    .velit-cat-card .cat-card-title { font-size: 1.45rem; }
    .velit-cat-card .cat-card-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---- 14. Card premium (Velit Pool) ---- */
.velit-card-premium {
    border: 2px solid var(--velit-gold) !important;
    background: var(--velit-bg-light-2);
}

.velit-card-premium::before {
    content: '★';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--velit-bg-light);
    color: var(--velit-gold);
    padding: 0 16px;
    font-size: 28px;
    line-height: 1;
}

.velit-card-premium .cat-eyebrow {
    color: var(--velit-gold);
    font-weight: 400;
}

/* ---- 15. Esconder elementos do template fora de escopo ---- */
body.velit-home .header__top,
body.velit-home .main__header,
body.velit-home .header__function {
    background: transparent !important;
    border: none !important;
}

/* ---- 16. Responsivo ---- */
@media (max-width: 768px) {
    .velit-category-card {
        padding: 36px 24px;
    }
    .velit-amenities {
        columns: 1;
    }
    .velit-price-table th,
    .velit-price-table td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    .velit-price-table td.price-cell {
        font-size: 1rem;
    }
    .velit-unit-card {
        padding: 48px 24px;
        min-height: 320px;
    }
    .velit-home-hero {
        padding: 60px 0 40px;
    }
}

/* ---- 17. Coming soon (stub pages) ---- */
body.velit-coming-soon {
    background-color: var(--velit-bg-dark);
    color: var(--velit-text-on-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.velit-coming-soon .velit-coming-soon-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 80px;
}

.velit-coming-soon .velit-coming-soon-card {
    text-align: center;
    max-width: 640px;
}

.velit-coming-soon .cs-logo {
    max-width: 360px;
    max-height: 140px;
    width: auto;
    height: auto;
    margin: 0 auto 48px;
    display: block;
}

.velit-coming-soon .cs-status {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-size: 0.84rem;
    color: var(--velit-gold);
    margin-bottom: 24px;
}

.velit-coming-soon h1 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--velit-text-on-dark);
    margin-bottom: 24px;
}

.velit-coming-soon .cs-desc {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-dark-2);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 36px;
}

.velit-coming-soon .cs-loc {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-text-on-dark-2);
    padding: 14px 24px;
    border: 1px solid var(--velit-border-dark);
    display: inline-block;
    margin-bottom: 48px;
}

.velit-coming-soon .cs-back {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--velit-gold);
    border: 1px solid var(--velit-gold);
    padding: 16px 36px;
    text-decoration: none;
    display: inline-block;
    transition: background-color .25s ease, color .25s ease;
}

.velit-coming-soon .cs-back:hover {
    background: var(--velit-gold);
    color: var(--velit-bg-dark) !important;
}

/* ---- 18. Home: fit viewport, center logo, compress spacing ---- */
body.velit-home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

body.velit-home .main__header {
    flex: 0 0 auto;
    padding: 18px 0;
}

/* Override the template's 3-column grid wrapper so the lone logo can center. */
body.velit-home .main__header .main__header__wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    grid-template-columns: none !important;
}

body.velit-home .main__header .main__header__wrapper .main__logo {
    display: block;
    justify-items: unset;
    text-align: center;
}

body.velit-home .main__header .main__logo img {
    max-width: 170px;
    height: auto;
    width: auto;
    display: inline-block;
}

body.velit-home .velit-home-hero {
    flex: 0 0 auto;
    padding: 30px 0 18px;
}

body.velit-home .velit-home-hero h1 {
    font-size: clamp(1.6rem, 2.4vw, 2.6rem);
    margin-bottom: 22px;
    line-height: 1.15;
}

body.velit-home .velit-divider {
    margin-bottom: 0;
}

body.velit-home .velit-units {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 24px 0;
}

body.velit-home .velit-units > .container {
    width: 100%;
    max-width: 920px;
}

body.velit-home .velit-unit-card {
    min-height: 0;
    padding: 36px 24px;
}

body.velit-home .velit-unit-card .unit-eyebrow {
    margin-bottom: 14px;
    font-size: 0.66rem;
}

body.velit-home .velit-unit-card .unit-logo {
    max-height: 58px;
    margin: 0 auto 22px;
}

body.velit-home .velit-unit-card .unit-name {
    font-size: clamp(1.5rem, 2vw, 2rem);
    margin-bottom: 4px;
}

body.velit-home .velit-unit-card .unit-motel {
    margin-bottom: 18px;
    font-size: 0.7rem;
}

body.velit-home .velit-unit-card .unit-loc {
    margin-bottom: 22px;
    font-size: 0.88rem;
    line-height: 1.5;
}

body.velit-home .velit-unit-card .unit-cta {
    font-size: 0.72rem;
}

body.velit-home .velit-footer {
    flex: 0 0 auto;
    padding: 24px 0 22px;
}

body.velit-home .velit-footer .velit-social {
    margin-bottom: 16px;
    gap: 22px;
}

body.velit-home .velit-footer .velit-social svg {
    width: 18px;
    height: 18px;
}

body.velit-home .velit-footer .velit-copyright {
    font-size: 0.68rem;
}

/* Tighter for shorter viewports (typical 1366x768 notebooks) */
@media (max-height: 820px) {
    body.velit-home .main__header { padding: 14px 0; }
    body.velit-home .main__header .main__logo img { max-width: 150px; }
    body.velit-home .velit-home-hero { padding: 22px 0 12px; }
    body.velit-home .velit-home-hero h1 { font-size: clamp(1.4rem, 2vw, 2.1rem); margin-bottom: 16px; }
    body.velit-home .velit-units { padding: 14px 0; }
    body.velit-home .velit-unit-card { padding: 28px 20px; }
    body.velit-home .velit-unit-card .unit-logo { max-height: 50px; margin-bottom: 16px; }
    body.velit-home .velit-unit-card .unit-loc { margin-bottom: 18px; }
    body.velit-home .velit-footer { padding: 18px 0 16px; }
    body.velit-home .velit-footer .velit-social { margin-bottom: 12px; }
}

/* Tablet — allow stack but keep compact */
@media (max-width: 991px) and (min-width: 577px) {
    body.velit-home { min-height: 100vh; }
    body.velit-home .velit-units { padding: 24px 0; }
    body.velit-home .velit-unit-card { min-height: 240px; }
}

/* Mobile — natural flow, allow scroll, generous touch targets */
@media (max-width: 576px) {
    body.velit-home {
        min-height: auto;
        display: block;
    }
    body.velit-home .main__header { padding: 16px 0; }
    body.velit-home .main__header .main__logo img { max-width: 140px; }
    body.velit-home .velit-home-hero { padding: 28px 0 12px; }
    body.velit-home .velit-home-hero h1 { font-size: 1.5rem; line-height: 1.2; padding: 0 16px; }
    body.velit-home .velit-units { padding: 24px 0 12px; display: block; }
    body.velit-home .velit-unit-card {
        min-height: 240px;
        padding: 32px 24px;
        margin-bottom: 12px;
    }
    body.velit-home .velit-unit-card .unit-logo { max-height: 56px; }
    body.velit-home .velit-footer { padding: 24px 0; }
}

/* revisão: removido @media (min-width: 1600px) isolado — Bootstrap já limita .container a 1320px;
   regra criava inconsistência só para a home sem ganho real. */

/* ---- 19. WhatsApp floating button (all pages) ---- */
/* revisão: botão flutuante WA com tokens e variáveis */
.velit-wa {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--velit-wa-bg);
    color: #FFFFFF !important;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    border-radius: 999px;
    font-family: var(--velit-font-label);
    font-weight: 400;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: var(--label-sm);
    text-decoration: none !important;
    box-shadow: var(--velit-shadow-lg);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.velit-wa:hover {
    background: var(--velit-wa-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--velit-shadow-xl);
    color: #FFFFFF !important;
}

.velit-wa svg {
    width: 22px;
    height: 22px;
    fill: #FFFFFF;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .velit-wa {
        bottom: 16px;
        right: 16px;
        padding: 10px 14px 10px 12px;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }
    .velit-wa svg { width: 20px; height: 20px; }
}

/* ---- 20. Upgrades section (premium.html) ---- */
.velit-upgrades {
    background: var(--velit-bg-dark);
    color: var(--velit-text-on-dark);
    padding: 100px 0 110px;
    border-top: 1px solid var(--velit-border-dark);
}

.velit-upgrades-header {
    text-align: center;
    margin-bottom: 64px;
}

.velit-upgrades-header h2 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-dark);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    margin-bottom: 14px;
    line-height: 1.15;
}

.velit-upgrades-header .subtitle {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-dark-2);
    font-size: 1rem;
    margin-bottom: 28px;
}

.velit-upgrades-header .velit-divider {
    margin: 0 auto;
}

.velit-upgrade-card {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 0;
    background: var(--velit-bg-dark-2);
    border: 1px solid var(--velit-border-dark);
    margin-bottom: 18px;
    overflow: hidden;
    transition: border-color .3s ease, background-color .3s ease;
}

.velit-upgrade-card:hover {
    border-color: var(--velit-gold);
    background: var(--velit-bg-dark-3);
}

.velit-upgrade-card .upgrade-from,
.velit-upgrade-card .upgrade-to {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
}

.velit-upgrade-card .upgrade-from {
    border-right: 1px solid var(--velit-gold);
    justify-content: center;
}

.velit-upgrade-card .upgrade-label {
    font-family: var(--velit-font-label);
    font-weight: bold;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: white;
    margin-bottom: 12px;
}

.velit-upgrade-card .upgrade-name {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-dark);
    font-size: 1.55rem;
    margin: 0 0 8px;
    line-height: 1.15;
}

.velit-upgrade-card .upgrade-price {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-dark-2);
    font-size: 0.95rem;
}

.velit-upgrade-card .upgrade-diff {
    font-family: var(--velit-font-display);
    font-weight: 500;
    color: var(--velit-gold);
    font-size: 1.8rem;
    line-height: 1;
    margin: 0 0 10px;
}

.velit-upgrade-card .upgrade-benefits {
    list-style: none;
    padding: 0;
    margin: 14px 0 22px;
}

.velit-upgrade-card .upgrade-benefits li {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-dark);
    font-size: 0.95rem;
    padding: 6px 0;
    border-bottom: 1px dashed var(--velit-border-dark);
}

.velit-upgrade-card .upgrade-benefits li:last-child {
    border-bottom: none;
}

.velit-upgrade-card .upgrade-benefits li::before {
    content: '— ';
    color: var(--velit-gold);
    margin-right: 8px;
}

.velit-upgrade-card .upgrade-cta {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.76rem;
    color: var(--velit-gold);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--velit-gold);
    align-self: flex-start;
    transition: background-color .25s ease, color .25s ease, padding .25s ease;
}

.velit-upgrade-card .upgrade-cta:hover {
    background: var(--velit-gold);
    color: var(--velit-bg-dark) !important;
    padding: 4px 12px;
    border-bottom-color: transparent;
}

@media (max-width: 768px) {
    .velit-upgrades { padding: 70px 0 80px; }
    .velit-upgrade-card {
        grid-template-columns: 1fr;
    }
    .velit-upgrade-card .upgrade-from {
        border-right: none;
        border-bottom: 1px solid var(--velit-gold);
        padding-bottom: 22px;
    }
    .velit-upgrade-card .upgrade-from,
    .velit-upgrade-card .upgrade-to {
        padding: 24px 28px;
    }
}

/* ---- 21. Unit switcher (dropdown custom no header) ----
   revisão UI/UX: dropdown custom (não <select> nativo) — resolve truncação
   e oferece UX moderna com painel mostrando logo + endereço de cada unidade. */

/* revisão: força align-items center no <ul> do menu para que TODOS os itens
   (incluindo o switcher) fiquem verticalmente centralizados na linha.
   Resolve a causa raiz do desalinhamento — não precisa de margin-top hack. */
.main__header .navigation__menu ul.list-unstyled {
    align-items: center;
}

.velit-unit-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* revisão: replica o padding-top/bottom do .navigation__menu--item__link (24/30)
       para que a caixa do switcher tenha a mesma geometria dos menu links irmãos
       e o texto fique no mesmo nível visual. */
    padding-top: 24px;
    padding-bottom: 30px;
    line-height: 1.5;
    align-self: stretch;
}

.velit-unit-switcher .vus-btn {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--velit-font-label);
    line-height: 1.5;
}

.velit-unit-switcher .vus-label {
    font-weight: 300;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: 0.82rem;
    color: white;
    white-space: nowrap;
}

.velit-unit-switcher .vus-current {
    font-weight: 300;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--velit-gold);
    white-space: nowrap;
    transition: color .25s ease;
}

.velit-unit-switcher .vus-chev {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: var(--velit-gold);
    stroke-width: 1.5;
    transition: transform .3s ease;
    flex-shrink: 0;
}

.velit-unit-switcher[data-open="true"] .vus-chev {
    transform: rotate(180deg);
}

.velit-unit-switcher .vus-btn:hover .vus-current {
    color: var(--velit-text-on-dark);
}

.velit-unit-switcher .vus-btn:hover .vus-chev {
    stroke: var(--velit-text-on-dark);
}

/* Panel — appears below the button */
.velit-unit-switcher .vus-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
    background: var(--velit-bg-dark-2);
    border: 1px solid var(--velit-border-dark);
    border-radius: 2px;
    box-shadow: var(--velit-shadow-lg);
    padding: var(--space-2) 0;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.velit-unit-switcher[data-open="true"] .vus-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Pequeno conector visual entre botão e painel (triângulo) */
.velit-unit-switcher .vus-panel::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--velit-bg-dark-2);
    border-left: 1px solid var(--velit-border-dark);
    border-top: 1px solid var(--velit-border-dark);
}

.velit-unit-switcher .vus-option {
    display: block;
    padding: var(--space-3) var(--space-5);
    text-decoration: none !important;
    color: var(--velit-text-on-dark) !important;
    border-left: 2px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
    position: relative;
}

.velit-unit-switcher .vus-option:hover {
    background: var(--velit-bg-dark-3);
    border-left-color: var(--velit-gold);
}

.velit-unit-switcher .vus-opt-name {
    display: block;
    font-family: var(--velit-font-display);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--velit-text-on-dark);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
    text-transform: none;
}

.velit-unit-switcher .vus-opt-addr {
    display: block;
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: var(--label-xs);
    color: var(--velit-text-on-dark-2);
}

/* Indicador da unidade atual */
.velit-unit-switcher[data-current="premium"] .vus-option[data-unit="premium"],
.velit-unit-switcher[data-current="prime"] .vus-option[data-unit="prime"] {
    border-left-color: var(--velit-gold);
    background: var(--velit-bg-dark);
}

.velit-unit-switcher[data-current="premium"] .vus-option[data-unit="premium"] .vus-opt-name,
.velit-unit-switcher[data-current="prime"] .vus-option[data-unit="prime"] .vus-opt-name {
    color: var(--velit-gold);
}

@media (max-width: 768px) {
    .velit-unit-switcher .vus-label { display: none; }
    .velit-unit-switcher .vus-panel { min-width: 240px; }
}

@media (max-width: 480px) {
    /* Mobile: alinha o painel à esquerda em vez de centralizar (evita corte) */
    .velit-unit-switcher .vus-panel {
        left: 0;
        transform: translateY(-6px);
    }
    .velit-unit-switcher[data-open="true"] .vus-panel {
        transform: translateY(0);
    }
    .velit-unit-switcher .vus-panel::before {
        left: 20px;
        transform: rotate(45deg);
    }
}

/* ---- 22. Contact page (premium-contato.html) ---- */
.velit-contato-section {
    background: var(--velit-bg-light);
    padding: 100px 0 120px;
}

.contato-card {
    background: var(--velit-bg-light-2);
    border: 1px solid var(--velit-border-light);
    border-radius: 4px;
    /* revisão: padding com tokens (era 56×48 → padronizado para 48×48) */
    padding: var(--space-7) var(--space-7);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contato-card .card-eyebrow {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--velit-gold);
    margin-bottom: 16px;
}

.contato-card h3 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-light);
    font-size: 1.9rem;
    margin: 0 0 22px;
    line-height: 1.15;
}

.contato-card p {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-light-2);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 28px;
}

.contato-card .contato-address {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-light);
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* revisão: WhatsApp CTA padronizado com tokens; cor e hover via var. Mantém classe legada */
.contato-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--velit-wa-bg);
    color: #FFFFFF !important;
    padding: var(--space-4) var(--space-5);
    font-family: var(--velit-font-label);
    font-weight: 400;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: var(--label-md);
    text-decoration: none !important;
    border-radius: 2px;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
    align-self: flex-start;
}

.contato-wa-btn:hover {
    background: var(--velit-wa-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--velit-shadow-md);
}

.contato-wa-btn svg {
    width: 22px;
    height: 22px;
    fill: #FFFFFF;
    flex-shrink: 0;
}

.contato-card .contato-note {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--velit-text-on-light-3);
    margin-top: 22px;
    margin-bottom: 0;
}

.contato-card .contato-maps-link {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-gold) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--velit-gold);
    align-self: flex-start;
    padding-bottom: 4px;
    transition: color .25s, border-color .25s;
}

.contato-card .contato-maps-link:hover {
    color: var(--velit-text-on-light) !important;
    border-bottom-color: var(--velit-text-on-light);
}

.contato-social {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
}

.contato-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--velit-border-light);
    color: var(--velit-text-on-light-2);
    transition: border-color .25s, color .25s, background-color .25s;
    border-radius: 50%;
    text-decoration: none;
}

.contato-social a:hover {
    border-color: var(--velit-gold);
    color: var(--velit-gold);
}

.contato-social svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 768px) {
    .velit-contato-section { padding: 70px 0 80px; }
    .contato-card { padding: 40px 28px; }
    .contato-card h3 { font-size: 1.6rem; }
}

/* ---- 23. Hero imersivo (detail pages + overview + contato com parallax) ---- */
.velit-hero-immersive {
    position: relative;
    background-image: url('../images/parallax/hero-default.jpg'); /* fallback; pages podem sobrepor via inline style */
    background-size: cover;
    background-position: 50% calc(50% + var(--velit-parallax, 0px));
    background-repeat: no-repeat;
    background-color: var(--velit-bg-dark);
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    will-change: background-position;
    /* revisão: rítmo vertical padronizado entre heroes (era 80×100) */
    padding: var(--space-9) 0;
}

.velit-hero-immersive::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.72) 60%,
        rgba(10, 10, 10, 0.88) 100%);
    z-index: 1;
    pointer-events: none;
}

.velit-hero-immersive > .container {
    position: relative;
    z-index: 2;
}

/* Contraste correto do conteúdo do hero (corrige bug onde h1 herdava cor escura da body.velit-catalog) */
.velit-hero-immersive h1 {
    color: var(--velit-text-on-dark) !important;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 400;
    margin-bottom: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.velit-hero-immersive .velit-eyebrow {
    color: var(--velit-text-on-dark-2) !important;
}

.velit-hero-immersive > .container p {
    color: var(--velit-text-on-dark-2) !important;
}

.velit-hero-immersive .velit-breadcrumb a {
    color: var(--velit-text-on-dark-2) !important;
}

.velit-hero-immersive .velit-breadcrumb .sep {
    color: var(--velit-text-on-dark-3) !important;
}

.velit-hero-immersive .velit-breadcrumb .current {
    color: var(--velit-gold) !important;
}

@media (prefers-reduced-motion: reduce) {
    .velit-hero-immersive {
        background-position: center !important;
        will-change: auto;
    }
}

.velit-quick-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.76rem;
    color: var(--velit-text-on-dark-2);
}

.velit-quick-facts .qf-item {
    padding: 8px 18px;
    border: 1px solid var(--velit-border-dark);
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.4);
}

.velit-quick-facts .qf-item strong {
    color: var(--velit-gold);
    font-weight: 400;
    margin-right: 6px;
}

/* ---- 24. Seção "Sobre a categoria" ---- */
.velit-cat-intro {
    background: var(--velit-bg-light);
    /* revisão: padding com tokens (era 90×70 → 96×64) */
    padding: var(--space-9) 0 var(--space-8);
}

.velit-cat-intro h2 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-light);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin: 0 0 18px;
}

.velit-cat-intro .cat-intro-eyebrow {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--velit-gold);
    margin-bottom: 14px;
    display: block;
}

.velit-cat-intro p {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-light-2);
    line-height: 1.7;
    margin-bottom: 18px;
}

.velit-cat-intro .cat-base-amenities {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 24px;
}

.velit-cat-intro .cat-base-amenities li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--velit-border-light);
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-light);
    font-size: 0.94rem;
    break-inside: avoid;
}

.velit-cat-intro .cat-base-amenities li::before {
    content: '— ';
    color: var(--velit-gold);
    margin-right: 8px;
}

/* ---- 25. Grid de suítes individuais ---- */
.velit-suites-section {
    background: var(--velit-bg-light);
    /* revisão: padding com tokens (era 50×100 → 48×96) */
    padding: var(--space-7) 0 var(--space-9);
}

.velit-suites-section .section-header {
    text-align: center;
    margin-bottom: 56px;
}

.velit-suites-section .section-header h2 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-light);
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    margin: 8px 0 12px;
}

.velit-suites-section .section-header .section-sub {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-light-2);
}

.velit-suites-section .section-header .velit-divider {
    margin-top: 18px;
}

.velit-suite-grid {
    --bs-gutter-y: 1.5rem;
}

/* ---- 26. Card de suíte individual ---- */
.velit-suite-card {
    display: flex;
    flex-direction: column;
    background: var(--velit-bg-light-2);
    border: 1px solid var(--velit-border-light);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--velit-text-on-light) !important;
    height: 100%;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    position: relative;
    cursor: pointer;
}

.velit-suite-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(10, 10, 10, 0.12);
    border-color: var(--velit-gold);
}

.velit-suite-card .sc-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--velit-bg-light-3);
}

.velit-suite-card .sc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.velit-suite-card:hover .sc-image img {
    transform: scale(1.05);
}

.velit-suite-card .sc-number-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--velit-gold);
    color: var(--velit-bg-dark);
    font-family: var(--velit-font-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.74rem;
    padding: 6px 12px;
    border-radius: 2px;
    z-index: 2;
}

.velit-suite-card .sc-body {
    /* revisão: padding com tokens (era 24×26×28 → padronizado para 24×24×32) */
    padding: var(--space-5) var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.velit-suite-card .sc-title {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-light);
    font-size: 1.45rem;
    margin: 0 0 10px;
}

.velit-suite-card .sc-differentials {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    flex: 1;
}

.velit-suite-card .sc-differentials li {
    padding: 6px 0;
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-light);
    font-size: 0.92rem;
}

.velit-suite-card .sc-differentials li::before {
    content: '— ';
    color: var(--velit-gold);
    margin-right: 6px;
}

.velit-suite-card .sc-differentials.is-empty li {
    color: var(--velit-text-on-light-3);
    font-style: italic;
}

.velit-suite-card .sc-cta {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--velit-gold);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    margin-top: auto;
    transition: border-color .25s ease;
}

.velit-suite-card:hover .sc-cta {
    border-bottom-color: var(--velit-gold);
}

.velit-suite-card.is-pool {
    border: 2px solid var(--velit-gold) !important;
}

.velit-suite-card.is-pool .sc-number-badge {
    background: var(--velit-bg-dark);
    color: var(--velit-gold);
    border: 1px solid var(--velit-gold);
}

/* Cards sem foto */
.velit-suite-card--no-photo {
    cursor: default;
    pointer-events: none;
}
.velit-suite-card--no-photo:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--velit-border-light);
}
.sc-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
    border-bottom: 1px solid var(--velit-border-light);
}
.sc-photo-placeholder span {
    font-family: var(--velit-font-label);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--velit-gold);
    opacity: 0.7;
    border: 1px solid rgba(201, 168, 76, 0.35);
    padding: 8px 18px;
    border-radius: 2px;
}

/* Single-suite categorias (Padrão e Velit Pool) ocupam largura inteira */
@media (min-width: 992px) {
    .velit-suite-card.is-single {
        flex-direction: row;
        max-height: 380px;
    }
    .velit-suite-card.is-single .sc-image {
        flex: 0 0 50%;
        aspect-ratio: auto;
        min-height: 100%;
    }
    .velit-suite-card.is-single .sc-body {
        flex: 1;
        padding: 40px 48px;
        justify-content: center;
    }
}

/* ---- 27. Lightbox (Magnific Popup) per-suíte ---- */
.velit-suite-lightbox-wrap {
    background: rgba(10, 10, 10, 0.92) !important;
}

.velit-suite-lightbox-wrap .mfp-content {
    max-width: 980px;
}

.velit-suite-lightbox-content {
    background: var(--velit-bg-dark);
    border: 1px solid var(--velit-border-dark);
    border-radius: 4px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 6fr 5fr;
    color: var(--velit-text-on-dark);
}

.velit-suite-lightbox-content .vsl-gallery {
    background: var(--velit-bg-dark-2);
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
}

.velit-suite-lightbox-content .vsl-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.velit-suite-lightbox-content .vsl-meta {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
}

.velit-suite-lightbox-content .vsl-eyebrow {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--velit-gold);
    margin-bottom: 16px;
}

.velit-suite-lightbox-content h2 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-dark);
    font-size: 2.4rem;
    margin: 0 0 20px;
    line-height: 1.1;
}

.velit-suite-lightbox-content .vsl-section-label {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--velit-text-on-dark-3);
    margin: 24px 0 12px;
}

.velit-suite-lightbox-content .vsl-differentials,
.velit-suite-lightbox-content .vsl-amenities {
    list-style: none;
    padding: 0;
    margin: 0;
}

.velit-suite-lightbox-content .vsl-differentials li,
.velit-suite-lightbox-content .vsl-amenities li {
    padding: 6px 0;
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-dark);
    font-size: 0.94rem;
}

.velit-suite-lightbox-content .vsl-differentials li::before {
    content: '— ';
    color: var(--velit-gold);
    margin-right: 6px;
}

.velit-suite-lightbox-content .vsl-amenities {
    columns: 2;
    column-gap: 20px;
}

.velit-suite-lightbox-content .vsl-amenities li {
    color: var(--velit-text-on-dark-2);
    font-size: 0.88rem;
    break-inside: avoid;
}

/* revisão: lightbox WA CTA com tokens e variáveis de cor */
.velit-suite-lightbox-content .vsl-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--velit-wa-bg);
    color: #FFFFFF !important;
    padding: var(--space-3) var(--space-5);
    font-family: var(--velit-font-label);
    font-weight: 400;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: var(--label-md);
    text-decoration: none !important;
    border-radius: 2px;
    margin-top: var(--space-6);
    align-self: flex-start;
    transition: background-color .25s, transform .25s;
}

.velit-suite-lightbox-content .vsl-cta:hover {
    background: var(--velit-wa-bg-hover);
    transform: translateY(-2px);
}

.velit-suite-lightbox-content .vsl-cta svg {
    width: 18px;
    height: 18px;
    fill: #FFFFFF;
}

/* Close button da Magnific posicionado */
.mfp-close-btn-in .velit-suite-lightbox-content .mfp-close {
    color: var(--velit-text-on-dark);
}

@media (max-width: 768px) {
    .velit-suite-lightbox-content {
        grid-template-columns: 1fr;
    }
    .velit-suite-lightbox-content .vsl-meta {
        padding: 32px 28px;
    }
    .velit-suite-lightbox-content h2 { font-size: 1.9rem; }
}

/* ---- 28. CTA banner antes do footer (com parallax) ---- */
.velit-cta-banner {
    position: relative;
    background-color: var(--velit-bg-dark);
    background-image: url('../images/parallax/hero-default.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% calc(50% + var(--velit-parallax, 0px));
    color: var(--velit-text-on-dark);
    /* revisão: banner secundário com ritmo menor que o hero principal (era 100 → 64) */
    padding: var(--space-8) 0;
    text-align: center;
    border-top: 1px solid var(--velit-border-dark);
    overflow: hidden;
    will-change: background-position;
}

.velit-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.85) 100%);
    z-index: 1;
    pointer-events: none;
}

.velit-cta-banner > .container {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .velit-cta-banner { background-position: center !important; will-change: auto; }
}

.velit-cta-banner h2 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-dark);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    margin: 0 0 14px;
}

.velit-cta-banner p {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-dark-2);
    max-width: 600px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

.velit-cta-banner .velit-divider {
    margin: 0 auto 28px;
}

/* revisão: CTA banner WA com tokens e variáveis de cor */
.velit-cta-banner .cta-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--velit-wa-bg);
    color: #FFFFFF !important;
    padding: var(--space-4) var(--space-7);
    font-family: var(--velit-font-label);
    font-weight: 400;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-size: var(--label-md);
    text-decoration: none !important;
    border-radius: 2px;
    transition: background-color .25s, transform .25s, box-shadow .25s;
}

.velit-cta-banner .cta-wa-btn:hover {
    background: var(--velit-wa-bg-hover);
    transform: translateY(-3px);
    box-shadow: var(--velit-shadow-lg);
}

.velit-cta-banner .cta-wa-btn svg {
    width: 24px;
    height: 24px;
    fill: #FFFFFF;
}

/* ---- 29. Página Sobre (sobre.html) ---- */
body.velit-sobre {
    background-color: var(--velit-bg-light);
    color: var(--velit-text-on-light);
}

.velit-sobre-hero {
    position: relative;
    background-color: var(--velit-bg-dark);
    background-image: url('../images/parallax/hero-default.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% calc(50% + var(--velit-parallax, 0px));
    color: var(--velit-text-on-dark);
    /* revisão: alinhado com hero imersivo (era 140×110 → 96×96) */
    padding: var(--space-9) 0;
    text-align: center;
    border-bottom: 1px solid var(--velit-border-dark);
    overflow: hidden;
    will-change: background-position;
}

.velit-sobre-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.78) 100%);
    z-index: 1;
    pointer-events: none;
}

.velit-sobre-hero > .container {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .velit-sobre-hero { background-position: center !important; will-change: auto; }
}

.velit-sobre-hero .sobre-logo {
    max-width: 280px;
    height: auto;
    margin: 0 auto 32px;
    display: block;
}

.velit-sobre-hero h1 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-dark);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    margin: 0 0 16px;
    line-height: 1.15;
}

.velit-sobre-hero .sobre-tagline {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-dark-2);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.7;
}

.velit-sobre-section {
    padding: 100px 0;
}

.velit-sobre-section.is-dark {
    background: var(--velit-bg-dark);
    color: var(--velit-text-on-dark);
}

.velit-sobre-section .sobre-eyebrow {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--velit-gold);
    margin-bottom: 14px;
    display: block;
}

.velit-sobre-section h2 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    margin: 0 0 28px;
    line-height: 1.15;
}

.velit-sobre-section.is-dark h2 { color: var(--velit-text-on-dark); }

.velit-sobre-section p {
    font-family: var(--velit-font-body);
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 18px;
    font-size: 1.02rem;
}

.velit-sobre-section.is-dark p { color: var(--velit-text-on-dark-2); }
.velit-sobre-section:not(.is-dark) p { color: var(--velit-text-on-light-2); }

/* Bloco de citação destacada */
.velit-sobre-quote {
    border-left: 2px solid var(--velit-gold);
    padding: 24px 32px;
    font-family: var(--velit-font-display);
    font-weight: 400;
    font-style: italic;
    color: var(--velit-text-on-light);
    font-size: 1.4rem;
    line-height: 1.5;
    background: var(--velit-bg-light-2);
    border-radius: 0 4px 4px 0;
}

/* Grid de unidades */
.velit-sobre-units {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.velit-sobre-unit-card {
    background: var(--velit-bg-dark-2);
    border: 1px solid var(--velit-border-dark);
    border-radius: 4px;
    padding: 56px 40px;
    text-align: center;
    text-decoration: none !important;
    color: var(--velit-text-on-dark) !important;
    transition: border-color .35s, transform .35s, background-color .35s;
}

.velit-sobre-unit-card:hover {
    border-color: var(--velit-gold);
    background: var(--velit-bg-dark-3);
    transform: translateY(-4px);
}

/* revisão: variante para contato — card não-clicável como um todo, mas com
   botões internos (WhatsApp, Maps). Flex column com tudo centralizado.
   Sem hover transform. */
.velit-sobre-unit-card.is-contact {
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.velit-sobre-unit-card.is-contact:hover {
    transform: none;
    border-color: var(--velit-border-dark);
    background: var(--velit-bg-dark-2);
}
.velit-sobre-unit-card.is-contact .unit-logo {
    margin: 0 auto var(--space-5);
}
.velit-sobre-unit-card.is-contact .unit-address {
    margin: 0 auto var(--space-6);
}
.velit-sobre-unit-card.is-contact .contato-wa-btn {
    /* sobrescreve align-self: flex-start do .contato-wa-btn original */
    align-self: center;
    margin: 0 auto var(--space-4);
    /* mais anatômico: padding equilibrado e font um pouco maior */
    padding: var(--space-4) var(--space-6);
    font-size: var(--label-md);
    letter-spacing: var(--ls-default);
    /* leve sombra para destacar o CTA como ação principal */
    box-shadow: var(--velit-shadow-sm);
}
.velit-sobre-unit-card.is-contact .contato-wa-btn:hover {
    box-shadow: var(--velit-shadow-md);
}
.velit-sobre-unit-card.is-contact .velit-maps-link {
    display: inline-block;
    align-self: center;
    margin: 0 auto;
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-size: var(--label-xs);
    color: var(--velit-text-on-dark-2) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--velit-border-dark);
    padding-bottom: 4px;
    transition: color .25s, border-color .25s;
}
.velit-sobre-unit-card.is-contact .velit-maps-link:hover {
    color: var(--velit-gold) !important;
    border-bottom-color: var(--velit-gold);
}

.velit-sobre-unit-card .unit-logo {
    max-width: 220px;
    margin: 0 auto 32px;
    display: block;
}

.velit-sobre-unit-card .unit-address {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-text-on-dark-2);
    margin-bottom: 32px;
    line-height: 1.6;
}

.velit-sobre-unit-card .unit-cta {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-gold);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--velit-gold);
}

@media (max-width: 768px) {
    .velit-sobre-units { grid-template-columns: 1fr; }
}

/* Valores grid */
.velit-sobre-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.velit-sobre-value-card {
    background: var(--velit-bg-light-2);
    border: 1px solid var(--velit-border-light);
    border-radius: 4px;
    padding: 36px 24px;
    text-align: center;
}

.velit-sobre-value-card .value-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    color: var(--velit-gold);
}

.velit-sobre-value-card h3 {
    font-family: var(--velit-font-display);
    font-weight: 400;
    color: var(--velit-text-on-light);
    font-size: 1.3rem;
    margin: 0 0 10px;
}

.velit-sobre-value-card p {
    font-family: var(--velit-font-body);
    font-weight: 300;
    color: var(--velit-text-on-light-2);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) { .velit-sobre-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .velit-sobre-values { grid-template-columns: 1fr; } }

/* ---- 30. Responsivo final ---- */
@media (max-width: 991px) {
    .velit-hero-immersive { min-height: 400px; }
    .velit-quick-facts { font-size: 0.7rem; gap: 8px; }
    .velit-quick-facts .qf-item { padding: 6px 14px; }
}

@media (max-width: 576px) {
    .velit-hero-immersive { min-height: 340px; }
    .velit-suite-card .sc-body { padding: 20px 22px 24px; }
    .velit-suite-card .sc-title { font-size: 1.3rem; }
    .velit-cat-intro .cat-base-amenities { columns: 1; }
    .velit-cta-banner { padding: 60px 0; }
    .velit-sobre-section { padding: 70px 0; }
}

/* ---- 32. Suite gallery (Swiper dentro do lightbox) ---- */
.velit-suite-swiper {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--velit-bg-dark);
}

.velit-suite-swiper .swiper-wrapper {
    height: 100%;
}

.velit-suite-swiper .swiper-slide {
    background: var(--velit-bg-dark);
    overflow: hidden;
}

.velit-suite-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Setas de navegação */
.velit-suite-swiper .swiper-button-next,
.velit-suite-swiper .swiper-button-prev {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.65);
    border: 1px solid var(--velit-border-dark);
    color: var(--velit-gold);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.velit-suite-swiper .swiper-button-next:hover,
.velit-suite-swiper .swiper-button-prev:hover {
    background: var(--velit-bg-dark-3);
    border-color: var(--velit-gold);
    transform: scale(1.08);
}

.velit-suite-swiper .swiper-button-next::after,
.velit-suite-swiper .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 700;
    color: var(--velit-gold);
}

.velit-suite-swiper .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Pagination dots */
.velit-suite-swiper .swiper-pagination {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 5;
}

.velit-suite-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    margin: 0 5px !important;
    transition: background-color .25s ease, transform .25s ease;
}

.velit-suite-swiper .swiper-pagination-bullet-active {
    background: var(--velit-gold);
    transform: scale(1.3);
}

/* Counter "1/3" no canto superior direito */
.velit-suite-swiper .velit-slide-counter {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(10, 10, 10, 0.7);
    color: var(--velit-text-on-dark);
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--velit-border-dark);
}

.velit-suite-swiper .velit-slide-counter .cur {
    color: var(--velit-gold);
    margin-right: 2px;
}

/* Quando só há 1 slide, esconder nav e counter */
.velit-suite-swiper.is-single .swiper-button-next,
.velit-suite-swiper.is-single .swiper-button-prev,
.velit-suite-swiper.is-single .swiper-pagination,
.velit-suite-swiper.is-single .velit-slide-counter {
    display: none;
}

@media (max-width: 768px) {
    .velit-suite-swiper .swiper-button-next,
    .velit-suite-swiper .swiper-button-prev {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }
    .velit-suite-swiper .swiper-button-next::after,
    .velit-suite-swiper .swiper-button-prev::after {
        font-size: 13px;
    }
    .velit-suite-swiper .velit-slide-counter {
        font-size: 0.7rem;
        padding: 5px 12px;
        top: 10px;
        right: 10px;
    }
}

/* ---- 33. Cursor de zoom nas imagens da galeria do lightbox ---- */
.velit-suite-swiper .swiper-slide img {
    cursor: zoom-in;
}

/* ---- 34. Fullscreen viewer (overlay quando clica numa imagem da galeria) ---- */
.velit-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(8, 8, 8, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity .35s ease;
}

.velit-fullscreen-overlay.is-open {
    display: flex;
    opacity: 1;
}

.velit-fullscreen-overlay .vfs-header {
    flex: 0 0 auto;
    padding: 22px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.velit-fullscreen-overlay .vfs-caption {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--velit-text-on-dark-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.velit-fullscreen-overlay .vfs-counter {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: var(--velit-text-on-dark-2);
    padding: 6px 14px;
    border: 1px solid var(--velit-border-dark);
    border-radius: 999px;
}

.velit-fullscreen-overlay .vfs-counter .cur {
    color: var(--velit-gold);
}

.velit-fullscreen-overlay .vfs-close {
    background: transparent;
    border: 1px solid var(--velit-border-dark);
    color: var(--velit-text-on-dark);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: border-color .25s, color .25s, background-color .25s;
}

.velit-fullscreen-overlay .vfs-close:hover {
    border-color: var(--velit-gold);
    color: var(--velit-gold);
    background: rgba(255, 255, 255, 0.05);
}

.velit-fullscreen-overlay .vfs-close svg {
    width: 18px;
    height: 18px;
}

.velit-fullscreen-overlay .vfs-content {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.velit-fullscreen-overlay .swiper {
    width: 100%;
    height: 100%;
}

.velit-fullscreen-overlay .swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px 90px 60px;
}

.velit-fullscreen-overlay .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    pointer-events: none;
}

.velit-fullscreen-overlay .swiper-button-next,
.velit-fullscreen-overlay .swiper-button-prev {
    width: 56px;
    height: 56px;
    margin-top: -28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--velit-border-dark);
    color: var(--velit-gold);
    transition: background-color .25s, border-color .25s, transform .25s;
}

.velit-fullscreen-overlay .swiper-button-next:hover,
.velit-fullscreen-overlay .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--velit-gold);
    transform: scale(1.06);
}

.velit-fullscreen-overlay .swiper-button-next::after,
.velit-fullscreen-overlay .swiper-button-prev::after {
    font-size: 22px;
    font-weight: 700;
    color: var(--velit-gold);
}

.velit-fullscreen-overlay .swiper-pagination {
    bottom: 22px;
    text-align: center;
}

.velit-fullscreen-overlay .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4);
    width: 10px;
    height: 10px;
    opacity: 1;
    margin: 0 6px !important;
    transition: background-color .25s, transform .25s;
}

.velit-fullscreen-overlay .swiper-pagination-bullet-active {
    background: var(--velit-gold);
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .velit-fullscreen-overlay .vfs-header { padding: 14px 18px; gap: 12px; }
    .velit-fullscreen-overlay .vfs-caption { font-size: 0.68rem; letter-spacing: 0.16em; }
    .velit-fullscreen-overlay .vfs-counter { font-size: 0.68rem; padding: 4px 10px; }
    .velit-fullscreen-overlay .vfs-close { width: 38px; height: 38px; }
    .velit-fullscreen-overlay .swiper-slide { padding: 12px 56px 50px; }
    .velit-fullscreen-overlay .swiper-button-next,
    .velit-fullscreen-overlay .swiper-button-prev { width: 42px; height: 42px; margin-top: -21px; }
    .velit-fullscreen-overlay .swiper-button-next::after,
    .velit-fullscreen-overlay .swiper-button-prev::after { font-size: 16px; }
}

/* ---- 35. Classes utility (revisão UI/UX: consolidar inline styles repetidos) ---- */

/* Logo no header — substitui style="max-width: 200px; height: auto;" */
.velit-logo-header {
    max-width: 200px;
    height: auto;
}

.velit-logo-header.is-sm { max-width: 160px; }
.velit-logo-header.is-xl { max-width: 240px; }

/* Wrap do banner 4h (compensa para "abraçar" o hero) — substitui
   style="margin-top: -28px; position: relative; z-index: 2/3;" */
.velit-rule-banner-wrap {
    margin-top: calc(var(--space-6) * -1);   /* -32px ≈ -28 original */
    position: relative;
    z-index: 3;
}

/* Header centralizado de seção — substitui style="text-align: center; margin-bottom: …" */
.velit-section-header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.velit-section-header.is-lg {
    margin-bottom: var(--space-8);
}

/* Bloco de endereço do footer — substitui um inline style longo repetido */
.velit-footer-address {
    color: var(--velit-text-on-dark-2);
    font-family: var(--velit-font-body);
    font-weight: 300;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Container centralizado de logo do footer — substitui inline com text-align center + margin */
.velit-footer-logo-wrap {
    text-align: center;
    margin-bottom: var(--space-6);
}

.velit-footer-logo-wrap img {
    max-width: 160px;
    height: auto;
    opacity: 0.9;
    margin-bottom: var(--space-5);
}

/* Tag de "+ N amenidades inclusas" — repetido como inline em todos os lightboxes */
.velit-amenities-note {
    font-family: var(--velit-font-label);
    font-weight: 300;
    letter-spacing: var(--ls-default);
    text-transform: uppercase;
    font-size: var(--label-xs);
    color: var(--velit-text-on-dark-3);
    margin: var(--space-3) 0 0;
}

/* ---- 36. Tokenização tipográfica (revisão UI/UX) ---- */

/* Eyebrows / labels padronizadas com escala canônica */
.velit-eyebrow,
.cat-card-eyebrow,
.cat-intro-eyebrow,
.sobre-eyebrow,
.unit-eyebrow,
.upgrade-label,
.vsl-eyebrow {
    /* revisão: letter-spacing harmonizado em ls-xwide para todas as eyebrows */
    letter-spacing: var(--ls-xwide);
}

/* CTAs com letter-spacing default consistente */
.cat-card-cta,
.sc-cta,
.unit-cta,
.upgrade-cta,
.cs-back,
.velit-back-link {
    letter-spacing: var(--ls-wide);
}

/* ---- 37. Back-to-top — offset acima do botão WhatsApp flutuante ---- */
.rts__back__top.show {
    bottom: 80px;
}

/* ---- 38. Smooth in/out global ---- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- Sobre: stats grid (história) ---- */
.velit-sobre-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
}
.sobre-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-number {
    font-family: var(--velit-font-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 300;
    color: var(--velit-gold);
    line-height: 1;
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--velit-text-on-dark-2);
}