:root {



  color-scheme: light;



  --bg: #f6f8fb;



  --surface: #ffffff;



  --surface-strong: #eef4ff;



  --ink: #101828;



  --muted: #64748b;



  --line: #dbe4f0;



  --brand: #0f6bff;



  --brand-strong: #083ed8;



  --accent: #17c3b2;



  --success: #0f9f6e;



  --warning: #ffb020;



  --shadow: 0 24px 70px rgba(15, 23, 42, 0.14);



  --radius: 8px;



  --max: 1180px;



}







* {



  box-sizing: border-box;



}







[hidden] {



  display: none !important;



}







html {



  scroll-behavior: smooth;



}







body {



  margin: 0;



  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;



  color: var(--ink);



  background: var(--bg);



}







body.modal-open {



  overflow: hidden;



}







a {



  color: inherit;



  text-decoration: none;



}







button,



summary {



  font: inherit;



}







.site-header {



  position: sticky;



  top: 0;



  z-index: 30;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 24px;



  padding: 16px max(24px, calc((100vw - var(--max)) / 2));



  background: rgba(255, 255, 255, 0.86);



  border-bottom: 1px solid rgba(219, 228, 240, 0.8);



  backdrop-filter: blur(18px);



}







.brand {



  display: inline-flex;



  align-items: center;



  gap: 12px;



  min-width: max-content;



}







.brand-mark {



  display: grid;



  place-items: center;



  width: 42px;



  height: 42px;



  color: #fff;



  font-weight: 800;



  letter-spacing: 0;



  background: linear-gradient(135deg, var(--brand), var(--accent));



  border-radius: var(--radius);



  box-shadow: 0 12px 28px rgba(15, 107, 255, 0.25);



}







.brand strong,



.brand small {



  display: block;



}







.brand small {



  margin-top: 2px;



  color: var(--muted);



  font-size: 12px;



  font-weight: 600;



}







.main-nav {



  display: flex;



  align-items: center;



  gap: 24px;



  color: #334155;



  font-size: 14px;



  font-weight: 700;



}







.main-nav a {



  padding: 10px 0;



}







.main-nav a:hover,



.logout-button:hover {



  color: var(--brand);



}







.logout-button {



  padding: 10px 0;



  color: #334155;



  font: inherit;



  font-size: 14px;



  font-weight: 700;



  background: transparent;



  border: 0;



  cursor: pointer;



}







.nav-toggle {



  display: none;



  width: 42px;



  height: 42px;



  padding: 0;



  background: var(--surface);



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.nav-toggle span {



  display: block;



  width: 18px;



  height: 2px;



  margin: 4px auto;



  background: var(--ink);



}







.hero {



  position: relative;



  display: grid;



  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.8fr);



  align-items: center;



  gap: 46px;



  min-height: 760px;



  padding: 76px max(24px, calc((100vw - var(--max)) / 2)) 86px;



  overflow: hidden;



  background:



    radial-gradient(circle at 85% 15%, rgba(23, 195, 178, 0.18), transparent 32%),



    linear-gradient(135deg, #f8fbff 0%, #edf5ff 46%, #f7fbff 100%);



}







.hero-bg {



  position: absolute;



  inset: 0;



  pointer-events: none;



}







.scan-grid {



  position: absolute;



  inset: 0;



  opacity: 0.42;



  background-image:



    linear-gradient(rgba(15, 107, 255, 0.08) 1px, transparent 1px),



    linear-gradient(90deg, rgba(15, 107, 255, 0.08) 1px, transparent 1px);



  background-size: 48px 48px;



  mask-image: linear-gradient(to bottom, #000, transparent 90%);



}







.tracking-point {



  position: absolute;



  width: 12px;



  height: 12px;



  border: 2px solid var(--accent);



  border-radius: 50%;



  box-shadow: 0 0 0 8px rgba(23, 195, 178, 0.1);



  animation: pulse 2.8s ease-in-out infinite;



}







.point-a {



  top: 18%;



  left: 9%;



}







.point-b {



  top: 34%;



  right: 14%;



  animation-delay: 0.6s;



}







.point-c {



  bottom: 22%;



  left: 46%;



  animation-delay: 1.2s;



}







.hero-copy,



.hero-visual {



  position: relative;



  z-index: 1;



}







.eyebrow {



  margin: 0 0 14px;



  color: var(--brand);



  font-size: 12px;



  font-weight: 800;



  letter-spacing: 0.12em;



  text-transform: uppercase;



}







h1,



h2,



h3,



h4,



p {



  margin-top: 0;



}







h1 {



  max-width: 820px;



  margin-bottom: 22px;



  font-size: clamp(42px, 6vw, 78px);



  line-height: 0.96;



  letter-spacing: -0.04em;



}







h2 {



  margin-bottom: 16px;



  font-size: clamp(32px, 4vw, 52px);



  line-height: 1.02;



  letter-spacing: -0.035em;



}







h3 {



  margin-bottom: 10px;



  font-size: 23px;



  line-height: 1.12;



  letter-spacing: -0.02em;



}







.hero-lead,



.section-heading p,



.split > div:first-child + div,



.price-card p,



.gateway-card p,



.faq p,



.site-footer p {



  color: var(--muted);



}







.hero-lead {



  max-width: 660px;



  margin-bottom: 32px;



  font-size: 19px;



  line-height: 1.7;



}







.hero-actions {



  display: flex;



  flex-wrap: wrap;



  gap: 14px;



  margin-bottom: 38px;



}







.button {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  min-height: 48px;



  padding: 0 20px;



  color: var(--brand);



  font-weight: 800;



  background: #fff;



  border: 1px solid rgba(15, 107, 255, 0.22);



  border-radius: var(--radius);



  cursor: pointer;



  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;



}







.button:hover {



  transform: translateY(-2px);



  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);



}







.button.primary {



  color: #fff;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  border-color: transparent;



}







.button.ghost {



  color: #1e293b;



  background: rgba(255, 255, 255, 0.72);



}







.hero-stats {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 12px;



  max-width: 690px;



  margin: 0;



}







.hero-stats div {



  padding: 18px;



  background: rgba(255, 255, 255, 0.72);



  border: 1px solid rgba(219, 228, 240, 0.9);



  border-radius: var(--radius);



}







.hero-stats dt {



  margin-bottom: 6px;



  font-weight: 800;



}







.hero-stats dd {



  margin: 0;



  color: var(--muted);



  font-size: 13px;



}







.device-shell {



  width: min(100%, 430px);



  margin-left: auto;



  padding: 14px;



  background: #111827;



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: 34px;



  box-shadow: var(--shadow);



}







.device-top {



  display: flex;



  justify-content: center;



  gap: 8px;



  padding: 6px 0 14px;



}







.device-top span {



  display: block;



  height: 6px;



  background: #334155;



  border-radius: 999px;



}







.device-top span:first-child {



  width: 46px;



}







.device-top span:last-child {



  width: 6px;



}







.camera-feed {



  position: relative;



  min-height: 560px;



  overflow: hidden;



  background:



    linear-gradient(rgba(23, 195, 178, 0.18) 1px, transparent 1px),



    linear-gradient(90deg, rgba(23, 195, 178, 0.18) 1px, transparent 1px),



    linear-gradient(150deg, #0b1220, #13233a 55%, #0f172a);



  background-size: 26px 26px, 26px 26px, auto;



  border-radius: 24px;



}







.camera-feed::after {



  position: absolute;



  inset: 0;



  content: "";



  background: linear-gradient(transparent 0%, rgba(23, 195, 178, 0.2) 48%, transparent 54%);



  animation: scan 3.6s linear infinite;



}







.marker-card {



  position: absolute;



  left: 50%;



  bottom: 80px;



  width: 245px;



  height: 165px;



  transform: translateX(-50%) rotateX(62deg) rotateZ(-7deg);



  background:



    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(230, 242, 255, 0.96)),



    repeating-linear-gradient(45deg, transparent 0 12px, rgba(15, 107, 255, 0.08) 12px 18px);



  border: 1px solid rgba(255, 255, 255, 0.6);



  border-radius: var(--radius);



  box-shadow: 0 24px 34px rgba(0, 0, 0, 0.28);



}







.marker-code {



  position: absolute;



  right: 20px;



  bottom: 18px;



  color: #0f172a;



  font-size: 16px;



  font-weight: 900;



}







.marker-corner {



  position: absolute;



  width: 34px;



  height: 34px;



  border-color: var(--brand);



  border-style: solid;



}







.top-left {



  top: 18px;



  left: 18px;



  border-width: 4px 0 0 4px;



}







.top-right {



  top: 18px;



  right: 18px;



  border-width: 4px 4px 0 0;



}







.bottom-left {



  bottom: 18px;



  left: 18px;



  border-width: 0 0 4px 4px;



}







.bottom-right {



  right: 18px;



  bottom: 18px;



  border-width: 0 4px 4px 0;



}







.cube {



  position: absolute;



  left: 50%;



  bottom: 258px;



  width: 112px;



  height: 112px;



  transform: translateX(-50%) rotateX(-18deg) rotateY(34deg);



  transform-style: preserve-3d;



  animation: float 3.8s ease-in-out infinite;



}







.cube-face {



  position: absolute;



  display: block;



  width: 112px;



  height: 112px;



  border: 1px solid rgba(255, 255, 255, 0.42);



}







.cube-face.front {



  background: rgba(15, 107, 255, 0.72);



  transform: translateZ(56px);



}







.cube-face.top {



  background: rgba(23, 195, 178, 0.68);



  transform: rotateX(90deg) translateZ(56px);



}







.cube-face.side {



  background: rgba(255, 176, 32, 0.72);



  transform: rotateY(90deg) translateZ(56px);



}







.target-label {



  position: absolute;



  top: 30px;



  left: 28px;



  display: grid;



  gap: 4px;



  padding: 12px 14px;



  color: #e2e8f0;



  background: rgba(15, 23, 42, 0.82);



  border: 1px solid rgba(255, 255, 255, 0.12);



  border-radius: var(--radius);



}







.target-label strong {



  color: #fff;



}







.target-label span {



  color: #9ee8df;



  font-size: 12px;



  font-weight: 700;



}







.trust-strip {



  display: grid;



  grid-template-columns: repeat(6, minmax(0, 1fr));



  gap: 1px;



  max-width: var(--max);



  margin: -38px auto 0;



  padding: 0 24px;



  position: relative;



  z-index: 2;



}







.trust-strip span {



  display: grid;



  min-height: 76px;



  place-items: center;



  color: #334155;



  font-weight: 800;



  background: rgba(255, 255, 255, 0.94);



  border: 1px solid var(--line);



}







.section {



  max-width: var(--max);



  margin: 0 auto;



  padding: 112px 24px 0;



}







.section-heading {



  max-width: 760px;



  margin-bottom: 34px;



}







.section-heading p {



  font-size: 17px;



  line-height: 1.7;



}







.split {



  display: grid;



  grid-template-columns: 0.82fr 1.18fr;



  gap: 60px;



}







.method-grid,



.deliverable-grid,



.pricing-grid,



.capstone-grid,



.course-map,



.lesson-grid {



  display: grid;



  gap: 16px;



}







.method-grid {



  grid-template-columns: repeat(3, minmax(0, 1fr));



}







.method-grid article,



.deliverable-grid article,



.price-card,



.gateway-card,



.module-panel,



.course-map article,



.lesson-card,



.project-brief,



.faq-list details {



  background: var(--surface);



  border: 1px solid var(--line);



  border-radius: var(--radius);



  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);



}







