:root{
  --ink:#01070d;
  --deep:#03111e;
  --ocean:#053047;
  --cyan:#79efff;
  --cyan2:#29cde7;
  --violet:#aa8bff;
  --ice:#ecfbff;
  --muted:rgba(224,246,252,.68);
  --line:rgba(128,226,248,.24);
  --panel:rgba(4,17,29,.72);
  --panel2:rgba(2,12,22,.88);
  --glow:0 0 28px rgba(67,220,247,.14);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);color:var(--ice);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow-x:hidden}
button,textarea{font:inherit}button{cursor:pointer;color:inherit}
.app{min-height:100vh;background:#01070d;position:relative;overflow:hidden}
.ambient-stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.28;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.3px),radial-gradient(circle,#5fdff7 0 1px,transparent 1.4px);background-size:139px 139px,211px 211px;background-position:12px 18px,87px 102px}
main{position:relative;z-index:1}
.screen{display:none;min-height:100vh;position:relative;padding:106px 42px 132px;overflow:hidden}.screen.active{display:flex;animation:fadeScreen .65s ease both}@keyframes fadeScreen{from{opacity:0}to{opacity:1}}
.hidden{display:none!important}

/* Portal: the approved art is allowed to breathe. */
.portal-screen{padding:0;align-items:stretch;justify-content:stretch;background:#01060c}
.portal-art{position:absolute;inset:0;background:url('assets/portal-clean-hq.png') center/cover no-repeat;transform-origin:center center}
.portal-breath{position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(31,207,236,.06),transparent 28%),linear-gradient(180deg,rgba(0,4,8,.02),rgba(0,4,8,.12));pointer-events:none;animation:portalGlow 4.8s ease-in-out infinite alternate}
.portal-hotspot{position:absolute;left:50%;top:83.4%;transform:translate(-50%,-50%);width:27.1%;height:6.8%;min-height:54px;border:0;background:transparent;border-radius:999px;outline:none;cursor:pointer}
.portal-hotspot:focus-visible{box-shadow:0 0 0 2px var(--cyan),0 0 28px rgba(80,229,255,.35)}
@keyframes portalGlow{0%{opacity:.72}100%{opacity:1}}
body.portal-mode .topbar,body.portal-mode .journey-nav{opacity:0;pointer-events:none;transform:translateY(-12px)}

/* Top chrome is intentionally quiet after the cinematic cover. */
.topbar{position:fixed;z-index:40;top:0;left:0;right:0;height:72px;padding:17px 30px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(1,7,13,.94),rgba(1,7,13,.10));transition:.45s;backdrop-filter:blur(6px)}
.brand{display:flex;flex-direction:column;gap:4px;letter-spacing:.22em}.brand span{font-size:8px;color:var(--cyan)}.brand strong{font-size:11px;font-weight:500;letter-spacing:.3em}
.quiet-action,.text-btn{border:0;background:transparent;color:rgba(227,248,253,.67);font-size:9px;letter-spacing:.13em;text-transform:uppercase;padding:8px 4px}.quiet-action:hover,.text-btn:hover{color:#fff}

.stage-bg{position:absolute;inset:-2%;background:url('assets/portal-clean-hq.png') center/cover no-repeat;filter:saturate(.78) brightness(.58)}
.stage-bg-center{background-position:center 43%}
.stage-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,8,14,.91) 0%,rgba(2,11,19,.52) 45%,rgba(1,8,14,.78) 100%),linear-gradient(180deg,rgba(1,7,12,.12),rgba(1,7,12,.82))}.stage-shade.stronger{background:radial-gradient(circle at 50% 32%,rgba(5,40,58,.16),rgba(1,7,13,.88) 67%)}.stage-shade.deeper{background:linear-gradient(180deg,rgba(1,8,15,.32),rgba(1,7,13,.87) 58%,rgba(1,7,13,.96))}
.focus-shell{width:min(1050px,100%);margin:auto;position:relative;z-index:3}.narrow-shell{width:min(840px,100%)}

