:root{color-scheme:light;--navy:#012e57;--ink:#0f172a;--cyan:#00a8e1;--action:#006796;--gold:#d4af37;--muted:#52657a;--line:#d8e4ed;--pale:#f1f7fc;font:16px/1.5 Roboto,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--pale)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}main{flex:1}h1,h2,p{margin:0}button,input{font:inherit}button{cursor:pointer}a{color:inherit}button,a,input{touch-action:manipulation}:focus-visible{outline:3px solid #008fc5;outline-offset:4px}[hidden]{display:none!important}
.wrap{width:min(calc(100% - 80px),1160px);margin-inline:auto}.definitions{display:block;position:absolute}.ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.masthead{background:var(--navy);color:white;border-bottom:3px solid var(--cyan)}.bar,.brand,.account,.academia,.cta,.card-link,.text-link,.primary{display:flex;align-items:center}.bar{min-height:76px;justify-content:space-between;gap:14px}.brand{color:white;text-decoration:none;gap:14px}.brand img{width:81px;height:auto;display:block}.brand span{border-left:1px solid #6b91b1;padding-left:14px;text-transform:uppercase;font-size:10px;line-height:1.4;font-weight:750;letter-spacing:.085em}.academia,.account button{color:#fff;font-size:14px;text-decoration:none;font-weight:600;gap:9px}.academia:hover{text-decoration:underline}.academia .ui-icon,.account .ui-icon{width:15px;height:15px}.account{gap:15px;min-width:0}.account span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:27vw;color:#daedf8;font-size:13px}.account button{display:flex;align-items:center;background:transparent;border:1px solid #6389a9;border-radius:8px;padding:7px 11px}.account button:hover{background:#174567}
#auth{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(310px,.82fr);align-items:stretch;margin:clamp(36px,7.4vh,86px) auto;border-radius:24px;overflow:hidden;border:1px solid #d1e1ed;background:white;box-shadow:0 18px 54px -34px #194c7890}
.welcome{background:linear-gradient(126deg,#012e57 30%,#06436e 100%);color:white;position:relative;isolation:isolate;overflow:hidden}.welcome{padding:clamp(32px,4.5vw,63px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}.welcome:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 86% 100%,#008fbc36,transparent 68%)}h1,h2,.card-title{font-family:Roboto,"Segoe UI",Arial,sans-serif;line-height:1.1}
.welcome h1{font-size:clamp(52px,5.9vw,86px);letter-spacing:-.065em;font-weight:750;max-width:100%}.welcome h1 span{display:block;color:#57d1fc}.welcome-copy>p{max-width:400px;color:#d6eaf7;font-size:clamp(16px,1.4vw,19px);line-height:1.55;margin-top:20px}.market{padding-top:14px;border-top:1px solid #ffffff29}.chart-kind{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-family:ui-monospace,monospace;font-size:10px;color:#c0daeb;letter-spacing:.06em}.chart-kind span{font-weight:700;letter-spacing:.09em;color:#f5fbff}.chart-kind i{width:3px;height:3px;border-radius:50%;background:#84b5ce}.chart-art{display:block;width:100%;height:134px}
#access{padding:clamp(32px,4vw,60px);align-self:center;min-width:0}#access h2,dialog h2{font-size:clamp(27px,2.5vw,35px);letter-spacing:-.045em;color:var(--navy)}#intro-form{font-size:15px;color:var(--muted);margin:8px 0 26px}#access label{display:block;font-size:14px;font-weight:650;color:#1a324a}#pass-label{margin-top:17px}#access input{border:1px solid #bccddb;border-radius:8px;padding:12px 14px;width:100%;height:47px;background:#fcfdff;color:var(--ink);font-size:16px;margin:6px 0 0}#access input:focus{border-color:#007bb1;outline:3px solid #00a8e122;outline-offset:0}#access input::placeholder{color:#67798a}.pass-field{position:relative}#password{padding-right:47px!important}#toggle-pass{position:absolute;right:3px;bottom:2px;height:42px;width:42px;display:grid;place-items:center;background:none;color:#526984;border:0;border-radius:6px}#toggle-pass[aria-pressed=true]{color:var(--action);background:#eaf5fd}.text-link{display:inline-flex;gap:7px;background:none;border:0;padding:0;text-decoration:none;font-weight:650;font-size:14px;line-height:1.5;color:var(--action)}.text-link:hover{text-decoration:underline}.recover{display:flex;margin:10px 0 0 auto}.primary,.cta{gap:10px;justify-content:center;background:var(--action);border:0;border-radius:8px;min-height:46px;color:white;font-weight:700}.primary{width:100%;margin-top:22px}.primary:hover{background:#004f79}.primary:active{transform:translateY(1px)}.primary:disabled{opacity:.65}.primary .ui-icon,.cta .ui-icon{width:17px;height:17px}.switches{border-top:1px solid var(--line);padding-top:18px;margin-top:22px;text-align:center;font-size:14px;color:var(--muted)}.switches button{display:inline-flex}.switches p button{margin-left:3px}#message,#hint{font-size:14px;line-height:1.45;margin-top:12px;color:var(--muted)}#message:not(:empty){border-left:3px solid var(--cyan);padding:7px 11px;background:#edf7fc;color:var(--navy)}#message[data-error=true]{border-color:#b45432;background:#fff5ef;color:#802b15}#hint:empty,#message:empty{display:none}
footer{border-top:1px solid var(--line);padding:18px 0 23px;display:flex;justify-content:space-between;color:#566d81;font-size:12px}footer a:hover{color:var(--navy)}
dialog{border:1px solid var(--line);border-radius:17px;color:var(--ink);padding:29px;width:min(400px,calc(100% - 32px));box-shadow:0 18px 64px #012e573d}dialog::backdrop{background:#06264385}dialog h2{font-size:25px}dialog p{color:var(--muted);margin:12px 0 0;font-size:15px}
@media(max-width:850px){.wrap{width:calc(100% - 40px)}#auth{grid-template-columns:1fr 1fr}.welcome,#access{padding:30px}.welcome h1{font-size:57px}.account span{max-width:35vw}}
@media(max-width:675px){.wrap{width:calc(100% - 32px)}.bar{min-height:62px}.brand img{width:64px}.brand{gap:10px}.brand span{padding-left:10px;font-size:8px}.academia{font-size:12px}#auth{grid-template-columns:1fr;margin:21px auto 28px;border-radius:16px}.welcome{padding:23px 25px;gap:0}.welcome h1{font-size:clamp(30px,8.5vw,45px);letter-spacing:-.06em}.welcome h1 span{display:inline}.welcome-copy>p{font-size:14px;margin-top:7px;max-width:43ch}.market{display:none}#access{padding:26px 25px 28px}#intro-form{margin:7px 0 21px}.account{gap:8px}.account span{max-width:27vw;font-size:11px}.account button{font-size:12px;padding:6px}.account .ui-icon{display:none}}
@media(max-width:480px){.brand span{font-size:8px}.account span{max-width:25vw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.primary:active{transform:none}}
/* El fondo del panel se recorta al ancho de la página y nunca captura clics. */
body:has(#desk:not([hidden])) {
  background: radial-gradient(ellipse at 83% 3%, #c7e6f6, transparent 48%),
              radial-gradient(ellipse at 8% 77%, #d8f1ef, transparent 44%),
              linear-gradient(140deg, #eff7ff, #f6faff 63%, #e6effa);
}
#desk { isolation: isolate; padding-bottom: clamp(36px, 6vh, 74px); }
.ecosystem-sky { position: absolute; inset: 79px 0 auto; height: min(90vh, 850px); overflow: hidden; z-index: -1; pointer-events: none; }
.orbits { position: absolute; top: -101px; right: -114px; width: min(77vw, 1050px); height: 575px; transform: rotate(-17deg); }
.orbits i { position: absolute; inset: 5% 0; border: 1px solid #679abb3e; border-radius: 50%; }
.orbits i:nth-child(2) { inset: 12% 4%; }
.orbits i:nth-child(3) { inset: 19% 9%; }
.orbits i:nth-child(4) { inset: 26% 15%; }
.orbits i::after { content: ""; position: absolute; top: 49%; left: -3px; width: 5px; height: 5px; border-radius: 50%; background: #82b5ce; box-shadow: 0 0 0 4px #9cc5d925; }
.orbits i:nth-child(2)::after { top: 0; left: 50%; }
.orbits i:nth-child(3)::after { top: auto; bottom: 0; left: 50%; }
.desk-head { padding: clamp(32px, 5.5vh, 54px) 0 25px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--action); font-weight: 750; margin-bottom: 7px; }
.desk-head h1 { font-size: clamp(39px, 4.3vw, 58px); letter-spacing: -.06em; color: var(--navy); }
.desk-head h1 span { color: #007bab; }

.tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.card {
  grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  position: relative; isolation: isolate; overflow: hidden; min-height: 232px; min-width: 0;
  padding: clamp(20px, 2.05vw, 30px); border: 1px solid var(--edge); border-radius: 19px;
  color: var(--navy); text-decoration: none; font: inherit;
  box-shadow: 0 9px 21px -17px #14395768; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card h2, .card-title { line-height: 1.13; font-size: clamp(21px, 1.8vw, 25px); letter-spacing: -.04em; font-weight: 730; }
.card p, .card .desc { font-size: 14px; line-height: 1.5; margin: 8px 0 18px; }
.card-link, .cta { gap: 8px; font-weight: 700; width: fit-content; margin-top: auto; }
.card-link { color: var(--tone); font-size: 14px; }
.card .cta { color: var(--action-ink); background: var(--button-fill); padding: 8px 13px; min-height: 35px; font-size: 13px; border-radius: 9px; }
.card-link .ui-icon, .cta .ui-icon { width: 16px; height: 16px; transition: transform .18s ease; }
.card:focus-visible { transform: translateY(-3px); }
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); border-color: var(--hover); box-shadow: 0 14px 29px -16px #14395770; }
  .card:hover .card-link .ui-icon, .card:hover .cta .ui-icon { transform: translateX(3px); }
}
.card:active { transform: translateY(-1px); }
.lead { grid-column: span 3; color: white; }
.feature {
  --edge: #164b77; --hover: #38bbf2; --button-fill: #b0ebff; --action-ink: #0a3752;
  background: radial-gradient(ellipse at 97% 110%, #1579a5, transparent 61%), linear-gradient(117deg, #092d55, #064c79);
}
.locked {
  --edge: #31566e; --hover: #d6b66b; --button-fill: #f5dfa6; --action-ink: #48330c;
  background: radial-gradient(ellipse at 98% 112%, #49777a, transparent 64%), linear-gradient(115deg, #182d49, #24475b);
}
.chip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 9px; margin-bottom: 14px;
  border-radius: 99px; border: 1px solid #a5d6f04f; background: #082d5177; color: #cff4ff; font-size: 11px; line-height: 16px; font-weight: 650; }
.locked .chip { border-color: #e4c78369; color: #ffe6ad; background: #172e43a8; }
.chip .ui-icon { width: 13px; height: 13px; }
.lead h2, .lead .card-title { font-size: clamp(24px, 2.25vw, 34px); line-height: 1.1; letter-spacing: -.045em; max-width: 82%; text-wrap: balance; }
.lead p, .lead .desc { max-width: 68%; color: #e2eff9; }
.card-art, .module-art { position: absolute; z-index: -1; pointer-events: none; }
.card-art { right: -9px; bottom: 13px; width: 31%; height: 91px; transform: rotate(-7deg) skewY(-2deg); }
.replay-window, .depth-pane { position: absolute; inset: 0; border-radius: 8px; border: 1px solid #bef1ff50; background: #2178a23b; box-shadow: 6px 7px 0 #0e385459, 10px 12px 0 #83ced21b; overflow: hidden; }
.replay-window .chart-art { width: 100%; height: 100%; opacity: .94; }
.depth-pane { padding: 10px 14px; border-color: #e3d9b25e; background: #15374665; display: flex; flex-direction: column; justify-content: space-around; gap: 3px; }
.depth-pane i { display: block; height: 5px; margin-left: auto; width: 75%; background: linear-gradient(to left, #59c8cf99, #83d2cf55); border-radius: 2px; }
.depth-pane i:nth-child(2) { width: 59%; }
.depth-pane i:nth-child(3) { width: 40%; }
.depth-pane i:nth-child(n+4) { margin: 0; background: linear-gradient(to right, #e7c77ead, #e7c77e53); }
.depth-pane i:nth-child(4) { width: 39%; }
.depth-pane i:nth-child(5) { width: 62%; }

.module { background: radial-gradient(ellipse at 98% 0, var(--wash), transparent 73%), linear-gradient(135deg, #fff, var(--paper)); }
.module p { color: #374f62; }
.diary { --tone: #116c6a; --edge: #b6dad5; --hover: #54a7a0; --wash: #c4e8df; --paper: #f1fbf8; }
.library { --tone: #1b6092; --edge: #bfd8ed; --hover: #5d9dc6; --wash: #cde4f5; --paper: #f2f8ff; }
.mentoring { --tone: #58477f; --edge: #d4cce7; --hover: #aa92c9; --wash: #e1d8f0; --paper: #f8f5fc; }
.icon-box { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; margin-bottom: 17px; flex: none; }
.module .icon-box { color: var(--tone); background: #ffffffcb; border: 1px solid var(--edge); }
.icon-box .ui-icon { width: 23px; height: 23px; }
dialog .icon-box { background: #faf3dc; color: #805e0f; }
.module-art { top: 9px; right: -8px; width: 97px; height: 58px; color: var(--tone); opacity: .19; }
.journal-art i { display: block; position: absolute; right: 9px; top: 3px; width: 54px; height: 51px;
  border: 2px solid; border-left-width: 7px; border-radius: 4px; transform: rotate(12deg) skewY(-9deg); box-shadow: 4px 3px 0 -1px var(--wash), 5px 4px currentColor; }
.journal-art i::after { content: ""; position: absolute; inset: 11px 8px; background: repeating-linear-gradient(currentColor 0 1px, transparent 1px 8px); }
.books-art i { width: 56px; height: 13px; position: absolute; right: 12px; top: 11px; transform: skew(-28deg) rotate(-7deg); border: 2px solid; border-radius: 4px; background: var(--wash); }
.books-art i:nth-child(2) { top: 23px; right: 17px; } .books-art i:nth-child(3) { top: 35px; right: 13px; }
.steps-art { display: flex; gap: 4px; align-items: flex-end; transform: rotate(-8deg); padding-left: 14px; }
.steps-art i { width: 18px; height: 18px; border: 2px solid; border-radius: 3px; box-shadow: 3px -3px var(--wash), 4px -4px currentColor; }
.steps-art i:nth-child(2) { height: 31px; } .steps-art i:nth-child(3) { height: 45px; }

@media(max-width: 850px) {
  .tools { gap: 13px; } .card { padding: 19px; }
  .lead h2, .lead .card-title { max-width: 100%; }
}
@media(max-width: 720px) {
  .tools { grid-template-columns: 1fr; gap: 13px; }
  .card, .lead { grid-column: auto; min-height: 0; padding: 21px; }
  .lead { min-height: 211px; }
  .module { min-height: 168px; }
  .module .icon-box { width: 36px; height: 36px; margin-bottom: 13px; }
  .desk-head { padding: 26px 0 19px; }
  .orbits { right: -45%; width: 130%; }
}
@media(prefers-reduced-motion: reduce) {
  .card:hover, .card:active, .card:focus-visible, .card:hover .card-link .ui-icon, .card:hover .cta .ui-icon { transform: none; }
}