/* Portada "Rutas" (opción A, en producción desde el 15-oct-2026) y estilos del prototipo B (sin uso) */
.proto-bar{background:#FFF8E1;border-bottom:1px solid #F0D98A;font-size:15px}
.proto-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding-top:9px;padding-bottom:9px}
.proto-bar b{font-family:var(--ff-h);color:#5C4600}
.proto-bar a{font-weight:600}
.proto-bar a[aria-current]{color:var(--ink);text-decoration:none;background:#F7E7A8;border-radius:6px;padding:1px 8px}

/* ---------- Opción A: rutas ---------- */
.ha{position:relative;overflow:hidden;color:var(--white);background:radial-gradient(120% 90% at 78% 30%,#2B5F9E 0%,#203D7D 46%,#18305F 100%)}
.ha-map{position:absolute;top:28px;right:max(-60px,calc(50% - 700px));height:calc(100% + 120px);width:auto;max-width:none;pointer-events:none}
.ha-dots{fill:none;stroke:#A7D3EA;stroke-opacity:.26;stroke-width:4.4;stroke-linecap:round}
.ha-net path{fill:none;stroke:#A7D3EA;stroke-opacity:.16;stroke-width:1.2;stroke-dasharray:3 5}
.ha-r{fill:none;stroke:#4AA5D9;stroke-width:2.6;stroke-linecap:round}
.ha-ends circle{fill:#203D7D;stroke:#A7D3EA;stroke-width:2.5}
.ha-cargo circle{fill:#FFFFFF}
.ha-origin circle{fill:#FFFFFF}
.ha-ring{fill:none!important;stroke:#FFFFFF;stroke-width:2}
.ha-labels text{fill:#FFFFFF;font-family:var(--ff-h);font-weight:700;font-size:19px;letter-spacing:.01em}
.ha-grid{position:relative;padding-top:96px;padding-bottom:104px;min-height:600px;display:flex;align-items:center}
.ha-copy{max-width:560px;min-width:0;width:100%}
.ha h1{color:var(--white);font-weight:800;font-size:clamp(36px,5vw,60px);line-height:1.03;letter-spacing:-.022em;margin:0 0 20px;text-wrap:balance}
.ha-lead{font-size:19px;line-height:1.55;color:#DCE6F2;max-width:520px;margin:0}
.ha-foot{position:relative;border-top:1px solid rgba(167,211,234,.22);background:rgba(16,30,62,.35)}
.ha-foot .wrap{display:flex;flex-wrap:wrap;gap:10px 36px;padding-top:16px;padding-bottom:16px;font-size:15.5px;color:#DCE6F2}
.ha-foot span{display:inline-flex;align-items:center;gap:10px}
.ha-foot svg{color:#4AA5D9}
/* secuencia de entrada (una sola vez) */
.js .ha-dots{opacity:0;animation:ha-in 1.1s ease .1s forwards}
.js .ha-net{opacity:0;animation:ha-in 1.2s ease 2.2s forwards}
.js .ha-r{stroke-dasharray:420;stroke-dashoffset:420;animation:ha-draw 1.3s cubic-bezier(.5,0,.2,1) forwards}
.js #ha-r1{animation-delay:.7s}.js #ha-r2{animation-delay:1.05s}.js #ha-r3{animation-delay:1.4s}
.js .ha-ends circle,.js .ha-labels text{opacity:0;animation:ha-in .5s ease forwards}
.js .ha-ends .e1,.js .ha-labels .l1{animation-delay:1.9s}.js .ha-ends .e2,.js .ha-labels .l2{animation-delay:2.2s}
.js .ha-ends .e3,.js .ha-labels .l3{animation-delay:2.6s}
.ha-ring{transform-origin:381px 236px;animation:ha-pulse 3.2s ease-out 1s infinite}
.js .ha-logo{opacity:0;animation:ha-in .7s ease .5s forwards}
.js .ha-copy>*{opacity:0;transform:translateY(12px);animation:ha-up .7s cubic-bezier(.2,.7,.2,1) forwards}
.js .ha-copy>:nth-child(2){animation-delay:.12s}.js .ha-copy>:nth-child(3){animation-delay:.24s}.js .ha-copy>:nth-child(4){animation-delay:.34s}
@keyframes ha-in{to{opacity:1}}
@keyframes ha-up{to{opacity:1;transform:none}}
@keyframes ha-draw{to{stroke-dashoffset:0}}
@keyframes ha-pulse{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(2.3);opacity:0}}
@media (max-width:900px){
  /* Celular y tablet: texto arriba y, debajo, el mapa completo (recorte x 24-756, y 70-540 del viewBox 860x890) */
  .ha{display:flex;flex-direction:column}
  .ha-grid{order:1;width:100%;min-height:0;padding-top:52px;padding-bottom:4px}
  .ha-lead{font-size:17.5px}
  .ha-map{--v:min(100%,600px);order:2;position:relative;top:auto;right:auto;left:auto;transform:none;opacity:1;flex:none;align-self:flex-start;
    width:calc(var(--v)*1.17486);height:auto;aspect-ratio:860/890;
    margin:calc(var(--v)*-.09563) 0 calc(var(--v)*-.47814) calc((100% - var(--v))/2 - var(--v)*.03279);
    clip-path:inset(7.865% 0 39.326% 0)}
  .ha-labels text{font-size:25px}
  .ha-foot{order:3}
}

/* ---------- Opción B: vitrina por departamentos ---------- */
.hb{background:linear-gradient(180deg,#F5F8FC 0%,#EAF4FB 100%);border-bottom:1px solid #DCE8F3}
.hb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
.hb h1{font-weight:800;font-size:clamp(34px,4.4vw,54px);line-height:1.05;letter-spacing:-.022em;margin:0 0 20px;text-wrap:balance}
.hb-lead{font-size:18.5px;line-height:1.55;margin:0;max-width:500px}
.hb-search{border:1.5px solid #CFDDEB;box-shadow:0 10px 28px rgba(32,61,125,.10)}
.hb-note{margin:16px 0 0;font-size:15.5px;color:var(--g-dk)}
.hb-stage{position:relative;aspect-ratio:2/1;border-radius:20px;overflow:hidden;background:#203D7D;box-shadow:0 24px 48px rgba(32,61,125,.18)}
.hb-slide{position:absolute;inset:0;display:block;text-decoration:none;color:inherit}
.hb-slide[hidden]{display:block;visibility:hidden}
.hb-slide.is-on{visibility:visible;z-index:2}
.hb-slide.is-prev{visibility:visible;z-index:1}
.hb-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s linear}
.hb-slide.is-on img{transform:scale(1)}
.js .hb-slide.is-on.wipe{animation:hb-wipe .9s cubic-bezier(.7,0,.2,1)}
@keyframes hb-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.hb-cap{position:absolute;left:16px;bottom:16px;max-width:min(360px,calc(100% - 32px));background:rgba(255,255,255,.96);border-radius:14px;padding:14px 18px 14px;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 24px rgba(16,24,40,.14)}
.hb-cap b{font-family:var(--ff-h);font-size:20px;color:var(--navy);line-height:1.15}
.hb-cap span{font-size:15px;line-height:1.4;color:var(--g-dk)}
.hb-cap em{font-style:normal;font-family:var(--ff-h);font-weight:700;font-size:14px;color:var(--mid);display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.hb-slide:hover .hb-cap em svg{transform:translateX(3px)}
.hb-cap em svg{transition:transform .2s}
.hb-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 6px;margin-top:14px}
.hb-tabs::-webkit-scrollbar{display:none}
.hb-tabs button{position:relative;min-height:44px;padding:0 10px 8px;text-align:left;border:0;background:transparent;font-family:var(--ff-h);font-weight:600;font-size:13.5px;color:var(--g-dk);cursor:pointer;line-height:1.25;border-radius:8px;display:flex;align-items:flex-start;padding-top:6px}
.hb-tabs button:hover{color:var(--navy);background:rgba(255,255,255,.7)}
.hb-tabs button[aria-selected=true]{color:var(--navy)}
.hb-tabs i{position:absolute;left:10px;right:10px;bottom:4px;height:3px;border-radius:3px;background:#D5D5D8;overflow:hidden}
.hb-tabs button[aria-selected=true] i{background:#A7D3EA}
.hb-tabs button[aria-selected=true] i::after{content:"";position:absolute;inset:0;background:var(--navy);transform-origin:left;transform:scaleX(1)}
.hb-show.is-auto .hb-tabs button[aria-selected=true] i::after{animation:hb-prog var(--hb-t,6s) linear forwards}
.hb-show.is-paused .hb-tabs button[aria-selected=true] i::after{animation-play-state:paused}
@keyframes hb-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .hb-copy>*{opacity:0;transform:translateY(12px);animation:ha-up .7s cubic-bezier(.2,.7,.2,1) forwards}
.js .hb-copy>:nth-child(2){animation-delay:.1s}.js .hb-copy>:nth-child(3){animation-delay:.2s}.js .hb-copy>:nth-child(4){animation-delay:.28s}
@keyframes ha-up{to{opacity:1;transform:none}}
@media (max-width:900px){
  .hb-grid{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:48px;padding-bottom:48px}
  .hb-stage{aspect-ratio:16/10}
  .hb-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .hb-tabs button{flex:0 0 auto;white-space:nowrap;align-items:center;padding-top:0}
}
@media (max-width:520px){
  .hb-cap{left:10px;right:10px;bottom:10px;max-width:none;padding:12px 14px}
  .hb-cap span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .js .ha-dots,.js .ha-net,.js .ha-ends circle,.js .ha-labels text,.js .ha-logo,.js .ha-copy>*,.js .hb-copy>*{opacity:1;transform:none;animation:none}
  .js .ha-r{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .ha-ring,.ha-cargo{animation:none;display:none}
  .hb-slide img{transition:none;transform:none}
  .js .hb-slide.is-on.wipe{animation:none}
}