/* ==========================================================================
   Estilos compartidos (no críticos). Los tokens están en critical.css.
   Orden: navegación · lenguaje visual (facetas) · home · componentes · páginas · movimiento
   ========================================================================== */

/* ---------- Menú móvil ---------- */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 6vw, 3rem) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 50% at 100% 100%, rgb(4 74 246 / 0.25), transparent 70%),
    var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__list { display: grid; gap: 0.25rem; }
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__list .mono { color: var(--vr-cyan); font-size: 0.75rem; }
.mobile-menu__list li,
.mobile-menu__foot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms + 60ms);
}
.mobile-menu.is-open li,
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; transform: none; }
.mobile-menu__foot { display: grid; gap: 1rem; justify-items: start; }
.mobile-menu__foot .btn { width: 100%; }
.mobile-menu__mail { color: var(--text-2); text-decoration: none; }
.menu-open { overflow: hidden; }

/* ---------- CTA fija en móvil ---------- */
.mobile-cta { display: none; }
@media (max-width: 900px) {
  .mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgb(3 6 12 / 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(105%);
    transition: transform 0.45s var(--ease-out);
  }
  .mobile-cta.is-visible { transform: none; }
  .menu-open .mobile-cta { transform: translateY(105%); }
}

/* ==========================================================================
   Lenguaje visual compartido: facetas y destellos
   ========================================================================== */

/* Separador de facetas: una línea continua de punta a punta y tres facetas apoyadas exactamente sobre ella.
   La línea (::before) y la base de las facetas (y = 40 del SVG) comparten el mismo eje: 8px desde abajo. */
.facet-divider {
  --tone: var(--vr-azure);
  position: relative;
  width: min(var(--maxw), 100% - var(--gutter) * 2);
  margin: 0 auto;
  height: 48px;
}
.facet-divider::before { content: ""; position: absolute; left: 0; right: 0; bottom: 7.5px; height: 1px; background: var(--line-strong); }
.facet-divider--cyan { --tone: var(--vr-cyan); }
.facet-divider__shape { position: absolute; bottom: 0; overflow: visible; }
.facet-divider--start .facet-divider__shape { left: 8%; }
.facet-divider--center .facet-divider__shape { left: calc(50% - 120px); }
.facet-divider--end .facet-divider__shape { right: 8%; }
.facet-divider__route { fill: none; stroke: none; }
.facet-divider__stroke { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.facet-divider__fill { fill: var(--tone); }
.facet-divider__fill--a { opacity: 0.28; }
.facet-divider__fill--b { opacity: 0.16; }
.facet-divider__fill--c { fill: var(--vr-cyan); opacity: 0.22; }
.facet-divider__spark { fill: var(--vr-cyan-hi); filter: drop-shadow(0 0 6px var(--vr-cyan)); }
/* Destello que recorre la línea (lo mueve main.js solo mientras el separador está en pantalla) */
.facet-divider__glint {
  position: absolute; left: 0; top: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--vr-cyan-hi);
  box-shadow: 0 0 8px 2px var(--vr-cyan), 0 0 22px 6px rgb(0 208 248 / 0.35);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.facet-divider:not(.is-live) .facet-divider__spark { animation-play-state: paused; }

@media (prefers-reduced-motion: no-preference) {
  .js .facet-divider[data-reveal] { opacity: 1; transform: none; }
  .js .facet-divider .facet-divider__stroke { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-io); }
  .js .facet-divider .facet-divider__fill { opacity: 0; transition: opacity 1s var(--ease-out) 0.7s; }
  .js .facet-divider .facet-divider__spark { opacity: 0; transform-origin: 92px 6px; transform: scale(0.2); transition: opacity 0.4s 1.2s, transform 0.8s var(--ease-out) 1.2s; }
  .js .facet-divider.is-in .facet-divider__stroke { stroke-dashoffset: 0; }
  .js .facet-divider.is-in .facet-divider__fill--a { opacity: 0.28; }
  .js .facet-divider.is-in .facet-divider__fill--b { opacity: 0.16; }
  .js .facet-divider.is-in .facet-divider__fill--c { opacity: 0.22; }
  .js .facet-divider.is-in .facet-divider__spark { opacity: 1; transform: scale(1); animation: spark-pulse 3.6s 2s ease-in-out infinite; }
}
@keyframes spark-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.6); }
}

/* Destello reutilizable (pequeña estrella de cuatro puntas) */
.spark {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--vr-cyan-hi);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 6px var(--vr-cyan));
}

/* Corte en diagonal con el ángulo de los brazos de la V */
.facet-cut-top { clip-path: polygon(0 clamp(24px, 5vw, 72px), 100% 0, 100% 100%, 0 100%); }

/* ==========================================================================
   Home
   ========================================================================== */

/* ---------- Método: recorrido con informe que se rellena ---------- */
.method { padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 10vw, 9rem); }
.method__title {
  font-size: clamp(2.3rem, 1.1rem + 4.6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
  font-weight: 740;
  max-width: 14ch;
}
.method__intro { max-width: 40rem; margin-top: 1.4rem; color: var(--text-2); font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); }
.method__track {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}
.method__steps { display: grid; }
.method__step {
  min-height: 62vh;
  display: grid;
  align-content: center;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 0.5rem;
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 3vw, 2rem);
  transition: border-color 0.5s var(--ease-out);
}
.method__step:first-child { min-height: 46vh; align-content: start; padding-top: 2rem; }
.method__num { grid-row: span 2; color: var(--text-3); padding-top: 0.5rem; transition: color 0.4s; }
.method__step h3 {
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 680;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin-bottom: 0.7rem;
  transition: color 0.4s;
}
.method__step p { color: var(--text-2); max-width: 30rem; }
.is-live .method__step:not(.is-active) h3 { color: var(--text-3); }
.is-live .method__step:not(.is-active) p { color: var(--text-3); }
.method__step.is-active { border-left-color: var(--vr-cyan); }
.method__step.is-active .method__num { color: var(--vr-cyan); }

.method__report {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  align-self: start;
}
.method__report figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--text-3);
  text-align: right;
}

.sheet {
  position: relative;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgb(12 140 247 / 0.10), transparent 45%),
    var(--bg-1);
  box-shadow: 0 30px 90px -30px rgb(4 74 246 / 0.55);
  overflow: hidden;
}
.sheet__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.sheet__stamp {
  margin-left: auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--vr-cyan);
  border-radius: 3px;
  color: var(--vr-cyan);
  font-size: 0.65rem;
  transform: rotate(-4deg) scale(1.4);
  opacity: 0;
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
}
.sheet[data-stage="3"] .sheet__stamp { opacity: 1; transform: rotate(-4deg) scale(1); }
.sheet__rows { display: grid; gap: 0.95rem; }
.sheet__rows > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.sheet__rows dt { color: var(--text-3); font-size: 0.66rem; padding-top: 3px; }
.sheet__rows dd {
  position: relative;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}
/* Cada campo vacío se ve como una línea de esqueleto; al llegar su paso, se "escribe" */
.sheet__rows dd::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 70%;
  height: 0.55rem;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(140 190 255 / 0.2), rgb(140 190 255 / 0.06));
  opacity: 0;
  transition: opacity 0.3s;
}
.sheet [data-at] dd span {
  display: block;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-io), opacity 0.4s;
}
.sheet[data-stage="0"] [data-at] dd span,
.sheet[data-stage="1"] [data-at="2"] dd span, .sheet[data-stage="1"] [data-at="3"] dd span,
.sheet[data-stage="2"] [data-at="3"] dd span { clip-path: inset(0 100% 0 0); opacity: 0; }
.sheet[data-stage="0"] [data-at] dd::before,
.sheet[data-stage="1"] [data-at="2"] dd::before, .sheet[data-stage="1"] [data-at="3"] dd::before,
.sheet[data-stage="2"] [data-at="3"] dd::before { opacity: 1; }
.sheet__progress { margin-top: 1.4rem; height: 2px; background: var(--line); }
.sheet__progress span {
  display: block;
  height: 100%;
  width: calc(var(--stage, 3) / 3 * 100%);
  background: linear-gradient(90deg, var(--vr-electric), var(--vr-cyan));
  box-shadow: 0 0 12px var(--vr-cyan);
  transition: width 0.8s var(--ease-out);
}
.sheet[data-stage="0"] { --stage: 0; }
.sheet[data-stage="1"] { --stage: 1; }
.sheet[data-stage="2"] { --stage: 2; }
.sheet[data-stage="3"] { --stage: 3; }

@media (max-width: 860px) {
  .method__track { grid-template-columns: 1fr; gap: 1.5rem; }
  .method__report { order: -1; top: calc(var(--header-h) + 0.5rem); z-index: 2; }
  .method__report figcaption { display: none; }
  .sheet { padding: 0.9rem 1rem; background: rgb(6 11 21 / 0.96); }
  .sheet__head { padding-bottom: 0.6rem; margin-bottom: 0.7rem; }
  .sheet__rows { gap: 0.45rem; }
  .sheet__rows > div { grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0.6rem; }
  .sheet__rows dd { font-size: 0.8rem; line-height: 1.35; }
  .sheet__progress { margin-top: 0.8rem; }
  .method__step, .method__step:first-child { min-height: 52vh; align-content: center; padding-top: 0; }
}

/* ---------- Servicio técnico (home) ---------- */
.services-home {
  padding-block: clamp(4rem, 9vw, 8rem);
  background: linear-gradient(180deg, transparent, rgb(6 11 21 / 0.7) 30%, rgb(6 11 21 / 0.7) 70%, transparent);
}
.services-home__title {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
  font-weight: 720;
  max-width: 22ch;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.index-list { border-top: 1px solid var(--line-strong); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: 0.4rem 1rem;
  padding: 1.5rem 0.5rem;
  text-decoration: none;
}
.index-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(12 140 247 / 0.14), rgb(12 140 247 / 0) 75%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.index-list__name {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.15;
  transition: translate 0.5s var(--ease-out), color 0.3s;
}
.index-list__desc { grid-column: 1; color: var(--text-2); font-size: 0.97rem; max-width: 34rem; }
.index-list__arrow {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  color: var(--text-3);
  transition: color 0.3s, translate 0.5s var(--ease-out);
}
.index-list a:hover::before, .index-list a:focus-visible::before { transform: scaleX(1); }
.index-list a:hover .index-list__name { translate: 0.5rem 0; color: #fff; }
.index-list a:hover .index-list__arrow { color: var(--vr-cyan); translate: 4px 0; }
.index-list--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  border-top: 0;
}
.index-list--two li:nth-child(-n+2) { border-top: 1px solid var(--line-strong); }
.services-home__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 3rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--vr-azure);
  border-radius: var(--radius);
  background: rgb(3 6 12 / 0.5);
}
.services-home__foot p { color: var(--text-2); max-width: 44rem; }
.services-home__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 860px) {
  .index-list--two { grid-template-columns: 1fr; }
  .index-list--two li:nth-child(2) { border-top: 0; }
  .services-home__foot { grid-template-columns: 1fr; }
}

/* ---------- Laboratorio (home) ---------- */
.lab-home {
  position: relative;
  padding-block: clamp(5rem, 11vw, 9rem);
  background:
    radial-gradient(50% 60% at 50% 40%, rgb(4 74 246 / 0.22), transparent 75%),
    rgb(6 11 21 / 0.82);
  clip-path: polygon(0 clamp(24px, 5vw, 72px), 100% 0, 100% calc(100% - clamp(24px, 5vw, 72px)), 0 100%);
}
.lab-home__inner { text-align: center; display: grid; justify-items: center; }
.lab-home__title {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
  font-weight: 720;
  max-width: 20ch;
}
.lab-home__intro { max-width: 40rem; margin-top: 1.25rem; color: var(--text-2); }
.flow-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  position: relative;
}
.flow-line::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--vr-electric), var(--vr-cyan), var(--vr-electric));
  opacity: 0.6;
}
.flow-line li {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-2);
  font-weight: 560;
  font-size: 0.95rem;
  line-height: 1.3;
  transition: border-color 0.3s, transform 0.4s var(--ease-out);
}
.flow-line li:hover { border-color: var(--vr-cyan); transform: translateY(-3px); }
.flow-line .mono { color: var(--text-3); font-size: 0.64rem; }
.flow-line .is-core { border-color: var(--vr-azure); box-shadow: 0 0 0 4px rgb(12 140 247 / 0.12); }
.flow-line .is-gate { border-style: dashed; border-color: var(--vr-cyan); color: var(--vr-cyan); }
/* Flujo animado de Jarvis: mismo lenguaje que el pulso de «Anatomía de una automatización» */
.jflow { width: 100%; margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1.1rem; justify-items: center; }
.jflow__track { position: relative; width: 100%; display: grid; justify-items: center; }
.jflow .flow-line { margin-top: 0; }
.jflow__msg, .jflow__ask {
  display: inline-grid; gap: 0.3rem; padding: 0.8rem 1.1rem; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-2);
  font-weight: 560; line-height: 1.35; transition: opacity 0.5s, border-color 0.5s, box-shadow 0.5s, transform 0.5s var(--ease-out);
}
.jflow__msg .mono, .jflow__ask .mono { color: var(--vr-cyan); font-size: 0.64rem; }
.jflow__ask { border: 1px dashed var(--vr-cyan); color: #fff; background: rgb(0 208 248 / 0.1); box-shadow: 0 0 0 4px rgb(0 208 248 / 0.1); font-size: 1.05rem; }
.jflow__says { display: block; margin-top: 0.35rem; font-style: normal; font-weight: 450; font-size: 0.82rem; color: var(--vr-cyan); transition: opacity 0.5s; }
.jflow__pulse {
  position: absolute; top: calc(50% - 3px); left: 0; width: 84px; height: 6px; margin-left: -42px; border-radius: 6px;
  background: linear-gradient(90deg, transparent, var(--vr-cyan) 70%, #fff); box-shadow: 0 0 18px 4px rgb(0 208 248 / 0.55);
  opacity: 0; z-index: 2; pointer-events: none; display: none;
}
.jflow.is-anim .jflow__pulse { display: block; left: calc(var(--at, 0) * 100%); transition: left 1.1s ease-in-out, opacity 0.4s; }
.jflow.is-anim.has-pulse .jflow__pulse { opacity: 1; }
/* El texto nunca se apaga (contraste): lo que cambia es el borde, el fondo y el brillo */
.jflow.is-anim .jflow__msg, .jflow.is-anim .jflow__ask { color: var(--text-2); border-color: var(--line-strong); border-style: solid; background: var(--bg-2); box-shadow: none; }
.jflow.is-anim.has-msg .jflow__msg { color: #fff; border-color: var(--vr-cyan); }
.jflow.is-anim.has-ask .jflow__ask { color: #fff; border-style: dashed; border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.1); box-shadow: 0 0 0 4px rgb(0 208 248 / 0.1), 0 0 26px rgb(0 208 248 / 0.25); }
.jflow.is-anim .flow-line li { color: var(--text-2); }
.jflow.is-anim .flow-line li .jflow__says { opacity: 0; }
.jflow.is-anim .flow-line li.is-on { color: #fff; }
.jflow.is-anim .flow-line li.is-gate, .jflow.is-anim .flow-line li.is-gate.is-on { color: var(--vr-cyan); }
.jflow.is-anim .flow-line li.is-on .jflow__says { opacity: 1; }
.jflow.is-anim .flow-line li.is-now { border-color: var(--vr-cyan); background: #07263b; box-shadow: 0 0 0 4px rgb(0 208 248 / 0.14), 0 0 26px rgb(0 208 248 / 0.28); }
.lab-home__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: clamp(2rem, 5vw, 3rem); }
.lab-home__note { margin-top: 1.5rem; color: var(--text-3); font-size: 0.95rem; }
.lab-home__note a { color: var(--vr-cyan); text-underline-offset: 3px; }
@media (max-width: 860px) {
  .flow-line { grid-template-columns: 1fr; max-width: 22rem; }
  .flow-line::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .jflow__pulse { top: 0; left: calc(50% - 3px); width: 6px; height: 84px; margin-left: 0; margin-top: -42px;
    background: linear-gradient(180deg, transparent, var(--vr-cyan) 70%, #fff); }
  .jflow.is-anim .jflow__pulse { left: calc(50% - 3px); top: calc(var(--at, 0) * 100%); transition: top 1.1s ease-in-out, opacity 0.4s; }
}

/* ---------- Guías (home) ---------- */
.guides-home { padding-block: clamp(4rem, 9vw, 8rem); }
.guides-home__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.guides-home__title {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-weight: 720;
  max-width: 18ch;
}
.guides-home__head p { color: var(--text-2); max-width: 42rem; }
.guides-home__all { margin-top: 2rem; }

.guides {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
}
.guide {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.6rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.85);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out);
}
.guide--lead {
  grid-row: span 2;
  min-height: clamp(18rem, 34vw, 26rem);
  background:
    linear-gradient(135deg, rgb(4 74 246 / 0.28), transparent 55%),
    rgb(6 11 21 / 0.85);
}
.guide--lead::after {
  content: "";
  position: absolute;
  right: -8%; top: -10%;
  width: 55%; aspect-ratio: 1;
  background: linear-gradient(150deg, rgb(0 208 248 / 0.22), rgb(12 140 247 / 0.05));
  clip-path: polygon(0 0, 100% 18%, 38% 100%);
  pointer-events: none;
}
.guide__tag { color: var(--vr-cyan); }
.guide__title {
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 26ch;
}
.guide--lead .guide__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.guide p { color: var(--text-2); max-width: 34rem; }
.guide__more { color: var(--text-3); margin-top: 0.5rem; transition: color 0.3s; }
.guide:hover { border-color: var(--vr-azure); }
.guide:hover .guide__more { color: var(--vr-cyan); }
@media (max-width: 760px) {
  .guides { grid-template-columns: 1fr; }
  .guide--lead { grid-row: auto; min-height: 16rem; }
}

/* ---------- Cierre de contacto ---------- */
.closing {
  padding-block: clamp(5rem, 11vw, 9rem);
  overflow: clip;
  background: radial-gradient(70% 90% at 50% 120%, rgb(4 74 246 / 0.35), transparent 70%);
}
.closing__title {
  font-size: clamp(2.3rem, 1.1rem + 5vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.038em;
  font-weight: 740;
  max-width: 18ch;
  text-wrap: balance;
}
.closing__title span { display: block; color: var(--text-3); }
.closing__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 5vw, 3rem); }
.closing__note { margin-top: 1.25rem; color: var(--text-3); font-size: 0.95rem; }

/* ==========================================================================
   Componentes
   ========================================================================== */


/* ---------- Prosa (artículos y páginas legales) ---------- */
.prose { max-width: 44rem; font-size: 1.06rem; line-height: 1.72; color: var(--text-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin-top: 2.4em;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 680;
  color: var(--text);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.prose h3 { margin-top: 1.8em; font-size: 1.2rem; font-weight: 650; color: var(--text); }
.prose strong { color: var(--text); font-weight: 620; }
.prose a { color: var(--vr-cyan); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.45em; }
.prose ul li::marker { color: var(--vr-azure); }
.prose .callout, .callout {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--vr-cyan);
  border-radius: var(--radius);
  background: rgb(6 11 21 / 0.8);
  color: var(--text);
}

/* ---------- Tarjeta de producto ---------- */
.product {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.9);
  margin-block: 1.5rem;
}
.product__glyph {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgb(0 208 248 / 0.25), rgb(4 74 246 / 0.25));
  overflow: hidden;
}
.product__glyph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgb(0 233 254 / 0.35), transparent 60%);
  clip-path: polygon(0 0, 70% 0, 0 80%);
}
.product__glyph span { position: relative; font-family: var(--font-mono); font-size: 0.85rem; color: #fff; text-transform: uppercase; }
/* Con foto del producto (fondo blanco, como las de tienda): sin el destello del glifo */
.product__glyph--img { background: #fff; }
.product__glyph--img::before { content: none; }
.product__glyph--img img { width: 100%; height: 100%; padding: 0.4rem; object-fit: contain; }
.product__cat { color: var(--vr-cyan); font-size: 0.66rem; }
.product__name { margin: 0.3rem 0 0.5rem; font-size: 1.15rem; font-weight: 650; color: var(--text); line-height: 1.25; }
.product__why { color: var(--text-2); font-size: 0.97rem; }
.product__specs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--text-3); }
.product__specs li { margin: 0 !important; }
.product__specs li::before { content: "· "; color: var(--vr-azure); }
.product__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.product__links a { color: var(--text) !important; text-decoration: none; }
.product__note { margin-top: 0.6rem !important; font-size: 0.78rem; color: var(--text-3); }
@media (max-width: 560px) { .product { grid-template-columns: 1fr; } .product__glyph { width: 4.5rem; } }

/* ---------- Aviso de afiliación ---------- */
.disclosure {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(6 11 21 / 0.7);
  font-size: 0.92rem;
  color: var(--text-2);
}
.disclosure > * + * { margin-top: 0.5rem; }
.disclosure__title { color: var(--text-3); font-size: 0.66rem; }
.disclosure a { color: var(--vr-cyan); text-underline-offset: 3px; }

/* ---------- Reseñas ---------- */
.reviews__inner {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.85);
}
.reviews__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 680; letter-spacing: -0.02em; }
.reviews p { color: var(--text-2); }

