/* ─── TOKENS ─── */
        :root {
          --bg:         #f5f0e8;
          --bg2:        #ede7d9;
          --surface:    #e8e0cf;
          --border:     #d4c9b4;
          --border-warm:#c2b49a;
          --text:       #2a2318;
          --muted:      #8a7d6a;
          --warm:       #5a4e3e;
          --accent:     #b8892a;
          --accent-dim: #8a6520;
          --accent-glow:rgba(184,137,42,.10);
          --danger:     #b85a3a;
          --gap:        clamp(4rem,9vw,8rem);
        }

        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:clamp(15px,1.05vw,17px);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}

        /* canvas fijo */
        #mycelium-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}

        /* grain */
        body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
          background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
          background-size:256px;opacity:.06;mix-blend-mode:multiply}

        nav,header,section,footer{position:relative;z-index:2}

        /* ─── NAV ─── */
        nav{
          position:fixed;top:0;left:0;right:0;z-index:100;
          display:flex;align-items:center;justify-content:space-between;
          padding:calc(env(safe-area-inset-top,0px) + 1rem) 2rem 1rem;
          transition:background .4s,border-color .4s;
          border-bottom:1px solid transparent;
        }
        nav.scrolled{background:rgba(245,240,232,.92);border-color:var(--border);backdrop-filter:blur(16px)}

        /* LOGO en nav */
        .nav-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none}
        .nav-logo-mark{width:32px;height:32px;flex-shrink:0}
        .nav-logo-text{display:flex;flex-direction:column;line-height:1.1}
        .nav-logo-name{font-family:'Playfair Display',serif;font-style:italic;font-size:1.1rem;color:var(--text);letter-spacing:.01em}
        .nav-logo-sub{font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

        /* selector de idioma */
        .lang-switcher{display:flex;align-items:center;gap:.5rem;margin-right:1.2rem}
        .lang-switcher a{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.12em;color:var(--muted);text-decoration:none;padding:.2rem .4rem;border:1px solid transparent;transition:color .2s,border-color .2s}
        .lang-switcher a:hover{color:var(--warm);border-color:var(--border-warm)}
        .lang-switcher a.active{color:var(--accent);border-color:var(--accent-dim)}
        .nav-right{display:flex;align-items:center}

        .nav-cta{font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--bg);background:var(--accent);border:none;padding:.6rem 1.4rem;cursor:pointer;text-decoration:none;transition:opacity .2s}
        .nav-cta:hover{opacity:.82}

        /* ─── WRAP ─── */
        .wrap{max-width:700px;margin:0 auto;padding:0 2rem}

        /* ─── HERO ─── */
        header{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(env(safe-area-inset-top,0px)+6rem) 0 5rem;position:relative}

        /* LOGO hero — más grande */
        .hero-logo{
          display:flex;align-items:center;gap:1rem;
          margin-bottom:2.6rem;
          opacity:0;animation:fadeUp .7s .05s forwards;
        }
        .hero-logo-mark{width:48px;height:48px;flex-shrink:0}
        .hero-logo-text .name{font-family:'Playfair Display',serif;font-style:italic;font-size:1.45rem;color:var(--text);line-height:1}
        .hero-logo-text .sub{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}

        .eyebrow{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:1.6rem;opacity:0;animation:fadeUp .7s .18s forwards}

        h1{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(2.6rem,6.5vw,4.5rem);line-height:1.06;letter-spacing:-.01em;margin-bottom:2rem;opacity:0;animation:fadeUp .8s .3s forwards}
        h1 em{font-style:italic;color:var(--accent);font-weight:500}

        .hero-sub{font-size:clamp(1rem,1.8vw,1.12rem);color:var(--warm);max-width:500px;line-height:1.85;margin-bottom:3rem;font-weight:300;opacity:0;animation:fadeUp .8s .45s forwards}

        .cta-row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;opacity:0;animation:fadeUp .8s .58s forwards}

        .btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--bg);font-family:'DM Sans',sans-serif;font-weight:500;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:.95rem 2.2rem;text-decoration:none;transition:opacity .2s,transform .2s}
        .btn-primary:hover{opacity:.85;transform:translateY(-1px)}
        .btn-text{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--muted);text-decoration:none;letter-spacing:.08em;border-bottom:1px solid var(--border-warm);padding-bottom:2px;transition:color .2s,border-color .2s}
        .btn-text:hover{color:var(--warm);border-color:var(--muted)}

        .scroll-hint{position:absolute;bottom:2.5rem;left:2rem;font-family:'DM Mono',monospace;font-size:.62rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem;opacity:0;animation:fadeIn 1s 1.5s forwards}
        .scroll-hint::before{content:'';width:28px;height:1px;background:var(--border-warm)}

        /* ─── SECTIONS ─── */
        section{padding:var(--gap) 0;border-top:1px solid var(--border)}

        .section-tag{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:2.2rem}

        h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:1.6rem}
        h2 em{font-style:italic;color:var(--accent);font-weight:500}

        p{color:var(--warm);line-height:1.85;font-weight:300;margin-bottom:1rem}
        p:last-child{margin-bottom:0}

        /* pain list */
        .pain-list{list-style:none;margin-top:2.2rem}
        .pain-list li{display:flex;align-items:flex-start;gap:1.1rem;padding:1.1rem 0;border-bottom:1px solid var(--border);color:var(--warm);font-size:.97rem;font-weight:300;line-height:1.6}
        .pain-list li:first-child{border-top:1px solid var(--border)}
        .pain-list li::before{content:'—';color:var(--danger);font-family:'DM Mono',monospace;font-size:.85rem;flex-shrink:0;margin-top:2px}

        /* consequences */
        .consequence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:1px;background:var(--border);margin-top:2.5rem}
        .consequence-card{background:var(--bg2);padding:2rem 1.6rem}
        .consequence-card .tag{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--danger);margin-bottom:.9rem;display:block}
        .consequence-card p{font-size:.9rem;color:#7a6e5e;margin:0;line-height:1.65}

        /* steps */
        .steps{margin-top:2.5rem}
        .step{display:grid;grid-template-columns:3rem 1fr;gap:1.2rem;align-items:start;padding:1.5rem 0;border-bottom:1px solid var(--border)}
        .step:first-child{border-top:1px solid var(--border)}
        .step-n{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--accent-dim);letter-spacing:.06em;padding-top:4px}
        .step-body strong{display:block;font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:500;color:var(--text);margin-bottom:.4rem;line-height:1.3}
        .step-body p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.7}

        /* start box */
        .start-box{background:var(--surface);border:1px solid var(--border-warm);padding:2.8rem;margin-top:2rem;position:relative;overflow:hidden}
        .start-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top left,var(--accent-glow),transparent 65%);pointer-events:none}
        .start-box h3{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:500;color:var(--text);margin-bottom:1.4rem;line-height:1.3}
        .start-checks{list-style:none;margin-bottom:2.2rem;display:flex;flex-direction:column;gap:.75rem}
        .start-checks li{display:flex;align-items:center;gap:.8rem;font-size:.92rem;color:var(--warm);font-weight:300}
        .start-checks li::before{content:'✓';color:var(--accent);font-family:'DM Mono',monospace;font-size:.8rem;flex-shrink:0}

        /* about */
        .about-quote{border-left:2px solid var(--accent-dim);padding-left:1.8rem;margin-top:2.2rem}
        .about-quote p{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(1.05rem,2vw,1.2rem);color:var(--warm);line-height:1.8;font-weight:400}
        .about-quote .sig{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:1.2rem;font-style:normal;display:block}

        /* final */
        .final{text-align:center;border-top:1px solid var(--border);padding:var(--gap) 0 calc(env(safe-area-inset-bottom,0px) + var(--gap))}
        .final h2{max-width:480px;margin:1rem auto 1.2rem;font-size:clamp(1.7rem,4.5vw,2.8rem)}
        .final p{max-width:380px;margin:0 auto 2.8rem;font-size:.95rem}

        /* footer */
        footer{border-top:1px solid var(--border);padding:1.8rem 2rem;padding-bottom:calc(env(safe-area-inset-bottom,0px)+1.8rem);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
        .footer-left{display:flex;align-items:center;gap:.75rem}
        .footer-logo-mark{width:22px;height:22px;opacity:.5}
        footer span,footer a{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--muted);letter-spacing:.12em;text-decoration:none}
        footer a:hover{color:var(--warm)}
        .footer-links{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}

        /* ─── ANIMATIONS ─── */
        @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
        .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
        .reveal.visible{opacity:1;transform:translateY(0)}

        /* ─── RESPONSIVE ─── */
        @media(max-width:600px){
          .cta-row{flex-direction:column;align-items:flex-start}
          .start-box{padding:1.8rem 1.4rem}
          footer{flex-direction:column;text-align:center}
          .footer-left,.footer-links{justify-content:center}
          .nav-cta{display:none} /* en mobile, el switcher lo puede ir al footer o un menú */
          .hero-logo{display:none;}
        }