/* =========================================================
   STARVIS — Home 2.0 · "La transformación en directo"
   Dirección de arte: papel cálido + tinta + azul Starvis,
   tipografía editorial gigante (Geist), etiquetas mono,
   el punto azul "•" como sello de marca.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist.ttf') format('truetype-variations'),
       url('../fonts/Geist.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #F7F5F0;        /* papel cálido — fondo principal */
  --paper-deep: #EFEBE2;   /* papel sombreado */
  --ink: #14140F;          /* tinta cálida */
  --ink-soft: #3A3A32;
  --muted: #6E6E62;
  --line: rgba(20, 20, 15, 0.14);
  --blue: #2966CC;         /* azul Starvis */
  --blue-deep: #1F4FA0;
  --blue-soft: #4F86E0;
  --spark: #7CF5D4;        /* destello · lo vivo */
  --night: #101014;        /* tinta nocturna (manifiesto / blackpatt) */
  --font: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 260ms;
  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (no hidden): evita el desbordamiento lateral sin romper position: sticky */
  overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.sr-only,
.visually-hidden-input {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: fixed; top: -60px; left: 16px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--ink); color: #fff;
  border-radius: 8px;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

/* El sello: punto azul */
.dot { color: var(--blue); }

/* Etiqueta mono — código de marca */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.label::before { content: "•"; color: var(--blue); font-size: 14px; }
.label--light { color: rgba(255,255,255,0.55); }

/* Botón pastilla */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 640;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn-pill--blue {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(41,102,204,0.55);
}
.btn-pill--blue:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(41,102,204,0.6); }
.btn-pill--big { min-height: 54px; padding: 0 30px; font-size: 16.5px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px var(--pad);
}

.nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__brand img { display: block; }
.nav__dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(41,102,204,0.35);
  animation: dotBreath 3.2s ease-in-out infinite;
}
@keyframes dotBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41,102,204,0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(41,102,204,0); }
}
@media (prefers-reduced-motion: reduce) { .nav__dot { animation: none; } }

.nav__brand { justify-self: start; }
.nav__links { display: flex; gap: 4px; justify-self: center; }
.nav__links a {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav__links a:hover { background: rgba(20,20,15,0.06); color: var(--ink); }

.nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; justify-self: end; }
.nav__login {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav__login:hover { border-color: var(--ink); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px 10px;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav__burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t) var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mnav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--pad) 24px;
  border-bottom: 1px solid var(--line);
}
.mnav a {
  padding: 12px 4px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid rgba(20,20,15,0.06);
}
.mnav a.btn-pill { margin-top: 14px; border-bottom: 0; }
.mnav.is-open { display: flex; }

@media (max-width: 900px) {
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__links, .nav__login { display: none; }
  .nav__burger { display: flex; }
}

/* =========================================================
   1 · HERO — centrado, robot de protagonista
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  padding: calc(72px + clamp(20px, 4.5vh, 54px)) var(--pad) clamp(18px, 3vh, 32px);
}
.hero__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  max-width: 15ch;
  font-size: clamp(30px, 6.6vw, 92px);
  font-weight: 660;
  letter-spacing: -0.045em;
  line-height: 1.0;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--blue); }
.hero__line { display: block; animation: lineUp 900ms var(--ease) both; }
.hero__line:nth-child(2) { animation-delay: 80ms; }
.hero__line:nth-child(3) { animation-delay: 160ms; }
@keyframes lineUp {
  from { opacity: 0; transform: translateY(0.3em); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero__line { animation: none; } }

.hero__sub {
  margin-top: clamp(14px, 2vw, 22px);
  max-width: 54ch;
  font-size: clamp(15.5px, 1.45vw, 18.5px);
  color: var(--muted);
  animation: lineUp 900ms var(--ease) 220ms both;
}

.hero__cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.6vw, 30px);
  animation: lineUp 900ms var(--ease) 300ms both;
}

.btn-pill--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-pill--outline:hover { border-color: var(--ink); transform: translateY(-2px); }

/* Espacio reservado para el robot fijo */
.hero__stage { flex: 1 1 auto; width: 100%; min-height: 170px; }

@media (max-width: 620px) {
  .hero__title { font-size: clamp(30px, 8.4vw, 46px); max-width: 100%; }
  .hero__sub { font-size: 15px; }
  .hero__cta { width: 100%; }
  .hero__cta .btn-pill { flex: 1 1 46%; padding: 0 14px; font-size: 15px; }
}

@media (max-height: 860px) and (min-width: 621px) {
  .hero { padding-top: calc(66px + clamp(10px, 2.4vh, 30px)); }
  .hero__title { font-size: clamp(34px, 5.1vw, 66px); }
  .hero__sub { margin-top: 12px; font-size: 16px; }
  .hero__cta { margin-top: 16px; }
  .btn-pill--big { min-height: 48px; font-size: 15.5px; }
}

.hero__cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}
.hero__cue:hover { color: var(--ink); }
.hero__cue svg { width: 18px; height: 18px; animation: cueBob 2.2s ease-in-out infinite; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero__cue svg { animation: none; } }

/* =========================================================
   1b · PRUEBA · comparador antes / después
   ========================================================= */
.proof { padding: 0 var(--pad) clamp(20px, 3vw, 40px); }
.proof__inner { max-width: 1180px; margin: 0 auto; }

/* ---------- El comparador (flip) ---------- */
.flip {
  margin-top: clamp(30px, 4.5vw, 56px);
  --cut: 22%;
}
.flip__stage {
  position: relative;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -30px rgba(20,20,15,0.35);
  aspect-ratio: 16 / 8.4;
  min-height: 340px;
  background: #fff;
  user-select: none;
  touch-action: pan-y;
}

.flip__panel { position: absolute; inset: 0; }
.flip__before { clip-path: inset(0 calc(100% - var(--cut)) 0 0); z-index: 2; }

/* — La web ANTES: deliberadamente 2009 — */
.fake { position: absolute; inset: 0; display: flex; flex-direction: column; }
.fake--before {
  background: #F1EFE6;
  font-family: Georgia, 'Times New Roman', serif;
  color: #222;
}
.fb__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(14px, 3vw, 30px);
  background: #D9D4C3;
  border-bottom: 2px ridge #b9b39d;
}
.fb__title { font-size: clamp(15px, 1.8vw, 21px); font-weight: 700; }
.fb__links i { font-style: normal; margin-left: 12px; font-size: clamp(11px, 1.2vw, 13px); color: #0000CC; text-decoration: underline; }
.fb__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
  padding: clamp(10px, 2vw, 22px);
  text-align: center;
}
.fb__welcome { font-size: clamp(13px, 1.6vw, 18px); font-weight: 700; color: #7A1F1F; }
.fb__img {
  width: min(46%, 260px);
  padding: clamp(10px, 2.4vw, 26px) 0;
  border: 1px dashed #999;
  background: #E4E0D2;
  color: #777;
  font-family: var(--mono);
  font-size: clamp(9px, 1vw, 11px);
}
.fb__text { max-width: 52ch; font-size: clamp(10.5px, 1.15vw, 13px); color: #444; }
.fb__btn {
  padding: 4px 14px;
  background: linear-gradient(#FDFDFB, #C9C4B0);
  border: 2px outset #DEDAC8;
  font-size: clamp(10px, 1.1vw, 12px);
}
.fb__marquee { font-size: clamp(9.5px, 1vw, 11.5px); color: #B03030; }

/* — La web DESPUÉS: Starvis — */
.fake--after {
  background: #2E120B;
  color: #F7EFE2;
}
.fa__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.fa__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,8,4,0.45) 0%, rgba(20,8,4,0.10) 34%, rgba(20,8,4,0.22) 68%, rgba(20,8,4,0.62) 100%),
    linear-gradient(270deg, rgba(20,8,4,0.60) 0%, transparent 55%);
}
.fa__nav, .fa__hero, .fa__strip { position: relative; z-index: 2; }

.fa__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 1.6vw, 16px) clamp(14px, 3vw, 30px);
}
.fa__logo { font-weight: 700; letter-spacing: 0.34em; font-size: clamp(12px, 1.4vw, 15px); }
.fa__logo-dot { color: var(--spark); letter-spacing: 0; }
.fa__links i { font-style: normal; margin-left: clamp(8px, 1.6vw, 18px); font-size: clamp(10px, 1.1vw, 12.5px); color: rgba(247,239,226,0.78); }

.fa__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(8px, 1.6vw, 16px);
  padding: 0 clamp(16px, 3.4vw, 40px);
}
.fa__kicker { font-family: var(--mono); font-size: clamp(8.5px, 0.95vw, 11px); letter-spacing: 0.22em; color: rgba(247,239,226,0.7); }

.fa__mark {
  width: clamp(150px, 26vw, 330px);
  height: auto;
  filter: drop-shadow(0 6px 26px rgba(20,8,4,0.5));
}

