/*
 * Quad Universe · site.css
 * Sistema de diseño unificado: Rojo / Negro / Blanco
 */

/* ─── Variables ───────────────────────────────────────────── */
:root {
  --red:      #d00000;
  --red-dk:   #a30000;
  --black:    #0b0c0f;
  --panel:    #13151b;
  --ink:      #1b1d22;
  --muted:    #636770;
  --soft:     #f5f5f7;
  --line:     #e4e5e8;
  --green:    #3ab55c;
  --white:    #ffffff;

  --r:        8px;
  --cap:      1200px;

  --sh-card:  0 12px 38px rgb(0 0 0 / 9%);
  --sh-lift:  0 22px 60px rgb(0 0 0 / 15%);
  --sh-red:   0 16px 36px rgb(208 0 0 / 22%);

  --f-disp:   "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --f-body:   Inter, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ─── Reset + Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--black); scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; height: auto; max-width: 100%; }
a   { color: var(--red); }

/* ─── Navigation ──────────────────────────────────────────── */
.main-nav {
  align-items: center;
  backdrop-filter: blur(20px) saturate(1.15);
  background: rgb(11 12 15 / 94%);
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  display: flex;
  gap: 1.2rem;
  justify-content: space-between;
  left: 0;
  min-height: 62px;
  padding: .35rem clamp(1rem, 4vw, 3rem);
  position: fixed;
  right: 0;
  top: 0;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  z-index: 100;
}

/* Scrolled state — add via JS but also provide a class hook */
.main-nav.is-scrolled {
  background: rgb(11 12 15 / 98%);
  border-bottom-color: rgb(255 255 255 / 10%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 28%);
}

/* Full-bleed heroes absorb the fixed nav height in their own padding */
.home-hero,
.route-detail-hero,
.sales-hero,
.faq-hero,
.contact-hero,
.lodging-hero,
.recom-hero,
.grupos-hero,
.blog-hero,
.blog-post-hero,
.about-hero { padding-top: max(7rem, calc(62px + 3.5rem)); }

/* Pages without a full-bleed hero need explicit offset */
.page-hero { padding-top: max(6rem, calc(62px + 3rem)); }

.navbar-brand img { max-height: 60px; width: auto; }

.navbar-nav {
  align-items: center;
  display: flex;
  gap: clamp(.75rem, 2vw, 1.8rem);
}

.nav-link,
.nav-group > summary {
  color: rgb(255 255 255 / 80%);
  cursor: pointer;
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  list-style: none;
  padding: .5rem .65rem;
  position: relative;
  text-decoration: none;
  text-transform: none;
  transition: color .18s;
}

.nav-group > summary::-webkit-details-marker { display: none; }

.nav-link:hover,
.nav-group > summary:hover { color: #fff; }

.nav-link.active,
.nav-group.active > summary {
  color: #fff;
  background: rgb(255 255 255 / 8%);
  border-radius: 6px;
}

.nav-group {
  position: relative;
}

.nav-group > summary::after {
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  display: inline-block;
  height: .36rem;
  margin-left: .4rem;
  transform: translateY(-.18rem) rotate(45deg);
  transition: transform .2s;
  width: .36rem;
}

.nav-group[open] > summary::after {
  transform: translateY(.08rem) rotate(225deg);
}

/* Dropdown panel */
.nav-dropdown {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1200px) {
  .nav-dropdown {
    background: rgb(14 16 22 / 98%);
    backdrop-filter: blur(20px) saturate(1.1);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--r);
    box-shadow: 0 24px 56px rgb(0 0 0 / 44%);
    left: 50%;
    max-width: min(320px, 90vw);
    min-width: 260px;
    overflow: hidden;
    padding: .35rem;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    z-index: 200;
  }

  /* Transparent bridge to keep hover alive while moving to dropdown */
  .nav-dropdown::before {
    content: "";
    height: .6rem;
    left: -1rem;
    position: absolute;
    right: -1rem;
    top: -.6rem;
  }

  /* Rightmost items — align to the right so they don't overflow */
  .nav-group:last-child .nav-dropdown,
  .nav-group:nth-last-child(2) .nav-dropdown {
    left: auto;
    right: 0;
    transform: none;
  }

  /* Leftmost / first items — align to the left */
  .nav-group:first-child .nav-dropdown,
  .nav-group:nth-child(2) .nav-dropdown {
    left: 0;
    transform: none;
  }

  .nav-group .nav-link {
    background: transparent;
    border: none;
    border-radius: calc(var(--r) - 2px);
    color: rgb(255 255 255 / 75%);
    display: block;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .75rem 1rem;
    transition: background .14s, color .14s;
    white-space: nowrap;
  }

  .nav-group .nav-link:hover {
    background: var(--red);
    color: var(--white);
  }
}

@media (max-width: 1199px) {
  .nav-dropdown {
    background: rgb(255 255 255 / 5%);
    border-left: 2px solid rgb(255 255 255 / 12%);
    border-radius: 0 0 var(--r) var(--r);
    margin: .2rem 0 .2rem .6rem;
    padding: .2rem 0;
  }

  .nav-group .nav-link {
    background: transparent;
    border: none;
    color: rgb(255 255 255 / 65%);
    display: block;
    font-size: .9rem;
    font-weight: 600;
    padding: .65rem 1rem;
    transition: color .15s;
    white-space: normal;
  }

  .nav-group .nav-link:hover { color: var(--white); }
}

.nav-toggle { display: none; }

.navbar-toggler {
  align-items: center;
  background: transparent;
  border-color: rgb(255 255 255 / 18%);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--r);
  color: #fff;
  cursor: pointer;
  display: none;
  height: 42px;
  justify-content: center;
  padding: .45rem .65rem;
  width: 46px;
}

.navbar-toggler span,
.navbar-toggler span::before,
.navbar-toggler span::after {
  background: currentColor;
  border-radius: 1px;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 20px;
}

.navbar-toggler span::before { position: absolute; top: -6px; }
.navbar-toggler span::after  { position: absolute; top: 6px; }

.nav-toggle:checked + .navbar-toggler span { background: transparent; }
.nav-toggle:checked + .navbar-toggler span::before { top: 0; transform: rotate(45deg); }
.nav-toggle:checked + .navbar-toggler span::after { top: 0; transform: rotate(-45deg); }

/* Home nav: centred + transparent overlay (fixed) */
.use-home-nav .main-nav {
  background: rgb(11 12 15 / 46%);
  border-bottom-color: rgb(255 255 255 / 6%);
}

.use-home-nav .main-nav.is-scrolled {
  background: rgb(11 12 15 / 96%);
}

/* Centred nav, no logo — all pages */
.use-home-nav .main-nav { justify-content: center; }
.use-home-nav .navbar-brand { display: none; }

.use-home-nav .navbar-nav {
  align-items: center;
  gap: clamp(.8rem, 2vw, 2rem);
}

.use-home-nav .nav-link,
.use-home-nav .nav-group > summary {
  font-size: clamp(.82rem, 1.05vw, 1rem);
  text-transform: none;
}

.use-home-nav .nav-group .nav-link { min-width: 320px; }

.home-nav-extras {
  align-items: center;
  color: #fff;
  display: flex;
  font-weight: 800;
  gap: 1.2rem;
  margin-left: 1.3rem;
}

.use-home-nav .home-nav-extras,
.use-home-nav .cart-mark { display: none; }
.cart-mark { white-space: nowrap; }

.language-switcher {
  align-items: center;
  display: flex;
  gap: .25rem;
}

.language-switcher a {
  align-items: center;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  color: rgb(255 255 255 / 70%);
  display: inline-flex;
  font-size: .72rem;
  font-weight: 900;
  height: 30px;
  justify-content: center;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
  width: 36px;
}

.language-switcher a:hover,
.language-switcher a.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* ─── Buttons (shared) ────────────────────────────────────── */
.home-cta,
.route-reserve,
.route-tariff-button,
.sales-button,
.wp-content .elementor-button,
.wp-content .wp-block-button__link,
.btn-danger,
.btn-outline-danger {
  align-items: center;
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
}

.home-cta:hover,
.route-reserve:hover,
.route-tariff-button:hover,
.sales-button:hover,
.wp-content .elementor-button:hover,
.wp-content .wp-block-button__link:hover,
.btn-danger:hover,
.btn-outline-danger:hover {
  background: var(--red-dk);
  border-color: var(--red-dk);
  box-shadow: 0 20px 46px rgb(163 0 0 / 30%);
  color: var(--white);
  transform: translateY(-1px);
}

.sales-button-ghost {
  background: transparent;
  border-color: rgb(255 255 255 / 40%);
  box-shadow: none;
  color: var(--white);
}

.sales-button-ghost:hover {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 72%);
  box-shadow: none;
  color: var(--white);
}

/* ─── Hero: home ──────────────────────────────────────────── */
.home-hero {
  align-items: center;
  color: var(--white);
  display: flex;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 7rem clamp(1rem, 4vw, 3rem) 3rem;
  position: relative;
  text-align: center;
}

.home-hero-bg {
  background: var(--black);
  inset: 0;
  position: absolute;
  z-index: 0;
}

.home-hero-bg::after {
  background: linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 56%) 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 2;
}

.home-hero-bg img,
.home-hero-bg iframe {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.home-hero-bg iframe {
  border: 0;
  height: 120%;
  left: 50%;
  max-width: none;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  z-index: 1;
}

.home-hero-content {
  margin-inline: auto;
  max-width: 1100px;
  position: relative;
  z-index: 3;
}

.home-hero-logo {
  filter: drop-shadow(0 10px 22px rgb(0 0 0 / 44%));
  margin: 0 auto clamp(1.4rem, 3vh, 2.6rem);
  max-width: min(220px, 50vw);
}

.home-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.8rem, 5.2vw, 6rem);
  font-weight: 900;
  line-height: .92;
  margin-bottom: clamp(1rem, 2.5vh, 1.8rem);
  text-shadow: 0 4px 24px rgb(0 0 0 / 42%);
  text-transform: uppercase;
}

.home-hero p {
  color: rgb(255 255 255 / 90%);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 auto clamp(1.4rem, 3vh, 2.4rem);
  max-width: 820px;
  text-shadow: 0 2px 12px rgb(0 0 0 / 36%);
}

.home-trust {
  align-items: center;
  display: grid;
  gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(1.6rem, 4vh, 3.2rem) auto clamp(1.8rem, 4vh, 3rem);
  max-width: 780px;
}

.home-trust img {
  filter: brightness(0) invert(1);
  max-height: 88px;
  object-fit: contain;
  width: 100%;
}

.home-cta {
  font-size: 1rem;
  letter-spacing: .08em;
  min-width: min(400px, 90vw);
}

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 16px 36px rgb(208 0 0 / 24%); }
  50%       { box-shadow: 0 22px 54px rgb(208 0 0 / 48%); }
}
.home-cta { animation: cta-glow 2.8s ease-in-out infinite; }
.home-cta:hover { animation: none; }

/* ─── Hero: route detail ──────────────────────────────────── */
.route-detail-hero {
  align-items: flex-end;
  background-position: center;
  background-size: cover;
  color: var(--white);
  display: flex;
  min-height: clamp(580px, 82vh, 860px);
  overflow: hidden;
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  position: relative;
}

.route-detail-hero::before {
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 80%) 0%,
    rgb(0 0 0 / 30%) 55%,
    rgb(0 0 0 / 18%) 100%
  );
  content: "";
  inset: 0;
  position: absolute;
}

.route-detail-hero-inner {
  margin-inline: auto;
  max-width: var(--cap);
  position: relative;
  width: 100%;
  z-index: 1;
}

.route-detail-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.6rem, 5.5vw, 6.2rem);
  font-weight: 900;
  line-height: .9;
  margin-bottom: 1rem;
  text-shadow: 0 4px 20px rgb(0 0 0 / 40%);
  text-transform: uppercase;
}

.route-detail-hero p {
  color: rgb(255 255 255 / 88%);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  font-weight: 600;
  max-width: 780px;
}

.route-reserve { margin-top: 1.8rem; }

.route-trust {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vh, 4.5rem);
}

.route-trust img {
  filter: brightness(0) invert(1);
  max-height: 96px;
  max-width: 200px;
  object-fit: contain;
}

/* ─── Hero: sales / generic ───────────────────────────────── */
.sales-hero {
  align-items: center;
  background: var(--black);
  color: var(--white);
  display: flex;
  justify-content: center;
  min-height: clamp(480px, 65vh, 680px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) 3.5rem;
  position: relative;
  text-align: center;
}

.sales-hero::after {
  background: linear-gradient(180deg, rgb(0 0 0 / 26%), rgb(0 0 0 / 54%));
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.sales-hero-media {
  inset: 0;
  opacity: .32;
  position: absolute;
  z-index: 0;
}

.sales-hero-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sales-hero-copy {
  max-width: 940px;
  position: relative;
  z-index: 2;
}

.sales-hero-logo {
  display: block;
  filter: drop-shadow(0 12px 26px rgb(0 0 0 / 48%));
  margin: 0 auto clamp(1.2rem, 3vw, 2rem);
  max-width: min(380px, 78vw);
}

.sales-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.4rem, 4.8vw, 5.2rem);
  font-weight: 900;
  line-height: .92;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.sales-hero p {
  color: rgb(255 255 255 / 88%);
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 820px;
}

.sales-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ─── Notice bar ──────────────────────────────────────────── */
.home-notice {
  background: #299d4e;
  color: var(--white);
  font-size: clamp(.88rem, 1.05vw, 1rem);
  font-weight: 600;
  padding: .9rem 1.5rem;
  text-align: center;
}

.home-notice p   { margin: 0; }
.home-notice a   { color: var(--white); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

/* ─── Section kicker ──────────────────────────────────────── */
.section-kicker {
  color: var(--red);
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: .85rem;
  text-transform: uppercase;
}

/* ─── Route: facts bar ────────────────────────────────────── */
.route-facts {
  background: var(--soft);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem);
}

.route-facts-inner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(6, 1fr);
  margin-inline: auto;
  max-width: var(--cap);
  padding: clamp(1.2rem, 2.5vw, 2rem);
  text-align: center;
}

.route-facts-inner div {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem;
}

.route-facts-inner span {
  color: var(--red);
  display: block;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1;
}

