:root {
  --ink: #202344;
  --muted: #747894;
  --purple: #5b5ce2;
  --purple-dark: #4849c9;
  --lavender: #efefff;
  --yellow: #ffc857;
  --mint: #d9f7ee;
  --pink: #ffe5f0;
  --line: #e6e6f3;
  --white: #fff;
  --shadow: 0 16px 40px rgba(55, 54, 133, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fafaff; color: var(--ink); font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.app-shell { min-height: 100vh; }
.topbar { height: 76px; display: flex; align-items: center; gap: 36px; padding: 0 max(24px, calc((100% - 1180px) / 2)); background: var(--white); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 14px; background: var(--lavender); font-size: 25px; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: -.4px; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.main-nav { display: flex; align-self: stretch; gap: 25px; }
.nav-link { display: flex; align-items: center; color: var(--muted); font-size: 14px; font-weight: 700; position: relative; }
.nav-link.is-active, .nav-link:hover { color: var(--purple); }
.nav-link.is-active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--purple); }
.topbar-badge, .progress-badge { padding: 9px 13px; border-radius: 20px; background: #f6f6fc; color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #4fcd9b; box-shadow: 0 0 0 3px #dff9ee; }
main { max-width: 1180px; margin: 0 auto; padding: 54px 24px 70px; }
.view { display: none; animation: appear .35s ease; }
.view.is-visible { display: block; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.hero { display: flex; align-items: center; justify-content: space-between; min-height: 350px; padding: 25px 74px; overflow: hidden; border-radius: 30px; background: linear-gradient(120deg, #eaeaff, #f5f2ff); }
.hero-copy { max-width: 540px; }
.eyebrow { display: inline-block; color: var(--purple); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 10px 0 14px; font-size: clamp(34px, 5vw, 51px); line-height: 1.05; letter-spacing: -1.8px; }
h1 span { color: var(--purple); }
.hero p, .page-header p { max-width: 475px; color: var(--muted); line-height: 1.6; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; padding: 13px 18px; cursor: pointer; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--purple); box-shadow: 0 8px 18px rgba(91, 92, 226, .22); }
.button-primary:hover { background: var(--purple-dark); }
.button-quiet { color: var(--purple); background: transparent; }
.hero .button { gap: 18px; margin-top: 11px; }
.hero-robot { position: relative; display: grid; place-items: center; width: 340px; height: 290px; }
.robot-face { display: grid; place-items: center; width: 255px; height: 240px; overflow: visible; z-index: 2; }
.robot-face img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.robot-wheels { display: flex; justify-content: space-between; width: 173px; margin-top: -4px; z-index: 1; }
.robot-wheels span { width: 38px; height: 59px; border-radius: 50%; background: var(--ink); }
.hero-shadow { position: absolute; bottom: 17px; width: 250px; height: 22px; border-radius: 50%; background: rgba(91, 92, 226, .16); }
.spark { position: absolute; color: var(--purple); font-size: 27px; }.spark-one { top: 20px; right: 18px; }.spark-two { bottom: 73px; left: 15px; font-size: 19px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 50px 0 21px; }
h2 { margin: 6px 0 0; font-size: 27px; letter-spacing: -.8px; }
.step-pill { padding: 8px 12px; border-radius: 16px; color: #ad7415; background: #fff4d9; font-size: 11px; font-weight: 800; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.entry-card { display: flex; gap: 24px; min-height: 190px; padding: 28px; border-radius: 22px; border: 1px solid transparent; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.entry-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(55, 54, 133, .16); }
.entry-card-course { background: var(--white); border-color: #e5e4ff; }.entry-card-sandbox { background: #fff8e9; border-color: #ffedc2; }
.card-icon { display: grid; place-items: center; width: 112px; height: 112px; flex: none; overflow: visible; border-radius: 25px; background: var(--lavender); }.card-icon img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }.entry-card-sandbox .card-icon { background: #ffebb9; }
.card-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.entry-card h3, .status-copy h3 { margin: 0 0 8px; font-size: 22px; }.entry-card p { margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }.card-action { color: var(--purple); font-size: 12px; font-weight: 800; }.card-action b { margin-left: 7px; }
.status-panel { display: flex; align-items: center; gap: 24px; margin-top: 24px; padding: 20px 28px; border: 1px solid var(--line); border-radius: 18px; background: white; }.status-illustration { display: grid; place-items: center; width: 130px; height: 82px; overflow: visible; border-radius: 18px; background: var(--mint); }.status-illustration img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }.status-copy { flex: 1; }.status-copy .card-label { margin-bottom: 3px; }.status-copy h3 { font-size: 16px; margin-bottom: 3px; }.status-copy p { margin: 0; color: var(--muted); font-size: 12px; }.connection-status { color: #43a982; font-size: 12px; font-weight: 800; }
.page-header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 35px; }.page-header h1 { margin-bottom: 8px; font-size: 42px; }.page-header p { margin-bottom: 0; }
.lesson-layout, .sandbox-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; }.lesson-sidebar { padding-right: 25px; border-right: 1px solid var(--line); }.progress-top { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 800; }.progress-top strong { color: var(--purple); }.progress-track { height: 7px; overflow: hidden; border-radius: 5px; background: #e9e9f5; }.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--purple); }.lesson-list { margin-top: 35px; }.list-title, .menu-title { display: block; margin-bottom: 15px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }.lesson-item { display: flex; align-items: center; gap: 10px; padding: 12px 8px; margin-bottom: 8px; border-radius: 12px; }.lesson-item.is-current { background: var(--lavender); color: var(--purple); }.lesson-item.is-locked { color: #a9aabd; }.lesson-item > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: white; font-size: 12px; font-weight: 800; }.lesson-item.is-current > span { color: white; background: var(--purple); }.lesson-item div { flex: 1; }.lesson-item strong, .lesson-item small { display: block; }.lesson-item strong { font-size: 12px; }.lesson-item small { margin-top: 3px; font-size: 10px; }.lesson-item b { font-size: 15px; }.tip-box { display: flex; gap: 8px; margin-top: 70px; padding: 14px; border-radius: 13px; background: #fff4d9; color: #9a7228; font-size: 12px; line-height: 1.4; }.tip-box p { margin: 0; }.lesson-intro { display: flex; gap: 17px; align-items: center; }.lesson-number { display: grid; place-items: center; width: 48px; height: 48px; color: var(--purple); border-radius: 14px; background: var(--lavender); font-size: 17px; font-weight: 900; }.lesson-intro h2 { margin: 0 0 4px; font-size: 21px; }.lesson-intro p { margin: 0; color: var(--muted); font-size: 13px; }.challenge-card { display: flex; gap: 13px; margin: 25px 0; padding: 16px; border-radius: 14px; background: var(--mint); color: #267c67; }.challenge-icon { font-size: 25px; }.challenge-card strong { display: block; margin-bottom: 4px; font-size: 12px; }.challenge-card p { margin: 0; font-size: 12px; line-height: 1.45; }
.module-nav { margin-top: 24px; }.module-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; margin-bottom: 7px; padding: 9px 8px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; text-align: left; }.module-item:hover:not(:disabled), .module-item.is-current { color: var(--purple); background: var(--lavender); }.module-item:disabled { cursor: not-allowed; opacity: .55; }.module-item > span { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--purple); background: white; font-size: 11px; font-weight: 900; }.module-item div { flex: 1; }.module-item strong, .module-item small { display: block; }.module-item strong { font-size: 12px; line-height: 1.25; }.module-item small { margin-top: 2px; font-size: 10px; line-height: 1.25; }.module-item .module-level { color: #b87913; font-size: 9px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }.module-item b { font-size: 15px; }.module-kicker { display: block; margin-bottom: 3px; color: var(--purple); font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.progress-reset { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 10px; text-decoration: underline; cursor: pointer; }
.progress-reset:hover, .progress-reset:focus-visible { color: var(--purple); }
.block-workspace { min-height: 310px; padding: 20px; border: 2px dashed #cfcef4; border-radius: 17px; background: #f8f8ff; }.workspace-label { display: flex; justify-content: space-between; color: var(--ink); font-size: 12px; font-weight: 800; }.workspace-label small { color: var(--muted); font-weight: 600; }.empty-program { display: grid; place-items: center; height: 195px; color: var(--muted); text-align: center; }.plus-icon { display: block; color: var(--purple); font-size: 34px; }.empty-program p { font-size: 13px; line-height: 1.5; }.empty-program small { color: #a3a4bb; }.workspace-placeholder { color: #c0c0d5; font-size: 11px; text-align: center; }.lesson-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; }.simulation-message { min-height: 18px; margin: 13px 0 0; color: #3b967b; font-size: 12px; font-weight: 800; }
.sandbox-header { align-items: center; }.sandbox-header .button { flex: none; }.sandbox-layout { grid-template-columns: 220px 1fr; }.blocks-menu { padding-right: 18px; }.category-button { display: flex; align-items: center; gap: 11px; width: 100%; margin-bottom: 6px; padding: 12px 10px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; text-align: left; }.category-button span { font-size: 19px; }.category-button b { margin-left: auto; font-size: 18px; }.category-button:hover, .category-button.is-selected { color: var(--purple); background: var(--lavender); }.menu-note { margin-top: 50px; padding: 14px; border-radius: 13px; color: #a17626; background: #fff5db; font-size: 11px; line-height: 1.5; }.sandbox-board { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow); }.board-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }.board-toolbar strong, .board-toolbar span { display: block; }.board-toolbar strong { font-size: 17px; }.board-toolbar span { margin-top: 4px; color: var(--muted); font-size: 11px; }.board-count { padding: 7px 9px; border-radius: 10px; color: var(--purple) !important; background: var(--lavender); font-weight: 800; }.visual-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.visual-block { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 15px; border-radius: 12px; color: white; box-shadow: 0 5px 11px rgba(40, 40, 80, .11); }.visual-block .block-icon { font-size: 23px; }.visual-block strong { display: block; font-size: 13px; }.visual-block small { display: block; margin-top: 4px; opacity: .8; font-size: 10px; }.block-movement { background: #5b5ce2; }.block-control { background: #ed9b42; }.block-loop { background: #47b895; }.block-condition { background: #d76596; }.block-sensor { background: #4b9aca; }.blockly-reserved { display: grid; place-items: center; min-height: 210px; margin-top: 24px; border: 2px dashed #d3d2ee; border-radius: 13px; color: #b0b0c6; text-align: center; }.blockly-reserved span { font-size: 28px; opacity: .7; }.blockly-reserved strong { margin-top: 8px; color: #9999b4; font-size: 13px; }.blockly-reserved p { margin: 5px 20px 0; font-size: 11px; }
footer { padding: 22px; color: #a6a6b9; font-size: 11px; text-align: center; } footer span:first-child { color: var(--purple); font-weight: 800; }
@media (max-width: 760px) { .topbar { height: auto; flex-wrap: wrap; gap: 12px; padding: 14px 20px 0; }.brand { margin-right: auto; }.topbar-badge { display: none; }.main-nav { order: 3; width: 100%; height: 42px; gap: 22px; }.nav-link { font-size: 12px; }.hero { padding: 35px 25px; }.hero-robot { display: none; }.entry-grid, .lesson-layout, .sandbox-layout { grid-template-columns: 1fr; }.section-heading { margin-top: 36px; }.lesson-sidebar { padding-right: 0; border-right: 0; }.tip-box { margin-top: 20px; }.page-header { align-items: start; flex-direction: column; gap: 15px; }.sandbox-header .button { align-self: stretch; }.blocks-menu { padding-right: 0; }.category-button { display: inline-flex; width: auto; margin-right: 3px; }.category-button b { display: none; }.menu-note { display: none; }.visual-blocks { grid-template-columns: 1fr; }.sandbox-board { padding: 16px; } }
@media (max-width: 460px) { main { padding: 30px 16px 50px; }.hero { border-radius: 21px; }.hero h1 { font-size: 36px; }.entry-card { gap: 14px; padding: 20px; }.card-icon { width: 48px; height: 48px; font-size: 25px; }.entry-card h3 { font-size: 18px; }.status-panel { align-items: start; flex-wrap: wrap; }.connection-status { width: 100%; margin-left: 67px; }.page-header h1 { font-size: 35px; }.lesson-actions { align-items: stretch; flex-direction: column; }.lesson-actions .button { width: 100%; } }

/* Estilo infantil del laboratorio y piezas interactivas */
body { background: #fffaf2; }
.topbar { border-bottom: 4px solid #ffe7a8; box-shadow: 0 4px 0 rgba(255, 200, 87, .12); }
.brand-mark { background: #ffe9a8; transform: rotate(-4deg); }
.hero { background: linear-gradient(120deg, #d9f6ef 0%, #e9e4ff 55%, #ffe4ef 100%); border: 3px solid white; box-shadow: 0 10px 0 #c8e9df; }
.hero-copy h1 { color: #27345f; }
.hero-copy h1 span { color: #ef6c9d; }
.hero .button-primary, .sandbox-header .button-primary { background: #f06b9c; box-shadow: 0 5px 0 #c84978; }
.hero .button-primary:hover, .sandbox-header .button-primary:hover { background: #df5689; box-shadow: 0 3px 0 #c84978; }
.robot-face { background: #ffd166; border-color: #27345f; }
.section-heading h2, .page-header h1 { color: #27345f; }
.entry-card { border: 3px solid white; box-shadow: 0 7px 0 rgba(91, 92, 226, .18); }
.entry-card-course { background: #e6e2ff; border-color: #cfc9ff; }
.entry-card-sandbox { background: #ffe9b6; border-color: #ffd67a; }
.entry-card h3 { color: #27345f; }
.status-panel { border: 3px solid white; box-shadow: 0 5px 0 #dcefe8; background: #e2f8ef; }
.sandbox-header { padding: 25px 30px; border-radius: 24px; background: #ffe9b6; border: 3px solid white; box-shadow: 0 7px 0 #f1d687; }
.sandbox-header h1 { margin-top: 5px; margin-bottom: 2px; }
.sandbox-layout { margin-top: 29px; grid-template-columns: 220px minmax(0, 1fr); }
.blocks-menu { padding: 19px 14px 20px; border-radius: 22px; background: #e9e4ff; box-shadow: 0 6px 0 #d2cbff; }
.menu-title { color: #5b5ce2; padding-left: 8px; }
.category-button { color: #52577d; border: 2px solid transparent; }
.category-button:hover, .category-button.is-selected { color: #413db2; border-color: #aaa4f5; background: white; }
.menu-note { background: #fff8d9; border: 2px dashed #f5c75a; }
.sandbox-board { padding: 26px; border: 3px solid white; background: #ffffff; box-shadow: 0 7px 0 #ddd9ef; }
.board-toolbar { padding-bottom: 14px; border-bottom: 2px dashed #dddaf2; }
.board-toolbar strong { color: #27345f; font-size: 21px; }
.board-count { background: #e1f7ed; color: #2d9b79 !important; border: 2px solid #b6e9d7; }
.visual-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.visual-block { min-height: 83px; align-items: flex-start; padding: 15px 13px; border: 3px solid rgba(255, 255, 255, .55); border-radius: 17px 17px 17px 5px; cursor: grab; user-select: none; transition: transform .18s, filter .18s, box-shadow .18s; }
.visual-block:hover, .visual-block:focus { transform: translateY(-5px) rotate(-1deg); filter: saturate(1.12); box-shadow: 0 9px 0 rgba(39, 52, 95, .16); outline: none; }
.visual-block:active, .visual-block.is-dragging { cursor: grabbing; opacity: .55; transform: scale(.97); }
.visual-block .block-icon { font-size: 27px; }
.visual-block strong { font-size: 14px; }
.program-area { margin-top: 27px; padding: 18px; border-radius: 20px; background: #f4f2ff; border: 3px solid #d6d1ff; }
.program-heading { display: flex; align-items: center; justify-content: space-between; color: #413db2; font-size: 15px; font-weight: 900; }
.program-heading button { border: 0; padding: 6px 10px; border-radius: 9px; color: #df5689; background: #ffe1ed; cursor: pointer; font-size: 11px; font-weight: 800; }
.drop-zone { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 10px; min-height: 145px; margin-top: 13px; padding: 15px; border: 3px dashed #aba5ea; border-radius: 15px; background: #fff; transition: background .2s, border-color .2s, transform .2s; }
.drop-zone.is-over { border-color: #f06b9c; background: #fff1f7; transform: scale(1.01); }
.drop-hint { display: grid; width: 100%; place-items: center; gap: 4px; color: #8b8ca9; text-align: center; }
.drop-hint span { font-size: 28px; }.drop-hint strong { color: #5b5ce2; font-size: 14px; }.drop-hint small { line-height: 1.4; font-size: 11px; }
.program-block { display: flex; align-items: center; gap: 8px; min-width: 145px; padding: 12px 9px 12px 13px; border-radius: 12px 12px 12px 4px; color: white; box-shadow: 0 4px 0 rgba(39, 52, 95, .18); animation: block-pop .22s ease-out; }.program-block span { font-size: 20px; }.program-block strong { flex: 1; font-size: 12px; }.program-block button { padding: 0 3px; border: 0; color: white; background: transparent; cursor: pointer; font-size: 18px; font-weight: 900; }
@keyframes block-pop { from { opacity: 0; transform: scale(.7) rotate(-4deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.program-area .blockly-reserved { min-height: 86px; margin-top: 14px; border-width: 2px; background: rgba(255, 255, 255, .5); }.program-area .blockly-reserved span { font-size: 20px; }.program-area .blockly-reserved strong { margin-top: 3px; font-size: 11px; }.program-area .blockly-reserved p { margin: 2px 0 0; font-size: 10px; }
.block-control { background: #f2a33f; }.block-loop { background: #44b991; }.block-sensor { background: #4d9fd0; }.block-movement { background: #6868e7; }
@media (max-width: 900px) { .visual-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sandbox-header { padding: 20px; }.sandbox-layout { margin-top: 20px; }.blocks-menu { padding: 15px 9px; }.visual-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }.program-area { padding: 13px; } }
@media (max-width: 460px) { .visual-blocks { grid-template-columns: 1fr; }.visual-block { min-height: 68px; align-items: center; }.sandbox-board { padding: 18px 14px; }.drop-zone { min-height: 160px; } }

/* Inicio simple y curso guiado con bloques visibles */
.home-hero { min-height: 320px; padding: 28px 70px; }
.home-helper { margin-bottom: 0 !important; color: #5d6385 !important; font-size: 18px; font-weight: 700; }
.home-section-heading { margin-top: 39px; }
.home-section-heading h2 { font-size: 25px; }
.home-status { margin-top: 22px; }
.home-status .status-copy h3 { font-size: 17px; }
.lesson-block-picker { margin: 23px 0 13px; padding: 14px 16px; border: 2px solid #ffe09a; border-radius: 15px; background: #fff8dd; }
.challenge-area { display: flex; align-items: center; gap: 13px; margin: 20px 0 18px; }
.challenge-area .challenge-card { flex: 1; margin: 0; }
.challenge-hint-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.challenge-hint-wrap .hint-button { display: grid; place-items: center; width: 43px; height: 43px; padding: 0; border: 3px solid #f0b72f; border-radius: 50%; background: #fff4c7; color: #704c00; font-size: 21px; line-height: 1; box-shadow: 0 4px 0 #e4a91f; cursor: pointer; transition: transform .18s ease, background .18s ease, opacity .18s ease; }
.challenge-hint-wrap .hint-button:not(:disabled):hover, .challenge-hint-wrap .hint-button:not(:disabled):focus-visible { background: #ffe89a; transform: translateY(-2px); }
.challenge-hint-wrap .hint-button:disabled { cursor: not-allowed; opacity: .38; box-shadow: none; filter: grayscale(.5); }
.challenge-hint-wrap .lesson-hint { right: 0; bottom: calc(100% + 14px); }
.challenge-card { position: relative; display: flex; align-items: center; gap: 13px; margin: 20px 0 18px; padding: 17px 19px; overflow: hidden; border: 3px solid #706fe8; border-radius: 20px; background: linear-gradient(135deg, #f4f2ff 0%, #fff 58%, #fff7d7 100%); box-shadow: 0 7px 0 rgba(91, 92, 226, .13), 0 10px 22px rgba(55, 54, 133, .1); }
.challenge-card::after { position: absolute; top: -34px; right: -27px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 200, 87, .22); content: ""; pointer-events: none; }
.challenge-card-heading { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
.challenge-icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #706fe8; box-shadow: 0 4px 0 #5253c9; font-size: 26px; }
.challenge-label { display: block; color: #6d6cbd; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.challenge-card h3 { margin: 1px 0 0; color: var(--ink); font-size: 21px; }
.challenge-card > div { position: relative; z-index: 1; }
.challenge-card > div > strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 14px; }
.challenge-card > div > p { margin: 0; color: #267c67; font-size: 13px; font-weight: 800; line-height: 1.45; }
.challenge-kind { position: relative; z-index: 1; margin-left: auto; padding: 6px 9px; border: 2px solid #f0b72f; border-radius: 999px; background: #fff8d9; color: #765700; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.challenge-main { position: relative; z-index: 1; padding: 12px 14px; border-left: 5px solid #f06b9c; border-radius: 9px; background: rgba(255, 255, 255, .78); }
.challenge-main strong { display: block; margin-bottom: 3px; color: #3b3a91; font-size: 16px; }
.challenge-main p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.challenge-sequence-wrap { position: relative; z-index: 1; }
.challenge-subtitle { display: block; margin-bottom: 8px; color: #6d6cbd; font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.challenge-sequence { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-height: 42px; }
.challenge-step { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 2px solid #aba5ea; border-radius: 10px 10px 10px 3px; background: #fff; color: #3b3a91; font-size: 12px; font-weight: 800; box-shadow: 0 3px 0 #dedcff; }
.challenge-step-icon { font-size: 17px; }
.challenge-arrow { color: #f06b9c; font-size: 19px; font-weight: 900; }
.challenge-free { padding: 9px 12px; border: 2px dashed #f0b72f; border-radius: 11px; background: #fffdf0; color: #765700; font-size: 12px; font-weight: 800; }
.challenge-start { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding-top: 11px; border-top: 2px dashed rgba(112, 111, 232, .25); color: #4d4b9e; font-size: 12px; }
.challenge-start > span { display: grid; flex: 0 0 26px; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffe89a; font-size: 15px; }
.lesson-stage { position: relative; display: flex; align-items: center; min-height: 170px; margin: 20px 0; overflow: hidden; padding: 18px 34px; border: 3px solid #e5e4ff; border-radius: 18px; background: linear-gradient(180deg, #fff, #f5f3ff); }
.lesson-stage img { position: relative; z-index: 1; width: 112px; height: 100px; object-fit: contain; transition: none; }
.lesson-target { position: absolute; top: 18px; right: 24px; color: var(--purple); font-size: 12px; font-weight: 800; }
.lesson-success-scrim { position: fixed; z-index: 1090; inset: 0; display: none; background: rgba(18, 24, 58, .78); pointer-events: none; }
.lesson-success-scrim.is-visible { display: block; animation: success-scrim-in .35s ease-out both; }
.lesson-success { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; overflow: hidden; color: var(--ink); background: radial-gradient(circle at center, rgba(255, 255, 255, .97) 0 21%, rgba(255, 237, 162, .93) 22%, rgba(255, 255, 255, .88) 52%, rgba(112, 111, 232, .7) 100%); opacity: 0; pointer-events: none; transform: scale(.8); }
.lesson-success::before, .lesson-success::after { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border-radius: 4px; content: ""; opacity: 0; pointer-events: none; }
.lesson-success::before { background: #f06b9c; box-shadow: -150px -62px #f0b72f, 153px -48px #287c72, -178px 35px #706fe8, 170px 67px #ff8b5f, -93px 105px #287c72, 107px 112px #f06b9c, -207px -8px #ffcf4a, 210px 12px #706fe8; transform: rotate(18deg); }
.lesson-success::after { width: 270px; height: 270px; border: 7px dotted rgba(255, 255, 255, .9); border-radius: 50%; background: transparent; box-shadow: 0 0 0 14px rgba(255, 200, 87, .22), 0 0 0 30px rgba(255, 255, 255, .14); transform: translate(-50%, -50%) scale(.2); }
.lesson-success.is-visible { animation: success-splash 1.05s cubic-bezier(.2, .8, .2, 1) forwards; }
.lesson-success.is-visible { position: fixed; z-index: 1100; inset: 50% auto auto 50%; width: min(620px, calc(100% - 32px)); min-height: 390px; padding: 42px 24px; border: 5px solid #ffd166; border-radius: 32px; box-sizing: border-box; transform: translate(-50%, -50%) scale(.8); box-shadow: 0 0 0 10px rgba(255, 209, 102, .2), 0 24px 70px rgba(8, 14, 48, .45); }
.lesson-success.is-visible::before { animation: success-confetti 1.15s .08s ease-out forwards; }
.lesson-success.is-visible::after { animation: success-ring 1.1s ease-out forwards; }
.success-star { position: relative; z-index: 1; display: block; color: var(--yellow); font-size: clamp(94px, 20vw, 156px); line-height: .72; text-shadow: 0 8px 0 #e7a932, 0 0 16px #fff, 0 0 42px rgba(255, 200, 87, .95); transform: scale(.1) rotate(-25deg); }
.lesson-success.is-visible .success-star { animation: star-splash .95s cubic-bezier(.15, .9, .25, 1.25) forwards, star-orbit 2.2s 1s ease-in-out infinite; }
.success-burst { position: absolute; z-index: 1; color: #fff; font-size: 42px; opacity: 0; text-shadow: 0 0 16px currentColor; }
.success-burst-one { color: #ffd166; }
.success-burst-two { color: #f06b9c; }
.success-burst-three { color: #8fe1c2; }
.success-burst-four { color: #9da5ff; }
.lesson-success.is-visible .success-burst { animation: success-burst-explode 1.1s cubic-bezier(.16,.84,.32,1) forwards; }
.lesson-success.is-visible .success-burst-one { --burst-x: -170px; --burst-y: -90px; }
.lesson-success.is-visible .success-burst-two { --burst-x: 170px; --burst-y: -70px; animation-delay: .08s; }
.lesson-success.is-visible .success-burst-three { --burst-x: -190px; --burst-y: 85px; animation-delay: .14s; }
.lesson-success.is-visible .success-burst-four { --burst-x: 190px; --burst-y: 75px; animation-delay: .2s; }
.success-spark { position: absolute; top: 50%; left: 50%; z-index: 1; width: 8px; height: 28px; border-radius: 999px; background: #fff; box-shadow: 0 0 12px 3px currentColor; color: #ffd166; opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) scale(.2); }
.success-spark-one, .success-spark-three, .success-spark-five, .success-spark-seven { width: 6px; height: 20px; }
.success-spark-one { --spark-angle: 0deg; --spark-x: 0px; --spark-y: -190px; }
.success-spark-two { --spark-angle: 45deg; --spark-x: 135px; --spark-y: -135px; color: #f06b9c; }
.success-spark-three { --spark-angle: 90deg; --spark-x: 190px; --spark-y: 0px; }
.success-spark-four { --spark-angle: 135deg; --spark-x: 135px; --spark-y: 135px; color: #8fe1c2; }
.success-spark-five { --spark-angle: 180deg; --spark-x: 0px; --spark-y: 190px; }
.success-spark-six { --spark-angle: 225deg; --spark-x: -135px; --spark-y: 135px; color: #9da5ff; }
.success-spark-seven { --spark-angle: 270deg; --spark-x: -190px; --spark-y: 0px; }
.success-spark-eight { --spark-angle: 315deg; --spark-x: -135px; --spark-y: -135px; color: #f06b9c; }
.lesson-success.is-visible .success-spark { animation: success-spark-shoot 1.25s .12s cubic-bezier(.15,.8,.25,1) forwards; }
.lesson-success.is-visible .success-spark-two { animation-delay: .18s; }
.lesson-success.is-visible .success-spark-three { animation-delay: .24s; }
.lesson-success.is-visible .success-spark-four { animation-delay: .3s; }
.lesson-success.is-visible .success-spark-five { animation-delay: .36s; }
.lesson-success.is-visible .success-spark-six { animation-delay: .42s; }
.lesson-success.is-visible .success-spark-seven { animation-delay: .48s; }
.lesson-success.is-visible .success-spark-eight { animation-delay: .54s; }
.success-energy { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; border: 5px solid #ffd166; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.success-energy-one { border-color: #ffd166; }
.success-energy-two { border-color: #f06b9c; }
.success-energy-three { border-color: #8fe1c2; }
.success-energy-four { border-color: #9da5ff; }
.lesson-success.is-visible .success-energy { animation: success-energy-wave 1.8s cubic-bezier(.15,.8,.25,1) forwards; }
.lesson-success.is-visible .success-energy-two { animation-delay: .16s; }
.lesson-success.is-visible .success-energy-three { animation-delay: .32s; }
.lesson-success.is-visible .success-energy-four { animation-delay: .48s; }
.success-star-core { position: absolute; z-index: 2; color: #fff; font-size: 42px; opacity: 0; text-shadow: 0 0 22px #fff, 0 0 42px #ffd166; }
.lesson-success.is-visible .success-star-core { animation: core-flash 1.15s .2s ease-out forwards; }
.lesson-success strong { position: relative; z-index: 1; margin-top: 14px; color: var(--purple); font-size: clamp(25px, 5vw, 42px); text-shadow: 0 3px 0 #fff; }
.lesson-success > span:last-child { position: relative; z-index: 1; margin-top: 5px; color: var(--ink); font-size: clamp(15px, 3vw, 21px); font-weight: 900; }
.success-actions { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 25px; pointer-events: auto; }
.success-actions .button { min-height: 42px; padding: 10px 14px; border-radius: 12px; font-size: 12px; font-weight: 900; }
.button-success-replay { color: #fff; background: #287c72; box-shadow: 0 4px 0 #1d6159; }
.button-success-prev { color: #34426d; background: #eef0ff; box-shadow: 0 4px 0 #cdd2f5; }
.button-success-next { color: #513d00; background: #ffd166; box-shadow: 0 4px 0 #e0a932; }
.success-actions .button:hover { transform: translateY(-2px); filter: saturate(1.1); }
.success-actions [hidden] { display: none; }
@keyframes success-splash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 62%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes star-splash { 0% { opacity: 0; transform: scale(.1) rotate(-25deg); } 48% { opacity: 1; transform: scale(1.28) rotate(10deg); } 72% { transform: scale(.92) rotate(-5deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes star-orbit { 0%, 100% { transform: scale(1) rotate(0); filter: brightness(1); } 25% { transform: scale(1.12) rotate(8deg); filter: brightness(1.35); } 50% { transform: scale(.96) rotate(-8deg); filter: brightness(1.05); } 75% { transform: scale(1.08) rotate(5deg); filter: brightness(1.5); } }
@keyframes success-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 45% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
@keyframes success-confetti { 0% { opacity: 0; transform: rotate(18deg) scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(18deg) scale(1.15) translateY(-8px); } }
@keyframes success-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(4deg) scale(1.04); } }
@keyframes success-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes success-burst-explode { 0% { opacity: 0; transform: translate(0, 0) scale(.15) rotate(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(1.55) rotate(180deg); } }
@keyframes success-energy-wave { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 18% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(10); } }
@keyframes core-flash { 0% { opacity: 0; transform: scale(.1) rotate(-45deg); } 25% { opacity: 1; transform: scale(2.2) rotate(20deg); } 55% { opacity: 1; transform: scale(.9) rotate(-8deg); } 100% { opacity: .7; transform: scale(1) rotate(0); } }
@keyframes success-spark-shoot { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translate(0) scale(.2); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translate(var(--spark-x), var(--spark-y)) scale(1); } }
.lesson-guide.message-refresh .lesson-guide-card h3 { animation: message-title-pop .42s cubic-bezier(.2,.9,.25,1.2) both; }
.lesson-guide.message-refresh .lesson-guide-card p { animation: message-copy-in .5s .06s ease-out both; }
.lesson-guide.message-refresh .lesson-guide-icon { animation: message-icon-bounce .55s cubic-bezier(.2,.9,.25,1.3) both; }
.lesson-guide.message-refresh .lesson-guide-step { animation: message-step-glow .7s ease-out both; }
.lesson-guide.message-refresh .lesson-guide-next { animation: message-button-arrive .5s .12s ease-out both; }
.lesson-guide.message-refresh .lesson-guide-spotlight { animation: guide-pulse 1.2s ease-in-out infinite, spotlight-arrive .55s ease-out both; }
@keyframes message-title-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes message-copy-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes message-icon-bounce { 0% { opacity: 0; transform: scale(.4) rotate(-18deg); } 70% { opacity: 1; transform: scale(1.18) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes message-step-glow { 0% { opacity: 0; letter-spacing: 0; } 45% { opacity: 1; color: #f06b9c; letter-spacing: 1.8px; } 100% { opacity: 1; letter-spacing: .5px; } }
@keyframes message-button-arrive { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes spotlight-arrive { from { opacity: .2; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .lesson-success-scrim.is-visible, .lesson-success.is-visible, .lesson-success.is-visible::before, .lesson-success.is-visible::after, .lesson-success.is-visible .success-star, .lesson-success.is-visible .success-star-core, .lesson-success.is-visible .success-burst, .lesson-success.is-visible .success-energy, .lesson-success.is-visible .success-spark { animation: none; }
  .lesson-success.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .lesson-success.is-visible .success-star, .lesson-success.is-visible .success-star-core { opacity: 1; transform: none; }
}
.lesson-content { position: relative; }
.lesson-guide { position: fixed; z-index: 1000; inset: 0; display: none; }
.lesson-guide.is-visible { display: block; }
.lesson-guide-backdrop { position: absolute; z-index: 0; inset: 0; background: rgba(24, 35, 61, .42); pointer-events: auto; }
.lesson-guide-spotlight { position: absolute; z-index: 1; border: 4px solid var(--yellow); border-radius: 17px; background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 7px rgba(255, 200, 87, .25), 0 5px 0 rgba(231, 169, 50, .18); pointer-events: none; animation: guide-pulse 1.2s ease-in-out infinite; }
.lesson-guide-card { position: absolute; z-index: 2; left: 50%; bottom: 18px; display: grid; justify-items: center; width: min(390px, calc(100% - 28px)); min-height: 212px; padding: 23px 24px 19px; overflow: visible; border: 4px solid #2f8d72; border-radius: 25px 25px 25px 7px; background: #fff; box-shadow: 0 18px 38px rgba(10, 20, 45, .28); text-align: center; transform: translateX(-50%); animation: mentor-card-in .38s ease-out both; }
.lesson-guide-mentor { position: absolute; z-index: 3; left: -208px; bottom: -8px; width: 240px; height: 300px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .25)); animation: mentor-pop .65s cubic-bezier(.2, .9, .25, 1.2) both; }
.lesson-guide-card::before { position: absolute; left: -33px; bottom: 34%; width: 40px; height: 40px; border-left: 4px solid #2f8d72; border-bottom: 4px solid #2f8d72; background: #fff; content: ""; transform: skew(-28deg) rotate(28deg); }
.lesson-guide.is-welcome .lesson-guide-card { width: min(620px, calc(100% - 34px)); min-height: 290px; padding: 27px 30px 23px 210px; }
.lesson-guide.is-welcome .lesson-guide-mentor { left: -230px; bottom: -28px; width: min(25vw, 360px); height: min(48vh, 470px); filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .25)); }
.lesson-guide.is-welcome .lesson-guide-card::before { left: -42px; bottom: 34%; }
.lesson-guide.is-welcome .lesson-guide-card { animation-name: welcome-card-in; }
.lesson-guide:not(.is-welcome) .lesson-guide-card { animation-name: guide-card-in; }
.lesson-guide[data-placement="right"] .lesson-guide-arrow { transform: rotate(-90deg); }
.lesson-guide[data-placement="left"] .lesson-guide-arrow { transform: rotate(90deg); }
.lesson-guide[data-placement="bottom"] .lesson-guide-arrow { transform: none; }
.lesson-guide-step { color: var(--purple); font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.lesson-guide-icon { margin-top: 1px; font-size: 36px; }
.lesson-guide-arrow { margin-top: -3px; color: var(--purple); font-size: 25px; font-weight: 900; line-height: .7; animation: guide-bounce 1s ease-in-out infinite; }
.lesson-guide-card h3 { margin: 5px 0 4px; color: var(--ink); font-size: 19px; }
.lesson-guide-card p { max-width: 285px; margin: 0 0 11px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.lesson-guide-card .button { padding: 9px 15px; font-size: 12px; }
@keyframes mentor-card-in { from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes guide-card-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes welcome-card-in { from { opacity: 0; box-shadow: 0 18px 38px rgba(10, 20, 45, .08); } to { opacity: 1; box-shadow: 0 18px 38px rgba(10, 20, 45, .28); } }
@keyframes mentor-pop { 0% { opacity: 0; transform: translateX(-28px) rotate(-10deg) scale(.7); } 70% { opacity: 1; transform: translateX(5px) rotate(3deg) scale(1.05); } 100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); } }
@media (max-width: 600px) {
  .lesson-guide-card { min-height: 216px; padding: 16px 12px 14px 98px; }
  .lesson-guide-mentor { left: 0; bottom: 6px; width: 102px; height: 150px; }
  .lesson-guide-card::before { left: -23px; width: 30px; height: 30px; border-width: 3px; }
  .lesson-guide-card h3 { font-size: 17px; }
  .lesson-guide-card p { max-width: 225px; font-size: 11px; line-height: 1.35; }
  .lesson-guide.is-welcome .lesson-guide-card { width: calc(100% - 28px); min-height: 285px; padding: 18px 12px 16px 34%; }
  .lesson-guide.is-welcome .lesson-guide-mentor { left: 0; bottom: 6px; width: 33vw; height: 30vh; min-width: 118px; max-width: 170px; min-height: 178px; max-height: 230px; }
  .lesson-guide.is-welcome .lesson-guide-card::before { left: -23px; bottom: 32px; }
}
@media (max-width: 340px) {
  .lesson-guide-card { padding-left: 84px; }
  .lesson-guide-mentor { width: 88px; height: 132px; }
  .lesson-guide-card h3 { font-size: 15px; }
  .lesson-guide-card p { max-width: 190px; font-size: 10px; }
  .lesson-guide.is-welcome .lesson-guide-card { min-height: 270px; padding-left: 34%; }
  .lesson-guide.is-welcome .lesson-guide-mentor { width: 33vw; min-width: 106px; max-width: 132px; min-height: 156px; max-height: 190px; }
}
.lesson-action-demo { position: absolute; z-index: 3; display: none; pointer-events: none; }
.lesson-action-demo.is-visible { display: block; }
.demo-drag-block { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border: 2px solid #7c78d8; border-radius: 11px 11px 11px 4px; background: #f0efff; color: var(--ink); box-shadow: 0 5px 0 #c1bff1, 0 8px 14px rgba(55, 54, 133, .2); font-size: 11px; opacity: .94; transform: translate(0, 0) scale(.95); animation: demo-drag 3.2s ease-in-out infinite; }
.demo-drag-hand { position: absolute; right: -18px; bottom: -23px; font-size: 25px; filter: drop-shadow(0 2px 1px rgba(55, 54, 133, .2)); animation: demo-hand-drag 3.2s ease-in-out infinite; }
.demo-click-hand { position: absolute; z-index: 2; font-size: 30px; filter: drop-shadow(0 2px 1px rgba(55, 54, 133, .2)); animation: demo-click 1.5s ease-in-out infinite; }
.demo-click-ring { position: absolute; top: 17px; left: 7px; width: 22px; height: 22px; border: 3px solid #f06b9c; border-radius: 50%; opacity: 0; animation: demo-ring 1.5s ease-out infinite; }
@keyframes demo-drag { 0%, 12% { opacity: .94; transform: translate(0, 0) scale(.95); } 43%, 67% { opacity: .94; transform: translate(var(--drag-x), var(--drag-y)) scale(.95); } 78%, 100% { opacity: .94; transform: translate(0, 0) scale(.95); } }
@keyframes demo-hand-drag { 0%, 12% { transform: translate(0, 0); } 43%, 67% { transform: translate(var(--drag-x), var(--drag-y)); } 78%, 100% { transform: translate(0, 0); } }
@keyframes demo-click { 0%, 20%, 100% { transform: translate(0, 0) scale(1); } 35%, 55% { transform: translate(0, 7px) scale(.88); } }
@keyframes demo-ring { 35% { opacity: .8; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(1.8); } }
.lesson-actions .hint-button { border: 2px solid #f0b72f; background: #fff4c7; color: #704c00; font-weight: 900; box-shadow: 0 4px 0 #e4a91f; }
.lesson-actions .hint-button:hover, .lesson-actions .hint-button:focus-visible { background: #ffe89a; transform: translateY(-1px); }
.lesson-actions .hint-button::first-letter { font-size: 1.15em; }
.hint-wrap { position: relative; display: inline-flex; }
.lesson-hint { position: absolute; z-index: 12; right: 0; bottom: calc(100% + 14px); display: flex; align-items: flex-start; gap: 9px; width: min(290px, 76vw); padding: 13px 15px; border: 3px solid #f0b72f; border-radius: 16px; background: #fffdf0; color: #684b10; box-shadow: 0 8px 18px rgba(91, 77, 20, .2); font-size: 13px; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateY(8px) scale(.96); transform-origin: bottom right; transition: opacity .18s ease, transform .18s ease; }
.lesson-hint::after { position: absolute; right: 22px; bottom: -10px; width: 16px; height: 16px; border-right: 3px solid #f0b72f; border-bottom: 3px solid #f0b72f; background: #fffdf0; content: ""; transform: rotate(45deg); }
.lesson-hint.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.lesson-hint-icon { flex: 0 0 auto; font-size: 22px; }
.lesson-hint strong { display: block; margin-bottom: 2px; color: #8a5e00; font-size: 12px; text-transform: uppercase; }
.lesson-content:has(.lesson-hint.is-visible)::before { position: fixed; z-index: 1000; inset: 0; background: rgba(24, 35, 61, .42); content: ""; pointer-events: auto; }
.challenge-hint-wrap { position: relative; z-index: 1001; }
.lesson-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 13px 0 2px; border-top: 2px solid #ecebfa; }
.lesson-navigation .button { min-width: 145px; padding: 10px 13px; font-size: 12px; }
.lesson-navigation span { color: var(--muted); font-size: 11px; font-weight: 900; text-align: center; }
.lesson-navigation .button:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; }
@media (max-width: 460px) { .hint-wrap { width: 100%; }.challenge-hint-wrap { width: auto; }.lesson-hint { right: 0; bottom: calc(100% + 12px); width: min(320px, calc(100vw - 34px)); }.lesson-hint::after { right: 24px; } }
@media (max-width: 600px) { .challenge-area { align-items: stretch; }.challenge-area .challenge-card { min-width: 0; }.challenge-hint-wrap { align-items: center; } }
@media (max-width: 600px) { .lesson-navigation { flex-wrap: wrap; }.lesson-navigation span { order: -1; width: 100%; }.lesson-navigation .button { flex: 1; min-width: 0; } }
@keyframes guide-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes guide-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.lesson-block-picker > div:first-child { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; color: #9b7021; }
.lesson-list .lesson-item { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.lesson-list .lesson-item:disabled { cursor: not-allowed; }
.lesson-list .lesson-item:not(:disabled):hover { background: #f3f2ff; }
.lesson-list .lesson-item.is-current:not(:disabled):hover { background: var(--lavender); }
.lesson-block-picker strong { font-size: 13px; }
.lesson-block-picker small { font-size: 11px; }
.lesson-blocks { display: flex; flex-wrap: wrap; gap: 9px; }
.lesson-blocks .visual-block { min-height: 50px; padding: 9px 12px; border-width: 2px; border-radius: 11px 11px 11px 4px; }
.lesson-blocks .visual-block .block-icon { font-size: 19px; }
.lesson-blocks .visual-block strong { font-size: 11px; }
.lesson-blocks .visual-block small { display: none; }
.lesson-drop-zone { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 10px; min-height: 146px; margin-top: 13px; padding: 12px; border: 3px dashed #aba5ea; border-radius: 15px; background: #fff; transition: background .2s, border-color .2s; }
.lesson-drop-zone.is-over { border-color: #f06b9c; background: #fff1f7; }
.lesson-drop-zone .empty-program { width: 100%; height: 112px; }
.lesson-drop-zone .program-block { animation: block-pop .22s ease-out; cursor: grab; }
.lesson-drop-zone .program-block.is-dragging { opacity: .45; }
.lesson-drop-zone .program-block label { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; }
.lesson-drop-zone .program-block input { width: 42px; padding: 3px; border: 0; border-radius: 4px; font-size: 10px; }
.lesson-drop-zone .program-block > strong { min-width: 65px; }
.lesson-workspace { min-height: auto; }
.robot-face { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.card-icon img { max-width: 92%; max-height: 92%; padding: 3px; }
.status-illustration img { max-width: 94%; max-height: 94%; padding: 2px; }
@media (max-width: 760px) { .home-hero { padding: 30px 25px; }.home-helper { font-size: 16px; }.lesson-block-picker > div:first-child { gap: 8px; flex-direction: column; }.lesson-blocks { display: grid; grid-template-columns: repeat(2, 1fr); }.lesson-blocks .visual-block { min-width: 0; } }
@media (max-width: 760px) { .home-hero { min-height: 275px; }.hero-robot { width: 220px; height: 220px; }.robot-face { width: 205px; height: 200px; }.card-icon { width: 88px; height: 88px; }.status-illustration { width: 105px; height: 72px; } }
@media (max-width: 460px) { .card-icon { width: 82px; height: 82px; }.status-illustration { width: 100px; height: 70px; }.status-panel { gap: 14px; padding: 16px; } }

/* Página única de programación */
.workspace-page { max-width: 1240px; }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.workspace-heading h1 { margin-bottom: 8px; font-size: clamp(34px, 4vw, 48px); }
.workspace-heading p { margin: 0; color: var(--muted); }
.workspace-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.button-stop { color: #d6547f; background: #fff0f5; }
.button-restart { color: #347b68; background: var(--mint); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.workspace-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.character-panel, .stage-column, .program-panel { border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow); }
.character-panel { padding: 20px 15px; }
.panel-heading, .program-panel-heading, .stage-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h2, .program-panel-heading h2 { margin-top: 4px; font-size: 20px; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: var(--purple); background: var(--lavender); cursor: pointer; font-weight: 800; }
.character-list { display: grid; gap: 8px; margin-top: 20px; }
.character-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 14px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; touch-action: manipulation; }
.character-item:hover, .character-item.is-selected { border-color: #d9d8ff; background: var(--lavender); }
.character-item img { width: 46px; height: 46px; object-fit: contain; }
.character-item span { flex: 1; }.character-item strong, .character-item small { display: block; }.character-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }.character-item b { color: var(--purple); font-size: 20px; }
.panel-tip { margin-top: 25px; padding: 12px; border-radius: 13px; color: #8b6c2e; background: #fff7df; font-size: 11px; line-height: 1.45; }
.stage-column { min-width: 0; padding: 22px; }
.stage-toolbar { margin-bottom: 12px; }.stage-toolbar strong, .stage-toolbar span { display: block; }.stage-toolbar strong { font-size: 16px; }.stage-toolbar span { margin-top: 3px; color: var(--muted); font-size: 11px; }.stage-counter { padding: 7px 10px; border-radius: 14px; color: var(--purple); background: var(--lavender); font-weight: 800; white-space: nowrap; }
.stage { position: relative; min-height: 760px; overflow: hidden; border: 3px solid #e5e4ff; border-radius: 18px; background: #fff; }
.paint-layer { position: absolute; z-index: 1; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); pointer-events: none; }
.paint-stroke { opacity: .95; }
.stage.is-over { border-color: var(--purple); background: #fafaff; }
.stage-character { position: absolute; z-index: 2; display: block; width: 118px; height: 96px; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent; cursor: grab; touch-action: none; appearance: none; transition: left .45s ease, top .45s ease, transform .2s; }
.stage-character.is-dragging { cursor: grabbing; transition: none; opacity: .88; }
.stage-character.is-running { transition: none !important; cursor: default; }
.stage-character:hover, .stage-character.is-selected { background: transparent; box-shadow: none; }
.stage-character:focus-visible { outline: 2px solid rgba(91,92,226,.45); outline-offset: 4px; border-radius: 12px; }
.stage-character img { display: block; width: 100%; height: 96px; object-fit: contain; pointer-events: none; }
.speech-bubble { position: absolute; z-index: 3; max-width: 180px; padding: 8px 11px; border: 2px solid #d9d8ff; border-radius: 14px; color: var(--ink); background: white; box-shadow: 0 5px 14px rgba(55,54,133,.15); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; transform: translate(-10%, -100%); }
.speech-bubble::after { content: ""; position: absolute; bottom: -7px; left: 18px; width: 12px; height: 12px; border-right: 2px solid #d9d8ff; border-bottom: 2px solid #d9d8ff; background: white; transform: rotate(45deg); }
.stage-action-menu { position: absolute; z-index: 4; width: 270px; max-height: 260px; overflow-y: auto; padding: 10px; border: 1px solid #d9d8ff; border-radius: 13px; background: white; box-shadow: 0 10px 24px rgba(55,54,133,.16); }
.stage-action-menu::before { content: ""; position: absolute; top: 50%; left: -7px; width: 12px; height: 12px; border-bottom: 1px solid #d9d8ff; border-left: 1px solid #d9d8ff; background: white; transform: translateY(-50%) rotate(45deg); }
.stage-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }.stage-menu-header strong { color: var(--muted); font-size: 10px; }.delete-character-button { padding: 3px 5px; border: 0; border-radius: 5px; color: #d6547f; background: #fff0f5; cursor: pointer; font-size: 12px; }.delete-character-button:hover { background: #ffdce9; }.stage-menu-drop { min-height: 31px; margin-bottom: 7px; padding: 5px 8px; border: 2px dashed #aaa8e8; border-radius: 8px; color: var(--purple); background: #f7f7ff; cursor: copy; text-align: center; font-size: 17px; }.stage-menu-drop.is-over { border-color: #f06b9c; background: #fff0f6; transform: scale(1.06); }.stage-menu-actions { display: grid; gap: 5px; }.stage-menu-action { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 8px; background: #fafaff; }.stage-menu-action-number { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--purple); background: var(--lavender); font-size: 9px; font-weight: 800; }.stage-menu-action-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; font-size: 13px; }.stage-menu-action > span:nth-child(3) { flex: 1; }.stage-menu-action strong, .stage-menu-action small { display: block; }.stage-menu-action strong { color: var(--ink); font-size: 10px; }.stage-menu-action small { margin-top: 1px; color: var(--muted); font-size: 8px; }.stage-menu-action-copy { flex: 1; min-width: 0; }.stage-menu-action label { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 8px; }.stage-menu-action input { width: 42px; padding: 2px 3px; border: 1px solid #d9d8ff; border-radius: 4px; color: var(--ink); background: white; font: inherit; font-size: 9px; }.stage-menu-action button { border: 0; color: #c2c3d3; background: transparent; cursor: pointer; font-size: 16px; }
.stage-action-menu { display: none; }
.simulation-message { min-height: 20px; margin: 10px 2px 0; color: var(--purple); font-size: 12px; font-weight: 800; }
.program-panel { margin-top: 20px; padding: 20px; }.program-panel-heading { padding-bottom: 15px; border-bottom: 1px solid var(--line); }.program-panel-heading h2 { font-size: 22px; }.program-panel-heading h2 span { color: var(--purple); }
.program-content { display: block; padding-top: 18px; }.block-library { overflow: hidden; border: 1px solid #ddddee; border-radius: 16px; background: #fbfbff; }.library-tabs { display: flex; align-items: end; gap: 8px; padding: 0 12px; border-bottom: 2px solid #d8d7f5; background: #f1f0ff; }.library-tab { min-width: 112px; min-height: 52px; margin-top: 8px; padding: 9px 16px; border: 1px solid #d8d7f5; border-bottom: 0; border-radius: 18px 18px 0 0; color: var(--muted); background: #e5e4fa; cursor: pointer; font-size: 12px; font-weight: 800; transition: min-height .15s, color .15s, background .15s; }.library-tab:hover { color: var(--purple); background: #efefff; }.library-tab.is-active { min-height: 59px; color: var(--purple); background: #fff; box-shadow: 0 -3px 0 var(--purple); }.library-tools { display: none; }.action-menu > strong { display: block; margin-bottom: 10px; font-size: 13px; }.action-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 20px 18px 24px; }
.action-button { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 12px 14px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: #f7f7fd; cursor: pointer; touch-action: manipulation; text-align: left; }.action-button:hover { border-color: var(--purple); transform: translateY(-1px); }.action-button span { font-size: 25px; }.action-button strong { font-size: 13px; }
.block-movement { background: #edf0ff; }.block-control { background: #fff2db; }.block-loop { background: #e3f8ed; }.block-sensor { background: #e8f7fa; }.block-paint { background: #fff0e7; }.block-programmed { background: #f0e9ff; }
.visual-block, .program-block { color: var(--ink); }
.program-block button { color: var(--purple); }
.sequence-drop-target { min-width: 0; margin-top: 20px; }.sequence { min-height: 190px; }
.sequence-panel { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow); }.sequence-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }.sequence-panel-heading h2 { margin-top: 4px; font-size: 22px; }.sequence-character-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }.sequence-character { padding: 7px 10px; border-radius: 14px; color: var(--purple); background: var(--lavender); font-size: 11px; font-weight: 800; }.delete-character-button { padding: 7px 10px; border: 0; border-radius: 9px; color: #c34d76; background: #fff0f5; cursor: pointer; font-size: 10px; font-weight: 800; }.delete-character-button:hover { background: #ffdce9; }.delete-character-button:disabled { cursor: not-allowed; opacity: .45; }.sequence-panel .sequence { margin-top: 16px; }
.sequence-panel .sequence.is-empty { display: grid; }
.sequence { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; min-height: 190px; align-content: start; padding: 16px; border: 2px dashed #d9d8f3; border-radius: 14px; background: #fcfcff; }.sequence.is-empty { display: none; }.sequence-item { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 12px; border-radius: 10px; background: white; box-shadow: 0 3px 10px rgba(55,54,133,.07); cursor: grab; }.sequence-item.is-dragging { opacity: .45; cursor: grabbing; }.sequence-item.is-drop-target { outline: 2px dashed var(--purple); outline-offset: 3px; }.sequence-insert-zone { position: relative; z-index: 2; grid-column: 1 / -1; min-height: 8px; margin: -6px 0; border: 2px solid transparent; border-radius: 8px; }.sequence-insert-zone.is-over { min-height: 18px; border-color: #f06b9c; background: #fff0f6; }.sequence-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--purple); background: var(--lavender); font-size: 11px; font-weight: 800; }.sequence-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; }.sequence-item div { flex: 1; }.sequence-item strong, .sequence-item small { display: block; }.sequence-item small { margin-top: 2px; color: var(--muted); font-size: 10px; }.sequence-item button { border: 0; color: #c2c3d3; background: transparent; cursor: pointer; font-size: 20px; }.sequence-item button:hover { color: #d6547f; }.sequence-container { display: grid; grid-template-columns: auto auto 1fr auto; }.nested-drop-zone { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 4px; min-height: 54px; padding: 12px; border-left: 5px solid #75cda8; border-radius: 0 10px 10px 0; background: #f0fbf6; color: #5b9b80; font-size: 10px; }.nested-drop-zone > span { display: block; grid-column: 1; pointer-events: none !important; }.nested-drop-zone .sequence-insert-zone { margin: 0; min-height: 18px; }.nested-drop-zone.is-over { border-color: #f06b9c; background: #fff0f6; }.nested-drop-zone .sequence-item { margin-top: 8px; border: 1px solid #d9f0e5; }.sequence-empty { display: grid; grid-column: 1 / -1; place-items: center; align-content: center; min-height: 150px; color: var(--muted); text-align: center; }.sequence-empty span { font-size: 24px; }.sequence-empty strong { margin-top: 5px; color: var(--ink); font-size: 13px; }.sequence-empty small { margin-top: 4px; font-size: 11px; }
.sequence-item.is-touch-selected { outline: 3px solid var(--purple); outline-offset: 3px; }
.sequence-item-copy { min-width: 0; }.sequence-parameters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }.sequence-parameters label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; }.sequence-parameters input { width: 48px; padding: 4px; border: 1px solid #d9d8ff; border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 10px; }.sequence-parameters input.sequence-text-parameter { width: min(180px, 100%); }.sequence-parameters input:focus { outline: 2px solid rgba(91,92,226,.2); border-color: var(--purple); }
@media (max-width: 820px) { .workspace-heading { align-items: flex-start; flex-direction: column; }.workspace-actions { justify-content: flex-start; }.workspace-layout { grid-template-columns: 1fr; }.character-panel { padding: 15px; }.character-list { grid-template-columns: repeat(3, 1fr); }.panel-tip { display: none; }.program-content { grid-template-columns: 1fr; } }
@media (max-width: 520px) { main.workspace-page { padding: 30px 14px 50px; }.topbar { height: auto; min-height: 70px; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }.main-nav { order: 3; width: 100%; height: 35px; gap: 18px; }.topbar-badge { margin-left: auto; }.workspace-actions .button { flex: 1; padding: 11px 9px; font-size: 12px; }.stage { min-height: 400px; }.stage-character { width: 92px; min-height: 90px; }.stage-character img { height: 62px; }.stage-action-menu { max-width: 190px; flex-wrap: wrap; }.stage-action-menu strong { width: 100%; }.character-list { grid-template-columns: 1fr 1fr; }.program-panel { padding: 14px; }.program-panel-heading { align-items: flex-start; }.program-panel-heading .button { padding: 8px 0; font-size: 11px; } }

/* Biblioteca lateral junto al escenario, con la secuencia debajo */
.workspace-layout { grid-template-columns: 220px minmax(0, 1fr); }
.workspace-layout > .program-panel { grid-column: 1; grid-row: 1; margin: 0; padding: 18px 12px; }
.workspace-layout > .stage-column { grid-column: 2; grid-row: 1; }
.workspace-layout > .program-panel .library-tabs { display: none; }
.workspace-layout > .program-panel .library-tab { width: 100%; min-width: 0; min-height: 42px; margin: 0; padding: 9px 10px; border: 1px solid #d8d7f5; border-radius: 10px; text-align: left; }
.workspace-layout > .program-panel .library-tab.is-active { min-height: 42px; box-shadow: 3px 0 0 var(--purple); }
.workspace-layout > .program-panel .action-buttons { grid-template-columns: 1fr; gap: 10px; padding: 14px 10px 18px; }
.library-section { overflow: hidden; margin-bottom: 8px; border: 1px solid #ddddee; border-radius: 12px; background: #fbfbff; }
.library-section-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 11px; border: 0; color: var(--ink); background: #f1f0ff; cursor: pointer; touch-action: manipulation; text-align: left; }
.library-section-toggle:hover { background: #e9e8ff; }.library-section-toggle span { font-size: 16px; }.library-section-toggle strong { flex: 1; font-size: 11px; }.library-section-toggle b { color: var(--purple); font-size: 16px; transition: transform .15s; }.library-section:not(.is-open) .library-section-toggle b { transform: rotate(-90deg); }
.library-section-content { display: none; gap: 8px; padding: 9px; }.library-section.is-open .library-section-content { display: grid; }.library-section-content .character-item { width: 100%; padding: 8px; }.library-section-content .action-button { min-height: 58px; padding: 9px; }.library-section-content .action-button span { font-size: 20px; }.library-section-content .action-button strong { font-size: 11px; }
@media (max-width: 820px) { .workspace-layout { grid-template-columns: 1fr; }.workspace-layout > .program-panel, .workspace-layout > .stage-column { grid-column: 1; grid-row: auto; }.workspace-layout > .program-panel .library-tabs { display: flex; overflow-x: auto; }.workspace-layout > .program-panel .library-tab { min-width: 105px; text-align: center; }.workspace-layout > .program-panel .action-buttons { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* Bienvenida del jaguar en la portada */
.jaguar-welcome { position: fixed; z-index: 20; inset: 0; overflow: hidden; }
.jaguar-tour-seen .jaguar-welcome { display: none; }
.jaguar-tour-active { overflow: hidden; height: 100%; overscroll-behavior: none; }
html.jaguar-tour-active,
html.jaguar-tour-active body {
  overflow: hidden;
  overscroll-behavior: none;
}
.laboratory-locked {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}
.laboratory-lock {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.laboratory-lock-scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 32, 44, .76);
  animation: laboratory-lock-scrim-in .45s ease-out both;
}
.laboratory-lock-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(280px, 460px);
  align-items: center;
  width: min(820px, calc(100% - 40px));
  min-height: 390px;
  overflow: hidden;
  border: 4px solid #f4bd45;
  border-radius: 32px;
  background: linear-gradient(135deg, #fffdf1, #eff9ee);
  box-shadow: 0 26px 70px rgba(4, 19, 28, .42), 0 0 0 9px rgba(244, 189, 69, .18);
  animation: laboratory-lock-card-in .7s cubic-bezier(.2, .9, .25, 1.15) both;
}
.laboratory-lock-card::before,
.laboratory-lock-card::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.laboratory-lock-card::before { top: -90px; right: -40px; width: 220px; height: 220px; background: rgba(201, 235, 213, .72); animation: laboratory-lock-orbit 7s linear infinite; }
.laboratory-lock-card::after { bottom: -110px; left: -60px; width: 250px; height: 180px; background: rgba(255, 228, 157, .5); }
.laboratory-lock-mentor {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: center;
  width: min(300px, 30vw);
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 18px 12px rgba(25, 75, 55, .2));
  animation: laboratory-lock-mentor-float 3.8s ease-in-out infinite;
}
.laboratory-lock-message {
  position: relative;
  z-index: 1;
  padding: 38px 38px 38px 8px;
  color: #243b35;
}
.laboratory-lock-step { display: block; margin-bottom: 12px; color: #287c72; font-size: 11px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.laboratory-lock-icon { display: inline-grid; place-items: center; width: 45px; height: 45px; margin-bottom: 13px; border-radius: 14px; background: #ffe49b; font-size: 24px; animation: laboratory-lock-icon-pulse 2s ease-in-out infinite; }
.laboratory-lock-message h2 { margin: 0 0 12px; color: #1d5f50; font-size: clamp(28px, 4vw, 43px); line-height: 1.03; }
.laboratory-lock-message p { max-width: 410px; margin: 0 0 23px; color: #65766e; font-size: 15px; line-height: 1.65; }
.laboratory-lock-message .button { animation: laboratory-lock-button-pulse 2.6s 1s ease-in-out infinite; }
.laboratory-lock.is-unlocked-message .laboratory-lock-icon { background: #d9f1df; }
.laboratory-lock.is-unlocked-message .laboratory-lock-message h2 { color: #287c72; }
.library-section.is-locked .library-section-toggle { color: #89958f; background: #edf2ed; }
.library-lock-icon { margin-left: auto; color: #9b7a2f; font-size: 12px; line-height: 1; }
.library-section.is-locked .library-section-content { opacity: .55; }
.library-section.is-locked .action-button { cursor: not-allowed; filter: grayscale(.35); }
@keyframes laboratory-lock-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes laboratory-lock-card-in { from { opacity: 0; transform: translateY(28px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes laboratory-lock-mentor-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes laboratory-lock-icon-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 189, 69, .2); } 50% { transform: scale(1.1) rotate(-4deg); box-shadow: 0 0 0 8px rgba(244, 189, 69, .16); } }
@keyframes laboratory-lock-button-pulse { 0%, 100% { box-shadow: 0 5px 0 #174e46, 0 12px 24px rgba(29, 95, 80, .2); } 50% { box-shadow: 0 5px 0 #174e46, 0 0 0 7px rgba(47, 142, 126, .16), 0 16px 28px rgba(29, 95, 80, .25); } }
@keyframes laboratory-lock-orbit { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .laboratory-lock-card { grid-template-columns: 1fr; width: min(430px, calc(100% - 28px)); min-height: 0; max-height: calc(100vh - 28px); border-radius: 27px; }
  .laboratory-lock-mentor { align-self: center; width: min(230px, 58vw); max-height: 245px; margin-top: 13px; }
  .laboratory-lock-message { padding: 8px 24px 27px; text-align: center; }
  .laboratory-lock-step { margin-bottom: 8px; font-size: 10px; }
  .laboratory-lock-icon { width: 39px; height: 39px; margin-bottom: 8px; font-size: 20px; }
  .laboratory-lock-message h2 { margin-bottom: 9px; font-size: clamp(25px, 8vw, 34px); }
  .laboratory-lock-message p { margin: 0 auto 18px; font-size: 13px; line-height: 1.48; }
  .laboratory-lock-message .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .laboratory-lock-scrim,
  .laboratory-lock-card,
  .laboratory-lock-mentor,
  .laboratory-lock-icon,
  .laboratory-lock-message .button,
  .laboratory-lock-card::before { animation: none; }
}
.jaguar-welcome-scrim { position: absolute; z-index: 20; inset: 0; background: transparent; animation: jaguar-scrim-in .45s ease both; }
.jaguar-overlay-panels { position: absolute; z-index: 21; inset: 0; pointer-events: none; }
.jaguar-overlay-panel { position: fixed; display: block; background: rgba(17, 27, 52, .68); }
.jaguar-guide { position: absolute; z-index: 23; left: 50%; bottom: 2vh; width: min(700px, 94vw); height: 440px; transform: translateX(-50%); animation: jaguar-arrive .9s cubic-bezier(.2,.8,.25,1) both; }
.jaguar-guide.is-positioned { width: var(--guide-width, 700px); transform: none; animation: none; transition: left .55s ease, top .55s ease; }
.jaguar-guide.is-positioned.guide-side-left .jaguar-guide-image { left: auto; right: 0; }
.jaguar-guide.is-positioned.guide-side-left .jaguar-speech { left: 0; }
.jaguar-guide.is-positioned.guide-side-left .jaguar-speech-tail { left: auto; right: -37px; border: 0; border-top: 4px solid #2f8d72; border-right: 4px solid #2f8d72; transform: skew(28deg) rotate(-28deg); }
.jaguar-guide.is-positioned.guide-side-right .jaguar-guide-image { left: 0; right: auto; }
.jaguar-guide.is-positioned.guide-side-right .jaguar-speech { left: 330px; }
.jaguar-guide.place-bottom-left { left: 20px; bottom: 16px; top: auto; }
.jaguar-guide.place-bottom-right { right: 20px; left: auto; bottom: 16px; top: auto; }
.jaguar-guide.place-top-left { left: 20px; top: 16px; bottom: auto; }
.jaguar-guide.place-top-right { right: 20px; left: auto; top: 16px; bottom: auto; }
.jaguar-guide-image { position: absolute; z-index: 2; bottom: 0; left: 0; width: 350px; max-height: 440px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .25)); transition: opacity .25s ease; }
.jaguar-guide-image { animation: jaguar-guide-float 3.8s ease-in-out infinite; transform-origin: 50% 100%; }
.jaguar-guide.looks-left .jaguar-guide-image-left { animation-name: jaguar-guide-float-left; }
.jaguar-guide.looks-right .jaguar-guide-image-right { animation-name: jaguar-guide-float-right; }
.jaguar-guide-image-right { display: none; }
.jaguar-guide.looks-right .jaguar-guide-image-left { display: none; }
.jaguar-guide.looks-right .jaguar-guide-image-right { display: block; }
.jaguar-spotlight { position: fixed; z-index: 22; border: 3px solid #ffd166; border-radius: 16px; box-shadow: 0 0 0 7px rgba(255, 209, 102, .38), 0 0 28px rgba(255, 209, 102, .8); pointer-events: none; transition: top .5s ease, left .5s ease, width .5s ease, height .5s ease; animation: jaguar-highlight-pulse 1.8s ease-in-out infinite; }
.jaguar-speech { position: absolute; z-index: 3; top: 8%; left: 330px; width: 350px; padding: 23px 24px 19px; border: 4px solid #2f8d72; border-radius: 25px 25px 25px 7px; color: #203752; background: #fff; box-shadow: 0 18px 38px rgba(10, 20, 45, .28); animation: jaguar-bubble-in .45s .55s ease both; }
.jaguar-guide.guide-welcome .jaguar-speech,
.jaguar-guide.is-positioned .jaguar-speech { animation: jaguar-bubble-in .45s ease both, jaguar-bubble-float 3.6s .55s ease-in-out infinite; }
.jaguar-speech-tail { position: absolute; left: -37px; bottom: 37%; width: 44px; height: 44px; border-left: 4px solid #2f8d72; border-bottom: 4px solid #2f8d72; background: #fff; transform: skew(-28deg) rotate(28deg); }
.jaguar-speech-tail { animation: jaguar-tail-pulse 2.2s ease-in-out infinite; transform-origin: 100% 50%; }
.jaguar-speech-step { display: block; margin-bottom: 9px; color: #2f8d72; font-size: 11px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.jaguar-speech h2 { position: relative; margin: 0 0 9px; color: #203752; font-size: clamp(21px, 2.7vw, 31px); line-height: 1.08; }
.jaguar-speech p { position: relative; margin: 0; color: #63728a; font-size: clamp(13px, 1.4vw, 16px); line-height: 1.55; }
.jaguar-speech-hint { position: relative; display: block; margin-top: 18px; color: #e17c54; font-size: 11px; font-weight: 800; }
.jaguar-speech-hint b { margin-left: 6px; font-size: 17px; }
.jaguar-welcome.is-final .jaguar-speech { border-color: #e17c54; }
.jaguar-welcome.is-final .jaguar-speech-tail { border-color: #e17c54; }
.jaguar-welcome.is-dismissed { pointer-events: none; opacity: 0; transition: opacity .4s ease; }
@keyframes jaguar-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jaguar-arrive { from { opacity: 0; transform: translateX(-82%) translateY(24px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes jaguar-highlight-pulse { 50% { border-color: #ffe49a; box-shadow: 0 0 0 14px rgba(255, 209, 102, .18), 0 0 52px 12px rgba(255, 209, 102, .98); } }
@keyframes jaguar-bubble-in { from { opacity: 0; transform: translateX(25px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes jaguar-guide-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes jaguar-guide-float-left { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes jaguar-guide-float-right { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes jaguar-bubble-float { 0%, 100% { box-shadow: 0 18px 38px rgba(10, 20, 45, .28); } 50% { box-shadow: 0 23px 44px rgba(10, 20, 45, .34), 0 0 0 5px rgba(255, 209, 102, .12); } }
@keyframes jaguar-tail-pulse { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }
@media (max-width: 650px) {
  .jaguar-guide { bottom: 0; width: 100%; height: 410px; }
  .jaguar-guide.is-positioned { width: min(var(--guide-width, 410px), calc(100% - 28px)); }
  .jaguar-guide.place-bottom-left, .jaguar-guide.place-bottom-right { left: 14px; right: auto; bottom: 10px; top: auto; }
  .jaguar-guide.place-top-left, .jaguar-guide.place-top-right { left: 14px; right: auto; top: 10px; bottom: auto; }
  .jaguar-guide-image { bottom: 0; left: 0; width: min(270px, 64vw); max-height: 410px; }
  .jaguar-speech { top: 1%; left: 245px; width: min(300px, calc(100% - 255px)); padding: 18px 18px 15px; border-radius: 21px 21px 21px 7px; }
  .jaguar-speech-tail { left: -25px; bottom: 32%; width: 30px; height: 30px; border-left: 4px solid #2f8d72; border-bottom: 4px solid #2f8d72; transform: skew(-25deg) rotate(25deg); }
  .jaguar-speech h2 { font-size: 22px; }
  .jaguar-speech p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .jaguar-welcome-scrim, .jaguar-guide { animation: none; }
  .jaguar-guide-image { animation: jaguar-guide-float 3.8s ease-in-out infinite !important; }
  .jaguar-guide.guide-welcome .jaguar-speech,
  .jaguar-guide.is-positioned .jaguar-speech {
    animation: jaguar-bubble-in .45s ease both, jaguar-bubble-float 3.6s .55s ease-in-out infinite !important;
  }
  .jaguar-speech-tail { animation: jaguar-tail-pulse 2.2s ease-in-out infinite !important; }
  .jaguar-spotlight { animation: jaguar-highlight-pulse 1.8s ease-in-out infinite !important; }
  .jaguar-welcome.is-dismissed { transition: none; }
}

/* Layout estable para bibliotecas abiertas y secuencias extensas */
.workspace-layout { align-items: start; }
.workspace-layout > .program-panel { min-width: 0; max-height: 620px; padding: 16px 10px; }
.workspace-layout > .program-panel .program-panel-heading { padding: 0 8px 12px; }
.workspace-layout > .program-panel .program-panel-heading h2 { font-size: 19px; }
.workspace-layout > .program-panel .program-content { min-height: 0; padding-top: 12px; }
.workspace-layout > .program-panel .block-library { max-height: 530px; overflow-x: hidden; overflow-y: auto; scrollbar-color: #c9c9ed transparent; scrollbar-width: thin; }
.workspace-layout > .program-panel .action-buttons { display: block; padding: 8px; }
.library-section { margin-bottom: 7px; }
.library-section:last-child { margin-bottom: 0; }
.library-section-content { max-height: 250px; overflow-y: auto; scrollbar-color: #c9c9ed transparent; scrollbar-width: thin; }
.library-section-content .action-button { width: 100%; }
.stage-column { min-width: 0; }
.sequence-panel { min-width: 0; }

/* Portada interactiva */
.brand-mark-css { color: var(--purple); background: linear-gradient(135deg, #e9e8ff, #fff0c9); font-size: 28px; animation: home-mark-pulse 2.8s ease-in-out infinite; }
.home-hero { position: relative; min-height: 475px; padding: 54px 70px; border: 1px solid #e4e2ff; background: radial-gradient(circle at 80% 15%, rgba(255, 200, 87, .35), transparent 26%), linear-gradient(125deg, #e9e8ff 0%, #f8f4ff 58%, #fff8e9 100%); }
.home-hero::after { position: absolute; right: 6%; bottom: -95px; width: 320px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .38); content: ""; transform: rotate(-15deg); }
.home-copy { position: relative; z-index: 2; }
.home-hero h1 { font-size: clamp(39px, 5.2vw, 64px); letter-spacing: -2.5px; }
.home-hero h1 span { background: linear-gradient(90deg, var(--purple), #9d61d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-helper { font-size: 16px; }
.home-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.home-hero-actions .button { gap: 18px; }
.home-secondary-action { padding-right: 10px; padding-left: 10px; }
.home-trust-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; color: #686b91; font-size: 11px; font-weight: 800; }
.home-visual { position: relative; z-index: 1; width: 400px; height: 330px; flex: 0 0 400px; }
.home-robot-emoji { position: absolute; z-index: 2; top: 86px; left: 143px; display: grid; place-items: center; width: 120px; height: 120px; border: 8px solid rgba(255, 255, 255, .78); border-radius: 42% 42% 48% 48%; background: linear-gradient(145deg, #7779ed, #5153cf); box-shadow: 0 17px 0 #4142b7, 0 22px 35px rgba(55, 54, 133, .24); font-size: 66px; animation: home-robot-float 3.6s ease-in-out infinite; }
.home-robot-emoji::after { position: absolute; right: 19px; bottom: -18px; width: 62px; height: 15px; border-radius: 50%; background: rgba(55, 54, 133, .2); content: ""; filter: blur(2px); }
.home-block-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 11px 14px; border: 2px solid rgba(91, 92, 226, .25); border-radius: 12px 12px 12px 4px; color: var(--ink); background: rgba(255, 255, 255, .9); box-shadow: 0 8px 16px rgba(55, 54, 133, .14); font-size: 13px; }
.home-block-float strong { font-size: 11px; }
.float-forward { top: 44px; left: 22px; animation: home-chip-one 4s ease-in-out infinite; }
.float-wait { right: 8px; bottom: 38px; background: #fff5db; animation: home-chip-two 4.5s ease-in-out infinite; }
.float-turn { top: 20px; right: 22px; background: #e7f9f0; animation: home-chip-three 4.2s ease-in-out infinite; }
.home-orbit { position: absolute; border: 2px dashed rgba(91, 92, 226, .27); border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { top: 38px; left: 74px; width: 250px; height: 245px; animation: home-orbit 8s linear infinite; }
.orbit-two { top: 69px; left: 103px; width: 195px; height: 185px; border-color: rgba(255, 200, 87, .5); animation: home-orbit-reverse 6s linear infinite; }
.home-spark { position: absolute; z-index: 2; color: var(--purple); font-size: 24px; animation: home-spark 2s ease-in-out infinite; }
.spark-a { top: 87px; left: 8px; }.spark-b { right: 58px; bottom: 80px; animation-delay: .7s; }
.home-heading-note { color: var(--muted); font-size: 11px; font-weight: 800; }
.home-paths .section-heading { margin-top: 54px; }
.entry-card { position: relative; min-height: 215px; align-items: center; padding: 30px; overflow: hidden; }
.entry-card::after { position: absolute; right: -45px; bottom: -55px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .45); content: ""; transition: transform .3s ease; }
.entry-card:hover::after, .entry-card:focus-visible::after { transform: scale(1.35); }
.entry-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.entry-card-content { position: relative; z-index: 1; }
.card-icon { position: relative; z-index: 1; font-size: 43px; transition: transform .3s ease; }
.entry-card:hover .card-icon, .entry-card:focus-visible .card-icon { transform: rotate(-8deg) scale(1.08); }
.card-icon-course { background: #eae9ff; }.card-icon-sandbox { background: #ffebb9; }
.entry-card-number { position: absolute; top: 17px; right: 22px; z-index: 1; color: rgba(91, 92, 226, .25); font-size: 12px; font-weight: 900; }
.entry-card-sandbox .entry-card-number { color: rgba(173, 116, 21, .3); }
.home-how { display: grid; grid-template-columns: minmax(220px, .8fr) 1.5fr; gap: 45px; align-items: center; margin-top: 55px; padding: 32px 38px; border: 1px solid #e3e2f3; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.home-how-heading h2 { margin-bottom: 9px; }.home-how-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.home-step { text-align: center; }.home-step > span { display: grid; place-items: center; width: 39px; height: 39px; margin: 0 auto 9px; border-radius: 13px; color: white; background: var(--purple); box-shadow: 0 5px 0 #4446bd; font-weight: 900; }
.home-step:nth-child(3) > span { background: #f0ae35; box-shadow: 0 5px 0 #d38b16; }.home-step:nth-child(5) > span { background: #55b98d; box-shadow: 0 5px 0 #378e6b; }
.home-step strong { font-size: 13px; }.home-step p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }.home-step-arrow { color: #b8b7d8; font-size: 24px; font-weight: 900; }
.home-status { display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 18px 24px; border: 1px solid #d9f0e5; border-radius: 18px; background: #f2fcf7; }
.home-status-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: #3d9c76; background: #d9f7ee; font-size: 22px; }.home-status h3 { margin: 0 0 3px; font-size: 16px; }.home-status p { margin: 0; color: var(--muted); font-size: 12px; }.home-status .connection-status { margin-left: auto; }
@keyframes home-mark-pulse { 50% { transform: rotate(12deg) scale(1.08); } }
@keyframes home-robot-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-13px) rotate(2deg); } }
@keyframes home-chip-one { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(8px, -10px) rotate(3deg); } }
@keyframes home-chip-two { 0%, 100% { transform: translate(0, 0) rotate(3deg); } 50% { transform: translate(-8px, 8px) rotate(-3deg); } }
@keyframes home-chip-three { 0%, 100% { transform: translate(0, 0) rotate(4deg); } 50% { transform: translate(-6px, -8px) rotate(-4deg); } }
@keyframes home-orbit { to { transform: rotate(335deg); } }
@keyframes home-orbit-reverse { to { transform: rotate(-385deg); } }
@keyframes home-spark { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .brand-mark-css, .home-robot-emoji, .home-block-float, .home-orbit, .home-spark { animation: none; } }
@media (max-width: 820px) { .home-hero { padding: 38px 30px; }.home-visual { width: 310px; flex-basis: 310px; transform: scale(.85); margin-right: -20px; }.home-how { grid-template-columns: 1fr; gap: 25px; } }
@media (max-width: 650px) { .home-hero { display: block; min-height: 0; padding: 34px 25px 15px; }.home-hero::after { display: none; }.home-visual { width: 100%; height: 260px; margin: 12px 0 -15px; transform: scale(.8); }.home-robot-emoji { left: calc(50% - 60px); }.home-hero-actions { align-items: stretch; flex-direction: column; }.home-hero-actions .button { width: 100%; }.home-heading-note { display: none; }.entry-grid { grid-template-columns: 1fr; }.entry-card { min-height: 175px; }.home-how { padding: 26px 20px; }.home-steps { grid-template-columns: 1fr; gap: 14px; }.home-step-arrow { transform: rotate(90deg); }.home-status { align-items: flex-start; flex-wrap: wrap; }.home-status .connection-status { width: 100%; margin-left: 63px; } }

/* Rediseño visual compartido: navegación oscura, acentos neón y paneles de juego */
.site-redesign { --ink: #f4f7ff; --muted: #aab7d4; --purple: #8b7cff; --purple-dark: #7566f0; --lavender: #29294a; --yellow: #ffcb66; --mint: #193f4a; --pink: #4a2948; --line: #303456; --white: #171a31; --shadow: 0 18px 45px rgba(3, 6, 24, .28); background: #0c1024; color: var(--ink); }
.site-redesign h1, .site-redesign h2, .site-redesign h3, .site-redesign .page-header h1, .site-redesign .section-heading h2, .site-redesign .entry-card h3 { color: #f4f7ff; }
.site-redesign .hero-copy h1, .site-redesign .page-header h1, .site-redesign .workspace-heading h1 { color: #f4f7ff; }
.site-redesign .topbar { background: #10152d; border-bottom-color: #2b3158; box-shadow: 0 8px 24px rgba(3, 6, 24, .2); }
.site-redesign .brand-mark { background: #27254b; }.site-redesign .brand strong { color: #f4f7ff; }.site-redesign .brand small, .site-redesign .nav-link { color: #aab7d4; }.site-redesign .nav-link.is-active, .site-redesign .nav-link:hover { color: #72e0ce; }.site-redesign .nav-link.is-active::after { background: #72e0ce; }
.site-redesign .topbar-badge, .site-redesign .progress-badge { background: #202544; color: #b8c3df; }.site-redesign .status-dot { background: #72e0ce; box-shadow: 0 0 0 3px rgba(114, 224, 206, .15); }
.site-redesign main { background: transparent; }.site-redesign footer { color: #7785a9; }.site-redesign .eyebrow { color: #72e0ce; }.site-redesign h1 span, .site-redesign h2 span { color: #ffcb66; }
.site-redesign .button-primary { color: #10152d; background: #72e0ce; box-shadow: 0 8px 20px rgba(114, 224, 206, .2); }.site-redesign .button-primary:hover { background: #9bf1e3; }.site-redesign .button-quiet { color: #72e0ce; }.site-redesign .button-stop { color: #ff9cae; background: #3d233b; }.site-redesign .button-restart { color: #9deacb; background: #193f4a; }

/* Inicio */
.site-redesign .home-hero { border-color: #343a6a; background: radial-gradient(circle at 82% 25%, rgba(114, 224, 206, .19), transparent 25%), linear-gradient(135deg, #171b3a, #25204b 55%, #332844); box-shadow: 0 22px 55px rgba(3, 6, 24, .3); }.site-redesign .home-hero::after { background: rgba(114, 224, 206, .06); }.site-redesign .home-hero h1 span { background: linear-gradient(90deg, #72e0ce, #ffcb66); -webkit-background-clip: text; background-clip: text; }.site-redesign .home-trust-row { color: #aab7d4; }.site-redesign .home-robot-emoji { border-color: #34326b; background: linear-gradient(145deg, #8b7cff, #5147bd); box-shadow: 0 17px 0 #3a358d, 0 22px 35px rgba(2, 3, 17, .4); }.site-redesign .home-orbit { border-color: rgba(114, 224, 206, .35); }.site-redesign .orbit-two { border-color: rgba(255, 203, 102, .45); }.site-redesign .home-block-float { border-color: #414775; color: #f4f7ff; background: #202544; box-shadow: 0 9px 18px rgba(3, 6, 24, .3); }.site-redesign .float-wait { background: #3d3040; }.site-redesign .float-turn { background: #1e4147; }.site-redesign .home-spark { color: #ffcb66; }
.site-redesign .home-heading-note, .site-redesign .home-how-heading p, .site-redesign .home-step p { color: #aab7d4; }.site-redesign .entry-card { border-color: #343a6a; box-shadow: 0 18px 40px rgba(3, 6, 24, .25); }.site-redesign .entry-card-course { background: #1a2040; }.site-redesign .entry-card-sandbox { background: #31263d; border-color: #5a3c58; }.site-redesign .entry-card p { color: #aab7d4; }.site-redesign .entry-card .card-action { color: #72e0ce; }.site-redesign .card-icon-course { background: #302c62; }.site-redesign .card-icon-sandbox { background: #55374d; }.site-redesign .entry-card-number { color: rgba(114, 224, 206, .35); }.site-redesign .entry-card-sandbox .entry-card-number { color: rgba(255, 203, 102, .45); }.site-redesign .entry-card::after { background: rgba(114, 224, 206, .07); }
.site-redesign .home-how { border-color: #303456; background: #151a33; }.site-redesign .home-step > span { color: #10152d; background: #72e0ce; box-shadow: 0 5px 0 #3d9d91; }.site-redesign .home-step:nth-child(3) > span { background: #ffcb66; box-shadow: 0 5px 0 #c68d2d; }.site-redesign .home-step:nth-child(5) > span { background: #ff8fa3; box-shadow: 0 5px 0 #b44d65; }.site-redesign .home-step-arrow { color: #596486; }.site-redesign .home-status { border-color: #285355; background: #142c38; }.site-redesign .home-status-icon { color: #72e0ce; background: #193f4a; }.site-redesign .home-status p { color: #aab7d4; }.site-redesign .connection-status { color: #72e0ce; }

/* Curso */
.site-redesign .page-header { border-bottom-color: #303456; }.site-redesign .page-header p, .site-redesign .lesson-intro p, .site-redesign .workspace-heading p { color: #aab7d4; }.site-redesign .lesson-sidebar { border-right-color: #303456; }.site-redesign .progress-track { background: #292d50; }.site-redesign .progress-track span { background: #72e0ce; }.site-redesign .progress-top strong { color: #72e0ce; }.site-redesign .progress-reset { color: #ff9cae; background: transparent; }.site-redesign .list-title { color: #7180a7; }.site-redesign .lesson-item { color: #b7c1db; }.site-redesign .lesson-item.is-current { color: #72e0ce; background: #202544; }.site-redesign .lesson-item > span { background: #292d50; }.site-redesign .lesson-item.is-current > span { color: #10152d; background: #72e0ce; }.site-redesign .tip-box { color: #ffcb66; background: #3d3040; }.site-redesign .lesson-intro { border-color: #343a6a; background: #171a32; }.site-redesign .lesson-number { color: #10152d; background: #ffcb66; }.site-redesign .module-kicker { color: #72e0ce; }.site-redesign .challenge-card { border-color: #454978; background: #202544; }.site-redesign .challenge-card p { color: #d1d8ed; }.site-redesign .lesson-stage { border-color: #454978; background: radial-gradient(circle at 70% 25%, rgba(114, 224, 206, .12), transparent 30%), #171b35; }.site-redesign .lesson-target { color: #72e0ce; }.site-redesign .lesson-block-picker { border-color: #5c4c75; background: #27233d; }.site-redesign .lesson-block-picker > div:first-child { color: #ffcb66; }.site-redesign .lesson-block-picker small, .site-redesign .workspace-label small { color: #aab7d4; }.site-redesign .lesson-workspace { border-color: #345f67; background: #142c38; }.site-redesign .lesson-drop-zone { border-color: #4f7190; background: #11182f; }.site-redesign .lesson-drop-zone.is-over { border-color: #ff8fa3; background: #3d233b; }.site-redesign .lesson-navigation { border-top-color: #303456; }.site-redesign .lesson-navigation span { color: #aab7d4; }

/* Laboratorio */
.site-redesign .character-panel, .site-redesign .stage-column, .site-redesign .program-panel, .site-redesign .sequence-panel { border-color: #303456; background: #151a33; box-shadow: 0 18px 42px rgba(3, 6, 24, .28); }.site-redesign .panel-heading, .site-redesign .program-panel-heading, .site-redesign .stage-toolbar { border-color: #303456; }.site-redesign .panel-heading h2, .site-redesign .program-panel-heading h2, .site-redesign .sequence-panel-heading h2 { color: #f4f7ff; }.site-redesign .character-item { color: #d2d9eb; }.site-redesign .character-item:hover, .site-redesign .character-item.is-selected { border-color: #4c5885; background: #202544; }.site-redesign .character-item small, .site-redesign .panel-tip, .site-redesign .stage-toolbar span { color: #aab7d4; }.site-redesign .panel-tip { background: #3d3040; }.site-redesign .stage { border-color: #454978; background: radial-gradient(circle at 50% 15%, rgba(114, 224, 206, .12), transparent 33%), #10152d; }.site-redesign .stage-counter, .site-redesign .sequence-character { color: #72e0ce; background: #193f4a; }.site-redesign .block-library { border-color: #3b416c; background: #11182f; }.site-redesign .library-tabs { border-bottom-color: #454978; background: #1b2140; }.site-redesign .library-tab { border-color: #3b416c; color: #aab7d4; background: #272d51; }.site-redesign .library-tab.is-active { color: #72e0ce; background: #151a33; box-shadow: 0 -3px 0 #72e0ce; }.site-redesign .action-button { color: #f4f7ff; background: #202544; }.site-redesign .action-button:hover { border-color: #72e0ce; }.site-redesign .sequence { border-color: #3b416c; background: #11182f; }.site-redesign .sequence-item { color: #e5eaff; background: #202544; box-shadow: 0 4px 12px rgba(3, 6, 24, .25); }.site-redesign .sequence-item small, .site-redesign .sequence-panel-heading .eyebrow { color: #aab7d4; }.site-redesign .sequence-empty { color: #aab7d4; }.site-redesign .sequence-empty strong { color: #f4f7ff; }.site-redesign .sequence-item button { color: #8190b4; }.site-redesign .simulation-message { color: #72e0ce; }
.site-redesign .action-button strong, .site-redesign .action-button small { color: inherit; }.site-redesign .lesson-list .lesson-item:not(.is-current) { color: #d5ddf1; background: #202544; }.site-redesign .lesson-list .lesson-item:not(.is-current) > span { color: #d5ddf1; background: #2c335b; }.site-redesign .lesson-list .lesson-item:not(.is-current) small { color: #aab7d4; }

@media (max-width: 760px) { .site-redesign .topbar { height: auto; min-height: 72px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }.site-redesign .main-nav { order: 3; width: 100%; height: 42px; justify-content: space-around; }.site-redesign .main-nav .nav-link { font-size: 12px; }.site-redesign .workspace-heading { align-items: flex-start; flex-direction: column; }.site-redesign .workspace-actions { justify-content: flex-start; }.site-redesign .lesson-layout, .site-redesign .sandbox-layout { grid-template-columns: 1fr; }.site-redesign .lesson-sidebar { padding-right: 0; padding-bottom: 18px; border-right: 0; border-bottom: 1px solid #303456; } }

/* Segunda dirección visual: cuaderno de exploración, clara y amigable */
.site-redesign {
  --ink: #17243d;
  --muted: #66738b;
  --purple: #4b5bdc;
  --purple-dark: #3848bf;
  --lavender: #edf0ff;
  --yellow: #ffc857;
  --mint: #d8f4e9;
  --pink: #ffe3e8;
  --line: #dfe5ef;
  --white: #ffffff;
  --shadow: 0 14px 35px rgba(34, 50, 84, .1);
  background: #f7f8fc;
  color: var(--ink);
}
.site-redesign .topbar {
  position: sticky;
  top: 14px;
  z-index: 20;
  width: min(1120px, calc(100% - 32px));
  height: 66px;
  margin: 14px auto 0;
  padding: 0 18px;
  border: 1px solid #e3e7f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(34, 50, 84, .08);
  backdrop-filter: blur(12px);
}
.site-redesign .brand-mark-css { width: 42px; height: 42px; border-radius: 13px; color: #fff; background: var(--purple); box-shadow: 0 4px 0 #3543ac; }
.site-redesign .brand strong { color: var(--ink); }
.site-redesign .brand small, .site-redesign .nav-link { color: var(--muted); }
.site-redesign .nav-link { font-size: 13px; }
.site-redesign .nav-link.is-active, .site-redesign .nav-link:hover { color: var(--purple); }
.site-redesign .nav-link.is-active::after { bottom: 12px; height: 4px; background: var(--yellow); }
.site-redesign .topbar-badge, .site-redesign .progress-badge { border: 1px solid #e4e8f0; background: #f7f9fc; color: var(--muted); }
.site-redesign .status-dot { background: #42b889; box-shadow: 0 0 0 3px #d9f4e8; }
.site-redesign main { max-width: 1120px; padding-top: 48px; }
.site-redesign h1, .site-redesign h2, .site-redesign h3, .site-redesign .page-header h1, .site-redesign .section-heading h2, .site-redesign .entry-card h3 { color: var(--ink); }
.site-redesign .eyebrow { color: #d2674e; letter-spacing: .8px; }
.site-redesign .button-primary { color: #fff; background: var(--purple); box-shadow: 0 5px 0 #3848bf, 0 10px 18px rgba(75, 91, 220, .18); }
.site-redesign .button-primary:hover { background: var(--purple-dark); transform: translateY(-2px); }
.site-redesign .button-quiet { color: var(--purple); }
.site-redesign .button-stop { color: #b64760; background: var(--pink); }
.site-redesign .button-restart { color: #26785b; background: var(--mint); }

/* Inicio */
.site-redesign .home-hero {
  min-height: 440px;
  padding: 52px 62px;
  border: 1px solid #dfe5f0;
  border-radius: 32px;
  background: #fff;
  box-shadow: var(--shadow);
}
.site-redesign .home-hero::before { position: absolute; top: -80px; right: 33%; width: 180px; height: 180px; border-radius: 50%; background: #fff1c9; content: ""; opacity: .8; }
.site-redesign .home-hero::after { right: -80px; bottom: -110px; width: 330px; height: 250px; background: #e0f6ee; }
.site-redesign .home-hero h1 { max-width: 580px; color: var(--ink); font-size: clamp(40px, 5.4vw, 67px); letter-spacing: -2.8px; }
.site-redesign .home-hero h1 span { color: #e16f56; background: none; }
.site-redesign .home-helper { max-width: 490px; color: var(--muted); font-size: 16px; }
.site-redesign .home-hero-actions { margin-top: 25px; }
.site-redesign .home-trust-row { color: #748199; }
.site-redesign .home-visual { filter: drop-shadow(0 12px 16px rgba(34, 50, 84, .08)); }
.site-redesign .home-robot-emoji { border: 7px solid #fff; background: #ffe09a; box-shadow: 0 12px 0 #edbd5a, 0 20px 25px rgba(34, 50, 84, .16); }
.site-redesign .home-orbit { border-color: #cfd6f8; }
.site-redesign .orbit-two { border-color: #f3d995; }
.site-redesign .home-block-float { border: 1px solid #dfe5ef; color: var(--ink); background: #fff; box-shadow: 0 8px 16px rgba(34, 50, 84, .1); }
.site-redesign .float-wait { background: #fff8e6; }.site-redesign .float-turn { background: #e8f8f1; }
.site-redesign .home-spark { color: #e16f56; }
.site-redesign .home-paths .section-heading { margin-top: 58px; }
.site-redesign .home-heading-note { color: #8791a4; }
.site-redesign .entry-card { border: 1px solid #dfe5ef; border-radius: 24px; box-shadow: 0 8px 22px rgba(34, 50, 84, .08); }
.site-redesign .entry-card::before { position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: var(--purple); content: ""; }
.site-redesign .entry-card-course { background: #fff; }.site-redesign .entry-card-sandbox { background: #fffaf0; border-color: #f0dfbd; }.site-redesign .entry-card-sandbox::before { background: #e8a739; }
.site-redesign .entry-card:hover, .site-redesign .entry-card:focus-visible { box-shadow: 0 18px 35px rgba(34, 50, 84, .14); transform: translateY(-5px); }
.site-redesign .card-icon-course { background: #edf0ff; }.site-redesign .card-icon-sandbox { background: #fff0c5; }
.site-redesign .entry-card p { color: var(--muted); }.site-redesign .entry-card .card-action { color: var(--purple); }.site-redesign .entry-card-sandbox .card-action { color: #c68019; }
.site-redesign .home-how { border-color: #dfe5ef; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.site-redesign .home-how-heading p, .site-redesign .home-step p { color: var(--muted); }
.site-redesign .home-step > span { color: #fff; background: var(--purple); box-shadow: 0 4px 0 #3848bf; }.site-redesign .home-step:nth-child(3) > span { color: #704c00; background: var(--yellow); box-shadow: 0 4px 0 #e1a833; }.site-redesign .home-step:nth-child(5) > span { color: #21634d; background: #8ed9b8; box-shadow: 0 4px 0 #5db88e; }
.site-redesign .home-status { border-color: #cdeadd; background: #effaf5; }.site-redesign .home-status-icon { color: #26785b; background: #d8f4e9; }.site-redesign .home-status p { color: var(--muted); }.site-redesign .connection-status { color: #2e936d; }

/* Curso guiado */
.site-redesign .page-header { border-bottom: 1px solid #e5e9f1; }
.site-redesign .page-header p, .site-redesign .lesson-intro p, .site-redesign .workspace-heading p { color: var(--muted); }
.site-redesign .lesson-sidebar { border-right-color: #e1e6ef; }
.site-redesign .progress-track { background: #e6eaf3; }.site-redesign .progress-track span { background: #42b889; }.site-redesign .progress-top strong { color: #2e936d; }
.site-redesign .progress-reset { color: #c4576c; background: transparent; }
.site-redesign .list-title { color: #8290a5; }.site-redesign .lesson-item { color: #53617a; }.site-redesign .lesson-item.is-current { color: var(--purple); background: #edf0ff; }.site-redesign .lesson-item > span { background: #fff; }.site-redesign .lesson-item.is-current > span { color: #fff; background: var(--purple); }
.site-redesign .lesson-list .lesson-item:not(.is-current) { color: #53617a; background: #fff; }.site-redesign .lesson-list .lesson-item:not(.is-current) > span { color: #53617a; background: #edf0ff; }.site-redesign .lesson-list .lesson-item:not(.is-current) small { color: #8791a4; }
.site-redesign .tip-box { color: #8b651d; background: #fff5d9; }
.site-redesign .lesson-intro { padding: 17px 19px; border: 1px solid #dfe5ef; border-radius: 18px; background: #fff; box-shadow: 0 7px 18px rgba(34, 50, 84, .06); }.site-redesign .lesson-number { color: #704c00; background: #ffe09a; }.site-redesign .module-kicker { color: #d2674e; }
.site-redesign .challenge-card { border: 1px solid #cdeadd; background: #effaf5; color: #26785b; }.site-redesign .challenge-card p { color: #53617a; }
.site-redesign .lesson-stage { border: 2px solid #d8dfed; border-radius: 22px; background: radial-gradient(circle at 70% 24%, #fff6d8, transparent 27%), #fff; box-shadow: 0 9px 24px rgba(34, 50, 84, .07); }.site-redesign .lesson-target { color: var(--purple); }
.site-redesign .lesson-block-picker { border: 1px solid #efdfb8; border-radius: 18px; background: #fffaf0; }.site-redesign .lesson-block-picker > div:first-child { color: #9b7021; }.site-redesign .lesson-block-picker small, .site-redesign .workspace-label small { color: #8791a4; }
.site-redesign .lesson-workspace { border: 1px solid #cdeadd; border-radius: 18px; background: #effaf5; }.site-redesign .lesson-drop-zone { border-color: #a9cbd1; background: #fff; }.site-redesign .lesson-drop-zone.is-over { border-color: #e16f56; background: #fff1f0; }.site-redesign .lesson-navigation { border-top-color: #e1e6ef; }.site-redesign .lesson-navigation span { color: #718097; }

/* Laboratorio creativo */
.site-redesign .character-panel, .site-redesign .stage-column, .site-redesign .program-panel, .site-redesign .sequence-panel { border-color: #dfe5ef; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.site-redesign .panel-heading, .site-redesign .program-panel-heading, .site-redesign .stage-toolbar { border-color: #e5e9f1; }.site-redesign .panel-heading h2, .site-redesign .program-panel-heading h2, .site-redesign .sequence-panel-heading h2 { color: var(--ink); }
.site-redesign .character-item { color: #53617a; }.site-redesign .character-item:hover, .site-redesign .character-item.is-selected { border-color: #cbd3fa; background: #edf0ff; }.site-redesign .character-item small, .site-redesign .stage-toolbar span { color: #8791a4; }.site-redesign .panel-tip { color: #8b651d; background: #fff5d9; }
.site-redesign .stage { border-color: #cbd3e5; border-radius: 18px; background: radial-gradient(circle at 50% 12%, #e8f8f1, transparent 32%), #f6f8fc; }.site-redesign .stage-counter, .site-redesign .sequence-character { color: #26785b; background: #d8f4e9; }
.site-redesign .block-library { border-color: #dfe5ef; background: #f7f9fc; }.site-redesign .library-tabs { border-bottom-color: #dfe5ef; background: #edf0ff; }.site-redesign .library-tab { border-color: #dfe5ef; color: #66738b; background: #e2e6f8; }.site-redesign .library-tab.is-active { color: var(--purple); background: #fff; box-shadow: 0 -3px 0 var(--purple); }
.site-redesign .action-button { color: var(--ink); background: #fff; box-shadow: 0 3px 10px rgba(34, 50, 84, .05); }.site-redesign .action-button:hover { border-color: var(--purple); }.site-redesign .sequence { border-color: #dfe5ef; background: #f7f9fc; }.site-redesign .sequence-item { color: var(--ink); background: #fff; box-shadow: 0 4px 12px rgba(34, 50, 84, .08); }.site-redesign .sequence-item small, .site-redesign .sequence-panel-heading .eyebrow { color: #8791a4; }.site-redesign .sequence-empty { color: #8791a4; }.site-redesign .sequence-empty strong { color: var(--ink); }.site-redesign .sequence-item button { color: #9ba6b9; }.site-redesign .simulation-message { color: #2e936d; }

@media (max-width: 760px) {
  .site-redesign .topbar { position: relative; top: 0; width: calc(100% - 24px); margin-top: 12px; }
  .site-redesign main { padding-top: 32px; }
  .site-redesign .home-hero { padding: 38px 28px 18px; }
}
.sequence-panel .sequence { grid-template-columns: minmax(0, 1fr); max-height: 620px; overflow-x: hidden; overflow-y: auto; align-content: start; scrollbar-color: #c9c9ed transparent; scrollbar-width: thin; }
.sequence-item { width: 100%; min-width: 0; }
.sequence-container { min-width: 0; }
.nested-drop-zone { min-width: 0; }
.nested-drop-zone .sequence-item { width: 100%; }
.sequence-item-copy { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .workspace-layout > .program-panel { max-height: none; }
  .workspace-layout > .program-panel .block-library { max-height: 430px; }
  .workspace-layout > .program-panel .library-section-content { max-height: 210px; }
  .sequence-panel .sequence { max-height: none; }
}

/* Dirección visual principal: estudio creativo */
.site-redesign {
  --ink: #18233d;
  --muted: #6c7892;
  --purple: #4c5ee8;
  --purple-dark: #3546c5;
  --yellow: #ffbd4a;
  --mint: #bfeeda;
  --line: #dfe5f1;
  background:
    radial-gradient(circle at 6% 18%, rgba(117, 139, 255, .11), transparent 24rem),
    radial-gradient(circle at 92% 63%, rgba(255, 189, 74, .11), transparent 22rem),
    #f4f7fb;
  color: var(--ink);
}
.site-redesign .app-shell { position: relative; overflow: hidden; }
.site-redesign .app-shell::before,
.site-redesign .app-shell::after {
  position: fixed;
  z-index: -1;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(76, 94, 232, .1);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.site-redesign .app-shell::before { top: 12%; left: -180px; box-shadow: 0 0 0 28px rgba(76, 94, 232, .025), 0 0 0 56px rgba(76, 94, 232, .018); }
.site-redesign .app-shell::after { right: -190px; bottom: 4%; border-color: rgba(255, 189, 74, .16); }
.site-redesign .topbar {
  width: min(1160px, calc(100% - 36px));
  height: 72px;
  margin: 16px auto 0;
  padding: 0 22px;
  border: 1px solid rgba(219, 226, 240, .95);
  border-radius: 22px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 14px 34px rgba(35, 53, 95, .08);
  backdrop-filter: blur(18px);
}
.site-redesign .brand { gap: 12px; }
.site-redesign .brand-mark-css { position: relative; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #6473f1, #4050d4); box-shadow: 0 6px 0 #3342ad, 0 10px 18px rgba(76, 94, 232, .2); }
.site-redesign .brand-mark-css::after { position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.34); border-radius: 10px; content: ""; }
.site-redesign .brand strong { font-size: 17px; letter-spacing: -.6px; }
.site-redesign .brand small { color: #8490a7; font-size: 10px; }
.site-redesign .main-nav { gap: 8px; align-items: center; }
.site-redesign .nav-link { align-self: center; height: 38px; padding: 0 14px; border-radius: 12px; font-size: 12px; transition: background .2s, color .2s, transform .2s; }
.site-redesign .nav-link.is-active { background: #edf0ff; color: var(--purple); }
.site-redesign .nav-link.is-active::after { display: none; }
.site-redesign .nav-link:hover { background: #f3f5ff; transform: translateY(-1px); }
.site-redesign .topbar-badge { border-color: #dbece4; background: #f0faf5; color: #378062; }
.site-redesign main { width: min(1160px, calc(100% - 36px)); max-width: none; padding: 54px 0 80px; }
.site-redesign footer { color: #7c88a0; }
.site-redesign .button { border-radius: 13px; }
.site-redesign .button-primary { background: linear-gradient(135deg, #5668f0, #4354d7); box-shadow: 0 5px 0 #3545bd, 0 12px 24px rgba(76, 94, 232, .2); }
.site-redesign .button-primary:hover { background: linear-gradient(135deg, #6676f4, #4050d1); }
.site-redesign .button-secondary { color: #4050c8; border: 1px solid #d8defa; background: #f3f5ff; box-shadow: 0 5px 12px rgba(76, 94, 232, .08); }
.site-redesign .button-secondary:hover { border-color: #bfc9ff; background: #e9edff; }
.site-redesign :is(a, button):focus-visible { outline: 3px solid rgba(76, 94, 232, .38); outline-offset: 3px; }
.site-redesign footer { display: flex; align-items: center; justify-content: center; gap: 13px; flex-wrap: wrap; padding: 28px 20px 34px; font-size: 11px; }
.site-redesign footer strong { color: var(--purple); }
.site-redesign footer nav { display: inline-flex; gap: 14px; }
.site-redesign footer a { color: #64728d; font-weight: 700; }
.site-redesign footer a:hover { color: var(--purple); }

/* Portada */
.site-redesign .home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 28px;
  min-height: 500px;
  padding: 72px 72px 60px;
  border: 1px solid #dce3f0;
  border-radius: 34px;
  background: linear-gradient(122deg, #fff 0%, #fff 57%, #f0f3ff 100%);
  box-shadow: 0 20px 50px rgba(35, 53, 95, .1);
}
.site-redesign .home-hero::before { top: -100px; right: 28%; width: 250px; height: 250px; background: #fff3ca; opacity: .6; }
.site-redesign .home-hero::after { right: -100px; bottom: -150px; width: 410px; height: 330px; background: #ddf6ed; opacity: .75; }
.site-redesign .hero-copy { position: relative; z-index: 2; align-self: center; max-width: 610px; }
.site-redesign .home-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid #e3e7fb; border-radius: 20px; background: #f5f6ff; color: #5866cf; }
.eyebrow-pulse { width: 7px; height: 7px; border-radius: 50%; background: #ffb83f; box-shadow: 0 0 0 4px #fff0c9; }
.site-redesign .home-hero h1 { margin-top: 22px; font-size: clamp(43px, 5.8vw, 76px); line-height: .98; letter-spacing: -4px; }
.site-redesign .home-hero h1 span { color: #ee765e; }
.site-redesign .home-helper { max-width: 520px; margin-bottom: 0; font-size: 17px; line-height: 1.7; }
.site-redesign .home-hero-actions { margin-top: 30px; }
.site-redesign .home-trust-row { gap: 18px; margin-top: 22px; font-size: 11px; }
.site-redesign .home-visual { z-index: 1; width: 430px; height: 360px; align-self: center; }
.site-redesign .home-robot-emoji { width: 194px; height: 194px; border: 8px solid #fff; background: linear-gradient(145deg, #ffe8a7, #ffd27d); box-shadow: 0 14px 0 #edbc58, 0 25px 34px rgba(40, 59, 103, .17); font-size: 84px; }
.site-redesign .home-block-float { padding: 13px 16px; border-radius: 15px; font-size: 14px; }
.site-redesign .float-forward { top: 66px; left: 11px; }.site-redesign .float-wait { right: 8px; bottom: 75px; }.site-redesign .float-turn { top: 16px; right: 50px; }
.site-redesign .home-orbit { width: 300px; height: 300px; }.site-redesign .orbit-two { width: 380px; height: 190px; }
.site-redesign .home-highlight-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 22px 0 64px; padding: 15px 12px; border: 1px solid #e0e6f0; border-radius: 20px; background: rgba(255,255,255,.8); box-shadow: 0 10px 25px rgba(35,53,95,.05); }
.highlight-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; border-right: 1px solid #e7ebf3; }.highlight-item:last-child { border-right: 0; }
.highlight-item strong, .highlight-item span { display: block; }.highlight-item strong { color: var(--ink); font-size: 13px; }.highlight-item div span { margin-top: 3px; color: #8792a7; font-size: 11px; }
.highlight-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 17px; font-weight: 800; }.highlight-icon-blue { color: #4c5ee8; background: #e9edff; }.highlight-icon-yellow { color: #9f6a0f; background: #fff1c7; }.highlight-icon-green { color: #23805b; background: #d9f5e8; }
.site-redesign .home-paths .section-heading { margin-top: 0; }.site-redesign .home-heading-note { padding-bottom: 4px; }
.site-redesign .entry-grid { gap: 26px; }.site-redesign .entry-card { min-height: 232px; padding: 32px; border-radius: 26px; }.site-redesign .entry-card::before { width: 6px; }
.site-redesign .entry-card h3 { font-size: 25px; }.site-redesign .entry-card p { max-width: 330px; font-size: 14px; line-height: 1.65; }.site-redesign .entry-card-number { color: #dbe1ee; font-size: 48px; font-weight: 900; }
.site-redesign .home-how { display: grid; grid-template-columns: .8fr 1.4fr; gap: 40px; align-items: center; margin-top: 28px; padding: 36px 40px; }
.site-redesign .home-how-heading p { max-width: 300px; line-height: 1.6; }.site-redesign .home-steps { gap: 15px; }.site-redesign .home-step { min-width: 0; }.site-redesign .home-step p { font-size: 11px; line-height: 1.45; }
.site-redesign .home-status { margin-top: 22px; padding: 22px 28px; border-radius: 20px; }.site-redesign .home-status h3 { font-size: 16px; }
.site-redesign .home-spotlight { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; min-height: 280px; margin-top: 28px; padding: 38px 46px; overflow: hidden; border: 1px solid #dce3f0; border-radius: 26px; background: #1e2a4b; box-shadow: 0 20px 40px rgba(27, 42, 78, .14); }
.spotlight-copy { position: relative; z-index: 2; }.spotlight-copy .eyebrow { color: #ffc85e; }.spotlight-copy h2 { max-width: 420px; margin: 9px 0 12px; color: #fff; font-size: 30px; line-height: 1.1; }.spotlight-copy p { max-width: 410px; color: #b6c2df; line-height: 1.6; }.spotlight-copy .button { margin-top: 9px; }
.spotlight-board { position: relative; min-height: 205px; transform: rotate(-2deg); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: linear-gradient(145deg, #334270, #28365d); box-shadow: 0 15px 30px rgba(0,0,0,.18); }
.spotlight-board::before { position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 30px 30px; content: ""; }
.board-chip { position: absolute; z-index: 1; padding: 11px 14px; border-radius: 11px; color: var(--ink); background: #fff; box-shadow: 0 7px 14px rgba(0,0,0,.17); font-size: 12px; font-weight: 800; }.chip-one { top: 34px; left: 38px; }.chip-two { top: 104px; left: 135px; background: #fff1c4; }.chip-three { right: 30px; bottom: 30px; background: #d9f5e8; }.board-line { position: absolute; z-index: 1; width: 74px; height: 2px; background: #91a4ea; transform: rotate(24deg); }.board-line:nth-child(1) { top: 75px; left: 126px; }.board-line:nth-child(2) { top: 130px; left: 85px; transform: rotate(-20deg); }.board-line:nth-child(3) { right: 108px; bottom: 76px; transform: rotate(12deg); }.board-cursor { position: absolute; right: 52px; top: 52px; z-index: 2; color: #ffc85c; font-size: 23px; animation: cursor-float 2.5s ease-in-out infinite; }
@keyframes cursor-float { 50% { transform: translate(9px, 8px) rotate(18deg); } }

/* Curso y laboratorio: paneles con capas, estados y foco visual */
.site-redesign .page-header { align-items: center; margin-bottom: 38px; padding: 0 4px 27px; }.site-redesign .page-header h1 { font-size: clamp(39px, 5vw, 56px); letter-spacing: -2.5px; }.site-redesign .progress-badge { padding: 11px 15px; }
.site-redesign .lesson-layout { grid-template-columns: 268px minmax(0, 1fr); gap: 38px; }.site-redesign .lesson-sidebar { padding-right: 28px; }.site-redesign .lesson-progress { padding: 15px; border: 1px solid #e0e6f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 18px rgba(35,53,95,.05); }
.site-redesign .module-nav { margin-top: 28px; }.site-redesign .lesson-item { min-height: 54px; border: 1px solid transparent; transition: background .2s, transform .2s; }.site-redesign .lesson-item:hover { background: #f1f4ff; transform: translateX(3px); }.site-redesign .lesson-item.is-current { border-color: #dbe1ff; box-shadow: 0 6px 13px rgba(76,94,232,.08); }
.site-redesign .lesson-content { min-width: 0; }.site-redesign .lesson-intro { padding: 22px; border-radius: 22px; }.site-redesign .lesson-number { width: 51px; height: 51px; font-size: 17px; }.site-redesign .lesson-intro h2 { font-size: 25px; }
.site-redesign .challenge-area { margin: 20px 0 17px; }.site-redesign .challenge-card { min-height: 70px; padding: 15px 18px; border-radius: 18px; box-shadow: 0 8px 18px rgba(35,53,95,.05); }.site-redesign .challenge-icon { width: 43px; height: 43px; border-radius: 13px; background: #e8ebff; }
.site-redesign .lesson-stage { min-height: 250px; background: radial-gradient(circle at 68% 24%, #fff4cf 0 8%, transparent 29%), radial-gradient(circle at 20% 90%, #e8f8f0, transparent 29%), #fff; }
.site-redesign .lesson-block-picker, .site-redesign .lesson-workspace { padding: 20px; box-shadow: 0 8px 20px rgba(35,53,95,.04); }.site-redesign .lesson-block-picker { margin-top: 20px; }.site-redesign .lesson-workspace { margin-top: 16px; }
.site-redesign .lesson-drop-zone { min-height: 145px; border-width: 2px; border-radius: 16px; }.site-redesign .lesson-actions { margin-top: 20px; }.site-redesign .lesson-navigation { margin-top: 25px; padding-top: 19px; }
.site-redesign .workspace-page { padding-top: 47px; }.site-redesign .workspace-heading { margin-bottom: 32px; padding-bottom: 27px; border-bottom: 1px solid #dfe5f1; }.site-redesign .workspace-heading h1 { color: var(--ink); font-size: clamp(38px, 5vw, 56px); letter-spacing: -2.5px; }.site-redesign .workspace-heading h1 span { color: #ee765e; }.site-redesign .workspace-actions { padding: 9px; border: 1px solid #e0e6f0; border-radius: 17px; background: #fff; box-shadow: 0 8px 18px rgba(35,53,95,.06); }
.site-redesign .workspace-layout { grid-template-columns: 280px minmax(0,1fr); gap: 24px; align-items: stretch; }.site-redesign .program-panel, .site-redesign .stage-column, .site-redesign .sequence-panel { border-radius: 24px; box-shadow: 0 14px 30px rgba(35,53,95,.07); }.site-redesign .program-panel { background: #fbfcff; }.site-redesign .program-panel-heading, .site-redesign .stage-toolbar, .site-redesign .sequence-panel-heading { padding: 20px 22px; }.site-redesign .program-panel-heading h2, .site-redesign .sequence-panel-heading h2 { font-size: 23px; }.site-redesign .block-library { margin: 0 15px 15px; border-radius: 16px; }.site-redesign .action-button { min-height: 61px; border-radius: 13px; transition: transform .2s, box-shadow .2s, border-color .2s; }.site-redesign .action-button:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(76,94,232,.11); }
.site-redesign .stage-column { padding: 0 0 18px; }.site-redesign .stage-toolbar { background: #fff; }.site-redesign .stage { min-height: 400px; margin: 0 18px; border-radius: 18px; background: radial-gradient(circle at 50% 10%, #e0f8ef 0 5%, transparent 31%), linear-gradient(#f9fbff, #f0f5fb); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }.site-redesign .simulation-message { min-height: 18px; margin: 10px 18px 0; }
.site-redesign .sequence-panel { margin-top: 24px; }.site-redesign .sequence { margin: 0 18px 18px; border-radius: 16px; }.site-redesign .sequence-item { border: 1px solid #e1e6f0; border-radius: 13px; }.site-redesign .sequence-character { border: 1px solid #c9ebdc; }

@media (max-width: 900px) {
  .site-redesign .home-hero { grid-template-columns: 1fr 330px; padding: 52px 42px; }.site-redesign .home-visual { width: 330px; transform: scale(.86); transform-origin: center; }.site-redesign .home-how { grid-template-columns: 1fr; gap: 20px; }.site-redesign .lesson-layout { grid-template-columns: 225px minmax(0,1fr); gap: 24px; }.site-redesign .workspace-layout { grid-template-columns: 240px minmax(0,1fr); }
}
@media (max-width: 700px) {
  .site-redesign main { width: min(100% - 24px, 560px); padding-top: 34px; }.site-redesign .topbar { width: calc(100% - 24px); padding: 12px 15px 0; }.site-redesign .main-nav { gap: 2px; }.site-redesign .nav-link { padding: 0 8px; font-size: 11px; }.site-redesign .home-hero { display: block; min-height: 0; padding: 42px 27px 18px; }.site-redesign .home-hero h1 { font-size: clamp(42px, 12vw, 61px); }.site-redesign .home-visual { width: 100%; height: 270px; transform: scale(.8); }.site-redesign .home-highlight-strip { grid-template-columns: 1fr; gap: 5px; margin-bottom: 45px; padding: 9px; }.highlight-item { border-right: 0; border-bottom: 1px solid #e7ebf3; padding: 11px 10px; }.highlight-item:last-child { border-bottom: 0; }.site-redesign .entry-grid, .site-redesign .home-spotlight { grid-template-columns: 1fr; }.site-redesign .entry-card { min-height: 190px; padding: 24px; }.site-redesign .home-how { padding: 28px 24px; }.site-redesign .home-steps { grid-template-columns: repeat(3, 1fr); }.site-redesign .home-step-arrow { display: none; }.site-redesign .home-spotlight { padding: 30px 24px; }.spotlight-board { min-height: 180px; }.site-redesign .page-header, .site-redesign .workspace-heading { align-items: flex-start; flex-direction: column; gap: 18px; }.site-redesign .lesson-layout, .site-redesign .workspace-layout { grid-template-columns: 1fr; }.site-redesign .lesson-sidebar { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid #dfe5f1; }.site-redesign .lesson-list { margin-top: 23px; }.site-redesign .module-nav { overflow-x: auto; }.site-redesign .workspace-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; }.site-redesign .workspace-actions .button { padding-right: 8px; padding-left: 8px; font-size: 12px; }.site-redesign .stage { min-height: 330px; }
}
@media (max-width: 430px) {
  .site-redesign .topbar { height: auto; min-height: 98px; }.site-redesign .brand small, .site-redesign .topbar-badge { display: none; }.site-redesign .brand { margin-right: auto; }.site-redesign .main-nav { order: 3; width: 100%; height: 38px; justify-content: space-between; }.site-redesign .nav-link { flex: 1; justify-content: center; }.site-redesign .home-hero h1 { letter-spacing: -2.6px; }.site-redesign .home-hero-actions { display: grid; gap: 8px; }.site-redesign .home-hero-actions .button { width: 100%; }.site-redesign .home-visual { height: 230px; transform: scale(.68); }.site-redesign .home-heading-note { display: none; }.site-redesign .entry-card { gap: 15px; }.site-redesign .card-icon { width: 62px; height: 62px; border-radius: 17px; }.site-redesign .entry-card h3 { font-size: 21px; }.site-redesign .home-status { align-items: flex-start; flex-wrap: wrap; padding: 18px; }.site-redesign .connection-status { width: 100%; margin-left: 52px; }.site-redesign .workspace-actions { grid-template-columns: 1fr; }.site-redesign .workspace-actions .button { width: 100%; }.site-redesign .stage { min-height: 280px; margin: 0 12px; }.site-redesign .program-panel-heading, .site-redesign .stage-toolbar, .site-redesign .sequence-panel-heading { padding: 17px; }
}

@media (max-width: 700px) {
  .jaguar-guide {
    position: fixed !important;
    top: auto !important;
    bottom: 14px !important;
  }
}

/* Keep the mobile guide outside the highlighted content. */
@media (max-width: 700px) {
  html.jaguar-tour-active,
  html.jaguar-tour-active body {
    overflow: visible;
    height: auto;
  }
  .jaguar-guide { position: fixed; height: 260px; }
  .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-left .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-right .jaguar-guide-image {
    left: 0;
    right: auto;
    width: min(135px, 35vw);
    max-height: 135px;
  }
  .jaguar-guide.is-positioned .jaguar-speech,
  .jaguar-speech {
    top: 0;
    left: 0 !important;
    width: 100% !important;
    max-height: 175px;
    box-sizing: border-box;
    padding: 14px 13px 11px;
  }
  .jaguar-speech-tail { left: 30px; right: auto; bottom: -20px; width: 25px; height: 25px; transform: skew(-25deg) rotate(-45deg); }
  .jaguar-speech h2 { font-size: 18px; }
  .jaguar-speech p { font-size: 12px; line-height: 1.35; }
  .jaguar-speech-hint { margin-top: 10px; }
}

@media (max-width: 360px) {
  .jaguar-guide { height: 210px; }
  .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-left .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-right .jaguar-guide-image {
    width: min(115px, 34vw);
    max-height: 115px;
  }

  .jaguar-guide.is-positioned .jaguar-speech,
  .jaguar-speech {
    max-height: 145px;
    padding: 11px 10px 9px;
  }
  .jaguar-speech h2 { font-size: 16px; }
  .jaguar-speech p { font-size: 11px; }
  .jaguar-speech-hint { margin-top: 6px; font-size: 10px; }
}

@media (max-width: 700px) {
  .jaguar-guide.guide-final {
    top: 14px !important;
    bottom: auto !important;
  }
}

html.lesson-tour-active,
html.lesson-tour-active body {
  overscroll-behavior: none;
}

@media (max-width: 700px) {
  html.lesson-tour-active,
  html.lesson-tour-active body {
    overflow: visible;
    height: auto;
  }
  .lesson-guide-card {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    min-height: 205px;
    padding: 16px 14px 14px 104px;
    transform: none !important;
  }
  .lesson-guide-mentor {
    left: 0 !important;
    bottom: 0 !important;
    width: min(31vw, 135px);
    height: min(40vh, 185px);
  }
  .lesson-guide.is-welcome .lesson-guide-card {
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    width: calc(100% - 24px) !important;
    min-height: 310px;
    padding: 19px 14px 16px 35%;
    transform: translate(-50%, -50%) !important;
  }
  .lesson-guide.is-welcome .lesson-guide-mentor {
    left: 0 !important;
    bottom: -4px !important;
    width: min(42vw, 190px);
    height: min(50vh, 350px);
    max-width: none;
    max-height: none;
  }
  .lesson-guide.is-welcome .lesson-guide-card h3 { font-size: 22px; }
  .lesson-guide.is-welcome .lesson-guide-card p { max-width: 280px; font-size: 13px; line-height: 1.45; }
}

@media (max-width: 360px) {
  .lesson-guide-card { padding-left: 88px; }
  .lesson-guide-mentor { width: 92px; height: 140px; }
  .lesson-guide.is-welcome .lesson-guide-card {
    min-height: 275px;
    padding-left: 32%;
  }
  .lesson-guide.is-welcome .lesson-guide-mentor {
    width: 43vw;
    height: 280px;
  }
  .lesson-guide.is-welcome .lesson-guide-card h3 { font-size: 19px; }
  .lesson-guide.is-welcome .lesson-guide-card p { font-size: 11px; }
}

/* La bienvenida es una presentación libre: el jaguar puede ocupar el hero. */
.jaguar-welcome.is-intro .jaguar-spotlight,
.jaguar-welcome.is-intro .jaguar-overlay-panels .jaguar-overlay-panel {
  display: none;
}
.jaguar-welcome.is-intro .jaguar-overlay-panels {
  display: block;
  background: rgba(17, 27, 52, .68);
}
.jaguar-guide.guide-welcome {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: min(850px, 94vw);
  height: 560px;
  transform: translate(-50%, -50%);
}
.jaguar-guide.guide-welcome .jaguar-guide-image {
  width: 470px;
  max-height: 560px;
}
.jaguar-guide.guide-welcome .jaguar-speech {
  top: 7%;
  left: 405px;
  width: 400px;
}

@media (max-width: 700px) {
  .jaguar-guide.guide-welcome {
    left: 50%;
    top: 50% !important;
    bottom: auto !important;
    width: calc(100% - 20px);
    height: min(520px, calc(100vh - 24px));
    transform: translate(-50%, -50%);
  }
  .jaguar-guide.guide-welcome .jaguar-guide-image {
    left: 0;
    bottom: 0;
    width: min(300px, 74vw);
    max-height: 420px;
  }
  .jaguar-guide.guide-welcome .jaguar-speech {
    top: 16px;
    left: min(125px, 31vw) !important;
    width: calc(100% - min(135px, 33vw)) !important;
    max-height: none;
    padding: 18px 15px 14px;
  }
  .jaguar-guide.guide-welcome .jaguar-speech h2 { font-size: 21px; }
  .jaguar-guide.guide-welcome .jaguar-speech p { font-size: 13px; line-height: 1.45; }
  .jaguar-guide.guide-welcome .jaguar-speech-tail {
    left: -20px;
    bottom: 35%;
    width: 27px;
    height: 27px;
    transform: skew(-25deg) rotate(25deg);
  }
}

@media (max-width: 360px) {
  .jaguar-guide.guide-welcome {
    height: calc(100vh - 18px);
  }
  .jaguar-guide.guide-welcome .jaguar-guide-image {
    width: 75vw;
    max-height: 330px;
  }
  .jaguar-guide.guide-welcome .jaguar-speech {
    left: 29vw !important;
    width: 67vw !important;
    padding: 13px 11px 10px;
  }
  .jaguar-guide.guide-welcome .jaguar-speech h2 { font-size: 18px; }
  .jaguar-guide.guide-welcome .jaguar-speech p { font-size: 11px; }
}

/* Ambientación chiapaneca: selva, montaña, maíz y textiles */
.site-redesign {
  --ink: #243b35;
  --muted: #65766e;
  --purple: #287c72;
  --purple-dark: #1e6259;
  --yellow: #f4bd45;
  --mint: #c9ebd5;
  --line: #d9e5d7;
  --chiapas-jungle: #1d5f50;
  --chiapas-leaf: #43a36f;
  --chiapas-coral: #e9795f;
  --chiapas-earth: #a8673f;
  --chiapas-sky: #e9f5ee;
  background:
    radial-gradient(circle at 4% 12%, rgba(67, 163, 111, .16), transparent 19rem),
    radial-gradient(circle at 96% 78%, rgba(244, 189, 69, .15), transparent 20rem),
    #f6faf5;
}
.site-redesign .app-shell::before {
  top: 9%;
  left: -180px;
  width: 330px;
  height: 220px;
  border: 0;
  border-radius: 52% 48% 0 0;
  background: repeating-linear-gradient(135deg, rgba(29, 95, 80, .08) 0 8px, transparent 8px 18px);
  box-shadow: none;
  transform: rotate(12deg);
}
.site-redesign .app-shell::after {
  right: -120px;
  bottom: 8%;
  width: 300px;
  height: 230px;
  border: 0;
  border-radius: 52% 48% 0 0;
  background: repeating-linear-gradient(45deg, rgba(233, 121, 95, .1) 0 7px, transparent 7px 17px);
  transform: rotate(-16deg);
}
.site-redesign .topbar {
  border-color: #d6e4d8;
  background: rgba(255, 255, 252, .9);
  box-shadow: 0 14px 34px rgba(38, 75, 55, .1);
}
.site-redesign .brand-mark-css {
  background: linear-gradient(145deg, #2e927f, #1d6256);
  box-shadow: 0 6px 0 #174c43, 0 10px 18px rgba(29, 95, 80, .2);
}
.site-redesign .nav-link.is-active { color: var(--chiapas-jungle); background: #e4f3e9; }
.site-redesign .nav-link:hover { color: var(--chiapas-jungle); background: #eef8ef; }
.site-redesign .header-cta,
.site-redesign .button-primary {
  background: linear-gradient(135deg, #2f8e7e, #23695e);
  box-shadow: 0 5px 0 #174e46, 0 12px 24px rgba(29, 95, 80, .2);
}
.site-redesign .header-cta:hover,
.site-redesign .button-primary:hover { background: linear-gradient(135deg, #3b9e8c, #1e6259); }
.site-redesign .button-secondary { color: #a15f32; border-color: #f0d8ad; background: #fff8e9; }
.site-redesign .button-secondary:hover { border-color: #e7bd73; background: #fff0ce; }
.site-redesign .eyebrow { color: var(--chiapas-coral); }
.region-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #d8ead9;
  border-radius: 20px;
  color: #38745e;
  background: #eff9ee;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.chiapas-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin-bottom: 25px;
  padding: 11px 18px;
  overflow: hidden;
  border: 1px solid #d8e8d5;
  border-radius: 17px;
  background: #edf8ed;
  box-shadow: 0 8px 18px rgba(38, 75, 55, .05);
}
.chiapas-banner::after {
  position: absolute;
  right: -20px;
  bottom: -24px;
  width: 190px;
  height: 75px;
  border-top: 2px solid rgba(29, 95, 80, .2);
  border-radius: 50%;
  content: "";
  transform: rotate(-7deg);
}
.chiapas-banner-icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  color: #98651d;
  background: #ffe8a4;
  font-size: 20px;
}
.chiapas-banner strong,
.chiapas-banner span { display: block; }
.chiapas-banner strong { color: var(--chiapas-jungle); font-size: 13px; }
.chiapas-banner div span { margin-top: 3px; color: #688070; font-size: 11px; }
.chiapas-banner-art { position: relative; z-index: 1; margin-left: auto; color: #3e8966; font-size: 21px; letter-spacing: 7px; white-space: nowrap; }
.chiapas-banner > div { min-width: 0; }
.site-redesign main { position: relative; }
.site-redesign main::before {
  position: absolute;
  top: -22px;
  right: 10px;
  width: 92px;
  height: 20px;
  background: repeating-linear-gradient(90deg, #2e8c78 0 10px, #f4bd45 10px 20px, #e9795f 20px 30px, #f7f3db 30px 40px);
  border-radius: 3px;
  content: "";
  opacity: .85;
}
.site-redesign .home-hero-new {
  border-color: #d9e7d8;
  background:
    linear-gradient(120deg, rgba(255,255,255,.97), rgba(245,251,242,.95)),
    repeating-linear-gradient(135deg, transparent 0 30px, rgba(67,163,111,.05) 30px 32px);
}
.site-redesign .home-hero-new::before { background: #ffe7a0; }
.site-redesign .home-hero-new::after { background: #d4efda; }
.site-redesign .hero-kicker { border-color: #d7ead6; color: #32735d; background: #eff9ed; }
.site-redesign .hero-kicker i { background: #e9795f; box-shadow: 0 0 0 4px #ffe1d8; }
.site-redesign .home-hero-new h1 { color: var(--ink); }
.site-redesign .home-hero-new h1 em { color: var(--chiapas-coral); }
.site-redesign .hero-lab-visual {
  background:
    linear-gradient(180deg, rgba(226, 246, 231, .95), rgba(250, 242, 211, .95)),
    repeating-linear-gradient(45deg, rgba(29,95,80,.08) 0 2px, transparent 2px 18px);
}
.site-redesign .hero-sky-shape { background: #d7edd2; }
.site-redesign .hero-robot-platform { background: #ffd978; box-shadow: 0 11px 0 #dcae42, 0 20px 24px rgba(61, 86, 48, .17); }
.site-redesign .hero-block-b { background: #e0f4e5; }
.site-redesign .hero-block-c { background: #fff3cf; }
.site-redesign .home-proof-row { border-color: #d8e6d8; }
.site-redesign .home-proof-row > div { border-color: #d8e6d8; }
.site-redesign .proof-blue { color: #2a756a; background: #dff2e5; }
.site-redesign .proof-green { color: #a15f32; background: #ffe9cc; }
.site-redesign .demo-heading h2 span { color: var(--chiapas-coral); }
.site-redesign .product-demo { border-color: #d9e7d8; box-shadow: 0 18px 38px rgba(38,75,55,.1); }
.site-redesign .demo-stage { background: linear-gradient(#e3f3e7, #fff2d0); }
.site-redesign .demo-stage::after { border-color: #72b487; }
.site-redesign .demo-result-icon { color: #26775e; background: #d9f1dc; }
.site-redesign .demo-result a { color: #287c72; }
.site-redesign .mode-course { background: #245d50; }
.site-redesign .mode-course .mode-illustration { background: #307562; }
.site-redesign .mode-lab { border-color: #eadab5; background: #fff8e8; }
.site-redesign .home-process { background: #e3f2e5; }
.site-redesign .process-intro h2 span { color: #287c72; }
.site-redesign .home-final-cta { background: #245d50; box-shadow: 0 18px 35px rgba(36,93,80,.2); }
.site-redesign .lesson-stage {
  border-color: #c9dfc9;
  background:
    radial-gradient(circle at 70% 24%, #fff2c9, transparent 27%),
    radial-gradient(circle at 20% 90%, #dff4e2, transparent 29%),
    repeating-linear-gradient(0deg, rgba(55,126,85,.06) 0 1px, transparent 1px 34px),
    #fff;
}
.site-redesign .lesson-block-picker { border-color: #ead6ad; background: #fff9ea; }
.site-redesign .lesson-workspace { border-color: #c6e2cc; background: #edf8ed; }
.site-redesign .challenge-card { border-color: #bfe0c6; background: #edf8ed; color: #287c72; }
.site-redesign .lesson-intro { border-color: #d6e7d5; }
.site-redesign .lesson-number { color: #8c5a20; background: #ffe39b; }
.site-redesign .progress-track span { background: #39a477; }
.site-redesign .lesson-item.is-current { color: #287c72; background: #e4f3e8; border-color: #c9e3cf; }
.site-redesign .lesson-item.is-current > span { background: #287c72; }
.site-redesign .tip-box { color: #8b6126; background: #fff0c8; }
.site-redesign .program-panel,
.site-redesign .stage-column,
.site-redesign .sequence-panel { border-color: #d6e5d6; }
.site-redesign .stage {
  border-color: #bdd9c1;
  background:
    linear-gradient(rgba(237,248,237,.5), rgba(255,246,214,.45)),
    repeating-linear-gradient(0deg, rgba(45,117,83,.06) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(45,117,83,.06) 0 1px, transparent 1px 38px);
}
.site-redesign .stage-counter,
.site-redesign .sequence-character { color: #287c72; background: #d9f1df; border-color: #c5e3ce; }
.site-redesign .block-library,
.site-redesign .sequence { border-color: #d8e5d8; background: #f5faf4; }
.site-redesign .library-tabs { background: #e6f3e6; border-color: #d1e4d3; }
.site-redesign .library-tab { background: #dceedd; border-color: #c9e0ca; }
.site-redesign .library-tab.is-active { color: #287c72; }
.site-redesign .action-button:hover { border-color: #3b9e8c; }
.site-redesign footer { border-top: 1px solid #dce8dc; }

@media (max-width: 760px) {
  .site-redesign .region-badge { order: 4; width: 100%; justify-content: center; margin: 2px 0 8px; }
  .chiapas-banner { align-items: flex-start; }
  .chiapas-banner-art { align-self: center; font-size: 16px; letter-spacing: 3px; }
  .site-redesign main::before { right: 0; width: 64px; }
}
@media (max-width: 460px) {
  .chiapas-banner { padding: 10px 12px; }
  .chiapas-banner-icon { width: 32px; height: 32px; font-size: 17px; }
  .chiapas-banner strong { font-size: 12px; }
  .chiapas-banner div span { max-width: 195px; line-height: 1.35; }
  .chiapas-banner-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-redesign *, .site-redesign *::before, .site-redesign *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Ajustes finales para teléfonos actuales: Samsung A55, iPhone y similares */
@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .site-redesign .app-shell { overflow: hidden; }
  .site-redesign .topbar {
    width: calc(100% - 24px);
    height: auto;
    min-height: 64px;
    margin-top: 10px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .site-redesign .brand { min-width: 0; }
  .site-redesign .brand strong { font-size: 14px; }
  .site-redesign .brand small { font-size: 9px; }
  .site-redesign .main-nav {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    height: 36px;
    justify-content: space-around;
    gap: 2px;
    border-top: 1px solid #dce8dc;
  }
  .site-redesign .main-nav .nav-link { padding: 9px 7px 7px; font-size: 11px; }
  .site-redesign .header-cta, .site-redesign .topbar-badge { display: none; }
  .site-redesign .region-badge {
    display: inline-flex;
    order: 2;
    width: auto;
    margin: 0;
    padding: 7px 9px;
    font-size: 9px;
    white-space: nowrap;
  }
  .site-redesign main {
    width: calc(100% - 24px);
    padding-top: 22px;
  }
  .chiapas-banner {
    min-height: 62px;
    margin-bottom: 14px;
    padding: 10px 12px;
  }
  .chiapas-banner div { min-width: 0; }
  .chiapas-banner div span { display: block; max-width: 245px; overflow-wrap: anywhere; }
  .site-redesign .home-hero-new {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 30px 22px 20px;
    border-radius: 25px;
  }
  .site-redesign .home-hero-new .hero-copy { max-width: none; }
  .site-redesign .home-hero-new h1 {
    margin: 18px 0 14px;
    font-size: clamp(40px, 12vw, 55px);
    letter-spacing: -2.8px;
  }
  .site-redesign .home-hero-new .home-helper {
    max-width: none;
    font-size: 14px;
    line-height: 1.55;
  }
  .site-redesign .home-hero-new .home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }
  .site-redesign .home-hero-new .home-hero-actions .button {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }
  .hero-note { margin-top: 17px; }
  .site-redesign .home-hero-new .hero-lab-visual {
    width: 100%;
    min-height: 265px;
    height: 265px;
    margin-top: 20px;
    border-radius: 20px;
  }
  .hero-robot-platform { right: 50%; bottom: 34px; width: 132px; height: 132px; transform: translateX(50%); }
  .hero-robot-platform img { width: 98px; height: 98px; }
  .hero-block { padding: 8px 10px; font-size: 10px; }
  .hero-block b { font-size: 14px; }
  .hero-block-a { top: 54px; left: 13px; }
  .hero-block-b { top: 25px; right: 13px; }
  .hero-block-c { right: 10px; bottom: 32px; }
  .site-redesign .home-proof-row {
    grid-template-columns: 1fr;
    margin: 14px 0 58px;
    border-bottom: 0;
  }
  .home-proof-row > div {
    min-height: 63px;
    padding: 0 12px;
    border-right: 0;
    border-bottom: 1px solid #dfe5f1;
  }
  .home-proof-row > div:last-child { border-bottom: 0; }
  .home-demo-section, .home-process { grid-template-columns: 1fr; gap: 24px; }
  .home-demo-section { margin-bottom: 64px; }
  .demo-heading h2 { font-size: 32px; letter-spacing: -1.4px; }
  .product-demo { grid-template-columns: 1fr; gap: 10px; padding: 10px; border-radius: 20px; }
  .demo-code-panel { padding: 12px; }
  .demo-stage { min-height: 185px; }
  .demo-result { display: grid; grid-template-columns: auto 1fr; }
  .demo-result a { grid-column: 2; margin-left: 0; }
  .site-redesign .home-paths-new { margin-bottom: 64px; }
  .learning-modes { grid-template-columns: 1fr; gap: 16px; }
  .learning-mode { grid-template-columns: 105px 1fr; min-height: 220px; border-radius: 20px; }
  .mode-copy { padding: 20px 16px; }
  .mode-copy h3 { font-size: 20px; }
  .mode-copy p { font-size: 12px; line-height: 1.45; }
  .mode-meta { margin-bottom: 15px; }
  .home-process { margin-bottom: 64px; padding: 28px 20px; border-radius: 22px; }
  .home-steps { grid-template-columns: 1fr; gap: 17px; }
  .home-step-arrow { transform: rotate(90deg); }
  .home-final-cta { display: block; padding: 28px 20px; border-radius: 22px; }
  .final-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .final-actions .button { width: 100%; }
  .site-redesign footer { padding: 24px 16px; text-align: center; }
  .site-redesign footer nav { justify-content: center; flex-wrap: wrap; }

  .jaguar-guide { height: 310px; }
  .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-left .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-right .jaguar-guide-image {
    left: 0;
    right: auto;
    width: min(155px, 40vw);
    max-height: 155px;
  }
  .jaguar-guide.is-positioned .jaguar-speech,
  .jaguar-speech {
    top: 0;
    left: 0 !important;
    width: 100% !important;
    max-height: 205px;
    box-sizing: border-box;
    padding: 14px 13px 11px;
  }
  .jaguar-speech-tail { left: 30px; right: auto; bottom: -20px; width: 25px; height: 25px; transform: skew(-25deg) rotate(-45deg); }
  .jaguar-speech h2 { font-size: 18px; }
  .jaguar-speech p { font-size: 12px; line-height: 1.35; }
  .jaguar-speech-hint { margin-top: 10px; }
  .jaguar-speech h2 { font-size: 19px; }
  .jaguar-speech p { font-size: 12px; line-height: 1.4; }
}

@media (max-width: 390px) {
  .site-redesign .topbar { grid-template-columns: 1fr; }
  .site-redesign .region-badge { justify-self: start; }
  .site-redesign .home-hero-new { padding-left: 17px; padding-right: 17px; }
  .site-redesign .home-hero-new h1 { font-size: 39px; }
  .learning-mode { grid-template-columns: 88px 1fr; }
  .mode-copy { padding: 17px 13px; }
  .jaguar-guide { height: 330px; }
  .jaguar-guide-image { width: 48vw; }
  .jaguar-speech { left: 43vw; width: 53vw; }
}

/* Portada editorial de RoboBloques */
.site-redesign .header-cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px; color: #fff; background: var(--purple); box-shadow: 0 4px 0 #3545bd; font-size: 11px; font-weight: 800; white-space: nowrap; transition: transform .2s, background .2s; }
.site-redesign .header-cta:hover { background: var(--purple-dark); transform: translateY(-1px); }
.site-redesign .home-hero-new { isolation: isolate; overflow: hidden; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 580px; padding: 70px 70px 60px; border-radius: 34px; background: #fff; }
.site-redesign.jaguar-tour-finished .home-hero-new { position: static; }
.site-redesign .home-hero-new::before { top: -130px; right: 34%; width: 300px; height: 300px; background: #fff0c6; opacity: .56; }
.site-redesign .home-hero-new::after { z-index: -1; right: -90px; bottom: -180px; width: 460px; height: 370px; background: #dff7ef; opacity: .9; }
.site-redesign .home-hero-new .hero-copy { max-width: 585px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid #dbe2fb; border-radius: 20px; color: #4b5fce; background: #f4f6ff; font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.hero-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #ffbd4a; box-shadow: 0 0 0 4px #fff0c8; }
.site-redesign .home-hero-new h1 { margin: 24px 0 18px; font-size: clamp(48px, 5.6vw, 74px); letter-spacing: -4.4px; line-height: .98; }
.site-redesign .home-hero-new h1 em { color: #f17a67; font-style: normal; }
.site-redesign .home-hero-new .home-helper { max-width: 505px; font-size: 16px; line-height: 1.7; }
.site-redesign .home-hero-new .home-hero-actions { margin-top: 29px; }

/* Movimiento ambiental y respuestas visuales de la interfaz */
.site-redesign .home-hero-new { animation: home-hero-fade-in .8s ease-out both; }
.site-redesign .home-hero-new .hero-kicker { animation: badge-float-in .6s .16s ease-out both; }
.site-redesign .home-hero-new h1 { animation: text-rise .7s .24s ease-out both; }
.site-redesign .home-hero-new .home-helper { animation: text-rise .7s .34s ease-out both; }
.site-redesign .home-hero-new .home-hero-actions { animation: text-rise .7s .44s ease-out both; }
.site-redesign .home-hero-new .hero-note { animation: text-rise .7s .54s ease-out both; }
.hero-lab-visual { animation: visual-breathe 6s ease-in-out infinite; }
.hero-robot-platform { animation: robot-hover 3.8s ease-in-out infinite; }
.platform-ring { animation: ring-spin 16s linear infinite; }
.hero-path-dot { animation: dot-ping 2.2s ease-in-out infinite; }
.path-dot-two { animation-delay: .8s; }
.hero-star { animation: star-twinkle 2s ease-in-out infinite; }
.hero-star-two { animation-delay: .6s; }
.home-proof-row > div { animation: proof-rise .65s ease-out both; }
.home-proof-row > div:nth-child(2) { animation-delay: .12s; }
.home-proof-row > div:nth-child(3) { animation-delay: .24s; }
.proof-icon { animation: icon-pulse 2.8s ease-in-out infinite; }
.product-demo, .learning-mode, .home-process, .home-final-cta { transition: transform .28s ease, box-shadow .28s ease; }
.product-demo:hover, .learning-mode:hover, .home-process:hover, .home-final-cta:hover { transform: translateY(-5px); box-shadow: 0 22px 42px rgba(35,53,95,.14); }
.demo-block { animation: demo-block-glow 3.4s ease-in-out infinite; }
.demo-block:nth-of-type(2) { animation-delay: .45s; }
.demo-block:nth-of-type(3) { animation-delay: .9s; }
.demo-result-icon { animation: result-check 2.4s ease-in-out infinite; }
.mode-flag, .mode-lab-spark { animation: star-twinkle 1.8s ease-in-out infinite; }
.process-item > span { transition: transform .25s ease, background .25s ease; }
.process-item:hover > span { transform: scale(1.15) rotate(-8deg); }
.lesson-intro, .lesson-block-picker, .lesson-workspace, .lesson-actions, .lesson-navigation { animation: lesson-section-arrive .65s ease-out both; }
.lesson-block-picker { animation-delay: .1s; }
.lesson-workspace { animation-delay: .18s; }
.lesson-actions { animation-delay: .26s; }
.lesson-navigation { animation-delay: .34s; }
.lesson-number { animation: number-pop 2.6s ease-in-out infinite; }
.challenge-card { animation: challenge-glow 3.8s ease-in-out infinite; }
.lesson-target { animation: target-blink 2.2s ease-in-out infinite; }
.lesson-guide.message-refresh .lesson-guide-card { box-shadow: 0 18px 38px rgba(10,20,45,.28), 0 0 0 7px rgba(255,209,102,.16); }
.lesson-guide.is-welcome .lesson-guide-card { animation: welcome-card-in .55s ease-out both, welcome-card-glow 2.8s .55s ease-in-out infinite; }
.lesson-guide.is-welcome .lesson-guide-mentor { animation: mentor-pop .7s cubic-bezier(.2,.9,.25,1.2) both, mentor-welcome-float 3.2s .7s ease-in-out infinite; }
.lesson-guide.is-welcome .lesson-guide-icon { animation: welcome-icon-arrive .65s .12s cubic-bezier(.2,.9,.25,1.2) both, welcome-icon-shine 2.2s 1s ease-in-out infinite; }
.lesson-guide.is-welcome .lesson-guide-arrow { animation: welcome-arrow-bounce 1.1s .35s ease-in-out infinite; }
.lesson-guide.is-welcome .lesson-guide-card h3 { animation: welcome-text-arrive .55s .2s ease-out both; }
.lesson-guide.is-welcome .lesson-guide-card p { animation: welcome-text-arrive .55s .3s ease-out both; }
.lesson-guide.is-welcome #lesson-guide-next { animation: welcome-button-arrive .6s .42s cubic-bezier(.2,.9,.25,1.2) both, welcome-button-pulse 2.4s 1.2s ease-in-out infinite; }
@keyframes welcome-card-glow { 0%, 100% { box-shadow: 0 18px 38px rgba(10,20,45,.28), 0 0 0 0 rgba(255,209,102,0); } 50% { box-shadow: 0 20px 42px rgba(10,20,45,.32), 0 0 0 8px rgba(255,209,102,.13); } }
@keyframes mentor-welcome-float { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(5px) translateY(-7px) rotate(1.5deg); } }
@keyframes welcome-icon-arrive { from { opacity: 0; transform: scale(.35) rotate(-25deg); } 70% { opacity: 1; transform: scale(1.18) rotate(8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes welcome-icon-shine { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,209,102,0)); } 50% { filter: drop-shadow(0 0 9px rgba(255,209,102,.9)); } }
@keyframes welcome-arrow-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes welcome-text-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes welcome-button-arrive { from { opacity: 0; transform: translateY(12px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes welcome-button-pulse { 0%, 100% { box-shadow: 0 5px 0 #1d6159, 0 0 0 0 rgba(47,141,114,0); } 50% { box-shadow: 0 5px 0 #1d6159, 0 0 0 7px rgba(47,141,114,.14); } }
@media (prefers-reduced-motion: reduce) {
  .lesson-guide.is-welcome .lesson-guide-card,
  .lesson-guide.is-welcome .lesson-guide-mentor,
  .lesson-guide.is-welcome .lesson-guide-icon,
  .lesson-guide.is-welcome .lesson-guide-arrow,
  .lesson-guide.is-welcome .lesson-guide-card h3,
  .lesson-guide.is-welcome .lesson-guide-card p,
  .lesson-guide.is-welcome #lesson-guide-next { animation: none; }
}
@keyframes page-section-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-hero-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes badge-float-in { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes text-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes visual-breathe { 0%, 100% { box-shadow: 0 16px 30px rgba(61,79,151,.08); } 50% { box-shadow: 0 22px 42px rgba(61,79,151,.17); } }
@keyframes robot-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes dot-ping { 0%, 100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.45); box-shadow: 0 0 0 8px rgba(79,110,247,.12); } }
@keyframes star-twinkle { 0%, 100% { opacity: .55; transform: scale(.8) rotate(-10deg); } 50% { opacity: 1; transform: scale(1.2) rotate(12deg); filter: brightness(1.3); } }
@keyframes proof-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(3deg); } }
@keyframes demo-block-glow { 0%, 100% { box-shadow: 0 4px 10px rgba(47,61,112,.06); } 50% { box-shadow: 0 7px 18px rgba(76,94,232,.18); } }
@keyframes result-check { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(8deg); } }
@keyframes lesson-section-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes number-pop { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-4deg) scale(1.06); } }
@keyframes challenge-glow { 0%, 100% { box-shadow: 0 7px 0 rgba(91,92,226,.13), 0 10px 22px rgba(55,54,133,.1); } 50% { box-shadow: 0 7px 0 rgba(91,92,226,.13), 0 12px 28px rgba(240,107,156,.18); } }
@keyframes target-blink { 0%, 100% { opacity: .72; } 50% { opacity: 1; color: #f06b9c; } }
@media (prefers-reduced-motion: reduce) {
  .site-redesign .home-hero-new, .site-redesign .home-hero-new *, .home-proof-row > div, .hero-lab-visual, .hero-robot-platform, .platform-ring, .hero-path-dot, .hero-star, .proof-icon, .demo-block, .demo-result-icon, .mode-flag, .mode-lab-spark, .lesson-intro, .lesson-block-picker, .lesson-workspace, .lesson-actions, .lesson-navigation, .lesson-number, .challenge-card, .lesson-target { animation: none !important; }
  .product-demo:hover, .learning-mode:hover, .home-process:hover, .home-final-cta:hover { transform: none; }
}

/* En escritorio se conserva el movimiento visual del recorrido, incluso si el
   sistema solicita reducir movimiento; la guía y sus animaciones son parte del
   contenido didáctico principal. */
@media (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .site-redesign .home-hero-new { animation: home-hero-fade-in .8s ease-out both !important; }
  .site-redesign .home-hero-new .hero-kicker { animation: badge-float-in .6s .16s ease-out both !important; }
  .site-redesign .home-hero-new h1,
  .site-redesign .home-hero-new .home-helper,
  .site-redesign .home-hero-new .home-hero-actions,
  .site-redesign .home-hero-new .hero-note { animation: text-rise .7s ease-out both !important; }
  .site-redesign .home-hero-new .hero-lab-visual { animation: visual-breathe 6s ease-in-out infinite !important; }
  .site-redesign .home-hero-new .hero-robot-platform { animation: robot-hover 3.8s ease-in-out infinite !important; }
  .site-redesign .home-hero-new .platform-ring { animation: ring-spin 16s linear infinite !important; }
  .site-redesign .home-hero-new .hero-path-dot { animation: dot-ping 2.2s ease-in-out infinite !important; }
  .site-redesign .home-hero-new .hero-star { animation: star-twinkle 2s ease-in-out infinite !important; }
  .site-redesign .home-hero-new .hero-block { animation: home-block-drift 4s ease-in-out infinite !important; }
  .site-redesign .home-proof-row > div { animation: proof-rise .65s ease-out both !important; }
  .site-redesign .home-proof-row .proof-icon { animation: icon-pulse 2.8s ease-in-out infinite !important; }
  .site-redesign .demo-block { animation: demo-block-glow 3.4s ease-in-out infinite !important; }
  .site-redesign .demo-stage img { animation: demo-robot-hop 3s ease-in-out infinite !important; }
  .site-redesign .demo-result-icon { animation: result-check 2.4s ease-in-out infinite !important; }
  .site-redesign .mode-flag,
  .site-redesign .mode-lab-spark { animation: star-twinkle 1.8s ease-in-out infinite !important; }
  .lesson-intro, .lesson-block-picker, .lesson-workspace, .lesson-actions, .lesson-navigation { animation: lesson-section-arrive .65s ease-out both !important; }
  .lesson-number { animation: number-pop 2.6s ease-in-out infinite !important; }
  .challenge-card { animation: challenge-glow 3.8s ease-in-out infinite !important; }
  .lesson-target { animation: target-blink 2.2s ease-in-out infinite !important; }
  .lesson-success-scrim.is-visible { animation: success-scrim-in .35s ease-out both !important; }
  .lesson-success.is-visible { animation: success-splash 1.05s cubic-bezier(.2,.8,.2,1) forwards !important; }
  .lesson-success.is-visible::before { animation: success-confetti 1.15s .08s ease-out forwards !important; }
  .lesson-success.is-visible::after { animation: success-ring 1.1s ease-out forwards !important; }
  .lesson-success.is-visible .success-star { animation: star-splash .95s cubic-bezier(.15,.9,.25,1.25) forwards, star-orbit 2.2s 1s ease-in-out infinite !important; }
  .lesson-success.is-visible .success-star-core { animation: core-flash 1.15s .2s ease-out forwards !important; }
  .lesson-success.is-visible .success-burst { animation: success-burst-explode 1.1s cubic-bezier(.16,.84,.32,1) forwards !important; }
  .lesson-success.is-visible .success-energy { animation: success-energy-wave 1.8s cubic-bezier(.15,.8,.25,1) forwards !important; }
  .lesson-success.is-visible .success-spark { animation: success-spark-shoot 1.25s .12s cubic-bezier(.15,.8,.25,1) forwards !important; }
  .lesson-guide.message-refresh .lesson-guide-card h3 { animation: message-title-pop .42s cubic-bezier(.2,.9,.25,1.2) both !important; }
  .lesson-guide.message-refresh .lesson-guide-card p { animation: message-copy-in .5s .06s ease-out both !important; }
  .lesson-guide.message-refresh .lesson-guide-icon { animation: message-icon-bounce .55s cubic-bezier(.2,.9,.25,1.3) both !important; }
  .lesson-guide.message-refresh .lesson-guide-step { animation: message-step-glow .7s ease-out both !important; }
  .lesson-guide.message-refresh #lesson-guide-next { animation: message-button-arrive .5s .12s ease-out both !important; }
  .lesson-guide.is-welcome .lesson-guide-card { animation: welcome-card-in .55s ease-out both, welcome-card-glow 2.8s .55s ease-in-out infinite !important; }
  .lesson-guide.is-welcome .lesson-guide-mentor { animation: mentor-pop .7s cubic-bezier(.2,.9,.25,1.2) both, mentor-welcome-float 3.2s .7s ease-in-out infinite !important; }
  .lesson-guide.is-welcome .lesson-guide-icon { animation: welcome-icon-arrive .65s .12s cubic-bezier(.2,.9,.25,1.2) both, welcome-icon-shine 2.2s 1s ease-in-out infinite !important; }
  .lesson-guide.is-welcome .lesson-guide-arrow { animation: welcome-arrow-bounce 1.1s .35s ease-in-out infinite !important; }
  .lesson-guide.is-welcome .lesson-guide-card h3,
  .lesson-guide.is-welcome .lesson-guide-card p { animation: welcome-text-arrive .55s .2s ease-out both !important; }
  .lesson-guide.is-welcome #lesson-guide-next { animation: welcome-button-arrive .6s .42s cubic-bezier(.2,.9,.25,1.2) both, welcome-button-pulse 2.4s 1.2s ease-in-out infinite !important; }
}

@media (prefers-reduced-motion: reduce) {
  .laboratory-lock-scrim { animation: laboratory-lock-scrim-in .45s ease-out both !important; }
  .laboratory-lock-card { animation: laboratory-lock-card-in .7s cubic-bezier(.2,.9,.25,1.15) both !important; }
  .laboratory-lock-mentor { animation: laboratory-lock-mentor-float 3.8s ease-in-out infinite !important; }
  .laboratory-lock-icon { animation: laboratory-lock-icon-pulse 2s ease-in-out infinite !important; }
  .laboratory-lock-message .button { animation: laboratory-lock-button-pulse 2.6s 1s ease-in-out infinite !important; }
  .laboratory-lock-card::before { animation: laboratory-lock-orbit 7s linear infinite !important; }
}

@media (max-width: 700px) {
  .jaguar-guide { height: 260px; }
  .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-left .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-right .jaguar-guide-image {
    left: 0;
    right: auto;
    width: min(135px, 35vw);
    max-height: 135px;
  }
  .jaguar-guide.is-positioned .jaguar-speech,
  .jaguar-speech {
    top: 0;
    left: 0 !important;
    width: 100% !important;
    max-height: 175px;
    box-sizing: border-box;
    padding: 14px 13px 11px;
  }
  .jaguar-speech-tail { left: 30px; right: auto; bottom: -20px; width: 25px; height: 25px; transform: skew(-25deg) rotate(-45deg); }
  .jaguar-speech h2 { font-size: 18px; }
  .jaguar-speech p { font-size: 12px; line-height: 1.35; }
  .jaguar-speech-hint { margin-top: 10px; }
}

@media (max-width: 360px) {
  .jaguar-guide { height: 210px; }
  .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-left .jaguar-guide-image,
  .jaguar-guide.is-positioned.guide-side-right .jaguar-guide-image {
    width: min(115px, 34vw);
    max-height: 115px;
  }
  .jaguar-guide.is-positioned .jaguar-speech,
  .jaguar-speech {
    max-height: 145px;
    padding: 11px 10px 9px;
  }
  .jaguar-speech h2 { font-size: 16px; }
  .jaguar-speech p { font-size: 11px; }
  .jaguar-speech-hint { margin-top: 6px; font-size: 10px; }
}
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #6d7890; font-size: 11px; }
.hero-note-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #268263; background: #dcf6e9; font-weight: 900; }
.hero-note strong, .hero-note small { display: block; }.hero-note small { margin-top: 2px; color: #929caf; }
.hero-lab-visual { position: relative; z-index: 1; min-width: 0; min-height: 400px; align-self: center; overflow: hidden; border-radius: 28px; background: linear-gradient(145deg, #edf2ff, #f8fbff 58%, #e9f8f2); }
.hero-sky-shape { position: absolute; top: -78px; right: -40px; width: 250px; height: 250px; border-radius: 50%; background: #d9e2ff; opacity: .7; }
.hero-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(76,94,232,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(76,94,232,.08) 1px, transparent 1px); background-size: 31px 31px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 85%, transparent); }
.hero-robot-platform { position: absolute; right: 28%; bottom: 54px; display: grid; place-items: center; width: 185px; height: 185px; border-radius: 50%; background: #ffda82; box-shadow: 0 11px 0 #eeb957, 0 20px 24px rgba(42,61,105,.16); }
.hero-robot-platform img { position: relative; z-index: 1; width: 137px; height: 137px; object-fit: contain; filter: drop-shadow(0 7px 4px rgba(33,50,91,.13)); }
.platform-ring { position: absolute; inset: -23px; border: 1px dashed #91a1dd; border-radius: 50%; }.platform-ring::after { position: absolute; inset: 16px; border: 1px dashed #eecb75; border-radius: 50%; content: ""; }
.hero-block { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid #e0e6f2; border-radius: 13px; color: #23395b; background: #fff; box-shadow: 0 9px 18px rgba(36,56,98,.12); font-size: 12px; font-weight: 800; animation: home-block-drift 4s ease-in-out infinite; }.hero-block b { font-size: 17px; }.hero-block-a { top: 96px; left: 32px; }.hero-block-b { top: 39px; right: 30px; background: #e8faf3; animation-delay: .8s; }.hero-block-c { right: 24px; bottom: 66px; background: #fff6db; animation-delay: 1.5s; }
@keyframes home-block-drift { 50% { transform: translateY(-7px); } }
.hero-path-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #4f6ef7; box-shadow: 0 0 0 5px rgba(79,110,247,.12); }.path-dot-one { top: 143px; left: 44%; }.path-dot-two { right: 17%; bottom: 151px; background: #32c5b4; box-shadow: 0 0 0 5px rgba(50,197,180,.14); }.hero-star { position: absolute; color: #ffbd4a; font-size: 26px; }.hero-star-one { left: 20%; bottom: 40px; }.hero-star-two { right: 18%; top: 150px; color: #ff7f73; font-size: 17px; }
.site-redesign .home-proof-row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 23px 0 94px; border-bottom: 1px solid #dfe5f1; }.home-proof-row > div { display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 0 26px; border-right: 1px solid #dfe5f1; }.home-proof-row > div:last-child { border-right: 0; }.proof-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; font-size: 11px; font-weight: 900; }.proof-blue { color: #4c5ee8; background: #e8ecff; }.proof-yellow { color: #97650c; background: #fff0c7; }.proof-green { color: #23805b; background: #d9f5e8; }.home-proof-row p { margin: 0; }.home-proof-row strong, .home-proof-row small { display: block; }.home-proof-row strong { color: var(--ink); font-size: 13px; }.home-proof-row small { margin-top: 4px; color: #8994a9; font-size: 11px; }
.home-demo-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 56px; align-items: center; margin-bottom: 110px; }.demo-heading h2 { margin: 12px 0 14px; font-size: clamp(31px, 3.6vw, 47px); line-height: 1.05; letter-spacing: -2px; }.demo-heading h2 span { color: #f17a67; }.demo-heading p { max-width: 340px; color: var(--muted); line-height: 1.65; }
.product-demo { display: grid; grid-template-columns: .86fr 1.14fr; gap: 13px; padding: 14px; border: 1px solid #dce3f0; border-radius: 26px; background: #fff; box-shadow: 0 18px 38px rgba(35,53,95,.09); }.demo-code-panel { padding: 15px; border-radius: 17px; background: #f4f6fc; }.demo-panel-label { display: flex; justify-content: space-between; margin: 0 3px 14px; color: #7a879e; font-size: 10px; font-weight: 800; text-transform: uppercase; }.demo-panel-label b { color: #4c5ee8; }.demo-block { display: flex; align-items: center; gap: 9px; min-height: 51px; padding: 8px 10px; border-radius: 11px; color: #23395b; background: #fff; box-shadow: 0 4px 9px rgba(35,53,95,.07); }.demo-block i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #fff; background: #4f6ef7; font-style: normal; }.demo-turn i { background: #ff7f73; }.demo-wait i { color: #815b13; background: #ffd166; }.demo-block span { flex: 1; }.demo-block strong, .demo-block small { display: block; }.demo-block strong { font-size: 11px; }.demo-block small { margin-top: 3px; color: #8994a9; font-size: 9px; }.demo-block > b { color: #b5bfd0; font-size: 10px; }.demo-connector { width: 2px; height: 10px; margin: 0 auto; background: #9eaae1; }
.demo-stage { position: relative; min-height: 198px; overflow: hidden; border-radius: 17px; background: linear-gradient(#e8f4ff, #effaf6); }.demo-stage-label { position: absolute; top: 13px; left: 15px; z-index: 2; color: #718097; font-size: 10px; font-weight: 800; text-transform: uppercase; }.demo-stage::after { position: absolute; right: -30px; bottom: -48px; width: 190px; height: 120px; border: 1px dashed #7bcdb5; border-radius: 50%; transform: rotate(-12deg); content: ""; }.demo-stage img { position: absolute; z-index: 2; bottom: 18px; left: 26%; width: 93px; height: 93px; object-fit: contain; animation: demo-robot-hop 3s ease-in-out infinite; }.demo-cloud { position: absolute; width: 47px; height: 15px; border-radius: 20px; background: rgba(255,255,255,.8); }.cloud-one { top: 52px; right: 19%; }.cloud-two { top: 78px; left: 16%; width: 31px; }.demo-track-line { position: absolute; right: 17%; bottom: 36px; width: 110px; border-top: 2px dashed #9bb6dc; transform: rotate(-16deg); }.demo-goal { position: absolute; z-index: 1; right: 16%; bottom: 55px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #db9d2d; background: #fff2c7; }.demo-speech { position: absolute; top: 52px; right: 11px; padding: 7px 9px; border-radius: 9px; color: #4d6381; background: #fff; font-size: 9px; box-shadow: 0 4px 10px rgba(35,53,95,.07); }.demo-result { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-top: 1px solid #edf0f5; }.demo-result-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #23805b; background: #d8f4e9; font-weight: 900; }.demo-result strong, .demo-result p { margin: 0; }.demo-result strong { font-size: 11px; }.demo-result p { color: #8792a7; font-size: 10px; }.demo-result a { margin-left: auto; color: #4c5ee8; font-size: 10px; font-weight: 800; white-space: nowrap; }.demo-result a:hover { color: #3546c5; }
@keyframes demo-robot-hop { 50% { transform: translateX(17px); } }
.site-redesign .home-paths-new { margin-bottom: 104px; }.learning-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }.learning-mode { display: grid; grid-template-columns: 190px 1fr; min-height: 260px; overflow: hidden; border-radius: 25px; }.mode-course { background: #23395b; }.mode-lab { border: 1px solid #f0dfb5; background: #fff8e7; }.mode-illustration { position: relative; overflow: hidden; }.mode-course .mode-illustration { background: #314c73; }.mode-label { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }.mode-course .mode-label { color: #9fb3df; }.mode-lab .mode-label { color: #b37a22; }.mode-copy { align-self: center; padding: 27px 30px 25px 20px; }.mode-copy h3 { margin: 0 0 10px; font-size: 24px; }.mode-course h3, .mode-course p { color: #fff; }.mode-lab h3 { color: var(--ink); }.mode-copy p { margin-bottom: 15px; color: #b8c7e0; font-size: 13px; line-height: 1.6; }.mode-lab p { color: #6c7892; }.mode-meta { display: flex; gap: 7px; margin-bottom: 23px; color: #91a6cb; font-size: 10px; }.mode-lab .mode-meta { color: #a17e3e; }.mode-link { font-size: 11px; font-weight: 800; }.mode-course .mode-link { color: #ffd166; }.mode-lab .mode-link { color: #4c5ee8; }.mode-link b { margin-left: 5px; }.mode-sun { position: absolute; top: 29px; left: 33px; width: 54px; height: 54px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 0 12px rgba(255,209,102,.12); }.mode-road { position: absolute; right: -22px; bottom: 21px; width: 185px; height: 104px; border: 3px dashed #8198bd; border-right: 0; border-radius: 50%; transform: rotate(-16deg); }.mode-flag { position: absolute; top: 55px; right: 27px; color: #ff7f73; font-size: 20px; }.mode-step { position: absolute; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #23395b; background: #fff; font-size: 10px; font-weight: 900; }.mode-step-one { right: 106px; bottom: 55px; }.mode-step-two { right: 64px; bottom: 80px; background: #ffd166; }.mode-step-three { right: 28px; bottom: 105px; background: #8fe1c2; }.mode-lab-circle { position: absolute; top: 47px; left: 43px; width: 118px; height: 118px; border: 1px dashed #d5af5d; border-radius: 50%; }.mode-lab-block { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #fff; background: #4f6ef7; box-shadow: 0 5px 0 #3545bd; font-weight: 800; }.lab-block-one { top: 38px; left: 35px; transform: rotate(-8deg); }.lab-block-two { top: 95px; right: 27px; background: #ff7f73; box-shadow: 0 5px 0 #d75e54; transform: rotate(9deg); }.lab-block-three { right: 63px; bottom: 21px; color: #805d19; background: #ffd166; box-shadow: 0 5px 0 #dda940; transform: rotate(-7deg); }.mode-lab-spark { position: absolute; top: 26px; right: 27px; color: #32c5b4; font-size: 25px; }
.home-process { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; margin-bottom: 94px; padding: 50px 58px; border-radius: 28px; background: #eaf0ff; }.process-intro h2 { margin: 12px 0; font-size: 37px; line-height: 1.05; letter-spacing: -1.7px; }.process-intro h2 span { color: #4f6ef7; }.process-intro p { max-width: 300px; color: #667692; line-height: 1.6; }.process-list { display: grid; gap: 10px; }.process-item { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid #d3dcf4; }.process-item:last-child { border-bottom: 0; }.process-item > span { color: #4f6ef7; font-size: 12px; font-weight: 900; }.process-item strong { display: block; color: var(--ink); font-size: 15px; }.process-item p { margin: 5px 0 0; color: #718099; font-size: 12px; }
.home-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 38px 46px; border-radius: 25px; background: #23395b; box-shadow: 0 18px 35px rgba(35,57,91,.16); }.home-final-cta .eyebrow { color: #ffd166; }.home-final-cta h2 { margin: 9px 0 7px; color: #fff; font-size: 30px; }.home-final-cta p { margin: 0; color: #b9c7df; font-size: 13px; }.final-actions { display: flex; gap: 10px; flex-wrap: wrap; }.button-light { color: #23395b; background: #fff; }.button-light:hover { background: #edf2ff; }
@media (max-width: 980px) {
  .site-redesign .header-cta { display: none; }.site-redesign .home-hero-new { grid-template-columns: 1fr 1fr; padding: 52px 44px; }.site-redesign .home-hero-new h1 { font-size: clamp(43px, 6vw, 62px); }.hero-lab-visual { min-height: 360px; }.home-demo-section { gap: 30px; }.learning-mode { grid-template-columns: 145px 1fr; }.home-process { gap: 40px; padding: 40px; }
}
@media (max-width: 700px) {
  .site-redesign .home-hero-new { display: block; padding: 42px 27px 25px; }.site-redesign .home-hero-new h1 { font-size: clamp(44px, 12vw, 61px); letter-spacing: -3px; }.site-redesign .home-hero-new .home-helper { font-size: 15px; }.hero-lab-visual { min-height: 310px; margin-top: 28px; }.hero-robot-platform { right: 28%; transform: scale(.86); }.hero-block-a { left: 16px; }.hero-block-b { right: 15px; }.hero-block-c { right: 12px; bottom: 40px; }.site-redesign .home-proof-row { grid-template-columns: 1fr; margin-bottom: 70px; }.home-proof-row > div { min-height: 64px; border-right: 0; border-bottom: 1px solid #dfe5f1; padding: 0 10px; }.home-proof-row > div:last-child { border-bottom: 0; }.home-demo-section { grid-template-columns: 1fr; margin-bottom: 75px; }.demo-heading h2 { font-size: 35px; }.product-demo { grid-template-columns: 1fr; }.demo-result { grid-column: auto; flex-wrap: wrap; }.demo-result a { width: 100%; margin-left: 37px; }.learning-modes { grid-template-columns: 1fr; }.learning-mode { grid-template-columns: 135px 1fr; min-height: 225px; }.mode-copy { padding: 23px 18px; }.mode-copy h3 { font-size: 21px; }.mode-copy p { font-size: 12px; }.home-process { grid-template-columns: 1fr; gap: 25px; margin-bottom: 70px; padding: 31px 25px; }.process-intro h2 { font-size: 32px; }.home-final-cta { align-items: flex-start; flex-direction: column; padding: 31px 25px; }.final-actions { width: 100%; }.final-actions .button { flex: 1; }
}
@media (max-width: 430px) {
  .site-redesign .home-hero-new .home-hero-actions { display: grid; }.site-redesign .home-hero-new .home-hero-actions .button { width: 100%; }.hero-lab-visual { min-height: 275px; }.hero-robot-platform { right: 24%; bottom: 40px; transform: scale(.7); }.hero-block { padding: 9px 10px; font-size: 10px; }.hero-block-a { top: 68px; }.hero-block-b { top: 25px; }.hero-block-c { bottom: 26px; }.demo-stage { min-height: 175px; }.demo-stage img { left: 20%; }.demo-result p { width: calc(100% - 40px); }.learning-mode { grid-template-columns: 108px 1fr; }.mode-copy { padding: 20px 14px; }.mode-copy p { line-height: 1.45; }.mode-meta { margin-bottom: 15px; font-size: 9px; }.mode-sun { left: 17px; }.mode-step-one { right: 61px; }.mode-step-two { right: 29px; }.mode-step-three { right: 9px; }.mode-lab-circle { left: 12px; }.mode-lab-block.lab-block-one { left: 5px; }.mode-lab-block.lab-block-two { right: 5px; }.mode-lab-block.lab-block-three { right: 28px; }.home-final-cta h2 { font-size: 26px; }.final-actions .button { flex: none; width: 100%; }
}