:root {
      --surface:           #F4F4F4;
      --surface-low:       #EBEBEB;
      --surface-mid:       #FFFFFF;
      --primary:           #3A9D8A;
      --primary-container: #3A9D8A;
      --on-primary-c:      #FFFFFF;
      --secondary:         #2A4D69;
      --on-surface:        #1E293B;
      --on-surface-var:    #475569;
      --outline:           #CBD5E1;
      --font-h:            'Roboto Mono', 'Liberation Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      --font-b:            'Roboto Mono', 'Liberation Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      --ease:              cubic-bezier(0.4, 0, 0.2, 1);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html,body { overflow-x: clip; }
    html {
      background-color: var(--secondary);
      background-image: linear-gradient(to bottom, var(--secondary) 50%, var(--primary) 50%);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    @supports (animation-timeline: scroll()) {
      html, body {
        animation: safari-overscroll-bg linear both;
        animation-timeline: scroll(root);
      }
    }
    @keyframes safari-overscroll-bg {
      0%, 20% { background-color: var(--secondary); }
      80%, 100% { background-color: var(--primary); }
    }
    body { background-color: var(--secondary); color: var(--on-surface); font-family: var(--font-b); font-size: 1rem; line-height: 1.7; padding-top: 80px; -webkit-font-smoothing: antialiased; }
    main { background: var(--surface); position: relative; z-index: 1; padding-block: 4rem 6rem; }
    a { color: var(--primary); }
    h1,h2,h3 { font-family: var(--font-h); color: var(--secondary); }
    .container { max-width: 860px; margin-inline: auto; padding-inline: clamp(1rem,4vw,2rem); }
    nav {
      position: fixed; top: 0; inset-inline: 0; z-index: 100; padding: .75rem 1.5rem;
      background: var(--surface); border-bottom: 1px solid rgba(42,77,105,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(63,72,77,.25);
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-logo img { height: 2rem; width: auto; display: block; }
    .back-link {
      font-family: var(--font-h); font-size: .82rem; font-weight: 500; color: var(--on-surface-var);
      display: flex; align-items: center; gap: .4rem; transition: color .25s var(--ease);
    }
    .back-link:hover { color: var(--primary); }
    .back-link svg { width: 14px; height: 14px; }
    .legal-header { text-align: center; margin-bottom: 3.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(63,72,77,.25); }
    .legal-header h1 { font-size: clamp(2rem,5vw,3rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; }
    .legal-header p { font-size: .85rem; color: var(--on-surface-var); }
    .legal-section { margin-bottom: 2.5rem; }
    .legal-section h2 { font-size: 1.35rem; font-weight: 700; color: var(--secondary); margin-bottom: .875rem; padding-left: .875rem; border-left: 2px solid var(--primary-container); }
    .legal-section h3 { font-size: 1rem; font-weight: 600; color: var(--primary); margin: 1.25rem 0 .5rem; }
    .legal-section p { font-size: .9rem; color: var(--on-surface-var); line-height: 1.8; margin-bottom: .875rem; }
    .legal-section ul { list-style: disc; padding-left: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
    .legal-section ul li { font-size: .9rem; color: var(--on-surface-var); line-height: 1.7; }
    .legal-section ul li strong { color: var(--on-surface); font-weight: 600; }
    footer { background: var(--surface-low); border-top: 1px solid rgba(63,72,77,.2); border-bottom: 4px solid var(--primary); padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); text-align: center; position: relative; z-index: 1; }
    footer p { font-size: .75rem; color: rgba(142,168,176,.4); }
    footer a { color: var(--primary); font-size: .75rem; }

    /* Safari iOS Chrome Tinting */
    .safari-tint-top {
      position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 4px;
      background-color: var(--secondary); z-index: 99999; pointer-events: none;
    }
    .safari-tint-bottom {
      position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 4px;
      background-color: var(--primary); z-index: 99999; pointer-events: none;
    }
    @supports (-webkit-touch-callout: none) {
      .safari-tint-top { height: max(env(safe-area-inset-top, 0px), 4px); }
      .safari-tint-bottom { height: max(env(safe-area-inset-bottom, 0px), 4px); }
    }

    /* ── 404 ── */
    .error-code { font-family: var(--font-h); font-size: clamp(4rem,15vw,8rem); font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 1rem; }
    .btn-home { display: inline-flex; align-items: center; gap: .5rem; background: var(--primary); color: #FFFFFF; padding: .9rem 2rem; border-radius: 9999px; font-family: var(--font-h); font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .3s, transform .3s; }
    .btn-home:hover { background: var(--secondary); transform: translateY(-2px); }

    /* ============================================
       CERELIT EMERALD STREAM — SCROLL INTERACTIVO
    ============================================ */
    .scroll-particles-canvas {
      position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 85;
    }
    .scroll-ambient-aura {
      position: fixed; inset: 0; pointer-events: none; z-index: 84;
      background: radial-gradient(circle at 100% 50%, rgba(58, 157, 138, 0.06) 0%, transparent 65%),
                  radial-gradient(circle at 0% 50%, rgba(58, 157, 138, 0.04) 0%, transparent 55%);
      opacity: 0; transition: opacity 0.35s cubic-bezier(0.2, 1, 0.3, 1); will-change: opacity;
    }
    .scroll-ambient-aura.active { opacity: 1; }
    .scroll-stream-track {
      position: fixed; right: 14px; top: 50%; transform: translateY(-50%); height: min(280px, 42vh); width: 4px;
      border-radius: 9999px; background: rgba(42, 77, 105, 0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      z-index: 92; pointer-events: none; box-shadow: 0 0 15px rgba(58, 157, 138, 0.2); border: 1px solid rgba(58, 157, 138, 0.3);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .scroll-stream-fill {
      position: absolute; top: 0; left: 0; width: 100%; height: 0%; border-radius: 9999px;
      background: linear-gradient(180deg, rgba(58, 157, 138, 0.3), var(--primary)); box-shadow: 0 0 14px rgba(58, 157, 138, 0.7);
      transition: height 0.05s linear;
    }
    .scroll-stream-node {
      position: absolute; left: 50%; top: 0%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%;
      background: #FFFFFF; border: 2.5px solid var(--primary); box-shadow: 0 0 12px var(--primary), 0 0 24px rgba(70, 184, 162, 0.85);
      transition: top 0.05s linear, transform 0.2s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.2s ease; will-change: top, transform, box-shadow;
    }
    .scroll-stream-track.surging .scroll-stream-node {
      transform: translate(-50%, -50%) scale(1.4);
      box-shadow: 0 0 18px var(--primary), 0 0 35px #46b8a2, 0 0 50px rgba(58, 157, 138, 0.9);
    }
    @media (max-width: 768px) {
      .scroll-stream-track { right: 6px; height: min(200px, 32vh); width: 3px; }
      .scroll-stream-node { width: 11px; height: 11px; }
      .scroll-ambient-aura {
        background: radial-gradient(circle at 100% 50%, rgba(58, 157, 138, 0.08) 0%, transparent 60%),
                    radial-gradient(circle at 0% 50%, rgba(58, 157, 138, 0.05) 0%, transparent 50%);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-particles-canvas, .scroll-ambient-aura, .scroll-stream-track { display: none !important; }
    }