.route-facts-inner strong {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(.8rem, .95vw, 1.02rem);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

/* ─── Home: intro section ─────────────────────────────────── */
.home-original-section,
.home-quality-original,
.home-routes-original,
.home-reviews-original {
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 3vw, 2rem);
}

.home-original-section,
.home-routes-original { background: var(--white); }
.home-quality-original,
.home-reviews-original { background: var(--soft); }

.home-original-inner {
  margin-inline: auto;
  max-width: var(--cap);
}

.home-original-title {
  align-items: center;
  color: var(--red);
  display: flex;
  flex-direction: column;
  font-family: var(--f-disp);
  font-size: clamp(1.75rem, 3.2vw, 3.2rem);
  font-weight: 900;
  gap: .7rem;
  line-height: .96;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  text-transform: uppercase;
}

.home-original-title::after {
  background: var(--red);
  border-radius: 99px;
  content: "";
  display: block;
  height: 4px;
  width: clamp(2rem, 3.5vw, 3.2rem);
}

.home-intro-original h3,
.home-quality-original h3 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.4rem, 2.4vw, 2.5rem);
  font-weight: 900;
  margin: 0 0 clamp(1.4rem, 2.5vw, 2.2rem);
  text-align: center;
  text-transform: uppercase;
}

.home-original-copy {
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.75;
  margin: 0 auto;
  max-width: 880px;
}

.home-original-copy p { margin-bottom: 1.1rem; }
.home-original-copy strong { color: var(--ink); font-weight: 750; }
.home-original-copy .red,
.home-original-copy .red strong { color: var(--red); font-weight: 800; }

.home-photo-row {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.2rem);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.home-photo-row img {
  aspect-ratio: 1.2;
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  object-fit: cover;
  width: 100%;
}

/* ─── Home: nature section ────────────────────────────────── */
.home-nature,
.route-nature {
  background-position: center;
  background-size: cover;
  color: var(--white);
  padding: clamp(4.5rem, 8vw, 7.5rem) clamp(1rem, 3vw, 2rem);
  position: relative;
}

.home-nature::before,
.route-nature::before {
  background: rgb(0 0 0 / 58%);
  content: "";
  inset: 0;
  position: absolute;
}

.home-nature-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(200px, 380px) 1fr;
  margin-inline: auto;
  max-width: var(--cap);
  position: relative;
  z-index: 1;
}

.home-nature-brand h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.2rem, 4.5vw, 5rem);
  font-weight: 900;
  line-height: .9;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.home-nature-brand img { max-width: min(260px, 70vw); }

.home-nature-panel {
  background: rgb(11 12 15 / 74%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--r);
  font-size: clamp(.97rem, 1.25vw, 1.18rem);
  font-weight: 600;
  line-height: 1.55;
  padding: clamp(1.5rem, 3.5vw, 3rem);
}

.home-nature-panel ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.home-nature-panel li {
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  padding: .6rem 0;
}

.home-nature-panel li:last-child { border-bottom: none; }

.home-nature-panel li::before {
  color: #4ade80;
  content: "✓";
  font-weight: 900;
  margin-right: .75rem;
}

/* ─── Home: route cards ───────────────────────────────────── */
.home-route-grid {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
}

.home-route-card {
  color: inherit;
  display: grid;
  text-decoration: none;
}

.home-route-media {
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  position: relative;
}

.home-route-media img {
  aspect-ratio: 1.4;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
  width: 100%;
}

.home-route-card:hover .home-route-media img { transform: scale(1.06); }

.home-route-media span {
  background: var(--red);
  border-radius: 0 0 0 var(--r);
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 800;
  padding: .7rem 1.4rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
}

.home-route-name {
  background: var(--ink);
  border-radius: 0 0 var(--r) var(--r);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  justify-content: center;
  min-height: 108px;
  padding: 1.2rem 1.4rem;
  transition: background .22s;
}

.home-route-card:hover .home-route-name { background: var(--red); }

.home-route-name small {
  color: rgb(255 255 255 / 68%);
  display: block;
  font-size: clamp(.86rem, 1.05vw, 1.05rem);
  font-weight: 600;
}

.home-route-name strong {
  color: var(--white);
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

/* ─── Home: quality logos ─────────────────────────────────── */
.home-logo-strip {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(2rem, 4.5vw, 4rem);
}

.home-logo-strip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: clamp(2rem, 4.5vw, 4rem);
}

.home-logo-strip img {
  max-height: 80px;
  max-width: 160px;
  object-fit: contain;
}

.home-logo-strip .cert-logo-text {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.35;
  max-width: 120px;
  text-align: center;
  text-transform: uppercase;
}

/* ─── Home: reviews (nueva sección) ──────────────────────── */
.reviews-section {
  background: var(--black);
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 3vw, 2rem);
}

.reviews-inner {
  margin-inline: auto;
  max-width: var(--cap);
}

/* Header */
.reviews-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.reviews-header .section-kicker { color: rgb(255 255 255 / 52%); }

.reviews-header .home-original-title {
  color: var(--white);
  margin-bottom: 2rem;
}

.reviews-header .home-original-title::after { background: var(--red); }

/* Platform badges */
.reviews-platforms {
  align-items: center;
  display: inline-flex;
  gap: 0;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 99px;
  padding: .6rem 1.4rem;
}

.reviews-platform {
  align-items: center;
  display: flex;
  gap: .75rem;
  padding: .2rem .8rem;
}

.reviews-platform-divider {
  background: rgb(255 255 255 / 15%);
  height: 2.4rem;
  width: 1px;
}

.reviews-platform-logo {
  flex-shrink: 0;
  height: 28px;
  width: 28px;
}

.reviews-platform-info {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  text-align: left;
}

.reviews-platform-stars {
  color: #f5a428;
  font-size: 1rem;
  letter-spacing: .06em;
  line-height: 1;
}

.reviews-platform-info strong {
  color: var(--white);
  display: block;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.2;
}

.reviews-platform-info span {
  color: rgb(255 255 255 / 48%);
  font-size: .78rem;
}

/* Review cards grid */
.reviews-grid {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(3, 1fr);
}

.review-card {
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.4rem;
  transition: background .2s, border-color .2s;
}

.review-card:hover {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 16%);
}

.review-card-header {
  align-items: center;
  display: flex;
  gap: .75rem;
}

.review-card-header > span:nth-child(2) {
  min-width: 0;
}

.review-avatar {
  align-items: center;
  background: var(--red);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  flex-shrink: 0;
  font-size: .82rem;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  letter-spacing: .04em;
  width: 38px;
}

.review-name {
  color: var(--white);
  display: block;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.2;
}

.review-origin {
  color: rgb(255 255 255 / 46%);
  display: block;
  font-size: .78rem;
}

.review-source-logo {
  height: 18px;
  margin-left: auto;
  flex-shrink: 0;
  width: 18px;
}

.reviews-platform-logo--text,
.review-source-logo--text {
  align-items: center;
  border-radius: 50%;
  color: var(--white);
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
}

.reviews-platform-logo--text {
  background: var(--red);
  font-size: .95rem;
  height: 32px;
  width: 32px;
}

.review-source-logo--text {
  background: var(--black);
  font-size: .72rem;
  height: 22px;
  width: 22px;
}

.review-stars {
  color: #f5a428;
  font-size: 1rem;
  letter-spacing: .06em;
  line-height: 1;
}

.review-text {
  color: rgb(255 255 255 / 70%);
  flex: 1;
  font-size: .92rem;
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}

.review-date {
  color: rgb(255 255 255 / 30%);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* CTA link */
.reviews-footer {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.reviews-cta-link {
  color: rgb(255 255 255 / 52%);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .2s;
}

.reviews-cta-link:hover { color: var(--white); }

/* ─── Home: media / video section ────────────────────────── */
.home-media-original {
  background-position: center;
  background-size: cover;
  color: var(--white);
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 3vw, 2rem);
  position: relative;
}

.home-media-original::before {
  background: rgb(0 0 0 / 58%);
  content: "";
  inset: 0;
  position: absolute;
}

.home-media-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(300px, 560px) 1fr;
  margin-inline: auto;
  max-width: var(--cap);
  position: relative;
  z-index: 1;
}

.home-video-thumb {
  border-radius: var(--r);
  display: block;
  overflow: hidden;
  position: relative;
}

.home-video-thumb img {
  aspect-ratio: 1.75;
  object-fit: cover;
  transition: transform .45s ease;
  width: 100%;
}

.home-video-thumb:hover img { transform: scale(1.04); }

.home-video-thumb span {
  align-items: center;
  background: var(--red);
  border-radius: 14px;
  display: flex;
  height: 76px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 112px;
}

.home-video-thumb span::after {
  border-bottom: 20px solid transparent;
  border-left: 32px solid var(--white);
  border-top: 20px solid transparent;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-34%, -50%);
}

/* A Punt badge below video */
.home-video-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-video-badge {
  align-items: center;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--r);
  display: flex;
  gap: .9rem;
  padding: .7rem 1.1rem;
}

.home-video-badge span {
  color: rgb(255 255 255 / 50%);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-video-badge img {
  filter: brightness(0) invert(1);
  max-height: 28px;
  max-width: 140px;
  object-fit: contain;
  opacity: .75;
  width: auto;
}

.home-media-inner h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.2rem, 4.5vw, 5rem);
  font-weight: 900;
  line-height: .9;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.home-media-inner p {
  color: rgb(255 255 255 / 86%);
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  font-weight: 600;
  line-height: 1.55;
}

/* ─── Route: copy sections ────────────────────────────────── */
.route-copy-section,
.route-info {
  background: var(--white);
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 3vw, 2rem);
}

.route-tariff {
  background: var(--soft);
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 3vw, 2rem);
}

.route-copy-inner {
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.75;
  margin-inline: auto;
  max-width: var(--cap);
}

.route-copy-inner h2,
.route-tariff h2,
.route-info h2 {
  color: var(--red);
  font-family: var(--f-disp);
  font-size: clamp(1.7rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: clamp(1.6rem, 3vw, 2.8rem);
  text-transform: uppercase;
}

.route-copy-inner p        { margin-bottom: 1.1rem; }
.route-copy-inner strong   { color: var(--ink); font-weight: 750; }

.route-gallery {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.2rem);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.route-gallery img {
  aspect-ratio: 1.2;
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  object-fit: cover;
  transition: transform .4s ease, box-shadow .4s ease;
  width: 100%;
}

.route-gallery img:hover {
  box-shadow: var(--sh-lift);
  transform: scale(1.03);
}

/* ─── Route: tariff card ──────────────────────────────────── */
.route-tariff-card {
  border-radius: var(--r);
  box-shadow: var(--sh-lift);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.route-tariff-copy {
  background: var(--red);
  color: var(--white);
  padding: clamp(2rem, 4vw, 3.5rem);
}

.route-tariff-copy h3 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.7rem, 2.5vw, 2.6rem);
  font-weight: 900;
  line-height: .96;
  text-transform: uppercase;
}

.route-tariff-copy h4 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  font-weight: 900;
  line-height: .96;
  margin-top: 2rem;
  text-transform: uppercase;
}

.route-tariff-copy p { color: rgb(255 255 255 / 88%); margin-bottom: .8rem; }

.route-tariff-button {
  background: var(--white);
  border-color: var(--white);
  box-shadow: none;
  color: var(--red);
  margin-top: 1.4rem;
}

.route-tariff-button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.route-carbon {
  color: rgb(255 255 255 / 78%);
  font-size: .9rem;
  font-weight: 600;
  margin-top: 1.2rem;
}

.route-tariff-card > img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* ─── Route: project section ──────────────────────────────── */
.route-project {
  background: var(--green);
  color: var(--white);
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 3vw, 2rem);
}

.route-project-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: 1.2fr .9fr;
  margin-inline: auto;
  max-width: var(--cap);
}

.route-project h2,
.route-project h3 {
  color: var(--white);
  font-family: var(--f-disp);
  font-weight: 900;
  text-transform: uppercase;
}

.route-project h2 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: .9; }
.route-project h3 { font-size: clamp(1.3rem, 2.5vw, 2.2rem); margin-top: .5rem; }

.route-project p {
  color: rgb(255 255 255 / 90%);
  font-size: clamp(.97rem, 1.22vw, 1.18rem);
  font-weight: 620;
  line-height: 1.6;
}

.route-project a {
  background: var(--white);
  border-color: var(--white);
  box-shadow: none;
  color: var(--green);
  margin-top: 1.4rem;
}

.route-project a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.route-project img { border-radius: var(--r); box-shadow: var(--sh-lift); width: 100%; }

/* ─── Route: accordion ────────────────────────────────────── */
.route-accordion {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.route-accordion details         { border-bottom: 1px solid var(--line); }
.route-accordion details:last-child { border-bottom: none; }

.route-accordion summary {
  color: var(--red);
  cursor: pointer;
  font-family: var(--f-disp);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 900;
  list-style: none;
  padding: 1.2rem 1.4rem;
  text-transform: uppercase;
  transition: background .15s;
  user-select: none;
}

.route-accordion summary:hover            { background: var(--soft); }
.route-accordion summary::-webkit-details-marker { display: none; }
.route-accordion summary::after           { content: "+"; float: right; font-size: 1.4rem; font-weight: 400; }
.route-accordion details[open] summary::after { content: "−"; }
.route-accordion details[open] summary    { background: var(--soft); }

.route-accordion p {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: clamp(.94rem, 1.1vw, 1.08rem);
  line-height: 1.7;
  margin: 0;
  padding: 1.2rem 1.4rem;
}

/* ─── Sales / generic pages ───────────────────────────────── */
.sales-page  { background: var(--white); }

.sales-section {
  background: var(--white);
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 3vw, 2rem);
}

.sales-section-alt { background: var(--soft); }

.localized-source-note {
  color: rgb(255 255 255 / 58%) !important;
  font-size: .95rem !important;
  margin-top: -.3rem;
}