/* Tagline a juego con el logo: crema, caps, punto verde */
.fa__big {
  font-size: clamp(11px, 1.5vw, 19px);
  font-weight: 640;
  letter-spacing: 0.22em;
  line-height: 1.3;
  color: #EFE5C6;
  text-shadow: 0 2px 18px rgba(20,8,4,0.6);
}
.fa__dot { color: #4E9180; }

/* Widget de reserva */
.fa__book {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: clamp(2px, 0.6vw, 6px);
}
.fa__book-field {
  display: inline-flex;
  align-items: center;
  padding: clamp(5px, 0.9vw, 9px) clamp(10px, 1.6vw, 16px);
  border-radius: 999px;
  border: 1px solid rgba(247,239,226,0.35);
  background: rgba(20,8,4,0.45);
  backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 0.04em;
}
.fa__book-field::after { content: "▾"; margin-left: 8px; opacity: 0.55; font-size: 0.8em; }
.fa__book-cta {
  display: inline-flex;
  align-items: center;
  padding: clamp(5px, 0.9vw, 9px) clamp(14px, 2vw, 22px);
  border-radius: 999px;
  background: #F7EFE2;
  color: #2E120B;
  font-size: clamp(10px, 1.15vw, 13px);
  font-weight: 750;
}

.fa__strip {
  display: flex;
  gap: clamp(10px, 2vw, 24px);
  flex-wrap: wrap;
  padding: clamp(8px, 1.4vw, 14px) clamp(16px, 3.4vw, 40px);
  border-top: 1px solid rgba(247,239,226,0.18);
  background: rgba(20,8,4,0.35);
  font-family: var(--mono);
  font-size: clamp(8.5px, 0.95vw, 11px);
  letter-spacing: 0.08em;
  color: rgba(247,239,226,0.75);
}

.flip__stamp {
  position: absolute;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(46px, 6.4vw, 62px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247,239,226,0.66);
}
.flip__stamp i { font-style: normal; line-height: 1; }
.flip__stamp img { display: block; width: 64px; height: auto; opacity: 0.92; }

/* Mango */
.flip__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--cut);
  z-index: 4;
  width: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
}
.flip__handle-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--blue);
}
.flip__handle-knob {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 10px 26px -8px rgba(41,102,204,0.7);
  transition: transform var(--t) var(--ease);
}
.flip__handle:hover .flip__handle-knob,
.flip__handle:focus-visible .flip__handle-knob { transform: scale(1.08); }

