/* ===========================================================
   ROTEIRO DE TROPELIAS — Design System v2
   Signature: "The Route Mark" — a gold line tracing a journey
   from an open circle (pickup) to a filled circle (destination).
   Aesthetic: showroom lighting. Deep ink, pools of warm brass
   light, filmic grain, and one bright object per view.
   =========================================================== */

:root{
  --ink:        #08080A;
  --ink-2:      #0D0D10;
  --charcoal:   #141418;
  --graphite:   #3A3A3F;
  --mist:       #A2A2A8;
  --mist-dark:  #6B6B72;
  --paper:      #F6F3EE;
  --paper-2:    #EBE7DE;
  --gold:       #B08D52;
  --gold-soft:  #E0CBA0;
  --gold-lit:   #F0DFB8;
  --gold-deep:  #7A5C33;

  --line:       rgba(224,203,160,0.13);
  --line-soft:  rgba(224,203,160,0.07);
  --line-dark:  rgba(8,8,10,0.12);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-data:    "JetBrains Mono", "SFMono-Regular", monospace;

  --container: 1240px;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:110px; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
/* fallback for browsers without :focus-visible */
:focus{ outline:2px solid var(--gold-soft); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }
.skip-link{
  position:fixed; left:16px; top:12px; z-index:400;
  padding:10px 14px; border-radius:2px; background:var(--gold-lit); color:var(--ink);
  font-size:13px; font-weight:700; transform:translateY(-160%); transition:transform .2s;
}
.skip-link:focus{ transform:translateY(0); }

/* ---------- Filmic grain: the single biggest depth cue ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:.038; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-0.018em;
  margin:0;
  text-wrap:balance;
}
h1{ font-weight:400; }
em{ font-style:italic; color:var(--gold-soft); }

.eyebrow{
  font-family:var(--font-data);
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-soft);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:""; width:28px; height:1px; display:inline-block;
  background:linear-gradient(90deg, transparent, var(--gold));
}

.container{ max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding:clamp(72px,11vw,156px) 0; position:relative; overflow:hidden; }
.section--dim{ background:var(--charcoal); }
.section--paper{ background:var(--paper); color:var(--ink); }
.section--paper .eyebrow{ color:var(--gold-deep); }
.section--paper .eyebrow::before{ background:linear-gradient(90deg, transparent, var(--gold-deep)); }

/* Hairline gold divider between dark sections */
.section--dim::before,
.section--dim::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.section--dim::before{ top:0; }
.section--dim::after{ bottom:0; }

/* Ambient light pools — the "showroom" cue */
.glow{
  position:absolute; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(176,141,82,.16), transparent 68%);
  filter:blur(30px);
}
.glow--tr{ width:780px; height:560px; right:-180px; top:-220px; }
.glow--bl{ width:640px; height:460px; left:-200px; bottom:-200px;
  background:radial-gradient(circle, rgba(176,141,82,.10), transparent 70%); }

/* Calçada lattice — Lisbon pavement, held very quiet */
.calcada{
  position:absolute; inset:0; pointer-events:none; opacity:.055;
  background-image:
    linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%),
    linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%);
  background-size:38px 38px;
  background-position:0 0, 19px 19px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
}

/* ---------- Route Mark / wordmark ---------- */
.route-mark{ display:inline-flex; align-items:center; gap:11px; }
.route-mark svg{ width:36px; height:15px; overflow:visible; }
.route-mark path{ fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:60; stroke-dashoffset:60; animation:draw 1.6s var(--ease-out) forwards .2s; }
.route-mark circle:first-of-type{ fill:none; stroke:var(--gold); stroke-width:1.4; }
.route-mark circle:last-of-type{ fill:var(--gold); }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.wordmark{ font-family:var(--font-display); font-size:19px; letter-spacing:.01em; white-space:nowrap; }
.wordmark b{ font-weight:600; color:var(--gold-soft); }
.section--paper .wordmark b{ color:var(--gold-deep); }