.method-grid article,



.deliverable-grid article,



.price-card,



.gateway-card,



.course-map article {



  padding: 24px;



}







.method-grid span {



  display: inline-grid;



  place-items: center;



  width: 40px;



  height: 40px;



  margin-bottom: 20px;



  color: var(--brand);



  font-weight: 900;



  background: var(--surface-strong);



  border-radius: var(--radius);



}







.method-grid p,



.deliverable-grid p,



.lesson-list p,



.capstone-grid p,



.capstone-grid li,



.lesson-card p,



.lesson-card li,



.project-brief p,



.project-brief li {



  color: var(--muted);



  line-height: 1.65;



}







.program-layout {



  display: grid;



  grid-template-columns: 275px minmax(0, 1fr);



  gap: 18px;



  align-items: start;



}







.module-tabs {



  position: sticky;



  top: 92px;



  display: grid;



  gap: 10px;



}







.module-tab {



  width: 100%;



  padding: 18px;



  color: #334155;



  text-align: left;



  background: #fff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



  cursor: pointer;



}







.module-tab span {



  display: block;



  margin-bottom: 6px;



  color: var(--brand);



  font-size: 12px;



  font-weight: 900;



  text-transform: uppercase;



}







.module-tab.active {



  color: #fff;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  border-color: transparent;



  box-shadow: 0 18px 42px rgba(15, 107, 255, 0.25);



}







.module-tab.active span {



  color: #bdefff;



}







.module-panel {



  display: none;



  padding: 28px;



}







.module-panel.active {



  display: block;



}







.module-header {



  display: flex;



  gap: 18px;



  align-items: flex-start;



  margin-bottom: 26px;



}







.module-number {



  display: grid;



  flex: 0 0 58px;



  height: 58px;



  place-items: center;



  color: #fff;



  font-weight: 900;



  background: #101828;



  border-radius: var(--radius);



}







.module-header p {



  color: var(--muted);



  line-height: 1.65;



}







.lesson-list {



  display: grid;



  gap: 10px;



}







.lesson-list details,



.faq-list details {



  padding: 18px 20px;



  background: #f8fbff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.lesson-list summary,



.faq-list summary {



  color: #172033;



  font-weight: 800;



  cursor: pointer;



}







.lesson-list p,



.faq-list p {



  margin: 12px 0 0;



}







.code-preview {



  margin-top: 24px;



  overflow: hidden;



  color: #dce9ff;



  background: #0b1220;



  border-radius: var(--radius);



}







.code-preview.compact {



  margin-top: 0;



}







.code-head {



  display: flex;



  justify-content: space-between;



  gap: 16px;



  padding: 14px 16px;



  color: #fff;



  background: #111b2d;



  border-bottom: 1px solid rgba(255, 255, 255, 0.08);



}







.code-head small {



  color: #8fb4ff;



  font-weight: 800;



}







pre {



  margin: 0;



  overflow-x: auto;



  padding: 20px;



  font-size: 13px;



  line-height: 1.65;



}







.deliverable-grid {



  grid-template-columns: repeat(4, minmax(0, 1fr));



}







.classroom {



  scroll-margin-top: 80px;



}







.course-map {



  grid-template-columns: repeat(4, minmax(0, 1fr));



  margin-bottom: 22px;



}







.course-map strong,



.course-map span {



  display: block;



}







.course-map strong {



  margin-bottom: 8px;



  font-size: 14px;



}







.course-map span {



  color: var(--muted);



  line-height: 1.55;



}







.public-hidden {



  display: none !important;



}







.locked-preview {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  align-items: center;



  gap: 24px;



  padding: 30px;



  background:



    radial-gradient(circle at 0% 0%, rgba(15, 107, 255, 0.12), transparent 34%),



    linear-gradient(135deg, #ffffff, #f8fbff);



  border: 1px solid var(--line);



  border-radius: var(--radius);



  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);



}







.locked-preview p {



  color: var(--muted);



  line-height: 1.65;



}







.locked-actions {



  display: flex;



  flex-wrap: wrap;



  gap: 12px;



  justify-content: flex-end;



}







.lesson-stack {



  display: grid;



  gap: 16px;



}







.lesson-card {



  padding: 28px;



}







.lesson-card-head {



  display: flex;



  align-items: flex-start;



  justify-content: space-between;



  gap: 18px;



  margin-bottom: 22px;



  border-bottom: 1px solid var(--line);



  padding-bottom: 18px;



}







.lesson-card-head span {



  flex: 0 0 auto;



  padding: 8px 12px;



  color: #fff;



  font-size: 12px;



  font-weight: 900;



  text-transform: uppercase;



  background: linear-gradient(135deg, var(--brand), var(--accent));



  border-radius: 999px;



}







.lesson-card-head h3 {



  flex: 1;



  margin: 0;



}







.lesson-grid {



  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);



}







.lesson-card h4,



.project-brief h4 {



  margin: 18px 0 8px;



  color: #172033;



  font-size: 15px;



  letter-spacing: 0;



}







.lesson-card h4:first-child,



.project-brief h4:first-child {



  margin-top: 0;



}







.lesson-card ul,



.lesson-card ol,



.project-brief ul {



  margin: 0;



  padding-left: 20px;



}







.practice-box,



.lesson-task,



.rubric {



  background: #f8fbff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.practice-box,



.rubric {



  padding: 20px;



}







.lesson-task {



  margin-top: 18px;



  padding: 16px 18px;



  color: #334155;



  line-height: 1.65;



}







.project-brief {



  display: grid;



  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);



  gap: 22px;



  margin-top: 24px;



  padding: 30px;



  background:



    radial-gradient(circle at 100% 0%, rgba(23, 195, 178, 0.14), transparent 34%),



    #ffffff;



}







.project-brief h3 {



  font-size: 34px;



}







.pricing-grid {



  grid-template-columns: repeat(3, minmax(0, 1fr));



  align-items: stretch;



}







.price-card {



  display: flex;



  flex-direction: column;



}







.price-card.featured {



  color: #fff;



  background: linear-gradient(145deg, #0b1220, #123769 72%, #0f6bff);



  border-color: transparent;



  transform: translateY(-12px);



  box-shadow: 0 26px 80px rgba(15, 107, 255, 0.26);



}







.price-card.featured p,



.price-card.featured li {



  color: #dbeafe;



}







.plan-label {



  color: var(--brand);



  font-size: 12px;



  font-weight: 900;



  text-transform: uppercase;



}







.price-card h3 {



  font-size: 38px;



}







.price-card ul,



.capstone-grid ul {



  padding-left: 18px;



}







.price-card li {



  margin: 10px 0;



  color: #475569;



}







.price-card .button {



  width: 100%;



  margin-top: auto;



}







.gateway-card {



  background: #f8fbff;



}







.gateway-list {



  display: flex;



  flex-wrap: wrap;



  gap: 10px;



  margin: 22px 0;



}







.gateway-list span {



  padding: 10px 12px;



  color: #17324d;



  font-size: 13px;



  font-weight: 800;



  background: #fff;



  border: 1px solid var(--line);



  border-radius: 999px;



}







.note {



  font-size: 13px;



}







.faq {



  padding-bottom: 112px;



}







.faq-list {



  display: grid;



  gap: 12px;



  max-width: 860px;



}







.checkout-modal {



  position: fixed;



  inset: 0;



  z-index: 80;



  display: none;



  align-items: center;



  justify-content: center;



  padding: 24px;



}







.checkout-modal.active {



  display: flex;



}







.modal-backdrop {



  position: absolute;



  inset: 0;



  background: rgba(15, 23, 42, 0.62);



  backdrop-filter: blur(8px);



}







.modal-panel {



  position: relative;



  z-index: 1;



  width: min(100%, 560px);



  padding: 30px;



  background: #fff;



  border-radius: var(--radius);



  box-shadow: var(--shadow);



}







.modal-close {



  position: absolute;



  top: 14px;



  right: 14px;



  width: 36px;



  height: 36px;



  color: #334155;



  font-size: 24px;



  background: #f1f5f9;



  border: 0;



  border-radius: var(--radius);



  cursor: pointer;



}







.selected-plan {



  color: var(--muted);



}







.gateway-options {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 12px;



  margin-top: 22px;



}







.gateway-option {



  display: grid;



  gap: 4px;



  padding: 18px;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.gateway-option:hover {



  border-color: var(--brand);



  box-shadow: 0 16px 36px rgba(15, 107, 255, 0.12);



}







.gateway-option span {



  color: var(--muted);



  font-size: 13px;



}







.modal-help {



  margin: 20px 0 0;



  color: var(--muted);



  font-size: 13px;



}







.modal-course-link {



  width: 100%;



  margin-top: 18px;



}







.course-body {



  min-height: 100vh;



  background:



    radial-gradient(circle at 82% 12%, rgba(23, 195, 178, 0.16), transparent 30%),



    linear-gradient(135deg, #f6f8fb, #edf5ff);



}







.access-gate {



  display: grid;



  min-height: calc(100vh - 75px);



  place-items: center;



  padding: 56px 24px;



}







.access-panel {



  width: min(100%, 760px);



  padding: 42px;



  background: rgba(255, 255, 255, 0.94);



  border: 1px solid var(--line);



  border-radius: var(--radius);



  box-shadow: var(--shadow);



}







.access-panel h1 {



  margin-bottom: 18px;



  font-size: clamp(38px, 5vw, 62px);



}







.access-panel p {



  color: var(--muted);



  line-height: 1.7;



}







.access-form {



  display: grid;



  gap: 10px;



  margin-top: 26px;



}







.access-form label {



  color: #172033;



  font-weight: 800;



}







.access-form > div {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  gap: 10px;



}







.access-form input {



  width: 100%;



  min-height: 50px;



  padding: 0 14px;



  color: var(--ink);



  font: inherit;



  background: #fff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



  outline: none;



}







.access-form input:focus {



  border-color: var(--brand);



  box-shadow: 0 0 0 4px rgba(15, 107, 255, 0.12);



}







.access-error {



  min-height: 22px;



  margin: 0;



  color: #b42318 !important;



  font-weight: 700;



}







.access-note {



  margin-top: 18px;



  padding: 16px;



  color: #334155;



  line-height: 1.6;



  background: #f8fbff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.private-course {



  display: grid;



  grid-template-columns: 320px minmax(0, 1fr);



  gap: 26px;



  max-width: 1380px;



  margin: 0 auto;



  padding: 34px 24px 82px;



}







.course-sidebar {



  position: sticky;



  top: 96px;



  align-self: start;



  display: grid;



  gap: 9px;



  padding: 20px;



  background: rgba(255, 255, 255, 0.94);



  border: 1px solid var(--line);



  border-radius: var(--radius);



  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);



}







.course-sidebar h2 {



  font-size: 28px;



}







.course-tab {



  width: 100%;



  padding: 13px 14px;



  color: #334155;



  text-align: left;



  font-weight: 800;



  background: #f8fbff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



  cursor: pointer;



}







.course-tab.active {



  color: #fff;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  border-color: transparent;



}







.course-content {



  min-width: 0;



}







.course-lesson {



  display: none;



  padding: 38px;



  background: rgba(255, 255, 255, 0.96);



  border: 1px solid var(--line);



  border-radius: var(--radius);



  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.08);



}







.course-lesson.active {



  display: block;



}







.course-lesson h1 {



  max-width: 900px;



  margin-bottom: 18px;



  font-size: clamp(36px, 5vw, 64px);



}







.lesson-intro {



  max-width: 900px;



  margin-bottom: 30px;



  color: var(--muted);



  font-size: 18px;



  line-height: 1.75;



}







.learning-grid {



  display: grid;



  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);



  gap: 18px;



}







