/* ==========================================================================
   SIMAR+ · Red Regional · Atlas vivo (va en la página red-regional/)
   ========================================================================== */
.atlas { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 1rem; --ac: #67e8f9; }
.atlas__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(80% 70% at 64% 50%, rgba(20, 60, 110, .35), transparent 70%); }
.atlas__cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.atlas__cv.is-drag { cursor: grabbing; }
.atlas__hud { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 84px; width: min(300px, calc(100% - 32px)); padding: 12px 14px; border-radius: 14px;
  background: rgba(3, 10, 23, .72); border: 1px solid rgba(160, 200, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11.5px; color: #b7c8dc; }
.atlas__hud b { display: block; color: #eaf2fc; font-size: 12.5px; font-weight: 600; margin-bottom: 7px; }
.atlas__hud i { display: block; height: 9px; border-radius: 5px; }
.atlas__hud div { display: flex; justify-content: space-between; margin: 4px 0 6px; }
.atlas__hud small { display: block; color: #7f95ad; font-size: 11px; }
.atlas__hud-nota { margin-top: 6px; line-height: 1.4; }
.atlas__prog { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); display: flex; gap: 6px; }
.atlas__prog i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); transition: background .4s, width .4s; }
.atlas__prog i.is-on { background: var(--ac); width: 40px; }

.atlas__steps { position: relative; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.atlas__step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 0 clamp(16px, 5vw, 72px); }
.atlas__step:last-child { min-height: 120vh; }
.atlas__card { pointer-events: auto; width: min(460px, 100%); padding: 26px 26px 22px; border-radius: 20px;
  background: rgba(4, 13, 30, .8); border: 1px solid rgba(160, 200, 255, .16); border-top: 2px solid var(--c, var(--ac));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  opacity: .25; transform: translateY(30px) scale(.98); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.atlas__step.is-on .atlas__card { opacity: 1; transform: none; }
.atlas__card--intro { width: min(560px, 100%); border-top-color: var(--ac); }
.atlas__card--red { width: min(620px, 100%); }
.atlas__num { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--ac)); font-weight: 600; }
.atlas__card h3 { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; margin: 10px 0 6px; letter-spacing: -0.01em; color: #eaf2fc; }
.atlas__paises { font-size: 13px; color: #7f95ad; margin: 0 0 16px; }
.atlas__hoy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.atlas__hoy div { padding: 10px 11px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(160, 200, 255, .1); }
.atlas__hoy small { display: block; font-size: 10.5px; color: #7f95ad; line-height: 1.25; min-height: 2.5em; }
.atlas__hoy b { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 500; font-size: 24px; color: #eaf2fc; white-space: nowrap; }
.atlas__hoy b i { font-style: normal; font-family: var(--font-sans, Inter, sans-serif); font-size: 11px; color: #b7c8dc; }
.atlas__c { color: #ff7a4d !important; } .atlas__f { color: #5aa8ff !important; }
.atlas__rayas .kg-rayas__barra { height: 34px; border-radius: 8px; }
.atlas__ejes { display: flex; justify-content: space-between; font-size: 10.5px; color: #7f95ad; margin-top: 4px; letter-spacing: .04em; }
.atlas__txt { font-size: 14.5px; line-height: 1.6; color: #b7c8dc; margin: 14px 0 0; }
.atlas__big { margin: 18px 0 0; font-size: 14px; color: #b7c8dc; }
.atlas__big b { display: block; font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 500; font-size: 58px; line-height: 1; color: #eaf2fc; }
.atlas__baja { display: inline-block; margin-top: 18px; font-size: 12px; color: var(--ac); letter-spacing: .06em; animation: atlasBaja 2.2s ease-in-out infinite; }
@keyframes atlasBaja { 50% { transform: translateY(5px); } }
.atlas__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; }
.atlas__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; background: var(--c, var(--ac)); color: #03141c; font-weight: 600; font-size: 14px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.atlas__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--c, var(--ac)) 40%, transparent); }
.atlas__cta--sec { background: transparent; color: #eaf2fc; border: 1px solid rgba(160, 200, 255, .3); }
.atlas__estado { font-size: 12px; color: #7f95ad; display: inline-flex; align-items: center; gap: 6px; }
.atlas__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7f95ad; }
.atlas__estado.is-on::before { background: #5be3a8; box-shadow: 0 0 0 4px rgba(91, 227, 168, .18); }
.atlas__todas { margin-top: 18px; }
.atlas__todas .kg-rayas__barra { height: 26px; }
.atlas__todas .kg-rayas__et { width: 150px; }

/* gráficas compartidas con el kit (tooltip y rayas) */
.kg-rayas { display: flex; flex-direction: column; gap: 4px; }
.kg-rayas__fila { display: flex; align-items: stretch; gap: 10px; }
.kg-rayas__et { flex: none; font-size: 12.5px; color: #b7c8dc; display: flex; align-items: center; gap: 8px; }
.kg-rayas__et::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, transparent); }
.kg-rayas__barra { flex: 1; display: flex; overflow: hidden; cursor: crosshair; }
.kg-rayas__barra i { flex: 1; }
.kg-rayas__barra i:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); position: relative; z-index: 1; }
.kg-rayas__ejes { display: flex; gap: 10px; }
.kg-rayas__marcas { flex: 1; position: relative; height: 20px; }
.kg-rayas__marcas span { position: absolute; transform: translateX(-50%); font-size: 11px; color: #7f95ad; top: 4px; }
.kt-tip { position: fixed; z-index: 1000; pointer-events: none; background: rgba(6, 18, 38, .96); border: 1px solid rgba(160, 200, 255, .22); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; color: #eaf2fc; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }

@media (max-width: 900px) {
  .atlas__step { align-items: flex-end; padding-bottom: 6vh; }
  .atlas__step--intro { align-items: flex-end; }
  .atlas__card { width: 100%; padding: 20px 18px 18px; background: rgba(4, 13, 30, .88); }
  .atlas__hud { top: 76px; bottom: auto; right: 16px; width: 210px; padding: 9px 11px; }
  .atlas__hud small { display: none; }
  .atlas__prog { top: auto; bottom: 10px; }
  .atlas__big b { font-size: 44px; }
  .atlas__hoy { gap: 6px; }
  .atlas__hoy div { padding: 8px 9px; }
  .atlas__hoy b { font-size: 19px; }
  .atlas__hoy b i { display: block; font-size: 10px; }
  .atlas__txt { font-size: 13.5px; }
  .atlas__todas .kg-rayas__et { width: 96px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas__card { transition: none; opacity: 1; transform: none; }
  .atlas__baja { animation: none; }
}

.atlas__acc--todos { gap: 8px; }
.atlas__acc--todos .atlas__cta { padding: 8px 13px; font-size: 13px; }