@font-face{font-family:LeiaSans;src:url('fonts/regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:LeiaSans;src:url('fonts/bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{font-family:LeiaSans,system-ui,sans-serif;color:#163f42;background:#f7f7f0;font-synthesis:none;--teal:#155d61;--ink:#163f42;--muted:#668080;--line:#dce3da;--peach:#eda47c}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #d57e4f;outline-offset:5px}a{color:inherit}.header{max-width:1440px;margin:auto;padding:28px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:27px;font-weight:700;letter-spacing:-1.3px;display:flex;gap:12px;align-items:center}.brand-symbol{font-size:39px;color:var(--teal);line-height:1}.brand-dot{color:#de926b}.header-right{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700}.subject{display:flex;align-items:center;gap:8px}.subject>span{font-size:24px;color:#c78654}.year{padding:7px 13px;border:1px solid #d8e2d7;border-radius:30px;color:#526e64;background:#eef2e7}main{max-width:1440px;margin:auto;padding:52px 6% 0;display:grid;grid-template-columns:minmax(310px,.86fr) minmax(0,1.35fr);gap:34px 45px}.intro{padding-top:28px;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;display:flex;gap:9px;align-items:center;color:#608075}.little-star{color:#ca8359;font-size:20px}h1{font-size:clamp(44px,4.7vw,69px);font-weight:700;line-height:1.12;letter-spacing:-3.5px;margin:24px 0 20px}h1>span{color:#248385}.intro-copy{font-size:16px;line-height:1.85;color:#5c7472;max-width:380px;margin:0 0 30px}.intro-copy strong{color:var(--teal)}.actions{display:grid;gap:12px;max-width:385px}.action{border:1px solid transparent;border-radius:17px;min-height:82px;text-align:left;display:flex;align-items:center;gap:15px;padding:16px 18px;transition:transform .2s,box-shadow .2s,background .2s}.action:hover:enabled{transform:translateY(-3px);box-shadow:0 8px 22px #17494b16}.action:active:enabled{transform:translateY(0)}.primary{background:var(--teal);color:#fff}.primary:hover:enabled{background:#0f5054}.secondary{background:#fffdf7;border-color:#d9e2d8;color:var(--ink)}.action-icon{width:43px;height:43px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:25px;background:#ffffff15}.secondary .action-icon{background:#eff2df}.action-label{display:flex;flex-direction:column;gap:5px}.action-label strong{font-size:15px}.action-label small{font-size:10px;letter-spacing:.1px;opacity:.75}.arrow{margin-left:auto;font-size:24px;font-weight:400;opacity:.8}.count-icon{display:grid;grid-template-columns:repeat(3,5px);grid-template-rows:repeat(3,5px);gap:3px;align-content:center;justify-content:center}.count-icon i{width:5px;height:5px;border-radius:50%;background:#b18e33}.count-icon i:nth-child(1){grid-area:1/1}.count-icon i:nth-child(2){grid-area:1/3}.count-icon i:nth-child(3){grid-area:2/2}.count-icon i:nth-child(4){grid-area:3/1}.count-icon i:nth-child(5){grid-area:3/3}.repeat{border:0;background:none;color:#5d7775;font-size:12px;display:flex;align-items:center;gap:8px;padding:15px 0;margin-top:3px}.repeat span{font-size:21px}.repeat:hover:enabled{color:var(--teal)}.hint{margin:14px 0 0;font-size:11px;color:#7c8e83;display:flex;gap:8px;align-items:center}.hint-mark{font-size:18px;color:#b08568}.playground{position:relative;min-width:0;height:620px;border-radius:32px;background:radial-gradient(ellipse at 55% 76%,#e6ceab88,transparent 52%),linear-gradient(145deg,#eaf0e6,#e1ece6 55%,#f1e8d6);overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px #dee8da}.scene-top{position:absolute;left:24px;right:20px;top:20px;display:flex;align-items:center;justify-content:space-between;z-index:3}.live-label{display:flex;align-items:center;gap:8px;font-size:10px;color:#51746a;letter-spacing:.2px}.live-label i{background:#5d9c7b;width:6px;height:6px;border-radius:100%;box-shadow:0 0 0 4px #6fa88c16}.motion{width:36px;height:36px;border:1px solid #cbdace;border-radius:50%;background:#f5f8ee9c;color:#53756b;font-size:15px;display:grid;place-items:center}.motion:hover{background:white}#viewport{position:absolute;inset:0;z-index:2}#viewport canvas{width:100%;height:100%;display:block}.scene-orbit{border:1px solid #a6c5ad55;position:absolute;border-radius:50%;pointer-events:none}.orbit-one{width:450px;height:450px;top:20px;left:calc(50% - 225px)}.orbit-two{width:520px;height:520px;top:-15px;left:calc(50% - 260px)}.deco{position:absolute;z-index:1;pointer-events:none;color:#c89368}.deco-plus{font-size:43px;top:90px;right:42px;font-weight:400;transform:rotate(12deg)}.deco-circle{left:40px;top:220px;border:6px solid #b6c9b9;width:25px;height:25px;border-radius:50%}.deco-triangle{font-size:38px;bottom:180px;right:35px;color:#81b7b6;transform:rotate(15deg)}.speech{position:absolute;bottom:22px;left:22px;right:22px;z-index:4;min-height:95px;display:flex;align-items:center;gap:13px;background:#fffef8ed;border:1px solid #fff;border-radius:19px;padding:17px 19px;box-shadow:0 10px 24px #35544a09}.speech-avatar{width:42px;height:42px;flex-shrink:0;border-radius:14px;background:#d9e4d9;display:grid;place-items:center}.speech-avatar span{background:#1f5054;color:#8de1dd;white-space:pre;border:3px solid #f8f1e1;border-radius:10px;padding:0 3px 3px;font-size:18px;line-height:16px}.speech-name{font-size:10px;letter-spacing:1.5px;font-weight:700;display:flex;gap:9px;align-items:center}.speech-name>span{font-size:8px;color:#84958c;letter-spacing:.8px}#response{font-size:13px;line-height:1.65;margin:6px 0 0;color:#48665d;max-width:450px}.loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:3;background:#e9eee5;font-size:13px;color:#5e7971}.loader-ring{height:40px;width:40px;border:3px solid #c7d8cf;border-top-color:var(--teal);border-radius:50%;animation:spin 1.2s linear infinite}.loader.hidden{display:none}.loader.error{padding:35px;text-align:center}.loader.error .loader-ring{display:none}.retry-load{border:1px solid #abc1b5;border-radius:12px;padding:12px;background:white;color:var(--teal);margin-bottom:90px}.fallback{width:100%;height:100%;object-fit:contain;padding-bottom:100px}.learning-note{grid-column:1/-1;display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:18px;padding:18px 24px;background:#f1f2e8}.note-icon{font-size:29px;color:#ba8861}.learning-note p{font-size:12px;line-height:1.8;color:#728174;margin:0}.learning-note strong{font-weight:700;color:#3d6257}.note-shapes{margin-left:auto;font-size:25px;letter-spacing:8px;color:#98aaa0}footer{max-width:1440px;margin:auto;display:flex;justify-content:space-between;padding:26px 6%;font-size:10px;letter-spacing:.2px;color:#849489}.footer-right{display:flex;gap:16px;align-items:center}.footer-right>span{color:#a5b4a7;font-size:20px}@keyframes spin{to{transform:rotate(360deg)}}
#viewport{top:35px;bottom:115px}
@media(min-width:1450px){main{padding-top:65px}.playground{height:660px}.intro{padding-top:45px}}@media(max-width:1000px){main{padding:30px 4% 0;gap:25px;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr)}.header{padding:22px 4%}.playground{height:570px}h1{font-size:48px;letter-spacing:-2.5px}.speech{left:13px;right:13px;bottom:14px;padding:13px;gap:9px}.speech-avatar{display:none}.scene-top{left:16px;right:16px}.intro-copy{font-size:14px}.action{padding:14px 12px;gap:10px}.action-label strong{font-size:13px}.action-label small{font-size:9px}.action-icon{width:35px;height:38px}.arrow{font-size:19px}}
@media(max-width:700px){.header{padding:18px 6%}.brand{font-size:23px}.brand-symbol{font-size:31px}.header-right{font-size:10px;gap:8px}.subject>span{font-size:20px}.year{padding:6px 10px}main{display:flex;flex-direction:column;padding:25px 5% 0;gap:22px}.intro{padding:0}.eyebrow{font-size:9px;letter-spacing:1.3px}h1{font-size:45px;margin:14px 0 12px;letter-spacing:-2.3px;line-height:1.1}h1 br{display:none}h1>span{display:inline}.intro-copy{margin:0 0 20px;max-width:100%;line-height:1.7}.playground{order:1;height:520px;flex:none;border-radius:25px}.intro{display:contents}.eyebrow,h1,.intro-copy{order:0}.intro h1{margin-top:-16px}.intro-copy{margin-top:-10px;margin-bottom:0}.actions{order:2;max-width:none;grid-template-columns:1fr 1fr;gap:9px}.action{min-height:85px;padding:13px 10px;gap:8px;border-radius:15px}.action-icon{width:29px;font-size:23px}.action-label strong{font-size:12px}.action-label small{font-size:9px;line-height:1.4}.arrow{display:none}.repeat{order:3;margin:-15px auto 0;padding:7px}.hint{order:4;justify-content:center;margin-top:-14px}.learning-note{order:5;padding:15px 17px}.learning-note p{font-size:10px}.note-shapes{display:none}footer{padding:22px 5%;font-size:9px}.footer-right{gap:7px}.speech{min-height:83px}.speech-name>span{font-size:7px}#response{font-size:12px}.deco-plus{right:25px;top:85px}.deco-circle{left:25px;top:200px}.deco-triangle{right:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}


/* ---------- Tema Lê Mundo: cena noturna com brilho ciano (contraste com teal/marfim) ---------- */
.playground{background:
  radial-gradient(ellipse 60% 22% at 50% 80%,#2fd3e655,transparent 70%),
  radial-gradient(ellipse at 50% 38%,#173a63 0%,#0d2347 45%,#081631 75%,#060f24 100%);
  box-shadow:inset 0 0 0 1px #1f4a6b,0 18px 40px #0a1a3326}
.stars{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#bff9ff,transparent),radial-gradient(1px 1px at 28% 72%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 44% 12%,#9ff3ff,transparent),radial-gradient(1px 1px at 63% 28%,#fff,transparent),
    radial-gradient(2px 2px at 82% 16%,#7ce9f7,transparent),radial-gradient(1px 1px at 90% 58%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 8% 52%,#9ff3ff,transparent),radial-gradient(1px 1px at 72% 82%,#bff9ff,transparent),
    radial-gradient(1px 1px at 35% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 60%,#7ce9f7,transparent);
  animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.45}}
.scene-orbit{border-color:#4fe3f04d;box-shadow:0 0 18px #4fe3f01a}
.orbit-two{border-style:dashed;border-color:#4fe3f033}
.deco{color:#ffb98c}.deco-triangle{color:#4fe3f0}.deco-circle{border-color:#ffd16c}
.live-label{color:#bfe9ef}.live-label i{background:#4fe3f0;box-shadow:0 0 0 4px #4fe3f026}
.motion{background:#0d2347b3;border-color:#2f6c8c;color:#bfe9ef}.motion:hover{background:#163a63}
.loader{background:#0b1d3d;color:#bfe9ef}.loader-ring{border-color:#22507a;border-top-color:#4fe3f0}
#viewport{cursor:grab;touch-action:pan-y}#viewport.dragging{cursor:grabbing}
#viewport:focus-visible{outline:3px solid #4fe3f0;outline-offset:-6px;border-radius:32px}
.spin-hint{position:absolute;z-index:3;right:22px;top:64px;font-size:10px;letter-spacing:.3px;color:#9fdbe4;
  background:#0d234799;border:1px solid #2f6c8c;border-radius:20px;padding:5px 10px;pointer-events:none}
@media(max-width:700px){.spin-hint{top:58px;right:14px}}

/* ---------- Botões simétricos e caixa holográfica (jornada / proposta) ---------- */
.actions-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.action.duo{background:#fffdf7;border-color:#d9e2d8;color:var(--ink);flex-direction:column;align-items:flex-start;gap:10px;min-height:118px;padding:16px}
.action.duo .action-icon{background:#e3f1f1;color:#155d61;font-size:22px}
.action.duo .action-label strong{font-size:14px;line-height:1.25}
.holo-box{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:20px;background:#0610247a}
.holo-box[hidden]{display:none}
.holo-panel{position:relative;width:min(100%,700px);max-height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(160deg,#0f2a52f5,#081631f7);border:1px solid #4fe3f0a6;border-radius:20px;color:#dbf3f7;
  box-shadow:0 0 0 1px #4fe3f026,0 0 46px #4fe3f04d,inset 0 0 40px #4fe3f014;
  transform-origin:var(--ox,82%) var(--oy,60%);animation:holoIn .6s cubic-bezier(.2,.8,.2,1) both}
.holo-panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(0deg,#4fe3f00a 0 2px,transparent 2px 5px)}
.holo-box.saindo .holo-panel{animation:holoOut .32s ease-in forwards}
@keyframes holoIn{from{transform:scale(.04);opacity:0;filter:blur(8px)}55%{opacity:1}to{transform:scale(1);opacity:1;filter:none}}
@keyframes holoOut{to{transform:scale(.04);opacity:0;filter:blur(8px)}}
.holo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 12px;border-bottom:1px solid #4fe3f033}
.holo-head small{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#7fd8e4}
.holo-head h2{margin:4px 0 0;font-size:19px;line-height:1.3;color:#b6fcfd;text-shadow:0 0 12px #3abfd380}
.holo-close{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid #4fe3f080;background:#0d2347;color:#b6fcfd;font-size:20px;line-height:1}
.holo-close:hover{background:#163a63}
.holo-body{overflow:auto;padding:14px 22px 22px;font-size:13px;line-height:1.7;scrollbar-color:#4fe3f080 transparent}
.holo-body:focus-visible{outline:2px solid #4fe3f0;outline-offset:-4px}
.holo-body h3{font-size:14px;margin:20px 0 8px;color:#7ff3ff;letter-spacing:.2px}
.holo-body p{margin:8px 0}.holo-body ul,.holo-body ol{margin:6px 0 10px;padding-left:20px}.holo-body li{margin:5px 0}
.holo-body b{color:#e9fbfd}.holo-body .lead{font-size:14px;color:#e9fbfd}
.holo-body .ficha{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:4px 0 8px;padding:12px 14px;border:1px solid #4fe3f033;border-radius:12px;background:#4fe3f00d}
.holo-body .ficha dt{color:#7fd8e4;font-size:11px;letter-spacing:.4px;text-transform:uppercase;padding-top:2px}.holo-body .ficha dd{margin:0}
.holo-body .total{font-size:15px;color:#b6fcfd;margin-top:16px}
.holo-body .nota{font-size:11px;color:#8fb6bf;border-top:1px solid #4fe3f026;padding-top:10px;margin-top:16px}
@media(prefers-reduced-motion:reduce){.holo-panel,.holo-box.saindo .holo-panel{animation:none}}
@media(max-width:700px){.actions-duo{grid-column:1/-1;gap:9px}.action.duo{min-height:104px;padding:13px 11px}.holo-box{padding:10px}.holo-body{padding:12px 16px 18px}.holo-body .ficha{grid-template-columns:1fr}}
