/* V21 · Ruta dorada. Everything below the hero on the front page. The golden line of the brand runs through the
   cities (stations), the steps (a route) and ends at the community stop; multilingual signage marks the free listing.
   Loaded after lbe-home.css. The only hero rule is the owner-requested shine on «comunidad» at the end. */

/* ---------- Shared ---------- */
.hx-cities, .hx-explore, .hx-directory, .hx-how, .hx-provider, .hx-news, .hx-story, .hx-join { --route: var(--c-gold); --route-soft: var(--c-gold-200); }
:is(.hx-explore, .hx-directory, .hx-how, .hx-news, .hx-story) h2 { font-size: clamp(2rem, 1.35rem + 2.1vw, 3.25rem); line-height: 1.06; max-width: 18ch; }
.hx-directory h2, .hx-news h2 { max-width: 24ch; }

/* ---------- Cities: a line with seven stations ---------- */
.hx-cities { position: relative; background: var(--c-white); border-bottom: 1px solid var(--c-line); padding-block: clamp(48px, 6vw, 80px) clamp(52px, 6vw, 84px); }
.hx-cities-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(32px, 4vw, 52px); }
.hx-cities-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.35rem); }
.hx-cities-head p { margin: 0; color: var(--c-text-2); font-size: var(--t-lead); }
.hx-line { --stops: 7; --dot: 22px; position: relative; display: grid; grid-template-columns: repeat(var(--stops), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.hx-line::before, .hx-line::after { content: ""; position: absolute; top: calc(var(--dot) / 2 - 1.5px); height: 3px; border-radius: var(--r-pill); pointer-events: none; }
/* Solid between the six cities, dashed towards «Todas las ciudades». */
.hx-line::before { left: calc(100% / (var(--stops) * 2)); width: calc(100% * 5 / var(--stops)); background: var(--route); transform-origin: left center; transition: transform 1100ms var(--ease-out); }
.hx-line::after { left: calc(100% * 11 / (var(--stops) * 2)); width: calc(100% / var(--stops)); background: repeating-linear-gradient(90deg, var(--route) 0 8px, transparent 8px 15px); opacity: .8; }
.hx-stop { position: relative; min-width: 0; }
.hx-stop a { display: grid; justify-items: center; gap: 6px; padding: 0 6px 6px; color: var(--c-ink); text-align: center; text-decoration: none; border-radius: var(--r-m); outline-offset: 6px; }
.hx-dot { position: relative; z-index: 1; display: block; width: var(--dot); height: var(--dot); margin-bottom: 14px; border: 3px solid var(--route); border-radius: 50%; background: var(--c-white); box-shadow: 0 0 0 5px var(--c-white); transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 160ms), 0s, 0s, 0s; }
.hx-stop strong { font: 750 clamp(1.15rem, .95rem + .6vw, 1.5rem)/1.15 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.hx-sign { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; color: var(--c-text-2); font-size: var(--t-micro); line-height: 1.45; letter-spacing: .01em; }
.hx-sign span + span::before { content: "·"; margin-right: 6px; color: var(--c-gold-ink); }
.hx-stop--all strong { color: var(--c-teal); }
.hx-stop--all .hx-dot { border-style: dashed; border-color: var(--c-teal); }
.hx-stop a:focus-visible .hx-dot, .hx-stop a:active .hx-dot { background: var(--c-teal); border-color: var(--c-teal); box-shadow: 0 0 0 5px var(--c-white), 0 0 0 9px var(--c-teal-100); }
/* Drawn once when the line first enters the viewport (only when JS marked it pending; visible by default). */
.hx-line.is-pending::before { transform: scaleX(0); }
.hx-line.is-pending .hx-dot { transform: scale(0); }

/* ---------- Services ---------- */
.hx-explore { background: var(--c-mist); }
.hx-explore-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.hx-explore-intro .lead { margin-bottom: 20px; max-width: 38ch; }
.hx-explore-intro h2 { margin-bottom: 24px; }
.hx-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-ink); }
.hx-cats li { margin: 0; border-bottom: 1px solid var(--c-line); }
.hx-cats a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; align-items: center; gap: 16px; min-height: 88px; padding: 16px 4px; color: var(--c-ink); text-decoration: none; font: 650 1.0625rem/1.3 var(--f-text); letter-spacing: -.01em; }
.hx-cat-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-white); color: var(--c-teal); box-shadow: inset 0 0 0 1px var(--c-line); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.hx-cat-icon svg { width: 24px; height: 24px; }
.hx-cat-name { text-wrap: balance; }
.hx-cats a > svg { color: var(--c-teal); transition: transform var(--dur-2) var(--ease-out); }
.hx-cats-all { grid-column: 1 / -1; }
.hx-cats-all a { color: var(--c-teal); font-weight: 750; }
.hx-cats-all .hx-cat-icon { background: var(--c-teal); color: #fff; box-shadow: none; }

/* ---------- Directory ---------- */
.hx-directory { background: var(--c-white); border-block: 1px solid var(--c-line); }
.hx-directory-head, .hx-news-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.hx-directory-head h2, .hx-news-head h2 { margin-bottom: 16px; }
.hx-directory-head .lead, .hx-news-head .lead { margin: 0; max-width: 60ch; }
.hx-directory-head > .text-arrow, .hx-news-head > .text-arrow { flex: none; }
.hx-preview { display: none; }
/* With no public listing yet, the honest empty state sits next to an example of what a listing will look like. */
.hx-directory-body:has(.lbe-empty) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.hx-directory-body:has(.lbe-empty) .hx-preview { display: grid; }
.hx-directory .lbe-directory { min-width: 0; }
.hx-directory .lbe-empty { display: grid; align-content: center; gap: 0; height: 100%; max-width: none; margin: 0; padding: clamp(28px, 4vw, 52px); border: 0; border-radius: var(--r-l); background: var(--c-mist); }
.hx-directory .lbe-empty-symbol { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 22px; border-radius: 50%; background: var(--c-white); color: var(--c-teal); box-shadow: inset 0 0 0 1px var(--c-line); }
.hx-directory .lbe-empty-symbol svg { width: 26px; height: 26px; }
.hx-directory .lbe-empty h3 { font: 750 clamp(1.35rem, 1.1rem + .8vw, 1.85rem)/1.15 var(--f-display); letter-spacing: -.025em; max-width: 22ch; margin-bottom: 14px; }
.hx-directory .lbe-empty p { font-size: 1.0625rem; max-width: 46ch; margin: 0; }
.hx-directory .lbe-empty-actions { margin-top: 18px; }
.hx-preview { position: relative; align-content: start; gap: 0; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l); background: var(--c-deep); color: var(--c-on-deep-2); overflow: hidden; isolation: isolate; }
.hx-preview::before { content: ""; position: absolute; inset: auto -20% -55% 35%; height: 120%; background: radial-gradient(closest-side, rgba(235, 173, 23, .22), transparent 70%); z-index: -1; pointer-events: none; }
.hx-preview-card { position: relative; display: grid; gap: 12px; margin-bottom: 26px; padding: 22px; border-radius: var(--r-l); background: var(--c-white); color: var(--c-ink); box-shadow: 0 30px 60px -30px rgba(20, 36, 58, .6), 0 2px 8px rgba(20, 36, 58, .14); transform: rotate(-1.4deg); transition: transform var(--dur-3) var(--ease-out); }
.hx-preview-tag { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-gold-50); color: var(--c-gold-ink); font: 750 .75rem/1.3 var(--f-text); letter-spacing: .02em; }
.hx-preview-top { display: flex; align-items: center; gap: 14px; padding-right: 70px; }
.hx-preview-top b { display: block; font: 750 1.15rem/1.2 var(--f-display); letter-spacing: -.02em; }
.hx-preview-top i { display: block; font-style: normal; color: var(--c-teal-700); font-size: var(--t-small); font-weight: 650; }
.hx-preview-mono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-m); background: var(--c-teal-50); color: var(--c-teal-700); font: 750 1.3rem/1 var(--f-display); }
.hx-preview-bar { display: block; height: 9px; border-radius: var(--r-pill); background: var(--c-sunken); }
.hx-preview-bar--short { width: 62%; }
.hx-preview-card dl { display: grid; gap: 8px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: var(--t-micro); }
.hx-preview-card dl div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; }
.hx-preview-card dt { color: var(--c-text-3); font-weight: 650; }
.hx-preview-card dd { margin: 0; color: var(--c-ink); font-weight: 650; }
.hx-preview h3 { color: #fff; font: 750 clamp(1.3rem, 1.1rem + .6vw, 1.65rem)/1.15 var(--f-display); letter-spacing: -.025em; margin-bottom: 10px; }
.hx-preview > p { margin: 0 0 22px; max-width: 42ch; }
.hx-preview .btn { justify-self: start; }
.hx-preview :focus-visible { outline-color: var(--c-gold); }

/* ---------- Steps: a vertical route ---------- */
.hx-how { background: var(--c-mist); }
.hx-how-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.hx-how-intro h2 { margin-bottom: 20px; }
.hx-how-intro p { color: var(--c-text-2); font-size: var(--t-lead); max-width: 34ch; margin: 0; }
.hx-route { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.hx-route::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 30px; width: 3px; border-radius: var(--r-pill); background: linear-gradient(var(--route), var(--route) 70%, var(--route-soft)); }
.hx-route li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 24px; padding-bottom: clamp(28px, 3.5vw, 44px); }
.hx-route li:last-child { padding-bottom: 0; }
.hx-route-stop { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--c-deep); color: var(--c-gold); font: 750 1.3rem/1 var(--f-display); box-shadow: 0 0 0 6px var(--c-mist); }
.hx-route h3 { font: 750 clamp(1.25rem, 1.1rem + .5vw, 1.55rem)/1.2 var(--f-display); letter-spacing: -.02em; margin: 12px 0 8px; }
.hx-route p { color: var(--c-text-2); max-width: 54ch; margin: 0; }