.localized-facts {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.localized-facts li {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-weight: 750;
  padding: .9rem 1rem;
}

.sales-inner {
  margin-inline: auto;
  max-width: var(--cap);
}

.sales-section h2 {
  color: var(--red);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.4vw, 3.5rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: clamp(1.4rem, 2.5vw, 2.4rem);
  text-transform: uppercase;
}

.copy-columns {
  column-gap: clamp(1.5rem, 4vw, 4rem);
  columns: 2 320px;
}

.copy-columns p {
  break-inside: avoid;
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* Product grid */
.product-grid {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sales-product {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow .22s, transform .22s;
}

.sales-product:hover {
  box-shadow: var(--sh-lift);
  transform: translateY(-3px);
}

.sales-product::before {
  background: var(--red);
  color: var(--white);
  content: "Bono";
  font-size: .7rem;
  font-weight: 800;
  left: .9rem;
  letter-spacing: .06em;
  padding: .28rem .55rem;
  position: absolute;
  text-transform: uppercase;
  top: .9rem;
  z-index: 1;
}

.sales-product > img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.sales-product:hover > img { transform: scale(1.04); }

.sales-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem;
}

.sales-product h3 {
  color: var(--ink);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.sales-price {
  color: var(--red);
  font-family: var(--f-disp);
  font-size: 1.4rem;
  font-weight: 900;
  margin-top: auto;
}

.sales-product .sales-button {
  border-radius: var(--r);
  margin-top: auto;
  width: 100%;
}

/* Video grid */
.video-grid {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.video-grid iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  width: 100%;
}

/* Image grid */
.media-grid {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.media-grid figure {
  border-radius: var(--r);
  margin: 0;
  overflow: hidden;
}

.media-grid img {
  aspect-ratio: 4 / 3;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.media-grid figure:hover img { transform: scale(1.05); }

/* ─── Blog ────────────────────────────────────────────────── */
.page-hero {
  background:
    linear-gradient(90deg, rgb(11 12 15 / 94%), rgb(11 12 15 / 68%)),
    linear-gradient(135deg, var(--black), var(--red));
  color: var(--white);
  padding: clamp(6rem, 10vw, 9rem) clamp(1rem, 3vw, 2rem) clamp(3.5rem, 6vw, 6rem);
  position: relative;
}

.page-hero::after {
  background: var(--red);
  border-radius: 99px;
  bottom: 0;
  content: "";
  height: 5px;
  left: clamp(1rem, 3vw, 2rem);
  position: absolute;
  width: clamp(2.5rem, 4vw, 4rem);
}

.page-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.4rem, 5.5vw, 5.8rem);
  font-weight: 900;
  line-height: .9;
  max-width: 980px;
  text-transform: uppercase;
}

.post-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  padding: 1.4rem;
  transition: box-shadow .22s, transform .22s;
}

.post-card:hover { box-shadow: var(--sh-lift); transform: translateY(-2px); }
.post-card h2    { font-size: 1.15rem; font-weight: 800; margin-bottom: .5rem; }
.post-card h2 a  { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--red); }
.post-card p     { color: var(--muted); font-size: .96rem; }

/* ─── WP content fallback ─────────────────────────────────── */
.wp-content { color: var(--ink); overflow-wrap: anywhere; }

.wp-content img  { border-radius: var(--r); height: auto; max-width: 100%; }
.wp-content iframe {
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  max-width: 100%;
  width: 100%;
}

.wp-content h1,
.wp-content h2,
.wp-content h3 {
  color: var(--red);
  font-family: var(--f-disp);
  font-weight: 900;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wp-content h1 { font-size: clamp(2rem, 4vw, 4rem); }
.wp-content h2 { font-size: clamp(1.65rem, 3.2vw, 3.2rem); }
.wp-content h3 { font-size: clamp(1.35rem, 2.4vw, 2.4rem); }

.wp-content p        { color: var(--muted); font-size: 1.06rem; line-height: 1.72; margin-bottom: 1rem; }
.wp-content strong,
.wp-content b        { color: var(--ink); font-weight: 750; }

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--black);
  color: rgb(255 255 255 / 65%);
}

.footer-inner {
  margin-inline: auto;
  max-width: var(--cap);
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem) 0;
}

.footer-top {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

/* Brand column */
.footer-logo-link { display: inline-block; }
.footer-logo-link img { opacity: .9; }

.footer-tagline {
  color: rgb(255 255 255 / 52%);
  font-size: .9rem;
  line-height: 1.6;
  margin: 1.2rem 0 1.4rem;
  max-width: 280px;
}

.footer-socials {
  display: flex;
  gap: .7rem;
}

.footer-social {
  align-items: center;
  background: rgb(255 255 255 / 8%);
  border-radius: 50%;
  color: rgb(255 255 255 / 68%);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  text-decoration: none;
  transition: background .2s, color .2s;
  width: 38px;
}

.footer-social:hover {
  background: var(--red);
  color: var(--white);
}

/* Nav columns */
.footer-heading {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.footer-col nav,
.footer-col address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  gap: .2rem;
}

.footer-col nav a,
.footer-col address a,
.footer-col address p {
  color: rgb(255 255 255 / 58%);
  display: block;
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: .25rem;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: color .2s;
}

.footer-col nav a::after,
.footer-col address a::after {
  background: var(--red);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: translateX(-108%);
  transition: transform .24s ease;
  width: 100%;
}

.footer-col nav a:hover,
.footer-col address a:hover { color: var(--white); }
.footer-col nav a:hover::after,
.footer-col address a:hover::after { transform: translateX(0); }

.footer-col address p { cursor: default; }

.footer-cta {
  align-items: center;
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  color: var(--white) !important;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-top: 1rem;
  padding: .6rem 1.2rem;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background .2s, border-color .2s;
}

.footer-cta:hover {
  background: var(--red-dk);
  border-color: var(--red-dk);
  transform: none;
}

.footer-cta::after { display: none !important; }

/* Bottom bar */
.footer-bottom {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.4rem 0;
}

.copyright {
  color: rgb(255 255 255 / 32%);
  font-size: .84rem;
  margin: 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.footer-legal a {
  color: rgb(255 255 255 / 42%);
  font-size: .82rem;
  text-decoration: none;
  transition: color .2s;
}

.footer-legal a:hover { color: var(--white); }

/* Legacy selectors kept for any wp-content links */
.site-footer a {
  color: rgb(255 255 255 / 58%);
  text-decoration: none;
  transition: color .2s;
}

.site-footer a:hover { color: var(--white); }

/* ─── WhatsApp float ──────────────────────────────────────── */
.whatsapp-float {
  align-items: center;
  background: #25d366;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c1.746.943 3.71 1.444 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896.002-3.176-1.24-6.165-3.48-8.45zm-8.475 18.306h-.004c-1.774 0-3.513-.476-5.031-1.37l-.361-.214-3.741.976.997-3.648-.235-.374a9.834 9.834 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.896-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.882-9.892 9.882zm5.48-7.394c-.301-.15-1.781-.875-2.057-.975-.275-.099-.475-.149-.674.15-.201.3-.775.975-.951 1.175-.174.199-.35.224-.649.075-.301-.15-1.267-.466-2.414-1.485-.892-.794-1.494-1.775-1.669-2.074-.175-.3-.019-.461.132-.61.135-.135.301-.35.451-.525.149-.175.199-.3.299-.499.099-.2.05-.374-.025-.524-.075-.15-.674-1.624-.924-2.224-.243-.585-.491-.505-.674-.515-.174-.009-.374-.011-.574-.011-.2 0-.524.074-.799.374-.275.3-1.049 1.024-1.049 2.499s1.074 2.898 1.224 3.099c.149.2 2.099 3.199 5.085 4.485.711.307 1.266.49 1.699.628.714.227 1.363.195 1.876.118.572-.085 1.782-.729 2.034-1.432.25-.702.25-1.302.175-1.427-.075-.124-.274-.199-.575-.349z'%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  border-radius: 50%;
  bottom: 1.25rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / 26%);
  color: transparent;
  display: inline-flex;
  font-size: 0;
  height: 64px;
  justify-content: center;
  padding: 0;
  position: fixed;
  right: 1.25rem;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
  width: 64px;
  z-index: 200;
}

.whatsapp-float:hover {
  background-color: #1fbc5a;
  color: transparent;
  transform: scale(1.08);
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1199px) {
  .use-home-nav .main-nav {
    background: rgb(11 12 15 / 92%);
  }

  .use-home-nav .navbar-brand              { display: inline-flex; }
  .use-home-nav .main-nav,
  .main-nav { justify-content: space-between; }

  .navbar-toggler { display: inline-flex; }

  .navbar-nav {
    background: rgb(11 12 15 / 96%);
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: var(--sh-lift);
    display: none;
    left: 0;
    margin: 0;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 100%;
  }

  .nav-toggle:checked ~ .navbar-nav { display: flex; }

  .navbar-nav,
  .use-home-nav .navbar-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }

  .nav-link,
  .nav-group,
  .nav-group > summary,
  .use-home-nav .nav-link,
  .use-home-nav .nav-group > summary {
    font-size: .9rem;
    width: 100%;
  }

  .nav-group .nav-link {
    background: rgb(255 255 255 / 6%);
    border: none;
    box-shadow: none;
    min-width: 0;
    padding: .8rem 1rem;
    width: 100%;
  }

  .nav-group .nav-link:first-of-type,
  .nav-group .nav-link:last-child {
    border: none;
    border-radius: 0;
    margin-top: 0;
  }

  .nav-group .nav-link:hover {
    background: rgb(255 255 255 / 6%);
    color: var(--white);
  }

  .home-nav-extras { margin: .6rem 0 0; }
}

@media (max-width: 991px) {
  .home-nature-inner,
  .home-media-inner,
  .route-project-inner { grid-template-columns: 1fr; }

  .route-tariff-card   { grid-template-columns: 1fr; }
  .route-tariff-card > img { max-height: 320px; object-position: center 30%; }

  .route-facts-inner   { grid-template-columns: repeat(3, 1fr); }

  .home-photo-row,
  .route-gallery,
  .home-logo-strip,
  .home-review-cards,
  .reviews-grid        { grid-template-columns: repeat(2, 1fr); }

  .route-trust         { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  .home-hero           { padding-top: 6rem; }
  .route-detail-hero   { min-height: 560px; padding-bottom: 3rem; padding-top: 6rem; }
  .sales-hero          { min-height: 520px; padding-top: 7rem; }

  .home-hero h1,
  .route-detail-hero h1,
  .sales-hero h1       { font-size: clamp(2.1rem, 9.5vw, 3.5rem); }

  .home-hero p,
  .route-detail-hero p,
  .sales-hero p        { font-size: .98rem; }

  .home-trust img,
  .route-trust img     { max-height: 52px; }

  .home-route-grid     { grid-template-columns: 1fr; }

  .home-photo-row,
  .route-gallery,
  .home-logo-strip,
  .home-review-cards,
  .route-facts-inner   { grid-template-columns: 1fr; }

  .home-original-title { font-size: clamp(1.55rem, 7.5vw, 2.4rem); }

  .sales-actions       { flex-direction: column; }
  .sales-button,
  .sales-button-ghost  { width: 100%; }

  .whatsapp-float      { display: none; }
}

@media (max-width: 480px) {
  .home-route-grid     { grid-template-columns: 1fr; }
  .route-facts-inner   { grid-template-columns: repeat(2, 1fr); }
  .home-review-cards,
  .reviews-grid        { grid-template-columns: 1fr; }
  .reviews-platforms   { flex-direction: column; border-radius: var(--r); }
  .reviews-platform-divider { height: 1px; width: 100%; }
}

/* ─── Cookie banner ───────────────────────────────────────── */
.cookie-banner {
  background: var(--white);
  border-top: 3px solid var(--red);
  bottom: 0;
  box-shadow: 0 -8px 40px rgb(0 0 0 / 14%);
  left: 0;
  position: fixed;
  right: 0;
  transform: translateY(100%);
  transition: transform .36s ease;
  z-index: 9000;
}

.cookie-banner--visible { transform: translateY(0); }

.cookie-banner-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--cap);
  padding: 1.2rem clamp(1rem, 3vw, 2rem);
}

.cookie-banner-text strong {
  color: var(--ink);
  display: block;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .3rem;
}

.cookie-banner-text p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
  max-width: 680px;
}

.cookie-banner-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: .6rem;
}

.cookie-btn {
  border-radius: 99px;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 40px;
  padding: .55rem 1.1rem;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}

.cookie-btn-settings {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

.cookie-btn-settings:hover { border-color: var(--ink); color: var(--ink); }

.cookie-btn-reject {
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink);
}

.cookie-btn-reject:hover { background: var(--line); }

.cookie-btn-accept {
  background: var(--red);
  border: 1px solid var(--red);
  color: var(--white);
}

.cookie-btn-accept:hover { background: var(--red-dk); border-color: var(--red-dk); }

/* ─── Cookie modal ────────────────────────────────────────── */
.cookie-modal {
  background: rgb(0 0 0 / 58%);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9100;
}

.cookie-modal[hidden] { display: none; }

.cookie-modal-inner {
  background: var(--white);
  border-radius: var(--r) var(--r) 0 0;
  bottom: 0;
  box-shadow: 0 -8px 60px rgb(0 0 0 / 22%);
  display: flex;
  flex-direction: column;
  left: 0;
  max-height: 88vh;
  overflow: hidden;
  position: absolute;
  right: 0;
}

@media (min-width: 640px) {
  .cookie-modal-inner {
    border-radius: var(--r);
    bottom: auto;
    left: 50%;
    max-width: 560px;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
}

.cookie-modal-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 1.4rem;
}

.cookie-modal-header h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
}

.cookie-modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: .3rem .5rem;
  transition: color .2s;
}

.cookie-modal-close:hover { color: var(--ink); }

.cookie-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
}

.cookie-modal-body > p {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
}

.cookie-option {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 0;
}

.cookie-option:last-child { border-bottom: none; }

.cookie-option-info { flex: 1; }

.cookie-option-info strong {
  color: var(--ink);
  display: block;
  font-size: .96rem;
  font-weight: 800;
  margin-bottom: .2rem;
}

.cookie-option-info span {
  color: var(--muted);
  display: block;
  font-size: .86rem;
  line-height: 1.5;
}

