/* ============================================================================
   Junior Martinez Transfer — stylesheet
   Purpose: mobile-first visual system for the single-page booking site.

   Structure
     1  Tokens            8  Hero + fare line
     2  Reset & base         (about, services, CTA bands, why, destinations)
     3  Layout            9  Reviews
     4  Typography       10  Quote form
     5  Buttons          11  FAQ
     6  Motion system    12  Finale, contact, footer
     7  Header/nav       13  Floating WhatsApp
                         14  Reduced motion

   Motion rules follow Emil Kowalski's design-engineering principles:
   transform/opacity only, custom ease-out curves, UI transitions under 300ms,
   hover gated behind (hover: hover), and prefers-reduced-motion keeps the
   fades while dropping the movement.
   ========================================================================== */

/* ------------------------------ 1. TOKENS ------------------------------- */
:root {
  /* Palette — one hot accent on white and a warm off-white, per the reference
     design. Orange carries every action; nothing else competes with it. */
  --brand:      #FF3600;
  --brand-dark: #D62B00;
  --brand-lift: #FF6060;
  --brand-tint: #FFF8F6;   /* warm cream used for alternating section bands */
  --brand-wash: #FFE9E3;   /* icon chips, quiet fills */

  --wa:         #1FA855;   /* WhatsApp green stays literal — it names a product */
  --wa-dark:    #15833F;

  --ink:        #040401;
  --ink-soft:   #1C1C18;
  --muted:      #616161;
  --muted-lite: #8E8E8E;

  --paper:      #FFFFFF;
  --mist:       var(--brand-tint);
  --line:       #E7E1DF;
  --line-soft:  #F1ECEA;

  /* Type — Epilogue for headings, DM Sans for everything else. */
  --display: "Epilogue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Micro-labels and figures use the body face — the reference has no
     monospace voice and relies on tabular figures for column alignment. */
  --label:   var(--body);

  /* Space & shape — the reference leans on large radii and inset containers. */
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --sect: clamp(4rem, 9vw, 7.5rem);
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;

  /* Elevation — warm-tinted, since the page ground is warm white not blue. */
  --sh-1: 0 1px 2px rgba(40, 20, 14, .05), 0 4px 14px rgba(40, 20, 14, .05);
  --sh-2: 0 2px 6px rgba(40, 20, 14, .06), 0 14px 34px rgba(40, 20, 14, .09);
  --sh-3: 0 8px 20px rgba(40, 20, 14, .10), 0 30px 70px rgba(40, 20, 14, .16);

  /* Easing — CSS defaults are too weak; these carry the intent. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Duration — UI stays under 300ms; marketing reveals may run longer. */
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui:    220ms;
  --t-panel: 280ms;
  --t-reveal: 620ms;

  /* Height of the sticky header. The hero offset and the anchor-scroll
     landing point both read it, so the two can never drift apart. */
  --head-h: 74px;
}
@media (max-width: 719px) { :root { --head-h: 64px; } }

/* --------------------------- 2. RESET & BASE ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets stop below the sticky header instead of underneath it. */
  scroll-padding-top: calc(var(--head-h) + 1rem);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote, fieldset { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--ink); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; transition: transform var(--t-ui) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.ic { width: 1.25em; height: 1.25em; flex: none; }

/* ------------------------------ 3. LAYOUT ------------------------------- */
.wrap { width: min(1200px, 100% - (var(--gut) * 2)); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - (var(--gut) * 2)); }

.section { padding-block: var(--sect); }
.section--mist { background: var(--mist); }
.section--dark {
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255,54,0,.26) 0%, transparent 55%),
    radial-gradient(90% 80% at 95% 100%, rgba(255,96,96,.18) 0%, transparent 58%),
    var(--ink);
  color: #fff;
}

.section__head { max-width: 46ch; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.section__head--light { color: #fff; }
.section__sub { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }
.section--dark .section__sub { color: rgba(255,255,255,.7); }

.grid-2 { display: grid; gap: clamp(2.4rem, 6vw, 4.5rem); }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; }
  .grid-2--form { align-items: start; }
}

/* ---------------------------- 4. TYPOGRAPHY ----------------------------- */
/* Epilogue is a grotesque, so the display voice comes from weight and tight
   tracking rather than from a contrasting serif. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; }
h1 { font-size: clamp(2.5rem, 7.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); text-wrap: balance; }
h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }

/* The reference marks the key phrase in accent colour, upright — an italic
   grotesque would read as emphasis-by-slant rather than by colour. */
