#opo-hub{
      --ink:#1f2747; --ink-soft:#5b6479; --muted:#8a92a6;
      --line:#eceef3; --card:#ffffff;
      --shadow:0 1px 2px rgba(31,39,71,.04), 0 10px 30px rgba(31,39,71,.06);
      font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:var(--ink); max-width:1040px; margin:0 auto;
      padding:clamp(26px,5vw,56px) clamp(16px,4vw,24px); box-sizing:border-box;
    }
    #opo-hub *,#opo-hub *::before,#opo-hub *::after{box-sizing:border-box;}

    #opo-hub .hero{text-align:center; margin:0 auto clamp(22px,4vw,34px); max-width:680px;}
    #opo-hub .eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin:0 0 14px;}
    #opo-hub .hero h1{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(32px,6.4vw,52px); line-height:1.05; letter-spacing:-.01em; margin:0 0 16px; color:var(--ink);}
    #opo-hub .hero h1 em{font-style:normal; color:var(--acc);}
    #opo-hub .hero p{font-size:clamp(15px,2.4vw,17px); line-height:1.6; color:var(--ink-soft); margin:0 auto; max-width:540px;}

    #opo-hub .demo{display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:center; margin:0 auto clamp(22px,4vw,32px); padding:12px 14px; max-width:680px; border:1px dashed #d9dbe6; border-radius:14px; background:#fbfbfe;}
    #opo-hub .demo .lbl{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:4px;}
    #opo-hub .demo button{font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px; transition:.15s;}
    #opo-hub .demo button.on{background:var(--acc); border-color:var(--acc); color:#fff;}

    #opo-hub .accs{display:flex; flex-direction:column; gap:14px;}
    #opo-hub .accs>.acc{position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; transition:box-shadow .25s ease;}
    #opo-hub .accs>.acc::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--acc); opacity:.85; z-index:2;}
    #opo-hub .accs>.acc.open{box-shadow:0 4px 14px rgba(31,39,71,.06), 0 18px 44px rgba(31,39,71,.09);}

    #opo-hub .accs>.acc>.acc-head{width:100%; display:flex; align-items:center; gap:15px; text-align:left; background:none; border:0; cursor:pointer; font-family:inherit; color:inherit; padding:clamp(16px,3vw,20px) clamp(16px,3.4vw,24px); padding-left:clamp(20px,4vw,28px);}
    #opo-hub .accs>.acc>.acc-head>.ic{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:color-mix(in srgb, var(--acc) 12%, #fff); border:1px solid color-mix(in srgb, var(--acc) 24%, #fff);}
    #opo-hub .accs>.acc>.acc-head>.ic svg{width:23px; height:23px; fill:none; stroke:var(--acc); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
    #opo-hub .accs>.acc>.acc-head>.acc-meta{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px;}
    #opo-hub .accs>.acc>.acc-head>.acc-meta>.acc-title{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(18px,3vw,22px); line-height:1.2; color:var(--ink);}
    #opo-hub .accs>.acc>.acc-head>.acc-meta>.acc-sub{font-size:12.5px; font-weight:600; color:var(--muted);}
    #opo-hub .accs>.acc>.acc-head>.acc-meta>.lock-badge{display:inline-flex; align-self:flex-start; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.04em; margin-top:2px; color:var(--muted); background:#f4f5f9; border:1px solid var(--line); border-radius:999px; padding:4px 9px;}
    #opo-hub .accs>.acc>.acc-head>.acc-meta>.lock-badge svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2;}
    #opo-hub .accs>.acc>.acc-head>.chev{flex:0 0 auto; width:22px; height:22px; fill:none; stroke:var(--muted); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease, stroke .2s ease;}
    #opo-hub .accs>.acc>.acc-head:hover>.chev{stroke:var(--acc);}
    #opo-hub .accs>.acc.open>.acc-head>.chev{transform:rotate(180deg); stroke:var(--acc);}

    #opo-hub .accs>.acc>.acc-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease;}
    #opo-hub .accs>.acc.open>.acc-wrap{grid-template-rows:1fr;}
    #opo-hub .accs>.acc>.acc-wrap>.acc-inner{overflow:hidden;}
    #opo-hub .accs>.acc>.acc-wrap>.acc-inner>.acc-body{position:relative; padding:4px clamp(18px,3.6vw,26px) clamp(18px,3.4vw,24px);}
    #opo-hub .accs>.acc[data-key="resumen"]>.acc-wrap>.acc-inner>.acc-body{padding:0;}
    #opo-hub .accs>.acc[data-key="resumen"] .acc-body>.content>[id^="opo-t"]{max-width:none;}
    #opo-hub .accs>.acc[data-key="mapa"]>.acc-wrap>.acc-inner>.acc-body,
    #opo-hub .accs>.acc[data-key="reglas"]>.acc-wrap>.acc-inner>.acc-body,
    #opo-hub .accs>.acc[data-key="flashcards"]>.acc-wrap>.acc-inner>.acc-body{padding:0;}

    #opo-hub .accs>.acc .fs-btn{position:absolute; top:12px; right:14px; z-index:4; display:inline-flex; align-items:center; justify-content:center; gap:0; font:600 12.5px/1 'Montserrat',sans-serif; color:var(--acc); background:#fff; border:1px solid color-mix(in srgb,var(--acc) 30%,#fff); border-radius:999px; padding:9px; cursor:pointer; box-shadow:0 2px 10px rgba(31,39,71,.07); transition:.15s;}
    #opo-hub .accs>.acc .fs-btn:hover{background:color-mix(in srgb,var(--acc) 8%,#fff);}
    #opo-hub .accs>.acc .fs-btn svg{width:15px; height:15px; fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
    #opo-hub .accs>.acc .fs-btn[hidden]{display:none;}

    #opo-hub .fs-overlay{position:fixed; inset:0; z-index:99999; background:#fff; display:flex; flex-direction:column;}
    #opo-hub .fs-overlay[hidden]{display:none;}
    #opo-hub .fs-bar{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px clamp(16px,4vw,30px); border-bottom:1px solid var(--line); background:#fff;}
    #opo-hub .fs-ttl{display:flex; flex-direction:column; gap:2px; min-width:0;}
    #opo-hub .fs-eyebrow{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc);}
    #opo-hub .fs-name{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(15px,2.4vw,18px); color:var(--ink); line-height:1.2;}
    #opo-hub .fs-close{flex:0 0 auto; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s;}
    #opo-hub .fs-close:hover{background:#f4f5f9;}
    #opo-hub .fs-close svg{width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round;}
    #opo-hub .fs-stage{flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:clamp(14px,3vw,30px) clamp(10px,3vw,24px);}
    #opo-hub .fs-stage [id^="opo-t"]{max-width:1180px; margin:0 auto;}

    #opo-hub .accs>.acc .content.blur{filter:blur(5px); opacity:.5; pointer-events:none; user-select:none;}
    #opo-hub .accs>.acc.locked .acc-body{max-height:480px; overflow:hidden;}

    #opo-hub .panel-intro{font-size:14px; color:var(--ink-soft); margin:0 0 14px; line-height:1.55;}
    #opo-hub .test-row{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); padding:14px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; transition:.15s;}
    #opo-hub .test-row:hover{border-color:color-mix(in srgb,var(--acc) 45%,#fff); background:color-mix(in srgb,var(--acc) 6%,#fff);}
    #opo-hub .test-row .n{flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; color:var(--acc); background:color-mix(in srgb,var(--acc) 11%,#fff);}
    #opo-hub .test-row .tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
    #opo-hub .test-row .tt{font-weight:600; font-size:14.5px;}
    #opo-hub .test-row .ts{font-size:12.5px; color:var(--muted);}
    #opo-hub .test-row .go{flex:0 0 auto; width:18px; height:18px; fill:none; stroke:var(--acc); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.55;}
    #opo-hub .test-row:hover .go{opacity:1;}
    #opo-hub .hint{font-size:12px; color:var(--muted); margin:4px 0 0;}

    #opo-hub .player{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
    #opo-hub .player .play{flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; background:var(--acc); display:flex; align-items:center; justify-content:center;}
    #opo-hub .player .play svg{width:18px; height:18px; fill:#fff; margin-left:2px;}
    #opo-hub .player .pinfo{flex:1 1 auto; min-width:0;}
    #opo-hub .player .pt{font-weight:600; font-size:14px;}
    #opo-hub .player .pbar{height:5px; border-radius:99px; background:#eef0f6; margin-top:8px; overflow:hidden;}
    #opo-hub .player .pbar i{display:block; width:0%; height:100%; background:var(--acc);}
    #opo-hub .player .dur{flex:0 0 auto; font-size:12.5px; color:var(--muted); font-weight:600;}

    #opo-hub .slot{border:1px dashed #d4d8e6; border-radius:14px; padding:22px; text-align:center; color:var(--ink-soft); background:#fbfbfe;}
    #opo-hub .slot b{display:block; color:var(--ink); font-weight:700; margin-bottom:4px; font-size:15px;}
    #opo-hub .slot small{display:block; font-size:12px; color:var(--muted); margin-top:8px;}

    #opo-hub .accs>.acc .paywall{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.92));}
    #opo-hub .accs>.acc .paywall[hidden]{display:none;}
    #opo-hub .accs>.acc .paywall .pl-ic{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--acc) 12%,#fff); border:1px solid color-mix(in srgb,var(--acc) 24%,#fff);}
    #opo-hub .accs>.acc .paywall .pl-ic svg{width:20px; height:20px; fill:none; stroke:var(--acc); stroke-width:2;}
    #opo-hub .accs>.acc .paywall p{margin:0; font-size:14px; color:var(--ink); font-weight:600; max-width:360px; line-height:1.45;}
    #opo-hub .accs>.acc .paywall .cta{display:inline-block; text-decoration:none; font-weight:700; font-size:14px; color:#fff; background:var(--acc); border-radius:999px; padding:11px 22px; box-shadow:0 8px 20px color-mix(in srgb,var(--acc) 35%,transparent);}

    #opo-hub > .hero.reveal, #opo-hub .accs>.acc.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
    #opo-hub > .hero.reveal.in, #opo-hub .accs>.acc.reveal.in{opacity:1; transform:none;}
    @media (prefers-reduced-motion:reduce){ #opo-hub *{transition:none!important} #opo-hub > .hero.reveal, #opo-hub .accs>.acc.reveal{opacity:1;transform:none} }