/* 06 · Sucursales — «Atlas en foco» (v1.9.1) ---------------------------------------------------------------------------
   Una boutique óptica, no un programa de mapas: PAÍS → CIUDAD → SUCURSALES DE ESA CIUDAD, un paso a la vez, sobre campos de lente negros.
   Paleta: la del sitio (sin colores nuevos). El rojo (--red) solo vive en las marcas de sucursal/ciudad y en «Cómo llegar».
   Sin JS (.atlas sin .atlas--on) se ve el directorio del servidor (desplegables País → Ciudad → Sucursal); con JS lo sustituye el atlas.
   Movimiento: --ease-lens para la cámara (diafragma, enfoque del plano), --ease-standard para la interfaz; nada en bucle;
   con «reducir movimiento» todo es un fundido de 120 ms. */
.atlas { --line: rgba(255, 255, 255, 0.14); scroll-margin-top: calc(var(--header-h) + var(--safe-top) + 12px); }
.atlas__head { max-width: none; margin-bottom: clamp(22px, 3vw, 38px); }
.atlas__head .section__title:focus { outline: none; }

/* ---- Directorio sin JavaScript: País → Ciudad → Sucursal (desplegables nativos) ---- */
.atlas--on .atlas__dir { display: none; }
.atl-dir__country { border-top: 1px solid var(--line); }
.atl-dir__country:last-child { border-bottom: 1px solid var(--line); }
.atl-dir__city { margin-left: clamp(0px, 2.4vw, 28px); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.atl-dir__sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 4px; cursor: pointer; list-style: none; }
.atl-dir__sum::-webkit-details-marker { display: none; }
.atl-dir__sum::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-glide) var(--ease-standard); }
details[open] > .atl-dir__sum::after { transform: rotate(225deg); }
.atl-dir__cn { flex: 1; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.atl-dir__sum--city { min-height: 52px; }
.atl-dir__sum--city .atl-dir__cn { font-size: 1.0625rem; }
.atl-dir__n { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.atl-dir__list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); padding: 4px 0 24px; }
.atl-dir__item { padding: 20px 24px; }
.atl-dir__name { margin: 0 0 4px; font-size: 1.125rem; }
.atl-dir__kind { margin-left: 10px; font: 600 0.6875rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 4px 8px; vertical-align: 0.1em; }
.atl-dir__svc { margin: 0 0 6px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.atl-dir__line { margin: 0 0 8px; color: var(--muted); }
.atl-dir__rows { margin: 0; }
.atl-dir__rows > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.atl-dir__rows dt { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); padding-top: 3px; }
.atl-dir__rows dd { margin: 0; }
.atl-dir__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; }
.atl-dir__links a { font-weight: 600; }
.atlas summary:focus-visible, .atlas button:focus-visible, .atlas a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(215, 14, 22, 0.9); }

/* ---- Tu selección: «País · Bolivia · Cambiar»  «Ciudad · Santa Cruz · Cambiar» ---- */
.atl-path { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(18px, 2.4vw, 28px); }
.atl-path[hidden] { display: none; }
.atl-pathb { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px 0 18px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit; cursor: pointer; transition: border-color var(--t-response) linear, background-color var(--t-response) linear; }
.atl-pathb:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); }
.atl-pathb__k { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.atl-pathb__v { font-size: 1rem; font-weight: 600; }
.atl-pathb__a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.8125rem; font-weight: 600; }
.atl-pathb__a i { width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 2px; box-sizing: border-box; }

/* ---- Marco de los pasos ---- */
.atl-view { position: relative; opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 24px)); }
.atl-view.is-moving { overflow: hidden; }
.atl-panel { position: relative; }
/* El panel nuevo se abre como un diafragma desde el punto tocado; el anterior se aquieta debajo. Solo clip-path y transform. */
.atl-panel.is-enter { z-index: 2; animation: atl-aperture var(--atl-d, 700ms) var(--ease-lens) both; }
.atl-panel.is-out { position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; animation: atl-dim var(--atl-d, 700ms) var(--ease-lens) both; }
.atl-rim { position: absolute; z-index: 3; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 50%; box-sizing: border-box; pointer-events: none; transform: scale(0); animation: atl-rim var(--atl-d, 700ms) var(--ease-lens) both; }