h1 em, h2 em { font-style: normal; color: var(--brand); }
.section--dark h2 em, .finale h2 em { color: var(--brand-lift); }

/* Section eyebrow: small orange label with the reference's asterisk tick. */
.section__sub { max-width: 54ch; }

.lead { font-size: clamp(1.05rem, 2vw, 1.18rem); color: var(--ink); margin-block: 1.4rem; }
p + p { margin-top: 1rem; }
.section p:not(.lead):not(.section__sub) { color: var(--muted); }
.section--dark p { color: rgba(255,255,255,.72); }


.ticks { display: grid; gap: .7rem; margin-block: 1.6rem 2rem; }
.ticks li {
  position: relative; padding-left: 1.9rem; color: var(--muted); font-size: .97rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 1.05rem; height: .55rem; border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg);
  border-radius: 1px;
}

/* ----------------------------- 5. BUTTONS ------------------------------- */
/* The reference's signature CTA is a pill with a separate circular arrow badge
   sitting just outside its right edge. The badge is drawn as ::after so all 22
   existing buttons inherit it without touching their markup, and it is pulled
   outside the pill with a translate while the button reserves the space with
   margin-right — the pill's own background never runs underneath it. */
.btn {
  --badge: 2.9rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .92rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--display);
  font-weight: 600; font-size: .97rem; letter-spacing: -.015em;
  cursor: pointer; text-align: center; user-select: none;
  margin-right: calc(var(--badge) + .3rem);
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-hover) ease,
              border-color var(--t-hover) ease,
              color var(--t-hover) ease,
              box-shadow var(--t-hover) ease;
}
.btn::after {
  content: "";
  position: absolute; left: 100%; top: 50%;
  width: var(--badge); height: var(--badge);
  margin: calc(var(--badge) / -2) 0 0 .3rem;
  border-radius: 50%;
  /* Circle fill comes from colour, the white arrow is painted on top of it. */
  background-color: currentColor;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42%;
  transition: transform var(--t-hover) var(--ease-out);
}
.btn:active { transform: scale(.97); }

/* The badge inherits the pill's fill via currentColor, so each variant only
   has to set its own two colours. */
.btn--brand { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(255,54,0,.28); }
.btn--brand::after { color: var(--brand); }
.btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.btn--outline::after { color: #fff; }

.btn--lg { --badge: 3.2rem; padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.btn--xl { --badge: 3.5rem; padding: 1.15rem 2.2rem; font-size: 1.06rem; }
.btn--block { width: 100%; margin-right: 0; }
.btn--block::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  .btn--brand:hover { background: var(--brand-dark); box-shadow: 0 10px 26px rgba(255,54,0,.34); }
  .btn--brand:hover::after { color: var(--brand-dark); }
  .btn--outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }
  /* The badge leans the way the arrow points. */
  .btn:hover::after { transform: translate(2px, -2px); }
}

.link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .92rem; color: var(--brand-dark); cursor: pointer;
  transition: color var(--t-hover) ease;
}
.link .ic { width: 1.05em; height: 1.05em; transition: transform var(--t-hover) var(--ease-out); }
/* On touch there is no hover, so the press has to carry the same gesture —
   the arrow nudges forward either way. */
.link:active .ic { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--ink-soft); }
  .link:hover .ic { transform: translateX(4px); }
}

/* -------------------------- 6. MOTION SYSTEM ---------------------------- */
/* Scroll reveal — IntersectionObserver adds .is-in (see main.js). */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* Hero page-load orchestration: one cascade, then it never runs again.
   Kept short on purpose — the fare card is the page's conversion element and
   must read as settled and usable, not as still arriving. */
[data-anim] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: rise 520ms var(--ease-out) forwards;
}
[data-anim="1"] { animation-delay:   0ms; }
[data-anim="2"] { animation-delay:  60ms; }
[data-anim="3"] { animation-delay: 120ms; }
[data-anim="4"] { animation-delay: 180ms; }
[data-anim="5"] { animation-delay: 240ms; }
@keyframes rise { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* --------------------------- 7. HEADER / NAV ---------------------------- */
/* Solid white from the first pixel. The reference floats a transparent header
   over its photography, which leaves the logo and nav sitting illegibly on top
   of buses further down the page; the hero here is an inset panel instead, so
   the header always has a white ground and never fights the artwork. */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow var(--t-panel) ease, background-color var(--t-panel) ease;
}
.site-head.is-stuck { background: rgba(255,255,255,.94); box-shadow: 0 1px 0 var(--line), var(--sh-1); }