.lesson-section {



  margin-top: 30px;



  padding-top: 24px;



  border-top: 1px solid var(--line);



}







.lesson-section:first-of-type {



  margin-top: 0;



}







.lesson-section h3,



.learning-grid h3 {



  margin-bottom: 12px;



}







.lesson-section p,



.lesson-section li,



.learning-grid p,



.learning-grid li {



  color: var(--muted);



  line-height: 1.7;



}







.lesson-section ol,



.lesson-section ul,



.learning-grid ul {



  padding-left: 22px;



}







.checklist-table {



  display: grid;



  overflow: hidden;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.checklist-table > div {



  display: grid;



  grid-template-columns: 1fr 1fr 1.2fr;



}







.checklist-table > div:first-child {



  color: #fff;



  background: #101828;



}







.checklist-table strong,



.checklist-table span {



  padding: 12px;



  border-right: 1px solid var(--line);



}







.checklist-table span {



  color: var(--muted);



  background: #fff;



  border-top: 1px solid var(--line);



}







.course-lesson .lesson-task label {



  display: flex;



  gap: 10px;



  align-items: flex-start;



}







.course-lesson .lesson-task input {



  width: 18px;



  height: 18px;



  margin-top: 4px;



}







.term-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 12px;



  margin: 18px 0;



}







.term-grid article {



  padding: 16px;



  background: #f8fbff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.term-grid strong,



.term-grid span {



  display: block;



}







.term-grid strong {



  margin-bottom: 6px;



  color: #172033;



}







.term-grid span {



  color: var(--muted);



  line-height: 1.6;



}







.video-lesson {



  display: grid;



  gap: 14px;



  margin-top: 20px;



  padding: 16px;



  background: #f8fbff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.video-lesson strong,



.video-lesson span {



  display: block;



}







.video-lesson strong {



  margin-bottom: 4px;



}







.video-lesson span {



  color: var(--muted);



  line-height: 1.55;



}







.video-lesson video {



  width: 100%;



  max-height: 520px;



  background: #0b1220;



  border-radius: var(--radius);



}







.line-note {



  margin: 14px 0;



  padding: 12px 14px;



  color: #17324d !important;



  font-weight: 700;



  line-height: 1.6;



  background: #eef4ff;



  border-left: 4px solid var(--brand);



  border-radius: var(--radius);



}







.code-preview pre {



  padding: 0;



}







.numbered-code {



  display: block;



  min-width: max-content;



  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;



}







.code-line {



  display: grid;



  grid-template-columns: 54px minmax(0, 1fr);



}







.code-line-number {



  padding: 0 12px;



  color: #7891b8;



  text-align: right;



  user-select: none;



  background: rgba(255, 255, 255, 0.04);



  border-right: 1px solid rgba(255, 255, 255, 0.08);



}







.code-line-text {



  padding: 0 18px;



  white-space: pre;



}







.code-line.is-highlight .code-line-number {



  color: #f8fbff;



  background: rgba(23, 195, 178, 0.32);



}







.code-line.is-highlight .code-line-text {



  color: #ffffff;



  background: linear-gradient(90deg, rgba(23, 195, 178, 0.26), rgba(15, 107, 255, 0.14));



  box-shadow: inset 4px 0 0 var(--accent);



}







.code-line:first-child .code-line-number,



.code-line:first-child .code-line-text {



  padding-top: 18px;



}







.code-line:last-child .code-line-number,



.code-line:last-child .code-line-text {



  padding-bottom: 18px;



}







.marker-compiler {



  margin-top: 22px;



}







.compiler-panel {



  display: grid;



  gap: 18px;



  padding: 24px;



  background: linear-gradient(135deg, #ffffff, #f8fbff);



  border: 1px solid var(--line);



  border-radius: var(--radius);



  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);



}







.compiler-panel h4 {



  margin: 0 0 8px;



  font-size: 24px;



}







.compiler-panel p {



  color: var(--muted);



  line-height: 1.65;



}







.compiler-dropzone {



  display: grid;



  gap: 6px;



  padding: 20px;



  color: #17324d;



  background: #eef4ff;



  border: 1px dashed rgba(15, 107, 255, 0.45);



  border-radius: var(--radius);



  cursor: pointer;



}







.compiler-dropzone span {



  font-weight: 900;



}







.compiler-dropzone small {



  color: var(--muted);



}







.compiler-dropzone input {



  margin-top: 8px;



}







.compiler-preview {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));



  gap: 16px;



  min-height: 260px;



}







