/* CSS/welcome.css — Ventana de bienvenida (una sola vez por cuenta). Centrada en escritorio, a todo el ancho y sin scroll
   horizontal en el teléfono. Usa los colores del tema (oscuro/claro) de la app. */

.wl-overlay {
    box-sizing: border-box;
    position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; transition: opacity 0.25s ease;
}
.wl-overlay[hidden] { display: none; }
.wl-overlay.is-in { opacity: 1; }
html.wl-open, html.wl-open body { overflow: hidden; }

.wl-card {
    box-sizing: border-box;
    position: relative; overflow: hidden; width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto;
    padding: 30px 24px calc(22px + env(safe-area-inset-bottom, 0px)); text-align: center;
    background: var(--card-bg); color: var(--text-primary);
    border: 1px solid var(--card-border); border-radius: 24px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
    transform: translateY(14px) scale(0.98); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none; overflow-wrap: anywhere;
}
.wl-overlay.is-in .wl-card { transform: none; }

.wl-glow {
    position: absolute; inset: -40% -20% auto; height: 70%; pointer-events: none; opacity: 0.55;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--primary-color) 55%, transparent), transparent);
    animation: wl-breathe 6s ease-in-out infinite;
}
.wl-card > *:not(.wl-glow) { position: relative; }

.wl-mark { width: 60px; height: 60px; margin: 0 auto 10px; display: grid; place-items: center; }
.wl-mark img { width: 100%; height: 100%; object-fit: contain; }

/* Tres palabras que aparecen una a una y se desvanecen: se leen sin esfuerzo y quedan en la cabeza. */
.wl-words { position: relative; height: 1.2em; margin: 0 0 14px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary-color); }
.wl-words span { position: absolute; inset: 0; opacity: 0; animation: wl-word 6s ease-in-out infinite; }
.wl-words span:nth-child(2) { animation-delay: 2s; }
.wl-words span:nth-child(3) { animation-delay: 4s; }

.wl-card h2 { margin: 0 0 10px; font-size: 1.45rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.wl-lead { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.5; color: var(--text-secondary); }
.wl-lead strong { color: var(--text-primary); }

.wl-points { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.wl-points li {
    display: flex; align-items: center; gap: 12px; padding: 11px 13px; font-size: 0.9rem; line-height: 1.35;
    background: color-mix(in srgb, var(--primary-color) 7%, transparent); border: 1px solid var(--card-border); border-radius: 14px;
    opacity: 0; transform: translateY(8px); animation: wl-rise 0.5s ease forwards;
}
.wl-points li:nth-child(1) { animation-delay: 0.25s; }
.wl-points li:nth-child(2) { animation-delay: 0.45s; }
.wl-points li:nth-child(3) { animation-delay: 0.65s; }
.wl-points svg { width: 20px; height: 20px; flex: none; color: var(--primary-color); }

.wl-btn {
    width: 100%; min-height: 50px; padding: 13px 18px; border: 0; border-radius: 14px; cursor: pointer;
    font: inherit; font-size: 1rem; font-weight: 700; color: #fff; background: var(--primary-color);
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--primary-color) 80%, transparent);
    transition: transform 0.15s, filter 0.15s;
}
.wl-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wl-btn:active { transform: scale(0.98); }
.wl-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.wl-foot { margin: 14px 0 0; font-size: 0.78rem; font-style: italic; color: var(--text-secondary); }

@keyframes wl-word { 0%, 6% { opacity: 0; transform: translateY(6px); } 14%, 30% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes wl-rise { to { opacity: 1; transform: none; } }
@keyframes wl-breathe { 0%, 100% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(1.08); opacity: 0.65; } }

@media (max-width: 380px) {
    .wl-card { padding: 24px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
    .wl-card h2 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wl-overlay, .wl-card, .wl-btn { transition: none; }
    .wl-glow { animation: none; }
    .wl-words span { animation: none; opacity: 0; }
    .wl-words span:first-child { opacity: 1; }
    .wl-points li { animation: none; opacity: 1; transform: none; }
}