.site-head__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 74px; padding-block: .7rem;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand__mark {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--brand);
  transition: transform var(--t-hover) var(--ease-out);
}
.brand__mark svg { width: 30px; height: 30px; }
.brand__text { display: grid; line-height: 1.15; }
.brand__text strong {
  font-family: var(--display); font-size: 1.08rem; font-weight: 700;
  letter-spacing: -.025em;
}
.brand__text span {
  font-size: .66rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  /* Scale only. A logo the visitor passes on every scroll should acknowledge
     the cursor, not perform for it — the rotation read as a gimmick. */
  .brand:hover .brand__mark { transform: scale(1.04); }
}

.nav { display: none; gap: 1.6rem; }
.nav a {
  position: relative; font-family: var(--display);
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em; padding-block: .3rem;
  transition: color var(--t-hover) ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }

.site-head__cta { display: flex; align-items: center; gap: .55rem; }
.hide-sm { display: none; }

/* Language switch — EN is the default, ES is one tap away */
.lang {
  display: inline-flex; padding: 3px; border-radius: 999px; gap: 2px;
  background: rgba(20,10,6,.07);
  transition: background-color var(--t-panel) ease;
}
.lang button {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-family: var(--label); font-size: .68rem; font-weight: 500; letter-spacing: .08em;
  padding: .34rem .55rem; border-radius: 999px;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease,
              transform var(--t-press) var(--ease-out);
}
.lang button:active { transform: scale(.94); }
.lang button.is-on { background: #fff; color: var(--ink-soft); box-shadow: var(--sh-1); }
@media (hover: hover) and (pointer: fine) {
  .lang button:not(.is-on):hover { color: var(--ink); }
}

.burger {
  width: 42px; height: 42px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(20,10,6,.06); display: grid; place-content: center; gap: 5px;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.burger:active { transform: scale(.94); }
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform var(--t-ui) var(--ease-out), opacity 120ms ease,
              background-color var(--t-panel) ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer: transitions (not keyframes) so rapid toggling retargets smoothly */
@media (max-width: 959px) {
  .nav {
    position: absolute; top: 100%; left: var(--gut); right: var(--gut);
    display: grid; gap: 0; padding: .5rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh-3);
    transform-origin: top right;
    opacity: 0; transform: translate3d(0, -8px, 0) scale(.97);
    /* visibility, not just opacity: an invisible drawer must also be
       unreachable by Tab. It is delayed out so the fade still plays. */
    pointer-events: none; visibility: hidden;
    transition: opacity var(--t-ui) var(--ease-out),
                transform var(--t-ui) var(--ease-out),
                visibility 0s linear var(--t-ui);
  }
  .nav.is-open {
    opacity: 1; transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto; visibility: visible;
    transition-delay: 0s;
  }
  .nav a { padding: .75rem .9rem; border-radius: var(--r-sm); color: var(--ink) !important; }
  .nav a::after { display: none; }
  .nav a:active { background: var(--mist); }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .hide-sm { display: inline-flex; }
  .burger { display: none; }
}

/* Small screens: the header keeps only what earns its space —
   mark, name, language, WhatsApp, menu. */
@media (max-width: 719px) {
  .site-head__inner { min-height: 64px; gap: .5rem; }
  .brand { gap: .5rem; }
  .brand__mark { width: 38px; height: 38px; border-radius: 11px; }
  .brand__mark svg { width: 26px; height: 26px; }
  .brand__text strong { font-size: .95rem; white-space: nowrap; }
  .brand__text span { display: none; }          /* tagline repeats the H1's job */
  .site-head__cta { gap: .4rem; }
  .lang button { padding: .3rem .45rem; font-size: .64rem; }
}
@media (max-width: 479px) {
  .brand__text { display: none; }               /* the mark alone reads as the brand */
}

/* ----------------------- 8. HERO + THE FARE LINE ------------------------ */
/* Full-bleed dark band, not an inset panel. The reference frames its hero as a
   rounded card floating on white; that read as one more box here, so the
   artwork now runs edge to edge and matches the page's other dark band. It
   sits below a solid header rather than under a transparent one, so the
   artwork never has to carry navigation text. */
.hero {
  position: relative; isolation: isolate; color: #fff;
  overflow: hidden;
  /* Block padding only — the inner .wrap owns the horizontal gutter, exactly
     as it does for every other full-bleed section. The fare controls used to
     be a white card overhanging the bottom edge, which is why this had no
     bottom padding; they sit inside it now. */
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.8rem, 7vw, 4.2rem);
  text-align: center;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: var(--ink);
}
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(95% 75% at 50% 0%,  rgba(255,96,96,.42) 0%, transparent 62%),
    radial-gradient(80% 70% at 50% 108%, rgba(255,54,0,.55) 0%, transparent 60%),
    linear-gradient(168deg, #2A1008 0%, #150703 52%, #0A0402 100%);
}
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
/* The warm disc behind the headline stands in for the reference's sunset. */
.hero__sun {
  position: absolute; left: 50%; top: 6%; translate: -50% 0;
  width: min(52vw, 560px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,150,90,.42) 0%, transparent 64%);
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,5,2,.42) 0%, rgba(12,5,2,.26) 38%, rgba(12,5,2,.78) 100%);
}

