:root{--bg:#f7f8f4;--white:#fff;--ink:#16231c;--muted:#75827a;--green:#0b6b43;--green2:#0c8751;--lime:#b8e6a8;--line:#dce3d9;--side:280px;--top:74px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--bg);color:var(--ink);font-family:Inter,Manrope,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}:focus-visible{outline:3px solid #56bf81;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.skip{position:fixed;top:-60px;left:16px;background:var(--ink);color:#fff;padding:12px;z-index:120}.skip:focus{top:15px}
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
.sidebar{display:flex;flex-direction:column;min-height:0;background:#f9faf6;border-right:1px solid #dbe2d8;z-index:10;box-shadow:12px 0 40px rgba(22,54,29,.025)}
.brand{padding:24px 30px;display:flex;align-items:center;height:var(--top);border-bottom:1px solid var(--line)}.brand img{width:172px;height:54px;object-fit:contain;object-position:left center}
.sidebar-content{padding:45px 29px 18px;overflow-y:auto;min-height:0;flex:1;scrollbar-width:thin}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:850;color:var(--green);display:flex;align-items:center;gap:10px}.eyebrow-line{height:3px;width:18px;background:var(--green)}
h1{font-size:clamp(37px,3vw,54px);letter-spacing:-.067em;line-height:1.02;margin:24px 0 24px;font-weight:810}h1 em{font-style:normal;color:var(--green)}.sidebar-copy{font-size:15px;line-height:1.62;color:#546358;max-width:238px;margin:0}.sidebar-separator{height:1px;background:#ced9ce;margin:30px 0 25px}
.feature{display:flex;gap:13px;align-items:center;margin:0 0 19px}.feature-icon{display:grid;place-items:center;width:39px;height:39px;flex:none;border-radius:9px;background:#e5f0e5;color:#126e42;font-size:22px;font-weight:500}.feature b,.feature small{display:block}.feature b{font-size:13px;letter-spacing:-.015em}.feature small{font-size:11px;color:#7d8980;margin-top:4px}
.sidebar-bottom{flex:none;padding:16px 26px 22px}.cta{background:#0d5d3a;color:#fff;padding:15px 19px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:750;border-radius:10px;transition:background .2s,transform .2s}.cta:hover{background:#10834f;transform:translateY(-2px)}.cta span{font-size:23px;font-weight:400}.sidebar-footer{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px;align-items:center;justify-content:space-between;font-size:9px;color:#8b978f;letter-spacing:.08em}.sidebar-footer a{color:#547261}
.workspace{min-height:0;min-width:0;display:flex;flex-direction:column}.topbar{height:var(--top);flex:none;border-bottom:1px solid var(--line);background:rgba(252,253,250,.96);display:flex;align-items:center;justify-content:space-between;padding:0 25px;gap:18px;z-index:7}.top-title{display:flex;align-items:center;gap:15px;white-space:nowrap}.top-title strong{font-size:14px;letter-spacing:-.025em}.top-title small{font-size:13px;color:#657268}.top-signal{letter-spacing:-.26em;color:var(--green);font-size:18px;font-weight:900;transform:skew(-14deg);padding-right:8px}.title-sep{font-size:19px;font-weight:600;color:var(--green)}.top-actions{display:flex;align-items:center;gap:12px}.top-actions button{height:37px;border:1px solid #cbd5cb;background:#fff;color:var(--ink)}.pill{border-radius:25px;padding:0 17px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;white-space:nowrap}.fit-icon{font-size:17px;line-height:1}.pill:hover,.zoom-controls button:hover,.fullscreen:hover{background:#eaf5eb}.zoom-controls{display:flex;align-items:center;border:1px solid #cbd5cb;border-radius:10px;overflow:hidden;height:38px;background:#fff}.zoom-controls button{height:100%;width:37px;font-size:24px;border:0}.zoom-controls output{font-size:12px;font-weight:730;width:59px;text-align:center;line-height:36px;border-inline:1px solid #e1e5de}.fullscreen{border-radius:10px;width:40px;font-size:23px}.mobile-brand{display:none}
.canvas-view{position:relative;min-width:0;min-height:0;flex:1;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;background-color:#f7f8f4;background-image:radial-gradient(#cad6cb .87px,transparent .87px);background-size:28px 28px;background-position:0 0;overscroll-behavior:contain}.canvas-view.is-dragging{cursor:grabbing}.canvas-view:focus-visible{outline:3px solid #67b38a;outline-offset:-3px}
.world{position:absolute;left:0;top:0;width:2100px;height:1060px;transform-origin:0 0;will-change:transform;pointer-events:none}
.canvas-card{position:absolute;left:var(--x);top:var(--y);width:460px;min-height:353px;padding:0;display:block;text-align:left;cursor:pointer;pointer-events:auto;border:1px solid #d4ded2;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 11px 30px rgba(23,49,30,.06),0 2px 4px rgba(27,47,32,.04);transition:box-shadow .2s,border-color .2s;will-change:auto}
.canvas-card:hover,.canvas-card.is-selected{border-color:var(--green2);box-shadow:0 14px 40px rgba(10,68,41,.18),0 0 0 2px rgba(15,137,81,.13)}.canvas-card:hover .card-go{background:#0a7848;color:#fff}.card-screen{display:block;position:relative;width:100%;height:253px;overflow:hidden;background:#0c1921}.card-screen img{width:100%;height:100%;object-fit:contain;object-position:center center;pointer-events:none}.card-bottom{display:flex;align-items:center;gap:11px;padding:14px 15px 15px 13px;height:100px;background:#fff}.card-index{background:var(--green);color:#fff;display:grid;place-items:center;font-size:16px;letter-spacing:-.04em;font-weight:850;width:39px;height:39px;border-radius:9px;flex:none}.card-info{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.card-info strong{font-size:17px;line-height:1.05;letter-spacing:-.04em;white-space:normal}.card-info small{font-size:12px;color:#627064;white-space:normal;line-height:1.25}.card-go{display:grid;place-items:center;border:1px solid #ced9ce;border-radius:8px;width:34px;height:34px;flex:none;font-size:21px;font-weight:400;align-self:center;transition:background .2s,color .2s}
.canvas-label{position:absolute;top:23px;left:24px;display:flex;gap:9px;align-items:center;font-size:10px;font-weight:780;letter-spacing:.13em;color:#2d6444;pointer-events:none}.pulse-dot{width:7px;height:7px;border-radius:50%;background:#12a36b;box-shadow:0 0 0 4px #c4efd5}.view-hint{color:#8b9a8d}.canvas-credit{position:absolute;bottom:22px;left:23px;color:#8b9a8c;letter-spacing:.15em;font-size:9px;font-weight:730;pointer-events:none}
.hint-bar{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.93);border:1px solid #cad5c9;box-shadow:0 7px 25px #0a2f1914;border-radius:30px;padding:11px 17px;font-size:11px;font-weight:680;white-space:nowrap;color:#2d3b30;pointer-events:none}.hint-bar span{display:flex;gap:8px;align-items:center}.hint-bar span b{font-size:17px;font-weight:500;color:var(--green)}.hint-bar i{width:1px;height:17px;background:#c9d2c8}
.map-box{position:absolute;right:20px;bottom:18px;width:194px;padding:11px 11px 10px;background:rgba(255,255,255,.95);border:1px solid #cbd6cb;border-radius:12px;box-shadow:0 8px 30px rgba(10,36,18,.06);cursor:default}.map-top{font-size:9px;font-weight:820;letter-spacing:.05em;color:#758579;display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:7px}.map-top button{background:transparent;border:0;font-size:19px;color:var(--green);line-height:1}.mini-world{position:relative;width:170px;height:91px;background:radial-gradient(#d6e1d7 .75px,transparent .75px);background-size:9px 9px;overflow:hidden;border-radius:5px}.mini-card{position:absolute;left:calc(var(--mx) / 2100 * 100%);top:calc(var(--my) / 1060 * 100%);width:calc(460 / 2100 * 100%);height:calc(353 / 1060 * 100%);border:1px solid color-mix(in srgb,var(--accent) 80%,white);background:color-mix(in srgb,var(--accent) 20%,white);border-radius:2px;padding:0}.mini-card:hover{background:#b9ecc9}.mini-viewport{pointer-events:none;border:1.5px solid #0b7b45;background:#20a86a14;position:absolute;min-width:3px;min-height:3px;z-index:2}
.mobile-tools{display:none}
.detail-backdrop{position:fixed;inset:0;background:rgba(10,21,13,.38);z-index:25;backdrop-filter:blur(3px)}.detail-backdrop[hidden]{display:none}.detail-panel{position:fixed;z-index:26;right:0;top:0;bottom:0;width:min(450px,100%);background:#fbfcfa;box-shadow:-10px 0 45px #17372522;transform:translateX(110%);transition:transform .32s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}.detail-panel.open{transform:none}.detail-header{height:70px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.16em;color:#6f8074}.detail-header button{height:35px;width:35px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:26px;line-height:1;color:var(--ink)}.detail-scroll{padding:30px 28px 38px;overflow:auto;min-height:0;flex:1}.detail-num{font-size:12px;font-weight:850;color:var(--green);letter-spacing:.15em}.detail-scroll h2{font-size:clamp(30px,3.2vw,47px);line-height:1.04;letter-spacing:-.07em;margin:15px 0 13px}.detail-description{color:#637166;font-size:15px;line-height:1.6;margin:0 0 21px}.screen-switch{display:inline-flex;border:1px solid #d3dfd4;border-radius:10px;overflow:hidden;background:#edf3ed;margin-bottom:18px}.screen-switch button{background:transparent;border:0;padding:11px 18px;font-size:12px;font-weight:700;color:#596a5e}.screen-switch button.selected{background:#0c6541;color:#fff}.detail-image{width:100%;min-height:180px;max-height:420px;display:grid;place-items:center;background:#14201d;border-radius:13px;overflow:hidden;border:1px solid #c8d3cc}.detail-image img{display:block;width:100%;height:100%;max-height:420px;object-fit:contain}.detail-image.is-mobile{background:#f0f3ee;max-height:440px;min-height:280px}.detail-image.is-mobile img{width:auto;max-height:440px;max-width:100%}.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.detail-tags span{display:inline-block;padding:9px 12px;background:#edf3ed;font-size:11px;font-weight:650;color:#506957;border:1px solid #dde8dc;border-radius:7px}.detail-visit{background:#0b6840;color:white;padding:16px 19px;display:flex;justify-content:space-between;gap:14px;align-items:center;border-radius:10px;font-weight:790;font-size:13px}.detail-visit:hover{background:#128455}.detail-visit span{font-size:22px}.detail-note{font-size:11px;line-height:1.5;color:#899689;margin-top:15px}
@media(max-width:1330px){:root{--side:245px}.sidebar-content{padding:35px 23px 10px}.sidebar-bottom{padding:14px 21px 18px}.brand{padding:24px 22px}.brand img{width:155px}h1{font-size:41px}.sidebar-copy{font-size:14px}.topbar{padding:0 19px}.top-title{gap:9px}.hint-bar{bottom:17px;left:39%;font-size:10px;gap:10px}.map-box{width:170px}.mini-world{width:146px;height:79px}}
@media(max-width:1040px) and (min-width:821px){.hint-bar{left:35%}.top-title small{display:none}.top-title .title-sep{display:none}.sidebar-separator{margin:22px 0}.sidebar-content{padding-top:26px}.feature{margin-bottom:12px}}
@media(max-width:820px){:root{--side:0px;--top:65px}.app{display:block}.sidebar{display:none}.workspace{height:100vh;height:100dvh}.topbar{padding:0 13px;gap:8px}.mobile-brand{display:block;flex:none;width:111px}.mobile-brand img{width:108px;height:50px;object-fit:contain}.top-title{min-width:0;margin-right:auto;gap:0}.top-title strong{font-size:12px}.top-title .top-signal,.top-title .title-sep,.top-title small{display:none}.top-actions{gap:7px}.pill{padding:0 9px;height:35px!important;border-radius:8px}.pill span:last-child{display:none}.top-actions .zoom-controls,.top-actions .fullscreen{display:none}.canvas-label{left:15px;top:15px;font-size:9px}.view-hint{display:none}.map-box,.hint-bar,.canvas-credit{display:none}.mobile-tools{display:flex;position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 17px);left:50%;transform:translateX(-50%);gap:0;align-items:center;border:1px solid #c9d7ca;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 6px 30px #172b1d20;height:48px;overflow:hidden;white-space:nowrap}.mobile-tools button{height:100%;border:0;background:transparent;color:#13573a;font-size:22px;font-weight:500;min-width:40px}.mobile-tools button:first-child{padding:0 11px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:750;border-right:1px solid #d9e3d8}.mobile-tools output{font-size:11px;font-weight:800;width:47px;text-align:center}.detail-panel{top:auto;bottom:0;right:0;left:0;max-height:87dvh;width:100%;border-radius:20px 20px 0 0;transform:translateY(110%);box-shadow:0 -20px 50px #18322222}.detail-panel.open{transform:none}.detail-header{height:57px;padding:0 19px}.detail-scroll{padding:22px 20px 34px}.detail-scroll h2{font-size:37px}.detail-image{max-height:390px}.detail-image img{max-height:390px}}
@media(max-width:390px){.top-title strong{font-size:11px}.mobile-brand{width:99px}.mobile-brand img{width:95px}.mobile-tools{max-width:calc(100% - 16px)}.mobile-tools button:first-child{padding:0 8px}.mobile-tools button:first-child span{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* V2 — navegación móvil persistente: separada de la superficie arrastrable */
.mobile-bottom-nav{display:none}
@media(max-width:820px){
  .mobile-bottom-nav{position:fixed;z-index:15;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:stretch;gap:6px;height:calc(65px + env(safe-area-inset-bottom,0px));padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));background:rgba(250,252,248,.98);border-top:1px solid #cfdbcf;box-shadow:0 -7px 28px rgba(19,46,26,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .mobile-bottom-link{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border:1px solid transparent;border-radius:11px;background:transparent;color:#294538;text-align:center;font-size:11px;font-weight:750;line-height:1.15;text-decoration:none;touch-action:manipulation;cursor:pointer}
  .mobile-bottom-link svg{flex:none}
  .mobile-bottom-link:active{background:#e6f2e9}
  .mobile-bottom-explore{background:#e9f2e9;border-color:#cddfd0;color:#105d38}
  .mobile-bottom-whatsapp{background:#0e7448;border-color:#0e7448;color:#fff}
  .mobile-bottom-whatsapp:active{background:#0b5d38}
  .mobile-tools{bottom:calc(65px + env(safe-area-inset-bottom,0px) + 14px)}
  .canvas-credit{display:none}
}
@media(max-width:390px){
 .mobile-bottom-nav{gap:3px;padding-inline:7px}
 .mobile-bottom-link{font-size:10px}
}

@media(max-width:820px){.mobile-tools #mobile-fit{display:none}.mobile-tools{height:44px}}