.compiler-preview p {



  margin: 0;



  padding: 16px;



  background: #fff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.compiler-preview figure {



  margin: 0;



  overflow: hidden;



  background: #fff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.compiler-preview img {



  display: block;



  width: 100%;



  height: 300px;



  object-fit: contain;



  background:



    linear-gradient(45deg, #eef4ff 25%, transparent 25%),



    linear-gradient(-45deg, #eef4ff 25%, transparent 25%),



    linear-gradient(45deg, transparent 75%, #eef4ff 75%),



    linear-gradient(-45deg, transparent 75%, #eef4ff 75%);



  background-color: #ffffff;



  background-position: 0 0, 0 10px, 10px -10px, -10px 0;



  background-size: 20px 20px;



}







.compiler-preview figcaption {



  padding: 10px;



  color: var(--muted);



  font-size: 12px;



  font-weight: 700;



  overflow-wrap: anywhere;



}







.compiler-actions {



  display: flex;



  flex-wrap: wrap;



  gap: 10px;



}







.compiler-actions .button {



  min-width: 170px;



}







.compiler-actions .button:disabled {



  color: #94a3b8;



  background: #e2e8f0;



  border-color: #dbe4f0;



  cursor: not-allowed;



  transform: none;



  box-shadow: none;



}







.compiler-status {



  padding: 13px 14px;



  color: #17324d;



  font-weight: 800;



  background: #eef4ff;



  border-radius: var(--radius);



}







.compiler-status.is-error {



  color: #b42318;



  background: #fff1f0;



}







.compiler-result {



  padding: 18px;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.compiler-result strong,



.compiler-result span {



  display: block;



}







.compiler-result strong {



  margin-bottom: 8px;



  font-size: 20px;



}







.compiler-result span {



  color: #334155;



  font-weight: 800;



}







.compiler-result p {



  margin: 8px 0 0;



}







.compiler-result.quality-poor {



  background: #fff1f0;



  border-color: #ffccc7;



}







.compiler-result.quality-ok {



  background: #fff7e6;



  border-color: #ffd591;



}







.compiler-result.quality-good {



  background: #f0fff4;



  border-color: #9ae6b4;



}







.compiler-result.quality-excellent {



  background: #eef4ff;



  border-color: #8fb4ff;



}







.marker-test-modal {



  position: fixed;



  inset: 0;



  z-index: 100;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 24px;



}







.marker-test-backdrop {



  position: absolute;



  inset: 0;



  background: rgba(15, 23, 42, 0.72);



  backdrop-filter: blur(8px);



}







.marker-test-panel {



  position: relative;



  z-index: 1;



  width: min(100%, 980px);



  padding: 22px;



  background: #fff;



  border-radius: var(--radius);



  box-shadow: var(--shadow);



}







.marker-test-header {



  display: flex;



  justify-content: space-between;



  gap: 16px;



  align-items: flex-start;



}







.marker-test-header h2 {



  margin-bottom: 8px;



  font-size: clamp(28px, 4vw, 46px);



}







.marker-test-help {



  color: var(--muted);



}







.marker-test-stage {



  height: min(72vh, 620px);



  overflow: hidden;



  background: #0b1220;



  border-radius: var(--radius);



}







.marker-test-stage a-scene,



.marker-test-frame {



  width: 100%;



  height: 100%;



}







.marker-test-frame {



  display: block;



  border: 0;



  background: #0b1220;



}







.marker-test-loading {



  display: grid;



  min-height: 100%;



  place-items: center;



  padding: 24px;



  color: #dbeafe;



  font-weight: 800;



  text-align: center;



}







.marker-test-loading.is-error {



  color: #fecaca;



}







.site-footer {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 24px;



  padding: 38px max(24px, calc((100vw - var(--max)) / 2));



  color: #dbeafe;



  background: #0b1220;



}







.site-footer p {



  max-width: 680px;



  margin: 8px 0 0;



}







@keyframes pulse {



  0%,



  100% {



    transform: scale(0.9);



    opacity: 0.62;



  }



  50% {



    transform: scale(1.16);



    opacity: 1;



  }



}







@keyframes scan {



  0% {



    transform: translateY(-100%);



  }



  100% {



    transform: translateY(100%);



  }



}







@keyframes float {



  0%,



  100% {



    transform: translateX(-50%) rotateX(-18deg) rotateY(34deg) translateY(0);



  }



  50% {



    transform: translateX(-50%) rotateX(-18deg) rotateY(34deg) translateY(-16px);



  }



}







@media (max-width: 980px) {



  .site-header {



    padding-inline: 20px;



  }







  .main-nav {



    position: absolute;



    top: 75px;



    right: 20px;



    display: none;



    width: min(280px, calc(100vw - 40px));



    padding: 16px;



    background: #fff;



    border: 1px solid var(--line);



    border-radius: var(--radius);



    box-shadow: var(--shadow);



  }







  .main-nav.open {



    display: grid;



  }







  .nav-toggle {



    display: block;



  }







  .hero,



  .split,



  .program-layout,



  .pricing-grid,



  .private-course,



  .learning-grid,



  .locked-preview {



    grid-template-columns: 1fr;



  }







  .hero {



    min-height: auto;



    padding-top: 58px;



  }







  .hero-visual {



    order: -1;



  }







  .device-shell {



    margin: 0 auto;



  }







  .method-grid,



  .deliverable-grid,



  .course-map,



  .trust-strip {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }







  .module-tabs {



    position: static;



    grid-template-columns: repeat(3, minmax(0, 1fr));



  }







  .course-sidebar {



    position: static;



  }







  .locked-actions {



    justify-content: flex-start;



  }







  .price-card.featured {



    transform: none;



  }



}







@media (max-width: 640px) {



  .hero {



    padding-inline: 18px;



  }







  h1 {



    font-size: 43px;



  }







  .hero-stats,



  .term-grid,



  .method-grid,



  .deliverable-grid,



  .course-map,



  .lesson-grid,



  .project-brief,



  .trust-strip,



  .module-tabs,



  .gateway-options {



    grid-template-columns: 1fr;



  }







  .camera-feed {



    min-height: 440px;



  }







  .marker-card {



    width: 205px;



    height: 140px;



  }







  .cube {



    bottom: 220px;



    transform: translateX(-50%) scale(0.82) rotateX(-18deg) rotateY(34deg);



  }







  .section {



    padding-top: 82px;



  }







  .module-panel,



  .lesson-card,



  .project-brief,



  .access-panel,



  .course-lesson,



  .modal-panel {



    padding: 20px;



  }







  .compiler-actions,



  .access-form > div,



  .checklist-table > div {



    grid-template-columns: 1fr;



  }







  .module-header {



    display: grid;



  }







  .lesson-card-head {



    display: grid;



  }







  .site-footer {



    display: grid;



  }



}

















.sr-only {



  position: absolute;



  width: 1px;



  height: 1px;



  padding: 0;



  margin: -1px;



  overflow: hidden;



  clip: rect(0, 0, 0, 0);



  white-space: nowrap;



  border: 0;



}







.model-term-grid {



  margin-top: 18px;



}







.model-resource-grid {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 14px;



}







.resource-card {



  display: grid;



  gap: 8px;



  min-height: 150px;



  padding: 18px;



  border: 1px solid var(--line);



  border-radius: var(--radius);



  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);



  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);



  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;



}







.resource-card:hover {



  transform: translateY(-2px);



  border-color: rgba(15, 107, 255, 0.32);



  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);



}







.resource-card span,



.model-format-pill {



  width: max-content;



  padding: 6px 10px;



  color: var(--brand);



  font-size: 11px;



  font-weight: 800;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  background: rgba(15, 107, 255, 0.09);



  border-radius: 999px;



}







.resource-card strong {



  font-size: 20px;



}







.resource-card small {



  color: var(--muted);



  line-height: 1.55;



}







.model-lab-heading {



  display: flex;



  align-items: flex-start;



  justify-content: space-between;



  gap: 18px;



  margin-bottom: 20px;



}







.model-lab-heading h3 {



  margin-bottom: 8px;



}







.model-lab-heading p {



  max-width: 780px;



  margin: 0;



  color: var(--muted);



  line-height: 1.65;



}







.model-viewer-shell {



  display: grid;



  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);



  min-height: 520px;



  overflow: hidden;



  border: 1px solid rgba(219, 228, 240, 0.9);



  border-radius: 14px;



  background: #ffffff;



  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);



}







.model-viewer-panel {



  display: grid;



  align-content: start;



  gap: 18px;



  padding: 22px;



  background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);



  border-right: 1px solid var(--line);



}







.model-upload-button {



  width: 100%;



  justify-content: center;



  text-align: center;



  cursor: pointer;



}







.model-samples {



  display: grid;



  gap: 9px;



}







.model-samples .eyebrow {



  margin: 0 0 2px;



}







.model-samples button,



.model-viewer-actions button {



  width: 100%;



  padding: 11px 12px;



  color: var(--ink);



  font-weight: 700;



  text-align: left;



  background: #ffffff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



  cursor: pointer;



  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;



}







.model-samples button:hover,



.model-viewer-actions button:hover,



.model-viewer-actions button.active {



  color: var(--brand);



  border-color: rgba(15, 107, 255, 0.36);



  transform: translateY(-1px);



}







.model-viewer-actions {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 10px;



}







.model-viewer-actions button {



  text-align: center;



}







.model-status-card {



  display: grid;



  gap: 8px;



  padding: 14px;



  color: var(--muted);



  background: #ffffff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.model-status-card strong {



  color: var(--ink);



  font-size: 14px;



  line-height: 1.45;



}







.model-status-card strong.is-error {



  color: #b42318;



}







.model-status-card small {



  line-height: 1.55;



}







.model-progress {



  height: 5px;



  overflow: hidden;



  background: #e9eff7;



  border-radius: 999px;



}







.model-progress span {



  display: block;



  width: 0;



  height: 100%;



  background: linear-gradient(90deg, var(--brand), var(--accent));



  border-radius: inherit;



  transition: width 180ms ease;



}







.model-stage {



  position: relative;



  min-height: 520px;



  background:



    radial-gradient(circle at 22% 16%, rgba(15, 107, 255, 0.16), transparent 32%),



    linear-gradient(145deg, #f8fbff 0%, #eaf1fb 100%);



}







.model-stage canvas {



  display: block;



  width: 100%;



  height: 100%;



  min-height: 520px;



}







.model-empty {



  position: absolute;



  inset: auto 24px 24px 24px;



  display: grid;



  gap: 4px;



  max-width: 360px;



  padding: 14px 16px;



  color: var(--muted);



  background: rgba(255, 255, 255, 0.88);



  border: 1px solid rgba(219, 228, 240, 0.9);



  border-radius: var(--radius);



  backdrop-filter: blur(14px);



  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);



}







.model-empty strong {



  color: var(--ink);



}







@media (max-width: 980px) {



  .model-resource-grid,



  .model-viewer-shell {



    grid-template-columns: 1fr;



  }







  .model-viewer-panel {



    border-right: 0;



    border-bottom: 1px solid var(--line);



  }







  .model-lab-heading {



    display: grid;



  }



}







@media (max-width: 640px) {



  .model-resource-grid {



    grid-template-columns: 1fr;



  }







  .model-viewer-shell,



  .model-stage,



  .model-stage canvas {



    min-height: 420px;



  }







  .model-viewer-actions {



    grid-template-columns: 1fr;



  }



}








.model-samples-help {



  margin: -2px 0 2px;



  color: var(--muted);



  font-size: 13px;



  line-height: 1.5;



}







.model-sample-card {



  display: grid;



  gap: 12px;



  padding: 13px;



  background: #ffffff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.model-sample-card > div:first-child {



  display: grid;



  gap: 4px;



}







.model-sample-card strong {



  color: var(--ink);



  font-size: 14px;



}







.model-sample-card span {



  color: var(--muted);



  font-size: 12px;



  line-height: 1.45;



}







.model-sample-actions {



  display: grid;



  grid-template-columns: 0.75fr 1fr;



  gap: 8px;



}







.model-sample-actions button,



.model-sample-actions a {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  min-height: 38px;



  padding: 9px 10px;



  font-size: 13px;



  font-weight: 800;



  border-radius: var(--radius);



  cursor: pointer;



  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;



}







.model-sample-actions button {



  color: var(--brand);



  background: rgba(15, 107, 255, 0.08);



  border: 1px solid rgba(15, 107, 255, 0.2);



}







.model-sample-actions a {



  color: #ffffff;



  background: var(--brand);



  border: 1px solid var(--brand);



}







.model-sample-actions button:hover,



.model-sample-actions a:hover {



  transform: translateY(-1px);



  border-color: var(--brand-strong);



}







.model-sample-actions a:hover {



  background: var(--brand-strong);



}







@media (max-width: 640px) {



  .model-sample-actions {



    grid-template-columns: 1fr;



  }



}








.model-download-link,



.model-sample-actions a {



  text-decoration: none;



}







.model-sample-actions a::before {



  content: "↓";



  margin-right: 7px;



  font-weight: 900;



}








/* Refuerzo visual: las acciones de cada modelo van apiladas para que Descargar GLB siempre sea visible. */



.model-sample-actions {



  grid-template-columns: 1fr !important;



}







