.clase-d-hero{padding:96px 0 54px;background:radial-gradient(circle at 82% 18%,rgba(56,189,248,.18),transparent 34%),linear-gradient(145deg,#07111f,#0b1e32 58%,#0b4662);border-bottom:1px solid rgba(255,255,255,.08)}
.clase-d-hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr);gap:34px;align-items:center}
.clase-d-hero h1{max-width:820px;margin:12px 0 18px;color:#fff;font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.04em}
.clase-d-hero .lead{max-width:760px;color:#c8d9e8;font-size:18px;line-height:1.65}
.clase-d-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:8px 12px;border:1px solid rgba(103,232,249,.35);border-radius:999px;background:rgba(8,145,178,.16);color:#a5f3fc;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.clase-d-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 5px rgba(34,211,238,.12)}
.clase-d-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.clase-d-hero-actions button{font:inherit}
.clase-d-hero-panel{padding:26px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.035));box-shadow:0 24px 70px rgba(0,0,0,.25);backdrop-filter:blur(12px)}
.clase-d-hero-panel>strong{display:block;margin-bottom:16px;color:#fff;font-size:18px}
.clase-d-hero-panel dl{display:grid;gap:0;margin:0}
.clase-d-hero-panel dl div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.clase-d-hero-panel dl div:last-child{border-bottom:0}
.clase-d-hero-panel dt{color:#9db4c8}
.clase-d-hero-panel dd{margin:0;color:#fff;font-weight:800;text-align:right}
.clase-d-disclaimer{padding:18px 0;background:#fff8e8;border-bottom:1px solid #f0dba5}
.clase-d-disclaimer p{margin:0;color:#6f5315;line-height:1.55}
.clase-d-section{min-height:620px;padding:48px 0 80px;background:#f4f7fb}
.clase-d-loading{display:grid;place-items:center;min-height:360px;color:#496176;text-align:center}
.clase-d-spinner{width:40px;height:40px;border:4px solid #d8e5ef;border-top-color:#0ea5e9;border-radius:50%;animation:clase-d-spin .8s linear infinite}
@keyframes clase-d-spin{to{transform:rotate(360deg)}}
.clase-d-shell{display:grid;gap:26px}
.clase-d-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-end}
.clase-d-toolbar h2{margin:0;color:#10243a;font-size:32px;letter-spacing:-.03em}
.clase-d-toolbar p{margin:7px 0 0;color:#5e7488}
.clase-d-toolbar-actions{display:flex;flex-wrap:wrap;gap:10px}
.clase-d-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 16px;border:1px solid transparent;border-radius:13px;font:inherit;font-weight:800;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.clase-d-button:hover{transform:translateY(-1px)}
.clase-d-button:focus-visible{outline:3px solid rgba(14,165,233,.32);outline-offset:2px}
.clase-d-button.primary{background:linear-gradient(135deg,#0284c7,#2563eb);color:#fff;box-shadow:0 12px 26px rgba(2,132,199,.24)}
.clase-d-button.secondary{border-color:#c8d6e3;background:#fff;color:#17344d}
.clase-d-button.danger{border-color:#fecaca;background:#fff7f7;color:#b91c1c}
.clase-d-button.ghost{background:transparent;color:#36536c}
.clase-d-button[disabled]{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
.clase-d-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.clase-d-stat{padding:20px;border:1px solid #dce6ee;border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(15,35,55,.05)}
.clase-d-stat span{display:block;color:#688096;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.clase-d-stat strong{display:block;margin-top:7px;color:#122a40;font-size:27px}
.clase-d-panel{padding:24px;border:1px solid #dce6ee;border-radius:22px;background:#fff;box-shadow:0 16px 38px rgba(15,35,55,.055)}
.clase-d-panel-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.clase-d-panel-head h3{margin:0;color:#122a40;font-size:24px}
.clase-d-panel-head p{margin:6px 0 0;color:#657b8f;line-height:1.5}
.clase-d-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.clase-d-mode-card{display:flex;min-height:170px;flex-direction:column;align-items:flex-start;padding:20px;border:1px solid #d9e6ef;border-radius:18px;background:linear-gradient(145deg,#fff,#f7fbfe);color:#143047;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.clase-d-mode-card:hover{transform:translateY(-2px);border-color:#7dd3fc;box-shadow:0 16px 30px rgba(14,165,233,.1)}
.clase-d-mode-card small{color:#0284c7;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.clase-d-mode-card strong{display:block;margin-top:14px;font-size:20px}
.clase-d-mode-card span{display:block;margin-top:8px;color:#63798c;line-height:1.48}
.clase-d-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.clase-d-module{padding:20px;border:1px solid #dce6ee;border-radius:18px;background:#fff}
.clase-d-module-top{display:flex;gap:14px;align-items:flex-start}
.clase-d-module-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:#e9f7ff;color:#0369a1;font-size:22px;font-weight:900}
.clase-d-module h4{margin:0;color:#122a40;font-size:19px}
.clase-d-module p{margin:7px 0 0;color:#667c8f;line-height:1.45}
.clase-d-module-progress{height:8px;margin:18px 0 10px;overflow:hidden;border-radius:999px;background:#e8eef3}
.clase-d-module-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0ea5e9,#2563eb)}
.clase-d-module-meta{display:flex;justify-content:space-between;gap:12px;color:#6b8195;font-size:12px}
.clase-d-module-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.clase-d-lesson-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.clase-d-lesson{padding:16px;border:1px solid #dce6ee;border-radius:16px;background:#f9fcff;cursor:pointer;text-align:left}
.clase-d-lesson strong{display:block;color:#18344c;line-height:1.3}
.clase-d-lesson span{display:block;margin-top:7px;color:#6a8093;font-size:12px;line-height:1.4}
.clase-d-attempts{display:grid;gap:10px}
.clase-d-attempt{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;border:1px solid #e0e8ee;border-radius:14px;background:#fbfdff}
.clase-d-attempt strong{color:#17344c}
.clase-d-attempt span{color:#6b8195;font-size:13px}
.clase-d-empty{padding:28px;border:1px dashed #c7d6e1;border-radius:16px;color:#688096;text-align:center}
.clase-d-quiz{display:grid;gap:18px}
.clase-d-quiz-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:20px;border-radius:20px;background:linear-gradient(135deg,#0b1f34,#0b4c68);color:#fff}
.clase-d-quiz-head h2{margin:0;font-size:26px}
.clase-d-quiz-head p{margin:7px 0 0;color:#b9d2e4}
.clase-d-timer{display:flex;min-width:118px;flex-direction:column;align-items:flex-end}
.clase-d-timer span{color:#9fc1d6;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.clase-d-timer strong{font-size:28px;font-variant-numeric:tabular-nums}
.clase-d-progressbar{height:9px;overflow:hidden;border-radius:999px;background:#dfe8ef}
.clase-d-progressbar i{display:block;height:100%;background:linear-gradient(90deg,#06b6d4,#2563eb);transition:width .2s ease}
.clase-d-question-card{padding:26px;border:1px solid #dbe6ee;border-radius:22px;background:#fff;box-shadow:0 18px 44px rgba(15,35,55,.065)}
.clase-d-question-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.clase-d-pill{display:inline-flex;padding:6px 9px;border-radius:999px;background:#eaf6fd;color:#0369a1;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.clase-d-question-card h3{margin:0;color:#10283e;font-size:clamp(22px,3vw,30px);line-height:1.3}
.clase-d-formula{margin-top:16px;padding:13px 15px;border-radius:12px;background:#eef7fb;color:#16425f;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}
.clase-d-options{display:grid;gap:11px;margin-top:22px}
.clase-d-option{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;width:100%;padding:14px;border:1px solid #d9e4ec;border-radius:15px;background:#fff;color:#17344c;text-align:left;font:inherit;cursor:pointer}
.clase-d-option:hover{border-color:#7dd3fc;background:#f7fcff}
.clase-d-option.selected{border-color:#0284c7;background:#eff9ff;box-shadow:0 0 0 3px rgba(2,132,199,.08)}
.clase-d-option.correct{border-color:#22c55e;background:#f0fdf4}
.clase-d-option.wrong{border-color:#ef4444;background:#fff1f2}
.clase-d-option-index{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#e9f2f8;font-weight:900}
.clase-d-feedback{margin-top:18px;padding:17px;border-radius:15px;border-left:4px solid #0284c7;background:#f0f8fd;color:#294b64;line-height:1.55}
.clase-d-feedback strong{display:block;margin-bottom:6px;color:#123b56}
.clase-d-feedback small{display:block;margin-top:10px;color:#647c90}
.clase-d-quiz-actions{display:flex;justify-content:space-between;gap:12px;align-items:center}
.clase-d-quiz-actions-group{display:flex;flex-wrap:wrap;gap:10px}
.clase-d-result-hero{padding:28px;border-radius:22px;background:linear-gradient(135deg,#0b1f34,#0e7490);color:#fff;text-align:center}
.clase-d-result-score{font-size:64px;font-weight:950;letter-spacing:-.05em}
.clase-d-result-hero h2{margin:4px 0 8px}
.clase-d-result-hero p{margin:0;color:#c3dcea}
.clase-d-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.clase-d-result-grid div{padding:13px;border-radius:14px;background:rgba(255,255,255,.09)}
.clase-d-result-grid span{display:block;color:#a9c7d8;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.clase-d-result-grid strong{display:block;margin-top:5px;font-size:20px}
.clase-d-breakdown{display:grid;gap:10px}
.clase-d-breakdown-row{display:grid;grid-template-columns:minmax(150px,1fr) 2fr 70px;gap:12px;align-items:center}
.clase-d-breakdown-row span{color:#38556c}
.clase-d-breakdown-track{height:9px;overflow:hidden;border-radius:999px;background:#e5edf3}
.clase-d-breakdown-track i{display:block;height:100%;background:#0ea5e9}
.clase-d-breakdown-row strong{text-align:right;color:#17344c}
.clase-d-review{display:grid;gap:12px}
.clase-d-review-item{padding:18px;border:1px solid #dce6ee;border-radius:16px;background:#fff}
.clase-d-review-item[data-correct="true"]{border-left:5px solid #22c55e}
.clase-d-review-item[data-correct="false"]{border-left:5px solid #ef4444}
.clase-d-review-item h4{margin:0;color:#17344c;line-height:1.4}
.clase-d-review-item p{margin:9px 0 0;color:#5e7488;line-height:1.5}
.clase-d-review-answer{display:grid;gap:5px;margin-top:12px;padding:12px;border-radius:12px;background:#f5f8fb}
.clase-d-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:rgba(4,12,22,.72)}
.clase-d-modal[hidden]{display:none}
.clase-d-modal-card{width:min(720px,100%);max-height:min(82vh,760px);overflow:auto;padding:26px;border-radius:22px;background:#fff;box-shadow:0 32px 90px rgba(0,0,0,.38)}
.clase-d-modal-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.clase-d-modal-head h3{margin:0;color:#122a40;font-size:26px}
.clase-d-modal-close{display:grid;place-items:center;width:42px;height:42px;border:1px solid #d7e2ea;border-radius:12px;background:#fff;color:#17344c;font-size:22px;cursor:pointer}
.clase-d-lesson-steps{display:grid;gap:14px;margin:22px 0}
.clase-d-lesson-step{padding:16px;border-left:4px solid #0ea5e9;border-radius:12px;background:#f2f8fc}
.clase-d-lesson-step strong{display:block;color:#17344c}
.clase-d-lesson-step p{margin:6px 0 0;color:#5d7488;line-height:1.55}
.clase-d-error{padding:24px;border:1px solid #fecaca;border-radius:18px;background:#fff1f2;color:#9f1239}
@media(max-width:980px){.clase-d-hero-grid{grid-template-columns:1fr}.clase-d-stats{grid-template-columns:repeat(2,1fr)}.clase-d-mode-grid{grid-template-columns:1fr}.clase-d-lesson-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.clase-d-hero{padding:72px 0 42px}.clase-d-hero h1{font-size:40px}.clase-d-section{padding-top:30px}.clase-d-toolbar,.clase-d-panel-head,.clase-d-quiz-head,.clase-d-quiz-actions{align-items:stretch;flex-direction:column}.clase-d-toolbar-actions,.clase-d-quiz-actions-group{width:100%}.clase-d-toolbar-actions .clase-d-button,.clase-d-quiz-actions-group .clase-d-button{flex:1}.clase-d-module-grid,.clase-d-result-grid{grid-template-columns:1fr}.clase-d-timer{align-items:flex-start}.clase-d-breakdown-row{grid-template-columns:1fr 60px}.clase-d-breakdown-track{grid-column:1/-1;grid-row:2}.clase-d-breakdown-row strong{grid-column:2;grid-row:1}.clase-d-question-card{padding:20px}}
@media(max-width:480px){.clase-d-stats,.clase-d-lesson-grid{grid-template-columns:1fr}.clase-d-hero-actions{flex-direction:column}.clase-d-hero-actions .btn{width:100%;text-align:center}.clase-d-module-actions{display:grid}.clase-d-module-actions .clase-d-button{width:100%}}
@media(prefers-reduced-motion:reduce){.clase-d-spinner{animation:none}.clase-d-button,.clase-d-mode-card,.clase-d-progressbar i{transition:none}}