#benefits-detail{--bg:#0F1A2E;--card:#111D33;--ink:#FFFFFF;--soft:#C9D1DF;--mute:#8C97AB;--line:#2A3752;--red:#C9372C;--red-soft:#E0685E;--gold:#C9A24A}
/* ── Riel con estaciones (sin números) ── */
.hs-rail{
  position:relative; margin:clamp(4rem,7vw,5.5rem) 0 1.6rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem);
  padding-top:58px;            /* espacio para el sombrero */
}
.hs-track, .hs-fill{
  position:absolute; top:calc(58px + 7px); height:2px;
  left:calc((100% - 2 * clamp(1rem,2vw,1.4rem)) / 6);
  right:calc((100% - 2 * clamp(1rem,2vw,1.4rem)) / 6);
}
.hs-track{ background:var(--line); }
.hs-fill{ background:linear-gradient(90deg, var(--red), var(--red-soft)); transform-origin:0 50%; transform:scaleX(0); }
.hs-station{
  position:relative; justify-self:center;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  background:none; border:0; padding:0; cursor:pointer; color:var(--mute);
  font:inherit; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  transition:color .4s;
}
.hs-dot{
  position:relative; width:16px; height:16px; border-radius:50%;
  background:var(--bg); border:2px solid var(--line);
  transition:border-color .4s, background .4s, transform .5s cubic-bezier(.3,1.6,.5,1);
}
.hs-dot::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--red-soft); opacity:0;
}
.hs-station.is-past .hs-dot{ border-color:var(--red); background:var(--red); }
.hs-station.is-active{ color:var(--ink); }
.hs-station.is-active .hs-dot{ border-color:var(--red-soft); background:var(--red); transform:scale(1.15); }
.hs-station.hs-ping .hs-dot::after{ animation:ping .9s ease-out; }
@keyframes ping{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(3.2); opacity:0; } }
.hs-station:focus-visible{ outline:2px solid var(--red-soft); outline-offset:6px; border-radius:6px; }

/* ── Sombrero ── */
.hs-hat, .hs-ghost{
  position:absolute; left:0; top:0; width:46px; height:52px;
  margin-left:-23px;
}
.hs-hat{ z-index:5; pointer-events:none; }
.hs-ghost{ z-index:4; opacity:0; pointer-events:none; }
.hs-hat svg, .hs-ghost svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hs-ghost path{ fill:none; stroke:var(--soft); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.hs-hat-squash{ position:absolute; inset:0; transform-origin:50% 100%; }
.hs-hat-r{ fill:#C62A2F; } .hs-hat-w{ fill:#FFFFFF; } .hs-hat-band{ fill:#14235C; } .hs-hat-brim{ fill:#C62A2F; }
.hs-hat-line{ fill:none; stroke:#0A1222; stroke-width:2.8; }
.hs-hat-outline{ fill:none; stroke:#0A1222; stroke-width:3.6; stroke-linejoin:round; }
.hs-mini-star{ fill:#FFFFFF; transform-box:fill-box; transform-origin:center; }
.hs-pop .hs-mini-star{ animation:star-pop .6s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--n) * .06s); }
@keyframes star-pop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.9) rotate(72deg) } 100%{ transform:scale(1) rotate(72deg) } }
.hs-idle{ animation:idle 2.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes idle{ 0%,100%{ rotate:-3deg; } 50%{ rotate:3deg; } }
.hs-shadow{
  position:absolute; left:0; top:calc(58px + 4px); width:34px; height:6px; margin-left:-17px;
  border-radius:50%; background:rgba(0,0,0,.45); filter:blur(2px); z-index:3; pointer-events:none;
}

/* ── Tarjetas ── */
.hs-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.4rem); }
.hs-card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:12px 12px 2rem; color:inherit; text-decoration:none;
  transition:transform .7s cubic-bezier(.3,1.4,.5,1), border-color .4s, box-shadow .6s, opacity .5s;
  opacity:.72;
}
.hs-card.is-active{
  opacity:1; transform:translateY(-10px);
  border-color:var(--red); box-shadow:0 30px 60px -30px rgba(201,55,44,.55);
}
.hs-card:focus-visible{ outline:2px solid var(--red-soft); outline-offset:4px; }
.hs-media{ position:relative; aspect-ratio:3/2; border-radius:10px; overflow:hidden; }
.hs-media .hs-img{
  position:absolute; inset:0; transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.hs-card.is-active .hs-media .hs-img{ transform:scale(1.06); }

.hs-body{ padding:1.6rem 1rem 0; display:flex; flex-direction:column; flex:1; }
.hs-tag{ display:flex; align-items:center; gap:.7rem; color:var(--soft); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.hs-tag::before{ content:""; height:1.5px; width:18px; background:var(--red); transition:width .6s cubic-bezier(.3,1.4,.5,1); }
.hs-card.is-active .hs-tag::before{ width:36px; }
.hs-card h3{ margin:.7rem 0 0; font-size:clamp(1.6rem,2.3vw,2rem); font-weight:500; letter-spacing:-.035em; line-height:1.1; }
.hs-card p{ margin:.9rem 0 0; color:var(--soft); font-size:.98rem; max-width:22rem; }
.hs-cta{ margin-top:auto; padding-top:2rem; font-weight:600; font-size:.92rem; }
.hs-cta u{ text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px; }

@media (max-width:860px){
  .hs-cards{ grid-template-columns:1fr; }
  .hs-card{ opacity:1; }
  .hs-rail{ position:sticky; top:0; z-index:10; background:var(--bg); padding-bottom:1rem; margin-bottom:1rem; }
}
@media (prefers-reduced-motion: reduce){
  .hs-idle{ animation:none; }
  .hs-card, .hs-media .hs-img, .hs-dot, .hs-tag::before{ transition-duration:.01s; }
}

/* Map the reference cards to the existing website markup without changing photos or copy. */
#benefits-detail .hs-rail{margin:36px 0 25px}
#benefits-detail .hs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem)}
#benefits-detail .hs-card{height:100%;display:flex;flex-direction:column;align-items:stretch;opacity:.72}
#benefits-detail .hs-card.is-active{opacity:1;transform:translateY(-10px);border-color:#C9372C!important;box-shadow:0 30px 60px -30px rgba(201,55,44,.55)!important}
#benefits-detail .hs-card .hs-media{overflow:hidden}
#benefits-detail .hs-card .hs-media img{display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
#benefits-detail .hs-card.is-active .hs-media img{transform:scale(1.06)}
#benefits-detail .hs-card .hs-tag{display:flex;gap:.7rem;align-items:center}
#benefits-detail .hs-card .hs-tag::before{content:"";display:block;height:1.5px;width:18px;background:#C9372C;transition:width .6s cubic-bezier(.3,1.4,.5,1)}
#benefits-detail .hs-card.is-active .hs-tag::before{width:36px}
#benefits-detail .hs-card > a{margin-top:auto!important;align-self:flex-start}
#benefits-detail .hs-station{color:#8C97AB}
#benefits-detail .hs-station.is-active{color:#fff}
#benefits-detail .hs-rail .hs-track,#benefits-detail .hs-rail .hs-fill{z-index:1}
#benefits-detail .hs-rail .hs-station{z-index:2}
@media(max-width:860px){#benefits-detail .hs-cards{grid-template-columns:1fr}#benefits-detail .hs-card{opacity:1}#benefits-detail .hs-rail{position:sticky;top:0;z-index:15;background:#0F1A2E}}
@media(prefers-reduced-motion:reduce){#benefits-detail .hs-card{transition:none!important}}