/* ---- Lentes (silueta del país + sus ciudades) ---- */
.atl-lens { position: relative; display: block; width: min(100%, 340px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 34%, #1b1b1b 0%, #0c0c0c 58%, #050505 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0 0 9px rgba(255, 255, 255, 0.03), 0 0 0 10px rgba(255, 255, 255, 0.09), 0 46px 90px -44px rgba(0, 0, 0, 0.95); transition: transform var(--t-glide) var(--ease-standard), box-shadow var(--t-glide) var(--ease-standard); }
.atl-lens__g { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(158deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0) 34%), radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.55) 100%); }
.atl-sil { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; overflow: visible; transition: transform var(--t-glide) var(--ease-standard); }
.atl-sil path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.atl-co { fill: #fff; fill-opacity: 0.05; stroke: #fff; stroke-opacity: 0.62; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-opacity var(--t-glide) var(--ease-standard), fill-opacity var(--t-glide) var(--ease-standard); }
.atlas--on:not(.atlas--drawn) .atl-panel--country .atl-co { stroke-dashoffset: 1; }
.atlas--drawn .atl-co { animation: atl-draw 1.1s var(--ease-lens) both; }
.atl-cd__d { fill: var(--red); transform-box: fill-box; transform-origin: center; transition: transform var(--t-glide) var(--ease-standard); filter: drop-shadow(0 0 3px rgba(215, 14, 22, 0.7)); }
.atl-cd__r { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--t-glide) var(--ease-standard); }
.atl-cd.is-on .atl-cd__r { opacity: 1; }
.atl-cd.is-on .atl-cd__d { transform: scale(1.5); }
.atlas--drawn .atl-cd { animation: atl-pop 400ms linear 900ms both; }

/* ---- Paso 1 · país ---- */
.atl-lenses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: clamp(16px, 5vw, 72px); max-width: 920px; margin-inline: auto; }
.atl-lc { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 22px); padding: 12px 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.atl-lc__name { font-size: clamp(1.375rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.atl-lc__n { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.atl-lc:hover .atl-lens, .atl-lc:focus-visible .atl-lens { transform: scale(1.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 0 0 9px rgba(255, 255, 255, 0.05), 0 0 0 10px rgba(255, 255, 255, 0.2), 0 46px 90px -44px rgba(0, 0, 0, 0.95); }
.atl-lc:hover .atl-sil, .atl-lc:focus-visible .atl-sil { transform: scale(1.045); }
.atl-lc:hover .atl-co, .atl-lc:focus-visible .atl-co { stroke-opacity: 1; fill-opacity: 0.1; }
.atl-lc:active .atl-lens { transform: scale(0.99); }
.atlas .atl-lc:focus-visible { outline: none; box-shadow: none; }
.atl-lc:focus-visible .atl-lens { outline: 2px solid #fff; outline-offset: 9px; }
.atl-lc:focus-visible .atl-lc__name { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---- Paso 2 · ciudad ---- */
.atl-citygrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: center; max-width: 1040px; margin-inline: auto; }
.atl-lens--lg { width: min(100%, 280px); margin-inline: auto; }
.atl-cities { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.atl-cb { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--t-response) linear; }
.atl-cb__t { flex: 1; min-width: 0; font-size: clamp(1.125rem, 2.2vw, 1.625rem); font-weight: 600; letter-spacing: -0.01em; }
.atl-cb__c { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.atl-cb__a { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); transition: background-color var(--t-glide) var(--ease-standard), border-color var(--t-glide) var(--ease-standard), transform var(--t-glide) var(--ease-standard); }
.atl-cb__a::before { content: ""; position: absolute; left: 10px; top: 16px; width: 12px; height: 1px; background: currentColor; }
.atl-cb__a::after { content: ""; position: absolute; left: 15px; top: 13px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.atl-cb:hover { border-bottom-color: rgba(255, 255, 255, 0.5); }
.atl-cb:hover .atl-cb__a { background: var(--text); color: var(--ink); border-color: var(--text); transform: translateX(3px); }

/* ---- Paso 3 · sucursales de la ciudad ---- */
.atl-bgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.atl-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.atl-plate { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; overflow: hidden; border-radius: var(--r-outer); background: radial-gradient(120% 90% at 50% 0%, #161616 0%, #0a0a0a 55%, #060606 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 50px 100px -50px rgba(0, 0, 0, 0.9); touch-action: pan-y; }
.atl-city { position: absolute; inset: 0; }
.atl-map { position: absolute; max-width: none; display: block; }
.atl-plate.is-fresh .atl-map { animation: atl-focus 800ms var(--ease-lens) both; }
.atl-bezel { position: absolute; border-radius: 50%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.55), 0 0 0 7px rgba(255, 255, 255, 0.025); pointer-events: none; }
.atl-st { position: absolute; white-space: nowrap; font-size: 0.65625rem; letter-spacing: 0.05em; color: rgba(244, 242, 240, 0.58); text-shadow: 0 0 4px #070707, 0 0 8px #070707, 0 0 2px #070707; }
.atl-mk { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-4px, -50%); }
.atl-mk.is-l { flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }
.atl-mk i { flex: none; width: 7px; height: 7px; border: 1px solid rgba(244, 242, 240, 0.8); transform: rotate(45deg); box-sizing: border-box; background: var(--ink); }
.atl-mk span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(244, 242, 240, 0.8); white-space: nowrap; text-shadow: 0 0 4px #070707, 0 0 8px #070707, 0 0 2px #070707; }
.atl-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(10, 10, 10, 0.82); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8125rem; color: rgba(244, 242, 240, 0.78); white-space: nowrap; }
.atl-credit { position: absolute; right: 18px; bottom: 14px; font-size: 0.625rem; letter-spacing: 0.04em; color: rgba(244, 242, 240, 0.62); }
.atl-gloss { position: absolute; inset: 0; border-radius: var(--r-outer); pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 26%), radial-gradient(130% 100% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%); }

/* Marcas de sucursal (rojas); el nombre sale en la elegida y al señalar */
.atl-pupil { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.atl-pu__r { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); background: rgba(8, 8, 8, 0.7); box-sizing: border-box; transition: all var(--t-glide) var(--ease-standard); }
.atl-pu__d { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); opacity: 0.9; transition: all var(--t-glide) var(--ease-standard); }
.atl-pu__ref { position: absolute; left: 50%; top: 50%; width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.34); box-sizing: border-box; transition: all var(--t-glide) var(--ease-standard); }
.atl-pu__b, .atl-pu__i1, .atl-pu__i2 { position: absolute; left: 50%; top: 50%; border-radius: 50%; opacity: 0; pointer-events: none; }
.atl-pu__b { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: radial-gradient(circle, rgba(215, 14, 22, 0.55), rgba(215, 14, 22, 0) 70%); }
.atl-pu__i2 { width: 50px; height: 50px; margin: -25px 0 0 -25px; border: 1px solid rgba(255, 255, 255, 0.25); box-sizing: border-box; }
.atl-pu__i1 { width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1px solid rgba(255, 255, 255, 0.6); box-sizing: border-box; }
.atl-pupil.is-on .atl-pu__r { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-color: var(--text); }
.atl-pupil.is-on .atl-pu__d { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; opacity: 1; box-shadow: 0 0 16px 2px rgba(215, 14, 22, 0.6); }
.atl-pupil.is-on .atl-pu__ref { width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; border-color: rgba(255, 255, 255, 0.5); }
/* Al elegir: un destello óptico breve (dos anillos que se abren y un halo que respira UNA vez) */
.atl-pupil.is-on .atl-pu__i1 { opacity: 1; animation: atl-iris 300ms var(--ease-standard) both; }
.atl-pupil.is-on .atl-pu__i2 { opacity: 1; animation: atl-iris 420ms var(--ease-standard) 60ms both; }
.atl-pupil.is-on .atl-pu__b { animation: atl-breath 900ms ease-out 200ms 1 both; }
.atl-pupil.is-hover .atl-pu__r, .atl-pupil:hover .atl-pu__r { transform: scale(1.3); }
.atl-pill { position: absolute; display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(10, 10, 10, 0.86); border: 1px solid rgba(255, 255, 255, 0.3); white-space: nowrap; font-size: 0.78125rem; font-weight: 600; color: #fff; opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity var(--t-glide) var(--ease-standard), transform var(--t-glide) var(--ease-standard); }
.atl-pupil.is-on .atl-pill, .atl-pupil.is-hover .atl-pill, .atl-pupil:hover .atl-pill, .atl-pupil:focus-visible .atl-pill { opacity: 1; transform: none; }

/* Selector compacto de sucursales (solo las de la ciudad) */
.atl-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.atl-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: transparent; color: var(--text); font: 600 0.9375rem/1 var(--font); cursor: pointer; transition: background-color var(--t-response) linear, color var(--t-response) linear, border-color var(--t-response) linear; }
.atl-chip:hover, .atl-chip.is-hover { border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.07); }
.atl-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--ink); }