/* Intro */
.intro-screen{align-items:center;text-align:center}.intro-shell{max-width:820px;padding:24px 18px}.screen-kicker,.micro-label{display:block;font-size:9px;letter-spacing:.34em;color:var(--cyan);text-transform:uppercase}.intro-shell h1{font-size:clamp(38px,5vw,68px);line-height:1.08;font-weight:240;letter-spacing:.035em;margin:18px 0 24px}.intro-primary{font-size:17px;color:rgba(240,252,255,.86);line-height:1.6;margin:0 auto 12px;max-width:680px}.intro-identity{font-size:18px;margin:10px auto;color:#fff}.intro-soft{font-size:12px;color:var(--muted);margin:18px auto 30px}.intro-links{display:flex;gap:24px;justify-content:center;margin-top:18px}

/* Buttons / input */
.primary-btn,.secondary-btn{border-radius:16px;padding:13px 20px;min-height:46px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:.22s;border:1px solid rgba(111,229,252,.32)}
.primary-btn{background:linear-gradient(180deg,rgba(35,188,218,.33),rgba(4,31,48,.9));box-shadow:0 0 30px rgba(53,218,247,.13),inset 0 0 20px rgba(97,235,255,.06)}
.secondary-btn{background:rgba(3,18,30,.68);color:rgba(232,249,253,.82)}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);border-color:rgba(148,241,255,.72)}.primary-btn.large{padding:16px 35px;font-size:11px}.primary-btn:disabled,.secondary-btn:disabled{opacity:.36;cursor:not-allowed;transform:none}
.button-row{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}.button-row.center{justify-content:center}
.single-action{margin-top:34px;max-width:720px}.single-action label,.visible-question label{display:block;font-size:21px;line-height:1.35;margin-bottom:15px;font-weight:420}.minimal-input{display:flex;align-items:stretch;gap:10px;padding:3px;border-bottom:1px solid rgba(128,226,248,.32)}.minimal-input textarea{flex:1;resize:none;border:0;outline:0;background:rgba(1,8,15,.48);color:#fff;padding:16px 17px;border-radius:12px 12px 4px 4px;line-height:1.45;min-height:74px}.minimal-input textarea::placeholder{color:rgba(221,244,250,.35)}.mic-btn{width:48px;min-width:48px;border:1px solid rgba(111,229,252,.25);background:rgba(3,24,38,.75);border-radius:50%;color:var(--cyan);font-size:10px}.dark-input textarea{background:rgba(0,6,12,.67)}.examples{font-size:10px;color:rgba(221,244,250,.48);letter-spacing:.035em;margin:10px 0 20px}

/* Headings */
.stage-heading{display:flex;align-items:flex-start;gap:19px;margin-bottom:22px;max-width:790px}.stage-heading.centered-heading{justify-content:center;text-align:center;margin-left:auto;margin-right:auto}.stage-index{font-size:10px;letter-spacing:.38em;color:var(--cyan);padding-top:9px}.stage-heading h2{font-size:clamp(30px,4vw,48px);font-weight:280;letter-spacing:.12em;margin:0 0 8px}.stage-heading p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}.compact-heading{margin-bottom:12px}
.confirmation{margin-top:28px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.confirmation p{font-size:clamp(23px,3vw,36px);line-height:1.36;margin:12px 0 0;font-weight:300}

/* Coordinate needle physically aligns with the visual protractor behind the iceberg. */
.coordinate-needle-wrap{position:absolute;left:50%;top:10%;width:2px;height:36vh;z-index:2;pointer-events:none}.coordinate-needle{position:absolute;left:0;bottom:0;width:2px;height:28vh;transform-origin:50% 100%;transform:rotate(-28deg);background:linear-gradient(180deg,rgba(119,239,255,.02),rgba(119,239,255,.82));transition:1.25s cubic-bezier(.17,.82,.21,1);box-shadow:0 0 13px rgba(93,232,255,.25)}.coordinate-needle i{position:absolute;top:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:#b8f7ff;box-shadow:0 0 20px #5ce4ff}.coordinate-label{position:absolute;top:26%;left:18px;white-space:nowrap;color:rgba(213,247,255,.55);font-size:8px;letter-spacing:.24em}

/* Visible costs: one mental operation at a time. */
.visible-screen{align-items:center}.visible-bg{position:absolute;inset:0;background:url('assets/portal-clean-hq.png') center/cover no-repeat;filter:brightness(.43) saturate(.75)}.costs-shell{max-width:980px}.active-coordinate-line{padding:12px 0 16px;border-top:1px solid rgba(128,226,248,.16);display:flex;gap:15px;align-items:baseline}.active-coordinate-line span{font-size:8px;letter-spacing:.24em;color:var(--cyan)}.active-coordinate-line strong{font-size:12px;font-weight:450;color:rgba(238,252,255,.86)}
.visible-state{min-height:460px;display:flex;align-items:center;justify-content:center}.capture-state{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px}.capsule-stage{text-align:center}.capsule-object{margin:auto;width:138px;height:270px;border-radius:72px;border:1px solid rgba(188,247,255,.48);background:linear-gradient(180deg,rgba(212,251,255,.14),rgba(7,102,134,.18) 48%,rgba(2,18,31,.54));box-shadow:inset 0 0 36px rgba(120,236,255,.10),0 0 40px rgba(40,211,239,.08);position:relative;display:grid;place-items:center;animation:floatCapsule 5s ease-in-out infinite}.capsule-object:before{content:"";position:absolute;left:8px;right:8px;top:50%;height:1px;background:rgba(220,252,255,.34)}.empty-capsule span{font-size:34px;font-weight:200;color:rgba(173,244,255,.45)}.filled-capsule span{font-size:21px;letter-spacing:.12em;color:#dffcff}.capsule-count{font-size:9px;letter-spacing:.12em;color:rgba(222,247,252,.45);margin-top:16px}@keyframes floatCapsule{50%{transform:translateY(-9px)}}.visible-question{max-width:620px}.visible-question>p{color:var(--muted);font-size:12px;margin:-3px 0 14px}.continue-state{flex-direction:column;text-align:center}.last-capsule-wrap{display:flex;align-items:center;gap:26px;margin-bottom:18px}.last-capsule-wrap .capsule-object{width:92px;height:180px}.last-capsule-wrap p{font-size:22px;max-width:550px;text-align:left;line-height:1.45}.continue-state h3,.select-state h3,.invisible-choice h3,.invisible-confirm h3{font-size:22px;font-weight:330;margin:18px 0 6px}.select-state{flex-direction:column;text-align:center}.capsule-gallery{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin:28px 0 24px}.belief-capsule{width:118px;height:230px;border-radius:62px;border:1px solid rgba(188,247,255,.40);background:linear-gradient(180deg,rgba(209,252,255,.12),rgba(9,97,128,.19) 50%,rgba(1,17,29,.66));color:#fff;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 13px;box-shadow:inset 0 0 28px rgba(109,235,255,.08);transition:.25s}.belief-capsule:before{content:"";position:absolute;top:50%;left:8px;right:8px;height:1px;background:rgba(210,249,255,.24)}.belief-capsule i{font-style:normal;color:var(--cyan);font-size:9px;letter-spacing:.18em;margin-bottom:15px}.belief-capsule span{font-size:10px;line-height:1.35}.belief-capsule:hover,.belief-capsule.selected{transform:translateY(-8px);border-color:#bcf8ff;box-shadow:0 0 34px rgba(60,221,250,.22),inset 0 0 30px rgba(112,236,255,.10)}.selected-visible-copy{max-width:620px;margin:0 auto 8px}.selected-visible-copy p{font-size:18px;color:#fff;margin:8px 0 14px}

/* Trunk */
.trunk-screen{background:linear-gradient(180deg,#03111e,#01070d 72%);align-items:center}.deep-ocean{position:absolute;inset:0;background:radial-gradient(circle at 50% 12%,rgba(10,155,191,.14),transparent 27%),radial-gradient(circle at 18% 62%,rgba(5,77,104,.13),transparent 25%),linear-gradient(180deg,#031421,#01070d 76%)}.helix-svg{position:absolute;left:50%;top:50%;height:92vh;width:auto;transform:translate(-50%,-48%);opacity:.7;filter:drop-shadow(0 0 12px rgba(78,224,255,.15));animation:helixFloat 9s ease-in-out infinite}@keyframes helixFloat{50%{transform:translate(-50%,-50%) rotate(.8deg)}}.trunk-title{position:absolute;left:7vw;top:18vh;max-width:300px;z-index:3}.trunk-title h2{font-size:44px;font-weight:270;letter-spacing:.12em;margin:7px 0}.trunk-title p{font-size:13px;line-height:1.6;color:var(--muted)}.trunk-title strong{display:block;margin-top:18px;font-size:9px;letter-spacing:.24em;color:#dffbff}.trunk-dialogue{position:relative;z-index:4;width:min(580px,44vw);margin-left:auto;margin-right:5vw;background:rgba(2,14,25,.60);border:1px solid rgba(124,228,249,.18);border-radius:24px;padding:24px 25px;backdrop-filter:blur(10px);box-shadow:0 0 40px rgba(36,177,209,.06)}.origin-pill{font-size:10px;color:var(--muted);margin-bottom:18px}.origin-pill span{color:var(--cyan);font-size:8px;letter-spacing:.18em;margin-right:9px}.origin-pill b{font-weight:450}.trunk-question{font-size:24px;line-height:1.35;margin-bottom:18px;font-weight:320}.cross-invisible{display:block;margin:15px 0 0 auto;color:#c8b7ff}.trace-dots{position:absolute;right:30px;top:28%;bottom:23%;width:8px;display:flex;flex-direction:column;justify-content:center;gap:11px}.trace-dot{width:7px;height:7px;border-radius:50%;background:rgba(124,229,249,.28);box-shadow:0 0 12px rgba(85,226,249,.15)}.trace-dot.active{background:#9af3ff;box-shadow:0 0 18px #55e1fa}

/* Invisible costs */
.invisible-screen{background:#01060b;align-items:center}.deeper-ocean{background:radial-gradient(circle at 50% 30%,rgba(89,50,165,.15),transparent 25%),radial-gradient(circle at 50% 70%,rgba(9,114,146,.10),transparent 34%),linear-gradient(180deg,#020d18,#010409 78%)}.invisible-helix{position:absolute;left:50%;top:-15%;width:310px;height:135%;transform:translateX(-50%);opacity:.20;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 26px,rgba(167,127,255,.40) 27px 28px,transparent 29px 54px),linear-gradient(90deg,transparent 49%,rgba(98,227,251,.44) 49.5% 50.5%,transparent 51%);filter:blur(.2px)}.invisible-shell{max-width:920px;text-align:center}.quiet-mantra{display:block;margin-top:14px;font-size:9px;letter-spacing:.23em;color:#d6c8ff}.deep-node-main{width:min(620px,90%);min-height:150px;margin:30px auto 18px;padding:28px 36px;border-radius:100px;border:1px solid rgba(180,145,255,.38);background:radial-gradient(circle,rgba(112,73,179,.14),rgba(3,13,23,.84) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 60px rgba(118,76,210,.10)}.deep-node-main span{font-size:8px;letter-spacing:.28em;color:#c5aaff;margin-bottom:12px}.deep-node-main strong{font-size:clamp(22px,3vw,34px);font-weight:350;line-height:1.35}.invisible-choice,.invisible-input-state,.invisible-confirm{max-width:690px;margin:22px auto}.invisible-input-state>p{color:var(--muted);font-size:13px}.deep-node-history{margin:25px auto 0;max-width:760px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.deep-chip{font-size:9px;color:rgba(229,246,252,.66);border:1px solid rgba(168,128,255,.18);background:rgba(15,10,28,.44);padding:8px 10px;border-radius:12px}

/* Revelation */
.revelation-screen{align-items:center;background:#01050a}.revelation-aura{position:absolute;inset:0;background:radial-gradient(circle at 28% 52%,rgba(55,215,242,.12),transparent 17%),radial-gradient(circle at 28% 52%,rgba(163,98,255,.10),transparent 29%)}.heart-machine{position:absolute;left:8vw;top:50%;width:300px;height:300px;transform:translateY(-50%);filter:drop-shadow(0 0 26px rgba(92,227,255,.15))}.heart-shell{position:absolute;inset:42px 54px 46px;transform:rotate(-45deg);border:2px solid rgba(186,244,255,.72);border-radius:40% 45% 38% 8%;background:linear-gradient(135deg,rgba(63,219,244,.08),rgba(155,102,255,.08));box-shadow:inset 0 0 32px rgba(77,222,247,.12),0 0 24px rgba(99,218,247,.14)}.heart-shell:before,.heart-shell:after{content:"";position:absolute;width:98px;height:98px;border:2px solid rgba(186,244,255,.72);border-radius:50%;background:rgba(5,23,35,.74)}.heart-shell:before{left:-2px;top:-55px}.heart-shell:after{right:-55px;top:-2px}.heart-core-light{position:absolute;left:50%;top:49%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:#fff4d2;box-shadow:0 0 12px #fff,0 0 32px #66e9ff,0 0 70px #ac78ff;animation:heartbeat 2.1s ease-in-out infinite}@keyframes heartbeat{50%{transform:translate(-50%,-50%) scale(1.35)}}.heart-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(122,230,250,.26);border-radius:50%;transform:translate(-50%,-50%);animation:ringPulse 2.7s linear infinite}.heart-ring.r1{width:170px;height:170px}.heart-ring.r2{width:240px;height:240px;animation-delay:-1.2s}@keyframes ringPulse{0%{opacity:.45;transform:translate(-50%,-50%) scale(.75)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}.revelation-shell{max-width:880px;margin-left:auto;margin-right:4vw;text-align:center}.revelation-heading{margin-bottom:18px}.revelation-sequence blockquote{font-size:clamp(22px,3.2vw,38px);line-height:1.38;font-weight:290;margin:12px auto 28px}.equation{font-size:clamp(30px,4.5vw,56px);font-weight:280;letter-spacing:.04em;margin:13px auto 22px;color:#f2fdff;text-shadow:0 0 30px rgba(96,228,255,.22)}.revelation-sequence>p{color:var(--muted);font-size:14px;line-height:1.65}.revelation-sequence>small{color:rgba(223,245,251,.45)}.trace-details{max-width:760px;margin:24px auto;border-top:1px solid rgba(127,225,247,.17);border-bottom:1px solid rgba(127,225,247,.17);padding:14px 0;text-align:left}.trace-details summary{cursor:pointer;color:var(--cyan);font-size:9px;letter-spacing:.18em}.trace-flow{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.trace-chip{font-size:9px;padding:8px 10px;border-radius:10px;border:1px solid rgba(118,225,247,.16);background:rgba(3,17,28,.54);color:rgba(230,248,252,.72)}

/* Map */
.map-screen{align-items:center}.map-bg{filter:saturate(.72) brightness(.42)}.map-shell{max-width:1020px;text-align:center}.map-protractor{position:absolute;left:50%;top:7vh;width:700px;height:350px;transform:translateX(-50%);border:1px solid rgba(125,228,249,.22);border-bottom:0;border-radius:700px 700px 0 0;opacity:.38}.map-protractor i{position:absolute;left:50%;bottom:0;width:2px;height:300px;background:linear-gradient(transparent,rgba(121,236,255,.9));transform-origin:bottom;transform:rotate(-22deg)}.map-protractor b{position:absolute;left:50%;top:34px;width:12px;height:12px;border-radius:50%;background:#a8f7ff;box-shadow:0 0 24px #5ee7ff}.map-coordinate{margin:18px auto 24px;border:1px solid rgba(118,226,247,.24);border-radius:18px;padding:13px 30px;width:max-content;min-width:230px;background:rgba(1,12,21,.65)}.map-coordinate span{display:block;font-size:8px;letter-spacing:.22em;color:var(--cyan);margin-bottom:5px}.map-coordinate strong{font-size:22px;font-weight:370;letter-spacing:.08em}.map-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;text-align:left}.map-summary article{padding:19px;border:1px solid rgba(121,227,248,.17);border-radius:18px;background:rgba(2,15,25,.70);min-height:135px}.map-summary article>span{display:block;color:var(--cyan);font-size:8px;letter-spacing:.2em;margin-bottom:13px}.map-summary article strong{font-size:15px;line-height:1.4;font-weight:450}.map-summary article div{display:flex;gap:5px;flex-wrap:wrap}.map-summary article div span{font-size:9px;border:1px solid rgba(119,226,247,.15);padding:5px 7px;border-radius:8px}.map-summary .map-invisible{border-color:rgba(178,139,255,.28);box-shadow:0 0 30px rgba(141,93,224,.07)}.map-trace{margin:16px auto}.part-two-lock{margin:18px auto;padding:20px 26px;border:1px solid rgba(170,134,255,.25);border-radius:20px;background:linear-gradient(90deg,rgba(39,25,64,.33),rgba(2,15,25,.72));max-width:820px}.part-two-lock>span{font-size:8px;letter-spacing:.24em;color:#c1a7ff}.part-two-lock h3{font-size:21px;font-weight:330;letter-spacing:.12em;margin:7px 0}.part-two-lock p{font-size:11px;color:var(--muted);max-width:600px;margin:0 auto 14px;line-height:1.5}

/* Journey navigation */
.journey-nav{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:45;width:min(1180px,calc(100vw - 30px));height:54px;display:grid;grid-template-columns:.7fr repeat(6,1fr);gap:2px;padding:6px;background:rgba(1,8,14,.82);border:1px solid rgba(121,227,248,.14);border-radius:20px;backdrop-filter:blur(14px);transition:.45s}.journey-nav button{border:0;background:transparent;color:rgba(224,246,251,.42);border-radius:13px;font-size:8px;padding:5px 7px;letter-spacing:.035em}.journey-nav button i{display:block;font-style:normal;color:rgba(97,221,244,.52);font-size:7px;margin-bottom:2px}.journey-nav button.active{color:#fff;background:rgba(13,83,105,.26);box-shadow:inset 0 0 18px rgba(74,222,248,.05)}.journey-nav button.active i{color:var(--cyan)}.journey-nav button.locked span:after{content:""}

/* History */
.history-dialog{width:min(760px,92vw);max-height:78vh;border:1px solid rgba(122,228,249,.20);border-radius:24px;background:rgba(2,13,22,.96);color:#fff;padding:22px;box-shadow:0 28px 90px rgba(0,0,0,.65);backdrop-filter:blur(18px)}.history-dialog::backdrop{background:rgba(0,3,7,.76);backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h3{font-weight:350;letter-spacing:.13em;margin:7px 0}.dialog-close{border:0;background:transparent;color:#fff;font-size:26px}.history-list{display:grid;gap:9px;margin-top:18px}.history-item{border:1px solid rgba(119,226,247,.14);border-radius:16px;padding:15px 17px;background:rgba(4,23,37,.62)}.history-item span{font-size:8px;color:var(--cyan);letter-spacing:.14em}.history-item strong{display:block;font-size:14px;margin:5px 0}.history-item p{font-size:10px;color:var(--muted);margin:0}.toast{position:fixed;z-index:90;right:24px;top:88px;padding:11px 14px;border:1px solid rgba(121,228,249,.20);border-radius:12px;background:rgba(2,16,27,.94);font-size:10px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}

@media(max-width:920px){
  .screen{padding:92px 20px 126px}.topbar{padding:14px 18px;height:64px}.brand strong{font-size:9px}.quiet-action{font-size:8px}
  .portal-art{background-size:cover}
  .intro-shell h1{font-size:38px}.stage-heading h2{font-size:32px}.stage-heading{gap:12px}.single-action label,.visible-question label{font-size:18px}
  .coordinate-needle-wrap{opacity:.55}.capture-state{grid-template-columns:1fr;gap:25px}.capsule-object{width:100px;height:195px}.capsule-stage{display:none}.visible-state{min-height:auto;padding-top:12px}
  .trunk-title{position:relative;left:auto;top:auto;max-width:720px;margin:0 auto 18px;text-align:center}.trunk-screen{align-items:flex-start}.helix-svg{opacity:.25}.trunk-dialogue{width:100%;margin:0 auto}.trace-dots{display:none}
  .heart-machine{left:50%;top:28%;transform:translate(-50%,-50%) scale(.6);opacity:.38}.revelation-shell{margin:150px auto 0}.map-summary{grid-template-columns:1fr}.map-protractor{width:90vw;height:45vw;opacity:.18}
  .journey-nav{overflow-x:auto;grid-template-columns:repeat(7,minmax(110px,1fr));justify-content:start}.journey-nav button{white-space:nowrap}
}
@media(max-width:560px){.screen{padding-left:16px;padding-right:16px}.portal-art{background-position:center}.intro-links{flex-direction:column;gap:4px}.button-row{flex-direction:column;align-items:stretch}.button-row.center{align-items:stretch}.primary-btn,.secondary-btn{width:100%}.last-capsule-wrap{flex-direction:column}.last-capsule-wrap p{text-align:center;font-size:18px}.capsule-gallery{gap:10px}.belief-capsule{width:94px;height:185px}.stage-heading{display:block}.stage-index{display:block;margin-bottom:6px}.active-coordinate-line{display:block}.active-coordinate-line strong{display:block;margin-top:6px}.map-coordinate{width:100%}.heart-machine{display:none}.revelation-shell{margin:0 auto}.journey-nav{bottom:8px}}

/* V1.2 · Troncal anti-loop */
.branch-exhausted{margin-top:18px;padding:24px;border:1px solid rgba(123,226,247,.18);border-radius:20px;background:linear-gradient(145deg,rgba(4,21,33,.88),rgba(12,10,27,.82));box-shadow:0 18px 60px rgba(0,0,0,.26)}
.branch-exhausted h3{margin:9px 0 10px;font-size:22px;font-weight:360;letter-spacing:.01em}
.branch-exhausted p{margin:7px 0;color:var(--muted);font-size:12px;line-height:1.55}
.branch-exhausted p strong{color:#eefcff;font-weight:480}
.branch-exhausted .branch-note{color:rgba(225,246,251,.48);margin-bottom:16px}

/* V1.3 · limpieza de Deseo Bloqueado + pausa guiada del Troncal */
.desire-screen .stage-shade.stronger{
  background:
    linear-gradient(180deg,rgba(1,7,13,.05) 0%,rgba(1,7,13,.16) 30%,rgba(1,7,13,.68) 48%,rgba(1,7,13,.94) 60%,rgba(1,7,13,.985) 72%,#01070d 100%),
    radial-gradient(circle at 50% 24%,rgba(7,52,72,.08),rgba(1,7,13,.66) 68%);
}
.deeper-signal-btn{display:block;margin:18px auto 0;min-width:260px;padding-inline:24px;border-color:rgba(108,229,255,.46);color:#dffbff;background:rgba(4,35,49,.56)}
.trunk-limit-dialog{width:min(620px,calc(100vw - 36px));border:1px solid rgba(105,229,255,.34);border-radius:24px;padding:0;background:linear-gradient(180deg,rgba(4,22,34,.98),rgba(1,9,17,.99));color:#eefcff;box-shadow:0 34px 100px rgba(0,0,0,.7),0 0 55px rgba(58,205,238,.12)}
.trunk-limit-dialog::backdrop{background:rgba(0,5,11,.78);backdrop-filter:blur(9px)}
.limit-dialog-inner{padding:34px 34px 30px;text-align:center}
.limit-dialog-inner h3{margin:10px 0 12px;font-weight:300;letter-spacing:.08em;font-size:clamp(24px,3vw,34px)}
.limit-dialog-inner p{max-width:490px;margin:0 auto 18px;color:rgba(225,246,252,.72);line-height:1.6}
.limit-dialog-inner>strong{display:block;max-width:510px;margin:0 auto 24px;font-size:16px;line-height:1.5;font-weight:500}
.limit-dialog-actions{display:grid;gap:10px}
.limit-dialog-actions button{width:100%;justify-content:center;min-height:48px}

/* V1.3.3 · una sola pregunta visible durante la pausa guiada */
body.trunk-limit-open #trunkActiveState{
  visibility:hidden;
}


/* V1.3.5 · assets maestros + Revelación normalizada */
/* Los símbolos protagonistas pasan a ser imágenes maestras. HTML queda para UI dinámica. */
.visible-bg{
  background:url('assets/visible-master-hq.jpg') center/cover no-repeat !important;
  filter:none !important;
}
.visible-screen .stage-shade.deeper{
  background:linear-gradient(90deg,rgba(1,7,13,.10) 0%,rgba(1,7,13,.08) 36%,rgba(1,7,13,.35) 66%,rgba(1,7,13,.70) 100%);
}
.visible-screen .costs-shell{
  width:min(780px,48vw);
  margin-left:5vw;
  margin-right:auto;
}
.visible-screen .capture-state{grid-template-columns:1fr !important;gap:20px}
.visible-screen .capsule-stage{display:none !important}

.deep-ocean{
  background:url('assets/trunk-master-hq.jpg') center/cover no-repeat !important;
}
.trunk-screen:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,3,8,.05) 0%,rgba(0,3,8,.10) 38%,rgba(0,3,8,.38) 54%,rgba(0,3,8,.72) 72%,rgba(0,3,8,.88) 100%);
}
.helix-svg{display:none !important}
.trunk-title{
  left:54vw !important;top:11vh !important;max-width:540px !important;z-index:5 !important;
}
.trunk-title h2{font-size:38px !important}
.trunk-dialogue{
  z-index:6 !important;width:min(650px,42vw) !important;margin-left:auto !important;margin-right:5vw !important;margin-top:160px !important;
  background:rgba(1,9,16,.72) !important;backdrop-filter:blur(12px) !important;
}
.trace-dots{z-index:7}

.deeper-ocean{
  background:url('assets/invisible-master-hq.jpg') center/cover no-repeat !important;
}
.invisible-screen:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,3,8,.04) 0%,rgba(0,3,8,.10) 38%,rgba(0,3,8,.48) 58%,rgba(0,3,8,.82) 78%,rgba(0,3,8,.94) 100%);
}
.invisible-helix{display:none !important}
.invisible-shell{
  position:relative;z-index:4;width:min(820px,46vw);max-width:none !important;margin-left:auto !important;margin-right:5vw !important;text-align:center;
}
.deep-node-main{background:rgba(2,10,19,.72) !important;backdrop-filter:blur(10px)}

.revelation-screen{
  background:#01060d url('assets/revelation-master-hq.jpg') center/cover no-repeat !important;
}
.revelation-screen:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,3,8,.03) 0%,rgba(0,3,8,.05) 38%,rgba(0,3,8,.30) 52%,rgba(0,3,8,.66) 70%,rgba(0,3,8,.86) 100%);
}
.revelation-aura,.heart-machine{display:none !important}
.revelation-shell{position:relative;z-index:5;width:min(900px,49vw);max-width:none !important;margin-left:auto !important;margin-right:4.5vw !important;text-align:center}
.revelation-sequence blockquote{font-size:clamp(21px,2.45vw,38px);line-height:1.38}
.equation{font-size:clamp(28px,3.75vw,54px)}

@media(max-width:920px){
  .visible-screen .costs-shell,.invisible-shell,.revelation-shell{width:100% !important;margin:0 auto !important}
  .visible-bg,.deep-ocean,.deeper-ocean,.revelation-screen{background-position:center !important}
  .trunk-title{position:relative !important;left:auto !important;top:auto !important;margin:0 auto 16px !important;text-align:center}
  .trunk-dialogue{width:100% !important;margin:0 auto !important}
  .trunk-screen:after,.invisible-screen:after,.revelation-screen:after{background:rgba(0,5,10,.64)}
}

/* V1.3.6 · Sentencia subconsciente + Lectura del Archivo */
.equation.sentence{
  font-size:clamp(24px,3.25vw,46px);
  line-height:1.28;
  letter-spacing:.025em;
  max-width:820px;
  padding:16px 18px;
  border:1px solid rgba(104,228,251,.22);
  border-radius:18px;
  background:rgba(1,12,21,.46);
}
.reading-screen{align-items:center;background:#01070d}
.reading-bg{position:absolute;inset:0;background:url('assets/trunk-master-hq.jpg') left center/cover no-repeat;filter:saturate(.78) brightness(.46)}
.reading-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,7,13,.22) 0%,rgba(1,7,13,.56) 34%,rgba(1,7,13,.94) 58%,#01070d 78%)}
.reading-shell{width:min(1080px,68vw);max-width:none;margin-left:auto;margin-right:4.5vw}
.reading-heading{margin-bottom:18px}.reading-heading h2{font-size:clamp(34px,4.2vw,58px)}
.sentence-card{padding:18px 20px;border:1px solid rgba(102,228,250,.24);border-radius:18px;background:rgba(2,18,29,.72);box-shadow:0 14px 50px rgba(0,0,0,.18);margin-bottom:14px}
.sentence-card strong{display:block;margin-top:10px;font-size:clamp(20px,2.3vw,31px);line-height:1.35;font-weight:330;color:#f2fdff}
.reading-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:12px;margin-bottom:12px}
.reading-panel{min-height:150px;padding:18px;border:1px solid rgba(117,227,248,.16);border-radius:18px;background:rgba(2,16,27,.72)}
.theme-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.theme-chip{font-size:9px;letter-spacing:.055em;color:#dffbff;padding:8px 10px;border-radius:10px;border:1px solid rgba(103,228,250,.22);background:rgba(7,46,62,.48)}.theme-chip.quiet{color:rgba(225,246,251,.5)}
.reading-hypothesis p{font-size:14px;line-height:1.65;color:rgba(240,251,254,.88);margin:13px 0 10px}.reading-hypothesis small{font-size:10px;line-height:1.5;color:rgba(221,244,250,.48)}
.reading-reflection{margin:12px 0;padding:15px 17px;border:1px solid rgba(115,226,248,.14);border-radius:16px;background:rgba(1,12,21,.62)}
.reading-reflection label{display:block;font-size:12px;color:rgba(240,252,255,.88);margin-bottom:9px}.reading-reflection textarea{width:100%;resize:vertical;min-height:78px;border:0;border-bottom:1px solid rgba(108,228,250,.20);background:rgba(0,6,11,.48);color:#fff;padding:12px 13px;font:inherit;outline:none}
.numerology-cross{margin:12px 0 16px;border-top:1px solid rgba(123,227,249,.17);border-bottom:1px solid rgba(123,227,249,.17);padding:13px 0}.numerology-cross summary{cursor:pointer;color:var(--cyan);font-size:9px;letter-spacing:.19em}.numerology-intro{font-size:11px;color:var(--muted);margin:14px 0 10px}.strategic-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}.strategic-sides article{padding:14px 15px;border:1px solid rgba(127,224,247,.14);border-radius:14px;background:rgba(2,16,27,.58)}.strategic-sides article span{display:block;color:var(--cyan);font-size:7px;letter-spacing:.2em;margin-bottom:5px}.strategic-sides article strong{font-size:13px;font-weight:450}.strategic-sides article p{font-size:10px;line-height:1.5;color:var(--muted);margin:7px 0 0}
.numerology-inputs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:12px 0}.numerology-inputs label{font-size:8px;letter-spacing:.08em;color:rgba(225,247,252,.62)}.numerology-inputs input{display:block;width:100%;margin-top:5px;border:1px solid rgba(119,226,248,.16);border-radius:9px;background:rgba(0,7,13,.72);color:#fff;padding:8px 9px;outline:none}.small-btn{min-height:36px;padding:7px 13px;font-size:8px}.numerology-note{font-size:9px;line-height:1.5;color:rgba(222,244,250,.42);margin:9px 0 0}.reading-actions{margin-top:14px}
.map-actions{flex-wrap:wrap}

/* Ahora hay ocho territorios funcionales en la barra. */
.journey-nav{grid-template-columns:.66fr repeat(7,1fr)}

@media(max-width:920px){
  .reading-bg{background-position:center}.reading-shade{background:rgba(0,6,11,.72)}.reading-shell{width:100%;margin:0 auto}.reading-grid{grid-template-columns:1fr}.numerology-inputs{grid-template-columns:repeat(2,1fr)}.strategic-sides{grid-template-columns:1fr}.journey-nav{grid-template-columns:repeat(8,minmax(110px,1fr))}
}
@media(max-width:560px){.numerology-inputs{grid-template-columns:1fr 1fr}.reading-heading h2{font-size:30px}.sentence-card strong{font-size:20px}}

/* V1.3.7 · integración visual + assets HQ */
/* La imagen deja de sentirse como columna separada: transición larga hacia la zona funcional. */
.portal-art,
.stage-bg,
.visible-bg,
.deep-ocean,
.deeper-ocean,
.reading-bg{
  image-rendering:auto;
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Costos visibles: contenido a la izquierda, cápsula a la derecha. */
.visible-screen .stage-shade.deeper{
  background:linear-gradient(90deg,
    rgba(1,7,13,.98) 0%,
    rgba(1,7,13,.95) 20%,
    rgba(1,7,13,.86) 32%,
    rgba(1,7,13,.68) 42%,
    rgba(1,7,13,.46) 50%,
    rgba(1,7,13,.24) 59%,
    rgba(1,7,13,.08) 70%,
    rgba(1,7,13,0) 86%);
}
.visible-bg{filter:saturate(1.04) contrast(1.035) brightness(.98) !important}

/* Troncal: ADN a la izquierda, contenido integrado en el mismo espacio a la derecha. */
.deep-ocean{
  background-position:left center !important;
  filter:saturate(1.06) contrast(1.055) brightness(1.01);
}
.trunk-screen:after{
  background:linear-gradient(90deg,
    rgba(0,4,9,.00) 0%,
    rgba(0,4,9,.02) 22%,
    rgba(0,4,9,.10) 32%,
    rgba(0,4,9,.27) 41%,
    rgba(0,4,9,.52) 50%,
    rgba(0,4,9,.74) 60%,
    rgba(0,4,9,.88) 72%,
    rgba(0,4,9,.95) 86%,
    rgba(0,4,9,.98) 100%) !important;
}
.trunk-dialogue{
  background:linear-gradient(145deg,rgba(2,15,25,.54),rgba(1,9,16,.36)) !important;
  border-color:rgba(124,228,249,.13) !important;
  backdrop-filter:blur(8px) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.14),inset 0 0 26px rgba(84,220,246,.025) !important;
}

/* Costos invisibles: misma continuidad, un poco más profunda. */
.deeper-ocean{
  background-position:left center !important;
  filter:saturate(1.04) contrast(1.05) brightness(.96);
}
.invisible-screen:after{
  background:linear-gradient(90deg,
    rgba(0,3,8,.00) 0%,
    rgba(0,3,8,.03) 22%,
    rgba(0,3,8,.12) 34%,
    rgba(2,4,12,.34) 44%,
    rgba(4,5,15,.60) 55%,
    rgba(3,5,14,.80) 66%,
    rgba(1,4,10,.92) 79%,
    rgba(0,3,8,.97) 100%) !important;
}
.deep-node-main{
  background:linear-gradient(145deg,rgba(2,10,19,.55),rgba(2,10,19,.34)) !important;
  border-color:rgba(151,128,238,.14) !important;
  backdrop-filter:blur(7px) !important;
}

/* Revelación: corazón y texto forman una sola escena. */
.revelation-screen{
  background-position:left center !important;
  background-size:cover !important;
}
.revelation-screen:after{
  background:linear-gradient(90deg,
    rgba(0,3,8,.00) 0%,
    rgba(0,3,8,.015) 25%,
    rgba(0,3,8,.08) 35%,
    rgba(0,3,8,.24) 45%,
    rgba(0,3,8,.48) 54%,
    rgba(0,3,8,.72) 64%,
    rgba(0,3,8,.88) 76%,
    rgba(0,3,8,.95) 89%,
    rgba(0,3,8,.98) 100%) !important;
}

/* Lectura: misma lógica de continuidad visual que el Troncal. */
.reading-bg{
  background-position:left center !important;
  filter:saturate(.90) contrast(1.04) brightness(.54) !important;
}
.reading-shade{
  background:linear-gradient(90deg,
    rgba(1,7,13,.04) 0%,
    rgba(1,7,13,.10) 24%,
    rgba(1,7,13,.26) 36%,
    rgba(1,7,13,.52) 47%,
    rgba(1,7,13,.76) 58%,
    rgba(1,7,13,.90) 70%,
    rgba(1,7,13,.97) 84%,
    #01070d 100%) !important;
}

/* En pantallas grandes preservamos más imagen: el contenido flota, no parte la escena. */
@media(min-width:921px){
  .visible-screen .costs-shell{width:min(760px,44vw);margin-left:5.5vw}
  .trunk-title{left:55vw !important}
  .trunk-dialogue{width:min(650px,40vw) !important;margin-right:5.5vw !important}
  .invisible-shell{width:min(820px,43vw) !important;margin-right:5.5vw !important}
  .revelation-shell{width:min(900px,47vw) !important;margin-right:4.5vw !important}
  .reading-shell{width:min(1080px,64vw);margin-right:4.5vw}
}

@media(max-width:920px){
  .visible-screen .stage-shade.deeper,
  .trunk-screen:after,
  .invisible-screen:after,
  .revelation-screen:after,
  .reading-shade{
    background:linear-gradient(180deg,rgba(0,5,10,.32) 0%,rgba(0,5,10,.70) 52%,rgba(0,5,10,.90) 100%) !important;
  }
}

/* V1.3.8 · FADE REAL — elimina el corte vertical del asset */
/* Los masters ya están feathered pixel a pixel; los overlays sólo ajustan legibilidad. */
.trunk-screen:after{
  background:linear-gradient(90deg,
    rgba(0,4,9,0) 0%,
    rgba(0,4,9,.015) 28%,
    rgba(0,4,9,.055) 38%,
    rgba(0,4,9,.16) 48%,
    rgba(0,4,9,.34) 58%,
    rgba(0,4,9,.58) 70%,
    rgba(0,4,9,.80) 84%,
    rgba(0,4,9,.94) 100%) !important;
}
.invisible-screen:after{
  background:linear-gradient(90deg,
    rgba(0,3,8,0) 0%,
    rgba(0,3,8,.02) 30%,
    rgba(0,3,8,.07) 40%,
    rgba(0,3,8,.18) 49%,
    rgba(1,3,10,.38) 59%,
    rgba(1,4,11,.62) 72%,
    rgba(0,3,8,.84) 86%,
    rgba(0,3,8,.95) 100%) !important;
}
.visible-screen .stage-shade.deeper{
  background:linear-gradient(90deg,
    rgba(1,7,13,.96) 0%,
    rgba(1,7,13,.86) 22%,
    rgba(1,7,13,.66) 34%,
    rgba(1,7,13,.42) 45%,
    rgba(1,7,13,.22) 56%,
    rgba(1,7,13,.08) 69%,
    rgba(1,7,13,0) 84%) !important;
}
.reading-shade{
  background:linear-gradient(90deg,
    rgba(1,7,13,.02) 0%,
    rgba(1,7,13,.05) 28%,
    rgba(1,7,13,.14) 39%,
    rgba(1,7,13,.32) 50%,
    rgba(1,7,13,.58) 62%,
    rgba(1,7,13,.82) 76%,
    rgba(1,7,13,.95) 100%) !important;
}

/* ============================================================
   V1.4 · LENGUAJE VISUAL GLOBAL + DESCENSO REAL
   Regla madre: una sola escena full-screen por pantalla.
   No hay columnas de imagen, cortes verticales ni assets laterales.
   El HTML flota sobre el background mediante scrims suaves.
   ============================================================ */

/* Retiramos los recursos visuales antiguos que duplicaban la escena. */
.intro-screen .stage-bg,
.desire-screen .stage-bg,
.map-screen .stage-bg,
.visible-screen .visible-bg,
.trunk-screen .deep-ocean,
.invisible-screen .deep-ocean,
.invisible-screen .deeper-ocean,
.reading-screen .reading-bg,
.reading-screen .reading-shade,
.intro-screen .stage-shade,
.desire-screen .stage-shade,
.map-screen .stage-shade,
.visible-screen .stage-shade,
.helix-svg,
.invisible-helix,
.revelation-aura,
.heart-machine,
.map-protractor{
  display:none !important;
}

/* Cada pantalla funcional es una escena única. */
.intro-screen,
.desire-screen,
.map-screen{
  background-image:url('assets/portal-fullscreen-hq.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.visible-screen{
  background-image:url('assets/visible-fullscreen-hq.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.trunk-screen{
  background:#01070d !important;
  --helix-pos:16%;
}
.trunk-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('assets/trunk-scroll-hq.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center var(--helix-pos);
  filter:saturate(1.04) contrast(1.035) brightness(.76);
  transition:background-position 1.05s cubic-bezier(.2,.72,.2,1),filter .8s ease;
  will-change:background-position;
}
.invisible-screen{
  --invisible-pos:78%;
  background-image:url('assets/trunk-scroll-hq.jpg') !important;
  background-size:cover !important;
  background-position:center var(--invisible-pos) !important;
  background-repeat:no-repeat !important;
  transition:background-position 1.05s cubic-bezier(.2,.72,.2,1);
}
.revelation-screen{
  background-image:url('assets/revelation-fullscreen-hq.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.reading-screen{
  background-image:url('assets/invisible-fullscreen-hq.jpg') !important;
  background-size:cover !important;
  background-position:center 68% !important;
  background-repeat:no-repeat !important;
}

/* Scrims integrados: legibilidad sin convertir el layout en dos columnas. */
.intro-screen::after,
.desire-screen::after,
.visible-screen::after,
.trunk-screen::after,
.invisible-screen::after,
.revelation-screen::after,
.reading-screen::after,
.map-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.intro-screen::after{
  background:
    radial-gradient(ellipse at 50% 45%,rgba(0,7,13,.36) 0%,rgba(0,7,13,.50) 42%,rgba(0,7,13,.72) 100%),
    linear-gradient(180deg,rgba(0,5,10,.18),rgba(0,5,10,.55));
}
.desire-screen::after{
  background:
    radial-gradient(ellipse at 50% 32%,rgba(0,5,10,.12) 0%,rgba(0,5,10,.30) 44%,rgba(0,5,10,.72) 76%,rgba(0,5,10,.97) 100%),
    linear-gradient(180deg,rgba(0,4,8,.12) 0%,rgba(0,4,8,.22) 42%,rgba(0,4,8,.94) 84%,rgba(0,4,8,.99) 100%) !important;
}
.visible-screen::after{
  background:
    radial-gradient(ellipse at 31% 47%,rgba(0,7,13,.83) 0%,rgba(0,7,13,.70) 30%,rgba(0,7,13,.42) 54%,rgba(0,7,13,.24) 76%,rgba(0,7,13,.32) 100%),
    linear-gradient(180deg,rgba(0,5,10,.25),rgba(0,5,10,.54));
}
.trunk-screen::after{
  background:
    radial-gradient(ellipse at 66% 48%,rgba(0,6,12,.84) 0%,rgba(0,6,12,.68) 27%,rgba(0,6,12,.43) 48%,rgba(0,6,12,.24) 67%,rgba(0,6,12,.43) 100%),
    linear-gradient(180deg,rgba(0,4,9,.20),rgba(0,4,9,.50)) !important;
}
.invisible-screen::after{
  background:
    radial-gradient(ellipse at 50% 49%,rgba(2,4,15,.79) 0%,rgba(2,4,15,.64) 32%,rgba(0,5,11,.42) 59%,rgba(0,4,9,.55) 100%),
    linear-gradient(180deg,rgba(7,4,22,.22),rgba(0,4,9,.68)) !important;
}
.revelation-screen::after{
  background:
    radial-gradient(ellipse at 69% 48%,rgba(0,5,10,.88) 0%,rgba(0,5,10,.71) 31%,rgba(0,5,10,.41) 53%,rgba(0,5,10,.14) 75%,rgba(0,5,10,.22) 100%),
    linear-gradient(180deg,rgba(0,4,9,.18),rgba(0,4,9,.46)) !important;
}
.reading-screen::after{
  background:
    radial-gradient(ellipse at 57% 49%,rgba(0,6,12,.87) 0%,rgba(0,6,12,.72) 37%,rgba(0,6,12,.49) 60%,rgba(0,6,12,.43) 100%),
    linear-gradient(180deg,rgba(0,4,9,.20),rgba(0,4,9,.66));
}
.map-screen::after{
  background:
    radial-gradient(ellipse at 50% 32%,rgba(0,6,12,.28) 0%,rgba(0,6,12,.42) 46%,rgba(0,6,12,.78) 82%,rgba(0,6,12,.93) 100%),
    linear-gradient(180deg,rgba(0,4,9,.15),rgba(0,4,9,.72));
}

/* Todo contenido vive por encima de la escena. */
.intro-screen > :not(.stage-bg):not(.stage-shade),
.desire-screen > :not(.stage-bg):not(.stage-shade),
.visible-screen > :not(.visible-bg):not(.stage-shade),
.trunk-screen > :not(.deep-ocean):not(.helix-svg),
.invisible-screen > :not(.deep-ocean):not(.deeper-ocean):not(.invisible-helix),
.revelation-screen > :not(.revelation-aura):not(.heart-machine),
.reading-screen > :not(.reading-bg):not(.reading-shade),
.map-screen > :not(.stage-bg):not(.stage-shade):not(.map-protractor){
  position:relative;
  z-index:3;
}

/* Costos visibles: la cápsula maestra ya vive en el background. */
.visible-screen{align-items:center;justify-content:center}
.visible-screen .costs-shell{
  width:min(1040px,88vw) !important;
  max-width:1040px;
  margin:0 auto !important;
}
.visible-screen .capture-state{
  display:block;
  max-width:720px;
  min-height:0;
  margin-top:34px;
}
.visible-screen .capsule-stage{display:none !important}
.visible-screen .visible-question{max-width:720px}
.visible-screen .visible-state{min-height:0}
.visible-screen .last-capsule-wrap .capsule-object{display:none !important}
.visible-screen .last-capsule-wrap{justify-content:center}
.visible-screen .last-capsule-wrap p{text-align:center;max-width:760px}
.visible-screen .select-state{max-width:900px;margin:22px auto 0}

/* Troncal: una sola escena; título y diálogo flotan sobre la hélice. */
.trunk-screen{
  display:none;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  padding-top:100px;
}
.trunk-screen.active{display:flex}
.trunk-title{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:min(880px,80vw);
  max-width:none !important;
  margin:0 auto 38px !important;
  padding-left:4px;
  text-align:left;
}
.trunk-title h2{font-size:clamp(38px,4.6vw,62px)}
.trunk-title p{font-size:15px}
.trunk-dialogue{
  width:min(900px,82vw) !important;
  margin:0 auto !important;
  padding:28px 32px !important;
  background:rgba(1,12,22,.43) !important;
  border-color:rgba(124,228,249,.18) !important;
  border-radius:26px !important;
  backdrop-filter:blur(10px) saturate(1.05) !important;
  box-shadow:0 18px 70px rgba(0,0,0,.18),inset 0 0 28px rgba(84,220,246,.028) !important;
}
.trunk-question{font-size:clamp(24px,2.3vw,34px)}
.trace-dots{right:3vw;opacity:.66}

/* Invisible mantiene la misma hélice, ya en una profundidad mayor. */
.invisible-screen{align-items:center;justify-content:center}
.invisible-shell{
  width:min(980px,86vw) !important;
  max-width:980px !important;
  margin:0 auto !important;
}
.deep-node-main{
  background:rgba(3,8,21,.43) !important;
  backdrop-filter:blur(9px) !important;
  border-color:rgba(179,146,255,.22) !important;
}

/* Revelación: corazón real de fondo, no SVG/HTML. */
.revelation-screen{align-items:center;justify-content:center}
.revelation-shell{
  width:min(980px,87vw) !important;
  max-width:980px !important;
  margin:0 auto !important;
  transform:translateX(13vw);
}
.revelation-sequence{
  padding:8px 18px 2px;
  border-radius:26px;
  background:rgba(0,7,13,.16);
  backdrop-filter:blur(4px);
}
.equation.sentence{background:rgba(1,12,21,.34)}

/* Lectura también es una escena, no una columna. */
.reading-screen{align-items:center;justify-content:center}
.reading-shell{
  width:min(1120px,88vw) !important;
  max-width:1120px !important;
  margin:0 auto !important;
}
.reading-panel,.sentence-card,.reading-reflection{
  background:rgba(2,16,27,.46) !important;
  backdrop-filter:blur(9px);
}

/* Mapa: recupera visión global con el mismo lenguaje full-screen. */
.map-screen{align-items:center;justify-content:center}
.map-shell{width:min(1100px,88vw);margin:0 auto}

/* Navegación siempre flotante y translúcida; nunca separa la escena. */
.journey-nav{
  background:rgba(1,8,14,.68) !important;
  border-color:rgba(121,227,248,.18) !important;
  backdrop-filter:blur(18px) saturate(1.15) !important;
}

@media(max-width:920px){
  .trunk-title,.trunk-dialogue,.visible-screen .costs-shell,.invisible-shell,.revelation-shell,.reading-shell,.map-shell{
    width:100% !important;
    transform:none !important;
  }
  .intro-screen::after,.desire-screen::after,.visible-screen::after,.trunk-screen::after,.invisible-screen::after,.revelation-screen::after,.reading-screen::after,.map-screen::after{
    background:linear-gradient(180deg,rgba(0,5,10,.38) 0%,rgba(0,5,10,.64) 45%,rgba(0,5,10,.86) 100%) !important;
  }
  .trunk-screen::before{filter:saturate(1.02) brightness(.67)}
}

/* ============================================================
   V1.4.1 · LIMPIEZA VISUAL POR ETAPA
   Conserva el lenguaje full-screen de V1.4, pero recupera las
   máscaras específicas por pantalla para que ningún texto o
   recurso del background compita con la acción activa.
   La carátula queda intacta: allí sí pertenece el branding.
   ============================================================ */

/* INICIO · iceberg superior visible; se apaga por completo la
   tipografía y el botón horneados en la mitad inferior del portal. */
.intro-screen::after{
  background:
    linear-gradient(180deg,
      rgba(0,5,10,.18) 0%,
      rgba(0,5,10,.22) 30%,
      rgba(0,5,10,.42) 42%,
      rgba(0,5,10,.88) 52%,
      rgba(0,5,10,.985) 64%,
      rgba(0,5,10,.995) 100%),
    radial-gradient(ellipse at 50% 28%,
      rgba(0,8,15,.08) 0%,
      rgba(0,8,15,.20) 42%,
      rgba(0,8,15,.54) 72%,
      rgba(0,8,15,.78) 100%) !important;
}

/* DESEO BLOQUEADO · referencia visual aprobada: arriba vive el
   iceberg/coordenada; abajo queda latente y silencioso. */
.desire-screen::after{
  background:
    linear-gradient(180deg,
      rgba(0,4,8,.11) 0%,
      rgba(0,4,8,.15) 31%,
      rgba(0,4,8,.40) 43%,
      rgba(0,4,8,.91) 53%,
      rgba(0,4,8,.992) 66%,
      rgba(0,4,8,.998) 100%),
    radial-gradient(ellipse at 50% 27%,
      rgba(4,31,45,.08) 0%,
      rgba(1,10,18,.21) 42%,
      rgba(0,5,10,.70) 75%,
      rgba(0,5,10,.92) 100%) !important;
}

/* COSTOS VISIBLES · la cápsula sigue presente, pero la zona activa
   queda limpia. No hay elementos decorativos compitiendo con copy. */
.visible-screen::after{
  background:
    radial-gradient(ellipse at 43% 48%,
      rgba(0,7,13,.86) 0%,
      rgba(0,7,13,.76) 31%,
      rgba(0,7,13,.54) 50%,
      rgba(0,7,13,.27) 70%,
      rgba(0,7,13,.20) 100%),
    linear-gradient(180deg,
      rgba(0,5,10,.24) 0%,
      rgba(0,5,10,.35) 55%,
      rgba(0,5,10,.67) 100%) !important;
}

/* TRONCAL · la hélice permanece protagonista; las notas del fondo
   se subordinan al diálogo sin crear paneles o cortes de imagen. */
.trunk-screen::after{
  background:
    radial-gradient(ellipse at 50% 51%,
      rgba(0,6,12,.78) 0%,
      rgba(0,6,12,.66) 30%,
      rgba(0,6,12,.43) 50%,
      rgba(0,6,12,.21) 69%,
      rgba(0,6,12,.33) 100%),
    linear-gradient(180deg,
      rgba(0,4,9,.20) 0%,
      rgba(0,4,9,.33) 52%,
      rgba(0,4,9,.64) 100%) !important;
}

/* COSTOS INVISIBLES · misma continuidad del Troncal, más profunda,
   con un entorno más silencioso alrededor del nodo emergente. */
.invisible-screen::after{
  background:
    radial-gradient(ellipse at 50% 49%,
      rgba(2,4,15,.83) 0%,
      rgba(2,4,15,.70) 32%,
      rgba(0,5,11,.49) 57%,
      rgba(0,4,9,.62) 100%),
    linear-gradient(180deg,
      rgba(5,3,18,.26) 0%,
      rgba(0,4,9,.43) 58%,
      rgba(0,4,9,.74) 100%) !important;
}

/* REVELACIÓN · corazón intacto; el lado de lectura queda despejado. */
.revelation-screen::after{
  background:
    radial-gradient(ellipse at 70% 48%,
      rgba(0,5,10,.91) 0%,
      rgba(0,5,10,.78) 31%,
      rgba(0,5,10,.48) 52%,
      rgba(0,5,10,.13) 76%,
      rgba(0,5,10,.19) 100%),
    linear-gradient(180deg,
      rgba(0,4,9,.17) 0%,
      rgba(0,4,9,.30) 58%,
      rgba(0,4,9,.52) 100%) !important;
}

/* LECTURA · el background acompaña, pero la lectura del archivo es
   la única información que debe dominar. */
.reading-screen::after{
  background:
    radial-gradient(ellipse at 52% 49%,
      rgba(0,6,12,.90) 0%,
      rgba(0,6,12,.78) 35%,
      rgba(0,6,12,.57) 58%,
      rgba(0,5,10,.50) 100%),
    linear-gradient(180deg,
      rgba(0,4,9,.25) 0%,
      rgba(0,4,9,.42) 55%,
      rgba(0,4,9,.72) 100%) !important;
}

/* MI MAPA · vuelve el panorama global, pero el antiguo título/CTA
   de la carátula permanece completamente velado. */
.map-screen::after{
  background:
    linear-gradient(180deg,
      rgba(0,5,10,.18) 0%,
      rgba(0,5,10,.27) 31%,
      rgba(0,5,10,.56) 43%,
      rgba(0,5,10,.92) 54%,
      rgba(0,5,10,.992) 67%,
      rgba(0,5,10,.998) 100%),
    radial-gradient(ellipse at 50% 27%,
      rgba(0,6,12,.18) 0%,
      rgba(0,6,12,.34) 44%,
      rgba(0,6,12,.76) 78%,
      rgba(0,6,12,.94) 100%) !important;
}

/* Refuerzo específico: la escena del portal usada como fondo en las
   pantallas funcionales queda apenas más sobria, sin perder crisp. */
.intro-screen,
.desire-screen,
.map-screen{
  background-color:#020912 !important;
  background-blend-mode:normal !important;
}

@media(max-width:920px){
  .intro-screen::after,
  .desire-screen::after,
  .map-screen::after{
    background:linear-gradient(180deg,
      rgba(0,5,10,.28) 0%,
      rgba(0,5,10,.46) 34%,
      rgba(0,5,10,.88) 52%,
      rgba(0,5,10,.995) 100%) !important;
  }
  .visible-screen::after,
  .trunk-screen::after,
  .invisible-screen::after,
  .revelation-screen::after,
  .reading-screen::after{
    background:linear-gradient(180deg,
      rgba(0,5,10,.42) 0%,
      rgba(0,5,10,.66) 46%,
      rgba(0,5,10,.88) 100%) !important;
  }
}

/* ============================================================
   V1.4.2 · NUEVOS MASTERS · ESPACIO NEGATIVO NATIVO
   04/10/2026
   Regla visual: el background ya nace con zona oscura para la UI.
   Se retiran los grandes degradés/scrims de integración. La imagen
   conserva impacto y el HTML ocupa el vacío central de la escena.
   ============================================================ */

/* Familia maestra nueva */
.intro-screen,
.desire-screen,
.map-screen{
  background-image:url('assets/master-iceberg-web.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#020912 !important;
}
.visible-screen{
  background-image:url('assets/master-capsule-web.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#020912 !important;
}
.revelation-screen{
  background-image:url('assets/master-heart-web.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#020912 !important;
}
.reading-screen{
  background-image:url('assets/master-helix-web.webp') !important;
  background-size:148% auto !important;
  background-position:58% 86% !important;
  background-repeat:no-repeat !important;
  background-color:#020912 !important;
}

/* Troncal: misma imagen maestra, pero con paneo + zoom acumulativos.
   Así cada respuesta entra en un encuadre progresivamente más profundo
   sin introducir un segundo lenguaje visual. */
.trunk-screen{
  --helix-pos:12%;
  --helix-zoom:118%;
  background:#020912 !important;
}
.trunk-screen::before{
  background-image:url('assets/master-helix-web.webp') !important;
  background-repeat:no-repeat !important;
  background-size:var(--helix-zoom) auto !important;
  background-position:58% var(--helix-pos) !important;
  filter:none !important;
  transform:scale(1.012);
  transition:
    background-position 1.05s cubic-bezier(.2,.72,.2,1),
    background-size 1.05s cubic-bezier(.2,.72,.2,1) !important;
}
.invisible-screen{
  --invisible-pos:82%;
  --invisible-zoom:158%;
  background-image:url('assets/master-helix-web.webp') !important;
  background-size:var(--invisible-zoom) auto !important;
  background-position:58% var(--invisible-pos) !important;
  background-repeat:no-repeat !important;
  background-color:#020912 !important;
  transition:
    background-position 1.05s cubic-bezier(.2,.72,.2,1),
    background-size 1.05s cubic-bezier(.2,.72,.2,1) !important;
}

/* El nuevo arte ya contiene su propia zona de lectura. Eliminamos los
   overlays grandes que apagaban la imagen en V1.4.1. */
.intro-screen::after,
.desire-screen::after,
.visible-screen::after,
.trunk-screen::after,
.invisible-screen::after,
.revelation-screen::after,
.reading-screen::after,
.map-screen::after{
  background:transparent !important;
}

/* Reencuadre de UI dentro del vacío oscuro real de los nuevos masters. */
.intro-shell{
  width:min(790px,78vw) !important;
  max-width:790px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-shadow:0 2px 24px rgba(0,5,12,.62);
}
.desire-screen .narrow-shell{
  width:min(800px,76vw) !important;
  max-width:800px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-shadow:0 2px 22px rgba(0,5,12,.55);
}
.visible-screen .costs-shell{
  width:min(820px,72vw) !important;
  max-width:820px !important;
  margin:0 auto !important;
  transform:translateX(-4.2vw);
  text-shadow:0 2px 22px rgba(0,5,12,.62);
}
.trunk-title,
.trunk-dialogue{
  transform:translateX(-4.2vw);
}
.trunk-dialogue{
  background:rgba(1,12,22,.20) !important;
  border-color:rgba(124,228,249,.13) !important;
  backdrop-filter:blur(5px) saturate(1.03) !important;
  box-shadow:0 16px 60px rgba(0,0,0,.10),inset 0 0 24px rgba(84,220,246,.018) !important;
}
.invisible-shell{
  transform:translateX(-4.2vw);
  text-shadow:0 2px 22px rgba(0,5,12,.62);
}
.deep-node-main{
  background:rgba(3,8,21,.27) !important;
  backdrop-filter:blur(6px) !important;
  border-color:rgba(179,146,255,.18) !important;
}
.revelation-shell{
  transform:translateX(-4.2vw) !important;
  text-shadow:0 2px 24px rgba(0,5,12,.62);
}
.revelation-sequence{
  background:rgba(0,7,13,.075) !important;
  backdrop-filter:blur(3px) !important;
}
.equation.sentence{
  background:rgba(1,12,21,.25) !important;
  border-color:rgba(104,228,251,.16) !important;
}
.reading-shell{
  width:min(1080px,78vw) !important;
  max-width:1080px !important;
  margin:0 auto !important;
  transform:translateX(-3.6vw);
  text-shadow:0 2px 20px rgba(0,5,12,.55);
}
.reading-panel,
.sentence-card,
.reading-reflection,
.strategic-sides article{
  background:rgba(2,16,27,.42) !important;
  backdrop-filter:blur(7px) !important;
}
.map-shell{
  width:min(1040px,80vw) !important;
  max-width:1040px !important;
  text-shadow:0 2px 22px rgba(0,5,12,.58);
}

/* El transportador ahora está integrado en el master del iceberg,
   a la izquierda. La aguja se alinea con ese pivote visual. */
.desire-screen .coordinate-needle-wrap{
  left:16.8% !important;
  top:7.5% !important;
  height:25vh !important;
}
.desire-screen .coordinate-needle{
  height:22vh !important;
}
.desire-screen .coordinate-label{
  top:10% !important;
  left:16px !important;
}

/* Crisp local: la zona de interfaz no necesita oscurecer todo el master. */
.stage-heading h2,
.trunk-title h2,
.revelation-sequence blockquote,
.sentence-card strong{
  text-shadow:0 2px 22px rgba(0,4,10,.64);
}

/* En pantallas angostas el recorte del background cambia. Usamos una
   capa uniforme —no un degradé— solamente para asegurar legibilidad. */
@media(max-width:920px){
  .intro-screen::after,
  .desire-screen::after,
  .visible-screen::after,
  .trunk-screen::after,
  .invisible-screen::after,
  .revelation-screen::after,
  .reading-screen::after,
  .map-screen::after{
    background:rgba(0,5,11,.38) !important;
  }
  .visible-screen .costs-shell,
  .trunk-title,
  .trunk-dialogue,
  .invisible-shell,
  .revelation-shell,
  .reading-shell,
  .map-shell{
    transform:none !important;
  }
  .trunk-screen::before{
    background-size:cover !important;
    background-position:center center !important;
  }
  .invisible-screen{
    background-size:cover !important;
    background-position:center center !important;
  }
  .reading-screen{
    background-size:cover !important;
    background-position:center center !important;
  }
  .desire-screen .coordinate-needle-wrap{display:none !important}
}


/* ============================================================
   V1.4.3 · AJUSTES FINOS VISUALES · 04/10/2026
   - Deseo bloqueado vuelve al iceberg / transportador previo.
   - Costos visibles conserva cápsula nueva con overlay premium.
   - Troncal elimina el zoom acumulativo y desciende de verdad.
   ============================================================ */

/* Topbar: menos banda borrosa, más lectura premium. */
.topbar{
  backdrop-filter:blur(2px) saturate(1.03) !important;
  background:
    linear-gradient(180deg,rgba(1,7,13,.86) 0%,rgba(1,7,13,.28) 72%,rgba(1,7,13,0) 100%) !important;
}

/* 01 · DESEO BLOQUEADO
   Recupera el master con transportador e iceberg que Paula aprobó. */
.desire-screen,
.map-screen{
  background-image:url('assets/portal-clean-hq.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.desire-screen::after{
  background:
    linear-gradient(180deg,
      rgba(0,4,8,.07) 0%,
      rgba(0,4,8,.10) 28%,
      rgba(0,4,8,.24) 40%,
      rgba(0,4,8,.72) 54%,
      rgba(0,4,8,.93) 68%,
      rgba(0,4,8,.985) 100%),
    radial-gradient(ellipse at 50% 24%,
      rgba(4,31,45,.04) 0%,
      rgba(1,10,18,.12) 44%,
      rgba(0,5,10,.46) 75%,
      rgba(0,5,10,.78) 100%) !important;
}
.desire-screen .stage-bg,
.map-screen .stage-bg{display:none !important;}
.desire-screen .coordinate-needle-wrap{
  left:50% !important;
  top:6.8% !important;
  height:24.5vh !important;
  width:2px !important;
  opacity:.94 !important;
}
.desire-screen .coordinate-needle{
  height:22.4vh !important;
  width:2px !important;
  box-shadow:0 0 16px rgba(93,232,255,.30), 0 0 42px rgba(93,232,255,.12) !important;
}
.desire-screen .coordinate-label{
  top:12.2% !important;
  left:18px !important;
  color:rgba(220,248,255,.72) !important;
}
.desire-screen .narrow-shell{
  width:min(820px,78vw) !important;
  transform:translateY(1.2vh) !important;
}
.map-shell{transform:none !important;}

/* 02 · COSTOS VISIBLES
   La cápsula nueva se mantiene; mejoramos el blend para que no se note
   el corte ni la franja borrosa superior. */
.visible-screen{
  background-image:url('assets/master-capsule-web.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.visible-screen .visible-bg{display:none !important;}
.visible-screen::after{
  background:
    radial-gradient(ellipse at 43% 47%,
      rgba(0,7,13,.80) 0%,
      rgba(0,7,13,.67) 26%,
      rgba(0,7,13,.48) 46%,
      rgba(0,7,13,.23) 68%,
      rgba(0,7,13,.10) 100%),
    linear-gradient(180deg,
      rgba(0,6,11,.08) 0%,
      rgba(0,6,11,.14) 20%,
      rgba(0,6,11,.24) 42%,
      rgba(0,6,11,.38) 62%,
      rgba(0,6,11,.56) 100%) !important;
}
.visible-screen .stage-shade{display:none !important;}
.visible-screen .costs-shell{
  width:min(860px,73vw) !important;
  max-width:860px !important;
  transform:translateX(-3.6vw) !important;
}
.visible-screen .minimal-input textarea,
.visible-screen .primary-btn,
.visible-screen .secondary-btn{
  box-shadow:0 4px 22px rgba(0,0,0,.12) !important;
}

/* 03 · TRONCAL
   Se elimina el zoom acumulativo. Ahora hay un master alto y la cámara
   desciende por él, como bajar por una escalera. */
.trunk-screen{
  --helix-pos:8%;
  --helix-size:auto 180%;
  background:#020912 !important;
}
.trunk-screen::before{
  background-image:url('assets/master-helix-web.webp') !important;
  background-repeat:no-repeat !important;
  background-size:var(--helix-size) !important;
  background-position:74% var(--helix-pos) !important;
  transition:background-position 1.12s cubic-bezier(.18,.78,.2,1) !important;
  filter:saturate(1.02) brightness(.72) !important;
  transform:none !important;
}
.trunk-screen::after{
  background:
    radial-gradient(ellipse at 49% 50%,
      rgba(0,6,12,.76) 0%,
      rgba(0,6,12,.62) 28%,
      rgba(0,6,12,.39) 52%,
      rgba(0,6,12,.18) 74%,
      rgba(0,6,12,.22) 100%),
    linear-gradient(180deg,
      rgba(0,4,9,.14) 0%,
      rgba(0,4,9,.22) 42%,
      rgba(0,4,9,.44) 74%,
      rgba(0,4,9,.58) 100%) !important;
}
.trunk-title,
.trunk-dialogue{
  transform:translateX(-4vw) !important;
}
.trunk-dialogue{
  background:rgba(1,12,22,.28) !important;
  border-color:rgba(124,228,249,.15) !important;
  backdrop-filter:blur(6px) saturate(1.02) !important;
}

/* 04 · COSTOS INVISIBLES
   Continúa el mismo descenso: más abajo, no más cerca. */
.invisible-screen{
  --invisible-pos:88%;
  --invisible-size:auto 192%;
  background-image:url('assets/master-helix-web.webp') !important;
  background-size:var(--invisible-size) !important;
  background-position:74% var(--invisible-pos) !important;
  background-repeat:no-repeat !important;
}
.invisible-screen::after{
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(2,4,15,.80) 0%,
      rgba(2,4,15,.66) 30%,
      rgba(0,5,11,.46) 56%,
      rgba(0,4,9,.54) 100%),
    linear-gradient(180deg,
      rgba(5,3,18,.16) 0%,
      rgba(0,4,9,.28) 56%,
      rgba(0,4,9,.56) 100%) !important;
}
.invisible-screen .deep-ocean,
.invisible-screen .deeper-ocean,
.invisible-screen .invisible-helix{display:none !important;}

/* Responsivo */
@media(max-width:920px){
  .topbar{backdrop-filter:none !important;background:linear-gradient(180deg,rgba(1,7,13,.92),rgba(1,7,13,.28),rgba(1,7,13,0)) !important;}
  .visible-screen .costs-shell,
  .trunk-title,
  .trunk-dialogue,
  .invisible-shell{transform:none !important;}
  .desire-screen::after,
  .visible-screen::after,
  .trunk-screen::after,
  .invisible-screen::after{
    background-color:rgba(0,5,11,.34) !important;
  }
  .trunk-screen::before,
  .invisible-screen{
    background-size:cover !important;
    background-position:center center !important;
  }
}


/* ============================================================
   V1.4.4 · INICIO RESTAURADO + MOVIMIENTO DEL TRANSPORTADOR
   04/10/2026
   - La pantalla de Inicio vuelve al background anterior de presentación.
   - Se recupera una aguja sutil sobre el transportador para dar vida.
   ============================================================ */

/* INICIO · vuelve al sistema anterior de presentación, no al iceberg nuevo. */
.intro-screen{
  background-image:url('assets/portal-clean-hq.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#020912 !important;
  overflow:hidden;
}
.intro-screen .stage-bg,
.intro-screen .stage-shade{display:none !important;}

/* Aguja / movimiento del transportador */
.intro-screen::before{
  content:"";
  position:absolute;
  left:50%;
  top:7vh;
  width:2px;
  height:31vh;
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(-18deg);
  background:linear-gradient(180deg,rgba(119,239,255,0),rgba(119,239,255,.88));
  box-shadow:0 0 16px rgba(93,232,255,.28),0 0 44px rgba(93,232,255,.12);
  z-index:1;
  pointer-events:none;
  animation:introNeedleSweep 9.5s ease-in-out infinite;
}
.intro-screen::after{
  content:"";
  position:absolute;
  left:50%;
  top:7vh;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#b8f7ff;
  box-shadow:0 0 20px #5ce4ff,0 0 46px rgba(92,228,255,.24);
  z-index:1;
  pointer-events:none;
}
@keyframes introNeedleSweep{
  0%,100%{transform:translateX(-50%) rotate(-18deg)}
  50%{transform:translateX(-50%) rotate(12deg)}
}

/* Overlay de lectura del Inicio, más parecido al sistema anterior. */
.intro-shell{
  width:min(830px,78vw) !important;
  max-width:830px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-shadow:0 2px 22px rgba(0,5,12,.60);
}
.intro-shell::before{
  content:"";
  position:absolute;
  inset:-24px -40px;
  background:
    radial-gradient(ellipse at 50% 44%,rgba(0,8,15,.46) 0%,rgba(0,8,15,.34) 38%,rgba(0,8,15,.14) 68%,rgba(0,8,15,0) 100%),
    linear-gradient(180deg,rgba(0,5,10,.12) 0%,rgba(0,5,10,.20) 42%,rgba(0,5,10,.42) 80%,rgba(0,5,10,.58) 100%);
  border-radius:34px;
  filter:blur(2px);
  z-index:-1;
  pointer-events:none;
}
.intro-primary,.intro-identity,.intro-soft{position:relative;z-index:2}
.intro-links,.intro-shell .primary-btn{position:relative;z-index:2}

/* Móvil */
@media(max-width:920px){
  .intro-screen::before{display:none}
  .intro-screen::after{display:none}
  .intro-shell::before{inset:-18px -14px;background:rgba(0,7,13,.40)}
}


/* ============================================================
   V1.4.5 · INTRO CON DEGRADÉ INFERIOR NATURAL
   04/10/2026
   Oscurece con suavidad la zona inferior de la imagen base en Inicio,
   para que no compita el texto horneado del master anterior.
   ============================================================ */

.intro-bottom-fade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 54%,
      rgba(0,7,13,.06) 0%,
      rgba(0,7,13,.11) 22%,
      rgba(0,7,13,.22) 40%,
      rgba(0,7,13,.42) 58%,
      rgba(0,7,13,.63) 76%,
      rgba(0,7,13,.78) 100%),
    linear-gradient(180deg,
      rgba(0,5,10,0) 0%,
      rgba(0,5,10,.02) 18%,
      rgba(0,5,10,.06) 34%,
      rgba(0,5,10,.18) 48%,
      rgba(0,5,10,.40) 62%,
      rgba(0,5,10,.70) 76%,
      rgba(0,5,10,.90) 100%);
}

/* Una segunda caída más concentrada justo debajo del iceberg, para tapar
   título base, subtítulo y CTA del master sin matar la escena completa. */
.intro-bottom-fade::after{
  content:"";
  position:absolute;
  left:11%;
  right:11%;
  bottom:-1%;
  height:43%;
  border-radius:40px 40px 0 0;
  background:
    radial-gradient(ellipse at 50% 14%,
      rgba(1,8,15,.08) 0%,
      rgba(1,8,15,.24) 32%,
      rgba(1,8,15,.56) 62%,
      rgba(1,8,15,.88) 100%),
    linear-gradient(180deg,
      rgba(0,6,11,0) 0%,
      rgba(0,6,11,.16) 18%,
      rgba(0,6,11,.48) 52%,
      rgba(0,6,11,.86) 100%);
  filter:blur(2px);
}

/* Mantenemos legibilidad del copy actual por encima de la nueva caída. */
.intro-screen .intro-shell{z-index:3 !important;}
.intro-screen .intro-shell::before{
  inset:-26px -42px -12px -42px !important;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(0,8,15,.50) 0%,rgba(0,8,15,.38) 34%,rgba(0,8,15,.18) 68%,rgba(0,8,15,0) 100%),
    linear-gradient(180deg,rgba(0,5,10,.10) 0%,rgba(0,5,10,.18) 36%,rgba(0,5,10,.30) 64%,rgba(0,5,10,.46) 100%) !important;
}

@media(max-width:920px){
  .intro-bottom-fade::after{
    left:4%;
    right:4%;
    height:52%;
  }
}


/* ============================================================
   V1.4.6 · DESEO BLOQUEADO / SILENCIO DEL TEXTO BASE
   04/10/2026
   Suprime mejor el título horneado del master bajo el iceberg para que
   no compita con el HTML de Deseo bloqueado.
   ============================================================ */

.desire-screen{
  overflow:hidden;
}

/* Base global del screen: más silenciosa de mitad hacia abajo. */
.desire-screen::after{
  background:
    radial-gradient(ellipse at 50% 30%,
      rgba(4,31,45,.03) 0%,
      rgba(1,10,18,.10) 36%,
      rgba(0,5,10,.28) 56%,
      rgba(0,5,10,.58) 76%,
      rgba(0,5,10,.86) 100%),
    linear-gradient(180deg,
      rgba(0,4,8,.05) 0%,
      rgba(0,4,8,.08) 24%,
      rgba(0,4,8,.16) 38%,
      rgba(0,4,8,.34) 50%,
      rgba(0,4,8,.58) 62%,
      rgba(0,4,8,.80) 74%,
      rgba(0,4,8,.94) 100%) !important;
}

/* Caída localizada justo debajo del iceberg, pensada para apagar
   “COSTOS OCULTOS / TRONCAL...” y el CTA horneado del arte anterior. */
.desire-screen::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-2%;
  height:48%;
  z-index:1;
  pointer-events:none;
  border-radius:46px 46px 0 0;
  background:
    radial-gradient(ellipse at 50% 8%,
      rgba(0,8,15,.05) 0%,
      rgba(0,8,15,.18) 18%,
      rgba(0,8,15,.44) 44%,
      rgba(0,8,15,.74) 72%,
      rgba(0,8,15,.94) 100%),
    linear-gradient(180deg,
      rgba(0,6,11,0) 0%,
      rgba(0,6,11,.12) 16%,
      rgba(0,6,11,.34) 38%,
      rgba(0,6,11,.64) 64%,
      rgba(0,6,11,.90) 100%);
  filter:blur(2px);
}

/* La lectura propia del HTML permanece encima y limpia. */
.desire-screen .focus-shell{
  z-index:3 !important;
  text-shadow:0 2px 20px rgba(0,5,12,.56);
}
.desire-screen .single-action,
.desire-screen .confirmation{
  position:relative;
  z-index:3;
}

@media(max-width:920px){
  .desire-screen::before{
    left:3%;
    right:3%;
    height:56%;
  }
}


/* ============================================================
   V1.4.7 · OSCURECIMIENTO PROFUNDO Y EVIDENTE
   04/10/2026
   Ajuste correctivo fuerte: la mitad inferior debe caer de verdad a la sombra
   para silenciar el texto horneado del arte base en Inicio y Deseo bloqueado.
   ============================================================ */

/* INICIO · caída mucho más profunda debajo del iceberg */
.intro-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(0,5,10,0) 0%,
      rgba(0,5,10,.03) 18%,
      rgba(0,5,10,.10) 30%,
      rgba(0,5,10,.26) 42%,
      rgba(0,5,10,.52) 54%,
      rgba(0,5,10,.78) 66%,
      rgba(0,5,10,.92) 78%,
      rgba(0,5,10,.985) 100%),
    radial-gradient(ellipse at 50% 56%,
      rgba(0,7,13,.00) 0%,
      rgba(0,7,13,.12) 26%,
      rgba(0,7,13,.34) 46%,
      rgba(0,7,13,.66) 66%,
      rgba(0,7,13,.92) 100%) !important;
}
.intro-bottom-fade::after{
  left:8% !important;
  right:8% !important;
  bottom:-3% !important;
  height:54% !important;
  border-radius:48px 48px 0 0 !important;
  background:
    linear-gradient(180deg,
      rgba(0,6,11,0) 0%,
      rgba(0,6,11,.16) 16%,
      rgba(0,6,11,.46) 36%,
      rgba(0,6,11,.76) 60%,
      rgba(0,6,11,.94) 82%,
      rgba(0,6,11,.995) 100%),
    radial-gradient(ellipse at 50% 10%,
      rgba(1,8,15,.04) 0%,
      rgba(1,8,15,.16) 22%,
      rgba(1,8,15,.44) 46%,
      rgba(1,8,15,.78) 72%,
      rgba(1,8,15,.97) 100%) !important;
  filter:blur(3px) !important;
}

/* DESEO BLOQUEADO · apagado mucho más profundo del texto base. */
.desire-screen::after{
  background:
    linear-gradient(180deg,
      rgba(0,4,8,0) 0%,
      rgba(0,4,8,.04) 18%,
      rgba(0,4,8,.12) 30%,
      rgba(0,4,8,.28) 40%,
      rgba(0,4,8,.54) 52%,
      rgba(0,4,8,.78) 64%,
      rgba(0,4,8,.92) 76%,
      rgba(0,4,8,.985) 100%),
    radial-gradient(ellipse at 50% 36%,
      rgba(4,31,45,.00) 0%,
      rgba(1,10,18,.08) 24%,
      rgba(0,5,10,.28) 48%,
      rgba(0,5,10,.62) 70%,
      rgba(0,5,10,.92) 100%) !important;
}
.desire-screen::before{
  left:7% !important;
  right:7% !important;
  bottom:-4% !important;
  height:58% !important;
  border-radius:56px 56px 0 0 !important;
  background:
    linear-gradient(180deg,
      rgba(0,6,11,0) 0%,
      rgba(0,6,11,.14) 14%,
      rgba(0,6,11,.40) 30%,
      rgba(0,6,11,.68) 50%,
      rgba(0,6,11,.88) 70%,
      rgba(0,6,11,.97) 86%,
      rgba(0,6,11,.995) 100%),
    radial-gradient(ellipse at 50% 10%,
      rgba(0,8,15,.00) 0%,
      rgba(0,8,15,.12) 18%,
      rgba(0,8,15,.36) 40%,
      rgba(0,8,15,.72) 68%,
      rgba(0,8,15,.97) 100%) !important;
  filter:blur(3px) !important;
}

/* Asegurar que el HTML quede netamente por delante del nuevo oscurecimiento. */
.intro-screen .focus-shell,
.desire-screen .focus-shell{
  position:relative;
  z-index:4 !important;
}
.intro-screen .journey-nav,
.desire-screen .journey-nav{z-index:5}

@media(max-width:920px){
  .intro-bottom-fade::after,
  .desire-screen::before{
    left:2% !important;
    right:2% !important;
    height:64% !important;
  }
}


/* V1.4.8B · AUTHORITATIVE BAKED LOWER FADE */
.intro-screen,.desire-screen{
  background-image:url('assets/portal-lowerfade-v148b.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.intro-screen .stage-bg,.intro-screen .stage-shade,
.desire-screen .stage-bg,.desire-screen .stage-shade{display:none !important;}
.intro-bottom-fade{display:none !important;}
.desire-screen::before{display:none !important;}
.desire-screen::after{background:transparent !important;}


/* ============================================================
   V1.4.9 · MI MAPA AJUSTADO
   04/10/2026
   - Fondo propio para Mi mapa con degradé horneado en centro e inferior.
   - Más separación entre las cards, el bloque de Reconfiguración y el fondo.
   ============================================================ */

.map-screen{
  background-image:url('assets/portal-clean-mapfade-v149.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.map-screen .stage-bg,
.map-screen .stage-shade{display:none !important;}
.map-screen::after{background:none !important;}
.map-protractor{opacity:.23 !important;}
.map-shell{position:relative;z-index:4 !important;width:min(1110px,89vw) !important;}
.map-coordinate{
  background:rgba(1,12,21,.80) !important;
  border-color:rgba(118,226,247,.28) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.18) !important;
}
.map-summary{gap:14px !important;}
.map-summary article{
  background:rgba(2,15,25,.82) !important;
  border-color:rgba(121,227,248,.20) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(8px) saturate(1.02) !important;
}
.map-summary .map-invisible{
  border-color:rgba(178,139,255,.34) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.18), 0 0 28px rgba(141,93,224,.07) !important;
}
.trace-details.map-trace{
  background:rgba(2,15,25,.42) !important;
  border-radius:16px !important;
  padding:16px 18px !important;
}
.part-two-lock{
  max-width:840px !important;
  background:linear-gradient(90deg,rgba(39,25,64,.58),rgba(2,15,25,.88)) !important;
  border-color:rgba(170,134,255,.32) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(8px) saturate(1.02) !important;
}
.map-actions .primary-btn,
.map-actions .secondary-btn{
  box-shadow:0 10px 30px rgba(0,0,0,.15) !important;
}
@media(max-width:920px){
  .map-screen{background-position:center top !important;}
  .map-protractor{opacity:.15 !important;}
  .trace-details.map-trace{padding:12px 14px !important;}
}


/* ============================================================
   V1.5.2 · LEYENDA DE DESEO BLOQUEADO MÁS LEGIBLE
   05/10/2026
   Refuerza la lectura del título y subtítulo en Deseo bloqueado con
   una sombra/fondo local suave, sin ensuciar el resto de la escena.
   ============================================================ */

.desire-screen .stage-heading{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:19px;
  padding:14px 18px 16px 18px;
  margin:0 0 24px 0;
  border-radius:22px;
  max-width:860px;
}
.desire-screen .stage-heading::before{
  content:"";
  position:absolute;
  inset:-8px -12px -10px -12px;
  border-radius:28px;
  background:
    radial-gradient(ellipse at 36% 42%, rgba(0,10,18,.60) 0%, rgba(0,10,18,.48) 34%, rgba(0,10,18,.22) 68%, rgba(0,10,18,0) 100%),
    linear-gradient(90deg, rgba(0,8,14,.38) 0%, rgba(0,8,14,.20) 46%, rgba(0,8,14,0) 100%);
  filter:blur(6px);
  z-index:-1;
  pointer-events:none;
}
.desire-screen .stage-index{
  color:#80eaff !important;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.desire-screen .stage-heading h2{
  text-shadow:0 2px 24px rgba(0,4,10,.72), 0 0 3px rgba(0,4,10,.42);
}
.desire-screen .stage-heading p{
  color:rgba(233,245,252,.90) !important;
  text-shadow:0 2px 18px rgba(0,4,10,.60);
  max-width:720px;
}

@media(max-width:920px){
  .desire-screen .stage-heading{
    padding:10px 10px 12px 10px;
    margin-bottom:18px;
  }
  .desire-screen .stage-heading::before{
    inset:-6px -6px -8px -6px;
    border-radius:20px;
    background:rgba(0,8,14,.34);
    filter:blur(2px);
  }
}


/* ============================================================
   V1.5.3 · ESTADO DE INTEGRACIÓN IA
   Hace visible que el sistema está trabajando mientras construye Revelación.
   ============================================================ */
.revelation-thinking{
  width:min(540px,92%);
  margin:22px auto 0;
  padding:18px 22px;
  border:1px solid rgba(121,232,255,.20);
  border-radius:22px;
  background:rgba(2,13,24,.58);
  backdrop-filter:blur(8px) saturate(1.05);
  box-shadow:0 14px 38px rgba(0,0,0,.16), inset 0 0 28px rgba(93,226,251,.035);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
}
.revelation-thinking strong{
  font-size:10px;
  letter-spacing:.24em;
  font-weight:560;
  color:#dffcff;
}
.revelation-thinking span{
  font-size:12px;
  line-height:1.45;
  color:rgba(224,246,252,.66);
}
.thinking-pulse{display:flex;align-items:center;justify-content:center;gap:8px;height:22px;margin-bottom:2px}
.thinking-pulse i{
  width:7px;height:7px;border-radius:50%;display:block;
  background:#74ecff;
  box-shadow:0 0 14px rgba(94,231,255,.55);
  animation:thinkingPulse 1.15s ease-in-out infinite;
}
.thinking-pulse i:nth-child(2){animation-delay:.16s}
.thinking-pulse i:nth-child(3){animation-delay:.32s}
@keyframes thinkingPulse{
  0%,100%{opacity:.28;transform:scale(.72)}
  50%{opacity:1;transform:scale(1.22)}
}
.invisible-confirm.is-integrating h3{opacity:.62;transition:opacity .25s ease}
.invisible-confirm.is-integrating #invisibleConfirmActions{opacity:.34;pointer-events:none;transition:opacity .25s ease}


/* ============================================================
   V1.5.4 · ACLARACIÓN IA + ERROR PERSISTENTE
   05/10/2026
   Si la API necesita precisión, ya no parece un cuelgue: abre una pregunta
   concreta. Los errores también permanecen visibles hasta que el alumno actúa.
   ============================================================ */
.revelation-clarification,
.revelation-api-error{
  width:min(620px,94%);
  margin:22px auto 0;
  padding:22px 24px;
  border-radius:22px;
  background:rgba(2,13,24,.78);
  backdrop-filter:blur(10px) saturate(1.04);
  box-shadow:0 16px 42px rgba(0,0,0,.20), inset 0 0 28px rgba(93,226,251,.025);
  text-align:left;
}
.revelation-clarification{border:1px solid rgba(169,139,255,.28);}
.revelation-api-error{border:1px solid rgba(255,179,122,.25);}
.revelation-clarification .micro-label,
.revelation-api-error .micro-label{display:block;text-align:center;margin-bottom:10px;}
.revelation-clarification h4{
  margin:0 auto 10px;
  max-width:560px;
  font-size:20px;
  line-height:1.42;
  font-weight:360;
  text-align:center;
}
.revelation-clarification>p,
.revelation-api-error>p{
  margin:0 auto 16px;
  max-width:560px;
  font-size:12px;
  line-height:1.55;
  color:rgba(224,246,252,.68);
  text-align:center;
}
.revelation-clarification .minimal-input{margin-top:12px;}
.revelation-api-error #revelationErrorText{color:rgba(244,249,252,.82);}
@media(max-width:560px){
  .revelation-clarification,.revelation-api-error{padding:18px 16px;}
  .revelation-clarification h4{font-size:18px;}
}


/* ============================================================
   V1.5.7 · LECTURA ESTRUCTURAL
   La sentencia se conserva idéntica a Revelación y se despliega como
   relación visual: deseo realizado → consecuencia → protección.
   ============================================================ */
.reading-relation{
  display:grid;
  grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
  align-items:center;
  gap:14px;
  margin:14px 0 10px;
}
.reading-relation-node{
  min-height:104px;
  padding:18px 22px;
  border:1px solid rgba(121,227,248,.17);
  border-radius:20px;
  background:rgba(2,15,25,.66);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.reading-relation-node span,
.reading-protective span{
  font-size:8px;
  letter-spacing:.22em;
  color:var(--cyan);
  margin-bottom:10px;
}
.reading-relation-node strong{
  font-size:18px;
  line-height:1.42;
  font-weight:390;
}
.reading-relation-arrow{
  font-size:34px;
  font-weight:200;
  text-align:center;
  color:rgba(139,239,255,.86);
  text-shadow:0 0 22px rgba(82,224,248,.22);
}
.reading-protective{
  width:min(720px,88%);
  margin:10px auto 12px;
  padding:13px 20px;
  border:1px solid rgba(177,141,255,.22);
  border-radius:16px;
  background:rgba(25,16,46,.48);
  text-align:center;
}
.reading-protective span{display:inline-block;margin:0 10px 0 0;color:#cbb7ff}
.reading-protective strong{font-size:14px;font-weight:420}
.reading-paradox{
  margin:10px auto 16px;
  text-align:center;
  max-width:780px;
  font-size:13px;
  color:rgba(237,249,253,.82);
  font-style:italic;
}
.reading-hypothesis p{
  font-size:14px !important;
  line-height:1.58 !important;
}
@media(max-width:820px){
  .reading-relation{grid-template-columns:1fr;gap:8px}
  .reading-relation-arrow{transform:rotate(90deg);font-size:26px}
  .reading-protective{width:100%}
}


/* ============================================================
   V1.5.8 · REVELACIÓN · CTA SIEMPRE VISIBLE
   06/10/2026
   La sentencia puede crecer en altura. El alumno nunca debe perder el
   siguiente paso: Lectura del Archivo queda fijo por encima de la barra
   de navegación, y la escena puede desplazarse sin tapar contenido.
   ============================================================ */

.revelation-screen{
  overflow-y:auto !important;
  overscroll-behavior-y:contain;
  padding-bottom:205px !important;
  scroll-padding-bottom:205px;
}

.revelation-screen .revelation-shell{
  padding-bottom:118px !important;
}

/* La pista dentro del flujo se mantiene como señal semántica, pero el
   dock fijo es el que garantiza que siempre se vea el siguiente paso. */
.revelation-next-hint{
  margin:24px auto 8px;
  color:rgba(132,235,255,.84);
  font-size:8px;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.revelation-actions{
  position:fixed !important;
  left:50% !important;
  bottom:82px !important;
  transform:translateX(-50%) !important;
  z-index:70 !important;
  width:max-content;
  max-width:calc(100vw - 34px);
  margin:0 !important;
  padding:10px 12px !important;
  gap:10px !important;
  border:1px solid rgba(120,229,250,.22);
  border-radius:18px;
  background:rgba(1,10,18,.88);
  backdrop-filter:blur(18px) saturate(1.10);
  box-shadow:0 16px 46px rgba(0,0,0,.32), inset 0 0 24px rgba(82,220,247,.03);
}

.revelation-actions::before{
  content:"SIGUIENTE · LECTURA DEL ARCHIVO";
  position:absolute;
  left:50%;
  top:-22px;
  transform:translateX(-50%);
  white-space:nowrap;
  color:rgba(137,237,255,.88);
  font-size:8px;
  letter-spacing:.23em;
  text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

.revelation-actions .primary-btn{
  min-width:230px;
  border-color:rgba(125,235,255,.52) !important;
  background:linear-gradient(180deg,rgba(35,188,218,.42),rgba(4,31,48,.94)) !important;
  box-shadow:0 0 30px rgba(53,218,247,.16), inset 0 0 20px rgba(97,235,255,.08) !important;
}

.revelation-actions .secondary-btn{
  min-width:170px;
  background:rgba(2,14,24,.88) !important;
}

/* El final de la secuencia queda respirado aunque la sentencia sea larga. */
.revelation-sequence{
  margin-bottom:8px;
}

@media(max-width:920px){
  .revelation-screen{
    padding-bottom:190px !important;
    scroll-padding-bottom:190px;
  }
  .revelation-actions{
    bottom:74px !important;
    width:calc(100vw - 24px);
    justify-content:center;
  }
  .revelation-actions .primary-btn{min-width:0;flex:1;}
  .revelation-actions .secondary-btn{min-width:0;}
}

@media(max-width:560px){
  .revelation-screen{
    padding-bottom:176px !important;
    scroll-padding-bottom:176px;
  }
  .revelation-actions{
    bottom:70px !important;
    width:calc(100vw - 18px);
    padding:8px !important;
  }
  .revelation-actions::before{
    top:-19px;
    font-size:7px;
    letter-spacing:.17em;
  }
  .revelation-actions .primary-btn{
    width:100% !important;
    min-height:46px;
  }
  /* En móvil priorizamos inequívocamente el avance. Volver al Troncal
     sigue disponible desde el recorrido superior / historial de práctica. */
  .revelation-actions .secondary-btn{display:none !important;}
  .revelation-next-hint{margin-bottom:4px;}
}


/* ============================================================
   V1.6.0 · CÁPSULA PNG EN COSTOS VISIBLES
   06/10/2026
   La cápsula seleccionable deja de sentirse HTML y usa un asset PNG
   recortado para integrarse visualmente con el fondo maestro.
   ============================================================ */
.visible-screen .capsule-gallery{
  gap:24px !important;
  margin:30px 0 16px !important;
}
.visible-screen .belief-capsule{
  width:220px !important;
  height:266px !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate;
}
.visible-screen .belief-capsule::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('assets/capsula-ui.png') center center / contain no-repeat;
  z-index:0;
}
.visible-screen .belief-capsule::after{
  content:"";
  position:absolute;
  inset:20px 18px 16px 18px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 45%, rgba(96,233,255,.10), rgba(0,0,0,0) 68%);
  filter:blur(4px);
  z-index:-1;
  opacity:.9;
}
.visible-screen .belief-capsule:hover,
.visible-screen .belief-capsule.selected{
  transform:translateY(-8px) scale(1.015) !important;
  box-shadow:none !important;
}
.visible-screen .belief-capsule.selected::after{
  opacity:1;
  filter:blur(2px);
  background:radial-gradient(circle at 50% 45%, rgba(96,233,255,.18), rgba(0,0,0,0) 72%);
}
.visible-screen .belief-capsule i,
.visible-screen .belief-capsule span{
  position:absolute;
  left:50%;
  z-index:1;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.visible-screen .belief-capsule i{
  top:51%;
  transform:translate(-50%,-150%);
  margin:0 !important;
  font-size:17px !important;
  letter-spacing:.16em !important;
  color:#83efff !important;
  font-style:normal;
  font-weight:400;
}
.visible-screen .belief-capsule span{
  top:55%;
  transform:translateX(-50%);
  width:58%;
  font-size:14px !important;
  line-height:1.25 !important;
  color:#f5fdff !important;
  font-weight:420;
}
.visible-screen .last-capsule-wrap .filled-capsule{
  width:118px !important;
  height:178px !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.visible-screen .last-capsule-wrap .filled-capsule::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('assets/capsula-ui.png') center center / contain no-repeat;
}
.visible-screen .last-capsule-wrap .filled-capsule span{
  position:absolute;
  left:50%;
  top:51%;
  transform:translate(-50%,-150%);
  z-index:1;
  font-size:14px !important;
  letter-spacing:.15em;
  color:#83efff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.visible-screen .last-capsule-wrap .filled-capsule:before,
.visible-screen .belief-capsule:before{pointer-events:none;}
@media(max-width:900px){
  .visible-screen .belief-capsule{width:150px !important;height:228px !important;}
  .visible-screen .belief-capsule i{font-size:15px !important;}
  .visible-screen .belief-capsule span{font-size:12px !important;width:60%;}
}
@media(max-width:560px){
  .visible-screen .belief-capsule{width:132px !important;height:200px !important;}
  .visible-screen .belief-capsule i{font-size:13px !important;}
  .visible-screen .belief-capsule span{font-size:11px !important;width:61%;}
}


/* V1.6.1 · cápsula PNG robusta con <img> en DOM */
.visible-screen .belief-capsule{position:relative !important;}
.visible-screen .belief-capsule .capsule-shell{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:0;
  pointer-events:none;
  display:block;
  filter:drop-shadow(0 0 20px rgba(96,233,255,.10));
}
.visible-screen .belief-capsule::before{background:none !important;}
.visible-screen .belief-capsule i,
.visible-screen .belief-capsule span{z-index:2 !important;}


/* V1.6.2 · cápsulas visibles ampliadas y legibles */
.visible-screen .belief-capsule{
  width:220px !important;
  height:340px !important;
}
.visible-screen .belief-capsule i{
  top:49% !important;
  transform:translate(-50%,-165%) !important;
  font-size:21px !important;
}
.visible-screen .belief-capsule span{
  top:54% !important;
  width:64% !important;
  font-size:18px !important;
  line-height:1.18 !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
  text-wrap:balance;
}
.visible-screen .belief-capsule.dense span{
  font-size:16px !important;
}
.visible-screen .belief-capsule.ultra-dense span{
  font-size:14px !important;
  line-height:1.14 !important;
}
@media(max-width:900px){
  .visible-screen .belief-capsule{width:190px !important;height:292px !important;}
  .visible-screen .belief-capsule i{font-size:18px !important;}
  .visible-screen .belief-capsule span{font-size:16px !important;width:62% !important;}
  .visible-screen .belief-capsule.dense span{font-size:14px !important;}
  .visible-screen .belief-capsule.ultra-dense span{font-size:12.5px !important;}
}
@media(max-width:560px){
  .visible-screen .belief-capsule{width:164px !important;height:252px !important;}
  .visible-screen .belief-capsule i{font-size:16px !important;}
  .visible-screen .belief-capsule span{font-size:14px !important;width:60% !important;}
  .visible-screen .belief-capsule.dense span{font-size:12.5px !important;}
  .visible-screen .belief-capsule.ultra-dense span{font-size:11px !important;}
}


/* ============================================================
   V1.6.3 · CÁPSULA HÍBRIDA: IA + MULTILÍNEA + ESCALA
   06/10/2026
   - La IA devuelve una etiqueta visual de 2–4 palabras.
   - La cápsula crece para admitir 2–4 líneas sin romper la estética.
   - Si la API tarda/falla, queda un resumen local provisional.
   ============================================================ */
.visible-screen .capsule-gallery{
  gap:30px !important;
  margin:34px 0 18px !important;
}
.visible-screen .belief-capsule{
  width:260px !important;
  height:400px !important;
}
.visible-screen .belief-capsule .capsule-shell{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 26px rgba(96,233,255,.14)) !important;
}
.visible-screen .belief-capsule i{
  top:49% !important;
  transform:translate(-50%,-185%) !important;
  font-size:23px !important;
  letter-spacing:.18em !important;
}
.visible-screen .belief-capsule span{
  top:53% !important;
  width:58% !important;
  font-size:21px !important;
  line-height:1.08 !important;
  font-weight:500 !important;
  text-wrap:balance;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}
.visible-screen .belief-capsule.dense span{
  width:60% !important;
  font-size:18px !important;
  line-height:1.08 !important;
}
.visible-screen .belief-capsule.ultra-dense span{
  width:62% !important;
  font-size:16px !important;
  line-height:1.05 !important;
}
@media(max-width:900px){
  .visible-screen .belief-capsule{width:225px !important;height:346px !important;}
  .visible-screen .belief-capsule i{font-size:20px !important;}
  .visible-screen .belief-capsule span{font-size:18px !important;width:60% !important;}
  .visible-screen .belief-capsule.dense span{font-size:16px !important;}
  .visible-screen .belief-capsule.ultra-dense span{font-size:14px !important;}
}
@media(max-width:560px){
  .visible-screen .belief-capsule{width:192px !important;height:296px !important;}
  .visible-screen .belief-capsule i{font-size:17px !important;}
  .visible-screen .belief-capsule span{font-size:15px !important;width:61% !important;}
  .visible-screen .belief-capsule.dense span{font-size:13.5px !important;}
  .visible-screen .belief-capsule.ultra-dense span{font-size:12px !important;}
}


/* ============================================================
   V1.6.5 · CÁPSULA MULTILÍNEA REAL + IA EFECTIVA
   06/10/2026
   - Corrige el bug que impedía llamar a la IA después del resumen provisional.
   - La etiqueta se distribuye realmente en 2–3 líneas dentro de la cápsula.
   - La cápsula gana un poco más de volumen y baja la tipografía.
   ============================================================ */
.visible-screen .belief-capsule{
  width:282px !important;
  height:432px !important;
}
.visible-screen .belief-capsule i{
  top:48.5% !important;
  transform:translate(-50%,-205%) !important;
  font-size:21px !important;
}
.visible-screen .belief-capsule span{
  top:52% !important;
  width:64% !important;
  max-width:180px !important;
  font-size:19px !important;
  line-height:1.12 !important;
  font-weight:480 !important;
  display:block !important;
  white-space:normal !important;
  overflow:visible !important;
  text-align:center !important;
  text-wrap:balance;
}
.visible-screen .belief-capsule span br{display:block;}
.visible-screen .belief-capsule.dense span{
  font-size:17px !important;
  line-height:1.10 !important;
}
.visible-screen .belief-capsule.ultra-dense span{
  font-size:15.5px !important;
  line-height:1.08 !important;
}
@media(max-width:900px){
  .visible-screen .belief-capsule{width:244px !important;height:374px !important;}
  .visible-screen .belief-capsule i{font-size:18px !important;}
  .visible-screen .belief-capsule span{max-width:154px !important;font-size:16.5px !important;}
  .visible-screen .belief-capsule.dense span{font-size:15px !important;}
  .visible-screen .belief-capsule.ultra-dense span{font-size:13.5px !important;}
}
@media(max-width:560px){
  .visible-screen .belief-capsule{width:210px !important;height:322px !important;}
  .visible-screen .belief-capsule i{font-size:16px !important;}
  .visible-screen .belief-capsule span{max-width:132px !important;font-size:14.5px !important;}
  .visible-screen .belief-capsule.dense span{font-size:13px !important;}
  .visible-screen .belief-capsule.ultra-dense span{font-size:11.8px !important;}
}

/* ============================================================
   V1.7.0 · EXPERIENCIA AUTOGUIADA + CIERRE CONTUNDENTE
   22/10/2026
   Primera revisión macro para uso autónomo del alumno:
   - jerarquía y alineación consistentes;
   - navegación como progreso, no como menú libre;
   - Lectura con opcionales plegados;
   - Cierre explícito y finalización inequívoca.
   ============================================================ */

/* Ritmo común: cada etapa respira dentro del mismo sistema. */
.screen:not(.portal-screen){
  padding-top:92px !important;
  padding-bottom:142px !important;
}
.focus-shell{
  width:min(1120px,88vw) !important;
  max-width:1120px !important;
}
.stage-heading{
  max-width:920px !important;
  gap:16px !important;
  margin-bottom:22px !important;
}
.stage-heading h2{
  line-height:1.08 !important;
}
.stage-heading p{
  max-width:780px;
  line-height:1.55 !important;
}
.minimal-input textarea,
.reading-reflection textarea{
  line-height:1.55 !important;
}
.select-state h3{
  max-width:980px;
  margin-left:auto !important;
  margin-right:auto !important;
  line-height:1.32 !important;
  text-wrap:balance;
}

/* La barra inferior guía el recorrido. Ya no funciona como un menú de libre exploración. */
.journey-nav{
  --journey-progress:0%;
  overflow:hidden;
  isolation:isolate;
}
.journey-nav::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,#72efff 0 var(--journey-progress),rgba(114,239,255,.10) var(--journey-progress) 100%);
  box-shadow:0 0 14px rgba(92,228,255,.28);
  z-index:2;
}
.journey-nav button{
  position:relative;
  transition:opacity .25s ease,background .25s ease,color .25s ease;
}
.journey-nav button.completed{
  color:rgba(232,249,253,.70) !important;
}
.journey-nav button.completed i{
  color:rgba(121,235,255,.78) !important;
}
.journey-nav button.completed::after{
  content:"✓";
  position:absolute;
  right:8px;
  top:6px;
  color:rgba(121,235,255,.72);
  font-size:8px;
}
.journey-nav button.locked,
.journey-nav button:disabled{
  opacity:.22 !important;
  cursor:default !important;
  pointer-events:none;
}

/* Los estados de decisión mantienen una acción principal inequívoca. */
.button-row.center{
  justify-content:center;
}
.primary-btn{
  font-weight:520;
}
.text-btn{
  opacity:.78;
}

/* Lectura: primero comprensión, luego opcionales. */
.reading-screen,
.map-screen{
  overflow-y:auto !important;
  overscroll-behavior-y:contain;
  align-items:flex-start !important;
}
.reading-shell,
.map-shell{
  width:min(1120px,88vw) !important;
  max-width:1120px !important;
  margin:0 auto !important;
  transform:none !important;
  padding-bottom:78px;
}
.reading-grid{
  grid-template-columns:1fr !important;
  gap:12px !important;
}
.reading-hypothesis{
  order:-1;
  min-height:0 !important;
  padding:22px 24px !important;
}
.reading-hypothesis p{
  font-size:clamp(15px,1.2vw,18px) !important;
  line-height:1.65 !important;
  max-width:920px;
}
.reading-panel:not(.reading-hypothesis){
  min-height:0 !important;
  padding:15px 18px !important;
}
.theme-chips{
  margin-top:10px !important;
}
.reading-optional,
.numerology-cross{
  margin:12px 0 !important;
  padding:0 !important;
  border:1px solid rgba(123,227,249,.15) !important;
  border-radius:15px;
  background:rgba(1,12,21,.38);
  overflow:hidden;
}
.reading-optional summary,
.numerology-cross summary{
  list-style:none;
  padding:14px 17px;
  cursor:pointer;
  color:rgba(137,237,255,.88) !important;
  font-size:8px !important;
  letter-spacing:.19em !important;
}
.reading-optional summary::-webkit-details-marker,
.numerology-cross summary::-webkit-details-marker{display:none;}
.reading-optional summary::after,
.numerology-cross summary::after{
  content:"+";
  float:right;
  font-size:14px;
  line-height:.65;
  color:var(--cyan);
}
.reading-optional[open] summary::after,
.numerology-cross[open] summary::after{content:"–";}
.reading-optional .reading-reflection{
  margin:0 !important;
  border:0 !important;
  border-top:1px solid rgba(123,227,249,.12) !important;
  border-radius:0 !important;
}
.numerology-cross > :not(summary){
  margin-left:16px;
  margin-right:16px;
}
.reading-direction{
  margin:18px auto 10px;
  max-width:860px;
  padding:15px 20px;
  text-align:center;
  border-top:1px solid rgba(121,229,250,.18);
  border-bottom:1px solid rgba(121,229,250,.18);
}
.reading-direction span{
  display:block;
  color:var(--cyan);
  font-size:8px;
  letter-spacing:.24em;
  margin-bottom:7px;
}
.reading-direction p{
  margin:0;
  color:rgba(235,249,253,.78);
  font-size:13px;
  line-height:1.55;
}
.reading-actions{
  position:sticky;
  bottom:72px;
  z-index:35;
  width:max-content;
  max-width:100%;
  margin:18px auto 0 !important;
  padding:9px 12px;
  border:1px solid rgba(121,229,250,.18);
  border-radius:17px;
  background:rgba(1,10,18,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 38px rgba(0,0,0,.26);
}
.reading-actions .primary-btn{min-width:230px;}

/* Cierre: ya no es otro resumen; es el punto final de la experiencia. */
.closing-heading{
  margin-bottom:18px !important;
}
.closing-heading h2{
  font-size:clamp(32px,4.2vw,56px) !important;
  letter-spacing:.10em !important;
}
.closing-contract{
  max-width:960px;
  margin:0 auto 14px;
  padding:22px 28px;
  border:1px solid rgba(110,231,253,.28);
  border-radius:22px;
  background:rgba(1,13,23,.84);
  box-shadow:0 18px 50px rgba(0,0,0,.22),inset 0 0 28px rgba(90,225,250,.025);
  backdrop-filter:blur(10px);
  text-align:center;
}
.closing-contract span,
.closing-takeaway span{
  display:block;
  color:var(--cyan);
  font-size:8px;
  letter-spacing:.24em;
  margin-bottom:11px;
}
.closing-contract strong{
  display:block;
  font-size:clamp(22px,2.7vw,38px);
  line-height:1.34;
  font-weight:340;
  text-wrap:balance;
}
.closing-takeaway{
  max-width:900px;
  margin:0 auto 14px;
  padding:18px 24px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(42,25,66,.58),rgba(2,15,25,.78));
  border:1px solid rgba(181,145,255,.25);
  text-align:center;
}
.closing-takeaway p{
  margin:0;
  color:#f4efff;
  font-size:clamp(16px,1.55vw,21px);
  line-height:1.5;
  font-weight:360;
  text-wrap:balance;
}
.closing-direction{
  max-width:780px;
  margin:16px auto 18px;
  text-align:center;
}
.closing-direction strong{
  display:block;
  font-size:17px;
  font-weight:520;
  color:#fff;
  margin-bottom:6px;
}
.closing-direction p{
  margin:0;
  color:rgba(229,247,252,.72);
  font-size:12px;
  line-height:1.6;
}
.map-complete-details{
  max-width:980px;
  margin:12px auto;
  border:1px solid rgba(121,229,250,.15);
  border-radius:16px;
  background:rgba(1,12,21,.54);
  overflow:hidden;
}
.map-complete-details > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 18px;
  color:rgba(132,235,255,.86);
  font-size:8px;
  letter-spacing:.22em;
}
.map-complete-details > summary::-webkit-details-marker{display:none;}
.map-complete-details > summary::after{
  content:"+";
  float:right;
  color:var(--cyan);
  font-size:14px;
  line-height:.7;
}
.map-complete-details[open] > summary::after{content:"–";}
.map-complete-details .map-coordinate{
  margin-top:8px !important;
}
.map-complete-details .map-summary{
  padding:0 14px 12px;
}
.map-complete-details .map-trace{
  margin:4px 14px 14px !important;
}
.part-two-lock{
  max-width:780px !important;
  margin:16px auto !important;
  padding:15px 20px !important;
}
.part-two-lock h3{
  font-size:17px !important;
  margin:5px 0 !important;
}
.part-two-lock p{
  margin-bottom:0 !important;
}
.map-actions{
  margin-top:18px !important;
}
.map-actions .primary-btn{
  min-width:220px;
}

/* Confirmación final inequívoca. */
.practice-complete{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:28px;
  background:rgba(0,6,12,.82);
  backdrop-filter:blur(18px) saturate(1.08);
}
.practice-complete-card{
  width:min(720px,92vw);
  padding:34px 38px;
  border:1px solid rgba(121,231,252,.28);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(2,20,34,.96),rgba(12,8,28,.94));
  box-shadow:0 30px 90px rgba(0,0,0,.46),inset 0 0 50px rgba(93,226,250,.035);
  text-align:center;
}
.practice-complete-card h3{
  margin:12px 0 10px;
  font-size:clamp(28px,4vw,44px);
  font-weight:300;
  letter-spacing:.12em;
}
.practice-complete-card > p{
  max-width:590px;
  margin:0 auto;
  color:rgba(230,248,252,.76);
  font-size:14px;
  line-height:1.65;
}
.practice-complete-sentence{
  margin:22px auto;
  padding:17px 20px;
  border-radius:17px;
  border:1px solid rgba(125,232,252,.18);
  background:rgba(0,8,15,.54);
  color:#fff;
  font-size:clamp(17px,2vw,24px);
  line-height:1.45;
}
body.practice-complete-open{overflow:hidden;}

@media(max-width:920px){
  .screen:not(.portal-screen){padding:88px 22px 132px !important;}
  .focus-shell,.reading-shell,.map-shell{width:100% !important;}
  .journey-nav{overflow-x:auto;grid-template-columns:repeat(8,minmax(88px,1fr)) !important;}
  .reading-actions{bottom:68px;width:calc(100vw - 30px);justify-content:center;}
  .reading-actions .primary-btn{min-width:0;flex:1;}
  .map-summary{grid-template-columns:1fr !important;}
  .closing-contract{padding:18px 20px;}
  .practice-complete-card{padding:28px 22px;}
}
@media(max-width:560px){
  .screen:not(.portal-screen){padding:82px 16px 124px !important;}
  .stage-heading{display:flex !important;gap:10px !important;}
  .stage-heading h2{font-size:29px !important;letter-spacing:.08em !important;}
  .stage-heading p{font-size:12px !important;}
  .journey-nav{height:50px;bottom:8px;}
  .journey-nav button span{display:none;}
  .journey-nav button i{font-size:9px;margin:0;}
  .journey-nav button:first-child span{display:block;font-size:7px;}
  .reading-actions{bottom:60px;}
  .reading-actions .text-btn{display:none;}
  .closing-contract strong{font-size:22px;}
  .map-actions{flex-direction:column;align-items:stretch;}
  .map-actions .primary-btn,.map-actions .secondary-btn{width:100%;}
}

/* V1.7.0b · CTA de avance siempre visible en los dos puntos largos */
.visible-screen{
  overflow-y:auto !important;
  overscroll-behavior-y:contain;
  padding-bottom:205px !important;
}
.visible-screen .costs-shell{
  padding-bottom:96px;
}
.visible-screen .select-state:not(.hidden) #descendBtn{
  position:fixed !important;
  left:50%;
  bottom:82px;
  transform:translateX(-50%);
  z-index:70;
  min-width:230px;
  margin:0 !important;
  background:linear-gradient(180deg,rgba(35,188,218,.42),rgba(4,31,48,.94)) !important;
  border-color:rgba(125,235,255,.52) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.30),0 0 30px rgba(53,218,247,.14) !important;
}
.visible-screen .select-state:not(.hidden) #descendBtn::before{
  content:"SIGUIENTE · TRONCAL";
  position:absolute;
  left:50%;
  top:-21px;
  transform:translateX(-50%);
  white-space:nowrap;
  color:rgba(137,237,255,.86);
  font-size:7px;
  letter-spacing:.22em;
}
.reading-screen{
  padding-bottom:205px !important;
  scroll-padding-bottom:205px;
}
.reading-shell{padding-bottom:112px !important;}
.reading-actions{
  position:fixed !important;
  left:50% !important;
  bottom:82px !important;
  transform:translateX(-50%) !important;
  z-index:70 !important;
  margin:0 !important;
}
.reading-actions::before{
  content:"SIGUIENTE · CIERRE DEL RECORRIDO";
  position:absolute;
  left:50%;
  top:-21px;
  transform:translateX(-50%);
  white-space:nowrap;
  color:rgba(137,237,255,.86);
  font-size:7px;
  letter-spacing:.22em;
}
@media(max-width:920px){
  .visible-screen .select-state:not(.hidden) #descendBtn,
  .reading-actions{bottom:72px !important;}
  .reading-actions{width:calc(100vw - 28px) !important;}
}
@media(max-width:560px){
  .visible-screen .select-state:not(.hidden) #descendBtn,
  .reading-actions{bottom:62px !important;}
  .visible-screen .select-state:not(.hidden) #descendBtn{width:calc(100vw - 30px);}
  .reading-actions{width:calc(100vw - 20px) !important;}
}

/* Correcciones de composición detectadas en la revisión visual */
.visible-screen .costs-shell{
  transform:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.map-screen > .practice-complete{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:120 !important;
}

/* Ajuste final de Costos visibles: escala suficiente sin empujar el CTA fuera de escena. */
.visible-screen .belief-capsule{
  width:250px !important;
  height:385px !important;
}
.visible-screen .selected-visible-copy{
  display:none !important;
}
@media(max-width:900px){
  .visible-screen .belief-capsule{width:220px !important;height:338px !important;}
}
@media(max-width:560px){
  .visible-screen .belief-capsule{width:190px !important;height:292px !important;}
}


/* ==========================================================
   V1.7.2 · REVELACIÓN SCROLL + CTA FUERA DEL PANEL
   Aísla el scroll real del contenido y fija el CTA al viewport;
   el transform del panel deja de afectar la posición del botón.
   ========================================================== */
.revelation-screen{
  height:100vh !important;
  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding-top:max(92px,env(safe-area-inset-top)) !important;
  padding-bottom:calc(195px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom:calc(195px + env(safe-area-inset-bottom)) !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
}
.revelation-screen .revelation-shell{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-bottom:28px !important;
  flex-shrink:0;
}
/* Dock fuera de main, sin ningún ancestro transformado ni scrollable */
.app > .revelation-dock{
  display:none !important;
  position:fixed !important;
  left:50% !important;
  bottom:calc(82px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  z-index:100 !important;
  width:max-content;
  max-width:calc(100vw - 30px);
  margin:0 !important;
  padding:10px 12px !important;
  flex-wrap:nowrap;
}
body.revelation-active .app > .revelation-dock{
  display:flex !important;
}
/* Evitamos botones flotantes o hints duplicados dentro del contenido */
.revelation-screen .revelation-next-hint{display:none !important;}
.revelation-screen .revelation-actions{display:none !important;}
@media(max-width:920px){
  .revelation-screen{
    padding-top:88px !important;
    padding-bottom:calc(195px + env(safe-area-inset-bottom)) !important;
  }
  .app > .revelation-dock{
    bottom:calc(72px + env(safe-area-inset-bottom)) !important;
    width:calc(100vw - 28px) !important;
  }
}
@media(max-width:560px){
  .revelation-screen{
    padding-top:82px !important;
    padding-bottom:calc(164px + env(safe-area-inset-bottom)) !important;
  }
  .app > .revelation-dock{
    bottom:calc(62px + env(safe-area-inset-bottom)) !important;
    width:calc(100vw - 20px) !important;
  }
}

/* V1.7.4 · Lectura con síntesis útil, espera integrada */
.reading-grid.reading-no-parameters{grid-template-columns:1fr;}
.reading-updating{display:flex;align-items:center;gap:14px;padding:12px 0 6px;color:rgba(230,249,254,.86);}
.reading-updating p{margin:0;font-size:13px;line-height:1.5;}
.reading-pulse{display:inline-flex;gap:5px;align-items:center;flex-shrink:0;}
.reading-pulse i{width:5px;height:5px;border-radius:50%;background:#8beeff;animation:readingPulse 1.3s ease-in-out infinite;}
.reading-pulse i:nth-child(2){animation-delay:.18s;}
.reading-pulse i:nth-child(3){animation-delay:.36s;}
@keyframes readingPulse{0%,85%,100%{opacity:.26;transform:scale(.75)}45%{opacity:1;transform:scale(1.28)}}
#readingRetryBtn{margin:8px 0 0;padding:7px 0;font-size:10px;letter-spacing:.14em;}
@media(prefers-reduced-motion:reduce){.reading-pulse i{animation:none;opacity:.8}}