/* Velorra hero variations */
.hero-home {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  padding: 56px 0 72px;
}
.hero-home__grid {
  display: grid; gap: 40px; grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-home__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
  .hero-home { padding: 96px 0 120px; }
}
.hero-home h1 {
  font-size: clamp(2.2rem, 5vw + 0.6rem, 3.8rem);
  margin-bottom: 24px;
}
.hero-home h1 em {
  font-style: italic; color: var(--ocean); font-weight: 500;
}
.hero-home__lead {
  font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.22rem);
  color: var(--ink-soft); max-width: 52ch; margin-bottom: 32px;
}
.hero-home__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.hero-home__meta {
  display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; color: var(--mute);
}
.hero-home__meta strong { color: var(--ink); font-weight: 600; display: block; font-size: 15px; }

.hero-home__visual {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 3 / 2; box-shadow: var(--sh-3);
}
.hero-home__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-home__stat {
  position: absolute; right: -12px; bottom: 24px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px;
  box-shadow: var(--sh-2); max-width: 180px;
}
.hero-home__stat strong { font-family: var(--f-display); font-size: 1.6rem; color: var(--ocean); display: block; }
.hero-home__stat span { font-size: 13px; color: var(--mute); }

/* Inner page hero (plain) */
.hero-inner {
  padding: 24px 0 40px;
}
.hero-inner h1 { margin-bottom: 12px; }
.hero-inner__lead { color: var(--ink-soft); max-width: 60ch; font-size: 1.1rem; }

/* Hero rutas with map-ish svg */
.hero-rutas {
  padding: 32px 0 24px;
  display: grid; gap: 32px; grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero-rutas { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.hero-rutas svg { width: 100%; height: auto; }

/* Contact hero (2-col) */
.hero-contact {
  padding: 24px 0 0;
  display: grid; gap: 40px; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .hero-contact { grid-template-columns: 1.1fr 1fr; gap: 64px; } }