/* Toggle switch */
.cookie-toggle {
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.cookie-toggle input { opacity: 0; position: absolute; width: 0; height: 0; }

.cookie-toggle-track {
  background: var(--line);
  border-radius: 99px;
  display: block;
  height: 26px;
  position: relative;
  transition: background .22s;
  width: 48px;
}

.cookie-toggle-track::after {
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: left .22s;
  width: 20px;
}

.cookie-toggle input:checked + .cookie-toggle-track { background: var(--red); }
.cookie-toggle input:checked + .cookie-toggle-track::after { left: 25px; }
.cookie-toggle input:disabled + .cookie-toggle-track { background: #aaa; opacity: .6; }

.cookie-modal-footer {
  border-top: 1px solid var(--line);
  display: flex;
  gap: .7rem;
  justify-content: flex-end;
  padding: 1rem 1.4rem;
}

/* ─── Footer responsive ───────────────────────────────────── */
@media (max-width: 991px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; }
  .cookie-banner-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* ─── FAQ page ────────────────────────────────────────────── */

/* Hero */
.faq-hero {
  align-items: center;
  color: var(--white);
  display: flex;
  justify-content: flex-start;
  min-height: clamp(480px, 60vh, 640px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) 3.5rem;
  position: relative;
}

.faq-hero-bg {
  inset: 0;
  position: absolute;
  z-index: 0;
}

.faq-hero-bg img {
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  width: 100%;
}

.faq-hero-bg::after {
  background: linear-gradient(90deg, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 32%) 70%, transparent 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.faq-hero-content {
  margin-inline: auto;
  max-width: var(--cap);
  position: relative;
  width: 100%;
  z-index: 1;
}

.faq-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 900;
  line-height: .88;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.faq-hero p {
  color: rgb(255 255 255 / 82%);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  margin-bottom: 2rem;
  max-width: 520px;
}

.faq-hero-cta {
  align-items: center;
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .05em;
  min-height: 50px;
  padding: .9rem 1.8rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, transform .15s;
}

.faq-hero-cta:hover {
  background: var(--red-dk);
  border-color: var(--red-dk);
  color: var(--white);
  transform: translateY(-1px);
}

/* Highlights bar */
.faq-highlights {
  background: var(--black);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 3vw, 2rem);
}

.faq-highlights-inner {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  margin-inline: auto;
  max-width: var(--cap);
  text-align: center;
}

.faq-highlight {
  align-items: center;
  border-right: 1px solid rgb(255 255 255 / 8%);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .6rem 1rem;
}

.faq-highlight:last-child { border-right: none; }

.faq-highlight-num {
  color: var(--red);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
}

.faq-highlight strong {
  color: rgb(255 255 255 / 62%);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
}

/* Body: sidebar + accordion */
.faq-body {
  background: var(--soft);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem);
}

.faq-body-inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 240px 1fr;
  margin-inline: auto;
  max-width: var(--cap);
}

/* Sidebar nav */
.faq-nav {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  position: sticky;
  top: 80px;
  align-self: start;
}

.faq-nav-item {
  border-radius: var(--r);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  padding: .65rem .9rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.faq-nav-item:hover,
.faq-nav-item--active {
  background: var(--white);
  color: var(--red);
}

/* Accordion */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.faq-category {
  scroll-margin-top: 90px;
}

.faq-cat-title {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-family: var(--f-disp);
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  font-weight: 900;
  gap: .65rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.faq-cat-icon { font-size: 1.2em; line-height: 1; }

.faq-list {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: clamp(.95rem, 1.1vw, 1.06rem);
  font-weight: 700;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 1.15rem 1.3rem;
  transition: background .15s, color .15s;
  user-select: none;
  color: var(--ink);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question:hover { background: var(--soft); color: var(--red); }

.faq-item[open] > .faq-question {
  background: rgb(208 0 0 / 4%);
  color: var(--red);
}

/* +/− icon */
.faq-icon {
  align-items: center;
  background: var(--soft);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 400;
  height: 28px;
  justify-content: center;
  line-height: 1;
  transition: background .15s, color .15s, transform .25s;
  width: 28px;
}

.faq-icon::after { content: "+"; }

.faq-item[open] > .faq-question .faq-icon {
  background: var(--red);
  color: var(--white);
  transform: rotate(45deg);
}

.faq-item[open] > .faq-question .faq-icon::after { content: "+"; }

/* Answer */
.faq-answer {
  border-top: 1px solid var(--line);
  padding: 1.1rem 1.3rem 1.3rem;
}

.faq-answer p {
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.72;
  margin: 0;
}

.faq-answer a { color: var(--red); font-weight: 700; }

/* CTA section */
.faq-cta-section {
  background: var(--black);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.faq-cta-inner {
  margin-inline: auto;
  max-width: 680px;
}

.faq-cta-logo {
  margin: 0 auto 2rem;
  max-width: 160px;
}

.faq-cta-section h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 900;
  line-height: .94;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.faq-cta-section p {
  color: rgb(255 255 255 / 65%);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  margin-bottom: 0;
}

.faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2.2rem;
}

.faq-cta-btn {
  align-items: center;
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .05em;
  min-height: 50px;
  padding: .9rem 1.8rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, transform .15s;
}

.faq-cta-btn:hover {
  background: var(--red-dk);
  border-color: var(--red-dk);
  color: var(--white);
  transform: translateY(-1px);
}

.faq-cta-btn--ghost {
  background: transparent;
  border-color: rgb(255 255 255 / 36%);
  box-shadow: none;
}

.faq-cta-btn--ghost:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 64%);
}

/* Sidebar nav active state via JS */
.faq-nav-item--active { background: var(--white); color: var(--red); }

/* Responsive FAQ */
@media (max-width: 900px) {
  .faq-body-inner { grid-template-columns: 1fr; }
  .faq-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    position: static;
  }
  .faq-highlights-inner { grid-template-columns: repeat(2, 1fr); }
  .faq-highlight { border-right: none; border-bottom: 1px solid rgb(255 255 255 / 8%); }
  .faq-highlight:nth-child(2n) { border-bottom: none; }
}

@media (max-width: 600px) {
  .faq-hero { padding-top: 6rem; }
  .faq-highlights-inner { grid-template-columns: repeat(2, 1fr); }
  .faq-nav { grid-template-columns: 1fr 1fr; }
  .faq-cta-actions { flex-direction: column; }
  .faq-cta-btn { width: 100%; }
}

/* ─── Route hero with video background ───────────────────── */
.route-detail-hero--video {
  background: var(--black);
}

.route-hero-video-bg {
  inset: 0;
  overflow: hidden;
  position: absolute;
  z-index: 0;
}

.route-hero-video-poster {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.route-hero-video-bg iframe {
  aspect-ratio: unset;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 140%;
  left: 50%;
  max-width: none;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  z-index: 1;
}

.route-detail-hero--video::before {
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 82%) 0%,
    rgb(0 0 0 / 36%) 55%,
    rgb(0 0 0 / 24%) 100%
  );
  z-index: 2;
}

.route-detail-hero--video .route-detail-hero-inner {
  z-index: 3;
}

/* ─── Modal de vídeo ──────────────────────────────────────── */
.video-modal {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9200;
}

.video-modal[hidden] { display: none; }

.video-modal-backdrop {
  background: rgb(0 0 0 / 85%);
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.video-modal-inner {
  max-width: min(960px, 94vw);
  position: relative;
  width: 100%;
  z-index: 1;
}

.video-modal-close {
  background: rgb(255 255 255 / 12%);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  height: 36px;
  line-height: 1;
  position: absolute;
  right: -44px;
  top: 0;
  transition: background .2s;
  width: 36px;
}

.video-modal-close:hover { background: var(--red); }

.video-modal-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  width: 100%;
}

.video-modal-frame iframe {
  aspect-ratio: unset;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  width: 100%;
}

/* button reset para el thumb */
.home-video-modal-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

@media (max-width: 600px) {
  .video-modal-close { right: 0; top: -42px; }
}

/* ─── Contact page ────────────────────────────────────────── */

/* Hero */
.contact-hero {
  align-items: center;
  color: var(--white);
  display: flex;
  justify-content: flex-start;
  min-height: clamp(420px, 55vh, 580px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) 3.5rem;
  position: relative;
}

.contact-hero-bg {
  inset: 0;
  position: absolute;
  z-index: 0;
}

.contact-hero-bg img {
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
}

.contact-hero-bg::after {
  background: linear-gradient(90deg, rgb(0 0 0 / 80%) 0%, rgb(0 0 0 / 30%) 65%, transparent 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.contact-hero-content {
  margin-inline: auto;
  max-width: var(--cap);
  position: relative;
  width: 100%;
  z-index: 1;
}

.contact-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 900;
  line-height: .88;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.contact-hero p {
  color: rgb(255 255 255 / 80%);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 500;
  margin-bottom: 2rem;
  max-width: 520px;
}

.contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.contact-btn-wa {
  align-items: center;
  background: #25d366;
  border: 2px solid #25d366;
  border-radius: 99px;
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  gap: .55rem;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}

.contact-btn-wa:hover {
  background: #1fbc5a;
  border-color: #1fbc5a;
  color: var(--white);
  transform: translateY(-1px);
}

.contact-btn-call {
  align-items: center;
  background: rgb(255 255 255 / 14%);
  border: 2px solid rgb(255 255 255 / 36%);
  border-radius: 99px;
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  gap: .55rem;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, border-color .2s;
}

.contact-btn-call:hover {
  background: rgb(255 255 255 / 22%);
  border-color: rgb(255 255 255 / 60%);
  color: var(--white);
}

/* Contact methods bar */
.contact-methods {
  background: var(--black);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 3vw, 2rem);
}

.contact-methods-inner {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  margin-inline: auto;
  max-width: var(--cap);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--r);
  overflow: hidden;
}

.contact-method {
  align-items: center;
  background: rgb(11 12 15 / 100%);
  color: inherit;
  display: flex;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  text-decoration: none;
  transition: background .18s;
}

.contact-method:hover { background: rgb(255 255 255 / 4%); }
.contact-method--info { cursor: default; }
.contact-method--info:hover { background: rgb(11 12 15 / 100%); }

.contact-method-icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.contact-method-icon--wa    { background: rgb(37 211 102 / 14%); color: #25d366; }
.contact-method-icon--phone { background: rgb(208 0 0 / 14%);    color: var(--red); }
.contact-method-icon--email { background: rgb(66 133 244 / 14%);  color: #4285F4; }
.contact-method-icon--clock { background: rgb(255 255 255 / 8%);  color: rgb(255 255 255 / 60%); }

.contact-method-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.contact-method-text strong {
  color: var(--white);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.contact-method-text span {
  color: rgb(255 255 255 / 70%);
  font-size: .9rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-method-text em {
  color: rgb(255 255 255 / 36%);
  font-size: .78rem;
  font-style: normal;
}

/* Main body */
.contact-body {
  background: var(--soft);
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem);
}

.contact-body-inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1.1fr .9fr;
  margin-inline: auto;
  max-width: var(--cap);
}

.contact-section-title {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 900;
  margin-bottom: .6rem;
  text-transform: uppercase;
}

.contact-section-sub {
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.6;
  margin-bottom: 1.8rem;
  max-width: 480px;
}

/* Form */
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.contact-field label {
  color: var(--ink);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  background: var(--soft);
  border: 1.5px solid var(--line);
  border-radius: calc(var(--r) - 2px);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: .95rem;
  padding: .72rem .9rem;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgb(208 0 0 / 10%);
  outline: none;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgb(0 0 0 / 28%); }

.contact-field textarea { resize: vertical; }

.contact-form-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: .4rem;
}

.contact-form-legal {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}

.contact-submit {
  align-items: center;
  background: #25d366;
  border: none;
  border-radius: 99px;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 800;
  gap: .55rem;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.6rem;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}

.contact-submit:hover {
  background: #1fbc5a;
  transform: translateY(-1px);
}

/* Info + map */
.contact-info-wrap { display: flex; flex-direction: column; gap: 1.4rem; }

.contact-address-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-address-row {
  align-items: flex-start;
  display: flex;
  gap: .9rem;
}

.contact-address-icon {
  color: var(--red);
  flex-shrink: 0;
  margin-top: .2rem;
}

.contact-address-row > div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.contact-address-row strong {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contact-address-row span {
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.55;
}

/* Distances */
.contact-distances {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0;
  margin-top: .2rem;
  padding-top: 1rem;
}

.contact-distance {
  align-items: center;
  border-right: 1px solid var(--line);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .2rem;
  padding: .3rem .5rem;
  text-align: center;
}

.contact-distance:last-child { border-right: none; }

.contact-distance-time {
  color: var(--red);
  font-family: var(--f-disp);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

.contact-distance span:last-child {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Map */
.contact-map {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.contact-map iframe {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  width: 100%;
}

.contact-directions-link {
  align-items: center;
  color: var(--red);
  display: inline-flex;
  font-size: .88rem;
  font-weight: 700;
  gap: .4rem;
  text-decoration: none;
  transition: color .2s;
}

.contact-directions-link:hover { color: var(--red-dk); }

/* Responsive */
@media (max-width: 1024px) {
  .contact-methods-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .contact-body-inner { grid-template-columns: 1fr; }
  .contact-info-wrap  { order: -1; }
  .contact-map iframe { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .contact-hero { padding-top: 6rem; }
  .contact-hero h1 { font-size: clamp(2.6rem, 11vw, 4rem); }
  .contact-methods-inner { grid-template-columns: 1fr; }
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form-footer { flex-direction: column; align-items: stretch; }
  .contact-form-legal { max-width: 100%; }
  .contact-submit { justify-content: center; width: 100%; }
  .contact-hero-actions { flex-direction: column; }
  .contact-btn-wa,
  .contact-btn-call { justify-content: center; width: 100%; }
}

/* ─── Accommodations page ─────────────────────────────────── */

/* Hero */
.lodging-hero {
  align-items: flex-end;
  color: var(--white);
  display: flex;
  min-height: clamp(380px, 50vh, 520px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

.lodging-hero-bg {
  inset: 0;
  position: absolute;
  z-index: 0;
}

.lodging-hero-bg img {
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  width: 100%;
}

.lodging-hero-bg::after {
  background: linear-gradient(0deg, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 22%) 60%, transparent 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.lodging-hero-content {
  margin-inline: auto;
  max-width: var(--cap);
  position: relative;
  width: 100%;
  z-index: 1;
}

.lodging-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.6rem, 5.5vw, 5.8rem);
  font-weight: 900;
  line-height: .9;
  margin-bottom: .9rem;
  text-transform: uppercase;
}

.lodging-hero p {
  color: rgb(255 255 255 / 80%);
  font-size: clamp(.95rem, 1.35vw, 1.15rem);
  max-width: 560px;
}

/* Intro */
.lodging-intro {
  background: var(--white);
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem);
}

.lodging-intro-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr auto;
  margin-inline: auto;
  max-width: var(--cap);
}

.lodging-intro-text h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.lodging-intro-text p {
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.08rem);
  line-height: 1.72;
  margin-bottom: .9rem;
  max-width: 580px;
}

.lodging-intro-stats {
  background: var(--black);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 220px;
  overflow: hidden;
}

.lodging-stat {
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  padding: 1.2rem 1.6rem;
  text-align: center;
}

.lodging-stat:last-child { border-bottom: none; }

.lodging-stat-num {
  color: var(--red);
  display: block;
  font-family: var(--f-disp);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: .35rem;
}

.lodging-stat strong {
  color: rgb(255 255 255 / 60%);
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Featured accommodation */
.lodging-feature {
  background: var(--soft);
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem);
}

.lodging-feature-inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr 1fr;
  margin-inline: auto;
  max-width: var(--cap);
}

/* Media side */
.lodging-feature-media { display: flex; flex-direction: column; gap: .8rem; }

.lodging-main-img {
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
}

.lodging-main-img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
  width: 100%;
}

.lodging-main-img:hover img { transform: scale(1.03); }

.lodging-badge {
  background: var(--red);
  border-radius: 99px;
  color: var(--white);
  font-size: .72rem;
  font-weight: 800;
  left: 1rem;
  letter-spacing: .06em;
  padding: .3rem .75rem;
  position: absolute;
  text-transform: uppercase;
  top: 1rem;
}

.lodging-gallery-grid {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(4, 1fr);
}

.lodging-gallery-item {
  border-radius: calc(var(--r) - 2px);
  margin: 0;
  overflow: hidden;
}

.lodging-gallery-item img {
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.lodging-gallery-item:hover img { transform: scale(1.06); }

/* Info side */
.lodging-feature-info { display: flex; flex-direction: column; gap: 1.2rem; }

.lodging-name {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: .92;
  margin: 0;
  text-transform: uppercase;
}

.lodging-tagline {
  color: var(--muted);
  font-size: 1rem;
  font-style: italic;
  margin: 0;
}

.lodging-features {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .2rem;
}

.lodging-feature-tag {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  display: inline-flex;
  font-size: .8rem;
  font-weight: 700;
  gap: .4rem;
  padding: .35rem .75rem;
}

.lodging-feature-tag svg { color: var(--red); flex-shrink: 0; }

.lodging-desc {
  color: var(--muted);
  font-size: clamp(.96rem, 1.08vw, 1.06rem);
  line-height: 1.72;
  margin: 0;
}

/* Contact box */
.lodging-contact {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  margin-top: .4rem;
  padding: 1.4rem;
}

.lodging-contact-title {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .06em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.lodging-contact-items {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1.2rem;
}

.lodging-contact-item {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: .94rem;
  font-weight: 600;
  gap: .6rem;
  text-decoration: none;
  transition: color .18s;
}

.lodging-contact-item svg { color: var(--red); flex-shrink: 0; }
.lodging-contact-item:hover { color: var(--red); }

.lodging-book-btn {
  background: var(--ink);
  border-radius: 99px;
  color: var(--white);
  display: inline-block;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .7rem 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}

.lodging-book-btn:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-1px);
}

/* Combo CTA */
.lodging-combo {
  background: var(--black);
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem);
}

.lodging-combo-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr auto;
  margin-inline: auto;
  max-width: var(--cap);
}

