/*
 * Tour de bienvenida (assets/js/tour.js): capa oscura con un hueco sobre el elemento que se explica y una
 * tarjeta blanca al lado. Mismo estilo que los paneles de la cabecera (esquinas amplias, rosa de la marca).
 */
.tour { position: fixed; inset: 0; z-index: 1000; opacity: 0; transition: opacity .25s ease; font-family: Lato, Arial, sans-serif; }
.tour.is-open { opacity: 1; }
.tour.is-closing { opacity: 0; }
.tour-block { position: absolute; inset: 0; }

/* El hueco: una caja transparente con una sombra enorme que oscurece todo lo demás, y un aro rosa que late. */
.tour-spot { position: fixed; pointer-events: none; border-radius: 14px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 0 200vmax rgba(17, 26, 40, .68); }
.tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(231, 48, 89, .65); animation: tour-pulse 1.8s ease-out infinite; }
@keyframes tour-pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 48, 89, .65); } 70%, 100% { box-shadow: 0 0 0 14px rgba(231, 48, 89, 0); } }

.tour-card { position: fixed; width: min(350px, calc(100vw - 24px)); padding: 16px 18px 16px; background: #fff; border-radius: 20px; box-shadow: 0 24px 50px rgba(10, 18, 30, .35), 0 2px 8px rgba(10, 18, 30, .12); color: #405167; }
.tour-card.is-center { width: min(380px, calc(100vw - 24px)); }
.tour.is-moving .tour-spot, .tour.is-moving .tour-card { transition: left .4s cubic-bezier(.2, .8, .2, 1), top .4s cubic-bezier(.2, .8, .2, 1), width .4s cubic-bezier(.2, .8, .2, 1), height .4s cubic-bezier(.2, .8, .2, 1), border-radius .4s ease; }

.tour-arrow { position: absolute; top: -7px; width: 16px; height: 16px; margin-left: -8px; background: #fff; border-radius: 3px; transform: rotate(45deg); }
.tour-arrow.is-below { top: auto; bottom: -7px; }
.tour-arrow[hidden] { display: none; }

.tour-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tour-step { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pink, #e73059); }
.tour-skip { padding: 6px 4px; margin: -6px -4px; border: 0; background: none; font: inherit; font-size: 14px; color: #7a8798; cursor: pointer; }
.tour-skip:hover { color: var(--pink, #e73059); }
.tour-skip[hidden] { display: none; }

.tour-hello { display: grid; place-items: center; width: 58px; height: 58px; margin: 6px 0 10px; border-radius: 18px; background: #fdeef2; font-size: 30px; }
.tour-hello[hidden] { display: none; }
.tour-hello span { display: inline-block; transform-origin: 70% 75%; animation: tour-wave 2.2s ease-in-out .4s 2; }
@keyframes tour-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-9deg); } }

.tour-card h2 { margin: 0 0 6px; font-size: 20px; font-weight: 900; line-height: 1.2; color: #2f3e52; }
.tour-card p { margin: 0; font-size: 15.5px; line-height: 1.45; color: #5b6b80; }

.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tour-dots { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: #dde2e8; transition: width .25s ease, background .25s ease; }
.tour-dots i.on { width: 16px; background: var(--pink, #e73059); }
.tour-btns { display: flex; gap: 8px; flex-shrink: 0; }
.tour-btns button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s, transform .1s; }
.tour-btns button:active { transform: scale(.97); }
.tour-btns button[hidden] { display: none; }
.tour-prev { background: #f1f3f6; color: #5b6b80; }
.tour-prev:hover { background: #e6e9ee; }
.tour-next { background: var(--pink, #e73059); color: #fff; box-shadow: 0 4px 12px rgba(231, 48, 89, .3); }
.tour-next:hover { background: #d4244c; }
.tour-card button:focus-visible { outline: 3px solid rgba(231, 48, 89, .35); outline-offset: 2px; }

@media (max-width: 360px) {
	.tour-card { padding: 14px 14px 14px; }
	.tour-btns button { padding: 0 12px; }
	.tour-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tour, .tour.is-moving .tour-spot, .tour.is-moving .tour-card { transition: none; }
	.tour-spot::after, .tour-hello span { animation: none; }
}