.tools-commercial{padding:120px clamp(24px,7vw,115px);position:relative;overflow:hidden;background:#071612;color:white}
.tools-commercial:before{content:"";position:absolute;width:700px;height:700px;right:-320px;top:-280px;border:1px solid rgba(202,243,55,.09);border-radius:50%;box-shadow:0 0 0 100px rgba(202,243,55,.025),0 0 0 200px rgba(202,243,55,.018)}
.tools-commercial-head{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .55fr;align-items:end;gap:8vw}
.tools-commercial-head .eyebrow{color:rgba(255,255,255,.55)}
.tools-commercial-head h2{max-width:850px;margin:20px 0 0;font:700 clamp(42px,4.7vw,68px)/1.05 var(--display);letter-spacing:-.055em}
.tools-commercial-head h2 em{font-style:normal;color:var(--lime)}
.tools-commercial-head>p{margin:0 0 7px;color:rgba(255,255,255,.55);font-size:16px;line-height:1.7}
.tools-bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:70px}
.tool-card{min-height:390px;padding:34px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#10271f;transition:transform .25s,border-color .25s,box-shadow .25s}
.tool-card:hover{transform:translateY(-5px);border-color:rgba(202,243,55,.38);box-shadow:0 24px 55px rgba(0,0,0,.22)}
.tool-kicker{display:block;color:var(--lime);font:700 9px var(--display);letter-spacing:.17em}
.tool-card h3{max-width:550px;margin:18px 0 12px;font:700 clamp(24px,2.4vw,35px)/1.12 var(--display);letter-spacing:-.04em}
.tool-card>p,.tool-card-copy>p,.tool-backup>div>p{max-width:590px;color:rgba(255,255,255,.56);font-size:13px;line-height:1.65}
.tool-load{grid-column:span 8;min-height:500px;display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:4vw;background:radial-gradient(circle at 85% 15%,rgba(30,172,105,.18),transparent 28%),#0b211a}
.tool-proof{display:flex;align-items:center;gap:13px;margin-top:30px}
.tool-proof strong{font:700 36px var(--display);color:var(--lime)}
.tool-proof span{color:rgba(255,255,255,.45);font-size:9px;line-height:1.35}
.load-panel{padding:24px;background:#f3f5ef;color:#071612;box-shadow:0 25px 50px rgba(0,0,0,.25);transform:rotate(1deg)}
.load-panel>header{display:flex;justify-content:space-between;font-size:7px;letter-spacing:.12em}
.load-panel header>b{padding:5px 7px;background:#e5f1cb;color:#537019;font-size:6px}
.load-bars{height:200px;margin-top:20px;padding-top:12px;display:flex;align-items:stretch;justify-content:space-around;border-bottom:1px solid #ccd5ce;background:repeating-linear-gradient(to top,transparent 0,transparent 44px,#e1e6e1 45px)}
.load-bars>span{width:13%;display:grid;grid-template-rows:auto 1fr auto;gap:5px;text-align:center}
.load-bars small{font-size:7px;color:#748078}
.load-bars i{display:flex;align-items:flex-end;justify-content:center}
.load-bars i u{width:14px;height:var(--h);background:#2f9870}
.load-bars .match i u{background:var(--lime)}
.load-bars em{font-style:normal;font-size:6px;color:#76817b}
.load-panel>footer{padding:17px 0 0;background:transparent;color:#071612;display:flex;justify-content:space-between}
.load-panel footer div{display:block}
.load-panel footer span,.load-panel footer strong{display:block}
.load-panel footer span{font-size:6px;color:#7b8680}
.load-panel footer strong{margin-top:3px;font-size:12px}
.tool-player{grid-column:span 4;background:linear-gradient(145deg,var(--lime),#9fe542);color:#071612}
.tool-player .tool-kicker{color:#315523}
.tool-player>p{color:rgba(7,22,18,.65)}
.player-score{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;margin:30px 0 20px;padding:14px;background:rgba(255,255,255,.55)}
.player-score>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#071612;color:white;font-size:8px}
.player-score small,.player-score strong{display:block}
.player-score small{font-size:6px;color:#5b6d54}
.player-score strong{margin-top:4px;font-size:9px}
.player-score>b{font:700 16px var(--display);color:#276b49}
.skill-lines{display:grid;gap:12px}
.skill-lines>span{display:grid;grid-template-columns:70px 1fr 22px;align-items:center;gap:7px}
.skill-lines small{font-size:8px}
.skill-lines i{height:5px;background:rgba(7,22,18,.14)}
.skill-lines i u{display:block;width:var(--w);height:100%;background:#071612}
.skill-lines b{font-size:8px}
.tool-concepts{grid-column:span 5;background:#e9eee6;color:#071612}
.tool-concepts .tool-kicker{color:#347557}
.tool-concepts>p{color:#637069}
.concept-chain{display:flex;align-items:center;justify-content:space-between;margin:32px 0 20px}
.concept-chain>span{width:78px;height:78px;border-radius:50%;display:grid;place-content:center;text-align:center;border:1px solid #bfcac1;background:white}
.concept-chain i,.concept-chain b{display:block}
.concept-chain i{font-style:normal;font-size:6px;color:#3b8663}
.concept-chain b{font-size:8px;margin-top:4px}
.concept-chain em{font-style:normal;color:#7f8d85}
.concept-result{display:flex;align-items:center;gap:10px;padding:12px;background:#dcebcf}
.concept-result>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--lime);font-size:10px}
.concept-result small{font-size:8px;color:#50625a}
.tool-learning{grid-column:span 7;background:#112e25}
.learning-progress{margin:26px 0 18px}
.learning-progress>div{display:flex;justify-content:space-between;font-size:7px}
.learning-progress>div b{color:var(--lime)}
.learning-progress>i{display:block;height:6px;margin-top:8px;background:rgba(255,255,255,.11)}
.learning-progress>i u{display:block;width:72%;height:100%;background:var(--lime)}
.tool-learning ol{list-style:none;padding:0;margin:0}
.tool-learning li{display:grid;grid-template-columns:32px 1fr;gap:11px;align-items:center;padding:11px 0;border-top:1px solid rgba(255,255,255,.1)}
.tool-learning li>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.19);font-size:7px;color:rgba(255,255,255,.55)}
.tool-learning li.complete>span{background:#2b8b64;color:white}
.tool-learning li.active>span{background:var(--lime);color:#071612}
.tool-learning li b,.tool-learning li small{display:block}
.tool-learning li b{font-size:9px}
.tool-learning li small{margin-top:3px;color:rgba(255,255,255,.42);font-size:7px}
.tool-resources{grid-column:span 7;background:#15352a}
.resource-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:30px}
.resource-stack>span{min-height:125px;padding:14px;display:flex;flex-direction:column;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.resource-stack i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:#071612;font:700 10px var(--display)}
.resource-stack b{margin-top:auto;font-size:9px}
.resource-stack small{margin-top:4px;color:rgba(255,255,255,.43);font-size:7px}
.tool-backup{grid-column:span 5;display:grid;grid-template-columns:1fr 130px;align-items:center;gap:15px;background:#091813}
.backup-status{display:flex;gap:10px;align-items:center;margin-top:25px;padding:13px;border:1px solid rgba(202,243,55,.2);background:rgba(202,243,55,.05)}
.backup-status>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:#071612;font-size:10px}
.backup-status strong,.backup-status small{display:block}
.backup-status strong{font-size:9px}
.backup-status small{margin-top:3px;color:rgba(255,255,255,.4);font-size:7px}
.backup-orbit{height:160px;position:relative;display:grid;place-items:center}
.backup-orbit>span{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#071612;font:800 18px var(--display)}
.backup-orbit i{position:absolute;border:1px solid rgba(202,243,55,.17);border-radius:50%}
.backup-orbit i:nth-of-type(1){width:95px;height:95px}
.backup-orbit i:nth-of-type(2){width:130px;height:130px}
.backup-orbit i:nth-of-type(3){width:8px;height:8px;right:8px;top:38px;background:#2f9d71;border:0}
.tools-commercial-cta{position:relative;z-index:1;margin-top:18px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035)}
.tools-commercial-cta strong,.tools-commercial-cta span{font:700 clamp(18px,2vw,28px) var(--display)}
.tools-commercial-cta span{margin-left:6px;color:var(--lime)}
@media(max-width:1050px){.tools-commercial-head{grid-template-columns:1fr}
.tools-commercial-head>p{max-width:650px}
.tool-load{grid-column:span 12}
.tool-player{grid-column:span 12}
.tool-concepts,.tool-backup{grid-column:span 5}
.tool-learning,.tool-resources{grid-column:span 7}
}
@media(max-width:720px){.tools-commercial{padding:80px 20px}
.tools-bento{display:block;margin-top:45px}
.tool-card{min-height:0;margin-bottom:12px;padding:27px}
.tool-load{display:block}
.load-panel{margin-top:28px;padding:16px}
.load-bars{height:165px}
.concept-chain>span{width:68px;height:68px}
.resource-stack{grid-template-columns:1fr}
.resource-stack>span{min-height:80px}
.tool-backup{grid-template-columns:1fr}
.backup-orbit{display:none}
.tools-commercial-cta{align-items:flex-start;flex-direction:column;gap:22px;padding:24px}
.tools-commercial-cta strong,.tools-commercial-cta span{display:block;margin-left:0}
}

/* Paleta 03: azul eléctrico + coral */
.tools-commercial{--tools-blue:#4c8dff;--tools-coral:#ff6b55;background:#0c1428}
.tools-commercial:before{border-color:rgba(76,141,255,.14);box-shadow:0 0 0 100px rgba(76,141,255,.04),0 0 0 200px rgba(255,107,85,.025)}
.tools-commercial-head h2 em,.tool-kicker,.tool-proof strong,.learning-progress>div b,.tools-commercial-cta span{color:var(--tools-coral)}
.tool-card{background:#17213b;border-color:rgba(140,174,255,.16)}
.tool-card:hover{border-color:rgba(76,141,255,.65);box-shadow:0 24px 60px rgba(2,7,20,.4),0 0 0 1px rgba(76,141,255,.08)}
.tool-load{background:radial-gradient(circle at 85% 15%,rgba(76,141,255,.25),transparent 31%),#111b35}
.load-panel{background:#f7f9ff;color:#0c1428}.load-panel header>b{background:#dce7ff;color:#245bb8}
.load-bars i u{background:var(--tools-blue)}.load-bars .match i u{background:var(--tools-coral)}
.tool-player{background:linear-gradient(145deg,#4c8dff,#76aaff);color:#081126}
.tool-player .tool-kicker{color:#152b60}.tool-player>p{color:rgba(8,17,38,.7)}
.player-score>span,.skill-lines i u{background:#0c1428}.player-score>b{color:#194baf}
.tool-concepts{background:#f2f5fc;color:#0c1428}.tool-concepts .tool-kicker,.concept-chain i{color:#306dcc}
.concept-result{background:#ffe1dc}.concept-result>span{background:var(--tools-coral);color:#fff}
.tool-learning{background:#192440}.learning-progress>i u,.tool-learning li.active>span{background:var(--tools-coral)}
.tool-learning li.complete>span,.resource-stack i{background:var(--tools-blue)}
.tool-resources{background:#152545}.resource-stack i{color:#fff}
.tool-backup{background:#101a31}.backup-status{border-color:rgba(255,107,85,.35);background:rgba(255,107,85,.08)}
.backup-status>span,.backup-orbit>span{background:var(--tools-coral);color:#fff}
.backup-orbit i{border-color:rgba(76,141,255,.28)}.backup-orbit i:nth-of-type(3){background:var(--tools-blue)}
.tools-commercial-cta{background:linear-gradient(90deg,rgba(76,141,255,.11),rgba(255,107,85,.07));border-color:rgba(76,141,255,.25)}