/* ---------- Brand logo ---------- */
.brand-lockup{ display:inline-flex; align-items:center; flex:0 0 auto; }
.brand-logo{
  display:block; width:84px; height:84px; object-fit:contain;
}
.brand-lockup--footer .brand-logo{ width:122px; height:122px; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:220;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--pad);
  background:linear-gradient(to bottom, rgba(8,8,10,.92), rgba(8,8,10,.45) 55%, transparent);
  transition:padding .4s var(--ease), background .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  padding-top:14px; padding-bottom:14px;
  box-shadow:0 1px 0 var(--line), 0 20px 40px -30px rgba(0,0,0,.9);
}
.nav-links{ display:flex; gap:36px; font-size:13.5px; letter-spacing:.01em; }
.nav-links a{ color:rgba(246,243,238,.72); transition:color .25s; position:relative; padding:4px 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold-soft); transition:right .35s var(--ease-out);
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after{ right:0; }
.nav-links a.active{ color:var(--gold-soft); }
.nav-links a.active::after{ right:0; background:var(--gold); }
.header-actions{ display:flex; align-items:center; gap:16px; }
.lang-toggle{ display:flex; border:1px solid var(--line); border-radius:22px; overflow:hidden; font-family:var(--font-data); font-size:10.5px; }
.lang-toggle button{ background:none; border:none; color:var(--mist); padding:7px 13px; letter-spacing:.08em; transition:.25s; }
.lang-toggle button.active{ background:linear-gradient(180deg, var(--gold-soft), var(--gold)); color:var(--ink); font-weight:600; }
.menu-btn{ display:none; position:relative; z-index:210; background:none; border:none; color:var(--paper); padding:9px; }
.menu-btn rect{
  transform-box:fill-box; transform-origin:center;
  transition:transform .3s var(--ease-out), opacity .2s;
}
.menu-btn[aria-expanded="true"] rect:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] rect:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] rect:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; font-size:12px; letter-spacing:.11em; text-transform:uppercase; font-weight:700;
  border:1px solid transparent; border-radius:2px; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), color .3s, border-color .3s, background .3s;
}
.btn-gold{
  background:linear-gradient(160deg, var(--gold-lit) 0%, var(--gold-soft) 35%, var(--gold) 100%);
  color:#1A1408;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 12px 30px -14px rgba(176,141,82,.7);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 20px 44px -16px rgba(224,203,160,.75); }
.btn-ghost{ border-color:var(--line); color:var(--paper); background:rgba(246,243,238,.02); }
.btn-ghost:hover{ border-color:var(--gold-soft); color:var(--gold-lit); background:rgba(224,203,160,.06); transform:translateY(-2px); }
.section--paper .btn-ghost{ border-color:var(--line-dark); color:var(--ink); background:transparent; }
.section--paper .btn-ghost:hover{ border-color:var(--gold-deep); color:var(--gold-deep); background:rgba(122,92,51,.05); }
.btn-sm{ padding:11px 20px; font-size:10.5px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:110px; padding-bottom:80px;
  background:
    radial-gradient(ellipse 70% 55% at 72% 42%, rgba(176,141,82,.20), transparent 62%),
    radial-gradient(ellipse 90% 60% at 20% 100%, rgba(176,141,82,.07), transparent 60%),
    linear-gradient(175deg, #08080A 0%, #0E0E12 48%, #141418 100%);
  overflow:hidden;
}
/* scrim: guarantees the copy always wins against the artwork */
.hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(8,8,10,.97) 0%, rgba(8,8,10,.92) 42%, rgba(8,8,10,.80) 65%, rgba(8,8,10,.28) 83%, rgba(8,8,10,0) 96%);
}
/* vignette keeps the eye centred */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse 96% 88% at 50% 46%, transparent 52%, rgba(0,0,0,.62) 100%);
}
.hero-art{
  position:absolute; right:-5%; top:57%; transform:translateY(-50%);
  width:48%; max-width:700px; z-index:1;
  /* Dissolve os quatro lados da arte para a integrar no fundo do herói. */
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 28%, #000 68%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.84) 30%, #000 57%, #000 88%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 28%, #000 68%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.84) 30%, #000 57%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
}
.hero-content{ position:relative; z-index:3; width:100%; max-width:var(--container); }
.hero-copy{ max-width:620px; margin:0 auto; text-align:center; }
.hero-branding{ display:inline-flex; flex-direction:column; align-items:center; max-width:max-content; }
.hero-brand-logo{
  display:block; width:126px; height:126px; object-fit:contain;
  margin:0 0 22px;
}
.hero h1{ font-size:clamp(40px, 6.2vw, 82px); margin:26px 0 24px; letter-spacing:-0.03em; }
.hero p.lead{ font-size:clamp(16px,1.25vw,18.5px); color:var(--mist); max-width:490px; margin:0 auto 40px; line-height:1.7; }
.hero-ctas{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; justify-content:center; gap:52px; margin-top:70px; padding-top:34px; position:relative; }
.hero-stats::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:220px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.hero-stats div b{ display:block; font-family:var(--font-display); font-size:32px; color:var(--gold-soft); line-height:1; margin-bottom:8px; }
.hero-stats div span{ font-size:11.5px; color:var(--mist); letter-spacing:.06em; }
.scroll-cue{
  position:absolute; bottom:32px; left:var(--pad); z-index:3;
  font-family:var(--font-data); font-size:10px; letter-spacing:.24em; color:var(--mist-dark);
  display:flex; align-items:center; gap:12px;
}
.scroll-cue .line{ width:1px; height:44px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; top:-44px; left:0; width:1px; height:44px;
  background:linear-gradient(var(--gold-lit), transparent); animation:trickle 2.6s var(--ease) infinite;
}
@keyframes trickle{ 0%{transform:translateY(0)} 60%,100%{transform:translateY(88px)} }