.model-sample-actions button,



.model-sample-actions a {



  width: 100%;



}







.model-sample-actions a::before {



  content: "";



  margin-right: 0;



}








/* Acciones del visor 3D: colores diferenciados para lectura rápida. */



.model-sample-actions {



  grid-template-columns: 1fr !important;



  gap: 9px;



}







.model-sample-actions button {



  color: #0f4dcc !important;



  background: #eaf2ff !important;



  border: 1px solid #b8d2ff !important;



  box-shadow: none;



}







.model-sample-actions button:hover {



  color: #ffffff !important;



  background: #0f6bff !important;



  border-color: #0f6bff !important;



}







.model-sample-actions a {



  color: #ffffff !important;



  background: #0f9f6e !important;



  border: 1px solid #0f9f6e !important;



  text-decoration: none;



  box-shadow: 0 10px 22px rgba(15, 159, 110, 0.22);



}







.model-sample-actions a:hover {



  background: #087b55 !important;



  border-color: #087b55 !important;



}







.model-sample-actions a::before {



  content: "Descargar";



  position: absolute;



  width: 1px;



  height: 1px;



  overflow: hidden;



  clip: rect(0, 0, 0, 0);



}








.stacked-task {



  display: grid;



  gap: 10px;



}







.stacked-task label + label {



  padding-top: 10px;



  border-top: 1px solid rgba(219, 228, 240, 0.85);



}







.checklist-table a {



  color: var(--brand);



  font-weight: 800;



  text-decoration: underline;



  text-underline-offset: 3px;



}








/* Payment checkout additions */



.checkout-form {



  display: grid;



  gap: 12px;



  margin: 18px 0;



}







.checkout-form label {



  display: grid;



  gap: 6px;



  color: var(--muted);



  font-weight: 700;



}







.checkout-form input {



  width: 100%;



  border: 1px solid rgba(15, 23, 42, 0.16);



  border-radius: 12px;



  padding: 12px 14px;



  font: inherit;



}







.payment-feedback {



  min-height: 24px;



  color: var(--muted);



  line-height: 1.55;



}







.payment-feedback a {



  color: var(--brand);



  font-weight: 800;



}







.manual-payment-note {



  padding: 12px 14px;



  border-radius: 14px;



  background: rgba(15, 107, 255, 0.08);



  color: var(--text);



}








.payment-success-title {



  display: block;



  color: #0f6bff;



  font-weight: 800;



  font-size: 1.02rem;



  margin-bottom: 4px;



}







.payment-actions {



  display: flex;



  flex-wrap: wrap;



  gap: 10px;



  margin-top: 12px;



}







.payment-feedback .button {



  display: inline-flex;



  width: fit-content;



}







.admin-heading {



  align-items: flex-start;



  display: flex;



  gap: 18px;



  justify-content: space-between;



  margin-bottom: 20px;



}







.admin-login-panel .access-form {



  margin-top: 22px;



}







.admin-login-panel .access-form input {



  width: 100%;



}







.admin-orders-table a {



  color: #0f6bff;



  font-weight: 700;



}








.checkout-intro {



  color: #536076;



  line-height: 1.55;



  margin: 8px 0 18px;



}







.checkout-step-label {



  color: #0f6bff;



  font-size: 0.78rem;



  font-weight: 800;



  letter-spacing: 0.08em;



  margin: 18px 0 10px;



  text-transform: uppercase;



}







.gateway-option strong {



  display: block;



  margin-bottom: 4px;



}








.gateway-options {



  grid-template-columns: repeat(3, minmax(0, 1fr));



}







.gateway-option {



  color: var(--ink);



  cursor: pointer;



  text-align: left;



}







.gateway-option.active {



  border-color: var(--brand);



  background: #eef5ff;



  box-shadow: 0 16px 36px rgba(15, 107, 255, 0.16);



}







.checkout-submit {



  width: 100%;



  margin: 12px 0 8px;



}







.checkout-submit:disabled {



  color: #64748b;



  background: #e2e8f0;



  border-color: #cbd5e1;



  cursor: not-allowed;



  transform: none;



  box-shadow: none;



}







.payment-feedback {



  display: block;



  width: 100%;



}







.payment-result-card {



  display: grid;



  gap: 8px;



  padding: 14px;



  border: 1px solid rgba(15, 107, 255, 0.18);



  border-radius: 12px;



  background: #f8fbff;



}







.payment-actions .button {



  min-height: 42px;



  padding: 0 14px;



}







@media (max-width: 760px) {



  .gateway-options {



    grid-template-columns: 1fr;



  }



}








.checkout-modal.active {



  align-items: flex-start;



  overflow-y: auto;



  padding: 28px 18px;



}







.checkout-modal .modal-panel {



  max-height: calc(100vh - 56px);



  overflow-y: auto;



  overscroll-behavior: contain;



  scrollbar-gutter: stable;



}







.checkout-modal .modal-panel::-webkit-scrollbar {



  width: 10px;



}







.checkout-modal .modal-panel::-webkit-scrollbar-thumb {



  background: rgba(15, 107, 255, 0.28);



  border-radius: 999px;



}







.checkout-modal .modal-panel::-webkit-scrollbar-track {



  background: rgba(226, 232, 240, 0.75);



  border-radius: 999px;



}







@media (max-height: 760px) {



  .checkout-modal.active {



    padding: 14px 12px;



  }







  .checkout-modal .modal-panel {



    max-height: calc(100vh - 28px);



    padding-bottom: 24px;



  }



}








.course-outline-layout .module-panel {



  padding: 30px;



}







.outline-actions {



  display: flex;



  flex-wrap: wrap;



  gap: 12px;



  margin-top: 26px;



}







.updates-section .deliverable-grid article,



.student-access-grid article {



  background: #f8fbff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



  padding: 24px;



}







.student-access-grid {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 18px;



}







.student-access-grid article {



  display: grid;



  gap: 12px;



}







.student-access-grid p {



  color: var(--muted);



  line-height: 1.6;



}







.student-access-grid .button {



  width: 100%;



}







@media (max-width: 900px) {



  .course-topic-list,



  .student-access-grid {



    grid-template-columns: 1fr;



  }



}








.course-topic-list {



  counter-reset: course-topic;



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 12px;



  margin: 26px 0 0;



  padding: 0;



  list-style: none;



}







.course-topic-list li {



  counter-increment: course-topic;



  display: grid;



  grid-template-columns: 44px minmax(0, 1fr);



  align-items: start;



  gap: 12px;



  min-height: 58px;



  padding: 13px 14px;



  color: #243047;



  line-height: 1.45;



  background: #f8fbff;



  border: 1px solid rgba(15, 107, 255, 0.12);



  border-radius: 12px;



}







.course-topic-list li::before {



  content: counter(course-topic, decimal-leading-zero);



  display: inline-grid;



  place-items: center;



  width: 38px;



  height: 38px;



  color: #ffffff;



  font-size: 0.78rem;



  font-weight: 900;



  background: linear-gradient(135deg, var(--brand), var(--brand-strong));



  border-radius: 999px;



  box-shadow: 0 10px 22px rgba(15, 107, 255, 0.2);



}







.course-topic-list li:nth-child(odd) {



  background: #ffffff;



}







.course-topic-list li:hover {



  border-color: rgba(15, 107, 255, 0.35);



  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);



  transform: translateY(-1px);



}







@media (max-width: 900px) {



  .course-topic-list {



    grid-template-columns: 1fr;



  }



}








/* Academy index and specialized course identities */



.academy-home .brand-mark,



