/*
================================================================================
SITE DESIGN SYSTEM · LectorDeBlueSky
================================================================================
Sistema visual compartido por todas las páginas (index, privacy, terms, support).
Estilo "WellBy": fondo negro, acento violeta #1083FE → #A3C9F8, bordes con
degradado, glassmorphism y tipografías Inter / Manrope / Geist.
================================================================================
*/

body { font-family: 'Inter', sans-serif; }
.font-manrope { font-family: 'Manrope', sans-serif; }
.font-geist { font-family: 'Geist', 'Inter', sans-serif; }

/* ============ Animations ============ */
@keyframes fadeSlideIn {
    0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
@keyframes columnReveal {
    0% { clip-path: inset(0 0 100% 0); opacity: 0; }
    100% { clip-path: inset(0 0 0% 0); opacity: 1; }
}
@keyframes infinite-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.col-anim { animation: columnReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; will-change: clip-path; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.animate-on-scroll { animation-play-state: paused !important; }
.animate-on-scroll.animate { animation-play-state: running !important; }

@media (prefers-reduced-motion: reduce) {
    .col-anim, .animate-on-scroll { animation: none !important; opacity: 1 !important; }
}

/* ============ Progressive Blur (top) ============ */
.gradient-blur { position: fixed; z-index: 5; inset: 0 0 auto 0; height: 12%; pointer-events: none; }
.gradient-blur > div, .gradient-blur::before, .gradient-blur::after { position: absolute; inset: 0; }
.gradient-blur::before { content: ""; z-index: 1; backdrop-filter: blur(0.5px); mask: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%); }
.gradient-blur > div:nth-of-type(1) { z-index: 2; backdrop-filter: blur(1px); mask: linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%); }
.gradient-blur > div:nth-of-type(2) { z-index: 3; backdrop-filter: blur(2px); mask: linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%); }
.gradient-blur > div:nth-of-type(3) { z-index: 4; backdrop-filter: blur(4px); mask: linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%); }
.gradient-blur > div:nth-of-type(4) { z-index: 5; backdrop-filter: blur(8px); mask: linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%); }
.gradient-blur > div:nth-of-type(5) { z-index: 6; backdrop-filter: blur(16px); mask: linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%); }
.gradient-blur > div:nth-of-type(6) { z-index: 7; backdrop-filter: blur(32px); mask: linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%); }
.gradient-blur::after { content: ""; z-index: 8; backdrop-filter: blur(64px); mask: linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%); }

/* ============ Gradient Borders ============ */
[style*="--border-gradient"]::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: var(--border-radius-before, inherit);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background: var(--border-gradient);
    pointer-events: none;
}

/* ============ i18n: visibilidad por idioma ============ */
/* Los elementos .lang-es solo se ven con html[lang="es"]; .lang-en con html[lang="en"]. */
html[lang="es"] .lang-en { display: none !important; }
html[lang="en"] .lang-es { display: none !important; }

/* Selector de idioma (pill ES/EN) */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 3px;
}
.lang-switch [data-lang] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #a1a1aa;
    border: none;
    background: transparent;
    border-radius: 9999px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Inter', sans-serif;
}
.lang-switch [data-lang]:hover { color: #fff; }
.lang-switch [data-lang].is-active {
    background: #A3C9F8;
    color: #000;
}

/* ============ Legal / long-form content ============ */
.prose-legal h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.prose-legal h3 { font-weight: 600; color: #fff; font-size: 1rem; margin-bottom: 0.5rem; }
.prose-legal p { color: #a1a1aa; margin-bottom: 1rem; line-height: 1.75; }
.prose-legal a { color: #A3C9F8; text-decoration: none; transition: color 0.3s; }
.prose-legal a:hover { color: #fff; }
.prose-legal ul { list-style: none; margin-bottom: 1rem; }
.prose-legal ul li {
    color: #a1a1aa;
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
    line-height: 1.7;
}
.prose-legal ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    background: #1083FE;
    border-radius: 50%;
}
.prose-legal ul.contact-list li::before { display: none; }
.prose-legal ul.contact-list li { padding-left: 0; display: flex; align-items: center; gap: 0.75rem; }
.prose-legal ul li strong { color: #fff; font-weight: 600; }