.sorpresas-guide{
  --ink:#142F32; --ink-2:#405D60; --ink-3:#50696D;
  --accent:var(--section-work); --accent-deep:#0E4C53; --accent-soft:var(--section-work-soft);
  --saffron:#F2B21B; --saffron-2:#C98E05; --saffron-soft:#FFF4D6;
  --coral:#E4566B; --coral-soft:#FDE7EB;
  --mint:#1FA97C; --mint-soft:#DDF5EC;
  --canvas:#F1F7F6; --paper:#FFFFFF; --line:#CBDFDE;
  --display:"Fraunces",Georgia,serif; --body:"Manrope",system-ui,sans-serif;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --shadow:0 1px 2px rgba(21,24,43,.05),0 18px 50px -24px rgba(21,24,43,.25);
}
.sorpresas-guide *{box-sizing:border-box}
.sorpresas-guide{scroll-behavior:smooth}
.sorpresas-guide{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.sorpresas-guide button{font:inherit;color:inherit;cursor:pointer}
.sorpresas-guide h1,.sorpresas-guide h2,.sorpresas-guide h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.01em}
.sorpresas-guide [hidden]{display:none!important}
.sorpresas-guide .bar{position:sticky;top:0;z-index:20;background:rgba(244,243,249,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.sorpresas-guide .bar-in{max-width:1180px;margin:auto;padding:14px 24px;display:flex;align-items:center;gap:18px}
.sorpresas-guide .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.01em;font-size:15px}
.sorpresas-guide .brand i{width:28px;height:28px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font-style:normal;font-family:var(--display);font-weight:700;font-size:16px}
.sorpresas-guide .brand span{color:var(--ink-3);font-weight:500}
.sorpresas-guide .progress{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3);font-weight:600}
.sorpresas-guide .pips{display:flex;gap:5px}
.sorpresas-guide .pips b{width:22px;height:6px;border-radius:3px;background:var(--line);transition:background .4s}
.sorpresas-guide .pips b.on{background:var(--saffron)}
.sorpresas-guide .hero{max-width:1180px;margin:auto;padding:56px 24px 28px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.sorpresas-guide .hero h1{font-size:clamp(38px,5.4vw,66px);line-height:1.02;font-variation-settings:"SOFT" 60;letter-spacing:-.02em}
.sorpresas-guide .hero h1 em{font-style:italic;font-weight:500;color:var(--accent)}
.sorpresas-guide .hero .lede{font-size:18px;color:var(--ink-2);max-width:52ch;margin:18px 0 0}
.sorpresas-guide .hero-aside{justify-self:end;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;max-width:360px;box-shadow:var(--shadow);font-size:14px;color:var(--ink-2);display:flex;gap:14px;align-items:flex-start}
.sorpresas-guide .hero-aside svg{flex:none;width:26px;height:26px;color:var(--saffron-2)}
.sorpresas-guide .hero-aside strong{display:block;color:var(--ink);font-weight:700;margin-bottom:3px}
.sorpresas-guide .app{max-width:1180px;margin:auto;padding:12px 24px 72px;display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
.sorpresas-guide .rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:8px}
.sorpresas-guide .rail-head{font-size:13px;font-weight:700;color:var(--ink-3);padding:4px 6px 8px}
.sorpresas-guide .box{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px 12px 12px;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative}
.sorpresas-guide .box:hover{border-color:#A9CDCF;transform:translateX(3px)}
.sorpresas-guide .box:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.sorpresas-guide .box.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sorpresas-guide .box .lid{width:44px;height:44px;border-radius:12px;background:var(--saffron-soft);display:grid;place-items:center;font-size:22px;position:relative}
.sorpresas-guide .box.done .lid{background:var(--mint-soft)}
.sorpresas-guide .box .t{display:block;font-weight:700;font-size:15px;line-height:1.25}
.sorpresas-guide .box .s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.sorpresas-guide .box .st{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink-3);font-size:12px;font-weight:800;transition:all .3s}
.sorpresas-guide .box.done .st{background:var(--mint);border-color:var(--mint);color:#fff}
.sorpresas-guide .box.active .st{border-color:var(--accent);color:var(--accent)}
.sorpresas-guide .box.done.active .st{background:var(--mint);border-color:var(--mint);color:#fff}
.sorpresas-guide .stage{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(22px,3.4vw,40px);min-height:620px;position:relative;overflow:hidden}
.sorpresas-guide .stage-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.sorpresas-guide .stage-head .n{font-family:var(--display);font-size:14px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
.sorpresas-guide .stage h2{font-size:clamp(26px,3.2vw,38px);line-height:1.1;margin:8px 0 10px;font-variation-settings:"SOFT" 40}
.sorpresas-guide .stage .intro{color:var(--ink-2);font-size:17px;max-width:60ch;margin:0 0 24px}
.sorpresas-guide .scene{position:relative;border-radius:22px;background:linear-gradient(160deg,#12343B 0%,var(--accent-deep) 60%,var(--accent) 130%);color:#fff;min-height:300px;padding:28px;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.sorpresas-guide .scene:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 0%,rgba(242,178,27,.22),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(255,255,255,.08),transparent 50%);pointer-events:none}
.sorpresas-guide .scene-in{position:relative;z-index:1;width:100%;max-width:640px}
.sorpresas-guide .bubble{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px 20px;backdrop-filter:blur(6px);position:relative}
.sorpresas-guide .bubble .who{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.65);margin-bottom:10px;letter-spacing:.02em}
.sorpresas-guide .bubble .who i{width:18px;height:18px;border-radius:6px;display:inline-grid;place-items:center;font-style:normal;font-size:11px;background:rgba(255,255,255,.18)}
.sorpresas-guide .bubble .who.truth i{background:var(--mint)}
.sorpresas-guide .bubble .who.ai i{background:var(--coral)}
.sorpresas-guide .bubble q{quotes:"«" "»";font-size:17px;line-height:1.45}
.sorpresas-guide .big{font-family:var(--display);font-weight:700;font-size:clamp(36px,6vw,64px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:6px 0 8px}
.sorpresas-guide .big.bad{color:#FF8A9A}
.sorpresas-guide .big.good{color:#5FE0B2}
.sorpresas-guide .truth{margin-top:14px;opacity:0;visibility:hidden}
.sorpresas-guide .reveal .truth{opacity:1;visibility:visible}
.sorpresas-guide .claim{transition:opacity .6s,transform .6s}
.sorpresas-guide .reveal .claim{opacity:1;transform:scale(.97)}
.sorpresas-guide .lidcover{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.35),transparent 55%),linear-gradient(160deg,#F7C84A,#F2B21B 55%,#E09E0A);box-shadow:inset 0 -30px 60px -30px rgba(120,70,0,.45);color:#2B2300;transition:transform .85s cubic-bezier(.7,-.1,.3,1),opacity .4s .5s}
.sorpresas-guide .lidcover{border:0;padding:0;width:100%;font:inherit;cursor:pointer}
.sorpresas-guide .lidcover:hover .gift,.sorpresas-guide .lidcover:focus-visible .gift{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 40px -12px rgba(120,70,0,.6)}
.sorpresas-guide .lidcover:hover svg{transform:rotate(-6deg)}
.sorpresas-guide .lidcover:focus-visible{outline:4px solid var(--accent);outline-offset:-4px}
.sorpresas-guide .lidcover .gift{transition:transform .25s,box-shadow .25s}
.sorpresas-guide .lidcover svg{transition:transform .25s}
.sorpresas-guide .lidcover .ribbon{position:absolute;left:50%;top:0;bottom:0;width:46px;transform:translateX(-50%);background:rgba(255,255,255,.45)}
.sorpresas-guide .lidcover .ribbon2{position:absolute;top:50%;left:0;right:0;height:46px;transform:translateY(-50%);background:rgba(255,255,255,.45)}
.sorpresas-guide .lidcover .gift{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:22px;background:rgba(255,248,225,.92);padding:22px 34px;border-radius:18px;box-shadow:0 10px 30px -10px rgba(120,70,0,.5)}
.sorpresas-guide .lidcover .gift small{font-family:var(--body);font-size:13px;font-weight:600;opacity:.8}
.sorpresas-guide .lidcover svg{width:52px;height:52px}
.sorpresas-guide .reveal .lidcover{transform:translateY(-110%) rotate(-3deg);opacity:0;pointer-events:none}
.sorpresas-guide .controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 0}
.sorpresas-guide .btn{appearance:none;border:0;border-radius:14px;padding:14px 22px;font-weight:800;font-size:15.5px;display:inline-flex;align-items:center;gap:10px;transition:transform .15s,box-shadow .15s,background .2s}
.sorpresas-guide .btn-primary{background:var(--saffron);color:#2B2300;box-shadow:0 4px 0 var(--saffron-2)}
.sorpresas-guide .btn-primary:hover{transform:translateY(-1px)}
.sorpresas-guide .btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--saffron-2)}
.sorpresas-guide .btn-primary svg{width:18px;height:18px}
.sorpresas-guide .btn-ghost{background:var(--accent-soft);color:var(--accent-deep)}
.sorpresas-guide .btn-ghost:hover{background:#CDE7E6}
.sorpresas-guide .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sorpresas-guide .hint{font-size:13px;color:var(--ink-3);margin-left:auto}
.sorpresas-guide .hint kbd{font:600 11px var(--body);border:1px solid var(--line);border-radius:5px;padding:1px 6px;background:#fff;color:var(--ink-2)}
.sorpresas-guide .lesson{display:none;margin-top:26px;border-top:1px solid var(--line);padding-top:22px;grid-template-columns:1fr 1fr;gap:18px}
.sorpresas-guide .reveal-page .lesson{display:grid;animation:rise .55s .35s both}
.sorpresas-guide .lesson h3{font-size:22px;grid-column:1/-1;font-variation-settings:"SOFT" 50;margin-bottom:-4px}
.sorpresas-guide .card{border-radius:var(--r-md);padding:18px 20px;font-size:15px;line-height:1.55}
.sorpresas-guide .card b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.02em;margin-bottom:6px}
.sorpresas-guide .card.why{background:var(--canvas);color:var(--ink-2)}
.sorpresas-guide .card.why b{color:var(--ink-3)}
.sorpresas-guide .card.rule{background:var(--mint-soft);color:#0E4F3A}
.sorpresas-guide .card.rule b{color:var(--mint)}
.sorpresas-guide .card.rule p,.sorpresas-guide .card.why p{margin:0}
.sorpresas-guide .confetti{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.sorpresas-guide .confetti i{position:absolute;left:var(--x);top:-6%;width:8px;height:14px;border-radius:2px;background:var(--c);opacity:0;transform:rotate(var(--r))}
.sorpresas-guide .reveal .confetti i{animation:fall 1.7s var(--d) cubic-bezier(.2,.6,.4,1) both}
.sorpresas-guide .fx-0 .reveal .big.bad{animation:drop .5s both}
.sorpresas-guide .fx-0 .truth{animation:none}
.sorpresas-guide .fx-0 .reveal .truth{animation:pop .7s .25s cubic-bezier(.2,1.4,.4,1) both}
.sorpresas-guide .fx-0 .reveal .odo{display:inline-block;animation:odo .9s .3s both}
.sorpresas-guide .fx-1 .hidden-line{position:relative;display:inline;background:linear-gradient(var(--saffron),var(--saffron)) no-repeat 0 100%/0% 100%;color:transparent;transition:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px}
.sorpresas-guide .fx-1 .reveal .hidden-line{animation:sweep 1.1s .2s forwards}
.sorpresas-guide .fx-1 .reveal .truth{animation:fade .5s .2s both}
.sorpresas-guide .fx-2 .stamp{position:absolute;right:18px;top:12px;transform:rotate(-12deg) scale(3);opacity:0;border:3px solid #FF8A9A;color:#FF8A9A;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.06em;padding:6px 12px;border-radius:8px;text-transform:uppercase;mix-blend-mode:screen}
.sorpresas-guide .fx-2 .reveal .stamp{animation:stamp .5s .35s cubic-bezier(.2,1.5,.5,1) both}
.sorpresas-guide .fx-2 .reveal .truth{animation:fade .5s .8s both}
.sorpresas-guide .fx-2 .reveal .clock{display:inline-block;animation:rewind 1s .1s both}
.sorpresas-guide .fx-3 .chain{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--display);font-weight:700;font-size:clamp(22px,3.4vw,34px);margin:8px 0}
.sorpresas-guide .fx-3 .chain .arrow{display:inline-block;width:70px;height:4px;background:#FF8A9A;border-radius:2px;position:relative;transform-origin:center}
.sorpresas-guide .fx-3 .chain .arrow:after{content:"";position:absolute;right:-2px;top:-6px;border:8px solid transparent;border-left:12px solid #FF8A9A;border-right:0}
.sorpresas-guide .fx-3 .reveal .chain .arrow{animation:snap .7s .2s both}
.sorpresas-guide .fx-3 .factors{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.sorpresas-guide .fx-3 .factors span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;opacity:0}
.sorpresas-guide .fx-3 .reveal .factors span{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.sorpresas-guide .fx-3 .reveal .factors span:nth-child(1){animation-delay:.55s}
.sorpresas-guide .fx-3 .reveal .factors span:nth-child(2){animation-delay:.7s}
.sorpresas-guide .fx-3 .reveal .factors span:nth-child(3){animation-delay:.85s}
.sorpresas-guide .fx-3 .reveal .truth{animation:fade .5s .6s both}
.sorpresas-guide .fx-4 .masked{position:relative}
.sorpresas-guide .fx-4 .mask{position:absolute;inset:-2px;border-radius:16px;background:linear-gradient(135deg,#5FE0B2,#1FA97C);color:#07302A;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,40px);letter-spacing:-.01em;z-index:2;transform-origin:top center}
.sorpresas-guide .fx-4 .mask small{display:block;font:600 13px var(--body);text-align:center;opacity:.8;margin-top:4px}
.sorpresas-guide .fx-4 .reveal .mask{animation:lift 1s .15s cubic-bezier(.6,-.2,.3,1) both}
.sorpresas-guide .fx-4 .reveal .truth{animation:fade .5s .7s both}
.sorpresas-guide .fx-5 .doc{font-family:var(--display);font-size:16px;line-height:1.7;color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);border-radius:12px;padding:14px 18px;margin-top:10px}
.sorpresas-guide .fx-5 .doc s{text-decoration:none;position:relative;display:inline}
.sorpresas-guide .fx-5 .doc s:after{content:"";position:absolute;left:0;right:0;top:55%;height:3px;background:#FF8A9A;transform:scaleX(0);transform-origin:left;border-radius:2px}
.sorpresas-guide .fx-5 .reveal .doc s:after{animation:strike .25s both}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(1):after{animation-delay:.2s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(2):after{animation-delay:.3s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(3):after{animation-delay:.38s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(4):after{animation-delay:.45s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(5):after{animation-delay:.5s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(6):after{animation-delay:.55s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(7):after{animation-delay:.6s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(8):after{animation-delay:.64s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(9):after{animation-delay:.68s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(10):after{animation-delay:.72s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(11):after{animation-delay:.76s}
.sorpresas-guide .fx-5 .reveal .doc s:nth-of-type(12):after{animation-delay:.8s}
.sorpresas-guide .fx-5 .reveal .doc{animation:shake .5s .7s both}
.sorpresas-guide .fx-5 .reveal .truth{animation:pop .6s .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes drop{to{transform:translateY(6px) scale(.92)}}
@keyframes odo{0%{transform:translateY(-120%);filter:blur(6px);opacity:0}60%{transform:translateY(10%);filter:none;opacity:1}100%{transform:none}}
@keyframes sweep{0%{background-size:0% 100%;color:transparent}60%{background-size:100% 100%;color:transparent}100%{background-size:100% 100%;color:#2B2300}}
@keyframes stamp{0%{opacity:0;transform:rotate(-12deg) scale(3)}70%{opacity:1;transform:rotate(-12deg) scale(.95)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes rewind{0%{transform:rotate(0)}100%{transform:rotate(-720deg)}}
@keyframes snap{0%{transform:none}40%{transform:translateX(0) rotate(0)}70%{transform:scaleX(.5) rotate(25deg);opacity:1}100%{transform:scaleX(.3) rotate(40deg) translateY(30px);opacity:0}}
@keyframes lift{0%{transform:none;opacity:1}50%{transform:translateY(-12px) rotate(-2deg)}100%{transform:translateY(-140%) rotate(-10deg);opacity:0}}
@keyframes strike{to{transform:scaleX(1)}}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes fall{0%{opacity:1;transform:translateY(-10px) rotate(0)}100%{opacity:0;transform:translateY(420px) rotate(720deg)}}
.sorpresas-guide .foot{max-width:1180px;margin:auto;padding:0 24px 48px;color:var(--ink-3);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
@media(max-width:960px){.sorpresas-guide .hero{grid-template-columns:1fr;gap:20px;padding-top:40px}
.sorpresas-guide .hero-aside{justify-self:start;max-width:none}
.sorpresas-guide .app{grid-template-columns:1fr}
.sorpresas-guide .rail{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sorpresas-guide .rail-head{grid-column:1/-1}
.sorpresas-guide .box{grid-template-columns:36px 1fr;padding:10px}
.sorpresas-guide .box .lid{width:36px;height:36px;font-size:18px}
.sorpresas-guide .box .st{display:none}
.sorpresas-guide .box .s{display:none}
.sorpresas-guide .box .t{font-size:13.5px}
}
@media(max-width:600px){.sorpresas-guide .rail{grid-template-columns:repeat(2,1fr)}
.sorpresas-guide .lesson{grid-template-columns:1fr}
.sorpresas-guide .progress span.lbl{display:none}
.sorpresas-guide .brand span{display:none}
.sorpresas-guide .hint{display:none}
.sorpresas-guide .scene{padding:20px}}
@media(prefers-reduced-motion:reduce){.sorpresas-guide *,.sorpresas-guide *:before,.sorpresas-guide *:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
.sorpresas-guide .confetti{display:none}}
/* Integration: keep the shared header and footer outside the interactive layout. */
.sorpresas-guide { --canvas:var(--bg); font-family:Arial,sans-serif; overflow-wrap:anywhere; }
.sorpresas-guide .bar { position:static; background:var(--canvas); }
.sorpresas-guide .bar-in { flex-wrap:wrap; }
.sorpresas-guide .rail-shell { align-self:stretch; min-width:0; }
.sorpresas-guide .activity-label { font-size:14px; font-weight:700; color:var(--ink-2); }
.sorpresas-guide .activity-label span { font-weight:400; }
.sorpresas-guide .card.rule b { color:#136e52; }
.sorpresas-guide .brand { max-width:none; }
.sorpresas-guide .hero { max-width:1180px; }
.sorpresas-guide .app > * { min-width:0; }
.sorpresas-guide .breadcrumb { max-width:1180px; margin:0 auto; padding:24px 24px 0; }
.sorpresas-guide .static-lessons { max-width:1100px; margin:24px auto; padding:24px; }
.sorpresas-guide .static-lessons article { background:var(--paper); border:1px solid var(--line); padding:20px; margin-block:16px; border-radius:18px; }
.sorpresas-guide .reference-content { max-width:1132px; margin:32px auto; padding:24px; }
.sorpresas-guide .storage-note { max-width:1180px; margin:0 auto; padding:12px 24px; color:var(--ink-2); font-size:14px; }
@media(max-width:600px){
 .sorpresas-guide .hero { padding:28px 18px 20px; }
 .sorpresas-guide .app { padding-inline:12px; gap:20px; }
 .sorpresas-guide .stage { padding:20px 14px; }
 .sorpresas-guide .scene { padding:18px 12px; }
 .sorpresas-guide .bubble { padding:16px 12px; }
 .sorpresas-guide .big { font-size:clamp(30px,9vw,48px); }
 .sorpresas-guide .chain { flex-wrap:wrap; }
 .sorpresas-guide .controls .btn { max-width:100%; }
}
/* Wide monitors: a single-screen activity, with supporting text in the information dialog. */
html.sorpresas-board body { min-height:100dvh; }
html.sorpresas-board body > .site-header { height:64px; padding-block:8px; max-width:none; }
html.sorpresas-board body > .site-header .brand-logo { width:158px; }
html.sorpresas-board body > .site-footer { display:none; }
html.sorpresas-board .sorpresas-guide { height:calc(100dvh - 64px); padding:10px 24px 18px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:22px 46px minmax(0,1fr); gap:8px 20px; }
html.sorpresas-board .sorpresas-guide > :is(.storage-note,.foot,.reference-content) { display:none; }
html.sorpresas-board .sorpresas-guide .breadcrumb { grid-column:1/-1; padding:0; margin:0; max-width:none; font-size:12px; }
html.sorpresas-board .sorpresas-guide .hero { grid-column:1; grid-row:2; display:block; padding:0; margin:0; max-width:none; align-self:center; }
html.sorpresas-board .sorpresas-guide .hero h1 { font-size:30px; line-height:1.1; }
html.sorpresas-board .sorpresas-guide .hero :is(.lede,.hero-aside,.resource-meta) { display:none; }
html.sorpresas-board .sorpresas-guide .bar { grid-column:2; grid-row:2; border:0; align-self:center; }
html.sorpresas-board .sorpresas-guide .bar-in { padding:0; gap:14px; flex-wrap:nowrap; }
html.sorpresas-board .sorpresas-guide .activity-label { display:none; }
html.sorpresas-board .sorpresas-guide .pips b { width:14px; }
html.sorpresas-board .sorpresas-guide .app { position:relative; grid-column:1/-1; grid-row:3; width:100%; max-width:none; padding:0; margin:0; grid-template-columns:240px minmax(0,1fr); gap:20px; min-height:0; }
html.sorpresas-board .sorpresas-guide .rail { position:static; gap:7px; }
html.sorpresas-board .sorpresas-guide .rail-head { padding:0 4px 6px; }
html.sorpresas-board .sorpresas-guide .box { padding:10px; grid-template-columns:34px 1fr auto; gap:8px; border-radius:14px; }
html.sorpresas-board .sorpresas-guide .box .lid { width:34px; height:34px; font-size:20px; }
html.sorpresas-board .sorpresas-guide .box .t { font-size:14px; }
html.sorpresas-board .sorpresas-guide .stage { height:100%; min-height:0; padding:20px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr); grid-template-rows:auto auto auto minmax(0,1fr) auto; gap:8px 20px; border-radius:20px; }
html.sorpresas-board .sorpresas-guide .stage-head { grid-column:1/-1; margin:0; }
html.sorpresas-board .sorpresas-guide .stage h2 { grid-column:1/-1; font-size:29px; margin:0; }
html.sorpresas-board .sorpresas-guide .stage .intro { grid-column:1/-1; font-size:16px; margin:0 0 4px; max-width:none; }
html.sorpresas-board .sorpresas-guide .scene { grid-column:1; grid-row:4; min-height:0; padding:14px; border-radius:16px; }
html.sorpresas-board .sorpresas-guide .stage:not(.reveal-page) .scene { grid-column:1/-1; }
html.sorpresas-board .sorpresas-guide .bubble { padding:12px 14px; }
html.sorpresas-board .sorpresas-guide .bubble .who { margin-bottom:6px; }
html.sorpresas-board .sorpresas-guide .bubble q { font-size:16px; line-height:1.4; }
html.sorpresas-board .sorpresas-guide .big { font-size:42px; margin:4px 0; }
html.sorpresas-board .sorpresas-guide .truth { margin-top:10px; }
html.sorpresas-board .sorpresas-guide .controls { grid-column:1; grid-row:5; margin:4px 0 0; gap:10px; }
html.sorpresas-board .sorpresas-guide .btn { min-height:42px; padding:10px 18px; font-size:15px; }
html.sorpresas-board .sorpresas-guide .hint { display:none; }
html.sorpresas-board .sorpresas-guide .lesson { grid-column:2; grid-row:4/6; margin:0; padding:0; border:0; grid-template-columns:1fr; gap:12px; align-content:start; }
html.sorpresas-board .sorpresas-guide .lesson h3 { font-size:24px; margin:0; }
html.sorpresas-board .sorpresas-guide .card { padding:14px 16px; font-size:16px; }
html.sorpresas-board .sorpresas-guide .chain { flex-wrap:wrap; }
html.sorpresas-board .sorpresas-guide .doc { font-size:15px; }
@media(min-height:900px) and (min-width:1500px){
 html.sorpresas-board .sorpresas-guide .app { grid-template-columns:280px minmax(0,1fr); }
 html.sorpresas-board .sorpresas-guide .stage { padding:28px; gap:14px 28px; }
 html.sorpresas-board .sorpresas-guide .stage h2 { font-size:34px; }
 html.sorpresas-board .sorpresas-guide .scene { padding:24px; }
 html.sorpresas-board .sorpresas-guide .bubble { padding:20px; }
 html.sorpresas-board .sorpresas-guide .bubble q, html.sorpresas-board .sorpresas-guide .card { font-size:18px; }
 html.sorpresas-board .sorpresas-guide .big { font-size:56px; }
 html.sorpresas-board .sorpresas-guide .box { padding:14px; }
}
html.sorpresas-board .sorpresas-guide .stage:not(.reveal-page) .scene-in { display:none; }
@media(max-height:799px){
 html.sorpresas-board .sorpresas-guide .stage { padding:16px 20px; gap:6px 20px; }
 html.sorpresas-board .sorpresas-guide .scene { padding:10px; }
 html.sorpresas-board .sorpresas-guide .bubble { padding:10px 12px; }
 html.sorpresas-board .sorpresas-guide .big { font-size:36px; }
 html.sorpresas-board .sorpresas-guide .doc { font-size:16px; line-height:1.4; padding:8px 10px; margin-top:6px; }
}
.sorpresas-guide .fiction-label { font-size:12px; color:var(--ink-2); }
/* The original site footer is part of the viewport layout, below the activity controls. */
html.sorpresas-board body { height:100dvh; min-height:0; display:grid; grid-template-rows:64px minmax(0,1fr) auto; }
html.sorpresas-board body > .site-footer { display:flex; align-items:center; gap:16px; width:100%; max-width:none; margin:0; padding:10px 24px; min-height:44px; font-size:12px; line-height:1.5; }
html.sorpresas-board .sorpresas-guide { height:auto; min-height:0; padding-bottom:10px; }
@media(max-height:799px){
 html.sorpresas-board .sorpresas-guide { grid-template-rows:18px 38px minmax(0,1fr); gap:6px 20px; padding-top:6px; }
 html.sorpresas-board .sorpresas-guide .stage-head { display:none; }
 html.sorpresas-board .sorpresas-guide .stage { grid-template-rows:auto auto minmax(0,1fr) auto; }
 html.sorpresas-board .sorpresas-guide .stage h2 { grid-row:1; }
 html.sorpresas-board .sorpresas-guide .stage .intro { grid-row:2; }
 html.sorpresas-board .sorpresas-guide .scene { grid-row:3; }
 html.sorpresas-board .sorpresas-guide .controls { grid-row:4; }
 html.sorpresas-board .sorpresas-guide .lesson { grid-row:3/5; }
 html.sorpresas-board .sorpresas-guide .rail-head::after { content:' · Ejemplos ficticios'; }
}
@media(max-width:740px){
}
@media(max-height:799px){
}
/* Larger reading text, scaled to the monitor while keeping the activity on one screen. */
.sorpresas-guide .stage .intro, .sorpresas-guide .bubble q { font-size:18px; }
html.sorpresas-board .sorpresas-guide .stage .intro { font-size:clamp(18px,1.15vw,26px); line-height:1.4; }
html.sorpresas-board .sorpresas-guide .bubble q { font-size:clamp(18px,1.1vw,24px); line-height:1.4; }
@media(max-height:799px){
 html.sorpresas-board .sorpresas-guide .fx-5 .scene { padding:6px; }
 html.sorpresas-board .sorpresas-guide .fx-5 .bubble { padding:8px 12px; }
 html.sorpresas-board .sorpresas-guide .fx-5 .truth { margin-top:6px; }
 html.sorpresas-board .sorpresas-guide .fx-5 .doc { padding-block:6px; margin-top:4px; }
}
/* Pair each takeaway with its action, using matching rows and a clear final action. */
.sorpresas-guide .btn-reset { background:transparent; color:var(--ink-2); box-shadow:none; font-weight:500; }
.sorpresas-guide .btn-reset:hover { background:var(--accent-soft); }
@media(max-height:799px){
}
/* Comfortable outer space that grows with wide monitors. */
html.sorpresas-board { --activity-gutter:clamp(24px,calc(8vw - 88px),160px); }
html.sorpresas-board .sorpresas-guide,
html.sorpresas-board body > .site-header,
html.sorpresas-board body > .site-footer { padding-inline:var(--activity-gutter); }
html.sorpresas-board .sorpresas-guide .hero h1 { font-size:clamp(22px,1.65vw,32px); }
.sorpresas-guide .card.mitigation { background:var(--accent-soft); color:var(--ink-2); }
.sorpresas-guide .card.mitigation b { color:var(--accent-deep); }
.sorpresas-guide .card.mitigation p { margin:0; }
@media(max-height:799px){
 html.sorpresas-board .sorpresas-guide .lesson { gap:6px; }
 html.sorpresas-board .sorpresas-guide .lesson h3 { font-size:22px; }
 html.sorpresas-board .sorpresas-guide .card { padding:8px 12px; line-height:1.4; }
}