/* ---- Ficha de la sucursal ---- */
.atl-ficha { min-height: 280px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-outer); display: flex; flex-direction: column; border-color: rgba(255, 255, 255, 0.14); }
.atl-ficha__in { display: flex; flex-direction: column; flex: 1; }
.atl-ficha.is-in .atl-ficha__in { animation: atl-ficha 260ms var(--ease-standard) both; }
.atl-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.atl-title h3 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.atl-badge { font-size: 0.65625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 5px 10px; }
.atl-svc { margin: 10px 0 0; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.atl-line { margin: 12px 0 0; display: flex; align-items: center; gap: 9px; font-size: 0.9375rem; color: rgba(244, 242, 240, 0.72); }
.atl-line i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(244, 242, 240, 0.6); box-sizing: border-box; }
.atl-rows { margin: 18px 0 0; border-top: 1px solid var(--line); }
.atl-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.atl-row dt { font-size: 0.65625rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9c9c9c; }
.atl-row dd { margin: 0; font-size: 0.96875rem; color: var(--text); overflow-wrap: anywhere; }
.atl-row dd a { text-underline-offset: 3px; }
.atl-hours { white-space: pre-line; }
.atl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 24px; }
.atl-cta, .atl-ghost { min-height: 48px; padding: 0 24px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; font: 600 0.9375rem/1 var(--font); text-decoration: none; transition: background-color var(--t-response) linear, transform var(--t-response) linear; }
.atl-cta { background: var(--red); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px -12px rgba(215, 14, 22, 0.7); }
.atl-cta:hover { background: #e3121b; color: var(--white); }
.atl-ghost { border: 1px solid rgba(255, 255, 255, 0.28); color: var(--text); padding: 0 22px; }
.atl-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.atl-ghost__n { font-weight: 500; font-size: 0.875rem; color: rgba(244, 242, 240, 0.72); }
.atl-cta:active, .atl-ghost:active, .atl-pathb:active, .atl-chip:active { transform: scale(0.98); }

@keyframes atl-aperture { from { clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(var(--or, 1600px) at var(--ox, 50%) var(--oy, 50%)); } }
@keyframes atl-rim { 0% { transform: scale(0); opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } }
@keyframes atl-dim { to { opacity: 0.3; transform: scale(0.985); } }
@keyframes atl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes atl-focus { from { opacity: 0; transform: scale(1.05); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes atl-ficha { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes atl-iris { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes atl-breath { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 0.55; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes atl-pop { from { opacity: 0; } to { opacity: 1; } }

/* ---- Tableta y escritorio ---- */
@media (min-width: 768px) {
	.atl-citygrid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	.atl-lens--lg { width: min(100%, 400px); }
	.atl-lenses { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}
@media (min-width: 1024px) {
	.atl-bgrid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 3.4vw, 48px); }
	.atl-plate { max-width: none; max-height: 620px; }
}
/* ---- Móvil: apilado (país → ciudad → plano → sucursales y ficha); tacto cómodo; sin desenfoque ---- */
@media (max-width: 767px) {
	.atlas { --atl-d: 450ms; }
	.atl-plate.is-fresh .atl-map { animation-name: atl-focus-m; }
	.atl-lenses { gap: 14px; }
	.atl-pathb { padding-left: 14px; gap: 8px; }
	.atl-cb { min-height: 64px; }
	.atl-pill { height: 24px; padding: 0 9px; font-size: 0.75rem; }
	.atl-st { font-size: 0.59375rem; letter-spacing: 0.03em; }
	.atl-mk span { font-size: 0.625rem; }
	.atl-row { grid-template-columns: 96px minmax(0, 1fr); }
	.atl-dir__cn { font-size: 1.25rem; }
}
@keyframes atl-focus-m { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---- Movimiento reducido: sin diafragma, trazo, enfoque ni respiración; los cambios son un fundido de 120 ms ---- */
@media (prefers-reduced-motion: reduce) {
	.atlas { --atl-d: 120ms; }
	.atl-panel.is-enter { animation: atl-pop 120ms linear both; }
	.atl-panel.is-out { animation: none; opacity: 0; }
	.atl-rim { display: none; }
	.atl-co { animation: none !important; stroke-dashoffset: 0 !important; }
	.atl-cd, .atlas--drawn .atl-cd { animation: none; }
	.atl-lens, .atl-sil, .atl-cd__d, .atl-cd__r, .atl-cb__a, .atl-pu__r, .atl-pu__d, .atl-pu__ref, .atl-pill, .atl-dir__sum::after { transition: none; }
	.atl-lc:hover .atl-lens, .atl-lc:focus-visible .atl-lens, .atl-lc:hover .atl-sil, .atl-lc:focus-visible .atl-sil, .atl-cb:hover .atl-cb__a { transform: none; }
	.atl-plate.is-fresh .atl-map { animation: none; }
	.atl-pupil.is-on .atl-pu__i1, .atl-pupil.is-on .atl-pu__i2, .atl-pupil.is-on .atl-pu__b { animation: none; }
	.atl-ficha.is-in .atl-ficha__in { animation: atl-ficha-rm 120ms linear both; }
	@keyframes atl-ficha-rm { from { opacity: 0; } to { opacity: 1; } }
}
/* ---- Transparencia reducida y alto contraste ---- */
@media (prefers-reduced-transparency: reduce) {
	.atl-pill, .atl-empty { background: #0b0b0b; }
}
@media (forced-colors: active) {
	.atl-pu__r, .atl-pu__ref, .atl-lens, .atl-bezel { border-color: CanvasText; }
	.atl-pu__d, .atl-cd__d { background: Highlight; fill: Highlight; forced-color-adjust: none; }
	.atl-co { stroke: CanvasText; }
	.atl-pupil.is-on .atl-pu__r { border-color: Highlight; border-width: 3px; }
	.atl-chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
	.atl-cta { border: 1px solid CanvasText; }
	.atl-pill, .atl-pathb { border-color: CanvasText; }
}