/* ---------- Section heads ---------- */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:64px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(30px,4.4vw,54px); max-width:660px; margin-top:20px; }
.section-head p{ max-width:380px; color:var(--mist); font-size:15px; }
.section--paper .section-head p{ color:var(--graphite); }

/* ---------- Feature grid ---------- */
.grid{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.feature{
  background:linear-gradient(165deg, rgba(246,243,238,.035), rgba(246,243,238,0) 60%), var(--ink);
  padding:42px 32px; transition:background .45s var(--ease);
}
.feature:hover{ background:linear-gradient(165deg, rgba(224,203,160,.08), rgba(224,203,160,0) 65%), var(--ink-2); }
.section--paper .feature{ background:linear-gradient(165deg, rgba(8,8,10,.03), transparent 60%), var(--paper); }
.section--paper .feature:hover{ background:linear-gradient(165deg, rgba(122,92,51,.07), transparent 65%), var(--paper); }
.feature .num{ font-family:var(--font-data); font-size:10.5px; color:var(--gold); letter-spacing:.16em; }
.feature h2, .feature h3{ font-size:21px; margin:18px 0 12px; }
.feature p{ color:var(--mist); font-size:14px; line-height:1.7; }
.section--paper .feature p{ color:var(--graphite); }

/* ---------- Fleet ---------- */
.fleet-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.vehicle-card{
  position:relative; padding:0 0 38px; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:3px;
  background:linear-gradient(180deg, rgba(246,243,238,.04), rgba(8,8,10,0) 42%), var(--ink);
  transition:border-color .45s var(--ease), transform .55s var(--ease-out), box-shadow .55s var(--ease);
}
.vehicle-card:hover{
  border-color:rgba(224,203,160,.32); transform:translateY(-6px);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(224,203,160,.06);
}
/* showroom stage behind each car */
.vehicle-stage{
  position:relative; padding:34px 28px 8px;
  background:radial-gradient(ellipse 62% 78% at 50% 42%, rgba(176,141,82,.20), transparent 70%);
}
.vehicle-illustration{ width:100%; height:auto; display:block; position:relative; z-index:1; }
.vehicle-stage--photo{
  height:270px; padding:0; overflow:hidden;
  background:linear-gradient(145deg, #f5f5f5, #d9d9d9);
}
.vehicle-photo{ width:100%; height:100%; display:block; object-fit:cover; }
.vehicle-photo--s{ object-position:center 65%; }
.vehicle-photo--v{ object-fit:contain; background:linear-gradient(145deg, #f3f3f3, #d9d9d9); }
.vehicle-body{ padding:0 34px; }
.vehicle-card .tag{ font-family:var(--font-data); font-size:10px; letter-spacing:.2em; color:var(--gold-soft); }
.vehicle-card h2, .vehicle-card h3{ font-size:clamp(24px,2.2vw,31px); margin:14px 0 8px; }
.vehicle-card .sub{ color:var(--mist); font-size:14px; margin-bottom:30px; }
.vehicle-specs{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin-bottom:28px; font-size:13.5px; }
.vehicle-specs div{ padding-left:13px; border-left:1px solid var(--line); }
.vehicle-specs div span{ display:block; color:var(--mist-dark); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; font-family:var(--font-data); }
.vehicle-specs div b{ font-family:var(--font-data); font-weight:500; color:var(--paper); }
.vehicle-card .perfect-for{ font-size:13.5px; color:var(--mist); line-height:1.7; border-top:1px solid var(--line-soft); padding-top:20px; margin-bottom:26px; }

/* ---------- Service rows ---------- */
.service-row{
  display:grid; grid-template-columns:64px 1fr 190px; gap:26px; align-items:center;
  padding:34px 16px 34px 0; border-bottom:1px solid var(--line-soft);
  position:relative; transition:padding-left .45s var(--ease-out);
}
.service-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--gold), transparent);
  transform:scaleY(0); transition:transform .5s var(--ease-out);
}
.service-row:hover{ padding-left:22px; }
.service-row:hover::before{ transform:scaleY(1); }
.section--paper .service-row{ border-color:var(--line-dark); }
.service-row .idx{ font-family:var(--font-data); color:var(--gold); font-size:12px; letter-spacing:.1em; }
.section--paper .service-row .idx{ color:var(--gold-deep); }
.section--paper .service-row::before{ background:linear-gradient(180deg, transparent, var(--gold-deep), transparent); }
.service-row h2, .service-row h3, .service-row h4{ font-size:23px; margin-bottom:9px; }
.service-row p{ color:var(--mist); font-size:14px; max-width:560px; }
.section--paper .service-row p{ color:var(--graphite); }
.service-row .link{ justify-self:end; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-soft); display:flex; align-items:center; gap:9px; transition:gap .35s var(--ease-out), color .3s; }
.service-row:hover .link{ gap:16px; color:var(--gold-lit); }
.section--paper .service-row .link{ color:var(--gold-deep); }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi{
  position:relative; padding:40px 34px 34px; border:1px solid var(--line-soft); border-radius:3px;
  background:linear-gradient(165deg, rgba(246,243,238,.05), transparent 55%), var(--ink);
  display:flex; flex-direction:column; gap:20px; overflow:hidden;
  transition:border-color .4s, transform .5s var(--ease-out);
}
.testi:hover{ border-color:rgba(224,203,160,.26); transform:translateY(-4px); }
.testi::before{
  content:"\201C"; position:absolute; top:-26px; right:14px;
  font-family:var(--font-display); font-size:130px; line-height:1;
  color:var(--gold); opacity:.14;
}
.section--paper .testi{ background:linear-gradient(165deg, rgba(255,255,255,.9), rgba(235,231,222,.5) 60%), var(--paper-2); border-color:var(--line-dark); }
.section--paper .testi::before{ color:var(--gold-deep); opacity:.16; }
.testi .quote{ font-family:var(--font-display); font-size:19.5px; line-height:1.5; position:relative; z-index:1; }
.testi .who{ font-size:11.5px; color:var(--mist); letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-data); margin-top:auto; }
.section--paper .testi .who{ color:var(--graphite); }
.testi .stars{ color:var(--gold); letter-spacing:3px; font-size:12px; }