.hero__copy { max-width: 46rem; margin-inline: auto; }
.hero h1 { margin-bottom: 1.3rem; text-wrap: balance; }
.hero__sub {
  font-size: clamp(1rem, 2.1vw, 1.14rem); color: rgba(255,255,255,.82);
  max-width: 52ch; margin-inline: auto;
}

.hero__proof {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .55rem 1.75rem; margin-top: 1.7rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  color: rgba(255,255,255,.78);
}
.hero__proof li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__proof .ic { color: var(--brand-lift); width: 1.1em; height: 1.1em; }

/* --- The fare line: the page's signature element ---
   Styled as the reference's booking bar: a white card that rides over the
   bottom edge of the hero panel, half in the artwork and half on the page. */
.fare {
  position: relative; z-index: 2;
  margin: clamp(2.4rem, 6vw, 3.4rem) auto 0;
  max-width: 62rem;
  color: #fff;
  text-align: left;
}
.fare__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem;
}
.fare__pax { margin-left: auto; }
.fare__label {
  font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-lift);
}
.fare__pax { font-size: .74rem; color: rgba(255,255,255,.6); letter-spacing: .01em; }

.fare__route { display: grid; gap: .55rem; position: relative; }
.fare__field {
  display: grid; gap: .25rem;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16);
  border-radius: var(--r); padding: .6rem .9rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.fare__field:focus-within { border-color: var(--brand-lift); background: rgba(255,255,255,.12); }
.fare__field > span {
  font-size: .66rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.fare__field select {
  appearance: none; border: 0; background: transparent; width: 100%;
  color: #fff;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
  padding: 0 1.4rem 0 0; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .1rem center; background-size: 12px;
}
.fare__field select:focus { outline: none; }
/* The native dropdown list is drawn by the OS, not by this stylesheet — without
   these two it inherits white-on-white and the options vanish. */
.fare__field select option,
.fare__field select optgroup { color: var(--ink); background: #fff; }

/* Route line: the little car travels it whenever the route changes */
.fare__line { display: none; }
.fare__track {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 6px, transparent 6px 13px);
}
.fare__car {
  position: absolute; top: 50%; left: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(20,10,6,.28);
  transform: translate3d(0, 0, 0);
  transition: transform 560ms var(--ease-drawer);
}
.fare__car svg { width: 19px; height: 19px; }

.fare__readout {
  display: grid; gap: .8rem; margin-top: 1rem; padding-top: 1rem;
  border-top: 1.5px dashed rgba(255,255,255,.22);
  grid-template-columns: 1fr 1fr;
  align-items: end;
}
.fare__stat { display: grid; gap: .15rem; }
.fare__stat-k {
  font-size: .66rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.fare__stat-v {
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  /* Settling back is the slower half: the new number arrives calmly. */
  transition: opacity 220ms ease, filter 220ms ease;
}
.fare__stat--price .fare__stat-v { font-size: 1.6rem; font-weight: 800; color: var(--brand-lift); }
/* Blur-through on value change bridges the two states instead of hard-swapping.
   140ms in, so the blur peaks exactly when main.js swaps the text at 150ms —
   the eye never catches two numbers overlapping. */
.fare__readout.is-updating .fare__stat-v {
  opacity: .35; filter: blur(3px);
  transition-duration: 140ms;
}
.fare__go { grid-column: 1 / -1; width: 100%; }
/* Below 720px this pill spans the full column. The detached badge is painted
   outside the button (left: 100%), so at full width it lands past the right edge
   of the screen and gets clipped — the same reason .btn--block drops it. Dropped
   here too, along with the margin that was reserving room for it. Above 720px the
   button goes back to auto width and the badge fits, so this is scoped to mobile. */
@media (max-width: 719px) {
  .fare__go { margin-right: 0; }
  .fare__go::after { display: none; }
}

.fare__note { margin-top: .9rem; font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.5); }

@media (min-width: 720px) {
  .fare__route { grid-template-columns: 1fr 132px 1fr; align-items: center; }
  .fare__line { display: block; position: relative; height: 42px; }
  .fare__readout { grid-template-columns: auto auto 1fr; gap: 1.8rem; align-items: center; }
  .fare__go { grid-column: auto; width: auto; justify-self: end; }
}

/* ------------------------------- ABOUT ---------------------------------- */
.about__art { display: grid; gap: 1rem; }
.frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink); box-shadow: var(--sh-2);
}
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 4 / 3; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.2rem .95rem;
  background: linear-gradient(transparent, rgba(20,10,6,.86));
  color: #fff; font-family: var(--label); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase;
}
/* Placeholder art when no photo file is present */
.frame--empty::after, .dest__media.is-empty::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 70% 15%, rgba(255,54,0,.55), transparent 62%),
    radial-gradient(70% 60% at 20% 95%, rgba(255,96,96,.38), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px),
    linear-gradient(160deg, #3A160A, #0A0402);
}