.lodging-combo-text h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  font-weight: 900;
  line-height: .95;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.lodging-combo-text p {
  color: rgb(255 255 255 / 65%);
  font-size: clamp(.97rem, 1.1vw, 1.08rem);
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 560px;
}

.lodging-combo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.8rem;
}

.lodging-cta-primary {
  align-items: center;
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 48px;
  padding: .85rem 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}

.lodging-cta-primary:hover {
  background: var(--red-dk);
  border-color: var(--red-dk);
  color: var(--white);
  transform: translateY(-1px);
}

.lodging-cta-secondary {
  align-items: center;
  background: transparent;
  border: 2px solid rgb(255 255 255 / 30%);
  border-radius: 99px;
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 48px;
  padding: .85rem 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .2s, background .2s;
}

.lodging-cta-secondary:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 60%);
  color: var(--white);
}

.lodging-combo-routes {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.lodging-route-pill {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--r);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 220px;
  padding: 1rem 1.3rem;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.lodging-route-pill:hover {
  background: rgb(255 255 255 / 10%);
  border-color: var(--red);
  color: var(--white);
}

.lodging-route-pill strong {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: 1.15rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lodging-route-pill span {
  color: rgb(255 255 255 / 50%);
  font-size: .82rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .lodging-feature-inner { grid-template-columns: 1fr; }
  .lodging-gallery-grid   { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .lodging-intro-inner  { grid-template-columns: 1fr; }
  .lodging-intro-stats  { flex-direction: row; min-width: 0; }
  .lodging-stat         { border-bottom: none; border-right: 1px solid rgb(255 255 255 / 8%); flex: 1; }
  .lodging-stat:last-child { border-right: none; }
  .lodging-combo-inner  { grid-template-columns: 1fr; }
  .lodging-combo-routes { flex-direction: row; flex-wrap: wrap; }
  .lodging-route-pill   { flex: 1; min-width: 180px; }
}

@media (max-width: 560px) {
  .lodging-hero          { padding-top: 6rem; }
  .lodging-gallery-grid  { grid-template-columns: repeat(2, 1fr); }
  .lodging-intro-stats   { flex-direction: column; }
  .lodging-stat          { border-right: none; border-bottom: 1px solid rgb(255 255 255 / 8%); }
  .lodging-combo-actions { flex-direction: column; }
  .lodging-cta-primary,
  .lodging-cta-secondary { justify-content: center; width: 100%; }
}

/* ─── About page ──────────────────────────────────────────── */

.about-hero {
  align-items: flex-end;
  color: var(--white);
  display: flex;
  min-height: clamp(420px, 58vh, 600px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  position: relative;
}

.about-hero-bg { inset: 0; position: absolute; z-index: 0; }

.about-hero-bg img {
  height: 100%; object-fit: cover; object-position: center 40%; width: 100%;
}

.about-hero-bg::after {
  background: linear-gradient(0deg, rgb(0 0 0 / 80%) 0%, rgb(0 0 0 / 20%) 55%, transparent 100%);
  content: ""; inset: 0; position: absolute;
}

.about-hero-content {
  margin-inline: auto; max-width: var(--cap);
  position: relative; width: 100%; z-index: 1;
}

.about-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 900;
  line-height: .88;
  margin-bottom: .9rem;
  text-transform: uppercase;
}

.about-hero p {
  color: rgb(255 255 255 / 78%);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 500px;
}

/* Founder */
.about-founder {
  background: var(--white);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.about-founder-inner {
  align-items: start;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: 1fr auto;
  margin-inline: auto;
  max-width: var(--cap);
}

.about-founder-text h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.about-founder-text p {
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.75;
  margin-bottom: 1rem;
  max-width: 600px;
}

.about-founder-text strong { color: var(--ink); font-weight: 750; }

.about-stats-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.about-stat {
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.4rem 1.6rem;
  text-align: center;
}

.about-stat-num {
  color: var(--red);
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
}

.about-stat strong {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* DNA + Commitments */
.about-dna {
  background: var(--soft);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.about-dna-inner { margin-inline: auto; max-width: var(--cap); }

.about-dna-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 760px;
}

.about-dna-header h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 900;
  line-height: .94;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.about-dna-header p {
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.75;
}

.about-commitments {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, 1fr);
}

.about-commitment {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  transition: box-shadow .2s, transform .2s;
}

.about-commitment:hover {
  box-shadow: var(--sh-lift);
  transform: translateY(-2px);
}

.about-commitment-header {
  align-items: center;
  display: flex;
  gap: .7rem;
}

.about-commitment-num {
  background: var(--red);
  border-radius: calc(var(--r) - 2px);
  color: var(--white);
  font-family: var(--f-disp);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  padding: .2rem .5rem;
}

.about-commitment-icon { font-size: 1.6rem; line-height: 1; }

.about-commitment h3 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 900;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.about-commitment p {
  color: var(--muted);
  font-size: clamp(.93rem, 1vw, 1rem);
  line-height: 1.7;
  margin: 0;
}

/* Project 1+1 */
.about-project {
  background: var(--green);
  color: var(--white);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.about-project-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: auto 1fr;
  margin-inline: auto;
  max-width: var(--cap);
}

.about-project-visual img {
  border-radius: var(--r);
  box-shadow: var(--sh-lift);
  max-width: min(280px, 40vw);
  object-fit: contain;
}

.about-project-text .section-kicker { color: rgb(255 255 255 / 60%); }

.about-project-text h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: .94;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.about-project-text p {
  color: rgb(255 255 255 / 82%);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.72;
  margin-bottom: 1rem;
}

.about-project-text strong { color: var(--white); }

.about-project-link {
  color: var(--white);
  display: inline-block;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-top: .5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  transition: opacity .2s;
}

.about-project-link:hover { color: var(--white); opacity: .7; }

/* Certifications */
.about-certs {
  background: var(--white);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.about-certs-inner { margin-inline: auto; max-width: var(--cap); }

.about-certs-inner h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.about-certs-sub {
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  max-width: 680px;
}

.about-certs-sub strong { color: var(--ink); font-weight: 750; }

.about-certs-logos {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
  justify-content: center;
}

.about-certs-logos img {
  max-height: 100px;
  max-width: 200px;
  object-fit: contain;
}

/* Press */
.about-press {
  background: var(--soft);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.about-press-inner {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr 1fr;
  margin-inline: auto;
  max-width: var(--cap);
}

.about-press-inner h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 900;
  grid-column: 1 / -1;
  line-height: .96;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.about-press-inner > .section-kicker { grid-column: 1 / -1; }

.about-press-grid {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.about-press-item {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem;
}

.about-press-icon { font-size: 1.6rem; flex-shrink: 0; }

.about-press-item > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.about-press-item strong {
  color: var(--ink);
  font-size: .96rem;
  font-weight: 800;
}

.about-press-item span {
  color: var(--muted);
  font-size: .82rem;
}

.about-press-video {
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  position: relative;
}

.about-video-btn {
  border-radius: var(--r);
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.about-video-btn img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.about-video-btn:hover img { transform: scale(1.04); }

.about-video-play {
  align-items: center;
  background: var(--red);
  border-radius: 12px;
  display: flex;
  height: 64px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background .2s, transform .2s;
  width: 96px;
}

.about-video-btn:hover .about-video-play {
  background: var(--red-dk);
  transform: translate(-50%, -50%) scale(1.06);
}

.about-apunt-logo {
  filter: grayscale(1);
  max-height: 30px;
  max-width: 160px;
  object-fit: contain;
  opacity: .5;
}

/* CTA final */
.about-cta {
  background: var(--black);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.about-cta-inner { margin-inline: auto; max-width: 720px; }

.about-cta-inner h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  font-weight: 900;
  line-height: .94;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.about-cta-inner p {
  color: rgb(255 255 255 / 62%);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  margin-bottom: 0;
}

.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2rem;
}

.about-cta-btn {
  align-items: center;
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.8rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, transform .15s;
}

.about-cta-btn:hover {
  background: var(--red-dk);
  border-color: var(--red-dk);
  color: var(--white);
  transform: translateY(-1px);
}

.about-cta-btn--ghost {
  background: transparent;
  border-color: rgb(255 255 255 / 30%);
  box-shadow: none;
}

.about-cta-btn--ghost:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 60%);
}

/* Responsive */
@media (max-width: 900px) {
  .about-founder-inner  { grid-template-columns: 1fr; }
  .about-project-inner  { grid-template-columns: 1fr; }
  .about-project-visual { text-align: center; }
  .about-project-visual img { max-width: min(220px, 60vw); }
  .about-press-inner    { grid-template-columns: 1fr; }
  .about-press-inner h2,
  .about-press-inner > .section-kicker { grid-column: auto; }
}

@media (max-width: 640px) {
  .about-hero           { padding-top: 6rem; }
  .about-commitments    { grid-template-columns: 1fr; }
  .about-cta-actions    { flex-direction: column; }
  .about-cta-btn        { justify-content: center; width: 100%; }
}

/* ─── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-nav {
  background: var(--black);
  padding: .55rem clamp(1rem, 3vw, 2rem);
}

.breadcrumb-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  margin: 0 auto;
  max-width: var(--cap);
  padding: 0;
}

.breadcrumb-list li { font-size: .78rem; }

.breadcrumb-list a {
  color: rgb(255 255 255 / 50%);
  text-decoration: none;
  transition: color .18s;
}

.breadcrumb-list a:hover { color: var(--white); }

.breadcrumb-list [aria-current="page"] {
  color: rgb(255 255 255 / 30%);
  pointer-events: none;
}

.breadcrumb-sep { color: rgb(255 255 255 / 22%); }

/* ─── Blog index ──────────────────────────────────────────── */

.blog-hero {
  background:
    linear-gradient(135deg, var(--black) 0%, #1a0a0a 60%, #2a0808 100%);
  padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.blog-hero-inner {
  margin-inline: auto;
  max-width: var(--cap);
}

.blog-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 900;
  line-height: .88;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.blog-hero p {
  color: rgb(255 255 255 / 62%);
  font-size: clamp(.97rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  max-width: 600px;
}

.blog-body {
  background: var(--soft);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem);
}

.blog-inner {
  margin-inline: auto;
  max-width: var(--cap);
}

/* Featured post */
.blog-featured {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  color: inherit;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .22s, transform .22s;
}

.blog-featured:hover {
  box-shadow: var(--sh-lift);
  transform: translateY(-2px);
}

.blog-featured-img {
  overflow: hidden;
  position: relative;
}

.blog-featured-img img {
  aspect-ratio: 4 / 3;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  width: 100%;
}

.blog-featured:hover .blog-featured-img img { transform: scale(1.04); }

.blog-featured-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.8rem);
}

.blog-featured-body h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  font-weight: 900;
  line-height: .96;
  margin: 0;
  text-transform: uppercase;
}

.blog-featured-body p {
  color: var(--muted);
  font-size: clamp(.95rem, 1.1vw, 1.06rem);
  line-height: 1.68;
  margin: 0;
}

/* Shared meta */
.blog-meta {
  align-items: center;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.blog-cat {
  background: var(--red);
  border-radius: 99px;
  color: var(--white);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .22rem .62rem;
  text-transform: uppercase;
}

.blog-date {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
}

.blog-read-more {
  color: var(--red);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .03em;
  margin-top: auto;
  text-transform: uppercase;
}

.blog-no-img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--black), #2a0808);
  width: 100%;
}

/* Grid */
.blog-grid {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(3, 1fr);
}

.blog-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .22s, transform .22s;
}

.blog-card:hover {
  box-shadow: var(--sh-lift);
  transform: translateY(-3px);
}

.blog-card-img {
  overflow: hidden;
}

.blog-card-img img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
  width: 100%;
}

.blog-card:hover .blog-card-img img { transform: scale(1.05); }

.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .65rem;
  padding: 1.2rem;
}

.blog-card-body h3 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  font-weight: 900;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.blog-card-body p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
  margin: 0;
}