/* ---------- Free listing: navy band under a multilingual sign ---------- */
.hx-provider { position: relative; background: var(--c-deep); color: var(--c-on-deep); overflow: hidden; isolation: isolate; }
.hx-provider::after { content: ""; position: absolute; right: -12%; bottom: -40%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(23, 107, 118, .55), transparent 72%); z-index: -1; pointer-events: none; }
.hx-signboard { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.hx-signboard-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; padding-block: 22px; }
.hx-signboard-row span { display: inline-flex; align-items: center; gap: 12px; font: 750 clamp(1.35rem, 1rem + 1.2vw, 2.1rem)/1 var(--f-display); letter-spacing: -.03em; color: #fff; }
.hx-signboard-row span:nth-child(2n) { color: var(--c-on-deep-2); }
.hx-signboard-row b { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border: 1.5px solid var(--c-gold); border-radius: var(--r-s); color: var(--c-gold); font: 750 .72rem/1 var(--f-text); letter-spacing: .06em; }
.hx-provider-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 8vw, 128px); align-items: center; padding-block: clamp(56px, 7vw, 104px); }
.hx-provider h2 { color: #fff; font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.6rem); line-height: 1.04; max-width: 15ch; margin-bottom: 24px; }
.hx-provider-copy > p { font-size: var(--t-lead); color: var(--c-on-deep-2); max-width: 44ch; margin-bottom: 30px; }
.hx-points { list-style: none; margin: 0; padding: 0; }
.hx-points li { position: relative; padding: 22px 0 22px 44px; border-top: 1px solid rgba(255, 255, 255, .16); }
.hx-points li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.hx-points li::before { content: ""; position: absolute; left: 0; top: 24px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314243a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat; }
.hx-points h3 { color: #fff; font-size: 1.125rem; margin-bottom: 6px; }
.hx-points p { color: var(--c-on-deep-2); font-size: .9375rem; margin: 0; }
.hx-provider :focus-visible { outline-color: var(--c-gold); }

/* ---------- News ---------- */
.hx-news { background: var(--c-mist); }
.hx-news .editorial-cards { margin: 0; }
.hx-news-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; max-width: none; padding: 26px 28px; border: 1px dashed var(--c-line-strong); border-radius: var(--r-l); background: var(--c-white); color: var(--c-teal); }
.hx-news-empty p { margin: 0; color: var(--c-text-2); font-size: 1.0625rem; max-width: 70ch; }

/* ---------- Story ---------- */
.hx-story { background: var(--c-white); border-top: 1px solid var(--c-line); }
.hx-story-layout { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr); gap: clamp(40px, 8vw, 128px); align-items: center; }
.hx-story-mark { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.4; max-width: 300px; border-radius: 50% 50% var(--r-l) var(--r-l); background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-line), 0 28px 56px -36px rgba(20, 36, 58, .35); }
.hx-story-mark::before { content: ""; position: absolute; left: 50%; top: -11px; width: 22px; height: 22px; margin-left: -11px; border: 3px solid var(--route); border-radius: 50%; background: var(--c-white); box-shadow: 0 0 0 5px var(--c-white); }
.hx-story-mark img { width: 58%; height: auto; }
.hx-story h2 { margin-bottom: 22px; }
.hx-story p { color: var(--c-text-2); font-size: var(--t-lead); max-width: 52ch; margin-bottom: 20px; }