/* ---------- Stats ---------- */
.stats-band{ display:grid; max-width:100%; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; background:var(--line-soft); }
.stat{ background:var(--ink); padding:52px 22px; text-align:center; position:relative; }
.section--paper .stat{ background:var(--paper); }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(32px,4.2vw,50px); color:var(--gold-soft); line-height:1; margin-bottom:14px; letter-spacing:-0.02em; }
.section--paper .stat b{ color:var(--gold-deep); }
.stat span{ font-family:var(--font-data); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mist-dark); }
.section--paper .stat span{ color:var(--graphite); }

/* ---------- Trust chips ---------- */
.trust-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.trust-chip{
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--line-soft); border-radius:2px; padding:14px 20px; font-size:13px;
  background:linear-gradient(160deg, rgba(246,243,238,.04), transparent);
  transition:border-color .35s, background .35s, transform .4s var(--ease-out);
}
.trust-chip:hover{ border-color:rgba(224,203,160,.3); background:rgba(224,203,160,.05); transform:translateY(-2px); }
.section--paper .trust-chip{ border-color:var(--line-dark); color:var(--ink); }
.trust-chip svg{ width:16px; height:16px; flex:0 0 16px; }

/* ---------- Breadcrumbs ---------- */
.crumbs{ font-family:var(--font-data); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mist-dark); margin-bottom:26px; }
.crumbs a:hover{ color:var(--gold-soft); }
.crumbs span{ margin:0 10px; color:var(--gold-deep); }