/* ---------- Preguntas frecuentes ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--vr-cyan); font-family: var(--font-mono); font-size: 1.4rem; line-height: 1; flex: none; transition: transform 0.35s var(--ease-out); }
.faq details[open]:not(.is-closing) summary::after { transform: rotate(135deg); }
.faq summary:hover { color: #fff; }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.faq details[hidden] { display: none; }
.faq--wide { max-width: 56rem; margin-top: 1.5rem; }
.faq__cta { margin-top: 0.75rem; font-size: 0.95rem; }
.faq--wide details > div { max-width: none; padding: 0 0 0 0.25rem; }
.faq--wide .faq__a > div { padding: 0 2.5rem 1.4rem 0; color: var(--text-2); max-width: 46rem; }
.faq-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.faq-filter[hidden] { display: flex; visibility: hidden; }
.chip { min-height: 2.5rem; padding: 0.45rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 0.92rem; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.chip:hover { border-color: var(--vr-cyan); }
.chip[aria-pressed="true"] { border-color: var(--vr-cyan); background: rgb(12 140 247 / 0.14); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq details > div { padding: 0 0.25rem 1.4rem; color: var(--text-2); max-width: 44rem; }

/* ---------- Pie ---------- */
.site-footer {
  padding: clamp(3.5rem, 8vw, 6rem) 0 calc(2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.95rem;
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 3rem;
}
.site-footer__brand img { width: 104px; height: 80px; margin-bottom: 1.25rem; }
.site-footer__claim { color: var(--text-2); max-width: 26rem; }
.site-footer__contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.25rem; }
.site-footer__contact a { color: var(--vr-cyan); text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.site-footer .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vr-cyan);
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.site-footer__cols a, .site-footer__legal a { color: var(--text-2); text-decoration: none; }
.site-footer__cols a:hover, .site-footer__legal a:hover { color: var(--text); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.875rem;
}
.site-footer__legal { display: flex !important; flex-wrap: wrap; gap: 0.5rem 1.5rem !important; }
@media (max-width: 760px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Páginas
   ========================================================================== */

/* ---------- Servicios: buscador por síntoma ---------- */
.finder__box {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.finder__options { margin: 0; padding: 0; border: 0; display: grid; gap: 0.4rem; align-content: start; }
.finder__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(6 11 21 / 0.7);
  cursor: pointer;
  font-weight: 560;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.finder__option input { appearance: none; margin: 0; width: 10px; height: 10px; flex: none; border: 1px solid var(--text-3); transform: rotate(45deg); transition: background-color 0.25s, border-color 0.25s; }
.finder__option:hover { border-color: var(--line-strong); }
.finder__option:has(input:checked) { border-color: var(--vr-cyan); background: rgb(12 140 247 / 0.12); color: #fff; }
.finder__option input:checked { background: var(--vr-cyan); border-color: var(--vr-cyan); box-shadow: 0 0 10px var(--vr-cyan); }
.finder__option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.finder__panels { display: grid; gap: 1rem; }
.finder__panel {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1.25rem 1.75rem;
  align-content: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgb(12 140 247 / 0.12), transparent 45%),
    rgb(6 11 21 / 0.9);
}
/* Con :has, solo se ve el panel del síntoma elegido (sin :has se ven todos) */
@supports selector(:has(*)) {
  .finder__panel { display: none; }
  .finder__box:has(.finder__option:nth-child(2) input:checked) .finder__panel:nth-child(1),
  .finder__box:has(.finder__option:nth-child(3) input:checked) .finder__panel:nth-child(2),
  .finder__box:has(.finder__option:nth-child(4) input:checked) .finder__panel:nth-child(3),
  .finder__box:has(.finder__option:nth-child(5) input:checked) .finder__panel:nth-child(4),
  .finder__box:has(.finder__option:nth-child(6) input:checked) .finder__panel:nth-child(5),
  .finder__box:has(.finder__option:nth-child(7) input:checked) .finder__panel:nth-child(6),
  .finder__box:has(.finder__option:nth-child(8) input:checked) .finder__panel:nth-child(7),
  .finder__box:has(.finder__option:nth-child(9) input:checked) .finder__panel:nth-child(8),
  .finder__box:has(.finder__option:nth-child(10) input:checked) .finder__panel:nth-child(9),
  .finder__box:has(.finder__option:nth-child(11) input:checked) .finder__panel:nth-child(10) { display: grid; animation: panel-in 0.5s var(--ease-out); }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.finder__illo { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.finder__illo svg { display: block; width: 100%; height: auto; }
.finder__panel-title { grid-column: 2; align-self: end; }
.finder__first { grid-column: 2; }
.finder__first .finder__label { margin-bottom: 0.6rem; }
.finder__cols, .finder__foot { grid-column: 1 / -1; }
.lead-text--line { max-width: none; }
.finder__panel-title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 680; letter-spacing: -0.02em; }
.finder__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; color: var(--text-2); }
.finder__cols p + .finder__label { margin-top: 1rem; }
.finder__label { color: var(--text-3); font-size: 0.66rem; margin-bottom: 0.5rem; }
.finder__checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.finder__checks li { position: relative; padding-left: 1.1rem; }
.finder__checks li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--vr-azure); transform: rotate(45deg); }
.finder__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.finder__panel.is-seq .chk { opacity: 0.22; transition: opacity 0.45s, filter 0.45s; }
.finder__panel.is-seq .chk.on { opacity: 1; filter: drop-shadow(0 0 6px rgb(0 208 248 / 0.6)); }
.finder__panel.is-seq .finder__checks li { color: var(--text-3); transition: color 0.45s; }
.finder__panel.is-seq .finder__checks li::before { background: var(--text-3); transition: background-color 0.45s, box-shadow 0.45s; }
.finder__panel.is-seq .finder__checks li.on { color: #fff; }
.finder__panel.is-seq .finder__checks li.on::before { background: var(--vr-cyan); box-shadow: 0 0 8px var(--vr-cyan); }
.finder__write { grid-column: 1 / -1; display: grid; gap: 0.35rem; padding: 0.8rem 1rem; border-left: 2px solid var(--vr-cyan); background: rgb(0 208 248 / 0.06); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); }
.finder__write .finder__label { color: var(--vr-cyan); margin: 0; }
.finder__service { color: var(--vr-cyan); text-decoration: none; font-weight: 600; }
@media (max-width: 860px) {
  .finder__box { grid-template-columns: 1fr; }
  .finder__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder__option { padding: 0.75rem; font-size: 0.92rem; }
  .finder__cols { grid-template-columns: 1fr; }
  .finder__panel { grid-template-columns: minmax(0, 1fr); }
  .finder__illo { grid-column: 1; grid-row: auto; width: min(100%, 12rem); }
  .finder__panel-title, .finder__first { grid-column: 1; }
}