.flip__tag {
  position: absolute;
  bottom: clamp(10px, 1.6vw, 16px);
  z-index: 5;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.flip__tag--before { left: clamp(10px, 1.6vw, 16px); background: rgba(255,255,255,0.85); color: #666; border: 1px solid rgba(0,0,0,0.12); }
.flip__tag--after { right: clamp(10px, 1.6vw, 16px); background: rgba(16,16,20,0.85); color: #fff; border: 1px solid rgba(124,245,212,0.4); }
.flip__tag--after b { color: var(--spark); }

@media (max-width: 700px) {
  .flip__stage { aspect-ratio: auto; height: 380px; }
  .fb__text { display: none; }
  .flip__stamp { display: none; }
}

/* =========================================================
   2 · LAS CUATRO CAPAS
   ========================================================= */
.stack { --p: 0; position: relative; }
.stack__sticky { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }
.stack__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(50px, 8vh, 90px) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.stack__copy h2 {
  margin: 14px 0 16px;
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1.0;
}
.stack__lede { max-width: 40ch; color: var(--muted); font-size: clamp(15px, 1.35vw, 17px); }

/* leyenda con conector */
.stack__legend { margin-top: clamp(26px, 4vw, 48px); display: grid; gap: clamp(12px, 1.6vw, 22px); }
.stack__legend li {
  display: grid;
  grid-template-columns: 34px minmax(0, auto) 1fr auto;
  align-items: center;
  gap: 4px 10px;
  transition: opacity var(--t) var(--ease);
}
.stack__legend i {
  grid-row: span 2;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gray-2, #9CA3AF);
  font-style: normal;
  transition: color var(--t) var(--ease);
}
.stack__legend b {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 620;
  letter-spacing: -0.015em;
  color: var(--muted);
  transition: color var(--t) var(--ease);
}
.stack__legend li::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  height: 1px;
  background: var(--line);
  transition: background var(--t) var(--ease);
}
.stack__legend li > u {
  grid-column: 4;
  grid-row: 1;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #C9C9C0;
  text-decoration: none;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.stack__legend span { grid-column: 2 / -1; grid-row: 2; font-size: 13.5px; color: var(--gray-2, #9CA3AF); }

.stack__legend .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-2, #9CA3AF);
  vertical-align: 1px;
  white-space: nowrap;
}
.stack__legend .tag--base {
  border-color: rgba(41,102,204,.32);
  background: rgba(41,102,204,.07);
  color: var(--blue);
}

.stack__note {
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: 46ch;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.55;
  color: var(--gray-2, #9CA3AF);
}
.stack__note b { color: var(--ink); font-weight: 640; }

.stack__legend li.is-on i,
.stack__legend li.is-on b { color: var(--ink); }
.stack__legend li.is-on span { color: var(--muted); }
.stack__legend li.is-now i,
.stack__legend li.is-now b { color: var(--blue); }
.stack__legend li.is-now::after { background: var(--blue); }
.stack__legend li.is-now > u { background: var(--blue); transform: scale(1.35); }

/* --- Escenario de capas --- */
.stack__stage {
  position: relative;
  aspect-ratio: 5 / 4;
  padding-left: clamp(70px, 8vw, 120px);
  padding-right: clamp(26px, 3vw, 52px);
  perspective: 1500px;
  --spread: clamp(52px, 8.5vh, 96px);
}

/* espina que atraviesa las capas */
.spine {
  position: absolute;
  left: calc(50% + clamp(14px, 2vw, 34px));
  top: 4%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(41,102,204,.5) 12%, rgba(41,102,204,.5) 88%, transparent);
  z-index: 6;
  opacity: calc(0.25 + var(--p) * 0.75);
}

.lyr {
  position: absolute;
  left: clamp(70px, 8vw, 120px);
  right: clamp(26px, 3vw, 52px);
  top: 29%;
  height: 35%;
  transform:
    translate3d(0, calc(var(--dy) * (1 - var(--p))), 0)
    rotateX(calc(11deg + 3deg * (1 - var(--p))))
    scale(calc(1 - 0.14 * (1 - var(--p))));
  transform-style: preserve-3d;
  will-change: transform;
  opacity: calc(1 - max(0, (var(--p) - 0.74)) * 3.9);
}
.lyr--1 { --dy: calc(var(--spread) * -3.1); z-index: 1; }
.lyr--2 { --dy: calc(var(--spread) * -1.05); z-index: 2; }
.lyr--3 { --dy: calc(var(--spread) *  1.05); z-index: 3; }
.lyr--4 { --dy: calc(var(--spread) *  3.1); z-index: 4; }

.lyr__tag {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: calc(1 - var(--p) * 1.6);
}

.card {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(20,20,15,0.5);
}


/* 01 · plano */
.card--plan { background: #FBFAF7; border: 1px solid rgba(41,102,204,.28); }
.plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan__t text { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }

/* 02 · diseño */
.card--design {
  background: #F4EFE4;
  border: 1px solid rgba(20,20,15,.12);
  display: grid;
  grid-template-columns: 1fr 1.05fr 1.25fr;
  gap: clamp(10px, 1.4vw, 22px);
  padding: clamp(12px, 1.7vw, 22px);
}
.dcol { display: flex; flex-direction: column; gap: 7px; justify-content: center; min-width: 0; }
.dtype { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px, 4vw, 52px); line-height: .9; color: #241A12; }
.dline { height: 4px; border-radius: 3px; background: rgba(36,26,18,.16); }
.dline--s { width: 62%; }
.dmono { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(36,26,18,.5); }
.dsw { display: flex; gap: 6px; }
.dsw i { width: clamp(20px, 2.4vw, 32px); height: clamp(20px, 2.4vw, 32px); border-radius: 7px; background: var(--c); }
.dbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.dbtn { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(36,26,18,.28); font-size: 10.5px; font-weight: 650; color: #241A12; }
.dbtn--solid { background: #241A12; color: #F4EFE4; border-color: #241A12; }
.dradius { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(36,26,18,.2); align-self: flex-start; }
.dradius b { font-size: 12px; color: #241A12; }
.dradius small { font-family: var(--mono); font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(36,26,18,.5); }
.dcol--art { position: relative; }
.dclaim { font-size: clamp(15px, 1.9vw, 26px); font-weight: 680; letter-spacing: -.03em; line-height: 1; color: #241A12; }
.dimg { height: clamp(26px, 4vh, 46px); border-radius: 8px; background: rgba(36,26,18,.12); }

/* 03 · tecnología */
.card--tech {
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.card--tech::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #16223C 0%, #0D1424 100%),
    repeating-linear-gradient(90deg, rgba(79,134,224,.10) 0 1px, transparent 1px 22px);
  background-blend-mode: normal, overlay;
  border: 1px solid rgba(79,134,224,.34);
}
.card--tech > * { position: relative; }

.tbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: clamp(6px, .8vw, 10px) clamp(10px, 1.4vw, 16px);
  border-bottom: 1px solid rgba(79,134,224,.26);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(220,232,250,.62);
}
.tbar i { width: 6px; height: 6px; border-radius: 999px; background: rgba(79,134,224,.5); }
.tbar i:first-child { background: var(--blue-soft); }
.tbar em { margin-left: 6px; font-style: normal; }
.tbar b {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(79,134,224,.45);
  color: #9CC2FF;
  font-weight: 500;
}
.tbar b::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--blue-soft); animation: livePulse 1.8s ease-in-out infinite; }

.tbody {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 13px);
  padding: clamp(10px, 1.4vw, 18px) clamp(12px, 1.7vw, 22px);
}
.tflow { display: flex; align-items: center; gap: clamp(6px, 1vw, 12px); }
.tnode {
  flex: 1;
  padding: clamp(6px, 1vw, 10px) clamp(8px, 1.2vw, 14px);
  border-radius: 8px;
  border: 1px solid rgba(79,134,224,.42);
  background: rgba(79,134,224,.13);
  color: #E4EEFF;
  font-family: var(--mono);
  font-size: clamp(9.5px, 1vw, 11.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.tnode--ghost { color: rgba(228,238,255,.6); border-style: dashed; background: transparent; }
.tarrow { flex: 0 0 clamp(14px, 2vw, 30px); height: 1px; background: rgba(79,134,224,.6); position: relative; }
.tarrow::after { content: ""; position: absolute; right: -1px; top: -2.5px; border: 3px solid transparent; border-left-color: rgba(79,134,224,.85); }
.tarrow--dash { background: repeating-linear-gradient(90deg, rgba(79,134,224,.55) 0 4px, transparent 4px 8px); }

/* 04 · IA */
.card--ia {
  border: 0;
  padding: clamp(12px, 1.7vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.card--ia { border-radius: 22px; }
.card--ia::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 55%, rgba(30,199,182,.34), transparent 44%),
    radial-gradient(circle at 12% 18%, rgba(30,199,182,.12), transparent 40%),
    linear-gradient(165deg, #10201C 0%, #080D0C 100%);
  border: 1px solid rgba(30,199,182,.42);
  box-shadow: inset 0 0 60px rgba(30,199,182,.10);
}
.card--ia > * { position: relative; }
.imono { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--spark); }
.ichat { display: flex; flex-direction: column; gap: 7px; max-width: 74%; }
.ibub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: clamp(6px, 0.9vw, 10px) clamp(10px, 1.2vw, 15px);
  border-radius: 16px 16px 16px 5px;
  background: rgba(255,255,255,.09);
  color: #E8F3F0;
  font-size: clamp(10px, 1.05vw, 12.5px);
}
.ibub i { font-style: normal; font-family: var(--mono); font-size: 8.5px; color: rgba(232,243,240,.5); }
.ibub--ok { background: #fff; color: #0A100F; font-weight: 650; border-radius: 16px 16px 5px 16px; align-self: flex-start; }
.ityping { display: inline-flex; gap: 4px; align-items: center; padding: 8px 12px; border-radius: 16px 16px 16px 5px; background: rgba(255,255,255,.07); align-self: flex-start; }
.ityping em { width: 5px; height: 5px; border-radius: 999px; background: rgba(124,245,212,.85); animation: livePulse 1.4s ease-in-out infinite; }
.ityping em:nth-child(2) { animation-delay: .18s; }
.ityping em:nth-child(3) { animation-delay: .36s; }
.ibub--ok b { color: var(--blue); }
.iorb { position: absolute; right: clamp(14px, 2vw, 30px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; }
.iorb svg { width: clamp(48px, 7vw, 96px); height: clamp(24px, 3vw, 44px); }
.iorb i {
  width: clamp(22px, 2.6vw, 36px); height: clamp(22px, 2.6vw, 36px);
  border-radius: 999px;
  background: radial-gradient(circle at 40% 35%, #7CF5D4, #14A894);
  box-shadow: 0 0 22px rgba(30,199,182,.6);
  animation: livePulse 2.4s ease-in-out infinite;
}

/* resultado: la web terminada */
.ghost {
  position: absolute;
  left: clamp(70px, 8vw, 120px);
  right: clamp(26px, 3vw, 52px);
  bottom: 3%;
  height: 21%;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: calc((1 - var(--p)) * 0.8);
}
.ghost__bar { display: flex; gap: 5px; }
.ghost__bar i { width: 7px; height: 7px; border-radius: 999px; background: rgba(20,20,15,.14); }
.ghost__l { height: 7px; border-radius: 4px; background: rgba(20,20,15,.08); }
.ghost__l--s { width: 55%; }
.ghost__l--xs { width: 32%; }

.result {
  --r-paper: #F6F1E7;
  --r-ink: #17293C;
  --r-terra: #B4553A;
  --r-sage: #8B9A78;
  --r-serif: ui-serif, "New York", Georgia, "Iowan Old Style", "Times New Roman", serif;

  position: absolute;
  left: clamp(70px, 8vw, 120px);
  right: clamp(26px, 3vw, 52px);
  top: 14%;
  height: 66%;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--r-ink);
  background: var(--r-paper);
  box-shadow: 0 34px 70px -28px rgba(20,20,15,.42), inset 0 0 0 1px rgba(23,41,60,.09);
  transform: rotateX(11deg);
  opacity: calc(max(0, (var(--p) - 0.72)) * 3.6);
  z-index: 5;
}

/* barra superior */
.rtop {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(9px, 1.2vw, 15px) clamp(14px, 1.9vw, 24px);
}
.rbrand {
  white-space: nowrap;
  font-family: var(--r-serif);
  font-size: clamp(12px, 1.35vw, 18px);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rlinks {
  display: inline-flex; align-items: center; gap: clamp(6px, .95vw, 14px);
  margin-left: auto;
  font-size: clamp(7px, .76vw, 9.5px);
  color: rgba(23,41,60,.72);
}
.rlinks i { font-style: normal; white-space: nowrap; }
.rcta {
  white-space: nowrap;
  padding: clamp(5px, .7vw, 9px) clamp(11px, 1.5vw, 19px);
  border-radius: 999px;
  background: var(--r-terra);
  color: #FBF7EF;
  font-size: clamp(7.5px, .84vw, 10.5px);
  font-weight: 600;
}

/* cuerpo */
.rbody {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(10px, 1.6vw, 26px);
  padding: 0 clamp(14px, 1.9vw, 24px);
}
.rleft {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(3px, .48vw, 6px);
  min-width: 0;
}
.rkick {
  font-family: var(--mono);
  font-size: clamp(6.5px, .74vw, 8.5px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--r-terra);
}
.rbig {
  font-family: var(--r-serif);
  font-size: clamp(15px, 2.1vw, 30px);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.14;
}
.rbig em { font-style: normal; color: var(--r-terra); }
.rlede {
  font-size: clamp(8px, .86vw, 10.5px);
  line-height: 1.42;
  color: rgba(23,41,60,.74);
}
.ractions { display: flex; align-items: center; gap: clamp(9px, 1.3vw, 18px); margin-top: clamp(3px, .5vw, 6px); }
.rbtn {
  white-space: nowrap;
  padding: clamp(6px, .8vw, 10px) clamp(11px, 1.5vw, 19px);
  border-radius: 999px;
  background: var(--r-ink);
  color: #F6F1E7;
  font-size: clamp(8px, .9vw, 11px);
  font-weight: 600;
}
.rlink { white-space: nowrap; font-size: clamp(8px, .9vw, 11px); font-weight: 600; }
.rlink b { font-weight: 400; }
.rstamp {
  align-self: flex-start;
  margin-top: clamp(2px, .35vw, 5px);
  padding: clamp(3px, .45vw, 6px) clamp(8px, 1.1vw, 14px);
  border: 1px dashed rgba(23,41,60,.34);
  border-radius: 3px;
  transform: rotate(-2.4deg);
  font-family: var(--r-serif);
  font-style: italic;
  font-size: clamp(7px, .8vw, 10px);
  color: rgba(23,41,60,.64);
}

/* collage */
.rart { position: relative; min-width: 0; }
.rart__ph {
  position: absolute;
  border: 4px solid #FBF8F1;
  box-shadow: 0 10px 22px -12px rgba(23,41,60,.5);
}
.rart__ph--1 {
  left: 18%; top: 4%; width: 64%; height: 52%;
  background:
    linear-gradient(200deg, rgba(255,255,255,.24), transparent 46%),
    linear-gradient(150deg, #C3C7B0 0%, #98A587 46%, #6E7D5E 100%);
}
.rart__ph--2 {
  left: 40%; top: 38%; width: 58%; height: 47%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 40%),
    linear-gradient(160deg, #E7DBC6 0%, #C6A882 58%, #9C7B54 100%);
}
.rart__ph--3 {
  left: 8%; top: 54%; width: 35%; height: 32%;
  background:
    linear-gradient(140deg, #DED6C6 0%, #B3B79E 52%, #8E9A7C 100%);
}
.rart__mustard {
  position: absolute;
  left: 6%; top: 2%; width: 15%; height: 34%;
  background: #E9C766;
  clip-path: polygon(0 0, 100% 4%, 92% 96%, 8% 100%);
}
.rart__terra {
  position: absolute;
  right: 0; top: 32%; width: 9%; height: 40%;
  background: #B4553A;
  clip-path: polygon(14% 0, 100% 3%, 100% 97%, 0 100%);
}
.rart__leaf {
  position: absolute;
  left: 0; bottom: 8%;
  width: clamp(34px, 4.4vw, 58px); height: auto;
  opacity: .5;
}

/* pie */
.rstrip {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(7px, .95vw, 11px) clamp(14px, 1.9vw, 24px);
  border-top: 1px solid rgba(23,41,60,.12);
  font-family: var(--mono);
  font-size: clamp(6.5px, .74vw, 8.5px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(23,41,60,.5);
}
.rstrip i { font-style: normal; position: relative; }
.rstrip i + i::before {
  content: "·";
  position: absolute; left: calc(clamp(16px, 3vw, 48px) / -2); transform: translateX(-50%);
  opacity: .6;
}

/* lo que aporta Starvis, flotando por encima */
.rpill {
  position: absolute;
  right: 11%;
  top: 26%;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: clamp(6px, .8vw, 9px) clamp(10px, 1.4vw, 16px);
  border-radius: 999px;
  background: #FFFDF8;
  font-size: clamp(8px, .88vw, 10.5px);
  font-weight: 600;
  box-shadow: 0 16px 30px -14px rgba(23,41,60,.55);
}
.rbub {
  position: absolute;
  right: 4%;
  bottom: 16%;
  z-index: 4;
  max-width: 30%;
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.4vw, 16px);
  border-radius: 10px;
  background: #FFFDF8;
  box-shadow: 0 16px 34px -16px rgba(23,41,60,.6);
  font-size: clamp(8px, .88vw, 10.5px);
  line-height: 1.35;
}
.rbub b {
  position: absolute;
  right: 8px; bottom: -11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #CFDAB8;
  color: #33452B;
  font-family: var(--mono);
  font-size: clamp(6.5px, .72vw, 8px);
  font-weight: 400;
  letter-spacing: .06em;
}

.stack__done {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: calc((var(--p) - 0.7) * 3.4);
  z-index: 7;
}
.stack__done b { color: var(--blue); }

/* riel de progreso */
.srail { position: absolute; right: -6px; top: 12%; bottom: 12%; display: flex; align-items: center; gap: 10px; }
.srail__txt {
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gray-2, #9CA3AF);
}
.srail__track { position: relative; width: 1px; align-self: stretch; background: var(--line); }
.srail__track i {
  position: absolute;
  left: -3px;
  top: calc(var(--p) * 100%);
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--blue);
  transform: translateY(-50%);
}

@media (max-width: 1024px) {
  .stack__inner { grid-template-columns: 1fr; gap: 30px; }
  .stack__sticky { position: static; min-height: 0; }
  .srail, .spine, .ghost { display: none; }

  /* las capas pasan a columna, cada una con su etiqueta */
  .stack__stage {
    --p: 1;
    aspect-ratio: auto;
    order: 2;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .lyr {
    position: relative;
    left: auto; right: auto; top: auto;
    height: clamp(150px, 34vw, 200px);
    margin-top: 24px;
    transform: none;
    opacity: 1;
  }
  .lyr__tag { left: 0; right: auto; top: -24px; transform: none; opacity: 1; }
  .result {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    height: clamp(180px, 44vw, 250px);
    transform: none;
    opacity: 1;
  }
  /* collage y texto se apilan */
  .rbody { grid-template-columns: 1fr; gap: 0; }
  .rart { display: none; }
  .rlinks { display: none; }
  .rcta { margin-left: auto; }
  .rleft { justify-content: center; }
  .rpill { top: 16%; right: clamp(10px, 3vw, 18px); }
  .rbub { max-width: 58%; bottom: 20%; right: clamp(10px, 3vw, 18px); }
  .rstamp { display: none; }
  .stack__done { position: static; transform: none; opacity: 1; display: block; text-align: center; margin-top: 14px; }
  .card--design { grid-template-columns: 1fr 1fr; }
  .dcol--art { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
  .dcol--art .dline { flex: 1; }
}

@media (max-width: 620px) {
  .card--design { grid-template-columns: 1fr; }
  .dcol--type, .dradius, .dimg { display: none; }
  .ichat { max-width: 100%; }
  .rlede { display: none; }
  .rstrip i:nth-child(n+4) { display: none; }
  .iorb { display: none; }
  .tnode { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .stack__sticky { position: static; }
  .stack { --p: 1 !important; }
}

/* =========================================================
   3 · TRANSFORMACIONES
   ========================================================= */
/* ======== BANDA DE COMPROMISO ======== */
.pledge {
  margin-top: clamp(6px, 1vw, 16px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pledge__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(30px, 4.4vw, 60px) var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3.4vw, 54px);
}
.pledge__item {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 13px);
  padding-left: clamp(18px, 2.4vw, 34px);
  border-left: 1px solid var(--line);
}
.pledge__item:first-child { padding-left: 0; border-left: 0; }
.pledge__item b {
  font-size: clamp(30px, 4.2vw, 58px);
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: .95;
  color: var(--ink);
}
.pledge__item:first-child b { color: var(--blue); }
.pledge__item span {
  max-width: 26ch;
  font-size: clamp(13px, 1.1vw, 15.5px);
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 860px) {
  .pledge__inner { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 30px); }
  .pledge__item { padding-left: 0; border-left: 0; padding-top: clamp(18px, 4vw, 26px); border-top: 1px solid var(--line); }
  .pledge__item:first-child { padding-top: 0; border-top: 0; }
  .pledge__item span { max-width: none; }
}

/* =========================================================
   STARVIS — Sección 3 · TRANSFORMACIONES (Propuesta C · "portal de casos")
   Reemplaza a la sección .work actual de index.html.
   Depende de los tokens de home.css (--paper, --ink, --blue, --spark, --mono…).
   Tokens propios de cada caso: se pasan por data-theme en el <section>.
   ========================================================= */

.portal {
  --pt-bg: var(--paper);
  --pt-ink: var(--ink);
  --pt-accent: var(--blue);
  --pt-line: rgba(20, 20, 15, 0.14);
  --pt-muted: #6E6E62;
  position: relative;
  background: var(--pt-bg);
  color: var(--pt-ink);
}

/* Tema del caso 01 · PAPIK (crema + verde bosque) */
.portal[data-case="papik"] {
  --pt-bg: #F4F2EA;
  --pt-ink: #14140F;
  --pt-accent: #3F6B4E;
  --pt-accent-deep: #1F3A2B;
  --pt-line: rgba(31, 58, 43, 0.16);
  --pt-muted: #5B6B5F;
}
/* Tema del caso 02 · BLACKPATT (noche + turquesa) */
.portal[data-case="blackpatt"] {
  --pt-bg: #07080C;
  --pt-ink: #FFFFFF;
  --pt-accent: #1EC7B6;
  --pt-accent-deep: #1EC7B6;
  --pt-line: rgba(255, 255, 255, 0.14);
  --pt-muted: rgba(255, 255, 255, 0.5);
}

/* ---------- Vistas ---------- */
.portal__view { display: none; }
.portal__view.is-active { display: block; }

/* =========================================================
   ÍNDICE
   ========================================================= */
.portal__head { padding: clamp(56px, 7vw, 96px) var(--pad) 0; max-width: 1440px; margin: 0 auto; }
.portal__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pt-muted);
}
.portal__title {
  margin: 22px 0 0;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 660;
  /* pretty evita huerfanas cuando .brk se oculta y el titular envuelve solo */
  text-wrap: pretty;
}
.portal__title em { font-style: normal; color: var(--blue); }
.portal__meta {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(24px, 3vw, 38px);
}
.portal__lede { margin: 0; flex: 0 1 46ch; font-size: 17px; line-height: 1.55; color: var(--pt-muted); }
.portal__count { flex: 1; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 14px; color: var(--pt-muted); }
/* regla que cose el lede con el contador: el hueco pasa a ser estructura,
   no un vacio. Mismo recurso que .prow dentro de los casos. */
.portal__count::before { content: ""; flex: 1; height: 1px; min-width: 24px; background: var(--pt-line); }
.portal__count b { color: var(--ink); }
.portal__count i { position: relative; width: 180px; height: 2px; background: var(--pt-line); }
.portal__count i em { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--blue); }

/* ---- Tarjetas de caso ---- */
/* Las dos tarjetas viven dentro de UN marco: sin gap, sin esquinas sueltas.
   El corte entre ambas lo hace el propio contraste crema / noche. */
.portal__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1440px;
  /* width en vez de padding: el padding quedaría dentro del marco */
  width: calc(100% - var(--pad) * 2);
  margin: clamp(32px, 4vw, 48px) auto 0;
  border: 1px solid var(--pt-line);
  border-radius: 18px;
  overflow: hidden;
}

.pcard {
  position: relative;
  height: 440px;
  padding: 30px 34px 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  background: #E4EBE1;
  display: flex;
  flex-direction: column;
  font: inherit;
  color: var(--ink);
  transition: filter var(--t) var(--ease);
}
.pcard--dark {
  /* mismo degradado que el escenario del caso 02, para que la tarjeta ya
     anticipe el ambiente en el que entras al abrirla */
  background: radial-gradient(120% 95% at 72% 8%, #1B2942 0%, #0D1018 48%, #07080C 100%);
  color: #fff;
}
.pcard:hover { filter: brightness(1.02); }
.pcard--dark:hover { filter: brightness(1.18); }
.pcard__wash { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.22; }
/* La foto de vela vive dentro de tall-blackpatt.jpg entre el 28% y el 46% de
   su alto; el encuadre la centra ahi en vez de en el jersey. */
.pcard--dark .pcard__wash { opacity: 0.28; background-position: 50% 37%; }
/* velo para que el logo y el sector se lean sobre la foto */
.pcard__wash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#E4EBE1 12%, rgba(228,235,225,0) 60%); }
.pcard--dark .pcard__wash::after { background: linear-gradient(#07080C 8%, rgba(7,8,12,0) 62%); }

/* La captura se disuelve en la tarjeta en vez de acabar en corte seco.
   Va sobre .pcard (no sobre la ventana) para que el movil se funda igual. */
.pcard::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 108px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(rgba(228,235,225,0), #E4EBE1 88%);
}
.pcard--dark::after { background: linear-gradient(rgba(7,8,12,0), #07080C 88%); }

/* ---- Cabecera de la tarjeta: número, logo del cliente, sector ---- */
.pcard__top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.pcard__brand { display: block; min-width: 0; }
.pcard__brand > b {
  display: block;
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.2em; color: var(--pt-muted);
}
.pcard--dark .pcard__brand > b { color: rgba(255,255,255,.5); }
/* Alturas distintas a propósito: el logo de Papik es apaisado (3.8:1) y el de
   Blackpatt casi cuadrado (1.5:1). A la misma altura, el segundo desaparece. */
.pcard__logo { display: block; height: 30px; width: auto; margin-top: 12px; }
.pcard--dark .pcard__logo { height: 48px; margin-top: 4px; }
.pcard__brand em {
  display: block; margin-top: 12px; font-style: normal;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pt-muted);
}
.pcard--dark .pcard__brand em { color: rgba(255,255,255,.5); }

/* ---- La llamada: pastilla de verdad, no un renglón ---- */
.pcard__go {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(31,58,43,.3);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1F3A2B; white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pcard__go b { font-weight: 400; transition: transform var(--t) var(--ease); }
.pcard--dark .pcard__go { border-color: rgba(124,245,212,.45); color: var(--spark); }
.pcard:hover .pcard__go { background: #1F3A2B; border-color: #1F3A2B; color: #E4EBE1; }
.pcard--dark:hover .pcard__go { background: var(--spark); border-color: var(--spark); color: #0A0B10; }
.pcard:hover .pcard__go b { transform: translateX(3px); }

/* ---- La captura, dentro de una ventana de navegador ---- */
.pcard__win {
  position: relative;
  display: block;
  flex: 1;
  margin-top: 26px;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(20,20,15,.18);
  border-bottom: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 80px -34px rgba(20,20,15,.55);
  transition: transform var(--t) var(--ease);
  /* columna: la captura estira y recorta, si no queda papel blanco debajo */
  display: flex;
  flex-direction: column;
}
.pcard--dark .pcard__win { border-color: rgba(255,255,255,.16); box-shadow: 0 40px 80px -34px rgba(0,0,0,.85); }
.pcard:hover .pcard__win { transform: translateY(-6px); }

.pcard__bar {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  background: #EDEBE6;
  border-bottom: 1px solid rgba(20,20,15,.1);
}
.pcard--dark .pcard__bar { background: #1A1B22; border-bottom-color: rgba(255,255,255,.09); }
.pcard__bar i { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.pcard__bar i:nth-child(1) { background: #FF5F57; }
.pcard__bar i:nth-child(2) { background: #FEBC2E; }
.pcard__bar i:nth-child(3) { background: #28C840; }
.pcard__bar em {
  margin-left: 10px; padding: 3px 12px; border-radius: 999px;
  background: rgba(20,20,15,.06);
  font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard--dark .pcard__bar em { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
.pcard__shot { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top left; }

.pcard__phone {
  position: absolute; right: 26px; bottom: 0; width: 128px; z-index: 2;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(20,20,15,.25); border-bottom: 0;
  box-shadow: 0 30px 60px -20px rgba(20,20,15,.55);
  transition: transform var(--t) var(--ease);
}
.pcard--dark .pcard__phone { border-color: rgba(255,255,255,.22); box-shadow: 0 30px 60px -20px rgba(0,0,0,.75); }
.pcard:hover .pcard__phone { transform: translateY(-6px); }

/* =========================================================
   SALA DEL CASO
   ========================================================= */
.pcase { min-height: 940px; display: flex; flex-direction: column; background: var(--pt-bg); color: var(--pt-ink); }
.pcase__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px var(--pad) 0;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pt-muted);
}
.pcase__nav { display: flex; align-items: center; gap: 18px; letter-spacing: 0.16em; }
.pcase__nav button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pt-ink);
}
.pcase__nav button[disabled] { color: color-mix(in srgb, var(--pt-ink) 40%, transparent); cursor: default; }
.pcase__nav .is-close { border: 1px solid var(--pt-line); border-radius: 999px; padding: 7px 14px; }
.pcase__sep { width: 1px; height: 16px; background: var(--pt-line); }

.pcase__body {
  flex: 1;
  display: grid;
  grid-template-columns: 474px minmax(0, 1fr);
  padding: 20px 0 0;
}
.pcase__intro { padding: 30px 40px 0 var(--pad); }
.pcase__logo { display: block; height: 56px; width: auto; }
.pcase__claim {
  margin: 34px 0 0;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05; letter-spacing: -0.035em; font-weight: 660;
}
.pcase__claim em { font-style: normal; color: var(--pt-accent); }

/* Línea de tiempo ERA / CREAMOS / EL GIRO */
.ptime { margin: 38px 0 0; padding-left: 26px; list-style: none; display: grid; gap: 26px; border-left: 1px solid var(--pt-line); }
.ptime li { position: relative; }
.ptime li::before {
  content: ""; position: absolute; left: -32px; top: 4px;
  width: 12px; height: 12px; border-radius: 999px;
  border: 2px solid var(--pt-accent); background: var(--pt-bg);
}
.ptime li:last-child::before { background: var(--pt-accent); }
.ptime dt, .ptime b {
  display: block; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--pt-muted); font-weight: 500;
}
.ptime li:not(:first-child) b { color: var(--pt-accent); }
.ptime p { margin: 7px 0 0; max-width: 30ch; font-size: 16px; line-height: 1.5; color: color-mix(in srgb, var(--pt-ink) 82%, transparent); }

.pcase__cta { display: flex; align-items: center; gap: 20px; margin-top: 40px; }
.pcase__cta a {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
}
.pcase__cta .is-solid { min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--pt-accent-deep); color: var(--pt-bg); }
.pcase__cta .is-ghost { border-bottom: 1px solid var(--pt-line); padding-bottom: 4px; color: var(--pt-ink); }
.portal[data-case="blackpatt"] .pcase__cta .is-ghost { border: 1px solid rgba(30,199,182,.6); border-radius: 999px; min-height: 52px; padding: 0 22px; color: var(--pt-accent); }

.pswatch { display: flex; gap: 12px; margin-top: 52px; flex-wrap: wrap; }
.pswatch span {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 9px 16px; border: 1px solid var(--pt-line); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.pswatch i { width: 13px; height: 13px; border-radius: 999px; background: var(--c); }

/* ---- Escenario: MacBook que se abre ---- */
.pstage {
  position: relative; margin-left: 20px; border-radius: 20px 0 0 0; overflow: hidden;
  background-size: cover; background-position: center;
}
.portal[data-case="blackpatt"] .pstage { background: radial-gradient(120% 90% at 70% 10%, #17233A, #07080C 70%); }
.pstage__wash { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(244,242,234,.25), rgba(31,58,43,.35)); }

.mac { position: absolute; left: 6%; top: 16%; width: 76%; perspective: 2000px; }
.mac__lid {
  transform-origin: 50% 100%;
  transform: rotateX(-91deg);               /* cerrado */
  transition: transform 720ms var(--ease);
  background: #15161A; border-radius: 14px 14px 3px 3px; padding: 11px 11px 13px;
  box-shadow: 0 50px 90px -30px rgba(20,20,15,.65);
}
.portal[data-case="blackpatt"] .mac__lid { background: #0F1014; box-shadow: 0 50px 90px -30px rgba(0,0,0,.8); }
.mac.is-open .mac__lid { transform: rotateX(0deg); }        /* abierto */
.mac__screen { display: block; border-radius: 7px; overflow: hidden; background: #F4F2EA; opacity: 0; transition: opacity 500ms ease 220ms; }
.mac.is-open .mac__screen { opacity: 1; }
.mac__screen img { width: 100%; display: block; }
.mac__base {
  width: 104%; margin-left: -2%; height: 14px; border-radius: 0 0 14px 14px;
  background: linear-gradient(#C9CBD1, #8D9098);
  box-shadow: 0 22px 40px -14px rgba(20,20,15,.55);
}
.portal[data-case="blackpatt"] .mac__base { background: linear-gradient(#8E9199, #4B4E56); }
.mac__notch { width: 16%; height: 5px; margin: 0 auto; border-radius: 0 0 6px 6px; background: rgba(20,20,15,.25); }

.pstage__phone {
  position: absolute; right: 33%; top: 34%; width: 180px;
  border-radius: 22px; border: 5px solid #15161A;
  box-shadow: 0 40px 70px -20px rgba(20,20,15,.6);
}
.portal[data-case="blackpatt"] .pstage__phone { right: 5%; top: 26%; border-color: #0F1014; box-shadow: 0 40px 70px -20px rgba(0,0,0,.75); }

/* Tarjeta flotante de producto (presupuestador IA / lab 3D) */
.pfloat {
  position: absolute; right: 3%; top: 30%; width: 236px;
  background: var(--paper); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 30px 60px -20px rgba(20,20,15,.45);
}
.pfloat h4 { margin: 0; font-size: 15px; font-weight: 640; letter-spacing: -0.015em; }
.pfloat p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pfloat__drop { margin-top: 14px; border: 1px dashed rgba(20,20,15,.2); border-radius: 10px; padding: 14px; text-align: center; }
.pfloat__drop b { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.pfloat__prog { display: block; height: 3px; border-radius: 999px; background: rgba(20,20,15,.12); margin-top: 10px; position: relative; }
.pfloat__prog i { position: absolute; inset: 0 auto 0 0; width: 72%; border-radius: 999px; background: #3F6B4E; }
.pfloat__steps { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pfloat__steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 11.5px; line-height: 1.35; }
.pfloat__steps i { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 999px; border: 1px solid rgba(20,20,15,.2); display: grid; place-items: center; font-size: 9px; }
.pfloat__steps li.is-done i { background: #3F6B4E; border-color: #3F6B4E; color: #fff; }
.pfloat__steps small { color: var(--muted); }

.pcase__cue {
  margin: 0; padding: 22px 0 26px; text-align: center;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pt-muted);
}
.portal[data-case="blackpatt"] .pcase__cue { color: var(--pt-accent); }

/* =========================================================
   RESTO DEL CASO (bajo el pliegue)
   ========================================================= */
.pmore { border-top: 1px solid var(--pt-line); padding: 56px var(--pad) 0; }
.pdata {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--pt-line); border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--pt-bg) 92%, #fff);
}
.portal[data-case="blackpatt"] .pdata { background: transparent; }
.pdata > div { padding: 26px 30px; border-right: 1px solid var(--pt-line); }
.pdata > div:last-child { border-right: 0; }
.pdata span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pt-muted); }
.pdata b { display: block; margin-top: 8px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 660; letter-spacing: -0.04em; }
.pdata > div:first-child b { color: var(--pt-accent); }
.pdata small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--pt-muted); }

.pshift { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin: 44px 0 0; }
.pshift > div { padding-top: 14px; border-top: 1px solid var(--pt-line); }
.pshift dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pt-muted); }
.pshift > div + div dt { color: var(--pt-accent); }
.pshift dd { margin: 8px 0 0; font-size: 19px; line-height: 1.45; color: color-mix(in srgb, var(--pt-ink) 85%, transparent); }
.pshift > div + div dd { color: var(--pt-ink); }

.prow { display: flex; align-items: center; gap: 16px; margin: 52px 0 20px; }
.prow span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pt-muted); }
.prow i { flex: 1; height: 1px; background: var(--pt-line); }
.prow a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pt-accent); text-decoration: none; white-space: nowrap; }

/* comparador antes/ahora */
.pswap { position: relative; border-radius: 16px; border: 1px solid var(--pt-line); overflow: hidden; aspect-ratio: 16/7; background: #000; }
.pswap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pswap .shot--now { transition: opacity 420ms var(--ease); }
.pswap.is-then .shot--now { opacity: 0; }
.pswap__ctrl { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(7,8,12,.75); }
.pswap__ctrl button {
  appearance: none; border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  background: transparent; color: rgba(255,255,255,.6);
}
.pswap__ctrl button.is-on { background: var(--pt-accent); color: #07080C; }

/* Rejilla justificada: cada figura reserva un ancho proporcional a SU
   proporcion (--ar) y crece en la misma proporcion, asi que todas las de una
   misma fila acaban con identica altura sin recortar ni una sola captura.
   El movil deja de ser un caso especial: su celda es simplemente vertical.
   max-width evita que una figura sola en la ultima fila se dispare. */
.ppieces {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 64px;
}
.ppieces figure {
  margin: 0;
  flex: var(--ar, 1.6) 1 calc(var(--ar, 1.6) * 190px);
  max-width: calc(var(--ar, 1.6) * 330px);
  /* por debajo de esto una figura muy vertical rompe la altura comun de la fila */
  min-width: 96px;
}
.ppieces .ppiece__media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--pt-line);
  aspect-ratio: var(--ar, 1.6);
  background: var(--paper-deep);
}
.portal[data-case="blackpatt"] .ppieces .ppiece__media { background: rgba(255,255,255,0.04); }
/* contain, no cover: la celda ya tiene la proporcion de la captura, y si hay
   un pixel de diferencia por redondeo preferimos un pelo de fondo a un recorte. */
.ppieces img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ppieces figcaption span { display: block; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--pt-accent); }
.ppieces h4 { margin: 5px 0 0; font-size: 17px; font-weight: 600; }
.ppieces p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--pt-muted); }

/* pieza sin captura: datos sobre el papel del caso */
.pnote {
  border-radius: 12px; border: 1px solid var(--pt-line); aspect-ratio: var(--ar, 1.6);
  display: grid; align-content: center; padding: 24px;
  background: color-mix(in srgb, var(--pt-bg) 92%, #fff);
}
.portal[data-case="blackpatt"] .pnote { background: rgba(255, 255, 255, 0.04); }
.pnote ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pnote li {
  display: flex; gap: 10px; line-height: 1.4;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pt-ink) 82%, transparent);
}
.pnote li::before { content: "—"; color: var(--pt-accent); }

/* panel de flujo oscuro (pieza "lo que pasa por dentro") */
/* padding/gap ajustados: con 24/9 el contenido supera el aspect-ratio y la
   pieza queda 12px más alta que el resto de la fila */
.pflow { border-radius: 12px; background: var(--night); aspect-ratio: var(--ar, 1.6); display: grid; align-content: center; gap: 8px; padding: 16px 20px; }
/* sobre el tema noche, --night casi no se distingue del fondo: se separa con borde */
.portal[data-case="blackpatt"] .pflow { background: #0E1016; border: 1px solid var(--pt-line); }
.pflow span { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,.52); }
.pflow b { font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.pflow span:last-of-type b { color: var(--spark); }
.pflow i { width: 1px; height: 13px; margin-left: 4px; background: linear-gradient(var(--blue-soft), transparent); }

/* =========================================================
   Responsive · el escenario pasa a una columna
   ========================================================= */
@media (max-width: 1180px) {
  .pcase__body { grid-template-columns: 1fr; }
  /* min-width:0 — si no, la columna se estira al ancho del contenido (la tarjeta
     flotante del caso 02 lleva width inline) y desborda a lo ancho */
  .pcase__intro, .pstage { min-width: 0; }
  .pstage { margin: 28px var(--pad) 0; border-radius: 16px; min-height: 520px; }
  /* max-width además de width: el caso 02 fija width inline y solo max-width lo acota */
  .pfloat { position: static; width: auto; max-width: calc(100% - 40px); margin: 20px; }
  .pstage__phone { display: none; }
}
@media (max-width: 900px) {
  .portal__cards { grid-template-columns: 1fr; }
  .portal__title .brk { display: none; }
  .portal__meta { flex-direction: column; align-items: stretch; }
  .portal__lede { flex: 0 0 auto; }
  .pcard { height: 400px; padding: 26px var(--pad) 0; }
  .pcard + .pcard { border-top: 1px solid var(--pt-line); }
  .pcard__top { flex-direction: column; gap: 16px; }
  .pcard__phone { display: none; }
  .pdata, .pshift { grid-template-columns: 1fr; }
  /* en una columna, una captura vertical a ancho completo se come media
     pantalla de alto; se acota por altura, no por ancho */
  .ppieces figure { flex: var(--ar, 1.6) 1 calc(var(--ar, 1.6) * 150px); max-width: calc(var(--ar, 1.6) * 320px); }
  .pdata > div { border-right: 0; border-bottom: 1px solid var(--pt-line); }
  /* La barra del caso y los CTAs van en nowrap: sin esto desbordan a lo ancho */
  .pcase__bar { flex-wrap: wrap; gap: 14px; }
  .pcase__nav { width: 100%; justify-content: flex-end; gap: 14px; font-size: 11px; letter-spacing: 0.1em; }
  .pcase__nav button { letter-spacing: 0.1em; }
  .pcase__cta { flex-wrap: wrap; gap: 14px; }
  .pcase__intro { padding: 26px var(--pad) 0; }
  .pswatch { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mac__lid, .mac__screen, .pswap .shot--now { transition: none; }
  .mac__lid { transform: rotateX(0deg); }
  .mac__screen { opacity: 1; }
}

/* =========================================================
   4 · SERVICIOS — ¿cuál eres tú?
   Segundo golpe de energía tras las transformaciones:
   filas grandes, barrido azul al hover, resultado + salida.
   ========================================================= */
.services {
  padding: clamp(70px, 10vw, 140px) var(--pad);
  max-width: 1280px;
  margin: 0 auto;
}

/* Cabecera a dos columnas — rompe el patrón centrado de la página */
.services__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  column-gap: clamp(24px, 5vw, 72px);
  row-gap: 18px;
}
.services__head .label { grid-column: 1 / -1; }
.services__head h2 {
  margin-top: 14px;
  font-size: clamp(38px, 6.4vw, 84px);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 0.96;
}
.services__lede {
  max-width: 38ch;
  padding-bottom: 10px;
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.5;
  color: var(--ink-soft);
}

.srow-list {
  margin-top: clamp(38px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.srow {
  position: relative;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
/* barrido azul que entra desde la izquierda */
.srow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(41,102,204,0.10), rgba(41,102,204,0.02));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}
.srow:hover::before,
.srow[open]::before { transform: scaleX(1); }

/* filete azul lateral al abrir */
.srow::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 380ms var(--ease);
}
.srow[open]::after { transform: scaleY(1); }

.srow summary {
  display: grid;
  grid-template-columns: auto minmax(0, 5fr) minmax(0, 6fr) auto;
  align-items: baseline;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(22px, 3.2vw, 38px) clamp(10px, 1.4vw, 20px);
  cursor: pointer;
  list-style: none;
}
.srow summary::-webkit-details-marker { display: none; }

.srow__n {
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
  transition: color var(--t) var(--ease);
}
.srow:hover .srow__n,
.srow[open] .srow__n { color: var(--blue); }

.srow__for {
  font-size: clamp(21px, 3.2vw, 38px);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.05;
  transition: transform 420ms var(--ease);
}
.srow:hover .srow__for,
.srow[open] .srow__for { transform: translateX(10px); }

.srow__what {
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.srow__plus {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--blue);
  transition: transform var(--t) var(--ease);
}
.srow[open] .srow__plus { transform: rotate(45deg); }

.srow__body {
  padding: 0 clamp(10px, 1.4vw, 20px) clamp(22px, 2.8vw, 32px);
  padding-left: clamp(42px, 5vw, 74px);
}
.srow__body p {
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.55;
}

.srow__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(18px, 2.4vw, 30px);
  margin-top: 18px;
}
.srow__gain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(41,102,204,0.28);
  border-radius: 999px;
  background: rgba(41,102,204,0.06);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.srow__gain::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.srow__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 560;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(41,102,204,0.3);
  padding-bottom: 2px;
}
.srow__go b { transition: transform var(--t) var(--ease); }
.srow__go:hover b { transform: translateX(5px); }
.srow__go:hover { border-bottom-color: var(--blue); }

@media (max-width: 860px) {
  .services__head { grid-template-columns: 1fr; align-items: start; }
  .services__lede { padding-bottom: 0; }
}
@media (max-width: 700px) {
  .srow summary { grid-template-columns: auto 1fr auto; }
  .srow__what { grid-column: 2 / -1; order: 3; }
  .srow__body { padding-left: clamp(20px, 8vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .srow::before, .srow::after,
  .srow__for, .srow__plus, .srow__go b { transition: none; }
  .srow:hover .srow__for, .srow[open] .srow__for { transform: none; }
}

/* =========================================================
   5 · MANIFIESTO
   Beat a pantalla completa: las líneas entran en cascada,
   el sujeto rota y la cinta cinética empuja hacia el contacto.
   ========================================================= */
.manifesto {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: #F2F2F5;
  min-height: clamp(560px, 86svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 12vw, 150px) var(--pad) 0;
}
/* halo azul detrás — profundidad, no ruido */
.manifesto__glow {
  position: absolute;
  left: 50%; top: 38%;
  width: min(1100px, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(41,102,204,0.30), rgba(41,102,204,0) 62%);
  pointer-events: none;
}
.manifesto__inner {
  position: relative;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: clamp(70px, 9vw, 120px);
}

/* ---- Las tres líneas: cascada + escalada ---- */
.mlines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(24px, 3vw, 40px);
}
.mline {
  font-weight: 660;
  letter-spacing: -0.045em;
  line-height: 1.0;
  text-wrap: balance;
}
/* cada línea, un punto más grande que la anterior */
.mline:nth-child(1) { font-size: clamp(30px, 5.0vw, 64px); color: rgba(242,242,245,0.52); }
.mline:nth-child(2) { font-size: clamp(35px, 6.2vw, 80px); color: rgba(242,242,245,0.78); }
.mline--hit        { font-size: clamp(40px, 7.6vw, 100px); color: #FFF; }
/* la cascada: se apoya en .reveal / .is-in que ya observa home.js */
.mline:nth-child(1) { transition-delay: 0ms; }
.mline:nth-child(2) { transition-delay: 110ms; }
.mline:nth-child(3) { transition-delay: 220ms; }
.mline--hit .dot { color: var(--blue-soft); }

/* ---- Sujeto rotatorio ---- */
.mswap {
  margin-top: clamp(30px, 4vw, 52px);
  font-size: clamp(19px, 2.6vw, 32px);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: rgba(242,242,245,0.72);
  transition-delay: 340ms;
}
.mswap__slot {
  display: inline-grid;
  vertical-align: baseline;
  overflow: hidden;
  text-align: left;
}
.mswap__w {
  grid-area: 1 / 1;
  font-weight: 660;
  color: var(--blue-soft);
  opacity: 0;
  animation: mswap 9.2s var(--ease) infinite;
}
.mswap__w:nth-child(1) { animation-delay: 0s; }
.mswap__w:nth-child(2) { animation-delay: 2.3s; }
.mswap__w:nth-child(3) { animation-delay: 4.6s; }
.mswap__w:nth-child(4) { animation-delay: 6.9s; }
@keyframes mswap {
  0%             { opacity: 0; transform: translateY(0.55em); }
  3%, 22%        { opacity: 1; transform: none; }
  26%, 100%      { opacity: 0; transform: translateY(-0.55em); }
}
.mswap__post { color: rgba(242,242,245,0.72); }
.mswap .dot { color: var(--blue-soft); }

/* ---- Firma + social ---- */
.manifesto__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(24px, 4vw, 56px);
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid rgba(242,242,245,0.14);
  transition-delay: 420ms;
}
.manifesto__sign {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.manifesto__sign img {
  display: block;
  width: auto;
  height: clamp(17px, 2vw, 22px);
  opacity: 0.92;
}
.manifesto__social {
  font-size: 15.5px;
  color: rgba(242,242,245,0.6);
  line-height: 1.6;
}
.manifesto__social span {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: rgba(242,242,245,0.42);
}

/* ---- Cinta cinética ---- */
.mticker {
  position: relative;
  overflow: hidden;
  /* a sangre: rompe el margen de la página y empuja hacia el contacto */
  margin-inline: calc(var(--pad) * -1);
  border-top: 1px solid rgba(242,242,245,0.14);
  padding: clamp(16px, 2vw, 24px) 0;
  /* difumina los bordes para que no corte en seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mticker__track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  width: max-content;
  animation: mticker 34s linear infinite;
}
.mticker__track span {
  font-family: var(--mono);
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242,242,245,0.62);
  white-space: nowrap;
}
.mticker__track i {
  font-style: normal;
  font-size: 11px;
  color: var(--blue-soft);
}
@keyframes mticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 700px) {
  .manifesto { min-height: 0; padding-bottom: 0; }
  .manifesto__foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .mticker__track { animation: none; }
  .mswap__w { animation: none; opacity: 0; }
  .mswap__w:nth-child(1) { opacity: 1; }
  .mline, .mswap, .manifesto__foot { transition-delay: 0ms !important; }
}

/* =========================================================
   6 · CIERRE
   ========================================================= */
.close {
  padding: clamp(80px, 11vw, 150px) var(--pad);
}
.close__inner { max-width: 860px; margin: 0 auto; text-align: center; }
.close__title {
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 660;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.close__title em { font-style: normal; color: var(--blue); }
.close__sub {
  margin: clamp(18px, 2.6vw, 28px) auto 0;
  max-width: 42ch;
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--muted);
}

.close__gdpr { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.close__gdpr a { color: inherit; }

/* ---------- Terminal Starvis ---------- */
.term {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 720px;
  text-align: left;
  border-radius: 20px;
  overflow: hidden;
  background: var(--night);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 44px 90px -30px rgba(16,16,20,0.55);
}

.term__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.term__dots { display: inline-flex; gap: 5px; }
.term__dots i { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.2); }
.term__dots i:first-child { background: var(--blue); }
.term__path {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(242,242,245,0.7);
}
.term__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spark);
}
.term__status-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--spark);
  animation: livePulse 1.6s ease-in-out infinite;
}

.term__progress { height: 2px; background: rgba(255,255,255,0.08); }
.term__progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--spark));
  transition: width 500ms var(--ease);
}

.term__feed {
  min-height: 230px;
  max-height: 330px;
  overflow-y: auto;
  padding: 20px 20px 8px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(242,242,245,0.9);
  scrollbar-width: thin;
}

.term__line { margin: 0 0 10px; }
.term__line--sys { color: rgba(242,242,245,0.4); }
.term__line--bot .term__arrow { color: var(--blue); margin-right: 8px; }
.term__line--me { color: var(--spark); text-align: right; }
.term__line--me .term__arrow { margin-left: 8px; opacity: 0.7; }
.term__line a { color: var(--spark); }

.term__caret {
  display: inline-block;
  width: 8px; height: 15px;
  margin-left: 4px;
  background: var(--spark);
  vertical-align: -2px;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term__caret { animation: none; } }

.term__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.term__chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(79,134,224,0.45);
  background: rgba(41,102,204,0.14);
  color: #DCE8FA;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.term__chip:hover:enabled { background: rgba(41,102,204,0.4); border-color: var(--blue-soft); }
.term__chip:disabled { opacity: 0.45; cursor: default; }
.term__chip.is-picked { background: rgba(41,102,204,0.55); border-color: var(--blue-soft); opacity: 1; }

.term__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.term__prompt { font-family: var(--mono); color: var(--blue-soft); font-size: 15px; }
.term__input {
  flex: 1;
  min-height: 40px;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 14px;
  color: #F2F2F5;
}
.term__input::placeholder { color: rgba(242,242,245,0.3); }
.term__input:focus { outline: none; }
.term__input:disabled { opacity: 0.4; }
.term__send {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t) var(--ease), opacity var(--t) var(--ease);
}
.term__send:hover:enabled { background: var(--blue-deep); }
.term__send:disabled { opacity: 0.35; cursor: default; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { border-top: 1px solid var(--line); background: var(--paper-deep); }
.footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) var(--pad);
  display: flex;
  align-items: center;
  gap: 20px 34px;
  flex-wrap: wrap;
}
.footer__brand { display: inline-flex; align-items: center; gap: 10px; }
.footer__links { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-left: auto; }
.footer__links a { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }
.footer__links a:hover { color: var(--ink); }
.footer__note { width: 100%; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); }

/* =========================================================
   MASCOTA 3D — hero ↔ dock
   ========================================================= */
.starvis-intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.starvis-intro.is-done { opacity: 1; visibility: visible; }
.starvis-intro.is-assistant-docked { z-index: 9998; }

/* Halo tras el robot */
.starvis-intro__halo {
  position: fixed;
  left: 50%;
  top: calc(var(--robot-top, 51vh) - var(--robot-size, 300px) * 0.14);
  width: calc(var(--robot-size, 300px) * 1.8);
  aspect-ratio: 1;
  transform: translate(-50%, -6%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(41,102,204,0.13), transparent 62%),
    radial-gradient(circle at 55% 62%, rgba(124,245,212,0.08), transparent 55%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms var(--ease);
}

/* Cuatro etiquetas alrededor del robot */
.starvis-orbit {
  display: none;
  position: fixed;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  box-shadow: 0 12px 32px -16px rgba(20,20,15,0.35);
  pointer-events: none;
  opacity: 1;
  transition: opacity 400ms var(--ease);
}
.starvis-orbit::before { content: "•"; color: var(--blue); margin-right: 9px; }

@media (min-width: 981px) {
  .starvis-orbit { display: inline-flex; }
  .starvis-orbit--1 { right: calc(50% + clamp(140px, 14vw, 205px)); top: calc(var(--robot-top, 61vh) + var(--robot-size, 300px) * 0.14); animation: orbitFloat 5.2s ease-in-out infinite alternate; }
  .starvis-orbit--2 { left:  calc(50% + clamp(140px, 14vw, 205px)); top: calc(var(--robot-top, 63vh) + var(--robot-size, 300px) * 0.20); animation: orbitFloat 6s   ease-in-out 0.8s infinite alternate; }
  .starvis-orbit--3 { right: calc(50% + clamp(128px, 12.6vw, 186px)); top: calc(var(--robot-top, 77vh) + var(--robot-size, 300px) * 0.60); animation: orbitFloat 5.6s ease-in-out 1.5s infinite alternate; }
  .starvis-orbit--4 { left:  calc(50% + clamp(128px, 12.6vw, 186px)); top: calc(var(--robot-top, 78.5vh) + var(--robot-size, 300px) * 0.65); animation: orbitFloat 5.8s ease-in-out 2.1s infinite alternate; }
}
@keyframes orbitFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .starvis-orbit { animation: none !important; } }

/* Al anclarse abajo, el decorado del hero desaparece */
.starvis-intro.is-assistant-docked .starvis-intro__halo,
.starvis-intro.is-assistant-docked .starvis-orbit { opacity: 0; }

/* El robot: centrado en el hero, esquina inferior al hacer scroll */
.starvis-intro__model {
  position: fixed;
  left: calc(50% - var(--robot-size, 300px) / 2);
  top: var(--robot-top, 53vh);
  width: var(--robot-size, 300px);
  aspect-ratio: 1;
  opacity: 0;
  will-change: left, top, width, opacity;
  transition:
    left 720ms var(--ease),
    top 720ms var(--ease),
    width 680ms var(--ease),
    opacity 420ms var(--ease);
  filter:
    drop-shadow(0 26px 40px rgba(20,20,15,0.22))
    drop-shadow(0 0 26px rgba(79,134,224,0.16));
}
.starvis-intro.is-model-ready .starvis-intro__model { opacity: 1; }

.starvis-intro.is-done.is-model-ready.is-assistant-docked .starvis-intro__model {
  left: calc(100vw - clamp(86px, 8.5vw, 118px) - clamp(12px, 2vw, 26px));
  top: calc(100vh - clamp(86px, 8.5vw, 118px) - clamp(16px, 3vh, 28px));
  width: clamp(86px, 8.5vw, 118px);
  pointer-events: auto;
}
.starvis-intro__canvas { display: block; width: 100%; height: 100%; }

.starvis-assistant-bubble {
  position: fixed;
  right: clamp(104px, 10.5vw, 148px);
  bottom: clamp(50px, 6.5vh, 72px);
  display: grid;
  gap: 2px;
  min-width: 172px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px 16px 4px 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 20px 44px -16px rgba(20,20,15,0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(10px, 8px, 0) scale(0.96);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease), visibility 0s linear 360ms;
  pointer-events: none;
}
.starvis-assistant-bubble span { font-size: 14px; font-weight: 700; }
.starvis-assistant-bubble small { font-size: 11.5px; color: var(--muted); }
.starvis-intro.is-assistant-docked.is-assistant-speaking .starvis-assistant-bubble {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 220ms, 220ms, 0s;
  pointer-events: auto;
}
.starvis-intro.is-conversation-open .starvis-assistant-bubble { opacity: 0; visibility: hidden; pointer-events: none; }

.starvis-assistant-hitbox {
  display: none;
}

.starvis-conversation {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(116px, 15vh, 150px);
  width: min(340px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 70px -20px rgba(20,20,15,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(0.97);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms;
  pointer-events: none;
  z-index: 6;
}
.starvis-intro.is-conversation-open .starvis-conversation {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
.starvis-conversation__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.starvis-conversation__eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.starvis-conversation h3 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.starvis-conversation p { color: var(--muted); margin-bottom: 16px; font-size: 14.5px; }
.starvis-conversation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 700px) {
  .starvis-intro__model {
    left: calc(50% - var(--robot-size, 192px) / 2);
    top: var(--robot-top, 46vh);
  }
  .starvis-intro.is-done.is-model-ready.is-assistant-docked .starvis-intro__model {
    left: calc(100vw - 88px);
    top: calc(100vh - 96px);
    width: 78px;
  }
  .starvis-assistant-bubble { right: 88px; bottom: 40px; min-width: 152px; }
}