/* Blog CTA */
.blog-cta {
  background: var(--black);
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.blog-cta-inner { margin-inline: auto; max-width: 560px; }

.blog-cta-inner h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.blog-cta-btn {
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  display: inline-block;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .05em;
  min-height: 50px;
  padding: .9rem 1.8rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}

.blog-cta-btn:hover {
  background: var(--red-dk);
  border-color: var(--red-dk);
  color: var(--white);
  transform: translateY(-1px);
}

/* ─── Blog post page ──────────────────────────────────────── */

.blog-post-hero {
  align-items: flex-end;
  background-color: var(--black);
  background-position: center 35%;
  background-size: cover;
  color: var(--white);
  display: flex;
  min-height: clamp(380px, 50vh, 540px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

.blog-post-hero::before {
  background: linear-gradient(0deg, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 22%) 60%, transparent 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.blog-post-hero-inner {
  margin-inline: auto;
  max-width: var(--cap);
  position: relative;
  width: 100%;
  z-index: 1;
}

.blog-post-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2rem, 4.5vw, 4.5rem);
  font-weight: 900;
  line-height: .94;
  margin: .8rem 0 1rem;
  max-width: 900px;
  text-transform: uppercase;
}

.blog-post-hero-meta { margin-bottom: .4rem; }

.blog-post-lead {
  color: rgb(255 255 255 / 75%);
  font-size: clamp(.97rem, 1.2vw, 1.12rem);
  font-weight: 500;
  line-height: 1.62;
  margin: 0;
  max-width: 740px;
}

.blog-post-body {
  background: var(--white);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem);
}

.blog-post-inner {
  margin-inline: auto;
  max-width: 780px;
}

.blog-post-content { font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.78; color: var(--muted); }
.blog-post-content p { margin-bottom: 1.2rem; }
.blog-post-heading { color: var(--ink); font-family: var(--f-disp); font-weight: 900; line-height: 1; margin: 2rem 0 1rem; text-transform: uppercase; }
h2.blog-post-heading { font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
h3.blog-post-heading { font-size: clamp(1.2rem, 2vw, 1.8rem); }

.blog-post-videos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 2rem 0;
}

.blog-post-videos iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  width: 100%;
}

.blog-post-gallery {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 2rem 0;
}

.blog-post-gallery figure {
  border-radius: var(--r);
  margin: 0;
  overflow: hidden;
}

.blog-post-gallery img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.blog-post-gallery figure:hover img { transform: scale(1.05); }

.blog-post-footer {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
}

.blog-back-link {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s;
}

.blog-back-link:hover { color: var(--ink); }

.blog-post-cta {
  background: var(--red);
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .75rem 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s;
}

.blog-post-cta:hover { background: var(--red-dk); color: var(--white); }

/* Responsive blog */
@media (max-width: 900px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-img img { aspect-ratio: 16 / 9; height: auto; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-post-gallery { grid-template-columns: repeat(2, 1fr); }
  .blog-post-footer { flex-direction: column; align-items: stretch; }
  .blog-post-cta { text-align: center; }
}

/* ─── Grupos pages ────────────────────────────────────────── */

/* Hero */
.grupos-hero {
  align-items: flex-end;
  color: var(--white);
  display: flex;
  min-height: clamp(500px, 70vh, 720px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  position: relative;
}

.grupos-hero-bg { inset: 0; position: absolute; z-index: 0; }

.grupos-hero-bg img {
  height: 100%; object-fit: cover; object-position: center 40%; width: 100%;
}

.grupos-hero-bg::after {
  background: linear-gradient(0deg, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 28%) 60%, transparent 100%);
  content: ""; inset: 0; position: absolute;
}

.grupos-hero-content {
  margin-inline: auto; max-width: var(--cap);
  position: relative; width: 100%; z-index: 1;
}

.grupos-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(3rem, 7vw, 7.5rem);
  font-weight: 900;
  line-height: .86;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.grupos-hero p {
  color: rgb(255 255 255 / 80%);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  margin-bottom: 2rem;
  max-width: 540px;
}

.grupos-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Buttons */
.grupos-btn-wa {
  align-items: center;
  background: #25d366;
  border: 2px solid #25d366;
  border-radius: 99px;
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  gap: .55rem;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}

.grupos-btn-wa:hover { background: #1fbc5a; border-color: #1fbc5a; color: var(--white); transform: translateY(-1px); }

.grupos-btn-contact {
  align-items: center;
  background: rgb(255 255 255 / 12%);
  border: 2px solid rgb(255 255 255 / 36%);
  border-radius: 99px;
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, border-color .2s;
}

.grupos-btn-contact:hover { background: rgb(255 255 255 / 20%); border-color: rgb(255 255 255 / 60%); color: var(--white); }

/* Highlights bar */
.grupos-highlights {
  background: var(--black);
  padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2rem);
}

.grupos-highlights-inner {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--r);
  margin-inline: auto;
  max-width: var(--cap);
  overflow: hidden;
}

.grupos-highlight {
  background: var(--black);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.2rem 1.4rem;
  text-align: center;
}

.grupos-highlight span {
  color: var(--red);
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
}

.grupos-highlight strong {
  color: rgb(255 255 255 / 55%);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Categories */
.grupos-categories {
  background: var(--soft);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.grupos-categories-inner { margin-inline: auto; max-width: var(--cap); }

.grupos-categories-header { margin-bottom: clamp(2rem, 4vw, 3rem); }

.grupos-categories-header h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: .96;
  text-transform: uppercase;
}

.grupos-categories-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, 1fr);
}

.grupos-cat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}

.grupos-cat-card:hover { box-shadow: var(--sh-lift); transform: translateY(-3px); }

.grupos-cat-img {
  overflow: hidden;
  position: relative;
}

.grupos-cat-img img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
  width: 100%;
}

.grupos-cat-card:hover .grupos-cat-img img { transform: scale(1.05); }

.grupos-cat-icon {
  background: var(--white);
  border-radius: 50%;
  bottom: -18px;
  font-size: 1.4rem;
  height: 44px;
  left: 1.2rem;
  line-height: 44px;
  position: absolute;
  text-align: center;
  width: 44px;
  box-shadow: var(--sh-card);
}

.grupos-cat-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .7rem;
  padding: 2.2rem 1.3rem 1.3rem;
}

.grupos-cat-body h3 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 900;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.grupos-cat-body p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

.grupos-cat-link {
  color: var(--red);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .03em;
  margin-top: auto;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s;
}

.grupos-cat-link:hover { color: var(--red-dk); }

/* Routes section */
.grupos-routes-section {
  background: var(--white);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.grupos-routes-inner { margin-inline: auto; max-width: var(--cap); }

.grupos-routes-inner h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: .8rem;
  text-transform: uppercase;
}

.grupos-routes-desc {
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.08rem);
  margin-bottom: 2rem;
  max-width: 680px;
}

.grupos-routes {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, 1fr);
}

.grupos-route-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  color: inherit;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}

.grupos-route-card:hover { box-shadow: var(--sh-lift); transform: translateY(-2px); }

.grupos-route-img { overflow: hidden; position: relative; }

.grupos-route-img img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.grupos-route-card:hover .grupos-route-img img { transform: scale(1.05); }

.grupos-route-price {
  background: var(--red);
  border-radius: 0 0 0 var(--r);
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(.9rem, 1.3vw, 1.2rem);
  font-weight: 800;
  padding: .5rem 1rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
}

.grupos-route-body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.2rem;
}

.grupos-route-body strong { color: var(--ink); font-family: var(--f-disp); font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 900; text-transform: uppercase; }
.grupos-route-body span   { color: var(--muted); font-size: .85rem; }

/* Features grid */
.grupos-features-section {
  background: var(--black);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.grupos-features-inner { margin-inline: auto; max-width: var(--cap); }

.grupos-features-inner h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
}

.grupos-features-inner > .section-kicker { color: rgb(255 255 255 / 52%); }

.grupos-features-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--r);
  overflow: hidden;
}

.grupos-feature {
  background: rgb(255 255 255 / 3%);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.6rem;
  transition: background .18s;
}

.grupos-feature:hover { background: rgb(255 255 255 / 6%); }

.grupos-feature span { font-size: 1.8rem; line-height: 1; }
.grupos-feature strong { color: var(--white); font-size: .96rem; font-weight: 800; }
.grupos-feature p { color: rgb(255 255 255 / 52%); font-size: .86rem; line-height: 1.55; margin: 0; }

/* CTA section */
.grupos-cta-section {
  background: var(--soft);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.grupos-cta-inner { margin-inline: auto; max-width: 680px; }

.grupos-cta-logo {
  filter: grayscale(1);
  margin: 0 auto 1.8rem;
  max-width: 140px;
  opacity: .4;
}

.grupos-cta-inner h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 900;
  line-height: .94;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.grupos-cta-inner p { color: var(--muted); font-size: clamp(.97rem, 1.1vw, 1.1rem); margin-bottom: 0; }

.grupos-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Sub-page sections */
.grupos-section {
  background: var(--white);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.grupos-section-alt { background: var(--soft); }

.grupos-section-inner { margin-inline: auto; max-width: var(--cap); }

.grupos-section h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  text-transform: uppercase;
}

.grupos-two-col {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr 1fr;
}

.grupos-two-col p { color: var(--muted); font-size: clamp(.97rem, 1.1vw, 1.1rem); line-height: 1.75; margin-bottom: 1rem; }
.grupos-two-col strong { color: var(--ink); font-weight: 750; }

/* Perks list */
.grupos-perks { display: flex; flex-direction: column; gap: 1rem; }

.grupos-perk {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
}

.grupos-perk span:first-child { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }

.grupos-perk > div { display: flex; flex-direction: column; gap: .2rem; }

.grupos-perk strong { color: var(--ink); font-size: .94rem; font-weight: 800; }
.grupos-perk span:last-child { color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* Gallery */
.grupos-gallery-section {
  background: var(--soft);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.grupos-gallery {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.2rem);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
}

.grupos-gallery-item {
  border-radius: var(--r);
  margin: 0;
  overflow: hidden;
}

.grupos-gallery-item img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.grupos-gallery-item:hover img { transform: scale(1.05); }

/* Benefits grid (team building) */
.grupos-benefits-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, 1fr);
}

.grupos-benefit {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.6rem;
}

.grupos-benefit-icon { font-size: 2rem; line-height: 1; }
.grupos-benefit h3 { color: var(--ink); font-family: var(--f-disp); font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 900; margin: 0; text-transform: uppercase; }
.grupos-benefit p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .grupos-categories-grid { grid-template-columns: 1fr; }
  .grupos-two-col { grid-template-columns: 1fr; }
  .grupos-features-grid { grid-template-columns: repeat(2, 1fr); }
  .grupos-benefits-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grupos-hero { min-height: 560px; padding-top: 6rem; }
  .grupos-hero h1 { font-size: clamp(2.6rem, 12vw, 4.5rem); }
  .grupos-highlights-inner { grid-template-columns: repeat(2, 1fr); }
  .grupos-routes { grid-template-columns: 1fr; }
  .grupos-gallery { grid-template-columns: repeat(2, 1fr); }
  .grupos-features-grid { grid-template-columns: 1fr; }
  .grupos-hero-actions { flex-direction: column; }
  .grupos-btn-wa,
  .grupos-btn-contact { justify-content: center; width: 100%; }
  .grupos-cta-actions { flex-direction: column; }
}

/* ─── Reservation modal ───────────────────────────────────── */
.reserva-modal {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9300;
}

.reserva-modal[hidden] { display: none; }

