/*
================================================================================
SITE DESIGN SYSTEM · ETER BSKY
================================================================================
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; }

/* Icono del carrusel de AT Protocol, basado en el recurso «Elephant» de Noun Project. */
.eter-brand-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    background: url("../images/noun-elephant-6004365a.svg") center / contain no-repeat;
}
.eter-brand-icon--marquee {
    width: 1.5rem;
    height: 1.5rem;
}
/* Icono de la app (exportado de AppIcon.icon con ictool). */
.eter-app-icon {
    display: block;
    flex: none;
}
.eter-app-icon--brand {
    width: 1.75rem;
    height: 1.75rem;
}
.eter-app-icon--footer {
    width: 2.25rem;
    height: 2.25rem;
}
.eter-brand-title {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 600;
}

/* Cabecera compacta en móviles: el nombre "Eter BSky" no cabe junto al idioma y la descarga. */
@media (max-width: 479px) {
    .site-nav {
        padding-left: 1rem;
        column-gap: 0.75rem;
    }
    .site-nav .eter-brand-title {
        font-size: 1.125rem;
    }
    .site-nav__cta {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
        letter-spacing: 0.05em;
    }
}

/* 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; }

/* ============ App Store: distintivo oficial y QR ============ */
/* Distintivo sin modificar; Apple pide al menos 40 px de alto y un margen libre de 1/4 de su altura. */
.appstore-badge {
    display: inline-flex;
    border-radius: 0.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.appstore-badge:hover { transform: translateY(-2px); box-shadow: 0 0 30px -8px rgba(16, 131, 254, 0.55); }
.appstore-badge:focus-visible { outline: 2px solid #1083FE; outline-offset: 4px; }
.appstore-badge img { display: block; height: 3.375rem; width: auto; }

.appstore-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}
/* El QR solo tiene sentido en pantallas grandes: en el móvil basta con el distintivo. */
.appstore-qr { display: none; margin: 0; }
@media (min-width: 768px) {
    .appstore-cta { flex-direction: row; }
    .appstore-qr {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .appstore-qr img { width: 8.25rem; height: 8.25rem; border-radius: 0.75rem; }
    .appstore-qr figcaption { color: #71717a; font-size: 0.75rem; }
}