/* SoftopRecorrido (web/js/softop-recorrido.js): la capa, la luz y la tarjeta de los recorridos guiados.
   Funciona en cualquier pantalla: los colores se pueden ajustar con las variables --sr-*. */
.sr-tapa{position:fixed; inset:0; z-index:1990; background:var(--sr-tapa, rgba(15,23,42,.55))}
.sr-luz{position:fixed; z-index:1991; border-radius:10px; box-shadow:0 0 0 3px var(--sr-acento, #0079B8); pointer-events:none; transition:all .25s ease}
.sr-tarjeta{position:fixed; z-index:1992; box-sizing:border-box; width:min(360px, calc(100vw - 16px)); padding:16px; background:#fff; color:#47586A; border-radius:16px; box-shadow:0 18px 48px rgba(15,27,38,.16); font-size:14px; line-height:1.5; transition:left .25s ease, top .25s ease}
.sr-tarjeta h3{margin:2px 0 6px; font-size:16px; font-weight:650; color:#0F1B26}
.sr-tarjeta p{margin:0 0 12px}
.sr-tarjeta b{color:#0F1B26}
.sr-n{font-size:12px; color:#64717E}
.sr-acts{display:flex; align-items:center; gap:8px; margin-top:8px}
.sr-grow{flex:1}
.sr-btn{display:inline-flex; align-items:center; height:30px; padding:0 12px; border:1px solid #E3E9EF; border-radius:10px; background:#fff; color:#47586A; font:inherit; font-size:13px; font-weight:500; cursor:pointer}
.sr-btn:hover{background:#F4F7FA}
.sr-btn--pri{border-color:var(--sr-acento, #0079B8); background:var(--sr-acento, #0079B8); color:#fff}
.sr-btn--pri:hover{background:var(--sr-acento-fuerte, #005E92)}
.sr-btn:focus-visible{outline:2px solid var(--sr-acento, #0079B8); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .sr-luz, .sr-tarjeta{transition:none} }