/* ---------- Comparison table ---------- */
.compare{ width:100%; border-collapse:collapse; font-size:14px; }
.compare-scroll{
  width:100%; overflow-x:auto; overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--gold) var(--paper-2);
}
.compare-scroll::-webkit-scrollbar{ height:7px; }
.compare-scroll::-webkit-scrollbar-track{ background:var(--paper-2); }
.compare-scroll::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:8px; }
.compare th, .compare td{ text-align:left; padding:19px 20px; border-bottom:1px solid var(--line-dark); }
.compare thead th{ font-family:var(--font-data); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); border-bottom-color:var(--gold-deep); }
.compare tbody tr{ transition:background .3s; }
.compare tbody tr:hover{ background:rgba(122,92,51,.05); }
.compare tbody th{ font-weight:500; color:var(--graphite); font-size:13.5px; }
.compare td{ font-family:var(--font-data); font-weight:500; font-size:13.5px; }

/* ---------- Process steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.step{ position:relative; padding-top:30px; }
.step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--gold), var(--line-soft));
}
.step .n{ font-family:var(--font-data); font-size:10px; letter-spacing:.18em; color:var(--gold); margin-bottom:14px; }
.step h2, .step h3{ font-size:19px; margin-bottom:10px; }
.step p{ font-size:13.5px; color:var(--mist); line-height:1.7; }
.section--paper .step p{ color:var(--graphite); }

/* ---------- Direct contact / callback ---------- */
.direct-contact-bar{
  position:relative; z-index:4; padding:22px var(--pad);
  background:linear-gradient(90deg, rgba(176,141,82,.12), rgba(8,8,10,.96) 34%, rgba(8,8,10,.98));
  border-top:1px solid rgba(224,203,160,.18); border-bottom:1px solid rgba(224,203,160,.14);
}
.direct-contact-inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; }
.direct-contact-copy{ display:flex; align-items:center; gap:17px; max-width:720px; }
.direct-contact-icon{
  width:42px; height:42px; border:1px solid rgba(224,203,160,.38); border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto; color:var(--gold-lit); font-size:18px;
}
.direct-contact-copy strong{ display:block; color:var(--paper); font-size:15px; margin-bottom:4px; }
.direct-contact-copy p{ margin:0; color:var(--mist); font-size:13px; line-height:1.6; }
.direct-contact-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:0 0 auto; }
.callback-note{
  padding:25px 25px 23px; margin-bottom:18px; border:1px solid rgba(224,203,160,.2);
  background:linear-gradient(135deg, rgba(176,141,82,.13), rgba(13,13,16,.88) 62%);
}
.callback-note .eyebrow{ margin-bottom:13px; }
.callback-note p{ margin:0 0 14px; color:var(--mist); font-size:13.5px; line-height:1.7; }
.callback-phone{ display:inline-block; color:var(--gold-lit); font-family:var(--font-data); font-size:13px; letter-spacing:.08em; }
.callback-phone:hover{ color:var(--paper); }

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center; padding:clamp(80px,11vw,140px) var(--pad); position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(176,141,82,.15), transparent 65%),
    var(--charcoal);
}
.cta-band h2{ font-size:clamp(32px,5.4vw,62px); max-width:820px; margin:0 auto 36px; }
.cta-band .btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- Prose ---------- */
.prose h2, .prose h3{ font-size:24px; margin:44px 0 14px; }
.prose h2:first-child, .prose h3:first-child{ margin-top:0; }
.prose p{ font-size:15.5px; line-height:1.8; color:var(--graphite); }

