@import url('style-base.css');
@font-face{font-family:Silkscreen;src:url('assets/fonts/Silkscreen-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--ink:#263a39;--navy:#142738;--gold:#f2c15d;--paper:#f6e1a6;--cream:#fff2ce;--muted:#b9c9b5;--sans:'Trebuchet MS',Arial,sans-serif;--serif:'Trebuchet MS',Arial,sans-serif;--pixel:Silkscreen,'Courier New',monospace}
body{background:#142738}.grain{display:none}svg{shape-rendering:crispEdges}.world-backdrop{background:#2b251e url('assets/desk.webp') center/cover;image-rendering:pixelated}.world-backdrop:after{content:'';position:absolute;inset:0;background:#152c369c}.masthead{padding:25px 4.4%;height:104px;background:linear-gradient(#0c2035a6,#0c203500)}.brand{font-family:var(--pixel);font-size:13px;letter-spacing:0;gap:12px;color:#f9cc70}.brand-sub{font:8px var(--pixel);color:#ebdeb6;letter-spacing:0;margin-top:7px}.brand>svg{width:40px;height:40px;stroke-width:2}.header-note{font:8px var(--pixel);letter-spacing:0;color:#f6e4b6}.sound-button{border:2px solid #d1b46c8a;border-radius:0;background:#183645e0;font:8px var(--pixel);padding:10px 12px;box-shadow:3px 3px 0 #081c2a;color:#f2deaa}.sound-button:hover{background:#2b4a53}.sound-button svg{stroke-width:2}.eyebrow{font:9px/1.8 var(--pixel);letter-spacing:0;color:#f8cc75}.eyebrow>span{width:24px;height:3px;background:#edbb57;margin-right:10px}.hero{background:#243d51 url('assets/hero.webp') center/cover no-repeat;image-rendering:pixelated;min-height:max(800px,100svh);align-items:center}.hero:before{animation:none}.hero-shade{background:linear-gradient(90deg,#0c2334e3 0%,#0c2334d9 25%,#0c2334b0 42%,#0c233459 56%,#0c233400 70%),linear-gradient(0deg,#102333d9 0%,#10233366 13%,transparent 27%,transparent 82%,#10233340 100%)}.hero-content{padding:145px 0 145px;margin-left:7%;max-width:700px}.hero-content .eyebrow{font-size:9px;letter-spacing:0;margin-bottom:26px}h1{font:400 clamp(32px,3.35vw,54px)/1.35 var(--pixel);letter-spacing:-1px;text-shadow:4px 4px 0 #061a2c,0 4px 0 #061a2c;margin:0;max-width:660px}h1 em{font-size:.94em;letter-spacing:-1px;white-space:nowrap;color:#ffd36c;margin-top:0;text-shadow:4px 4px 0 #50331a,0 4px 0 #50331a}.hero-description{font:17px/1.8 var(--sans);color:#fbefcf;max-width:410px;margin:25px 0 29px;text-shadow:2px 2px 0 #142c3c}.button{font:10px/1.5 var(--pixel);font-weight:400;letter-spacing:0;border:3px solid #503c29;border-radius:0;gap:20px;min-height:57px;padding:0 23px;position:relative;box-shadow:4px 4px 0 #0c1d2d;transition:transform .12s,background .12s;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px)}.button:hover{transform:translateY(-3px);box-shadow:4px 7px 0 #0c1d2d}.button:active{transform:translate(2px,2px)}.button svg{width:22px;stroke-width:2}.button-gold{color:#402d23;background:#f5c567;box-shadow:4px 4px 0 #0c1d2d,inset 0 3px 0 #ffe5a1,inset 0 -4px 0 #c38b3d}.button-gold:hover{background:#ffda83;box-shadow:4px 7px 0 #0c1d2d,inset 0 3px 0 #fff1c0,inset 0 -4px 0 #c38b3d}.button-ink{color:#fff0c5;background:#244b50;border-color:#112d38;box-shadow:3px 3px 0 #ae8d4e,inset 0 3px 0 #3f7071}.button-ink:hover{background:#356266;box-shadow:3px 5px 0 #ae8d4e}.resume{font:9px var(--pixel);color:#f6d789;text-underline-offset:5px;line-height:1.7;padding-top:17px}.hero-facts{font:7px var(--pixel);letter-spacing:0;gap:13px;margin-top:29px;color:#dbdfc3}.hero-facts i{border-radius:0;width:4px;height:4px}.captain-tag{bottom:128px;right:8%;background:#17343ee6;border:2px solid #d1b46c;padding:13px 19px;box-shadow:4px 4px 0 #102230;gap:12px}.tag-line{display:none}.captain-tag span:not(.tag-line){font:7px var(--pixel);letter-spacing:0;color:#dbbf7c}.captain-tag strong{font:15px var(--pixel);margin-top:8px;line-height:1.3}.hero-bottom{left:4.4%;right:4.4%;border-top:2px solid #f2c15d59;font:7px var(--pixel);letter-spacing:0;padding:23px 0 25px;color:#e0d9b5}.edition b{font:18px var(--pixel);color:#f8cf71}.hero-spark{position:absolute;width:4px;height:4px;background:#ffd776;box-shadow:6px 0 #ffe6ad;animation:spark 4s steps(3,end) infinite;pointer-events:none}.spark-one{top:19%;left:46%;animation-delay:1s}.spark-two{top:37%;left:58%;animation-delay:2.5s}.spark-three{bottom:21%;left:40%;animation-delay:.5s}
.correspondence{padding-top:122px;background:#132b3559}.scene-heading .eyebrow{font-size:8px;margin-bottom:17px}.scene-heading h2,.letter-screen-heading h2,.map-heading h2{font:400 clamp(20px,2.2vw,31px)/1.5 var(--pixel);color:#ffe7ae;letter-spacing:-1px;text-shadow:3px 3px 0 #182a34}.scene-heading>p:last-child{font:15px/1.7 var(--sans);color:#efe0bb;margin-top:15px}.envelope-stage{height:350px;margin-top:20px}.envelope{transform:rotate(0);filter:drop-shadow(8px 9px 0 #101b24a6);height:285px;image-rendering:pixelated}.envelope:hover{transform:translateY(-4px)}.envelope-back{border-radius:0;background:#a67d47;border:4px solid #624b2c}.envelope-front{background:#dec18b;box-shadow:inset 0 -6px #b58b53;border-radius:0;clip-path:polygon(0 0,8% 4%,50% 54%,92% 4%,100% 0,100% 100%,0 100%)}.envelope-front:before{inset:12px;border:2px dashed #9976457a}.envelope-front>span{top:69%;font:12px/1.7 var(--pixel);color:#68492c}.envelope-front small{font:6px var(--pixel);bottom:17px;letter-spacing:0;color:#91683a}.envelope-flap{background:#efd69e;clip-path:polygon(0 0,100% 0,100% 5%,93% 5%,93% 12%,86% 12%,86% 19%,79% 19%,79% 26%,72% 26%,72% 33%,65% 33%,65% 40%,58% 40%,58% 47%,50% 55%,42% 47%,42% 40%,35% 40%,35% 33%,28% 33%,28% 26%,21% 26%,21% 19%,14% 19%,14% 12%,7% 12%,7% 5%,0 5%)}.wax-seal{border-radius:0;border:4px solid #77372e;width:70px;height:70px;left:calc(50% - 35px);top:43%;background:#a84d3b;box-shadow:4px 4px 0 #572f26,inset 3px 3px #d2794e,inset -3px -3px #813a30;clip-path:polygon(10px 0,calc(100% - 10px) 0,calc(100% - 10px) 5px,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px,5px 10px,5px 5px,10px 5px);color:#f1c778}.wax-seal svg{stroke-width:2;width:43px;height:43px}.letter-peek{background:#fae8b7;border:3px solid #aa7b3f}.letter-peek svg{stroke-width:2}.seal-instruction{font:8px/1.7 var(--pixel);letter-spacing:0;color:#e8c17b;margin-top:5px}.instruction-line{height:2px;width:25px}.quiet-button{font:9px var(--pixel);color:#e6d7b0;line-height:1.8}.letter-screen-heading{margin-bottom:22px}.letter-screen-heading .eyebrow{font-size:7px;letter-spacing:0}.letter-screen-heading h2{font-size:22px;letter-spacing:-.8px}.letter-tabs{font:8px var(--pixel);letter-spacing:0;color:#b8baa1}.letter-tabs .active{color:#ffdb80}.tabs-line{height:2px;background:#9f9c6b99}.paper{background:#f5e1ad;background-image:none;border:4px solid #604a2e;outline:2px solid #d4b16b;outline-offset:2px;border-radius:0;box-shadow:9px 9px 0 #121f26b3;max-height:calc(100svh - 250px);min-height:350px}.paper:before{inset:5px;border:2px solid #b8975845}.paper-header{margin:0 36px;border-bottom:2px solid #b08b4e55;padding:15px 0 11px;font:7px var(--pixel);letter-spacing:0;color:#846334}.paper-header svg{stroke-width:2;width:30px;height:30px;color:#a7803f}.paper-scroll{padding:20px 50px 12px;scrollbar-color:#aa8048 #e6ca8b}.paper h3{font:24px/1.5 var(--pixel);letter-spacing:-1px;color:#36514a;margin:2px 0 15px}.gold-rule{width:43px;height:4px;background:#b48841;margin-bottom:22px;box-shadow:5px 0 #d6b16a}.letter-body{font:16px/1.8 var(--sans);color:#4c412d}.letter-body p{margin-bottom:18px}.letter-body p:first-child{color:#324b41}.version-note{border-left:4px solid #af8240;background:#dcc58a80;font:11px/1.7 var(--sans);color:#705b36}.version-note strong{font:8px/1.6 var(--pixel);margin-bottom:7px}.letter-signature{font:italic 12px/1.7 var(--sans);color:#9a7d43}.letter-signature svg{stroke-width:2}.paper-footer{padding:13px 36px;background:#e9ce94;border-top:2px solid #b08b4e55}.paper-footer>#page-count{font:9px var(--pixel);letter-spacing:0;color:#8b6837}.paper-footer .button{font-size:8px;padding:0 18px;min-height:45px}.paper-back{font:8px var(--pixel);letter-spacing:0;color:#4e5c45;gap:8px}.paper-back svg{stroke-width:2}.letter-bottom-note{font:6px/1.8 var(--pixel);letter-spacing:0;color:#e0cf9e;margin-top:17px}
.map-scene{padding-top:126px;background:#102b35bf}.map-heading h2{font-size:27px;letter-spacing:-1px}.map-heading .eyebrow{font:8px/1.7 var(--pixel);letter-spacing:0}.map-heading p:last-child{font:14px/1.7 var(--sans);color:#e3d7b7}.outline-button{font:8px/1.6 var(--pixel);letter-spacing:0;border:2px solid #bd9b5f;background:#183e43;border-radius:0;box-shadow:3px 3px 0 #0f222b;padding:12px 16px;color:#eed49b}.outline-button:hover{background:#2a5555}.chart{border:5px solid #634e2d;outline:3px solid #d5b170;outline-offset:2px;border-radius:0;box-shadow:9px 9px 0 #0b1e28;height:min(62vw,calc(100svh - 302px));background-color:#226677;background-image:url('assets/map.webp');image-rendering:pixelated;min-height:460px}.chart-wash{display:none}.chart-label{left:15px;top:14px;background:#f0d69ae6;border:2px solid #75572e;color:#674b2c;padding:7px 10px;font:6px var(--pixel);letter-spacing:0;box-shadow:3px 3px 0 #2c4b4f44}.chart-label span{font:9px var(--pixel);letter-spacing:0;margin-top:5px}.map-pin{border:2px solid #554c2c;border-radius:0;background:#fae2a7;box-shadow:4px 4px 0 #1b3c42b3;padding:5px 12px 5px 5px;min-width:150px;gap:9px;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px)}.map-pin:hover,.map-pin:focus-visible{transform:translate(-50%,-50%) translateY(-4px);box-shadow:5px 7px 0 #1b3c42d9}.pin-portrait{width:44px;height:46px;border:2px solid #b89343;border-radius:0;background:#f2d06f}.pin-portrait img{width:100%;height:100%;transform:none;object-fit:cover;object-position:center 35%;image-rendering:pixelated}.pin-name{font:10px/1.6 var(--pixel);color:#2b423d}.pin-guide{font:6px/1.6 var(--pixel);letter-spacing:0;color:#8b6c36;margin-top:2px}.pin-index{left:auto;right:3px;top:-1px;border:0;border-radius:0;background:none;color:#98743c;font:6px var(--pixel);height:12px;width:12px}.treasure{background:#f0d69ae6;padding:7px 10px;border:2px solid #8e6d35;gap:5px;color:#6a4e28;box-shadow:3px 3px 0 #233b3f66;top:72%;left:49%;text-shadow:none}.treasure svg{width:26px;height:26px;stroke-width:2}.treasure span{font:6px/1.6 var(--pixel);letter-spacing:0}.chart-scale{bottom:10px;font:6px var(--pixel);letter-spacing:0;color:#e9d69b;text-shadow:2px 2px #223c43}.map-footer{font:8px/1.8 var(--sans);color:#d2d4b3;letter-spacing:0}.map-footer b{font:7px var(--pixel);color:#ebc16d;letter-spacing:0}.map-footer>span:last-child{font:7px var(--pixel)}
.kingdom-dialog{border:4px solid #5e4a2f;outline:3px solid #deba72;outline-offset:2px;background:#f6e0aa;border-radius:0;box-shadow:10px 10px 0 #0f202c;width:min(870px,92vw)}.kingdom-dialog[open]{grid-template-columns:43% 57%}.kingdom-dialog::backdrop{background:#0c2136db;backdrop-filter:none}.dialog-close{border:2px solid #5e4a2f;background:#e8c47c;border-radius:0;box-shadow:2px 2px 0 #6d5836;width:32px;height:32px;right:10px;top:10px}.dialog-close svg{stroke-width:2}.kingdom-art{background:#f4d06d;min-height:430px;display:grid;place-items:center;padding:22px 13px;border-right:3px solid #c09b50}.kingdom-art img{width:100%;height:auto;min-height:0;max-height:400px;object-fit:contain;object-position:center;image-rendering:pixelated}.kingdom-copy{padding:40px 32px 30px}.kingdom-copy .eyebrow{font:8px/1.6 var(--pixel);letter-spacing:0;color:#88632f}.kingdom-copy h2{font:30px/1.3 var(--pixel);letter-spacing:-1px;color:#304e45}.kingdom-copy .organism{font:italic 12px/1.8 var(--sans);color:#8d713e}.kingdom-copy>p:not(.eyebrow):not(.organism):not(.next-stage){font:15px/1.8 var(--sans);color:#5a4e35}.kingdom-route{border-top:2px solid #bd9c5859;border-bottom:2px solid #bd9c5859;padding:13px 0}.kingdom-route strong{font:7px var(--pixel);letter-spacing:0;color:#896b33}.kingdom-route p{font:13px/1.7 var(--sans);color:#5a5138}.next-stage{font:11px/1.7 var(--sans);color:#887243;margin:18px 0}.kingdom-copy .button{min-height:43px;font-size:8px}.noscript{background:#f6df9c;border:3px solid #61492b;color:#30483f}.mobile-captain{display:none}
@keyframes spark{0%,35%,100%{opacity:0;transform:translateY(8px)}50%,70%{opacity:1;transform:translateY(0)}}
@media(min-width:1700px){.hero-content{margin-left:9%}h1{font-size:62px}.hero-description{font-size:20px;max-width:480px}.hero .button{font:12px var(--pixel)}.paper-scroll{padding:25px 70px}.letter-body{font-size:18px}.paper h3{font-size:30px}}
@media(max-width:1000px){h1{font-size:38px}.hero-content{margin-left:6%}.hero-description{font-size:16px;max-width:350px}.hero-facts{font-size:6px}.map-heading h2{font-size:22px}.map-pin{min-width:132px;padding-right:8px;gap:6px}.pin-name{font-size:8px}.pin-portrait{width:36px;height:40px}.pin-guide{font-size:5px}.paper h3{font-size:22px}.letter-screen-heading h2{font-size:19px}.letter-tabs{font-size:7px}.kingdom-copy{padding:40px 24px 25px}}
@media(max-width:600px){.masthead{height:87px;padding:21px 20px}.brand{font-size:10px;gap:8px}.brand-sub{font:6px var(--pixel);margin-top:6px}.brand>svg{width:33px;height:33px}.sound-button{padding:8px;box-shadow:2px 2px 0 #081c2a}.hero{min-height:max(820px,100svh);background-position:76% center;align-items:flex-start}.hero:before{display:none}.hero-shade{background:linear-gradient(0deg,#102638 0%,#102638ec 28%,#102638a8 50%,#10263820 72%,#1026385e 100%)}.hero-content{margin-left:7%;padding-top:360px;padding-bottom:122px;max-width:88%;position:relative}.hero-content .eyebrow{font:7px var(--pixel);margin-bottom:17px}.hero-content .eyebrow>span{height:2px;width:18px;margin-right:8px}h1{font-size:clamp(24px,7.1vw,39px);line-height:1.35;letter-spacing:-1px;text-shadow:3px 3px 0 #091d2b}h1 em{font-size:.9em;letter-spacing:-1px;text-shadow:3px 3px 0 #593d22}.hero-description{font:14px/1.8 var(--sans);margin:17px 0 22px;max-width:300px}.hero .button{font:8px var(--pixel);min-height:53px;padding:0 16px;gap:15px;border-width:2px}.resume{font:7px/1.8 var(--pixel);padding-top:14px}.hero-facts{font:5px/1.7 var(--pixel);gap:8px;max-width:300px;margin-top:20px}.captain-tag{right:7%;top:268px;bottom:auto;padding:9px 12px;box-shadow:3px 3px 0 #102230;border-width:2px}.captain-tag span:not(.tag-line){font:5px var(--pixel)}.captain-tag strong{font:11px var(--pixel);margin-top:7px}.hero-bottom{left:7%;right:7%;font:5px/1.8 var(--pixel);padding:17px 0;border-top-width:2px}.edition{gap:8px}.edition b{font:14px var(--pixel)}.hero-spark{display:none}.correspondence{padding-top:118px}.scene-heading .eyebrow{font-size:7px;letter-spacing:0;margin-bottom:17px}.scene-heading h2{font-size:21px;line-height:1.6;letter-spacing:-.5px;max-width:310px}.scene-heading>p:last-child{font:14px/1.8 var(--sans);max-width:270px;margin-top:14px}.envelope-stage{width:87vw;height:280px;margin-top:22px}.envelope{height:230px}.envelope-front>span{font:8px/1.8 var(--pixel);top:70%}.envelope-front small{font:4px var(--pixel);bottom:16px}.envelope-front:before{inset:10px;border-width:1px}.wax-seal{height:59px;width:59px;left:calc(50% - 29.5px);top:42%;border-width:3px}.wax-seal svg{width:36px;height:36px}.seal-instruction{font:6px/1.8 var(--pixel);letter-spacing:0;gap:8px}.quiet-button{font:8px/1.8 var(--pixel)}.letter-screen-heading{gap:14px;margin-bottom:18px}.letter-screen-heading .eyebrow{font:6px/1.8 var(--pixel);letter-spacing:0}.letter-screen-heading h2{font:18px/1.5 var(--pixel);letter-spacing:-.7px}.letter-tabs{font:6px var(--pixel);gap:10px;padding:0}.tabs-line{width:24px}.paper{border-width:3px;outline-width:2px;min-height:350px;max-height:calc(100svh - 280px);box-shadow:6px 6px 0 #121f2699}.paper-header{margin:0 18px;padding:10px 0;font:5px var(--pixel);gap:6px}.paper-header svg{width:23px;height:23px;flex-shrink:0}.paper-scroll{padding:17px 22px 10px}.paper h3{font:18px/1.5 var(--pixel);letter-spacing:-.8px}.gold-rule{height:3px;margin-bottom:18px}.letter-body{font:15px/1.8 var(--sans)}.version-note{font:10px/1.7 var(--sans);padding:10px 11px}.version-note strong{font:7px/1.8 var(--pixel)}.paper-footer{padding:12px 15px;gap:9px}.paper-footer .button{font:6px var(--pixel);padding:0 11px;min-height:42px;gap:8px;border-width:2px}.paper-back{font:6px var(--pixel);gap:6px}.paper-back svg{width:15px}.paper-footer>#page-count{font:7px var(--pixel)}.letter-bottom-note{font:4px/1.8 var(--pixel);letter-spacing:0;margin-top:16px}.map-scene{padding:116px 20px 25px}.map-heading .eyebrow{font:6px/1.8 var(--pixel);letter-spacing:0}.map-heading h2{font:22px/1.5 var(--pixel);letter-spacing:-1px;max-width:310px}.map-heading p:last-child{font:14px/1.7 var(--sans)}.outline-button{font:6px var(--pixel);padding:10px 12px;min-height:40px}.chart{height:640px;min-height:0;background-size:auto 100%;border-width:3px;outline-width:2px}.chart-label{top:9px;left:9px;padding:5px 7px;font:4px var(--pixel);letter-spacing:0}.chart-label span{font:7px var(--pixel)}.map-pin{min-width:130px;gap:6px;padding:5px 8px 5px 5px;border-width:2px}.pin-portrait{width:35px;height:40px}.pin-name{font:8px/1.5 var(--pixel)}.pin-guide{font:5px/1.8 var(--pixel)}.pin-index{font:5px var(--pixel);right:2px}.treasure{top:89%;left:50%;padding:5px 7px;gap:4px}.treasure svg{width:22px;height:22px}.treasure span{font:4px/1.6 var(--pixel)}.chart-scale{font:4px var(--pixel);letter-spacing:0;bottom:8px}.map-footer{font:8px/1.8 var(--sans)}.map-footer b{font:5px/1.7 var(--pixel)}.map-footer>span:last-child{font:5px/1.8 var(--pixel);white-space:nowrap}.kingdom-dialog[open]{grid-template-columns:1fr}.kingdom-art{height:230px;min-height:0;border-right:0;border-bottom:3px solid #c09b50;padding:12px}.kingdom-art img{height:100%;width:auto;max-width:100%;max-height:none}.kingdom-copy{padding:28px 23px}.kingdom-copy h2{font:25px/1.4 var(--pixel)}.kingdom-copy .eyebrow{font:7px var(--pixel)}.kingdom-copy .organism{font-size:11px}.kingdom-copy>p:not(.eyebrow):not(.organism):not(.next-stage){font:14px/1.8 var(--sans)}.kingdom-route p{font:12px/1.8 var(--sans)}.kingdom-copy .button{font:7px var(--pixel);padding:0 13px;min-height:43px}.next-stage{font-size:10px}.dialog-close{position:sticky;margin:8px 8px -40px auto;right:auto;top:8px}.kingdom-dialog{max-height:88svh}.kingdom-dialog[open]{display:block}}
/* Mantener a la guía completa cuando el fondo se recorta por la proporción de pantalla. */
.hero{background-position:right center}
.pin-name{font-size:12px}.pin-guide{font-size:7px}
@media(max-width:1000px){.pin-name{font-size:10px}.pin-guide{font-size:6px}}
@media(max-width:600px){.pin-name{font-size:9px}.pin-guide{font-size:5px}}
@media(max-width:600px){.hero{background-position:right center}}
@media(prefers-reduced-motion:reduce){.hero-spark{display:none}}
/* v03 · un sistema de botones de pergamino y brújula */
html{scrollbar-gutter:stable}body{overflow-y:scroll}.world-backdrop{width:100%;height:100svh;bottom:auto;background-size:cover;background-position:center}.correspondence.scene-enter{animation:none}
.button,.outline-button,.quiet-button,.paper-back,.sound-button,.resume{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 18px 10px 48px;border:4px solid #28565a;border-radius:0;background:linear-gradient(#f9e8b8,#e6c789);color:#3c3427;font:9px/1.6 var(--pixel);letter-spacing:0;box-shadow:0 0 0 2px #bd9149,inset 0 3px #fff1cc,inset 0 -3px #bf9555,4px 6px #091d28;clip-path:none;text-decoration:none;transition:transform .15s,filter .15s}
.button:before,.outline-button:before,.quiet-button:before,.paper-back:before,.sound-button:before,.resume:before{content:'';position:absolute;left:8px;top:50%;width:29px;height:29px;transform:translateY(-50%);background:#183e45 url('assets/compass.svg') center/23px no-repeat;border:3px solid #d4a549;box-shadow:2px 2px #84602f;color:#f8d17d}
.button:after{content:'';width:11px;height:13px;position:absolute;right:-7px;bottom:-6px;background:#a94434;border:2px solid #e4a368;box-shadow:2px 2px #613027;pointer-events:none}
.button:hover,.outline-button:hover,.quiet-button:hover,.paper-back:hover,.sound-button:hover,.resume:hover{background:linear-gradient(#fff1cd,#f6d99c);color:#3c3427;filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 0 0 2px #d2ad63,inset 0 3px #fff7e1,inset 0 -3px #bf9555,4px 7px #091d28}
.button:active,.outline-button:active,.quiet-button:active,.paper-back:active{transform:translate(2px,3px)}button:disabled{opacity:.5;cursor:default;filter:none}.resume{margin-top:18px;font-size:8px}.paper-footer .button,.paper-footer .paper-back{padding:8px 15px 8px 43px;min-height:45px;font-size:8px}.sound-button{font-size:7px}.hero .button{padding-left:50px}.paper{transform-origin:center top;isolation:isolate}.paper:after{content:'';position:absolute;inset:7px -5px -7px 5px;background:#d5bd87;border:2px solid #a28650;z-index:-1;pointer-events:none}
.letter-body{font:19px/1.75 Georgia,'Times New Roman',serif;color:#403526}.paper h3{font:italic 32px/1.3 Georgia,'Times New Roman',serif;letter-spacing:0}.letter-signature{font:italic 17px/1.5 Georgia,serif}
.paper.turn-out-forward{animation:liftSheet .25s ease-in both}.paper.turn-in-forward{animation:revealSheet .38s ease-out both}.paper.turn-out-back{animation:revealSheet .25s ease-in reverse both}.paper.turn-in-back{animation:liftSheet .38s ease-out reverse both}
@keyframes liftSheet{to{transform:perspective(1100px) translateY(-70px) rotateX(65deg) scale(.97);opacity:0}}
@keyframes revealSheet{from{transform:translateY(18px);opacity:.45}to{transform:translateY(0);opacity:1}}
.animalia-scene{padding:125px 5% 45px;background:linear-gradient(#092b2b70,#092b2bb0),url('assets/animalia.webp') center/cover fixed;image-rendering:pixelated}.animalia-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;max-width:1300px;margin:0 auto 25px}.animalia-heading h2{font:24px/1.6 var(--pixel);margin:0;color:#fff0bd;text-shadow:3px 3px #173e3b}.animalia-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:25px;max-width:1300px;margin:auto}.nara-panel{align-self:start;padding:18px;background:#153c3de8;border:3px solid #ba954e;box-shadow:6px 6px #102e32;display:flex;flex-direction:column;align-items:center;gap:12px}.nara-panel img{width:170px;height:235px;object-fit:cover;object-position:top;image-rendering:pixelated;border:3px solid #ceab62}.nara-panel strong{font:18px var(--pixel);color:#f3cf7e}.nara-panel>span{font-size:12px}.nara-panel .button{font-size:7px;padding-right:10px}.nara-panel p{font:15px/1.8 var(--sans);margin:0}.nara-panel #animalia-progress{font:8px/1.8 var(--pixel);color:#f3cf7e}.field-paper{padding:30px 40px;background:#f4e2b6;border:4px solid #b99350;box-shadow:7px 7px #123432;color:#2f4139;min-width:0}.field-paper>.eyebrow{color:#786036;font-size:8px}.field-paper h3{font:20px/1.6 var(--pixel);color:#244b4c;margin:12px 0 22px}.field-paper p,.field-paper li{font:17px/1.8 var(--sans)}.field-paper a{color:#22576a}.mission{padding:17px 20px;background:#ddca93;border-left:4px solid #376865;margin:20px 0}.mission strong{font:10px/1.8 var(--pixel)}.mission p{margin:8px 0}.animalia-nav{display:flex;justify-content:space-between;gap:15px;margin-top:25px;padding-top:20px;border-top:2px solid #c4a976}.choices{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.choice{background:#244d50;color:#fff0bf;border:3px solid #b7924a;padding:13px 18px;font:15px/1.5 var(--sans);box-shadow:3px 3px #b8a275}.choice:hover{background:#386c6c}.choice:disabled{background:#6e7c6c}.vertical{flex-direction:column}.specimen{display:grid;grid-template-columns:170px 1fr;gap:25px}.specimen img{width:100%;max-height:290px;object-fit:contain;image-rendering:pixelated}.specimen h4{font:20px Georgia,serif;margin:10px 0}.process-grid{display:grid;grid-template-columns:210px 1fr;gap:25px}.urinary-diagram{text-align:center;background:#e9d39e;padding:22px 10px;border:2px solid #bba16b;font:11px/1.8 var(--pixel)}.kidney-pair{display:flex;justify-content:center;gap:20px}.kidney-pair span{display:grid;place-items:center;background:#ad5442;color:#fff0c8;min-height:67px;width:73px;border:4px solid #743b35;border-radius:40%}.ureters,.urethra{padding:15px 0;color:#936821}.bladder{background:#d8aa57;border:4px solid #9f753b;padding:12px 5px;margin:auto;width:125px;border-radius:0 0 35% 35%}.small-note{font-size:13px!important}.discovery-mark{font:40px var(--pixel);color:#b47f32}.route-slots{border:3px dashed #a78950;padding:22px;min-height:80px;font:18px/1.8 Georgia,serif}.reward{text-align:center;border:3px double #ad8544;padding:22px}.reward>span{font-size:80px;color:#a97425;text-shadow:3px 3px #e2be6e}.reward h4{font:18px/1.8 var(--pixel);margin:8px 0}#animalia-feedback:not(:empty){padding:16px;background:#e2d39f;border:2px solid #8c9c68}.field-paper details{font:14px/1.7 var(--sans)}
@media(max-width:700px){.animalia-scene{padding:115px 18px 30px;background-attachment:scroll}.animalia-heading{display:block}.animalia-heading h2{font-size:18px;margin-bottom:20px}.animalia-layout{grid-template-columns:1fr;gap:20px}.nara-panel{display:grid;grid-template-columns:75px 1fr;padding:12px;gap:8px 14px}.nara-panel img{width:75px;height:105px;grid-row:1/4}.nara-panel strong{font-size:14px}.nara-panel p{grid-column:1/-1;font-size:14px}.nara-panel .button{font-size:6px;min-height:42px}.nara-panel #animalia-progress{grid-column:1/-1;font-size:7px}.field-paper{padding:20px 18px}.field-paper h3{font-size:16px}.field-paper p,.field-paper li{font-size:15px}.specimen{grid-template-columns:100px 1fr;gap:12px}.process-grid{grid-template-columns:1fr}.urinary-diagram{max-width:260px;margin:auto}.animalia-nav .button{font-size:7px;padding-right:9px;padding-left:42px}.paper-footer .button,.paper-footer .paper-back{font-size:6px;padding-right:8px;padding-left:36px}.paper-footer .button:before,.paper-back:before{width:22px;height:22px;background-size:17px;left:5px}.letter-body{font-size:17px;line-height:1.75}.paper h3{font-size:26px}.sound-button{padding:8px;min-height:40px}.sound-button:before{display:none}.sound-button svg{width:18px}.hero .button{font-size:8px}.paper-footer{gap:10px}.resume{font-size:7px}}
@media(prefers-reduced-motion:reduce){.paper[class*='turn-']{animation:none}.button{transition:none}}

.choice{position:relative;background:linear-gradient(#f9e8b8,#e6c789);border:3px solid #28565a;box-shadow:0 0 0 1px #bd9149,3px 4px #b8a275;color:#3c3427;padding-left:40px}.choice:before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;background:#183e45 url('assets/compass.svg') center/18px no-repeat;border:2px solid #d4a549}.choice:hover{background:#fff0c8}.choice:disabled{background:#d2c69d}.animalia-nav{flex-wrap:wrap}

/* v04: jerarquía de botones según función. */
.button:before,.button:after,.outline-button:before,.quiet-button:before,.paper-back:before,.sound-button:before,.resume:before,.choice:before{content:none;display:none}
.button,.outline-button,.quiet-button,.paper-back,.sound-button,.resume,.choice{border:16px solid transparent;border-image:url('assets/button-frame.svg') 24 fill / 16px / 0 stretch;background:none;color:#352e21;box-shadow:3px 4px #091d2870;padding:2px 12px;min-height:54px;gap:10px;filter:none;clip-path:none}
.button:hover,.outline-button:hover,.quiet-button:hover,.paper-back:hover,.sound-button:hover,.resume:hover,.choice:hover{background:none;box-shadow:3px 5px #091d2870;filter:brightness(1.09);color:#352e21}
.button:disabled,.choice:disabled{filter:grayscale(.35);opacity:.5;background:none}
.paper-footer .button,.paper-footer .paper-back,.animalia-nav .button,.kingdom-copy .button,.nara-panel .button{padding:2px 10px;min-height:52px;font-size:9px}
.choice{font:15px/1.5 var(--sans);padding:2px 12px;min-height:54px}.sound-button{font-size:8px}.resume{display:flex;width:max-content;max-width:100%;margin-top:20px;font-size:9px}.resume span{display:none}
.nav-back:before,.nav-forward:after{display:block;position:static;content:'';width:22px;height:22px;flex:0 0 22px;transform:none;border:0;box-shadow:none;background:#234c50;clip-path:polygon(0 32%,55% 32%,55% 8%,100% 50%,55% 92%,55% 68%,0 68%)}
.nav-back:before{transform:rotate(180deg)}.nav-forward:after{right:auto;bottom:auto}.nav-back svg,.nav-forward svg{display:none}.nav-back:after,.nav-forward:before{display:none;content:none}
#begin,#begin:hover{display:flex;width:460px;max-width:100%;min-height:102px;border:0;border-image:none;padding:25px 54px 25px 105px;background:transparent url('assets/button-adventure.svg') center/100% 100% no-repeat;box-shadow:none;font:12px/1.7 var(--pixel);text-shadow:0 1px #fff0b9;color:#123640;gap:0}
#begin svg,#begin:before,#begin:after{display:none;content:none}.hero .hero-facts{margin-top:26px}
@media(max-width:700px){.paper-footer .button,.paper-footer .paper-back{font-size:7px;padding:2px 3px;min-height:46px;border-width:12px;border-image-width:12px}.nav-back:before,.nav-forward:after{width:15px;height:15px;flex-basis:15px}.paper-footer{gap:6px}.sound-button{min-height:44px;padding:0;border-width:12px;border-image-width:12px}.animalia-nav .button,.nara-panel .button{font-size:8px}.resume{font-size:8px}#begin,#begin:hover{width:340px;min-height:82px;font-size:9px;padding:22px 35px 22px 78px}}
#begin,#begin:hover{font-size:14px}.button,.outline-button,.quiet-button,.paper-back,.resume{font-size:10px}.paper-footer .button,.paper-footer .paper-back,.animalia-nav .button,.kingdom-copy .button{font-size:10px}.nara-panel .button{font-size:8px}
@media(max-width:700px){#begin,#begin:hover{font-size:10px}.paper-footer .button,.paper-footer .paper-back{font-size:7px}.animalia-nav .button{font-size:9px}.nara-panel .button{font-size:7px}.resume{font-size:8px}}
.sound-button svg{display:none}.sound-button span{display:inline}@media(max-width:700px){.sound-button{font-size:6px;padding:2px 4px;max-width:145px}}

/* v05: recursos pixel art derivados de la referencia aprobada. */
@font-face{font-family:Rye;src:url('assets/fonts/Rye-Regular.ttf') format('truetype');font-display:swap}
.button,.outline-button,.quiet-button,.paper-back,.sound-button,.resume,.choice,.paper-footer .button,.paper-footer .paper-back,.animalia-nav .button,.kingdom-copy .button,.nara-panel .button{border:0;border-image:none;background:transparent url('assets/button-faithful-frame.png') center/100% 100% no-repeat;box-shadow:none;padding:16px 25px;min-height:58px;color:#102e35;font:18px/1.4 Rye,Georgia,serif;letter-spacing:.3px;text-transform:uppercase;image-rendering:pixelated;gap:12px}
.button:hover,.outline-button:hover,.quiet-button:hover,.paper-back:hover,.sound-button:hover,.resume:hover,.choice:hover{background:transparent url('assets/button-faithful-frame.png') center/100% 100% no-repeat;box-shadow:none;filter:brightness(1.1);transform:translateY(-2px)}
.choice:disabled,.button:disabled{background:transparent url('assets/button-faithful-frame.png') center/100% 100% no-repeat;filter:grayscale(.35);opacity:.55}.choice{font-size:17px}.sound-button{font-size:12px;min-height:50px}.nara-panel .button{font-size:13px;max-width:100%}.resume{font-size:15px;min-height:56px}.paper-footer .button,.paper-footer .paper-back{font-size:16px;min-height:58px}
.nav-back:before,.nav-forward:after{display:block;content:'';width:30px;height:30px;flex-basis:30px;transform:none;clip-path:none;border:0;background:transparent url('assets/button-faithful-right.png') center/contain no-repeat;image-rendering:pixelated}
.nav-back:before{background-image:url('assets/button-faithful-left.png')}
#begin,#begin:hover{width:530px;max-width:100%;min-height:0;height:auto;aspect-ratio:1497/387;padding:0;border:0;box-shadow:none;background:transparent url('assets/button-faithful-start.png') center/contain no-repeat;font-size:0;color:transparent;text-shadow:none}
@media(max-width:700px){.button,.outline-button,.quiet-button,.resume,.choice,.animalia-nav .button,.kingdom-copy .button{font-size:15px;min-height:54px;padding:14px 21px}.paper-footer .button,.paper-footer .paper-back{font-size:12px;min-height:49px;padding:12px 13px;gap:5px}.nav-back:before,.nav-forward:after{width:22px;height:22px;flex-basis:22px}.nara-panel .button{font-size:11px;padding:12px 18px;min-height:48px}.sound-button{font-size:10px;min-height:44px;padding:10px 16px;max-width:150px}.resume{font-size:13px}#begin,#begin:hover{width:100%;height:auto;min-height:0;padding:0;font-size:0}}
/* v06: caligrafía de pergamino, exclusivamente en la correspondencia. */
@font-face{font-family:Almendra;src:url('assets/fonts/Almendra-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Almendra;src:url('assets/fonts/Almendra-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
.letters-scene .letter-body{font:400 23px/1.65 Almendra,Georgia,serif;letter-spacing:.15px;color:#392f24}
.letters-scene .letter-body p:first-child{font-weight:700}
.letters-scene .paper h3{font:700 38px/1.3 Almendra,Georgia,serif;letter-spacing:0}
.letters-scene .letter-signature{font:400 22px/1.5 Almendra,Georgia,serif}
@media(max-width:600px){.letters-scene .letter-body{font-size:21px;line-height:1.65}.letters-scene .paper h3{font-size:32px}.letters-scene .letter-signature{font-size:20px}}