.reserva-modal-backdrop {
  background: rgb(0 0 0 / 76%);
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.reserva-modal-inner {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: 0 32px 80px rgb(0 0 0 / 38%);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-width: min(520px, 96vw);
  overflow-y: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* Dark branded header */
.reserva-modal-header {
  align-items: center;
  background: var(--black);
  border-radius: var(--r) var(--r) 0 0;
  display: flex;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.reserva-modal-header h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .04em;
  margin: 0;
  text-transform: uppercase;
}

.reserva-modal-close {
  background: rgb(255 255 255 / 10%);
  border: none;
  border-radius: 50%;
  color: rgb(255 255 255 / 60%);
  cursor: pointer;
  font-size: .95rem;
  height: 32px;
  line-height: 1;
  transition: background .18s, color .18s;
  width: 32px;
}

.reserva-modal-close:hover {
  background: var(--red);
  color: var(--white);
}

/* Form */
.reserva-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem 1.4rem;
}

.reserva-form-row {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr 1fr;
}

.reserva-submit {
  align-items: center;
  background: #25d366;
  border: none;
  border-radius: 10px;
  color: var(--white);
  cursor: pointer;
  display: flex;
  font-family: var(--f-body);
  font-size: .92rem;
  font-weight: 800;
  gap: .6rem;
  justify-content: center;
  letter-spacing: .04em;
  min-height: 48px;
  padding: .85rem 1.4rem;
  text-transform: uppercase;
  transition: background .2s;
  margin-top: .2rem;
}

.reserva-submit:hover { background: #1fbc5a; }

/* Compact contact links below form */
.reserva-modal-contacts {
  border-top: 1px solid var(--line);
  display: flex;
  gap: .5rem;
  padding: 1rem 1.4rem 1.2rem;
}

.reserva-contact-btn {
  align-items: center;
  border-radius: 8px;
  color: var(--white);
  display: flex;
  flex: 1;
  font-size: .78rem;
  font-weight: 700;
  gap: .5rem;
  justify-content: center;
  padding: .65rem .8rem;
  text-align: center;
  text-decoration: none;
  transition: opacity .18s;
}

.reserva-contact-btn svg { flex-shrink: 0; }
.reserva-contact-btn:hover { opacity: .85; color: var(--white); }
.reserva-contact-btn span { display: none; }

.reserva-contact-btn--phone { background: var(--red); }
.reserva-contact-btn--email { background: #4285F4; }

.reserva-submit:hover { background: #1fbc5a; }

@media (max-width: 480px) {
  .reserva-form-row { grid-template-columns: 1fr; }
}

/* Button reset for <button> elements styled as links */
button.route-reserve,
button.route-tariff-button,
button.sales-button,
button.faq-hero-cta,
button.faq-cta-btn,
button.about-cta-btn,
button.about-cta-btn--ghost,
button.sales-button-ghost {
  cursor: pointer;
  font-family: inherit;
}

/* ─── Profesionales page extras ───────────────────────────── */
.prof-rates {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 1rem;
  overflow: hidden;
}

.prof-rate-card {
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.5rem 1.2rem;
  text-align: center;
  transition: background .15s;
}

.prof-rate-card:hover { background: var(--soft); }

.prof-rate-duration {
  color: var(--muted);
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.prof-rate-price {
  color: var(--red);
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
}

.prof-rate-unit {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.prof-rates-note {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  margin: 0;
}

.prof-uses-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr 1fr;
}

.prof-uses-grid h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: 1.4rem;
  text-transform: uppercase;
}

.prof-uses {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.prof-use {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  gap: .7rem;
  padding: .8rem 1rem;
}

.prof-use span { font-size: 1.3rem; }
.prof-use strong { color: var(--ink); font-size: .88rem; font-weight: 700; }

.prof-features {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.prof-features li {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: .94rem;
  gap: .65rem;
}

.prof-features li span {
  color: var(--red);
  flex-shrink: 0;
  font-weight: 900;
}

@media (max-width: 760px) {
  .prof-rates { grid-template-columns: repeat(2, 1fr); }
  .prof-uses-grid { grid-template-columns: 1fr; }
  .prof-uses { grid-template-columns: 1fr; }
}

/* ─── Profesionales CTA & photos ──────────────────────────── */
.prof-cta-section {
  background: var(--white);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.prof-cta-inner {
  margin-inline: auto;
  max-width: var(--cap);
}

.prof-cta-header {
  margin-bottom: 2.5rem;
  max-width: 600px;
}

.prof-cta-header h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: .8rem;
  text-transform: uppercase;
}

.prof-cta-header p {
  color: var(--muted);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  margin: 0;
}

.prof-cta-body {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr 1.4fr;
  align-items: start;
}

/* Contact cards */
.prof-cta-contacts {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.prof-contact-card {
  align-items: center;
  border-radius: var(--r);
  color: var(--white);
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem;
  text-decoration: none;
  transition: opacity .18s, transform .15s;
}

.prof-contact-card:hover { color: var(--white); opacity: .9; transform: translateY(-1px); }

.prof-contact-card > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.prof-contact-card strong { color: var(--white); display: block; font-size: .88rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.prof-contact-card span   { color: rgb(255 255 255 / 80%); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-contact-card em     { color: rgb(255 255 255 / 52%); font-size: .78rem; font-style: normal; }

.prof-contact-card--wa    { background: #25d366; }
.prof-contact-card--phone { background: var(--red); }
.prof-contact-card--email { background: #4285F4; }

/* Form */
.prof-form {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
}

.prof-form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.prof-submit {
  align-items: center;
  background: var(--red);
  border: none;
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  cursor: pointer;
  display: flex;
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 800;
  gap: .6rem;
  justify-content: center;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.6rem;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}

.prof-submit:hover { background: var(--red-dk); transform: translateY(-1px); }

/* Photo grid */
.prof-photo-grid {
  display: grid;
  gap: clamp(.8rem, 1.5vw, 1.2rem);
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
}

.prof-photo {
  border-radius: var(--r);
  margin: 0;
  overflow: hidden;
  position: relative;
}

.prof-photo img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.prof-photo:hover img { transform: scale(1.04); }

.prof-photo figcaption {
  background: linear-gradient(0deg, rgb(0 0 0 / 72%), transparent);
  bottom: 0;
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  left: 0;
  letter-spacing: .04em;
  padding: 1.5rem .9rem .7rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .prof-cta-body { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .prof-form-row { grid-template-columns: 1fr; }
  .prof-photo-grid { grid-template-columns: 1fr; }
}

/* ─── Recomendados page ───────────────────────────────────── */

.recom-hero {
  align-items: flex-end;
  color: var(--white);
  display: flex;
  min-height: clamp(420px, 55vh, 560px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  position: relative;
}

.recom-hero-bg { inset: 0; position: absolute; z-index: 0; }

.recom-hero-bg img {
  height: 100%; object-fit: cover; object-position: center center; width: 100%;
}

.recom-hero-bg::after {
  background: linear-gradient(0deg, rgb(11 12 15 / 100%) 0%, rgb(0 0 0 / 72%) 45%, rgb(0 0 0 / 48%) 100%);
  content: ""; inset: 0; position: absolute;
}

.recom-hero-content {
  margin-inline: auto; max-width: var(--cap);
  position: relative; width: 100%; z-index: 1;
}

.recom-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2.8rem, 6vw, 6.5rem);
  font-weight: 900;
  line-height: .88;
  margin-bottom: .9rem;
  text-transform: uppercase;
}

.recom-hero p {
  color: rgb(255 255 255 / 78%);
  font-size: clamp(.97rem, 1.3vw, 1.15rem);
  max-width: 560px;
}

/* Sections */
.recom-section {
  background: var(--black);
  padding: clamp(3rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem) clamp(4rem, 7vw, 6.5rem);
}

.recom-section .section-kicker { color: rgb(255 255 255 / 45%); }

.recom-section-alt {
  background: var(--soft);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.recom-section-inner { margin-inline: auto; max-width: var(--cap); }

.recom-category-label {
  align-items: center;
  display: flex;
  gap: .8rem;
  margin-bottom: 2.5rem;
}

.recom-cat-icon { font-size: 1.8rem; line-height: 1; }

/* Biga feature */
.recom-feature--biga {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 380px 1fr;
  align-items: start;
}

/* Biga card */
.recom-biga-card {
  background: var(--black);
  border-radius: var(--r);
  box-shadow: var(--sh-lift);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow: hidden;
  padding: 1.6rem;
  position: sticky;
  top: 80px;
}

.recom-biga-header { display: flex; justify-content: flex-end; }

.recom-badge {
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .3rem .75rem;
  text-transform: uppercase;
}

.recom-badge--star { background: #f5a428; color: var(--black); }

.recom-biga-identity {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.recom-biga-emoji { font-size: 2.5rem; line-height: 1; }

.recom-biga-name {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: 2rem;
  font-weight: 900;
  line-height: .9;
  margin: 0;
  text-transform: uppercase;
}

.recom-biga-type {
  color: rgb(255 255 255 / 50%);
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-top: .25rem;
}

.recom-biga-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.recom-biga-tags span {
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 99px;
  color: rgb(255 255 255 / 72%);
  font-size: .76rem;
  font-weight: 600;
  padding: .25rem .65rem;
}

.recom-biga-details {
  border-top: 1px solid rgb(255 255 255 / 10%);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: 1rem;
}

.recom-biga-detail {
  align-items: flex-start;
  color: rgb(255 255 255 / 55%);
  display: flex;
  font-size: .82rem;
  gap: .6rem;
  line-height: 1.5;
}

.recom-biga-detail svg { color: var(--red); flex-shrink: 0; margin-top: 2px; }

.recom-biga-btn {
  background: var(--red);
  border-radius: var(--r);
  color: var(--white);
  display: block;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .85rem 1.2rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s;
}

.recom-biga-btn:hover { background: var(--red-dk); color: var(--white); }

/* Biga info text (on dark background) */
.recom-feature-info h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 900;
  line-height: .94;
  margin-bottom: 1.4rem;
  text-transform: uppercase;
}

.recom-lead {
  color: rgb(255 255 255 / 90%);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 600;
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

.recom-feature-info p {
  color: rgb(255 255 255 / 60%);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.recom-feature-info strong { color: var(--white); font-weight: 750; }

.recom-quote {
  background: rgb(255 255 255 / 5%);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
  color: rgb(255 255 255 / 62%);
  font-size: .96rem;
  font-style: italic;
  line-height: 1.65;
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
}

.recom-quote cite {
  color: rgb(255 255 255 / 40%);
  display: block;
  font-size: .82rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  margin-top: .5rem;
  text-transform: uppercase;
}

/* Lodging (secondary) */
.recom-lodging {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr 1fr;
}

.recom-lodging-media { display: flex; flex-direction: column; gap: .8rem; }
.recom-lodging-info  { display: flex; flex-direction: column; gap: 1rem; }

/* CTA */
.recom-cta {
  background: var(--black);
  padding: clamp(4rem, 7vw, 6rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.recom-cta-inner { margin-inline: auto; max-width: 780px; }

.recom-cta h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  font-weight: 900;
  line-height: .94;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.recom-cta p {
  color: rgb(255 255 255 / 62%);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  margin-bottom: 0;
}

.recom-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Responsive */
@media (max-width: 900px) {
  .recom-feature--biga { grid-template-columns: 1fr; }
  .recom-biga-card { position: static; }
  .recom-lodging { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .recom-hero { padding-top: 6rem; }
  .recom-cta-actions { flex-direction: column; }
  .lodging-cta-primary,
  .lodging-cta-secondary { justify-content: center; width: 100%; }
}

/* ─── Biga photos inside card ─────────────────────────────── */
.recom-biga-photos {
  display: grid;
  gap: .6rem;
  grid-template-columns: 1.6fr 1fr;
  margin-bottom: .2rem;
}

.recom-biga-photo {
  border-radius: calc(var(--r) - 2px);
  margin: 0;
  overflow: hidden;
}

.recom-biga-photo img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.recom-biga-photo--main img { aspect-ratio: 16 / 10; }
.recom-biga-photo:hover img { transform: scale(1.04); }

/* Biga hero banner */
.recom-biga-hero-img {
  border-radius: var(--r);
  margin-bottom: 2.5rem;
  overflow: hidden;
}

.recom-biga-hero-img img {
  aspect-ratio: 21 / 9;
  display: block;
  object-fit: cover;
  object-position: center 60%;
  width: 100%;
}

/* ─── Jaloque callout (about page) ───────────────────────── */
.about-jaloque-callout {
  align-items: flex-start;
  background: linear-gradient(135deg, rgb(208 0 0 / 6%), rgb(208 0 0 / 2%));
  border: 1px solid rgb(208 0 0 / 16%);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
  display: flex;
  gap: 1.2rem;
  margin-top: 1.6rem;
  padding: 1.25rem 1.3rem;
}

.about-jaloque-year {
  background: var(--red);
  border-radius: calc(var(--r) - 2px);
  color: var(--white);
  display: block;
  flex-shrink: 0;
  font-family: var(--f-disp);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  padding: .3rem .55rem;
  margin-top: .15rem;
}

.about-jaloque-callout > div { display: flex; flex-direction: column; gap: .5rem; }

.about-jaloque-callout strong {
  color: var(--ink);
  font-size: .96rem;
  font-weight: 800;
}

.about-jaloque-callout p {
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.68;
  margin: 0;
}

.about-jaloque-callout p strong { color: var(--ink); font-weight: 750; }


/* ─── Homepage redesign ───────────────────────────────────── */

/* Hero: dual CTAs */
.home-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-bottom: clamp(1.6rem, 3vh, 2.8rem);
}

.home-cta-ghost {
  align-items: center;
  background: transparent;
  border: 2px solid rgb(255 255 255 / 38%);
  border-radius: 99px;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .04em;
  min-height: 50px;
  min-width: min(200px, 44vw);
  padding: .9rem 1.6rem;
  text-transform: uppercase;
  transition: background .2s, border-color .2s;
}

.home-cta-ghost:hover {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 64%);
}

/* Hero trust bar */
.home-hero-trust {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0;
}

.home-hero-trust-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.home-hero-trust-stars {
  color: #f5a428;
  font-size: .95rem;
  letter-spacing: .04em;
}

.home-hero-trust-item > span:last-child {
  color: rgb(255 255 255 / 58%);
  font-size: .75rem;
  font-weight: 600;
}

.home-hero-trust-sep {
  background: rgb(255 255 255 / 18%);
  height: 2rem;
  width: 1px;
}

/* Scroll indicator */
.home-hero-scroll {
  bottom: 2rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

.home-hero-scroll span {
  animation: scroll-bounce 1.8s ease-in-out infinite;
  border-bottom: 2px solid rgb(255 255 255 / 40%);
  border-right: 2px solid rgb(255 255 255 / 40%);
  display: block;
  height: 12px;
  transform: rotate(45deg);
  width: 12px;
}

@keyframes scroll-bounce {
  0%, 100% { opacity: .3; transform: rotate(45deg) translateY(0); }
  50%       { opacity: .9; transform: rotate(45deg) translateY(5px); }
}

/* Stats bar */
.home-stats {
  background: var(--black);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1rem, 3vw, 2rem);
}

.home-stats-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  margin-inline: auto;
  max-width: var(--cap);
}

.home-stat-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .5rem clamp(1rem, 3vw, 2.5rem);
  position: relative;
  text-align: center;
}

.home-stat-item + .home-stat-item::before {
  background: rgb(255 255 255 / 12%);
  content: "";
  height: 2rem;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}

.home-stat-item strong {
  color: var(--red);
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 900;
  line-height: 1;
}

.home-stat-item span {
  color: rgb(255 255 255 / 45%);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Routes section */
.home-routes-section {
  background: var(--soft);
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(4rem, 7vw, 6.5rem);
}

.home-routes-inner { margin-inline: auto; max-width: var(--cap); }

.home-routes-inner h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
  text-transform: uppercase;
}

.home-route-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .4rem;
}

.home-route-tags em {
  background: rgb(255 255 255 / 12%);
  border-radius: 99px;
  color: rgb(255 255 255 / 65%);
  font-size: .72rem;
  font-style: normal;
  font-weight: 600;
  padding: .18rem .55rem;
}

.home-routes-note {
  color: var(--muted);
  font-size: .85rem;
  margin-top: 1.4rem;
  text-align: center;
}

.home-routes-note::before {
  content: "✓ ";
  color: var(--green);
  font-weight: 900;
}

/* Gallery section */
.home-gallery-section {
  background: var(--white);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.home-gallery-inner { margin-inline: auto; max-width: var(--cap); }

.home-gallery-inner h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
  text-transform: uppercase;
}

.home-gallery-masonry {
  display: grid;
  gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: 1fr 1.4fr 1fr;
  height: clamp(320px, 46vw, 520px);
}

.home-gallery-col {
  display: flex;
  flex-direction: column;
  gap: clamp(.6rem, 1.2vw, 1rem);
}

.home-gallery-col img {
  border-radius: var(--r);
  flex: 1;
  min-height: 0;
  object-fit: cover;
  transition: transform .4s ease;
  width: 100%;
}

.home-gallery-col:hover img { transform: scale(1.02); }

.home-gallery-col--tall img {
  flex: 1;
  height: 100%;
  object-fit: cover;
}

.home-gallery-cta {
  margin-top: 1.5rem;
  text-align: center;
}

.home-gallery-btn {
  color: var(--red);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s;
}

.home-gallery-btn:hover { color: var(--red-dk); }

/* Quality section */
.home-quality-section {
  background: var(--black);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}

.home-quality-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr 1fr;
  margin-inline: auto;
  max-width: var(--cap);
}

.home-quality-text .section-kicker { color: rgb(255 255 255 / 48%); }

.home-quality-text h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.home-quality-text p {
  color: rgb(255 255 255 / 60%);
  font-size: clamp(.97rem, 1.1vw, 1.1rem);
  line-height: 1.72;
  margin-bottom: 1rem;
}

.home-quality-text strong { color: var(--white); font-weight: 750; }

.home-quality-link {
  color: var(--red);
  display: inline-block;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s;
}

.home-quality-link:hover { color: rgb(255 100 100); }

.home-quality-logos {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
}

.home-quality-logos {
  /* Override grid to show logos on white pills */
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.home-quality-logos img {
  background: var(--white);
  border-radius: calc(var(--r) - 2px);
  filter: none;
  max-height: 72px;
  object-fit: contain;
  opacity: .92;
  padding: .5rem .9rem;
  transition: opacity .2s;
  width: auto;
}

.home-quality-logos img:hover { opacity: 1; }

.quality-logo-text {
  align-items: center;
  background: var(--white);
  border-radius: calc(var(--r) - 2px);
  color: #333;
  display: inline-flex;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.3;
  max-height: 72px;
  opacity: .92;
  padding: .5rem .9rem;
  text-align: center;
  text-transform: uppercase;
  transition: opacity .2s;
}

.quality-logo-text:hover { opacity: 1; }

/* Remove old home-cta pulse animation (cleaner without it) */
.home-cta { animation: none !important; }

/* Responsive homepage */
@media (max-width: 860px) {
  .home-quality-inner { grid-template-columns: 1fr; }
  .home-quality-logos { grid-template-columns: repeat(4, 1fr); }
  .home-gallery-masonry { grid-template-columns: 1fr 1fr; height: auto; }
  .home-gallery-col--tall { display: none; }
  .home-gallery-col img { aspect-ratio: 4 / 3; flex: none; height: auto; }
}

@media (max-width: 560px) {
  .home-stats-inner { gap: 0; }
  .home-stat-item { padding: .5rem .9rem; }
  .home-hero-ctas { flex-direction: column; align-items: center; }
  .home-cta, .home-cta-ghost { width: min(300px, 90vw); }
  .home-gallery-masonry { grid-template-columns: 1fr; height: auto; }
  .home-quality-logos { grid-template-columns: repeat(2, 1fr); }
}

/* Hero tagline */
.home-hero-tagline {
  color: var(--red);
  font-family: var(--f-disp);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: .6rem !important;
  text-shadow: none;
  text-transform: uppercase;
}

/* ─── Hero H1 — tamaños unificados ───────────────────────── */

/* ── Hero H1 unified sizes (override all earlier rules) ───── */

/* XL: homepage */
.home-hero h1 {
  font-size: clamp(2.8rem, 5.5vw, 6rem) !important;
  line-height: .88 !important;
}

/* L: rutas, grupos, FAQ */
.routes-hero h1,
.route-detail-hero h1,
.grupos-hero h1,
.faq-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 5rem) !important;
  line-height: .9 !important;
}

/* M: resto */
.sales-hero h1,
.contact-hero h1,
.lodging-hero h1,
.recom-hero h1,
.about-hero h1,
.blog-hero h1,
.blog-post-hero h1 {
  font-size: clamp(2.2rem, 4vw, 4.2rem) !important;
  line-height: .92 !important;
}

/* Mobile uniforme */
@media (max-width: 767px) {
  .home-hero h1,
  .routes-hero h1,
  .route-detail-hero h1,
  .grupos-hero h1,
  .faq-hero h1,
  .sales-hero h1,
  .contact-hero h1,
  .lodging-hero h1,
  .recom-hero h1,
  .about-hero h1,
  .blog-hero h1,
  .blog-post-hero h1 {
    font-size: clamp(2rem, 8.5vw, 3.2rem) !important;
    line-height: .92 !important;
  }
}

/* ─── Route facts bar (stats style) ──────────────────────── */
.route-facts {
  background: var(--black);
  padding: 0;
}

.route-facts-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: auto;
  max-width: var(--cap);
}

.route-fact-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .2rem;
  min-width: 120px;
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(.8rem, 2vw, 1.8rem);
  position: relative;
  text-align: center;
}

.route-fact-item + .route-fact-item::before {
  background: rgb(255 255 255 / 10%);
  content: "";
  height: 2rem;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}

.route-fact-item strong {
  color: var(--white);
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.route-fact-item span {
  color: rgb(255 255 255 / 42%);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.route-fact-item--price strong {
  color: var(--red);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
}

@media (max-width: 640px) {
  .route-facts-bar { flex-wrap: wrap; }
  .route-fact-item { flex: 1 1 calc(33% - 1px); min-width: 100px; }
}

/* ─── Routes listing page ─────────────────────────────────── */
.routes-hero {
  align-items: flex-end;
  color: var(--white);
  display: flex;
  min-height: clamp(500px, 70vh, 720px);
  overflow: hidden;
  padding: max(8rem, calc(62px + 5rem)) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  position: relative;
}

.routes-hero-bg { inset: 0; position: absolute; z-index: 0; }
.routes-hero-bg img { height: 100%; object-fit: cover; object-position: center 40%; width: 100%; }
.routes-hero-bg::after {
  background: linear-gradient(0deg, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 28%) 60%, transparent 100%);
  content: ""; inset: 0; position: absolute;
}

.routes-hero-content {
  margin-inline: auto; max-width: var(--cap);
  position: relative; width: 100%; z-index: 1;
}

/* Match other heroes: white text, display font, uppercase */
.routes-hero h1 {
  color: var(--white);
  font-family: var(--f-disp);
  font-weight: 900;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.routes-hero p {
  color: rgb(255 255 255 / 80%);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  margin-bottom: 2rem;
  max-width: 540px;
}

.routes-hero .section-kicker {
  color: rgb(255 255 255 / 55%);
}

.routes-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.routes-hero-btn {
  align-items: center;
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.8rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}
.routes-hero-btn:hover { background: var(--red-dk); border-color: var(--red-dk); color: var(--white); transform: translateY(-1px); }
.routes-hero-btn--ghost { background: transparent; border-color: rgb(255 255 255 / 36%); box-shadow: none; }
.routes-hero-btn--ghost:hover { background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 62%); }

/* Stats bar */
.routes-stats {
  background: var(--black);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1rem, 3vw, 2rem);
}
.routes-stats-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: auto;
  max-width: var(--cap);
}
.routes-stat {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1;
  min-width: 100px;
  padding: .5rem 1rem;
  position: relative;
  text-align: center;
}
.routes-stat + .routes-stat::before {
  background: rgb(255 255 255 / 12%);
  content: "";
  height: 2rem;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}
.routes-stat strong { color: var(--red); font-family: var(--f-disp); font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 900; line-height: 1; }
.routes-stat span { color: rgb(255 255 255 / 42%); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* Route listing cards */
.route-listing-card {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(400px, 55vw, 560px);
}
.route-listing-card--right { direction: rtl; }
.route-listing-card--right > * { direction: ltr; }

.route-listing-media {
  overflow: hidden;
  position: relative;
}
.route-listing-media img {
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  width: 100%;
}
.route-listing-card:hover .route-listing-media img { transform: scale(1.04); }
.route-listing-price {
  background: var(--red);
  border-radius: 0 0 0 var(--r);
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 900;
  padding: .5rem 1.1rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
}

.route-listing-info {
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
}
.route-listing-card--right .route-listing-info { background: var(--soft); }

.route-listing-info h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 900;
  line-height: .92;
  margin: 0;
  text-transform: uppercase;
}
.route-listing-lead { color: var(--muted); font-size: clamp(.96rem, 1.1vw, 1.08rem); line-height: 1.7; margin: 0; }

.route-listing-facts {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.route-listing-facts > div {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: calc(var(--r) - 2px);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 70px;
  padding: .55rem .8rem;
  text-align: center;
}
.route-listing-card--right .route-listing-facts > div { background: var(--white); }
.route-listing-facts strong { color: var(--red); font-family: var(--f-disp); font-size: 1.15rem; font-weight: 900; line-height: 1; }
.route-listing-facts span { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.route-listing-includes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.route-listing-includes span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}
.route-listing-includes span { color: var(--green); font-weight: 700; }

.route-listing-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .3rem; }

.route-listing-btn {
  align-items: center;
  background: var(--red);
  border: 2px solid var(--red);
  border-radius: 99px;
  box-shadow: var(--sh-red);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--f-body);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 44px;
  padding: .75rem 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}
.route-listing-btn:hover { background: var(--red-dk); border-color: var(--red-dk); color: var(--white); transform: translateY(-1px); }
.route-listing-btn--ghost { background: transparent; border-color: var(--line); box-shadow: none; color: var(--ink); }
.route-listing-btn--ghost:hover { background: var(--soft); border-color: var(--muted); color: var(--ink); transform: none; }

/* Why section */
.routes-why {
  background: var(--black);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}
.routes-why-inner { margin-inline: auto; max-width: var(--cap); }
.routes-why .section-kicker { color: rgb(255 255 255 / 45%); }
.routes-why h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-transform: uppercase;
}
.routes-features-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--r);
  overflow: hidden;
}
.routes-feature {
  background: rgb(255 255 255 / 2%);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.6rem;
  transition: background .18s;
}
.routes-feature:hover { background: rgb(255 255 255 / 6%); }
.routes-feature-icon { font-size: 1.8rem; line-height: 1; }
.routes-feature strong { color: var(--white); font-size: .96rem; font-weight: 800; }
.routes-feature p { color: rgb(255 255 255 / 50%); font-size: .86rem; line-height: 1.55; margin: 0; }

/* Bottom: FAQ + CTA */
.routes-bottom {
  background: var(--soft);
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 3vw, 2rem);
}
.routes-bottom-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1.2fr 1fr;
  margin-inline: auto;
  max-width: var(--cap);
  align-items: start;
}
.routes-faq-mini h2 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 900;
  line-height: .96;
  margin-bottom: 1.4rem;
  text-transform: uppercase;
}
.routes-faq-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.4rem; }
.routes-faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.routes-faq-item summary {
  color: var(--ink);
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  list-style: none;
  padding: .9rem 1.1rem;
  transition: background .15s;
}
.routes-faq-item summary:hover { background: var(--soft); }
.routes-faq-item summary::-webkit-details-marker { display: none; }
.routes-faq-item[open] summary { border-bottom: 1px solid var(--line); color: var(--red); }
.routes-faq-item p { color: var(--muted); font-size: .9rem; line-height: 1.65; margin: 0; padding: .85rem 1.1rem; }
.routes-faq-link {
  color: var(--red);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s;
}
.routes-faq-link:hover { color: var(--red-dk); }