/* ---------- Booking form ---------- */
.booking-panel{
  background:linear-gradient(170deg, #FFFDF9, var(--paper)); color:var(--ink);
  padding:clamp(28px,3.4vw,52px); border-radius:3px;
  box-shadow:0 50px 100px -60px rgba(0,0,0,.9), 0 0 0 1px rgba(224,203,160,.14);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; }
.form-grid .full{ grid-column:1 / -1; }
.field label, .field legend{ display:block; font-family:var(--font-data); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:9px; }
.field input:not([type="radio"]), .field select, .field textarea{
  width:100%; background:#fff; border:1px solid rgba(8,8,10,.14); border-bottom:1px solid rgba(8,8,10,.3);
  padding:14px 15px; font-family:var(--font-body); font-size:14.5px; color:var(--ink); border-radius:2px;
  transition:border-color .3s, box-shadow .3s;
}
.field input:not([type="radio"]):focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(176,141,82,.14);
}
.field textarea{ resize:vertical; min-height:96px; }
.contact-method{ display:flex; gap:18px; flex-wrap:wrap; }
.contact-method label{ display:flex; align-items:center; gap:8px; font-size:13.5px; text-transform:none; letter-spacing:0; color:var(--graphite); font-family:var(--font-body); margin:0; }
.contact-method input{
  width:auto; margin:0; padding:0; border:0; background:transparent;
  accent-color:var(--gold-deep); flex:0 0 auto;
}
.form-privacy{ margin:14px 0 0; color:var(--graphite); font-size:11.5px; line-height:1.6; text-align:center; }
.form-privacy a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Contact tiles / map ---------- */
.contact-info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-top:none; }
.contact-info-grid > div{ background:var(--ink); padding:26px 24px; }
.contact-info-grid h2, .contact-info-grid h3, .contact-info-grid h5{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; font-weight:400;
}
.contact-info-grid a, .contact-info-grid p{ font-size:14.5px; margin:0; }
.contact-info-grid a:hover{ color:var(--gold-lit); }

.map-frame{
  height:330px; position:relative; overflow:hidden; border:1px solid var(--line-soft); border-radius:3px 3px 0 0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, #1B1B20, #0A0A0C);
}
.map-embed{ display:block; width:100%; height:100%; border:0; filter:grayscale(.45) contrast(1.04) brightness(.9); }
.map-open{
  position:absolute; right:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center;
  padding:10px 13px; border:1px solid rgba(224,203,160,.5); border-radius:2px;
  background:rgba(8,8,10,.88); color:var(--gold-lit); font-family:var(--font-data);
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 8px 20px rgba(0,0,0,.34);
}
.map-open:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

