/* Mountain guide project story. Uses the portfolio's lavender base with the product's own green inside its visuals. */
.mg-case{--g-deep:#2f4a3a;--g-mid:#456853;--g-soft:#8daf97;--g-mint:#c8e3c1;--g-pale:#dde8d8;--g-bg:#f4f7f1;--g-ink:#2f434d}
.mg-case .page{max-width:1200px}
.mg-glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:36px 0 0;padding:22px 0;border-block:1px solid var(--line)}
.mg-glance dt{font:11px var(--font-mono);color:var(--ink-muted);margin-bottom:6px}
.mg-glance dd{margin:0;font-size:17px;line-height:1.4}
.mg-shot{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 22px 40px -22px #332b3e90}
.mg-stage{position:relative;overflow:hidden;border-radius:24px;background:var(--g-deep);padding:clamp(20px,5vw,56px)}
.mg-stage.pale{background:var(--g-pale)}
.mg-stage.lav{background:var(--lavender-soft)}
.mg-hero-stage{margin-top:20px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.mg-hero-stage .a{grid-column:1/10;grid-row:1}
.mg-hero-stage .b{grid-column:6/13;grid-row:1;margin-top:30%}
.mg-cap{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink-muted)}
.mg-section h2{max-width:900px}
.mg-intro{font-size:20px;line-height:1.6;color:var(--ink-soft);max-width:760px;margin:0 0 36px}
.mg-ask{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.mg-ask article{padding:24px;border-radius:16px;background:var(--lavender-soft)}
.mg-ask b{display:block;font:11px var(--font-mono);color:var(--accent);margin-bottom:34px}
.mg-ask h3{margin:0 0 8px;font-size:24px;font-weight:500;line-height:1.2}
.mg-ask p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.mg-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px}
.mg-notes article{border-top:1px solid #c5b7d5;padding-top:18px}
.mg-notes h3{margin:0 0 8px;font-size:21px;font-weight:500;line-height:1.25}
.mg-notes p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
/* Mapa de web a panel */
.mg-map{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:7px 8px;align-items:center;font-size:15px}
.mg-map strong{font:11px var(--font-mono);font-weight:400;color:var(--g-deep);padding-bottom:6px}
.mg-map span.w,.mg-map span.p{padding:11px 13px;border-radius:6px;color:var(--g-ink);background:#fff}
.mg-map span.p{background:var(--g-deep);color:#f6f9f8}
.mg-map i{height:2px;background:var(--g-soft);position:relative}
.mg-map i::after{content:"";position:absolute;right:-1px;top:-3px;border-left:7px solid var(--g-soft);border-block:4px solid transparent}
/* Números a gráfico */
.mg-profile{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:18px;align-items:stretch}
.mg-profile>div{padding:22px;border-radius:14px;background:#fff;min-width:0}
.mg-profile b{display:block;margin-bottom:14px;font:11px var(--font-mono);font-weight:400;color:var(--g-mid)}
.mg-numbers{margin:0;font:15px/1.7 var(--font-mono);color:var(--g-ink);word-break:break-word}
.mg-profile svg{display:block;width:100%;height:auto}
/* Flujo */
.mg-flow{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;align-items:center;gap:12px}
.mg-flow>div{padding:18px;border-radius:12px;background:#fff;color:var(--g-ink);min-width:0}
.mg-flow small{display:block;font:11px var(--font-mono);color:var(--g-mid);margin-bottom:8px}
.mg-flow h3{margin:0;font-size:21px;font-weight:500;line-height:1.2}
.mg-flow p{margin:6px 0 0;font-size:14px;line-height:1.45;color:#5a6f79}
.mg-flow>span{color:var(--g-mint);font-size:28px}
.mg-stage.pale .mg-flow>span{color:var(--g-mid)}
/* Tiempos */
.mg-speed{display:grid;gap:22px}
.mg-speed h3{margin:0 0 9px;font-size:18px;font-weight:500}
.mg-bar{display:flex;height:52px;border-radius:7px;overflow:hidden;background:#ffffff40;font:12px var(--font-mono)}
.mg-bar span{display:flex;align-items:center;padding-inline:12px;white-space:nowrap;min-width:0;overflow:hidden}
.mg-bar .wait{background:#ffffff26;color:#f6f9f8;flex:1}
.mg-bar .now{background:var(--g-mint);color:var(--g-ink);flex:0 0 12%}
.mg-bar .sk{background:var(--g-soft);color:var(--g-ink);flex:1}
.mg-axis{display:flex;justify-content:space-between;font:11px var(--font-mono);color:var(--g-pale)}
.mg-speed h3,.mg-speed p{color:#f6f9f8}
.mg-speed p{margin:0;font-size:14px;line-height:1.5;color:var(--g-pale)}
/* Decisión */
.mg-table{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.mg-table article{padding:26px;border-radius:16px;background:var(--lavender-soft)}
.mg-table article.next{background:var(--ink-block);color:#fff}
.mg-table small{font:11px var(--font-mono);color:var(--accent)}
.mg-table .next small{color:var(--lavender)}
.mg-table h3{margin:12px 0 10px;font-size:28px;font-weight:500;line-height:1.15}
.mg-table p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.mg-table .next p{color:#e8e3ee}
@media(max-width:900px){
 .mg-ask,.mg-notes,.mg-table,.mg-profile{grid-template-columns:minmax(0,1fr)}
 .mg-flow{grid-template-columns:minmax(0,1fr);justify-content:stretch}
 .mg-flow>span{justify-self:center;transform:rotate(90deg);line-height:1}
}
@media(max-width:560px){
 .mg-glance{grid-template-columns:minmax(0,1fr);gap:14px}
 .mg-hero-stage .a{grid-column:1/12}.mg-hero-stage .b{grid-column:3/13;margin-top:34%}
 .mg-map{font-size:13px;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)}
 .mg-map span.w,.mg-map span.p{padding:9px}
 .mg-bar{height:46px;font-size:10px}
 .mg-bar .now{flex-basis:26%}.mg-bar span{padding-inline:7px}
}
.mg-case .mg-section{padding-bottom:56px}
/* Prototipo animado: panel y web lado a lado */
.mgp{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:14px;font-family:var(--font-body);color:var(--g-ink)}
.mgp-win{min-width:0;overflow:hidden;border-radius:10px;background:var(--g-bg);box-shadow:0 18px 32px -18px #1b2b2280;display:flex;flex-direction:column;min-height:400px}
.mgp-bar{display:flex;align-items:center;gap:8px;height:30px;padding-inline:11px;background:#e7ebe3;font:10px var(--font-mono);color:#5a6f79}
.mgp-bar i{width:7px;height:7px;border-radius:50%;background:#c6ccc5}
.mgp-bar i:nth-child(3){margin-right:6px}
.mgp-app{flex:1;display:grid;grid-template-columns:118px minmax(0,1fr);min-height:0}
.mgp-side{display:flex;flex-direction:column;gap:3px;padding:14px 8px;background:var(--g-deep);color:#e0e9ea;font-size:12px}
.mgp-side b{padding:0 7px 9px;font-size:13px;color:#fff}
.mgp-side span{padding:7px;border-radius:3px}
.mgp-side span.on{background:var(--g-mid);color:#fff;font-weight:700}
.mgp-main{position:relative;padding:16px;min-width:0}
.mgp-view{display:none;gap:11px}
.mgp-view.on{display:grid}
.mgp-view h4{margin:0 0 3px;font:700 22px/1.1 var(--font-body);color:var(--g-ink);letter-spacing:-.02em}
.mgp-field{display:grid;gap:4px;font-size:12px;font-weight:700}
.mgp-input{min-height:36px;padding:8px 9px;border:1.5px solid #d5e0e1;border-radius:3px;background:#fff;font-weight:400;font-size:13px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
.mgp-input.focus{border-color:var(--g-mid);box-shadow:0 0 0 2px #45685333}
.mgp-input.focus::after{content:"";display:inline-block;width:1px;height:13px;margin-left:1px;vertical-align:-2px;background:var(--g-ink);animation:mgp-blink .9s steps(1) infinite}
@keyframes mgp-blink{50%{opacity:0}}
.mgp-rowedit{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:10px;align-items:end;padding:10px;border:1px solid #d5e0e1;border-radius:4px;background:#fff;font-size:13px}
.mgp-rowedit small{display:block;color:#5a6f79;font:10px var(--font-mono);margin-top:2px}
.mgp-save{justify-self:end;padding:8px 13px;border:0;border-radius:3px;background:var(--g-mint);color:var(--g-ink);font:700 12px var(--font-body);transition:transform .12s}
.mgp-save.press{transform:scale(.95)}
.mgp-toast{position:absolute;left:50%;bottom:14px;z-index:2;display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:5px;background:var(--g-deep);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 8px 20px -8px #1b2b2299;transform:translate(-50%,10px);opacity:0;transition:.2s}
.mgp-toast.on{transform:translate(-50%,0);opacity:1}
.mgp-site{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--g-bg)}
.mgp-sitehead{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--g-deep);color:#fff;font:800 14px/1 "Sofia Sans Extra Condensed","Arial Narrow",sans-serif;text-transform:uppercase}
.mgp-sitehead span{padding:4px 7px;border-radius:2px;background:var(--g-mint);color:var(--g-ink);font:700 9px/1 var(--font-body);text-transform:none}
.mgp-page{display:none;flex:1}
.mgp-page.on{display:flex;flex-direction:column}
.mgp-hero{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:20px 16px;background:linear-gradient(90deg,#2f4a3aee,#456853aa),linear-gradient(170deg,#8fb7bd,#e8ece0);color:#fff}
.mgp-hero svg{position:absolute;inset:auto 0 0;width:100%;height:42%}
.mgp-hero p{position:relative;margin:0;font:800 clamp(32px,4.2vw,46px)/.95 "Sofia Sans Extra Condensed","Arial Narrow",sans-serif;text-transform:uppercase}
.mgp-cta{position:relative;padding:8px 12px;border-radius:3px;background:var(--g-mint);color:var(--g-ink);font-size:12px;font-weight:700}
.mgp-board{display:grid;gap:9px;padding:16px}
.mgp-board h4{margin:0 0 3px;color:var(--g-ink);font:800 28px/1 "Sofia Sans Extra Condensed","Arial Narrow",sans-serif;text-transform:uppercase}
.mgp-dep{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px;border:1px solid #d5e0e1;border-radius:4px;background:#fff;font-size:12px;font-weight:700}
.mgp-dep small{font:400 10px var(--font-mono);color:#5a6f79}
.mgp-seats{display:flex;gap:2px;align-items:center}
.mgp-seats i{width:8px;height:8px;border:1px solid var(--g-ink);border-radius:1px}
.mgp-seats i.on{background:var(--g-ink)}
.flash{animation:mgp-flash 1.1s ease-out}
@keyframes mgp-flash{0%{box-shadow:0 0 0 0 #c8e3c1}30%{box-shadow:0 0 0 7px #c8e3c1cc}100%{box-shadow:0 0 0 14px #c8e3c100}}
.mgp-cursor{position:absolute;left:0;top:0;z-index:5;width:20px;height:24px;pointer-events:none;transition:transform .6s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 2px #0005)}
.mgp-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:14px;color:var(--g-deep);font-size:14px}
.mgp-foot button{padding:7px 13px;border:1.5px solid var(--g-deep);border-radius:99px;background:transparent;color:var(--g-deep);font:700 13px var(--font-body);cursor:pointer}
.mgp-foot button:focus-visible{outline:3px solid var(--g-deep);outline-offset:2px}
@media(max-width:760px){.mgp{grid-template-columns:minmax(0,1fr)}.mgp-win{min-height:330px}.mgp-app{grid-template-columns:92px minmax(0,1fr)}.mgp-side{font-size:11px;padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.mgp-cursor{display:none}.flash,.mgp-input.focus::after{animation:none}.mgp-toast{transition:none}}
.mg-prof-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.mg-prof-head b{margin:0}
.mg-hint{margin:0;font:11px var(--font-mono);color:var(--g-mid);transition:opacity .3s}
.mg-hint.off{opacity:0}
.mg-num{padding:2px 3px;margin-inline:-3px;border-radius:4px;transition:background .18s,color .18s;cursor:default}
.mg-num.on{background:var(--g-mint);color:var(--g-deep);font-weight:700}
#mg-alt .dot{transform-box:fill-box;transform-origin:center;transition:r .18s,fill .18s}
#mg-alt .dot.on{r:8px;fill:var(--g-mint)}
#mg-alt .hit{fill:transparent;cursor:grab;touch-action:none;outline:0}
#mg-alt.drag .hit{cursor:grabbing}
#mg-alt .dot.focus{stroke-width:3.5px}
#mg-alt.armed .line{stroke-dasharray:1;stroke-dashoffset:1}
#mg-alt.armed .area{opacity:0}
#mg-alt.armed .dot{opacity:0;transform:scale(.3)}
#mg-alt.armed .val{opacity:0}
#mg-alt .line{transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1)}
#mg-alt .area{transition:opacity .7s .55s}
#mg-alt.enter .dot{transition:opacity .25s var(--d),transform .4s cubic-bezier(.3,1.6,.5,1) var(--d)}
#mg-alt.enter .val{transition:opacity .3s 1.15s}
@media(prefers-reduced-motion:reduce){#mg-alt .dot,#mg-alt .line,#mg-alt .area,.mg-num{transition:none}}