.routes-cta-box {
  background: var(--black);
  border-radius: var(--r);
  box-shadow: var(--sh-lift);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}
.routes-cta-box .section-kicker { color: rgb(255 255 255 / 45%); }
.routes-cta-box h2 {
  color: var(--white);
  font-family: var(--f-disp);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 900;
  line-height: .96;
  margin: 0;
  text-transform: uppercase;
}
.routes-cta-box p { color: rgb(255 255 255 / 60%); font-size: .93rem; line-height: 1.65; margin: 0; }
.routes-wa-btn {
  align-items: center;
  background: #25d366;
  border: 2px solid #25d366;
  border-radius: 99px;
  color: var(--white);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  gap: .55rem;
  justify-content: center;
  letter-spacing: .04em;
  min-height: 50px;
  padding: .9rem 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s;
}
.routes-wa-btn:hover { background: #1fbc5a; border-color: #1fbc5a; color: var(--white); }
.routes-form-btn {
  background: transparent;
  border: none;
  color: rgb(255 255 255 / 46%);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .4rem 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  transition: color .18s;
}
.routes-form-btn:hover { color: rgb(255 255 255 / 80%); }

/* Responsive */
@media (max-width: 900px) {
  .route-listing-card { grid-template-columns: 1fr; min-height: auto; }
  .route-listing-card--right { direction: ltr; }
  .route-listing-media img { aspect-ratio: 16/9; height: auto; }
  .routes-features-grid { grid-template-columns: repeat(2, 1fr); }
  .routes-bottom-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .routes-stats-inner { flex-wrap: wrap; }
  .routes-stat { flex: 1 1 calc(33% - 1px); }
  .routes-features-grid { grid-template-columns: 1fr; }
  .routes-hero-actions { flex-direction: column; }
  .routes-hero-btn { justify-content: center; width: 100%; }
}

/* nav-group-link: the <a> inside summary acts as the trigger label */
.nav-group-link {
  color: inherit;
  text-decoration: none;
}
.nav-group-link:hover { color: #fff; }

/* ─── Hero video cover on mobile ─────────────────────────── */
@media (max-width: 767px) {
  /* Scale iframe large enough to cover portrait viewports */
  .home-hero-bg iframe,
  .route-hero-video-bg iframe,
  .static-hero-video iframe {
    height: 56.25vw;
    left: 50%;
    min-height: 100%;
    min-width: 177.78vh;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 177.78vh;
  }
}