/* ---------- Footer ---------- */
.site-footer{ background:#050506; padding:clamp(56px,8vw,96px) var(--pad) 32px; position:relative; overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:52px; margin-bottom:64px; position:relative; }
.footer-grid p{ color:var(--mist-dark); font-size:14px; margin-top:18px; max-width:290px; line-height:1.75; }
.footer-col h2, .footer-col h3, .footer-col h5{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:20px; font-weight:400;
}
.footer-col li{ margin-bottom:12px; font-size:14px; color:var(--mist); }
.footer-col li a{ transition:color .25s, padding-left .3s var(--ease-out); }
.footer-col li a:hover{ color:var(--gold-soft); padding-left:5px; }
.social-links{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.social-links a{
  display:inline-flex; align-items:center; min-height:34px; padding:8px 11px;
  border:1px solid rgba(224,203,160,.2); border-radius:2px; color:var(--gold-soft);
  font-family:var(--font-data); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s, border-color .25s, color .25s;
}
.social-links a:hover{ background:rgba(176,141,82,.13); border-color:rgba(224,203,160,.48); color:var(--paper); }
.footer-credentials{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding:18px 0;
  border-top:1px solid var(--line-soft); color:var(--gold-soft); font-family:var(--font-data);
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
}
.footer-credentials span{ display:inline-flex; align-items:center; min-height:16px; }
.footer-credentials span + span{ padding-left:22px; border-left:1px solid rgba(224,203,160,.2); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--mist-dark); flex-wrap:wrap; gap:12px; }
.footer-bottom .legal-links{ display:flex; gap:22px; }
.footer-bottom a:hover{ color:var(--gold-soft); }

/* ---------- Sticky WhatsApp ---------- */
.sticky-whatsapp{
  position:fixed; bottom:28px; right:28px; z-index:90;
  background:#25D366; color:#fff;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 14px 34px -10px rgba(37,211,102,.58), 0 1px 0 rgba(255,255,255,.45) inset;
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
.sticky-whatsapp svg{ width:28px; height:28px; display:block; }
.sticky-whatsapp:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 20px 44px -10px rgba(37,211,102,.72); }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:120;
  background:rgba(13,13,16,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:20px var(--pad); display:none;
  align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
}
.cookie-banner.show{ display:flex; animation:riseIn .6s var(--ease-out); }
@keyframes riseIn{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.cookie-banner p{ font-size:13px; color:var(--mist); max-width:660px; margin:0; }
.cookie-banner p a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Loading curtain ---------- */
.loader{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .38s var(--ease), visibility .38s;
}
.js .loader{ display:flex; }
.loader.done{ opacity:0; visibility:hidden; }
.loader svg{ width:128px; height:54px; overflow:visible; }
.loader path{ fill:none; stroke:var(--gold); stroke-width:1.3; stroke-linecap:round;
  stroke-dasharray:200; stroke-dashoffset:200; animation:draw .6s var(--ease-out) forwards; }
.loader circle:first-of-type{ fill:none; stroke:var(--gold); stroke-width:1.3; }
.loader circle:last-of-type{ fill:var(--gold); opacity:0; animation:fadeIn .25s var(--ease) forwards .42s; }
.loader .lw{ font-family:var(--font-display); font-size:13px; letter-spacing:.26em; color:var(--gold-soft);
  opacity:0; animation:fadeIn .32s var(--ease) forwards .48s; text-transform:uppercase; }
@keyframes fadeIn{ to{ opacity:1; } }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .loader{ display:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .stats-band{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .hero-art{ width:44%; max-width:500px; opacity:.72; right:-3%; top:68%; }
}
@media (max-width:900px){
  .site-header{
    padding:18px var(--pad);
    padding-top:max(18px, env(safe-area-inset-top));
  }
  .brand-logo{ width:72px; height:72px; }
  .nav-links{ display:none; }
  .nav-links.open-mobile{
    display:flex; position:fixed !important; inset:0 !important; z-index:230;
    width:100%; height:100dvh; min-height:100vh;
    background:#08080A !important; opacity:1 !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    flex-direction:column; align-items:center; justify-content:center; gap:28px; font-size:20px;
    padding:110px 28px 40px;
  }
  .nav-links.open-mobile a{ padding:8px 12px; }
  body.menu-open{ overflow:hidden; touch-action:none; }
  body.menu-open::before{
    content:""; position:fixed; inset:0; z-index:210; background:#08080A;
  }
  body.menu-open .site-header{
    background:transparent; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  body.menu-open .site-header > .brand-lockup,
  body.menu-open .lang-toggle,
  body.menu-open .header-actions > .btn{ visibility:hidden; }
  body.menu-open .sticky-whatsapp{
    opacity:0; visibility:hidden; pointer-events:none;
  }
  .menu-btn{ display:block; z-index:240; }
}
@media (min-width:901px) and (max-width:1400px){
  /* Mostra a viatura por inteiro sem roubar leitura à mensagem central. */
  .hero-art{ width:39%; max-width:560px; right:-2%; top:66%; opacity:.84; }
}
@media (max-width:980px){
  .direct-contact-inner{ align-items:flex-start; }
  .direct-contact-actions{ flex-direction:column; align-items:stretch; }
  .direct-contact-actions .btn{ justify-content:center; }
  .fleet-grid, .grid-4, .grid-2{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .testi-grid{ grid-template-columns:1fr; }
  .contact-info-grid{ grid-template-columns:1fr 1fr; }
  .service-row{ grid-template-columns:44px 1fr; gap:14px; }
  .service-row .link{ justify-self:start; grid-column:2; }
  .compare{ min-width:570px; }
  .compare th, .compare td{ padding:14px 12px; }
}
@media (max-width:760px){
  .direct-contact-bar{ padding-top:25px; padding-bottom:25px; }
  .direct-contact-inner{ flex-direction:column; gap:20px; }
  .direct-contact-actions{ width:100%; display:grid; grid-template-columns:1fr; }
  .direct-contact-copy{ align-items:flex-start; }
  .direct-contact-copy p{ font-size:12.5px; }
  .callback-note{ padding:22px 19px 20px; }
  .brand-logo{ width:64px; height:64px; }
  .brand-lockup--footer .brand-logo{ width:94px; height:94px; }
  .hero-brand-logo{ width:106px; height:106px; margin:0 0 18px; }
  .wordmark{ font-size:16px; }
  /* No telemóvel, o conteúdo vem primeiro e o carro acompanha-o abaixo.
     Assim não fica um espaço vazio entre o cabeçalho e a mensagem. */
  .hero{
    min-height:auto; display:flex; flex-direction:column; align-items:stretch;
    padding-top:126px; padding-bottom:48px;
  }
  .vehicle-stage--photo{ height:220px; }
  .hero::before{ display:none; }
  .hero-content{ order:1; }
  .hero-copy{ max-width:none; margin:0 auto; }
  .hero-art{
    position:relative; order:2; width:112%; max-width:540px; right:auto; top:auto;
    transform:none; margin:38px auto 0; opacity:.96;
    /* Um único gradiente radial evita cortes em Safari/iPhone. */
    mask-image:radial-gradient(ellipse 76% 72% at 52% 48%, #000 48%, rgba(0,0,0,.9) 62%, transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 76% 72% at 52% 48%, #000 48%, rgba(0,0,0,.9) 62%, transparent 100%);
  }
  .hero-stats{ gap:26px; flex-wrap:wrap; margin-top:44px; }
  .grid-4, .grid-3{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-credentials{ align-items:flex-start; }
  .stats-band{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .scroll-cue{ display:none; }
  .cookie-banner{ flex-direction:column; align-items:flex-start; }
  .sticky-whatsapp{ bottom:calc(18px + env(safe-area-inset-bottom)); right:18px; width:52px; height:52px; }
  .vehicle-body{ padding:0 24px; }
  .map-frame{ height:250px; }
  .contact-info-grid > div{ padding:22px 18px; }
  .contact-info-grid a, .contact-info-grid p{ font-size:13.5px; overflow-wrap:anywhere; }
  /* Evita o zoom automático do Safari ao focar campos do formulário. */
  .field input:not([type="radio"]), .field select, .field textarea{ font-size:16px; }
  .header-actions{ gap:8px; }
  .lang-toggle button{ padding-left:10px; padding-right:10px; }
  .site-header .btn-sm{ padding:10px 13px; font-size:9px; }
}
@media (max-width:460px){
  .site-header{
    padding-left:16px; padding-right:16px; padding-bottom:14px;
    padding-top:max(14px, env(safe-area-inset-top));
  }
  .site-header.scrolled{ padding-top:max(10px, env(safe-area-inset-top)); padding-bottom:10px; }
  .site-header .brand-logo{ width:56px; height:56px; }
  .header-actions{ gap:5px; }
  .lang-toggle button{ padding:6px 9px; }
  .site-header .btn-sm{ padding:9px 11px; font-size:8.5px; }
  .menu-btn{ padding:7px; }
  .hero{ padding-top:110px; }
  .hero-ctas{ display:grid; grid-template-columns:1fr; }
  .hero-ctas .btn{ width:100%; }
  .hero-stats{ justify-content:space-between; gap:12px; }
  .hero-stats div{ flex:1 1 28%; }
  .contact-info-grid{ grid-template-columns:1fr; }
  .contact-info-grid > div{ padding:20px 18px; }
  .map-frame{ height:235px; }
}
@media (max-width:360px){
  .site-header .btn-sm{ display:none; }
}

/* ---------- Hero scene layers ---------- */
.hero-skyline{
  position:absolute; left:0; right:0; bottom:8%; width:100%; height:46%;
  z-index:0; opacity:.85; pointer-events:none;
}
.hero-car{ width:100%; height:auto; display:block; object-fit:contain; object-position:center; will-change:transform; animation:heroCarFloat 5.8s var(--ease-in-out) 1.8s infinite; }
.hero-art{ animation:driftIn 1.6s var(--ease-out) both .35s; }
@keyframes driftIn{ from{ opacity:0; transform:translateY(-50%) translateX(46px); } }
@keyframes heroCarFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-9px,-8px,0) scale(1.008); }
}
@media (max-width:760px){
  .hero-art{ animation:none; }
  .hero-skyline{ height:34%; bottom:auto; top:44%; opacity:.5; }
}

/* ---------- Contact layout (was an inline grid that couldn't collapse) ---------- */
.contact-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; }
#quote{ scroll-margin-top:110px; }
@media (max-width:980px){ .contact-layout{ grid-template-columns:1fr; gap:32px; } }

/* ---------- Form error state ---------- */
.form-error{
  margin-top:20px; padding:14px 16px; border-radius:2px;
  border:1px solid rgba(150,40,40,.4); border-left:3px solid #963028;
  background:rgba(150,48,40,.07); color:#8C2E26; font-size:13.5px; line-height:1.6;
}