@font-face {
  font-family:DM;
  src:url('/assets/fonts/DMSans-Variable.woff2') format('woff2');
  font-display:swap}
@font-face {
  font-family:Mono;
  src:url('/assets/fonts/SpaceMono-Regular.woff2') format('woff2');
  font-display:swap}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:#070b18;
  color:#f5f1e9;
  font-family:DM,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  cursor:pointer}
button,a {
  -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible {
  outline:3px solid #ff7976;
  outline-offset:5px}
button:disabled {
  cursor:default}
img {
  max-width:100%;
  height:auto}
::selection {
  background:#c8f135;
  color:#070b18}
.wrap {
  width:min(1320px,calc(100% - 100px));
  margin:auto}
.skip {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:99;
  background:#c8f135;
  color:#070b18;
  padding:16px}
.skip:focus {
  top:12px}
.top {
  position:relative;
  z-index:10;
  border-bottom:1px solid #ffffff20}
.top-row {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.brand {
  font-size:26px;
  font-weight:900;
  letter-spacing:-1.5px;
  white-space:nowrap}
.brand span {
  color:#c8f135}
.top nav {
  display:flex;
  gap:30px;
  font-size:14px}
.top nav a:hover {
  color:#c8f135}
.top-contact {
  font-size:14px;
  border-bottom:1px solid #c8f135;
  padding:9px 0}
.menu-toggle {
  display:none}
.eyebrow,.kicker,.small-label {
  font:11px Mono,monospace;
  letter-spacing:1.4px;
  text-transform:uppercase}
.kicker {
  display:flex;
  align-items:center;
  gap:10px;
  color:#c1b1ff}
.kicker i {
  height:7px;
  width:7px;
  background:#c8f135;
  border-radius:50%}
.hero {
  position:relative;
  overflow:hidden}
.hero-grid {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  min-height:690px;
  padding-top:35px;
  padding-bottom:45px;
  gap:0}
.hero-copy {
  position:relative;
  z-index:2;
  padding-bottom:26px}
.hero h1 {
  font-size:clamp(65px,6.25vw,100px);
  line-height:.99;
  letter-spacing:-6px;
  font-weight:650;
  margin:35px -70px 28px 0}
.hero h1 span {
  color:#c8f135;
  display:block}
.hero-copy>p:not(.kicker):not(.hero-note) {
  max-width:450px;
  font-size:18px;
  line-height:1.55;
  color:#b6b9c5}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:32px}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:17px 23px;
  border:1px solid #ffffff40;
  border-radius:6px;
  font-weight:650;
  font-size:14px;
  transition:background .2s,transform .2s}
.btn:hover {
  transform:translateY(-3px);
  background:#ffffff10}
.btn.primary {
  background:#c8f135;
  color:#070b18;
  border-color:#c8f135}
.btn.primary:hover {
  background:#dcff69}
.hero-note {
  font:10px Mono,monospace;
  color:#848b9e;
  margin-top:25px}
.hero-art {
  position:relative;
  height:580px;
  min-width:0;
  isolation:isolate}
.hero-art:before {
  content:'';
  position:absolute;
  inset:10% -15%;
  z-index:-2;
  background:radial-gradient(ellipse,#665c9b30 0,transparent 64%)}
.crew-image {
  position:absolute;
  width:116%;
  max-width:none;
  height:auto;
  left:-8%;
  top:10%;
  object-fit:contain;
  filter:drop-shadow(0 35px 30px #0005)}
.orbit-line {
  position:absolute;
  inset:12% -5% 11%;
  border:1px solid #c1b1ff35;
  border-radius:50%;
  transform:rotate(-25deg);
  z-index:-1}
.orbit-line:after {
  content:'';
  position:absolute;
  inset:40px -30px;
  border:1px dashed #c1b1ff25;
  border-radius:50%;
  transform:rotate(55deg)}
.orbit-chip {
  position:absolute;
  z-index:3;
  font:10px Mono,monospace;
  padding:13px 17px;
  border:1px solid #ffffff20;
  background:#141929;
  box-shadow:0 12px 40px #0003;
  border-radius:4px}
.chip-idea {
  right:5%;
  top:5%;
  color:#c8f135;
  transform:rotate(6deg)}
.chip-prompt {
  left:0;
  bottom:4%;
  color:#c1b1ff;
  transform:rotate(-6deg)}
.crew-caption {
  position:absolute;
  bottom:0;
  right:2%;
  font:9px Mono,monospace;
  color:#848b9e}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  padding:0 0 24px;
  font:10px Mono,monospace;
  color:#848b9e}
.hero-bottom span:last-child {
  color:#c8f135}
.ticker {
  background:#c8f135;
  color:#070b18;
  overflow:hidden;
  padding:20px 0;
  transform:rotate(-1.5deg);
  width:102%;
  margin:0 -1%;
  font:20px Mono,monospace;
  white-space:nowrap}
.ticker-track {
  display:flex;
  width:max-content;
  animation:marquee 35s linear infinite}
.ticker span {
  padding:0 20px}
.ticker i {
  font-style:normal;
  margin:0 28px}
@keyframes marquee {
  to {
  transform:translateX(-50%)}
}
.section {
  padding:110px 0}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:45px}
.section-head h2,.statement h2 {
  font-size:clamp(40px,4.3vw,65px);
  line-height:1.05;
  letter-spacing:-2.7px;
  font-weight:550;
  margin:16px 0 0}
.section-head>p {
  max-width:310px;
  color:#8d94a7;
  font-size:15px;
  line-height:1.6}
.light {
  background:#f5f1e9;
  color:#101626}
.light .eyebrow {
  color:#676a70}
.problem-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:start}
.problem-buttons {
  display:grid;
  gap:12px}
.problem-button {
  display:flex;
  text-align:left;
  align-items:center;
  gap:18px;
  background:transparent;
  border:1px solid #12182625;
  border-radius:8px;
  padding:23px 20px;
  color:inherit;
  transition:background .2s}
.problem-button>span {
  font:11px Mono;
  color:#696e7b}
.problem-button strong {
  display:block;
  font-size:19px;
  font-weight:600}
.problem-button small {
  display:block;
  margin-top:5px;
  color:#696e7b}
.problem-button>b {
  margin-left:auto;
  font-weight:400}
.problem-button[aria-pressed=true] {
  background:#101626;
  color:#f5f1e9}
.problem-button[aria-pressed=true] span,.problem-button[aria-pressed=true] small {
  color:#b9bbca}
.problem-content h3 {
  font-size:31px;
  letter-spacing:-1px;
  font-weight:550;
  margin:2px 0 12px}
.problem-content h4 {
  font-size:20px;
  line-height:1.25;
  font-weight:550;
  margin:16px 0}
.problem-content>p {
  color:#676a70;
  line-height:1.6;
  font-size:15px;
  max-width:510px}
.demo-terminal {
  background:#e5e3df;
  border:1px solid #d6d4cf;
  border-radius:10px;
  padding:22px;
  margin-top:25px;
  min-height:235px}
.demo-label {
  font:9px Mono;
  letter-spacing:1px;
  color:#697174;
  display:flex;
  justify-content:space-between;
  margin-bottom:22px}
.demo-label:after {
  content:'● ● ●';
  color:#899282;
  font-size:8px}
.demo-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #11182715;
  padding:16px 0;
  font-size:12px}
.demo-row b {
  font-size:10px;
  font-weight:500}
.bubble {
  padding:14px 16px;
  border-radius:10px;
  background:#fff;
  font-size:13px;
  max-width:95%;
  margin-bottom:12px}
.bubble.answer {
  background:#c8f135;
  margin-left:20px}
.bubble small {
  display:block;
  margin-top:12px;
  font-size:9px;
  color:#5e681f}
.problem-foot {
  font:9px Mono;
  color:#777;
  margin-top:15px}
.showcases {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px}
.showcase {
  border-top:1px solid #ffffff25;
  padding-top:20px;
  min-width:0}
.showcase h3 {
  font-size:25px;
  letter-spacing:-.7px;
  font-weight:550;
  margin:14px 0}
.showcase>p {
  color:#969dae;
  font-size:14px;
  line-height:1.6;
  min-height:70px}
.showcase-tag {
  font:9px Mono;
  color:#c1b1ff;
  text-transform:uppercase;
  letter-spacing:1px}
.demo-tabs {
  display:flex;
  gap:5px;
  margin:20px 0 0;
  background:#1b2234;
  padding:6px 6px 0;
  border-radius:12px 12px 0 0}
.demo-tabs button {
  border:0;
  border-radius:6px 6px 0 0;
  background:transparent;
  color:#b0b7c8;
  padding:10px 15px;
  font-size:11px}
.demo-tabs button[aria-selected=true] {
  background:#f5f1e9;
  color:#101626}
.showcase-screen {
  background:#f5f1e9;
  color:#101626;
  border-radius:0 0 12px 12px;
  padding:25px;
  height:300px;
  overflow:hidden}
.showcase-screen>p {
  font-size:11px;
  color:#6b717b;
  line-height:1.6}
.balance-label {
  font-size:10px;
  color:#6b717b}
.balance {
  font-size:31px;
  font-weight:600;
  display:block;
  letter-spacing:-1px;
  margin-top:8px}
.bars {
  display:flex;
  align-items:end;
  height:110px;
  gap:12px;
  margin:15px 0}
.bars i {
  height:var(--bar);
  background:#a7c632;
  border-radius:5px 5px 0 0;
  flex:1}
.bars i:nth-child(2n) {
  background:#b5a4e4}
.slide-number,.event-time {
  font:9px Mono;
  letter-spacing:1px}
.showcase-screen h4 {
  font-size:29px;
  font-weight:550;
  line-height:1.08;
  letter-spacing:-1px;
  margin:28px 0}
.showcase-screen h4 em {
  font-style:normal;
  color:#7e62bb}
.slide-foot {
  font:9px Mono;
  color:#6b717b}
.story-list {
  padding-left:19px;
  font-size:21px;
  line-height:1.6;
  margin:30px 0}
.story-list li {
  padding-left:3px;
  margin-bottom:10px}
.demo-vote {
  padding:12px;
  border:1px solid #b7b0a5;
  background:#c8f135;
  border-radius:5px;
  font-size:11px;
  text-align:left}
.showcase small {
  display:block;
  margin-top:13px;
  color:#7c859b;
  font:9px Mono}
.products {
  background:#141a2b}
.products-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px}
.product {
  border:1px solid #ffffff20;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  padding:30px;
  min-height:310px;
  transition:border-color .2s,transform .2s}
.product:hover {
  border-color:#c8f135;
  transform:translateY(-5px)}
.product img {
  height:37px;
  width:auto;
  object-fit:contain;
  object-position:left;
  max-width:100%;
  align-self:start;
  margin:28px 0 22px}
.product:nth-child(2) img {
  height:31px;
  margin-bottom:28px}
.product p {
  color:#a1a9bd;
  font-size:14px;
  line-height:1.65;
  flex:1}
.product>span {
  font-size:12px;
  color:#c8f135;
  margin-top:22px;
  display:flex;
  justify-content:space-between}
.product .small-label {
  font-size:9px;
  color:#a1a9bd}
.statement {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:90px;
  align-items:center}
.statement h2 span {
  color:#c1b1ff}
.statement-copy {
  font-size:18px;
  line-height:1.65;
  color:#a1a9bd}
.team-names {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:25px}
.team-names span {
  font:10px Mono;
  padding:9px 12px;
  border:1px solid #ffffff25;
  border-radius:30px;
  color:#f5f1e9}
.contact {
  background:#c1b1ff;
  color:#101626;
  position:relative;
  overflow:hidden}
.contact-inner {
  padding:90px 0;
  max-width:1000px}
.contact h2 {
  font-size:clamp(48px,6.5vw,90px);
  line-height:1.02;
  letter-spacing:-4px;
  font-weight:600;
  margin:25px 0}
.contact p:not(.eyebrow) {
  max-width:510px;
  font-size:17px;
  line-height:1.6;
  color:#38304c}
.contact .btn {
  border-color:#10162640}
.contact .btn.primary {
  background:#101626;
  border-color:#101626;
  color:#f5f1e9}
.contact .btn:hover {
  background:#f5f1e9;
  color:#101626}
.contact-spark {
  position:absolute;
  right:7%;
  top:20%;
  font-size:150px;
  line-height:1;
  color:#10162615;
  transform:rotate(15deg);
  pointer-events:none}
.footer {
  padding:48px 0 60px}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-start}
.footer nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:12px;
  color:#a1a9bd;
  max-width:650px}
.footer nav a:hover {
  color:#c8f135}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ffffff20;
  padding-top:25px;
  margin-top:35px;
  font-size:10px;
  color:#7c859b}
.motion-toggle {
  border:1px solid #ffffff25;
  background:none;
  color:#c1b1ff;
  padding:8px 12px;
  border-radius:30px;
  font:9px Mono}
.version {
  position:fixed;
  right:12px;
  bottom:10px;
  z-index:20;
  padding:6px 9px;
  border-radius:5px;
  background:#070b18e8;
  color:#c3c7d4;
  font:9px Mono;
  pointer-events:none}
.motion-paused *,.motion-paused *:before,.motion-paused *:after {
  animation-play-state:paused!important;
  transition:none!important}
.motion-paused {
  scroll-behavior:auto}
@media(min-width:1600px) {
  .hero h1 {
  font-size:105px}
.hero-grid {
  min-height:740px}
}
@media(max-width:1050px) {
  .wrap {
  width:calc(100% - 60px)}
.hero h1 {
  font-size:73px;
  letter-spacing:-4.5px}
.hero-art {
  height:480px}
.hero-grid {
  min-height:620px}
.hero-copy>p:not(.kicker):not(.hero-note) {
  font-size:16px}
.btn {
  padding:15px 17px;
  font-size:12px;
  gap:16px}
.problem-grid {
  gap:30px}
.top nav {
  gap:19px}
.showcases {
  gap:16px}
.showcase-screen {
  padding:20px}
.product {
  padding:24px}
.statement {
  gap:50px}
}
@media(max-width:760px) {
  .wrap {
  width:calc(100% - 40px)}
.top-row {
  height:78px;
  gap:15px}
.brand {
  font-size:23px}
.top-contact {
  margin-left:auto;
  font-size:11px}
.menu-toggle {
  display:block;
  border:1px solid #ffffff35;
  background:transparent;
  color:#f5f1e9;
  border-radius:5px;
  padding:9px 11px;
  font-size:11px}
.top nav {
  display:none;
  position:absolute;
  top:78px;
  left:0;
  right:0;
  background:#111728;
  padding:25px 20px;
  border-bottom:1px solid #ffffff30;
  flex-direction:column}
.top nav.open {
  display:flex}
.hero-grid {
  grid-template-columns:1fr;
  padding-top:35px;
  padding-bottom:30px;
  gap:0;
  min-height:0}
.hero h1 {
  font-size:clamp(53px,10.3vw,77px);
  letter-spacing:-3.4px;
  margin:26px 0 22px}
.hero-copy {
  padding-bottom:0}
.hero-copy>p:not(.kicker):not(.hero-note) {
  font-size:16px;
  max-width:500px}
.hero-art {
  height:380px;
  width:min(520px,100%);
  margin:20px auto 0}
.crew-image {
  width:108%;
  left:-4%;
  top:5%}
.chip-idea {
  right:0;
  top:0}
.chip-prompt {
  bottom:5%;
  left:0;
  font-size:8px}
.crew-caption {
  bottom:0;
  font-size:8px}
.hero-bottom {
  font-size:8px;
  gap:20px}
.hero-bottom span:last-child {
  max-width:130px;
  text-align:right}
.ticker {
  padding:16px 0;
  font-size:14px}
.ticker i {
  margin:0 15px}
.section {
  padding:75px 0}
.section-head {
  display:block;
  margin-bottom:30px}
.section-head h2,.statement h2 {
  font-size:42px;
  letter-spacing:-2px}
.section-head>p {
  max-width:450px;
  margin-top:22px}
.problem-grid {
  grid-template-columns:1fr;
  gap:30px}
.problem-button {
  padding:19px 17px}
.problem-button strong {
  font-size:17px}
.problem-content h3 {
  font-size:29px}
.showcases {
  grid-template-columns:1fr;
  gap:40px}
.showcase>p {
  min-height:0;
  max-width:450px}
.showcase-screen {
  height:280px}
.products-grid {
  grid-template-columns:1fr;
  gap:16px}
.product {
  min-height:260px}
.product img {
  margin-top:25px}
.statement {
  grid-template-columns:1fr;
  gap:25px}
.statement-copy {
  font-size:16px}
.contact-inner {
  padding:70px 0}
.contact h2 {
  font-size:53px;
  letter-spacing:-2.8px}
.contact-spark {
  font-size:110px;
  right:0;
  top:10%}
.footer-top {
  flex-direction:column;
  gap:25px}
.footer nav {
  gap:15px 22px;
  line-height:1.8}
.footer-bottom {
  gap:25px;
  align-items:flex-start}
.footer-bottom p {
  margin:0;
  max-width:180px;
  line-height:1.6}
}
@media(max-width:390px) {
  .hero-art {
  height:320px}
.hero h1 {
  font-size:49px;
  letter-spacing:-3px}
.kicker {
  font-size:9px;
  letter-spacing:1px}
.actions {
  gap:10px}
.btn {
  font-size:11px;
  padding:14px}
.contact h2 {
  font-size:46px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
}

@font-face {
  font-family:MonoBold;
  src:url('/assets/fonts/SpaceMono-Bold.woff2') format('woff2');
  font-display:swap}
.brand {
  font-family:MonoBold,monospace;
  font-weight:700;
  letter-spacing:-1.5px}


/* La cinta inclinada queda recortada al viewport, sin desplazamiento lateral. */
html,body {
  overflow-x:clip}

/* En móvil, la etiqueta flota por encima del equipo y no sobre sus caras. */
@media(max-width:760px) {
  .hero-art {
  margin-top:48px}
.chip-idea {
  top:-25px}
.crew-image {
  top:10%}
}


@media(max-width:760px) {
  .hero-art {
  margin-top:48px}
.chip-idea {
  top:-25px}
.crew-image {
  top:10%}
}

/* 3.1 — Un recorrido por escenas, con aire y personajes fuera de los paneles. */
body { background: #070b18; }
.hero { background: radial-gradient(ellipse at 82% 40%, #7060c72b, transparent 46%); }
.hero-art::after { content: ''; position: absolute; inset: 9% 0 3%; border-radius: 50%; box-shadow: 0 0 100px #c1b1ff12; pointer-events: none; }
.hero h1 { font-weight: 550; }
.hero h1 span { text-shadow: 0 0 65px #c8f13520; }
#ideas { position: relative; background: #f5f1e9; padding-bottom: 130px; overflow: clip; }
#ideas .section-head { padding-left: 19%; }
.idea-universe { position: relative; min-height: 530px; padding-left: 23%; }
.lia-stage { position: absolute; width: 34%; height: 580px; left: -9%; top: 20px; }
.solo-character { display: block; object-fit: contain; filter: drop-shadow(0 24px 25px #080a1825); }
.lia-character { position: absolute; width: 100%; height: 100%; z-index: 2; }
.scene-ring { position: absolute; inset: 17% -15%; border: 1px solid #9b87ce80; border-radius: 50%; transform: rotate(-35deg); }
.scene-note { position: absolute; font: 9px Mono, monospace; letter-spacing: 1px; z-index: 3; }
.lia-stage .scene-note { bottom: -10px; left: 0; color: #514965; transform: rotate(-7deg); white-space: nowrap; }
.problem-grid { grid-template-columns: .95fr 1.05fr; gap: 35px; }
.problem-button { border: 0; border-bottom: 1px solid #10162630; border-radius: 0; padding: 23px 10px; }
.problem-button[aria-pressed=true] { background: #c8f135; color: #101626; transform: rotate(-2deg); }
.problem-button[aria-pressed=true] span, .problem-button[aria-pressed=true] small { color: #45501d; }
.demo-terminal { transform: rotate(2deg); background: #e8e4ef; box-shadow: 10px 15px 0 #c1b1ff45; border: 0; }
.creative-chapters { position: relative; background: radial-gradient(ellipse at 90% 25%, #38297655, transparent 32%); }
.chapter-intro { padding-top: 100px; padding-bottom: 20px; }
.chapter-intro h2 { font-size: clamp(45px, 6vw, 84px); line-height: 1.04; letter-spacing: -4px; font-weight: 500; margin: 25px 0; }
.chapter-intro h2 em { color: #c1b1ff; font-style: normal; }
.chapter-intro > p:last-child { color: #959eb5; font-size: 17px; }
.chapter { position: relative; overflow: clip; }
.chapter-layout { min-height: 850px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 50px; }
.chapter-copy { position: relative; z-index: 4; max-width: 500px; }
.chapter-index { font: 10px Mono; color: #7f89a0; margin-bottom: 35px; letter-spacing: 1px; }
.chapter .showcase-tag { color: #c8f135; }
.chapter h3 { font-size: clamp(45px, 5vw, 72px); line-height: 1.02; letter-spacing: -3px; font-weight: 500; margin: 22px 0; }
.chapter-copy > p:not(.chapter-index) { color: #a3abc0; font-size: 18px; line-height: 1.6; max-width: 410px; }
.chapter-stage { height: 740px; position: relative; min-width: 0; }
.scene-orbit { position: absolute; inset: 12% -15%; border: 1px solid #c1b1ff60; border-radius: 50%; transform: rotate(-35deg); }
.scene-orbit::after { content: ''; position: absolute; inset: 45px -25px; border: 1px dashed #c8f13540; border-radius: 50%; transform: rotate(70deg); }
.nico-character { width: 82%; height: 93%; position: absolute; right: -10%; top: 0; z-index: 2; }
.nico-stage .scene-note { right: 0; bottom: 30px; color: #c1b1ff; }
.floating-console { position: absolute; width: 300px; z-index: 3; bottom: 30px; left: -30px; transform: rotate(-7deg); box-shadow: 0 28px 60px #0005; border-radius: 12px; }
.floating-console .demo-tabs { margin-top: 0; }
.floating-console small { display: block; font: 8px Mono; color: #a5adc0; padding: 12px 4px; background: #070b18; }
.chapter-1 { background: #c1b1ff; color: #101626; }
.chapter-1 .chapter-layout { grid-template-columns: 1fr 1fr; gap: 70px; min-height: 1000px; }
.chapter-1 .chapter-copy { order: 2; }
.chapter-1 .chapter-copy > p, .chapter-1 .chapter-index { color: #514767; }
.chapter-1 .showcase-tag { color: #2e234b; }
.chapter-1 .chapter-stage { order: 1; height: 880px; }
.portal { position: absolute; width: 66%; height: 650px; left: -3%; top: 30px; border-radius: 180px 180px 25px 25px; overflow: hidden; background: #191b34; border: 1px solid #ffffff70; box-shadow: 0 30px 70px #493d7040; transform: rotate(-7deg); }
.portal video { width: 100%; height: 100%; object-fit: cover; }
.portal-label { position: absolute; top: 75px; left: 15px; right: 15px; color: white; text-align: center; font: 8px Mono; letter-spacing: 1px; text-shadow: 0 1px 5px #000; pointer-events: none; }
.valentina-character { width: 67%; height: 78%; position: absolute; right: -16%; bottom: 35px; z-index: 2; }
.video-toggle { position: absolute; bottom: 40px; left: 0; z-index: 4; color: #101626; background: #c8f135; border: 0; padding: 14px 18px; border-radius: 30px; font: 10px Mono; }
.story-console { max-width: 350px; margin-top: 35px; transform: rotate(3deg); }
.story-console .demo-tabs { background: #a393d0; }
.story-console .showcase-screen { height: 260px; }
.story-console small { display: block; font: 8px Mono; margin-top: 12px; color: #514767; }
.chapter-2 { background: radial-gradient(ellipse at 75% 50%, #b23b6940, transparent 55%); }
.chapter-2 .chapter-layout { min-height: 850px; grid-template-columns: .9fr 1.1fr; }
.giant-asterisk { position: absolute; font-size: 630px; line-height: 1; color: #ff7976; left: -8%; top: 0; transform: rotate(-12deg); opacity: .9; }
.experience-phone { width: 310px; position: absolute; top: 150px; left: 22%; border-radius: 30px; background: #1b2234; padding: 12px; box-shadow: 0 35px 80px #0007; transform: rotate(10deg); }
.phone-top { padding: 15px 5px 8px; font: 8px Mono; color: #c1b1ff; text-align: center; }
.experience-phone .floating-console { position: relative; width: 100%; bottom: auto; left: auto; transform: none; box-shadow: none; }
.experience-phone .showcase-screen { height: 350px; }
.experience-stage .scene-note { bottom: 35px; right: 0; color: #ff7976; }
.products { background: #f5f1e9; color: #101626; }
.products .section-head > p { color: #64646c; }
.products-grid { display: block; }
.product { min-height: 0; padding: 35px 0; display: grid; grid-template-columns: .7fr 1fr 1.5fr .6fr; gap: 35px; align-items: center; border: 0; border-top: 1px solid #10162630; border-radius: 0; }
.product img, .product:nth-child(2) img { margin: 0; height: 35px; max-width: 190px; align-self: center; }
.product p { color: #64646c; margin: 0; }
.product .small-label { color: #64646c; }
.product > span { color: #101626; margin: 0; }
.product:hover { transform: translateX(8px); border-color: #101626; }
#equipo { background: radial-gradient(ellipse at 10% 80%, #7461b02b, transparent 55%); }
.contact { background: #c8f135; }
.contact .wrap { position: relative; }
.contact-inner { max-width: 850px; position: relative; z-index: 2; }
.contact h2 { max-width: 850px; font-size: clamp(52px, 6.5vw, 92px); }
.contact .contact-inner > p:not(.eyebrow) { max-width: 490px; }
.robot-character { position: absolute; right: -8%; bottom: -65px; width: 42%; height: 650px; z-index: 1; transform: rotate(8deg); }
.floating-motion { position: fixed; bottom: 13px; left: 13px; z-index: 30; background: #070b18e8; color: #c1b1ff; }
@media (max-width: 1050px) {
  .chapter-layout { gap: 20px; }
  .chapter h3 { font-size: 55px; }
  .floating-console { width: 270px; left: -40px; }
  .portal { width: 78%; }
  .valentina-character { right: -17%; width: 75%; }
  .product { gap: 22px; grid-template-columns: .8fr 1fr 1.5fr; }
  .product > span { grid-column: 3; }
}
@media (max-width: 760px) {
  #ideas { padding-bottom: 75px; }
  #ideas .section-head { padding-left: 0; }
  .idea-universe { padding: 0; }
  .lia-stage { position: relative; width: 70%; height: 430px; margin: -20px auto 30px; left: auto; top: auto; }
  .lia-stage .scene-note { font-size: 8px; left: -15px; bottom: 0; }
  .problem-grid { grid-template-columns: 1fr; }
  .chapter-intro { padding-top: 70px; }
  .chapter-intro h2 { font-size: 47px; letter-spacing: -2.5px; }
  .chapter-layout, .chapter-1 .chapter-layout, .chapter-2 .chapter-layout { display: flex; flex-direction: column; align-items: stretch; gap: 15px; min-height: 0; padding-top: 60px; padding-bottom: 60px; }
  .chapter h3 { font-size: 53px; letter-spacing: -2.5px; max-width: 450px; }
  .chapter-copy > p:not(.chapter-index) { font-size: 16px; }
  .chapter-index { margin-bottom: 25px; }
  .chapter-stage { height: 620px; width: 100%; }
  .nico-character { right: -9%; width: 88%; height: 80%; }
  .floating-console { width: 260px; left: 0; bottom: 35px; }
  .nico-stage .scene-note { bottom: 5px; font-size: 8px; }
  .chapter-1 .chapter-copy { order: 0; }
  .chapter-1 .chapter-stage { order: 1; height: 650px; }
  .story-console { max-width: 310px; margin-bottom: 30px; }
  .portal { width: 65%; height: 510px; top: 15px; left: 2%; }
  .valentina-character { width: 66%; height: 72%; right: -10%; bottom: 35px; }
  .video-toggle { bottom: 0; }
  .chapter-2 .chapter-stage { height: 600px; }
  .giant-asterisk { font-size: 480px; left: -20%; top: 0; }
  .experience-phone { width: 270px; top: 85px; left: 13%; }
  .experience-stage .scene-note { bottom: 0; font-size: 8px; }
  .product { grid-template-columns: 1fr 1fr; padding: 30px 0; gap: 22px; }
  .product p { grid-column: 1 / -1; }
  .product > span { grid-column: 1 / -1; max-width: 200px; }
  .product img, .product:nth-child(2) img { max-width: 155px; height: 30px; }
  .contact-inner { padding-bottom: 380px; }
  .contact h2 { font-size: 52px; }
  .robot-character { height: 430px; width: 90%; right: -20%; bottom: -45px; }
  .contact-spark { top: auto; bottom: 180px; left: 5%; }
  .floating-motion { font-size: 8px; padding: 8px 10px; }
}

/* Etiqueta fuera del video: ninguna superposición sobre caras. */
.valentina-stage > .portal-label { top: 760px; left: 0; right: auto; color: #514767; text-align: left; text-shadow: none; font-size: 9px; }
@media(max-width:760px) { .valentina-stage > .portal-label { top: auto; bottom: 56px; left: 0; max-width: 190px; line-height: 1.6; } }

/* 3.1.1: controles legibles y el encuadre completo en móvil. */
.story-console .demo-tabs button { color: #382a57; }
.story-console .demo-tabs button[aria-selected=true] { background: #f5f1e9; color: #101626; }
@media(max-width:760px) { .portal { width: 78%; height: auto; aspect-ratio: 9 / 16; max-height: 510px; border-radius: 100px 100px 22px 22px; } .portal video { object-fit: contain; } }

/* El cierre no crea un contenedor desplazable al enfocar sus elementos. */
.contact { overflow: clip; }
@media(max-width:760px) { .robot-character { right: -2%; width: 86%; } }
/* 3.2 — Ritmo editorial: palabras, órbitas y pequeñas respuestas. */
.motion-word-mask {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding-block: .12em;
  margin-block: -.12em;
  max-width: 100%;
}
.motion-word { display: inline-block; transform-origin: 0 100%; }
.hero h1 .motion-word-mask, .hero h1 .motion-word {
  display: inline-block;
  color: inherit;
  text-shadow: inherit;
}
.hero h1 > .motion-word-mask { color: #f5f1e9; text-shadow: none; }
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.reading-progress i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #c8f135, #c1b1ff, #ff7976);
  transform: scaleX(0);
  transform-origin: left center;
}
.reading-progress b {
  position: absolute;
  left: 0;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8f135;
  box-shadow: 0 0 15px #c8f135;
}
.motion-interlude {
  background: #070b18;
  position: relative;
  padding: 100px 0 35px;
  overflow: clip;
}
.motion-interlude h2 {
  font-size: clamp(44px, 5.2vw, 74px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -3px;
  margin: 25px 0 10px;
}
.motion-interlude .eyebrow { color: #c1b1ff; }
.idea-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 3;
  object-fit: contain;
  margin: 0 auto;
  background: #070b18;
}
.motion-caption {
  font: 10px Mono, monospace;
  color: #929bb1;
  line-height: 1.7;
  margin-top: 15px;
}
.chapter-1::before {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: -28px;
  left: -5%;
  width: 110%;
  height: 65px;
  border-radius: 0 0 50% 50%;
  background: #070b18;
}
.chapter-2::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -5%;
  width: 110%;
  height: 60px;
  border-radius: 0 0 50% 50%;
  background: #c1b1ff;
  pointer-events: none;
}
.btn { transition: background .2s, color .2s, box-shadow .2s; }
.btn:focus-visible { box-shadow: 0 0 0 5px #c1b1ff33; text-decoration: underline; text-underline-offset: 4px; }
.product { transition: background .25s, border-color .25s; }
.product:hover, .product:focus-visible { background: #c8f13524; }
.product:hover > span b, .product:focus-visible > span b { transform: translate(4px, -4px); }
.product > span b { transition: transform .25s; }
.problem-button:focus-visible, .demo-tabs button:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .motion-interlude { padding-top: 65px; }
  .motion-interlude h2 { font-size: 45px; letter-spacing: -2px; }
  .idea-video { width: calc(100% + 30px); max-width: none; margin-left: -15px; }
  .motion-caption { font-size: 8px; max-width: 280px; }
  .chapter-1::before, .chapter-2::before { height: 35px; top: -15px; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
}

/* 3.2.1: palabras completas a 320px y órbitas integradas al fondo. */
.motion-interlude { isolation: isolate; }
.idea-video { mix-blend-mode: lighten; }
@media(max-width:760px) { .chapter h3 { font-size: clamp(38px, 13vw, 53px); } }
/* 3.3 — Órbita reactiva: acompaña, nunca reemplaza el cursor. */
.cursor-orbit {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  z-index: 80;
  border: 1px solid #c1b1ff90;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(calc(var(--pointer-x, -100px) - 28px), calc(var(--pointer-y, -100px) - 28px), 0);
  transition: opacity .2s, width .25s, border-color .25s, background .25s;
  background: radial-gradient(circle, #c1b1ff0d, transparent 70%);
  contain: layout style;
}
.cursor-orbit.is-visible { opacity: .8; }
.cursor-orbit i {
  position: absolute;
  inset: -8px 7px;
  border: 1px solid #c8f13560;
  border-radius: 50%;
  transform: rotate(35deg);
}
.cursor-orbit b {
  position: absolute;
  left: 24px;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8f135;
  transform-origin: 3px 30px;
  animation: cursor-satellite 5s linear infinite;
}
.cursor-orbit.is-interactive { border-color: #c8f135; background: #c8f1350c; }
@keyframes cursor-satellite { to { transform: rotate(360deg); } }
.motion-paused .cursor-orbit { opacity: 0; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-orbit { display: none; }
}
/* Controles separados del asistente, que ocupa la esquina derecha. */
.version { right: auto; left: 14px; bottom: 51px; }
/* 3.3.2: un movimiento propio del personaje, independiente de la escena y del cursor. */
.character-floating {
  animation: character-lift var(--float-duration, 3s) ease-in-out var(--float-delay, 0s) infinite alternate;
  animation-play-state: paused;
}
.character-floating.float-visible { animation-play-state: running; }
.motion-paused .character-floating { animation-play-state: paused !important; }
@keyframes character-lift {
  from { translate: 0 5px; }
  to { translate: 0 -24px; }
}
@media (max-width:760px) {
  .character-floating { animation-duration: var(--float-duration, 3s); }
}
@media (prefers-reduced-motion:reduce) {
  .character-floating { animation: none !important; translate: none !important; }
}