/* Portfolio composition; shared components remain vendored and unmodified. */
.portfolio-home{--red:var(--accent);--rail-accent:var(--accent);--rail-focus:var(--accent);--rail-size-body:16px;--rail-size-meta:16px;background:var(--cream);color:var(--ink)}
.portfolio-home .wrap{max-width:1320px;width:calc(100% - 112px)}
.portfolio-home header{background:var(--cream)}
.portfolio-intro{padding-block:52px 34px}.portfolio-kicker{font:500 14px/1.5 var(--font-b, "Source Sans 3",sans-serif);letter-spacing:.02em}.portfolio-kicker>span{color:var(--muted)}
.portfolio-title{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;align-items:end;margin-top:24px}.portfolio-title h1{font:400 clamp(48px,6.6vw,92px)/.99 Georgia,serif;letter-spacing:-.065em;max-width:10ch;margin:0}.portfolio-title p{font:400 19px/1.55 "Source Sans 3",sans-serif;max-width:29ch;margin:0 0 5px;color:var(--muted)}.portfolio-title a{display:inline-block;margin-top:16px;color:var(--ink);text-decoration:underline;text-underline-offset:6px}.portfolio-title a span{margin-left:16px}
.studio{padding-bottom:64px;scroll-margin-top:90px}.studio-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.studio-heading .portfolio-kicker{display:none}.studio-heading h2{font:500 17px/1.4 "Source Sans 3",sans-serif;letter-spacing:0;margin:0}.studio-heading p{font-size:16px;color:var(--muted);margin:0}.studio-switch{margin-bottom:16px;width:100%;max-width:none;display:flex;--rail-segmented-bg:#e5e8e1;--rail-segmented-active-bg:#fff;--rail-segmented-text:var(--ink);--rail-segmented-radius:12px}.studio-switch button{flex:1;min-height:48px;font-size:16px;color:var(--ink);border-radius:9px}.studio-switch button[aria-pressed=true]{background:var(--ink);color:white}.studio-stage{isolation:isolate}.world{overflow:hidden;border-radius:16px;border:1px solid #d5d9cf;box-shadow:0 14px 35px -28px #182a30;margin-bottom:18px}.world[hidden]{display:none!important}.world-top{height:66px;display:flex;justify-content:space-between;align-items:center;padding:0 36px;border-bottom:1px solid #26302722;font:500 16px/1.2 "Source Sans 3",sans-serif}.world-top>span:first-child{font:600 26px/1 Georgia,serif;letter-spacing:-1px}.world-top>span:last-child{font-size:25px}.brand-dot{color:#ac482c}.world h3{font:400 clamp(36px,4.7vw,64px)/1.02 Georgia,serif;letter-spacing:-.05em;margin:18px 0}.world p{font:400 18px/1.5 "Source Sans 3",sans-serif;margin:14px 0}.small-label{font:500 14px/1.4 "Source Sans 3",sans-serif}.stay-layout,.flow-layout,.object-layout{display:grid;grid-template-columns:1fr 1fr;min-height:370px}.stay-copy,.flow-layout>div:first-child,.object-layout>div:last-child{padding:38px 44px}.world-stay{background:var(--cream);color:var(--ink)}.study-action{display:flex;gap:26px;align-items:center;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;color:inherit;padding:14px 0 10px;min-height:48px;font:600 16px/1.4 "Source Sans 3",sans-serif;cursor:pointer}.study-action span{font-size:21px}.world .demo-result{font-size:16px;min-height:48px;max-width:38ch;color:inherit;opacity:.85;margin-bottom:0}.room-art{position:relative;overflow:hidden;background:#c7bc9f;min-height:370px;isolation:isolate}.room-arch{position:absolute;inset:12% 20% 0;background:#a6bdb4;border-radius:50% 50% 0 0;overflow:hidden;box-shadow:-17px 1px 0 4px #e4ddc7}.room-horizon{position:absolute;inset:48% 0 0;background:linear-gradient(174deg,#577065 0 28%,#95a090 28% 43%,#d1c9aa 43%)}.room-sun{position:absolute;width:76px;height:76px;border-radius:50%;background:#b95c3c;left:52%;top:21%;z-index:2}.room-step{position:absolute;bottom:0;left:0;right:0;height:23%;background:#d8ccb2;transform:skewY(-7deg);transform-origin:left}.room-pool{position:absolute;bottom:-34%;left:7%;width:100%;height:61%;border-radius:50%;background:repeating-linear-gradient(178deg,#789fa0 0 10px,#94b2ab 12px 13px);transform:rotate(-8deg);box-shadow:0 -8px #f0e7d2}.room-caption{position:absolute;bottom:23px;left:26px;background:#e9e5d9;padding:7px 12px;border-radius:4px;color:var(--ink);font-size:14px;z-index:3}.world-stay[data-demo-active] .room-sun{transform:translateY(25px);background:#da8652}.world-stay[data-demo-active] .room-art{background:#b9a895}
.world-flow{background:#edf1fb;color:#1f3267}.world-flow h3{font-family:"Source Sans 3",sans-serif;font-weight:600;letter-spacing:-.065em}.flow-board{margin:28px 34px 28px 0;background:white;border:1px solid #c5d0e8;border-radius:13px;box-shadow:0 14px 30px #1427640a;padding:22px}.board-heading{display:flex;justify-content:space-between;gap:20px;font-size:18px;font-weight:600;margin-bottom:24px}.board-heading>span:last-child{color:#3f5ad2}.flow-board .rail-progress{margin-bottom:14px;--rail-progress-fill:#3555d0}.flow-board progress{accent-color:#3555d0}.task-row{display:flex;gap:12px;align-items:center;min-height:58px;border-top:1px solid #e1e6f1;cursor:pointer;font-size:16px}.task-row>span:last-child{margin-left:auto}.task-row input{width:20px;height:20px;accent-color:#3555d0;flex-shrink:0}.task-row:has(input:checked)>span:first-of-type{text-decoration:line-through;color:#667187}.concept-pill{display:inline-block;padding:7px 10px;border:1px solid #acbbdf;border-radius:6px;font-size:14px;margin-top:12px}
.world-object{background:var(--cream);color:var(--ink)}.world-object h3{font-family:"Source Sans 3",sans-serif;font-weight:650}.world-object .world-top>span:first-child{font:600 18px/1 "Source Sans 3",sans-serif;letter-spacing:-.5px}.object-layout{grid-template-columns:1fr 1fr}.lamp-art{position:relative;min-height:370px;isolation:isolate;overflow:hidden;background:#e2e8f0}.lamp-shade{position:absolute;left:20%;top:14%;width:60%;height:37%;border-radius:150px 150px 12px 12px;background:linear-gradient(100deg,#263e9f,#6087e1 49%,#294fa9);box-shadow:0 12px 14px -10px #172c71;z-index:3}.lamp-stem{position:absolute;left:46%;top:38%;width:8%;height:40%;background:linear-gradient(90deg,#234299,#7294df,#29499b);z-index:2}.lamp-foot{position:absolute;left:32%;width:36%;height:9%;top:76%;border-radius:50%;background:linear-gradient(100deg,#203b85,#688cdf,#29499b);z-index:3}.lamp-floor{position:absolute;left:18%;top:81%;width:65%;height:8%;border-radius:50%;background:#0b1f3a33;filter:blur(12px);transform:rotate(-6deg)}.lamp-glow{position:absolute;inset:30% 7% 0;opacity:0;background:radial-gradient(ellipse at top,#ffffd5,#ffffaf77 45%,transparent 70%);z-index:1}.lamp-art[data-lit] .lamp-glow{opacity:1}.lamp-art[data-lit] .lamp-shade{box-shadow:0 12px 20px -3px #fff5b4}.studio-caption{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted);line-height:1.5}
.portfolio-home section.band{padding-block:60px}.portfolio-home .portfolio-game{background:#223eec;color:white;border:0;padding-block:44px}.portfolio-game .cartel{background:transparent!important;color:white!important;border:0!important;box-shadow:none!important;padding:12px 0!important;min-height:0!important}.portfolio-game .cartel h2,.portfolio-game .cartel p,.portfolio-game .cartel span{color:inherit!important}.portfolio-home .portfolio-game .eyebrow{color:#e2e8ff}.portfolio-about{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-block:70px 120px;border-top:1px solid var(--line)}.portfolio-about img{float:left;object-fit:cover;border-radius:9px;margin:0 20px 15px 0}.portfolio-about h2{font-size:30px;line-height:1.1;letter-spacing:-1px;margin:0 0 18px}.portfolio-about p{clear:both;max-width:44ch;font:400 18px/1.5 "Source Sans 3",sans-serif}.portfolio-about a{color:var(--ink)}.portfolio-about .rail-tiles__tile{min-height:68px;justify-content:space-between;padding:16px;background:white;border:1px solid var(--line);font-size:16px}.portfolio-home :focus-visible{outline:3px solid var(--accent);outline-offset:5px}.portfolio-game :focus-visible{outline-color:white}
@media(prefers-reduced-motion:no-preference){.world[data-enter]{animation:studio-arrive .38s cubic-bezier(.2,.75,.2,1)}.room-sun,.room-art,.lamp-glow,.lamp-shade{transition:transform .45s,background .45s,opacity .45s,box-shadow .45s}.study-action span{transition:transform .2s}.study-action:hover span{transform:translate(3px,-3px)}@keyframes studio-arrive{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}}
@media(min-width:1500px){.portfolio-intro{padding-top:65px}.portfolio-title h1{max-width:13ch}}
@media(max-width:850px){.portfolio-home .wrap{width:calc(100% - 48px)}.portfolio-title{gap:28px;grid-template-columns:1.2fr 1fr}.portfolio-title h1{font-size:60px}.portfolio-title p{font-size:17px}.stay-copy,.flow-layout>div:first-child,.object-layout>div:last-child{padding:30px 25px}.world h3{font-size:43px}.flow-board{margin:22px 20px 22px 0;padding:16px}.world-top{padding-inline:25px}.portfolio-about{gap:30px}}
@media(max-width:600px){.portfolio-home .wrap{width:calc(100% - 36px)}.portfolio-intro{padding-block:28px 26px}.portfolio-title{display:block;margin-top:17px}.portfolio-title h1{font-size:55px;max-width:12ch}.portfolio-title p{font-size:17px;max-width:32ch;margin:19px 0 0}.portfolio-title a{margin-top:10px}.studio-heading{display:block;margin-bottom:12px}.studio-heading p{margin-top:4px;font-size:16px}.studio-switch{gap:3px;padding:4px}.studio-switch button{font-size:14px;min-height:52px;padding:8px 5px;white-space:normal;line-height:1.25}.world-top{height:56px;padding-inline:20px}.world-top>span:nth-child(2){font-size:13px;max-width:15ch;text-align:center}.world-top>span:first-child{font-size:23px}.stay-layout,.flow-layout,.object-layout{grid-template-columns:1fr}.stay-copy,.flow-layout>div:first-child,.object-layout>div:last-child{padding:26px}.world h3{font-size:47px;margin:13px 0}.world p{font-size:17px}.room-art{min-height:245px;grid-row:2}.room-sun{width:57px;height:57px}.world .demo-result{min-height:0;font-size:16px}.world .study-action{margin-top:5px}.flow-board{margin:0 20px 24px;padding:20px}.lamp-art{min-height:265px;grid-row:2}.object-layout>div:last-child{grid-row:1}.studio-caption{display:block;font-size:14px}.studio-caption>span{display:block}.studio-caption>span:last-child{margin-top:5px}.studio{padding-bottom:35px}.portfolio-home section.band{padding-block:38px}.portfolio-about{grid-template-columns:1fr;padding-block:40px 100px;gap:36px}.portfolio-about h2{font-size:27px}.portfolio-about .rail-tiles__heading{font-size:23px}.portfolio-home .bh p{font-size:17px}.portfolio-home .bh h2{font-size:32px}}
@media(min-width:701px){.portfolio-home .rail-bottomnav{position:absolute;top:6px;bottom:auto;left:50%;transform:translateX(-50%);width:auto;min-width:410px;box-shadow:none;background:transparent;border:0;border-radius:0;padding:0;z-index:30}.portfolio-home .rail-bottomnav__link{min-height:45px;padding:6px 13px}.portfolio-home .rail-bottomnav__icon{display:none}.portfolio-home .rail-bottomnav__label{font-size:15px}.portfolio-home .portfolio-intro{padding-top:30px;padding-bottom:24px}.portfolio-home .portfolio-title{margin-top:14px}.portfolio-home .portfolio-title h1{font-size:clamp(48px,5.7vw,76px);max-width:13ch}}
@media(min-width:701px) and (max-width:1000px){.portfolio-home .rail-bottomnav{min-width:340px}.portfolio-home .rail-bottomnav__link{padding-inline:8px}.portfolio-home .rail-bottomnav__label{font-size:14px}}
.portfolio-home .studio-switch button:disabled{cursor:default}.portfolio-home .world-object{--rail-shimmer:#fff;--rail-shimmer-iterations:2;--rail-shimmer-duration:4s}
.portfolio-background{padding-block:24px;border-top:1px solid var(--line)}.portfolio-background>summary{font-size:18px;cursor:pointer;min-height:48px;padding-block:12px}.portfolio-background .wrap{width:100%}.portfolio-background .band{background:none!important}.portfolio-home .rail-bottomnav{z-index:110}.portfolio-game .friccion-entrada{background:transparent;border:0;padding:10px 0;box-shadow:none;color:white}.portfolio-game .friccion-entrada__eyebrow,.portfolio-game .friccion-entrada__titulo,.portfolio-game .friccion-entrada__copy,.portfolio-game .friccion-entrada__cta{color:white}.portfolio-game .friccion-entrada__copy{max-width:55ch}.portfolio-game .friccion-entrada__cta{border-color:#ffffff80}

/* The portfolio opens as a working studio, with a clear input and visible result. */
/* Site chrome inherits the existing navy / white / blue brand tokens. */
.portfolio-home{background:var(--paper);color:var(--ink)}.portfolio-home header.nav{background:var(--paper);border-color:var(--line)}.portfolio-home .nav__brand,.portfolio-home .nav__lang,.portfolio-home .nav__more>summary{color:var(--ink)}.portfolio-home .nav__lang{border-color:var(--line)}.portfolio-home .portfolio-intro{padding-top:35px;padding-bottom:30px}.portfolio-home .portfolio-kicker{color:var(--ink)}.portfolio-home .portfolio-kicker>span{color:var(--muted)}.portfolio-home .portfolio-title{align-items:center}.portfolio-home .portfolio-title h1{font-size:clamp(54px,6.7vw,92px);line-height:.98;letter-spacing:-.05em;max-width:12ch}.portfolio-title h1 em{color:var(--accent);font-weight:400}.portfolio-home .portfolio-title p{color:var(--muted)}.portfolio-home .portfolio-title a{color:var(--ink)}.portfolio-home .studio-heading p,.portfolio-home .studio-caption{color:var(--muted)}.portfolio-home .studio-heading h2{color:var(--ink)}.portfolio-home .studio-switch{background:var(--cream);padding:5px;border:1px solid var(--line);border-radius:14px}.portfolio-home .studio-switch button{color:var(--ink);background:transparent}.portfolio-home .studio-switch button[aria-pressed=true]{color:var(--paper);background:var(--accent)}.portfolio-home .world{border:1px solid var(--line);border-radius:18px;box-shadow:none}.portfolio-home .studio{padding-bottom:58px}.portfolio-home section.band{background:var(--cream);color:var(--ink)}.portfolio-home section.portfolio-game{background:var(--accent);color:#fff}.portfolio-home .portfolio-about,.portfolio-home .portfolio-background{color:var(--ink);background:var(--cream);padding-inline:32px;border-radius:14px;margin-block:25px}.portfolio-home footer{color:var(--muted)}.portfolio-home footer a{color:var(--ink)}.portfolio-home #brands{border-top:0}

.light-control{margin:23px 0 18px}.light-label{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:16px;font-weight:600}.light-label output{font-variant-numeric:tabular-nums;font-size:18px}.light-control input{display:block;width:100%;height:44px;margin:3px 0 0;accent-color:var(--accent);cursor:ew-resize;touch-action:pan-y}.light-ends{display:flex;justify-content:space-between;font-size:14px}.scene-materials{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.scene-materials legend{font-size:16px;margin-bottom:8px}.scene-materials button{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;min-height:44px;border:1px solid var(--line);background:transparent;border-radius:999px;color:var(--ink);font:500 15px/1.2 "Source Sans 3",sans-serif;cursor:pointer}.scene-materials button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}.material-dot{width:15px;height:15px;border-radius:50%;border:1px solid #ffffff80}.material-dot--sand{background:#d3c7a9}.material-dot--clay{background:#bf836d}.material-dot--blue{background:#567996}.world-stay .stay-copy{padding:30px 36px}.world-stay h3{font-size:clamp(34px,3.8vw,53px)}.world-stay .demo-result{font-size:14px;line-height:1.45;min-height:0}.world-stay .room-art{min-height:475px;background:var(--scene-wall,#c7bc9f);transition:background .35s}.room-art .room-arch{background:var(--scene-sky,#afd0d4);box-shadow:-18px 2px 0 5px var(--scene-edge,#e4ddc7);z-index:1;transition:background .15s,box-shadow .3s}.room-art .room-sun{width:65px;height:65px;left:var(--scene-sun-x,51%);top:var(--scene-sun-y,17%);background:var(--scene-sun-color,#ecac65);z-index:3;box-shadow:0 0 50px 5px #ffffbf22;transition:left .14s linear,top .14s linear,background .25s}.room-art .room-stars{position:absolute;inset:12% 20% 0;border-radius:50% 50% 0 0;z-index:2;pointer-events:none;opacity:var(--scene-stars,0);background-image:radial-gradient(circle at 23% 25%,#f7f5da 1px,transparent 2px),radial-gradient(circle at 77% 20%,#f7f5da 1px,transparent 2px),radial-gradient(circle at 35% 12%,#f7f5da 1px,transparent 2px),radial-gradient(circle at 60% 32%,#f7f5da 1px,transparent 2px),radial-gradient(circle at 48% 41%,#f7f5da 1px,transparent 2px);transition:opacity .3s}.room-art .room-horizon{filter:brightness(calc(1 - var(--scene-stars,0)*.65));transition:filter .2s,transform .5s}.room-art .room-step{z-index:4;background:var(--scene-edge,#d8ccb2);box-shadow:0 -8px 20px #2d382414;transition:background .3s}.room-art .room-pool{z-index:5;background:repeating-linear-gradient(178deg,transparent 0 13px,#c3e7dc33 14px 15px),var(--scene-water,#789fa0);box-shadow:0 -8px var(--scene-edge,#f0e7d2);transition:background .2s,transform .5s,box-shadow .3s}.room-art .room-caption{z-index:6;background:#f0ebdc;color:var(--ink)}.room-shadow{position:absolute;left:8%;top:53%;width:84%;height:72%;background:#121d32;opacity:var(--scene-shade,.1);transform:skewX(var(--scene-shadow,0deg));transform-origin:top;z-index:3;pointer-events:none;transition:transform .15s,opacity .2s}.water-shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 15%,#ffffff33 45%,transparent 65%);transform:translateX(-25%)}
@media(min-width:701px){.portfolio-home .rail-bottomnav__link{color:var(--muted)}.portfolio-home .rail-bottomnav__link[aria-current=page]{background:var(--accent);color:var(--paper)}.portfolio-home .rail-bottomnav__link:hover{background:var(--cream);color:var(--ink)}}
@media(prefers-reduced-motion:no-preference){.room-art .water-shine{animation:water-light 4s ease-in-out 1 alternate}.world[data-enter]{animation:studio-scene-enter .55s cubic-bezier(.2,.75,.2,1)}.scene-materials button{transition:background .25s,color .25s,transform .25s}.scene-materials button:active{transform:scale(.94)}@keyframes water-light{to{transform:translateX(25%)}}@keyframes studio-scene-enter{from{opacity:.25;clip-path:inset(0 0 12% 0 round 18px);translate:0 12px}to{opacity:1;clip-path:inset(0 0 0 0 round 18px);translate:0 0}}}
@media(max-width:600px){.portfolio-home .portfolio-title h1{font-size:58px;max-width:11ch}.portfolio-home .portfolio-title p{margin-top:18px;font-size:17px}.portfolio-home .portfolio-intro{padding-top:24px;padding-bottom:24px}.world-stay .stay-layout{display:flex;flex-direction:column}.world-stay .room-art{order:-1;min-height:260px}.world-stay .stay-copy{padding:23px}.world-stay h3{font-size:38px}.world-stay .stay-copy>p:first-of-type{font-size:16px}.world-stay .light-control{margin-top:15px}.portfolio-home .portfolio-about,.portfolio-home .portfolio-background{padding-inline:20px}.room-art .room-sun{width:45px;height:45px}.portfolio-home .studio-switch button{font-size:13px}}
/* Product puzzle: brand-owned skin, shared rail spotlight and shimmer feedback. */
.product-puzzle{background:var(--cream);color:var(--ink);--rail-spotlight-color:var(--accent);--rail-spotlight-duration:2s;--rail-spotlight-iterations:2;--rail-shimmer:var(--accent);--rail-shimmer-duration:1s;--rail-shimmer-iterations:1}.puzzle-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:32px}.product-puzzle h3{font-size:clamp(32px,4vw,49px);margin:12px 0}.product-puzzle p{font-size:17px;line-height:1.5}.puzzle-coach h4{font-size:20px;line-height:1.3;margin:18px 0 8px}.puzzle-coach p{min-height:52px}.puzzle-meter{height:6px;background:var(--line);overflow:hidden;border-radius:4px}.puzzle-meter>span{display:block;width:0;height:100%;background:var(--accent);transition:width .5s}.puzzle-options{display:grid;gap:9px}.puzzle-options button,.puzzle-reset{padding:14px 16px;min-height:48px;font:600 16px/1.4 'Source Sans 3',sans-serif;border:1px solid var(--accent);color:var(--accent);background:white;border-radius:8px;text-align:left;cursor:pointer}.puzzle-options button:hover{background:var(--accent);color:white}.puzzle-device{background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:22px;align-self:start;transform-origin:center}.puzzle-device-top{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:15px}.puzzle-product{display:flex;align-items:center;gap:22px;padding:22px 0}.puzzle-product p{font-size:15px;margin:4px 0}.puzzle-lamp{position:relative;display:block;width:85px;height:100px;flex-shrink:0}.puzzle-lamp:before{content:'';position:absolute;left:6px;top:3px;width:74px;height:45px;background:var(--accent);border-radius:70px 70px 5px 5px}.puzzle-lamp:after{content:'';position:absolute;width:10px;height:42px;background:var(--ink);left:38px;top:46px}.puzzle-lamp i{position:absolute;bottom:4px;left:17px;width:54px;height:9px;background:var(--ink);border-radius:50%}.puzzle-hint{color:var(--muted);font-size:14px!important}.puzzle-target{display:flex;width:100%;gap:12px;align-items:center;border:1px dashed var(--muted);background:var(--cream);color:var(--ink);padding:17px 13px;min-height:72px;margin:12px 0;border-radius:9px;font:500 16px/1.4 'Source Sans 3',sans-serif;text-align:left;cursor:pointer;transition:background .3s,transform .3s,border-color .3s}.puzzle-target b{display:grid;place-items:center;flex-shrink:0;width:27px;height:27px;border:1px solid currentColor;border-radius:50%}.puzzle-target-arrow{margin-left:auto}.puzzle-target:hover,.puzzle-target[aria-pressed=true]{border-style:solid;border-color:var(--accent);transform:translateY(-3px)}.puzzle-target[data-solved]{border-style:solid;background:#eaf2fd;color:var(--accent)}.puzzle-target-primary[data-solved]{background:var(--accent);color:white}.puzzle-receipt{border-top:2px dashed var(--line);margin-top:22px;padding-top:22px}.puzzle-receipt strong{font-size:21px}.puzzle-reset{margin-top:14px}.puzzle-target:active,.puzzle-options button:active{transform:scale(.96)}
@media(max-width:700px){.puzzle-layout{grid-template-columns:1fr;padding:20px;gap:18px}.puzzle-device{grid-row:1;padding:16px}.product-puzzle .world-top{padding:18px;height:auto;gap:12px}.product-puzzle .world-top>span:first-child{font-size:23px}.product-puzzle .world-top>span:last-child{font-size:17px}.puzzle-product{padding:12px 0}.puzzle-target{min-height:60px;padding:11px;margin:9px 0}.puzzle-brief h3{font-size:32px}.puzzle-coach{scroll-margin-bottom:90px}}
@media(prefers-reduced-motion:reduce){.puzzle-target,.puzzle-meter>span{transition:none}.puzzle-target:hover,.puzzle-target[aria-pressed=true],.puzzle-target:active{transform:none}}
.puzzle-options{scroll-margin-bottom:110px}.puzzle-receipt{scroll-margin-bottom:110px}

/* Keep decisions beside the exact interface element being repaired. */
.product-puzzle .puzzle-layout{display:block;max-width:760px;margin-inline:auto;padding:24px 32px 32px}.product-puzzle .puzzle-brief>h3{font-size:clamp(28px,3.4vw,40px);margin:8px 0}.product-puzzle .puzzle-brief>p{margin:10px 0 18px}.product-puzzle .puzzle-meter{margin-bottom:24px}.product-puzzle .puzzle-device{width:100%}.puzzle-decision{padding:4px 14px 18px;border-left:3px solid var(--accent);margin:0 0 20px 13px;scroll-margin-bottom:110px}.puzzle-decision .puzzle-coach h4{margin-top:8px}.puzzle-decision .puzzle-coach p{min-height:0;margin-block:8px 14px}.puzzle-decision .puzzle-options{grid-template-columns:1fr 1fr}.puzzle-decision .puzzle-options>button:only-child{grid-column:1/-1}.puzzle-decision:has(.puzzle-reset:not([hidden])){margin-top:20px}
@media(max-width:600px){.product-puzzle .puzzle-layout{padding:20px 16px}.puzzle-decision .puzzle-options{grid-template-columns:1fr}.puzzle-decision{padding-inline:10px;margin-left:5px}.product-puzzle .puzzle-brief>p{font-size:16px}}
/* UAT: orientation, readable commerce cards, and one clear navigation spacer. */
.portfolio-jumps{width:min(calc(100% - 40px),var(--max));margin:0 auto 26px;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}.portfolio-jumps a{min-height:44px;display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--line);border-radius:7px;text-decoration:none;font-size:16px}.gear-card{width:320px;min-width:280px;display:flex;flex-direction:column}.gear-image{display:flex;align-items:center;justify-content:center;background:white;height:230px;padding:22px}.gear-image img{width:100%;height:100%;object-fit:contain}.gear-card .rail-card__body{flex:1;display:flex;flex-direction:column}.gear-card .rail-card__description{font-size:17px}.gear-review{display:inline-flex;align-items:center;min-height:44px;font-size:16px;margin-top:auto}.gear-amazon{text-align:center;font-size:16px;min-height:48px;width:100%}.portfolio-home [hidden]{display:none!important}#desk-reviews{scroll-margin-top:85px}#selected-work,#sequence,#touch-field,#rocket,#cifras{scroll-margin-top:85px}
@media(max-width:600px){.portfolio-jumps{gap:8px;flex-direction:row}.portfolio-jumps a{font-size:14px}.gear-card{width:280px;min-width:280px}.gear-image{height:210px}}

.gear-card .rail-card__description{order:0;padding:0;margin:12px 0 16px}.gear-card .gear-review{margin-top:auto}.gear-card .gear-amazon{margin-top:12px}.portfolio-jumps{width:calc(100% - 112px);max-width:1320px}@media(max-width:700px){.portfolio-jumps{width:calc(100% - 40px)}}
#desk-reviews .gear-card .rail-card__description{order:0;padding:0;margin:12px 0 16px}
@media(max-width:700px){.portfolio-home .rail__scroller{-webkit-mask-image:none;mask-image:none}#desk-reviews .rail__arrows{display:flex}#desk-reviews .rail__header{flex-wrap:wrap}#desk-reviews .rail__arrows{margin-left:auto}}

/* Accessory actions need their own inset; media cards otherwise end at padding-bottom:0. */
#desk-reviews .gear-card .rail-card__body{padding:24px;flex:1 1 auto}
#desk-reviews .gear-card .gear-amazon{box-sizing:border-box;max-width:100%;flex-shrink:0;margin-bottom:0}

/* Compact folder stack: four exposed labels above two shared backing sheets. */
.portfolio-jumps.folder-links{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:8px;margin-bottom:26px;padding-bottom:8px}
.portfolio-jumps.folder-links:before,.portfolio-jumps.folder-links:after{content:"";position:absolute;inset:14px 4px 4px;border:1px solid #bdcbe0;border-radius:10px;background:#e3ebfa;z-index:-1}
.portfolio-jumps.folder-links:after{inset:18px 8px 0;background:#f0f4fb;z-index:-2}
.folder-links a{position:relative;display:flex;align-items:center;min-height:56px;margin-top:0;padding:10px 12px;justify-content:center;text-align:center;min-width:0;overflow-wrap:anywhere;border:1px solid #bdcbe0;border-radius:10px 10px 0 0;background:#f0f4fb;color:#0b1f3a;font-weight:600;font-size:18px;transition:transform .2s,background .2s,box-shadow .2s}
.folder-links a+a{margin-left:-1px}.folder-links a:nth-child(even){background:#eaf0f9}
.folder-links a:hover,.folder-links a:focus-visible{transform:translateY(-4px);background:#e3ebfa;box-shadow:0 8px 20px #0b1f3a12}
.folder-links a:focus-visible,.folder-tabs button:focus-visible{outline:3px solid #1d4ed8;outline-offset:4px}
.studio-switch.folder-tabs{gap:6px;padding:12px 0 0;margin-bottom:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.studio-switch.folder-tabs button{border:1px solid #bdcbe0;border-bottom:0;border-radius:12px 12px 0 0;background:#eaf0f9;color:#0b1f3a;min-height:52px;padding:12px 16px;font-weight:600;transition:background .2s,transform .2s;white-space:normal}
.studio-switch.folder-tabs button[data-active]{background:#0b1f3a;color:#fff;transform:translateY(-4px);box-shadow:0 4px 0 #0b1f3a}
.folder-tabs+.studio-stage .world{border-top-left-radius:0;border-top-right-radius:0}
@media(max-width:600px){.portfolio-jumps.folder-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.folder-links a{font-size:12px;min-height:52px;padding:8px 3px}.studio-switch.folder-tabs{flex-direction:row}.studio-switch.folder-tabs button{font-size:15px;padding:12px 8px;min-width:0}}
@media(prefers-reduced-motion:reduce){.folder-links a,.studio-switch.folder-tabs button{transition:none;transform:none!important}}

/* A labeled, keyboard-operable light switch with a persistent accessible name. */
.lamp-switch{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:8px 4px;border:0;background:transparent;color:var(--ink);font:600 17px/1.3 "Source Sans 3",sans-serif;text-align:left;cursor:pointer;touch-action:manipulation}
.lamp-switch__track{box-sizing:border-box;display:block;position:relative;flex:0 0 60px;width:60px;height:34px;border:1px solid #72829a;border-radius:999px;background:#dce3ed;transition:background .2s,border-color .2s}
.lamp-switch__thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0b1f3a35;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.lamp-switch[aria-checked=true] .lamp-switch__track{background:#1d4ed8;border-color:#1d4ed8}
.lamp-switch[aria-checked=true] .lamp-switch__thumb{transform:translateX(26px)}
.lamp-switch__state{display:block;margin-top:3px;font-size:14px;font-weight:400}
.lamp-switch:focus-visible{outline:3px solid #1d4ed8;outline-offset:5px;border-radius:8px}
.lamp-switch:disabled{opacity:.6;cursor:default}
@media(prefers-reduced-motion:reduce){.lamp-switch__track,.lamp-switch__thumb{transition:none}}

/* One decision at a time on phones; the reading pane accommodates enlarged text. */
@media(max-width:700px){
 #studio{scroll-margin-top:64px;padding-top:20px;padding-bottom:24px}
 .studio-heading{margin-bottom:6px}.studio-heading p{display:none}
 .studio-switch.folder-tabs button{min-height:44px;padding-block:8px}
 .product-puzzle[data-playing] .puzzle-brief,.product-puzzle[data-playing] .puzzle-target:not([aria-pressed=true]),.product-puzzle[data-playing] .puzzle-product,.product-puzzle[data-playing] .puzzle-hint{display:none}
 .product-puzzle .world-top{padding:10px 14px;min-height:44px}
 .product-puzzle .world-top>span:first-child{font-size:19px}
 .product-puzzle .puzzle-layout{padding:10px;max-height:calc(100vh - 250px);max-height:calc(100svh - 250px);overflow-y:auto;overscroll-behavior:contain}
 .product-puzzle .puzzle-device{padding:10px;border-radius:12px}
 .product-puzzle .puzzle-device-top{font-size:12px;padding-bottom:6px}
 .product-puzzle .puzzle-target{min-height:44px;padding:8px;margin:8px 0;font-size:14px}
 .product-puzzle .puzzle-decision{padding:0 0 0 10px;margin:10px 0 0;border-left-width:2px}
 .product-puzzle .puzzle-coach h4{font-size:18px;line-height:1.2;margin:0 0 8px}
 .product-puzzle .puzzle-coach p{font-size:14px;line-height:1.4;margin:0 0 10px}
 .product-puzzle .puzzle-options{gap:8px;grid-template-columns:1fr}
 .product-puzzle .puzzle-options button,.product-puzzle .puzzle-reset{min-height:44px;padding:9px 12px;font-size:14px;line-height:1.3}
 .product-puzzle[data-complete] .puzzle-target{display:none}
 .product-puzzle .puzzle-receipt{margin-top:12px;padding-top:12px}
 .product-puzzle .puzzle-receipt p{font-size:14px}
}

/* Single-screen onboarding: content scrolls; the escape action remains available. */
.onboarding{scroll-margin-top:64px;max-width:560px;margin:auto;border:1px solid var(--line);border-radius:20px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 150px);max-height:calc(100svh - 150px)}
.onboarding-screen{padding:24px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.onboarding-screen h3{font:400 clamp(25px,5vw,34px)/1.15 Georgia,serif;margin:8px 0 14px}
.onboarding-screen p,.onboarding-screen li{font-size:16px;line-height:1.45}
.onboarding-screen ul{padding-left:20px}.onboarding-screen li+li{margin-top:8px}
.onboarding-screen .onboarding-kicker{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.onboarding-actions{flex-shrink:0;padding:12px 20px 18px;border-top:1px solid var(--line);background:var(--paper);display:grid;gap:8px}
.onboarding-button{display:block;width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--paper);font:600 16px/1.3 "Source Sans 3",sans-serif;cursor:pointer;text-align:center}
.onboarding-button--primary{background:var(--accent);border-color:var(--accent);color:white}
.onboarding-screen>.onboarding-button{margin-top:10px}
.onboarding [data-onboarding-actions] .onboarding-button--primary{min-height:56px}
.onboarding-button:focus-visible,.onboarding summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.onboarding-example,.onboarding-success{padding:16px;background:var(--cream);border:1px solid var(--line);border-radius:12px;margin:16px 0}
.onboarding-example span{display:block;font-size:12px;margin-bottom:8px}
.onboarding-feelings{border:0;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.onboarding-feelings legend{font-size:14px;margin-bottom:8px}
.onboarding-feelings button{width:auto;flex:1;min-width:80px;font-size:13px;padding:8px}
.onboarding-feelings button[aria-pressed=true]{background:var(--ink);color:white}
.onboarding details{margin-top:18px}.onboarding summary{cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline}
@media(max-width:600px){#sequence .bh{margin-bottom:16px}#sequence .bh h2{font-size:30px}.onboarding-screen{padding:18px}.onboarding-actions{padding:10px 14px 14px}.onboarding-screen h3{font-size:26px}.onboarding-screen p{margin:10px 0}}
.mobile-context{margin:8px 0 18px;max-width:65ch}.mobile-context summary{display:list-item;cursor:pointer;min-height:44px;padding-block:10px;color:var(--accent);font-size:16px;font-weight:600}.mobile-context ul{padding-left:20px}.mobile-context li{font-size:16px;line-height:1.5;margin-bottom:8px}
/* Actual miniature task app: inputs and checkboxes change the working board. */
.task-app__bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}.task-app__bar strong{font:700 26px Georgia,serif;color:var(--accent)}.task-app__bar span{font-size:12px;color:var(--muted)}
.task-app__field{display:block;font-size:14px;font-weight:600;margin:16px 0 10px}.task-app__field input{display:block;box-sizing:border-box;width:100%;min-height:48px;margin-top:7px;padding:12px;border:1px solid #91a2bc;border-radius:9px;background:white;color:var(--ink);font:400 16px "Source Sans 3",sans-serif}
.task-app__permission{display:flex;align-items:center;gap:12px;min-height:64px;padding:14px;border:1px solid var(--line);border-radius:10px;font-size:16px}
.task-app__permission input,.task-app__list input{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}
.onboarding-screen .task-app__error{font-size:14px;color:#87351a;margin:8px 0}.task-app__error:empty{display:none}
.onboarding-screen progress{display:block;width:100%;height:7px;accent-color:var(--accent)}
.onboarding-screen .task-app__list{list-style:none;padding:0;margin:18px 0}.task-app__list li{border:1px solid var(--line);border-radius:10px;background:var(--cream);margin:8px 0}.task-app__list label{display:flex;align-items:center;gap:12px;padding:14px;min-height:48px;cursor:pointer}.task-app__list span{overflow-wrap:anywhere}.task-app__list .is-done span{text-decoration:line-through;color:var(--muted)}
@media(prefers-reduced-motion:no-preference){.task-app__list li{animation:task-added .2s ease-out}@keyframes task-added{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}}

/* Shared rail-kit spotlight and shimmer, using the portfolio's blue palette. */
#desk-reviews .gear-card{--rail-spotlight-color:#1d4ed8;--rail-spotlight-light:#a7c7ff;--rail-spotlight-width:2px;--rail-spotlight-duration:4s;--rail-spotlight-iterations:3}
#desk-reviews .gear-amazon[data-rail-shimmer]{--rail-shimmer:#fff;--rail-shimmer-duration:3s;--rail-shimmer-iterations:3;background-color:var(--accent);background-image:linear-gradient(115deg,transparent 30%,#ffffff50 48%,transparent 66%);background-size:240% 240%}
#desk-reviews .gear-amazon[data-rail-shimmer]:hover{background-color:var(--accent-deep)}
#desk-reviews .gear-card:not([data-motion-visible]):before,#desk-reviews .gear-card:not([data-motion-visible]) .gear-amazon{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#desk-reviews .gear-card:before,#desk-reviews .gear-amazon{animation:none!important}#desk-reviews .gear-amazon[data-rail-shimmer]{background-image:none}}

/* Accessory light: full perimeter, overhead wash and room for the lifted card. */
#desk-reviews .rail__scroller{padding-top:22px;padding-bottom:40px;scroll-padding-inline:16px}
#desk-reviews .gear-card{--rail-spotlight-width:2px;--rail-spotlight-light:#fff;border-color:#9db8ed;transform-origin:center;box-shadow:0 8px 18px #142b5014;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
#desk-reviews .gear-card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at var(--gear-light-x,50%) -8%,#ffffffb8 0%,#94baff30 32%,transparent 65%);opacity:.28;transition:opacity .28s ease;box-shadow:inset 0 2px 1px #fff,inset 1px 0 #adc9ff80,inset -1px 0 #adc9ff80,inset 0 -1px #83a9ed80}
#desk-reviews .gear-card:is(:focus-within,[data-spotlight-active]){z-index:4;transform:translateY(-5px) scale(1.025);border-color:#5c8ef1;box-shadow:0 18px 28px -12px #122e646b,0 4px 12px #2454db24}
#desk-reviews .gear-card:is(:focus-within,[data-spotlight-active])::after{opacity:.8}
#desk-reviews .gear-amazon[data-rail-shimmer]{background-image:linear-gradient(112deg,transparent 25%,#ffffff24 38%,#ffffffb3 48%,#ffffff66 52%,transparent 67%);--rail-shimmer-duration:2.6s;box-shadow:inset 0 1px #ffffff70,0 4px 12px #2048ad30}
@media(hover:hover){#desk-reviews .gear-card:hover{z-index:4;transform:translateY(-5px) scale(1.025);border-color:#5c8ef1;box-shadow:0 18px 28px -12px #122e646b,0 4px 12px #2454db24}#desk-reviews .gear-card:hover::after{opacity:.8}}
@media(prefers-reduced-motion:reduce){#desk-reviews .gear-card,#desk-reviews .gear-card::after{transition:none}#desk-reviews .gear-card:is(:hover,:focus-within,[data-spotlight-active]){transform:none}#desk-reviews .gear-amazon[data-rail-shimmer]{background-image:none}}
/* One real booking task, with two deliberately different hierarchies. */
.booking-mission{padding:12px 14px;border-left:3px solid var(--accent);background:#edf3ff;font-size:16px!important}.booking-version{font-size:12px;font-weight:700;color:var(--accent)}
.booking-slots{display:grid;gap:8px;margin:16px 0}.booking-slots button{text-align:left}.booking-slots [aria-pressed=true],.booking-opinion [aria-pressed=true]{background:var(--accent);color:white;border-color:var(--accent)}
.booking-noise{font-size:14px}.booking-noise>p{font-size:14px!important;line-height:1.45!important}.booking-noise details{display:inline-block;vertical-align:top;margin:4px;padding:9px 12px;border-radius:5px}.booking-noise summary{font-size:14px}.booking-status{font-size:15px!important;min-height:24px}.booking-opinion{display:flex;gap:8px;flex-wrap:wrap}.booking-receipt{padding:22px;border:1px solid #9fbbe9;background:#eef4ff;border-radius:12px}.booking-receipt strong{font-size:24px}.booking-lesson{margin-top:20px}.booking-lesson li{font-size:16px;line-height:1.5;margin:10px 0}
.onboarding[data-presentation=busy] .booking-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.onboarding[data-presentation=busy] .booking-slots button{font-size:14px}.onboarding[data-presentation=guided] .booking-slots button{min-height:54px}
@media(prefers-reduced-motion:no-preference){.onboarding[data-presentation=guided] .booking-receipt{animation:booking-confirm .35s ease-out}@keyframes booking-confirm{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}}

.booking-adventures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.booking-adventure{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0;padding:18px 14px;border:1px solid #adc2e5;border-radius:15px;background:#f6f8ff;color:var(--ink);text-align:left;cursor:pointer;font:400 15px/1.35 "Source Sans 3",sans-serif;box-shadow:0 7px 20px #17345b0c}
.booking-adventure strong{font:400 26px/1.2 Georgia,serif}.booking-adventure__start{margin-top:auto;padding-top:8px;font-weight:700;color:var(--accent)}
.booking-adventure__preview{display:grid;gap:5px;height:92px;padding:12px;background:white;border:1px solid #d7e1ef;border-radius:8px;box-sizing:border-box}.booking-adventure__preview i{display:block;height:5px;background:#b4c2d9;border-radius:3px}.booking-adventure[data-kind=busy] .booking-adventure__preview{grid-template-columns:1fr 1fr;align-content:center}.booking-adventure[data-kind=busy] .booking-adventure__preview i:nth-child(3n){grid-column:1/-1}
.booking-adventure[data-kind=guided] .booking-adventure__preview i:last-child{height:20px;background:var(--accent);width:72%}.booking-adventure[data-kind=guided] .booking-adventure__preview i:nth-child(2){width:65%}.booking-adventure[data-chosen]{border-color:var(--accent);box-shadow:0 10px 25px #1d4ed820}
@media(max-width:480px){.booking-adventures{gap:10px}.booking-adventure{padding:14px 10px;font-size:13px}.booking-adventure strong{font-size:23px}}

/* Visible introduction and one concrete action per studio. */
.portfolio-home #studio{padding-top:36px;scroll-margin-top:84px}
.portfolio-home .studio-heading{display:block;padding:22px 0;margin-bottom:12px}
.portfolio-home .studio-heading h2{font-size:clamp(32px,5vw,52px);line-height:1.08;color:var(--ink);margin:10px 0}
.portfolio-home .studio-heading p{display:block;font-size:17px;color:var(--ink);margin:10px 0;max-width:40ch}
.studio-mini{max-width:640px;margin:auto;padding:24px;box-sizing:border-box}
.world .studio-mini h3{font-size:clamp(26px,4vw,36px);margin:10px 0;line-height:1.15}
.world .studio-mini p{font-size:16px;line-height:1.45;margin:10px 0 16px}
.mini-shop{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.mini-shop .puzzle-lamp{align-self:center;height:90px}.mini-shop .study-action{margin:0;min-height:48px;width:100%}
.mini-shop [role=status]:empty{display:none}.mini-shop [role=status]{font-size:16px;line-height:1.4}
.studio-lesson{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}.studio-lesson summary{min-height:44px;padding:10px 0;cursor:pointer;color:var(--accent);font-weight:600}
.focus-modes{display:flex;gap:8px;margin:16px 0}.focus-modes button,.focus-example button{min-height:48px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);padding:10px;font:600 16px/1.3 'Source Sans 3',sans-serif;cursor:pointer}
.focus-modes button{flex:1}.focus-modes button[aria-pressed=true]{background:var(--accent);color:white;border-color:var(--accent)}
.focus-example{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.focus-example button{width:100%}
.focus-noise{padding:14px 10px;margin:6px 0;background:#e5ecf8;border-radius:8px;font-size:16px;color:var(--ink)}
.focus-example[data-clear] .focus-noise{visibility:hidden}.focus-example[data-clear] button{background:var(--accent);color:white;border-color:var(--accent);box-shadow:0 5px 16px #1d4ed833}
[data-invoice-result]:not(:empty){padding-top:12px;font-size:16px}
@media(prefers-reduced-motion:no-preference){.focus-example button{transition:background .25s,color .25s,box-shadow .25s}.focus-example[data-clear] button{animation:focus-hint .35s ease-out}@keyframes focus-hint{from{transform:scale(.96)}to{transform:scale(1)}}}
@media(max-width:600px){.studio-mini{padding:18px 16px}.focus-noise{padding:10px;font-size:14px}.mini-shop{padding:14px}.studio-mini .puzzle-lamp{height:90px}}

.portfolio-bio{display:flex;align-items:center;gap:18px;padding-block:26px;color:var(--ink)}.portfolio-bio img{flex:none;border-radius:12px;object-fit:cover}.portfolio-bio p{font-size:17px;line-height:1.5;max-width:62ch;margin:0}
.field-lesson summary{font-size:20px;line-height:1.3;cursor:pointer;min-height:48px;padding:14px 0;color:var(--ink)}
.ideas-invitation{position:fixed;z-index:40;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;width:max-content;max-width:calc(100% - 24px);background:#0b1f3a;color:white;border:1px solid #7398cf;border-radius:16px;box-shadow:0 8px 28px #0b1f3a44;overflow:hidden}
.ideas-invitation[hidden]{display:none}.ideas-invitation button{min-height:48px;border:0;background:none;color:inherit;padding:12px 18px;font:600 16px/1.3 'Source Sans 3',sans-serif;cursor:pointer}.ideas-invitation .ideas-invitation__close{min-width:48px;border-left:1px solid #7398cf;font-size:24px;padding:8px}.ideas-invitation button:focus-visible{outline:3px solid white;outline-offset:-4px}
@media(max-width:600px){.portfolio-bio{gap:14px}.portfolio-bio p{font-size:16px}.portfolio-home .portfolio-intro{padding-block:20px}.portfolio-home .portfolio-title h1{font-size:46px}.portfolio-home .portfolio-title p{margin-top:12px}}
/* The homepage has in-page navigation; its site links must not cover the games. */
.portfolio-home .rail-bottomnav{position:static;transform:none;width:auto;max-width:100%;margin:20px 12px;padding-bottom:env(safe-area-inset-bottom,0px)}
.portfolio-home .rail-bottomnav__spacer{display:none}
.mini-shop .study-action{display:block;box-sizing:border-box;padding:14px;background:var(--accent);color:white;border:0;border-radius:10px;text-align:center;font-weight:600;cursor:pointer}
.mini-shop [hidden]{display:none!important}

/* Keep the invitation in the reading flow: no product image underneath it. */
.portfolio-home .ideas-invitation{position:static;transform:none;width:100%;max-width:720px;margin:24px auto 0;box-sizing:border-box;box-shadow:none;justify-content:space-between}

.product-reading{padding-block:24px;color:var(--ink)}.product-reading h2{font:400 clamp(26px,4vw,36px)/1.2 Georgia,serif;max-width:26ch;margin:8px 0}.product-reading p{max-width:48ch;font-size:16px;line-height:1.45}.product-reading .button{min-height:48px}.rail-sheet__text details summary{padding:12px 0;min-height:44px;cursor:pointer;color:var(--accent);font-weight:600}

/* ── LA MINI BIOGRAFÍA DE LA PORTADA ──────────────────────────────────────
   Iba DESPUÉS del juego, en una línea, y con eso la primera pantalla no decía
   quién es esta persona: decía «Ideas you can touch» y enseñaba un agujero
   negro. Quien llega desde LinkedIn o desde un correo decide si sigue bajando
   con lo que ve sin desplazarse, así que el quién, el dónde y las tres cifras
   comprobables suben aquí, encima del juego. Las cifras son las mismas que
   están en la página de trayectoria; ninguna se inventa en esta sección. */
.hero-bio{display:grid;grid-template-columns:132px minmax(0,1fr);gap:26px;align-items:start;padding-block:4px 30px;color:var(--ink)}
.hero-bio>img{border-radius:14px;object-fit:cover;width:132px;height:165px}
.hero-bio__body{min-width:0}
.hero-bio h2{font:400 clamp(24px,2.5vw,31px)/1.2 Georgia,serif;letter-spacing:-.02em;margin:0 0 10px}
.hero-bio__lede{font:400 18px/1.55 "Source Sans 3",sans-serif;color:var(--muted);margin:0 0 16px;max-width:62ch}
.hero-bio__points{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:72ch}
.hero-bio__points li{font:400 17px/1.5 "Source Sans 3",sans-serif;padding-left:18px;position:relative}
.hero-bio__points li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero-bio__points strong{font-weight:600}
.hero-bio__points a{color:var(--ink)}
/* Las cifras en fila propia: una cifra suelta dentro de un párrafo se lee como
   una afirmación; tres con su etiqueta debajo se leen como un historial. */
.hero-bio__proof{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 34px}
.hero-bio__proof li{display:flex;flex-direction:column;gap:2px}
.hero-bio__proof strong{font:600 21px/1.1 "Source Sans 3",sans-serif;letter-spacing:-.01em}
.hero-bio__proof span{font-size:15px;color:var(--muted)}
.hero-bio__cta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.hero-bio__cta .button{min-height:48px;display:inline-flex;align-items:center}
@media(max-width:760px){
  .hero-bio{grid-template-columns:1fr;gap:16px;padding-block:0 24px}
  .hero-bio>img{width:96px;height:120px}
  .hero-bio h2{font-size:25px}
  .hero-bio__lede{font-size:17px}
  .hero-bio__points li{font-size:16px}
  .hero-bio__proof{gap:14px 24px}
  .hero-bio__proof strong{font-size:19px}
  .hero-bio__cta .button{width:100%;justify-content:center}
}

/* La barra de saltos decía «Work» y la barra inferior también: la misma palabra
   llevaba a un ancla o a una página según cuál tocaras. La palabra se queda —es
   el mismo concepto— y lo que se dice en voz alta es el alcance. */
.portfolio-jumps__label{grid-column:1/-1;font:600 12px/1.4 "Source Sans 3",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 0 8px 4px}

/* La sección de estudios no decía qué eran ni de quién: tres cosas que se tocan
   sin una frase que las explique. La frase va ANTES de los controles. */
.studio-lede{font:400 17px/1.55 "Source Sans 3",sans-serif;color:var(--muted);max-width:62ch;margin:10px 0 0}
@media(max-width:600px){.studio-lede{font-size:16px;margin-top:8px}}

/* El antetítulo de esta banda estaba en `display:none` mientras TODAS las demás
   enseñan el suyo: la única sección que no se presenta era justo la que nadie
   entendía. Se enciende, con la misma voz que «MY TOOLS» o «SELECTED BACKGROUND». */
.studio-heading .portfolio-kicker{display:block;font:600 12px/1.4 "Source Sans 3",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* LA TESIS DE IA. Es la sección que la página no tenía: 0,7 % de menciones y
   todas defensivas. Se lee de arriba abajo en tres saltos -titular, tres
   viñetas, dos párrafos- porque quien llega aquí ya lleva cuatro pantallas. */
.ai-tldr{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;max-width:70ch}
.ai-tldr li{font:400 17px/1.55 "Source Sans 3",sans-serif;padding-left:20px;position:relative}
.ai-tldr li:before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.ai-tldr strong{font-weight:600}
.ai-nota{margin:26px 0 0;padding:20px 22px;border-left:3px solid var(--accent);background:var(--paper);
  font:400 17px/1.6 "Source Sans 3",sans-serif;max-width:68ch;border-radius:0 10px 10px 0}
.ai-cierre{margin:20px 0 0;font:400 18px/1.55 "Source Sans 3",sans-serif;max-width:62ch}
.ai-tldr+.ai-nota{margin-top:24px}
#ai .button{margin-top:22px;display:inline-flex;align-items:center;min-height:48px}
#ai{scroll-margin-top:85px}
@media(max-width:600px){.ai-tldr li,.ai-nota{font-size:16px}.ai-nota{padding:16px 18px}.ai-cierre{font-size:17px}}

/* PASE DE DENSIDAD (19-sep). La página llegó a 9 883 px, once pantallas y media,
   y Gonzalo la quiere corta. Medido antes de tocar: el relleno vertical de las
   secciones era sólo el 10 % del alto, así que aquí no hay milagro — se recorta
   lo que se puede sin quitarle una frase a nadie, y el resto es decisión de
   contenido, no de CSS. */
@media(max-width:700px){
  .portfolio-home section.band{padding-block:30px}
  .portfolio-home .studio{padding-bottom:30px}
  .portfolio-home .bh h2{margin-bottom:6px}
  .hero-bio{padding-block:0 18px}
  .portfolio-jumps.folder-links{margin-top:4px;margin-bottom:18px}
  #ai .ai-tldr{gap:11px;margin-top:16px}
  #ai .ai-nota{margin-top:18px}
  #ai .ai-cierre{margin-top:14px}
  #ai .button{margin-top:16px}
  /* Eran 96px de aire debajo del ultimo elemento: un agujero de 151px medidos
     en el telefono, que se lee como si faltara algo por cargar. */
  .portfolio-home .portfolio-about{padding-block:30px 34px;gap:24px}
}

/* Y la grasa de verdad estaba DENTRO de las tarjetas: medido a 390×844, una
   ficha de caso ocupaba 697 px —el 83 % de la pantalla para una sola tarjeta de
   un carrusel del que se ve una cada vez— con 343 px sólo de ilustración. El
   contenido no se toca; se deja de pedirle a cada tarjeta una pantalla entera. */
@media(max-width:700px){
  .rocket-stage{min-height:0;height:360px}
  .portfolio-home .bh p{margin-top:6px}
  .portfolio-home .bh p+p{margin-top:6px}
}

/* MOVIMIENTO AL ILUMINAR. `juego.js` enciende `data-rail-spotlight` en la ficha
   que tiene el puntero o el foco; hasta ahora eso sólo pintaba una luz en el
   borde y la ilustración de dentro seguía quieta aunque la ficha entera
   estuviera señalada. Ahora acusa el señalamiento.
   Presupuesto del kit respetado: gesto interactivo por debajo de 700 ms, un
   solo tramo, sin pulso infinito. Y quien pide menos movimiento no lo ve. */
@media (prefers-reduced-motion: no-preference){
  [data-rail-spotlight] .rail-card__figure,
  [data-rail-spotlight] .work-art,
  [data-rail-spotlight] .gear-image{
    transition:transform .42s cubic-bezier(.2,.75,.2,1), filter .42s ease;
  }
  [data-rail-spotlight] .work-art{transform:scale(1.035);filter:saturate(1.08)}
  [data-rail-spotlight] .gear-image{transform:translateY(-4px)}
  /* La ilustracion ya tocada manda: si el dedo esta encima, gana `tacto.js`. */
  [data-rail-spotlight] [data-art-active]{filter:saturate(1.14)}
}

/* LA ILUSTRACIÓN DE LA SECCIÓN DE IA. Mismo lenguaje que las de los casos:
   trazo que no escala, fondo `--cream`, acento sólo donde importa. Lo que
   cambia es que aquí el dibujo ES el argumento —quitar pasos— y por eso se
   toca. Las transiciones viven en el CSS y el script sólo mueve atributos. */
.ia-art{margin:22px 0 0;position:relative;background:var(--cream);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;cursor:grab;touch-action:pan-y;max-width:560px}
.ia-art:active{cursor:grabbing}
.ia-art:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ia-art svg{display:block;width:100%;height:auto}
.ia-art svg rect,.ia-art svg path,.ia-art svg circle{vector-effect:non-scaling-stroke}
.ia-paso rect{fill:var(--paper);stroke:var(--line);stroke-width:2}
.ia-paso path{stroke:#b9c7dc;stroke-width:6;stroke-linecap:round}
.ia-paso circle{fill:#dbe4f0}
.ia-paso{transform-origin:220px 175px;transition:opacity .34s ease,transform .34s cubic-bezier(.2,.75,.2,1)}
.ia-paso[data-fuera]{opacity:0;transform:translateX(56px) scale(.93)}
/* El que sobrevive se enciende: el efecto se ve donde se toca, no en un texto aparte. */
.ia-persona{opacity:0;transition:opacity .3s ease .12s;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.ia-art[data-quedan="1"] .ia-persona{opacity:1}
.ia-art[data-quedan="1"] .ia-paso:not([data-fuera]) rect{stroke:var(--accent);stroke-width:2.5}
.ia-carril path{stroke:var(--line);stroke-width:3;stroke-linecap:round;fill:none}
.ia-tirador{fill:var(--accent);stroke:var(--paper);stroke-width:3;transition:cx .22s cubic-bezier(.2,.75,.2,1)}
.ia-flecha{stroke:var(--paper);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s cubic-bezier(.2,.75,.2,1)}
/* La invitación: un asomo y vuelve. Una vez, no un pulso. */
.ia-art[data-invita] .ia-tirador,.ia-art[data-invita] .ia-flecha{animation:ia-asomo 1.4s cubic-bezier(.2,.75,.2,1)}
@keyframes ia-asomo{0%,100%{translate:0 0}38%{translate:16px 0}62%{translate:-3px 0}}
.ia-art__pie{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:12px 16px 14px;border-top:1px solid var(--line);background:var(--paper)}
.ia-art__cuenta{font:600 21px/1 "Source Sans 3",sans-serif;color:var(--ink)}
.ia-art__cuenta strong{font-size:27px;color:var(--accent);font-variant-numeric:tabular-nums}
.ia-art__etiqueta{font:400 15px/1.35 "Source Sans 3",sans-serif;color:var(--muted);flex:1 1 180px}
.ia-art__pista{font:600 13px/1.4 "Source Sans 3",sans-serif;color:var(--accent);flex:1 1 100%}
@media (prefers-reduced-motion: reduce){
  .ia-paso,.ia-tirador,.ia-flecha,.ia-persona{transition:none}
  .ia-art[data-invita] .ia-tirador,.ia-art[data-invita] .ia-flecha{animation:none}
}
@media(max-width:600px){
  .ia-art{margin-top:18px}
  .ia-art__cuenta strong{font-size:24px}
  .ia-art__etiqueta{font-size:14px}
}

/* La pila se comprime hacia el centro conforme caen pasos: cada paso mide 54 de
   alto en el viewBox, asi que se sube la mitad de lo desaparecido. Sin esto,
   quitar dos deja un agujero y el dibujo se lee como roto, no como simplificado. */
.ia-pila{transition:transform .34s cubic-bezier(.2,.75,.2,1)}
.ia-art[data-quedan="4"] .ia-pila{transform:translateY(27px)}
.ia-art[data-quedan="3"] .ia-pila{transform:translateY(54px)}
.ia-art[data-quedan="2"] .ia-pila{transform:translateY(81px)}
.ia-art[data-quedan="1"] .ia-pila{transform:translateY(108px)}
@media (prefers-reduced-motion: reduce){.ia-pila{transition:none}}

/* EL CARRUSEL DE CASOS, con lo que Gonzalo pidió poder recorrer: dónde estuvo,
   cuándo y con qué. Seis casos no tienen ilustración y sólo existen seis
   activos, así que en vez de arte prestada va el nombre compuesto. */
.rail-card__meta{font:500 14px/1.35 "Source Sans 3",sans-serif;color:var(--muted);margin:2px 0 8px}
.rail-card__tec{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.rail-card__tec li{font:500 12px/1 "Source Sans 3",sans-serif;padding:6px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--cream);color:var(--muted);white-space:nowrap}
.rail-card__figure--tipo{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  min-height:150px;padding:20px;background:var(--cream);border-bottom:1px solid var(--line)}
.rail-card__nombre{font:400 clamp(21px,4.6vw,27px)/1.1 Georgia,serif;letter-spacing:-.02em;color:var(--ink)}
.rail-card__anos{font:500 12px/1.3 "Source Sans 3",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media(max-width:600px){.rail-card__tec li{font-size:11px;padding:5px 8px}.rail-card__figure--tipo{min-height:120px;padding:16px}}
/* La ficha tipográfica heredaba la altura de las que llevan ilustración y
   quedaba casi vacía: el nombre abajo del todo en una caja de 343 px. */
.rail-card__figure--tipo{height:170px;min-height:0}

/* LA IDEA, DENTRO DEL DIBUJO. Gonzalo: «era muy difícil hacer la conexión entre
   lo que querías que aprendiera del juego y el juego». La lección deja de estar
   escrita al lado y pasa a cambiar mientras se arrastra. Y las tres viñetas, la
   nota y el cierre dejan de ser un muro de 276 palabras: se pliegan. */
.ia-art__idea{margin:0;padding:14px 16px 0;font:500 16px/1.45 "Source Sans 3",sans-serif;color:var(--ink);min-height:3em}
.ai-mas{margin:20px 0 0}
.ai-mas summary{cursor:pointer;font:600 15px/1.4 "Source Sans 3",sans-serif;color:var(--accent);
  min-height:44px;display:flex;align-items:center}
.ai-mas[open] summary{margin-bottom:8px}
@media(max-width:600px){.ia-art__idea{font-size:15px;padding:12px 14px 0}}

/* LAS CIFRAS, DESLIZABLES. Eran una fila apretada dentro de la biografía y la
   alargaban; ahora son tarjetas que se pasan con el dedo, y cada una lleva la
   línea que dice qué significa: un número suelto es una afirmación, con su
   contexto es un historial. En vertical ocupan una tarjeta, no tres. */
.hero-bio__proof--rail{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;margin:18px 0 0;padding:0 0 4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:0}
.hero-bio__proof--rail::-webkit-scrollbar{display:none}
.hero-bio__proof--rail:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.cifra-card{flex:0 0 auto;width:min(248px,72vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.cifra-card strong{font:600 23px/1.05 "Source Sans 3",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.cifra-card>span:not(.cifra-card__ctx){font-size:14px;color:var(--muted);line-height:1.35}
.cifra-card__ctx{margin-top:5px;padding-top:7px;border-top:1px solid var(--line);
  font:400 13px/1.4 "Source Sans 3",sans-serif;color:var(--muted)}
@media(min-width:900px){.hero-bio__proof--rail{flex-wrap:wrap;overflow:visible}.cifra-card{width:auto;flex:1 1 200px}}

/* LA BARRA VUELVE A ESTAR ANCLADA. Tenía el cristal intacto -blur(22px),
   saturate(1.8), radio 999- pero alguien la puso `position:static` en móvil:
   medida, estaba 8.278 px por debajo del borde inferior, o sea que se iba con
   el scroll. Por eso no se encontraba. */
@media(max-width:700px){
  .portfolio-home .rail-bottomnav,.rail-bottomnav{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(10px + env(safe-area-inset-bottom,0px));top:auto;
    width:calc(100% - 20px);max-width:560px;margin:0;z-index:110}
  .rail-bottomnav__link--saluda{color:var(--accent);font-weight:700}
}
/* El párrafo de la neurodivergencia eran 85 palabras en un bloque. Se parte en
   cuatro frases cortas que comparten el filete de acento, en vez de un muro. */
.ai-nota{margin:0 !important;border-radius:0;padding-top:0;padding-bottom:12px}
.ai-nota:first-of-type{margin-top:18px;border-radius:0 10px 0 0;padding-top:18px}
.ai-nota--fin{border-radius:0 0 10px 0;padding-bottom:18px}

/* EL TLDR EN PALABRAS LLANAS. Gonzalo: «que una persona no técnica entienda
   fácil lo que hago, y el TLDR no puede ser un muro, hasta cards debería
   tener». Las viñetas de arriba son currículum -registro, identidad, primer
   depósito-; esto es el mismo trabajo contado como se lo contarías a alguien
   en una cena. Deslizable, para que no cueste alto. */
.llano{padding-block:4px 6px}
.llano .eyebrow{margin:0}
.llano h2{font:400 clamp(24px,5.4vw,31px)/1.15 Georgia,serif;letter-spacing:-.03em;margin:4px 0 0}
.llano-rail{list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;margin:16px 0 0;padding:0 0 4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.llano-rail::-webkit-scrollbar{display:none}
.llano-rail:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.llano-card{flex:0 0 auto;width:min(290px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;
  padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.llano-card h4{font:600 17px/1.3 "Source Sans 3",sans-serif;color:var(--ink);margin:0 0 8px}
.llano-card__momento{font:400 15px/1.5 "Source Sans 3",sans-serif;color:var(--muted);margin:0}
.llano-card__hago{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font:600 15px/1.45 "Source Sans 3",sans-serif;color:var(--accent)}
@media(min-width:900px){.llano-rail{flex-wrap:wrap;overflow:visible}.llano-card{width:auto;flex:1 1 260px}}

/* Gonzalo: «esas tarjetas un poco más altas o que se vean más resaltadas, se
   pierden en el blanco». Fondo propio, borde más marcado y más aire dentro.
   Y de cinco a tres: con cinco seguía leyéndose como un muro. */
.llano-card{background:var(--cream);border-color:#c9d6e8;padding:22px 22px 24px;min-height:186px;justify-content:space-between}
.llano-card h4{font-size:18px;line-height:1.25;margin-bottom:10px}
.llano-card__momento{font-size:15px}
.llano-card__hago{margin-top:14px;padding-top:14px;border-top-color:#c9d6e8}
@media(min-width:900px){.llano-card{min-height:0}}

/* LA BARRA SE VEÍA ROTA AL BAJAR DE SEIS SITIOS A CUATRO. Dos medidas:
   en móvil el relleno era `6px 6px 0px` -arriba seis, abajo cero-, así que las
   píldoras tocaban el borde inferior; y en escritorio la barra medía 1416 px
   con enlaces de 353, estirada a toda la pantalla porque con `width:auto` la
   lista interior seguía repartiéndose el ancho completo. */
.portfolio-home .rail-bottomnav,.rail-bottomnav{padding:6px}
@media(min-width:701px){
  .portfolio-home .rail-bottomnav{position:absolute;top:6px;left:0;right:0;transform:none;
    display:flex;justify-content:center;width:100%;max-width:none;min-width:0;margin:0;padding:0;
    background:none;border:0;box-shadow:none;backdrop-filter:none}
  .portfolio-home .rail-bottomnav__list{width:auto;flex:0 0 auto;justify-content:center;gap:2px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(22px) saturate(1.8);
    border:1px solid var(--line);border-radius:999px;padding:5px;
    box-shadow:0 10px 30px -22px rgba(11,31,58,.5)}
  .portfolio-home .rail-bottomnav__item{flex:0 0 auto}
  .portfolio-home .rail-bottomnav__link{padding:6px 16px}
}

/* LA MÁQUINA DE REGLAS. Gonzalo: «como un fortune cookie, cinco gratis y de ahí
   el correo; está bacán que es como un slot machine». La galleta dibujada se
   retiró: dos medias lunas naranjas en un sitio de tinta y azul no son de aquí,
   y además la regla se veía por debajo mientras «se partía», así que abrirla no
   revelaba nada. El estado cerrado es una ranura; la revelación existe porque
   hasta que gastas la ficha no hay nada que leer. */
.galleta{max-width:560px;margin:22px auto 0;text-align:center}
.galleta__cookie{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:150px;padding:26px 20px;cursor:pointer;
  border:2px dashed #c9d6e8;border-radius:16px;background:var(--paper)}
.galleta__cookie[hidden]{display:none}
.galleta__cookie:hover{border-color:var(--accent)}
.galleta__mitad{display:block;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--accent);background:var(--cream)}
.galleta__mitad--der{display:none}
.galleta__papel{display:block;width:18px;height:3px;border-radius:2px;background:var(--accent);margin-top:-25px}
.galleta__llamada{font:600 16px/1.4 "Source Sans 3",sans-serif;color:var(--accent)}
.galleta__marco{border:1px solid var(--line);border-radius:16px;background:var(--paper);
  padding:26px 22px;min-height:150px;display:flex;align-items:center;justify-content:center}
.galleta[data-galleta-estado="cerrada"] .galleta__marco{display:none}
.galleta__texto{margin:0;font:400 18px/1.5 Georgia,serif;color:var(--ink);max-width:44ch}
/* el rodillo: mientras pasa las reglas, se atenúa y se mueve como un carrete */
.galleta[data-galleta-estado="partiendo"] .galleta__texto{opacity:.3;filter:blur(.6px);
  animation:galleta-rodillo .08s linear infinite}
@keyframes galleta-rodillo{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.galleta__pie{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.galleta__boton{min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);font:600 15px/1 "Source Sans 3",sans-serif;color:var(--ink);cursor:pointer}
.galleta__boton[hidden]{display:none}
.galleta__cuenta{margin:0;font:400 14px/1.3 "Source Sans 3",sans-serif;color:var(--muted)}
.galleta__cuenta strong{color:var(--accent);font-weight:700}
.galleta__cerrojo{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.galleta__cerrojo[hidden]{display:none}
.galleta__cerrojo p{margin:0 0 14px;font:400 16px/1.5 "Source Sans 3",sans-serif;color:var(--muted);max-width:46ch;margin-inline:auto}
.galleta__todo{margin-top:20px;text-align:left}
.galleta__todo summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
  font:600 14px/1.4 "Source Sans 3",sans-serif;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.galleta__texto{animation:none}}
@media(max-width:600px){.galleta__texto{font-size:17px}.galleta__marco{padding:22px 18px;min-height:140px}}
/* El control de ritmo de la pelota. Gonzalo: «me da ansiedad que sea muy lenta,
   o que puedan hacerla más lenta o más rápida y ver el nivel de ansiedad que
   les da». Eso deja de ser un ajuste y pasa a ser la lección: va delante. */
.ritmo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.ritmo__etq{font:600 12px/1 "Source Sans 3",sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.ritmo button{min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font:600 14px/1 "Source Sans 3",sans-serif;color:var(--muted);cursor:pointer}
.ritmo button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
/* La explicación de la mecánica sale al gastar la última ficha: es donde la
   tesis se cobra sola, después de que ya te llevaste algo. */
.galleta__mecanica{margin:16px auto 0;max-width:50ch;font:400 15px/1.55 "Source Sans 3",sans-serif;
  color:var(--muted);border-top:1px solid var(--line);padding-top:16px;text-align:left}
.galleta__mecanica[hidden]{display:none}

/* LAS TARJETAS DE CASO. Gonzalo: «son demasiado altas y se tapan; cuando las
   centro tienen que tener spotlight, se vean en un sitio claro para leer más y
   venga un sheet con más información». Medido: 296×646 en una ventana de 844
   con cabecera y barra fijas comiendo 130. Ahora entran con aire, se centran
   solas y la del medio se ilumina. */
#selected-work .rail__scroller{scroll-snap-type:x mandatory;scroll-padding-inline:24px}
#selected-work .rail-card{scroll-snap-align:center;transition:transform .3s cubic-bezier(.2,.8,.25,1),
  box-shadow .3s ease,opacity .3s ease;opacity:.62}
#selected-work .rail-card[data-rail-spotlight]{opacity:1;transform:translateY(-4px);
  box-shadow:0 18px 44px -26px rgba(11,31,58,.55)}
@media(max-width:700px){
  #selected-work .rail-card{width:min(300px,82vw)}
  #selected-work .work-art,#selected-work .work-art svg{min-height:0;height:190px;max-height:190px}
  #selected-work .rail-card__description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;margin-bottom:10px}
}
/* La hoja del caso: el mismo vestido que la de marca, con su propio cierre. */
dialog.rail-sheet--caso{max-width:640px;width:calc(100% - 32px);max-height:86vh;overflow:auto;
  border:0;border-radius:18px;padding:22px;background:var(--paper)}
dialog.rail-sheet--caso::backdrop{background:rgba(11,31,58,.46)}
.caso-hoja__cierra{float:right;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);font:600 15px/1 "Source Sans 3",sans-serif;color:var(--muted);cursor:pointer}
.caso-hoja__ir{display:inline-flex;align-items:center;min-height:48px;margin-top:18px;
  font:600 16px/1 "Source Sans 3",sans-serif;color:var(--accent)}
dialog.rail-sheet--caso .case-art img{width:100%;height:auto;border-radius:12px}
@media (prefers-reduced-motion: reduce){#selected-work .rail-card{transition:none}}

/* ---- LOS CUATRO ACTOS (20-sep) -------------------------------------------
   El defecto medido: 16 bloques, cada uno con su h2 al mismo peso, así que el
   escritorio de accesorios (499 palabras) gritaba igual que los casos (473).
   Nada era subordinado de nada y la página se leía como una lista, no como un
   argumento. El acto pone el titular grande; lo de dentro baja un escalón. */
.acto{position:relative}
/* .wrap trae fondo propio y es más estrecho que la vista, así que el encabezado
   pintaba una caja de color metida por los lados. Aquí sólo queremos su ancho. */
.acto__cab.wrap{background:transparent}
.acto__cab{padding:56px 0 8px}
.acto__num{margin:0 0 6px;font:600 12px/1.4 "Source Sans 3",sans-serif;
 letter-spacing:.16em;text-transform:uppercase;color:#5a6b82}
.acto__titulo{margin:0;font:400 clamp(34px,9vw,60px)/1.03 Georgia,serif;
 letter-spacing:-.025em;color:#0b1f3a}
.acto__cab:after{content:"";display:block;width:56px;height:3px;margin-top:18px;
 border-radius:3px;background:#1d4ed8}
/* Un escalón menos para todo lo que vive dentro de un acto. */
.acto section h2{font-size:clamp(23px,5.4vw,33px);letter-spacing:-.015em}
.acto section .eyebrow,.acto section .portfolio-kicker{color:#5a6b82}
/* El primer acto abre la página: no necesita separarse de nada. */
#acto-1>.acto__cab{padding-top:0}
@media (min-width:760px){.acto__cab{padding:76px 0 10px}}

/* ---- QUIÉN SOY, EN CUATRO PUNTOS (20-sep) --------------------------------
   Vuelve la identidad a la portada, pero medida. La anterior ocupaba 732px
   (foto grande, titular, entradilla, cuatro viñetas y un carril de cifras) y
   se comía la pantalla antes del TLDR. Esta es la misma información en
   puntos, con la cara pequeña al lado y un enlace a la versión larga. */
.quien{display:flex;gap:16px;align-items:flex-start;padding:26px 0 6px}
.quien__cara{flex:none;width:60px;height:60px;border-radius:50%;object-fit:cover;
 object-position:50% 22%;box-shadow:0 2px 10px #0b1f3a1f}
.quien__cuerpo{min-width:0}
.quien h2{margin:0 0 10px;font:600 13px/1.4 "Source Sans 3",sans-serif;
 letter-spacing:.13em;text-transform:uppercase;color:#5a6b82}
.quien__puntos{margin:0;padding:0;list-style:none}
.quien__puntos li{position:relative;margin:0 0 9px;padding-left:15px;
 font:400 15px/1.45 "Source Sans 3",sans-serif;color:#33455f}
.quien__puntos li:before{content:"";position:absolute;left:0;top:8px;
 width:5px;height:5px;border-radius:50%;background:#1d4ed8}
.quien__puntos strong{color:#0b1f3a;font-weight:600}
.quien__mas{display:inline-block;margin-top:4px;min-height:44px;line-height:44px;
 font:600 15px/44px "Source Sans 3",sans-serif;color:#1d4ed8;text-decoration:none}
.quien__mas:hover,.quien__mas:focus-visible{text-decoration:underline}
@media (min-width:700px){
 .quien{gap:22px;padding:34px 0 8px}
 .quien__cara{width:76px;height:76px}
 .quien__puntos li{font-size:16px}
}

/* ---- LAS TARJETAS DE CASOS, A LA MEDIDA DE LAS DEL ESCRITORIO (20-sep) ----
   Gonzalo: «las cartas de la trayectoria tienen que ser las cortas para que se
   vean; mira los bordes y el spotlight; que sean como las de Amazon, esas son
   perfectas». Medido: 661px contra 451px. Los 158px de sobra NO estaban en la
   ilustración, que ya medía 190px, sino en el hueco que su contenedor dejaba
   encima. Por eso bajar la ilustración nunca arreglaba nada. */
#selected-work .rail-card{
  background:#fff;border:1px solid #d7e2f4;
  box-shadow:0 8px 18px rgba(20,43,80,.08);
}
/* La figura de una tarjeta «media» lleva aspect-ratio:4/5. Al fijarle el alto
   en 150px el ancho se calculaba solo: 120px. Por eso la ilustración salía
   encajonada en una esquina. Hay que soltar la proporción, no pelearla. */
#selected-work .rail-card__figure{
  aspect-ratio:auto;height:150px;min-height:0;max-height:150px;
  width:auto;overflow:hidden;display:block;
}
#selected-work .work-art,#selected-work .work-art svg{
  display:block;width:100%;height:150px;min-height:0;max-height:150px;
}
/* El rotulillo de «tócame» estaba colocado para una ilustración de 250px. A
   150px se le monta encima en tres líneas. La sección ya dice arriba que todas
   las ilustraciones responden al dedo, así que dentro de la tarjeta sobra. */
#selected-work .work-art__hint{display:none}
/* El foco de la del centro: el mismo gesto que las del escritorio, un poco de
   elevación y el borde que se marca. Nada de opacar a las vecinas. */
#selected-work .rail-card[data-rail-spotlight]{
  border-color:#9db8ed;box-shadow:0 14px 30px rgba(20,43,80,.16);
}

/* ---- LA RANURA, QUE SE LEA COMO UNA TRAGAMONEDAS (20-sep) -----------------
   Gonzalo: «está raro ahora este UNA REGLA A LA VEZ, ese UI no sirve».
   Y tenía razón: el estado cerrado era un rectángulo de borde DISCONTINUO con
   un circulito dentro. Un borde discontinuo significa «aquí falta algo», que es
   lo contrario de lo que queremos decir. Ahora es una caja con su ventana de
   rodillo, su línea de premio y un botón que parece un botón. */
.galleta__cookie{
  gap:14px;min-height:0;padding:18px 18px 20px;
  border:1px solid #cddbef;border-radius:18px;background:#fff;
  box-shadow:0 8px 18px rgba(20,43,80,.08);
}
.galleta__cookie:hover,.galleta__cookie:focus-visible{border-color:#9db8ed}
/* La ventana del rodillo. Las bandas fantasma insinúan texto pasando; la línea
   de premio dice dónde va a parar. */
.galleta__mitad--izq{
  width:100%;height:84px;border-radius:12px;border:1px solid #c3d4ec;
  background:
    linear-gradient(#1d4ed800,#1d4ed800) center/100% 2px no-repeat,
    repeating-linear-gradient(#e7eefb 0 9px,#fff 9px 22px);
  box-shadow:inset 0 10px 14px -10px rgba(11,31,58,.28),
             inset 0 -10px 14px -10px rgba(11,31,58,.28);
  position:relative;overflow:hidden;
}
.galleta__mitad--izq:after{
  content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;
  margin-top:-1px;border-radius:2px;background:#1d4ed8;opacity:.5;
}
.galleta__papel{display:none}
/* El botón, con relleno. Antes era texto azul suelto dentro de la caja vacía. */
.galleta__llamada{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:999px;
  background:#1d4ed8;color:#fff;font:600 16px/1 "Source Sans 3",sans-serif;
}
.galleta__cookie:hover .galleta__llamada{background:#163ab0}
/* El desplegable parecía una caja vacía: ni flecha ni nada que dijera que abre. */
.galleta__todo{border:1px solid #dbe4f2;border-radius:14px;background:#fff;padding:0 16px}
.galleta__todo>summary{list-style:none;justify-content:space-between;gap:12px;padding:14px 0;color:#33455f}
.galleta__todo>summary::-webkit-details-marker{display:none}
.galleta__todo>summary:after{
  content:"";flex:none;width:9px;height:9px;margin-right:2px;
  border-right:2px solid #1d4ed8;border-bottom:2px solid #1d4ed8;
  transform:rotate(45deg);transition:transform .2s ease;
}
.galleta__todo[open]>summary:after{transform:rotate(225deg)}
.galleta__todo .consejo__pozo{margin:0;padding:0 0 16px 18px}
.galleta__todo .consejo__pozo li{margin:0 0 10px;font:400 15px/1.45 "Source Sans 3",sans-serif;color:#33455f}
@media (prefers-reduced-motion: reduce){.galleta__todo>summary:after{transition:none}}
/* Y el marco abierto es la MISMA ventana, ya parada. Si el cerrado parece una
   máquina y el abierto una caja blanca cualquiera, no se lee como un aparato. */
.galleta__marco{
  border:1px solid #c3d4ec;border-radius:16px;background:#fff;
  box-shadow:inset 0 10px 14px -12px rgba(11,31,58,.22),
             inset 0 -10px 14px -12px rgba(11,31,58,.22),
             0 8px 18px rgba(20,43,80,.07);
}

/* ---- ABRIR UNA TARJETA LLANA (20-sep) ------------------------------------
   Gonzalo: «debería uno poder aplastar esas tarjetas y leer más, y ahí
   entender con ejemplos de la vida real y términos técnicos». El contenido
   vive en un <details> de verdad, así que sin JavaScript se abre igual; el
   script sólo lo asciende a hoja para que el carril no se mueva bajo el dedo. */
.llano-card__mas{margin-top:auto;padding-top:12px}
.llano-card__mas>summary{
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;cursor:pointer;
  font:600 15px/1.3 "Source Sans 3",sans-serif;color:#1d4ed8;
}
.llano-card__mas>summary::-webkit-details-marker{display:none}
.llano-card__mas>summary:after{
  content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-bottom:2px;
}
.llano-card__mas>summary:hover,.llano-card__mas>summary:focus-visible{color:#163ab0}
/* Sin JavaScript el <details> se abre dentro de la tarjeta y tiene que leerse. */
.llano-mas__cuerpo{padding-top:6px}
.llano-mas__etq{margin:14px 0 6px;font:700 11px/1.4 "Source Sans 3",sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:#5a6b82}
.llano-mas__ejemplo{margin:0;font:400 15px/1.5 "Source Sans 3",sans-serif;color:#33455f}
.llano-mas__terminos{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.llano-mas__terminos li{
  padding:5px 10px;border:1px solid #dbe4f2;border-radius:999px;background:#f6f9fe;
  font:600 12px/1.3 "Source Sans 3",sans-serif;color:#41577a;
}

.llano-sheet{
  box-sizing:border-box;width:min(520px,calc(100% - 22px));
  max-height:calc(100dvh - 40px);margin:auto auto 0;
  border:0;border-radius:20px 20px 0 0;padding:20px 22px 30px;
  background:#fff;color:#0b1f3a;overflow-y:auto;overscroll-behavior:contain;
}
.llano-sheet::backdrop{background:rgba(11,31,58,.5);backdrop-filter:blur(3px)}
.llano-sheet__cerrar{
  display:block;margin:0 -6px 2px auto;min-height:44px;padding:8px 12px;
  border:0;background:none;color:#5a6b82;font:600 15px/1 "Source Sans 3",sans-serif;cursor:pointer;
}
/* Recibe el foco al abrirse para que un lector de pantalla lo lea, pero eso no
   debe dibujar un recuadro: nadie navego hasta ahi con el teclado. Mismo
   defecto que ya aparecio en las cartas del sobre. */
.llano-sheet__titulo{margin:0 0 8px;font:400 clamp(24px,6vw,31px)/1.15 Georgia,serif;
  letter-spacing:-.02em}
.llano-sheet__titulo:focus,.llano-sheet__titulo:focus-visible{outline:none}
.llano-sheet__resumen{margin:0 0 4px;font:400 16px/1.5 "Source Sans 3",sans-serif;color:#5a6b82}
@media (prefers-reduced-motion: no-preference){
  .llano-sheet[open]{animation:llano-sube .26s cubic-bezier(.2,.8,.25,1)}
  .llano-sheet[data-cerrando]{animation:llano-baja .2s ease-in forwards}
  @keyframes llano-sube{from{transform:translateY(22px);opacity:.4}}
  @keyframes llano-baja{to{transform:translateY(22px);opacity:0}}
}
@media (min-width:760px){
  .llano-sheet{margin:auto;border-radius:20px;padding:22px 26px 28px}
}
/* Antes de tocar nada no hay nada que contar, y un «0 de 16» en frío se lee
   como si ya hubieras perdido algo. */
.galleta[data-galleta-estado="cerrada"] .galleta__cuenta{display:none}
/* Cuando las dieciséis ya están a la vista no queda nada que decidir, sólo que
   leer: fuera el botón y fuera la caja que lo envolvía. */
.galleta__todo[data-sin-boton]{border:0;background:none;padding:0}
.galleta__todo[data-sin-boton]>summary{display:none}
.galleta__todo[data-sin-boton] .consejo__pozo{padding-left:18px}

/* ---- LAS CUATRO FAMILIAS (20-sep) ----------------------------------------
   Un solo carril de quince tarjetas obligaba a quince deslizamientos, y nadie
   llegaba al final: la tarjeta que mejor vende, la del veredicto, vivia en el
   puesto doce. Ahora son cuatro carriles cortos con su titulo. */
.llano-familia + .llano-familia{margin-top:26px}
.llano-familia__titulo{
  margin:0;font:700 12px/1.4 "Source Sans 3",sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#1d4ed8;
}
.llano-familia__titulo:before{
  content:"";display:inline-block;width:16px;height:2px;margin:0 9px 4px 0;
  border-radius:2px;background:#1d4ed8;vertical-align:middle;
}
@media(min-width:700px){
  .llano-familia + .llano-familia{margin-top:34px}
  .llano-familia__titulo{font-size:13px}
}

/* ---- LA FOTO SE TOCA (20-sep) --------------------------------------------
   Gonzalo: «que cuando aplasten mi foto se haga más grande y tenga un pequeño
   texto abajo, un modal con alguna frase mía». */
.quien__retrato{
  flex:none;padding:0;border:0;background:none;cursor:pointer;line-height:0;
  border-radius:50%;position:relative;
}
.quien__retrato:after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid transparent;transition:border-color .2s ease;
}
.quien__retrato:hover:after,.quien__retrato:focus-visible:after{border-color:#1d4ed8}
.quien__retrato:focus-visible{outline:none}
.quien__retrato .quien__cara{display:block}

.retrato-hoja{
  box-sizing:border-box;width:min(400px,calc(100% - 24px));
  max-height:calc(100dvh - 40px);margin:auto;
  border:0;border-radius:22px;padding:18px 22px 26px;
  background:#fff;color:#0b1f3a;text-align:center;overflow-y:auto;
}
.retrato-hoja::backdrop{background:rgba(11,31,58,.62);backdrop-filter:blur(4px)}
.retrato-hoja__cerrar{
  display:block;margin:0 -8px 4px auto;min-height:44px;padding:8px 12px;
  border:0;background:none;color:#5a6b82;font:600 15px/1 "Source Sans 3",sans-serif;cursor:pointer;
}
.retrato-hoja__foto{
  display:block;width:min(260px,62vw);height:auto;aspect-ratio:1;margin:0 auto 18px;
  border-radius:50%;object-fit:cover;object-position:50% 22%;
  box-shadow:0 16px 36px rgba(11,31,58,.22);
}
/* Recibe el foco para que un lector de pantalla lea la frase, pero nadie llegó
   aquí con el teclado: el anillo sobraría. Mismo defecto que ya arreglé dos
   veces en las cartas y en la hoja de las tarjetas. */
.retrato-hoja__frase{
  margin:0 0 12px;font:400 clamp(21px,5.6vw,27px)/1.25 Georgia,serif;
  letter-spacing:-.015em;outline:none;
}
.retrato-hoja__frase:focus,.retrato-hoja__frase:focus-visible{outline:none}
.retrato-hoja__pie{
  margin:0 0 16px;font:600 12px/1.4 "Source Sans 3",sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:#5a6b82;
}
.retrato-hoja__leer{
  display:inline-flex;align-items:center;min-height:44px;
  font:600 16px/1 "Source Sans 3",sans-serif;color:#1d4ed8;text-decoration:none;
}
.retrato-hoja__leer:hover,.retrato-hoja__leer:focus-visible{text-decoration:underline}
@media (prefers-reduced-motion: no-preference){
  .retrato-hoja[open]{animation:retrato-entra .24s cubic-bezier(.2,.8,.25,1)}
  .retrato-hoja[data-cerrando]{animation:retrato-sale .2s ease-in forwards}
  @keyframes retrato-entra{from{transform:scale(.94);opacity:0}}
  @keyframes retrato-sale{to{transform:scale(.96);opacity:0}}
}

/* Los campos dicen qué piden. Antes eran cinco barras grises sin una palabra:
   un humano veía desaparecer pastillas anónimas y no había nada que entender. */
.ia-campo{
  font:600 17px/1 "Source Sans 3",sans-serif;fill:#33455f;
  dominant-baseline:alphabetic;pointer-events:none;
}
.ia-paso[data-fuera] .ia-campo{opacity:0}
/* Al tocar un campo, el foco se quedaba en él y el navegador pintaba su anillo
   ámbar por defecto: un recuadro naranja alrededor del último campo, en un
   sitio que no tiene una gota de naranja. Quien llegue con el teclado sí
   necesita ver dónde está, y ése lo dibujamos nosotros. */
.ia-paso:focus{outline:none}
.ia-paso:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px;border-radius:12px}

/* ---- UNA TARJETA POR FAMILIA (20-sep) ------------------------------------
   Gonzalo: «prefiero que sea tarjetas de cada sección, y tú abres la tarjeta y
   ahí ves los carruseles», y «no me gusta que les digas que son 15, ese
   lenguaje da miedo». Aquí no se cuenta nada: se nombra. */
.llano-familias{display:grid;gap:10px;margin-top:16px}
.llano-fam{
  border:1px solid #d7e2f4;border-radius:16px;background:#fff;
  box-shadow:0 6px 16px rgba(20,43,80,.07);overflow:hidden;
}
.llano-fam[open]{border-color:#9db8ed}
.llano-fam>summary{
  list-style:none;display:flex;align-items:center;gap:14px;
  min-height:72px;padding:14px 18px;cursor:pointer;
}
.llano-fam>summary::-webkit-details-marker{display:none}
.llano-fam__cara{position:relative}
.llano-fam__nombre{
  display:block;font:400 clamp(19px,4.8vw,23px)/1.2 Georgia,serif;
  letter-spacing:-.015em;color:#0b1f3a;
}
.llano-fam__pie{
  display:block;margin-top:3px;
  font:400 14px/1.35 "Source Sans 3",sans-serif;color:#5a6b82;
}
.llano-fam>summary:after{
  content:"";flex:none;margin-left:auto;width:10px;height:10px;
  border-right:2px solid #1d4ed8;border-bottom:2px solid #1d4ed8;
  transform:rotate(45deg);margin-bottom:4px;transition:transform .2s ease;
}
.llano-fam[open]>summary:after{transform:rotate(225deg);margin-bottom:-3px}
.llano-fam>summary:hover .llano-fam__nombre,
.llano-fam>summary:focus-visible .llano-fam__nombre{color:#1d4ed8}
.llano-fam>.llano-rail{padding:0 14px 14px}
@media (prefers-reduced-motion: reduce){.llano-fam>summary:after{transition:none}}
@media(min-width:760px){/* la rejilla de dos columnas se retiró: ver .llano-panel más abajo */}

/* ---- LA BARRA, CON ICONOS (20-sep) ----------------------------------------
   El marcado viene del kit (`rail-bottomnav`), con su icono y su etiqueta. La
   función que los dibujaba existía y no se llamaba desde ninguna parte. */
.rail-bottomnav__link{gap:3px;padding:8px 2px}
.rail-bottomnav__icon svg{width:23px;height:23px}
.rail-bottomnav__label{font:600 11px/1.2 "Source Sans 3",sans-serif;letter-spacing:.01em}
/* El destino actual va en una pastilla, como en una aplicación: el color solo
   no es un estado, y quien no lo distingue se queda sin saber dónde está. */
.rail-bottomnav__link[aria-current="page"]{
  background:#e7edfd;border-radius:14px;color:#1d4ed8;
}
.rail-bottomnav__link[aria-current="page"] .rail-bottomnav__icon svg{stroke-width:2.1}


/* LA REJILLA DEL ESCRITORIO. En la portada estas fichas van en carrusel, porque
   allí compiten con otras seis secciones. En /reviews y /es/escritorio la página
   ES el escritorio, así que se ven todas y se bajan con el pulgar: dieciocho
   deslizamientos laterales para leer una lista es pedirle al lector que trabaje.
   `auto-fill` y no `auto-fit`: con `auto-fit` la última fila con una sola ficha
   la estira a todo el ancho y esa ficha deja de parecer de la misma familia. */
.gear-grid{display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-items:stretch}
.gear-grid .gear-card{width:auto;min-width:0}
/* El relleno inferior del cuerpo es 0 en el kit y la última línea quedaba a
   1px del canto —medido en producción—. El aire se garantiza por DOS vías,
   porque quién es el último hijo cambia según la ficha: relleno abajo en el
   cuerpo Y un margen bajo la descripción. Sólo una de las dos no basta. */
.gear-grid .gear-card .rail-card__body{padding-bottom:clamp(16px,1.8vw,20px)}
.gear-grid .gear-card .rail-card__description{margin-bottom:4px}
@media(max-width:700px){.gear-grid{grid-template-columns:1fr}}

/* LA TARJETA DE PASO AL ESCRITORIO. Una línea y un botón, en una caja que se
   lee de un vistazo. Reemplaza a la banda que quedó cuando las 18 fichas se
   mudaron a su página: medido entonces en producción, 404px de alto en
   escritorio con el 84% de su superficie sin una letra. El vacío no se leía
   como sobriedad, se leía como un fallo.
   `band--paso` sólo quita el aire vertical de una banda normal; la tarjeta es
   la que manda el tamaño. */
.band--paso{padding-top:0}
.paso-tarjeta{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-tile,16px);padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px)}
.paso-tarjeta__texto{margin:0;font-size:clamp(15px,1.5vw,17px);line-height:1.45;
  color:var(--muted)}
.paso-tarjeta__texto strong{color:var(--ink);font-weight:700}
/* El botón no se estira: `flex-shrink:0` para que no se parta en dos líneas
   cuando el texto crece, y un mínimo de 44px de alto porque es un destino. */
.paso-tarjeta__boton{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;
  /* La flecha llevaba su espacio en el HTML y aun asi salia pegada a la palabra:
     el `inline-flex` del boton convierte cada hijo en un item y se come el
     espacio en blanco entre ellos. El hueco tiene que ser `gap`, no un espacio. */
  gap:.45em}
@media(max-width:620px){
  .paso-tarjeta{flex-direction:column;align-items:flex-start;gap:14px}
  .paso-tarjeta__boton{width:100%;justify-content:center}
}


/* «QUÉ PUEDO HACER POR UN PRODUCTO»: PESTAÑAS Y UN CARRUSEL.
   Medido en producción el 21-09, antes de tocarlo: las familias iban en una
   rejilla de `655px 655px`, y al abrir una —803px de alto— la vecina se
   estiraba a los mismos 803px enseñando 110px de cabecera. 693px de caja vacía.
   Gonzalo: «se ve raro, card adentro de cards; quiero que sean carruseles».

   Ahora sólo hay una familia en pantalla, y sus tarjetas se recorren de lado.
   Ni una caja dentro de otra. */
.llano-familias{display:block;margin-top:0}
.llano-panel{padding-top:18px}
.llano-panel__pie{margin:0 0 14px;color:var(--muted);font-size:clamp(14px,1.4vw,16px)}
/* El carrusel de verdad: una fila que se desliza, no una rejilla que envuelve.
   `overscroll-behavior-inline:contain` para que al acabar la fila el gesto no
   siga arrastrando la página. */
.llano-rail{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;padding:2px 2px 16px;margin:0;list-style:none;
  scrollbar-width:none}
.llano-rail::-webkit-scrollbar{display:none}
.llano-rail>.llano-card{flex:0 0 clamp(268px,30%,340px);scroll-snap-align:start}
/* La pestaña activa se distingue por MÁS de un color: un subrayado grueso, para
   quien no separa bien el azul del gris. */
.rail-tabs[data-rail-tabs="llano"] .rail-tabs__tab[aria-selected="true"]{
  box-shadow:inset 0 -3px 0 0 var(--accent);color:var(--ink);font-weight:700}
.rail-tabs[data-rail-tabs="llano"] .rail-tabs__badge{margin-left:8px;opacity:.75}
@media(max-width:700px){
  .llano-rail>.llano-card{flex:0 0 min(84vw,300px)}
}

/* LA TARJETA DEL ESCRITORIO, EN AZUL Y CON BRILLO (21-sep).
   Gonzalo: «lo de la reseña de las cosas debería ser simplemente una tarjeta
   colorida azul que brilla». Era una caja crema con un borde gris, del mismo
   color que todo lo que tiene alrededor, y por eso no se leía como una puerta
   a otra página: se leía como un párrafo suelto.
   El brillo es un halo QUIETO, no una animación: en una página que ya tiene
   cuatro cosas moviéndose, una más compite con ellas. */
.paso-tarjeta{background:linear-gradient(135deg,var(--accent) 0%,#2f6df0 55%,#4f86ff 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 18px 40px -18px rgba(29,78,216,.55), 0 0 0 1px rgba(255,255,255,.08) inset}
.paso-tarjeta .paso-tarjeta__texto{color:rgba(255,255,255,.92)}
.paso-tarjeta .paso-tarjeta__texto strong{color:#fff}
/* El botón sobre azul: blanco sólido. Un botón traslúcido sobre un degradado
   cambia de contraste según por dónde caiga, y deja de cumplir en un extremo. */
.paso-tarjeta .paso-tarjeta__boton{background:#fff;color:var(--ink);border-color:#fff}
.paso-tarjeta .paso-tarjeta__boton:hover{background:#eef4ff;border-color:#eef4ff;color:var(--ink)}