/* «Iniciar sesión Quito Secreto» sobre el logo de la portada: discreto y elegante, texto entre dos filetes verdes.
   El área para tocar es más grande que lo que se ve (cómodo en el celular) y se ilumina un poco al pasar o enfocar. */
.ses-qs { display: flex; justify-content: center; margin: 0 0 6px; }
.ses-qs-enlace {
    display: inline-flex; align-items: center; gap: 12px; padding: 10px 6px; text-decoration: none;
    color: var(--texto-tenue, #a8a8a8); font: 500 .74rem var(--fuente-ui, inherit); letter-spacing: .13em; text-transform: uppercase;
    transition: color .2s ease;
}
.ses-qs-enlace span { display: inline-flex; align-items: center; gap: 8px; }
.ses-qs-enlace svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.ses-qs-enlace i { display: block; width: clamp(18px, 8vw, 40px); height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 197, 94, .55)); transition: width .25s ease, background .25s ease; }
.ses-qs-enlace i:last-child { background: linear-gradient(270deg, transparent, rgba(34, 197, 94, .55)); }
.ses-qs-enlace:hover, .ses-qs-enlace:focus-visible { color: #eafff1; }
.ses-qs-enlace:hover i, .ses-qs-enlace:focus-visible i { width: clamp(24px, 10vw, 54px); }
.ses-qs-enlace:hover svg, .ses-qs-enlace:focus-visible svg { color: var(--accion, #22c55e); opacity: 1; }
.ses-qs-enlace:focus-visible { outline: 2px solid var(--accion, #22c55e); outline-offset: 2px; border-radius: 6px; }
/* Con sesión abierta: un poco más presente (verde suave), porque ya es «su» lugar. */
.ses-qs-dentro { color: #bfe9cc; }
.ses-qs-dentro svg { color: var(--accion, #22c55e); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ses-qs-enlace, .ses-qs-enlace i { transition: none; } }