.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about__stats > div {
  background: var(--mist); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 1.1rem 1.2rem;
}
.about__stats b {
  display: block; font-family: var(--display); font-size: 2.1rem; font-weight: 800;
  line-height: 1; letter-spacing: -.03em; color: var(--brand);
}
.about__stats span { font-size: .84rem; color: var(--muted); }

/* ------------------------------ SERVICES -------------------------------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 640px) { .cards { gap: 1.1rem; } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .7rem;
  box-shadow: var(--sh-1);
  transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) ease,
              border-color var(--t-hover) ease;
}
.card__ic {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand); margin-bottom: .3rem;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.card__ic .ic { width: 1.5rem; height: 1.5rem; }
.card p { font-size: .95rem; }
.card__rate {
  font-size: .82rem; letter-spacing: 0;
  color: var(--muted) !important; padding-top: .3rem;
}
.card__rate b { font-family: var(--display); color: var(--brand); font-weight: 700; }
.card .link { margin-top: auto; padding-top: .6rem; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line); }
  .card:hover .card__ic { background: var(--brand); color: #fff; }
}

@media (max-width: 639px) {
  .card { padding: .85rem .8rem .9rem; gap: .4rem; }
  .card__ic { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 0; }
  .card__ic .ic { width: 1.1rem; height: 1.1rem; }
  .card h3 { font-size: .95rem; }
  .card p { font-size: .78rem; line-height: 1.45; }
  .card__rate { font-size: .68rem; }
  .card .link { font-size: .78rem; }
}

/* ---------------------------- CTA BANDS --------------------------------- */
.cta-band {
  background:
    radial-gradient(80% 140% at 88% 50%, rgba(255,54,0,.38), transparent 62%),
    var(--ink);
  color: #fff; padding-block: clamp(2.6rem, 6vw, 4rem);
}
.cta-band__inner {
  display: grid; gap: 1.4rem; align-items: center;
}
.cta-band h2 { font-size: clamp(1.55rem, 3.4vw, 2.3rem); }
.cta-band p { margin-top: .5rem; color: rgba(255,255,255,.74); font-size: 1rem; max-width: 52ch; }
@media (min-width: 860px) {
  .cta-band__inner { grid-template-columns: 1fr auto; gap: 2.5rem; }
}

/* --------------------------- WHY CHOOSE US ------------------------------ */
/* No card here. The reasons sit directly on the dark band — the hairline grid
   and per-tile background were drawing six boxes around six short paragraphs,
   which is more furniture than the content needs. Spacing does the grouping. */
.reasons {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.8rem, 4vw, 2.8rem) clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 1000px) { .reasons { grid-template-columns: repeat(3, 1fr); } }