/* ---------- Servicios: fichas ---------- */
.spec-list { margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line-strong); }
.spec {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.spec:target { border-left: 2px solid var(--vr-cyan); padding-left: 1rem; }
.spec__name { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 680; letter-spacing: -0.022em; line-height: 1.15; }
.spec__short { margin-top: 0.6rem; color: var(--text-3); }
.spec__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; color: var(--text-2); font-size: 0.97rem; }
.spec__body p + p { margin-top: 0.6rem; }
.spec-list--lite { border-top: 0; }
.spec-list--lite .spec { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.9fr); }
.spec__body--prose p { font-size: 1.1rem; line-height: 1.75; }
.spec__key { color: var(--vr-cyan); font-weight: 560; }
/* Enlace discreto al caso real dentro de un tema */
.spec__case { margin-top: 0.9rem; font-size: 0.98rem; }
.spec__case a { color: var(--vr-cyan); text-underline-offset: 4px; }
@media (max-width: 960px) {
  .spec, .spec-list--lite .spec { grid-template-columns: 1fr; }
  .spec__body { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ---------- Servicios: tres pasos ---------- */
.steps3__list { --g: clamp(1rem, 3vw, 2.5rem); list-style: none; padding: 0; margin: clamp(2.5rem, 6vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.steps3__step { position: relative; display: grid; align-content: start; gap: 0.35rem; padding-top: 0; }
.steps3__icon { display: block; width: 9rem; margin-bottom: 1.4rem; }
.steps3__step::before { content: ""; position: absolute; left: 0; top: calc(9rem * 0.7 + 0.7rem - 5px); width: 10px; height: 10px; background: var(--vr-cyan); transform: rotate(45deg); box-shadow: 0 0 12px var(--vr-cyan); }
.steps3__step:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: calc(9rem * 0.7 + 0.7rem - 1px); width: calc(100% + var(--g)); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ffffff, var(--vr-cyan) 45%, transparent) 0 0 / 70px 100% no-repeat, linear-gradient(90deg, rgb(61 116 255 / 0.55), rgb(0 208 248 / 0.4)); background-position: calc(100% + 70px) 0, 0 0; }
.steps3__n { color: var(--vr-cyan); font-size: 0.68rem; margin-top: 0.4rem; }
.steps3__title { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; }
.steps3__step p { color: var(--text-2); max-width: 24rem; }
.cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: clamp(2rem, 5vw, 3rem); color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .steps3__list.is-live .steps3__step:not(:last-child)::after { animation: steps-glint 4.8s linear infinite; animation-delay: calc(var(--i, 0) * 1.6s); }
}
.steps3__step:nth-child(2)::after { --i: 1; }
@keyframes steps-glint { 0% { background-position: -70px 0, 0 0; } 30%, 100% { background-position: calc(100% + 70px) 0, 0 0; } }
@media (max-width: 760px) {
  .steps3__list { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .steps3__step { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.1rem; padding-left: 1.5rem; }
  .steps3__icon { grid-column: 1; grid-row: 1 / span 3; width: 5.5rem; margin: 0; }
  .steps3__step > :not(.steps3__icon) { grid-column: 2; }
  .steps3__step::before { top: calc(5.5rem * 0.35 - 5px); }
  .steps3__step:not(:last-child)::after { left: 4px; top: calc(5.5rem * 0.35); width: 2px; height: calc(100% + 1.75rem);
    background: linear-gradient(180deg, #ffffff, var(--vr-cyan) 45%, transparent) 0 0 / 100% 60px no-repeat, linear-gradient(180deg, rgb(61 116 255 / 0.55), rgb(0 208 248 / 0.4)); background-position: 0 calc(100% + 60px), 0 0; }
  @keyframes steps-glint { 0% { background-position: 0 -60px, 0 0; } 30%, 100% { background-position: 0 calc(100% + 60px), 0 0; } }
}

/* ---------- Servicios: cómo funciona ---------- */
.how__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.how__sheet {
  display: grid;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.9);
  overflow: hidden;
}
.how__sheet > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.how__sheet > div:last-child { border-bottom: 0; }
.how__sheet dt { color: var(--text-3); font-size: 0.68rem; padding-top: 3px; }
.how__sheet dd { color: var(--text); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) {
  .how__grid, .faq-wrap { grid-template-columns: 1fr; }
  .how__sheet > div { grid-template-columns: 1fr; gap: 0.25rem; }
}
.reviews { padding-block: 0 clamp(3rem, 7vw, 5rem); }

/* ---------- Laboratorio ---------- */
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Simulador «Anatomía de una automatización»: una estación cada vez, minimapa arriba y un único botón con verbo */
.sim { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.sim__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim__badge { margin-top: 0.9rem; color: var(--text-3); font-size: 0.9rem; }
.sim__badge strong { color: var(--vr-cyan); font-weight: 600; }
.sim__frame { margin-top: 1.25rem; }
.js .sim.is-ready .sim__frame { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: radial-gradient(60% 70% at 25% 40%, rgb(4 74 246 / 0.12), transparent 70%), rgb(6 11 21 / 0.85); }
.js .sim__scenario:not(.is-on) { display: none; }
.sim__scenario + .sim__scenario { margin-top: 2rem; }
.sim__kind { display: inline-block; padding: 0.2rem 0.75rem; border: 1px solid rgb(0 208 248 / 0.4); border-radius: 999px; color: var(--vr-cyan); font-size: 0.85rem; }
.sim__kind--rules { border-color: var(--vr-azure); color: #9ec0ff; }
/* Minimapa de fases */
.sim__map { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.sim__map-btn { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.45rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--text-2); font: inherit; font-size: 0.85rem; font-weight: 600; text-align: left; cursor: pointer; transition: border-color 0.3s, color 0.3s, background-color 0.3s; }
.sim__map-btn:disabled { cursor: default; color: var(--text-3); }
.sim__map-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sim__map-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s; }
.sim__map-mean { display: block; margin-top: 0.3rem; color: var(--text-2); font-size: 0.82rem; line-height: 1.35; }
.js .sim.is-ready .sim__map-mean { display: none; }
.sim__map-item.is-done .sim__map-btn { color: var(--vr-cyan); border-color: rgb(0 208 248 / 0.35); }
.sim__map-item.is-done .sim__map-dot { background: rgb(0 208 248 / 0.55); border-color: var(--vr-cyan); }
.sim__map-item.is-on .sim__map-btn { color: #fff; border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.1); }
.sim__map-item.is-on .sim__map-dot { background: var(--vr-cyan); border-color: var(--vr-cyan); box-shadow: 0 0 10px var(--vr-cyan); }
/* Contenido del momento actual */
.sim__panel { margin-top: 1rem; }
.js .sim.is-ready .sim__body:not(.is-current) { display: none; }
.sim__body + .sim__body { margin-top: 1rem; }
.sim__body { color: var(--text-2); line-height: 1.6; }
.js .sim.is-ready .sim__body.is-current { animation: panel-in 0.35s var(--ease-out); }
.sim__body p + p, .sim__body p + div, .sim__body div + p { margin-top: 0.6rem; }
.sim__body strong { color: var(--text); }
.sim__what { color: var(--vr-cyan); font-size: 0.9rem; font-weight: 600; }
.sim__mean { margin-top: 1rem; padding: 0.6rem 0.8rem; border-left: 2px solid var(--vr-azure); background: rgb(12 140 247 / 0.07); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-2); font-size: 0.93rem; }
.sim__mail, .sim__doc, .sim__invoice { padding: 0.75rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(6 11 21 / 0.9); color: var(--text); }
.sim__invoice-title { font-weight: 650; margin-bottom: 0.5rem; }
.sim__invoice dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.4rem 1rem; margin: 0; }
.sim__invoice dt { color: var(--text-3); font-size: 0.82rem; }
.sim__invoice dd { margin: 0; font-weight: 600; }
.sim__note { color: var(--text-3); font-size: 0.9rem; }
.sim__alert { padding: 0.6rem 0.8rem; border-left: 2px solid #ff8a7a; background: rgb(255 138 122 / 0.1); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); }
.sim__quote { padding: 0.6rem 0.8rem; border-left: 2px solid var(--vr-azure); background: rgb(12 140 247 / 0.08); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); font-style: italic; }
.sim__quote span, .sim__points span { color: var(--text-3); font-style: normal; font-size: 0.88rem; }
.sim__points { margin: 0.5rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.3rem; color: var(--text); }
.sim__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.sim__result { color: var(--text) !important; font-weight: 600; font-size: 1.05rem; }
.sim__sheet { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.sim__sheet th, .sim__sheet td { padding: 0.4rem 0.55rem; border: 1px solid var(--line); text-align: left; white-space: nowrap; }
.sim__sheet th { color: var(--text-3); font-weight: 500; }
.sim__sheet .is-new td { color: #fff; background: rgb(0 208 248 / 0.12); border-color: rgb(0 208 248 / 0.45); }
/* Paso 0: los tres correos como tarjetas grandes */
.sim__samples { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.sim__sample { display: grid; gap: 0.3rem; padding: 0.95rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(6 11 21 / 0.85); color: var(--text); font: inherit; font-size: 1rem; text-align: left; line-height: 1.4; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.sim__sample:hover { border-color: var(--vr-cyan); }
.sim__sample[aria-pressed="true"] { border-color: var(--vr-cyan); background: rgb(12 140 247 / 0.16); box-shadow: 0 0 0 3px rgb(0 208 248 / 0.12); }
.sim__sample:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sim__sample-tag { color: var(--vr-cyan); font-size: 0.85rem; font-weight: 600; }
/* Botón principal y final */
.sim__action { margin-top: 1.25rem; }
.sim__action[hidden] { display: none; }
.sim__action .btn { min-width: 12rem; }
.sim__action .btn:disabled { opacity: 0.45; cursor: default; }
.sim__end { margin-top: 1.25rem; display: grid; gap: 0.9rem; justify-items: start; }
.js .sim.is-ready .sim__end:not(.is-shown) { display: none; }
.sim__how { width: 100%; padding: 0.9rem 1.1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-2); }
.sim__how p + p { margin-top: 0.25rem; }
.sim__how strong { color: var(--text); }
.sim__how-title { color: var(--vr-cyan); font-weight: 650; margin-bottom: 0.35rem; }
/* La estación grande */
.sim__art { display: none; }
.js .sim.is-ready .sim__art { display: block; position: relative; aspect-ratio: 120 / 100; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.sim__station { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(0.94); transition: opacity 0.35s, transform 0.45s var(--ease-out); overflow: visible; }
.sim__art[data-at="0"] .sim__station[data-st="0"], .sim__art[data-at="1"] .sim__station[data-st="1"], .sim__art[data-at="2"] .sim__station[data-st="2"], .sim__art[data-at="3"] .sim__station[data-st="3"] { opacity: 1; transform: none; filter: drop-shadow(0 0 14px rgb(0 208 248 / 0.25)); }
.sim__art .st-light { fill: transparent; stroke: var(--vr-azure); stroke-width: 1.6; }
.sim__art[data-at="0"] .st-light { fill: var(--vr-cyan); stroke: var(--vr-cyan); }
.sim__art .st-flag { transform-box: fill-box; transform-origin: 0% 100%; transform: rotate(80deg); transition: transform 0.45s var(--ease-out) 0.5s; }
.sim__art[data-at="0"] .st-flag { transform: none; }
.sim__art .st-gear { transform-box: fill-box; transform-origin: center; }
.sim__art.is-noai .st-chip { display: none; }
.sim__art .st-wait { fill: none; stroke: var(--vr-cyan); stroke-dasharray: 4 4; opacity: 0; }
.sim__art .st-ok { fill: none; stroke: var(--vr-cyan); stroke-width: 2.2; opacity: 0; }
.sim__art .st-q { fill: var(--vr-cyan); font-size: 16px; font-weight: 700; text-anchor: middle; stroke: none; opacity: 0; }
.sim__art.is-waiting .st-wait, .sim__art.is-waiting .st-q { opacity: 1; }
.sim__art.is-decided .st-ok { opacity: 1; }
.sim__art .st-badge { fill: var(--vr-cyan); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sim__art[data-at="3"] .st-badge { opacity: 1; }
/* El objeto del escenario, colocado en cada estación */
.sim__obj { position: absolute; left: 50%; top: 42%; width: 30%; transform: translate(-50%, -50%) scale(1.5); display: grid; justify-items: center; gap: 0.3rem; transition: left 0.5s var(--ease-out), top 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.sim__art[data-at="0"] .sim__obj { left: 46%; top: 44%; transform: translate(-50%, -50%) scale(0.75); }
.sim__art[data-at="1"] .sim__obj { left: 50%; top: 14%; transform: translate(-50%, -50%) scale(0.8); }
.sim__art[data-at="2"] .sim__obj { left: 70%; top: 22%; transform: translate(-50%, -50%) scale(0.75); }
.sim__art[data-at="3"] .sim__obj { left: 46%; top: 66%; transform: translate(-50%, -50%) scale(0.75); }
.sim__objsvg { width: 100%; height: auto; filter: drop-shadow(0 0 10px rgb(0 208 248 / 0.5)); }
.sim__objsvg .o { display: none; }
.sim__art[data-obj="sobre"] .o--sobre, .sim__art:not([data-obj]) .o--sobre, .sim__art[data-obj="factura"] .o--factura, .sim__art[data-obj="doc"] .o--doc, .sim__art[data-obj="calendario"] .o--calendario { display: inline; }
.sim__objsvg .h { fill: #0a1220; }
.sim__objsvg .eur { fill: var(--vr-cyan-hi); stroke: none; font-size: 12px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.sim__tag { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--vr-cyan); color: #04121f; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.sim__tag:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sim__art.is-arrive[data-at="0"] .sim__objsvg { animation: obj-drop 0.7s var(--ease-out) both; }
  .sim__art.is-arrive[data-at="1"] .sim__objsvg { animation: obj-process 1.2s ease-in-out both; }
  .sim__art.is-arrive[data-at="1"] .st-gear--a { animation: gear-spin 1.3s ease-in-out; }
  .sim__art.is-arrive[data-at="1"] .st-gear--b { animation: gear-spin-r 1.3s ease-in-out; }
  .sim__art.is-arrive[data-at="1"] .sim__tag { animation: tag-stamp 0.5s var(--ease-out) 0.9s both; }
  .sim__art.is-arrive[data-at="2"] .st-lupa { animation: lupa-sway 1.1s ease-in-out 0.3s; transform-box: fill-box; transform-origin: 30% 30%; }
  .sim__art.is-waiting .st-wait { animation: wait-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .sim__art.is-arrive[data-at="3"] .sim__objsvg { animation: obj-file 0.8s var(--ease-out) both; }
  .sim__art.is-arrive[data-at="3"] .st-badge { animation: badge-pop 0.5s var(--ease-out) 0.7s both; }
}
@keyframes obj-drop { from { transform: translateY(-60%); opacity: 0.3; } 70% { transform: translateY(8%); opacity: 1; } to { transform: none; } }
@keyframes obj-process { 0% { transform: none; } 40%, 60% { transform: translateY(60%) scale(0.4); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
@keyframes tag-stamp { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gear-spin { to { transform: rotate(240deg); } }
@keyframes gear-spin-r { to { transform: rotate(-300deg); } }
@keyframes lupa-sway { 0%, 100% { transform: none; } 30% { transform: rotate(-12deg); } 65% { transform: rotate(9deg); } }
@keyframes wait-pulse { 0%, 100% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes obj-file { from { transform: translateY(-50%); } 60% { transform: translateY(12%) scale(0.85); } to { transform: none; } }
@keyframes badge-pop { from { transform: scale(0); } 70% { transform: scale(1.3); } to { transform: none; } }
@media (max-width: 860px) {
  .js .sim.is-ready .sim__frame { grid-template-columns: minmax(0, 1fr); }
  .js .sim.is-ready .sim__art { position: relative; top: auto; width: min(100%, 18rem); margin-inline: auto; }
  .sim__map-btn { flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.4rem 0.2rem; font-size: 0.72rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sim__station, .sim__obj, .sim__art .st-flag, .sim__map-btn, .sim__map-dot { transition: none; }
  .js .sim.is-ready .sim__body.is-current { animation: none; }
}
.anatomy__note { margin-top: 2rem; color: var(--text-3); max-width: 44rem; }

.log-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.log-wrap__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
.log-art { position: relative; width: min(100%, 15rem); aspect-ratio: 200 / 150; margin-top: 2rem; }
.log-art__item { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity 0.4s; }
.log-art__item path, .log-art__item rect, .log-art__item circle { fill: none; stroke: var(--vr-azure); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.log-art__item .acc { stroke: var(--vr-cyan); }
.log-art__item.is-active { opacity: 1; }
.bitacora.is-armed .log-art__item path, .bitacora.is-armed .log-art__item rect, .bitacora.is-armed .log-art__item circle { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-io); }
.bitacora.is-armed .log-art__item.is-active path, .bitacora.is-armed .log-art__item.is-active rect, .bitacora.is-armed .log-art__item.is-active circle { stroke-dashoffset: 0; }
.log { --fill: 0px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.log::before, .log::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; margin-left: -1px; border-radius: 2px; }
.log::before { bottom: 0; background: var(--line-strong); }
.log::after { height: 100%; background: linear-gradient(180deg, var(--vr-electric), var(--vr-cyan)); box-shadow: 0 0 10px rgb(0 208 248 / 0.5); }
.bitacora.is-armed .log::after { height: var(--fill); }
.log__marker { position: absolute; left: 0; top: 0; z-index: 2; width: 18px; height: 18px; margin: -9px 0 0 -9px; color: var(--vr-cyan-hi); filter: drop-shadow(0 0 6px var(--vr-cyan)); pointer-events: none; display: none; }
.bitacora.is-armed .log__marker { display: block; transform: translateY(var(--fill)); }
.log__marker svg { width: 100%; height: 100%; fill: currentColor; }
.log__entry { position: relative; padding: 0 0 2.25rem clamp(1.4rem, 3vw, 2rem); transition: opacity 0.4s; }
.log__entry::before { content: ""; position: absolute; left: -5px; top: 0.45rem; width: 10px; height: 10px; background: var(--bg); border: 1px solid var(--vr-azure); transform: rotate(45deg); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.log__entry--live::before, .bitacora.is-static .log__entry::before, .bitacora:not(.is-armed) .log__entry::before, .bitacora.is-armed .log__entry.is-lit::before { background: var(--vr-cyan); border-color: var(--vr-cyan); box-shadow: 0 0 12px var(--vr-cyan); }
.bitacora.is-armed .log__entry:not(.is-lit)::before { background: var(--bg); border-color: var(--vr-azure); box-shadow: none; }
.log__status { display: inline-block; padding: 0.15rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-2); font-size: 0.85rem; transition: border-color 0.4s, color 0.4s; }
.log__entry--live .log__status, .bitacora.is-armed .log__entry.is-lit .log__status { border-color: var(--vr-cyan); color: var(--vr-cyan); }
.log__title { margin: 0.55rem 0 0.4rem; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.015em; }
.log__title a { text-decoration: none; }
.log__title a:hover { color: var(--vr-cyan); }
.log__entry p { color: var(--text-2); max-width: 36rem; }
@media (max-width: 860px) { .log-wrap { grid-template-columns: 1fr; } .log-wrap__intro { position: static; } .log-art { display: none; } }
@media (prefers-reduced-motion: reduce) { .log-art__item, .log__entry, .log__entry::before, .log__status { transition: none; } }

/* Etiqueta superior en texto normal, pequeña y en color de acento */
.label-accent { color: var(--vr-cyan); font-size: 0.92rem; font-weight: 600; }

.jarvis-teaser__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: radial-gradient(60% 80% at 80% 50%, rgb(4 74 246 / 0.25), transparent 70%), rgb(6 11 21 / 0.85);
}
.jarvis-teaser__mark .jcore { width: min(100%, 280px); height: auto; margin-inline: auto; }
@media (max-width: 760px) { .jarvis-teaser__inner { grid-template-columns: 1fr; } .jarvis-teaser__mark { order: -1; } .jarvis-teaser__mark .jcore { width: 180px; } }

.offer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.offer__card {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.8);
}
.offer__card { position: relative; isolation: isolate; }
.offer__card .label-accent { margin-bottom: 0; }
.offer__icon { display: block; width: 6rem; margin-bottom: 0.25rem; }
.offer__card .offer__links { align-items: center; }
/* Brillo radial que sigue al cursor por el borde y el fondo (ofertas.js; solo puntero fino y sin movimiento reducido) */
.offer__card.has-glow::before, .offer__card.has-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s; }
.offer__card.has-glow::before { z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(0 208 248 / 0.1), transparent 60%); }
.offer__card.has-glow::after { padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(0 208 248 / 0.85), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.offer__card.has-glow:hover::before, .offer__card.has-glow:hover::after { opacity: 1; }
.offer__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); font-weight: 680; letter-spacing: -0.02em; line-height: 1.15; }
.offer__card p { color: var(--text-2); }
.offer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
@media (max-width: 760px) { .offer__grid { grid-template-columns: 1fr; } }

/* Núcleo del holograma (compartido) */
.jcore { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  /* La bolita recorre la elipse de forma continua (dos movimientos senoidales desfasados un cuarto de vuelta); solo mientras se ve */
  .is-seen .jorb--x { animation: jorb-x 16s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
  .is-seen .jorb--y { animation: jorb-y 16s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; animation-delay: -8s; }
  .jcore__orbit--b { transform-origin: 160px 160px; animation: orbit 40s linear infinite reverse; }
  .jcore__gem { transform-origin: 160px 160px; animation: float-gem 6s ease-in-out infinite; }
  .jcore__facet { animation: facet-shimmer 5s ease-in-out infinite; animation-delay: calc(var(--d) * 0.5s); }
  .jcore__eye { transform-origin: 160px 160px; animation: eye-pulse 3.2s ease-in-out infinite; }
}
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes jorb-x { from { transform: translateX(-138px); } to { transform: translateX(138px); } }
@keyframes jorb-y { from { transform: translateY(-42px); } to { transform: translateY(42px); } }
@keyframes float-gem { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes facet-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes eye-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.75); opacity: 0.7; } }

/* ---------- Jarvis: holograma ---------- */
.holo { padding-top: 0; }
.holo__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(50% 70% at 25% 50%, rgb(0 208 248 / 0.14), transparent 70%),
    rgb(3 6 12 / 0.85);
  overflow: hidden;
}
/* Líneas de barrido del holograma */
.holo__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgb(140 236 255 / 0.04) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.holo__figure { position: relative; display: grid; justify-items: center; gap: 0.75rem; }
.holo__figure .jcore { width: min(100%, 300px); height: auto; filter: drop-shadow(0 0 30px rgb(0 208 248 / 0.25)); }
.holo__figure.is-speaking .jcore__eye { animation-duration: 0.5s; }
.holo__figure.is-speaking .jcore__glow { opacity: 1; }
.jcore__glow { opacity: 0.6; transition: opacity 0.4s; }
.holo__wave { display: flex; align-items: center; gap: 4px; height: 28px; }
.holo__wave span {
  width: 3px; height: 4px;
  border-radius: 2px;
  background: var(--vr-cyan);
  opacity: 0.5;
  transition: height 0.2s;
}
.holo__figure.is-speaking .holo__wave span { animation: wave 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * -0.07s); }
@keyframes wave { 0%, 100% { height: 4px; opacity: 0.4; } 50% { height: 24px; opacity: 1; } }
.holo__name { color: var(--text-3); font-size: 0.66rem; }

.holo__dialog { position: relative; display: grid; gap: 1.25rem; }
.holo__screen {
  min-height: 9.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgb(0 208 248 / 0.35);
  border-radius: var(--radius);
  background: rgb(0 208 248 / 0.05);
  box-shadow: inset 0 0 40px rgb(0 208 248 / 0.06);
}
.holo__asked { color: var(--vr-cyan); font-size: 0.66rem; margin-bottom: 0.6rem; }
.holo__answer { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.55; color: var(--text); }
.holo__questions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.holo__questions[hidden], .holo__screen[hidden] { display: none; }
.holo__q {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgb(6 11 21 / 0.8);
  cursor: pointer;
  font-size: 0.93rem;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.holo__q:hover { border-color: var(--vr-cyan); }
.holo__q[aria-pressed="true"] { border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.14); color: #fff; }
.holo__static details { border-bottom: 1px solid var(--line); padding: 0.75rem 0; }
.holo__static summary { cursor: pointer; font-weight: 600; }
.holo__static p { color: var(--text-2); margin-top: 0.5rem; }
.holo__disclaimer { font-size: 0.8rem; color: var(--text-3); }
@media (max-width: 860px) {
  .holo__stage { grid-template-columns: 1fr; }
  .holo__figure .jcore { width: 190px; }
}

/* Diagrama de arquitectura */
.arch-wrap { margin-top: clamp(2rem, 5vw, 3rem); }
.arch-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(3 6 12 / 0.7); }
.arch { width: 100%; min-width: 720px; height: auto; font-family: var(--font-sans); }
.arch-wrap figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-3); }
.arch__host { fill: none; stroke: var(--line-strong); stroke-dasharray: 4 6; }
.arch__pill rect { fill: #0a1220; stroke: rgb(140 190 255 / 0.35); }
.arch__pill-icon * { fill: none; stroke: var(--vr-cyan); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.arch__pill text { fill: var(--text-2); font-size: 13px; font-weight: 500; }
.arch__edges path { fill: none; stroke: rgb(140 190 255 / 0.3); stroke-width: 1.5; transition: stroke 0.4s, stroke-width 0.4s; }
.arch__node rect, .arch__node path { fill: #0a1220; stroke: rgb(140 190 255 / 0.3); stroke-width: 1; transition: stroke 0.4s, fill 0.4s, opacity 0.4s; }
.arch__node text { fill: var(--text); font-size: 17px; font-weight: 600; transition: fill 0.4s, opacity 0.4s; }
.arch__node .arch__sub { fill: var(--text-3); font-size: 13px; font-weight: 400; }
.arch__node--core rect { stroke: var(--vr-azure); }
.arch__node--gate path { stroke: var(--vr-cyan); stroke-dasharray: 4 4; }
.arch__node--gate text { font-size: 14px; }
.arch__node--out rect { stroke-dasharray: 4 4; }
.arch.has-focus .arch__node:not(.is-focus) rect,
.arch.has-focus .arch__node:not(.is-focus) path,
.arch.has-focus .arch__node:not(.is-focus) text { opacity: 0.35; }
.arch .arch__node.is-focus rect, .arch .arch__node.is-focus path { stroke: var(--vr-cyan); fill: rgb(0 208 248 / 0.1); }
.arch .arch__edges path.is-focus { stroke: var(--vr-cyan); stroke-width: 2.5; stroke-dasharray: 6 6; animation: edge-flow 1s linear infinite; }
.arch g[data-node="host"].is-focus .arch__host { stroke: var(--vr-cyan); }
.arch g[data-node="host"].is-focus .arch__host-label { fill: var(--vr-cyan); }
@keyframes edge-flow { to { stroke-dashoffset: -12; } }

/* Jarvis: bloques técnicos */
.case__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.case__block {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.8);
  color: var(--text-2);
}
.case__block p + p { margin-top: 0.75rem; }
.case__block--wide { grid-column: 1 / -1; }
.case__title { font-size: 1.3rem; font-weight: 680; letter-spacing: -0.015em; color: var(--text); margin-bottom: 0.75rem; }
.principles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.principles li { position: relative; display: grid; align-content: start; gap: 0.4rem; color: var(--text-2); }
.principles li::before { display: none; }
.principles__illo { display: block; width: min(100%, 9rem); margin-bottom: 0.4rem; }
@media (max-width: 1000px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.principles li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--vr-cyan); transform: rotate(45deg); }
.principles strong { color: var(--text); }
@media (max-width: 760px) { .case__grid, .principles { grid-template-columns: 1fr; } }
/* Estado actual como panel de estado */
.status__live { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.85rem; border: 1px solid rgb(0 208 248 / 0.45); border-radius: 999px; color: var(--vr-cyan); font-weight: 600; }
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vr-cyan); box-shadow: 0 0 10px var(--vr-cyan); }
@media (prefers-reduced-motion: no-preference) { .status__dot { animation: status-beat 2.4s ease-in-out infinite; } }
@keyframes status-beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } }
.status__lead { margin-top: 1rem !important; color: var(--text-2); }
.status__pills { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.status__pills li { padding: 0.25rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 0.88rem; }
.status__path { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.status__path li { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-2); font-weight: 600; }
.status__path li + li::before { content: "→"; color: var(--text-3); margin-right: 0.1rem; }
.status__path li::after { content: ""; order: -1; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-strong); }
.status__path li.is-now { color: var(--vr-cyan); }
.status__path li.is-now::after { background: var(--vr-cyan); border-color: var(--vr-cyan); box-shadow: 0 0 10px var(--vr-cyan); }
.status__note { margin-top: 0.75rem !important; color: var(--text-3); font-size: 0.92rem; }
/* Lo que no se publica: un expediente con líneas tachadas y el texto legible encima */
.redacted__doc { position: relative; padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: repeating-linear-gradient(0deg, transparent 0 27px, rgb(255 255 255 / 0.03) 27px 28px), #0c1424; overflow: hidden; }
.redacted__lines { display: grid; gap: 0.55rem; color: var(--text-3); font-size: 0.85rem; opacity: 0.85; }
.redacted__lines p { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.redacted__lines .bar { display: inline-block; flex: none; width: var(--w); max-width: 100%; height: 0.95em; background: #000; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.redacted__text { position: relative; margin-top: 0.9rem !important; padding: 0.75rem 0.9rem; border-left: 2px solid #ff8a7a; background: rgb(6 11 21 / 0.92); color: var(--text) !important; line-height: 1.55; }
.redacted p:last-child { margin-top: 1rem; }

/* ---------- Sobre mí ---------- */
/* Nombre: las letras llegan fragmentadas desde puntos distintos, con un trazo de luz, y convergen con un rebote corto; terminan de converger (~2,4 s) a la vez que la entrada de la tarjeta del retrato.
   Solo transform y un opacity mínimo de 0,3 (el texto cuenta para el LCP desde el primer pintado); estático con movimiento reducido. */
.name-fx .nl { display: inline-block; width: var(--w, auto); } /* --w: ancho de la letra en Archivo, igual con la fuente de reserva */
@media (prefers-reduced-motion: no-preference) {
  .about-hero .name-fx { animation: none; }
  .name-fx .nl { animation: name-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.1s + var(--i) * 0.105s); will-change: transform; }
  .name-fx .nl:nth-child(3n + 1) { --dx: -0.9em; --dy: -0.6em; --r: -14deg; }
  .name-fx .nl:nth-child(3n + 2) { --dx: 0.3em; --dy: 0.8em; --r: 10deg; }
  .name-fx .nl:nth-child(3n) { --dx: 0.9em; --dy: -0.5em; --r: 18deg; }
  .name-fx .nl:nth-child(4n + 1) { --dy: 0.9em; }
  .name-fx .nl:nth-child(5n) { --dx: -0.6em; }
}
@keyframes name-in {
  from { opacity: 0.3; transform: translate(var(--dx, 0.5em), var(--dy, -0.5em)) rotate(var(--r, 8deg)) scale(1.5); text-shadow: 0 0 0.35em #00e9fe, 0 0 0.9em rgb(0 208 248 / 0.8); }
  70% { opacity: 1; text-shadow: 0 0 0.25em rgb(0 233 254 / 0.7); }
  to { opacity: 1; transform: none; text-shadow: 0 0 0 transparent; }
}
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.portrait__frame {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(150deg, rgb(0 208 248 / 0.2), transparent 40%),
    linear-gradient(330deg, rgb(4 74 246 / 0.3), transparent 50%),
    var(--bg-2);
  /* Marco facetado con los ángulos del logo */
  clip-path: polygon(0 6%, 22% 0, 100% 0, 100% 88%, 80% 100%, 0 100%);
}
.about-body__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.about-block {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.8);
  color: var(--text-2);
}
.about-block__title { font-size: 1.3rem; font-weight: 680; letter-spacing: -0.015em; color: var(--text); margin-bottom: 0.9rem; }
.cv { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.cv > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; }
.cv dt { color: var(--text-3); font-size: 0.66rem; padding-top: 4px; }
@media (max-width: 760px) {
  .about-hero__grid, .about-body__grid { grid-template-columns: 1fr; }
  .portrait { max-width: 260px; }
  .cv > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------- Contacto: cuestionario ---------- */
.contact { padding-top: 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.quiz {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgb(12 140 247 / 0.08), transparent 40%),
    rgb(6 11 21 / 0.92);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.quiz { overflow: hidden; }
.quiz > :not(.watermark):not(.quiz__trap) { position: relative; z-index: 1; }
.quiz__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quiz__progress { margin-bottom: 1.75rem; }
.quiz__progress[hidden] { display: none; }
/* Con JS, contact.js muestra la barra al arrancar: se reserva su hueco desde el principio para que el
   primer paso no salte hacia abajo (CLS) */
.js .quiz__progress[hidden] { display: block; visibility: hidden; }
.quiz__bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.quiz__bar span {
  display: block;
  height: 100%;
  width: calc(var(--p, 0.2) * 100%);
  background: linear-gradient(90deg, var(--vr-electric), var(--vr-cyan));
  box-shadow: 0 0 12px var(--vr-cyan);
  transition: width 0.6s var(--ease-out);
}
.quiz__bar { --p: 0.2; }
.quiz__bar span { width: calc(var(--p) * 100%); }
.quiz__count { margin-top: 0.6rem; color: var(--text-3); font-size: 0.66rem; }
.quiz__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz__step + .quiz__step { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.is-stepped .quiz__step + .quiz__step { margin-top: 0; padding-top: 0; border-top: 0; }
.quiz__step[hidden] { display: none; }
.is-stepped .quiz__step:not([hidden]) { animation: panel-in 0.45s var(--ease-out); }
.quiz__legend {
  padding: 0;
  margin-bottom: 1.25rem;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.quiz__legend:focus { outline: none; }
.quiz__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.quiz__choices--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__body {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(3 6 12 / 0.6);
  transition: border-color 0.2s, background-color 0.2s;
}
.choice__body strong { font-weight: 620; }
.choice__body small { color: var(--text-3); font-size: 0.85rem; line-height: 1.4; }
.choice:hover .choice__body { border-color: var(--vr-azure); }
.choice input:checked + .choice__body { border-color: var(--vr-cyan); background: rgb(12 140 247 / 0.14); box-shadow: 0 0 0 3px rgb(0 208 248 / 0.12); }
.choice input:focus-visible + .choice__body { outline: 2px solid var(--focus); outline-offset: 2px; }
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-weight: 560; }
.field__opt, .field__hint { color: var(--text-3); font-weight: 400; font-size: 0.88rem; }
.field input, .field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(3 6 12 / 0.8);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--vr-cyan); box-shadow: 0 0 0 3px rgb(0 208 248 / 0.18); }
.field [aria-invalid="true"] { border-color: #ff8a7a; }
.quiz__error { margin-top: 0.75rem; color: #ffb3a8; font-size: 0.92rem; }
.field__error { color: #ffb3a8; font-size: 0.9rem; line-height: 1.4; margin: 0; }
.field__error:empty { display: none; }
.field__suggest { padding: 0.1rem 0.5rem; border: 1px solid var(--vr-cyan); border-radius: 999px; background: rgb(0 208 248 / 0.1); color: var(--vr-cyan); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.field__suggest:hover { background: rgb(0 208 248 / 0.2); }
.field__suggest:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field__count { color: var(--text-3); font-size: 0.85rem; margin: 0; }
.field__count.is-ok { color: var(--vr-cyan); }
.quiz__error[hidden] { display: none; }
.quiz__nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quiz__nav[hidden] { display: none; }
.quiz__nav [data-next] { margin-left: auto; }
.quiz__nav [hidden] { display: none; }
.quiz__summary { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.quiz__summary[hidden] { display: none; }
.quiz__summary > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; }
.quiz__summary dt { color: var(--text-2); font-size: 0.92rem; font-weight: 600; }
.privacy-first { font-size: 0.9rem; color: var(--text-2); line-height: 1.55; }
.privacy-first__line { color: var(--text); }
.privacy-first__more { margin-top: 0.6rem; }
.privacy-first__more summary { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: var(--vr-cyan); font-weight: 600; font-size: 0.92rem; list-style: none; }
.privacy-first__more summary::-webkit-details-marker { display: none; }
.privacy-first__more summary::before { content: "+"; font-family: var(--font-mono); transition: transform 0.25s var(--ease-out); }
.privacy-first__more[open] summary::before { transform: rotate(45deg); }
.privacy-first__more summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.privacy-first__more ul { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; list-style: disc; }
.privacy-first__more p { margin-top: 0.6rem; }
.privacy-first strong { color: var(--text-2); font-weight: 600; }
.check { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.1rem; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--vr-azure); flex: none; }
.cf-turnstile { margin-top: 1rem; }
.quiz__submit { margin-top: 1.5rem; }
.quiz__submit[disabled] { opacity: 0.6; cursor: progress; }
.quiz__status { margin-top: 0.9rem; color: var(--text-2); min-height: 1.5em; }
.contact__aside { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.contact__card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(6 11 21 / 0.75); color: var(--text-2); }
.contact__card .kicker { margin-bottom: 0.75rem; }
.contact__card--direct { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.contact__direct { min-width: 0; }
.contact__card--direct { overflow: hidden; }
.contact__next { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.contact__next li::marker { color: var(--vr-cyan); font-family: var(--font-mono); font-size: 0.85em; }
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__aside { position: static; }
}
@media (max-width: 560px) {
  .quiz__choices, .quiz__choices--row { grid-template-columns: 1fr; }
  .quiz__summary > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------- Gracias ---------- */
.kicker .spark { width: 9px; height: 9px; margin-right: 0.4rem; vertical-align: -1px; }
.thanks { padding-top: 0; }
.thanks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.thanks__card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.8);
  color: var(--text-2);
}
.thanks__card--wide {
  grid-column: 1 / -1;
  border-left: 2px solid var(--vr-cyan);
  background: linear-gradient(120deg, rgb(12 140 247 / 0.12), transparent 50%), rgb(6 11 21 / 0.85);
}
.thanks__card .actions { margin-top: 0.5rem; }
.thanks__title { font-size: 1.35rem; font-weight: 680; letter-spacing: -0.015em; color: var(--text); }
/* Cabecera en dos columnas: el agradecimiento y el logo holográfico grande */
.thanks-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.thanks-hero__logo { display: grid; justify-items: center; }
@media (max-width: 860px) { .thanks-hero__grid { grid-template-columns: minmax(0, 1fr); } .thanks-hero__logo { order: -1; } .thanks-hero__logo .lholo--lg { width: min(15rem, 70vw); } }
/* Bloque principal, tres tarjetas iguales y firma */
.thanks__main { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--vr-cyan); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgb(12 140 247 / 0.16), transparent 60%), rgb(6 11 21 / 0.9); box-shadow: 0 0 0 4px rgb(0 208 248 / 0.06), 0 0 36px rgb(0 208 248 / 0.12); }
.thanks__main-title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.thanks__main p { margin-top: 0.6rem; max-width: 40rem; color: var(--text-2); }
.thanks__main .actions { margin-top: 1.25rem; }
.thanks__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.thanks__tile { display: grid; align-content: start; gap: 0.6rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(6 11 21 / 0.8); color: var(--text-2); transition: border-color 0.3s, transform 0.4s var(--ease-out); }
.thanks__tile:hover, .thanks__tile:focus-within { border-color: var(--vr-cyan); transform: translateY(-3px); }
.thanks__tile p { margin: 0; }
.thanks__tile .share, .thanks__tile .actions { margin-top: 0.25rem; }
.thanks__icon { display: block; width: 3rem; height: 3rem; color: var(--vr-cyan); }
.thanks__icon .ico { width: 100%; height: 100%; stroke-width: 1.4; }
.thanks__sign { margin-top: clamp(1.75rem, 4vw, 2.5rem); text-align: center; color: var(--text-2); font-size: 1.05rem; }
.thanks__sign span { color: var(--vr-cyan); font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) { .thanks__trio { grid-template-columns: minmax(0, 1fr); } }
/* Los iconos se animan al pasar el ratón o enfocar la tarjeta (estáticos con movimiento reducido) */
@media (prefers-reduced-motion: no-preference) {
  .thanks__tile:hover .ic-n, .thanks__tile:focus-within .ic-n { animation: ic-pulse 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .thanks__tile:hover .ic-n2, .thanks__tile:focus-within .ic-n2 { animation-delay: 0.15s; }
  .thanks__tile:hover .ic-n3, .thanks__tile:focus-within .ic-n3 { animation-delay: 0.3s; }
  .thanks__tile:hover .ic-card, .thanks__tile:focus-within .ic-card { animation: ic-tilt 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .thanks__tile:hover .ic-page, .thanks__tile:focus-within .ic-page { animation: ic-flip 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
}
@keyframes ic-pulse { 50% { transform: scale(1.5); } }
@keyframes ic-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 70% { transform: rotate(6deg); } }
@keyframes ic-flip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
.share { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share [hidden] { display: none; }
.share__status { font-size: 0.88rem; color: var(--vr-cyan); min-height: 1.3em; }
@media (max-width: 760px) { .thanks__grid { grid-template-columns: 1fr; } }

/* ---------- Guías: índice ---------- */
.guides-index { padding-top: 0; }
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filter[hidden] { display: flex; visibility: hidden; } /* reserva su sitio hasta que el script lo muestra: sin saltos de diseño */
.filter__chip {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgb(6 11 21 / 0.7);
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.filter__chip:hover { border-color: var(--vr-cyan); }
.filter__chip[aria-pressed="true"] { border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.14); color: #fff; }
.guide-list { border-top: 1px solid var(--line-strong); }
.guide-row { border-bottom: 1px solid var(--line); }
.guide-row[hidden] { display: none; }
.guide-row a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) auto;
  gap: 0.4rem 2rem;
  padding: 1.75rem 0.5rem;
  text-decoration: none;
}
.guide-row a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(12 140 247 / 0.14), transparent 75%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.guide-row a:hover::before { transform: scaleX(1); }
.guide-row__cat { color: var(--vr-cyan); font-size: 0.66rem; padding-top: 0.5rem; grid-row: span 2; }
.guide-row__title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 660; letter-spacing: -0.022em; line-height: 1.2; transition: color 0.3s; }
.guide-row a:hover .guide-row__title { color: #fff; }
.guide-row__desc { grid-column: 2; color: var(--text-2); max-width: 44rem; }
.guide-row__meta { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; color: var(--text-3); font-size: 0.85rem; padding-top: 0.35rem; line-height: 1.4; }
.guide-row__meta > span { white-space: nowrap; }
.meta-icon { display: inline-flex; vertical-align: -3px; margin-left: 0.45rem; color: var(--vr-cyan); }
.meta-icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.guide-list__empty { padding: 2rem 0; color: var(--text-3); }
@media (max-width: 760px) {
  .guide-row a { grid-template-columns: 1fr; padding: 1.4rem 0.25rem; }
  .guide-row__cat, .guide-row__desc, .guide-row__meta { grid-column: 1; grid-row: auto; padding-top: 0; }
  .guide-row__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; }
  .guide-row__meta > span + span::before { content: "·"; margin-right: 0.5rem; }
}
/* Cómo elijo lo que recomiendo: encajar piezas (mismo arrastre e imán que la 404) */
.fit { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.fit__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fit__badge { margin-top: 1rem; color: var(--text-3); font-size: 0.9rem; }
.fit__badge strong { color: var(--vr-cyan); font-weight: 600; }
.js .fit__panel:not(.is-on) { display: none; }
.fit__context { margin-top: 1.25rem; color: var(--text-2); }
.fit__cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; margin-top: 1rem; }
.fit__left, .fit__right { min-width: 0; }
/* Los cinco filtros encima del escenario */
.fit__bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.fit__f { display: grid; gap: 0.15rem; justify-items: center; width: 100%; min-height: 3.1rem; padding: 0.45rem 0.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(6 11 21 / 0.8); color: var(--text-2); font: inherit; font-size: 0.78rem; line-height: 1.15; text-align: center; cursor: help; transition: border-color 0.35s, background-color 0.35s, color 0.35s, box-shadow 0.35s; overflow-wrap: anywhere; }
.fit__f .mono { color: var(--text-3); font-size: 0.58rem; }
.fit__f:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fit__f.is-pass { border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.12); color: #fff; box-shadow: 0 0 14px rgb(0 208 248 / 0.25); }
.fit__f.is-pass .mono { color: var(--vr-cyan); }
.fit__f.is-fail { border-color: #ff8a7a; background: rgb(255 138 122 / 0.16); color: #fff; box-shadow: 0 0 14px rgb(255 138 122 / 0.3); }
.fit__f.is-fail .mono { color: #ff8a7a; }
.fit__f .short { display: none; }
.fit__info { min-height: 2.9em; margin-top: 0.6rem; color: var(--text-2); font-size: 0.9rem; line-height: 1.4; }
.fit__info strong { color: var(--text); font-weight: 600; }
.fit__stage { position: relative; margin-top: 0.4rem; aspect-ratio: 680 / 400; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(60% 70% at 30% 50%, rgb(4 74 246 / 0.12), transparent 70%), rgb(6 11 21 / 0.7); -webkit-user-select: none; user-select: none; }
.fit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fit__svg text { font-family: inherit; text-anchor: middle; stroke: none; }
.fit__svg .fit__hole rect, .fit__svg .fit__slot rect { fill: rgb(0 208 248 / 0.05); stroke: var(--vr-cyan); stroke-dasharray: 6 5; stroke-width: 1.5; transition: fill 0.3s, stroke 0.3s; }
.fit__svg .fit__slot rect { stroke: var(--vr-azure); }
.fit__hole-label { fill: var(--vr-cyan); font-size: 13px; letter-spacing: 0.06em; }
.fit__slot .fit__hole-label { fill: var(--text-2); }
.fit__hole.is-near rect, .fit__slot.is-near rect { fill: rgb(0 208 248 / 0.16); }
.fit__hole.is-reject rect, .fit__slot.is-reject rect { animation: fit-reject 0.9s ease-out; }
.fit__hole.is-filled rect { stroke-dasharray: none; }
.fit__hole.is-filled .fit__hole-label { opacity: 0; }
.fit__hole.is-flash rect { animation: hole-flash 0.9s ease-out; }
@keyframes fit-reject { 0%, 100% { stroke: var(--vr-cyan); fill: rgb(0 208 248 / 0.05); } 15%, 55% { stroke: #ff8a7a; fill: rgb(255 138 122 / 0.32); } }
.fit__piece { transform: translate(calc(var(--hx) + var(--tx, 0px)), calc(var(--hy) + var(--ty, 0px))); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: grab; touch-action: none; }
.fit__piece.is-instant { transition: none; }
.fit__svg .fit__hit { fill: transparent; stroke: none; }
.fit__hand { pointer-events: none; }
.fit__hand-icon path { fill: rgb(6 11 21 / 0.85); stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgb(0 208 248 / 0.8)); }
.fit__piece.is-dragging { transition: none; cursor: grabbing; filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.55)); }
.fit__piece.is-trying { transition: transform 0.35s var(--ease-out); }
.fit__piece.is-placed, .fit__piece.is-parked { cursor: default; }
.fit__piece.is-placed .fit__label, .fit__piece.is-parked .fit__label { opacity: 0; }
.fit__piece.is-glow { animation: piece-glow 0.9s ease-out; }
.fit__piece.is-shake .fit__shape { animation: fit-shake 0.6s ease-out; }
@keyframes fit-shake { 0%, 100% { transform: none; } 12% { transform: translateX(-10px) rotate(-3deg); } 30% { transform: translateX(9px) rotate(3deg); } 50% { transform: translateX(-6px) rotate(-2deg); } 70% { transform: translateX(4px); } }
.fit__label { fill: var(--text); font-size: 15px; font-weight: 600; transition: opacity 0.3s; }
.fit__in { fill: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
/* Cartel de resultado: bien visible, a la derecha del escenario */
.fit__banner { display: grid; gap: 0.35rem; align-content: center; min-height: 6.5rem; padding: 1rem 1.15rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-2); }
.fit__banner-hint { margin: 0; }
.fit__banner-title { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.fit__banner-text { margin: 0; color: var(--text); line-height: 1.45; }
.fit__banner.is-ko { border: 1px solid #ff8a7a; background: rgb(255 138 122 / 0.12); box-shadow: 0 0 0 4px rgb(255 138 122 / 0.1), 0 0 28px rgb(255 138 122 / 0.2); }
.fit__banner.is-ko .fit__banner-title { color: #ffb4a8; }
.fit__banner.is-ok { border: 1px solid var(--vr-cyan); background: rgb(0 208 248 / 0.1); box-shadow: 0 0 0 4px rgb(0 208 248 / 0.1), 0 0 30px rgb(0 208 248 / 0.25); }
.fit__banner.is-ok .fit__banner-title { color: var(--vr-cyan); }
.fit__banner.is-new { animation: fit-banner 0.5s var(--ease-out); }
@keyframes fit-banner { from { transform: translateY(8px) scale(0.98); opacity: 0.4; } to { transform: none; opacity: 1; } }
.fit__banner-passed { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fit__banner-passed li { padding: 0.15rem 0.6rem; border: 1px solid rgb(0 208 248 / 0.4); border-radius: 999px; color: var(--vr-cyan); font-size: 0.8rem; }
.fit__try { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.fit__try li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.35rem 0.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.fit__try-name { font-weight: 600; line-height: 1.3; }
.fit__result { grid-column: 1 / -1; color: var(--text-2); font-size: 0.9rem; line-height: 1.45; }
.fit__result:empty { display: none; }
.fit__try li.is-ok { border-color: var(--vr-cyan); }
.fit__try li.is-ko { border-color: rgb(255 138 122 / 0.45); }
.fit__reset { margin-top: 0.75rem; padding: 0.4rem 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fit__rules { margin-top: clamp(2rem, 5vw, 3rem); max-width: 820px; }
.fit__rules-title { font-size: 1.15rem; font-weight: 650; }
.fit__filters { margin: 0.75rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; color: var(--text-2); }
.fit__filters strong { color: var(--text); }
.fit__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; color: var(--text-2); }
@media (max-width: 900px) {
  .fit__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fit__stage { aspect-ratio: 400 / 620; }
  .fit__f { font-size: 0.7rem; padding-inline: 0.1rem; }
  .fit__f .long { display: none; }
  .fit__f .short { display: inline; }
  .fit__try li { grid-template-columns: minmax(0, 1fr); }
  .fit__try .btn { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .fit__piece, .fit__piece.is-trying, .fit__f { transition: none; }
  .fit__piece.is-glow, .fit__piece.is-shake .fit__shape, .fit__hole.is-reject rect, .fit__slot.is-reject rect, .fit__hole.is-flash rect, .fit__banner.is-new { animation: none; }
}

/* ---------- Guías: artículo ---------- */
.article-hero__title { max-width: 24ch; font-size: clamp(2rem, 1.1rem + 3.4vw, 3.8rem); }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 1.5rem; color: var(--text-3); font-size: 0.92rem; }
.article-meta a { color: var(--text-2); text-underline-offset: 3px; }
.article-affiliate { margin-top: 1rem; max-width: 44rem; font-size: 0.85rem; color: var(--text-3); }
.article__grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-bottom: clamp(3rem, 7vw, 5rem); }
.article__toc { position: sticky; top: calc(var(--header-h) + 2rem); font-size: 0.9rem; }
.article__toc[hidden] { display: block; visibility: hidden; }
.article__toc .mono { color: var(--text-3); font-size: 0.66rem; margin-bottom: 0.9rem; }
.article__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; border-left: 1px solid var(--line); }
.article__toc a { display: block; padding: 0.35rem 0 0.35rem 1rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-3); text-decoration: none; line-height: 1.35; transition: color 0.2s, border-color 0.2s; }
.article__toc a:hover { color: var(--text); }
.article__toc a.is-active { color: var(--vr-cyan); border-left-color: var(--vr-cyan); }
.article__main { min-width: 0; max-width: 46rem; }
.article__summary { margin-bottom: 2rem; }
.article__service {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--vr-azure);
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgb(12 140 247 / 0.12), transparent 60%), rgb(6 11 21 / 0.85);
  color: var(--text-2);
}
.article__service .kicker { margin-bottom: 0.5rem; }
.article__service-title { font-size: 1.3rem; font-weight: 680; color: var(--text); margin-bottom: 0.4rem; }
.article__service .actions { margin-top: 1rem; }
.article__foot { display: grid; gap: 1.25rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.author { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; align-items: start; color: var(--text-2); font-size: 0.95rem; }
.author strong { color: var(--text); }
.author a { color: var(--vr-cyan); text-underline-offset: 3px; }
.related__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.related__list a {
  display: grid;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgb(6 11 21 / 0.8);
  text-decoration: none;
  font-weight: 620;
  line-height: 1.3;
  transition: border-color 0.3s;
}
.related__list a:hover { border-color: var(--vr-azure); }
.related__list .mono { color: var(--vr-cyan); font-size: 0.64rem; font-weight: 400; }
.read-progress {
  position: fixed;
  left: 0; right: 0; top: var(--header-h);
  z-index: 99;
  height: 2px;
  background: linear-gradient(90deg, var(--vr-electric), var(--vr-cyan));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
@media (max-width: 960px) {
  .article__grid { grid-template-columns: 1fr; }
  .article__toc { display: none !important; }
  .related__list { grid-template-columns: 1fr; }
}

/* ---------- Legal ---------- */
.legal { padding-top: 0; }
.legal__meta { color: var(--text-3); font-size: 0.92rem; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.1em 0.35em; border-radius: 3px; background: var(--bg-3); color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--text); font-weight: 600; }
.table-scroll { overflow-x: auto; }
/* Tablas legales en móvil: cada fila pasa a ser una ficha con sus etiquetas */
@media (max-width: 640px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; }
  .prose thead { display: none; }
  .prose tr { padding: 0.75rem 0; border-bottom: 1px solid var(--line-strong); }
  .prose td { padding: 0.3rem 0; border: 0; }
  .prose td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
}
.legal__nav { margin-top: 3rem !important; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.92rem; }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + 2rem) 0 3rem; overflow: clip; }
.lost__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.lost__fix { margin-top: 1.5rem; }
.lost__fix[hidden], .lost__hint[hidden], .lost__count[hidden], .lost__win[hidden] { display: none; }
/* Con JavaScript, lost.js muestra el botón, la pista y el contador nada más arrancar: su sitio se reserva desde el principio
   (invisibles) para que el bloque, centrado en vertical, no se desplace al aparecer (CLS) */
.js .lost__hint[hidden], .js .lost__count[hidden] { display: block; visibility: hidden; }
.js .lost__fix[hidden] { display: inline-flex; visibility: hidden; }
.lost__status { margin-top: 2.25rem; text-align: center; }
.lost__hint { color: var(--text-3); font-size: 0.92rem; max-width: 32rem; margin-inline: auto; }
.lost__count { margin-top: 1.25rem; color: var(--vr-cyan); font-size: 0.85rem; }
.lost__win { margin: 1.25rem auto 0; max-width: 32rem; color: var(--text); font-weight: 600; }
.lost__stage { user-select: none; -webkit-user-select: none; }
.lost__svg { width: 78%; margin-inline: auto; height: auto; overflow: visible; display: block; filter: drop-shadow(0 20px 50px rgb(4 74 246 / 0.4)); }
/* Cada hueco, con su contorno discontinuo, en el sitio que ocupa la pieza dentro del logo */
.lost__hole {
  fill: rgb(0 208 248 / 0.05);
  stroke: var(--vr-cyan);
  stroke-opacity: 0.6;
  stroke-width: 3;
  stroke-dasharray: 10 10;
  pointer-events: none;
  transition: opacity 0.5s, fill 0.2s, stroke-opacity 0.2s;
}
.lost__hole.is-near { fill: rgb(0 208 248 / 0.24); stroke-opacity: 1; }
.lost__hole.is-filled { opacity: 0; }
.lost__piece {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--tx), var(--ty)) rotate(var(--r));
  transition: transform 0.5s var(--ease-out), opacity 0.4s;
  cursor: grab;
  touch-action: none;
}
/* Las piezas esperan a tener su posición aleatoria para no dar un salto */
.js .lost:not(.is-ready) .lost__piece { opacity: 0; transition: none; }
.lost__piece.is-dragging { transition: none; cursor: grabbing; filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.55)); }
.lost__piece.is-placed { cursor: default; pointer-events: none; }
.lost__piece:focus { outline: none; }
/* Al encajar, destello en la pieza y en su hueco */
.lost__piece.is-glow { animation: piece-glow 0.9s ease-out; }
@keyframes piece-glow {
  0% { filter: brightness(2.4) drop-shadow(0 0 16px var(--vr-cyan-hi)) drop-shadow(0 0 40px var(--vr-cyan)); }
  100% { filter: none; }
}
.lost__hole.is-flash { animation: hole-flash 0.9s ease-out; }
@keyframes hole-flash {
  0% { opacity: 1; fill: rgb(0 233 254 / 0.55); stroke-opacity: 1; stroke-width: 7; filter: drop-shadow(0 0 14px var(--vr-cyan)); }
  100% { opacity: 0; fill: transparent; stroke-width: 3; filter: none; }
}
.lost__spark { fill: var(--vr-cyan-hi); filter: drop-shadow(0 0 6px var(--vr-cyan)); pointer-events: none; }
/* Las piezas que flotan se mueven fotograma a fotograma (lost.js): sin transición para que no vayan con retraso */
.lost__piece.is-floating { transition: opacity 0.4s; }
.lost__piece.is-floating.is-dragging { transition: none; }
@media (max-width: 860px) {
  .lost__grid { grid-template-columns: 1fr; }
  .lost__play { order: -1; }
  .lost__stage { max-width: 360px; margin-inline: auto; padding: 2rem 3rem 1rem; }
}
.reviews--page .reviews__inner { width: min(var(--maxw), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ==========================================================================
   Movimiento
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Portfolio: retrato, hito y capturas ---------- */
.spec__body--prose { grid-template-columns: minmax(0, 80ch); }
.about-block--wide { grid-column: 1 / -1; }
/* Recorrido por la base: portada, pestañas por habitación y visor (carrusel + explicación) */
.tour__cover { position: relative; margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
/* Plano clicable: cada habitación se ilumina con un contorno cian y su nombre al pasar el ratón o enfocar (no en móvil) */
.tour__spot { position: absolute; padding: 0; border: 2px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.tour__spot[hidden] { display: none; }
.tour__spot-name { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translate(-50%, 4px); padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--vr-cyan); color: #04121f; font-size: 0.8rem; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.tour__spot:hover, .tour__spot:focus-visible { border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.12); box-shadow: 0 0 0 3px rgb(0 208 248 / 0.2), 0 0 24px rgb(0 208 248 / 0.4); outline: none; }
.tour__spot:hover .tour__spot-name, .tour__spot:focus-visible .tour__spot-name { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none), (max-width: 760px) { .tour__spot { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .tour__spot, .tour__spot-name { transition: none; } }
.tour__cover img { display: block; width: 100%; height: auto; }
.tour { margin-top: 1.25rem; }
.tour__tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: thin; }
.tour__tabs[hidden] { display: flex; visibility: hidden; }
.tour__tab { display: inline-flex; flex: none; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(6 11 21 / 0.8); color: var(--text-2); font: inherit; font-size: 0.92rem; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.tour__tab:hover { border-color: var(--vr-cyan); }
.tour__tab[aria-selected="true"] { border-color: var(--vr-cyan); background: rgb(12 140 247 / 0.14); color: #fff; }
.tour__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pix { flex: none; image-rendering: pixelated; }
.tour__panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; margin-top: 0.75rem; padding: clamp(0.9rem, 2.5vw, 1.4rem); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: rgb(6 11 21 / 0.85); }
.tour__panel + .tour__panel { margin-top: 1rem; }
.tour.is-ready .tour__panel[hidden] { display: none; }
.tour__car { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius); }
.tour__car:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.tour__track { display: grid; gap: 0.75rem; }
.tour__car.is-car .tour__track { display: flex; gap: 0; transition: transform 0.45s var(--ease-out); touch-action: pan-y; }
.tour__slide { margin: 0; flex: 0 0 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.tour__slide img { display: block; width: 100%; height: auto; }
.tour__nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.6rem; }
.tour__arrow { min-width: 2.5rem; min-height: 2.5rem; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.tour__arrow:hover { border-color: var(--vr-cyan); }
.tour__arrow:focus-visible, .tour__dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tour__dots { display: flex; gap: 0.25rem; }
.tour__dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.tour__dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--line-strong); transition: background-color 0.25s; }
.tour__dot[aria-current="true"]::before { background: var(--vr-cyan); box-shadow: 0 0 8px var(--vr-cyan); }
.tour__info { min-width: 0; }
.tour__name { display: flex; align-items: center; gap: 0.6rem; font-size: 1.35rem; font-weight: 680; letter-spacing: -0.015em; }
.tour__label { margin-top: 1rem; color: var(--vr-cyan); font-size: 0.9rem; font-weight: 600; }
.tour__info p:not(.tour__label) { margin-top: 0.3rem; color: var(--text-2); line-height: 1.6; }
@media (max-width: 900px) { .tour__panel { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tour__car.is-car .tour__track { transition: none; } }
/* Telegram en un marco de móvil (en horizontal, como la captura) */
.phone-block { margin-top: clamp(2.5rem, 6vw, 4rem); }
.phone-block__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; }
.phone-block__lead { margin-top: 0.5rem; color: var(--text-2); max-width: 36rem; }
.phone { position: relative; margin: 1.25rem 0 0; width: min(100%, 46rem); padding: 0.75rem 2.4rem; border: 2px solid var(--line-strong); border-radius: 2rem; background: #070c16; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.02), 0 30px 60px rgb(0 0 0 / 0.5); }
.phone::before { content: ""; position: absolute; left: 0.9rem; top: 50%; width: 0.4rem; height: 4rem; margin-top: -2rem; border-radius: 999px; background: var(--line-strong); }
.phone::after { content: ""; position: absolute; right: 0.95rem; top: 50%; width: 0.6rem; height: 0.6rem; margin-top: -0.3rem; border-radius: 50%; border: 1px solid var(--line-strong); }
.phone__screen { overflow: hidden; border-radius: 0.9rem; background: #0b0f17; }
.phone__screen img { display: block; width: 100%; height: auto; }
@media (max-width: 560px) { .phone { padding: 0.5rem 1.4rem; border-radius: 1.4rem; } .phone::before { left: 0.45rem; height: 2.5rem; margin-top: -1.25rem; width: 0.3rem; } .phone::after { right: 0.5rem; } }
/* Hueco entre las capturas y la invitación final */
.jarvis-cta { padding-top: 0; }
.page-jarvis .shots { padding-bottom: 1.5rem; }
.jarvis-cta .cta-line { margin-top: 0; }
.shots__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.shots__item { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(6 11 21 / 0.8); }
.shots__item img { display: block; width: 100%; height: auto; }
.shots__item figcaption { padding: 0.75rem 1rem; color: var(--text-3); font-size: 0.88rem; }
@media (max-width: 760px) { .shots__grid { grid-template-columns: 1fr; } }

/* ---------- Laboratorio: hoja de ruta ---------- */
.roadmap__now { margin-top: 1rem; max-width: 40rem; color: var(--text-2); }
.roadmap__bar { height: 6px; margin-top: 0.6rem; border-radius: 6px; background: var(--line-strong); overflow: hidden; }
.roadmap__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vr-electric), var(--vr-cyan)); box-shadow: 0 0 10px rgb(0 208 248 / 0.5); transform-origin: left center; transform: scaleX(var(--v, 0)); }
.roadmap__bar.is-armed span { transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
.roadmap__bar.is-armed.is-in span { transform: scaleX(var(--v, 0)); }
.roadmap__use { margin-top: 0.6rem; color: var(--text); }
.roadmap__use strong { color: var(--vr-cyan); font-weight: 600; }
/* La fase actual, con un brillo de borde suave y lento (ambiente); con movimiento reducido, fijo */
.roadmap__step--en-curso .demo { border-color: rgb(0 208 248 / 0.55); }
@media (prefers-reduced-motion: no-preference) { .roadmap__step--en-curso .demo { animation: demo-glow 5s ease-in-out infinite alternate; } }
@keyframes demo-glow { from { box-shadow: 0 0 0 0 rgb(0 208 248 / 0); } to { box-shadow: 0 0 0 3px rgb(0 208 248 / 0.12), 0 0 26px rgb(0 208 248 / 0.22); } }
/* Inclinación leve al pasar el ratón (lib/tilt.js) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out); }
.tilt.is-tilting { transition: transform 0.12s linear; }
.roadmap__path { --track-x: 14px; --track-pad: 3rem; position: relative; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.roadmap__path .roadmap__list { position: relative; padding-left: var(--track-pad); }
/* El camino: una línea que une las fases y se ilumina hasta el marcador */
.roadmap__list::before {
  content: "";
  position: absolute;
  left: calc(var(--track-x) - 1px); top: 0; bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 14px);
}
.roadmap__list::after {
  content: "";
  position: absolute;
  left: calc(var(--track-x) - 1px); top: var(--fill-top, 0);
  width: 2px; height: var(--fill, 0);
  background: linear-gradient(to bottom, var(--vr-electric), var(--vr-cyan));
  box-shadow: 0 0 12px rgb(0 208 248 / 0.55);
}
.roadmap__step { position: relative; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.roadmap__step:last-child { padding-bottom: 0; }
.roadmap__node {
  position: absolute;
  left: calc(var(--track-x) - var(--track-pad) - 7px);
  top: 0.5rem;
  width: 14px; height: 14px;
  background: var(--bg);
  border: 1px solid var(--vr-azure);
  transform: rotate(45deg);
  z-index: 1;
}
.roadmap__step--en-curso .roadmap__node { background: var(--vr-cyan); border-color: var(--vr-cyan); box-shadow: 0 0 14px var(--vr-cyan); }
.roadmap__step--completada .roadmap__node { background: var(--vr-azure); }
.roadmap__step--permanente .roadmap__node { border-style: dashed; border-color: var(--vr-cyan); }
/* Cada fase: la explicación a un lado y la demostración al otro */
.roadmap__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.roadmap__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.roadmap__num { color: var(--text-2); font-size: 0.9rem; font-weight: 600; }
.roadmap__status {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-strong);
  color: var(--text-3);
  font-size: 0.64rem;
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 8px) 100%, 0 100%);
}
.roadmap__step--en-curso .roadmap__num, .roadmap__step--en-curso .roadmap__status { color: var(--vr-cyan); }
.roadmap__step--en-curso .roadmap__status { border-color: var(--vr-cyan); }
.roadmap__step--completada .roadmap__status, .roadmap__step--permanente .roadmap__status { color: var(--vr-azure); border-color: var(--vr-azure); }
.roadmap__title { margin-top: 0.4rem; font-size: 1.35rem; font-weight: 680; letter-spacing: -0.02em; line-height: 1.15; }
.roadmap__summary { margin-top: 0.4rem; color: var(--text-2); }
.roadmap__detail { display: grid; gap: 1rem; margin-top: 1.1rem; color: var(--text-2); font-size: 0.95rem; }
.roadmap__label { display: block; margin-bottom: 0.4rem; color: var(--vr-cyan); font-size: 0.9rem; font-weight: 600; }
.roadmap__detail ul { padding-left: 1.1rem; list-style: disc; }
.roadmap__detail li + li { margin-top: 0.3rem; }
.roadmap__detail small { display: block; color: var(--text-3); font-size: 0.8rem; }
/* Marcador: destello del logo que avanza por el camino */
.roadmap__marker {
  position: absolute;
  left: var(--track-x); top: 0;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  color: var(--vr-cyan-hi);
  filter: drop-shadow(0 0 8px var(--vr-cyan)) drop-shadow(0 0 18px rgb(0 208 248 / 0.6));
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  will-change: transform;
}
.roadmap__marker svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.roadmap__path.is-ready .roadmap__marker { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .roadmap__path.is-live .roadmap__marker svg { animation: marker-twinkle 2.8s ease-in-out infinite; }
}
@keyframes marker-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.72) rotate(45deg); opacity: 0.7; }
}
@media (max-width: 960px) { .roadmap__row { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .roadmap__path { --track-pad: 2.5rem; --track-x: 10px; } }

/* ---------- Demostraciones simuladas (hoja de ruta) ---------- */
.demo { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: rgb(6 11 21 / 0.85); overflow: hidden; }
.demo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--line); }
.demo__title { color: var(--vr-cyan); font-size: 0.92rem; font-weight: 600; }
.demo__sim { padding: 0.15rem 0.5rem; border: 1px solid var(--line-strong); color: var(--text-3); font-size: 0.58rem; clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 7px) 100%, 0 100%); }
.demo__body { display: grid; gap: 0.85rem; align-content: start; min-height: 19rem; padding: 1rem; }
.demo__label { color: var(--text-2); font-size: 0.9rem; }
.demo__label.mono { color: var(--text-3); font-size: 0.6rem; }
.demo__input { width: 100%; padding: 0.7rem 0.9rem; color: var(--text); font: inherit; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.demo__input:focus-visible, .qt__range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.demo__check { color: var(--text-2); font-size: 0.9rem; }
.demo__note, .demo__hint { color: var(--text-3); font-size: 0.8rem; }
.demo__stats { color: var(--text-2); font-size: 0.9rem; }
.demo__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.demo__tabs[hidden] { display: none; }
.demo__tab { padding: 0.35rem 0.8rem; color: var(--text-2); font-size: 0.85rem; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.demo__tab[aria-selected="true"] { color: #fff; border-color: var(--vr-cyan); background: rgb(12 140 247 / 0.14); }
.demo__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.demo [hidden] { display: none; }

/* Fase 1: Python */
.py__code { margin: 0; padding: 0.8rem 0.9rem; overflow-x: auto; font: 0.84rem/1.75 var(--font-mono); white-space: pre; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.py__line { display: inline-block; width: 100%; padding-inline: 0.4rem; margin-inline: -0.4rem; border-left: 2px solid transparent; transition: background-color 0.2s, border-color 0.2s; }
.py__line.is-active { background: rgb(0 208 248 / 0.14); border-left-color: var(--vr-cyan); color: var(--text); }
.py__input { padding: 0 0.3rem; color: var(--vr-cyan-hi); font: inherit; background: rgb(0 208 248 / 0.08); border: 0; border-bottom: 1px dashed var(--vr-cyan); }
.py__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.py__run { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.py__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.py__vars { display: grid; gap: 0.2rem; font: 0.8rem var(--font-mono); }
.py__vars div { display: flex; gap: 0.6rem; }
.py__vars dt { color: var(--text-3); }
.py__vars dd { color: var(--vr-cyan); margin: 0; }
.py__result { margin: 0; min-height: 2.4rem; font: 0.85rem var(--font-mono); color: var(--text); white-space: pre-wrap; }
.py__result.is-error { color: #ff8a7a; }

/* Fase 2: tokens */
.tk { display: grid; gap: 0.85rem; }
.tk__tokens { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.35rem; min-height: 7.5rem; padding: 0.9rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.tok { padding: 0.25rem 0.5rem; color: var(--text); font: 0.88rem var(--font-mono); white-space: pre; border: 1px solid transparent; border-radius: 4px; animation: tok-in 0.35s var(--ease-out) both; animation-delay: calc(var(--i) * 16ms); }
.tok small { margin-left: 0.35rem; color: var(--text-3); font-size: 0.62rem; }
.tok[data-c="0"] { background: rgb(0 208 248 / 0.18); border-color: rgb(0 208 248 / 0.5); }
.tok[data-c="1"] { background: rgb(12 140 247 / 0.2); border-color: rgb(12 140 247 / 0.55); }
.tok[data-c="2"] { background: rgb(4 74 246 / 0.28); border-color: rgb(4 74 246 / 0.7); }
.tok[data-c="3"] { background: rgb(0 233 254 / 0.12); border-color: rgb(0 233 254 / 0.4); }
.tok[data-c="4"] { background: rgb(2 6 253 / 0.26); border-color: rgb(2 6 253 / 0.7); }
@keyframes tok-in { from { opacity: 0; transform: translateY(6px) scale(0.94); } to { opacity: 1; transform: none; } }
.tk__bar { height: 6px; overflow: hidden; background: var(--line); border-radius: 6px; }
.tk__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--vr-electric), var(--vr-cyan)); transition: width 0.3s var(--ease-out), background-color 0.3s; }
.tk__ctx.is-over .tk__bar span { background: #ff8a7a; }
.tk__ctx p { margin-top: 0.4rem; color: var(--text-3); font-size: 0.85rem; }

/* Fase 3: RAG */
.rag { display: grid; gap: 0.85rem; }
.rag__row { display: flex; gap: 0.5rem; }
.rag__row select { flex: 1; }
.rag__steps { display: flex; gap: 0.4rem; padding: 0; list-style: none; font-size: 0.82rem; }
.rag__steps li { flex: 1; padding: 0.3rem 0.4rem; text-align: center; color: var(--text-3); border: 1px solid var(--line); transition: color 0.3s, border-color 0.3s, background-color 0.3s; }
.rag__steps li.is-on { color: var(--vr-cyan); border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.08); }
.rag__docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.rag__doc { padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.rag__file { margin-bottom: 0.35rem; color: var(--vr-cyan); font-size: 0.8rem; font-weight: 600; overflow-wrap: anywhere; }
.rag__doc ul { display: grid; gap: 0.3rem; padding: 0; list-style: none; }
.rag__doc li { position: relative; padding: 0.3rem 0.4rem; color: var(--text-2); font-size: 0.74rem; line-height: 1.35; border: 1px solid transparent; border-radius: 4px; transition: background-color 0.25s, border-color 0.25s, opacity 0.25s, color 0.25s; }
.rag__doc li.is-scan { background: rgb(0 208 248 / 0.1); }
.rag__doc li.is-hit { padding-right: 2.2rem; color: var(--text); background: rgb(0 208 248 / 0.14); border-color: var(--vr-cyan); }
.rag__doc li.is-dim { opacity: 0.55; }
.rag__doc li.is-cited { box-shadow: 0 0 0 2px var(--vr-cyan); }
.rag__score { position: absolute; top: 0.25rem; right: 0.35rem; color: var(--vr-cyan); font-size: 0.6rem; }
.rag__answer { min-height: 3.6rem; color: var(--text); font-size: 0.95rem; }
.rag__cite { min-width: 24px; min-height: 24px; padding: 0 0.15rem; color: var(--vr-cyan); font-size: 0.72rem; background: none; border: 0; cursor: pointer; }
.rag__cite:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Fase 4: contenedor */
.ct { display: grid; gap: 0.85rem; }
.ct__ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; }
.ct__map { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; align-items: center; gap: 0.5rem; }
.ct__node, .ct__inner div { padding: 0.45rem 0.7rem; font-size: 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-2); }
.ct__node small, .ct__inner small { display: block; color: var(--text-3); font-size: 0.66rem; }
.ct__wire { position: relative; height: 2px; background: repeating-linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 11px); }
.ct__packet { position: absolute; left: 0; top: -5px; width: 12px; height: 12px; margin-left: -6px; background: var(--vr-cyan-hi); transform: rotate(45deg); box-shadow: 0 0 14px var(--vr-cyan); opacity: 0; }
.ct__box { position: relative; padding: 1.5rem 0.6rem 0.6rem; border: 1px dashed var(--vr-cyan); border-radius: var(--radius); transition: box-shadow 0.3s, border-color 0.3s, opacity 0.3s; }
.ct__box.is-hot { box-shadow: 0 0 24px rgb(0 208 248 / 0.4); }
.ct__box.is-off { border-color: #ff8a7a; opacity: 0.7; }
.ct__box-label { position: absolute; top: 0.4rem; left: 0.6rem; color: var(--vr-cyan); font-size: 0.58rem; }
.ct__inner { display: flex; gap: 0.4rem; }
.ct__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.ct__panels pre { min-height: 5.5rem; margin: 0; padding: 0.5rem; font: 0.7rem/1.45 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.ct__panels .is-error { color: #ff8a7a; }

/* Fase 5: cuantización */
.qt { display: grid; gap: 0.7rem; }
.qt__range { width: 100%; accent-color: var(--vr-cyan); }
.qt__scale { display: flex; justify-content: space-between; color: var(--text-3); font-size: 0.6rem; }
.qt__chart { width: 100%; height: 120px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.qt__orig { fill: none; stroke: rgb(233 241 255 / 0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.qt__quant { fill: none; stroke: var(--vr-cyan); stroke-width: 2; vector-effect: non-scaling-stroke; }
.qt__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.qt__stats dt { color: var(--text-3); font-size: 0.58rem; }
.qt__stats dd { margin: 0.15rem 0 0; font-size: 0.9rem; font-weight: 600; }
.qt__size { height: 6px; overflow: hidden; background: var(--line); border-radius: 6px; }
.qt__size span { display: block; height: 100%; background: linear-gradient(90deg, var(--vr-electric), var(--vr-cyan)); transition: width 0.35s var(--ease-out); }

/* Fase 6: repositorio */
.rp { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.8rem; min-height: 15.5rem; }
.rp__tree { padding: 0.6rem; font: 0.8rem var(--font-mono); border: 1px solid var(--line); border-radius: var(--radius); }
.rp__name { margin-bottom: 0.4rem; color: var(--vr-cyan); font-size: 0.64rem; }
.rp__tree ul { padding: 0; margin: 0; list-style: none; }
.rp__children { padding-left: 0.9rem; margin-left: 0.3rem; border-left: 1px solid var(--line); }
.rp__tree button { display: block; width: 100%; min-height: 28px; padding: 0.15rem 0.35rem; color: var(--text-2); font: inherit; text-align: left; background: none; border: 0; border-radius: 3px; cursor: pointer; }
.rp__tree button:hover, .rp__tree button[aria-current="true"] { color: var(--text); background: rgb(0 208 248 / 0.12); }
.rp__tree button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rp__dir::before { content: "▾ "; color: var(--text-3); }
.rp__dir[aria-expanded="false"]::before { content: "▸ "; }
.rp__dirstatic { padding: 0.15rem 0.35rem; color: var(--text-2); }
.rp.is-ready .rp__dirstatic { display: none; }
.rp__view { padding: 0.8rem; overflow: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.rp__file { margin-bottom: 0.5rem; color: var(--text-3); font-size: 0.62rem; }
.rp__code { margin: 0; font: 0.78rem/1.6 var(--font-mono); white-space: pre; color: var(--text-2); }
.rp__readme h4 { font-size: 1.1rem; font-weight: 650; }
.rp__readme h5 { margin: 0.8rem 0 0.3rem; color: var(--vr-cyan); font: 0.64rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.rp__readme p { color: var(--text-2); font-size: 0.88rem; }
.rp__readme pre { margin: 0.3rem 0; padding: 0.5rem; font: 0.75rem var(--font-mono); background: var(--bg); border: 1px solid var(--line); }
.rp__badges { display: flex; gap: 0.4rem; margin: 0.4rem 0; }
.rp__badges span { padding: 0.1rem 0.45rem; color: var(--text-2); font-size: 0.6rem; border: 1px solid var(--line-strong); }

@media (max-width: 640px) {
  .py__out, .qt__stats, .ct__panels { grid-template-columns: 1fr; }
  .rag__docs, .rp { grid-template-columns: 1fr; }
  .ct__ctrl { grid-template-columns: 1fr; }
  .demo__body { min-height: 0; }
}

/* ---------- Sobre mí: tarjeta que gira ---------- */
.flipcard { position: relative; perspective: 1400px; }
.flipcard__face {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(150deg, rgb(0 208 248 / 0.2), transparent 40%),
    linear-gradient(330deg, rgb(4 74 246 / 0.3), transparent 50%),
    var(--bg-2);
  /* Marco facetado con los ángulos del logo */
  clip-path: polygon(0 6%, 22% 0, 100% 0, 100% 88%, 80% 100%, 0 100%);
}
.flipcard__face--front { aspect-ratio: 4 / 5; }
.flipcard__face--front picture { display: block; width: 100%; height: 100%; }
.flipcard__face--front img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.flipcard__face--back { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 3vw, 1.75rem); margin-top: 1rem; }
.flipcard__face--back .kicker { margin-bottom: 0.9rem; }
.flipcard__list { display: grid; gap: 0.85rem; }
.flipcard__list li { position: relative; padding-left: 1.1rem; color: var(--text-2); font-size: 0.92rem; line-height: 1.45; }
.flipcard__list li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 7px; height: 7px; border: 1px solid var(--vr-azure); transform: rotate(45deg); }
.flipcard__list .mono { display: block; margin-bottom: 0.15rem; color: var(--vr-cyan); font-size: 0.62rem; }
/* Con JavaScript: las dos caras se apilan y la tarjeta gira */
.js .flipcard .flipcard__inner { display: grid; transform-style: preserve-3d; transition: transform 0.8s var(--ease-io); }
.js .flipcard .flipcard__face { grid-area: 1 / 1; margin-top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.js .flipcard .flipcard__face--back { transform: rotateY(180deg); overflow: auto; }
.flipcard.is-flipped .flipcard__inner { transform: rotateY(180deg); }
.flipcard__toggle { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; cursor: pointer; border-radius: var(--radius); }
.flipcard__toggle[hidden] { display: none; }
.flipcard__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.flipcard__hint { margin-top: 0.9rem; color: var(--vr-cyan); font-size: 0.7rem; text-align: center; }
.flipcard__hint[hidden] { display: none; }
.js .flipcard__hint[hidden] { display: block; visibility: hidden; } /* reserva su sitio: la tarjeta no cambia de alto al activarse el script */
@media (hover: hover) and (pointer: fine) {
  .flipcard.is-ready:not(.is-flipped):has(.flipcard__toggle:hover) .flipcard__inner { transform: rotateY(-7deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .flipcard.is-peeking .flipcard__inner { animation: flip-peek 1.5s var(--ease-io) 1 both; }
}
@keyframes flip-peek {
  0%, 100% { transform: rotateY(0); }
  35% { transform: rotateY(-18deg); }
  65% { transform: rotateY(9deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .flipcard .flipcard__inner { transition: none; }
}
@media (max-width: 760px) { .portrait { max-width: min(100%, 340px); } }

/* Retrato: destello azul eléctrico que recorre el contorno facetado (lento, sutil, solo en pantalla) */
.flipcard__box { position: relative; }
/* Inclinación 3D con puntero fino (la pone flipcard.js): perspectiva propia, vuelta suave al salir, y un reflejo que sigue al cursor */
.flipcard.has-tilt .flipcard__box { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.7s var(--ease-out); }
.flipcard.has-tilt.is-tilting .flipcard__box { transition: transform 0.12s linear; will-change: transform; }
.flipcard__glare { display: none; }
.flipcard.has-tilt .flipcard__glare { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  clip-path: polygon(0 6%, 22% 0, 100% 0, 100% 88%, 80% 100%, 0 100%);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgb(255 255 255 / 0.26), rgb(120 200 255 / 0.1) 32%, transparent 60%); }
.flipcard.has-tilt.is-tilting .flipcard__glare { opacity: 1; }
.flipcard__edge { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity 0.2s; }
.flipcard__edge path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* Un único cometa continuo: veinte capas con el mismo frente y largos crecientes, todas del mismo azul y muy transparentes,
   se suman en una estela que se funde con el borde (mismo color) y se aviva hacia la punta. Misma animación para todas. */
.flipcard__edge-base { stroke: rgb(61 116 255 / 0.4); stroke-width: 1.5; }
.flipcard__edge .flipcard__edge-c { stroke: #3d74ff; stroke-width: 1.5; stroke-linecap: butt; opacity: 0.13; }
.flipcard__edge .flipcard__edge-tip { stroke: #cfe0ff; stroke-width: 2.25; stroke-linecap: butt; stroke-dasharray: 0 97.5 2.5 0; }
.flipcard__edge-comet { filter: drop-shadow(0 0 5px rgb(61 116 255 / 1)); }
.flipcard.is-turning .flipcard__edge { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .flipcard__edge .flipcard__edge-c, .flipcard__edge .flipcard__edge-tip { animation: edge-run 12s linear infinite paused; }
  .flipcard.is-live .flipcard__edge-c, .flipcard.is-live .flipcard__edge-tip { animation-play-state: running; }
}
/* Keyframes con valores explícitos: Chrome no anima stroke-dashoffset si el keyframe usa var()/calc() */
@keyframes edge-run { from { stroke-dashoffset: 0px; } to { stroke-dashoffset: -100px; } }
/* Con movimiento reducido el cometa queda quieto, cerca de la esquina superior izquierda */
@media (prefers-reduced-motion: reduce) {
  .flipcard__edge .flipcard__edge-c, .flipcard__edge .flipcard__edge-tip { stroke-dashoffset: -6px; }
}

/* Entrada del retrato (una sola vez, al cargar): las facetas del marco llegan desde fuera y encajan; después, un telón se abre
   de arriba abajo con una banda de luz. La foto está pintada debajo desde el principio (no retrasa el LCP) y todo es absoluto (sin CLS).
   Con movimiento reducido no existe nada de esto. */
.flipcard__assemble, .flipcard__reveal, .flipcard__sweep { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .flipcard__assemble { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; animation: asm-out 0.5s ease 1.75s both; }
  .flipcard__assemble path { fill: none; stroke: #9eeeff; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .flipcard__assemble .fa { fill: rgb(0 208 248 / 0.28); stroke: none; }
  .flipcard__assemble .fs, .flipcard__assemble .fa { animation: 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .flipcard__assemble .fs--a, .flipcard__assemble .fa--tl { animation-name: asm-a; animation-delay: 0.2s; }
  .flipcard__assemble .fs--b { animation-name: asm-b; animation-delay: 0.35s; }
  .flipcard__assemble .fs--c { animation-name: asm-c; animation-delay: 0.5s; }
  .flipcard__assemble .fs--d, .flipcard__assemble .fa--br { animation-name: asm-d; animation-delay: 0.65s; }
  .flipcard__assemble .fs--e { animation-name: asm-e; animation-delay: 0.8s; }
  .flipcard__assemble .fs--f { animation-name: asm-f; animation-delay: 0.95s; }
  .flipcard__edge-base { animation: edge-in 0.5s ease 1.6s both; }
  .flipcard__edge-comet { animation: edge-in 0.7s ease 2.2s both; }
  .flipcard__reveal { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(160deg, #08122a, #04070f 70%); animation: reveal-wipe 1.15s cubic-bezier(0.65, 0, 0.35, 1) 1.25s both; }
  .flipcard__sweep { display: block; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgb(61 116 255 / 0.28) 55%, rgb(158 238 255 / 0.75) 92%, rgb(255 255 255 / 0.9)); animation: reveal-sweep 1.15s cubic-bezier(0.65, 0, 0.35, 1) 1.25s both; }
}
/* Valores explícitos en los keyframes (Chrome no anima bien las propiedades SVG con var()/calc()) */
@keyframes asm-a { from { transform: translate(-60px, -46px); opacity: 0; } 55% { opacity: 1; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes asm-b { from { transform: translate(0, -70px); opacity: 0; } 55% { opacity: 1; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes asm-c { from { transform: translate(70px, 0); opacity: 0; } 55% { opacity: 1; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes asm-d { from { transform: translate(60px, 60px); opacity: 0; } 55% { opacity: 1; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes asm-e { from { transform: translate(0, 70px); opacity: 0; } 55% { opacity: 1; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes asm-f { from { transform: translate(-70px, 0); opacity: 0; } 55% { opacity: 1; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes asm-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes edge-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
@keyframes reveal-sweep { from { transform: translateY(-100%); opacity: 1; } 92% { opacity: 1; } to { transform: translateY(354%); opacity: 0; } }

/* ---------- Sobre mí: hito ---------- */
/* Crítica en Sobre mí: la banda asoma en la primera pantalla de escritorio y, si llegaba con site.css, se desplazaba (CLS) */
/* Marco facetado de las fotos: el mismo ángulo cortado del retrato */
.facet-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  clip-path: polygon(0 6%, 22% 0, 100% 0, 100% 88%, 80% 100%, 0 100%);
}
.facet-frame picture, .facet-frame img { display: block; width: 100%; height: auto; }
.jam-num {
  display: inline-block;
  min-width: 1.3em; /* ancho fijo: la columna no cambia al cargar la tipografía */
  padding-right: 0.08em; /* el recorte del degradado comía el «º» por el interletraje negativo */
  font-size: clamp(6rem, 17vw, 14rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.8;
  background: linear-gradient(160deg, var(--vr-cyan-hi), var(--vr-electric));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 40px rgb(0 208 248 / 0.25));
}
.jam-title { margin: 0.4rem 0 1rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 680; letter-spacing: -0.022em; line-height: 1.1; }
.jam-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1rem; }
/* Hito: banda a todo el ancho con los bordes cortados en diagonal */
.jamA {
  margin-block: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(4rem, 9vw, 7rem);
  background: linear-gradient(100deg, rgb(4 74 246 / 0.22), rgb(0 208 248 / 0.06) 60%, transparent);
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}
.jamA__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(1.5rem, 5vw, 4rem); align-items: center; }
.jamA__copy p { max-width: 46rem; color: var(--text-2); }
.jamA__copy p + p { margin-top: 0.75rem; }
.jamA__photos { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: start; margin-top: 2rem; }
.jamA__photos .facet-frame:last-child { transform: translateY(2.5rem); }
@media (max-width: 860px) {
  .jamA__inner, .jamA__photos { grid-template-columns: 1fr; }
  .jamA__photos .facet-frame:last-child { transform: none; }
}

/* ---------- Sobre mí: trayectoria, insignias y bloques ---------- */
/* Trayectoria: riel compacto con el trazo que se dibuja al hacer scroll */
.about-path { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.about-lite { padding-top: clamp(1rem, 2.5vw, 1.75rem); }
.about-sub { margin-top: 3.5rem; font-size: 1.3rem; font-weight: 680; letter-spacing: -0.015em; }
.tl__where { color: var(--text-2); font-size: 0.92rem; }
.tl__note { margin-top: 0.2rem; color: var(--text-3); font-size: 0.88rem; }
.tlB { --p: 0; position: relative; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.tlB::before, .tlB::after { content: ""; position: absolute; left: calc(7.5rem + 0.75rem + 14px - 1px); top: 0; bottom: 0; width: 2px; }
.tlB::before { background: repeating-linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 14px); }
.tlB::after { background: linear-gradient(to bottom, var(--vr-electric), var(--vr-cyan)); box-shadow: 0 0 12px rgb(0 208 248 / 0.5); transform-origin: top; transform: scaleY(var(--p)); }
.tlB__row { position: relative; display: grid; grid-template-columns: 7.5rem 28px minmax(0, 1fr); gap: 0 0.75rem; padding-block: 0.9rem; }
.tlB__when { padding-top: 0.15rem; color: var(--text-2); font-size: 0.8rem; text-align: right; transition: color 0.4s; }
.tlB__row.is-lit .tlB__when { color: var(--vr-cyan); }
.tlB__node { position: relative; z-index: 1; width: 14px; height: 14px; margin: 0.3rem auto 0; background: var(--bg); border: 1px solid var(--vr-azure); transform: rotate(45deg); transition: background-color 0.4s, box-shadow 0.4s, border-color 0.4s; }
.tlB__row.is-lit .tlB__node { background: var(--vr-cyan); border-color: var(--vr-cyan); box-shadow: 0 0 14px var(--vr-cyan); }
.tlB__body h3 { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
@media (max-width: 760px) {
  .tlB::before, .tlB::after { left: calc(5.4rem + 0.5rem + 14px - 1px); }
  .tlB__row { grid-template-columns: 5.4rem 28px minmax(0, 1fr); gap: 0 0.5rem; }
}

/* Insignias de formación complementaria */
.badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.5rem;
  color: var(--text-2);
  font-size: 0.9rem;
  background: rgb(6 11 21 / 0.8);
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 10px) 100%, 0 100%);
}
.badge__tag { padding: 0.15rem 0.45rem; color: var(--vr-cyan); font-size: 0.62rem; background: rgb(0 208 248 / 0.14); }

/* Tres bloques sin caja */
.lite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.lite__item { padding-top: 1rem; color: var(--text-2); border-top: 1px solid var(--line-strong); transition: border-color 0.3s; }
.lite__item:hover { border-top-color: var(--vr-cyan); }
.lite__item .kicker { margin-bottom: 0.5rem; }
@media (max-width: 760px) { .lite { grid-template-columns: 1fr; } }

/* ---------- Ilustraciones de línea ---------- */
/* Una familia de SVG en línea: trazos cian y azul con facetas como las del logo. En reposo se ve el estado final;
   main.js añade .is-play una vez al aparecer y al pasar el ratón. Con movimiento reducido nunca se añade. */
.illo { display: block; width: 100%; height: auto; overflow: visible; transition: filter 0.4s; }
.illo path, .illo rect, .illo circle { fill: none; stroke: var(--vr-cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.illo .a { stroke: var(--vr-azure); }
.illo .h { stroke: var(--vr-cyan-hi); }
.illo .warn { stroke: #ff8a7a; }
.illo .dim { opacity: 0.45; }
.illo .f { fill: rgb(0 208 248 / 0.12); stroke: none; }
.illo .fa { fill: rgb(12 140 247 / 0.22); stroke: none; }
.illo .bar { fill: var(--vr-cyan); stroke: none; }
.illo .i-hdd { opacity: 0.4; }
.illo .i-ring { opacity: 0.55; }
.illo .i-draw { stroke-dasharray: 1; }
.illo .i-top, .illo .i-left, .illo .i-right, .illo .i-bottom, .illo .i-pop, .illo .i-bar, .illo .i-lid, .illo .i-spec,
.illo .i-sweep, .illo .i-ring, .illo .i-doc1, .illo .i-doc2, .illo .i-doc3 { transform-box: fill-box; transform-origin: center; }
.illo .i-bar { transform-origin: left center; }
.illo .i-lid { transform-origin: 50% 100%; }
a:hover .illo, article:hover .illo, a:focus-visible .illo { filter: drop-shadow(0 0 8px rgb(0 208 248 / 0.3)); }

@keyframes illo-top { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes illo-bottom { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes illo-left { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes illo-right { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes illo-pop { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes illo-bar { from { transform: scaleX(0.12); } to { transform: none; } }
@keyframes illo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes illo-open { from { transform: scaleY(0.04); } to { transform: none; } }
@keyframes illo-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes illo-ring { 0% { transform: scale(0.5); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: 0.55; } }
@keyframes illo-sweep { 0% { transform: translate(-96px, 12px); opacity: 0; } 12% { opacity: 1; } 38% { transform: translate(-44px, -32px); } 64% { transform: translate(-72px, 6px); } 100% { transform: none; } }
@keyframes illo-hdd { from { opacity: 1; } to { opacity: 0.4; } }
@keyframes illo-doc1 { from { transform: translate(-34px, 76px) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes illo-doc2 { from { transform: translate(6px, 90px) rotate(16deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes illo-doc3 { from { transform: translate(38px, 80px) rotate(28deg); opacity: 0; } to { transform: none; opacity: 1; } }

.illo.is-play .i-top { animation: illo-top 0.7s var(--ease-out) both; animation-delay: var(--d, 0s); }
.illo.is-play .i-bottom { animation: illo-bottom 0.7s var(--ease-out) both; animation-delay: var(--d, 0s); }
.illo.is-play .i-left { animation: illo-left 0.7s var(--ease-out) both; animation-delay: var(--d, 0s); }
.illo.is-play .i-right { animation: illo-right 0.7s var(--ease-out) both; animation-delay: var(--d, 0s); }
.illo.is-play .i-pop { animation: illo-pop 0.6s var(--ease-out) both; animation-delay: var(--d, 0s); }
.illo.is-play .i-bar { animation: illo-bar 1.4s var(--ease-io) both; animation-delay: var(--d, 0s); }
.illo.is-play .i-draw { animation: illo-draw 0.9s ease-in-out both; animation-delay: var(--d, 0s); }
.illo.is-play .i-lid { animation: illo-open 0.9s var(--ease-out) both; }
.illo.is-play .i-spec { animation: illo-fade 0.5s var(--ease-out) both; animation-delay: var(--d, 0s); }
.illo.is-play .i-ring { animation: illo-ring 0.9s ease-out both; animation-delay: var(--d, 0s); }
.illo.is-play .i-sweep { animation: illo-sweep 1.7s var(--ease-io) both; }
.illo.is-play .i-hdd { animation: illo-hdd 0.8s ease-out both; }
.illo.is-play .i-doc1 { animation: illo-doc1 0.9s var(--ease-out) both; animation-delay: 0.1s; }
.illo.is-play .i-doc2 { animation: illo-doc2 0.9s var(--ease-out) both; animation-delay: 0.3s; }
.illo.is-play .i-doc3 { animation: illo-doc3 0.9s var(--ease-out) both; animation-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) { .illo * { animation: none !important; } }

/* Dónde se usan */
.guide__illo { display: block; width: min(100%, 11rem); margin-bottom: 0.6rem; }
.guide--lead { grid-template-rows: 1fr repeat(4, auto); }
.guide--lead .guide__illo { width: min(78%, 21rem); align-self: start; margin-bottom: 0; }
.index-list a.has-illo { grid-template-columns: 6.5rem minmax(0, 1fr) 2rem; align-items: center; column-gap: 1.25rem; }
.index-list__illo { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
.index-list a.has-illo .index-list__name, .index-list a.has-illo .index-list__desc { grid-column: 2; }
.index-list a.has-illo .index-list__arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.guide-row a.has-illo { grid-template-columns: 9rem 8.5rem minmax(0, 1fr) auto; align-items: center; }
.guide-row__illo { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
.guide-row a.has-illo .guide-row__cat { grid-column: 2; align-self: start; }
.guide-row a.has-illo .guide-row__title, .guide-row a.has-illo .guide-row__desc { grid-column: 3; }
.guide-row a.has-illo .guide-row__meta { grid-column: 4; }
.spec__illo { display: block; width: min(100%, 11rem); margin-bottom: 1rem; }
@media (max-width: 760px) {
  .guide-row a.has-illo { grid-template-columns: 1fr; align-items: start; }
  .guide-row a.has-illo .guide-row__illo, .guide-row a.has-illo .guide-row__cat, .guide-row a.has-illo .guide-row__title,
  .guide-row a.has-illo .guide-row__desc, .guide-row a.has-illo .guide-row__meta { grid-column: 1; grid-row: auto; }
  .guide-row__illo { width: 9rem; }
}
@media (max-width: 520px) { .index-list a.has-illo { grid-template-columns: 4.75rem minmax(0, 1fr) 1.5rem; column-gap: 0.9rem; } }
.quiz__symptom { margin-bottom: 1.1rem; }

/* ---------- Guía modelo: veredicto rápido, herramienta, perfiles y caso real ---------- */
.verdict { margin-bottom: 2.5rem; padding: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: linear-gradient(140deg, rgb(12 140 247 / 0.12), transparent 55%), rgb(6 11 21 / 0.9); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.verdict__title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); letter-spacing: -0.02em; }
.verdict__lead { margin-top: 0.4rem; color: var(--text-2); }
.verdict__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.verdict__item { display: grid; align-content: start; gap: 0.35rem; padding: 0.95rem 1rem; border: 1px solid var(--line); border-left-width: 2px; border-radius: var(--radius); background: rgb(6 11 21 / 0.7); }
.verdict__item--go { border-left-color: var(--vr-cyan); }
.verdict__item--wait { border-left-color: var(--vr-azure); }
.verdict__item--stop { border-left-color: #ff8a7a; }
.verdict__label { color: var(--vr-cyan); font-size: 0.64rem; }
.verdict__item--stop .verdict__label { color: #ff8a7a; }
.verdict__item p { color: var(--text); line-height: 1.45; }
.verdict__item .text-link { font-size: 0.9rem; }
@media (max-width: 640px) { .verdict__list { grid-template-columns: 1fr; } }

/* Taller «Hazlo conmigo»: el portátil cambia con cada paso que pulsa el usuario */
.ws { margin-bottom: 2.5rem; padding: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: rgb(6 11 21 / 0.9); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.ws h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); letter-spacing: -0.02em; margin: 0; }
.ws__lead { margin-top: 0.4rem; color: var(--text-2); }
.ws__figure { margin: 1.25rem 0 0; }
.ws__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ws__svg text { fill: var(--text-2); stroke: none; font-size: 13px; font-family: inherit; }
.ws__svg .ws-ssd-label { fill: #fff; font-weight: 700; text-anchor: middle; }
.ws__svg .ws-plate { fill: #0a1220; }
.ws__svg .ws-led { fill: var(--vr-cyan); stroke: none; transition: fill 0.4s; }
.ws__svg .ws-fill, .ws__svg .ws-fill-slow { stroke: none; transform-box: fill-box; transform-origin: left center; }
.ws__svg .ws-fill { fill: var(--vr-cyan); transform: scaleX(0); transition: transform 1.2s var(--ease-out); }
.ws__svg .ws-fill-slow { fill: #ff8a7a; }
.ws-cable, .ws-backup, .ws-cover, .ws-hdd, .ws-ssd, .ws-clone, .ws-slow, .ws-speed { transition: transform 0.7s var(--ease-out), opacity 0.5s; }
.ws-backup, .ws-clone, .ws-speed { opacity: 0; }
.ws-ssd { opacity: 0; transform: translate(0, 46px); }
/* Paso 1-6: apagado y sin cargador */
.ws__svg:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .ws-led { fill: transparent; }
.ws__svg:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .ws-cable { transform: translate(30px, 0); opacity: 0.4; }
.ws__svg:not([data-step="0"]) .ws-slow { opacity: 0; }
.ws__svg[data-step="2"] .ws-backup { opacity: 1; }
.ws__svg:is([data-step="3"], [data-step="4"], [data-step="5"]) .ws-cover { transform: translate(0, -26px); opacity: 0; }
.ws__svg:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .ws-hdd { transform: translate(-150px, 30px); opacity: 0.45; }
.ws__svg:is([data-step="5"], [data-step="6"], [data-step="7"]) .ws-ssd { transform: none; opacity: 1; }
.ws__svg[data-step="6"] .ws-clone { opacity: 1; }
.ws__svg[data-step="6"] .ws-clone .ws-fill { transform: scaleX(0.7); }
.ws__svg[data-step="7"] .ws-speed { opacity: 1; }
.ws__svg[data-step="7"] .ws-speed .ws-fill { transform: scaleX(1); }
.ws__controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.ws__controls[hidden] { display: flex; visibility: hidden; }
.ws__count { flex: 1; text-align: center; color: var(--text); font-weight: 600; font-size: 0.95rem; }
.ws__controls .btn:disabled { opacity: 0.45; cursor: default; }
.ws__steps { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.4rem; counter-reset: none; }
.ws__step { padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-left-width: 2px; border-radius: var(--radius); transition: border-color 0.3s, background-color 0.3s; }
.ws__go { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.ws__go:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.ws__n { color: var(--vr-cyan); font-size: 0.7rem; }
.ws__tip { margin-top: 0.3rem; color: var(--text-2); font-size: 0.93rem; line-height: 1.5; }
.ws__warn { margin-top: 0.35rem; color: #ffb4a8; font-size: 0.9rem; line-height: 1.45; }
.ws__warn::before { content: "⚠ "; }
.ws__step.is-done { border-left-color: rgb(0 208 248 / 0.5); }
.ws__step.is-current { border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.07); box-shadow: 0 0 0 3px rgb(0 208 248 / 0.08); }
.ws__end { margin-top: 1.25rem; color: var(--text-2); }
.ws.is-finished .ws__end { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .ws-cable, .ws-backup, .ws-cover, .ws-hdd, .ws-ssd, .ws-clone, .ws-slow, .ws-speed, .ws__svg .ws-fill { transition: none; }
}

.tool { display: none; margin-bottom: 2.5rem; padding: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: rgb(6 11 21 / 0.9); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.js .tool { display: block; }
.tool h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); letter-spacing: -0.02em; margin: 0; }
.tool__lead { margin-top: 0.4rem; color: var(--text-2); }
.tool__form { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.tool__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.tool__q legend { padding: 0; font-weight: 600; margin-bottom: 0.6rem; }
.tool__q legend .mono { display: block; color: var(--vr-cyan); font-size: 0.62rem; font-weight: 400; margin-bottom: 0.15rem; }
.tool__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tool__opt { position: relative; }
.tool__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tool__opt span { display: block; padding: 0.55rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-2); font-size: 0.93rem; line-height: 1.3; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.tool__opt:hover span { border-color: var(--vr-cyan); }
.tool__opt input:checked + span { border-color: var(--vr-cyan); background: rgb(12 140 247 / 0.16); color: #fff; }
.tool__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.tool__result { margin-top: 1.5rem; min-height: 1.5rem; }
.tool__hint { color: var(--text-3); font-size: 0.93rem; }
.tool__card { display: grid; gap: 0.6rem; padding: 1.1rem 1.25rem; border: 1px solid var(--vr-cyan); border-radius: var(--radius); background: rgb(0 208 248 / 0.07); box-shadow: 0 0 0 4px rgb(0 208 248 / 0.08); animation: panel-in 0.5s var(--ease-out); }
.tool__card--wait { border-color: var(--vr-azure); background: rgb(12 140 247 / 0.1); box-shadow: 0 0 0 4px rgb(12 140 247 / 0.1); }
.tool__card--stop { border-color: #ff8a7a; background: rgb(255 138 122 / 0.08); box-shadow: 0 0 0 4px rgb(255 138 122 / 0.08); }
.tool__card .mono { color: var(--vr-cyan); font-size: 0.64rem; }
.tool__card--stop .mono { color: #ff8a7a; }
.tool__card h3 { font-size: 1.25rem; letter-spacing: -0.015em; margin: 0; }
.tool__links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--text-2); font-size: 0.95rem; }
.tool__reset { justify-self: start; padding: 0.4rem 0; border: 0; background: none; color: var(--text-3); font: inherit; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tool__reset:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .tool__card { animation: none; } }

.profiles { margin-top: 3rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.profiles h2, .case-slot h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.02em; }
.profiles__lead { margin-top: 0.5rem; color: var(--text-2); }
.profile { margin-top: 1.5rem; }
.profile__label { display: inline-block; padding: 0.25rem 0.8rem; border: 1px solid var(--vr-cyan); border-radius: 999px; background: rgb(0 208 248 / 0.08); color: var(--vr-cyan); font-size: 0.85rem; font-weight: 600; letter-spacing: 0; }
.profile__who { margin-top: 0.6rem; color: var(--text-2); }
.profile .product { margin-top: 0.6rem; }
.case-slot { margin-top: 3rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.case-slot__box { margin-top: 0.9rem; padding: 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }

/* ---------- Casos: página de caso ---------- */
.crumbs ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; color: var(--text-3); font-size: 0.92rem; }
.crumbs li + li::before { content: "›"; margin-right: 0.5rem; color: var(--line-strong); }
.crumbs a { color: var(--text-2); text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--text-2); }
.case-hero__title { max-width: 26ch; font-size: clamp(1.9rem, 1.1rem + 3vw, 3.3rem); }
.case-ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; max-width: 56rem; }
.case-ficha div { padding: 0.9rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(6 11 21 / 0.8); }
.case-ficha dt { color: var(--vr-cyan); font-size: 0.9rem; font-weight: 600; }
.case-ficha dd { margin: 0.2rem 0 0; color: var(--text); line-height: 1.4; }
@media (max-width: 760px) { .case-ficha { grid-template-columns: 1fr; } }
.case-body .wrap { max-width: 52rem; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl__stage { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; padding-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.tl__stage:last-child { padding-bottom: 0; }
.tl__stage::before { content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--vr-azure), rgb(61 116 255 / 0.25)); }
.tl__stage:last-child::before { display: none; }
.tl__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--vr-cyan); border-radius: 50%; background: rgb(0 208 248 / 0.08); color: var(--vr-cyan); transition: box-shadow 0.5s, background-color 0.5s, border-color 0.5s; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tl__title { display: flex; align-items: baseline; gap: 0.6rem; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; margin: 0.55rem 0 0.5rem; }
.tl__n { color: var(--vr-cyan); font-size: 0.95rem; font-weight: 600; }
.tl__content > p { color: var(--text-2); font-size: 1.05rem; line-height: 1.7; }
.checks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.checks li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(6 11 21 / 0.7); }
.checks__mark { font-weight: 700; }
.checks .is-ok { border-color: rgb(0 208 248 / 0.4); }
.checks .is-ok .checks__mark, .checks .is-ok .checks__result { color: var(--vr-cyan); }
.checks .is-ko { border-color: rgb(255 138 122 / 0.4); }
.checks .is-ko .checks__mark, .checks .is-ko .checks__result { color: #ffb4a8; }
.checks__name { color: var(--text); }
.checks__result { font-size: 0.92rem; text-align: right; }
@media (max-width: 560px) { .checks li { grid-template-columns: 1.6rem minmax(0, 1fr); } .checks__result { grid-column: 2; text-align: left; } }
.tl__conclusion { margin-top: 0.9rem; padding: 0.8rem 1rem; border-left: 2px solid #ff8a7a; background: rgb(255 138 122 / 0.08); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text) !important; font-weight: 560; }
/* Cada etapa se ilumina al llegar a ella (la pone main.js); el texto nunca se oculta */
.tl.is-armed .tl__icon { border-color: var(--line-strong); background: transparent; color: var(--text-3); }
.tl.is-armed .tl__stage::before { opacity: 0.35; }
.tl.is-armed .tl__stage.is-lit .tl__icon { border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.1); color: var(--vr-cyan); box-shadow: 0 0 0 4px rgb(0 208 248 / 0.1), 0 0 22px rgb(0 208 248 / 0.3); }
.tl.is-armed .tl__stage.is-lit::before { opacity: 1; }
.tl__stage::before { transition: opacity 0.6s; }
.case-end { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.case-box { padding: 1.25rem 1.4rem; border: 1px solid var(--line-strong); border-left: 2px solid var(--vr-azure); border-radius: var(--radius-lg); background: rgb(6 11 21 / 0.85); }
.case-box h2 { font-size: 1.15rem; font-weight: 650; margin: 0 0 0.4rem; }
.case-box p { color: var(--text); line-height: 1.65; }
.case-box--lesson { border-color: var(--vr-cyan); border-left-width: 3px; background: linear-gradient(140deg, rgb(0 208 248 / 0.12), transparent 60%), rgb(6 11 21 / 0.9); box-shadow: 0 0 0 4px rgb(0 208 248 / 0.06), 0 0 30px rgb(0 208 248 / 0.12); }
.case-box--lesson h2 { color: var(--vr-cyan); font-size: 1.3rem; }
.case-box--lesson p { font-size: 1.12rem; font-weight: 560; }
.case-note { margin-top: 1.5rem; color: var(--text-3); font-size: 0.88rem; }
@media (prefers-reduced-motion: reduce) { .tl__icon, .tl__stage::before { transition: none; } }

/* ---------- Jarvis y laboratorio: ronda de interacción ---------- */
/* Preguntas y esquema unidos: haz de luz, «Estás viendo» y botón para ir al esquema */
.holo__tomap { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding: 0.6rem 1.1rem; border: 1px solid var(--vr-cyan); border-radius: 999px; background: var(--vr-cyan); color: #04121f; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; box-shadow: 0 0 0 0 rgb(0 208 248 / 0.5); transition: filter 0.25s, transform 0.25s; }
.holo__tomap[hidden] { display: none; }
.holo__tomap:hover { filter: brightness(1.1); transform: translateY(-1px); }
/* El mismo pulso de anillo del primer aviso, repetido cada 2 s hasta que se pulsa por primera vez */
/* Especificidad mayor que .is-new: si no, la animación de un solo pulso (is-new) pisaba a esta y el anillo no se repetía */
@media (prefers-reduced-motion: no-preference) { .holo__tomap.is-new.is-breathing, .holo__tomap.is-breathing { animation: tomap-ring 2s ease-out infinite; } }
@keyframes tomap-ring { 0% { box-shadow: 0 0 0 0 rgb(0 208 248 / 0.7); } 70%, 100% { box-shadow: 0 0 0 16px rgb(0 208 248 / 0); } }
.holo__tomap__arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .holo__tomap.is-new { animation: tomap-pulse 1.4s ease-out 1; }
  .holo__tomap.is-new .holo__tomap__arrow { animation: tomap-bounce 0.7s ease-in-out 3; }
}
@keyframes tomap-pulse { 0% { box-shadow: 0 0 0 0 rgb(0 208 248 / 0.7); } 100% { box-shadow: 0 0 0 16px rgb(0 208 248 / 0); } }
@keyframes tomap-bounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(5px); } }
.holo__tomap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.holo__beam { position: relative; height: 3rem; margin: 0.5rem auto 0; width: 2px; background: linear-gradient(180deg, rgb(0 208 248 / 0.05), rgb(0 208 248 / 0.45)); }
.holo__beam span { position: absolute; left: -2px; top: 0; width: 6px; height: 40%; border-radius: 6px; background: linear-gradient(180deg, transparent, #9ef2ff); opacity: 0; }
.holo__beam.is-pulse span { animation: beam-pulse 0.9s ease-in both; }
@keyframes beam-pulse { from { top: -10%; opacity: 1; } to { top: 100%; opacity: 0; } }
.page-jarvis .arch-wrap { margin-top: 0.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.arch__seeing { margin-bottom: 0.6rem; color: var(--text-2); }
.arch__seeing strong { color: var(--vr-cyan); font-weight: 600; }
.arch.is-beat .arch__node.is-focus rect, .arch.is-beat .arch__node.is-focus path { animation: node-beat 0.9s ease-out; }
@keyframes node-beat { 0% { filter: none; } 35% { filter: drop-shadow(0 0 10px rgb(0 208 248 / 0.9)); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .holo__beam.is-pulse span, .arch.is-beat .arch__node.is-focus rect { animation: none; } }
/* Estado actual: píldoras con icono y tres miniescenas en bucle (pausadas fuera de pantalla) */
.status__pills li { display: inline-flex; align-items: center; gap: 0.4rem; }
.status__pills svg { fill: none; stroke: var(--vr-cyan); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.stages { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.stage { display: grid; align-content: start; gap: 0.2rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(6 11 21 / 0.6); }
.stage.is-now { border-color: rgb(0 208 248 / 0.5); }
.stage__svg { width: 100%; height: auto; margin-bottom: 0.3rem; }
.stage__svg * { fill: none; stroke: var(--vr-azure); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stage__svg .acc, .stage__svg .stg-in rect { stroke: var(--vr-cyan); }
.stage__svg .stg-trail { fill: rgb(0 208 248 / 0.18); stroke: none; }
.stage__svg .stg-blip { fill: var(--vr-cyan); stroke: none; opacity: 0; }
.stage__svg .stage__ring { opacity: 0.5; }
.stage__svg .stg-dots circle { fill: var(--vr-azure); stroke: none; }
.stage__tag { justify-self: start; padding: 0.05rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-2); font-size: 0.78rem; }
.stage.is-now .stage__tag { border-color: var(--vr-cyan); color: var(--vr-cyan); }
.stage__name { font-weight: 650; color: var(--text); }
.stage__text { color: var(--text-2); font-size: 0.88rem; line-height: 1.4; margin: 0 !important; }
.stg-sweep { transform-box: view-box; transform-origin: 80px 45px; }
@media (prefers-reduced-motion: no-preference) {
  .stages.is-live .stg-in { animation: stg-in 4.5s ease-in-out infinite; }
  .stages.is-live .stg-out { animation: stg-out 4.5s ease-in-out infinite; }
  .stages.is-live .stg-dots { animation: stg-dots 4.5s ease-in-out infinite; }
  .stages.is-live .stg-sweep { animation: stg-sweep 5s linear infinite; }
  .stages.is-live .stg-blip { animation: stg-blip 5s linear infinite; }
  .stages.is-live .stg-card { animation: stg-card 5.5s ease-in-out infinite; }
  .stages.is-live .stg-ok { animation: stg-ok 5.5s ease-in-out infinite; }
}
.stg-in, .stg-out, .stg-dots, .stg-card, .stg-ok { transform-box: fill-box; }
@keyframes stg-in { 0%, 8% { transform: translateX(-14px); opacity: 0; } 18%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes stg-dots { 0%, 20% { opacity: 0; } 25%, 42% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes stg-out { 0%, 45% { transform: translateX(14px); opacity: 0; } 55%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes stg-sweep { to { transform: rotate(360deg); } }
@keyframes stg-blip { 0%, 10% { opacity: 0; } 14% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes stg-card { 0%, 6% { transform: translateX(0); opacity: 0; } 14% { opacity: 1; } 45%, 88% { transform: translateX(52px); opacity: 1; } 100% { transform: translateX(52px); opacity: 0; } }
@keyframes stg-ok { 0%, 55% { opacity: 0; transform: scale(0.6); } 62%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.stg-ok { transform-origin: center; }
.stages:not(.is-live) .stg-blip { opacity: 1; }
@media (max-width: 560px) { .stages { grid-template-columns: minmax(0, 1fr); } }
/* Demos: animación de espera (lib/idle.js) */
.tk__tokens { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .demo.is-idle.is-visible .tk__tokens::after { content: ""; display: inline-block; width: 2px; height: 1.3em; align-self: center; background: var(--vr-cyan); animation: idle-caret 1.1s steps(1) infinite; }
  .demo.is-idle.is-visible .tok { animation: idle-wave 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.12s); }
  .demo.is-idle.is-visible .tk__bar span { animation: idle-flash 4.5s ease-in-out infinite 1.5s; }
  .demo.is-idle.is-visible .rag__docs { position: relative; }
  .demo.is-idle.is-visible .rag__docs::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(0 208 248 / 0.16), transparent); border-bottom: 1px solid rgb(0 208 248 / 0.5); animation: idle-scan 4s ease-in-out infinite; }
  .demo.is-idle.is-visible .rag__steps li { animation: idle-step 6s ease-in-out infinite; }
  .demo.is-idle.is-visible .rag__steps li:nth-child(2) { animation-delay: 0.8s; }
  .demo.is-idle.is-visible .rag__steps li:nth-child(3) { animation-delay: 1.6s; }
  .demo.is-idle.is-visible .rag__steps li:nth-child(4) { animation-delay: 2.4s; }
}
@keyframes idle-caret { 50% { opacity: 0; } }
@keyframes idle-wave { 0%, 70%, 100% { filter: none; } 80% { filter: brightness(1.6) drop-shadow(0 0 6px rgb(0 208 248 / 0.7)); } }
@keyframes idle-flash { 0%, 75%, 100% { filter: none; } 85% { filter: brightness(1.8) drop-shadow(0 0 6px rgb(0 208 248 / 0.9)); } }
@keyframes idle-scan { from { top: 0; } 50% { top: 82%; } to { top: 0; } }
@keyframes idle-step { 0%, 15%, 100% { color: var(--text-3); border-color: var(--line); background: transparent; } 5%, 10% { color: var(--vr-cyan); border-color: var(--vr-cyan); background: rgb(0 208 248 / 0.08); } }

/* ---------- Logo holograma ---------- */
.sent { display: grid; justify-items: center; text-align: center; gap: 0.5rem; }
.sent .lholo { margin-bottom: 0.75rem; }
.sent__title { max-width: 20ch; margin-inline: auto; }
.sent .page-hero__intro { margin-inline: auto; }
.sent__spam { max-width: 38rem; color: var(--text-2); }
.sent .actions { justify-content: center; }
.lholo { position: relative; display: inline-block; perspective: 900px; line-height: 0; flex: none; }
.lholo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 12px rgb(0 208 248 / 0.35)); }
.lholo--sm { width: 7.5rem; }
.lholo--md { width: min(15rem, 62vw); }
.lholo--lg { width: min(26rem, 100%); }
.lholo__facet { fill-opacity: 0.8; }
.lholo__edge { fill: none; stroke: #8cecff; stroke-opacity: 0.7; stroke-width: 6; stroke-linejoin: round; }
.lholo__scan { pointer-events: none; }
.lholo__ring { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; margin: -50% 0 0 -50%; border: 2px solid var(--vr-cyan); border-radius: 50%; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Giro lento sobre su eje, brillo y línea de escaneo. Las animaciones existen siempre y solo se PAUSAN fuera de pantalla
     (main.js pone .is-live): así no se reinician al salir y volver a entrar, y la entrada (se materializa / recibido) suena una sola vez. */
  .lholo svg { animation: lholo-spin 22s linear infinite paused, lholo-glow 5s ease-in-out infinite paused; }
  .lholo.is-live svg { animation-play-state: running; }
  .lholo .lholo__scan { animation: lholo-scan 4.4s linear infinite paused; }
  .lholo.is-live .lholo__scan { animation-play-state: running; }
  /* Se materializa: se dibuja el contorno y se rellena de luz (una vez, al cargar) */
  .lholo--draw .lholo__edge { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lholo-draw 1.7s ease-out 0.2s forwards; }
  .lholo--draw .lholo__facet { opacity: 0; animation: lholo-fill 1s ease-out calc(1.2s + var(--i) * 0.08s) forwards; }
  .lholo--draw svg { animation-delay: 2.8s, 0s; }
  /* Recibido: destello y anillos que se expanden (una vez) y después el giro */
  .lholo--recv svg { animation: lholo-flash 1.3s ease-out 1, lholo-spin 22s linear infinite 1.6s paused, lholo-glow 5s ease-in-out infinite 1.6s paused; }
  .lholo--recv.is-live svg { animation-play-state: running, running, running; }
  .lholo--recv .lholo__ring { animation: lholo-ring 1.6s ease-out 0.15s forwards; }
  .lholo--recv .lholo__ring--2 { animation-delay: 0.45s; }
}
@keyframes lholo-spin { to { transform: rotateY(360deg); } }
@keyframes lholo-glow { 0%, 100% { filter: drop-shadow(0 0 10px rgb(0 208 248 / 0.3)); } 50% { filter: drop-shadow(0 0 22px rgb(0 208 248 / 0.6)); } }
@keyframes lholo-scan { from { transform: translateY(0); } to { transform: translateY(1010px); } }
@keyframes lholo-draw { to { stroke-dashoffset: 0; } }
@keyframes lholo-fill { to { opacity: 1; } }
@keyframes lholo-flash { 0% { filter: brightness(3) drop-shadow(0 0 40px #9ef2ff); } 100% { filter: brightness(1) drop-shadow(0 0 12px rgb(0 208 248 / 0.35)); } }
@keyframes lholo-ring { 0% { transform: scale(0.25); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
/* Marca de agua: logo VR en la esquina inferior derecha de la tarjeta, recortado por el borde, tras el contenido */
.watermark { position: absolute; right: -2.5rem; bottom: -2rem; z-index: 0; width: min(22rem, 70%); height: auto; opacity: 0.05; pointer-events: none; }
/* Holograma proyectado de «Directo»: base emisora con anillos, haz de luz y el logo flotando dentro, sin que crezca la tarjeta */
.hproj { position: relative; flex: none; width: 6rem; height: 5.6rem; margin-block: -0.5rem; perspective: 600px; line-height: 0; }
.hproj__base { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hproj__beam { opacity: 0.85; }
.hproj__disk { fill: rgb(0 208 248 / 0.2); stroke: #7fe9ff; stroke-width: 1; }
.hproj__ring { fill: none; stroke: #00d0f8; stroke-width: 0.8; stroke-dasharray: 6 8; opacity: 0.7; }
.hproj__logo { position: absolute; left: 50%; top: 4%; width: 58%; margin-left: -29%; filter: drop-shadow(0 0 8px rgb(0 208 248 / 0.55)); }
.hproj__logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.hproj__facets path { fill-opacity: 0.5; }
.hproj__edges path { fill: none; stroke: #bff6ff; stroke-width: 7; stroke-opacity: 0.85; stroke-linejoin: round; }
.hproj__scan { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hproj.is-live .hproj__ring--1 { animation: hp-ring 14s linear infinite; }
  .hproj.is-live .hproj__ring--2 { animation: hp-ring 22s linear infinite reverse; }
  .hproj.is-live .hproj__beam { animation: hp-beam 5s ease-in-out infinite; }
  .hproj.is-live .hproj__logo { animation: hp-float 6s ease-in-out infinite, hp-flicker 9s steps(1) infinite; }
  .hproj.is-live .hproj__logo svg { animation: hp-sway 12s ease-in-out infinite alternate; }
  .hproj.is-live .hproj__scan { animation: hp-scan 2.4s linear infinite; }
}
@keyframes hp-ring { to { stroke-dashoffset: -140; } }
@keyframes hp-beam { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes hp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hp-flicker { 0%, 90%, 94%, 100% { opacity: 1; } 91%, 93% { opacity: 0.72; } }
@keyframes hp-sway { from { transform: rotateY(-35deg); } to { transform: rotateY(35deg); } }
@keyframes hp-scan { from { transform: translateY(0); } to { transform: translateY(28px); } }