/* ---------- Join: the last stop ---------- */
.hx-join { position: relative; padding-block: clamp(64px, 8vw, 112px); background: var(--c-gold-50); text-align: center; overflow: hidden; }
.hx-join-inner { display: grid; justify-items: center; }
.hx-join-stop { position: relative; display: block; width: 22px; height: 22px; margin-bottom: 26px; border: 3px solid var(--route); border-radius: 50%; background: var(--c-white); box-shadow: 0 0 0 6px rgba(235, 173, 23, .2); }
.hx-join-stop::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); width: 3px; height: clamp(64px, 8vw, 112px); margin-left: -1.5px; background: linear-gradient(transparent, var(--route) 40%); }
.hx-join h2 { font-size: clamp(1.95rem, 1.35rem + 2vw, 3.1rem); line-height: 1.08; max-width: 20ch; margin-bottom: 18px; }
.hx-join p { color: var(--c-text-2); font-size: var(--t-lead); max-width: 46ch; margin: 0 0 28px; }

/* ---------- Pointer hover ---------- */
@media (hover: hover) and (pointer: fine) {
  .hx-stop a:hover .hx-dot { transform: scale(1.18); background: var(--c-teal); border-color: var(--c-teal); box-shadow: 0 0 0 5px var(--c-white), 0 0 0 9px var(--c-teal-100); transition-delay: 0s; }
  .hx-stop a:hover strong { color: var(--c-teal); }
  .hx-cats a:hover { color: var(--c-teal); }
  .hx-cats a:hover .hx-cat-icon { background: var(--c-teal); color: #fff; box-shadow: none; }
  .hx-cats a:hover > svg { transform: translateX(4px); }
  .hx-cats-all a:hover .hx-cat-icon { background: var(--c-deep); }
  .hx-preview:hover .hx-preview-card { transform: rotate(0deg) translateY(-3px); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hx-cats { grid-template-columns: 1fr; }
  .hx-explore-layout, .hx-how-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 899px) {
  .hx-explore-layout, .hx-how-layout, .hx-provider-layout, .hx-story-layout { grid-template-columns: 1fr; gap: 32px; }
  .hx-directory-body:has(.lbe-empty) { grid-template-columns: 1fr; }
  .hx-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-story-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .hx-signboard-row { justify-content: flex-start; gap: 14px 28px; }
  /* The line turns vertical: stations stacked on the left. */
  .hx-line { --dot: 20px; grid-template-columns: 1fr; gap: 0; }
  .hx-line::before { left: calc(var(--dot) / 2 - 1.5px); top: calc(var(--dot) / 2 + 14px); width: 3px; height: calc(100% * 5 / 7); transform-origin: center top; }
  .hx-line::after { left: calc(var(--dot) / 2 - 1.5px); top: calc(100% * 5 / 7 + var(--dot) / 2 + 14px); width: 3px; height: calc(100% / 7); background: repeating-linear-gradient(180deg, var(--route) 0 7px, transparent 7px 13px); }
  .hx-line.is-pending::before { transform: scaleY(0); }
  .hx-stop a { grid-template-columns: var(--dot) minmax(0, 1fr); justify-items: start; align-items: baseline; column-gap: 20px; row-gap: 2px; padding: 14px 0; text-align: left; }
  .hx-dot { grid-row: 1 / 3; align-self: start; margin: 1px 0 0; }
  .hx-sign { justify-content: flex-start; grid-column: 2; }
}
/* ---------- Phone ---------- */
@media (max-width: 559px) {
  .hx-cities-head { margin-bottom: 18px; }
  .hx-cats { grid-template-columns: 1fr; }
  .hx-cats a { min-height: 76px; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; }
  .hx-cat-icon { width: 44px; height: 44px; }
  .hx-directory-head > .text-arrow { order: 2; }
  .hx-preview-card { transform: none; padding: 18px; }
  .hx-preview-card dl div { grid-template-columns: 5.6em minmax(0, 1fr); }
  .hx-preview .btn, .hx-provider .btn { width: 100%; justify-self: stretch; }
  .hx-route li { grid-template-columns: 46px minmax(0, 1fr); gap: 18px; }
  .hx-route::before { left: 21.5px; }
  .hx-route-stop { width: 46px; height: 46px; font-size: 1.15rem; }
  .hx-route h3 { margin-top: 9px; }
  .hx-signboard-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 18px; }
  .hx-story-layout { grid-template-columns: 1fr; }
  .hx-story-mark { display: none; }
  .hx-news-empty { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .hx-join .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-line::before, .hx-dot, .hx-preview-card, .hx-cat-icon, .hx-cats a > svg { transition: none !important; }
  .hx-line.is-pending::before { transform: none; }
  .hx-line.is-pending .hx-dot { transform: none; }
}
/* ---------- Hero: a golden glint across «comunidad» (owner's request) ----------
   Starts once the first line has risen, crosses twice and ends within five seconds (no pause control needed);
   hovering the headline replays it. Without background-clip text or with reduced motion the word stays plain ink. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .hero3d-shine { background: linear-gradient(110deg, var(--c-ink) 40%, var(--c-gold-ink) 45%, var(--c-gold) 47.5%, #fff3c4 50%, var(--c-gold) 52.5%, var(--c-gold-ink) 55%, var(--c-ink) 60%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hero3d-shine 2.4s cubic-bezier(.45, 0, .25, 1) 1.45s 2 both; }
    @media (hover: hover) and (pointer: fine) { .hero3d h1:hover .hero3d-shine { animation: hero3d-shine-again 1.6s cubic-bezier(.45, 0, .25, 1) both; } }
  }
}
@keyframes hero3d-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
@keyframes hero3d-shine-again { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (forced-colors: active) { .hero3d-shine { background: none; -webkit-text-fill-color: currentColor; } }
@media print {
  .hx-preview, .hx-signboard { display: none !important; }
  .hx-provider { background: none; color: var(--c-ink); }
  .hx-provider h2, .hx-points h3 { color: var(--c-ink); }
}

/* ---------- Alignment (owner's review) ----------
   Section openings that sit over a symmetric composition are centred; reading paragraphs are justified with
   Spanish hyphenation so justified lines do not open wide gaps. */
.hx-cities-head { flex-direction: column; align-items: center; text-align: center; }
.hx-cities-head p { max-width: 52ch; }
:is(.hx-explore-intro .lead, .hx-directory-head .lead, .hx-how-intro p, .hx-route p, .hx-provider-copy > p, .hx-points p, .hx-story p, .hx-preview > p, .hx-directory .lbe-empty p, .hx-news-empty p) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: wrap; }