.reason { display: grid; gap: .5rem; align-content: start; }
.reason > .ic {
  /* Matches the accent the section's heading uses — the lighter tint holds up
     better than --brand on a near-black ground. */
  width: 1.7rem; height: 1.7rem; color: var(--brand-lift); margin-bottom: .35rem;
  transition: transform var(--t-hover) var(--ease-out);
}
.reason h3 { color: #fff; }
.reason p { font-size: .9rem; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  /* Without a tile to tint, the icon alone acknowledges the cursor. */
  .reason:hover > .ic { transform: translateY(-3px) scale(1.06); }
}
@media (max-width: 619px) {
  .reasons { gap: 1.6rem 1.2rem; }
  .reason > .ic { width: 1.3rem; height: 1.3rem; margin-bottom: .15rem; }
  .reason h3 { font-size: .95rem; }
  .reason p { font-size: .78rem; line-height: 1.45; }
}

/* --------------------------- DESTINATIONS ------------------------------- */
.dests { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 620px) { .dests { gap: 1.2rem; } }
@media (min-width: 1000px) { .dests { grid-template-columns: repeat(3, 1fr); } }

.dest {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink); display: flex; flex-direction: column;
  box-shadow: var(--sh-1);
  transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) ease;
}
/* The reference's tile: photo edge to edge, title laid over the top-left, and
   the circular arrow badge anchored bottom-right. The whole tile is the target,
   so the badge is decoration over a link that already covers the card. */
.dest__media { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.dest__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 420ms var(--ease-out);
}
/* Keeps the overlaid type legible whatever photo the client supplies. */
.dest::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,4,2,.55) 0%, rgba(10,4,2,.12) 34%, rgba(10,4,2,.88) 100%);
}
.dest__code {
  position: absolute; right: 1rem; top: 1rem; z-index: 3;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  background: rgba(255,255,255,.16); color: #fff;
  padding: .3rem .58rem; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dest__body {
  position: relative; z-index: 2;
  aspect-ratio: 3 / 4;
  padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem;
  color: #fff;
}
.dest__body h3 { color: #fff; font-size: 1.45rem; font-weight: 700; max-width: 11ch; }
.dest__body p {
  font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.82) !important;
  margin-top: auto; max-width: 30ch;
}
.dest__meta {
  display: flex; align-items: baseline; gap: .7rem;
  padding-right: 3.6rem;                 /* clears the badge */
}
.dest__meta span { font-size: .8rem; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.dest__meta b {
  font-family: var(--display); font-size: 1.5rem; font-weight: 800;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
/* The card's link becomes the badge — the label itself is for screen readers. */
.dest .link {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 3;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; gap: 0;
  background: var(--brand); color: #fff;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.dest .link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dest .link .ic { width: 1.2rem; height: 1.2rem; transform: rotate(-45deg); }
.dest .link:active { transform: scale(.94); }

@media (max-width: 619px) {
  .dest__code { right: .55rem; top: .55rem; font-size: .58rem; padding: .22rem .45rem; }
  .dest__body { padding: .8rem; gap: .35rem; }
  .dest__body h3 { font-size: 1.02rem; }
  .dest__body p { font-size: .74rem; line-height: 1.4; }
  .dest__meta { gap: .45rem; padding-right: 2.6rem; }
  .dest__meta span { font-size: .66rem; }
  .dest__meta b { font-size: 1.05rem; }
  .dest .link { width: 2.2rem; height: 2.2rem; right: .6rem; bottom: .6rem; }
  .dest .link .ic { width: .9rem; height: .9rem; }
}
@media (hover: hover) and (pointer: fine) {
  .dest:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
  .dest:hover .dest__media img { transform: scale(1.06); }
  .dest:hover .link { background: var(--brand-dark); }
}

/* --------------------------- EXCURSIONS GALLERY -------------------------- */
.xgal { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 2rem; }
@media (min-width: 620px) { .xgal { gap: 1.2rem; } }
@media (min-width: 1000px) { .xgal { grid-template-columns: repeat(3, 1fr); } }
.xgal__cta { margin-inline: auto; }

/* ------------------------------ 9. REVIEWS ------------------------------ */
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 700px) { .reviews { gap: 1.1rem; } }
@media (min-width: 1050px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem; display: grid; gap: .9rem; align-content: start;
  box-shadow: var(--sh-1);
}
.review__stars { display: flex; gap: .18rem; color: var(--brand); }
.review__stars .ic { width: 1rem; height: 1rem; }
.review p { font-size: .96rem; line-height: 1.68; color: var(--ink) !important; }
.review footer { display: grid; gap: .05rem; padding-top: .4rem; border-top: 1px solid var(--line-soft); }
.review footer b { font-size: .93rem; }
.review footer span { font-family: var(--label); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-lite); }

@media (max-width: 699px) {
  .review { padding: .8rem .75rem; gap: .5rem; }
  .review__stars .ic { width: .8rem; height: .8rem; }
  .review p { font-size: .74rem; line-height: 1.5; }
  .review footer b { font-size: .78rem; }
  .review footer span { font-size: .6rem; }
}

/* --------------------------- 10. QUOTE FORM ----------------------------- */
.quote__aside {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--brand-wash); border: 1px solid rgba(255,54,0,.22);
  border-radius: var(--r); padding: 1.1rem 1.2rem; margin-top: 1.6rem;
}
.quote__aside .ic { width: 1.4rem; height: 1.4rem; color: var(--brand); margin-top: .1rem; }
.quote__aside p { font-size: .9rem; color: #7A2A12 !important; }
.quote__aside b { color: #5A1D0B; }

.qform {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.3rem, 3vw, 2rem); display: grid; gap: 1rem; box-shadow: var(--sh-2);
}
.qform__row { display: grid; gap: 1rem; }
@media (min-width: 520px) { .qform__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; }
.field > span, .field > legend {
  font-family: var(--label); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); padding: 0;
}
.field > span em, .field > legend em { font-style: normal; color: var(--muted-lite); text-transform: none; letter-spacing: .02em; }
.field input, .field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .72rem .9rem; background: var(--mist); font-size: .98rem;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.field input:user-invalid { border-color: #D2544C; }
.field textarea { resize: vertical; min-height: 4.5rem; }

.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choices span {
  display: block; padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--mist);
  font-size: .88rem; font-weight: 500;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease,
              color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.choices input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.choices input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 3px; }
.choices span:active { transform: scale(.96); }

.qform__hint { font-size: .8rem; color: var(--muted-lite); text-align: center; margin: 0; }
.qform__hint.is-error { color: #C0392B; font-weight: 600; }

/* ------------------------------ 11. FAQ --------------------------------- */
.faq { display: grid; gap: .7rem; }
.qa {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh-1);
  transition: border-color var(--t-hover) ease;
}
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.3rem; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.06rem; font-weight: 600;
  letter-spacing: -.02em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary i {
  position: relative; width: 20px; height: 20px; flex: none;
  transition: transform var(--t-panel) var(--ease-out);
}
.qa summary i::before, .qa summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--brand);
  border-radius: 2px; transform: translate(-50%, -50%);
}
.qa summary i::before { width: 14px; height: 2.2px; }
.qa summary i::after { width: 2.2px; height: 14px; transition: opacity var(--t-panel) var(--ease-out), transform var(--t-panel) var(--ease-out); }
.qa[open] summary i { transform: rotate(180deg); }
.qa[open] summary i::after { opacity: 0; transform: translate(-50%, -50%) scaleY(.4); }
.qa__body > p { padding: 0 1.3rem 1.3rem; font-size: .96rem; line-height: 1.7; }