.academy-home .button.primary {



  background: linear-gradient(135deg, #0f6bff, #13c2ff);



}







.academy-hero .hero-lead {



  max-width: 680px;



}







.academy-device .camera-feed {



  background: linear-gradient(145deg, #07111f, #0f2748 60%, #092b3a);



}







.academy-orbit-card {



  position: absolute;



  display: grid;



  place-items: center;



  min-width: 86px;



  min-height: 52px;



  padding: 10px 12px;



  color: #fff;



  font-weight: 900;



  border: 1px solid rgba(255,255,255,0.26);



  border-radius: 14px;



  background: rgba(15, 107, 255, 0.72);



  box-shadow: 0 22px 50px rgba(0,0,0,0.28);



}







.academy-orbit-card.main-card { left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 1.3rem; }



.academy-orbit-card.card-a { left: 12%; top: 18%; background: rgba(16, 185, 129, 0.78); }



.academy-orbit-card.card-b { right: 12%; top: 24%; background: rgba(245, 158, 11, 0.78); }



.academy-orbit-card.card-c { left: 24%; bottom: 18%; background: rgba(99, 102, 241, 0.78); }







.academy-course-grid {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 18px;



}







.featured-courses {



  grid-template-columns: repeat(2, minmax(0, 1fr));



}







.academy-course-card {



  display: grid;



  gap: 14px;



  padding: 24px;



  background: #f8fbff;



  border: 1px solid var(--line);



  border-radius: var(--radius);



}







.academy-course-card.is-live {



  background: #fff;



  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);



}







.academy-course-card.marketing-card {



  border-color: rgba(16, 185, 129, 0.3);



  background: linear-gradient(180deg, #ffffff, #f0fdf4);



}







.academy-course-card.webar-card {



  border-color: rgba(15, 107, 255, 0.28);



}







.academy-course-card h3 {



  font-size: 1.25rem;



}







.academy-course-card p,



.academy-course-card li {



  color: var(--muted);



  line-height: 1.6;



}







.academy-course-card ul {



  margin: 0;



  padding-left: 18px;



}







.course-status {



  width: max-content;



  padding: 6px 10px;



  color: #065f46;



  font-size: 0.75rem;



  font-weight: 900;



  letter-spacing: 0.06em;



  text-transform: uppercase;



  background: #d1fae5;



  border-radius: 999px;



}







.course-status.soon {



  color: #475569;



  background: #e2e8f0;



}







.marketing-landing,



.marketing-course-body {



  --brand: #10b981;



  --brand-strong: #047857;



  --accent: #f59e0b;



}







.marketing-landing .brand-mark,



.marketing-course-body .brand-mark,



.marketing-landing .button.primary,



.marketing-course-body .button.primary {



  background: linear-gradient(135deg, #10b981, #047857);



}







.marketing-landing .hero-bg,



.marketing-course-body .access-gate {



  background: radial-gradient(circle at 15% 20%, rgba(16, 185, 129, 0.22), transparent 28%), radial-gradient(circle at 80% 12%, rgba(245, 158, 11, 0.2), transparent 26%), #f8fafc;



}







.marketing-landing .device-shell,



.marketing-landing .price-card.featured {



  border-color: rgba(16, 185, 129, 0.32);



}







.marketing-landing .price-card.featured {



  background: linear-gradient(145deg, #06281d, #065f46 70%, #10b981);



}







.marketing-mark {



  font-size: 0.82rem;



}







@media (max-width: 980px) {



  .academy-course-grid,



  .featured-courses {



    grid-template-columns: 1fr;



  }



}








/* Marketing course polish and compiler compatibility */



.marketing-course-body .course-sidebar {



  max-height: calc(100vh - 120px);



  overflow: auto;



}







.marketing-course-body .course-sidebar::-webkit-scrollbar {



  width: 8px;



}







.marketing-course-body .course-sidebar::-webkit-scrollbar-thumb {



  background: rgba(16, 185, 129, 0.28);



  border-radius: 999px;



}







.marketing-course-body .course-lesson > h2 {



  max-width: 900px;



  margin-bottom: 18px;



  font-size: clamp(34px, 4vw, 56px);



  line-height: 0.98;



}







.marketing-course-body .course-lesson > p:not(.eyebrow) {



  max-width: 920px;



  color: var(--muted);



  font-size: 17px;



  line-height: 1.7;



}







.compiler-tool {



  display: grid;



  gap: 18px;



  margin: 28px 0;



  padding: 24px;



  background: linear-gradient(135deg, #ffffff, #f0fdf4);



  border: 1px solid rgba(16, 185, 129, 0.22);



  border-radius: var(--radius);



  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);



}







.section-heading.compact {



  margin-bottom: 0;



}







.section-heading.compact h3 {



  margin: 4px 0 8px;



  font-size: clamp(24px, 3vw, 34px);



}







.compiler-layout {



  display: grid;



  grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr);



  gap: 18px;



  align-items: start;



}







.compiler-controls {



  display: grid;



  gap: 14px;



  min-width: 0;



}







.file-drop {



  display: grid;



  gap: 12px;



  padding: 18px;



  color: #064e3b;



  font-weight: 900;



  background: #ecfdf5;



  border: 1px dashed rgba(16, 185, 129, 0.55);



  border-radius: var(--radius);



  cursor: pointer;



}







.file-drop input {



  width: 100%;



  min-height: 44px;



  padding: 8px;



  color: #334155;



  font: inherit;



  font-weight: 700;



  background: #ffffff;



  border: 1px solid rgba(16, 185, 129, 0.22);



  border-radius: 12px;



}







.file-drop input::file-selector-button {



  margin-right: 12px;



  padding: 10px 14px;



  color: #ffffff;



  font-weight: 900;



  background: linear-gradient(135deg, #10b981, #047857);



  border: 0;



  border-radius: 10px;



  cursor: pointer;



}







.compiler-tool .compiler-preview {



  min-height: 360px;



  padding: 14px;



  background: #ffffff;



  border: 1px solid rgba(16, 185, 129, 0.18);



  border-radius: var(--radius);



}







.compiler-tool .compiler-preview p {



  display: grid;



  min-height: 320px;



  place-items: center;



  color: #64748b;



  text-align: center;



  background: #f8fafc;



  border-style: dashed;



}







.compiler-tool .compiler-preview img {



  height: 420px;



}







.compiler-tool .compiler-actions {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 10px;



}







.compiler-tool .compiler-actions .button {



  width: 100%;



  min-width: 0;



  justify-content: center;



}







.marker-test-modal[hidden] {



  display: none !important;



}







.marker-test-panel .modal-close {



  position: absolute;



  top: 14px;



  right: 14px;



  width: 42px;



  height: 42px;



  color: #0f172a;



  font-size: 28px;



  font-weight: 800;



  line-height: 1;



  background: #eef4ff;



  border: 0;



  border-radius: 12px;



  cursor: pointer;



}







@media (max-width: 980px) {



  .compiler-layout,



  .compiler-tool .compiler-actions {



    grid-template-columns: 1fr;



  }







  .compiler-tool .compiler-preview,



  .compiler-tool .compiler-preview p {



    min-height: 240px;



  }







  .compiler-tool .compiler-preview img {



    height: 300px;



  }



}







@media (max-width: 720px) {



  .marketing-course-body .course-lesson {



    padding: 24px 18px;



  }







  .marketing-course-body .course-lesson > h2 {



    font-size: 34px;



  }



}








/* Cleaner file picker for the integrated MindAR compiler */



.file-drop {



  position: relative;



  min-height: 128px;



  align-content: center;



}







.file-drop::after {



  content: "Haz clic aqui para elegir una o varias imagenes target";



  display: block;



  padding: 12px 14px;



  color: #ffffff;



  font-size: 0.95rem;



  text-align: center;



  background: linear-gradient(135deg, #10b981, #047857);



  border-radius: 12px;



  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.22);



}







.file-drop input {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  opacity: 0;



  cursor: pointer;



}







.compiler-tool .compiler-actions .button:disabled,



.marketing-course-body .compiler-tool .compiler-actions .button:disabled {



  color: #94a3b8 !important;



  background: #e2e8f0 !important;



  border-color: #dbe4f0 !important;



  box-shadow: none !important;



}












/* Firebase course identity */



.firebase-landing,



.firebase-course-body {



  --brand: #2563eb;



  --brand-strong: #1d4ed8;



  --accent: #f59e0b;



}







.firebase-landing .brand-mark,



.firebase-course-body .brand-mark,



.firebase-landing .button.primary,



.firebase-course-body .button.primary {



  background: linear-gradient(135deg, #2563eb, #f59e0b);



}







.firebase-landing .hero-bg,



.firebase-course-body .access-gate {



  background: radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.22), transparent 28%), radial-gradient(circle at 80% 12%, rgba(245, 158, 11, 0.2), transparent 26%), #f8fafc;



}







.firebase-landing .price-card.featured {



  background: linear-gradient(145deg, #0f172a, #1d4ed8 64%, #f59e0b);



}







.firebase-mark {



  font-size: 0.82rem;



}







.firebase-device .camera-feed {



  overflow: hidden;



}







.firebase-node {



  position: absolute;



  display: grid;



  place-items: center;



  min-width: 92px;



  min-height: 42px;



  padding: 8px 12px;



  color: #0f172a;



  font-size: 0.78rem;



  font-weight: 900;



  background: rgba(255, 255, 255, 0.9);



  border: 1px solid rgba(37, 99, 235, 0.24);



  border-radius: 999px;



  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);



}







.node-firestore { top: 24%; right: 10%; }



.node-auth { top: 46%; left: 8%; }



.node-leads { bottom: 22%; right: 16%; }







.firebase-course-body .course-sidebar {



  max-height: calc(100vh - 120px);



  overflow: auto;



}







.firebase-course-body .course-sidebar::-webkit-scrollbar {



  width: 8px;



}







.firebase-course-body .course-sidebar::-webkit-scrollbar-thumb {



  background: rgba(37, 99, 235, 0.28);



  border-radius: 999px;



}







.firebase-course-body .course-lesson > h2 {



  max-width: 920px;



  margin-bottom: 18px;



  font-size: clamp(34px, 4vw, 56px);



  line-height: 0.98;



}







.firebase-course-body .course-lesson > p:not(.eyebrow) {



  max-width: 920px;



  color: var(--muted);



  font-size: 17px;



  line-height: 1.7;



}







.download-card {



  display: grid;



  gap: 12px;



  margin: 26px 0;



  padding: 22px;



  background: linear-gradient(135deg, #eff6ff, #fffbeb);



  border: 1px solid rgba(37, 99, 235, 0.18);



  border-radius: var(--radius);



}









/* firebase-rebuild-polish */


.firebase-landing .module-panel,


.firebase-course-body .course-lesson {


  scroll-margin-top: 100px;


}





.firebase-course-body .practice-box ol,


.firebase-course-body .practice-box ul {


  display: grid;


  gap: 8px;


}





.firebase-course-body .course-content {


  min-width: 0;


}





.firebase-course-body .code-preview {


  margin: 22px 0;


}





.firebase-course-body .download-card + .download-card {


  margin-top: 14px;


}






/* Academy hero AR scene */

.academy-ar-feed {

  position: relative;

  min-height: 520px;

  overflow: hidden;

  background:

    radial-gradient(circle at 50% 44%, rgba(23, 195, 178, 0.26), transparent 22%),

    linear-gradient(180deg, rgba(8, 47, 73, 0.96), rgba(15, 23, 42, 0.98));

  perspective: 900px;

}



.academy-ar-feed::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.34;

  background-image:

    linear-gradient(rgba(45, 212, 191, 0.18) 1px, transparent 1px),

    linear-gradient(90deg, rgba(45, 212, 191, 0.18) 1px, transparent 1px);

  background-size: 36px 36px;

}



.ar-marker-surface {

  position: absolute;

  left: 50%;

  top: 56%;

  width: 260px;

  height: 160px;

  transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-10deg);

  transform-origin: center;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(45, 212, 191, 0.42);

  border-radius: 8px;

  box-shadow: 0 28px 80px rgba(23, 195, 178, 0.2);

}



.marker-title {

  position: absolute;

  left: 50%;

  top: 50%;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.78rem;

  font-weight: 900;

  letter-spacing: 0.14em;

  transform: translate(-50%, -50%);

}



.marker-grid {

  position: absolute;

  inset: 12px;

  border: 1px dashed rgba(255, 255, 255, 0.28);

  border-radius: 6px;

}



.ar-scan-frame {

  position: absolute;

  inset: 68px 58px;

  border: 1px solid rgba(45, 212, 191, 0.18);

  border-radius: 18px;

}



.ar-scan-frame .corner {

  position: absolute;

  width: 34px;

  height: 34px;

  border-color: #2dd4bf;

}



.ar-scan-frame .top-left { top: -1px; left: -1px; border-top: 3px solid; border-left: 3px solid; }

.ar-scan-frame .top-right { top: -1px; right: -1px; border-top: 3px solid; border-right: 3px solid; }

.ar-scan-frame .bottom-left { bottom: -1px; left: -1px; border-bottom: 3px solid; border-left: 3px solid; }

.ar-scan-frame .bottom-right { bottom: -1px; right: -1px; border-bottom: 3px solid; border-right: 3px solid; }



.academy-ar-feed .academy-orbit-card {

  z-index: 3;

  backdrop-filter: blur(10px);

}



.academy-ar-feed .academy-orbit-card.main-card {

  left: 50%;

  top: 42%;

  transform: translate(-50%, -50%) translateZ(80px);

  background: linear-gradient(135deg, #0f6bff, #083ed8);

  box-shadow: 0 24px 60px rgba(15, 107, 255, 0.36);

}



.academy-ar-feed .academy-orbit-card.card-a {

  left: 14%;

  top: 24%;

  background: linear-gradient(135deg, #10b981, #047857);

}



.academy-ar-feed .academy-orbit-card.card-b {

  right: 13%;

  top: 32%;

  background: linear-gradient(135deg, #f59e0b, #b45309);

}



.academy-ar-feed .academy-orbit-card.card-c {

  left: 24%;

  bottom: 17%;

  background: linear-gradient(135deg, #6366f1, #3730a3);

}



.ar-depth-line {

  position: absolute;

  z-index: 2;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.62), transparent);

  transform-origin: left center;

}



.ar-depth-line.line-a {

  left: 34%;

  top: 45%;

  width: 210px;

  transform: rotate(-21deg);

}



.ar-depth-line.line-b {

  left: 42%;

  top: 52%;

  width: 180px;

  transform: rotate(27deg);

}



.academy-ar-feed .target-label {

  z-index: 4;

}



/* GA4 course identity */
.ga4-landing,
.ga4-course-body {
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --accent: #f97316;
}

.ga4-landing .brand-mark,
.ga4-course-body .brand-mark,
.ga4-landing .button.primary,
.ga4-course-body .button.primary {
  background: linear-gradient(135deg, #2563eb, #f97316);
}

.ga4-landing .hero-bg,
.ga4-course-body .access-gate {
  background: radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.22), transparent 28%), radial-gradient(circle at 80% 12%, rgba(249, 115, 22, 0.18), transparent 26%), #f8fafc;
}

.ga4-landing .price-card.featured {
  background: linear-gradient(145deg, #111827, #1d4ed8 62%, #f97316);
}

.ga4-mark {
  font-size: 0.82rem;
}

.ga4-feed {
  position: relative;
  overflow: hidden;
}

.ga4-metric {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 86px;
  min-height: 42px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  background: rgba(37, 99, 235, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
}

.ga4-metric.main { left: 50%; top: 34%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.ga4-metric.a { left: 12%; top: 22%; background: linear-gradient(135deg, #10b981, #047857); }
.ga4-metric.b { right: 14%; top: 42%; background: linear-gradient(135deg, #f97316, #c2410c); }
.ga4-metric.c { left: 24%; bottom: 20%; background: linear-gradient(135deg, #6366f1, #3730a3); }

.ga4-course-body .course-sidebar {
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.ga4-course-body .course-content {
  min-width: 0;
}


/* GA4 checkout modal repair */
.ga4-landing .checkout-modal {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ga4-landing .checkout-modal.active {
  display: flex;
}

.ga4-landing .modal-panel {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.ga4-landing .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 1;
}

.ga4-landing .gateway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 18px;
}

.ga4-landing .gateway-option {
  display: grid;
  gap: 6px;
  min-height: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.ga4-landing .gateway-option strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
}

.ga4-landing .gateway-option span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.ga4-landing .gateway-option:hover,
.ga4-landing .gateway-option.active {
  border-color: var(--brand);
  background: #eef5ff;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.16);
}

.ga4-landing .buyer-form {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.ga4-landing .buyer-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.ga4-landing .buyer-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.ga4-landing .manual-note {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef5ff;
  color: var(--muted);
  line-height: 1.5;
}

.ga4-landing .payment-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
}

.ga4-landing .payment-submit:disabled {
  color: #64748b;
  background: #e2e8f0;
  border-color: #cbd5e1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ga4-landing .payment-feedback {
  min-height: 22px;
  margin-top: 10px;
}

.ga4-landing .modal-course-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 560px) {
  .ga4-landing .checkout-modal {
    align-items: flex-start;
    padding: 14px 12px;
    overflow-y: auto;
  }

  .ga4-landing .modal-panel {
    width: min(100%, 620px);
    max-height: calc(100dvh - 28px);
    padding: 22px;
  }

  .ga4-landing .gateway-grid {
    grid-template-columns: 1fr;
  }
}


/* JavaScript WebAR course */
.jsar-landing,
.jsar-course-body {
  --brand: #eab308;
  --brand-strong: #ca8a04;
  --accent: #22c55e;
}
.jsar-landing .brand-mark,
.jsar-course-body .brand-mark,
.jsar-landing .button.primary,
.jsar-course-body .button.primary {
  background: linear-gradient(135deg, #facc15, #22c55e);
  color: #111827;
}
.jsar-landing .hero-bg,
.jsar-course-body .access-gate {
  background: radial-gradient(circle at 15% 20%, rgba(250, 204, 21, 0.24), transparent 28%), radial-gradient(circle at 80% 12%, rgba(34, 197, 94, 0.2), transparent 26%), #f8fafc;
}
.jsar-landing .price-card.featured {
  background: linear-gradient(145deg, #111827, #3f3f46 58%, #eab308);
}
.jsar-mark {
  font-size: 0.82rem;
}
.jsar-feed {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
}
.jsar-code-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 12px 14px;
  border-radius: 14px;
  color: #111827;
  font-weight: 900;
  background: #facc15;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}
.jsar-code-chip.main { left: 32%; top: 48%; background: #22c55e; color: #052e16; }
.jsar-code-chip.a { left: 10%; top: 22%; }
.jsar-code-chip.b { right: 10%; top: 28%; background: #38bdf8; }
.jsar-code-chip.c { left: 18%; bottom: 15%; background: #fb923c; }
.jsar-landing .checkout-modal,
.jsar-landing .checkout-modal.active {
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.jsar-landing .checkout-modal.active {
  display: flex;
}
.jsar-landing .modal-panel {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}
.jsar-landing .gateway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 18px;
}
.jsar-landing .gateway-option {
  display: grid;
  gap: 6px;
  min-height: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}
.jsar-landing .gateway-option:hover,
.jsar-landing .gateway-option.active {
  border-color: var(--brand);
  background: #fefce8;
  box-shadow: 0 14px 34px rgba(234, 179, 8, 0.18);
}
.jsar-landing .buyer-form {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}
.jsar-landing .buyer-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}
.jsar-landing .buyer-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}
.jsar-landing .manual-note {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fefce8;
  color: var(--muted);
  line-height: 1.5;
}
.jsar-landing .payment-submit,
.jsar-landing .modal-course-link {
  width: 100%;
  min-height: 48px;
}
.jsar-landing .payment-submit:disabled {
  color: #64748b;
  background: #e2e8f0;
  border-color: #cbd5e1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.jsar-landing .modal-course-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #ca8a04;
  font-weight: 900;
  text-decoration: none;
}
.single-pricing {
  max-width: 520px;
  margin-inline: auto;
}
@media (max-width: 560px) {
  .jsar-landing .checkout-modal {
    align-items: flex-start;
    padding: 14px 12px;
    overflow-y: auto;
  }
  .jsar-landing .gateway-grid {
    grid-template-columns: 1fr;
  }
}


/* JavaScript WebAR pricing button polish */
.jsar-landing .single-pricing .price-card .plan-button {
  width: auto;
  min-width: 240px;
  max-width: 100%;
  align-self: flex-start;
  justify-content: center;
  margin-top: 22px;
  padding-inline: 24px;
  border-radius: 12px;
  white-space: normal;
}

.jsar-landing .single-pricing .price-card {
  align-items: flex-start;
}

@media (max-width: 560px) {
  .jsar-landing .single-pricing .price-card .plan-button {
    width: 100%;
    min-width: 0;
  }
}


/* JavaScript WebAR single pricing card layout */
.jsar-landing .pricing-grid.single-pricing {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  max-width: 720px;
  margin-inline: auto;
}

.jsar-landing .pricing-grid.single-pricing .price-card {
  width: 100%;
  min-width: 0;
  padding: 32px;
}

.jsar-landing .pricing-grid.single-pricing .price-card h3 {
  font-size: clamp(40px, 6vw, 58px);
  line-height: 0.95;
}

.jsar-landing .pricing-grid.single-pricing .price-card p,
.jsar-landing .pricing-grid.single-pricing .price-card li {
  max-width: 46ch;
}

.jsar-landing .pricing-grid.single-pricing .price-card .plan-button {
  width: auto;
  min-width: 260px;
  max-width: 100%;
  align-self: flex-start;
  margin-top: 22px;
}

@media (max-width: 640px) {
  .jsar-landing .pricing-grid.single-pricing {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .jsar-landing .pricing-grid.single-pricing .price-card {
    padding: 26px;
  }

  .jsar-landing .pricing-grid.single-pricing .price-card .plan-button {
    width: 100%;
    min-width: 0;
  }
}


/* Restaurantes WebAR course */
.restaurant-landing,
.restaurant-course-body,
.tourism-landing,
.tourism-course-body {
  --brand: #f97316;
  --brand-strong: #c2410c;
  --accent: #0ea5e9;
}

.restaurant-landing .brand-mark,
.restaurant-landing .button.primary,
.restaurant-course-body .brand-mark,
.restaurant-course-body .button.primary,
.tourism-landing .brand-mark,
.tourism-landing .button.primary,
.tourism-course-body .brand-mark,
.tourism-course-body .button.primary {
  background: linear-gradient(135deg, #fb923c, #0ea5e9);
  color: #111827;
}

.restaurant-landing .hero-bg,
.restaurant-course-body .access-gate,
.tourism-landing .hero-bg,
.tourism-course-body .access-gate {
  background: radial-gradient(circle at 15% 20%, rgba(249, 115, 22, 0.22), transparent 28%), radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.22), transparent 26%), #f8fafc;
}

.restaurant-landing .price-card.featured,
.tourism-landing .price-card.featured {
  background: linear-gradient(145deg, #111827, #7c2d12 62%, #f97316);
}

.restaurant-feed,
.tourism-feed {
  background: linear-gradient(180deg, rgba(12, 74, 110, 0.9), rgba(124, 45, 18, 0.88));
}

.restaurant-float-card,
.tourism-float-card {
  position: absolute;
  padding: 11px 14px;
  border-radius: 12px;
  color: #111827;
  background: #fed7aa;
  font-weight: 900;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.22);
}

.restaurant-float-card.main,
.tourism-float-card.main {
  left: 34%;
  top: 48%;
  background: #38bdf8;
}

.restaurant-float-card.a,
.tourism-float-card.a {
  left: 10%;
  top: 24%;
  background: #fdba74;
}

.restaurant-float-card.b,
.tourism-float-card.b {
  right: 10%;
  top: 30%;
  background: #86efac;
}

.restaurant-landing .checkout-modal,
.restaurant-landing .checkout-modal.active,
.tourism-landing .checkout-modal,
.tourism-landing .checkout-modal.active {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.restaurant-landing .checkout-modal.active,
.tourism-landing .checkout-modal.active {
  display: flex;
}

.restaurant-landing .modal-panel,
.tourism-landing .modal-panel {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.restaurant-landing .gateway-grid,
.tourism-landing .gateway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 18px;
}

.restaurant-landing .gateway-option,
.tourism-landing .gateway-option {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.restaurant-landing .gateway-option:hover,
.restaurant-landing .gateway-option.active,
.tourism-landing .gateway-option:hover,
.tourism-landing .gateway-option.active {
  border-color: var(--brand);
  background: #fff7ed;
  box-shadow: 0 14px 34px rgba(249, 115, 22, 0.18);
}

.restaurant-landing .buyer-form,
.tourism-landing .buyer-form {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.restaurant-landing .buyer-form label,
.tourism-landing .buyer-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.restaurant-landing .buyer-form input,
.tourism-landing .buyer-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.restaurant-landing .manual-note,
.tourism-landing .manual-note {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7ed;
  color: var(--muted);
}

.restaurant-landing .payment-submit,
.restaurant-landing .modal-course-link,
.tourism-landing .payment-submit,
.tourism-landing .modal-course-link {
  width: 100%;
  min-height: 48px;
}

.restaurant-landing .payment-submit:disabled,
.tourism-landing .payment-submit:disabled {
  color: #64748b;
  background: #e2e8f0;
  border-color: #cbd5e1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.restaurant-landing .modal-course-link,
.tourism-landing .modal-course-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #c2410c;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 640px) {
  .restaurant-landing .gateway-grid,
  .tourism-landing .gateway-grid {
    grid-template-columns: 1fr;
  }

  .restaurant-landing .checkout-modal,
  .tourism-landing .checkout-modal {
    align-items: flex-start;
    padding: 14px 12px;
    overflow-y: auto;
  }
}


/* WebAR Comercial course */
.academy-course-card.commercial-card {
  border-color: rgba(37, 99, 235, 0.34);
  background: linear-gradient(180deg, #eff6ff, #ffffff);
}

.commercial-landing,
.commercial-course-body {
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --accent: #22c55e;
}

.commercial-landing .brand-mark,
.commercial-course-body .brand-mark,
.commercial-landing .button.primary,
.commercial-course-body .button.primary {
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #ffffff;
}

.commercial-landing .hero-bg,
.commercial-course-body .access-gate {
  background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.24), transparent 28%), radial-gradient(circle at 80% 16%, rgba(34, 197, 94, 0.22), transparent 26%), #f8fafc;
}

.commercial-landing .price-card.featured {
  background: linear-gradient(145deg, #0f172a, #1d4ed8 58%, #22c55e);
}

.commercial-feed {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(30, 64, 175, 0.88));
}

.commercial-float-card {
  position: absolute;
  padding: 11px 14px;
  border-radius: 12px;
  color: #ffffff;
  background: #2563eb;
  font-weight: 900;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.22);
}

.commercial-float-card.main { left: 34%; top: 48%; background: #22c55e; color: #052e16; }
.commercial-float-card.a { left: 8%; top: 24%; background: #2563eb; }
.commercial-float-card.b { right: 8%; top: 30%; background: #f97316; }

.commercial-landing .checkout-modal,
.commercial-landing .checkout-modal.active {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.commercial-landing .checkout-modal.active {
  display: flex;
}

.commercial-landing .modal-panel {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.commercial-landing .gateway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 18px;
}

.commercial-landing .gateway-option {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.commercial-landing .gateway-option:hover,
.commercial-landing .gateway-option.active {
  border-color: var(--brand);
  background: #eff6ff;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18);
}

.commercial-landing .buyer-form {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.commercial-landing .buyer-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.commercial-landing .buyer-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.commercial-landing .manual-note {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eff6ff;
  color: var(--muted);
}

.commercial-landing .payment-submit,
.commercial-landing .modal-course-link {
  width: 100%;
  min-height: 48px;
}

.commercial-landing .payment-submit:disabled {
  color: #64748b;
  background: #e2e8f0;
  border-color: #cbd5e1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.commercial-landing .modal-course-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #1d4ed8;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 640px) {
  .commercial-landing .gateway-grid {
    grid-template-columns: 1fr;
  }

  .commercial-landing .checkout-modal {
    align-items: flex-start;
    padding: 14px 12px;
    overflow-y: auto;
  }
}


/* WebAR Comercial classroom layout repair */
.commercial-course-body {
  min-height: 100vh;
  color: #0f172a;
  background:
    radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.16), transparent 30%),
    radial-gradient(circle at 84% 6%, rgba(34, 197, 94, 0.18), transparent 28%),
    #f8fafc;
}

.commercial-course-body .course-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 14px clamp(16px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(203, 213, 225, 0.8);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px);
}

.commercial-course-body .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0f172a;
  text-decoration: none;
}

.commercial-course-body .brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
}

.commercial-course-body .brand strong,
.commercial-course-body .brand small {
  display: block;
  line-height: 1.15;
}

.commercial-course-body .brand strong {
  font-size: 16px;
}

.commercial-course-body .brand small {
  margin-top: 3px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.commercial-course-body .course-nav {
  display: none;
}

.commercial-course-body .course-shell {
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: 26px;
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 84px;
}

.commercial-course-body .course-sidebar {
  position: sticky;
  top: 104px;
  align-self: start;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 128px);
  overflow: auto;
  padding: 22px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.commercial-course-body .course-sidebar .eyebrow {
  margin: 0;
}

.commercial-course-body .course-sidebar h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2vw, 32px);
}

.commercial-course-body .course-tab {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  color: #334155;
  text-align: left;
  font-size: 15px;
  font-weight: 850;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  cursor: pointer;
}

.commercial-course-body .course-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22);
}

.commercial-course-body .course-content {
  min-width: 0;
}

.commercial-course-body .course-lesson {
  display: none;
  padding: clamp(24px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
}

.commercial-course-body .course-lesson.active {
  display: block;
}

.commercial-course-body .course-lesson > h2 {
  max-width: 980px;
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: 0;
}

.commercial-course-body .course-lesson > p:not(.eyebrow),
.commercial-course-body .course-lesson li {
  max-width: 1120px;
  color: #1f2937;
  font-size: 17px;
  line-height: 1.75;
}

.commercial-course-body .practice-box,
.commercial-course-body .callout,
.commercial-course-body .line-explain,
.commercial-course-body .download-card {
  max-width: 1120px;
}

.commercial-course-body .course-lesson > .practice-box,
.commercial-course-body .course-lesson > .callout,
.commercial-course-body .course-lesson > .line-explain,
.commercial-course-body .course-lesson > .download-card {
  margin-top: 22px;
}

.commercial-course-body .course-lesson > .practice-box + .practice-box,
.commercial-course-body .course-lesson > .practice-box + .line-explain,
.commercial-course-body .course-lesson > .line-explain + .line-explain,
.commercial-course-body .course-lesson > .callout + .practice-box,
.commercial-course-body .course-lesson > .callout + .line-explain {
  margin-top: 24px;
}

.commercial-course-body .practice-box h3,
.commercial-course-body .line-explain h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

.commercial-course-body .practice-box ol,
.commercial-course-body .practice-box ul,
.commercial-course-body .line-explain ol,
.commercial-course-body .line-explain ul {
  margin-top: 10px;
  margin-bottom: 0;
}

.commercial-course-body .lesson-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 14px;
  color: #334155;
  font-weight: 800;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
}

@media (max-width: 920px) {
  .commercial-course-body .course-shell {
    grid-template-columns: 1fr;
    width: min(100% - 24px, 760px);
    padding-top: 18px;
  }

  .commercial-course-body .course-sidebar {
    position: static;
    max-height: none;
  }

  .commercial-course-body .course-topbar {
    min-height: 68px;
    padding: 12px 14px;
  }
}

@media (max-width: 560px) {
  .commercial-course-body .course-topbar {
    align-items: flex-start;
  }

  .commercial-course-body .brand-mark {
    width: 36px;
    height: 36px;
  }

  .commercial-course-body .brand strong {
    font-size: 15px;
  }

  .commercial-course-body .brand small {
    font-size: 12px;
  }

  .commercial-course-body .course-lesson {
    border-radius: 16px;
  }
}


/* CSS WebAR course */
.cssar-mark {
  background: linear-gradient(135deg, #38bdf8, #22c55e);
  color: #06111f;
}
.cssar-feed {
  background: radial-gradient(circle at 50% 35%, rgba(56, 189, 248, .24), transparent 35%), linear-gradient(160deg, #08111f, #0f172a 58%, #052e2b);
}
.cssar-marker {
  border-color: rgba(56, 189, 248, .62);
}
.cssar-hud {
  position: absolute;
  left: 24px;
  right: 24px;
  z-index: 4;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  color: #e0f2fe;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(12px);
  font-weight: 800;
  text-align: center;
}
.cssar-hud.top {
  top: 92px;
}
.cssar-hud.bottom {
  bottom: 92px;
}
.cssar-course-body .code-preview .is-highlight .code-line-text {
  background: rgba(56, 189, 248, .14);
}