/* Opção 3 — composição contemporânea, alto contraste e hero dividido. */
    :root {
      --navy: #102b49;
      --navy-deep: #0c2036;
      --blue: #2e6595;
      --lime: #b8ed43;
      --lime-dark: #8ebc24;
      --ink: #172a3d;
      --muted: #607387;
      --paper: #fff;
      --mist: #f2f6f9;
      --line: #e0e8ee;
      --radius: 12px;
      --shadow: 0 18px 45px rgb(16 43 73 / 10%);
    }
    body { background: white; }
    .site-header { background: var(--navy-deep); border-bottom-color: rgb(255 255 255 / 10%); }
    .hero {
      min-height: 720px;
      align-items: stretch;
      background: var(--navy-deep);
    }
    .hero::before {
      inset: 0 43% 0 0;
      background: linear-gradient(90deg, var(--navy-deep), #15395c);
    }
    .hero::after {
      position: absolute;
      inset: 0 0 0 55%;
      border-radius: 120px 0 0 120px;
      background: linear-gradient(0deg, rgb(8 27 47 / 28%), transparent 55%),
        url("../images/gramado-portico-pedra-flores-horizontal.webp") center / cover no-repeat;
      content: "";
    }
    .hero-content { display: flex; align-items: center; padding-top: 82px; padding-bottom: 35px; }
    .hero-copy { flex: 1; max-width: 600px; container-type: inline-size; }
    /* Tamanho proporcional à largura do bloco, para "Porto Alegre / Gramado" caber em uma linha. */
    .hero h1 { font-size: min(4.8rem, 8.5cqi); }
    .hero h1 span { color: var(--lime); }
    .hero h1 .hero-route { color: inherit; white-space: nowrap; }
    .hero .button { border-radius: 9px; }
    .hero .button-quiet { border-radius: 9px; }
    .hero .eyebrow { letter-spacing: .17em; }
    .benefits { padding-top: 62px; }
    .benefit-grid { gap: 0; border: 1px solid var(--line); border-radius: 16px; background: white; }
    .benefit-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .benefit-card + .benefit-card { border-left: 1px solid var(--line); }
    .icon-box { width: 46px; height: 46px; border-radius: 12px; background: #edf5e0; color: #5b7f20; }
    .about-visual { min-height: 470px; }
    .about-photo { inset: 0; width: 100%; height: 100%; border-radius: 12px; }
    .photo-caption { right: 18px; bottom: 18px; border-radius: 10px; }
    .fleet-card { border-radius: 12px; }
    .testimonials { background: var(--mist); color: var(--ink); }
    .testimonials h2 { color: var(--navy); }
    .testimonials .eyebrow { color: #557a1d; }
    .testimonials .section-intro { color: var(--muted); }
    .review-card { border-color: var(--line); border-radius: 12px; background: white; box-shadow: 0 9px 26px rgb(16 43 73 / 5%); }
    .review-card blockquote { color: var(--ink); }
    .review-by strong { color: var(--navy); }
    .review-by span { color: var(--muted); }
    .review-avatar { background: #edf5e0; color: #557a1d; }
    .contact-band { background: var(--navy); }
    .contact-inner h2 { color: white; }
    .contact-inner .button { border-radius: 9px; background: var(--lime); color: var(--navy-deep); }
    .contact-inner .button:hover { background: white; color: var(--navy-deep); }
    .site-footer { background: #f2f6f9; color: var(--muted); }
    .site-footer .brand { color: var(--navy); }
    .site-footer .brand-tagline { color: var(--muted); }
    .site-footer .brand-mark { border-color: rgb(16 43 73 / 25%); color: var(--navy); }
    .footer-title { color: var(--navy); }
    .footer-links a { color: var(--muted); }
    .footer-links a:hover { color: var(--blue); }
    .footer-bottom { border-top-color: var(--line); }
    .whatsapp-bubble { border-radius: 10px; }
    .whatsapp-circle { border-radius: 12px; }
    @media (max-width: 780px) {
      .hero { min-height: 760px; }
      .hero::before { inset: 0; background: linear-gradient(90deg, rgb(8 27 47 / 88%), rgb(8 27 47 / 53%)); }
      .hero::after { inset: 0; border-radius: 0; background: linear-gradient(90deg, rgb(8 27 47 / 55%), rgb(8 27 47 / 20%)), url("../images/gramado-portico-pedra-flores-horizontal.webp") center / cover no-repeat; }
      .hero-content { padding-top: 110px; }
      .benefit-grid { grid-template-columns: 1fr; }
      .benefit-card + .benefit-card { border-top: 1px solid var(--line); border-left: 0; }
      .site-footer .site-nav a { color: white; }
    }
    @media (max-width: 480px) {
      .hero { min-height: 720px; }
      .about-visual { min-height: 340px; }
    }

.hero-copy { margin-left: clamp(24px, 5vw, 72px); }
@media (max-width: 780px) { .hero-copy { margin-left: 0; } }
.image-credit { color: var(--muted); }

/* Galeria de destinos — carrossel com rolagem horizontal e snap. */
.gallery { padding-top: 0; }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.gallery-heading h2 { margin-bottom: 0; }
.gallery-controls { display: flex; flex: 0 0 auto; gap: 10px; }
.gallery-button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.gallery-button svg { width: 20px; height: 20px; }
.gallery-button:hover:not(:disabled) { border-color: var(--navy); background: var(--navy); color: white; }
.gallery-button:disabled { opacity: .35; cursor: default; }
.gallery-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide {
  position: relative;
  flex: 0 0 auto;
  height: clamp(320px, 36vw, 440px);
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--navy);
  scroll-snap-align: start;
}
.gallery-slide img { width: auto; height: 100%; max-width: min(80vw, 640px); object-fit: cover; }
.gallery-slide::after { position: absolute; inset: 55% 0 0; background: linear-gradient(0deg, rgb(7 22 37 / 80%), transparent); content: ""; }
.gallery-slide figcaption { position: absolute; z-index: 1; right: 18px; bottom: 16px; left: 18px; color: white; font-size: .95rem; font-weight: 700; }
@media (max-width: 480px) {
  .gallery-button { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { scroll-behavior: auto; }
}