/* The disclosure animates in CSS, not JS.

   This replaced a WAAPI height animation that kept `open` state in a JS
   closure and flipped it from the animation's finish callback. That design
   has to keep three things in sync — the running animation, the `open`
   attribute and a "currently closing" flag — and a click mid-animation had
   to cancel and re-derive all three. A transition needs none of it: it
   retargets from wherever the panel currently is, so hammering the summary
   reverses smoothly by construction and the `open` attribute stays the one
   source of truth.

   Browsers without ::details-content snap open, exactly as <details> does
   natively, so nothing is lost where it is unsupported. */
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }   /* lets 0 interpolate to auto */

  .qa::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size var(--t-panel) var(--ease-out),
                opacity var(--t-panel) var(--ease-out),
                content-visibility var(--t-panel) allow-discrete;
  }
  .qa[open]::details-content { block-size: auto; opacity: 1; }
}
@media (hover: hover) and (pointer: fine) { .qa:hover { border-color: var(--line); } }
.qa[open] { border-color: var(--line); }

/* ---------------------- 12. FINALE / CONTACT / FOOTER ------------------- */
.finale {
  position: relative; isolation: isolate; color: #fff; text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255,54,0,.30), transparent 62%),
    radial-gradient(60% 80% at 50% 100%, rgba(255,96,96,.24), transparent 60%),
    var(--ink);
}
.finale__inner { display: grid; justify-items: center; gap: 0; }
.finale h2 { font-size: clamp(2rem, 5.5vw, 3.5rem); margin-bottom: 1rem; }
.finale__sub { color: rgba(255,255,255,.72); max-width: 48ch; font-size: 1.04rem; }
.finale__btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
.finale__micro {
  margin-top: 1.3rem; font-family: var(--label); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5);
}

