/* ═══════════════════════════════════════════════════════════════════
   VBM — TEMA "PREMIUM NOIR" (preto profundo + dourado metalizado)
   Carregado DEPOIS de site.css: redefine as variáveis e ajusta os
   componentes que usavam cores claras fixas. Para voltar ao tema
   anterior, basta remover o <link> deste arquivo das páginas.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --deep: #0A0B0D;
  --deep-2: #060708;
  --ivory: #0F1113;          /* fundo base */
  --sand: #24272B;
  --sand-soft: #16181B;      /* superfícies elevadas */
  --gold: #C9A961;
  --gold-ink: #D2B677;
  --gold-soft: rgba(201, 169, 97, .16);
  --petrol: #C9A961;         /* ações e foco passam a ser dourados */
  --petrol-hover: #E4CB8E;
  --ink: #ECE6D9;
  --ink-soft: #A7A197;
  --on-deep: #ECE6D9;
  --on-deep-soft: #9E998F;
  --line: rgba(201, 169, 97, .16);
  --line-deep: rgba(201, 169, 97, .16);
  --panel: #131518;
  --field: #0B0C0E;
  --metal: linear-gradient(120deg, #8A672B 0%, #D9BC7C 22%, #F4E4B5 38%, #B98F45 56%, #E7CF94 74%, #8E6A2D 100%);
  --metal-line: linear-gradient(90deg, rgba(201, 169, 97, 0), #D9BC7C 30%, #F4E4B5 50%, #D9BC7C 70%, rgba(201, 169, 97, 0));
  --radius: 4px;
}

/* ───────── Base ───────── */
body { background: var(--ivory); color: var(--ink); }
h1, h2, h3, h4 { color: #F4EFE5; }
::selection { background: rgba(201, 169, 97, .35); color: #fff; }
:focus-visible { outline-color: var(--gold); }
.bg-sand { background: #121417; }
.on-deep { background: #0A0B0D; }
section + section { border-top: 1px solid rgba(201, 169, 97, .08); }

/* Títulos em itálico com brilho metálico */
.hero h1 em, .page-hero h1 em, .sec-head h2 em, h2 em {
  font-style: italic; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow { color: var(--gold); letter-spacing: .28em; font-size: 12px; }
.eyebrow::before { content: ""; display: inline-block; width: 34px; height: 1px; margin-right: 14px; vertical-align: middle; background: var(--metal); }
.sec-head h2 { font-weight: 500; }
.sec-head p { color: var(--ink-soft); }

/* ───────── Botões ───────── */
.btn { border-radius: 2px; letter-spacing: .06em; text-transform: uppercase; font-size: 13.5px; }
.btn-sm { font-size: 12.5px; }
.btn-primary {
  background: var(--metal); background-size: 220% 100%; background-position: 0 0; color: #15120C; border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 28px -14px rgba(201, 169, 97, .7);
  transition: background-position .6s var(--ease), transform .25s var(--ease), box-shadow .25s;
}
.btn-primary:hover { background: var(--metal); background-size: 220% 100%; background-position: 100% 0; }
.on-deep .btn-primary, .hero .btn-primary, .navbar .btn-primary, .page-hero .btn-primary { border: 0; }
.btn-ghost { border-color: rgba(201, 169, 97, .45); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(201, 169, 97, .08); color: #fff; }
.btn-light { border-color: rgba(236, 230, 217, .45); color: #fff; background: rgba(10, 11, 13, .35); backdrop-filter: blur(4px); }
.btn-light:hover { background: #F4EFE5; color: #0A0B0D; border-color: #F4EFE5; }
.btn-wa { text-transform: none; letter-spacing: .01em; font-size: 15px; }
.link-arrow, .on-deep .link-arrow { color: var(--gold); letter-spacing: .04em; }
.btn .spinner { border-color: rgba(21, 18, 12, .3); border-top-color: #15120C; }

/* ───────── Cabeçalho ───────── */
.navbar { background: linear-gradient(to bottom, rgba(6, 7, 8, .7), rgba(6, 7, 8, 0)); }
.navbar.scrolled, .navbar.solid {
  background: rgba(8, 9, 10, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none;
}
.navbar.scrolled::after, .navbar.solid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--metal-line); opacity: .55; }
.logo-vbm { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links a { font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; }
.nav-links a.active { box-shadow: inset 0 -1px 0 var(--gold); color: var(--gold); }
@media (max-width: 960px) {
  .nav-menu { background: #08090A; border-bottom: 1px solid rgba(201, 169, 97, .2); }
  .nav-open .navbar { background: #08090A; }
  .nav-links a { font-size: 15px; }
}

/* ───────── Topo da página inicial ───────── */
/* Desktop: texto sobre preto à esquerda, foto vertical à direita (largura = 3/4 da altura)
   com a borda esquerda da foto esfumada no preto */
.hero {
  position: relative; isolation: isolate;
  background-color: #08090A;
  background-image: radial-gradient(ellipse 50% 60% at 20% 40%, rgba(201, 169, 97, .08), rgba(201, 169, 97, 0));
}
/* A foto fica numa caixa própria à direita: a borda esfumada acompanha a foto
   em qualquer altura de tela (antes, com o topo mais alto que a tela, aparecia um corte) */
.hero::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: -1;
  width: clamp(520px, 60%, 980px);
  background: url("../img/premium/hero-corolla-noite.jpg") 50% 72% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 38%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 38%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, #08090A 0%, rgba(8, 9, 10, 0) 28%),
    linear-gradient(to bottom, rgba(8, 9, 10, .8) 0%, rgba(8, 9, 10, 0) 22%);
}
@media (min-width: 701px) and (max-width: 1100px) {
  .hero { background-image:
      linear-gradient(100deg, rgba(6, 7, 8, .95) 0%, rgba(6, 7, 8, .7) 45%, rgba(6, 7, 8, .2) 80%),
      linear-gradient(to top, #08090A, rgba(8, 9, 10, 0) 40%),
      url("../img/premium/hero-corolla-noite.jpg");
    background-size: cover; background-position: 60% 62%; }
  .hero::before, .hero::after { display: none; }
}
@media (max-width: 700px) {
  .hero {
    background-image:
      linear-gradient(to bottom, rgba(6, 7, 8, .5) 0%, rgba(6, 7, 8, .78) 30%, rgba(6, 7, 8, .55) 62%, rgba(6, 7, 8, .9) 92%, #08090A 100%),
      url("../img/premium/hero-corolla-noite.jpg");
    background-size: cover; background-position: 58% 88%;
  }
  .hero::before, .hero::after { display: none; }
  .hero-foot { font-size: 11px; }
}
.hero h1 { font-weight: 500; letter-spacing: -.01em; }
.hero-lead { color: rgba(244, 239, 229, .82); }
.hero-foot { border-top: 0; position: relative; color: rgba(244, 239, 229, .7); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.hero-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--metal-line); opacity: .6; }
.hero-foot li::before { background: var(--metal); }

/* Faixa de credenciais logo abaixo do topo */
.trust-strip { padding: 0; background: #08090A; border-top: 0; }
.trust-strip ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin: 0; padding: 22px 0; list-style: none;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.trust-strip li { display: flex; align-items: center; gap: 12px; }
.trust-strip li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--metal); flex: none; }
.trust-strip::after { content: ""; display: block; height: 1px; background: var(--metal-line); opacity: .35; }

/* ───────── Topo das páginas internas ───────── */
.page-hero {
  background-color: #08090A;
  background-image: radial-gradient(ellipse 60% 120% at 85% 0%, rgba(201, 169, 97, .12), rgba(201, 169, 97, 0) 60%);
}
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--metal-line); opacity: .45; }
.page-hero.has-photo::before { background: linear-gradient(to top, rgba(6, 7, 8, .95) 12%, rgba(6, 7, 8, .4) 70%, rgba(6, 7, 8, .55)); }
.page-hero h1 { font-weight: 500; }

/* ───────── Formulários ───────── */
.steps li::before { border-color: rgba(201, 169, 97, .35); color: var(--ink); }
.steps li.current::before { background: var(--metal); border-color: transparent; color: #15120C; }
.steps li.done::before { background: #24272B; border-color: #24272B; color: var(--gold); }
.form-card {
  background: linear-gradient(180deg, #17191C, #111315); color: var(--ink);
  border: 1px solid rgba(201, 169, 97, .22); border-radius: 4px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .03);
  position: relative;
}
.form-card::before { content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; background: var(--metal-line); }
.field label, .trip-type-label { color: #DCD5C7; }
.field input, .field select, .field textarea { background-color: var(--field); border-color: rgba(201, 169, 97, .22); color: var(--ink); border-radius: 3px; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A961' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field .tel-group select { background-position: right 10px center; }
.field select option, .field select optgroup { background: #111315; color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: #6E6961; }
.field input:focus, .field select:focus, .field textarea:focus { background-color: #0E0F11; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, .16); }
.field input[readonly] { background-color: #1A1C1F; color: var(--gold-ink); border-color: rgba(201, 169, 97, .3); }
.field input[type="date"], .field input[type="time"] { color-scheme: dark; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #D06A5E; box-shadow: 0 0 0 3px rgba(208, 106, 94, .15); }
.field .error-msg { color: #E58C80; }
.trip-options span { background: var(--field); border-color: rgba(201, 169, 97, .22); }
.trip-options b { color: #F4EFE5; }
.trip-options input:checked + span { background: rgba(201, 169, 97, .09); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.flight-box, .trip-summary { background: var(--field); border-color: rgba(201, 169, 97, .18); }
.flight-title { color: var(--gold-ink); letter-spacing: .04em; }
.pickup-hint b { color: var(--gold); }
.switch { background: #2A2D31; }
.toggle-row input:checked + .switch { background: var(--gold); }
.form-error { background: rgba(166, 58, 50, .14); border-color: rgba(229, 140, 128, .35); }
.form-error p { color: #F0A39B; }
.success-icon { background: rgba(201, 169, 97, .12); }
.passeio-tag, .return-route, .aviso { background: #1A1C1F; }

/* ───────── Cartões e listas ───────── */
.service .num, .svc-detail .num, .mvv .num { color: var(--gold); }
.service h3, .pillars h3, .mvv h3 { font-weight: 500; }
.review { border-top: 1px solid rgba(201, 169, 97, .55); }
.review .stars { color: var(--gold); }
.creds span { border-color: rgba(201, 169, 97, .35); }
.faq summary { font-weight: 500; }
.dest-card, .tour { background: var(--panel); border-color: rgba(201, 169, 97, .14); border-radius: 4px; }
.dest-card:hover, .dest-card.active { border-color: rgba(201, 169, 97, .55); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9); }
.ficha { background: var(--panel); border: 1px solid rgba(201, 169, 97, .18); border-radius: 4px; }
.photo-box { background: linear-gradient(135deg, #1F2226, #0A0B0D); }
.tour-img { background: linear-gradient(135deg, #1F2226, #121417); }
.chip { border-color: rgba(201, 169, 97, .28); color: var(--ink); }
.chip[aria-pressed="true"], .on-deep .chip[aria-pressed="true"] { background: var(--metal); border-color: transparent; color: #15120C; }
.tab { border-color: rgba(201, 169, 97, .28); color: var(--ink); }
.tab.active { background: var(--metal); border-color: transparent; color: #15120C; }
.gallery button { background: #1A1C1F; border-radius: 2px; }
.map-wrap { background: #15171A; border: 1px solid rgba(201, 169, 97, .18); border-radius: 4px; }
.leaflet-tile-pane { filter: grayscale(.35) contrast(1.05) brightness(.92); }
.vbm-pin span { background: #0A0B0D; }
.leaflet-tooltip.vbm-tip { background: #0A0B0D; border: 1px solid rgba(201, 169, 97, .4); }
.dest-list button[aria-pressed="true"] { background: rgba(201, 169, 97, .1); }

/* Frota */
.fleet { background: rgba(201, 169, 97, .16); border-color: rgba(201, 169, 97, .22); border-radius: 4px; }
.vehicle { background: var(--panel); }
.vehicle .cap { color: var(--gold-ink); letter-spacing: .04em; }
.vehicle-photo { transition: transform .8s var(--ease), filter .8s; filter: saturate(1.02) contrast(1.03); }
.vehicle { overflow: hidden; }
.vehicle:hover .vehicle-photo { transform: scale(1.03); }
.partner { border-color: rgba(201, 169, 97, .4); color: var(--gold-ink); }

/* Fotos com moldura fina dourada */
.svc-photo, .framed { border-radius: 2px; outline: 1px solid rgba(201, 169, 97, .35); outline-offset: 7px; }

/* Rodapé */
.site-footer { background: #060708; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--metal-line); opacity: .5; }
.f-title { color: var(--gold); }
.lb-btn { background: rgba(10, 11, 13, .8); border-color: rgba(201, 169, 97, .35); }
.lb-btn:hover { background: var(--gold); color: #0A0B0D; }
.lightbox { background: rgba(4, 5, 6, .96); }
.lang-switch a[aria-current] { color: var(--gold); }

/* ═══════════════════ EXPERIÊNCIA VBM (mosaico de fotos) ═══════════════════ */
.exp-mosaic { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
@media (min-width: 900px) { .exp-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 16px; } }
.exp-mosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: 2px; background: #15171A; }
.exp-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .8s; filter: saturate(.96); }
.exp-mosaic figure:hover img { transform: scale(1.045); filter: saturate(1.05); }
.exp-mosaic figure::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(201, 169, 97, 0); transition: border-color .5s; pointer-events: none; }
.exp-mosaic figure:hover::after { border-color: rgba(201, 169, 97, .55); }
.exp-mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px;
  background: linear-gradient(to top, rgba(6, 7, 8, .85), rgba(6, 7, 8, 0));
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #F4EFE5;
}
.exp-mosaic figcaption::before { content: ""; display: block; width: 22px; height: 1px; margin-bottom: 8px; background: var(--metal); }
.m-tall { grid-row: span 2; }
.m-wide { grid-column: span 2; }
@media (min-width: 900px) {
  .m-a { grid-column: 1; grid-row: 1 / span 2; }
  .m-b { grid-column: 2 / span 2; grid-row: 1; }
  .m-c { grid-column: 4; grid-row: 1 / span 2; }
  .m-d { grid-column: 2; grid-row: 2; }
  .m-e { grid-column: 3; grid-row: 2; }
}
@media (max-width: 899px) { .m-b { grid-column: span 2; } .m-a, .m-c { grid-row: span 2; } }

/* Foto ao lado do texto (Por que VBM / Sobre) */
.about-photo { margin: 0 0 28px; position: relative; }
.about-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.about-photo figcaption { margin-top: 12px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }

/* Faixa de detalhes (página Frota) */
.detail-strip { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .detail-strip { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 230px 230px; } .detail-strip .d-big { grid-row: span 2; } }
.detail-strip figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; min-height: 200px; }
.detail-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.detail-strip figure:hover img { transform: scale(1.04); }
.detail-strip figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #F4EFE5; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }

/* Cotação em etapas no tema escuro */
.wiz-choice, .wiz-op, .stepper, .wiz-summary, .wiz-pix { border-color: rgba(201, 169, 97, .22); }
.wiz-choice b { color: #F4EFE5; }
.wiz-progress { background: rgba(201, 169, 97, .14); }
.wiz-progress span { background: var(--metal); }
.wiz-op-val, .wiz-pix-val b { color: #F4EFE5; }
.wiz-pix .wiz-copy { background: transparent; }
.wiz-check input { accent-color: var(--gold); }
.cookie-bar { background: linear-gradient(180deg, #17191C, #111315); border-color: rgba(201, 169, 97, .28); }
.cookie-bar a { color: var(--gold); }