#opo3-universo { --uo-ink:#203e2b; --uo-paper:#f7f9f1; --uo-glow:#c4dca4; --uo-wash:#eef4e4; color:var(--uo-ink); background:linear-gradient(145deg,var(--uo-wash),var(--uo-paper) 70%); border-radius:28px; padding:38px 26px 26px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; position:relative; isolation:isolate; transition:background .55s ease; }
    #opo3-universo * { box-sizing:border-box; }
    #opo3-universo .uo-heading { text-align:center; position:relative; z-index:1; }
    #opo3-universo .uo-eyebrow { margin:0 0 14px; font-size:11px; line-height:1.5; letter-spacing:2.8px; font-weight:700; color:#516844; text-transform:uppercase; }
    #opo3-universo h2 { margin:0; font-size:clamp(30px,5.8vw,46px); line-height:1.07; letter-spacing:-1.8px; font-weight:750; color:var(--uo-ink); }
    #opo3-universo h2 em { font-family:Georgia,serif; font-weight:400; color:#56733b; }
    #opo3-universo .uo-scene { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr); grid-template-rows:104px 76px 104px 64px; gap:0 12px; align-items:center; max-width:750px; margin:22px auto 0; }
    #opo3-universo .uo-aura { position:absolute; z-index:-1; width:390px; height:320px; left:50%; top:0; transform:translateX(-50%); background:radial-gradient(ellipse,var(--uo-glow),transparent 68%); opacity:.85; transition:background .5s; pointer-events:none; }
    #opo3-universo .uo-ring { position:absolute; z-index:-1; left:50%; top:30px; width:440px; height:240px; transform:translateX(-50%) rotate(-17deg); border:1px solid #bdcda76b; border-radius:50%; pointer-events:none; }
    #opo3-universo .uo-ring::after { content:''; position:absolute; inset:24px -30px; border:1px solid #bdcda747; border-radius:50%; transform:rotate(34deg); }
    #opo3-universo .uo-seed { grid-column:2; grid-row:1/4; position:relative; display:grid; place-items:center; align-self:stretch; pointer-events:none; }
    #opo3-universo .uo-seed::after { content:''; position:absolute; bottom:24px; width:116px; height:16px; background:#57783c26; border-radius:50%; filter:blur(7px); }
    #opo3-universo .uo-seed img { display:block; width:218px; max-width:none; height:auto; transform:rotate(-5deg); filter:drop-shadow(0 15px 10px #304c1615); transition:transform .65s cubic-bezier(.2,.7,.2,1); animation:uo-arrive 1.2s ease-out both; }
    #opo3-universo[data-selected="tests"] .uo-seed img,#opo3-universo[data-selected="flashcards"] .uo-seed img { transform:rotate(7deg) translateY(-7px); }
    #opo3-universo[data-selected="chats"] .uo-seed img { transform:rotate(0deg) translateY(-10px) scale(1.035); }
    #opo3-universo[data-selected="resumenes"] .uo-seed img { transform:rotate(-9deg) translateY(-4px); }
    #opo3-universo .uo-word { appearance:none; position:relative; z-index:2; display:flex; align-items:center; gap:10px; width:100%; min-height:64px; padding:13px 14px; border:1px solid transparent; border-radius:17px; background:#ffffffc9; color:var(--uo-ink); font:inherit; text-align:left; cursor:pointer; box-shadow:0 5px 18px #304c1608; transition:transform .3s,box-shadow .3s,background .3s,border-color .3s; }
    #opo3-universo .uo-word:focus-visible { outline:3px solid #286d9d; outline-offset:4px; }
    #opo3-universo .uo-word[aria-pressed="true"] { background:var(--uo-tint); border-color:var(--uo-tone); transform:translateY(-4px); box-shadow:0 10px 24px #304c1614; }
    #opo3-universo .uo-symbol { flex:0 0 29px; height:32px; display:grid; place-items:center; color:var(--uo-tone); font-family:Georgia,serif; font-size:25px; font-weight:400; }
    #opo3-universo .uo-label { display:block; font-size:18px; line-height:1.2; letter-spacing:-.55px; font-weight:700; }
    #opo3-universo .uo-label span { position:relative; display:inline; background:linear-gradient(var(--uo-mark),var(--uo-mark)) left 96%/0 6px no-repeat; transition:background-size .4s; }
    #opo3-universo .uo-word[aria-pressed="true"] .uo-label span { background-size:100% 6px; }
    #opo3-universo .uo-word small { display:block; margin-top:5px; color:#516152; font-size:11px; line-height:1.3; font-weight:400; letter-spacing:.1px; }
    #opo3-universo .uo-temario { grid-column:1; grid-row:1; --uo-tint:#e4edcf; --uo-tone:#617b3d; --uo-mark:#bbd88e; }
    #opo3-universo .uo-tests { grid-column:3; grid-row:1; --uo-tint:#dfeefb; --uo-tone:#37729c; --uo-mark:#a9d3f3; }
    #opo3-universo .uo-flashcards { grid-column:3; grid-row:3; --uo-tint:#fae6ce; --uo-tone:#946027; --uo-mark:#f0c08a; }
    #opo3-universo .uo-resumenes { grid-column:1; grid-row:3; --uo-tint:#eee5fb; --uo-tone:#776097; --uo-mark:#d4b9f1; }
    #opo3-universo .uo-chats { grid-column:2; grid-row:4; --uo-tint:#dff0e4; --uo-tone:#377351; --uo-mark:#abd6b8; }
    #opo3-universo .uo-caption { margin:20px auto 0; max-width:440px; min-height:48px; text-align:center; font-size:16px; line-height:1.5; color:#4e624a; }
    #opo3-universo .uo-caption strong { color:var(--uo-ink); font-weight:700; }
    #opo3-universo .uo-footer { display:flex; justify-content:center; gap:8px; align-items:center; margin-top:20px; padding-top:17px; border-top:1px solid #dfe5d6; font-size:10px; line-height:1.4; letter-spacing:2px; color:#617052; text-transform:uppercase; }
    #opo3-universo .uo-dot { width:5px; height:5px; border-radius:50%; background:#7d9a50; }
    @keyframes uo-arrive { from { opacity:0; translate:0 16px; } to { opacity:1; translate:0 0; } }
    @media(max-width:600px) {
      #opo3-universo { padding:28px 18px 20px; border-radius:20px; }
      #opo3-universo .uo-scene { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:210px auto auto auto; gap:12px; margin-top:10px; }
      #opo3-universo .uo-seed { grid-column:1/3; grid-row:1; }
      #opo3-universo .uo-seed img { width:177px; }
      #opo3-universo .uo-seed::after { bottom:2px; }
      #opo3-universo .uo-temario { grid-column:1; grid-row:2; }
      #opo3-universo .uo-tests { grid-column:2; grid-row:2; }
      #opo3-universo .uo-resumenes { grid-column:1; grid-row:3; }
      #opo3-universo .uo-flashcards { grid-column:2; grid-row:3; }
      #opo3-universo .uo-chats { grid-column:1/3; grid-row:4; width:auto; justify-self:center; min-width:180px; }
      #opo3-universo .uo-word { padding:12px 10px; gap:7px; min-height:79px; }
      #opo3-universo .uo-label { font-size:16px; }
      #opo3-universo .uo-symbol { flex-basis:20px; font-size:22px; }
      #opo3-universo .uo-ring { width:260px; height:145px; }
      #opo3-universo .uo-aura { width:300px; height:230px; }
      #opo3-universo .uo-caption { font-size:15px; min-height:66px; }
    }
    @media(prefers-reduced-motion:reduce) { #opo3-universo *,#opo3-universo *::after { animation:none!important; transition:none!important; } #opo3-universo .uo-seed img { transform:none!important; } }
    #opo3-universo[data-motion="off"] *,#opo3-universo[data-motion="off"] *::after { animation:none!important; transition:none!important; }
    #opo3-universo[data-motion="off"] .uo-seed img { transform:none!important; }
  
/* El recorrido pertenece a la página: no intercepta rueda, gesto ni teclado. */
.uo-scroll-track { position:relative; }
.uo-scroll-track.is-ready { height:var(--uo-track-height); }
.uo-scroll-track.is-ready #opo3-universo { position:sticky; top:var(--uo-sticky-top,12px); }
.uo-scroll-hint { font:14px/1.5 Arial, sans-serif; color:#516844; text-align:center; margin:0 0 20px; }
.uo-scroll-end { font:18px/1.5 Georgia,serif; text-align:center; color:#516844; padding:48px 16px; }
/* Mantener la mascota y las cinco opciones juntas en una pantalla móvil. */
@media(max-width:600px) {
  .uo-scroll-track #opo3-universo { padding:20px 16px 16px; }
  .uo-scroll-track #opo3-universo h2 { font-size:30px; }
  .uo-scroll-track #opo3-universo .uo-eyebrow { margin-bottom:9px; font-size:10px; letter-spacing:1.7px; }
  .uo-scroll-track #opo3-universo .uo-scene { grid-template-rows:140px auto auto auto; gap:9px; margin-top:6px; }
  .uo-scroll-track #opo3-universo .uo-seed img { width:120px; }
  .uo-scroll-track #opo3-universo .uo-word { min-height:57px; padding:10px; }
  .uo-scroll-track #opo3-universo .uo-word small { display:none; }
  .uo-scroll-track #opo3-universo .uo-caption { min-height:66px; margin-top:12px; }
  .uo-scroll-track #opo3-universo .uo-footer { margin-top:10px; padding-top:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .uo-scroll-track #opo3-universo .uo-word[aria-pressed="true"] { transform:none; }
}

/* Variante del hero: misma interacción en el 50 % derecho, desde el primer scroll. */
.uo-hero-track .uo-scroll-hint { display:none; }
.uo-hero-track #opo3-universo { background:transparent; border-radius:0; box-shadow:none; overflow:clip; }
.uo-hero-track #opo3-universo::before { content:''; position:absolute; inset:4% -8% 2% 8%; border-radius:50%; background:radial-gradient(ellipse,var(--uo-glow),transparent 68%); opacity:calc(.2 + var(--uo-scroll-progress,0)*.2); filter:blur(18px); transform:translateY(calc(var(--uo-scroll-progress,0)*-12px)) scale(calc(1 + var(--uo-scroll-progress,0)*.1)); z-index:-1; transition:background .55s ease; }
@media(min-width:761px) {
  .uo-hero-track #opo3-universo { padding:58px 8px 18px; }
  .uo-hero-track #opo3-universo h2 { font-size:clamp(27px,3vw,39px); }
  .uo-hero-track #opo3-universo .uo-eyebrow { margin-bottom:8px; font-size:9px; letter-spacing:1.8px; }
  .uo-hero-track #opo3-universo .uo-scene { grid-template-columns:minmax(0,1fr) 135px minmax(0,1fr); grid-template-rows:92px 52px 92px 58px; gap:0 8px; margin-top:0; }
  .uo-hero-track #opo3-universo .uo-seed img { width:175px; }
  .uo-hero-track #opo3-universo .uo-word { min-height:54px; padding:9px 10px; gap:6px; border-radius:13px; }
  .uo-hero-track #opo3-universo .uo-symbol { flex-basis:22px; font-size:20px; }
  .uo-hero-track #opo3-universo .uo-label { font-size:15px; }
  .uo-hero-track #opo3-universo .uo-word small { font-size:9px; margin-top:3px; }
  .uo-hero-track #opo3-universo .uo-caption { margin-top:10px; min-height:42px; font-size:13px; max-width:410px; }
  .uo-hero-track #opo3-universo .uo-footer { margin-top:7px; padding-top:10px; font-size:8px; }
  .uo-hero-track #opo3-universo .uo-aura { width:280px; height:230px; }
  .uo-hero-track #opo3-universo .uo-ring { width:310px; height:180px; }
}