/* ------------------------------ CONTACT --------------------------------- */
.contact { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.contact__list { display: grid; gap: .7rem; align-content: start; }
.cx {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 1.1rem 1.2rem; box-shadow: var(--sh-1);
  transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) ease, border-color var(--t-hover) ease;
}
.cx:not(.cx--static) { cursor: pointer; }
.cx__ic {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-dark);
}
.cx__ic--wa { background: rgba(31,168,85,.12); color: var(--wa-dark); }
.cx__t { display: grid; gap: .1rem; }
.cx__t b { font-family: var(--label); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.cx__t > span { font-size: 1.04rem; font-weight: 600; letter-spacing: -.01em; word-break: break-word; }
.cx__t em { font-style: normal; font-size: .84rem; color: var(--muted); line-height: 1.5; }
/* These cards are the primary tap targets on the contact screen; without a
   press state a tap on mobile gives no confirmation at all. */
.cx:not(.cx--static):active { transform: scale(.985); transition-duration: var(--t-press); }
@media (hover: hover) and (pointer: fine) {
  .cx:not(.cx--static):hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line); }
}

.contact__map { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); min-height: 340px; background: var(--mist); }
.contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.92); }
.contact__maptag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
  background: rgba(20,10,6,.9); color: #fff; padding: .7rem 1rem; border-radius: 12px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; gap: .05rem;
}
.contact__maptag b { font-size: .95rem; }
.contact__maptag span { font-family: var(--label); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ------------------------------- FOOTER --------------------------------- */
.foot { background: var(--ink); color: rgba(255,255,255,.72); padding-top: clamp(3rem, 7vw, 5rem); }
.foot__top { display: grid; gap: 2.4rem; padding-bottom: 3rem; }
@media (min-width: 760px) { .foot__top { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1040px) { .foot__top { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.brand--foot { margin-right: 0; margin-bottom: 1.1rem; }
.brand--foot .brand__mark { background: rgba(255,255,255,.1); color: var(--brand-lift); }
.brand--foot .brand__text strong { color: #fff; }
.brand--foot .brand__text span { color: rgba(255,255,255,.55); }
.foot__brand p { font-size: .92rem; line-height: 1.7; max-width: 42ch; margin-bottom: 1.4rem; }

.foot__col { display: grid; gap: .55rem; align-content: start; }
.foot__col h3 {
  font-family: var(--label); font-size: .66rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .4rem;
}
.foot__col a, .foot__col span { font-size: .91rem; color: rgba(255,255,255,.72); transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .foot__col a:hover { color: #fff; } }

.foot__bar {
  border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.4rem 1.6rem;
  display: grid; gap: .5rem; font-size: .8rem; color: rgba(255,255,255,.5);
}
@media (min-width: 860px) { .foot__bar { grid-template-columns: auto 1fr; align-items: center; } }
.foot__kw { font-family: var(--label); font-size: .68rem; letter-spacing: .04em; color: rgba(255,255,255,.34); }
@media (min-width: 860px) { .foot__kw { text-align: right; } }

/* -------------------- 13. FLOATING WHATSAPP BUTTON ---------------------- */
.wa-float {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90; display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem; border-radius: 999px;
  background: var(--wa); color: #fff; font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 20px rgba(31,168,85,.4), 0 2px 6px rgba(20,10,6,.2);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.94); pointer-events: none;
  transition: opacity var(--t-panel) var(--ease-out),
              transform var(--t-panel) var(--ease-out),
              background-color var(--t-hover) ease;
}
.wa-float.is-shown { opacity: 1; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; }
/* The entrance is a 280ms arrival; the press is a 140ms answer. Sharing one
   duration made the most-tapped button on the page feel unresponsive. */
.wa-float:active { transform: translate3d(0, 0, 0) scale(.94); transition-duration: var(--t-press); }
.wa-float .ic { width: 1.6rem; height: 1.6rem; }
.wa-float__txt { display: none; padding-right: .4rem; }
@media (min-width: 560px) { .wa-float { padding: .9rem 1.35rem .9rem 1.05rem; } .wa-float__txt { display: block; } }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { background: var(--wa-dark); } }

/* ------------------------- 14. REDUCED MOTION --------------------------- */
/* Reduced motion means gentler, not zero: opacity stays, movement goes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Whitelist the properties that explain state — fades, colour, elevation —
     and drop transform from every transition, which is where motion lives.
     The previous rule set every duration to .01ms, which also removed the
     fades this preference is meant to keep. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color,
                         box-shadow, filter !important;
    transition-duration: 150ms !important;
    transition-delay: 0s !important;
  }
  .reveal, [data-anim] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .wa-float.is-shown, .nav, .nav.is-open { transform: none !important; }
  /* The car still parks at the end of the route — main.js jumps it there
     without a transition rather than leaving it stranded at the start. */
}