/* ============================================================================
   LaterReadRSS · Estilos compartidos de la web pública
   - Inspirado en la plantilla original (gradient blur + border gradient + curtains)
   - Paleta de marca: #0066FF / #00D4AA
   - Tipografías: Inter (base) + Manrope (display)
   ========================================================================== */

:root {
    color-scheme: dark;
    --brand-blue: #0066FF;
    --brand-blue-soft: #4D8BFF;
    --brand-aqua: #00D4AA;
    --bg: #05070C;
    --bg-2: #0A0E1A;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.14);
    --text: #FFFFFF;
    --text-dim: rgba(255, 255, 255, 0.72);
    --text-mute: rgba(255, 255, 255, 0.55);
}

html { scroll-behavior: smooth; background: var(--bg); }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

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

/* Texto con degradado de marca */
.brand-gradient-text {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-aqua) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Borde con degradado vía mask (truco de la plantilla) */
[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;
}

/* Blur progresivo en la parte superior (legible bajo navbar) */
.gradient-blur {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto 0;
    height: 11%;
    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%);
}

/* Animaciones de entrada */
@keyframes fadeSlideIn {
    0%   { opacity: 0; transform: translateY(24px); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes columnReveal {
    0%   { clip-path: inset(0 0 100% 0); opacity: 0; }
    100% { clip-path: inset(0 0 0% 0);   opacity: 1; }
}
.col-anim { animation: columnReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; will-change: clip-path; }
.delay-1 { animation-delay: 0.10s; }
.delay-2 { animation-delay: 0.20s; }
.delay-3 { animation-delay: 0.30s; }
.delay-4 { animation-delay: 0.40s; }
.delay-5 { animation-delay: 0.50s; }
.delay-6 { animation-delay: 0.60s; }
.delay-7 { animation-delay: 0.70s; }
.animate-on-scroll { animation-play-state: paused !important; }
.animate-on-scroll.animate { animation-play-state: running !important; }

@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes spin-slow {
    to { transform: rotate(360deg); }
}

/* Reglas para el contenido tipográfico de páginas legales */
.legal-content h2 {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-wrap: balance;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p {
    color: var(--text-dim);
    margin-bottom: 1rem;
    font-size: 1.05rem;
    line-height: 1.8;
    text-wrap: pretty;
}
.legal-content .intro {
    font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.22rem);
    color: rgba(255, 255, 255, 0.85);
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 1.75rem;
    line-height: 1.7;
}
.legal-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.legal-content ul li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-dim);
    font-size: 1.02rem;
    line-height: 1.75;
}
.legal-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-aqua));
}
.legal-content ul li strong { color: #FFFFFF; font-weight: 600; }
.legal-content a { color: var(--brand-blue-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-content a:hover { color: #FFFFFF; }
.legal-content .last-update {
    color: var(--text-mute);
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
}
.legal-content .contact-list { gap: 0.75rem; }
.legal-content .contact-list li { padding-left: 0; display: flex; align-items: center; gap: 0.75rem; }
.legal-content .contact-list li::before { display: none; }
.legal-content .disclaimer {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-soft);
    color: var(--text-mute);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Selector de idioma */
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.language-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: var(--text-mute);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.language-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.language-link.is-active {
    background: linear-gradient(135deg, var(--brand-blue), #2C7BFF);
    color: #FFFFFF;
    pointer-events: none;
    box-shadow: 0 8px 24px -10px rgba(0, 102, 255, 0.7);
}

/* Selección */
::selection { background: rgba(0, 102, 255, 0.35); color: #FFFFFF; }